@charset "utf-8";
	/*--CSS Document --*/
	/*--google字型 --*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap);

@font-face {
    /*--處理中文難字問題 --*/
    font-family: 'tcav';
    src: url('fonts/mingliu.ttf') format('truetype');}

  *{font-family: 'Noto Sans TC', sans-serif, '微軟正黑體';
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	transition: 0.8s;
	color: #333333;
	outline: none;}

/*-- 隱藏input數字預設輸入上下箭頭調整功能 --*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;}

img{border: 0;}

a:link, a:checked, a:visited{
	color:#db491d;
	text-decoration: none;}

/*-- 預載Loading --*/
.loader{
	position: fixed;
	display: inline-block;
	height: 100vh;
	width: 100%;
	background: rgba(255, 255, 255, 0.8) url(../images/loading.svg) center no-repeat;
	background-size: 25%;
	z-index: 2;
	top: 0;
	left: 0;}

/*-- header --*/
header{
	width: 100%;
	height: 70px;
	background: #007c7c;
	position: sticky;
    top: 0;
	z-index: 999;}

.header-wrap{
	display: flex;
	margin: 0 auto;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 15px 2%;
	max-width: 1200px;}

.logo-wrap{
	display: inline-block;
	position: relative;
	width: auto;
	text-align: left;
	height: 40px;
	line-height: 4px;
	z-index: 1;
	color: #fff;
	font-size: 22px;}

.logo-wrap img{
	height: 100%;
	vertical-align: middle}

/*-- 選單 --*/
.navi-warp{
	display: inline-block;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);}

.navi-warp ul{
	display: flex;
	justify-content: center;
	padding: 10px;}

.navi-warp ul li{
	list-style: none;
	display: inline-block;
	padding: 5px 15px;
	margin: 0 2px;
	color: #fff;
	border: 2px #007c7c solid;
	font-weight: 500;
	letter-spacing: 2px;
	cursor: pointer;
	border-radius: 10px;}

