@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, figure, mark {
    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;}
img {max-width: 100%;image-rendering: -webkit-optimize-contrast;}
.clean { clear:both;}
a {}
a:hover {}
a:focus{ -moz-outline-style: none;}
.b-box{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-size:15px;		
}

/*wow*/
.wow:first-child {
visibility: hidden;
visibility:visible \9;
}


#web-outer{	
	clear: both;
	overflow: hidden;
	background: #7686ec url("../img/bg_01.webp") top repeat;
	padding-bottom: 50px;
}


header{width: 100%;position: relative; clear: both; overflow: hidden;}
.header-bg {
    background: url("../img/header_bg.webp") center top no-repeat;
    height: 700px; 
    margin:0 auto;
	z-index: 50;		
}

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

.mainpic { 
    max-width: 633px;	 
	position: relative;
	margin: 0 auto;		
}

/*雪花*/
.snow_container {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
	clear: both;
    z-index: 2;
    pointer-events: none;
}
.snow_01, .snow_02, .snow_03{
	position: absolute;
	top: 0;
	left: 0;
}
.snow_01{
	animation: snowradrop 25s infinite;
}
.snow_02{
	animation: snowradrop 30s infinite;
}
.snow_03{
	animation: snowradrop 40s infinite;
}

@keyframes snowradrop {
	0% {
		transform: translate3d(0, -100%, 0);
		opacity: 100%;
	}
	100% {
		transform: translate3d(30%, 100%, 0);
		opacity: 30%;
	}
  }

.header-title{max-width: 633px;position: absolute;top:80px;}
.snow-01{max-width: 361px;position: absolute;top:30px;left: -350px;}
.snow-02{max-width: 367px;position: absolute;top:50px;left: -740px;}
.snow-03{max-width: 361px;position: absolute;top:30px;right: -350px;}
.snow-04{max-width: 361px;position: absolute;top:80px;right: -740px;}

.fw01{
	position: absolute;width: 187px; top:10px; left: -450px;animation-name:circle; animation-duration: 3s;animation-iteration-count:infinite; animation-timing-function:linear;
}
.fw02{
	position: absolute;width: 187px; top:80px; left: 240px;animation-name:circle; animation-duration: 4s;animation-iteration-count:infinite; animation-timing-function:linear;
}
.fw03{
	position: absolute;width: 187px; top:10px; right: -450px;animation-name:circle; animation-duration: 3.5s;animation-iteration-count:infinite; animation-timing-function:linear;
}

@keyframes circle{
	0% {clip-path: circle(2%); }
	10% { clip-path: circle(2%); transform: scale(1); }
	55% { clip-path: circle(100%); opacity: 1;}
	65% { transform: scale(1.2);opacity: 0;}
  100% { clip-path: circle(100%);opacity: 0; }
}
.header-md{display: none;max-width: 768px;}


/*選單*/
.sticky {
    top:40px;	
}

.mainnav{
	width: 100%;	
	z-index: 999;
	background: #132076;
	position: relative;
}

.mainnav ul{
	display: flex;
	gap:20px;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 500;
	font-style: normal;
	color: #fff;
}

.mainnav ul li{
	position: relative;
	display: block;
	font-size: 20px;
	letter-spacing: 1px;
	font-weight: 500;
	font-style: normal;
	color: #fff;
	text-align: center;
	font-family: "Noto Sans TC",sans-serif;
  	font-weight:200;
  	font-style: normal;
	min-width: 100px;
}

