.swiper-wrapper .swiper-slide.page4 {
    overflow: hidden;
    position: relative;
    background: url(../image/section4/bg-4.jpg) no-repeat;
    background-size: 100%;
}

.numContent {
  width: 10.6rem;
  height: 4.74rem;
  position: absolute;
  top: 0rem;
  left: 0.5rem;
}

.page4-slg {
    width: 1.83rem;
    height: 0.53rem;
    background: url('../image/section4/page4-slg.png') no-repeat;
    background-size: 100%;
    position: absolute;
    top: 1.7rem;
    cursor: pointer;
}

/* title-4.png */
.page4-top {
    position: absolute;
    width: 3.7rem;
    height: 2rem;
    margin: 0 auto;
    top: 0.4rem;
    left: 0;
    right: 0;
}
/* .page4-top-img::before {
    top: -0.2rem;
} */

.pager4-numContent{
    width: 8.1rem;
    height: 2.75rem;
    position: absolute;
    top: 5.93rem;
    left: 50%;
    margin-left: -4.05rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background: url(../image/section4/section4-list-bg.png) no-repeat;
    background-size: 100%; */
    z-index: 5;
}

.page4 .pager4-numContent li {
    filter: brightness(1);
    width: 1.5rem;
    height: 1.98rem;
    /* background: url('../image/section4/reward-10.png') no-repeat;
    background-size: 100%; */
    /* position: absolute; */
    left: 0.58rem;
    top: 1.6rem;
    z-index: 5;
}

.page4 .pager4-numContent li .reward-bg {
  filter: brightness(0.3);
  width: 1.5rem;
  height: 1.98rem;
  background: url('../image/section4/reward-10.png') no-repeat;
  background-size: 100%;
  /* position: absolute; */
  /* left: 0.58rem;
  top: 1.6rem; */
}
/* .page4 .pager4-numContent li.active::before {
    content: '';
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    background: url(../image/section4/active.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 0.9rem;
    left: 0.24rem;
} */
.page4 .pager4-numContent li .reward-bg.active {
  filter: brightness(1);
}

.page4 .pager4-numContent li .reward-bg:nth-child(1) {

}

.page4 .pager4-numContent li .reward-bg:nth-child(2) {
    background-image: url('../image/section4/reward-30.png');
    left: 2.66rem;
}

.page4 .pager4-numContent li .reward-bg:nth-child(3) {
    background-image: url('../image/section4/reward-50.png');
    left: 4.8rem;
}

.page4 .pager4-numContent li .reward-bg:nth-child(4) {
    background-image: url('../image/section4/reward-100.png');
    left: 6.95rem;
}

.page4 .pager4-numContent li .reward-bg:nth-child(5) {
    background-image: url('../image/section4/reward-150.png');
    left: 8.98rem;
}

