@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,header {
    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;
}

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

h1,h2,h3 { display:none; }

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

.side-link  { position: fixed; right: 10px; top:35%; z-index: 9999; }
.side-link a { display: block; width:100%; height: 100%; outline: none;}

/*----top-nav----*/

.top-nav { background: url("images/bg-main-nav.png") center top no-repeat; height: 164px;}
.logo { padding-top:40px; padding-left: 20px; float: left;}

.t-nav {	
	text-align: left;
    font-family:"微軟正黑體","黑體";
    font-weight: 600;
    overflow: hidden;
    height: 77px; 
    padding-top:30px;
	padding-left: 20px;
 }

ul.t-nav li { display:inline-block; height: 100%; text-indent: -5000px;}

ul.t-nav li#day228 { background: url("images/menu.png") 0 0 no-repeat; width:84px;  }
ul.t-nav li#day402 { background: url("images/menu.png") -84px 0 no-repeat; margin-left: -4px; width:113px;}
ul.t-nav li#day501 { background: url("images/menu.png") -197px 0 no-repeat; margin-left: -4px; width:87px;}
ul.t-nav li#day612 { background: url("images/menu.png") -284px 0 no-repeat; margin-left: -4px; width:90px;}
ul.t-nav li#day918 { background: url("images/menu.png") -374px 0 no-repeat; margin-left: -4px; width:89px;}
ul.t-nav li#day1010 { background: url("images/menu.png") -463px 0 no-repeat; margin-left: -4px; width:85px;}

ul.t-nav li#day228 a.active3, ul.t-nav li#day228 a:hover { background: url("images/menu.png") 0 -77px no-repeat;}
ul.t-nav li#day402 a.active3, ul.t-nav li#day402 a:hover { background: url("images/menu.png") -84px -77px no-repeat;}
ul.t-nav li#day501 a.active3, ul.t-nav li#day501 a:hover { background: url("images/menu.png") -197px -77px no-repeat; }
ul.t-nav li#day612 a.active3, ul.t-nav li#day612 a:hover { background: url("images/menu.png") -284px -77px no-repeat;}
ul.t-nav li#day918 a.active3, ul.t-nav li#day918 a:hover { background: url("images/menu.png") -374px -77px no-repeat;}
ul.t-nav li#day1010 a.active3, ul.t-nav li#day1010 a:hover { background: url("images/menu.png") -463px -77px no-repeat;}

/*ul.t-nav li#day228:hover { background: url("images/menu.png") 0 -153px no-repeat;}
ul.t-nav li#day402:hover { background: url("images/menu.png") -84px -153px no-repeat; }*/
ul.t-nav li#day501:hover { background: url("images/menu.png") -197px -153px no-repeat; }
ul.t-nav li#day612:hover { background: url("images/menu.png") -284px -153px no-repeat; }
ul.t-nav li#day918:hover { background: url("images/menu.png") -374px -153px no-repeat; }
ul.t-nav li#day1010:hover { background: url("images/menu.png") -463px -153px no-repeat; }



ul.t-nav li a { display: block; width:100%; height: 100%; outline: none;}


.header-bg {
    background: url("images/bg-header-228.jpg") center top no-repeat;
    height: 450px; 
    margin:-45px auto 0 auto;
	z-index: 50;		
}

.mainpic { 
    max-width: 960px;
    margin:0 auto;
	position: relative;
}

.main-title { 
    z-index: 900;
    text-align: center;	
	padding-top: 50px;
}

.girl{position: absolute;left: 40px;top:18px;}

.header-md { display: none; text-align: center;margin: 0 auto;}
.header-xs { display: none; text-align: center;margin: 0 auto;}



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

#main { background: url("images/bg-main.png") center 80px no-repeat; }
#main-nav{
   z-index: 990;
}

#block_menu {
	width: 100%;
	text-align: center;
    font-family:"微軟正黑體","黑體";
    font-weight: 600;
    overflow: hidden;
}

