.hunter {
  position: relative;
  height: 1363px;
  top: 145px;
  /* overflow: hidden; */
}

.hunter-over {
  top: 405px;
  height: 1550px;
}

.hunter-title {
  width: 377px;
  height: 86px;
  background: url("../image/section4/title_p4.png") no-repeat;
  background-size: 100%;
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.hunter .hunter-info {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background: url(../image/section4/hunter-info.png) no-repeat; */
  background-size: 100%;
  /* top: 10px; */
  /* left: 10px; */
}

.hunter-info .swiper-container {
  /* z-index: 11; */
}

.hunter .hunter-swiper-pc .hunter-second-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(../image/section4/roleBg.png) no-repeat;
  background-size: 100%;
}

.hunterinfo {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-size: 100%;
  position: relative;
  /* margin-top: -50px; */
}

.hunter-pic {
  width: 720px;
  margin: auto;
}

.hunter-swiper-button-prev {
  position: absolute;
  width: 44px;
  height: 48px;
  background: url(../image/section4/prev.png) no-repeat;
  background-size: 100%;
  left: 10px;
  bottom: 265px;
  z-index: 11;
  cursor: pointer;
}

.hunter-swiper-button-next {
  position: absolute;
  width: 44px;
  height: 48px;
  background: url(../image/section4/next.png) no-repeat;
  background-size: 100%;
  right: 10px;
  bottom: 265px;
  z-index: 11;
  cursor: pointer;
}

 .hunter-swiper-button-prev-over {
  bottom: 443px;
}

 .hunter-swiper-button-next-over {
  bottom: 443px;
}

.hunter .hunter-btn-line {
  width: 559px;
  height: 2px;
  background: url(../image/section4/btn-line.png) no-repeat;
  background-size: 100%;
  position: absolute;
  bottom: 250px;
  left: 80px;
  z-index: 5;
}
/* 角色 */
.hunter .hunter-info .swiper-slide .hunter-pic {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateZ(0);
}


/* 整体板块样式 */
/* .hunter_chicken {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0px;
  right: 0px;
  pointer-events: none;
} */

.hunter_op_bg {
  position: absolute;
}

.hunter_chicken {
  position: absolute;
  z-index: 1;
}

.hunter_img {
  width: 720px;
  height: 871px;
  position: absolute;
  z-index: 2;
}

.hunter_text {
  width: 488px;
  height: 395px;
  position: absolute;
  z-index: 3;
  bottom: 425px;
}

.hunter_text.over {
  bottom: 570px;
}

.hunter_map {
  width: 281px;
  height: 290px;
  position: absolute;
  z-index: 2;
}


/* 重炮手 角色1 */

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

/* 角色 */
.hunter-one .hunter_img {
  width: 720px;
  height: 999px;
  background: url(../image/section4/hunter_img_1.png) no-repeat;
  background-size: 100%;
  top: 60px;
  left: 0px;
}

/* 文案 */
.hunter-one .hunter_text {
  width: 603px;
  height: 238px;
  background: url(../image/section4/hunter_text_1.png) no-repeat;
  background-size: 100%;
  left:60px;
  /* bottom: 425px; */
}

.hunter-one .hunter_finger {
  position: absolute;
  width: 89px;
  height: 98px;
  background: url(../image/section4/hunter_finger.png) no-repeat;
  background-size: 100%;
  left: 315px;
  top: 340px;
  z-index: 10;
  transform-origin: center bottom;
  animation: hunter-finger-breath 1.2s ease-in-out infinite;
}

@keyframes hunter-finger-breath {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}