.mainnav ul li.btn{min-width: 150px;}
.mainnav li a{display: block; padding: 5px;color: #e4e8ff;font-weight: 600;width: 100%;transition: 0.5s ease-in-out;padding:20px 10px;text-decoration: none;}

.mainnav li a:hover{background:linear-gradient(to bottom,#2e41c5,#162799);color: #fff;}
.mainnav li a.active {background:linear-gradient(to bottom,#2e41c5,#162799);color: #fff;}

.mainnav ul li span{
	font-size: 9px;
	display: block;
	margin-top: 5px;
	letter-spacing: 1px;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.mainnav li::before{content: '';position: absolute;width: 20px;height: 24px;top: 15px; right: -50px;}
.mainnav li:first-child::before,.nav li:last-child::before{display: none;}

#block_menu {
	background: #162799;
	width: 100%;
	overflow: visible; /* ← 讓下拉選單可以顯示 */
}

/* 下拉選單基礎樣式 */
.mainnav ul li.dropdown .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%; /* 讓下拉寬度跟上層一樣 */
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  z-index: 9999;
  text-align: left;
}

.mainnav ul li.dropdown .submenu li {
  padding: 0;
}

.mainnav ul li.dropdown .submenu li a {
  display: block;
  padding: 12px 10px; 
  background: #162799;
	color: #fff;
  font-size: 15px;
  font-weight: 400;
  transition: background 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}

.mainnav ul li.dropdown .submenu li a:hover {	
  background: #3b4cba;
  color: #fff;
}

/* 滑鼠滑過顯示子選單 */
.mainnav ul li.dropdown:hover .submenu {
  display: block;
}


/*綜合燈飾*/
.lamp-bg01{background: url("../img/lamp_bg01.webp") bottom center no-repeat;}
.lamp-bg02{background: url("../img/lamp_bg02.webp") bottom center no-repeat;}
.lamp-bg03{background: url("../img/lamp_bg03.webp") bottom center no-repeat;}
.lamp-bg04{background: url("../img/lamp_bg04.webp") bottom center no-repeat;}

.snow-bg01{background: url("../img/snow_bg01.webp") top center no-repeat;}

/*錨點*/
.block-first{clear: both;overflow: hidden;padding-top: 40px;margin-top: -40px;}
.block-second{clear: both;overflow: hidden;padding-top: 80px;margin-top: -80px;}

/*標題*/
h2.big-title {
	max-width: 395px;
	height: 167px;	
	text-align: center;
	margin: 50px auto 0 auto;
	font-family: "微軟正黑體","黑體";
	color: #fff;
	z-index: 50;
	background: url("../img/big_bg.webp") top center no-repeat;	
}

h2.big-title span{text-align: center;}

h2.big-title strong{padding-top: 35px; display: block; font-size: 40px;line-height: 1.5em; font-weight: 600;}

h2.big-title span em{	
	display: inline-block;	
	font-style: normal;
	border-top: 1px #fff solid;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5em;
	padding-top: 5px;
}


/*節慶公版*/
.festival-frame{max-width: 1200px;margin: 0 auto;padding-top: 100px;font-family: "微軟正黑體","黑體";}
.festival-box{position: relative;padding-top: 50px;}
.festival-word{max-width: 420px;min-height: 350px; position: absolute;top:-20px;left: 40px; border-radius: 230px 230px 0 0;color: #fff;background-color: rgba(43,72,199,0.95);padding: 120px 10px 30px 10px;font-size: 15px;line-height: 2em;text-align: center;z-index: 990;}
.small-lamp{max-width: 167px;position: absolute;top:0;left: 135px;right: 0;}
.small-title{max-width: 370px;}
.festival-word .f-box{display: inline-block;width: 90%;margin:0 auto;padding-top: 10px; text-align: left;}
.f-box p{border-bottom:#fff 3px double;padding-bottom: 5px;}
.f-box em{display: block; font-style:normal; font-size: 13px;color: #aab2fa;}

.note{font-size: 13px;line-height: 1.5em;padding-top: 5px;}
.note p{display: block;border-bottom:none;}
.color01{color: #8bebfb;}
.color02{color: #fbffa2;}
.color03{color: #e39fff;}
.color04{color: #72ec5d;}
.color05{color: #8fffee;}
.color06{color: #e3ffc8;}

.festival-photo{max-width: 1200px; border-left: 20px #fff solid;z-index: 50;}

.img-box{position: relative;aspect-ratio: 240 / 143;}
.ps{position: absolute;bottom:20px;right: 10px;font-size: 13px;color: #333;font-family: "微軟正黑體","黑體"; background-color: rgba(255,255,255,0.8);border-radius: 25px;padding: 5px;}


/*推薦行程*/
.tour{}
.tour-main{max-width: 980px;margin: 10px auto;position: relative;padding-left: 140px;}
.tour-icon{max-width: 118px;position: absolute;top:0;left: 0;}
.tour-title{display: none;border-bottom:#c3f0ff 2px solid;border-top:#c3f0ff 2px solid; font-size: 20px; color: #c3f0ff;font-weight: bold;text-align: center;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;padding: 10px 0;}
.tour_list_box ul {	
	width: 100%;
	padding-top: 10px;
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
	
}	
.tour_list_box li{
	font-size: 18px;	
	line-height: 2em;
	color:#fff;	
	border-bottom:1px dashed #b4befa;		
	padding: 3px 0;
	list-style-image: url("../img/icon.webp");	
}
.tour_list_box p.txt{	
	display: inline-block;
	font-size: 18px;
	background-color: #2b47c6;
	border-radius: 5px;
	padding: 5px;
	color: #fff;
	font-weight: bold;	
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
}
.tour_list_box p.txt2{
	margin-top: 15px;
	display: inline-block;
	font-size: 18px;
	background-color: #862bc6;
	border-radius: 5px;
	padding: 5px;
	color: #fff;
	font-weight: bold;	
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
}

.tour_list_box li em  { color:#ffff92; font-style:normal; padding-left:6px;font-size:15px;}
.tour_list_box .price{	
	font-size:15px;
	line-height:2em;
	color:#fffc08;		
	font-weight: bold;
	float: right;
}

.tour_list_box .price strong {	
	font-size:18px;	
}

.tour_list_box li a{	
	color:#fff;
	text-decoration:none;
	display:block;
	overflow:hidden;
	padding: 3px 5px;
	font-weight: bold;
}
.tour_list_box li a:hover{}

.small-area{
	display: inline-block;
	font-size: 18px;
	background-color: #2b47c6;
	border-radius: 5px;
	padding: 5px;
	color: #fff;
	font-weight: bold;	
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
	margin-top: 10px;
}
.small-area02{
	margin-top: 15px;
	display: inline-block;
	font-size: 18px;
	background-color: #862bc6;
	border-radius: 5px;
	padding: 5px;
	color: #fff;
	font-weight: bold;	
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
	margin-top: 10px;
}

.tour-list {width: 100%;margin: 0 auto;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;}
.tour-list a {display:flex;padding: 10px;overflow: hidden;border-bottom:1px dashed #b4befa;	text-decoration: none;
			justify-content:space-between;align-items:center;}
.tour-list a:hover {}
.name-l{flex:0 0 85%;font-size: 18px;color:#fff;line-height: 1.5em;/*background: url("../img/icon.webp") top left no-repeat;padding-left: 25px;*/}
.name-l em{color:#ffff92; font-style:normal; padding-left:5px;font-size:15px;}
.name-l strong{font-size: 15px;color: #3e86c1;margin-left: 5px;}
.price-r{flex:0 0 15%; text-align:right;font-weight: 600; font-size: 15px;line-height: 1.5em;color: #fffc08;}
.price-r strong{font: 600 20px "Anton", sans-serif;margin: 0 2px;letter-spacing:1px;}


.tour-more{font-family:"微軟正黑體", Arial, Helvetica, sans-serif; font-size: 15px;line-height: 1.5em;display: block;clear: both;overflow: hidden;padding-bottom: 5px;}
.tour-more a{text-decoration: none;color: #fff;display: inline-block;float: right;margin-top: 15px;border-radius: 5px;padding: 5px;border: 1px #fff solid;margin-right: 5px;}
.tour-more a:hover{color: #d6dcff;border-bottom: none;border: 1px #d6dcff solid;}

.no_from{width: 100%;padding: 5% 0 0 0;margin: 0 auto;}
.no_from span{display: block;border-top:#aab5ff 2px dotted;border-bottom:#aab5ff 2px dotted; font-size: 25px; color: #fff;font-weight: bold;text-align: center;font-family:"微軟正黑體", Arial, Helvetica, sans-serif;padding: 30px 0;}

.line{width: 100%;height: 30px; background: url("../img/line.webp") top no-repeat;margin: 0 auto;margin-top: 40px;}


@media only screen and (max-width:1600px) {
	.pd01 a:first-child { margin-left: 35%; }
	.pd02 a:first-child { margin-left: 40%; }
	.pd03 a:first-child { margin-left: 45%; }
	.pd04 a:first-child { margin-left: 50%; }
	.pd05 a:first-child { margin-left: 45%; }
	.pd06 a:first-child { margin-left: 55%; }
}

@media only screen and (max-width:1400px) {
	.pd01 a:first-child { margin-left: 35%; }
	.pd02 a:first-child { margin-left: 40%; }
	.pd03 a:first-child { margin-left: 45%; }
	.pd04 a:first-child { margin-left: 50%; }
	.pd05 a:first-child { margin-left: 45%; }
	.pd06 a:first-child { margin-left: 55%; }
}

@media only screen and (max-width:1200px) {
	.pd01 a:first-child { margin-left: 30%; }
	.pd02 a:first-child { margin-left: 40%; }
	.pd03 a:first-child { margin-left: 45%; }
	.pd04 a:first-child { margin-left: 50%; }
	.pd05 a:first-child { margin-left: 45%; }
	.pd06 a:first-child { margin-left: 55%; }
	
.festival-frame{max-width: inherit;width: 90%;padding-top: 50px;}	
.tour-main{max-width: inherit;width: 85%;min-height: inherit; padding-left: 0;}
.tour-icon{display: none;}	
.tour-title{display: block;}	
.no_from{padding: 1% 0 0 0;}	
.tour_list_box li{font-size: 16px;line-height: 1.8em;}
.tour_list_box li em  {font-size:13px;}	
.tour_list_box .price{
	float: inherit;
	display: block;
	text-align: center;
}
}	
@media only screen and (max-width:1024px) {}	
@media only screen and (max-width:960px) {}

@media screen and (max-width: 959px){
.navbar {	
	padding-left: 15%;	
 }	

.festival-box{position: relative;padding: 10px 0;}	
.festival-word{max-width: inherit;width: 100%;min-height: inherit; position: inherit;position: relative; top:0;left: 0;right:0; border-radius:15px 15px 0 0;padding: inherit; clear: both;overflow: hidden;font-size: 18px;}
.small-lamp{position: absolute; top:0;left:65%;}
.festival-word .f-box{}
.f-txt{width: 100%;margin: 0 auto;}	
.festival-photo{border-left:inherit;}
.tour-main{width: 90%;}	
	
.f-box em{font-size: 15px;}	
.note{font-size: 18px;}	
	
	
}

@media screen and (max-width: 800px){
.name-l{flex:0 0 80%;}
.price-r{flex:0 0 20%;}
}

@media screen and (max-width: 768px){
.mainnav{display: none;}	
.header{}
.header-bg{display: none;}
.header-md{display: block;}	
.navbar{display: none;}
.festival-frame{padding-top: 30px;}		
}
@media screen and (max-width: 620px){	
.small-lamp{display: none;}
.tour_list_box li{list-style-image: inherit;}	
}
@media screen and (max-width: 600px){
.tour-list a{display:inherit;}		
.name-l{flex:initial;width: 100%; display: block;}
.price-r{flex:initial;width: 100%;display: block;margin-top: 5px;}	

}
@media (max-width: 480px) {
.ps{font-size: 12px;color: #333;bottom:10px;right: 5px;}	
}
@media (max-width: 320px) {}