.wrapper{ position:relative; width:100%; height:auto; text-align:left; overflow: hidden; font-family: "微軟正黑體","Microsoft JhengHei", Arial, Helvetica, sans-serif;}
.wrapper img{ border:0; vertical-align:top; }
.for_pc{ display: block; }
.for_m{ display: none; }

/*form.html*/
.wrapper.formWrapper{background:#ffe001 url(../images/formBgPC.jpg) center top no-repeat;}
.formarea{position: relative; min-height: 940px; }
.formarea form {position: absolute; width: 618px; padding: 30px;  top: 327px; left: 50%; margin-left: -309px; }
.formarea form h3{position: relative; height: 50px; margin: 0 0 35px 0; clear: both; }
.formarea form h3.drawTitle{height: 80px; }
.formarea form h3 p{display:block; position: relative; height: 50px;  font-size: 22px; line-height: 50px; color: #FFF; width:150px; float: left; text-align: center;background: #58c0b9; border-radius: 12px; }
.formarea form h3.drawTitle p{height: 80px; line-height: 26px; padding: 14px 0 0 0; }
.formarea form h3.drawName p{background: #fe436a;}
.formarea form h3 p:after{content:""; width: 17px; height: 17px; background: url(../images/asign1.png); background-size: cover; position: absolute; left:148px; bottom: 12px;}
.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: 355px; height: 50px; margin: 0 0 0 35px; font-size: 22px;  }
.formarea form h3.drawName span{display: none;}
.formarea form h3.drawName.wrong input{border: 3px solid #fe436a;}
.formarea form h3.drawName.wrong span{display: block; color: #fe436a; font-size: 16px; line-height:1.2em; margin: 0 0 0 183px;}
.formarea form h3 span{ display: block; width: 370px; height: auto; float: left; margin: 0 0 35px 35px; font-family: "微軟正黑體","Microsoft JhengHei", Arial, Helvetica, sans-serif; font-size: 30px; line-height: 50px; }
.formarea form h3.drawTitle span{line-height: 34px; }
.formarea form h3.drawTitle span a{display: block; width: 200px; height: 34px; line-height: 34px; background: #58c0b9; border-radius:10px; color: #fff; font-size: 16px; font-family: "微軟正黑體","Microsoft JhengHei", Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; margin: 5px 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: 6px 0 0 0; background: #41aca5; }
.formarea form h3.drawTitle span a img{width: 17px; margin: 8px 0 0 5px;}
.formarea form h3.drawBtn input{width: 234px; height: 75px; background: url(../images/btnNext.png) center top no-repeat; background-size: contain; border: navajowhite; transition: all 0.2s; cursor: pointer; margin: 20px 0 0 155px; }
.formarea form h3.drawBtn input:hover{filter: brightness(1.2); transform: scale(0.97);}
.formarea form h3.drawTitle span b{display: block; animation:random 0.7s ease-out 1 alternate;}
@keyframes random{
	0%{transform:scaleY(1); opacity: 0;}
	25%{transform:scaleY(-1); }
	50%{transform:scaleY(1); }
	75%{transform:scaleY(-1); opacity: 1;}
	100%{transform:scaleY(1); }
}


/*draw.html*/
.wrapper.drawWrapper{background:url(../images/drawBgPC.jpg) center top no-repeat;}
.drawarea{position: relative; min-height: 940px; }
.drawarea .drawTitle{ width: 620px; font-size: 30px; line-height: 70px;  font-weight: bold; position: absolute; left: 50%; top: 26px; margin:0 0 0 -310px; text-align: center; color: #FFF;}
.drawarea button{ width: 55px; height: 45px; background: #58c0b9; border-radius: 8px; font-size: 18px; line-height: 18px; color:#fff; text-align: center; border: none; cursor: pointer; position: absolute; top: 37px; left: 50%; margin: 0 0 0 244px; box-shadow: 0px 5px 0px #104e4a; transition: all 0.1s;   }
.drawarea button:hover{top: 39px; box-shadow: 0px 3px 0px #104e4a;  filter: brightness(1.1); }
.drawarea .game_time{width: 570px;height: 20px;position: absolute; top: 140px; left: 50%; z-index: 99; margin-left: -285px; 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: 60px; height: 70px; position: absolute; z-index: 1;text-align: center; line-height: 83px; font-size: 33px; font-weight: bold; font-family: "Century Gothic", Arial, "微軟正黑體"; color: #dc4300; letter-spacing: -0.05em; top: -36px; left: 100%; margin-left: -23px;background: url(../images/timeBG.png) center top no-repeat;background-size: contain;}


/*finish.html*/
.wrapper.finishWrapper{background:#ffe001 url(../images/finishBgPC.jpg) center top no-repeat;}
.finisharea{position: relative; min-height: 1322px; }
.finisharea h3{ display:block; position: absolute; top:34px; left: 50%; margin-left: -300px; width: 600px; height: 60px; font-size: 30px; line-height: 60px; font-weight: bold; color: #fff; text-align: center; overflow: hidden; }
.finisharea .picture{ width: 442px; height: auto; position: absolute; top: 108px; left: 50%; margin-left: -221px; }
.finisharea .picture img{ width: 100%; height: auto; max-height: 531px; }
.finisharea .info{ display:block; position: absolute; top:667px; left: 50%; margin-left: -305px; width: 620px; font-size: 18px; line-height: 44px; color: #fff; text-align: center; overflow: hidden; height: 44px;}
.finisharea .info span{ margin: 0 8px;}
.finisharea .info span b{ font-weight: normal; padding: 0 5px; }
.finisharea .share{ display:block; position: absolute; top:903px; left: 50%; margin-left: -285px; width: 588px; }
.finisharea .share ul li img{ width: 100%; }
.finisharea .share ul li a{ display: block; width: 73px; float: left; transition: all 0.2s;}
.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: right;}
.finisharea .share ul li form input{ width: 280px; height: 48px; border:3px solid #000; position: absolute; top: 13px; right: 68px; z-index: 98; font-size: 16px; }
.finisharea .prize{position: absolute; width: 300px; top: 1151px;left: 50%;margin-left: -131px; transition: all 0.2s; animation: prizeBtn 0.4s linear infinite 0.8s alternate;}
.finisharea .prize:hover{transform: scale(0.97); animation: paused;}
.finisharea .prize img{display: block;  width: 100%; }
.finisharea .decoration .arrow{position: absolute; width: 108px; top: 704px; left: 50%; margin-left:-297px; animation: arrow1 0.4s linear infinite alternate; }
.finisharea .decoration .arrow2{position: absolute; width: 108px; top: 991px; left: 50%; margin-left:193px; animation: arrow2 0.4s linear infinite 0.4s alternate;}
@keyframes prizeBtn{
    0%{filter:brightness(0.9);}
    100%{filter:brightness(1.2);}
}
@keyframes arrow1{
    0%{transform:scaleY(0.8);}
    100%{transform: scaleY(1);}
}
@keyframes arrow2{
    0%{transform:scaleX(-1) scaleY(0.8);}
    100%{transform:scaleX(-1) scaleY(1);}
}


/*guess.html*/
.wrapper.guessWrapper{background:#ffe001 url(../images/guessBgPC.jpg) center top no-repeat;}
.guessarea{position: relative; min-height: 1232px; }
.guessarea h3{ display:block; position: absolute; top:23px; left: 50%; margin:0 0 0 -300px; width: 600px; height: 60px; font-size: 28px; line-height: 60px; font-weight: bold; color: #fff; text-align: center; overflow: hidden; }
.guessarea h3 b{ color: #ffea00; }
.guessarea .picture{width: 422px;height:auto; position: absolute;top: 123px;left: 50%;margin:0 0 0 -211px;}
.guessarea .picture img{ width: 100%; height: auto; max-height:507px;  }
.guessarea .info{ display: block; position: absolute;top:95px;left: 50%; margin: 0 0 0 -242px; width: 485px;  font-size: 18px;line-height: 24px; color: #000;text-align: center;overflow: hidden;height: 24px;}
.guessarea .info span{ margin: 0 8px;}
.guessarea .info span b{padding: 0 5px; font-size: 20px; font-family: "Century Gothic", Arial, "微軟正黑體"; }
.guessarea .share{ display:block; position: absolute; top:1050px; left: 50%; margin-left: -282px; width: 588px; }
.guessarea .share ul li img{ width: 100%; }
.guessarea .share ul li a{ display: block; width: 73px; float: left; transition: all 0.2s;}
.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: right;}
.guessarea .share ul li form input{ width: 280px; height: 48px; border:3px solid #000; position: absolute; top: 13px; right: 68px; z-index: 98; font-size: 16px; }
.guessarea .answer{ width: 640px; position: absolute; top:733px; left:50%; margin: 0 0 0 -310px;}
.guessarea .answer ul li a{display: block; width: 304px; height: 68px; background: url(../images/answerBtnPC.png) no-repeat; background-size: 100% auto; float: left; text-decoration: none; color: #000; font-size: 18px; text-align: center; overflow: hidden; line-height: 58px; font-weight:bold;  margin: 0 5px 6px; padding: 0 10px; transition: all 0.2s;  }
.guessarea .answer ul li a:hover{ transform: scale(0.97); filter:hue-rotate(120deg); }
.guessarea .decoration img{ position: absolute; width: auto; }
.guessarea .decoration .z1{ left:50%; top: 50px; margin: 0 0 0 -449px; animation: z1 0.7s linear infinite alternate;  transform-origin:right bottom;}
@keyframes z1 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-10deg); }
}
.guessarea .decoration .z3{ left:50%;  top: 50px; margin: 0 0 0 387px; animation: z3 1.2s linear infinite alternate; transform-origin:left bottom; }
@keyframes z3 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(10deg); }
}


/*manage.html*/
.wrapper.manageWrapper{background:#58c0b9;}
#managearea{position: relative; margin: 0 auto; }
.manageWrapper h1{ width: 550px; position: absolute; left: 50%; top: 0; margin: 5px 0 0 -275px; z-index: 99; }
.manageWrapper h1 img{}
#managearea .content{text-align: center;  width:1524px; position:relative; margin:210px auto 80px auto; }
#managearea .content ul{overflow: hidden;}
#managearea .content li{display: block; float: left; width: 274px; margin: 1% 1% 2%; }
#managearea .content li form{ font-size: 24px; padding:8px 0; }
#managearea .content li form input{ width: 20px; height: 20px; }
#managearea .content li form input:last-child{margin: 0 0 0 5%;}
#managearea .content li picture{display: block; height:329px; overflow: hidden; border: 2px solid #00857c; background: #fff; }
#managearea .content li picture img{width: 100%; max-height: 324px;}
#managearea .content li p{background: #00857c; padding:8px 12px; height: 60px; overflow: hidden; font-size: 18px; line-height: 22px; 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: 389px;margin: -389px 0 0 0;}
@media screen and (max-width:1524px){
    #managearea .content{width:1192px;}
}
@media screen and (max-width:1192px){
    #managearea .content{width: 918px;}
}
@media screen and (max-width:918px){
    #managearea .content{width: 900px;}
}
@media screen and (max-width:900px){
    #managearea .content{width: 572px;}
}


/*index.html*/
.wrapper.indexWrapper{background:#ffe001;}
.indexarea{position: relative;}
.indexarea .top{position: relative; background:url(../images/indexTopBgPC.jpg) center top no-repeat; min-height:894px; }
.indexarea .top picture{display: block;width: 534px;position: absolute; top: 0;left: 50%; margin: 314px 0 0 -265px;}
.indexarea .top picture img{width: 100%;}
.indexarea .top a{width: 356px; position: absolute; top: 0;left: 50%; margin:727px 0 0 -178px; 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; }
@keyframes btnStart{
    0%{transform: scale(1); filter: hue-rotate(0deg); }
    100%{transform: scale(0.97); filter: hue-rotate(40deg); }
}
.indexarea .top .decoration img{ position: absolute; width: auto; }
.indexarea .top .decoration .z1{ left:50%; top: 126px; margin: 0 0 0 -403px; animation: z1 0.7s linear infinite alternate;  transform-origin:right bottom;}
@keyframes z1 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-10deg); }
}
.indexarea .top .decoration .z2{ left:50%; top:30px; margin: 0 0 0 75px; animation: z2 0.9s linear infinite alternate; transform-origin:left bottom; }
@keyframes z2 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-10deg); }
}
.indexarea .top .decoration .z3{ left:50%; top: 55px; margin: 0 0 0 277px; animation: z3 1.2s linear infinite alternate; transform-origin:left bottom; }
@keyframes z3 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(10deg); }
}
.indexarea .top .decoration .stickL{ left:50%; top:812px; margin: 0 0 0 -265px; z-index: 99;}
.indexarea .top .decoration .stickR{ left:50%; top:812px; margin: 0 0 0 236px; z-index: 99;}
.indexarea .explanation1{position: relative; background:url(../images/indexExplainationBgPC1.jpg) center top no-repeat; height: 223px;}
.indexarea .explanation3{position: relative; background:url(../images/indexExplainationBgPC3.jpg) center top no-repeat; height: 65px;}
.indexarea .explanation{position: relative; background:url(../images/indexExplainationBgPC2.jpg) center top repeat-y;}

.indexarea .explanation .step{width: 1020px;height: 570px;position: relative; left: 50%; margin: 0 0 0 -510px;}
.indexarea .explanation .step img{width: 100%;}
.indexarea .explanation .step dt{position: absolute; width: 215px; left:2%; top:42px;}
.indexarea .explanation .step dd p{ font-size: 18px; line-height:1.8; letter-spacing: 0.05em; color: #fff; position: absolute; left:27%; top:52px; }
.indexarea .explanation .step dd p b{ color: #ffe001; }
.indexarea .explanation .step dd.step0{position: absolute; font-size: 20px; line-height:1.6; height: 135px; }
.indexarea .explanation .step dd.step1{width: 345px; left:2%; top:168px; background:url(../images/step1.png) no-repeat; padding: 5.2% 0 0 7%; background-size: 100% auto;}
.indexarea .explanation .step dd.step2{width: 322px; left:33%; top:168px; background:url(../images/step2.png) no-repeat; padding: 5.2% 0 0 8%; background-size: 100% auto;}
.indexarea .explanation .step dd.step3{width: 641px; left:2%; top:326px; background:url(../images/step3.png) no-repeat; padding: 5.2% 0 0 8%; background-size: 100% auto;}
.indexarea .explanation .step dd.step4{width: 358px; left:62.5%; top:326px; background:url(../images/step4.png) no-repeat; padding: 5.2% 0 0 8%; background-size: 100% auto;}
.indexarea .explanation .step dd.photo{position: absolute; left:67%; top:11px; width: 306px; }
.indexarea .explanation .info{width: 1020px;height: auto;position: relative; left: 50%; margin: 0 0 0 -510px;}
.indexarea .explanation .info img{width: 100%}
.indexarea .explanation .info h4{position: absolute; width: 215px; left:2%; top:0;}
.indexarea .explanation .info ul{ width:100%; padding: 11% 0 5% 5%;}
.indexarea .explanation .info ul li{padding: 8px 0;font-size: 18px;line-height:1.3em; letter-spacing: 0.02em; list-style-type: decimal;color: #fff;}
.indexarea .explanation .info ul li a{ color: #1c3cb1; text-decoration: underline;}
.indexarea .explanation .for_pc{display: inline-block;}

.indexarea .dream{position: relative; background:url(../images/indexDreamBgPC.jpg) center top no-repeat; min-height:810px; }
.indexarea .dream .swiper-container{width: 1130px;position: absolute;top: 0;left: 50%; margin: 240px 0 0 -560px;}
.indexarea .dream .swiper-button-prev{width: 115px; height: 112px;position: absolute; left: 50%; top: 0; margin:340px 0 0 -680px; filter:drop-shadow(-2px 8px 0px rgba(0,0,0,0.3)); transition: all 0.2s;}
.indexarea .dream .swiper-button-prev:hover{filter:drop-shadow(-2px 4px 0px rgba(0,0,0,0.5)); transform: translateX(-5px);}
.indexarea .dream .swiper-button-next{width: 115px; height: 112px;position: absolute; left: 50%; top: 0; margin:340px 0 0 566px; filter:drop-shadow(-2px 8px 0px rgba(0,0,0,0.3)); transition: all 0.2s;}
.indexarea .dream .swiper-button-next:hover{filter:drop-shadow(-2px 4px 0px rgba(0,0,0,0.5)); transform:translateX(5px);}
.indexarea .dream a{display: block; float: left; width: 274px; text-decoration: none;}
.indexarea .dream a picture{display: block; height:329px; overflow: hidden; border: 2px solid #58c0b9; background: #fff; }
.indexarea .dream a picture img{width: 100%; max-height: 324px;}
.indexarea .dream a p{background: #58c0b9; padding:8px 93px 8px 12px; height: 60px; overflow: hidden; font-size: 18px; line-height: 22px; color: #fff; position: relative;}
.indexarea .dream a p b{ font-weight: normal; }
.indexarea .dream a p button{position: absolute; font-size: 22px; font-weight: bold; color: #000; background: #ffe001; padding: 8px 18px; border: none; border-radius:12px; top: 0; left: 50%; margin:7px 0 0 47px; cursor: pointer; box-shadow:0 4px 0 #000000; transition: all 0.2s;}
.indexarea .dream a p button:hover{background: #000; box-shadow:none; color: #ffe001; transform: translateY(2px);}
.indexarea .fixArea{position:fixed; top: 65px; right:26px; margin:0; width: 145px; animation: fixArea 1.5s 1; z-index: 99;}
.indexarea .fixArea li{position: relative;}
.indexarea .fixArea li img:nth-child(2){ display: none; position: absolute; left: 0; top: 0; }
.indexarea .fixArea li:hover img:nth-child(2){display: block;}
@keyframes fixArea{
    0%{top: -500px;}
    100%{top: 65px;}
}


.indexarea .prize{position: relative; background:url(../images/prizeBgPC.jpg) center top no-repeat; min-height:810px; }
.indexarea .prize p{font-size: 30px; font-weight: bold; line-height: 54px; text-align: left; width:550px; position: absolute; left:50%; top:0; margin: 285px 0 0 -220px; text-shadow: 0 0 0.5em #fff , 0 0 0.5em #fff;}
.indexarea .prize small{font-size: 22px; font-weight: bold; line-height: 32px; text-align: center; width:1070px; position: absolute; left:50%; top:0; margin: 622px 0 0 -535px; }
.indexarea .prize a{ color: #1328a8; text-decoration: underline; }
.indexarea .prize a:hover{ text-decoration: none; filter: brightness(1.3); }