.hunter-one .hunter_box1 {
  width: 720px;
  height: 753px;
  background: url(../image/section4/hunter_box1.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0px;
  top: 60px;
  z-index: 11;
}

.hunter-one .hunter_box1-close {
  width: 57px;
  height: 58px;
  background: url(../image/section4/hunter_box-close.png) no-repeat;
  background-size: 100%;
  position: absolute;
  right: 0px;
  top: 25px;
  z-index: 11;
}

.hunter-one .hunter_box2 {
  width: 720px;
  height: 753px;
  background: url(../image/section4/hunter_box2.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0px;
  top: 60px;
  z-index: 11;
}

.hunter-one .hunter_box2-close {
  width: 57px;
  height: 58px;
  background: url(../image/section4/hunter_box-close2.png) no-repeat;
  background-size: 100%;
  position: absolute;
  right: 0px;
  top: 25px;
  z-index: 11;
}

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


/* 魔术师  角色2 */

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

/* 角色 */
.hunter-two .hunter_img {
  width: 720px;
  height: 1323px;
  background: url(../image/section4/hunter_img_2.png) no-repeat;
  background-size: 100%;
  top: 60px;
  left: -10px
}

/* 文案 */
.hunter-two .hunter_text {
  width: 604px;
  height: 230px;
  background: url(../image/section4/hunter_text_2.png) no-repeat;
  background-size: 100%;
  left:63px;
  /* bottom: 425px; */
}

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


/* 龙骑士 角色3 */

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

/* 角色 */
.hunter-three .hunter_img {
  width: 720px;
  height: 1323px;
  background: url(../image/section4/hunter_img_3.png) no-repeat;
  background-size: 100%;
  top: 60px;
  left: -10px
}

/* 文案 */
.hunter-three .hunter_text {
  width: 606px;
  height: 236px;
  background: url(../image/section4/hunter_text_3.png) no-repeat;
  background-size: 100%;
  left:60px;
  /* bottom: 425px; */
}

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




/* 龙灵  角色4*/

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

/* 角色 */
.hunter-four .hunter_img {
  width: 612px;
  height: 1130px;
  background: url(../image/section4/hunter_img_4.png) no-repeat;
  background-size: 100%;
  top: 60px;
  left: 40px;
}

/* 文案 */
.hunter-four .hunter_text {
  width: 604px;
  height: 237px;
  background: url(../image/section4/hunter_text_4.png) no-repeat;
  background-size: 100%;
  left:60px;
  /* bottom: 425px; */
}

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


/* 秘法师  角色5*/

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

.hunter-five .hunter_img {
  width: 720px;
  height: 1073px;
  background: url(../image/section4/hunter_img_5.png) no-repeat;
  background-size: 100%;
  top: 21px;
  /* left: 150px; */
}

/* 文案 */
.hunter-five .hunter_text {
  width: 602px;
  height: 189px;
  background: url(../image/section4/hunter_text_5.png) no-repeat;
  background-size: 100%;
  left: 60px;
  /* bottom: 475px;  */
}

/* 秘法师  角色6*/

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

/* 角色 */
.hunter-six .hunter_img {
  width: 720px;
  height: 845px;
  background: url(../image/section4/hunter_img_6.png) no-repeat;
  background-size: 100%;
  top: 60px;
  left: 0px;
}

/* 文案 */
.hunter-six .hunter_text {
  width: 604px;
  height: 224px;
  background: url(../image/section4/hunter_text_6.png) no-repeat;
  background-size: 100%;
  left:60px;
  /* bottom: 425px; */
}

.play-voice-btn {
  position: relative;
  z-index: 5 !important;
  top: 700px;
  left: 340px
}

.hunter-one .play-voice-btn,
.hunter-six .play-voice-btn{
  top: 700.45px;
}

.hunter-two .play-voice-btn,
.hunter-three .play-voice-btn 
{
  top: 706.5px;
  left: 345px;
}

.hunter-five .play-voice-btn {
  top: 704.2px;
}

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

/* .play-voice-btn::after {
  content: '';
  width: 57px;
  height: 57px;
  background: url(../image/section4/voice-btn-go.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 315px;
  left: 1.6px;
} */

.hunter-two .play-voice-btn::before {
  top: 230px;
}

.hunter-three .play-voice-btn::before {
  top: 225px;
}

.hunter-five .play-voice-btn::before {
  top: 230px;
}


.hunter-six .play-voice-btn::before {
  left: 4px;
}


@keyframes rotate-clockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* pagination-swiper-container  角色头像 */
.pagination-swiper-container {
  /* 4 * 163px = 652px，刚好只露出4个 */
  width: 600px;
  height: 219px;
  position: absolute;
  top: 965px;
  left: 60px;
  overflow: hidden;
}

.pagination-swiper-container .swiper-wrapper .swiper-slide {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

/* 
.pagination-swiper-container {
  width: 680px;
  height: 219px;
  position: absolute;
  top: 1090px;
  left: 20px;
  overflow: hidden;
}

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

/* 角色1-6 */
.pagination-swiper-container .swiper-wrapper .pagin-1 {
  width: 144px;
  height: 145px;
  background: url(../image/section4/label-1.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .pagin-2 {
  width: 144px;
  height: 145px;
  background: url(../image/section4/label-2.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .pagin-3 {
  width: 144px;
  height: 145px;
  background: url(../image/section4/label-3.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .pagin-4 {
  width: 144px;
  height: 145px;
  background: url(../image/section4/label-4.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .pagin-5 {
  width: 144px;
  height: 145px;
  background: url(../image/section4/label-5.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .pagin-6 {
  width: 144px;
  height: 145px;
  background: url(../image/section4/label-6.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .swiper-slide-duplicate-active .pagin-1,
.pagination-swiper-container .swiper-wrapper .swiper-slide-active .pagin-1 {
  background: url(../image/section4/label-active-1.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .swiper-slide-duplicate-active .pagin-2,
.pagination-swiper-container .swiper-wrapper .swiper-slide-active .pagin-2 {
  background: url(../image/section4/label-active-2.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .swiper-slide-duplicate-active .pagin-3,
.pagination-swiper-container .swiper-wrapper .swiper-slide-active .pagin-3 {
  background: url(../image/section4/label-active-3.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .swiper-slide-duplicate-active .pagin-4,
.pagination-swiper-container .swiper-wrapper .swiper-slide-active .pagin-4 {
  background: url(../image/section4/label-active-4.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .swiper-slide-duplicate-active .pagin-5,
.pagination-swiper-container .swiper-wrapper .swiper-slide-active .pagin-5 {
  background: url(../image/section4/label-active-5.png) no-repeat;
  background-size: 100%;
}

.pagination-swiper-container .swiper-wrapper .swiper-slide-duplicate-active .pagin-6,
.pagination-swiper-container .swiper-wrapper .swiper-slide-active .pagin-6 {
  background: url(../image/section4/label-active-6.png) no-repeat;
  background-size: 100%;
}



/* 豆点 */

.hunter-swiper-pagination {
  width: 720px;
  height: 145px;
  position: absolute;
  top: 1000px;
  left: 280px;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 1;
  /* pointer-events: none; */
  /* display: none; */
}

.hunter-swiper-pagination .swiper-pagination-bullet {
  width: 144px;
  height: 145px;
  opacity: 1;
  filter: grayscale(100%);
  position: relative;
  border-radius: 0%;
  flex-shrink: 0;
}

.hunter-swiper-pagination .swiper-pagination-bullet-active {
  width: 144px;
  height: 145px;
  opacity: 1;
  filter: grayscale(0);
  position: relative;
  border-radius: 0%;
  flex-shrink: 0;
}

.hunter-swiper-pagination .swiper-pagination-bullet:nth-child(1) {
  background: url(../image/section4/label-1.png) no-repeat;
  background-size: 100%;
}

.hunter-swiper-pagination .swiper-pagination-bullet-active:nth-child(1) {
  background: url(../image/section4/label-active-1.png) no-repeat;
  background-size: 100%;
}

.hunter-swiper-pagination .swiper-pagination-bullet:nth-child(2) {
  background: url(../image/section4/label-2.png) no-repeat;
  background-size: 100%;
}

.hunter-swiper-pagination .swiper-pagination-bullet-active:nth-child(2) {
  background: url(../image/section4/label-active-2.png) no-repeat;
  background-size: 100%;
}

.hunter-swiper-pagination .swiper-pagination-bullet:nth-child(3) {
  background: url(../image/section4/label-3.png) no-repeat;
  background-size: 100%;
}

.hunter-swiper-pagination .swiper-pagination-bullet-active:nth-child(3) {
  background: url(../image/section4/label-active-3.png) no-repeat;
  background-size: 100%;
}

.hunter-swiper-pagination .swiper-pagination-bullet:nth-child(4) {
  background: url(../image/section4/label-4.png) no-repeat;
  background-size: 100%;
}

.hunter-swiper-pagination .swiper-pagination-bullet-active:nth-child(4) {
  background: url(../image/section4/label-active-4.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: fadeInRight;
  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
  }
}