@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;}
#dmheader { z-index: 9999; position: relative;}

.skippr-nav-element-block{width:40px;height:5px; margin-bottom:100px;}

body {
    font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;
}

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
	line-height:1.8em;
	font-size:15px;
    position: relative;
    background: #fcfbfc;
}

h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}

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

.mobile { display: none;}

.slider { 
    display: flex;
    justify-content: center;
    align-items: center;
}

#theTarget { 
    min-height:880px; 
    position: relative;  
}
#theTarget-xs { 
    min-height:500px; 
    position: relative;  
}
.main-title { 
    max-width:900px; 
    position:absolute; 
    z-index:900;
} 
.main-title-xs { 
display: none;
} 

.btn-box { z-index: 999; 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-animation: baloon_1 3s infinite;
    -moz-animation: baloon_1 3s infinite;
    -ms-animation: baloon_1 3s infinite;
    -o-animation: baloon_1 3s infinite;
    animation: baloon_1 3s infinite;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -ms-animation-direction: alternate;
    -o-animation-direction: alternate;
    animation-direction: alternate;
}
@-webkit-keyframes baloon_1{
    0% { transform:translateY(10px);}
    50% {transform:translateY(30px);}
    100% {transform:translateY(10px);}
    }
    
    @-moz-keyframes baloon_1{
    0% { transform:translateY(10px);}
    50% {transform:translateY(30px);}
    100% {transform:translateY(10px);}
    }
    
    @-ms-keyframes baloon_1{
    0% { transform:translateY(10px);}
    50% {transform:translateY(30px);}
    100% {transform:translateY(10px);}
    }
    
    @-o-keyframes baloon_1{
    0% { transform:translateY(10px);}
    50% {transform:translateY(30px);}
    100% {transform:translateY(10px);}
    }
    
    @keyframes baloon_1{
    0% { transform:translateY(10px);}
    50% {transform:translateY(30px);}
    100% {transform:translateY(10px);}
    }
.btn-where { /* left:48%; top:10%; */
    width:130px; height:130px; 
    background: #f6f6f6; color:#007a1c; font: normal 24px "微軟正黑體" ; 
    -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;  
    z-index:99; border-radius:130px;  
    margin-top:-130px;
}
.btn-where a {  
    color:#007a1c; font: normal 24px "微軟正黑體" ; 
    text-decoration: none; width: 100%; height: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
}

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

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

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

.sticky {
    top:40px;
}

