.wrapper{}
.wrapper img{width: 100%; height: auto; }
.for_pc{ display: none; }
.for_m{ display: block; }

/*form.html*/
.wrapper.formWrapper{background:#ffe001 url(../images/formBgS.jpg) center top no-repeat; background-size: 100% auto;}
.formarea{position: relative; min-height: 168vw; }
.formarea form {position: absolute; width: 84%; padding:2%; top:0; left: 50%; margin:39% 0 0 -42%;}
.formarea form h3{position: relative; height: 10vw; margin: 0 0 5vw 0; }
.formarea form h3.drawTitle{height: 22vw; }
.formarea form h3 p{display:block; position: relative; height:10vw;  font-size: 4.8vw; line-height: 10vw; color: #FFF; width:30%; float: left; text-align: center;background: #58c0b9; border-radius: 12px; }
.formarea form h3.drawTitle p{height: 22vw; line-height: 1.2em; padding: 5vw 0 0 0;}
.formarea form h3.drawName p{background: #fe436a;}
.formarea form h3 p:after{content: "";width: 12%;height: 3vw;background: url(../images/asign1.png);background-size: cover;position: absolute;left: 23vw;bottom: 2vw;}
.formarea form h3.drawBtn p:after{display:none;}
.formarea form h3.drawName p:after{background: url(../images/asign2.png); background-size: cover;}
.formarea form h3.drawName input{ width: 47vw; height: 10vw; margin: 0 0 0 5vw; font-size: 3.6vw;  }
.formarea form h3.drawName span{display: none;}
.formarea form h3.drawName.wrong input{border: 3px solid #fe436a;}
.formarea form h3.drawName.wrong span{font-size:3.6vw; margin: 0 0 0 36%;}
.formarea form h3.drawName.wrong{margin: 0 0 6vw 0;}
.formarea form h3 span{ display: block;width: 48vw;height: auto;float: left;margin: 0 0 5vw 5vw;font-family: "微軟正黑體","Microsoft JhengHei", Arial, Helvetica, sans-serif; font-size: 5.4vw;line-height: 10vw;}
.formarea form h3.drawTitle span{line-height: 6vw; }
.formarea form h3.drawTitle span a{display: block;width: 87%;height: 8vw;line-height: 8vw;background: #58c0b9;border-radius: 10px; color: #fff; font-size:3.6vw; font-family: "微軟正黑體","Microsoft JhengHei", Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; margin: 1vw 0 0 0; box-shadow: 0px 4px 0px 0px #1A7F78; transition: all 0.2s;}
.formarea form h3.drawTitle span a:hover{box-shadow: 0px 3px 0px 0px #1A7F78; margin: 1.2vw 0 0 0; background: #41aca5; }
.formarea form h3.drawTitle span a img{width: 8%; margin: 2vw 0 0 2%;}
.formarea form h3.drawBtn input{width: 52%; height: 14vw; background: url(../images/btnNext.png) center top no-repeat; background-size: contain; border: navajowhite; transition: all 0.2s; cursor: pointer; margin: 0 0 0 23%;}
.formarea form h3.drawBtn input:hover{filter: brightness(1.2); transform: scale(0.97);}

/*draw.html*/
.wrapper.drawWrapper{background:#ffe001 url(../images/drawBgS.jpg) center top no-repeat; background-size: 100% auto;}
.drawarea{position: relative; min-height: 155vw; }
.drawarea .drawTitle{width: 75%;font-size: 4.8vw;line-height: 9vw; font-weight: bold; position: absolute; top:5vw; left: 50%; margin: 0 0 0 -42%; text-align: center; color: #FFF; letter-spacing: -0.05em;}
.drawarea button{width: 12%; height: 6vw; background: #58c0b9; border-radius: 8px; font-size: 3.6vw; line-height: 18px; color: #fff; text-align: center; border: none; cursor: pointer; position: absolute; top: 6vw; left: 50%; margin: 0 0 0 28%; box-shadow: 0px 4px 0px #104e4a; transition: all 0.1s;}
.drawarea button:hover{top:6.5vw;  box-shadow: 0px 3px 0px #104e4a;  filter: brightness(1.1); }
.drawarea .game_time{width: 86%;height: 2.3vw; position: absolute; top: 20vw; left: 50%; z-index: 99; margin-left: -43%; background: #dedede;}
.drawarea .timeBar{width:100%; height:100%;}
.drawarea .timeBar1{background:#dc4300; width: 100%;}
.drawarea .hold{width:100%;height:100%; position:absolute; z-index:1;}
.drawarea .time{width: 10%; height: 10vw; position: absolute; z-index: 1;text-align: center; line-height: 12.5vw;font-size: 5.4vw; font-weight: bold;font-family: "Century Gothic", Arial, "微軟正黑體"; color: #dc4300;letter-spacing: -0.05em; top: -3.5vw; left: 100%; margin-left: -5%; background: url(../images/timeBG.png) center top no-repeat; background-size: contain;}


/*finish.html*/
.wrapper.finishWrapper{background:#ffe001 url(../images/finishBgS.jpg) center top no-repeat; background-size: 100% auto;}
.finisharea{position: relative; min-height: 285vw; }
.finisharea h3{display: block; position: absolute; top: 4vw;left: 50%; margin-left: -42%; width: 84%; height: 10vw; font-size: 4.8vw; line-height: 10vw; font-weight: bold; color: #fff; text-align: center; overflow: hidden;}
.finisharea .picture{width: 80%;height: auto;position: absolute; top: 18.5vw; left: 50%; margin-left:-40%;}
.finisharea .picture img{ width: 100%; height: auto; max-height: 93vw; }
.finisharea .info{display: block;position: absolute;top: 0%;left: 50%; margin-left: -43%;width: 86%;font-size: 3.6vw; line-height: 4.8vw;color: #fff;text-align: center; padding: 2vw 0 0 0; margin-top: 119%; overflow: hidden; height: auto; }
.finisharea .info span{ margin:0; display:block; height: 4.8vw; }
.finisharea .info span.gap{display: none;}
.finisharea .info span b{ font-weight: normal; padding: 0 2%; }
.finisharea .share{ display:block; position: absolute; top:0;left: 50%; margin: 161% 0 0 -38%; width: 80%;}
.finisharea .share ul li img{ width: 100%; }
.finisharea .share ul li a{ display: block;width: 21%;float: left;transition: all 0.2s; margin: 0 1.4%;}
.finisharea .share ul li a:hover{ filter: brightness(1.2); transform: scale(0.97); }
.finisharea .share ul li form{position: relative;}
.finisharea .share ul li form a{ float:left;}
.finisharea .share ul li form input{ opacity: 0; position: absolute; z-index: -100;}
.finisharea .prize{position: absolute;width: 55%;top:0;left: 50%; margin: 206% 0 0 -27%; transition: all 0.2s;}
.finisharea .prize:hover{transform: scale(0.97); animation: paused; filter: brightness(1.2); }
.finisharea .prize img{display: block;  width: 100%; }
.finisharea .decoration .arrow{position: absolute;width: 16%;top:0;left: 50%;margin: 131% 0 0 -41%;  animation: arrow1 0.8s linear infinite alternate;}
.finisharea .decoration .arrow2{position: absolute;width: 16%;top:0;left: 50%;margin: 182% 0 0 28%; animation: arrow2 0.8s linear infinite 0.8s alternate;}



/*guess.html*/
.wrapper.guessWrapper{background:#ffe001 url(../images/guessBgS.jpg) center top no-repeat; background-size: 100% auto;}
.guessarea{position: relative; min-height: 205vw; }
.guessarea h3{display: block; position: absolute; top: 4vw;left: 50%; margin-left: -42%; width: 84%; height: 10vw; font-size: 3.8vw; line-height: 10vw; font-weight: bold; color: #fff; text-align: center; overflow: hidden;}
.guessarea h3 b{ color: #ffea00; }
.guessarea .picture{width: 69%;height: auto; position: absolute; top:0; left: 50%; margin: 20% 0 0 -34.5%;}
.guessarea .picture img{ width: 100%; height: auto; max-height: 80.5vw; }
.guessarea .info{display: block;position: absolute;top: 0%;left: 50%;margin: 15.5% 0 0 -33%;width: 66%;font-size: 3.6vw;line-height: 4vw; color: #000;text-align: center;padding: 0; overflow: hidden;height: 4vw;}
.guessarea .info span{ margin:0; display:inline; height:4vw; }
.guessarea .info span b{padding: 0 1%; font-size:3.9vw; font-family: "Century Gothic", Arial, "微軟正黑體"; }
.guessarea .share{ display:block; position: absolute; top:0;left: 50%; margin: 174% 0 0 -38%; width: 80%;}
.guessarea .share ul li img{ width: 100%; }
.guessarea .share ul li a{    display: block;width: 21%;float: left;transition: all 0.2s; margin: 0 1.4%;}
.guessarea .share ul li a:hover{ filter: brightness(1.2); transform: scale(0.97); }
.guessarea .share ul li form{position: relative;}
.guessarea .share ul li form a{ float:left;}
.guessarea .share ul li form input{display: none;}
.guessarea .answer{width: 83%;position: absolute;top: 0%;left: 50%; margin: 118% 0 0 -41.5%;}
.guessarea .answer ul li a{display: block;width: 48%;height: 14vw; background: url(../images/answerBtnS.png) no-repeat;background-size: 100% auto; float: left;text-decoration: none;color: #000;font-size: 3.6vw;text-align: center;overflow: hidden;line-height: 4.2vw; font-weight:bold;  margin: 0 1% 1%; transition: all 0.2s;padding: 2.2% 2% 0 5%;}
.guessarea .answer ul li a:hover{ transform: scale(0.97); filter:hue-rotate(120deg);}



/*manage.html*/
.wrapper.manageWrapper{background:#58c0b9;}
#managearea{position: relative; margin: 0 auto;}
.manageWrapper h1{ width:90%; position: absolute; left: 50%; top: 0; margin:2% 0 0 -45%; z-index: 99; }
.manageWrapper h1 img{}
#managearea .content{text-align: center;  width: 96%; position:relative; margin:34% auto 5% auto; }
#managearea .content ul{overflow: hidden;}
#managearea .content li{display: block; float: left; width:48%; margin: 1% 1% 5%; }
#managearea .content li form{font-size: 4.2vw; padding: 2% 0;}
#managearea .content li form input{ width:5vw; height:5vw; }
#managearea .content li form input:last-child{margin: 0 0 0 5%;}
#managearea .content li picture{display: block;height: 54vw;overflow: hidden;border: 0.4vw solid #00857c; background: #fff;}
#managearea .content li picture img{width: 100%; max-height: 54vw;}
#managearea .content li p{background: #00857c;padding: 1vw 2vw;height: 11vw; overflow: hidden;font-size: 3.6vw;line-height: 4.5vw; color: #fff;}
#managearea .content li p b{ font-weight: normal; }
#managearea .content li.off div{background: rgba(0,0,0,0.5);position: relative;height:65vw;margin: -65vw 0 0 0;}



/*index.html*/
.wrapper.indexWrapper{background:#ffe001;}
.indexarea{position: relative;}
.indexarea .top{background:#f8cad7 url(../images/indexTopBgS.jpg) center top no-repeat; background-size: 100% auto; min-height:115vw; }
.indexarea .top picture{display: block;width: 68%;position: absolute;top: 0;left: 50%;margin: 37% 0 0 -34%;}
.indexarea .top picture img{width: 100%;}
.indexarea .top a{width: 68%;position: absolute;top: 0;left: 50%;margin: 90% 0 0 -34%;transition: all 0.2s;animation: btnStart 0.3s linear infinite alternate;}
.indexarea .top a img{width: 100%;}
.indexarea .top a:hover{ transform: scale(0.97); animation: paused; }
.indexarea .explanation1{position: relative; background:url(../images/indexExplainationBgS1.jpg) center top no-repeat; background-size:108% auto; height: 25vw;}
.indexarea .explanation3{position: relative; background:url(../images/indexExplainationBgS3.jpg) center top no-repeat; background-size:108% auto; height: 72vw;}
.indexarea .explanation{position: relative; background:url(../images/indexExplainationBgS2.jpg) center top repeat-y; background-size:108% auto;}
.indexarea .explanation .step{width: 92%; height: 108vw; margin: 0 0 0 -46%;}
.indexarea .explanation .step dt{width: 38%; left: 0%; top: 5vw;}
.indexarea .explanation .step dd p {font-size: 3.5vw;line-height: 1.2;left: 39%;top: 5vw;}
.indexarea .explanation .step dd.step0 {font-size: 3.3vw;line-height: 1.3;height: 20vw; letter-spacing: -0.02em;}
.indexarea .explanation .step dd.step1 {width: 100%; left: 0%;top:26vw;padding: 9.5% 0 0 12%; background-size: auto 100%;}
.indexarea .explanation .step dd.step2 {width: 100%; left: 46%;top:26vw;padding: 9.5% 0 0 11%;; background-size: auto 100%;}
.indexarea .explanation .step dd.step3 {width: 100%; height: 18.7vw; left: 0%; top:50vw;padding: 8.7% 0 0 11%; background-size: auto 100%;}
.indexarea .explanation .step dd.step4 {width: 100%; left: 0%; top:72vw; padding: 9.5% 0 0 14%; background-size: auto 100%;}
.indexarea .explanation .info{width: 92%; margin: 0 0 0 -46%;}
.indexarea .explanation .info h4{width: 38%; left: 0%;}
.indexarea .explanation .info ul {width: 100%;padding: 18% 2% 0 7%;margin: 0;}
.indexarea .explanation .info ul li{font-size: 3.5vw;}
.indexarea .explanation .step dd.photo {left: 62%;top: 71vw;width: 30vw;}
.indexarea .explanation .for_pc{display:none;}
@media screen and (max-width:320px){
.indexarea .explanation .step dd.step0 {height: 21vw;}
.indexarea .explanation .step dd.step3 {height: 19.3vw;}
}
.indexarea .dream{background:#f8cad7 url(../images/indexDreamBgS.jpg) center top no-repeat; background-size: 100% auto; min-height:104vw; }
.indexarea .dream .swiper-container{width: 86%;position: absolute;top: 0;left: 50%;margin: 25% 0 0 -43%;}
.indexarea .dream .swiper-button-prev{width: 10%;height: auto;margin: 47% 0 0 -50%;}
.indexarea .dream .swiper-button-next{width: 10%;height: auto;margin: 47% 0 0 40%;}
.indexarea .dream a{display: block; float: left; width:100%; text-decoration: none;}
.indexarea .dream a picture{display: block; height:49.5vw; overflow: hidden; border: 2px solid #58c0b9; background: #fff; }
.indexarea .dream a picture img{width: 100%; max-height:49.5vw;}
.indexarea .dream a p{background: #58c0b9;padding: 3% 24% 0 2%;height: 11vw;overflow: hidden;font-size: 3.3vw;line-height: 4.2vw;color: #fff;position: relative; letter-spacing: -0.03em;}
.indexarea .dream a p b{ font-weight: normal; }
.indexarea .dream a p button{position: absolute;font-size: 3.3vw;font-weight: bold;color: #000;background: #ffe001;padding: 5% 3%;border: none; border-radius: 12px;top: 0; left: 50%;margin: 3% 0 0 26%;cursor: pointer;box-shadow: 0 4px 0 #000000;transition: all 0.2s;}
@media screen and (max-width:550px){
    .indexarea .dream a p button{ padding: 5% 2%; margin: 3% 0 0 27%; border-radius: 6px;}
    .indexarea .explanation ul{width: 77%; margin: 0 0 0 -36%;}
    .indexarea .explanation ul li{font-size: 14px;}
}
@media screen and (max-width:420px){
    .indexarea .dream a p button{box-shadow: 0 2px 0 #000000; }
}
@media screen and (max-width:350px){
    .indexarea .dream a p button{padding: 5% 1.5%; margin: 3% 0 0 26%; box-shadow: 0 2px 0 #000000; }
    .indexarea .dream a p{padding: 3% 24% 0 1%;}
}
.indexarea .fixArea{ width: 100%; top:inherit; right:0; bottom: 0; }
.indexarea .fixArea li{width: 33.3%; float: left;}
.indexarea .fixArea li:hover img:nth-child(2){display:none;}
@keyframes fixArea{
    0%{bottom: -15vw;}
    100%{bottom: 0;}
}


.indexarea .prize{background:#f8cad7 url(../images/prizeBgS.jpg) center top no-repeat; background-size: 100% auto; min-height:104vw; }
	.indexarea .prize p{
	font-size: 4.5vw;
    line-height: 1.8em;
    width: 80%;
    margin: 31% 0 0 -36%;
	}
	.indexarea .prize small{
	font-size: 3.2vw;
    line-height: 1.3em;
    width: 86%;
    margin: 80.5% 0 0 -43%;
	}