@charset "utf-8";
	/*--CSS Document --*/
	/*--google字型 --*/
@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=Noto+Sans+TC:wght@500;600;800&display=swap");

@font-face {
    font-family: "GenSenRounded";
    src: url("../font/GenSenRounded2TW-B.otf") format("truetype");}

  *{font-family: 'GenSenRounded','Noto Sans TC';
	font-weight: 600;
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	transition: 0.8s;
	color: #535353;
	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:#ff2600;
	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;
	font-size: 20px;
	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  .w-break{ display: none;}

body{
	background: url(../images/theme-bg.jpg) top 70px center repeat-y;
	background-size: auto;}

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

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

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

.theme-wrap .theme h1{
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #fecc48;}

.theme-title{
	display: inline-block;
	width: 100%;
	max-width: 780px;
	max-height: 460px;
	top: 0;
	left: 0;}

.theme-title > img{
	display: inline-block;
	width: 100%;}

.theme-w1{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;}

.theme-w1e{
	position: absolute;
	display: inline-block;
	width: 100%;
	top: 0;
	left: 0;
	animation-delay: 0.8s;}

.theme-w1 > img{
	display: inline-block;
	width: 100%;}

.theme-w1::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/theme-title.png) center no-repeat;
	background-size: contain;
	animation: theme-w1-ani 1s ease-in-out infinite;
	z-index: -1;}
	@keyframes theme-w1-ani{
		0%{opacity: 0.8;}
		50%{opacity: 0;}
		100%{opacity: 0.8;}
	}

.theme-w1e > img{
	display: inline-block;
	width: 100%;}

.theme-date{
	position: absolute;
	display:inline-block;
	width: 80%;
	max-width: 523px;
	height: 93px;
	background: url(../images/theme-date.png) top center no-repeat;
	background-size: contain;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	animation-delay: 1.2s;}

.theme-limited{
	position: absolute;
	display: inline-block;
	text-align: center;
	width: 50%;
	left: 42%;
	top: 75%;
	transform: translate(-50%, -50%);
	max-width: 300px;
	margin: 0 auto;}

.theme-limited > img {
	display: inline-block;
	width: 100%;
	animation-delay: 1.5s;}


.theme-subtitle{
	position: absolute;
	display: inline-block;
	width: 75%;
	max-width: 600px;
	left: 35%;
	bottom: -10%;
	transform: translateX(-50%);
	animation: subtitle-ani 1s ease-in-out infinite;}
	@keyframes subtitle-ani{
		0%{transform: scale(1) translateX(-50%);
			transform-origin: center;}
		50%{transform: scale(1.01) translateX(-50%);
			transform-origin: center;}
		100%{transform: scale(1) translateX(-50%);
			transform-origin: center;}
	}

.theme-subtitle > img{
	display: inline-block;
	width: 100%;
	animation-delay: 2s;}


/*主題裝飾星球*/
.theme-planet1{
	display: inline-block;
	position: absolute;
	width: 15.89%;
	height: 27.39%;
	max-width: 125px;
	max-height: 126px;
	right: 10%;
	top: 10%;
	background: url(../images/deco-theme-planet1.png) center no-repeat;
	background-size: contain;
	animation: planet-ani 2s ease-in-out infinite;}


.theme-planet2{
	display: inline-block;
	position: absolute;
	width: 18.3%;
	height: 30.86%;
	width: 143px;
	height: 142px;
	left: -5%;
	top: 40%;
	background: url(../images/deco-theme-planet2.png) center no-repeat;
	background-size: contain;
	animation: planet-ani 2.2s ease-in-out infinite;}

.theme-planet3{
	display: inline-block;
	position: absolute;
	width: 125px;
	height: 126px;
    left: 10%;
    bottom: -15%;
	background: url(../images/deco-theme-planet3.png) center no-repeat;
	background-size: contain;
	animation: planet-ani 1.8s ease-in-out infinite;}

.theme-planet4{
	display: inline-block;
	position: absolute;
	width: 12.3%;
	height: 20.65%;
	max-width: 95px;
	max-height: 96px;
	left: 15%;
	top: 5%;
	background: url(../images/deco-theme-planet4.png) center no-repeat;
	background-size: contain;
	animation: planet-ani 2.2s ease-in-out infinite;}

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