.nav { margin:0 auto; height: 60px; /*padding-top:80px; */ padding:80px 0 0 0;  margin-bottom:20px; background:#fcfbfc url("../images/bg-menu.png") top center no-repeat;
}
.nav li { 
    display:inline-block; font: 600 20px "微軟正黑體"; padding:0 2px;
    color:#2b3c34; margin: 0 6px; letter-spacing: 1px; 
}
.nav li a { display:block; width:100%; height:100%; text-align: center; text-decoration: none;  color:#2b3c34; padding-bottom:4px; }
.nav li a span { padding-right: 4px; font-size:18px;}

.nav li a.btn1 span { color:#eaa8c4; }
.nav li a.btn2 span { color:#159032; }
.nav li a.btn3 span { color:#1ab096; }
.nav li a.btn4 span { color:#669dcb; }
.nav li a.btn5 span { color:#a99e22; }
.nav li a.btn6 span { color:#23c3cd; }
.nav li a.btn7 span { color:#3ad9a3; }
.nav li a.btn8 span { color:#7063ee; }

.nav li a:hover { background: #f3f3f3; }

.active {
    border-bottom: 6px solid #eaa8c4;
    -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);
}
.nav li a.btn2.active { border-bottom: 6px solid #159032; }
.nav li a.btn3.active { border-bottom: 6px solid #1ab096; }
.nav li a.btn4.active { border-bottom: 6px solid #669dcb; }
.nav li a.btn5.active { border-bottom: 6px solid #a99e22; }
.nav li a.btn6.active { border-bottom: 6px solid #23c3cd; }
.nav li a.btn7.active { border-bottom: 6px solid #3ad9a3; }
.nav li a.btn8.active { border-bottom: 6px solid #7063ee; }

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

#hotsale {  padding-top:250px; margin-top: -250px; }
#tour01,#tour02,#tour03,#tour04,#tour05,#tour06,#tour07 {  padding-top:160px; margin-top: -160px; }

.bg-grey { background: #ebe9e6 url("../images/bg-grey.png") top center no-repeat;}
.bg-green { background: #dfe5e4 url("../images/bg-green.png") top center no-repeat;}
.row { max-width: 1300px; margin:0 auto; padding:0 10px; }

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

.subtitle { text-align: center; background: url("../images/bg-subtitle01.png") center center no-repeat; padding:35px 0 25px 0;}
.subtitle2 { text-align: center; background: url("../images/bg-subtitle02.png") center center no-repeat; padding:35px 0 25px 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: 1300px; margin:0 auto; clear:both; overflow: hidden;  padding-bottom: 60px; text-align: center;}

.ct33 a,.ct50 a  { background: #f6f3f3; text-decoration: none; display:block; margin:0 5px; border:1px solid #353636; border-radius: 12px; margin-bottom: 20px;}
.ct33 a:hover,.ct50 a:hover { background: #ffffff; }

.ct33 a .main-tour-box { padding:2px; min-height: 480px; /*display:table;  */}
.ct50 a .main-tour-box { min-height: 500px;  }

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

.tour-city { 
    position: absolute; top:6px; font: 600 15px "微軟正黑體"; background: #ece1a7; border-radius: 1px; 
    color:#040404; padding:2px 6px; margin-left:6px; width:50px; text-align: center; 
 }
.tour-name { 
    color:#2f2f2f; font: 600 18px "微軟正黑體" ; line-height: 24px; padding:10px; margin-top:-5.5px; 
    text-align: center; border-bottom: 1px solid #353636; 
}
.tour-name span { display: block;}
.pink { background: #ecdfe5; }
.green { background: #cfebd6; }
.green2 { background: #d8ece5;}
.blue { background: #ceebe6;}
.blue2 { background: #d9e1e9;}
.blue3 { background: #dfeaf4;}
.yellow { background: #e9e8d9;}
.purple { background: #e9e8f5;}

.tour-info-list { margin:10px 10px;  min-height: 90px; padding-bottom:30px;}
.tour-info-list li ,.tour-info-list p { 
    font: 600 15px "微軟正黑體" ; 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:20px 0 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; }
.tour-price em {  color:#e77d03;  background: #fff6cc;  padding:1px 2px; font: 600 14px "微軟正黑體" ;  border-radius: 3px; margin-right: 6px;}
.tour-price em:empty { display: none;}



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

.tour-box { padding-bottom: 60px; }

.tour-list-pic { width:34%; display: inline-block; vertical-align: top;}
.tour-list-box { width:65%; display: inline-block; }

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

.tour-list li a { 
    color: #363636; text-decoration:none; display: block; width: 100%; height:100%;  
    padding-bottom:6px;  border-bottom: 1px dashed #363636;    
}
.tour-list li a span { /*display: inline-block; */}
.tour-list li a em { font-style: normal; font: 600 14px "微軟正黑體" ; display:block; color:#019dbe; padding-left: 48px; }
.tour-list li a em.e2 { padding-left: 64px; }
.tour-list li a strong { display: inline-block; font: 600 15px "微軟正黑體"; background: #007a1c; border-radius: 8px; color:#deeadf; padding:3px 5px;margin-right: 8px;text-align: center; }
.tour-list li a span.no { margin-right: -14px;}
.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 em { font: 600 14px "微軟正黑體"; color:#e77d03;  background: #fff6cc;  padding:1px 2px; display: inline-flex; border-radius: 3px; margin-right: 6px; }
.tour-list li a span.price_r em:empty { display: none; }

.name_l { width:80%; display: inline-block; }
.price_r { width:20%; display: inline-block; text-align: right; color: #363636; font: 600 13px "微軟正黑體";}

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


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

@media only screen and ( max-width:910px)
{    
    .ct33 {  width:32%; }
    .ct50 {  width:48%; }
	.name_l { width:70%;  }
    .price_r { width:30%; }
}

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

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

@media only screen and ( max-width:768px) 
{  
    #hotsale,#tour01,#tour02,#tour03,#tour04,#tour05,#tour06,#tour07 {  padding-top:0px; margin-top: 0px; }
    #main-nav { display: none;}
    #theTarget {  min-height:650px; }
    .tour-list li span.price_r { padding-top:12px;}
	.tour-list-pic { display: block; width:100%; text-align: center;}
	.tour-list-box { display: block; width:100%;  }
    
    
}

@media only screen and ( max-width:700px) 
{ 
    .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-tour-box { min-height: auto;  }
}


@media only screen and (max-width:600px) 
{
    .pc { display: none;}
    .mobile { display: block;}   
    .skippr-nav-element-block{ display: none; } 
    .main-title { display: none;}  
    .main-title-xs { display:inline; position: absolute; z-index:900;  }  
    .btn-where { 
        width:100px; height:100px; 
        font-size: 18px;
        border-radius:100px;  
        margin-top:-110px;
    }
    .btn-where a { font-size: 18px;  }    
    .tour-list li a span.city { display: block; } 
    .tour-list li a strong { display: block; width:50px; margin-bottom:8px;}
    .tour-list li a em,.tour-list li a em.e2 { padding-left: 0px; line-height: 1.6em;} 
    
}


@media only screen and (max-width:480px) 
{
    ul.tour-info-list { margin-bottom:30px;}    
    .ct-box { padding-bottom: 15px;}
    .tour-price { text-align: right; padding-right: 10px;}
    .name_l { display: block; width: 100%; }
    .price_r { display: block;  width: 100%; }
}