.sticky {
    /*top: 110px;*/
    top:30px;
}
.blue-border { background: #2066b4; height: 5px;}
.class-nav { background: #cbfffc;  height: 98px; }
.class-nav p { 
    display:inline-block; font: 600 22px 'Noto Serif TC', serif; width: 99px; height: 52px; 
    color:#111111; margin: 0 10px; margin-top:20px; 
}
.class-nav p a { 
    display:block; width:100%; height:100%; text-align: center; text-decoration: none; 
    color:#111111;  background: url("images/bg-nav2.png") 0 0 no-repeat;
 }
.class-nav p a:hover,.class-nav p a.active2 { background: url("images/bg-nav.png") center top no-repeat;   }


.nav { background: #2066b4; border-radius: 16px;  max-width: 960px; margin:0 auto; height: 46px; margin-top:-30px; padding-top:10px;}
.nav li { 
    display:inline-block; font: 600 18px 'Noto Serif TC', serif; 
    color:#ffffff; margin: 0 4px;
}
.nav li a { display:block; width:100%; height:100%; text-align: center; text-decoration: none;  color:#ffffff; padding:6px 4px; }
.nav li a:hover,.nav li a.active { background: #fff9b5; border-radius: 17px; color:#111111; line-height: 24px; }

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

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

#special,#tour01,#tour02,#tour03,#tour04,#tour05,#tour06,#tour07 {  padding-top:125px; margin-top: -125px; }
#north,#central,#south,#east,#island,#txg,#khh {  padding-top:125px; margin-top: -125px; }
#food,#hotspring,#spa,#park,#show,#experience,#car-rentals { padding-top:125px; margin-top: -125px;}

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

.mr-50 { padding-top:50px; }

.bg-in {  padding:30px 0 50px 0; }

.subtitle { text-align: center; padding:44px 0 25px 0; background: url("images/bg-subtitle-green.png") center center no-repeat; /*margin:10px 0;*/}
.subtitle2 { text-align: center; padding:44px 0 25px 0; background: url("images/bg-subtitle-blue.png") center center no-repeat; /*margin:10px 0;*/}
.subtitle3 { text-align: center; padding:44px 0 25px 0; background: url("images/bg-subtitle-yellow.png") center center no-repeat; /*margin:10px 0;*/}

.ct33 {  width:33%; display: inline-block; vertical-align: top;  }
.ct50 {  width:49%;  display: inline-block; vertical-align: top;  }

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

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

.ct33 a { background: #f5ffff; text-decoration: none; display:block; margin:0 5px; border:2px solid #353636; border-radius: 12px 12px 0 0 ; }
.ct33 a:hover { background: #fcf9e3; }

.ct50 a { background: #fff8e4; text-decoration: none; display:block; border:10px solid #fbe2b7; border-radius: 15px;}
.ct50 a:hover { background: #fefdf1; border:10px solid #f4e262; }

.ct-box .ct50:first-child { margin:0 6px;   }

.ct33 a .main-tour-box { padding:2px; min-height: 430px; /*display:table;  */}
.ct33 a .main-tkt-box { padding:2px; min-height: 400px;  }

.ct50 a .main-tour-box { min-height: 430px;  }

.tour-pic { margin:0 auto; text-align: center; padding:7px 7px 0 7px; }

.tour-city { 
    position: absolute; top:12px; font: 600 15px "微軟正黑體"; background: #edc901; border-radius: 6px; 
    color:#040404; padding:2px 6px; margin-left:10px; width:50px; text-align: center; 
 }
.tour-name,.hotel-name,.tkt-name,.pkg-name { 
    color:#2f2f2f; font: 600 18px "微軟正黑體" ; background:#b1f2d2; line-height: 24px; padding:10px; margin-top:-5.5px; 
    text-align: center; border-bottom: 2px solid #353636; 
}
.tour-name span,.hotel-name span,.tkt-name span,.pkg-name span { display: block;}

.pkg-name { background: #ffe3ce;}
.hotel-name { background:#98f2ef;}
.tkt-name { background: #f2ed99; }

.tour-info-list { margin:10px 10px;  min-height: 90px; padding-bottom:30px;}
.tour-info-list li ,.tour-info-list p { 
    font: 600 14px "微軟正黑體" ; color: #2e2e2e; line-height: 1.8em;
    padding-left: 12px; text-indent: -12px; 
    text-align: left;
}
.tour-info-list li::before {
    content: url("images/icon.png");
    font-size:12px;
    padding-right: 6px;
}
.tour-info-list li span { color:#c46100;}

.tour-price { color: #252525; font: 600 14px "微軟正黑體" ; text-align: center; padding:10px 0; position:absolute; right: 0; bottom: 0; left: 0; margin: auto; }
.tour-price span {  color:#ff0000;  font: 600 32px "微軟正黑體" ; font-family: 'Barlow', sans-serif; }

.tkt-discount  {    position:absolute; right: 0; bottom: 0; left: 0; margin: auto; padding-bottom: 10px;  }

.discount { color:#ffffff; font: 600 12px "微軟正黑體" ; letter-spacing: 1px;  float:left; margin-top:10px; }
.discount span { background: #fc4c02;  border-radius: 3px 3px 20px 20px; padding:4px 12px; margin-left: 6px; }
.discount span em { font-style:normal; font: 600 17px "微軟正黑體" ; }

.tkt-list { padding-bottom:30px; }
.tkt-price { color: #252525; font: 600 14px "微軟正黑體" ;  padding:0 10px; float: right; }
.tkt-price span {  color:#ff0000;  font: 600 32px "微軟正黑體" ; font-family: 'Barlow', sans-serif; }


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

.tour-box { background: #f3fff6; border:2px solid #353636; border-radius: 16px 16px 0 0; margin:0 0 60px 0; padding-top:20px; padding-bottom: 30px; }
.tour-box-hotel { background: #e8fffe;  }
.tour-box-pkg { background: #fffcfa;  }

.special-box {  text-align: center; border:2px solid #353636; border-radius: 16px 16px 0 0;}
.special-title::before{
    content: url("images/icon01.png");
    padding-right: 16px;
}
.special-title::after{
    content: url("images/icon01.png");
    padding-left: 16px;    
}
.special-title { font: bold 27px "微軟正黑體"; color:#3e3e3e; background:#d6fa88 ; padding:12px 0; }
.special-box p { font: bold 19px "微軟正黑體"; color:#363636; background: #ffffff; margin-bottom: 20px; padding:8px 0; line-height: 1.8em;}
.special-box p span { color: #fc4c02;}
.special-box p.ex { font: bold 13px "微軟正黑體"; color: #fc4c02; background:none; padding-left: 20px;}

.city { font: 600 15px "微軟正黑體"; background: #03b26a; border-radius: 8px; color:#202020; padding:3px 5px; margin-left: 16px;  width:50px; text-align: center; margin-right: 8px;}

/*.travel { font: 600 15px "微軟正黑體"; background: #fff; border-radius: 0 8px 8px 0;  color:#d5493f; padding:3px 5px; margin-left: 16px;  width:70px; text-align: center; margin:0 0 10px 0; }*/

.tour-list { margin-top:5px; text-align: left; }

.tour-list li  { 
    font: 700 16px "微軟正黑體" ; color: #363636; line-height: 1.8em;
    overflow: auto;
    margin-bottom:10px; 
    padding:7px 15px;
	clear: both;
	overflow: hidden;
}

.tour-list li a { 
    color: #363636; text-decoration:none; display: block; width: 100%; height:100%;  
    padding-bottom:5px;  border-bottom: 1px dashed #363636;clear: both;overflow: hidden;    
}
.tour-list li a span { display: inline-block;}
.tour-list li a em { font-style: normal; font: 600 14px "微軟正黑體" ; color:#019dbe; padding-left: 6px;  }
.tour-list li a strong { display: inline-block; font: 600 15px "微軟正黑體"; background: #03b26a; border-radius: 8px; color:#ffffff; padding:3px 5px;margin-right: 8px;text-align: center; }
/*.tour-list li a em .note {color:#ffe50d;}*/
.tour-list li a span.name_l em { /*display: block; margin-left: 60px; padding-top:3px;*/}
.tour-list li a span.no { margin-right: -14px;}
.tour-list li a span.place{display: block; font: 600 14px "微軟正黑體" ; color:#06900c; }
.tour-list li a span.price_r span { font: 600 22px "微軟正黑體"; color:#ff0000; padding:0 2px; font-family: 'Barlow', sans-serif;}
.tour-list li a span.price_r h8{ font: 600 14px "微軟正黑體";color: #03b26a;display: block;text-align: right;}

.name_l { max-width:83%;}
.price_r { max-width:17%;  float: right; color: #363636; font: 600 13px "微軟正黑體"; }
.bg-bottom{width: 100%;height: 318px;background: url("images/bg-bottom.png") top no-repeat;}

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


@media only screen and ( max-width:960px) 
{ 
    .logo { padding-left: 0px; float: left;}
    .tour-name span { display:inline;}  
    
}

@media only screen and ( max-width:910px)
{    
    .logo img { width:85%; padding-top:0px; margin-top:-10px;}
    .top-nav { background: url("images/bg-main-nav.png") -800px top no-repeat;  }
    .t-nav { }   
    .ct33 {  width:32%; }
    .ct50 {  width:48%; }
    .ct33 a .main-tour-box { min-height: 480px;  }
    .main-title{position: absolute;right: 8%;}
	.girl{position: absolute;left: 3%;}
}

@media only screen and ( max-width:880px)
{    
    .logo { display: none;}
    .t-nav { margin-left: 30px;} 
    .discount { float:none; text-align: left; }
    .tkt-price { float:none; text-align: right;}    
}

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

@media only screen and ( max-width:768px) 
{  
    #main-nav,.top-nav { display: none; }
    .header-md { display: block; }
    .main-header { display: none; }
	.main-title{position:inherit;right: inherit;padding-top: 70px;}
	.header-bg{display: none;}
	.girl{display: none;}
	.header-md { display: block;}	
    #special,#tour01,#tour02,#tour03,#tour04,#tour05,#tour06,#tour07 {  padding-top:0px; margin-top: 0px; }
    #north,#central,#south,#east,#island,#txg,#khh {  padding-top:0px; margin-top: 0px; }
    #food,#hotspring,#spa,#park,#show,#experience,#car-rentals { padding-top:0px; margin-top: 0px;  }
    .side-link { display: none;}  
	.bg-bottom{display: none;}
}

@media only screen and ( max-width:700px) 
{ 
    .price_r { max-width: 100%; float:none; }    
    .name_l { max-width:100%; float:none;   }
    .tour-list li a span.name_l { display: block; }
    .tour-list li a span.price_r { display: block; text-align: right;}
    .tour-list li a span.name_l em { display: inline-block; padding-left: 0px;}  
    .tour-list li a span.name_l em::before {  content: "-"; padding-right: 4px;}  
    .tour-list li span.price_r { display: block; text-align: right;}
    .ct33 {  display: block; width:100%;  }
    .ct50 {  display: block;width:100%; }
    .ct33 a { margin:25px 0; }
    .ct50 a { margin:25px 0; }
    .ct33 a .main-tour-box { min-height: auto;  }
    .ct33 a .main-tkt-box { min-height: auto;  }
    
    .tkt-discount { padding-top: 40px; }    
    .discount { float: left; }
    .tkt-price { float: right;}
    
}


@media only screen and (max-width:600px) 
{
    .tour-list li a span.city { display: block; } 
}

@media only screen and (max-width:500px) 
{
}


@media only screen and (max-width:480px) 
{
	.header-md { display: none;}
	.header-xs { display: block;}
    .main-title{width: 85%;margin: 0 auto;padding-top: 90px;}    
    .tour-list li a span.name_l em { display: block; }  
    .tour-list li a span.name_l em.em2 { display: block; }  
    .ct-box { padding-bottom: 15px;}
    .tour-price { text-align: right; padding-right: 10px;}    

}