.navi-warp ul li span{color: #fff;}
.navi-warp ul li:hover{
	background: #00ade2;
	color: #ffff00;
	border-bottom: 2px #f2ffc5 solid;}

.navi-warp ul li a{color: #fff;}

/*-- 主內容區 --*/
.container{
	display: block;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	background: #097591;}

/*-- 主視覺 --*/
.theme-wrap{
	display: inline-block;
	width: 100%;
	height: 600px;
	background: url(../images/theme-bg.png) top center;
	background-size: cover;
	margin-bottom: 100px;}

.theme-wrap .theme{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 20px;}

.theme-wrap .theme .theme-title{
	display: inline-block;
	text-align: center;
	width: 100%;}

.theme-wrap .theme .theme-title span,
.theme-wrap .theme .theme-title img{
	display: block;
	width: 100%;
	margin: 0 auto;}

.theme-wrap .theme .theme-title span.title1{
	max-width: 368px;
	bottom: -35px;
	opacity: 0;}
.theme-wrap .theme .theme-title span.title1 > img{
	animation: title1-ani 4s ease-in-out infinite;}
	@keyframes title1-ani{
		0%{transform: scale(0.99) rotate(2deg);}
		25%{transform: scale(1) rotate(-2deg);}
		50%{transform: scale(0.99) rotate(2deg);}
		75%{transform: scale(1) rotate(-2deg);}
		100%{transform: scale(0.99) rotate(2deg);}
	}

.theme-wrap .theme .theme-title span.title2{
	max-width: 650px;
	opacity: 0;}

.theme-wrap .theme .theme-title span.titledate{
	max-width: 385px;
	top: -20px;}

.titledate::after,
.titledate::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 58.70%;
	max-width: 226px;
	top: 40%;
	transform: translateY(-50%);
	height: 53px;
	background: url(../images/deco-flag.png) center no-repeat;
	background-size: contain;
	z-index: -1;}

.titledate::after{
	right: -100px;}

.titledate::before{	
	left: -100px;}

.title-bg{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: url(../images/title-bg.png) top center no-repeat;
	background-size: contain;
	animation: title-bg-ani 2s ease-in-out infinite;}
	@keyframes title-bg-ani{
		0%{transform: scale(1) translate(-50%,-50%);}
		50%{transform: scale(1.01) translate(-50%,-50%);}
		100%{transform: scale(1) translate(-50%,-50%);}
	}

.theme-flags{
	position: absolute;
	display: block;
	width: 100%;
	height: 112px;
	background: url(../images/deco-headflags.png) top center repeat-x;
	background-size: auto;
	top: -50px;}

.theme-bottombg{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
	background: url(../images/theme-curvbg.png) bottom -30px center no-repeat;
	background-size: auto;
	pointer-events: none;}


/*-- family --*/
.theme-family{
	position: absolute;
	display: flex;
	align-items: baseline;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
	left: 0;
	bottom: -20%;}

.theme-family > span{margin: 0 15px ;}
.theme-family > span > img{ width: 100%;}

.deco-mama{
	animation: mama-ani 3s ease-in-out infinite;}
	@keyframes mama-ani{
		0%{transform: translateY(0);}
		20%{transform: translateY( 0px);}
		30%{transform: translateY(-5px);}
		40%{transform: translateY( 0px);}
		50%{transform: translateY( 0px);}
		60%{transform: translateY(-5px);}
		70%{transform: translateY( 0px);}
		100%{transform: translateY(0);}
	}

.deco-boy{
	animation: boy-ani 3s ease-in-out infinite;}
	@keyframes boy-ani{
		0%{transform: translateY( 0px);}
		10%{transform: translateY( -8px);}
		20%{transform: translateY( 0px);}
		30%{transform: translateY( -8px);}
		40%{transform: translateY( 0px);}
		50%{transform: translateY( -8px);}
		60%{transform: translateY(  0px);}
		100%{transform: translateY( 0px);}
	}

.deco-daddy{
	animation: daddy-ani 3s ease-in-out infinite;}
	@keyframes daddy-ani{
		0%{transform: translateY( -8px);}
		10%{transform: translateY( 0px);}
		20%{transform: translateY( -8px);}
		30%{transform: translateY( 0px);}
		40%{transform: translateY( -8px);}
		50%{transform: translateY( 0px);}
		90%{transform: translateY( 0px);}
		100%{transform: translateY( -8px);}
	}

.deco-girl{
	animation: girl-ani 1s ease-in-out infinite;}
	@keyframes girl-ani{
		0%{transform: translateY( -3px);}
		50%{transform: translateY( 0px);}
		100%{transform: translateY( -3px);}
	}

.deco-dog{
	animation: dog-ani 4s ease-in-out infinite;}
	@keyframes dog-ani{
		0%{transform: translateY( -5px);}
		10%{transform: translateY( -5px) scaleX(1);}
		15%{transform: translateY( -5px) scaleX(-1);}
		20%{transform: translateY( -5px) scaleX(1);}
		50%{transform: translateY( 0px) scaleX(1);}
		100%{transform: translateY( -5px);}
	}

/*-- 煙火 --*/
.theme-fireworks{
	position: absolute;
	display: inline-block;
	width: 100%;
	max-width: 1400px;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);}

.theme-fireworks .deco-fireworks,
.deco-fireworks{
	position: absolute;
	display: inline-block;
	width: 129px;
	height: 129px;
	top: 50%;
	background: url(../images/deco-fireworks.png) center no-repeat;
	background-size: contain;
	opacity: 0;
	animation: fireworks-ani 4s ease-in-out infinite;}
	@keyframes fireworks-ani{
		0%{
			opacity: 0;
			transform: scale(0.5) translateY(20px);}
	
		40%{
			opacity: 0.8;
			transform: scale(1) translateY(-80px);}
			
		90%{
			opacity:0;
			transform:scale(1) translateY(-40px);}
	
		100%{
			opacity:0;
			transform:scale(1) translateY(60px) }
	}


.theme-fireworks .deco-fireworks:nth-of-type(1),
.actBtn-wrap .deco-fireworks:nth-of-type(1){
	width: 5%;
	left: 5%;
	top: 30%;
	animation-duration: 4.1s;}

.theme-fireworks .deco-fireworks:nth-of-type(2),
.actBtn-wrap .deco-fireworks:nth-of-type(2){
	width: 15%;
	left: 10%;
	top: 10%;
	opacity: 0;
	animation-delay: 1s;
	animation-duration: 6s;}

.theme-fireworks .deco-fireworks:nth-of-type(3),
.actBtn-wrap .deco-fireworks:nth-of-type(3){
	width: 13%;
	right: 0%;
	top: 22%;
	animation-delay: 0.3s;
	animation-duration: 4.3s}

.theme-fireworks .deco-fireworks:nth-of-type(4),
.actBtn-wrap .deco-fireworks:nth-of-type(4){
	width: 8%;
	right: 15%;
	top: 26%;
	animation-delay: 1s;
	animation-duration: 4.8s}

.theme-fireworks .deco-fireworks:nth-of-type(5){
	width: 20%;
	right: 30%;
	top: 14%;
	animation-delay: 1.5s;
	animation-duration: 5s}

.theme-fireworks .deco-fireworks:nth-of-type(6){
	width: 15%;
	left: 22%;
	top: 18%;
	animation-delay: 1.3s;
	animation-duration: 3s}

 .prize:nth-of-type(1)::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 15%;
	height: 15%;
	left: -50px;
	top: 30%;
	background: url(../images/deco-fireworks.png) center no-repeat;
	background-size: contain;
	animation-delay: 2s;
	animation: fireworks-ani 6.2s ease infinite;}

 .prize:nth-of-type(1)::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 20%;
	height: 20%;
	right: -50px;
	bottom: 40%;
	background: url(../images/deco-fireworks.png) center no-repeat;
	background-size: contain;
	animation-delay: 1.5s;
	animation: fireworks-ani 8.2s ease infinite;}

 .prize:nth-of-type(2)::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 18%;
	height: 18%;
	right: -50px;
	bottom: 5%;
	z-index: 1;
	background: url(../images/deco-fireworks.png) center no-repeat;
	background-size: contain;
	animation-delay: 3s;
	animation: fireworks-ani 5.2s ease infinite;}

