@charset "utf-8";

/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;	
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}

a img {
	border: none;
}

.clean { clear:both;}

.clearfix {
  overflow: auto;
}

img { max-width:100%;}

.left { float: left;}
.right { float: right;}

/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

#backtop { z-index: 9999; position: relative;}

body {
    font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;
    background-color: #115ca4;    
}

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
	line-height:1.8em;
	font-size:15px;
    color:#363636;
    background: url("images/bg01.png") center top repeat-y;
}

.bg01 { background: url("images/bg02.png") center top repeat-y; }

h1,h2,h3 { display:none; }

#main {background: url("images/bg03.png") center top no-repeat; }
.bg-main-top { background: url("images/bg07.png") left top no-repeat; margin-top:104px;}

/*======================
====Main CSS=====
=======================*/
/*======================
==== Slider CSS=====
=======================*/

#demo-1 {
    position: relative; /* can either be relative, absolute or fixed. If position is not set (i.e. static), it would be set to "relative" by script */
    overflow: hidden; /* to bound the empty top space created by inner element's top margin */
    width: 100%;
    min-height: 686px;
}
.demo-inner-content {
    position: relative; /* if position is not set, the script will set it to 'relative'. */
    z-index: 2; /* if z-index is not set, the script will set it to '2'. */
    margin: 0 auto;
    padding-top:115px;
    text-align: center;
}
.bg-inner { 
    position: relative; /* if position is not set, the script will set it to 'relative'. */
    margin: 0 auto;
    min-height: 702px; 
    background:url("images/main-border.png") center bottom no-repeat;    
    width: 100%;
    z-index: 3;  
}
.mainpic-xs { display: none;}

/*======================
====nav CSS=====
=======================*/

#main-nav {
   z-index: 990;
   position: relative;
   overflow: hidden;
   margin-top:-70px;
}

.block_menu {
	width: 100%;
	text-align: center;
    height: 56px;
}

.sticky { top: 30px; }

.menu_box { display:inline-block; margin-right: -4px; }
.menu_box a { display: inline-block; }
.menu {  line-height: 56px; overflow: hidden; }

.menu a {  text-decoration: none;  text-indent: -5000px; }

.menu .menu01 {  background: url("images/nav.png") 0px 0 no-repeat; width: 204px; }
.menu a:hover .menu01 ,.menu .active .menu01 { background: url("images/nav.png") 0px -56px no-repeat;   }

.menu .menu02 {  background: url("images/nav.png") -204px 0 no-repeat; width: 207px; }
.menu a:hover .menu02 ,.menu .active .menu02 { background: url("images/nav.png") -204px -56px no-repeat;  }

.menu .menu03 {  background: url("images/nav.png") -411px 0 no-repeat; width: 182px; }
.menu a:hover .menu03 ,.menu .active .menu03 { background: url("images/nav.png") -411px -56px no-repeat;  }

.menu .menu04 {  background: url("images/nav.png") -593px 0 no-repeat; width: 161px; }
.menu a:hover .menu04 ,.menu .active .menu04 { background: url("images/nav.png") -593px -56px no-repeat;  }

