@charset "utf-8";
	/*--CSS Document --*/
	/*--google字型 --*/
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Sans+TC:wght@100;500;700;900&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;
	word-break: break-all;}

/*-- 隱藏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:#ffff00;
	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;
	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: 60px;
    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: 1px #007c7c solid;
	font-weight: 500;
	letter-spacing: 2px;
	cursor: pointer;
	border-radius: 5px;}

.navi-warp ul li:hover{
	color: #ffff00;
	transform: translateY(-5px);}

.navi-warp ul li a{color: #fff;}
.navi-warp ul li div.break{ display: none;}

body{
	background: #eeeeee;
	scroll-behavior: smooth !important;}

/*-- 主內容區 --*/
/*======START=======*/
.container{
	display: inline-block;
	width: 100%;}

.theme-bg{
	position: absolute;
	display: inline-block;
	width: 100%;
	max-height: 290px;
	min-height: 50vh;
	top: 0;
	left: 0;
	background: url(../images/theme-bg.png) top 0 center repeat-x;
	background-size: auto;}

/*-- 主視覺 --*/
.theme-wrap{
	display: inline-block;
	width: 100%;
	overflow: hidden;

	h1{
		display: flex;
		text-align: center;
		width: 100%;
		position: absolute;
		align-items: center;
		color: #008f8a;
		left: -100%;
		top: -100%;
		transform: translate(-50%, -50%);}

	.theme{
		display: inline-block;
		align-items: center;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;

		span.theme-mb{
			max-width: 650px;
			display: none;}

		span{
			display: inline-block;
			width: 100%;
			max-width: 930px;
			
			img{
				display: inline-block;
				width: 100%;}
	
			span{
				position: absolute;
				display: inline-block;
				width: 100%;
				left: 0;
				top: 0;
	
				img{
				display: inline-block;
				width: 100%;}}			

			span.theme-title{
				z-index: 1;}

			span.theme-title::after,
			span.theme-title::before{
				content: '';
				position: absolute;
				display: inline-block;
				width: 100%;
				height: 100%;;
				left: 0;
				top: 0;
				z-index: -1;
				background: url(../images/shine-yellow.png) center no-repeat;
				background-size: contain;
				animation: theme-title-shine-ani 1s ease-in-out infinite;}	
						
			span.theme-title::after{
				background: url(../images/shine-blue.png) center no-repeat;
				background-size: contain;
				animation-duration: 0.8s;
				animation-delay: 0.2;}

			span.theme-subtitle{
				z-index: 2;
				animation: theme-subtitle-ani 2s ease-in-out infinite;}

			span.theme-ribbon1{
				animation: theme-coin-ani 2s ease-in-out infinite;}

			span.theme-ribbon2{
				animation: theme-coin-ani 1.5s ease-in-out infinite;}

			span.goldbg{
				top: initial;
				bottom: -5px;}				
			}

		.theme-mainShine{
				display: inline-block;
				width: 100%;
				max-width: 1070px;
				height: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50% , -50%);
				background: url(../images/theme-mainshine.gif) center no-repeat;
				background-size: contain;}

		.theme-alung{
				display: inline-block;
				width: 100%;
				max-width: 850px;
				height: 100%;
				position: absolute;
				top: 47%;
				left: 53%;
				transform: translate(-50% , -50%);
				background: url(../images/alung.png) center no-repeat;
				background-size: contain;
				z-index: 99;}
			}
		
		.spotlight-r,
		.spotlight-l{
			position: absolute;
			display: inline-block;
			width: 80%;
			max-width: 700px;
			height: 580px;
			right: 0;
			left: initial;
			top: -120px;
			background: url(../images/spotlight-r.png) top center no-repeat;
			background-size: contain;
			animation: spotlight1-ani 4s ease infinite;
			pointer-events: none;}

		.spotlight-l{
			left: 0;
			background: url(../images/spotlight-l.png) top center no-repeat;
			background-size: contain;
			animation: spotlight2-ani 4s ease infinite;}
	}



	/* 如何組隊 */
