@charset "utf-8";
body{ background-color: #f6f6f6; }
.pageBox{ position: absolute; width: 100%; line-height: 0; z-index: 10; overflow: hidden; background-color: #48b97b; }
.buttonBox{ position: absolute; width: 100%; left: 0; bottom: 0; line-height: normal; text-align: center; z-index: 2; }
.buttonTopBox{ position: absolute; right: 3.7%; top: 3%; width: 21%; z-index: 11; }
.imgMainLogo{ position: absolute; top: 16%; left: 0;}
.bgMainBox img{ height: 100%; }
.gameStart{ width: 35%; margin: 0 auto 1%; line-height: 0; }
.gameHelp{ width: 35%; margin: 0 auto 1%; line-height: 0; }
.pageInfoBox{ position: relative; margin-top: -20%; color: #fff; font-size: 1.2rem; line-height: 1.6rem; width: 100%; }
.gameInfo{ margin: 0 5%; width: 90%; }
.gameChance{ display: inline-block; margin-right: 1rem; font-size: 1.1rem; line-height: 1.8rem; color: #3d3d3d; }
.gameChance span{ border-bottom: #3d3d3d 1px solid; margin: 0 3px; }
.pageInfoBox .myPrize{ font-size: 1.1rem; color: #3d3d3d; border-bottom: #3d3d3d 1px solid; }
.pageInfoBox .gameHitNum{ font-size: 1.2rem; line-height: 2rem; color: #fff;}
.pageInfoBox .gameHitNum span{ border-bottom: #fff 1px solid; margin: 0 3px; }
.gameButtonRule{ margin-bottom: 10px; }
.gameButtonCode{  }
.logoBox{ position: absolute; top: 5%; left: 25%; width: 50%; }
.myLogo{ margin: 0 auto 0.5rem; width: 50%; }
.actLogo{ margin: 0 auto; width: 70%; }
.bgBottom{ margin-top: -1.2rem; width: 100%; }

.gameBox{ display: none; position: absolute; top: 0; left: 0; width: 100%; z-index: 10; }
.gameLoading{ position: absolute; top:0; left: 0; width: 0%; height: 2px; background-color: #4bc133; z-index: 2100; }
.gameLayer{ display: none; width: 100%; height: 100%; position: fixed; background: #000; opacity: .7; z-index: 201; top: 0; }
.gameCodeBox{ display: none; position: absolute; top: 25%; left: 15%; width: 70%; z-index: 220; }
.gameCodeBox .close{ position: absolute; right: 0; top: -50px; width: 30px; }
.codeInput{ position: absolute; top: 60%; left: 7%; width: 86%; height: 14%; overflow: hidden; }
.codeInput input{ width: 100%; height: 100%; box-sizing: border-box; background: none; font-size: 1.8rem; text-align: center; border: none;  }
.buttonSubmit{ position: absolute; bottom: 6%; left: 12%; width: 76%; height: 15%; }
.gameNoticeBox{ display: none; position: absolute; top: 25%; left: 10%; width: 80%; z-index: 210; }
.gameNoticeBox .close{ position: absolute; right: 3%; top: -50px; width: 30px; }
.gameNoticeBox .gameLogo{ position: absolute; top: 20%; left: 20%; width: 60%; }
.noticeTextBox{ position: absolute; top: 65%; left: 10%; width: 80%; text-align: center; font-size: 1.4rem; color: #373737;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.gameMyScoreBox{ display: none; position: absolute; top: 25%; left: 10%; width: 80%; z-index: 210; }
.gameMyScoreBox .msClose{ position: absolute; right: 3%; top: -50px; width: 30px; }
.myScoreText{ position: absolute; top: 17%; left: 0; width: 100%; text-align: center; font-size: 2rem; color: #ffe58f; }
.gamePrizeBox{ display: none; position: absolute; top: 48%; left: 0; width: 100%; color: #eecf56; z-index: 210;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.gamePrizeBg{ margin: 6% 15% 0; width: 74%; }
.gamePrizeBox .close{ position: absolute; right: 10%; top: -5%; width: 30px; }
.gameScore{ font-size: 2rem; line-height: 2.6rem; text-align: center; color: #fff; margin-bottom: 2.4rem; }
.gameBestScore{ display: none; font-size: 1.3rem; text-align: center; color: #ffe58f; }
.gameBestScore span{ margin-left: 0.5em; }
.gamePrize{ width: 100%; font-size: 3rem; color: #22a3d5; line-height: 4rem; font-weight: bolder; text-align: center; }
.gameShareBox{ display: none; position: absolute; width: 100%; top: 3%; right: 0; z-index: 210; }

.e-RuleBox{ position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; text-align: left; z-index: 210; border-radius: 0px; transform: matrix(1, 0, 0, 1, 0, 0); display: none; background-color: rgba(0, 0, 0, 0.8); }
.e-RuleMain{ height: 597px; overflow-y: scroll; padding: 50px 5%; color: rgb(255, 255, 255); font-size: 1.2rem; opacity: 1; }
.e-RuleClose{ position: absolute; height: 40px; width: 40px; border-radius: 30px; top: 20px; right: 20px; color: rgb(255, 255, 255); z-index: 10; background: url("./img/popClose.png") center center / 20px no-repeat rgba(0, 0, 0, 0.298039); }
.e-RuleMain h1{ font-weight: bolder; color: rgb(255, 255, 255); font-size: 1.5rem; }
.e-RuleMain p{ color: rgb(255, 255, 255); font-size: 1.2rem; line-height: 1.6rem; margin: 1rem 0px; }