@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}

.wap-main{
    height:24.12rem;
    background: -webkit-linear-gradient(#7e2b9a,#ac3e34);
}
/*动画猜拳区域*/
/*开始*/
.game-content{
    position: absolute;
    left: 50%;
    top:1.56rem;
    margin-left: -6.68rem;
    width:13.36rem;
    height:16.64rem;
    background: url("../images/bg_ring@2x.png") no-repeat center/contain;
    pointer-events: none;

}
.game-content .list1{
    position: absolute;
    left: 50%;
    margin-left: -3.5rem;
    top:4.48rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 7rem;
    height: 4.12rem;
    /*background-image: url('../images/bg-round1.png');*/
}
.game-content .list2{
    position: absolute;
    left: 50%;
    margin-left: -3.5rem;
    top:8.88rem;
    background: url("../images/countdown_ready@2x.png") no-repeat center/contain;
    width: 6.76rem;
    height: 1.6rem;
}
.game-content .list3{
    position: absolute;
    left: 50%;
    top: 15.7rem;
    margin-left: -3.04rem;
    width: 6.08rem;
    height:1.56rem;
    background: url("../images/tip_choosegesture@2x.png") no-repeat center/contain;
}
/*倒计时*/
.game-content .game-time{
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -3rem;
    margin-top: -4rem;
    width: 6rem;
    height: 8rem;
    animation: scale1 1s linear;
    animation-fill-mode: forwards;
    -moz-animation: scale1 1s linear;
    -moz-animation-fill-mode: forwards;
    -webkit-animation: scale1 1s linear;
    -webkit-animation-fill-mode: forwards;
}
@keyframes scale1 {
    0%{
        transform: scale(0);
        -moz-transform:scale(0);
        -webkit-transform:scale(0);
        opacity: 1;
    }
    100%{
        transform: scale(1.5);
        -moz-transform:scale(1.5);
        -webkit-transform:scale(1.5);
        opacity: 0;
    }
}

/*选择石头剪刀布区域*/
.game-btn{
    position: absolute;
    left: 50%;
    margin-left: -7.24rem;
    top: 18.9rem;
    width: 14.48rem;
    height:4.8rem;
    background: #DF574A;
    border: 0.16rem solid #F8E71C;
    border-radius: 1rem;
    padding-bottom: 0.2rem;
}
.game-btn .btn{
    width:3.68rem ;
    height:3.68rem;
    background-position: 0 0;
    background-size: contain;
    background-repeat:no-repeat ;
    float: left;
    margin:0.4rem 0.52rem;
    outline: none;
    border: none;
    position: relative;
}
.game-btn .btn1{
    background-image: url("../images/btn_gesture_jiandao@2x.png");
}
.game-btn .btn2{
    background-image: url("../images/btn_gesture_shitou@3x.png");
}
.game-btn .btn3{
     background-image: url("../images/btn_gesture_bu@2x.png");
 }
/*按钮选中样式*/
.game-btn .btn1.on{
    background-image: url("../images/btn_gesture_jiandao_pressed@2x.png")
}
.game-btn .btn2.on{
    background-image: url("../images/btn_gesture_shitou_pressed@2x.png");
}
.game-btn .btn3.on{
    background-image: url("../images/btn_gesture_bu_pressed@2x.png");
}
.game-btn .btn.on:after {
    position: absolute;
    right:-0.2rem;
    top: -0.2rem;
    content: '';
    width:1rem;
    height: 1rem;
    background: url("../images/sign_selected@2x.png") no-repeat center/contain;
}
/*出拳动画与样式*/
.game-content .game-enemy,.game-content .game-player{
    position: absolute;
    left: 50%;
    margin-left:-1.6rem;
    width: 3.2rem;
    height: 6.4rem;
}
.game-content .game-enemy{
    top:-6.4rem;
    animation: move 1.5s linear ;
    animation-fill-mode: forwards;
    -webkit-animation: move 1.5s linear ;
    -moz-animation: move 1.5s linear ; ;
    -moz-animation-fill-mode:forwards ;
    -webkit-animation-fill-mode:forwards ;
}
@keyframes move{
    0%{
        /*transform: translateY(0rem);*/
        top:-6.4rem
    }
    100%{
        /*transform: translateY(-2rem);*/
        top:-2rem
    }

}
.game-content .game-player{
    bottom: -6.4rem;
    animation: move1 1.5s linear ;
    animation-fill-mode: forwards;
    -webkit-animation: move1 1.5s linear ;
    -moz-animation: move1 1.5s linear ; ;
    -moz-animation-fill-mode:forwards ;
    -webkit-animation-fill-mode:forwards ;
}
@keyframes move1{
    0%{
        /*transform: translateY(0rem);*/
        bottom:-6.4rem
    }
    100%{
        /*transform: translateY(-2rem);*/
        bottom:-1rem
    }

}
.game-result{
    position: absolute;
    top:5rem;
    left: 50%;
    margin-left: -3.8rem;
    width: 7.6rem;
    height:6.08rem;
}
.bg-loading{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.75);
}
.bg-loading .vbox>div{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/*提速框*/
.tips{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    display: none;
}
.tips-win{
    background: url("../images/tips-win-bg.png") no-repeat center/cover;
}
.tips-bg{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.35);
}
.tips-content{
    position: absolute;
    top:6.8rem;
    left: 50%;
    margin-left: -5.8rem;
    width:11.6rem;
    height:8.28rem ;
    background: url("../images/tips-win.png") no-repeat center/contain;
}
/*失败背景图*/
.tips-lose .tips-content{
    background: url("../images/tips-lose.png") no-repeat center/contain;
}
.tips-cont{
    margin-top: 3.2rem;
    margin-left:1.6rem ;
    margin-right: 1.6rem;
    text-align: center;
    color: #787878;
}
.tips-cont h3{
    font-size: 0.8rem;
    font-weight: bold;

}
.tips-win .tips-cont h3{
    color: #C63D30;
}
.tips-win-all .tips-cont h3{
    color: #C63D30;
}
.tips-cont p{

    font-size: 0.6rem;
    font-weight: bold;
}
.tips-cont p:nth-of-type(1){
    margin-top: 0.8rem;
}
.tips .btn{
    position: absolute;
    left: 0;
    bottom: -2.5rem;
    width: 100%;
    text-align: center;

}

/*过关提示框*/
.tips-win .btn{
    display: flex;
    justify-content: space-between;
}

.tips .btn a{
    display: inline-block;
    width:5.36rem;
    height: 2rem;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.tips .btn .btn-lottery{
    background-image: url("../images/lijichoujiang.png");
}
.tips .btn .btn-next{
    background-image: url("../images/jixuchuangguan.png");
}
.tips .btn .btn-again{
    background-image: url("../images/chongxinkaishi.png");
}