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

html,body{
	overflow:auto;!important;
	font-family:"微軟正黑體",Arial, Helvetica, sans-serif !important;
}

.main-content{
	width:100%;
	max-width:1920px;
	min-width:280px;
	background-color: #000;
	margin:0 auto;
	overflow:hidden;
}

/* ==================== 主視覺 ==================== */
.main-top{
	width:100%;
	position:relative;	
}

.main-top .mascot{
	width:40%;
	height:0;
	padding-bottom:19%;
	background:url(img_xmas_mascot.gif) no-repeat top center;
	background-size:100%;
	
	position:absolute;
	right:-20px;
	bottom:0;
	z-index:88;
	
    animation-name:mascot;
	animation-fill-mode:forwards;
	animation-duration:2s;

}

@keyframes mascot{
		
    from{
		right:-100px;
		opacity:0;
    }
    to{
		right:160px;
		opacity:1;
    }
}
 .main-top .top-content{
	width:100%;
	margin:0 auto;
	position:relative;
	padding-top:0px;
	font-size: 0;
	overflow: hidden;

}
 
 .main-top .top-content span.cis {
	position:absolute;
	bottom: 0;left: 0;
	background-image: url(top_img_bg.png);
	background-size: 100%;
	background-position: bottom;
}

 .main-top .top-content span.cis img {
	width: 100%;
}

 .main-top .top-content .bigspace{ /*-- 用來撐開表頭高度 --*/
	width:100%;
	height:auto;
}

 .main-top .top-content .smallspace{ /*-- 用來撐開表頭高度手機版 --*/
	display:none;
}
/*漂浮裝飾*/
 .top-content .dec-text{  
	width:40%;
	height:0;
	padding-bottom:10%;/*77.42%/10%*/
	background:url(f_img_04.png) no-repeat bottom center;
	background-size:100%;
	text-indent:-9999px;
	animation-name:dec-text;
	animation-fill-mode:forwards;
	animation-duration:4s;
	position:absolute;
	top:0;
	right:0;
	z-index:88;
	opacity:0;
	
}

.top-content .dec-text2{  
	width:18%;
	height:0;
	padding: 180px 80px;
	background:url(f_img_05.png) no-repeat bottom center;
	background-size:80%;
	text-indent:-9999px;
	animation-name:dec-text;
	animation-fill-mode:forwards;
	animation-duration:4s;
	position:absolute;
	bottom: 0;
	left:-20px;
	z-index:88;
	opacity:0;
	
}

@keyframes dec-text{
    from{
		opacity:0;
    }
    to{
		opacity:1;
    }	
}

/*---主標題---*/
 .top-content h1.heading{
	display:block;
	width:40%;
	height:0;
	padding-bottom:40.5715%;/*---104.49%/35%---*/
	background:url(aurora02.png) no-repeat top center;
	background-size:100%;
	text-indent:-9999px;
	animation-name:head;
	animation-fill-mode:forwards;
	animation-duration:2s;	
	position:absolute;
	top:100px;
	left:30.5%;
	z-index:88;
	opacity:0;
}


 .top-content h1.heading-mobile{
	display:none;
}


@keyframes head{		
    from{
		top:-20px;
		opacity:0;
    }
    to{ 
	    top:100px;
		opacity:1;
    }	
}

 .top-content .slider_container {
	width:100%;
	height:auto;
	position:relative;
	opacity:0;
	animation-name:toppic;
	animation-fill-mode:forwards;
	animation-duration:2s;
}

@keyframes toppic{
		
    from{
		opacity:0;
    }
    to{ 
		opacity:1;
    }
	
	
}


 .top-content .slider_container div { /* -- 圖片輪播部分 -- */
	width:100%;
	height:auto;
	overflow:hidden;
	
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
	
	-webkit-animation: round 20s linear infinite;
            animation: round 20s linear infinite;
}



@-webkit-keyframes round { /* 100%/20s=5%/1s */
    5% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    25% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}
