/* Reset一些基礎樣式 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
  
/* 設置全局字體 */
body {
	font-family: Arial, sans-serif;
	line-height: 1.6;
	background-color: #f4f4f4;
	color: #333;
}
#Vacation {
	width:100%;
	min-width:320px;
	max-width:2560px;
	margin:0 auto;
	overflow:hidden;
    font-family:Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", sans-serif;
    font-size:14px;
    line-height:1.5;
	background:url(Center_bg1.png) 5% 50% no-repeat, url(Center_bg2.png) 95% 50% no-repeat, url(https://www.besttour.com.tw/e_web/news/holiday/bg2.jpg) repeat;
	background-size:10%, 10%, auto;
	background-attachment:fixed;
}

#Vacation img {
	width:100%;
}
/* ==================== 主視覺 ==================== */
#Vacation .header{
	width:100%;
	height:auto;/*calc(100vh - 100px);*/
	display:inline-block;
	overflow:hidden;
	position:relative;
	background:url(https://www.besttour.com.tw/e_web/news/holiday/top_leftbg.png) no-repeat top left, url(https://www.besttour.com.tw/e_web/news/holiday/top_rightbg.png) no-repeat top right, url(https://www.besttour.com.tw/e_web/news/holiday/bg.jpg) repeat;
	background-size:18%, 18%, auto;/*22.38%*/
	z-index: 9;
}
@keyframes big_img{
	0%{transform:scale(1.5)}
	100%{transform:scale(1)}
}
#Vacation .header img.web, #Vacation .logobg-1 img.web, #Vacation .logobg-2 img.web, #Vacation .footer img.web{display:block;}
#Vacation .header img.mobile, #Vacation .footer img.mobile{display:none;}
#Vacation .header h1, #Vacation .center h2{
	text-indent:-99999999px;
	height:0
}
#Vacation .header .box{
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	text-align:center;
	border:0px solid black
}
/*slogan*/
#Vacation .header .slogan {
	flex:none;
	width:50%;/*calc(100vw / 3 - 1%);*/
	margin:6% 2% -2% 2%;
	margin:1% auto 2% auto;
	height:auto;
	animation:slogan 0.5s ease;
	/*animation:logo_ani 1s infinite;
	animation-delay:2s;*/
}
@keyframes slogan{
	0%{transform:scale(1.2); opacity:0;}
	100%{transform:scale(1); opacity:1;}
}
@keyframes logo_ani{	
	0%{transform:translate(0, 0)}
	50%{transform:translate(0, 5px)}
	100%{transform:translate(0, 0px)}
}

/*logo-img*/
#Vacation .header img.logobg-1, #Vacation .header img.logobg-2, #Vacation .header img.logobg-5, #Vacation .header img.logobg-4, #Vacation .header img.logobg-6, #Vacation .header img.logobg-7{
	flex:none;
	height:auto;
	display:none;
}
#Vacation .header img.logobg-1, #Vacation .header img.logobg-2{
	width:calc(100vw / 3 - 11%);
}
#Vacation .header img.logobg-4, #Vacation .header img.logobg-5{
	width:calc(100vw / 3 - 12%);
	margin-bottom:3%;
}
#Vacation .header img.logobg-6{
	width:calc(100vw / 3 - 8%);
	margin:4% 4% 0 4%
}
#Vacation .header img.logobg-7 {
	position:absolute;
	width:calc(100vw / 3 - 25%);
	left:2%;
	top:45%;
}
/*airplane*/
#Vacation .header img.logobg-3 {
	display:none;
	position:absolute;
	width:calc(100vw / 3 - 21%);
	left:26%;
	top:0;
	z-index:5;
	animation:logo_ani3 1.5s ;
	animation-delay:0s
}
@keyframes logo_ani3{	
	0%{transform:translate(-300px, 100px)}
	50%{transform:translate(0, 0)}
	100%{transform:translate(0, 0)}
}
#Vacation .header img.logobg-4{	
	animation:logo_ani4 1s infinite;
	animation-delay:2s
}
@keyframes logo_ani4{	
	0%{transform:translate(0px, 0px)}
	50%{transform:translate(3px, 0px)}
	100%{transform:translate(0px, 0px)}
}

