.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  max-width: 750px;
  margin: 0 auto;
}

/* 头部 */
.header {
    width: 100%;
    height: 1.02rem;
    background: url(../image/wap/header-bg.png) no-repeat;
    background-size: 100% 100%;
    max-width: 750px;
    margin: 0 auto;
    position: fixed;
    /* left: 0; */
    top: 0;
    z-index: 999;
    /* line-height: 1.02rem; */
}

.game-icon{
    width: 0.98rem;
    height: 0.98rem;
    margin: 0 0.1rem 0;
}

.header-text{
    width: 2.98rem;
    height: 0.56rem;
}

.header-store{
    width: 2.06rem;
    height: 0.64rem;
    margin: 0 0.2rem 0 0.3rem;
}

.detail-btn{
    width: 0.68rem;
    height: 0.58rem;
}

.nav {
  position: fixed;
  top: 0;
  right: -3.5rem; /* 初始位置在屏幕右侧外部 */
  width: 3.5rem;
  height: 100vh;
  background-color: #5c98e0;
  opacity: 0.9;
  color: #fff;
  transition: right 1s ease; /* 动画效果 */
  z-index: 99;
}

.nav-bar li{
    border-bottom: 1px solid #fff;
    padding: 10px 20px; 
    color: #fff;
}

.nav ul li a {
  color: #fff;
  font-weight: bold;
}

.nav.active {
  /* 激活时显示在右边 */
  right: 0;
}

.wrapper{
    position: relative;
}