.theme-spaceman{
	position: absolute;
	display: inline-block;
	width: 40%;
	max-width: 309px;
	height: 116%;
	max-height: 538px;
	right: -10%;
	bottom: -80%;
	animation-delay: 2s;}

.theme-spaceman > span{
	display: inline-block;
	width: 100%;
	height: 100%;
	background: url(../images/theme-spaceman.png) center no-repeat;
	background-size: contain;
	animation: spaceman-ani 2s ease-in-out infinite;}
	@keyframes spaceman-ani{
		0%{ transform: translateY(-20px); }
		50%{ transform: translateY( 0px); }
		100%{ transform: translateY(-20px); }
	}


.theme-spaceman> span::after{
	 content: '';
	 display: inline-block;
	 position: absolute;
	 width: 31.71%;
	 max-width: 98px;
	 height: 25.65%;
	 max-height: 138px;
	 left: -2%;
	 top: -2%;
	 background: url(../images/theme-spacemaniPhone.png) center no-repeat;
	 background-size: contain;
	animation: iphone-ani 1s ease-in-out infinite;}
	@keyframes iphone-ani{
		0%{transform: rotate(2deg);}
		50%{transform: rotate(-2deg);}
		100%{transform: rotate(2deg);}
	}

/*------------------*/
/*-----大獎等你抽----*/
/*------------------*/
.prize-wrap{
	display: inline-block;
	width: 100%;
	padding: 80px 2% 20px;}

.prize-wrap .prize{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	max-width: 1200px;
	padding: 100px 2% 40px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 100px;}

.prize-card{
	display: flex;
	width: 100%;
	max-width: 450px;}

.prize-card:active,
.prize-card:hover{ transform: translateY(-20px);}

.prize-card:nth-of-type(1){	max-width: 485px;}
.prize-card:nth-of-type(1)::after{	
	content: '';
	position: absolute;
	display: inline-block;
	width: 130%;
	height: 130%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: url(../images/prize-bglarge.png) center no-repeat;
	background-size: contain;
	z-index: -1;
	animation: prizeBg2-ani 3s ease infinite;}
	@keyframes prizeBg2-ani{
		0%{transform: translate(-50%,-50%) scale(0.9);}
		50%{transform: translate(-50%,-50%) scale(1);}
		100%{transform: translate(-50%,-50%) scale(0.9);}
	}

.prize-card > img{
	display: inline-block;
	width: 100%;
	max-width: 485px;
	animation: prizeBg-ani 2s ease infinite;}
	@keyframes prizeBg-ani{
		0%{transform: scale(1);}
		50%{transform: scale(0.95);}
		100%{transform: scale(1);}
	}

.prize-card > span{
	position: absolute;
	display: inline-block;
	width: 100%;
	top: 0;
	left: 0;}

.prize-card > span > img{ width: 100%;}
.prize-card > span::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(../images/prize-shine.gif) center no-repeat;
	background-size: 90%;}

.prize-wrap > .btn-wrap{ 
	padding: 0 2%;
	top: -40px;}

/*------------------*/
/*---推薦保障商品----*/
/*------------------*/
.products-wrap{
	display: inline-block;
	width: 100%;
	padding: 80px 2% 20px;}

.products-wrap .products{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	max-width: 1200px;
	padding: 125px 2% 40px;
	margin: 0 auto;
	border-radius: 100px;}

.products-wrap::after{
	content: '※上述所涉金額幣別均為新台幣／元';
	display: inline-block;
	text-align: left;
	font-size: 16px;
	color: #fff;
	width: 100%;
	max-width: 1040px;
	padding: 20px 10px;}

.pro-wrap{
	display: inline-block;
	position: absolute;
	width: 100%;
	top: 0;
	right: 0;
	padding-left: 50%;}

.tab-planet{
	display: flex;
	width:50%;
	min-width: 600px;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	z-index: 1;}

.tab-planet > span{
	display: inline-block;
	flex: 1;
	max-width: 130px;
	cursor: pointer;}

.tab-planet > span:active,
.tab-planet > span:hover{
	transform: translateX(-40px);
	animation: selected-ani 1s ease-in-out infinite;}

.tab-planet > span:last-child{
	max-width: 170px;}

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

