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

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


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

#web-outer {
    font-family:"微軟正黑體",Arial, Helvetica, sans-serif;
	max-width: 1920px;
	overflow: hidden;
	_overflow: none;
    background-color:#0a193a;
}

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

/*----header------*/

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

.mainpic { 
   background:url("../images/bg-header.webp") center top no-repeat;
}

.mainpic-in {
   text-align: center;
   margin: 0 auto;
   position: relative;
   background:url("../images/firework01.webp") center 110px no-repeat;
   height: 685px; 
   padding:0 15px;
}

.firework {  background:url("../images/firework02.webp") center top no-repeat; }

.main-title { padding-top: 150px; }

/* 🔹 煙火 canvas */
#fireworks-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 不擋住下面的元素 */
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease; /* 平滑淡入淡出 */
}

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

#main-nav{
    width: 100%;
    z-index: 990;  
    background:url("../images/bg-nav.webp") center top no-repeat;    
}
 
 #block_menu {
     text-align: center;
     font-family:"微軟正黑體","黑體";
     font-weight: 600;
     overflow: hidden;
 }
 
 .sticky {
     top:40px;
 }

 .class-nav {  height: 60px;  margin:0 auto; }
 .class-nav p {  display: inline-block; background: url("../images/nav.webp") 0 0 no-repeat; height: 60px; text-indent: -5000px;  }
 .class-nav p a { display:block; width:100%; height:100%; text-decoration: none;  }
 
 .class-nav p.btn { background: url("../images/nav.webp") 0 0 no-repeat; width:72px;  }
 .class-nav p.btn-tw { background: url("../images/nav.webp") -342px 0 no-repeat; width:70px;  }

 .class-nav p.btn1 { background: url("../images/nav.webp") -72px 0 no-repeat; width:109px;  }
 .class-nav p.btn2 { background: url("../images/nav.webp") -181px 0 no-repeat; width:85px;  }
 .class-nav p.btn3 { background: url("../images/nav.webp") -266px 0 no-repeat; width:77px; }

 .class-nav p.btn4 { background: url("../images/nav.webp") -419px 0 no-repeat; width:113px; }
 .class-nav p.btn5 { background: url("../images/nav.webp") -532px 0 no-repeat; width:85px; }
 .class-nav p.btn6 { background: url("../images/nav.webp") -617px 0 no-repeat; width:68px; }

 .class-nav p.btn1:hover,.class-nav p.btn1 a.active2 { background: url("../images/nav.webp") -72px -60px no-repeat;   }
 .class-nav p.btn2:hover,.class-nav p.btn2 a.active2 { background: url("../images/nav.webp") -181px -60px no-repeat;   }
 .class-nav p.btn3:hover,.class-nav p.btn3 a.active2 { background: url("../images/nav.webp") -266px -60px no-repeat;  }
 .class-nav p.btn4:hover,.class-nav p.btn4 a.active2 { background: url("../images/nav.webp") -419px -60px no-repeat;  }
 .class-nav p.btn5:hover,.class-nav p.btn5 a.active2 { background: url("../images/nav.webp") -532px -60px no-repeat;  }
 .class-nav p.btn6:hover,.class-nav p.btn6 a.active2 { background: url("../images/nav.webp") -617px -60px no-repeat;  }
 
