@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: #b7f0ff;    
}

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

h1,h2,h3 { display:none; }

/*======================
====Main CSS=====
=======================*/
.TooltipWrapper { display: none; }
.tooltip { position: fixed; top:80px; right: 0; z-index: 999;}
.header-bg {
    background: url("images/bg-header.jpg") center top no-repeat;
    max-width: 100%;
    height: 131px; 
    overflow: hidden;
    margin:0 auto;
    text-align: center;   
}

.logo {
    max-width: 213px;
    margin:0 auto; 
    padding-top: 42px;     
}

.header-pic {
    background: url("images/main-pic.png") center top no-repeat;
    max-width: 100%;
    height: 655px; 
    overflow: hidden;
    margin:0 auto;
    text-align: center;     
    z-index: 200;  
    position: relative;
} 
.main-title {
    max-width: 436px;
    margin:0 auto; 
    padding-left: 25%;
    padding-top:2%;
}
/*======================
====nav CSS=====
=======================*/

#main-nav {
   z-index: 990;
   position: relative;
}

.block_menu {
	width: 100%;
	text-align: center;
    font-family: 'Noto Serif TC', serif,Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    height: 53px;
    background-color: #c3e7f1;
    border-bottom:2px solid #ffffff;
}

.sticky {
    top: 30px;
}

.menu_box {
	display:inline-block;
}
.menu_box a {
    display: inline-block;     
}

.menu .icon01, .menu .icon02,.menu .icon03 { height: 35px; /*line-height:36px;*/ color: #336e7e; font: 600 20px "微軟正黑體";  padding-left: 37px;  /* text-indent: -5000px; */   }
.menu { margin-right: 40px; line-height: 53px;}
.menu:last-child { margin-right: 0px;  }
.menu a {  color: #336e7e; text-decoration: none;  padding:3px 8px; }
.menu a:hover ,.menu a.active {  background: #e7faff; border-radius: 8px; }


.menu .icon01 {  background: url("images/icon-nav.png") 0 -37px no-repeat;  }
.menu a:hover .icon01 ,.menu .active .icon01 { background: url("images/icon-nav.png") 0 0 no-repeat; color:#000;  }

.menu .icon02 {  background: url("images/icon-nav.png") 0 -109px no-repeat;  }
.menu a:hover .icon02 ,.menu .active .icon02 { background: url("images/icon-nav.png") 0 -72px no-repeat; color:#000;  }

.menu .icon03 {  background: url("images/icon-nav.png") 0 -184px no-repeat;  }
.menu a:hover .icon03 ,.menu .active .icon03 { background: url("images/icon-nav.png") 0 -147px no-repeat; color:#000; }

.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);
}

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

.row { max-width: 960px; margin:0 auto; padding:0 10px; }

#main { 
    background: url("images/bg-movie.png") center top no-repeat; 
    margin-top:-370px; z-index: 100; position: relative;  
}
.subtitle { 
    background: url("images/bg-title.png") left top no-repeat; height: 203px;
}
.subtitle01 { 
    background: url("images/bg-title01.png") left top no-repeat; height: 203px;
}

.subtitle02 { 
    background: url("images/bg-title02.png") left top no-repeat; height: 203px;
}

.subtitle span {  
    font: 600 26px 'Noto Serif TC', serif; color: #67a254;
    padding-top: 76px;
    padding-left: 120px;
    display: block;
    letter-spacing: 1px;    
}

.subtitle01 span,.subtitle02 span {  
    font: 600 36px 'Noto Serif TC', serif; color: #67a254;
    padding-top: 100px;
    padding-left: 130px;
    display: block;
    letter-spacing: 1px;
}

.word {  background: url("images/bg-word.png") left -70px no-repeat; margin-top: -30px; padding-bottom:50px; }
.word span { font: 600 15px "微軟正黑體" ;  display: block; line-height: 1.8em; max-width:650px; padding-left: 120px; }
.wordsp { background: none; }
#video { padding-top: 300px; }

.video-bg { background: url("images/bg-movie-leaf.png") center 100px no-repeat;  }     
.video-box { max-width: 100%; margin:0 100px; }
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
}

.video-icon  { text-align: center; }

.hotcity-bg { background: url("images/bg-ct.png") center 150px repeat-y; }

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

.ct-box { max-width: 960px; margin:0 auto; clear:both; margin-bottom: 30px; overflow: hidden;  }

.ct35 { max-width:35%; }
.ct65 { max-width:65%; }

.pic-box {  background: url("images/bg-pic.png") 20px 20px no-repeat; max-width: 100%; }

.pic01 { max-width:65%; display: inline-block; vertical-align:top;}
.pic02 { max-width:32%; display: inline-block; vertical-align:bottom; padding-right: 10px; }
.pic02 img { margin-top:180px;}
.pic03 { vertical-align:bottom; padding: 10px; padding-left: 100px; }

.spot-box { padding: 10px; }
.spot-title { text-align: center;}
.spot-title p { 
    font: 600 32px 'Noto Serif TC', serif; color: #b66b1b;
}
.spot-title p span { 
    font: 600 14px 'Noto Serif TC', serif; color: #c49545; padding-left: 3px;
}
.spot-ct { 
    font: 600 15px "微軟正黑體" ; line-height: 1.8em; 
    border:4px solid #fff; border-width: 4px 0; 
    padding:10px 20px 20px 20px; margin:0 10px 10px 10px; 
    position: relative;
 }
.flower { position:absolute; margin-top:-30px;}

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

#tour {  padding-top:120px; margin-top: -120px; padding-bottom:100px; 
    
    background: linear-gradient(top, rgba(255, 255, 255, 0)0%, rgba(155, 246, 243, 1)100%);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0)0%, rgba(155, 246, 243, 1)100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0)0%, rgba(155, 246, 243, 1)100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0)0%, rgba(155, 246, 243, 1)100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbf4fd', endColorstr='#9bf6f3',GradientType=0 );
    
 }