.tab-planet > span::before{
	content: ''	;
	display: inline-block;
	position: absolute;
	width: 100%;
	max-width: 100px;
	height: 100%;
	top: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url(../images/tab1-name.png) center no-repeat;
	background-size: contain;
	/*animation: tab-name-ani 2s ease-in-out infinite;*/}
	@keyframes tab-name-ani{
		0%{
			transform: translate(-50%, -50%) rotate(8deg);
			transform-origin: bottom center;}
		50%{
			transform: translate(-50%, -50%) rotate(-8deg);
			transform-origin: bottom center;}
		100%{
			transform: translate(-50%, -50%) rotate(8deg);
			transform-origin: bottom center;}
	}

.tab-planet > span#tab2::before{
	background: url(../images/tab2-name.png) center no-repeat;
	background-size: contain;
	animation-duration: 1.7s;}

.tab-planet > span#tab3::before{
	background: url(../images/tab3-name.png) center no-repeat;
	background-size: contain;
	animation-duration: 1.8s;}

.tab-planet > span#tab4::before{
	background: url(../images/tab4-name.png) center no-repeat;
	background-size: contain;
	animation-duration: 2.2s;}

.tab-planet > span.selected > img{
	animation: selected-ani 1s ease-in-out infinite;}
	@keyframes selected-ani{
		0%{transform: scale(1.1);}
		50%{transform: scale(1.2);}
		100%{transform: scale(1.1);}
	}

.tab-planet > span.selected::after {
	content: '';
	display: inline-block;
	position: absolute;
	width: 0;
	height: 0;
    left: 50%;
    top: 90%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 0 12px 20px 12px;
    border-color: transparent transparent #ffd600 transparent;
	animation: selectedArrow-ani 1.2s ease-in-out infinite;}
	@keyframes selectedArrow-ani{
		0%{transform:translate(-50%, -50%);}
		50%{transform:translate(-50%, 0%);}
		100%{transform:translate(-50%, -50%);}
	}

/*--商品內容--*/
.pro-content{
	display: inline-block;
	width: 100%;
	max-width: 1040px;
	padding: 30px 2%;
	background: #fff;}

.pro-content::before{
	content: '';
	position: absolute;
	display: inline-block;
	height: 60px;
	width: 46%;
	top: -60px;
	left: 0;
	background: #fff;
	z-index: -1;}

.pro-content::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 0;
	height: 0;
	left: 46%;
	top: -60px;
	border-style: solid;
	border-width: 60px 0 0 60px;
	border-color: transparent transparent transparent #fff;
	z-index: -1;}

.card{
	display: inline-block;
	width: 100%;
	padding: 10px 2% 20px 35%;
	font-size: 1em;
	position: absolute;
	display: none;}

.card.show{
	position: relative;
	display: inline-block;}

.card-content { text-align: left;}
.card-content h3 {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
	font-size: 3em;
	color: #fff;
	background: #01162f;
	border-radius: 50px;
	padding: 15px 30px;}

.subtitle{
	display: inline-block;
	font-size: 1.8em;
	color: #fd780d;
	padding: 10px;
	vertical-align: middle;}

.card-content h4{
	text-align: left;
	font-size: 3em;
	font-weight: 900;
	letter-spacing: -0.5px;
	color: #022957;
	z-index: 1;}

.card-content h4 > span.mark-red{
	 color: #ff5943;
	 font-size: 1.5em;}

.card-content h4 > span.mark-redDollar{
	 color: #ff5943;
	font-size: 0.8em;}
	 
.card-content h4 > span.mark-yallow{color: inherit;}
.card-content h4 > span.mark-yallow::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 105%;
	height: 20px;
	background: #fcff41;
	left: 50%;
	top: 80%;
	transform: translate(-50%, -50%);
	z-index: -1;}

#plant4 .card-content h4 > span.mark-red{
	 font-size: 1.1em;}

#plant4 .card-content h4{
	padding: 20px 0 10px 30px;}


.card-content h4 .w-break{ 
	display: inline-block;
	padding: 0 5px;}

.card-note{
	display: block;
	text-align: left;
	font-size: 1.5em;
	color: #868fa0;
	padding: 0px 10px;}

.card-content ul{ padding: 10px 10px 10px 20px;}