/*deco word*/
.sayhi2023{
	position: absolute;
	display: inline-block;
	width: 21.08%;
	height: 45px;
	background: url(../images/deco-hi2023.png) center no-repeat;
	background-size: contain;
	left: 5%;
	top: 30%;
	animation: sayhi2023-ani 3s ease infinite;}
	@keyframes sayhi2023-ani{
		0%{ opacity: 0;}
		50%{ opacity: 1;}
		100%{ opacity: 0;}
	}

.beybye2022{
	position: absolute;
	display: inline-block;
	width: 21.08%;
	height: 38px;
	background: url(../images/deco-bye2022.png) center no-repeat;
	background-size: contain;
	right: 5%;
	top: 20%;
	animation: beybye2022-ani 3.5s ease infinite;}
	@keyframes beybye2022-ani{
		0%{ opacity: 0;}
		50%{ opacity: 1;}
		100%{ opacity: 0;}
	}

/*-- 活動內容 --*/
/* slogan */
.deco-slogan{
	display: inline-block;
	width: 100%;}
.deco-slogan > img{ width: 100%;}

.deco-slogan .slogan-pc{max-width: 808px;}
.deco-slogan .slogan-mb{
	max-width: 459px;
	display: none;}

/* btn連結 */
.actBtn-wrap{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 1400px;
	padding: 20px;
	margin: 0 auto;}

.actBtn-wrap a{
	display: inline-block;
	min-width: 273px;
	height: 164px;
	padding: 20px;
	margin: 10px;}