.tour-bg { background: url("images/bg-tour.png") center top no-repeat; min-height: 780px; z-index: 100;}
.tour-box { padding:0 20px; margin:0 50px; }

.tour-title { 
    background: url("images/bg-tour-title.png") center top no-repeat; 
    height:41px; width: 155px; padding-top:12px; letter-spacing: 1px;
    color:#ffffff; font: 600 18px "微軟正黑體" ; text-align: center;
    margin-bottom: 20px;
}
.tour-list { margin-bottom: 20px; }
.tour-list li  { 
    font: 600 16px "微軟正黑體" ; color: #505050; line-height: 1.8em;
    background: #fff; border-left: 8px solid #00a3a6; overflow: auto;
    padding:7px 15px; margin-bottom:10px; 
}

.tour-list li a { color: #505050; text-decoration:none; display: block; width: 100%; height:100%; }
.tour-list li a span { display: inline-block;}
.tour-list li a em { font-style: normal; font: 600 14px "微軟正黑體" ; color:#ce8a06; padding-left: 6px;  }

.name_l { max-width:75%;   }
.price_r { max-width:25%;  float: right; color:#d45f00; }


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

@media only screen and ( max-width:960px) 
{ 
    .ct35 { max-width:43%; }
    .ct65 { max-width:57%; }    
    .icon { display: none;}    
}

@media only screen and ( max-width:850px) 
{ 
    .ct35 { max-width:100%; }
    .ct65 { max-width:100%; }  
    .left { float:none;}
    .right { float:none; }
    .icon { display:inline-block;}    
    

}

@media only screen and ( max-width:812px)
{     
    .word span { padding-left: 60px; }   
    .tour-box { margin:0 20px; }   
}
/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
    #main-nav { display: none; }
}

@media only screen and (max-width:600px) 
{
    .header-pic {
        background: url("images/main-pic-s.png") center top no-repeat;
        height: 400px; 
    } 
    .subtitle,.subtitle01,.subtitle02  { margin-left: -70px; }
    .word span { padding-left: 15px; padding-right: 20px; }   
}

/*---手機版-----*/
@media only screen and ( max-width:500px) 
{ 
    .video-box { margin:0;  }
    .pic01 { display: block; max-width: 100%; }
    .pic02 { display: block; max-width: 100%; }
    .pic-box {  background:none;  }
    .pic02 img { margin-top:20px;}
    .pic03 { padding-left: 0px; }
    .name_l { max-width:100%;   }
    .price_r { max-width: 100%;  font-size:18px; float:none; text-align:right;  }
    .tour-list li a span { display: block;}
    .tour-list li a em { display: block; }
    .tour-box { margin:0; }    
    .tooltip { top:30px; }
    
}

@media only screen and ( max-width:380px) 
{ 
    .icon,.icon-l { display: none;}
    .spot-ct { padding:10px 0px 20px 0px; }
    .spot-title p span { font-size: 18px; }
    .main-title { padding-left: 15%; padding-top:5%;}
   
}