@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-family: 'Noto Sans TC' , sans-serif;
	vertical-align:baseline;
	text-decoration:none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
body, html{
	overflow-anchor: none;
	width:100%;
	height: auto;
	color: #333;
	background: #fff;
}
html{
	font-size: 30px;
	line-height: 1.4;
	font-weight: bold;
}
.hide{
	display: none;
}
.bg{
	position: relative;
    background: linear-gradient(to bottom,#ffea6d 60%,#ffdd57 80%,#fdb93e 100%);
    width: 100%;
    height: 960px;
}
.kv > div{
	position: absolute;
}
.kvtall{
	width: 600px;
	top: 5vh;
	left: calc(50% - 300px);
	text-align: center;
	z-index: 10;
	margin: 0 auto;
}
.kvt5{
	background: url(../img/kv_t5.png) no-repeat;
	width: 233px;
	height: 87px;
	margin: 0 auto;
}
.kv_t{
	display: inline-block;
	width: 260px;
	height: 250px;
}
.t1{
	background: url(../img/kv_t1.png) no-repeat;
}
.t2{
	background: url(../img/kv_t2.png) no-repeat;
}
.t3{
	background: url(../img/kv_t3.png) no-repeat;
}
.t4{
	background: url(../img/kv_t4.png) no-repeat;
}
.kvt6{
	background: url(../img/kv_t6.png) top center no-repeat;
	width: 460px;
	height: 40px;
	margin: 5px auto 10px auto;
}
.kvt7{
	background: url(../img/kv_t7.png) no-repeat;
	width: 524px;
	height: 75px;
	margin: 5vh auto 2vh auto;
}
button{
	width: 500px;
	border-radius: 30px;
	background: #fff;
	text-align: center;
	padding: 20px 0;
	cursor: pointer;
	transition: 0.3s;
}
button.start{
	font-size: 40px;
	letter-spacing: 10px;
	color: #333;
}
button:hover{
	background: rgba(255, 255, 255, 0.8);
}
@keyframes arr{
    0%  { margin:0 5px 0 0; }
    50% { margin:0 0 0 5px;}
    80% { margin:0 5px 0 0;}
    100%{ margin:0 5px 0 0;}
}
button span{
	background: url(../img/arr.png) center right no-repeat;
	display: inline-block;
	width: 40px;
	height: 35px;
	vertical-align: middle;
	animation-name: arr;
	animation-duration: 0.3s;
	animation-iteration-count: infinite;
}
@keyframes pp{
    0%  {transform: rotate(5deg);}
    15% {transform: rotate(-5deg);}
    30% {transform: rotate(5deg);}
    45% {transform: rotate(-5deg);}
    60% {transform: rotate(5deg);}
    100%{transform: rotate(5deg);}
}
.kv_p1{
	background: url(../img/kv_p1.png) no-repeat;
	width: 38px;
	height: 62px;
	top: 145px;
	left: calc(50% - 230px);
	z-index: 11;
	transform-origin: 40% 100%;
	animation-name: pp;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
.kv_p2{
	background: url(../img/kv_p2.png) no-repeat;
	width: 72px;
	height: 67px;
	top: 230px;
	left: calc(50% - 182px);
	z-index: 11;
	transform-origin: 50% 100%;
	animation-name: pp;
	animation-duration: 2.8s;
	animation-iteration-count: infinite;
}
.kv_p3{
	background: url(../img/kv_p3.png) no-repeat;
	width: 48px;
	height: 58px;
	top: 295px;
	left: calc(50% + 160px);
	z-index: 11;
	transform-origin: 50% 100%;
	animation-name: pp;
	animation-duration: 3.3s;
	animation-iteration-count: infinite;
}
.kv_p4{
	background: url(../img/kv_p4.png) no-repeat;
	width: 44px;
	height: 64px;
	top: 470px;
	left: calc(50% - 260px);
	z-index: 11;
	transform-origin: 50% 100%;
	animation-name: pp;
	animation-duration: 2.9s;
	animation-iteration-count: infinite;
}
.kv_p5{
	background: url(../img/kv_p5.png) no-repeat;
	width: 46px;
	height: 60px;
	top: 610px;
	left: calc(50% + 225px);
	z-index: 11;
	transform-origin: 30% 100%;
	animation-name: pp;
	animation-duration: 3.4s;
	animation-iteration-count: infinite;
}
.kvbg,.partbg2,.form{
	z-index: 1;
	width: 100%;
    height: 960px;
	overflow: hidden;
}
.kvbg > div{
	position: absolute;
}
@keyframes star{
    0%  {opacity: 1;transform: scale(1.0);}
    60% {opacity: 0.2;transform: scale(0.5);}
    100%{opacity: 1;transform: scale(1.0);}
}
.kvstar{
	background: url(../img/star.png) no-repeat;
	background-size: contain;
	width: 107px;
	height: 90px;
	animation-name: star;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
@keyframes ball{
    0%  {opacity: 1;}
    60% {opacity: 0.2;}
    100%{opacity: 1;}
}
.ball{
	background: radial-gradient(circle, #fff 15%, rgba(255, 230, 150, 0.6) 65%, transparent 70%);
	border-radius: 50%;
	width: 350px;
	height: 350px;
	animation-name: ball;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
.ks1{
	width: 40px;
	top: 40px;
	left: calc(50% - 180px);
	animation-delay: 0.2s;
}
.ks2{
	top: 60px;
	left: calc(50% + 200px);
}
.ks3{
	width: 60px;
	top: 345px;
	left: calc(50% - 260px);
	animation-delay: 0.4s;
}
.ks4{
	width: 50px;
	top: 80px;
	left: calc(50% - 280px);
	animation-delay: 0.3s;
}
.ks5{
	opacity: 0.7;
	top: 70px;
	left: calc(50% - 380px);
	animation-delay: 0.5s;
}
.ks6{
	opacity: 0.4;
	width: 80px;
	top: 750px;
	left: calc(50% + 150px);
	animation-delay: 0.1s;
}
.ks7{
	width: 80px;
	top: 420px;
	left: calc(50% - 280px);
	animation-delay: 0.4s;
}
.ks8{
	width: 150px;
	top: 420px;
	left: calc(50% + 280px);
	animation-delay: 0.6s;
}
.kb1{
	transform: scale(0.4);
	top: 160px;
	left: calc(50% - 520px);
	animation-delay: 0.4s;
}
.kb2{
	transform: scale(0.6);
	top: 310px;
	left: calc(50% + 100px);
}
.kb3{
	transform: scale(0.4);
	top: 500px;
	left: calc(50% - 210px);
	animation-delay: 1.4s;
}
.kb4{
	top: 800px;
	left: calc(50% - 500px);
	animation-delay: 0.7s;
}
.kb5{
	transform: scale(0.8);
	top: 350px;
	left: calc(50% - 780px);
	animation-delay: 0.6s;
}
.kb6{
	top: 80px;
	left: calc(50% + 470px);
}
.kb7{
	transform: scale(0.3);
	top: 0;
	left: calc(50% - 900px);
	animation-delay: 2.4s;
}
.kb8{
	transform: scale(0.4);
	top: 550px;
	left: calc(50% + 390px);
	animation-delay: 0.8s;
}
.kb9{
	transform: scale(0.4);
	top: 0;
	left: calc(50% + 120px);
	animation-delay: 0.9s;
}
.kb10{
	transform: scale(0.7);
	top: 600px;
	left: calc(50% - 450px);
	animation-delay: 1.2s;
}
.kb11{
	transform: scale(0.6);
	top: 320px;
	left: calc(50% - 470px);
	animation-delay: 0.5s;
}
.kb12{
	transform: scale(0.3);
	top: 400px;
	left: calc(50% + 100px);
	animation-delay: 0.7s;
}
.part > div{
	position: absolute;
}
.partbg1{
	background: url(../img/bg3.png) no-repeat;
	background-size: contain;
	width: 593px;
	height: 540px;
	top: 20vh;
	left: calc(50% - 296px);
	z-index: 5;
}
.part1{
	background: url(../img/p1t.png) no-repeat;
	width: 340px;
	height: 252px;
	top: calc(20vh + 120px);
	left: calc(50% - 170px);
	z-index: 6;
}
.part2{
	background: url(../img/p2t.png) no-repeat;
}
.part3{
	background: url(../img/p3t.png) no-repeat;
}
.partbg2 > div{
	position: absolute;
}
.mot{
	background: url(../img/mot.png) center;
	width: 100%;
	height: 230px;
	bottom: 0;
}
@keyframes star2{
    0%  {opacity: 1;transform: scale(0);}
    50% {opacity: 0.2;transform: scale(1);}
    60% {opacity: 0;transform: scale(1);}
    100%{opacity: 0;transform: scale(1);}
}
.kvstar2{
	background: url(../img/star2.png) no-repeat;
	background-size: contain;
	width: 178px;
	height: 162px;
	animation-name: star2;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
.kss1{
	opacity: 0.5;
	left: calc(50% + 50px);
	animation-delay: 0.2s;
}
.kss2{
	top: 670px;
	left: calc(50% - 100px);
}
.kss3{
	opacity: 0.4;
	width: 120px;
	top: 740px;
	left: calc(50% - 160px);
	animation-delay: 0.5s;
}
.qbg{
	width: 360px;
	top: 150px;
	left: calc(50% - 180px);
}
.qn{
	width: 180px;
	height: 80px;
	top: 5vh;
	left: calc(50% - 90px);
}
.qn1{
	background: url(../img/q1n.png) no-repeat;
}
.qn2{
	background: url(../img/q2n.png) no-repeat;
}
.qn3{
	background: url(../img/q3n.png) no-repeat;
}
.qn4{
	background: url(../img/q4n.png) no-repeat;
}
.qn5{
	background: url(../img/q5n.png) no-repeat;
}
.qn6{
	background: url(../img/q6n.png) no-repeat;
}
.qn7{
	background: url(../img/q7n.png) no-repeat;
}
.qn8{
	background: url(../img/q8n.png) no-repeat;
}
.qn9{
	background: url(../img/q9n.png) no-repeat;
}
.qn10{
	background: url(../img/q10n.png) no-repeat;
}
.qn11{
	background: url(../img/q11n.png) no-repeat;
}
.qp{
	width: 500px;
	height: 250px;
	top: 180px;
	left: calc(50% - 250px);
	z-index: 10;
}
.qp1{
	background: url(../img/q1.png) center no-repeat;
}
.qp2{
	background: url(../img/q2.png) center no-repeat;
}
.qp3{
	background: url(../img/q3.png) center no-repeat;
}
.qp4{
	background: url(../img/q4.png) center no-repeat;
}
.qp5{
	background: url(../img/q5.png) center no-repeat;
}
.qp6{
	background: url(../img/q6.png) center no-repeat;
}
.qp7{
	background: url(../img/q7.png) center no-repeat;
}
.qp8{
	background: url(../img/q8.png) center no-repeat;
}
.qp9{
	background: url(../img/q9.png) center no-repeat;
}
.qp10{
	background: url(../img/q10.png) center no-repeat;
}
.qp11{
	background: url(../img/q11.png) center no-repeat;
}
.qnt{
	width: 580px;
	top: 500px;
	left: calc(50% - 290px);
	text-align: center;
	font-size: 32px;
	z-index: 12;
}
.qans{
	width: 500px;
	font-size: 28px;
	top: 640px;
	left: calc(50% - 250px);
	z-index: 20;
}
.qans button{
	margin-bottom: 30px;
	color: #333;
}
.progress{
	width: 550px;
	bottom: 20px;
	left: calc(50% - 275px);
	text-align: center;
}
.progress span{
	display: inline-block;
	width: 7%;
	height: 10px;
	border-radius: 20px;
	background: #fff;
	margin: 0 0.2% ;
}
.progress span.on{
	background: #ff7bac;
}
@keyframes star3{
    0%  {opacity: 1;transform: scale(1);}
    50% {opacity: 0.2;transform: scale(0.6);}
    100%{opacity: 1;transform: scale(1);}
}
.kvstar3{
	background: url(../img/star3.png) no-repeat;
	background-size: contain;
	width: 18px;
	height: 22px;
	animation-name: star3;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
.ksss1{
	top: 8vh;
	left: calc(50% + 80px);
	animation-delay: 0.3s;
}
.ksss2{
	width: 12px;
	top: 6vh;
	left: calc(50% + 100px);
}
.result{
	width: 100%;
	height: 900px;
	padding: 20px 0;
	text-align: center;
}
.result1{
	background: #69d2f7;
}
.result2{
	background: #bbcaff;
}
.result3{
	background: #ffbbd7;
}
.result4{
	background: #f7da8a;
}
.result5{
	background: #78ffe5;
}
.result > div{
	display: inline-block;
	vertical-align: top;
	margin: 0 5px;
}
.wbg{
	position: relative;
	background: #fff;
	width: 544px;
	border-radius: 20px;
	padding: 20px;
	text-align: left;
}
.result_kv{
	width: 544px;
	height: 566px;
	margin-bottom: 125px;
}
.result1 .result_kv{
	background: url(../img/r1a.png?v=1) no-repeat;
}
.result2 .result_kv{
	background: url(../img/r2a.png?v=1) no-repeat;
}
.result3 .result_kv{
	background: url(../img/r3a.png?v=1) no-repeat;
}
.result4 .result_kv{
	background: url(../img/r4a.png?v=1) no-repeat;
}
.result5 .result_kv{
	background: url(../img/r5a.png?v=1) no-repeat;
}
.lovly{
	position: absolute;
	width: 550px;
	height: 210px;
	top: 520px;
	left: 25px;
}
.result1 .lovly{
	background: url(../img/r1b.png) no-repeat;
}
.result2 .lovly{
	background: url(../img/r2b.png) no-repeat;
}
.result3 .lovly{
	background: url(../img/r3b.png) no-repeat;
}
.result4 .lovly{
	background: url(../img/r4b.png) no-repeat;
}
.result5 .lovly{
	background: url(../img/r5b.png) no-repeat;
}
.htag{
	font-size: 22px;
}
.htag span{
	margin-right: 20px;
}
.result1 .htag,.result1 .rsbk{
	color: #0071bc;
}
.result2 .htag,.result2 .rsbk{
	color: #554e6d;
}
.result3 .htag,.result3 .rsbk{
	color: #ff7bac;
}
.result4 .htag,.result4 .rsbk{
	color: #fbb03b;
}
.result5 .htag,.result5 .rsbk{
	color: #2ecca2;
}
.wbg p{
	font-size: 23px;
	line-height: 1.3;
	margin: 20px auto;
}
.rsbk{
	position: relative;
	width: 610px;
}
.rsbk > div{
	display: inline-block;
	vertical-align: top;
	background: #fff;
	border-radius: 20px;
	padding: 20px;
	margin: 0 5px;
}
.wbk1{
	width: 288px;
}
.bktit{
	width: 100%;
	border-radius: 20px;
	padding: 15px 0;
	font-size: 24px;
	text-align: center;
	color: #fff;
	margin-bottom: 20px;
}
.result1 .bktit{
	background: #0071bc;
}
.result2 .bktit{
	background: #554e6d;
}
.result3 .bktit{
	background: #ff7bac;
}
.result4 .bktit{
	background: #fbb03b;
}
.result5 .bktit{
	background: #2ecca2;
}
.bkpic{
	width: 288px;
	height: 196px;
}
.result1 .bkpic{
	background: url(../img/r1d.png) no-repeat;
}
.result2 .bkpic{
	background: url(../img/r2d.png) no-repeat;
}
.result3 .bkpic{
	background: url(../img/r3d.png) no-repeat;
}
.result4 .bkpic{
	background: url(../img/r4d.png) no-repeat;
}
.result5 .bkpic{
	background: url(../img/r5d.png) no-repeat;
}
.wbk2{
	width: 210px;
}
.rspout{
	display: inline-block;
	width: 100px;
	text-align: center;
	vertical-align: top;
	font-size: 28px;
}
.rspout span{
	display: block;
	height: 71px;
	line-height: 70px;
}
.rspout span.lh{
	line-height: inherit;
}
.rsp{
	width: 95px;
	height: 95px;
	margin: 15px auto;
}
.rsp1{
	background: url(../img/r1c.png) no-repeat;
}
.rsp2{
	background: url(../img/r2c.png) no-repeat;
}
.rsp3{
	background: url(../img/r3c.png) no-repeat;
}
.rsp4{
	background: url(../img/r4c.png) no-repeat;
}
.rsp5{
	background: url(../img/r5c.png) no-repeat;
}
.rsbk > div.wbk3{
	display: block;
	margin-top: 20px;
}
.wbk3 .bktit{
	display: inline-block;
	width: 80px;
	margin-bottom: 0;
	vertical-align: top;
}
.wbk3 p{
	display: inline-block;
	width: calc(100% - 95px);
	text-align: left;
	font-size: 24px;
	color: #333;
	padding-bottom: 5px;
}
.rsbk > div.rsend{
	width:  calc(100% - 50px);
	background: rgba(255, 255, 255, 0.6);
	border-radius: 0;
	margin-top: 20px;
	padding-top: 20px;
}
.rsendp{
	width: 559px;
	height: 106px;
}
.result1 .rsendp{
	background: url(../img/r1e.png) no-repeat;
	background-size: contain;
}
.result2 .rsendp{
	background: url(../img/r2e.png) no-repeat;
	background-size: contain;
}
.result3 .rsendp{
	background: url(../img/r3e.png) no-repeat;
	background-size: contain;
}
.result4 .rsendp{
	background: url(../img/r4e.png) no-repeat;
	background-size: contain;
}
.result5 .rsendp{
	background: url(../img/r5e.png) no-repeat;
	background-size: contain;
}
.rsend p{
	font-size: 32px;
	margin: 60px auto;
	color: #333;
}
.rsend button{
	background: #f4eee9;
	border: 1px solid #333;
	font-size: 26px;
	margin-bottom: 50px;
	color: #333;
}
.result3 .rsend button{
	margin-bottom: 20px;
}
.formall{
	position: relative;
	width: 600px;
	text-align: center;
	margin: 5vh auto 0 auto;
	z-index: 10;
}
.f1{
	background: url(../img/form_1.png) no-repeat;
	width: 386px;
	height: 127px;
	margin: 0 auto;
}
.f2{
	position: relative;
	width: calc(95% - 185px);
	border-radius: 20px;
	padding: 20px 20px 20px 165px;
	background: #fff;
	text-align: left;
	font-size: 26px;
	margin: 30px auto;
}
.f2 span{
	color: #e82d82;
}
.f2a{
	position: absolute;
	background: url(../img/form_2.png) no-repeat;
	width: 94px;
	height: 102px;
	top: -30px;
	left: 40px;
	transform-origin: 20% 100%;
	animation-name: pp;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
@keyframes f2b{
    0%  {margin-top: 0;}
    10% {margin-top: -5px;}
    20% {margin-top: 0px;}
    30% {margin-top: -5px;}
    40% {margin-top: 0;}
    100%{margin-top: 0;}
}
.f2b{
	position: absolute;
	background: url(../img/form_3.png) no-repeat;
	width: 96px;
	height: 135px;
	top: 36px;
	left: -20px;
	animation-name: f2b;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
}
.formwbg{
	margin: 30px auto;
	width: calc(95% - 100px);
	padding: 30px 50px 50px 50px;
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid #fff;
	border-radius: 20px;
}
.formwbg > div{
	width: 100%;
	margin-bottom: 20px;
}
.formwbg > div span{
	display: inline-block;
	text-align: right;
	width: 90px;
	margin-right: 20px;
}
.formwbg > div input[type=text]{
	display: inline-block;
	width: calc(100% - 130px);
	border-radius: 5px;
	padding: 5px 10px;
}
.formwbg > div.verification input[type=text]{
	width: calc(100% - 325px);
}
.verificationpic{
	background: url(../img/verification.png) no-repeat;
	display: inline-block;
	width: 120px;
	height: 48px;
	vertical-align: middle;
	margin-left: 20px;
}
.verification a{
	background: url(../img/renew.png) no-repeat;
	display: inline-block;
	width: 55px;
	height: 48px;
	vertical-align: middle;
	transition: 0.3s;
}
.verification a:hover{
	filter: opacity(0.8);
}
.ck{
	font-size: 20px;
}
.ck input[type=checkbox]{
    appearance: none;
	width: 21px;
	height: 21px;
	margin: 5px 10px 0 0;
	vertical-align: top;
    border: 1px solid #e82d82;
    background-color: #fff;
    border-radius: 5px;

}
.ck input[type="checkbox"]:checked{
    background-color: #ff7bac;
}
.ck input[type="checkbox"]:checked::before{
    content: " ";
    display: block;
    color: transparent;
    text-align: center;
    font-weight: 900;
    line-height: 1;
}
.ck p{
	display: inline-block;
	width: calc(100% - 35px);
	text-align: left;
}
.ck a{
	color: #0071bc;
	text-decoration: underline;
}