/* 角色介紹 */
.hunter {
  width: 100%;
  height: 100%;
}

.yzj_hunter {
  width: 100%;
  position: relative;
  height: 12rem;
}

.swiper-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.hunterinfo {
  height: 100%;
}

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

/* 標題 */
.hunter-title{
  width: 3.23rem;
  height: .82rem;
  background: url(../image/section3/yzj_hunter_title.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 50%;
  top: 0.8rem;
  margin-left: -1.615rem;
  z-index: 2;
}
.hunter-title::before{
content: '';
width: 10rem;
height: 2.5rem;
background: url(../image/title-bg.png) no-repeat;
background-size: 100%;
position: absolute;
top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
}

.hunter-info .yzj_hunter-swiper {
  width: 10.26rem;
  height: 7.63rem;
  overflow: hidden !important;
  left: 0.66rem;
  top: 0.13rem;
}

/* 角色介绍 */
.hunter {
  width: 100%;
  height: 10.08rem;
  position: relative;
}

.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-info .swiper-slide .hunter-pic {
  position: absolute;
  width: 100%;
  height: 100%;
}


.hunter .hunter-info .swiper-slide div {
  position: absolute;
}

/* .hunter .hunter-info .swiper-slide .hunter-pic {
  left: 3.1rem;
  top: -0.2rem;
} */



.swiper-icon {
  width: 3.595rem;
  height: 2.05rem;
  /* position: absolute;
  left: 0.09rem;
  top: 4.8rem; */
  border-style: none;
}


.button {
  width: 0.81rem;
  height: 0.49rem;
  position: absolute;
  cursor: pointer;
  z-index: 12;
  top: 9.4rem;
}

.hunter-swiper-button-prev {
  width: 0.87rem;
  height: 0.50rem;
  position: absolute;
  left: 5.5rem;
  top: 7.85rem;
  background: url(../image/section3/swpier-prer.png) no-repeat;
  background-size: 100%;
}

.hunter-swiper-button-next {
  width: 0.87rem;
  height: 0.50rem;
  position: absolute;
  right: 5.6rem;
  top: 7.85rem;
  background: url(../image/section3/swiper-next.png) no-repeat;
  background-size: 100%;
}


.yzj_hunter-swiper .swiper-wrapper .swiper-slide .hunter-pic {
  opacity: 0;
  /* transition: all .5s ease-in-out; */
}

.yzj_hunter-swiper .swiper-wrapper .swiper-slide-active .hunter-pic {
  opacity: 1;
  /* transition: all .5s ease-in-out; */
}

.yzj_hunter-swiper .swiper-wrapper .swiper-slide .hunter-pic img {
  transform: translateX(-.6rem) scale(.95);
}

.yzj_hunter-swiper .swiper-wrapper .swiper-slide .hunter-pic img.dz {
  width: 6.67rem;
  height: 7.53rem;
  left: .5rem;
}

.yzj_hunter-swiper .swiper-wrapper .swiper-slide-active .hunter-pic img:not(.s3_op) {
  position: absolute;
  transition: all .5s ease-in-out;
  transform: translateX(0rem) scale(1);
}

.yzj_hunter-swiper .swiper-wrapper .swiper-slide-active .hunter-pic img.s3_op {
  position: absolute;
  opacity: 0;

}

.yzj_hunter-swiper .swiper-wrapper .swiper-slide {
  transform: translateZ(0);
}

.yzj_hunter-swiper .swiper-wrapper .swiper-slide div {
  position: absolute;
}





/* 性别切换男 */
.transformButton1 {
  width: 0.57rem;
  height: 0.42rem;
  background: url(../image/section3/transform1.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 5.45rem;
  left: 6.7rem;
  z-index: 10;
  cursor: pointer;
}

/* .swiper-slide div {
  width: 100%;
  height: 100%;
} */

.transformButton1.op {
  width: .57rem;
  height: .42rem;
  background: url(../image/section3/transformactive1.png) no-repeat;
  background-size: 100%;
  top: 5.45rem;
  left: 6.7rem;
  z-index: 10;
  pointer-events: none;
}

/* 性别切换女 */
.transformButton2 {
  width: 0.57rem;
  height: 0.42rem;
  background: url(../image/section3/transform2.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 4.92rem;
  left: 6.7rem;
  z-index: 10;
  cursor: pointer;
}

.transformButton2.op {
  width: .57rem;
  height: .42rem;
  background: url(../image/section3/transformactive2.png) no-repeat;
  background-size: 100%;
  top: 4.92rem;
  left: 6.7rem;
  z-index: 10;
  pointer-events: none;

}



/* 风色 */
.hunter_op_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 1.2rem;
  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: 2.22rem;
  left: 9.42rem;
}

.hunter_map {
  width: 2.28rem;
  height: 1.86rem;
  position: absolute;
  top: 6.7rem;
  left: 10.63rem;
}

/* 重炮手 角色1 */

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

/* 角色 */
.hunter-one .hunter_img {
  width: 7.46rem;
  height: 7.80rem;
  background: url(../image/section3/hunter_img_1.png) no-repeat;
  background-size: 100%;
  top: 2.3rem;
  left: 8.05rem;
  z-index: 5;
}

/* 文案 */
.hunter-one .hunter_text {
  width: 4.55rem;
  height: 4.32rem;
  background: url(../image/section3/hunter_text_1.png) no-repeat;
  background-size: 100%;
  top: 2.75rem;
  left: 4.25rem;
  z-index: 6;
}

/* 属性雷达图 */
.hunter-one .hunter_map {
  width: 4.05rem;
  height: 5.19rem;
  background: url(../image/section3/hunter_map_1.png) no-repeat;
  background-size: 100%;
  top: 6.02rem;
  left: 6.3rem;
  z-index: 6;
}



/* 魔术师  角色2 */

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

/* 角色 */
.hunter-two .hunter_img {
  width: 9.55rem;
  height: 8.46rem;
  background: url(../image/section3/hunter_img_2.png) no-repeat;
  background-size: 100%;
  top: 2.1rem;
  left: 6.95rem;
}

/* 文案 */
.hunter-two .hunter_text {
  width: 4.55rem;
  height: 4.91rem;
  background: url(../image/section3/hunter_text_2.png) no-repeat;
  background-size: 100%;
  top: 2.75rem;
  left: 4.25rem;
}

/* 属性雷达图 */
.hunter-two .hunter_map {
  width:3.9rem;
  height: 3.55rem;
  background: url(../image/section3/hunter_map_2.png) no-repeat;
  background-size: 100%;
  top: 7.42rem;
  left: 3.8rem;
  z-index: 6;
}

/* 龙骑士 角色3 */

/* 角色透明背景 */
.hunter-three .hunter_op_bg {
  width: 5.85rem;
  height: 10.02rem;
  background: url(../image/section3/hunter_op_3.png) no-repeat;
  background-size: 100%;
  top: 0.74rem;
  left: 0rem;
}

/* 角色 */
.hunter-three .hunter_img {
  width: 8.75rem;
  height: 9.41rem;
  background: url(../image/section3/hunter_img_3.png) no-repeat;
  background-size: 100%;
  top:0.4rem;
  left: 7.45rem;
}

/* 文案 */
.hunter-three .hunter_text {
  width: 4.55rem;
  height: 4.36rem;
  background: url(../image/section3/hunter_text_3.png) no-repeat;
  background-size: 100%;
  top: 2.75rem;
  left: 4.25rem;
}

/* 属性雷达图 */
.hunter-three .hunter_map {
  width: 4.63rem;
  height: 3.74rem;
  background: url(../image/section3/hunter_map_3.png) no-repeat;
  background-size: 100%;
  top: 5.25rem;
  left: 4.1rem;
}



/* 龙灵  角色4*/

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

/* 角色 */
.hunter-four .hunter_img {
  width: 6.62rem;
  height: 7.84rem;
  background: url(../image/section3/hunter_img_4.png) no-repeat;
  background-size: 100%;
  top: 1.5rem;
  left: 9.05rem;
}

/* 文案 */
.hunter-four .hunter_text {
  width: 4.55rem;
  height: 4.28rem;
  background: url(../image/section3/hunter_text_4.png) no-repeat;
  background-size: 100%;
  top: 2.75rem;
  left: 4.25rem;
}

/* 属性雷达图 */
.hunter-four .hunter_map {
  width: 4.40rem;
  height: 5.86rem;
  background: url(../image/section3/hunter_map_4.png) no-repeat;
  background-size: 100%;
  top: 5.55rem;
  left: 5.85rem;
}


/* 秘法师  角色5*/

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

/* 男剑士 角色6 */
.hunter-five .hunter_img {
  width: 6.88rem;

  height: 10.45rem;
  background: url(../image/section3/hunter_img_5.png) no-repeat;
  background-size: 100%;
  top: 0.8rem;
  left: 4rem;

}

/* 文案 */
.hunter-five .hunter_text {
  width: 5.31rem;
  height: 5.39rem;
  background: url(../image/section3/hunter_text_5.png) no-repeat;
  background-size: 100%;
  top: 3.7rem;
  left: 9.88rem;
}

/* 属性雷达图 */
.hunter-five .hunter_map {
  width: 5.6rem;
  height: 5.87rem;
  background: url(../image/section3/hunter_map_5.png) no-repeat;
  background-size: 100%;
  top: 6.18rem;
  left: 5.48rem;
}


/* 秘法师  角色6*/

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

/* 角色 */
.hunter-six .hunter_img {
  width: 6.44rem;
  height: 8.97rem;
  background: url(../image/section3/hunter_img_6.png) no-repeat;
  background-size: 100%;
  top: 2.2rem;
  left: 4.6rem;
}

/* 文案 */
.hunter-six .hunter_text {
  width: 4.96rem;
  height: 5.44rem;
  background: url(../image/section3/hunter_text_6.png) no-repeat;
  background-size: 100%;
  top: 3.64rem;
  left: 9.76rem;
}

/* 属性雷达图 */
.hunter-six .hunter_map {
  width: 6.82rem;
  height: 5.09rem;
  background: url(../image/section3/hunter_map_6.png) no-repeat;
  background-size: 100%;
  top: 6.3rem;
  left: 4.63rem;
}

.circle {
  position: absolute;
  width: 5.98rem;
  height: 5.98rem;
  background: url(../image/section3/circle.png) no-repeat;
  background-size: 100%;
  top: 3.6rem;
  left: 3.6rem;
  pointer-events: none;
}


.pagination-swiper-container {
  width: 4.91rem;
  height: 1.10rem;
  /* background-color: aqua; */
  position: absolute;
  top: 9.4rem;
  left: 9.8rem;
  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);
}

.play-voice-btn {
  width: .57rem;
  height: .57rem;
  background: url(../image/section3/play-voice-btn.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 4.72rem;
  left: 13.8rem;
  cursor: pointer;
}

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

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

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

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

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

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


.hunter-swiper-pagination {
  width: 3.6rem;
  height: .92rem;
  position: absolute;
  top: 7.65rem;
  left: 7.8rem;
  border: 0px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* pointer-events: none; */
}

/* .hunter-swiper-pagination .swiper-pagination-bullet-active::after {
  content: '';
  width: .56rem;
  height: .44rem;
  background: url(../image/section3/label-active.png) no-repeat;
  background-size: 100%;
  position: absolute;
  bottom: -.4rem;
  left: 50%;
  transform: translateX(-50%);
} */


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

.hunter-swiper-pagination .swiper-pagination-bullet {
  width: .76rem;
  height: .040rem;
  /* margin-right: 0.2rem; */
  /* position: absolute; */
  opacity: 1;
  filter: grayscale(100%);
}

.hunter-swiper-pagination .swiper-pagination-bullet-active {
  width: .88rem;
  height: .16rem;
  /* margin-right: 0.2rem; */
  /* position: absolute; */
  opacity: 1;
  filter: grayscale(0%);
}

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

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

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

.hunter-swiper-pagination .swiper-pagination-bullet-active:nth-child(2) {
  /* width: 1.21rem;
  height: .71rem;  */
  background: url(../image/section3/label-active.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: 0.42rem;
  left: -4.6rem; */
  border-radius: 0%;
  /* left: .92rem;
  top: 0.16rem; */
}


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

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

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

.hunter-swiper-pagination .swiper-pagination-bullet-active:nth-child(4) {
  /* width: .83rem;
  height: .85rem; */
  background: url(../image/section3/label-active.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: -0.55rem;
  left: -4.6rem; */
  border-radius: 0%;
  /* left: 3.4rem;
  top: 0.04rem; */
}



.hunter-swiper-pagination .swiper-pagination-bullet:nth-child(5) {
  background: url(../image/section3/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/section3/label-active.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/section3/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/section3/label-active.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: 0.42rem;
  left: -4.6rem; */
  border-radius: 0%;
}


/* 手动添加动画样式 */
.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: fadeInRight;
  animation-duration: 0.4s;
  animation-delay: 0.33s;
}

/* 头像按钮 */
.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
  }
}