body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh; /* 至少占满屏幕高度 */
    display: flex;
    flex-direction: column;
  }
  
  
.box{
    /* width: 10.8rem;
    height: 19.2rem; */
    width: 100%;
    height: 100%;
    position: relative;
    background: #232843;

    flex: 1; /* 剩余空间填充 */
    display: flex;
    flex-direction: column;
}
.box1,.box2,.box3,.box4{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.box1{
    background: url(https://jp-static-jd.gameduchy.com/static/images/box1.jpg) no-repeat center top/cover;
    /* display: none; */
}
.box1_logo{
    display: block;
    position: absolute;

}
.box1_top{
    width: 8.3rem;
    height: 5.24rem;
    position: absolute;
    top: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
}
.box1_pic{
    width: 10.8rem;
    height: 15.73rem;
    position: absolute;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
}
.box1_logo{
    width: 1.81rem;
    height: 0.74rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box1_logo.png) no-repeat center top/cover;
    top: 0.13rem;
    right: 0.2rem;
}
img{
    width: 100%;
    height: 100%;
}
.box1_box{
    width: 100%;
    height: 5.9rem;
    position: absolute;
    display: flex;
    bottom: 0;
    flex-direction: column;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
}
.uid{
    width: 7.1rem;
    height: 0.9rem;
    background-color: #0e0d1b;
    color: #5a5a63;
    font-size: 0.3rem;
    text-indent: 0.3rem;
}
.gold{
    width: 7.1rem;
    height: 0.9rem;
    background-color: #0e0d1b;
    color: #5a5a63;
    font-size: 0.3rem;
    text-indent: 0.3rem;
}


.box1_go{
    display: block;
    width: 6.44rem;
    height: 1.32rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box1_btn1.png) no-repeat center top/cover;
}
.box1_sm{
    display: block;
    width: 6.44rem;
    height: 1.32rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box1_btn2.png) no-repeat center top/cover;
}
.zz{
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.9);
    position: absolute;
    top: 0;
    left: 0;
}
.zz_sm{
    display: none;
    width: 10.8rem;
    height: 10.15rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box1_tc.png) no-repeat center top/cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.zz_close{
    display: block;
    width: 1.54rem;
    height: 1.54rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box1_tc_close.png) no-repeat center top/cover;
    position: absolute;
    top: 13%;
    right: 0%;
}






.box2{
    display: none;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box2.jpg) no-repeat center top/cover;
    text-align: center;
}
.logo{
    width: 3.85rem;
    height: 1.59rem;
    position: absolute;
    top: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
}
.box2_bg1,.box2_bg2,.box2_bg3,.box2_bg4{
    width: 10.8rem;
    height: 19.66rem;
    position: absolute;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
}
.box2_bg{
    width: 80%;
    height: 5.2rem;
    margin-left: 10%;
    margin-top: 29%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
}
.box2_bg1{
    display: block;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box2_bg1.png) no-repeat center top/cover;
}
.box2_bg2{
    display: none;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box2_bg2.png) no-repeat center top/cover;
}
.box2_bg3{
    display: none;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box2_bg3.png) no-repeat center top/cover;
}
.box2_bg4{
    display: none;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box2_bg4.png) no-repeat center top/cover;
}
.box2 p{
    font-size: 0.34rem;
    color: #fff;
}

.sj{
    width: 5.46rem;
    height: 1.33rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box2_font_1.png) no-repeat center top/cover;
    line-height: 1.2rem;
    color: #fff;
    font-size: 0.4rem;
}
.zdts{
    width: 4.42rem;
    height: 1.33rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box2_font_2.png) no-repeat center top/cover;
    line-height: 1.2rem;
    color: #fff;
    font-size: 0.4rem;
}
.go{
    display: block;
    width: 6.35rem;
    height: 2.14rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/go.png) no-repeat center top/cover;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0%;
}
.jss{
    width: 4.78rem;
    height: 1.33rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box3_font_1.png) no-repeat center top/cover;
    line-height: 1.2rem;
    color: #fff;
    font-size: 0.4rem;
}
.yfs{
    width: 4.78rem;
    height: 1.33rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box3_font_1.png) no-repeat center top/cover;
    line-height: 1.2rem;
    color: #fff;
    font-size: 0.4rem;
}
.jbxx1{
    width: 7.61rem;
    height: 1.9rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box4_font_1.png) no-repeat center top/cover;
    color: #fff;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}
