@charset "UTF-8";
#loading{width:100%;height:100%;position:fixed;top:0;left:0;background:#000;z-index:20;font-size:18px;color:#cfd1cc;z-index:101}#loading .box{width:100%;height:1px;background:#414141;margin:0 auto;position:relative;top:50%;transform:translateY(-50%);left:0}#loading .box span{height:1px;background:#c4c4c4;position:relative;top:0;left:0;display:block}#loading .box p{font-size:16px;line-height:30px;color:silver;text-align:center}

a:link,a:partive,a:visited,a:hover { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}
*{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;scroll-behavior: smooth;outline: none;}
body {background: #fff;}
.wrap{width: 100%;height:100%;position: absolute;overflow: hidden;z-index: 2;}
.section{ height:100%; position: relative; z-index: 3; width: 100%; margin: 0 auto;overflow: hidden; box-sizing: border-box;display: none;transition: all .3s;}
.section.active {display: block;}
.section-home {background: url(images/home/bg.jpg) no-repeat 50% 0 / cover;}
.section-game {background: url(images/game/bg.jpg) no-repeat 50% 0 / cover;}
.section-home .logo { position: absolute; width: 186px; height: 68px; top: 100px; left: 50%; margin-left: -730px; text-indent: -999em; background: url(images/home/logo.png) no-repeat 0 0; z-index: 3;filter: drop-shadow(2px 4px 6px black);}

.section-home .slogan {width: 1036px;height: 443px;background: url(images/home/slogan.png) no-repeat 0 0;top:90px;left:50%;margin-left:-500px;}
.section-home .menu-box {width:445px;height:500px;top:530px;left:50%;margin-left:-232px;display: flex;justify-content: space-between;flex-direction: column;}
.section-home .btn-menu {width: 445px;height:106px;background: url(images/home/btn-menus.png) no-repeat 0 0;}
.section-home .btn-menu:hover {filter: drop-shadow(0 0 10px #983a01);}
.section-home .btn-login {background-position-y:-106px;}
.section-home .btn-logout {background-position-y: 0;font-size: 40px;font-weight: bold;color: #f8f2ea;text-align: center;line-height: 106px;text-shadow: 0px 0px 5px #8b410c,1px 1px 5px #8b410c,2px 2px 5px #8b410c,3px 3px 5px #8b410c,3px 3px 5px #8b410c,3px 3px 5px #8b410c;}
.section-home .btn-into {background-position-y:-212px;}
.section-home .btn-bind {background-position-y:-318px;}
.section-home .btn-bind-1 {background-position-y:-530px;}
.section-home .btn-bind-2 {background-position-y:-636px;}
.section-home .btn-bind-3 {background-position-y:-742px;}
.section-home .btn-share {background-position-y:-424px;}

.section-game .info-box {width: 1384px;height:325px;background: url(images/game/info/bg-score.png) no-repeat 0 0;top:50px;left:50%;margin-left:-692px;
}
.section-game .info-box .progress-score {width: 805px;height:27px;top: 97px;left: 289px;}
.section-game .info-box .progress-score i {width: 0;height:27px;position: absolute;left: 0;top:0;background: url(images/game/info/progress-score.png) no-repeat 0 0;}
.section-game .info-box .round-num {width:21px;height:24px;background-position: 50% 50%;background-repeat: no-repeat;top:53px;left:715px;}
.section-game .info-box .round-num-1 {background-image: url(images/game/info/round/1.png);}
.section-game .info-box .round-num-2 {background-image: url(images/game/info/round/2.png);}
.section-game .info-box .round-num-3 {background-image: url(images/game/info/round/3.png);}
.section-game .info-box .round-num-4 {background-image: url(images/game/info/round/4.png);}
.section-game .info-box .round-num-5 {background-image: url(images/game/info/round/5.png);}

.section-game .info-box .score {width:30px;height:35px;background-position: 50% 50%;background-repeat: no-repeat;top: 147px;}
.section-game .info-box .score-me {left: 304px;}
.section-game .info-box .score-boss {left: 1050px;}
.section-game .info-box .score-0 {background-image: url(images/game/info/score/0.png);}
.section-game .info-box .score-1 {background-image: url(images/game/info/score/1.png);}
.section-game .info-box .score-2 {background-image: url(images/game/info/score/2.png);}
.section-game .info-box .score-3 {background-image: url(images/game/info/score/3.png);}
.section-game .info-box .score-4 {background-image: url(images/game/info/score/4.png);}
.section-game .info-box .score-5 {background-image: url(images/game/info/score/5.png);}


.section-game .queue-box {width: 1086px;height:153px;background: url(images/game/queue/bg.png) no-repeat 0 0;top:230px;left:50%;margin-left:-543px;padding-top:58px;box-sizing: border-box;z-index:10}
.section-game .queue-box .progress-time {width: 412px;height:25px;top: 7px;left: 384px;}
.section-game .queue-box .progress-time i {width:0;height:25px;position: absolute;left: 0;top:0;background: url(images/game/queue/progress-time.png) no-repeat 0 0;}

.section-game .queue-box .progress-time.start i{
    animation: progress100 12s linear 0s infinite;
} 

.section-game .queue-box ul {height:80px;width: 100%;display: flex; justify-content: center;}
.section-game .queue-box li {width: 81px;height:80px;margin:0 5px;display: block;position: relative;}
.section-game .queue-box li::after {content:'';position: absolute;top:0;left:0;width: 81px;height:80px;}
.section-game .queue-box li.icon-up::after {background: url(images/game/control/up.png) no-repeat 50% 50% / contain;}
.section-game .queue-box li.icon-down::after {background: url(images/game/control/down.png) no-repeat 50% 50% / contain;}
.section-game .queue-box li.icon-right::after {background: url(images/game/control/right.png) no-repeat 50% 50% / contain;}
.section-game .queue-box li.icon-left::after {background: url(images/game/control/left.png) no-repeat 50% 50% / contain;}

.section-game .queue-box li.wrong::after,
.section-game .queue-box li.right::after {filter: brightness(.5);}
.section-game .queue-box li.wrong::before {content:'';width: 57px;height:52px;background: url(images/game/queue/wrong.png) no-repeat 0 0;position: absolute;top: 12px;left: 12px;z-index:10}
.section-game .queue-box li.right::before {content:'';width: 72px;height:60px;background: url(images/game/queue/right.png) no-repeat 0 0;position: absolute;top: 7px;left: 7px;z-index:10}

.section-game .account-box {width: 293px;height:123px;background: url(images/game/bg-account.png) no-repeat 0 0;top:100px;left:0;padding:5px 0;box-sizing: border-box;line-height: 58px;font-size: 34px;color:#fff;font-weight: bold;text-align: center;-webkit-text-stroke: 2px #8b410c;text-shadow: 2px 2px 5px #8b410c;}
.section-game .account-box a {color:inherit}

.section-game .btn-share {width: 296px;height:90px;background: url(images/game/btn-share.png) no-repeat 0 0;top:100px;right:20px;}
.section-game .btn-share:hover {filter: drop-shadow(0 0 10px #983a01);}

.section-game .control-box {width: 315px;height:315px;background: url(images/game/control/bg.png) no-repeat 0 0;top:630px;margin-left:500px;left:50%;}
.section-game .control-box a {display: block;width:161px;height:161px;}
.section-game .control-box a::after {content:'';position: absolute;top:0;left:0;width: 161px;height:161px;}
.section-game .control-box .btn-control.btn-up {top: -70px;left: 78px;}
.section-game .control-box .btn-control.btn-up::after {background: url(images/game/control/up.png) no-repeat 50% 50% / contain;touch-action:manipulation}
.section-game .control-box .btn-control.btn-up:active::after{background-image: url(images/game/control/up-on.png);}
.section-game .control-box .btn-control.btn-down {top: 225px;left: 80px;}
.section-game .control-box .btn-control.btn-down::after {background: url(images/game/control/down.png) no-repeat 50% 50% / contain;touch-action:manipulation}
.section-game .control-box .btn-control.btn-down:active::after{background-image: url(images/game/control/down-on.png);}
.section-game .control-box .btn-control.btn-right {top: 75px;right: -75px;}
.section-game .control-box .btn-control.btn-right::after {background: url(images/game/control/right.png) no-repeat 50% 50% / contain;touch-action:manipulation}
.section-game .control-box .btn-control.btn-right:active::after{background-image: url(images/game/control/right-on.png);}
.section-game .control-box .btn-control.btn-left {top: 75px;left: -73px;}
.section-game .control-box .btn-control.btn-left::after {background: url(images/game/control/left.png) no-repeat 50% 50% / contain;touch-action:manipulation}
.section-game .control-box .btn-control.btn-left:active::after{background-image: url(images/game/control/left-on.png);}

.section-game .role-box {width: 229px;height:60px;background: url(images/game/role/stage.png) no-repeat 0 0;top:825px;left:50%;margin-left:-115px;}
.section-game .role-box .role {top: -455px;left: -10px;width: 249px;height:486px;background: url(images/game/role/role.png) no-repeat 50% 50%;
    animation: breathe 1s ease-in-out infinite;}
.section-game .role-box .role-beat {background-image: url(images/game/role/role-beat.png);}
.section-game .role-box::after {content:'';width: 439px;height:327px;background: url(images/game/role/cover.png) no-repeat  50% 100% / contain;bottom:0;left:-100px;z-index:5;animation: light 1s linear 0s infinite forwards;position: absolute;}
.section-game .role-box .dialog {width: 332px;height:257px;background: url(images/game/role/dialog.png) no-repeat  0 0;top: -420px;left: 270px;z-index:5;position: absolute;}

.section-game .role-box .combo {width:500px;height:79px;background: url(images/game/combo/bg.png) no-repeat 0 0;padding-left:300px;top: -400px;left: 300px;display: none;}
.section-game .role-box .combo .num {width: 66px;height:79px;display:inline-block;background-repeat: no-repeat;background-position: 50% 100%;}
.section-game .role-box .combo .num-0 {background-image: url(images/game/combo/0.png);}
.section-game .role-box .combo .num-1 {background-image: url(images/game/combo/1.png);}
.section-game .role-box .combo .num-2 {background-image: url(images/game/combo/2.png);}
.section-game .role-box .combo .num-3 {background-image: url(images/game/combo/3.png);}
.section-game .role-box .combo .num-4 {background-image: url(images/game/combo/4.png);}
.section-game .role-box .combo .num-5 {background-image: url(images/game/combo/5.png);}
.section-game .role-box .combo .num-6 {background-image: url(images/game/combo/6.png);}
.section-game .role-box .combo .num-7 {background-image: url(images/game/combo/7.png);}
.section-game .role-box .combo .num-8 {background-image: url(images/game/combo/8.png);}
.section-game .role-box .combo .num-9 {background-image: url(images/game/combo/9.png);}

.section-game .role-box .combo .num:last-child{position: relative}
.section-game .role-box .combo .num:last-child::after {content:'';width: 48px;height:78px;background: url(images/game/combo/icon.png) no-repeat 0 0;position: absolute;left:75px;top:0;}


.section-game .role-box .hit {width: 154px;height:149px;background: url(images/game/gun/hit.png) no-repeat 0 0 / contain;top:-230px;left:50%;margin-left:-77px;z-index: 10;transform: scale(0);opacity: 0;transition: all .1s;}
.section-game .role-box .hit.active {transform: scale(1);opacity: 1;}

.section-game .gun-box {width: 510px;height:535px;position: absolute;bottom:0;left:0;z-index:10;display: none;}
.section-game .gun-box.active {animation: gun 0.1s linear 0s 1 forwards}
.section-game .gun {width: 510px;height:535px;position: relative;z-index:10}
.section-game .gun-1 {background: url(images/game/gun/gun-1.png);}
.section-game .gun-2 {background: url(images/game/gun/gun-2.png);}
.section-game .gun-3 {background: url(images/game/gun/gun-3.png);}
.section-game .gun-4 {background: url(images/game/gun/gun-4.png);}

.section-game .gun-box.active .fire-1 {width: 217px;height:186px;background: url(images/game/gun/fire-1.png) no-repeat 0 0;position: absolute;top: 115px;right: -90px;;z-index: 5;}
.section-game .gun-box.active .fire-2 {width: 272px;height:311px;background: url(images/game/gun/fire-2.png) no-repeat 0 0;position: absolute;top: 80px;right: -105px;z-index: 5;}
.section-game .gun-box.active .fire-3 {width: 281px;height:285px;background: url(images/game/gun/fire-3.png) no-repeat 0 0;position: absolute;top: 100px;right: -60px;z-index: 5;}
.section-game .gun-box.active .fire-4 {width: 559px;height:222px;background: url(images/game/gun/fire-4.png) no-repeat 0 0;position: absolute;top: 115px;right: -150px;z-index: 5;}


@keyframes light {
    0%,100% {opacity: 1;height:327px}
    50% {opacity: .7;height:300px}
}

@keyframes gun {
    0%,100% {transform: translate(0,0);}
    50% {transform: translate(-20px,20px);}
}


@keyframes breathe {
    0%, 100% {
        transform: translate(0, 0) scaleY(1) scaleX(1);
    }
    50% {
        transform: translate(0, 5px) scaleY(1.01) scaleX(1.015);
    }
}


.pop-choose {width: 560px;height:636px;background: url(images/game/pop-choose-gun.png) no-repeat 0 0;}
.pop-choose .btn {width: 272px;height:176px;}
.pop-choose .btn-1.on,
.pop-choose .btn-2.on {background: url(images/game/cover-1.png) no-repeat 0 0;}
.pop-choose .btn-1 {top:79px;left:5px;}
.pop-choose .btn-2 {top:79px;left:283px;}
.pop-choose .btn-3 {top:260px;left:4px;}
.pop-choose .btn-3.on {background: url(images/game/cover-3.png) no-repeat 0 0;}
.pop-choose .btn-4 {top:260px;left:283px;}
.pop-choose .btn-4.on {background: url(images/game/cover-4.png) no-repeat 0 0;}
.pop-choose .btn-choose {width:100%;height:144px;top:473px;left:0}

.pop-countdown {width: 482px;height:197px;background-repeat: no-repeat;background-position: 50% 0;}
.pop-countdown.active {animation: countdown 4s linear 0s 1 forwards}
.pop-countdown.num-4 {background: url(images/game/countdown/3.png) no-repeat 50% 0;}
.pop-countdown.num-3 {background: url(images/game/countdown/2.png) no-repeat 50% 0;}
.pop-countdown.num-2 {background: url(images/game/countdown/1.png) no-repeat 50% 0;}
.pop-countdown.num-1 {background: url(images/game/countdown/0.png) no-repeat 50% 0;}

.pop-win {width: 838px;height:902px;background: url(images/game/result/win.png) no-repeat 0 0;}
.pop-lose {width: 838px;height:902px;background: url(images/game/result/lose.png) no-repeat 0 0;}
.pop-win .btn-reset,
.pop-lose .btn-reset {width: 469px;height:136px;background: url(images/game/result/btn-reset.png) no-repeat 0 0;bottom:0;left:184px;}

.pop-win .btn-reset:hover,
.pop-lose .btn-reset:hover {filter: drop-shadow(0 0 10px #03f1fe)}

@keyframes countdown {
    0%,25% {background-image: url(images/game/countdown/3.png);}
    26%,50% {background-image: url(images/game/countdown/2.png);}
    51%,75% {background-image: url(images/game/countdown/1.png);}
    76%,99% {background-image: url(images/game/countdown/0.png);opacity: 1;}
    100% {opacity: 0;}
}


@keyframes progress100 {
    0% {width:0%}
    100% {width: 100%;}
}

/* .test {position: fixed;top:10%;left:20%;z-index: 9999} */
.pop {display: none;}
.pop-btn {display: block;background: url(images/sprite.png) no-repeat 0 0;}
.pop-btn:hover {filter: drop-shadow(0 0 10px #983a01);}

.pop-text,.pop-confirm {width: 476px;height:272px;background: url(images/pop.png) no-repeat 0 0;padding:60px 25px 0;box-sizing: border-box;}
.pop-text p,.pop-confirm p {height: 125px;display: flex;justify-content: center;align-items: center;text-align: center;font-size: 25px;font-weight: bold;color: #000;
}
.pop-text .btn_close,
.pop-confirm  .btn_close,
.pop-bind  .btn_close,
.pop-share  .btn_close{width: 60px;height:60px;top:0;right:0;}

.pop-text .btn-confirm{width: 185px;height:55px;margin:0 auto}
.pop-bind .btn-confirm {width: 245px;height:70px;margin:0 auto;background-position: 0 -125px;}
.pop-confirm .btn-confirm,
.pop-confirm .btn-cancel {width: 185px;height:55px; float: left;}

.pop-confirm p span{color:#c93d06}
.pop-confirm .btn-confirm {margin-left:20px}
.pop-confirm .btn-cancel {margin-left:20px;background-position: -185px 0;}

.pop-bind {width: 758px;height:500px;background: url(images/pop-bind.png) no-repeat;padding: 110px 20px;box-sizing: border-box;}

.pop-bind .radio-box{
    width: 420px;
    outline: none;
    margin:0 auto;
    padding: 5px 0 15px 72px;
    box-sizing: border-box;
}
.pop-bind .radio-box input[type="radio"] {
    display: none;
    width:0;
    height:0;
}

.pop-bind .radio-box label {height: 70px;padding-left: 60px;box-sizing: border-box;width: 100%;color:#000;font-size: 35px;text-align: left;background: url(images/radio.png) no-repeat 0 50%;display: inline-block;vertical-align: middle;line-height: 70px;cursor: pointer;font-weight: bold;}
.pop-bind .radio-box input[type="radio"]:checked + label {background-image: url(images/radio-on.png);}

.pop-share {width: 758px;height:500px;background: url(images/pop-share.png) no-repeat;padding: 250px 110px 0;box-sizing: border-box;}
.pop-share .share-code {width: 100%;height:85px;display: flex;justify-content: center;align-items: center;color:#494747;font-size: 20px;padding:0 20px;box-sizing: border-box;line-height: 30px;word-break: break-all;text-align: center;
    margin-bottom: 15px;}

.pop-share .btn-copy {width: 245px;height:70px;margin-left:20px;background-position: 0 -55px;float: left;}
.pop-share .btn-get {width: 245px;height:70px;margin-left:20px;background-position: -245px -55px;float: left;}

.copyRight {
    position: fixed;
    bottom: -185px;
    width: 100%;
    left: 0;
    z-index: 999;
    transition: bottom .3s
}

body.slide-down .wrap .section {
    margin-top: -185px
}

body.slide-down .copyRight {
    bottom: 0
}