@keyframes round {
    5% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    25% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    30% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}

 .top-content .slider_container div:nth-child(1) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

 .top-content .slider_container div:nth-child(2) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}

 .top-content .slider_container div:nth-child(3) {
    -webkit-animation-delay: 10s;
            animation-delay: 10s;
}

 .top-content .slider_container div:nth-child(4) {
    -webkit-animation-delay: 15s;
            animation-delay: 15s;
}

 .main-top .slider_container div img{
	width:100%;
	height:auto;
}

 
 .top-content .slider_container-mobile{ /* 手機圖片輪播 */
	display:none;
}


 .space{
	width:100%;
	height:50px;
}
 span.tit_warp{
	position: relative;
	display: block;
}
 h3.tit{
	text-align: center;
	width: 50%;
	margin: 0 auto;
	padding:0px 0px 120px 0px;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 70%;
	text-indent: -9999px;
	z-index: 88;
    position: inherit;
}

 h3.tit_acc{
     background-image: url(img_title01.png);
     text-align: center;
	 
 }
 h3.tit_com{ background-image: url(img_tt_tour_02.png);background-color:}

/* ==================== 講座清單表格 ==================== */
.content-bg{
	width: 100%;
	padding-bottom:230px;
	background-image: url(session_bg.jpg),url(session_f_bg.jpg) ;
	background-position: top center,bottom center ;
	background-repeat: no-repeat;
	background-color: #1c1139;
}
.content-bg a  {
	text-decoration: none;
}
.session-content{
	width:80%;
	background-color: #fff;
	margin:0 auto;
	position:relative;	
}
.session-content table{
	width:100%;
	border-collapse:collapse;
	background-color: #fff;
}
.session-content tr{
	height: 50px;
	border-bottom: dotted 1px #7f8d93;
	
}
.session-content tr:nth-child(1){
	background-color:#8a9ea6;
	color:#ffffff;
}
.session-content td{
	padding: 15px;	
}
.session-content td:nth-child(3){
	text-align: center;	
}
.session-content a div {
	color: #fff;
	background-color: #365c6c;
	border-radius: 10px;
	padding: 5px;
	text-align: center;
	display: block;
	text-decoration: none;
	
}

.session-content a:hover div  {
	background-color: #400a7a;	
}

/* ==================== 更多行程 ==================== */
.tour-content{
	width:100%;
	height: 100px;
	margin: 80px auto;
	padding: 30px 0;
	text-align: center;

}
.tour-content a{
	font-size: 2em;
	color: #fff;
	text-align: center;
	background-image: url(btn_bg.jpg);	
	background-color: rgb(86, 99, 177);
	background-size:100%;
	padding: 11px 70px 11px 70px;
	border-radius: 50px;
	margin:160px auto 0px auto ;
	position:relative;
	border: rgb(0, 93, 159) solid 1px;
	
}

.tour-content a:hover{
	font-size: 2.1em;
	color: #fff;
	background-size:100%;
	padding-top: 11px;
	border-radius: 50px;
	margin:160px auto 0px auto ;
	position:relative;
	border: rgb(45, 191, 224) solid 2px;
	
}

@media screen and (max-width: 1281px){
	
	 .main-top .dec004{
		
		animation-name:dec004;
		animation-fill-mode:forwards;
		animation-duration:2s;
		
		position:absolute;
		bottom:100px;
		right:0;
		opacity:0;	
	}
	
	@keyframes dec004{
			
		from{
			right:-40px;
			opacity:0;
		}
		to{
			right:-20px;
			opacity:1;
		}		
	}
}

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


	 .market-content .main-nav,
	 .swiper-container,
	 .tours-list{
		width:100%;
		height:auto;		
	}
	
	 .twentylogo{
		width:10%;
	}

}


@media screen and (max-width: 1025px){
	
	
	 .main-top .mascot{
			width:60%;
			height:0;
			padding-bottom:28%;
			background:url(img_xmas_mascot.gif) no-repeat top center;
			background-size:100%;
			
			position:absolute;
			right:-100px;
			bottom:0;
			z-index:88;
			
		
		}
	
	 

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

	.top-content h1.heading {
	  width: 50%;/*--100/104.49438%--*/
	  height: 0;
	  padding-bottom: 73.146%;
	  background: url(aurora02.png) no-repeat top center;
	  background-size: 100%;
	  top: 20px;
	  left: 25%;
	 
  }


	 h3.tit {
	  text-align: center;
	  width: 80%;
	  max-width:450px;
	  margin: 0 auto;
	  padding-bottom: 11.424%;
	  background-size: 100%;
	}

	

	 .main-top .top-content{
		width:100%;
		margin:0 auto;
		position:relative;	
	}
	
	 .swiper-slide .right-side h3 {
		display: block;
		width: 100%;
		font-size: 24px;
		padding: 0 10px;
	}

	 .top-content .dec-text {
	  top: 0px;
	  right: 0px;
	}

	
	
	 .swiper-slide .right-side .market-time {
    	font-size: 1.2em;padding:0 10px;
	}
	 .acc_list_wrap li{
	width: 40%;
	margin:2.5%;
	}
	 .tours-area {
	  padding-bottom: 300px;
	  background-size: 100%;
	}
}