/* ==================  Button Star =================== */
#Vacation .nav.sticky {
    position:fixed;
    top:50px;
    left:0;
    z-index:9999;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增加陰影，讓固定欄更突出 */
}

/**nav置頂轉換樣式Start**/
#Vacation .nav.up{
    background:url(https://www.besttour.com.tw/e_web/news/holiday/bg.jpg) repeat;
    border-bottom:0px solid #e7b877;
}

#Vacation .nav{ 
	display:none; 
    position:relative;
    width:100%;
    margin:0 auto;
    padding:0;
    text-align:center; 
}

/* 項目樣式 */
#Vacation .nav ul {
    display:block;
    padding:10px 0;
    margin:0;
    list-style-type:none;
}

#Vacation .nav ul li{
    z-index:9999;
	flex:none;
	cursor:pointer;  
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:calc(100% / 6 - 8%);
    line-height:3;
    font-size:1.25em;
    color:black;
	background:white;
	border-radius:30px;
    border:2px solid white;
	margin:0 .5%;
	transition:all 0.3s ease;/* 增加過渡效果 */
}
#Vacation .nav ul li a{
	color:black;
}
#Vacation .nav ul li.active{
    border:2px solid black;
    color:black;
}

/* ================== button END =================== */


/* ==================== 國家介紹 ==================== */

#Vacation .center{
	width:100%;
	height:auto;
	position:relative;
	padding:0;
	/*box-shadow:rgba(0,0,0,0.2)	0 5px 4px 0 inset;*/
}

#Vacation .center .bg, #Vacation .center .bg2{
	position:fixed;      /*absolute;*/
	/*width:3.59375%;
	right:2%;
	top:8%;*/
	width:11%;
	right:4%;
	top:3%;
	display:none;
}
#Vacation .center .bg2{
	left:4%;
}

/* -- tour -- */
#Vacation .tour_box{
	width:75%;
	margin:3% auto 0 auto;
	text-align:center;
}

#Vacation .tour_box a .tour_list, #Vacation .tour_box .tour_list.no_link{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:calc(100% / 3 - 10%);
	height:auto;
	margin:0 2%;
}

#Vacation .tour_box a .tour_list img.tour_img, #Vacation .tour_box a:hover .tour_list img.tour_img{
	width:100%;
	height:auto;
	margin:3% auto;
}

#Vacation .tour_box a:hover .tour_list img.tour_img{
	animation:tour_img 1s ease;
}
@keyframes tour_img{
	0%{transform:scale(1,1)}
	30%{transform:scale(1.05,1.05)}
	100%{transform:scale(1,1)}
}

#Vacation .tour_box .tour_list.no_link img.tour_img{
	opacity:0.5;
}
#Vacation .tour_box .tour_list.no_link img.tour_img{
	animation:none;
}

#Vacation .tour_box a .tour_list .button{
	width:40%;
	height:auto;
	line-height:91px;
	padding:50px 20px;
	background:url(https://www.besttour.com.tw/e_web/news/holiday/button_bg2.png) no-repeat 50% 50%;
	background-size:contain;
	
	font-size:2.3em;
	color:#be4300;
	margin:0 auto;	
}

#Vacation .tour_box a:hover .tour_list .button{	
	animation:ButtonAction 1s infinite;
}
@keyframes ButtonAction{
	0%{transform:scale(1,1)}
	50%{transform:scale(1.025,1.025)}
	100%{transform:scale(1,1)}
}

@media screen and (max-width:1920px) {
	#Vacation .header{height:auto/*calc(100vh - 70px)*/}
}

@media screen and (max-width: 1440px) {	
	#Vacation .header{height:auto/*calc(100vh - 250px)*/}
	/*airplane*/
	#Vacation .header img.logobg-3 {width:calc(100vw / 3 - 21%)}
}