.actBtn-wrap a > img{
	position: absolute;
	width: 29.67%;
	left: 5.49%;
	bottom: 12.19%;}

.actBtn-wrap a:hover,
.actBtn-wrap a:active{
	transform: translateY(-15px);}

.actBtn-wrap a:hover > img,
.actBtn-wrap a:active > img{
	animation: deco-icon-ani 1s ease-in-out infinite;}
	@keyframes deco-icon-ani{
		0%{transform: rotate(2deg);}
		25%{transform: rotate(-3deg);}
		50%{transform: rotate(2deg);}
		75%{transform: rotate(-3deg);}
		100%{transform: rotate(2deg);}
	}

.actBtn1{
	background: url(../images/btn-more.png) center no-repeat;
	background-size: contain;}

.actBtn2{
	background: url(../images/btn-join.png) center no-repeat;
	background-size: contain;}

.actBtn3{
	background: url(../images/btn-line.png) center no-repeat;
	background-size: contain;}

.actBtn4{
	background: url(../images/btn-call0800.png) center no-repeat;
	background-size: contain;}

.prize-wrap{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;}

.prize-wrap .prize{
	display: inline-block;
	flex: 1;
	max-width:560px;
	padding: 120px 10px 30px;
	margin: 0 auto;
	margin: 20px;
	background: #fff;
	border-radius: 25px;
	border:solid 5px #565656;}

.prize-wrap .prize:nth-of-type(2)::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 40%;
	max-width: 256px;
	height: 161px;
	background: url(../images/tag-bouns.png) center no-repeat;
	background-size: contain;
	top: -40px;
	right: 10px;
	animation: tag-bonus-ani 2s ease-in-out infinite;}
	@keyframes tag-bonus-ani{
		0%{transform: rotate(2deg);
		   transform-origin: left bottom;}
		50%{transform: rotate(-2deg);
			transform-origin: left bottom;}
		100%{transform: rotate(2deg);
			transform-origin: left bottom;}
	}

.prize-wrap .prize p{
	font-size: 28px;
	font-weight: 700;
	line-height: 48px;}

.prize-title1{
	position: absolute;
	display: inline-block;
	width: 100%;
	max-width: 246px;
	height: 99px;
	top: 0;
	left: 0;
	background: url(../images/prize1-title.png) bottom center no-repeat;
	background-size: contain;}

.prize-title2{
	position: absolute;
	display: inline-block;
	width: 100%;
	max-width: 246px;
	height: 99px;
	top: 0;
	left: 0;
	background: url(../images/prize2-title.png) bottom center no-repeat;
	background-size: contain;}

.gift{
	display: inline-block;
	padding: 10px 2%;
	width: 100%;
	background: #eee;
	margin-top: 20px;}

.gift > img {
	width: calc(100% - 10px);
	max-width: 230px;}

.note-quota{
	position: absolute;
	display: inline-block;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	padding: 28px 0;
	background: #fff;
	right: 2%;
	bottom: 5px;
	font-size: 20px;
	font-weight: 500;}

.note-quota > span{
	display: block;
	font-size: 16px;
	font-weight: 500;}

.note-quota::before{
	content: '名額';
    display: block;
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 16px;
    color: #bfbfbf;
    left: 0;
    top: 5px;}

.break{display: block;}
.p-green{
	font-size: 40px;
	color: #7fce14;
	margin: 0 4px;}

.p-pink{
	font-size: 40px;
	color: #ee86b4;
	margin: 0 4px;}



/*-- 活動辦法 --*/
.rules-wrap{padding: 20px 20px 20px;}
#rules-switch{display: none;}

.rules-title{
	display: inline-block;
	width: auto;
	cursor: pointer;}

.rules-title h2{
	display: inline-block;
	vertical-align: middle;
	font-size: 38px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 20px;}

.rules{
	max-width: 1100px;
	margin: 20px auto 10px;
	padding: 20px 2%;
	height: 0;
	overflow: hidden;
	padding: 0;
	background: #fff;
	border:1px solid #fff;}

.rules-title::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 35px ;
	height: 31px;
	background: url(../images/deco-triangle.png) center no-repeat;
	bottom: -30px;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%);
	transition: 0.5s;}