@media screen and (max-width: 769px){
	 .main-top .top-content .bigspace {
	}
	 .top-content .slider_container div {
	}
	 .acc_list_wrap li{width: 90%;margin:2.5%;}
	
	
	 .top-content h1.heading {
	  	width: 70%;/*--100/104.49438%--*/
		height: 0;
		padding-bottom: 73.146%;
		background: url(aurora02.png) no-repeat top center;
		  background-size: auto;
		background-size: auto;
		background-size: 100%;
		top: 50px;
		left: 15%;
		z-index: 88;
		opacity: 0;
	}
	 .main-top .top-content .bigspace {
  		width: 100%; height: auto;min-height: 500px;}

	 .main-top .slider_container div img {
	  width:auto;height: 500px; text-align: center;}

	@keyframes head{		
    from{
		top:-20px;
		opacity:0;
    }
    to{ 
	    top:50px;
		opacity:1;
    }	
	}
	
	/*--- 選單 ---*/ 
	
	 .market-content .main-nav{
		width:100%;
		padding:0 10px;
	}

	 .main-nav li {
		width: 15%;
		margin: 0 0.3%;
	}
	
	
	/*-- 輪播 --*/

	/*--- 行程 --*/
	
	     .tours-area {
		}
		
		 .tours-list h2 {
			width: 80%;
			height: 0;
			padding-bottom: 23%;
			margin: 10px auto 0 auto;
		}
		
		 .tours-list h2:before,
		 .tours-list h2:after{
			display:none;
		}	
		
		 .tours-list a.tourbox{
			width:60%;
			margin:15px auto;
			
		}
		
		
		 a.tourbox p{
			min-height:80px;
			font-size:18px;
			line-height:30px;
		}	
		
		 .tours-area {
		  padding-bottom: 300px;
		  background-size: 100%;
		}	
}

@media screen and (max-width: 580px){
	 .tit {
	  text-align: center;
	  width: 80%;/*---20%---*/
	  margin: 0 auto;
	  padding-bottom: 16.32%;
	}
	 .tours-area {
	  padding-bottom: 150px;
	  background-size: 100%;
	}

}


