/* 角色介绍 */
.hunter {
  background: url("../image/section4/bg.png") no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%;
  position: relative;
  /* overflow: hidden; */
  /* top: -1rem; */
}

.section4_height {
  height: 10.80rem;
  background: none;
}


.hunter .hunter-title {
  width: 4.37rem;
  height: 1.11rem;
  /* margin: 0 auto; */
  background: url(../image/section4/title_p4.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 1.15rem;
  /* left: 2.8rem; */
  left: 50%;
  transform: translateX(-50%);
}

.hunter .hunter-title.s4_over {
  background: url(../image/section4/title_p4_over.png) no-repeat;
  background-size: 100%;
}

.hunterinfo {
  height: 100%;
}

.hunter .hunter-info {
  width: 19.20rem;
  height: 10.80rem;
  /* position: absolute;
  background: url(../image/section4/hunter-info.png) no-repeat;
  background-size: 100%;
  top: 1.5rem;
  left: 4.8rem; */
  position: relative;
}


 /*.hunter .hunter-swiper-pc {
   padding-top: 0.4rem; 
} */

.hunter .hunter-swiper-pc .hunter-second-bg {
  width: 100%;
  height: 100%;
  position: absolute;
}

.hunter .hunter-swiper-pc .hunter-second-bg .swiper-slide{
  width: 100%;
  height: 100%;
}

.hunter .hunter-swiper-pc .hunter-second-bg .swiper-slide{
  /* display: none; */
  /* visibility: hidden; */
}

.hunter .hunter-swiper-pc .hunter-second-bg .swiper-slide.swiper-slide-active
/* ,.hunter .hunter-swiper-pc .hunter-second-bg .swiper-slide.swiper-slide-next */
{
  /* display: block; */
  /* visibility: visible; */
}

.hunter .hunter-info .swiper-slide .hunter-pic {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* .hunter-one {
  top: 0.02rem;
  left: -0.15rem;
}

.hunter-two {
  top: 0.26rem;
  left: -0.15rem;
}

.hunter-three {
  top: 0.24rem;
  left: -0.15rem;
}

.hunter-four {
  top: -0.51rem;
  left: -0.15rem;
} */

.swiper-icon {
  width: 1.25rem;
  height: 1.32rem;
  position: absolute;
  left: 11.35rem;
  top: 5.1rem;
}

.hunter .hunter-info .swiper-slide .hunter-right {
  width: 6.43rem;
  height: 5.31rem;
  right: 3.6rem;
  top: 0.2rem;
}

/* .hunter-info .swiper-container {
  overflow: visible !important;
  z-index: 11;
} */

.hunter-swiper-pagination {
  position: absolute;
  top: 9.55rem;
  left: 11.5rem;
  display: flex;
  align-items: center;
  /* pointer-events: none; */
  display: none;
}

.swiper-icon {
  width: 1.25rem;
  height: 1.38rem;
  position: absolute;
}

.hunter-swiper-pagination .swiper-pagination-bullet {
  width: .13rem;
  height: .12rem;
  margin-right: 0.2rem;
  opacity: 1;
  filter: grayscale(100%);
}

.hunter-swiper-pagination .swiper-pagination-bullet-active {
  width: .20rem;
  height: .20rem;
  margin-right: 0.2rem;
  opacity: 1;
  filter: grayscale(100%);
}

.hunter-swiper-pagination .swiper-pagination-bullet:nth-child(1) {
  background: url(../image/section4/label-1.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: -0.49rem;
  left: -5.49rem; */
  border-radius: 0%;
}

.hunter-swiper-pagination .swiper-pagination-bullet-active:nth-child(1) {
  background: url(../image/section4/label-active-1.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: -0.56rem;
  left: -5.55rem; */
  border-radius: 0%;
}

.hunter-swiper-pagination .swiper-pagination-bullet:nth-child(3) {
  background: url(../image/section4/label-1.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: 0.49rem;
  left: -5.5rem; */
  border-radius: 0%;
}

.hunter-swiper-pagination .swiper-pagination-bullet-active:nth-child(3) {
  background: url(../image/section4/label-active-1.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: 0.42rem;
  left: -5.55rem; */
  border-radius: 0%;
}

.hunter-swiper-pagination .swiper-pagination-bullet:nth-child(2) {
  background: url(../image/section4/label-1.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: -0.49rem;
  left: -4.57rem; */
  border-radius: 0%;
}

.hunter-swiper-pagination .swiper-pagination-bullet-active:nth-child(2) {
  background: url(../image/section4/label-active-1.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: -0.55rem;
  left: -4.6rem; */
  border-radius: 0%;
}

.hunter-swiper-pagination .swiper-pagination-bullet:nth-child(4) {
  background: url(../image/section4/label-1.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: 0.49rem;
  left: -4.57rem; */
  border-radius: 0%;
}

.hunter-swiper-pagination .swiper-pagination-bullet-active:nth-child(4) {
  background: url(../image/section4/label-active-1.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: 0.42rem;
  left: -4.6rem; */
  border-radius: 0%;
}

.hunter-swiper-pagination .swiper-pagination-bullet:nth-child(5) {
  background: url(../image/section4/label-1.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: 0.49rem;
  left: -4.57rem; */
  border-radius: 0%;
}

.hunter-swiper-pagination .swiper-pagination-bullet-active:nth-child(5) {
  background: url(../image/section4/label-active-1.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: 0.42rem;
  left: -4.6rem; */
  border-radius: 0%;
}

.hunter-swiper-pagination .swiper-pagination-bullet:nth-child(6) {
  background: url(../image/section4/label-1.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: 0.49rem;
  left: -4.57rem; */
  border-radius: 0%;
}

.hunter-swiper-pagination .swiper-pagination-bullet-active:nth-child(6) {
  background: url(../image/section4/label-active-1.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: 0.42rem;
  left: -4.6rem; */
  border-radius: 0%;
}

/* .hunter-swiper-pagination .swiper-pagination-bullet:nth-child(5) {
  background: url(../image/section4/spwer-page-5.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 2.88rem;
  width: 0.72rem;
  height: 0.73rem;
  left: 0.3rem;
} */

.hunter-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  filter: grayscale(0%);
}

.hunter .hunter-info .hunter-button {
  width: 0.91rem;
  height: 0.97rem;
  position: absolute;
  cursor: pointer;
  z-index: 110;
  top: 2.9rem;
}

.hunter-swiper-button-prev {
  background: url(../image/section4/prev.png) no-repeat;
  background-size: 100%;
  width: 0.39rem;
  height: 0.57rem;
  position: absolute;
  left: 9.4rem;
  top: 8.45rem;
  z-index: 11;
  cursor: pointer;
  opacity: 1;
  z-index: 11;
  
}

.hunter-swiper-button-next {
  right: 0.69rem;
  width: 0.39rem;
  height: 0.57rem;
  background: url(../image/section4/next.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 8.45rem;
  z-index: 11;
  cursor: pointer;
  opacity: 1;
  left: 14.8rem;
  z-index: 11;
}

/* .play-voice-btn::before {
  content: '';
  width: .7rem;
  height: .7rem;
  background: url(../image/section4/voice-btn.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 3.4rem;
  left: 13.5rem;
  animation: rotate-anti-clockwise 2.5s linear infinite;
} */

.play-voice-btn::after {
  content: '';
  width: .68rem;
  height: .56rem;
  background: url(../image/section4/voice-btn-go.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 3.9rem;
  left: 7.12rem;
}

/* pagination-swiper-container  角色头像 */

.pagination-swiper-container {
  width: 4.81rem;
  height: 1.54rem;
  /* background-color: aqua; */
  position: absolute;
  top: 8.1rem;
  left: 3.6rem;
  overflow: hidden;
}

.pagination-swiper-container .swiper-wrapper .swiper-slide {
  filter:grayscale(100);
  /* margin-right: .2rem; */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination-swiper-container .swiper-wrapper .swiper-slide-active {
  filter:grayscale(0);
}

/* 角色1 */
.pagination-swiper-container .swiper-wrapper .pagin-1 {
  width: 1.13rem;
  height: 1.54rem;
  background: url(../image/section4/active1.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .pagin-2 {
  width: 1.13rem;
  height: 1.54rem;
  background: url(../image/section4/active2.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .pagin-3 {
  width: 1.13rem;
  height: 1.54rem;
  background: url(../image/section4/active3.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .pagin-4 {
  width: 1.13rem;
  height: 1.54rem;
  background: url(../image/section4/active4.png) no-repeat;
  background-size: 100%;
}

/* .pagination-swiper-container .swiper-wrapper .pagin-5 {
  width: 1.12rem;
  height: 1.12rem;
  background: url(../image/section4/active5.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .pagin-6 {
  width: 1.13rem;
  height: 1.12rem;
  background: url(../image/section4/active6.png) no-repeat;
  background-size: 100%;
} */


.gift {
  width: 100%;
  bottom: -0.7rem;
  position: absolute;
}

.gift .gift-title {
  width: 11.23rem;
  height: 1.42rem;
  background: url(../image/hunter/title2.png) no-repeat;
  background-size: 100%;
  margin: 0 auto;
}

.gift .gift-img {
  width: 12.49rem;
  height: 8.21rem;
  background: url(../image/hunter/gift.png) no-repeat;
  background-size: 100%;
  margin: 0.7rem auto 0;
}

.gift .gift-btn {
  display: block;
  position: absolute;
  cursor: pointer;
  width: 5rem;
  height: 1.22rem;
  background: url(../image/hunter/btn-gift.png) no-repeat;
  background-size: 100%;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
}

.duel-box-tab {
  display: flex;
  margin-top: 0.2rem;
  justify-content: center;
}

.shopping-tab1 {
  width: 2.44rem;
  height: 0.7rem;
  background: url("../image/section4/tab1.png") no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.shopping-tab-active {
  width: 2.44rem;
  height: 0.7rem;
  background: url("../image/section4/tab-0-active.png") no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.shopping-tab.shopping-tab-active {
  width: 2.44rem;
  height: 0.7rem;
  background: url("../image/section4/tab-1-active.png") no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.shopping-tab1.shopping-tab-active {
  width: 2.44rem;
  height: 0.7rem;
  background: url("../image/section4/tab-0-active.png") no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.shopping-tab2 {
  width: 2.44rem;
  height: 0.7rem;
  background: url("../image/section4/tab-2.png") no-repeat;
  background-size: 100%;
  cursor: pointer;
  margin-left: 0.2rem;
}

.Stone {
  width: 7rem;
  height: 2rem;
  background: url("../image/section4/Stone.png") no-repeat;
  background-size: 100%;
  position: absolute;
  top: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 250ms, opacity 250ms ease-in-out;
  position: absolute;
  z-index: -1;
}

.world .intro-pic {
  position: absolute;
  top: 0.5rem;
}

.intro-swiper-button-prev {
  width: 0.87rem;
  height: 0.84rem;
  position: absolute;
  top: 2.5rem;
  left: -0.4rem;
  background: url("../image/section7/world-btn-prev.png") no-repeat;
  background-size: 100%;
  z-index: 1;
  cursor: pointer;
}

.intro-swiper-button-next {
  width: 0.87rem;
  height: 0.84rem;
  position: absolute;
  top: 2.5rem;
  right: -0.4rem;
  background: url("../image/section7/world-btn-next.png") no-repeat;
  background-size: 100%;
  z-index: 1;
  cursor: pointer;
}

.hunter .btn-xia {
  bottom: 0.7rem;
}

.image-one {
  width: 8.78rem;
  height: 4.82rem;
}

.image-two {
  width: 8.98rem;
  height: 5.13rem;
}

.image-three {
  width: 9.12rem;
  height: 4.59rem;
}

.image-four {
  width: 9.33rem;
  height: 5.34rem;
}

/* 整体板块样式 */
.hunter_op_bg {
  width: 19.20rem;
  height: 10.80rem;
  position: absolute;
  top: 0rem;
  left: 0rem;
  pointer-events: none;
}

.hunter_img {
  width: 8.82rem;
  height: 6.91rem;
  position: absolute;
  top: 1.3rem;
  left: 0.8rem;
}

.hunter_text {
  width: 5.69rem;
  height: 4.17rem;
  position: absolute;
  top: 3.05rem;
  left: 4.1rem;
}

.hunter_map {
  width: 2.28rem;
  height: 1.86rem;
  position: absolute;
  top: 5.7rem;
  left: 9.73rem;
}

/* 重炮手 角色1 */

/* 角色透明背景 */
.hunter-one .hunter_op_bg {
  width: 6.57rem;
  height: 9.85rem;
  background: url(../image/section4/hunter_op_1.png) no-repeat;
  background-size: 100%;
  top: .4rem;
}

/* 角色 */
.hunter-one .hunter_img {
  width: 10.03rem;
  height: 11.21rem;
  background: url(../image/section4/hunter_img_1.png) no-repeat;
  background-size: 100%;
  top: 1.2rem;
  left: 7.8rem;
}

/* 文案 */
.hunter-one .hunter_text {
  width: 4.60rem;
  height: 4.71rem;
  background: url(../image/section4/hunter_text_1.png) no-repeat;
  background-size: 100%;
}

/* 属性雷达图 */
/* .hunter-one .hunter_map {
  background: url(../image/section4/hunter_map_1.png) no-repeat;
  background-size: 100%;
} */


/* 龙骑士 角色2 */

/* 角色透明背景 */
.hunter-two .hunter_op_bg {
  width: 9.30rem;
  height: 9.19rem;
  background: url(../image/section4/hunter_op_2.png) no-repeat;
  background-size: 100%;
}

/* 角色 */
.hunter-two .hunter_img {
  width: 10.91rem;
  height: 10.48rem;
  background: url(../image/section4/hunter_img_2.png) no-repeat;
  background-size: 100%;
  top: 1.2rem;
  left: 7.8rem;
}

/* 文案 */
.hunter-two .hunter_text {
  width: 4.29rem;
  height: 4.75rem;
  background: url(../image/section4/hunter_text_2.png) no-repeat;
  background-size: 100%;
}

/* 属性雷达图 */
/* .hunter-three .hunter_map {
  background: url(../image/section4/hunter_map_2.png) no-repeat;
  background-size: 100%;
} */


/* 魔术师  角色3 */

/* 角色透明背景 */
.hunter-three .hunter_op_bg {
  width: 10.32rem;
  height: 10.17rem;
  background: url(../image/section4/hunter_op_3.png) no-repeat;
  background-size: 100%;
  top: .35rem;
}

/* 角色 */
.hunter-three .hunter_img {
  width: 10.04rem;
  height: 9.89rem;
  background: url(../image/section4/hunter_img_3.png) no-repeat;
  background-size: 100%;
  top: 1.2rem;
  left: 7.8rem;
}

/* 文案 */
.hunter-three .hunter_text {
  width: 4.69rem;
  height: 4.81rem;
  background: url(../image/section4/hunter_text_3.png) no-repeat;
  background-size: 100%;
}

/* 属性雷达图 */
/* .hunter-two .hunter_map {
  background: url(../image/section4/hunter_map_3.png) no-repeat;
  background-size: 100%;
} */







/* 龙灵  角色4*/

/* 角色透明背景 */
.hunter-four .hunter_op_bg {
  width: 7.07rem;
  height: 9.61rem;
  background: url(../image/section4/hunter_op_4.png) no-repeat;
  background-size: 100%;
  top: .35rem;
}

/* 角色 */
.hunter-four .hunter_img {
  width: 9.74rem;
  height: 10.89rem;
  background: url(../image/section4/hunter_img_4.png) no-repeat;
  background-size: 100%;
  top: 1.2rem;
  left: 7.8rem;
}

/* 文案 */
.hunter-four .hunter_text {
  width: 4.28rem;
  height: 4.88rem;
  background: url(../image/section4/hunter_text_4.png) no-repeat;
  background-size: 100%;
}

/* 属性雷达图 */
/* .hunter-four .hunter_map {
  background: url(../image/section4/hunter_map_4.png) no-repeat;
  background-size: 100%;
} */


/* 秘法师  角色5*/

/* 角色透明背景 */
.hunter-six .hunter_op_bg {
  width: 5.88rem;
  height: 10.02rem;
  background: url(../image/section4/hunter_op_6.png) no-repeat;
  background-size: 100%;
  top: -.5rem;
}

/* 角色 */
.hunter-six .hunter_img {
  width: 7.71rem;
  height: 9.12rem;
  background: url(../image/section4/hunter_img_6.png) no-repeat;
  background-size: 100%;
  top: 2.6rem;
  left: 8.8rem;
}

/* 文案 */
.hunter-six .hunter_text {
  width: 4.25rem;
  height: 5.83rem;
  background: url(../image/section4/hunter_text_6.png) no-repeat;
  background-size: 100%;
}


/* 秘法师  角色5*/

/* 角色透明背景 */
.hunter-five .hunter_op_bg {
  width: 8.02rem;
  height: 9.53rem;
  background: url(../image/section4/hunter_op_5.png) no-repeat;
  background-size: 100%;
  top: -.35rem;
}

/* 男剑士 角色6 */
.hunter-five .hunter_img {
  width: 8.99rem;
  height: 9.14rem;
  background: url(../image/section4/hunter_img_5.png) no-repeat;
  background-size: 100%;
  top: 2.55rem;
  left: 7.95rem;
}

/* 文案 */
.hunter-five .hunter_text {
  width: 4.25rem;
  height: 5.82rem;
  background: url(../image/section4/hunter_text_5.png) no-repeat;
  background-size: 100%;
}



/* 手动添加动画样式 */
.hunter_op_bg.animated.ani {
  animation-name: fadeInLeft;
  animation-duration: 0.4s;
  animation-delay: 0.3s;
}

.hunter_img.animated.ani {
  animation-name: fadeInRight;
  animation-duration: 0.4s;
  animation-delay: 0.25s;
}

.hunter_text.animated.ani {
  animation-name: fadeInLeft;
  animation-duration: 0.4s;
  animation-delay: 0.25s;
}

.play-voice-btn.animated.ani {
  animation-name: fadeIn;
  animation-duration: 0.4s;
  animation-delay: 0.25s;
}

/* .hunter_map.animated.ani {
  animation-name: fadeInUp;
  animation-duration: 0.4s;
  animation-delay: 0.15s;
} */

/* 头像按钮 */
.hunter-info .swiper-pagination.anibtn {
  animation-name: fadeIn_ben;
  animation-duration: 1.5s;
  /* animation-delay: 0.2s; */
}

.hunter-info .swiper-pagination.anibtn.long-duration {
  animation-duration: 2s; /* 当 activeIndex 为 2 时的值 */
}

@keyframes fadeIn_ben {
  0% {
      opacity: 0
  }

  to {
      opacity: 1
  }
}


.circle {
  position: absolute;
  width: 6.10rem;
  height: 6.09rem;
  background: url(../image/section4/circle.png) no-repeat;
  background-size: 100%;
  top: 3.1rem;
  left: 9.4rem;
  pointer-events: none;
}