#popUp3{display: none;}
.teamUp-wrap{
	display: inline-block;
	font-size: 16px;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	padding: 20px 2%;
	background: #fff;}

.teamUp-wrap .btn-wrap{
	position: absolute;
	right: 2%;
	top: 0;}

.teamUp > .note-list{ padding: 1%;}
.teamUp > .note-list ul {
	border-radius: 5px;
	background: #ecf1f1;}

.teamUp > .note-list ul li{ color: #737373;}
.teamUp > .note-list ul li span{ color: #ff0000;}

.teamUp{
	display: inline-block;
	width: 100%;
	height: 100%;
	height: calc(100% - 85px);
	overflow-Y: scroll;}

.teamUp .steps-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 100%;}

.teamUp .steps{
	display: inline-block;
	flex: 1;
	width: 100%;
	max-width: 309px;
	margin: 5px;}
	
.teamUp .steps{
	display: inline-block;
	flex: 1;
	width: 100%;
	margin: 5px;}
.teamUp .steps span{
	display: inline-block;
	width: 100%;
	max-width: 309px;}

.teamUp .steps span > img{
	display: inline-block;
	width: 100%;}


	/* 立即下載 */
.teamUp-wrap.download{ height: auto;}
.download .teamUp .steps > p {
	text-align: center;
	color: #333;
	background: initial;
	margin-bottom: 10px;}

.section-title-wrap.deco-download::before{
	content: '';
	position: absolute;
	display:inline-block;
	width: 100px;
	height: 100px;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: url(../images/deco-downlaod.png) center no-repeat;
	background-size: contain;}


	/* animation */
		@keyframes theme-title-shine-ani {
			0%{ opacity: 0.5;}
			50%{ opacity:1;}
			100%{ opacity: 0.5;}
		}		

		@keyframes theme-subtitle-ani {
			0%{ transform: rotate(1deg); transform-origin: right 50px center;}
			50%{ transform: rotate(-1deg); transform-origin: right 50px  center;}
			100%{ transform: rotate(1deg); transform-origin: right 50px  center;}
		}		

		@keyframes theme-coin-ani {
			0%{transform: translateY(5px);}
			50%{transform: translateY(0px);}
			100%{transform: translateY(5px);}
		}		



		@keyframes spotlight1-ani {
			0%{ transform: rotate(10deg); transform-origin: right top;}
			50%{ transform: rotate(-20deg); transform-origin: right top;}
			100%{ transform: rotate(10deg); transform-origin: right top;}
		}	


		@keyframes spotlight2-ani {
			0%{ transform: rotate(10deg); transform-origin: left top;}
			50%{ transform: rotate(-20deg); transform-origin: left top;}
			100%{ transform: rotate(10deg); transform-origin: left top;}
		}	

.goldfalling-wrap{
	position: absolute;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;;
	max-width: 1200px;
	pointer-events: none;

		> li{
			display: inline-block;
			width: 20%;
			height: 20%;
			max-width: 35px;
			max-width: 25px;
			background: url(../images/deco-coins01.png) center no-repeat;
			background-size: contain;
			animation: coinsFalling-ani 5s ease infinite;}

		> li:nth-of-type(1){ 
			background: url(../images/deco-coins01.png) center no-repeat;
			background-size: contain;
			animation-duration: 6s;}

		> li:nth-of-type(2){ 
			background: url(../images/deco-coins02.png) center no-repeat;
			background-size: contain;
			animation-duration: 3s;}

		> li:nth-of-type(3){ 
			height: 7%;
			margin-left: -40%;
			background: url(../images/deco-coins03.png) center no-repeat;
			background-size: contain;
			animation-duration: 3.4s;}

		> li:nth-of-type(4){ 
			background: url(../images/deco-coins04.png) center no-repeat;
			background-size: contain;
			animation-duration: 3.2s;}

		> li:nth-of-type(5){ 
			background: url(../images/deco-coins05.png) center no-repeat;
			background-size: contain;
			animation-duration: 5s}
	}

	@keyframes coinsFalling-ani {
		0%{ transform: translateY(-200%);}
		90%{ opacity: 1;}
		100%{ 
			transform: translateY(360%);
			opacity: 0;}
	}

/* 選單 */
.menu-wrap{
	display: inline-block;
	position: sticky;
	width: 100%;
	top: 0px;
	padding: 0 2%;
	z-index: 2;
	background: #eeeeee;
	margin-bottom: 10px;

	.menu{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		padding: 10px;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		box-shadow: 0 15px 10px -10px rgba(00, 00, 00, 0.1);

		a{
			display: inline-block;
			flex: 1;
			width: 100%;
			max-width: 200px;
			margin: 0 1%;
			position: relative;
			cursor: pointer;

			img{
				display: inline-block;
				width: 100%;}

			img:nth-of-type(2){	display: none}

			}
		a:active, a:hover{
			transform: translateY(-10px);}
		
		a:hover:before{
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			top:10%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-top: 25px solid #ffff00;
			border-right: 12px solid transparent;
			border-left: 12px solid transparent;
			z-index: 1;
			animation: navi-arrow-ani 1s ease infinite;}
		}
		a.navi-noneActive{cursor: initial;}
		a.navi-noneActive::before{
			content: '';
			position: absolute;
			top: -20px;
			width: 0;
			height: 0;
			top:10%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-top: 25px solid #ffff00;
			border-right: 12px solid transparent;
			border-left: 12px solid transparent;
			z-index: 1;
			animation: navi-arrow-ani 1s ease infinite;}
	}
		@keyframes navi-arrow-ani{
			0%{transform: translate(-50%,-50%) scaleX(1);}
			50%{transform: translate(-50%,-50%) scaleX(-1);}
			100%{transform: translate(-50%,-50%) scaleX(1);}
			
			}

/*-- 共同選項  --*/
h2{
	text-align: center;
	color: #ffffff;
	font-size: clamp( 2.3rem, calc(6vw - 1rem), 3.125rem );
	font-weight: 900;}

h3{
	text-align: center;
	color: #0a4e4c;
	font-size: clamp( 1.5rem , calc(8vw - 1.5rem), 2.5rem );
	font-weight: 900;}

h4{
	text-align: center;
	color: #d20000;
	padding: 1%;
	font-size: clamp( 1.1rem , calc(7vw - 1.1rem), 2rem );
	font-weight: 900;}

h4.double{
	display: inline-block;
	width: auto;
	padding: 8px 16px;
	background: #6e4908;
	border-radius: 20px;
	color: #fff;
	font-weight: 600;
	line-height: initial;
	margin: 5px 0;

	span{
		color: #ffff00;}
	.w-break::after{
		content: " / ";
		font-weight: 200;}
	}

.card.prize > h4{
	font-size: clamp( 1.2rem , calc(7vw - 1.1rem), 1.6rem );
	span{
		font-size: 0.8em;
	}
}

p.note{ font-size: clamp( 1.2rem , calc(8vw - 1.5rem), 1.1rem );
		color: initial;}

.w-break::after{ content: '，';}

.deco-curtain::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 30%;
	max-width: 174px;
	height: 125px;
	background: url(../images/deco-curtain.png) top right no-repeat;
	background-size: contain;
	right:0;
	top: 0;}


/*-- 共用樣式 卡片底圖 --*/

.section-title{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.section-title > span{
    position: absolute;
    left: 50%;
    top: 20%;
    width: 100%;
    max-width: 420px;
    transform: translate(-50%, -50%);
}

.section-title > span > img{
    display: block;
    width: 100%;
}
.card-wrap{
	display: inline-block;
	width: 100%;
	padding: 3% 2%;

	.card{
		display: inline-block;
		width: 100%;
		max-width: 1200px;
		background: #ffffff;
		border-radius: 30px;
		padding: 60px 10px 10px 10px;
	
		> div{
			display: flex;
			padding: 15px 10px;
			justify-content: space-evenly;
			align-items: center;
			flex-wrap: wrap;

			> span,
			> span > a {
				display: inline-block;
				width: 100%;
				max-width: 260px;
				margin: 1%;

				> img{
					display: inline-block;
					width: 100%;}}
			
			> span:hover,
			> span:active{
				transform: translateY(-15px);}
			}

		h3{
			.w-break::after{
				content: '，';
				color: #6e4908;}
			}
		}
		
		> a{	display: inline-block;
			width: 60%;
			max-width: 280px;

			img{
				display: inline-block;
				width: 100%;}
		}

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

		
}
.card-wrap{
	.card{	
		> div.m1,
		> div.m2,
		> div.m3{
			display: flex;
			padding: 15px 10px;
			justify-content: space-evenly;
			align-items: center;
			flex-wrap: wrap;

			> a {
				display: inline-block;
				width: 100%;
				max-width: 250px;
				margin: 2% 1%;
				cursor: pointer;

				> span{
					display: inline-block;
					width: 100%;
	
					> img{
						display: inline-block;
						width: 100%;
					}
				}

				> span:hover,
				> span:active{
					transform: translateY(-15px);}
			}
		}
	}
	.card.mission{				
		h3{
			.w-break::after{
				content: '  ';
				color: #6e4908;}
			}
		}
	}

.card-wrap.tips{
	.card{
		> h3{margin-top: 2%;

			span{
				font-size: 1.2em;
				color: #04a098;}
			}

		> a {
			display: inline-block;
			max-width: 1000px;
			padding: 10px 0;
			cursor: pointer;

			img{
				display: inline-block;
				width: 100%;}

			img:nth-of-type(2){
				display: none;
				max-width: 650px;}
			}
		}
	}

.tab img:first-child{
    display:block;
}

.tab img:last-child{
    display:none;
}

.prize-notice .table{
	display: inline-block;
	width: 100%;}




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


/*-- 活動辦法 --*/
#rules-switch{display: none;}

.rules-title{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    text-align:center;
}

.title-img{
    display:block;
}

.title-img img{
    display:block;
    margin:0 auto;
    max-width:100%;
}
.card-wrap{
	.card{	
		> div.rules{
			padding: 0;
		}}}

.card-wrap.rule .card h2::after{
    content:'';
    position:absolute;
    left:50%;
    top:100%;
    width:25px;
    height:20px;
    background:url(../images/deco-triangle.png) center no-repeat;
    background-size:contain;
    transform:translateX(-50%);
    transition:.5s;
	z-index: 1;
}

.rules{
	margin: 0;
	padding: 0;
	height: 0;
	overflow: hidden;
	padding: 0;
	background: #fff;
	border: 1px solid #fff;

	ul{
		padding: 10px 2% 10px 4%;

		li{
			text-align: left;
			color: #0a4e4c;

			> h4{
				text-align: left;
				font-size: 1.2em;}
			
			> ol{
				padding: 10px 2%;

				li{
					ol{						
						> li{
							list-style: square;
							margin-left: 2%;}
					}
				}
			}
			> ul{
				padding: 0;
				margin: 1px;
			}
		}
	}
}

.rules ul.ta{
	padding: 8px 32px;
	li{
		margin-left: 32px;
	}
}


.rules{
	ul{
		width: 100%;
		padding: 8px 16px;
		background: #f3f3f3;
		margin: 1% auto;
		border-radius: 20px;
		
		h3{
			font-size: clamp(1.1rem, calc(4vw - 1rem), 1.2rem);
			text-align: left;
			color: #04a098;}
		h4{
			font-size: clamp(1rem, calc(4vw - 1rem), 0.9rem);
			text-align: left;
			padding: initial;
			color: #0a4e4c;}
		li{
			margin-left: 16px;}
		p{
			text-align: left;
			font-size: clamp(0.9rem, calc(4vw - 1rem), 0.8rem);
		}
	}
}


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

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

.rules a {color: #04a098;}

.rules > h3{
	display: block;
	width: 100%;
	font-size: 20px;
	text-align: left;
	padding: 5px 20px 0;
	color: #04a098;}



/*-----------------*/
/*----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: #db491d;
	line-height: 50px;
	color: #fff;
	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: #007c7c;
	background: #ffff00;
	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%;
	background: #fff;
	font-size: 15px;
	z-index: 1;}

footer a{ color: #ff0943 !important;}


/*錨點--*/
#section1, #section2, #section3,
#section4, #sectionPrize{top: -160px;}
#tip01, #tip02, #tip03 {top: -200px;}