@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 主要區塊
*************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600;700&display=swap');

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

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

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
	font-size:15px;
}


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

#tour {  padding-top:60px; margin-top: -60px; }

#main-nav{
    z-index: 990;
    background:#ffffff;
    position: relative;
}
 
 #block_menu { 
     width: 100%;
     text-align: center;
     font-family:"微軟正黑體","黑體";
     font-weight: 600;
     overflow: hidden;    
 }
 
 .sticky {
     top:0px;
 }
 
 .nav { margin:0 auto; height: 50px;  padding:60px 0 0 0;  margin-bottom:10px; background: #e1f2f3;
 }
 .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; color:#085f8c;}

 .nav li a:hover {  border-bottom: 6px solid #085f8c;}
 
 .nav li a.active {     
    border-bottom: 6px solid #085f8c;
     -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);
 }
 
/*======================
==== header CSS=====
=======================*/

header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}
.mainpic { 
    background:url("../images/bg01.jpg") center top no-repeat; 
    min-height: 1000px;
}
.main-title {     
    margin:0 auto;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    animation: slideT 3s linear infinite alternate;
  }
  
  @keyframes slideT{
    0% {
        top:240px
    }
  50% {
    top: 220px
  }
  100%
   {
    top: 240px
  }
  }
  
  .box {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    max-width: 900px; 
    margin:0 auto; 
    position: relative;
    top:650px;
    padding-bottom: 80px;
  }
  .city {
    flex: 0 0 50%;
    margin: 5px;
    justify-content: center;
    align-items: stretch;
    text-align: left;
  }
  .city-intro {
    background: #ffffff;
    opacity: 0.8;
    border-top:3px solid #ffffff;
    border-radius: 0 0 15px 15px;
    margin:10px;
    padding:10px;
  }
  .city-intro h2 {
    opacity: 1;
    font-size:16px;
    color:#2a4b37;
    font-weight: 600;
    line-height: 1.8em;
  }
  

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


.row { max-width: 960px; margin:0 auto; z-index: 99;  overflow: hidden;}
.bg-tour {  background:url("../images/bg02.jpg") center bottom no-repeat; }

/*======================
====tour CSS=====
=======================*/

.tour-title { 
    margin:0 auto;
    text-align: center;
    margin-bottom: 10px;
    margin-top:50px;
}

.ct50 {  width:47%;  display: inline-block; vertical-align: top; margin: 1% 1%; border:1px solid #05a59c;  }
.ct50 a { text-decoration: none; display:block; }
.ct50 a:hover { text-decoration: none; }

.tour-pic{  padding:10px 10px 0 10px;}
.ct-in { background: #058d96; position: relative; min-height: 280px;}

.tour-name { 
    color:#ffffff; font: 500 18px "微軟正黑體" ; line-height: 1.6em; text-align: left; padding:10px 20px; 
}
.tour-name span { color:#e3f0ab; font: 500 15px "微軟正黑體" ; padding-left: 6px;}

.tour-info-list { margin:4px 0px; padding:6px 20px; }

.tour-info-list li { 
    font: 600 14px "微軟正黑體" ; color: #ffffff; line-height: 1.8em;
    padding-left: 17px; text-indent: -17px; 
    text-align: left;
}
.tour-info-list li::before {
    content: url("../images/icon.png");
    font-size:8px;
    padding-right: 6px;
}
.tour-info-list li span { color:#00ffd8;}

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

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

.tour-list-title { 
    margin:0 auto;
    text-align: center;
    margin-bottom: 26px;
    margin-top:26px;
    height: 64px;
    background: url("../images/bg-subtitle.png") center center no-repeat;   
    color:#ffffff;
    font: 500 22px "微軟正黑體" ;     
    padding-top: 64px;
}
.tour-box { padding-bottom: 120px; }

.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 h3.name_l u { font-style: normal; font: 600 14px "微軟正黑體" ; color:#ee901d; text-decoration: none; padding-left:6px; }

/*.tour-list li a em { display:block; }

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

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

 .tour-list li a em { padding:2px 4px; color:#0e6a7b; border:1px solid #05a59c; font-style: normal; margin:0 8px 0 0px; font-size: 15px;}

.fonts { font-size:11px;}

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

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

.more { text-align: right; font: 600 16px "微軟正黑體" ; margin-top: 10px; }
.more a {  color: #363636; text-decoration: none;  }
.more a:hover { text-decoration: underline;}


/*------------*/
.show-box { position: relative; margin:0 auto; text-align: center; padding-bottom:50px;}
.item { position: relative;   margin:0 auto; text-align: center; }

.subtitle {    
    margin-bottom: 30px;
    position:absolute;
    top:110px;
    z-index: 99;
    right:0;
    left:0;
}

.contain-title {
    font: 600 24px "微軟正黑體"; color:#263848;
    background: #fff8f2;   
    padding:15px 25px;
    width:180px;
    border-radius: 15px 15px 0 0;
    position: absolute;
    top:290px;
    z-index: 99;
    right:0;
    left:0;
    margin: 0 auto;
}
.title-long {
    width:280px;
}

.pic-w {
    max-width: 650px;
    background: #243645;
    opacity: 0.85;
    color:#ffffff;
    font: 500 16px "微軟正黑體"; 
    padding:30px 50px;
    line-height: 1.8em;
    position: absolute;
    top:350px;
    z-index: 99;
    right:0;
    left:0;
    text-align: left;
    margin: 0 auto;
}
  
.m-pic { display: none;}
.s-pic { display: none;}



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

@media only screen and ( max-width:1300px) 
{ 
    .b-pic { display: none;}
    .m-pic { display: block;}
}

/*---平板-----*/
@media only screen and ( max-width:800px) 
{ 
    .tour-list li a em  { text-indent:0px; line-height: 1.6em;} 
    .ct-in { min-height: 320px;}

}

@media only screen and ( max-width:768px) 
{ 
    #main-nav { display: none;}   
    .box { display:block; }
    .city-intro { margin:10px 20px;}    
    .price_r { max-width: 100%; float:none; }    
    .name_l { max-width:100%; float:none;   }
    .tour-list li span.price_r { padding-top:12px;}    
    .pic-w {  position:relative;  top:0px;  max-width: 100%;  }
    .contain-title {  position:relative;  top:0px;  text-align: center; }
    .contain-title { width:96%;  border-radius:  0;    } 
    .subtitle { top:40px;}
   

}

@media only screen and ( max-width:700px) 
{ 
    .ct-in { min-height: 360px;}
    .contain {max-width: 400px;}

}

@media only screen and (max-width:600px) 
{
    @keyframes slideT{
        0% {
            top:140px
        }
      50% {
        top: 120px
      }
      100%
       {
        top: 140px
      }
      }
    
    .box { top:500px;}
    .ct50 {  display: block; width:96%; }
    .ct-in { min-height: 260px;}
    .name_l { display: block; width: 100%; }
    .price_r { display: block;  width: 100%; }
    .tour-list li a em span {  display:block; padding-right: 0px; text-indent: -18px; padding-right: 18px; margin-left: 16px; padding-top:3px; padding-bottom: 3px; font-size:14px; line-height: 20px;}

}

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

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

    .box { top:400px;}
    .ct-in { min-height: 300px;}
    .tour-list li  { font-size: 18px;   }
    .tour-list li a em { font-size: 16px; }   
    .subtitle img { max-width:70%; }
    .subtitle { top:20px;}
    .m-pic { display: none;}
    .s-pic { display: block;}

}