.rules ol {
	padding-left: 30px;
    padding-right: 10px;}

.rules > ol > li{
	color: #3c4a4c;
	font-size: 15px;}

.rules ol li{
	font-weight: 400;
	text-align: left;
	line-height: 24px;
	margin-bottom: 10px;}

.rules ol li h3{
	margin: 10px 0;
	text-align: left;
	font-size: 17px;
	white-space: pre-line;
	color: #f44336;}
	
.rules ol li ul{
	background: #efefef;
	padding: 10px;
	padding-left: 30px;
	margin-top: 10px;}

.rules ol li ul li{
	list-style: none;
	font-weight: 400;
	margin-bottom: 5px;}

.rules ol li ul li span{color: #ff5722;}

.rules ol li ol{padding-left: 5px;}
.rules ol li ol li{
	list-style: inherit;
    margin-bottom: 0;
    font-size: 15px;
    margin-left: 10px;}

/*活動辦法開關控制器*/
#rules-switch:checked ~ .rules{
	height: auto;
	padding: 30px 2%;}

#rules-switch:checked ~ .rules-title::after{
	transform: translateX(-50%) rotate(180deg);}


/*-----------------*/
/*----TO TOP ------*/
/*-----------------*/

.section-btnTop{
	display: inline-block;
	position: fixed;
	width: 100%;
	max-width: 1200px;
	height: 1px;
	margin: 0 auto;
	bottom: 25%;
	left: 50%;
	transform: translate(-50% , -50%);
	text-align: right;
	z-index: 99;}

.btnTop-Wrap{
	display: inline-block;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;}

.btnTop{
	position: relative;
	display: inline-block;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 60px;
	border-radius: 30px;
	font-weight: 600;
	padding: 5px;
	background: #63ead6;
	line-height: 50px;
	color: #ffffff;
	font-size: 1.2em;
	cursor: pointer;
	transition: 0.5s;
	box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0.8);}

.btnTop:active,
.btnTop:hover{
	color: #fff;
	background: #fdcf03;
	box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0);} 

.cno{
	display: block;
	text-align: right;
	width: 100%;
	background: #007c7c;
	color: #fff;
	padding: 5px 2%;
	z-index: -1;}

footer{
	padding: 10px 2%;
	font-size: 15px;
	z-index: 1;}


/*旅平增附註說明*/
.note{
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: #e95f28;
	padding: 5px 15px;
	background: #fff;}

.tips-col2.t3-1 > div:nth-of-type(1) > h2::after{
	content: '';
	display: inline-block;
	position: absolute;
	top: -80px;
	right: 20px;
	width: 26.25%;
	max-width: 122px;
	height: 79px;
	background: url(../images/deco-rates.png) center no-repeat;
	background-size: contain;
	animation: rate-ani 1s ease-in-out infinite;}
	/* rate-ani */
	@keyframes rate-ani{
		0%{ transform: rotate(2deg) scale(0.99);
			transform-origin: left bottom;}
		50%{ transform: rotate(0deg) scale(1);
			transform-origin: left bottom;}
		100%{ transform: rotate(2deg) scale(0.99);
			transform-origin: left bottom;}
	}


	/*-- 右側浮動BTN --*/

	.btnRight-wrap{
		position: absolute;
		display: inline-block;
		width: 150px;
		height: 150px;
		left: 50%;
		top: -150px;
		transform: translateX(-50%);}
		
	.btnRight-wrap a{
		display: inline-block;
		width: 100%;
		height: 100%;
		background: url(../images/btnRight.png) center no-repeat;
		background-size: contain;	
		animation: btnRight-ani 2s ease-in-out infinite;}
		@keyframes btnRight-ani{
			0%{transform: translateY(0);}
			50%{transform: translateY(-5px);}
			100%{transform: translateY(0);}
		}