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

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
    background-color: #e9ede6;
}

h1,h2,h3 { display:none; }


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

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

.mainpic {position: relative;}
.mainpic-xs { display: none; position: relative;}
#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 */
    max-width: 100%;
    min-height: 680px;
    z-index: 2;
}
.title-index { position: absolute; z-index: 10;}

.title-area { display:flex; flex-wrap: nowrap;  max-width: 100%;  }
.main-title { flex:0 0 85%; justify-content:space-between; align-items:stretch;  align-content: stretch; }
.title-right { flex:0 0 15%; justify-content:space-between; align-items:stretch;   align-content: stretch; }


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

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

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

.sticky {
    top:30px;
}
.class-nav {  height: 73px; background:#ffcc00;  border-radius: 0 0 70px 70px;  max-width: 100%; margin:0 auto; }
.class-in { max-width: 650px; margin:0 auto; display: flex; flex-wrap: nowrap; }
.class-nav p { justify-content:center; align-items: center;  background: url("images/nav.jpg") 0 0 no-repeat; height: 73px; text-indent: -5000px;  }
.class-nav p a { display:block; width:100%; height:100%; text-decoration: none;  }
.class-nav p.btn1 { background: url("images/nav.jpg") 0 0 no-repeat; width:86px;  }
.class-nav p.btn2 { background: url("images/nav.jpg") -86px 0 no-repeat; width:94px;  }
.class-nav p.btn3 { background: url("images/nav.jpg") -180px 0 no-repeat; width:78px; }
.class-nav p.btn4 { background: url("images/nav.jpg") -258px 0 no-repeat; width:59px; }
.class-nav p.btn5 { background: url("images/nav.jpg") -317px 0 no-repeat; width:58px; }
.class-nav p.btn6 { background: url("images/nav.jpg") -375px 0 no-repeat; width:94px; }
.class-nav p.btn7 { background: url("images/nav.jpg") -469px 0 no-repeat; width:96px; }
.class-nav p.btn8 { background: url("images/nav.jpg") -565px 0 no-repeat; width:64px; }
.class-nav p.btn9 { background: url("images/nav.jpg") -629px 0 no-repeat; width:58px; }
.class-nav p.btn10 { background: url("images/nav.jpg") -687px 0 no-repeat; width:97px; }

.class-nav p.btn2:hover,.class-nav p.btn2 a.active2 { background: url("images/nav.jpg") -86px -73px no-repeat;   }
.class-nav p.btn3:hover,.class-nav p.btn3 a.active2 { background: url("images/nav.jpg") -180px -73px no-repeat;  }
.class-nav p.btn4:hover,.class-nav p.btn4 a.active2 { background: url("images/nav.jpg") -258px -73px no-repeat;  }
.class-nav p.btn5:hover,.class-nav p.btn5 a.active2 { background: url("images/nav.jpg") -317px -73px no-repeat;  }
.class-nav p.btn6:hover,.class-nav p.btn6 a.active2 { background: url("images/nav.jpg") -375px -73px no-repeat;  }
.class-nav p.btn8:hover,.class-nav p.btn8 a.active2 { background: url("images/nav.jpg") -565px -73px no-repeat;  }
.class-nav p.btn9:hover,.class-nav p.btn9 a.active2 { background: url("images/nav.jpg") -629px -73px no-repeat;  }
.class-nav p.btn10:hover,.class-nav p.btn10 a.active2 { background: url("images/nav.jpg") -687px -73px no-repeat;  }

.nav { border-radius: 0 0 60px 60px; max-width: 960px; margin:0 auto; height: 36px;  padding:10px 0; background:#06a49e ;}
.nav li {  
    display:inline-block; font: 600 16px "微軟正黑體","黑體"; 
    color:#c2ebe9; margin: 0 4px;
}
.nav li a { display:block; width:100%; height:100%; text-align: center; text-decoration: none;  color:#c2ebe9; padding:6px 4px; }
.nav li a:hover,.nav li a.active { background: #ffe16a; border-radius: 12px; color:#232323; line-height: 22px; }

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

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

.first { padding-top:120px; margin-top: -120px;}
.second {padding-top:90px; margin-top: -90px;}

.bg-yellow { background: #fffdf5; }
.bg-grey { background: #e9ede6;}

.bg-yellow-deco { background: url("images/deco02.png") center center no-repeat;}
.bg-grey-deco { background: url("images/deco01.png") center center no-repeat;}

.row { max-width: 1100px; margin:0 auto; padding:40px 0 ; min-height:700px;  }

.subtitle { text-align: center; height:115px;  padding-top:56px; font: 600 30px "微軟正黑體"; color:#044670; background:url("images/bg-subtitle.png") center center no-repeat; margin-bottom: 20px;}
.subtitle02 { text-align: center; height:115px; padding-top:56px;  font: 600 30px "微軟正黑體"; color:#044670; background:url("images/bg-subtitle02.png") center center no-repeat; margin-bottom: 20px;}
.subtitle span { font: 600 12px "微軟正黑體"; color:#31647f; display: block; padding:2px 0; }
.subtitle02 span { font: 600 12px "微軟正黑體"; color:#31647f; display: block; padding:2px 0; }
/*---------*/

/*----主推行程----*/

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

.main-tour { margin-top: 30px;}
.main-tour a { text-decoration: none; display:flex; flex-wrap: nowrap; margin-bottom: 20px;  }

.ct60 {  flex:0 0 60%;  justify-content:flex-start; align-items:center;  align-content: stretch; background:#ffffff; border-radius: 0 60px 60px 0; }
.ct40 {  flex:0 0 40%;  justify-content:flex-start; align-items:center;  align-content: stretch; }

.bg-yellow .ct-box .ct60 { background:#f7f3df; }
.bg-yellow .ct-box2 .ct60 { background:#f7f3df; }

.tour-pic {  max-width: 100%; margin:0 auto;}
.tour-pic img { border-radius: 60px 0 0 60px; }

.city  { margin-left: 40%; text-align: center; font: 600 17px "微軟正黑體"; background:#9fe8e2 ; border-radius: 0 0 8px 8px; color:#044771; padding:5px 10px;}
.bg-yellow .city  { background:#eceaa7 ; }

.tour-name { 
    color:#000000; font: 600 18px "微軟正黑體"; line-height: 1.6em; text-align: left; padding:10px 20px; margin-top:15px;
}
.tour-speical {
    margin-left:14px; text-align: left;
}
.tour-speical span { 
    color:#e63701; font: 600 15px "微軟正黑體"; border:1px solid #e63701; padding:2px 3px; margin:0 6px; 
}
.tour-speical span:empty { display: none;}

.tour-info-list {  padding:8px 20px; margin:10px; margin-bottom: 60px; }

.tour-info-list li { 
    font: 600 14px "微軟正黑體" ; color: #171717; line-height: 1.8em;
    padding-left: 16px; text-indent: -16px; 
    text-align: left;
}
.tour-info-list li::before {
    content: url('images/icon01.png');
    padding-right: 6px;
}
.bg-yellow .tour-info-list li::before { content: url('images/icon03.png'); }

.tour-info-list li span { color:#ee901d;}

/*.ct-in { position: relative;}*/
.tour-price { color: #000000; font: 600 14px "微軟正黑體" ; line-height: 40px; margin-top:30px; position:absolute;  right:40px; bottom:20px; }
.tour-price em { color: #000000; font: 600 14px "微軟正黑體" ; font-style: normal; display: none; }

.tour-price span {  color:#fa2900;  font: 600 32px "微軟正黑體" ; font-family: 'Barlow', sans-serif; }

/*----兩則主推----*/

.ct-box2 { max-width: 1200px; margin:0 auto; clear:both; overflow: hidden; display:flex; flex-wrap: nowrap;}
.ct-box2 .main-tour { margin-top: 30px;  margin-bottom: 20px; width:48%; margin:0 1%; }
.ct-box2 .main-tour a { text-decoration: none;   }
/*.ct-box2 .tour-pic img { background:#ffffff; border-radius: 60px 0; }*/
/*.ct-box2 .tour-pic img { height: 150%; }*/


/*----列表行程---*/

.tour-box { padding-bottom: 60px; margin-top: 60px; }
.list-subtitle { margin:20px; }
.list-subtitle span { font: 600 20px "微軟正黑體"; background:#9fe8e2 ; border-radius: 14px 0 0 0; color:#044771; padding:5px 20px; }

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

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


.tour-list li a span.name_l::before {
    content: url('images/icon.png');
    padding-right: 6px;
}

/*.tour-box2 .tour-list li a span.name_l::before {
    content: url('images/icon.png');
    padding-right: 6px;
}*/

.tour-list li a { 
    color: #363636; text-decoration:none; display: block; width: 100%; height:100%;  
    padding-bottom:6px;  border-bottom: 1px dashed #363636;  overflow: hidden;
}
.tour-list li a em span u { font-style: normal; color:#e63701; font: 600 15px "微軟正黑體"; border:1px solid #e63701; padding:2px 3px; text-decoration: none;  }

.tour-list li a em {  text-indent: 2px; }

.tour-list li a em span { font-style: normal; font: 600 14px "微軟正黑體" ; color:#03a399; line-height: 1.8em; padding-right: 4px; display:block;  }
.tour-list li a em span:empty { display:none;  }
.tour-list li a em span u:empty { display:none;  }

/*.tour-list li a em span::before {
    content: url("images/icon02.png");
    width:7px ;
    padding: 0 4px 0 6px ;        
 }*/

/*.tour-list li a strong { display: inline-block; font: 600 14px "微軟正黑體"; background: #09a183; border-radius: 9px 0 0 0; color:#fefffe; padding:2px 5px; margin-right: 8px; text-align: center; }*/

.fonts { font-size:11px;}

.tour-list li a span.no { margin-right: -14px;}
.tour-list li a span.price_r span { font: 600 22px "微軟正黑體"; color:#fa2900; padding:0 2px; font-family: 'Barlow', sans-serif; }

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

.bank-link { position: fixed; top:20%; right:0; z-index: 999;}

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

@media only screen and ( max-width:1400px) 
{ 
    .main-title { flex:0 0 75%; }
    .title-right { flex:0 0 25%; }  
    #demo-1 { min-height: 600px;}
}

@media only screen and ( max-width:1200px) 
{ 
    .main-title { flex:0 0 70%; }
    .title-right { flex:0 0 30%; }  
}

@media only screen and ( max-width:1024px) 
{ 
    .tour-name span { display:inline;}        
    .main-title { flex:0 0 60%; }
    .title-right { flex:0 0 40%; }  
    #demo-1 { min-height: 500px;}
    .class-nav {  border-radius: 0;  }
}

@media only screen and ( max-width:950px) 
{ 
    .ct-box2 .main-tour { background:#ffffff; border-radius: 60px 30px;  }
    .ct-box2 .tour-pic img  { border-radius: 60px 0; } 
}

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

@media only screen and ( max-width:768px) 
{ 
    .first { padding-top:0px; margin-top: 0px;}
    .second { padding-top:0px; margin-top: 0px;}

    .main-title { flex:0 0 66%; }
    .title-right { flex:0 0 34%; }  
    #demo-1 { min-height: 450px;}
    #main-nav { display: none; }
    .ct-in { margin-top: 2px;}

    .ct-box .main-tour a { display: block; text-align: center; }
    .ct-box .ct60 { width:96%; margin:0 2%; border-radius: 40px }
    .ct-box .ct40 { width:96%; margin:0 2%; }
    .ct-box .tour-pic img { border-radius: 40px;}

    .ct-box2 .main-tour { border-radius: 40px;  }
    .ct-box2 .main-tour a { display: block; text-align: center; }
    .ct-box2 .ct60 { width:96%; margin:0 2%; border-radius: 40px ;}
    .ct-box2 .ct40 { width:96%; margin:0 2%; border-radius: 40px ;}
    .ct-box2 .tour-pic img { border-radius: 40px; margin-top: 6px;}
    .ct-box2 .tour-price { display: block; position: relative; right:0; bottom:0;}
    .ct-box2 .tour-info-list {  margin-bottom: 30px; }

    .tour-list li span.price_r { padding-top:12px;}    
    .bank-link { display: none;}
}

@media only screen and ( max-width:700px) 
{ 
    .name_l { display: block; width: 96%;  }
    .price_r { display: block;  width: 96%; }
    .tour-price { display: block; position: relative; right:0; bottom:0;}
    .tour-info-list {  margin-bottom: 30px; }
}

@media only screen and (max-width:600px)
{
    .mainpic { display:none;}
    .mainpic-xs { display:block;}
    .main-title { flex:0 0 70%; }
    .title-right { flex:0 0 30%; }
    #demo-1 { min-height: 680px;}
    .ct-box2 { display: block;}
    .ct-box2 .main-tour { width:100%;  }
    /*.ct-box2 .tour-pic img { width: 100%; }
    .ct-box2 .tour-pic { height: 350px; }*/

}

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

@media only screen and (max-width:480px) 
{
    .tour-name { text-align: left;  }
    .tour-info-list li { font-size: 15px; }  
    .tour-list li  { font-size: 18px;   }
    .tour-list li a em { font-size: 16px; }   
    /*.tour-list li a em span {  display:block; padding-right: 0px; margin-left: 16px; padding-top:3px; padding-bottom: 3px; font-size:14px; line-height: 28px;}*/
    .main-title { flex:0 0 90%; }
    .title-right { flex:0 0 10%; }
    #demo-1 { min-height: 600px;}
}