.card-content ul li{
	font-size: 1.35em;
	text-align: left;
	line-height: 1.4em;
	color: #022957;}

.card-content ul li .w-break{ display: block;}
.card-content ul li .w-smaller{ 
	color: inherit;
	font-size: 0.8em;}


/*裝飾星球*/
.deco-planet{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60%;
	max-width: 300px;
	height: 56%;
	max-height: 300px;
	background: url(../images/deco-planet1.png) center no-repeat;
	background-size: contain;
	left: 15%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	animation: deco-planet-ani 3s ease-in-out infinite ;}
	@keyframes deco-planet-ani{
		0%{	transform: translate(-50%, -50%);}
		50%{	transform: translate(-50%, -40%);}
		100%{	transform: translate(-50%, -50%);}
	}

.deco-planet::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	background: url(../images/deco-planetStars.gif) center no-repeat;
	background-size: contain;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);}

.deco-planet::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 52.6%;
	max-width: 158px;
	height: 33.66%;
	max-height: 101px;
	background: url(../images/deco-flags1.png) center no-repeat;
	background-size: contain;
	z-index: -1;
	left: 50%;
	top: 10%;
	transform: translate(-50%, -50%);
	animation: deco-flag-ani 2s ease-in-out infinite;}
	@keyframes deco-flag-ani{
		0%{transform: translate(-50%, -50%) rotate(0deg);
			transform-origin: bottom left;}
		50%{transform: translate(-50%, -50%) rotate(-10deg);
			transform-origin: bottom left;}
		100%{transform: translate(-50%, -50%) rotate(0deg);
			transform-origin: bottom left;}
	}

.deco-planet.planet2{
	background: url(../images/deco-planet2.png) center no-repeat;
	background-size: contain;}

.deco-planet.planet2::before{
	background: url(../images/deco-flags2.png) center no-repeat;
	background-size: contain;}

.deco-planet.planet3{
	background: url(../images/deco-planet3.png) center no-repeat;
	background-size: contain;}

.deco-planet.planet3::before{
	background: url(../images/deco-flags3.png) center no-repeat;
	background-size: contain;}	

.deco-planet.planet4{
	max-width: 400px;
	width: 45%;
	max-height: 250px;
	height: 100%;
	left: 15%;
    top: 40%;
	background: url(../images/deco-planet4.png) center no-repeat;
	background-size: contain;}

.deco-planet.planet4::before{
	background: url(../images/deco-flags4.png) center no-repeat;
	background-size: contain;}

.deco-planet > img{
	display: inline-block;
	width: 50%;
	max-width: 160px;
	animation: deco-pic-ani 0.5s ease-in-out infinite;}
	@keyframes deco-pic-ani{
		0%{transform: rotate(5deg);}
		50%{transform: rotate(-5deg);}
		100%{transform: rotate(5deg);}
	}

.deco-rocket{
	position: absolute;
	display: inline-block;
	width: 60%;
    height: 60%;
    max-width: 160px;
    max-height: 160px;
    left: 20%;
    bottom: -40%;
	background: url(../images/deco-rocket.gif) center no-repeat;
	background-size: contain;
	animation: rocket-ani 2s ease-in-out infinite;}
	@keyframes rocket-ani{
		0%{ transform: translate(-50%, -50%);}
		50%{ transform: translate(-40%, -40%);}
		100%{ transform: translate(-50%, -50%);}
		
	}

.deco-codebar{
	position: absolute;
	display: inline-block;
	width: 213px;
	height: 40px;
	right: 5%;
	top: 5%;
	background: url(../images/deco-codebar.png) center no-repeat;
	background-size: contain;}

/*------------------*/
/*--線上預約顧問流程--*/
/*------------------*/

.steps-wrap{
	display: inline-block;
	width: 100%;
	padding: 90px 2% 20px;}

.steps-wrap .steps{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	max-width: 1200px;
	padding: 120px 2% 40px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 100px;}

.steps-wrap .steps > span{
	display: inline-block;
	flex: 1;
	max-width: 270px;}

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

.steps-wrap .steps > span:nth-of-type(1){animation-delay: 0.2s;}
.steps-wrap .steps > span:nth-of-type(2){animation-delay: 0.4s;}
.steps-wrap .steps > span:nth-of-type(3){animation-delay: 0.6s;}
.steps-wrap .steps > span:nth-of-type(4){animation-delay: 0.8s;}

