@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: 5%;
	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}



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

	/*主視覺*/
	.theme-wrap{
		display: block;
		padding: 20px;
		width: 100%;
		background: url(../images/theme-bg.png) bottom 0 center no-repeat;
		background-size: cover;}
	
	.theme-wrap .theme{
		display: inline-block;
		width: 100%;
		max-width: 1200px;
		height: 600px;
		margin: 0 auto;
		padding: 20px;}

	.deco-themeTag{
		display: block;
		width: 381px;
		height: 81px;
		margin: 0 auto;
		background: url(../images/deco-themeTag.png) bottom center no-repeat;
		background-size: contain;}

	.theme-whoo{
		display: inline-block;
		width: 100%;
		max-width: 420px;
		height: 173px;
		background: url(../images/theme-whoo.png) center no-repeat;
		background-size: contain;
		z-index: 1;}

	.theme-whoo::after{
		content: '';
		position: absolute;
		display: block;
		left: -153px;
		width: 153px;
		height: 130px;
		background: url(../images/theme-date.png) center no-repeat;
		background-size: contain;
		animation:  date-animation 1.8s ease-in-out infinite;}
		/*date-animation*/
		@keyframes date-animation{
			0%{	transform: translate(0, 0);}
			50%{ transform: translate(-5px, -5px);}
			100%{ transform: translate(0, 0);}
		}
	
	.theme-w1{
		position: absolute;
		display: inline-block;
		bottom: -80px;
		left: 10px;
		width: 375px;
		height: 126px;
		background: url(../images/theme-w1.png) top center no-repeat;
		background-size: contain;}

	.theme-wnote{
		position: absolute;
		display: inline-block;
		bottom: -180px;
		left: 10px;
		width: 90%;
		max-width: 342px;
		height: 141px;
		background: url(../images/theme-wnote.png) top center no-repeat;
		background-size: contain;}
	
	.theme-5wrap{
		display: inline-block;
		position: absolute;
		margin-top: 40px;
		left: 60%;
		width: 330px;
		height: 330px;
		background: url(../images/deco-circle.png) center no-repeat;
		background-size: contain;}

	.theme-5{
		display: inline-block;
		position: absolute;
		width: 51.9%;
		height: 70%;
		left: 40px;
		top: 50%;
		transform: translateY(-50%);
		background: url(../images/theme-5.png) center no-repeat;
		background-size: contain;
		animation:  five-animation 2.2s ease-in-out infinite;}
		/*5-animation*/
		@keyframes five-animation{
			0%{	transform:translateY(-50%) scale(0.9)}
			50%{	transform:translateY(-50%) scale(1)}
			100%{	transform:translateY(-50%) scale(0.9)}
		}

	.theme-5w{
		display: inline-block;
		position: absolute;
		right: 0px;
		top: 40%;
		width: 34.54%;
		height: 22.72%;
		background: url(../images/theme-5w.png) center no-repeat;
		background-size: contain;}


	.theme-tiger{
		display: inline-block;
		position: absolute;
		left: 0;
		bottom: -40px;;
		width: 359px;
		height: 355px;}

	.tiger-body{
		display: inline-block;
		position: absolute;
		top: 5px;
		right: 0;
		width: 273px;
		height: 354px;
		background: url(../images/tiger-body.png) center no-repeat;
		background-size: contain;}

	.tiger-body::after{
		content: '';
		position: absolute;
		display: inline-block;
		right: -15px;
		top: 24%;
		width: 41.75%;
		height: 20.9%;
		background: url(../images/deco-money2.png) center no-repeat;
		background-size: contain;
		animation: moneyBounce-ani 1.5s ease-in-out infinite;}
		/*moneyBounce-ani*/
		@keyframes moneyBounce-ani{
			0%{transform: translateY(0);}
			60%{transform: translateY(10%);}
			100%{transform: translateY(0);}
		}


	.tiger-hand{
		display: inline-block;
		position: absolute;
		top: 170px;
		right: 130px;
		width: 93px;
		height: 74px;
		background: url(../images/tiger-hand.png) center no-repeat;
		background-size: contain;
		animation: tigerWaving-ani 3s ease-in-out infinite;}
		/*tigerWaving-ani*/
		@keyframes tigerWaving-ani{
			0%{transform: rotate(15deg); transform-origin: left bottom;}
			50%{transform: rotate(0deg); transform-origin: left bottom;}
			100%{transform: rotate(15deg); transform-origin: left bottom;}
		}

	.tiger-tail{		
		display: inline-block;
		position: absolute;
		top: 186px;
		left: 0;
		width: 140px;
		height: 109px;
		background: url(../images/tiger-tail.png) center no-repeat;
		background-size: contain;
		animation: tailWaving-ani 4s ease-in-out infinite;}
		/*tailWaving-ani*/
		@keyframes tailWaving-ani{
			0%{transform: rotate(-15deg); transform-origin: right bottom;}
			50%{transform: rotate(0deg); transform-origin: right bottom;}
			100%{transform: rotate(-15deg); transform-origin: right bottom;}
		}

	.theme-bus{
		display: inline-block;
		position: absolute;
		right: 0px;
		bottom: -10px;
		animation:  busRun-animation 10s ease-in-out forwards;}
		/*bus-animation*/
		@keyframes busRun-animation{
			0%{	transform: translate(150%, -50px);}
			100%{ transform: translate( -80%, -10px);}
		}

	.theme-bus > span{
		display: inline-block;
		width: 215px;
		height: 135px;
		background: url(../images/deco-bus.png) center no-repeat;
		background-size: contain;
		animation:  bus-animation 1s ease-in-out infinite;}
		/*bus-animation*/
		@keyframes bus-animation{
			0%{	transform: scale(0.98)}
			50%{	transform:scale(1)}
			100%{	transform:scale(0.98)}
		}

	.compaign-wrap{
		display: block;
		padding: 20px;}

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

	.compaign-wrap .campaign span{
		display: inline-block;
		margin: 80px 40px;}

	.compaign-wrap .campaign span img{
		width: 100%;
		max-width: 449px;}

	.compaign-wrap .campaign span:nth-of-type(1):before{
		content: '';
		position:absolute;
		display: inline-block;
		right: 12px;
		top: -10px;
		width: 215px;
		height: 97px;
		z-index: 1;
		background: url(../images/deco-note1.png) center no-repeat;
		background-size: contain;}

	.compaign-wrap .campaign span:nth-of-type(2):before{
		content: '';
		position:absolute;
		display: inline-block;
		left: 50px;
		top: -60px;
		width: 143px;
		height: 98px;
		z-index: 1;
		background: url(../images/deco-note2.png) center no-repeat;
		background-size: contain;}

	.compaign-wrap .campaign span:nth-of-type(1)::after{
		content: '';
		position:absolute;
		display: inline-block;
		left:  0px;
		bottom: 20px;
		width: 113px;
		height: 162px;
		z-index: 1;
		background: url(../images/deco-paw.png) center no-repeat;
		background-size: contain;
		animation: paw-ani1 4s ease-in-out infinite;}
		/*paw-ani1*/
		@keyframes paw-ani1{
			0%{ transform: translate(0, 0) rotate(45deg);}
			50%{ transform: translate(10px, -10px) rotate(45deg);}
			100%{ transform: translate(0, 0) rotate(45deg);}
		}
	.compaign-wrap .campaign span:nth-of-type(2)::after{
		content: '';
		position:absolute;
		display: inline-block;
		right: 0px;
		top: -20px;
		width: 113px;
		height: 162px;
		z-index: 1;
		background: url(../images/deco-paw.png) center no-repeat;
		background-size: contain;
		animation: paw-ani2 3s ease-in-out infinite;}
		/*paw-ani2*/
		@keyframes paw-ani2{
			0%{ transform: translate(0, 0);}
			50%{ transform: translate(10px, 10px);}
			100%{ transform: translate(0, 0);}
		}
	

	/*atviceBtn*/
	.activeBtn-wrap{
		max-width: 1200px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		margin: 0 auto;}

	.activeBtn-wrap a{
		display: inline-block;
		margin: 20px;
		width: 311px;
		height: 94px;}

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

	.activeBtn-wrap a:nth-of-type(1){		
		background: url(../images/btn-join.png) center no-repeat;
		background-size: contain;}

	.activeBtn-wrap a:nth-of-type(2){		
		background: url(../images/btn-callcard.png) center no-repeat;
		background-size: contain;}



	/*fallingCoin*/
	.fallingCoins{
		display: flex;
		width: 100%;
		height: 100%;}

	.fallingCoins span{
		display: inline-block;
		flex:1;}

	.coin1{
		display: inline-block;
		width: 43px;
		height: 36px;
		margin: 0 20px 0 5px;
		background: url(../images/deco-coin1.png) center no-repeat;
		background-size: contain;}

	.coin2{
		display: inline-block;
		width: 41px;
		height: 39px;
		margin: 0 2px 0 15px;
		background: url(../images/deco-coin2.png) center no-repeat;
		background-size: contain;}

	.coin3{
		display: inline-block;
		width: 36px;
		height: 43px;
		margin: 0 20px 0 35px;
		background: url(../images/deco-coin3.png) center no-repeat;
		background-size: contain;}		
		
		/*fallingCoin-ani*/
		@keyframes fallingCoin-ani{
			0%{
				transform: translateY(-1200px);
				opacity: 0;}
			10%{opacity: 1;}
			90%{opacity: 1;}
			100%{
				opacity: 1;
				transform: translateY(200px);
			}
		}
	

		.fallingCoins span:nth-of-type(1){animation: fallingCoin-ani 11s linear infinite;}
		.fallingCoins span:nth-of-type(2){animation: fallingCoin-ani 6s linear infinite;}
		.fallingCoins span:nth-of-type(3){animation: fallingCoin-ani 8s linear infinite;}
		.fallingCoins span:nth-of-type(4){animation: fallingCoin-ani 15s linear infinite;}
		.fallingCoins span:nth-of-type(5){animation: fallingCoin-ani 17s linear infinite;}
		.fallingCoins span:nth-of-type(6){animation: fallingCoin-ani 5s linear infinite;}
		.fallingCoins span:nth-of-type(7){animation: fallingCoin-ani 7s linear infinite;}








	/*---------------*/
	/*---活動辦法-----*/
	/*---------------*/
	.rules-wrap{padding: 40px 20px 20px;}

	.rules-title{
		margin-bottom: 30px;}

	.rules-title > h2::after{
		display: inline-block;
		content: '▼';
		right: 0;
		vertical-align: middle;
		margin: 0px 5px;
		padding-bottom: 5px;
		font-size: 30px;
		color: #df4e07;
		background: -webkit-linear-gradient(-50deg, #5e2303 10%, #ff740d 50%, #993b07 100%);
		-ms-background: -webkit-linear-gradient(-50deg, #5e2303 10%, #ff740d 50%, #993b07 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		transition: 0.5s;}

	.rules-title span{
		display: block;
		width: 100%;
		max-width: 1200px;
		height: 5px;
		margin: 20px auto;
		background: #de4e07;}

	.rules{
		background: rgba(245, 229, 229, 0.5);
		max-width: 1000px;
		margin: 0 auto;
		padding: 20px 40px;}

	.rules > h3{
		font-size: 17px;
		text-align: left;
		margin: 2px 0;}

	.rules ol {padding-left: 40px;}
	.rules > ol > li{
		font-size: 16px;
		list-style: cjk-ideographic;}

	.rules > ol > li::before{
		content: '';
		display: inline-block;
		position: absolute;
		left: -22px;
		top: 2px;
		width: 20px;
		height: 20px;
		background: url(../images/icon-list.png) center no-repeat;
		background-size: contain;}

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

	.rules ol li ul li h3{
		color: #ff321f;
		text-align: left;
		margin-bottom: 4px;
		font-size: 17px;}

	.rules ol li ul li h3::before{
		content: '';
		position: absolute;
		display: inline-block;
		left: -24px;
		top: 3px;
		width: 17px;
		height: 20px;
		background: url(../images/deco-arrow.png) center no-repeat;
		background-size: 80%;}
		
	.rules ol li ul{
		padding: 5px;
		margin: 5px 0;
		padding-left: 30px;}

	.rules ol li ul li{
		color: #c1234f;
		margin-left: 10px;
		list-style: square;
		font-weight: 400;
		margin-bottom: 5px;}
	.rules ol li ul li > ul > li{list-style: disc;}
	.rules ol li ul li > a{
		font-weight: 600;
		padding: 2px 5px;
		background: #ff321f;
		color: #fff}

	.rules ol li ul li > a:active,
	.rules ol li ul li > a:hover{
		border-radius: 5px;
		color: #fffb00;}

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

	.rules ol li ol{padding-left: 5px;}
	.rules ol li ol li{
		list-style: none;
		margin-bottom: 0;
		font-size: 16px;
		font-weight: 600;}


		/*路徑提示箭頭動畫*/
		@keyframes iconArrow-ani{
			0%{ transform: translateX(4px) rotate(-90deg);}
			50%{ transform: translateX(-4px) rotate(-90deg);}
			100%{ transform: translateX(4px) rotate(-90deg);}
		}

	.rules > ol > li > ul {text-align: left;}

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

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

	.btnTop-Wrap{
		display: inline-block;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 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: rgb(255, 208, 0);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: rgb(255, 230, 0);
		background: #ff321f;
		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 20px;
		z-index: -1;}

	footer{
		padding: 10px 2%;
		font-size: 15px;
		z-index: 1;}
	
	
		/*錨點*/
		#section1{top: -40px;}
		#section2{top: -40px;}
		#section3{top: -40px;}
		#section4{top: -40px;}