*{
    margin: 0;padding: 0;
    font-family:"Microsoft YaHei";
    font-weight:bold;
}
body,html{
    background-color: #000000;
}
input::-webkit-input-placeholder { /* WebKit browsers */
    color: #000000;
}

.chagnan{
    display: none;
}

.wrap{
    position: absolute;
    width: 100vw;
    height: 100vh; 
    background-color: #000000;
    overflow: hidden;
}
.pc_box{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.pc_game{
    position: absolute;
    width: 10rem /* 1920/192 */;
    height: 5.625rem /* 1080/192 */;
    top: 0;
    left: 0;
    background: url(../images/pc_game_bg.jpg) center center no-repeat;
    background-size: cover;
}
.pc_banner{
    position: absolute;
    width: 5.098958rem /* 979/192 */;
    left: 50%;
    margin-left: -2.549479rem /* 489.5/192 */;
    top: .572917rem /* 110/192 */
}
.num_box{
    position: absolute;
    top: 2.479167rem /* 476/192 */;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.item_out{
    width: .520833rem /* 100/192 */;
    height: .609375rem /* 117/192 */;
    background-color: #78f64d;
    color: #000000;
    position: relative;
    margin: 0 .026042rem /* 5/192 */;
    overflow: hidden;
}
.dot{
    position: absolute;
    font-size: .520833rem /* 100/192 */ !important;
    left: .010417rem /* 2/192 */;
    bottom: 0;
    line-height: .46875rem /* 90/192 */;
}
.item_in{
    position: absolute;
    top: 0;
    left: 0;
}
.item_in div{
    width: .520833rem /* 100/192 */;
    height: .609375rem /* 117/192 */;
    text-align: center;
    line-height: .609375rem /* 117/192 */;
    font-size: .65625rem /* 126/192 */;
    font-weight: 600;
    box-sizing: border-box;
}
.item_out9{
    width: .520833rem /* 100/192 */;
    height: .609375rem /* 117/192 */;
}
.ico_b{
    position: absolute;
    width: .34375rem /* 66/192 */;
    height: .463542rem /* 89/192 */;
    top: 50%;
    left: 50%;
    margin: -.231771rem /* 44.5/192 */ 0 0 -.171875rem /* 33/192 */;
}

.start_btn{
    position: absolute;
    width: 1.541667rem /* 296/192 */;
    left: 50%;
    margin-left: -.770833rem /* 148/192 */;
    top: 3.760417rem /* 722/192 */;
    cursor: pointer;
}
.again_btn{
    position: absolute;
    width: 1.541667rem /* 296/192 */;
    left: 50%;
    margin-left: -.770833rem /* 148/192 */;
    top: 4.416667rem /* 848/192 */;
    cursor: pointer;
}
.ico_1{
    position: absolute;
    width: 1.177083rem /* 226/192 */;
    top: 4.380208rem /* 841/192 */;
    left: 2.848958rem /* 547/192 */
}
.ico_2{
    position: absolute;
    width: 1.177083rem /* 226/192 */;
    top: 3.536458rem /* 679/192 */;
    left: 5.875rem /* 1128/192 */;
}

.pc_input_box{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    z-index: 2;
}
.input_box_inner{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.input_bg{
    width: 3.536458rem /* 679/192 */;
    height: 1.411458rem /* 271/192 */;
    background: url(../images/input_bg.png) center center no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.input_bg_cn{
    background: url(../images/input_bg_cn.png) center center no-repeat;
    background-size: 100% 100%;
}
.input_name{
    position: absolute;
    width: 3.36875rem /* 666/192 */;
    height: .570208rem /* 121/192 */;
    left: 0.05rem;
    top: .598542rem /* 113/192 */;
    border-radius: .15625rem /* 30/192 */;
    outline: none;
    border: 0;
    box-sizing: border-box;
    padding: 0 .15625rem /* 30/192 */;
    font-size: .270833rem /* 52/192 */;
    color: #000000 !important;
    /* border: 1px #000000 solid; */
}
.confirm_btn{
    width: 1.546875rem /* 297/192 */;
    height: .505208rem /* 97/192 */;
    margin: .260417rem /* 50/192 */ auto .260417rem /* 50/192 */;
    cursor: pointer;
}

.result_box{
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: #ffffff;
    z-index: 3;
}
.result_box_content{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    
}
.result_cap_wrap{
    position: absolute;
    width: 7.348958rem /* 1411/192 */;
    height: 4.046875rem /* 777/192 */;
    background-color: #ffffff;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    margin-left: -3.674479rem /* 705.5/192 */;
    margin-top: -2.023438rem /* 388.5/192 */;
}
.result_cap{
    width: 7.348958rem /* 1411/192 */;
    height: 4.046875rem /* 777/192 */;
    margin: 0 auto;
}


.result_heart{
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position:relative;
}
.ico_3{
    position: absolute;
    top: 0;
    left: 0;
    width: .46875rem /* 90/192 */;
    height: .375rem /* 72/192 */;
}
.ico_4{
    position: absolute;
    top: 50%;
    right: 0;
    width: 1.229167rem /* 236/192 */;
    height: .369792rem /* 71/192 */;
    margin-top: -.184896rem /* 35.5/192 */;
}
.user_name_box{
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.user_name_box p{
    font-size: .34375rem /* 66/192 */;
}
.user_name_box span{
    font-size: .125rem /* 24/192 */;
}
.result_center{
    width: 100%;
    height: 1.171875rem /* 225/192 */;
    background-color: #000000;
    border-radius: .15625rem /* 30/192 */;
    margin: .078125rem /* 15/192 */ auto 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.result_center_top{
    display: flex;
    justify-content: center;
    align-items: center;
}
.result_center_top span{
    font-size: .729167rem /* 140/192 */;
    font-weight: 600;
    color: #ffffff;
}
.ico_6{
    width: .682292rem /* 131/192 */;
    height: .208333rem /* 40/192 */;
    margin-left: .104167rem /* 20/192 */;
    position: relative;
    top: .15625rem /* 30/192 */
}
.result_center_bottom{
    display: flex;
    justify-content: center;
    align-items: center;
}
.result_center_bottom span{
    color: #ffffff;
    font-size: .135417rem /* 26/192 */;
    margin: .052083rem /* 10/192 */ .104167rem /* 20/192 */;
}
.ico_5{
    width: .213542rem /* 41/192 */;
    height: .140625rem /* 27/192 */;
    margin-left: .104167rem /* 20/192 */;
}
.result_footer{
    display: block;
    width: 100%;
    margin: 0 auto 0;
}

#resultImg{
    position: absolute;
    z-index: 5;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
}
.yue{
    position: absolute;
    width: 3%;
    z-index: 99;
    top: 2%;
    left: 2%;
    cursor: pointer;
}

.op_cn_img{
    position: absolute;
    width: 8%;
    z-index: 99;
    top: 2%;
    left: 6%;
}

.tips{
    position: absolute;
    left: .104167rem /* 20/192 */;
    bottom: 0;
    font-size: .104167rem /* 20/192 */;
    color: #ffffff;
    display: none;
}
.pc_banner{display: block;}
.mo_banner{display: none;}
.mo{display: none;}
.result_footer{display: block;}


/* =================手机端================= */


@media only screen and (max-width: 790px){
    .mo{display: block;}
    .result_footer{display: none;}
    .pc_game{
        position: absolute;
        width: 10rem /* 750/75 */;
        height: 100vh;
        top: 0;
        left: 0;
        background: url(../images/mo_bg.png) center center no-repeat;
        background-size: cover;
    }
    .pc_banner{display: none;}
    .mo_banner{
        display: block;
        position: absolute;
        width: 7.373333rem /* 553/75 */;
        left: 50%;
        margin-left: -3.686667rem /* 276.5/75 */;
        top: 2rem /* 150/75 */
    }
    .num_box{
        position: absolute;
        top: 8.266667rem /* 620/75 */;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .item_out{
        width: .906667rem /* 68/75 */;
        height: 1.173333rem /* 88/75 */;
        background-color: #78f64d;
        color: #000000;
        position: relative;
        margin: 0 .026042rem /* 5/192 */;
        overflow: hidden;
    }
    .dot{
        position: absolute;
        font-size: 1.066667rem /* 80/75 */ !important;
        left: .026667rem /* 2/75 */;
        bottom: 0;
        line-height: .906667rem /* 68/75 */;
    }
    .item_in{
        position: absolute;
        top: 0;
        left: 0;
    }
    .item_in div{
        width: .906667rem /* 68/75 */;
        height: 1.173333rem /* 88/75 */;
        text-align: center;
        line-height: 1.173333rem /* 88/75 */;
        font-size: 1.146667rem /* 86/75 */;
        font-weight: 600;
    }
    .item_out9{
        width: .906667rem /* 68/75 */;
        height: 1.173333rem /* 88/75 */;
    }
    .ico_b{
        position: absolute;
        width: .6rem /* 45/75 */;
        height: .906667rem /* 68/75 */;
        top: 50%;
        left: 50%;
        margin: -.453333rem /* 34/75 */ 0 0 -.3rem /* 22.5/75 */;
    }

    .start_btn{
        position: absolute;
        width: 5.013333rem /* 376/75 */;
        left: 50%;
        margin-left: -2.506667rem /* 188/75 */;
        top: 11.466667rem /* 860/75 */;
    }
    .again_btn{
        position: absolute;
        width: 5.013333rem /* 376/75 */;
        left: 50%;
        margin-left: -2.506667rem /* 188/75 */;
        top: 13.6rem /* 1020/75 */;
    }
    .ico_1{
        position: absolute;
        width: 2.666667rem /* 200/75 */;
        top: 12.933333rem /* 970/75 */;
        left: .266667rem /* 20/75 */;
    }
    .ico_2{
        position: absolute;
        width: 3.333333rem /* 250/75 */;
        top: 10.266667rem /* 770/75 */;
        left: 6.56rem /* 492/75 */;
    }


    .input_bg{
        width: 8.2rem /* 615/75 */;
        height: 4.56rem /* 342/75 */;
        background: url(../images/input_bg_mo.png) center center no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    .input_name{
        position: absolute;
        width: 7.74rem  /* 603/75 */;
        height: 1.266667rem /* 95/75 */;
        left: 0.1rem;
        top: 2.506667rem /* 188/75 */;
        border-radius: .266667rem /* 20/75 */;
        outline: none;
        border: 0;
        box-sizing: border-box;
        padding: 0 .266667rem /* 20/75 */;
        font-size: .746667rem /* 56/75 */;
        color: #000000 !important;
        text-align: center;
        /* border:1px #000000 solid; */
    }
    .confirm_btn{
        width: 3.586667rem /* 269/75 */;
        height: 1.186667rem /* 89/75 */;
        margin: .666667rem /* 50/75 */ auto .666667rem /* 50/75 */;
    }
    .tips{
        position: absolute;
        left: .133333rem /* 10/75 */;
        bottom: -.266667rem /* 20/75 */;
        font-size: .213333rem /* 16/75 */;
        color: #ffffff;
        display: none;
    }

    .result_box_content{
        background: url(../images/mo_bg.png) center center no-repeat;
        background-size: cover;
        background-color: #000000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .mo_banner2{
        width: 5.426667rem /* 407/75 */;
        height: 3.213333rem /* 241/75 */;
        margin-bottom: .666667rem /* 50/75 */;
    }

    .result_cap_wrap{
        margin: 0 !important;
        top:0;
        left: 0;
    }
    .result_cap_wrap,.result_cap{
        position: relative;
        height: 5.626667rem /* 422/75 */;
        overflow: hidden;
        width: 100%;
        background-color: #ffffff;
        box-sizing: border-box;
    }
    .result_cap{
        padding-top: .2rem /* 15/75 */
    }



    /* ==============打印================= */
    .result_heart{
        width: 9.053333rem /* 679/75 */;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position:relative;
    }
    .ico_3{
        position: absolute;
        top: 0;
        left: 0;
        width: .586667rem /* 44/75 */;
    }
    .ico_4{
        position: absolute;
        top: 50%;
        right: 0;
        width: 1.493333rem /* 112/75 */;
        height: .453333rem /* 34/75 */;
        margin-top: -.226667rem /* 17/75 */;
    }
    .user_name_box p{
        font-size: .424rem /* 31.8/75 */;
    }
    .user_name_box span{
        font-size: .16rem /* 12/75 */;
    }

    .result_center{
        width: 9.053333rem /* 679/75 */;
        height: 1.546667rem /* 116/75 */;
        background-color: #000000;
        border-radius: .266667rem /* 20/75 */;
        margin: .133333rem /* 10/75 */ auto 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .result_center_top span{
        font-size: .826667rem /* 62/75 */;
        font-weight: 600;
        color: #ffffff;
    }

    .ico_6{
        width: .853333rem /* 64/75 */;
        height: .266667rem /* 20/75 */;
        margin-left: .266667rem /* 20/75 */;
        position: relative;
        top: .133333rem /* 10/75 */
    }
    .result_center_bottom span{
        color: #ffffff;
        font-size: .173333rem /* 13/75 */;
        margin: .133333rem /* 10/75 */ .133333rem /* 10/75 */;
    }
    .ico_5{
        width: .266667rem /* 20/75 */;
        height: .173333rem /* 13/75 */;
        margin-left: .066667rem /* 5/75 */;
    }
    .result_footer_mo{
        display: block;
        width: 100%;
        margin: .133333rem /* 10/75 */ auto 0;
    }






    .mo_logo{
        width: 2.266667rem /* 170/75 */;
        height: .68rem /* 51/75 */;
        margin: 1.333333rem /* 100/75 */ auto 0;
    }
    .yue{
        width: 8%;
    }
    .op_cn_img{
        position: absolute;
        width: 22%;
        z-index: 99;
        top: 2%;
        left: 13%;
    }
    #resultImg{
        position: absolute;
        z-index: 5;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .tt{
        position: absolute;
        z-index: 999;
        width: 100%;
        top: 0;
        left: 0;
    }

    .input_bg_cn{
        background: url(../images/input_bg_mo_cn.png) center center no-repeat;
        background-size: 100% 100%;
    }

    .chagnan{
        display: block;
        width: 100%;
        text-align: center;
        margin: .4rem /* 30/75 */ auto 0;
        font-size: .266667rem /* 20/75 */;
        color: #ffffff;
    }

    .shan {
        animation: shan 1s ease both infinite;
    }
    
    @keyframes shan {
        0% {
            opacity: 1;
        }
        50%{
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }

}