/*------------------*/
/*-----共同樣式------*/
/*------------------*/
.btn-wrap{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	padding: 40px 2%;}

.btn-wrap > a {
	display: inline-block;
	width: 49%;
	max-width: 220px;}

.btn-wrap > a > img{
	display: inline-block;
	width: 100%;}

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

.section-title{
	position: absolute;
	display: inline-block;
	text-align: left;
	padding-left: 20%;
	width: 100%;
	font-size: 15px;
	top: 0;
	color: #011025;}

.section-title > span{
	position: absolute;
	display: inline-block;
	width: 100%;
	max-width: 600px;
	font-size: 15px;
	left: 0%;
	top: 50%;
	transform: translateY(-50%);}

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

.card .btn-wrap{
	position: absolute;
	left: 50%;
    top: 105%;
    transform: translate(-50%, -50%);
	justify-content: space-evenly;}

.steps-wrap .btn-wrap{ padding: 0 2%;}


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

.rules-title{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	cursor: pointer;
	margin: 0 auto;}

.rules-title > .section-title{
	left: 0;
	z-index: 1;
	color: transparent;}

.rules-title > .section-title > span{
	left: 50%;
    transform: translate(-50%, -50%);
    top: -200%;}


.rules{
	max-width: 1100px;
	margin: 20px auto 10px;
	padding: 20px 2%;
	height: 0;
	overflow: hidden;
	padding: 0;
	border-radius: 5px;
	border-top: 3px solid #549dec;
	border-bottom: 3px solid #549dec;
	background: rgba(255, 255, 255, 0.9);}

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

.rules > ul {
    padding: 2%;
    padding-left: 30px;
	margin-top: 10px;
	margin-bottom: 20px;
	border-radius: 10px;}

.rules > ul > span{
	text-align: left;
    width: 100%;
    display: inline-block;
    margin-bottom: 18px;}

.rules > ul > h3{
	margin: 10px 0;
	text-align: left;
	font-size: 20px;
    line-height: 35px;
	font-weight: 600;
	white-space: pre-line;
	color: #88300e;}
	
.rules > ul > h3 span.break{display: none;}	
.rules > ul > li{
	font-family: 'Noto Sans TC';
	font-weight: 900;
	margin-left: 30px;
	text-align: left;
	list-style: square;
	font-weight: 300;
	font-size: 17px;
	line-height: 24px;
	color: #474458;
	margin-bottom: 15px;
	word-break: break-all;}

.rules > ul > li > span,
.rules > ul > li > ul > li > span{
	color: #ff0943;
    text-align: left;}
	
.rules > ul > li > ul{ padding-left: 25px;}
.rules > ul > li > ul > li{
	font-family: 'Noto Sans TC';
	text-align: left; 
	list-style: decimal;
	margin-bottom: 5px;}
.rules > ul > li > ul > li:last-child{margin-bottom: initial;}

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

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


.note{
	display: inline-block;
	width: 100%;
	text-align: left;
	color: #ff0943;
	padding-left: 20px;}

.note::before{
	content: '★';
	position: absolute;
	left: 0;
	top: 0;
	text-align: left;}

.treasureMap .note{	color: #fff;}

/*-----------------*/
/*---右側浮動BN-----*/
/*-----------------*/

.rightBN-wrap{
	display: inline-block;
	position: absolute;
	width: 175px;
	height: 260px;
	top: -175px;
	transform: translateX(-50%);}

.rightBN{
	display: inline-block;
	width: 100%;
	height: 100%;
	z-index: 1;
	animation: rightBNShake-ani 2s ease-in-out infinite;}
	/* rightBNShake-ani */
	@keyframes rightBNShake-ani{
			0%{transform: rotate(-5deg) scale(1);}
		50%{transform: rotate(5deg) scale(0.98);}
		100%{transform: rotate(-5deg) scale(1);}
	}
	
	.rightBN > img{width: 100%;}

.rightBN::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	background: url(../images/btn-rightBtn-hand.png) top center no-repeat;
	background-size: contain;
	animation: hand-ani 1s ease-in-out infinite;}
	@keyframes hand-ani{
		0%{ transform: translateY(-5px);
			transform-origin: center left;}
		50%{ transform: translateY(5px);
			transform-origin: center left;}
		100%{ transform: translateY(-5px);
			transform-origin: center left;}
	}

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

.section-btnTop{
	display: inline-block;
	position: fixed;
	width: 100%;
	max-width: 1200px;
	height: 1px;
	margin: 0 auto;
	bottom: 17%;
	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: #db491d;
	background: #ffff00;
	box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0);} 

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

footer{
	width: 100%;
	padding: 10px 2%;
	background: #fff;
	font-size: 15px;
	z-index: 1;}

footer a{ color: #ff0943 !important;}


/*錨點--*/
#section1, #section2, #section3, #section4{top: -160px;}
#section1-2, #section1-3, #section1-4{
	top: -180px;}


/*papercut-falling*/
.deco-snowing{
	position: fixed;
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;}

.deco-snowing li{
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	animation: maple-falling-ani 12s ease-in-out infinite;}
	@keyframes maple-falling-ani{
		0%{ opacity: 0;
			transform: translateY(-20px);}
		10%{ opacity:1;}
		70%{ opacity: 1;}
		80%{ opacity: 1;
			transform: translateY(1000px);}
		100%{ opacity: 0;
			transform: translateY(1000px);}
	}

.deco-snowing li:nth-child(1){animation-duration: 31s;}
.deco-snowing li:nth-child(2){animation-duration: 11.9s;}
.deco-snowing li:nth-child(3){animation-duration: 10.2s;}
.deco-snowing li:nth-child(4){animation-duration: 11.4s;}
.deco-snowing li:nth-child(5){animation-duration: 19s;}
.deco-snowing li:nth-child(6){animation-duration: 26s;}
.deco-snowing li:nth-child(7){animation-duration: 17s;}
.deco-snowing li:nth-child(8){animation-duration: 13.4s;}
.deco-snowing li:nth-child(9){animation-duration: 12.2s;}
.deco-snowing li:nth-child(10){animation-duration: 10s;}
.deco-snowing li:nth-child(11){animation-duration: 24.2s;}
.deco-snowing li:nth-child(12){animation-duration: 9s;}
.deco-snowing li:nth-child(13){animation-duration: 17s;}
.deco-snowing li:nth-child(14){animation-duration: 8s;}
.deco-snowing li:nth-of-type(odd){
	width: 10px;
	height: 10px;}

.deco-snowing li span::before{
	content: '';
	position: relative;
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url(../images/red-envolop1.png) center no-repeat;
	background-size: contain;
	animation: spin-maple-ani 3s ease-in-out infinite;}
	@keyframes spin-maple-ani{
		0%{ transform: rotate(0deg);}
		100%{ transform: rotate(360deg);}
	}		

.deco-snowing li:nth-child(even) span::before{
	background: url(../images/deco-leaf1.png) center no-repeat;
	background-size: contain;}

.deco-snowing li:nth-child(3n+1) span::before{
	background: url(../images/deco-leaf2.png) center no-repeat;
	background-size: contain;}

.deco-snowing li:nth-child(3n) span::before{
	background: url(../images/deco-leaf3.png) center no-repeat;
	background-size: contain;}

.deco-snowing li:nth-child(3n-1) span::before{
	background: url(../images/deco-leaf4.png) center no-repeat;
	background-size: contain;}

/* deco-snowing*/
.deco-snow3{
	position: absolute;
	display: inline-block;
	width: 18.18%;
	max-width: 100px;
	height: 37px;
	background: url(../images/deco-snow3.png) center no-repeat;
	background-size: contain;
	top: -12%;
	left: 11%;
	z-index: 1;}

.deco-snow2{
	position: absolute;
	display: inline-block;
	width: 11.09%;
	max-width: 61px;
	height: 31px;
	background: url(../images/deco-snow2.png) top center no-repeat;
	background-size: contain;
	top: -12%;
	left: 60%;
	z-index: 1;}

.deco-snow1{
	position: absolute;
	display: inline-block;
	width: 6.9%;
	max-width: 38px;
	height: 76px;
	background: url(../images/deco-snow1.png) top center no-repeat;
	background-size: contain;
	top: -12%;
	right: -2%;
	z-index: 1;}