@media screen and (max-width:1280px) {
	#Vacation .header{height:auto/*600px*/}		
}

@media screen and (max-width:1080px) {	
	#Vacation .header{height:auto/*500px*/}	
	#Vacation .tour_box{width:95%;}
	#Vacation .center .bg, #Vacation .center .bg2{display:none;}
}

@media screen and (max-width:828px) {
	#Vacation .header{
		background:url(https://www.besttour.com.tw/e_web/news/holiday/bg.jpg) repeat;
		background-size:auto;
	}
	/*slogan*/
	#Vacation .header .slogan {width:80%}
	#Vacation .header img.logobg-1{display:none}	
	#Vacation .header img.logobg-2{position:absolute;width:22%;top:15%;right:0}
	/*airplane*/
	#Vacation .header img.logobg-3 {width:calc(100vw / 3 - 12%);left:10%;top:2%}
	
	#Vacation .header img.logobg-4, #Vacation .header img.logobg-5{width:calc(100vw / 3 - 10%)}
	#Vacation .header img.logobg-6{width:calc(100vw / 3 + 1%);}
	#Vacation .header img.logobg-7 {width:calc(100vw / 3 - 20%);left:5%;top:33%}	
	#Vacation .header img.logobg-4{animation:none;}
	#Vacation .center{padding:0;}
	#Vacation .tour_box{width:100%;}
	#Vacation .tour_box a .tour_list, #Vacation .tour_box .tour_list.no_link{width:calc(100vw / 3 - 8%)}
}

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

	/**行程往下滑**/
	#Vacation section.tour_box.reDown{
		margin-top:180px;
	}

	.tour_list {
		transform: translateY(0); /* 確保元素沒有初始位移 */
		transition: transform 0.5s ease; /* 增加過渡效果 */
	}

	#bn1 {
		transition-delay: 0.1s; /* 讓每個項目有不同的延遲 */
	}

	#bn2 {
		transition-delay: 0.2s;
	}

	#bn3 {
		transition-delay: 0.3s;
	}

	/* 為其餘的bn4到bn10加上類似的延遲 */
	#bn4 {
		transition-delay: 0.4s;
	}

	#bn5 {
		transition-delay: 0.5s;
	}

	#bn6 {
		transition-delay: 0.6s;
	}

	#bn7 {
		transition-delay: 0.7s;
	}

	#bn8 {
		transition-delay: 0.8s;
	}

	#bn9 {
		transition-delay: 0.9s;
	}

	#bn10 {
		transition-delay: 1s;
	}


	#Vacation .nav{display:block;}
	#Vacation .nav ul li{
		width:calc(100% / 3 - 8%);
		font-size:1em;
		margin:1%;
	}

	#Vacation .header{height:auto}	
	/*slogan*/
	#Vacation .header .slogan{width:88%;margin:3% auto}	
	/*airplane*/
	#Vacation .header img.logobg-3 {width:calc(100vw / 3);left:33%;top:10px;display:none;}	
	#Vacation .header img.logobg-7 {width:20%;left:8%;top:10px;display:none;}	
	#Vacation .header img.logobg-2, #Vacation .header img.logobg-6{display:none}
	#Vacation .header img.logobg-4, #Vacation .header img.logobg-5{width:calc(100vw / 2 - 8%);margin:0 auto 20px auto;display:none;}
	#Vacation .footer{width:220%;margin-left:-60%;}
	#Vacation .tour_box a .tour_list, #Vacation .tour_box .tour_list.no_link{width:62%;margin:0 auto;}
}
@media screen and (max-width:430px) {
}
@media screen and (max-width:320px) {
	#Vacation .header{height:auto/*400px*/}	
	#Vacation .header img.logobg-7 {width:calc(100vw / 3 - 10%);left:15%;top:2%}	
	#Vacation .tour_box a .tour_list, #Vacation .tour_box .tour_list.no_link{width:75%;}
}