@charset "utf-8";
/* 比例版 */
html, body{background:#f097b5;}
body.minh{min-height:900px;}
#inbody{position:absolute;height:100%;max-height:1250px;width:600px;top:0;left:calc(50% - 300px);margin:0 auto;overflow:hidden;}
#inbody.minh{min-height:1250px; transform: scale(0.7);transform-origin: top center;}
.bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}

.incontent{position:relative;width:90%;margin:0 5%;}
.incontent.style1{position:absolute;transform: translateY(-50%);top:50%;}
.incontent.style2{position:absolute;transform: translateY(-50%);top:50%;width:94%;margin:0 3%;}
.show400{display:none!important;}
.hide400{display:block;}
.cutblock{position:relative;text-align: center;}
.fbbold{font-weight:900;}
.fbold{font-weight:700;}
.fnormal{font-weight:300;}
.fullbg{position:absolute;top:0;left:0;width:100%;height:100%;}
.w100{width:100%;}
.h100{height:100%;}
.w50{width:50%;}
.w60{width:60%;}
.w30{width:30%;}
.mw100{max-width:100%;}
.mw40center{max-width:40%;margin:0 auto;}
.mw100center{max-width:100%;margin:0 auto;}
.vnone{visibility: hidden;}
.dancebtn{animation: danceme 3s 1s infinite;}
.dancebtn1{animation: danceme1 6s 1s infinite;}
.dancebtn2{animation: danceme2 7s 1s infinite;}
.dancebtn3{animation: danceme1 8s 1s infinite;}
.dancebtn4{animation: danceme2 5s 1s infinite;}
.blinkbtn{animation: blinkme 1s 0.5s infinite;}
.shakebtn{animation: shakeme 3s 0.5s infinite;transform-origin: 50% 70%;}
@keyframes shakeme {
  0%{
    transform: rotate(0deg);
    width:35%;
    left:32%;
  }
  7%{
    transform: rotate(6deg);
  }
  14%{
    transform: rotate(-6deg) ;
    width:39%;
    left:30%;
  }
  21%{
    transform: rotate(3deg);
  }
  28%{
    transform: rotate(-3deg);
  }
  35%{
    transform: rotate(1deg);
    width:39%;
    left:30%;
  }
  42%{
    transform: rotate(-1deg) ;
  }
  49%{
    transform: rotate(0deg) ;
    width:35%;
    left:32%;
  }
  99%{
    transform: rotate(0deg) ;
    width:35%;
    left:32%;
  }
}
@keyframes blinkme {
  15%{
    -webkit-filter:brightness(1) contrast(1);
  }
  45%{
    -webkit-filter:brightness(1.6) contrast(0.9);
  }
  75%{
    -webkit-filter:brightness(1) contrast(1);
  }
}
@keyframes danceme {
  5%{
    padding-top:15px;
    margin-bottom:-15px;
  }
  35%{
    padding-top:0px;
    margin-bottom:0px;
  }
  45%{
    padding-top:5px;
    margin-bottom:-5px;
  }
  55%{
    padding-top:0px;
    margin-bottom:0px;
  }
  65%{
    padding-top:5px;
    margin-bottom:-5px;
  }
  85%{
    padding-top:0px;
    margin-bottom:0px;
  }
}
@keyframes danceme1 {
  5%{
    padding-top:5px;
    margin-bottom:-5px;
  }
  35%{
    padding-top:0px;
    margin-bottom:0px;
  }
  55%{
    padding-top:3px;
    margin-bottom:-3px;
  }
  75%{
    padding-top:0px;
    margin-bottom:0px;
  }
}
@keyframes danceme2 {
  20%{
    padding-top:5px;
    margin-bottom:-5px;
  }
  50%{
    padding-top:0px;
    margin-bottom:0px;
  }
  70%{
    padding-top:3px;
    margin-bottom:-3px;
  }
  90%{
    padding-top:0px;
    margin-bottom:0px;
  }
}
/* position */
.absbottom{left:0;bottom:0;}
/* z-index  */
.z006{z-index:6;}
.z005{z-index:5;}
.z004{z-index:4;}
.z003{z-index:3;}
.z002{z-index:2;}
.z001{z-index:1;}
.z000{z-index:0;}

