@charset "UTF-8";
body {color: #333;font: 15px/1.6em 'Century Gothic', Arial, 'Noto Sans TC', 'Microsoft JhengHei', 'sans-serif';	background-color: #f2b22e;}
a {text-decoration: none;	display: inline-block;}
:focus {outline: none;}
i {font-style: normal;}
* {box-sizing: border-box;}
.header,.footer {text-align: center; background: #fff; position: relative; z-index: 22;}
.display_pc {display: block;}
.display_m {display: none;}
.gotop {display: none;}
.blue {font-weight: bold; color: #006ee0;}

.main {position: relative;	width: 100%; overflow: hidden; padding-bottom: 50px; background: url("../images/kv_bg_foreign.png")no-repeat center top, url("../images/rule_bg.jpg")center top #000;}

/*time*/
.kv_label .time { position: relative; width: 1200px; margin: 0 auto;}
.time .logo { position: absolute; top: 20px; left: 77px; }
.kv_label_m { display: none;}
/*countdown*/
.countdown {position: absolute; width: 240px; top: 30px; right: 137px; color: #252b2e; z-index:99; text-align: center;}
.countdown .numbers{display:inline; color: #252b2e; font-size: 32px; }
.countdown_unit {font-size:18px;}
.countdown_txt {font-size:13px; color: #252b2e;	-webkit-animation: countdown_txt_animation 2s ease-in-out infinite alternate; animation: countdown_txt_animation 2s ease-in-out infinite alternate; }
#count2 {  line-height: 30px; font-size: 30px;}
@-webkit-keyframes countdown_txt_animation {
  0%, 100%, 50% { opacity: 1.0;  }
  25%, 75% { opacity: 0.6;  }
}
@keyframes flash_animation {
  0%, 100%, 50% { opacity: 1.0;  }
  25%, 75% { opacity: 0.6;  }
}
.countdown .numbers span{ padding-left: 2px;}

/*kv*/
.kv_wrapper {}
.kv_container {position: relative;	z-index: 1;	margin: auto; width: 1200px; height: 647px;}
.kv_slogan {position: absolute; top: 108px; left: 280px;	z-index: 2;}
.kv_ticket {position: absolute;	bottom: -44px; left: 315px;	z-index: 2;}
.kv_landmark { position: absolute; top: 300px; left: 22px; z-index: 1;}

/*box*/
.box01 {margin: 10px 0;	background: #6F6F6F;}
.box01 tr td {border-bottom: 0px; padding: 5px 2px 7px 5px; border: 1px solid #ffa6b2;}
.box01 a,.box01 a:visited {color: #050AFF; text-decoration: underline;}
.box01 i {color: #000000;	font-style: normal;	padding-left: 5px;}
.tr002 {text-align: center; color: #fff; height: 40px;	background: #ff909e; line-height: 18px;}
.tr001 {background: #ffffff;}

/*terms_wrapper*/
.ProductList {position: relative; z-index: 100;}
.terms_wrapper {width: 1074px;	margin: 20px auto;}
.terms_container1 {background-color: #ffe1e4; border: solid 3px #e04042; border-radius: 48px; overflow: hidden;}
.terms_container1 h2 {font-size: 36px; font-weight: 800; text-align: center;	background-image: linear-gradient(to top, #c40016 0%, #e04042 100%); color: #fff; border-radius: 53px 53px 0 0;	padding: 30px 0;}
.terms_container2 {background-color: #fff;	border: solid 3px #068dae; border-radius: 48px;	overflow: hidden;}
.terms_container2 h2 {font-size: 36px; font-weight: 800; text-align: center; background-image: linear-gradient(to top, #11417f 0%, #068dae 100%); color: #fff; border-radius: 53px 53px 0 0; padding: 30px 0;}
.terms_content {width: 94%; margin: 20px auto 30px; font-size: 17px; line-height: 24px;}
.terms_content a:hover {color: #050AFF;	transform: scale(0.97);	cursor: pointer;}
.terms_content a.over {	background-color: lightgray;}
.terms_container1 p,.terms_container2 p {padding-left: 18px; margin-bottom: 5px;}
.rule_top {	width: 100%; text-align: center;}
.terms_content img {padding: 10px 0;}
.terms_container1 h3,.terms_container2 h3 {	background-color: #6f6f6f;	border-radius: 0 20px 20px 0; font-size: 22px; line-height: 30px; font-weight: bold; padding: 5px 20px;	display: inline-block; margin: 10px 0; color: #fff;}
.terms_content h3 strong {color: #ffe398; margin-right: 3px;}
.terms_content h4 {display: inline-block; color: #fff; background: #bb2c5d;	font-size: 18px;	font-weight: bold; padding: 2px 20px; margin-top: 8px; border-radius: 10px;}
.terms_content ol li {margin: 0 0 7px 35px;	list-style-type: decimal;}
.terms_content li strong {color: tomato; font-size: 18px;}

/*category*/
.category_main {display: flex; margin: 0 auto;}
.category {float: left;	/*width: 25%; */}
.category a {display: block; margin: 8px; transition: .2s ease-in;}
.category a:hover {transform: scale(0.97);}
.category img {width: 100%;}

.btn{display: flex; justify-content: center;}
/*container*/
.container {width: 1100px; margin: 0 auto; padding-top: 20px;}
h1 {border-bottom: solid 5px #939393; padding: 10px; font-size: 40px; font-weight: bold; color: #000; margin: 0 auto;}
h1 span {font-size: 25px; color: #939393; font-weight: lighter;}
.flip span {font-size: 18px; color: #939393;}
.container li {padding-bottom: 20px;}

/*??hover*/
.flip {width: 1000px;	margin: 0 auto;	padding: 15px; text-align: left; border-bottom: dotted 2px #0059c6;	font-size: 25px; font-weight: 700; color: #0059c6;	position: relative;	transition: .2s ease-in-out; z-index: 1; cursor: pointer}
.flip:hover,.flip:focus,.flip:active {color: #2f2f2f;}

/*????*/
div.panel {width: 980px; margin: auto; height: 0; overflow: hidden; background-color: #fff; transition: .5s linear height;}
.active div.panel {height: 500px; overflow-y: auto;	padding: 30px; /*margin: 20px;*/}

/*???????*/
.open,.close,.open01,.close01 {
	border-radius: 30px; 
	border: 1px solid #2f2f2f; 
	color: #2f2f2f;	
	display: inline-block;	
	padding: 6px 10px; 
	font-size: 10px; 
	line-height: 12px;	
	position: relative;	
	float: right; 
	left: 0px;
	transition: .3s ease-in-out;
	cursor: pointer;
}
.close {display: none;}
.open01 {display: none;}
.flip:hover .open,.flip:hover .close {background-color: #2f2f2f; color: white;}

.active .open01 {display: block;}
.active .close01 {display: none;}
.active .open {display: none;}
.active .close {display: block;}

.panel p,.panel01 p {text-align: left; font-size: 18px; line-height: 25px;}
.panel ol,.panel01 ol { }
.panel li,.panel01 li {font-size: 18px; list-style: decimal;}
.panel .list02 li, .panel01 .list02 li {list-style-type: circle; color: #0d53c2; font-weight: bold; font-size: 21px; padding-top: 10px;}
.panel span,.panel01 span {font-size: 18px; color: #000;}

/**footer-bg**/
.footer-bg {
	width: 100%;
	height: 190px;
	background-image: url(../images/bottom.png);
	background-position: center;
}
.pc_mode {display: block;}
.m_mode {display: none;}

/*heartbeat*/
.zoominzoomout-play {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	animation-delay: -1s;
	-webkit-animation-name: zoominzoomout-play;
	animation-name: zoominzoomout-play;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}


@-webkit-keyframes zoominzoomout-play {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	100% {
		-webkit-transform: scale(0.92);
		transform: scale(0.92);
	}
}

@keyframes zoominzoomout-play {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	100% {
		-webkit-transform: scale(0.92);
		transform: scale(0.92);
	}
}

@media screen and (min-width: 1025px) {
.NavArea {display: none; width: 110px; position: fixed; top: 120px; right: 0; z-index: 999;}
.Nav-slide.active {background-color: #d63348;}
.Nav-slide.active a {color: yellow;}
.Nav-slide.active a:hover {color: #000;}
.go_top {display: block; cursor: pointer;}
.Nav-wrapper {width: 100px; background: #003b63; border: 2px solid #f9e38e; border-radius: 10px; padding: 0 2px; position: relative;}
.Nav-wrapper.tour {width: 100px; background: #389746; border: 2px solid #f9e38e; border-radius: 10px; padding: 0 2px; position: relative;}
.Nav-wrapper:first-child {padding-top: 40px;}
.Nav-wrapper li {font-size: 15px; line-height: 19px; text-align: center; background: transparent; margin: auto; padding: 4px 0; padding-right: 0; letter-spacing: 0;} 
.Nav-wrapper li.highlight {font-size: 24px; border-radius: 0 0 20px 20px; padding: 10px 0 15px;}
.Nav-wrapper li a {color: #fff; font-weight: bold; cursor: pointer; position: relative; z-index: 500;}
.Nav-wrapper li a:hover {color: #fff100;}
.Nav-wrapper li:after {background: #fff100; height: 2px; position: absolute; right: 51%; left: 51%; bottom: 0; z-index: 1; content: "";
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: left, right;
    transition-property: left, right;}
li.Nav-slide.best {border-radius: 15px; background: #009688; margin: 5px;}
li.Nav-slide.best2 {border-radius: 15px; background: #ce2644; margin: 5px;}
.float_tit {position: absolute; top: -95px; left: 2px;}
.govip {position: absolute; bottom: -120px; left: -6px;}
.Nav-wrapper li span {display: block;}
}
	
@media screen and (max-width:1024px) {
.main {background: url("../images/kv_bg_foreign1024.png")no-repeat center top #f2b743; background-size: 150%, 130%; padding-bottom: 100px;}
.display_pc {display: none;}
.display_m {display: block;}
.btn{display: none;}
/**time_m**/
.kv_label {display: none; }
.kv_label_m {display: none;}
.kv_label_m img {width: 100%;}
.countdown {display: none;}
.countdown .numbers {text-align: center; font-size: 24px;}
.countdown_unit {font-size: 24px;}
.countdown_txt {display: none;}
#count2 {line-height: 23px; font-size: 50px;}
	
/*kv*/
.kv_wrapper img {width: 100%;}
.kv_container {height: 542px;}
.kv_slogan {width: 50vw; top: 3vw; left: 24.8vw;}
.kv_ticket {width: 50vw; top: 30vw; left: 24.8vw;}
.kv_landmark {width: 100vw; top: 26vw; left: 0vw;}

.terms_wrapper {width: 100vw; margin: 20px auto;}
.container {width: 1000px;}
	
/**NavArea-top**/ 
.NavArea {display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 999;}
.NavArea .Nav {position: relative; margin: 0; padding: 0; overflow-x: scroll; background: #000; border-bottom: 2px solid #ccc;}
.NavArea .Nav ul {display: flex;}
.NavArea .Nav li {z-index: 10; flex: none;}
.NavArea .Nav a {color: #fff; padding: 0 15px; height: 50px; font-size: 15px; line-height: 50px; font-weight: bold;}
.Nav-slide.active a {color: yellow;}
.NavArea li.highlight0 {display: none;}
.Nav-slide.active a {color: yellow; font-weight: bold; border-bottom: 2px solid yellow; background: #525252;}
.float_tit{display: none;} 
.Nav-wrapper li span {display: inline-block;}
}

@media screen and (max-width: 768px) {
.main{background: url("../images/kv_bg_foreign_m2.png")no-repeat center top}
body {width: 100vw; min-width: inherit;}
.gotop {background: url(//www.payeasy.com.tw/travel/event/img/icon_top.png) no-repeat; height: 36px; position: fixed; right: 5px; width: 36px; bottom: 80px; z-index: 900; display: none;}
.gotop a {display: block; width: 48px; height: 36px;}

/**kv**/
.kv_container {height: 55vw;}

/**terms**/
.terms_wrapper {width: 98vw; margin: 10px auto; padding-bottom: 5px;}
.terms_container1 {border-radius: 30px;}
.terms_container1 h2 {font-size: 21px; line-height: 21px; border-radius: 30px 30px 0 0;	padding: 10px 0;}
.terms_content {width: 92vw; font-size: 14px; line-height: 18px;*/ margin: 7px auto 15px;}
.terms_content a {font-size: 15px;}
.terms_container1 h3 {font-size: 15px; line-height: 18px; margin: 3px 0;}
.terms_content ol li {margin: 4px 5px 0 15px;}
.terms_content li strong {font-size: 14px;}
.terms_wrapper img {width: 100%; padding: 5px 0;}
.rule_top {width: 100%; margin: 0 auto;}
.terms_content h4{font-size: 13px; margin: 6px 0 2px 0;}

.event_details {display: none;}

.box01 tr td {padding: 5px 2px;}
.category_main {width: 92vw; flex-wrap: wrap; flex-direction: row; justify-content: center;}
.category a {display: block; margin: 8px; transition: .2s ease-in;}
.category a:hover {transform: scale(0.97);}
.category img {width: 100%;}
	

.flip {width: 90vw; font-size: 17px; padding: 7px;}
.text_wrapper {width: 95vw !important; margin: auto;}
.container {width: 95vw; margin-bottom: 20px; margin-top: 10px;}
div.panel {width: 90vw; margin: 0 auto;}
.active div.panel {padding: 5px 5px 5px 30px; height: 300px;}
.open,.close,.open01,.close01 {left: 0vw;}
.panel li,.panel01 li {font-size: 15px; line-height: 22px; padding-bottom: 10px;}
.panel .list02 li, .panel01 .list02 li {font-size: 18px;}
}

@media screen and (max-width:576px) {	
.kv_slogan {width: 63vw; top: 10vw; left: 19vw;}
.kv_landmark {top: 42vw;}
.kv_ticket{width: 63vw; top: 44vw; left: 19.8vw;}
.kv_container {height: 71vw;}
.terms_container2 h2 {font-size: 21px; line-height: 27px; padding: 15px 25px;}
.flip {font-size: 20px;}
}
@media screen and (max-width:320px) {
.flip {font-size: 16px;} 
}