/* reset */
*{margin: 0;padding: 0;box-sizing: border-box;}
html,body{width:100%;height: 100%;}
body{margin:0; padding:0; font-size:100%; font-family:"Microsoft YaHei",\5b8b\4f53,Arial, Helvetica, sans-serif;}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,textarea,table,td{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
area{outline:none;}
img{border:0;}
ol,ul{list-style:none;}
a{text-decoration:none;outline:none;border:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}
.fl{float: left;}
.fr{float: right;}
.clear:after{content: "";display: block;clear: both;}
.clear{zoom: 1;}
body.grab{cursor: grab;}


.wrapper{
    background: url(../img/bg.jpg) no-repeat center center;
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    /* height: 13.34rem; */
    position: relative;
    /* overflow: hidden; */
    padding-top: 0.23rem;
    /* margin-top: -1.5rem; */
  }
/* .wrapper>div,a{
      position: absolute;
}
.head{
    width: 1.13rem;
    height: 1.13rem;
    top: 2.4rem;
    left: .2rem;
    z-index: 5;
}
.roleName{
    width: 3.44rem;
    height: .5rem;
    background: url(//media.zlongame.com/media/pictures/cn/actv/61/2022/recall1102/share/img/roleName.png) no-repeat center center;
    background-size: 100% 100%;
    top: 2.5rem;
    left: .5rem;
    font-size: .24rem;
    color: #fff;
    line-height: .5rem;
    text-align: center;
} */
.top{
    width: 5.5rem;
    height: 1.38rem;
    font-size: 0.22rem;
    line-height: 0.22rem;
    color: #FFFFFF;
    background-size: 100% auto;
    padding-top: 0.2rem;
    padding-left: 0.5rem;
    /* margin-top: 0.23rem; */
}
.top b{
    color: #FFF38E;
}
.top p{
    margin-top: 0.1rem;
}
.center{
    width: 7.02rem;              /* 按 702px 设计宽度换算 */
    margin: 0.6rem auto 0;
}
.center img{
    width: 100%;
    height: auto;
}
.title{
    width: 100%;
    height: 2.43rem;
    background-size: 100% auto;
}
.btns{
    /* 不再用固定 top，把按钮放在 bottom 内部由布局自然撑开 */
    margin: 0.4rem auto 0;
    display: flex;
    justify-content: center;
    column-gap: 0.2rem;
}
.btns .btn{
    width: 2.88rem;
    height: 0.91rem;
    background: url(../img/btn1.png) no-repeat;
    background-size: 100% auto;
}
.btns .btn2{
    background-image: url(../img/btn2.png);
}
.btns span{
    font-size: 0.22rem;
    color: #FFFFFF;
    position: absolute;
    left: 0;
    opacity: 0;
}
.bottom{
    width: 100%;
    background-size: 100% auto;
    margin-top: 6rem;        
    padding-bottom: 0.6rem;   
}
.mountain_left, .mountain_right{
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
}
/* .btn{
    width: 2.45rem;
    height: .82rem;
    background: url(//media.zlongame.com/media/pictures/cn/actv/61/2022/recall1102/share/img/btn2.png) no-repeat center center;
    background-size: 100% 100%;
    top: 2.5rem;
    left: 4.7rem;
}

.btn2{
    width: 2.62rem;
    height: 1.08rem;
    background: url(//media.zlongame.com/media/pictures/cn/actv/61/2022/recall1102/share/img/btn.png) no-repeat center center;
    background-size: 100% 100%;
    top: 13rem;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.code{
    width: 4.46rem;
    height: .94rem;
    background: url(//media.zlongame.com/media/pictures/cn/actv/61/2022/recall1102/share/img/code.png) no-repeat center center;
    background-size: 100% 100%;
    top: 9.8rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: red;
    font-size: 0.28rem;
    line-height: .94rem;
    text-align: center;
}
.code div{
    position: absolute;
    width: 0.52rem;
    height: 100%;
    right: 0;
    top: 0;
} */

.tip{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    background-color: rgba(51, 51, 51, .9);
    display: none;
}
.tip_main{
    width: 6.20em;
    height: 3.84rem;
    background: url(../img/popup_bg.png) no-repeat center center;
    background-size: 100% 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-52%,-50%);
    padding: 0.55rem 0.3rem 0;
}
.tip_content{
    /* font-size: 0.23rem;
    color: #000;
    text-align: center;
    margin: 1rem .5rem; */
    position: relative;
    top: 0.25rem;
    height: 1.61rem;
    font-size: 0.28rem;
    color: #FF9843;
    line-height: 0.4rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 0 0.1rem #FFFFFF,
                 0 0 0.2rem #FFFFFF,
                 0 0 0.3rem #FFFFFF;
}
.tip_close{
    width: 0.56rem;
    height: 0.56rem;
    background: url(../img/close.png) no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    top: 0.04rem;
    right: 0.04rem;
}
.btn{
    position: relative;
    top: 0.4rem;
    width: 2.27rem;
    height: 0.72rem;
    background: url('../img/btn_confirm.png') no-repeat;
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin: 0 auto;
}