/* f color */
.fcolorfff{color:#fff;}
.fcolor875936{color:#875936;}
.fcolor000{color:#000;}
.fcolor666{color:#666;}
.fcolorlink{color:#960f0f;}
.fcolorerr{color:#875936;font-weight:bold;}
.fcolorerr1{color:#875936;font-weight:bold;}
.fcolorcc4651{color:#cc4651;}
.fcolorf097b5{color:#f097b5;}
/* BG */
.bg001{z-index:0;position:absolute;top:0;left:0;width:100%;height:100%;}
.bgcolorfff{background:#fff;}
.bg00085{background:rgba(0,0,0,0.85);}
.bg00070{background:rgba(0,0,0,0.7);}
/* ## margin ############## */
.mv1{margin-top:10px;}
.mv15{margin-top:15px;}
.mv2{margin-top:20px;}
.mv4{margin-top:40px;}
.mv6{margin-top:60px;}
.mv8{margin-top:80px;}
.mv10{margin-top:100px;}
/* padding */
.pad1{padding:10px;}
.pad2{padding:20px;}
.padv1{padding:10px 0;}
.padv2{padding:20px 0;}

/* line */
.linet1{border-top:1px solid #fff;}
.btn.clicked{padding-top:2px;margin-bottom:-2px;}
.btn{    -webkit-tap-highlight-color: transparent;    -webkit-touch-callout: none;    -webkit-user-select: none;    -khtml-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;}
/* 字體 尺寸設定  */
.fsize10{font-size:15px;line-height:21px;}
.fsize12{font-size:18px;line-height:27px;}
.fsize14{font-size:21px;line-height:31px;}
.fsize15{font-size:23px;line-height:34px;}
.fsize15.l{line-height:46px;}
.fsize16{font-size:24px;line-height:36px;}
.fsize16.l{line-height:48px;}
.fsize18{font-size:27px;line-height:40px;}
.fsize18.l{line-height:54px;}
.fsize20{font-size:30px;line-height:45px;}
.fsize22{font-size:33px;line-height:50px;}
.fsize24{font-size:36px;line-height:54px;}
.fsize28{font-size:42px;line-height:63px;}
.fsize32{font-size:48px;line-height:72px;}
.fsize36{font-size:54px;line-height:81px;}
.fsize40{font-size:60px;line-height:90px;}
.fsize44{font-size:66px;line-height:100px;}
.fsize64{font-size:92px;line-height:144px;}

.steps{transition: all 1s;}
/* 正中間物件  */
.h100in{position:absolute;left:0;top:50%;transform: translateY(-50%);z-index:2;}
/* 框架  */
.centerwrap{position:relative;width:90%;margin:0 auto;text-align: left;}
/* index */
.indextop .fixer{width:50%;opacity: 0;left:50%;transform: translateX(-50%);transition: all 0.6s;}
.indextop .fixer.on{width:100%;opacity: 1;}
/* 輸入暱稱頁 */
.nameinput{background:#fff;border-radius: 10px;padding:15px 10px;width:calc(100% - 20px)}
/* 結果頁 */
.icons{position:absolute;z-index:2;top:230px;left:0;width:100%;text-align: center;}
.icons img{width:61%;margin:0 auto;}
.scorebox{position:absolute;z-index:5;top:290px;right:0;width:35%;text-align: center;}
.scorebox img{width:100%;}
.scorebox p{position:absolute;top:0;left:50%;transform: translateX(-50%);}
.nickname{position:absolute;z-index:3;top:600px;margin-left:15px;text-shadow: 0 0 10px #cc4651;}
.endname{position:absolute;z-index:3;top:700px;margin-left:50px;}
.resbox{position:absolute;z-index:3;top:750px;padding:20px 50px;text-align: left;}
.resbtn1{position:absolute;z-index:3;top:920px;width:200px;right:0;height:80px;}
.resbtn2{position:absolute;z-index:3;top:1020px;width:200px;right:0;height:80px;}
.dropper{top:-150vw;opacity:0;left:50%;transform:translateX(-50%);transition: all 1s;}
.dropper.on{top:0;opacity:1;}
/*遊戲頁*/
.gamebase{top:0;left:0;width:100%;height:100%;}
.gheartbox{top:0;left:0;width:37%;text-align: center;}
.gheartbox p{top:3%;left:0;width:100%;}
.glinebox{top:47px;right:3.5%;width:65%;height:46px;text-align:right;overflow:hidden;}
.glinebox img{height:100%;transition: all 1s;margin-left:-70%;}
.coinbox{top:-10%;left:45%;height:500px;width:35%;overflow:hidden; }
.coins{position:absolute;top:0;width:50%;transition: all 1s;opacity:1;}
.coin1{left:5%;}
.coin2{left:20%;}
.coin3{left:35%;}
.coin4{left:50%;}
.coins.on{top:100%;opacity:0.5;}
.g1text{position:absolute;z-index:3;top:430px;width:100%;margin:0;}
.g2text{position:absolute;z-index:3;top:525px;width:90%;margin-right:0%;}
.g3text{position:absolute;z-index:3;top:610px;width:90%;margin-right:0%;}
.g4text{position:absolute;z-index:3;top:663px;width:90%;margin-right:0%;}
.gbtnbox{position:absolute;top:750px;left:0;width:100%;text-align: center;}
.gbtn{position:relative;}
.ghand{transition: all 1s;}
.ghand1{top:-32%;left:-40%;width:34%;opacity:0;}
.ghand2{top:-32%;right:-40%;width:34%;opacity:0;}
.ghand3{bottom:-28%;left:-40%;width:34%;opacity:0;}
.ghand4{bottom:-26%;right:-40%;width:34%;opacity:0;}
.ghand1.on{top:-22%;left:-6%;opacity:1;}
.ghand2.on{top:-22%;right:-6%;opacity:1;}
.ghand3.on{bottom:-18%;left:-6%;opacity:1;}
.ghand4.on{bottom:-16%;right:-6%;opacity:1;}
/* 分享頁*/
.copybtn{top:660px;right:0;width:160px;height:80px;}
.goshopee{top:944px;    width:35%;    left:32%;}
/* index */

/* form */
/* pop */
#pop{position:absolute;top:0;width:100%;height:100%;z-index:999998;background:rgba(0,0,0,0.85);}
#popin{position:absolute;top:50%;margin-left:5%;transform:translateY(-45%);z-index:1;padding:0;width:90%;text-align: center;}
#pop.style2 #popin{width:100%;background:none;}

.popclosebtn{position:absolute;top:10px;right:5%;height:40px;width:90%;text-align:right;z-index:99; font-size:30px;line-height:44px;}
.popclosebtn i{font-size:34px;line-height:44px;color:#fff;}
.popbtn{display: inline-block;text-decoration:none; width:30%;margin:10px 3%;font-size:16px;line-height:32px;color:#000;text-align:center;border-radius: 10px; border:1px solid #000;}
.poptimewrap{position:relative;margin:20px 0;}
.poptime{position:absolute;left:25%;bottom:0;width:50%;text-align:center;font-size:70px;line-height: 105px;font-weight:bold;}


/*  切換在 980   */

@media screen and (max-width: 600px) {
  html, body{background:#FFF;min-height:auto;}
  body.minh{min-height:auto;}
  #inbody{position:fixed;height:100%;width:100%;top:0;left:0;margin:0;}
  #inbody.minh{min-height:auto;transform: scale(1);}
  #incontent{}
  /* ## margin ############## */
  .mv1{margin-top:2vw;}
  .mv15{margin-top:3vw;}
  .mv2{margin-top:4vw;}
  .mv4{margin-top:8vw;}
  .mv6{margin-top:12vw;}
  .mv8{margin-top:16vw;}
  .mv10{margin-top:20vw;}
  /* padding */
  .pad1{padding:2vw;}
  .pad2{padding:4vw;}
  .padv1{padding:2vw 0;}
  .padv2{padding:4vw 0;}

  .show400{display:block!important;}
  .hide400{display:none!important;}
  .fsize10{font-size:2.65vw;line-height:3.7vw;}
  .fsize12{font-size:3.15vw;line-height:4.5vw;}
  .fsize14{font-size:3.65vw;line-height:5.2vw;}
  .fsize15{font-size:3.9vw;line-height:5.6vw;}
  .fsize15.l{line-height:7.8vw;}
  .fsize16{font-size:4.15vw;line-height:6vw;}
  .fsize16.l{line-height:8.3vw;}
  .fsize18{font-size:4.65vw;line-height:6.8vw;}
  .fsize18.l{line-height:9.3vw;}
  .fsize20{font-size:5.15vw;line-height:7.5vw;}
  .fsize22{font-size:5.5vw;line-height:8.25vw;}
  .fsize24{font-size:6.15vw;line-height:9vw;}
  .fsize28{font-size:7.15vw;line-height:10.5vw;}
  .fsize32{font-size:8.15vw;line-height:12vw;}
  .fsize36{font-size:9.15vw;line-height:13.5vw;}
  .fsize40{font-size:10.15vw;;line-height:15vw;}
  .fsize44{font-size:11.5vw;line-height:17vw;}
  .fsize64{font-size:16.3vw;line-height:24vw;}
  /* 一般內容 */
  /* 輸入暱稱頁 */
  .nameinput{border-radius: 2vw;padding:3vw 2vw;width:calc(100% - 4vw)}
  /* 結果頁 */
  .icons{top:38vw;}
  .scorebox{top:48vw;}
  .nickname{top:100vw;margin-left:2vw;text-shadow: 0 0 2vw #cc4651;}
  .endname{top:116.5vw;margin-left:8vw;}
  .resbox{top:125vw;padding:5vw 8vw;text-align: left;}
  .resbtn1{top:153vw;width:30vw;right:0;height:13vw;}
  .resbtn2{top:170vw;width:30vw;right:0;height:13vw;}
  /*遊戲頁*/
  .glinebox{top:8vw;height:7.5vw;}
  .glinebox img{height:100%;transition: all 1s;margin-left:-70%;}
  .coinbox{top:-15%;height:90vw;}
  .g1text{top:72vw;}
  .g2text{top:87vw;}
  .g3text{top:101.5vw}
  .g4text{top:110vw}
  .gbtnbox{top:126vw}
  /* 分享頁*/
  .copybtn{top:110vw;right:0;width:26vw;height:14vw;}
  .goshopee{top:156vw;}
}
@media screen and (max-width: 600px) and (min-aspect-ratio: 6 / 13) {
  .incontent.scaleme{transform: translateY(-50%) scale(0.96);}
  .absbottom.scaleme{transform: scale(0.96);transform-origin: bottom center;}
  .ghand1{width:38%;}
  .ghand2{width:38%;}
  .ghand3{width:38%;}
  .ghand4{width:38%;}
  .ghand1.on{left:-10%;}
  .ghand2.on{right:-10%;}
  .ghand3.on{left:-10%;}
  .ghand4.on{right:-10%;}
}
@media screen and (max-width: 600px) and (min-aspect-ratio: 6 / 12) {
  .incontent.scaleme{transform: translateY(-50%) scale(0.9);}
  .absbottom.scaleme{transform: scale(0.9);transform-origin: bottom center;}
  .ghand1{width:39%;}
  .ghand2{width:39%;}
  .ghand3{width:39%;}
  .ghand4{width:39%;}
  .ghand1.on{top:-26%;left:-13%;}
  .ghand2.on{top:-26%;right:-13%;}
  .ghand3.on{bottom:-22%;left:-13%;}
  .ghand4.on{bottom:-20%;right:-13%;}
}
@media screen and (max-width: 600px) and (min-aspect-ratio: 6 / 11) {
  .incontent.scaleme{transform: translateY(-50%) scale(0.84);}
  .absbottom.scaleme{transform: scale(0.84);transform-origin: bottom center;}
  .ghand1{width:41%;}
  .ghand2{width:41%;}
  .ghand3{width:41%;}
  .ghand4{width:41%;}
  .ghand1.on{top:-28%;left:-16%;}
  .ghand2.on{top:-28%;right:-16%;}
  .ghand3.on{bottom:-24%;left:-16%;}
  .ghand4.on{bottom:-22%;right:-16%;}
}
@media screen and (max-width: 600px) and (min-aspect-ratio: 6 / 10) {/*iphone 6/7/8*/
  .incontent.scaleme{transform: translateY(-50%) scale(0.78);}
  .absbottom.scaleme{transform: scale(0.78);transform-origin: bottom center;}
  .ghand1{width:44%;}
  .ghand2{width:44%;}
  .ghand3{width:44%;}
  .ghand4{width:44%;}
  .ghand1.on{top:-30%;left:-20%;}
  .ghand2.on{top:-30%;right:-20%;}
  .ghand3.on{bottom:-26%;left:-20%;}
  .ghand4.on{bottom:-24%;right:-20%;}
}
@media screen and (max-width: 600px) and (min-aspect-ratio: 6 / 9) {/*iphone 6/7/8*/
  .incontent.scaleme{transform: translateY(-50%) scale(0.72);}
  .absbottom.scaleme{transform: scale(0.72);transform-origin: bottom center;}
  .ghand1{width:47%;}
  .ghand2{width:47%;}
  .ghand3{width:47%;}
  .ghand4{width:47%;}
  .ghand1.on{top:-32%;left:-24%;}
  .ghand2.on{top:-32%;right:-24%;}
  .ghand3.on{bottom:-28%;left:-24%;}
  .ghand4.on{bottom:-26%;right:-24%;}
}
@media screen and (max-width: 600px) and (min-aspect-ratio: 6 / 8) {
  .incontent.scaleme{transform: translateY(-50%) scale(0.66);}
  .absbottom.scaleme{transform: scale(0.66);transform-origin: bottom center;}
  .ghand1{width:47%;}
  .ghand2{width:47%;}
  .ghand3{width:47%;}
  .ghand4{width:47%;}
  .ghand1.on{top:-34%;left:-28%;}
  .ghand2.on{top:-34%;right:-28%;}
  .ghand3.on{bottom:-30%;left:-28%;}
  .ghand4.on{bottom:-28%;right:-28%;}
}