.nav {  margin:0 auto; padding:8px 0; background:#68369a; border:1px solid #fcf6d7; border-width: 1px 0 1px 0;}
.nav li {  
    display:inline-block; font: 600 16px "微軟正黑體","黑體"; 
    color:#d5cbde; margin: 0 0px; 
}
.nav li a { display:block; width:100%; height:100%; text-align: center; text-decoration: none;  color:#d5cbde; padding:3px 8px; }
.nav li a:hover,.nav li a.active { background-color: #fde87c; border-radius: 10px; color:#3e0673;}


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

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

#holiday-info h3 { color: #ffffff; font: 500 17px "微軟正黑體";  margin: 0 auto; padding:30px 30px; line-height: 1.8em; text-align: center; }
.holiday-outer { background: url("../images/bg-main-top.webp") center top no-repeat; padding:50px 15px; }
.subtitle-cal { 
    background: url("../images/bg-title01.webp") center top no-repeat;
    line-height: 50px; padding-top: 6px; height: 50px;
    font: bolder 28px "微軟正黑體"; text-align: center; color: #faeb99;
}
.subtitle-cal span { letter-spacing:5px; padding:0 15px; } 

.holiday-play { display: flex; justify-content: center; align-items: center; padding:0 16px; max-width: 768px; margin: 0 auto; margin-top: 30px; }
.play-spot li { color:#ffffff; font: 500 17px "微軟正黑體"; line-height: 2em;  padding-left: 16px;  text-indent: -16px; }
.play-spot li span { font-size: 20px; font-weight: 800; }
.play-spot li::before {
	content: '◆';
    padding-right: 8px;
	font-size: 14px;
}

.calender { display: flex; justify-content: center; align-items: center; padding:50px 16px; max-width: 1024px; margin: 0 auto; margin-top: 60px; margin-bottom: 80px; border:3px solid #68369a; }

.dayoff-outer {  margin-left: 40px; width: 45%;  }
.dayoff-outer h4 { 
    color:#d9b1ff; font: 800 30px "微軟正黑體"; line-height: 2em; 
    padding-bottom: 10px; letter-spacing:3px;
} 
.dayoff-outer h5 span { 
    border-radius: 15px; text-align: center; padding:8px ; 
    background: #d9b1ff; color:#01093b; font: 800 20px "微軟正黑體"; 
} 
.dayoff-outer p { 
    color:#ffffff; font: 500 16px "微軟正黑體"; line-height: 1.8em; margin-top: 20px;
} 

.main-outer { background: url("../images/bg01.webp") center top repeat-y; }

h2.subtitle { 
    background: url("../images/bg-title02.webp") center top no-repeat; padding-top: 46px;
    height: 148px; font: 600 28px "微軟正黑體";  text-align: center; color: #0a193a;
}
h2.subtitle span { font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: 500; color:#b79130; display: block; line-height: 20px;  }

/*----maintour-box----*/

.maintour-box { overflow: hidden; max-width: 1100px; margin:0 auto; margin-top: 30px; padding-bottom: 150px; }
.main-tour { padding:0 20px;}
.main-tour a { text-decoration: none; display:flex; justify-content:center; align-items:center;  }
.morelink-tour { display:flex; justify-content:center; align-items:center;  }

.ct-in { flex:0 0 45%; background:#ffffff; border-radius: 20px; padding:20px; margin-left: -15px; border:3px solid #f1e2b1;  }
.tour-pic { flex:0 0 55%; }
.tour-pic img { border-radius: 20px; }
.city  {font: 500 17px "微軟正黑體"; background:#f2cf79; border-radius: 15px 15px; color:#0a193a; padding:6px 8px; }

.tour-name { 
    color:#0a193a; font: 600 22px "微軟正黑體"; line-height: 1.6em; 
    text-align: left; padding:15px 0px; 
}

.tour-info-list li { 
    font: 600 16px "微軟正黑體" ; color: #535353; line-height: 1.8em;
    padding-left: 22px; text-indent: -22px; 
    text-align: left;
}
.tour-info-list li::before {
    content: url("../images/icon01.webp");
    margin-right: 6px;
    width: 16px;
}

.tour-price { color: #000000; font: 600 14px "微軟正黑體" ; text-align: right; line-height: 40px; margin-top:20px; padding-right:15px; }
.tour-price span {   color:#e102cf;  font: 600 33px 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}


.main-tour-link {  display:flex; justify-content: flex-end;  text-align: right; margin-right: 10px; margin-bottom: 15px;}
.main-tour-link a { text-decoration: none; color: #666667; height:100%; 
    border-radius: 26px; font-size: 14px; font-weight: 600; border:1px solid #666667; padding:2px 5px;
    line-height: 1.7em; margin:3px 5px 0 0; 
}
.main-tour-link a:hover { background:#5c5c5c; color:#ffffff; }
.main-tour-link a:empty { display: none;}
.tour-info-list li:empty { display: none;}
.main-tour:empty { display: none;  }

/*----tour-list---*/

.tour-box { padding:30px 15px 30px 15px; }

.tour-list li  { 
    font: 700 18px "微軟正黑體" ; color: #f2cf79; 
    line-height: 1.8em;
    border-bottom: 1px solid #b29f72;
    margin:8px 0;
    padding:6px 0px;
}

.tour-list li a { 
    color: #f2cf79; text-decoration:none; width: 100%; height:100%; display:flex; overflow:hidden;
}
.name_l { width:80%;  }
.price_r { width:20%;  text-align: right; color: #ffffff; font: 600 13px "微軟正黑體"; }
.price_r span { font: 600 24px "微軟正黑體"; color:#dc7dff;  padding:0 2px; font-family: 'Barlow', sans-serif; }

.tour-list li a h3.name_l span { font-style: normal; font: 600 15px "微軟正黑體" ; color:#ffffff; text-decoration: none; padding-left:6px; }
.tour-list li a em {  padding:3px 4px; color: #0a193a;  background: #f2cf79; font-style: normal; margin:0 8px 0 0px;  border-radius: 8px 0 0 0; font-size: 15px; }

/*----tour-list-morelink----*/

.tour-list-morelink { text-align: left; /* margin:0 1%; */ margin-top:20px;}

.tour-list-morelink li  { 
    font: 700 18px "微軟正黑體" ; color: #f2cf79;  
    line-height: 1.8em;
    overflow:hidden;
    border-bottom: 1px solid #b29f72;
    padding:6px 0px;
}

.tour-list-morelink li p {  display:flex;  }
.tour-list-morelink li p.link { justify-content: flex-end; }
.tour-list-morelink li p a { 
    color: #fcf6d7; text-decoration:none;  height:100%; 
    border-radius: 26px; font-size: 15px;   border:1px solid #fcf6d7; 
    text-align: center; line-height: 1.8em; margin:3px 5px 0 0; padding:3px 5px;
}
.tour-list-morelink li p a:hover { 
    background:#dc7dff; color:#000000; transform: translate(1px, 0);  border:1px solid #dc7dff; 
}
.tour-list-morelink li h3 { display: inline-block;  width:80%; }

.tour-list-morelink li span.price_r { display: inline-block; width:20%;  text-align: right; color: #ffffff;  font: 600 13px "微軟正黑體"; }

.tour-list-morelink li h3 span.name_l strong { font-style: normal; font: 600 14px "微軟正黑體" ;  color:#ffffff; padding-left:6px; }

.tour-list-morelink li span.name_l em { padding:3px 4px; color: #0a193a;  background: #f2cf79; font-style: normal; margin:0 8px 0 0px;  border-radius: 8px 0 0 0; font-size: 15px;  }

.tour-list-morelink li span.price_r strong { font: 600 24px "微軟正黑體"; color:#dc7dff;   padding:0 2px; font-family: 'Barlow', sans-serif; }




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


@media only screen and ( max-width:1024px) 
{ 
    .morelink-box {  flex-wrap: wrap; }
    .morelink-in {  flex: 0 0 48%; margin:20px 1%;}
}
@media only screen and ( max-width:900px) 
{ 
    .tour-pic { flex:0 0 60%; }
    .ct-in { flex:0 0 40%;}
    .dayoff-outer { width: 60%;}
}
@media only screen and ( max-width:812px) 
{ 
    .calender { flex-direction: column; padding:25px 15px; }
    .dayoff-outer { width: 100%; text-align: center; margin: 20px 0 0 0;}

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

@media only screen and ( max-width:768px) 
{ 
    .main-title { padding-top: 140px; }
    .mainpic-in { height: 650px; }
    .firework,.mainpic-in { background: none;}
    .mainpic { background:url("../images/bg-header-xs.webp") center top no-repeat; }
    #main-nav { display: none;}
    .holiday-play { flex-direction: column;}
    .play-spot { margin-top: 20px;}
    .first { padding-top:0px; margin-top: 0px;}
    .second { padding-top:0px; margin-top: 0px;}
    .main-tour a,.morelink-tour { flex-wrap: wrap; }
    .tour-box { padding:30px 30px; }
    .tour-pic { text-align: center; flex:0 0 100%; }
    .ct-in { flex:0 0 100%; max-width: 650px;  margin-left: 0px; }
    .name_l { width: 70%; }
    .price_r { width: 30%;   align-self:flex-end;}
    .main-tour-link a { font-size: 16px; line-height: 2em; }
    .tour-list-morelink li span.price_r { margin-bottom: 18px; } 

}

@media only screen and (max-width:600px) 
{   
    .subtitle-cal span { letter-spacing:3px; } 
    .tour-list li a { display: block;}
    .name_l { width: 95%; display: block; }
    .price_r { width: 100%; display: block; padding-top:10px; text-align: right;}
    .tour-list-morelink li h3 { width: 95%; display: block; }
    .tour-list-morelink li span.price_r { width: 100%; display: block; padding-top:10px;  }
    .tour-list-morelink li p {  display:block;  }
    .tour-list-morelink li p.link { text-align: right; }

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

@media only screen and (max-width:480px) 
{
    .subtitle-cal span { letter-spacing:1px; font-size: 24px; } 
    .mainpic-in { height: auto; }
    .tour-name { text-align: left;  }
    .tour-info-list li { font-size: 15px; text-align: left;  }     
    .tour-list li a h3.name_l u { font-size: 15px; display: block;  padding-left:0px;}
}

@media only screen and (max-width:410px) 
{
    .subtitle-cal span { letter-spacing:1px; font-size: 20px; } 
    #holiday-info h3 { text-align:left; }
    .dayoff-outer h5 span { font-size: 16px; } 

}