.jbxx2{
    width: 7.64rem;
    height: 1.6rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box4_font_2.png) no-repeat center top/cover;
    color: #fff;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}
.jb_hq{
    max-width: 90%;
}
.jb_xh{
    max-width: 90%;
}
.tl{
    width: 4.96rem;
    height: 1.33rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box5_font_1.png) no-repeat center top/cover;
    line-height: 1.2rem;
    color: #fff;
    font-size: 0.4rem;
}
.cq{
    width: 5.04rem;
    height: 1.33rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box5_font_2.png) no-repeat center top/cover;
    line-height: 1.2rem;
    color: #fff;
    font-size: 0.4rem;
}




.box3{
    display: none;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box6.jpg) no-repeat center top/cover;
}
.box6_title{
    width: 9rem;
    height: 5.65rem;
    position: absolute;
    top: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
}
.box3_zdts{
    width: 8.93rem;
    height: 1.17rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/box6_font_1.png) no-repeat center top/cover;
    line-height: 0.4rem;
    color: #fff;
    font-size: 0.3rem;
    text-align: center;
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 0.4rem;
}
.box3_ewm{
    width: 80%;
    height: 1.86rem;
    position: absolute;
    bottom: 2.14rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    font-size: 0.35rem;
    color: #fff;
}
.box3_ewm_right{
    width: 1.86rem;
    height: 1.86rem;
}
.box3_btn_box{
    width: 8.83rem;
    height: 0.74rem;
    position: absolute;
    bottom: 1.05rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.zkyb,.bcsgj{
    width: 4.86rem;
    height: 1.88rem;
}











.imgndy{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}












.footer{
    /* display: none; */
    width: 100%;
    height: 0.71rem;
    background: #000000;
    position: absolute;
    bottom: 0;
}
.footer_l{
    width: 0.57rem;
    height: 100%;
    position: absolute;
    left: 0;
    overflow: hidden;
}
.yxgg{
    width: 0.33rem;
    height: 0.45rem;
    background: url(https://jp-static-jd.gameduchy.com/static/images/yxgg.png) no-repeat top center/cover;
    position: absolute;
    top: 0.12rem;
    left: 0.17rem;
}
.footer_c{
    width: 5.1rem;
    height: 100%;
    font-size: 0.11rem;
    color: #ffffff;
    line-height: 0.35rem;
    position: absolute;
    left: 0.57rem;
    overflow: hidden;
    text-align: center;
}
.footer_r{
    width: 1.83rem;
    height: 100%;
    position: absolute;
    right: 0;
}

.footer_r a{
    display: inline-block;
    width: 0.31rem;
    height: 0.31rem;
    margin-left: 0.05rem;
    margin-top: 0.2rem;

}
.footer_r a:nth-of-type(1){
    background: url(https://jp-static-jd.gameduchy.com/static/images/icon1.png) no-repeat top center/cover;
}
.footer_r a:nth-of-type(2){
    background: url(https://jp-static-jd.gameduchy.com/static/images/icon2.png) no-repeat top center/cover;
}
.footer_r a:nth-of-type(3){
    background: url(https://jp-static-jd.gameduchy.com/static/images/icon3.png) no-repeat top center/cover;
}
.footer_r a:nth-of-type(4){
    background: url(https://jp-static-jd.gameduchy.com/static/images/icon4.png) no-repeat top center/cover;
}









.text3_top{
    font-size: 0.3rem!important;

}
.text3_center{
    font-size: 0.3rem!important;
}
.text3_bottom{
    font-size: 0.3rem!important;
}

#orientation-message{
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    text-align: center;
}
#orientation-message p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}