.section1{
    width: 100%;
    height: 13.34rem;
    background: url(../image/wap/section1.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}

.section1-text{
    width: 100%;
    height: 3.6rem;
    margin: 7rem auto 0;
}

.section1-btn{
    width: 5.36rem;
    height: 2.16rem;
    margin: 0 auto;
}

.section2{
    width: 100%;
    height: 13.78rem;
    background: url(../image/wap/section2.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
}

.section2-text{
    width: 5.36rem;
    height: 1.68rem;
    margin: 1.5rem auto 0.6rem;
}

.reward-info{
    width: 100%;
    height: 7.5rem;
    position: relative;
}

.prize-1{
    width: 3.18rem;
    height: 3.07rem;
    margin-left: 0.1rem;
}

.prize-1{
    width: 3.18rem;
    height: 3.07rem;
    position: absolute;
    top: 0;
    left: 0.15rem;
}

.prize-2{
    width: 2.61rem;
    height: 3.07rem;
    position: absolute;
    top: 1rem;
    right: 0;
}

.prize-3{
    width: 2.01rem;
    height: 1.95rem;
    position: absolute;
    top: 3rem;
    left: 0;
}

.prize-4{
    width: 2.01rem;
    height: 1.77rem;
    position: absolute;
    top: 3.5rem;
    right: 0;
}

.prize-5{
    width: 2.4rem;
    height: 2.08rem;
    position: absolute;
    top: 5rem;
    left: 0.15rem;
}

.prize-6{
    width: 2.01rem;
    height: 1.84rem;
    position: absolute;
    top: 5.6rem;
    right: 0.7rem;
}

.section2-btn{
    position: relative;
}

.section2-store{
    width: 4.86rem;
    height: 2.01rem;
    margin: 0 auto;
}

.section2-hands{
    width: 1.18rem;
    height: 1.01rem;
    position: absolute;
    top: 1.2rem;
    left: 5.5rem;
}

.section3{
    width: 100%;
    height: 9.67rem;
    background: url(../image/wap/section3.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
}

.section3-text{
    width: 6.47rem;
    height: 1.68rem;
    /* position: absolute;
    top: 0.5rem;
    left: 0.5rem; */
    margin: 0.5rem auto 0;
}

.section3-gift{
    width: 100%;
    height: 7.6rem;
    margin: 0 auto;

}

.section3-btn{
    width: 5.54rem;
    height: 1.13rem;
    /* position: absolute;
    top: 8.2rem;
    left: 1rem; */
    margin: 0 auto;
}

.section4{
    width: 100%;
    height: 17.66rem;
    background: url(../image/wap/section4.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
}

.section4-text{
    width: 5.74rem;
    height: 1.45rem;
    margin: 2rem auto 0;
}

.section4-prize{
    width: 6.88rem;
    height: 11.28rem;
    margin: 0.5rem auto 0;
}

.position{
    position: absolute;
    left: 0.1rem;
}

.icon-active{
    width: 2.23rem;
    height: 1.2rem;
}

.num10{
    top: 3.8rem;
}

.num30{
    top: 6.1rem;
}

.num50{
    top: 8.2rem;
}

.num80{
    top: 10.3rem;
}

.num100{
    top: 12.4rem;
}

.section5{
    width: 100%;
    height: 11.91rem;
    background: url(../image/wap/section5.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
}

.section5-text{
    width: 6.38rem;
    height: 1.34rem;
    margin: 0.2rem auto 0;
}

.role-detail{
    width: 100%;
    height: 8.9rem;
    margin: 0.1rem auto;
    display: none;
    position: relative;
}

.role-detail.block{
    display: block;
}

.role-icon{
    width: 7rem;
    margin: 0 auto;
}

.role-icon .swiper-slide img{  
    width: 1.89rem;
    height: 1.01rem;
    margin: 0;
}

.icon-prev,
.icon-next {
  width: 0.29rem;
  height: 0.38rem;
  position: absolute;
  top: 11rem;
  z-index: 2;
}

.icon-prev {
  left: 0.1rem;
}

.icon-next {
  right: 0.1rem;
}

.section6{
    width: 100%;
    height: 13.69rem;
    background: url(../image/wap/section6.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden; 
}

.section6-text{
    width: 5.76rem;
    height: 1.33rem;
    margin: 1.6rem auto 0; 
}

.out-swiper{
  width: 100%;
  height: 4.7rem;
  margin: 0.1rem auto 0;
}

.out-swiper .swiper-slide img{  
  width: 7.24rem;
  height: 4.7rem;
  margin: 0 auto;
}

.drop-wrap {
  margin: 0.1rem auto;
}

.drop-img.swiper-pagination-bullet {
    width: 14px;
    height: 14px;
    border-radius: 0;
    opacity: 1;
    background: transparent url(../image/wap/no-check.png) no-repeat center center;
    outline: none;
    margin: 0 0.1rem;
}

.drop-img.swiper-pagination-bullet-active {
    width: 26px;
    height: 26px;
    background: transparent url(../image/wap/checked.png) no-repeat center center;
    margin: 0 0.05rem;
}

.other-content{
    margin: 1.5rem 0 0.5rem; 
}

.other-content img{
    width: 1.29rem;
    height: 1.29rem;
    margin: 0 0.3rem;
}

.rule-text{
    width: 5.93rem;
    height: 0.75rem;
    /* margin: 0 auto; */
    margin: 1.5rem auto 0.2rem; 
}

.fifth-footer-info a {
  color: #617891;
  font-weight: bold;
  font-size: 0.26rem;
  padding: 0.1rem 0.3rem;
}

.fot{
    width: 100%;
    height: 2.84rem;
    background: url(../image/wap/fc-bot.png) no-repeat;
    background-size: 100% 100%;
    max-width: 750px;
    margin: 0 auto;
    position: fixed;
    bottom: 0;
    z-index: 999;
}

.fot-store{
    width: 3.32rem;
    height: 1.21rem;
    margin: 1.5rem 0 0 4rem;
}

.fot-hands{
    width: 0.78rem;
    height: 0.67rem;
    position: absolute;
    top: 2rem;
    left: 6.5rem;
}

/* 弹框 */
.close-btn{
    width: 0.45rem;
    height: 0.45rem;
    position: absolute;
    top: -0.6rem;
}

.store-popup{
    width: 7.12rem;
    height: 6.15rem;
    background: url(../image/wap/store-popup.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.store-popup-btn{
    width: 3.2rem;
    height: 1.19rem;
    margin: 4.7rem 0 0 2.2rem;
}

.store-popup-hands{
    width: 0.78rem;
    height: 0.68rem;
    position: absolute;
    top: 5.4rem;
}

.is-store-success{
    width: 6.61rem;
    height: 6.15rem;
    background: url(../image/wap/is-store-success.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.popup-sure-btn{
    width: 3.28rem;
    height: 1.65rem;
    margin: 4.1rem auto 0;
}

.is-not-store-success{
    width: 6.61rem;
    height: 6.15rem;
    background: url(../image/wap/is-not-store-success.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.is-store-btn{
    width: 3.2rem;
    height: 1.17rem;
    margin: 4.9rem auto 0;
}

.activity-desc{
    width: 6.61rem;
    height: 7.15rem;
    background: url(../image/wap/activity-desc.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.activity-rules-text{
    width: 6.2rem;
    height: 5.8rem;
    margin: 1.1rem auto 0.1rem;
    padding: 0.1rem;
    box-sizing: border-box;
    overflow: auto;
}

.my-rewards{
    width: 6.61rem;
    height: 7.15rem;
    background: url(../image/wap/my-rewards.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.my-rewards-table table {
    border-collapse: collapse; /* 合并表格边框 */
}

.my-rewards-table{
  width: 95%;
  height: 6.6rem;
  overflow: auto;
  margin: 0.3rem auto 0;
}

.my-rewards-table th {
  border: 1px solid #3671b1;
  padding: 5px;
  color: #edf6ff;
  font-size: 0.2rem;
  text-align: center;
  background-color: #2869ab;
  width: 120px;
  position: sticky; /* 粘性定位 */  
  top: 0; /* 固定在顶部 */  
  z-index: 1; /* 确保表头在其他内容之上 */
  box-sizing: border-box;
}

.my-rewards-table td {
  border: 1px solid #3671b1;
  padding: 5px;
  font-size: 0.2rem;
  color: #364970;
  text-align: center;
  width: 120px;
  box-sizing: border-box;
}

.get-grey-btn,.get-blue-btn{
    width: 1.46rem;
    height: 0.73rem;
    margin: 0 auto;
}

.get-grey-btn{
    background: url(../image/wap/get-grey-btn.png) no-repeat;
    background-size: 100% 100%;
}

.get-blue-btn{
    background: url(../image/wap/get-blue-btn.png) no-repeat;
    background-size: 100% 100%;
}