@media screen and (max-width: 415px){
	 .top-content .dec-text{
	width: 80%;
	height: 0;
	padding-bottom: 83.59544%;
	background: url(aurora02.png) no-repeat top center;
	  background-size: auto;
	top: 7vh;
	right: 8%;
	background-size: 100%;
	display: block;
	position: absolute;
	}

	.top-content .dec-text2{  
		display: none;
		
	}
	 .main-top .top-content span.cis img.web{

	}
	
	  /*   .top-content h1.heading {
			width: 90%;
			height: 0;
			padding-bottom: 38%;
		
			position: absolute;
			top: 10px;
			left: 5%;
			z-index: 88;
		
		}*/
		
		
		/* .main-top {
			margin-bottom: 20px;
		}*/
		
		
		 .twentylogo {
			width: 16%;
			position: absolute;
			left: 10px;
			top: 50px;
			z-index: 90;
		}
		
		
		 .main-top .top-content {}
						
				
		 .top-content h1.heading-mobile{
			display: block;
			width: 90%;
			height: 0;
			padding-bottom:52.5%;/*--58.333%--*/
			background:url(top_font_KV01_s.png) no-repeat;
			background-size:100%;
			text-indent:-9999px;
			
			animation-name:head-m;
			animation-fill-mode:forwards;
			animation-duration:2s;
			
			position: absolute;
			top: 5px;
			left: 0;
			z-index: 88;
			margin: 0 auto;
			opacity:0;
		}
		
		@keyframes head-m{
		
			from{
				top:-20px;
				opacity:0;
			}
			to{ 
				top:5px;
				opacity:1;
			}
			
			
		}
		
		
		
		 .main-top .mascot{
			width:100%;
			height:0;
			padding-bottom:45%;
			background:url(img_xmas_mascot.gif) no-repeat top center;
			background-size:100%;
			
			position:absolute;
			right:-100px;
			bottom:0;
			z-index:88;
			
			/*animation-name:mascot;
			animation-fill-mode:forwards;
			animation-duration:2s;*/
		
		}
		 .top-content h1.heading{
			display:none;
		}
			

		 .top-content .slider_container, .top-content .dec-text , .main-top .top-content span.cis img.web {
			display:block;
		}
		
		 .top-content .slider_container-mobile{
			display:block;
			height:auto;
			margin:0 auto;
			position:relative;
			
			animation-name:toppic;
			animation-fill-mode:forwards;
			animation-duration:3s;
		}
		
		@keyframes toppic{
				
			from{
				opacity:0;
			}
			to{ 
				opacity:1;
			}
			
			
		}
		
			
		 .top-content .slider_container-mobile div { /* -- 圖片輪播部分 -- */
			width:100%;
			height:auto;
			overflow:hidden;
			
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			filter: alpha(opacity=0);
			
			-webkit-animation: round 20s linear infinite;
					animation: round 20s linear infinite;
		}
		
		
		
		@-webkit-keyframes round { /* 100%/20s=5%/1s */
			5% {
				opacity: 1;
				filter: alpha(opacity=100);
				/* 0 - 1秒 淡入*/
			}
			25% {
				opacity: 1;
				filter: alpha(opacity=100);
				/* 1- 5秒靜止*/
			}
			30% {
				opacity: 0;
				filter: alpha(opacity=0);
				/* 5-6秒淡出*/
			}
		}
		@keyframes round {
			5% {
				opacity: 1;
				filter: alpha(opacity=100);
				/* 0 - 1秒 淡入*/
			}
			25% {
				opacity: 1;
				filter: alpha(opacity=100);
				/* 1- 5秒靜止*/
			}
			30% {
				opacity: 0;
				filter: alpha(opacity=0);
				/* 5-6秒淡出*/
			}
		}
		
		 .top-content .slider_container-mobile div:nth-child(1) {
			-webkit-animation-delay: 0s;
					animation-delay: 0s;
		}
		
		 .top-content .slider_container-mobile div:nth-child(2) {
			-webkit-animation-delay: 5s;
					animation-delay: 5s;
		}
		
		 .top-content .slider_container-mobile div:nth-child(3) {
			-webkit-animation-delay: 10s;
					animation-delay: 10s;
		}
		
		 .top-content .slider_container-mobile div:nth-child(4) {
			-webkit-animation-delay: 15s;
					animation-delay: 15s;
		}
		
		
		 .top-content .slider_container-mobile div img{
			width:100%;
			height:auto;
		}

		 .main-top .top-content .bigspace{ /*-- 用來撐開表頭高度 --*/
			display:none;
			
		}
		
		 .main-top .top-content .smallspace{ /*-- 用來撐開表頭高度手機版 --*/
			display:block;
			width:100%;
			height:auto;
		}
		
		 .main-top .top-content span.cis {
		  position: absolute;
		  bottom: 0;
		  left: 0;
		  background: none;
		}

		 .market-content::before {
			width: 100%;height: 60%;top: 50%;
		}	
		
		
		
		 .swiper-slide .left-side, 
		 .swiper-slide .right-side {
			display: block;
			width: 100%;
			margin: 0;
			padding: 0;
		}
		 .swiper-slide .right-side .acc_city {
			background: none;background-color: #fff;
		}	
		
		 .swiper-slide .right-side {}
		
		 .swiper-slide .right-side h3{
			width: 84%;margin: 0 8%; padding: 0;
		}
		 .swiper-slide .right-side .market-time {
			width: 84%;margin: 0 8%; padding: 0;
			font-size: 18px;
			line-height: 40px;
	    }
		 .swiper-slide .right-side .market-text {
			width: 84%;margin: 0 8%; padding: 0;
			margin-bottom: 32%;
		}
		 .swiper-slide .right-side .market-text p {
		  min-height: 18em;
		}
		 .swiper-slide::after {
		  content: "";
		  position: absolute;
		  width: 90%;/*---32.06%---*/
		  height: 0;
		  padding-bottom: 28.86%;
		  display: block;
		  left: 5%;
		  bottom: 5%;
		  background-size: 100%;
		}
		 .market-content::after {
		  display:none;
		}
				
		 .tours-area {}
		
		 .tours-list a.tourbox{
			width:90%;
			margin:15px auto;
			
		}
		
		
		/* =================================== footer =================================== */
		
		footer{
			font-size:12px;
		}
				
						

}



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

         .swiper-slide .left-side, 
		 .swiper-slide .right-side {
			width: 95%;
		}
		

		 .swiper-slide .right-side h3.britain{}
		 .swiper-slide .right-side h3 span{}


}
/*----------------------喜鴻購物BNT/start-----------------------------*/
			.note{
				background-image: url(bg_top01.jpg);
				background-size: 100%;
				background-position: top;
				max-width: 900px;
				margin: 0 auto;
				/* background-color: #f0e2c8; */
				/* margin-top: -50px; */
				/*padding: 50px;*/

			}

			.note ol.bestselection_bnt{
				width: 100%;
				text-align: center;
				list-style: none;

			}
			.note ol.bestselection_bnt li {
				display: block;
				vertical-align: top;
				width: 90%;
				margin: 0 auto;
				font-size: 18px;
				color: #111;
			}
			.note ol.bestselection_bnt span{
				margin: 1em 0;
				margin-bottom: 50px;
				display: block;

			}		
		
			.note ol.bestselection_bnt p{
				font-size: 40px;
				line-height: 1.2em;
				font-weight: 800;
				position: relative;
				display: inline-block;
				z-index: 2;
			}
			.note ol.bestselection_bnt p::before{
				content: "";
				position: absolute;
				width: 100%;
				height: 70%;
				bottom: 0;
				left: 0;
				display: block;
				z-index: -1;
				right: 2em;
				background-color: #ffd863;
			}
			.note ol.bestselection_bnt img{
				display: inline-block;
				width: 100%;
				margin: 0 auto;
				border-radius: 20px;
				box-shadow: 0 0 0 10px #fef102;
				position: relative;
				border: none;
			}
			.note ol.bestselection_bnt .tour_more{
				display: block;
				width: 100%;
				height: 0;
				padding-bottom: 25.68345%;
				background:url(img_tt_tour_more_bg.jpg);
				background-size: 100%;
				position: relative;
				border-radius: 30em;
				box-shadow: 0px 0 0 6px #471f16;

			}
			
			.note ol.bestselection_bnt .tour_more h3{
				display: block;
				width: 80%;
				margin: 0 auto;
				padding-bottom: 13.1958%;/*--16.4948%/--*/
				background:url(img_tt_tour_more.png),center;
				background-repeat: no-repeat;
				background-size: 100%;
				position:absolute;
				right: 10%;
				top: 25%;
				text-indent:-9999px;

			}

			.note ol.bestselection_bnt img:hover,.note ol.bestselection_bnt h3:hover,.note ol.bestselection_bnt .tour_more:hover{
				opacity: 0.8;
				transition: .3s;
			}
			@media screen and (max-width: 700px){
				.note{padding: 2em 0em;}
				.note ol.bestselection_bnt{ padding: 0;}
				.note ol.bestselection_bnt span{}
				.note ol.bestselection_bnt p{font-size: 24px;}
				.note ol.bestselection_bnt p::before{}
				.note ol.bestselection_bnt img {
				display: inline-block;
				width: 95%;
				margin: 0 auto;
				border-radius: 1em;
				box-shadow: 0 0 0 5px #d6be76;
				position: relative;
				}
				.note ol.bestselection_bnt img:hover{}
				 .tours-list ol.bestselection_bnt li {
					padding: 0;margin: 0;
				}
			}
			@media screen and (max-width: 500px){
				.note{}
				.note>ol.bestselection_bnt {}
				.note ol.bestselection_bnt{}
				.note ol.bestselection_bnt span{}
				.note ol.bestselection_bnt p{}
				.note ol.bestselection_bnt p::before{}
				.note ol.bestselection_bnt img {}
				.note ol.bestselection_bnt img:hover{}
			}

		/*----------------------喜鴻購物BNT/end-----------------------------*/