.active {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/*------------*/
#wufenlins {  padding-top:100px; margin-top: -90px; padding-bottom:70px; }
#party,#attraction {  padding-top:130px; margin-top: -90px; padding-bottom:70px; }
#tour {  padding-top:100px; margin-top: -90px;}

.row { max-width: 960px; margin:0 auto; padding:0 10px; }
.wufen-box { max-width: 900px; margin:0 auto; text-align: center;  }
.wufen-box p { color:#ffffff; font: 400 16px 'Noto Serif TC', serif ; text-align: left; line-height: 1.8em; padding-bottom: 20px;letter-spacing: 1px; }
.wufen-pic { max-width: 100%;}

/*---------*/

.ct33 {  width:32%; display: inline-block; vertical-align: top; padding-right: 1%; padding-bottom:20px;}

/*-----------*/

.food-box { max-width: 960px; margin:0 auto; clear:both; overflow: hidden; text-align: center; }
.subtitle { text-align: center; margin-top:10px; margin-bottom:2rem; /*padding-top:50px;*/}
.subtitle-bg { background:url("images/bg-title.png") center top no-repeat;   }

.food-name { margin-top:8px;}
.food-name span { color:#ffffff; font: 600 22px 'Noto Serif TC', serif ;  background: #013465;  border-radius: 20px; padding:6px 15px; letter-spacing: 1px;}
.food-info { color:#ffffff; font: 400 16px 'Noto Serif TC', serif ; line-height: 1.8em; margin:16px 26px;  text-align: left; letter-spacing: 1px;}

/*----tour-box----*/

.bg-tour { background: #66a4cc url("images/bg06.png") center top repeat-y; padding:30px 0 60px 0; }
.bg-tour2 { background: url("images/bg05.png") center 200px no-repeat;  }

.ct-box { max-width: 960px; margin:0 auto; clear:both; overflow: hidden; margin-top:20px; text-align: center;}

.tour-info-list { margin:5px 0px; padding:0 10px; }
.tour-info-list li { 
    font: 600 15px 'Noto Serif TC', serif  ; color: #2e2e2e; line-height: 1.8em;
    padding-left: 12px; text-indent: -12px; 
    text-align: left;
}
.tour-info-list li::before {
    content: url("images/icon01.png");
    font-size:10px;
    padding-right: 6px;
}
.tour-info-list li span { color:#dc4a03;}

 .ct50 {  width:48%;  display: inline-block; vertical-align: top; margin-right: 1%; margin-bottom:20px;}
 
 .ct50 a { background: #FFFFFF;text-decoration: none; display:block;  padding:10px;}
 .ct50 a:hover { background: #fff9f4;  }
 
 .ct50 a .main-tour-box { min-height: 450px; }
 
 .ct-name { background:#9de3f4; color:#202020; font: 600 20px 'Noto Serif TC', serif  ; line-height: 1.6em; text-align: center; padding:10px 0; margin-top:-10px;}
 .ct-class { position: absolute; top:16px; font: 600 15px "微軟正黑體"; background: #f7dac3; border-radius: 8px; color:#202020; padding:3px 5px; margin-left: 8px;  width:50px; text-align: center; margin-right: 8px;}
 
 .ct-price { color: #252525; font: 600 14px "微軟正黑體" ; text-align: center; padding:10px 0; position:absolute; right: 0; bottom: 0; left: 0; margin: auto; }
 .ct-price span {  color:#ff0000;  font: 600 32px "微軟正黑體" ; font-family: 'Barlow', sans-serif; }
 
 /*-----------*/
 .attr-box { max-width: 960px;  margin: 0 auto; text-align: center;  }
 .slider-box {  max-width:629px; float: left;  }
 .word-box {  max-width:290px;  float: right;  text-align:left;   }
 
 .word-box { margin:40px 8px 0 8px;  }
 .word-box p { background: #003e7a; color:#ffffff; padding:10px 16px; font: 400 16px 'Noto Serif TC', serif ; line-height: 1.8em; letter-spacing: 1px;}

/*------media query----------*/

@media only screen and ( max-width:960px) 
{ 
.slider-box { margin:0 10%; max-width:100%;float:none;} 
.word-box {  max-width:100%;  float:none;  margin: 0 auto;  }
}

@media only screen and ( max-width:850px) 
{ 
    .ct33 {  width:48%; }   
}

/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
    #main-nav { display: none; }
    #wufenlins,#party,#tour,#attraction { padding-top:0px; margin-top: 0px;  }
    .bg-main-top { background: none; margin-top:0px;}
    .slider-box { margin:0 ; } 
    
    
}

@media only screen and ( max-width:700px) 
{ 
    .ct50 {  display: block; width:100%; }
    .ct50 a { margin:25px 0; }
    .ct50 a .main-tour-box {  min-height: 550px;  }
    .ct-price { margin-top:80px;} 
    
}

@media only screen and (max-width:600px) 
{
    .mainpic-xs { display:block;}
    .mainpic { display:none;}
     #demo-1 { min-height: 450px;  }
     .demo-inner-content { padding-top:60px; }
    .bg-inner { 
        min-height: 500px; 
        background:url("images/main-border.png") center bottom no-repeat;    
    }
    .ct50 a .main-tour-box { min-height: 500px;}   
    
}

@media only screen and ( max-width:550px) 
{ 
    .ct50 a .main-tour-box { min-height: 480px;}   
    
}
@media only screen and (max-width:480px) 
{
   .ct33 {  width:98%; }   
   .ct50 a .main-tour-box { min-height: 420px;}   
   
}

/*---手機版-----*/


@media only screen and ( max-width:380px) 
{ 
    .ct50 a .main-tour-box { min-height: 380px;}   
    
}