/* 进度文字 */
.page4 .pager4-numContent li .reward-text {
    width: 0.45rem;
    height: 0.24rem;
    background: url(../image/section4/reward-text-10.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 2.45rem;
    left: 0.5rem;
    /* filter: brightness(1) grayscale(1); */
}

.page4 .pager4-numContent li:nth-child(1) .reward-text {
    background-image: url(../image/section4/reward-text-10.png);
    width: 0.45rem;
}

.page4 .pager4-numContent li:nth-child(2) .reward-text {
    width: 0.46rem;
    height: 0.24rem;
    background-image: url(../image/section4/reward-text-30.png);
    /* left: 0.45rem; */
}

.page4 .pager4-numContent li:nth-child(3) .reward-text {
    width: 0.46rem;
    height: 0.24rem;
    background-image: url(../image/section4/reward-text-50.png);
    /* left: .4rem; */
}

.page4 .pager4-numContent li:nth-child(4) .reward-text {
    width: 0.55rem;
    height: 0.24rem;
    background-image: url(../image/section4/reward-text-100.png);
    /* left: 0.35rem; */
}

.page4 .pager4-numContent li:nth-child(5) .reward-text {
    width: 0.55rem;
    height: 0.24rem;
    background-image: url(../image/section4/reward-text-150.png);
    /* left: .35rem; */
}

.page4 .pager4-numContent li .reward-light{
   background-image: url(../image/section4/light-no.png);
   background-size: 100%;
   background-repeat: no-repeat;
   width: 0.16rem;
   height: 0.16rem;
   position: absolute;
   top: 2.21rem;
   left: 0.7rem;
}

.page4 .pager4-numContent li:nth-child(1) .reward-light{
    background-image: url(../image/section4/light-no.png);
    top: 2.21rem;
    left: 0.64rem;
}

.page4 .pager4-numContent li:nth-child(2) .reward-light{
    background-image: url(../image/section4/light-no.png);
    /* left: 0.53rem; */
}

.page4 .pager4-numContent li:nth-child(3) .reward-light{
    background-image: url(../image/section4/light-no.png);
}   

.page4 .pager4-numContent li:nth-child(4) .reward-light{
    background-image: url(../image/section4/light-no.png);
} 

.page4 .pager4-numContent li:nth-child(5) .reward-light{
    /* left: 0.64rem; */
    background-image: url(../image/section4/light-no.png);
} 

.page4 .pager4-numContent li .reward-text.active {
    filter: brightness(1) grayscale(0);
}

.page4 .pager4-numContent li .reward-light.active{
  background-image: url(../image/section4/light-active.png);
  width: 0.31rem;
  height: 0.32rem;
  top: 2.12rem;
  left: 0.59rem;
} 

.page4 .pager4-numContent li:nth-child(2) .reward-light.active{
  /* left: 0.35rem; */
} 

.page4 .pager4-numContent li:nth-child(5) .reward-light.active{
  left: 0.68rem;
} 

.page4 .pager4-numContent li .reward-y{
  background-image: url(../image/section4/reward-1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 1.11rem;
  height: 1.06rem;
  position: absolute;
  top: 0.0rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  filter: brightness(0.4);
}

.page4 .pager4-numContent li .reward-y.active{
  filter: brightness(1);
}

.page4 .pager4-numContent li:nth-child(1) .reward-y{
  top: 0.3rem;
  width: 1.64rem;
  height: 1.34rem;
  background-image: url(../image/section4/reward-1.png);
}

.page4 .pager4-numContent li:nth-child(2) .reward-y{
  top: 0.4rem;
  width: 1.75rem;
  height: 1.27rem;
  background-image: url(../image/section4/reward-2.png);
}

.page4 .pager4-numContent li:nth-child(3) .reward-y{
  top: 0.3rem;
  left: 55%;
  width: 1.64rem;
  height: 1.39rem;
  background-image: url(../image/section4/reward-3.png);
}

.page4 .pager4-numContent li:nth-child(4) .reward-y{
  top: 0.3rem;
  width: 1.53rem;
  height: 1.5rem;
  background-image: url(../image/section4/reward-4.png);
}

.page4 .pager4-numContent li:nth-child(5) .reward-y{
  top: 0.5rem;
  left: 62%;
  width: 1.75rem;
  height: 1.38rem;
  background-image: url(../image/section4/reward-5.png);
  background-size: 80%;
  z-index: 5;
}

.page4 .pager4-numContent li.active::after{
  content: '';
  width: 2.17rem;
  height: 2.27rem;
  background-image: url(../image/section4/lightran.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: -0.1rem;
  left: -0.3rem;
  z-index: -1;
}

.page4 .pager4-numContent li.active::before{
  content: '';
  width: 2.17rem;
  height: 2.27rem;
  background-image: url(../image/section4/lightbg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: -0.2rem;
  left: -0.15rem;
  z-index: 10;
}

/* .page4 .pager4-numContent li:nth-child(5).active::before{
  top: 0rem;
  left: 0.05rem;
} */

.page4 .pager4-numContent li:nth-child(5).active::after{
  top: 0.1rem;
  left: -.2rem;
}

/* 人数 */
.current-num {
  position: absolute;
  top: 5.1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.08rem 0.3rem;
  /* background: linear-gradient(120deg, #b7a06a 0%, #e6d3a2 40%, #fffbe6 100%); */
  /* border: 0.04rem solid #1a232b; */
  border-radius: 0.08rem;
  /* box-shadow: 0 0.04rem 0.16rem #0008, inset 0 0.01rem 0.16rem #fff3; */
  /* 可选：仿古纸张纹理
  background-image: url('your-texture.png'), linear-gradient(120deg, #b7a06a 0%, #e6d3a2 40%, #fffbe6 100%);
  background-blend-mode: multiply;
  */
}

.current-num span {
  margin-top: 1rem;
  background: linear-gradient(to right,  #b7a06a 0%, #fffbe6 50%, #b7a06a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-size: 0.6rem;
  padding: 0 0.05rem;
  font-family: 'Cinzel', serif;
  margin-bottom: 0.05rem;
  font-weight: 1000;
  letter-spacing: 0.04rem;
  overflow: hidden;
  /* text-shadow:
    0.02rem 0.02rem 0 #1a232b,
    -0.02rem 0.02rem 0 #1a232b,
    0.02rem -0.02rem 0 #1a232b,
    -0.02rem -0.02rem 0 #1a232b,
    0 0.04rem 0.08rem #0008; */
}


/* .current-num::before{
  content: '';
  width: 2.73rem;
  height: 0.63rem;
  background: url(../image/section4/current-left.png) no-repeat;
  background-size: 100%;
}

.current-num::after{
  content: '';
  width: 0.43rem;
  height: 0.63rem;
  background: url(../image/section4/current-right.png) no-repeat;
  background-size: 100%;
} */

.page4-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* 进度条 */
.numContent-bg {
  position: absolute;
  width: 6.8rem;
  height: .02rem;
  background-color: #000000;
  top: 2.66rem;
  left: 50%;
  margin-left: -3.4rem;
}

.progress-bar {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  background-color: #e6d4a3;
  transition: all .88s ease-in-out;
  width: 0%; /* 初始为0 */
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: .47rem; height: .33rem;
  background: url(../image/section4/light.png) no-repeat;
  background-size: 100%;
  right: -.235rem;
}

.current-num {
  width: 6.12rem;
  height: 6.07rem;
  background-image: url(../image/section4/cubg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: -0.1rem;
  top: -4.9rem;
  /* transform: translate(-50%, 0); */
  font-size: .32rem;
  color: #fffbe6;
  font-family: 'Cinzel', serif;
  letter-spacing: .02rem;
  justify-content: center;
}


/* 轮播图 */
.rewards-swiper {
  position: absolute;
  width: 6.57rem;
  height: 4.58rem;
  margin: 0 auto;
  top: 1.65rem;
}

.rewards-swiper::after {
  content: '';
  width: 6.57rem;
  height: 4.58rem;
  background-image: url(../image/section4/cubgli.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

.rewards-swiper .swiper-slide .rewards-bg.rewards-bg-1{
  width: 4.24rem;
  height: 3.32rem;
  background-image: url(../image/section4/r1.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.rewards-swiper .swiper-slide .rewards-bg.rewards-bg-2{
  width: 5.73rem;
  height: 3.09rem;
  margin-top: 0.2rem;
  background-image: url(../image/section4/r2.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.rewards-swiper .swiper-slide .rewards-bg.rewards-bg-3{
  width: 5.1rem;
  height: 3.27rem;
  margin-left: -1rem;
  margin-top: 0.2rem;
  background-image: url(../image/section4/r3.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.rewards-swiper .swiper-slide .rewards-bg.rewards-bg-4{
  width: 6.01rem;
  height: 3.94rem;
  background-image: url(../image/section4/r4.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.rewards-swiper .swiper-slide .rewards-bg.rewards-bg-5{
  width: 6.28rem;
  height: 3.63rem;
  background-image: url(../image/section4/r5.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.rewards-swiper .swiper-slide .rewards-bg.ani.animated{
  animation-name: zoomIn;
  animation-duration: 0.2s;
  animation-delay: 0.1s;
}


.pagination-swiper {
  width: 3.2rem;
  height: 2.34rem; /* 3个点的高度 */
  overflow: hidden;
  position: absolute; /* 根据你的布局调整 */
  right: 3.9rem;
  top: 4.2rem;
  transform: translateY(-50%);
}
.pagination-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.3s;
}
.pagination-swiper .swiper-slide img {
  width: .77rem;
  height: .78rem;
}
.pagination-swiper .swiper-slide-active img {
  content: url('../image/section4/swiper-active.png'); /* active用发光方块 */
}
.pagination-swiper .swiper-slide:not(.swiper-slide-active) img {
  width: .31rem;
  height: .31rem;
  content: url('../image/section4/swiper-no-active.png'); /* 其他用未选中 */
}

.rewards-swiper-button-prev,
.rewards-swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.rewards-swiper-button-prev {
  width: 0.42rem;
  height: 0.39rem;
  background-image: url(../image/section4/rewards-up.png);
  background-size: 100%;
  background-repeat: no-repeat;
  right: 5.275rem;
  top: 2.8rem;
  z-index: 15;
}

.rewards-swiper-button-next {
  width: 0.42rem;
  height: 0.39rem;
  background-image: url(../image/section4/rewards-down.png);
  background-size: 100%;
  background-repeat: no-repeat;
  right: 5.275rem;
  top: 5.6rem;
  z-index: 15;
}

.pagination-swiper .swiper-slide img {
  position: absolute;
}

.pagination-swiper .swiper-slide-active img{
  left: 0rem ;
}

.pagination-swiper .swiper-slide-prev, .pagination-swiper .swiper-slide-next{
  filter: brightness(0.7);
}

.pagination-swiper .swiper-slide-prev img{
  left: 0.17rem;
}


.pagination-swiper .swiper-slide-next img{
  left: 0.2rem;
}

.pagination-swiper .swiper-slide span.swiper-s10{
  width: 2.09rem;
  height: 0.37rem;
  background-image: url(../image/section4/s10.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.pagination-swiper .swiper-slide span.swiper-s30{
  width: 2.09rem;
  height: 0.37rem;
  background-image: url(../image/section4/s30.png);
  background-size: 100%;
  background-repeat: no-repeat;
}   

.pagination-swiper .swiper-slide span.swiper-s50{
  width: 2.09rem;
  height: 0.37rem;
  background-image: url(../image/section4/s50.png);
  background-size: 100%;
  background-repeat: no-repeat;
} 

.pagination-swiper .swiper-slide span.swiper-s100{
  width: 2.17rem;
  height: 0.37rem;
  background-image: url(../image/section4/s100.png);
  background-size: 100%;
  background-repeat: no-repeat;
} 

.pagination-swiper .swiper-slide span.swiper-s150{
  width: 2.17rem;
  height: 0.37rem;
  background-image: url(../image/section4/s150.png);
  background-size: 100%;
  background-repeat: no-repeat;
  } 

.pagination-swiper .swiper-slide-active span::before{
  content: '';
  width: 3.75rem;
  height: 0.83rem;
  background-image: url(../image/section4/pagination-actie.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: -0.15rem;
  top: -0.07rem;
  opacity: .58;
}


