@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,figure,article,
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: hidden;
  zoom: 1;
}

img { max-width:100%;}


/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

html, body {
  width: 100%;
}

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

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
	line-height:1.9em;
	font-size:13px;
    color:#535152;
	overflow: hidden;
    background:url("../images/bg.jpg") center top repeat-y;
}

header { overflow: hidden; position: relative;}
.bg-top-header { background:#e1e8e1 url("../images/top-header.jpg")  center top no-repeat; }
.bg-bom-header { background:url("../images/bom-header.jpg")  center bottom no-repeat;   }

.slide { max-width: 1400px; margin: 0 auto; padding-top: 110px;   }

.h1_bg { background:url("../images/bg-title.png") center center no-repeat; width:391px; height: 346px; }
h1 { margin-left: 23%; position:absolute; margin-top: -620px; z-index: 998; text-align: center; }
h1 span { display: block; color:#555555; font-family: "Noto Serif TC", serif; line-height: 60px; }
h1 span.line1 { font-size: 70px; padding-top:110px; letter-spacing: -1px; }
h1 span.line1 em { font-size:45px; font-style:normal;}

h1 span.line2 { font-size: 30px; color:#555555;  }
h1 span.line2 em { font-style:normal; font-size:40px; color:#c4a330; }

/*======================
========main========
=======================*/

main { max-width: 1200px; margin: 0 auto; }

.ctbox { display:flex; flex-wrap: nowrap; max-width: 1200px; margin:0 auto; }
.ct-left { flex:0 0 24%;  justify-content:center; align-items:stretch; align-content: center; }
.ct-right { flex:0 0 74%;  justify-content:center; align-items:stretch;  align-content: flex-start;   }

.ct-left-xs { display: none;} 

.info { 
    background: url("../images/bg-day-eu.png") left top no-repeat; 
    color: #424141; font:500 16px "微軟正黑體";
    padding:10px 15px; margin-top:20px; line-height: 1.8em;
}
.info h2 { color: #a67e37; font: 700 20px "Noto Serif TC",serif ; display: block; margin-bottom: 10px;}
.info h2 img { vertical-align: baseline;}

#eu-day { max-width: 1200px; }

.tabs-container { max-width: 1200px; margin-bottom: 60px; margin: 0 auto;  }

.tab-content-outer { padding:15px 0px 15px 0px; }
.tabs-box { margin:10px 0 0px 40px; }
.tabs-box li { display: inline-block; text-align: center; margin: 1px 13px; }
.tabs-box li a { 
    width: 100%; height: 100%; display: block; 
    border:1px solid #918f88; background: #ffffff; 
    border-radius: 20px; padding:4px 10px; 
    color:#918f88; font: 600 20px "微軟正黑體"; text-decoration: none;
}

.tabs-box li a:hover { background: #e2dacb;   }
.tabs-box li a.active { border:1px solid #787355; background:#787355;  color:#ffffff;}


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

.t-title { background:url("../images/tour-title.png") left center no-repeat;  width: 228px; text-align: center; margin-bottom: 20px; }
.t-title span { color: #5e5e5b; font:600 31px "Noto Serif TC", serif; line-height: 49px; }

h2.area-title { border: 1px solid #a67e37; border-width: 0 0 1px 6px; font: 700 17px "微軟正黑體" ; color:#a67e37; width: 90px; padding-left: 8px; margin:30px 0 6px 0; }
.year { background:url("../images/year.png") center 12px no-repeat;  color:#787355; font:bold 26px "Noto Serif TC", serif; text-align: center; letter-spacing: 1px; padding: 26px 0 12px 0; }

.tour-list { text-align: left;  margin:0 1%; }

.tour-list li  { 
    font: 700 16px "微軟正黑體" ; color:#ababab; 
    line-height: 1.8em;
    border-bottom: 1px dashed #c9c9c9;
    margin:8px 0;
    padding:6px 0px;
}
.tour-list li a { 
    color:#2f2f2f; text-decoration:none; width: 100%; height:100%; display:flex; overflow:hidden;
}
.name_l { width:83%;  }
.price_r { width:17%;  text-align: right; color: #000000; font: 600 13px "微軟正黑體"; }
.price_r span { font: 600 20px "微軟正黑體"; color:#ff0000;  padding:0 2px; font-family: 'Barlow', sans-serif; }

.tour-list li a h3.name_l span { font-style: normal; font: 600 15px "微軟正黑體" ;  color: #179906; text-decoration: none; padding-left:6px; }

.tour-list li.soldout {
    display:flex; 
}
.tour-list li.soldout .price_r { font: 400 16px "微軟正黑體"; color:#ec2727;  padding:0 2px; font-family: 'Barlow', sans-serif; }

/*======================
===========notice=========
=======================*/

#notice { background: url("../images/bg-notice.png") center top no-repeat; margin-top: -35px;}
.notice-box { max-width: 480px; margin: 0 auto; padding: 60px 15px 40px 15px; }
.notice-box h2 { margin: 16px 0; background: url("../images/notice.png") left center no-repeat; color: #8c8977; font:600 22px "Noto Serif TC", serif; width: 159px; height: 35px; text-align: center }
.notice-info li { font:500 16px "微軟正黑體"; color:#5a5a5a; padding:3px 0; line-height: 1.8em; padding-left: 17px; text-indent: -17px;}

#back-top { z-index: 9999;}

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

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

    h1 { margin-left: 20%; margin-top: -550px; }
}

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

    h1 { margin-left: 16%; margin-top: -450px; }
}

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

    .h1_bg { background:url("../images/bg-title-xs.png") center center no-repeat; width:340px; height: 301px; }
    h1 { margin-left: 13%; margin-top: -430px;}
    h1 span.line1 { font-size: 62px; padding-top:100px;  }
    h1 span.line1 em { font-size:32px; }   
    h1 span.line2 { font-size: 24px;   }
    h1 span.line2 em { font-size:30px;}
    h1 span { line-height: 50px;}
    #eu-day { margin-top: 20px; }

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

   h1 {  margin-top: -400px;}
}

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

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

    h1 { margin-left: 13%; margin-top: -380px;}
    .tabs-box {text-align: center; margin:10px 0 0 0px; }
    .tour-list li a { flex-wrap: wrap; }
    .ctbox { flex-wrap: wrap;  }
    .ct-left { flex:0 0 100%;  text-align: center; display: none; }
    .ct-left-xs { display: block; text-align: center; margin:0 auto; padding-bottom: 6px; } 
    .ct-right { flex:0 0 100%;  }
    .info { margin-top: 0;}
    #eu-day { margin-top: 0px; }
    .t-title { margin:0 auto;}
    .name_l { width: 95%;  }
    .price_r { width: 100%; padding-top: 6px;  }
    #notice { margin-top: 20px;}
    .tour-list li.soldout { flex-wrap: wrap; }    
    .tour-list li.soldout .name_l { width: 100%;  }
    .tour-list li.soldout .price_r { width: 100%; justify-content:flex-end; text-align: right; }
    
}

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

    h1 { position: absolute; left: 50%; transform: translateX(-50%); margin-left: 0%; margin-top: -470px;}
    .slide { padding-top: 170px; }

}

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

    h1 {  margin-top: -450px;}
    .slide { padding-top: 190px;   }
    .info h2 { font-size: 22px;}
    .info { font-size: 18px; }
}

/*---手機版-----*/
@media only screen and (max-width:480px) {
    h1 {  margin-top: -410px;}
    .slide { padding-top: 190px;   }
    .tour-list li a span.name_l u { font-size: 15px; display: block;  padding-left:0px;}
} 

@media only screen and (max-width:420px) {
    h1 {  margin-top: -420px;}
    .slide { padding-top: 220px;   }
} 

@media only screen and (max-width:380px) {
    h1 {  margin-top: -400px;}
}