/* 角色介紹 */
.yzj_hunter {
  width: 100%;
  height: 1215px;
  position: relative;
  top: -25px;
}

.role-info {
  position: relative;
  width: 100%;
  height: 964px;
  top: 25px;
}

/* 標題 */
.hunter-title{
  width: 720px;
  height: 185px;
  background: url(../image/section3/title_p4.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 50%;
  top: 150px;
  margin-left: -350.5px;
  z-index: 2;
}

/* .hunter-title::before {
  content: '';
  width: 720px;
  height: 250px;
  background: url(../image/title-bg.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: -70px;
  left: 50%;
  transform: translateX(-50%);
} */

.role-info .hunter-swiper-warp {
  width: 1448px;
  height: 859px;
  overflow: hidden !important;
  margin-left: 0;
  margin-right: 0;
}

.role-info .swiper-wrapper .swiper-slide {
  display: flex;
  justify-content: start !important;
  align-items: start !important;
  /* font-size: 80px; */
  font-weight: bold;
  color: #000;
  background-size: cover;
}

/* 动画小窗 */
.swiper-icon {
  width: 302px;
  height: 170px;
  /* position: absolute;
  left: 35px;
  top: 490px; */
  border-style: none;
}


/* 设置swiper使用预加载时 图片路径为空出现的边框问题 */
.swiper-icon[src=""],
.swiper-icon:not([src]) {
  opacity: 0;
}

/* 点击头像 */

.hunter-swiper-pagination {
  width: 450px;
  position: absolute;
  top: 900px;
  left: 53px;
}

.hunter-swiper-pagination .swiper-pagination-bullet {
  /* width: 2.5rem;
  height: 1.6rem; */
  /* margin-right: 0.4rem; */
  /* width: 0.85rem;
  height: 0.73rem; */
  opacity: 1;
  border-radius: 0% !important;
}

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

/* 设置背景设置 */
.hunter-one,
.hunter-two,
.hunter-three,
.hunter-four {
  width: 720px;
  height: 953px;
  /* background: url(../image/section3/dzbg.png) no-repeat;
  background-size: 100%; */
  z-index: 10;
}

.hunter-one .picbg,
.hunter-two .picbg,
.hunter-three .picbg,
.hunter-four .picbg {
  width: 720px;
  height: 953px;
  background: url(../image/section3/dzbg.png) no-repeat;
  background-size: 100%;
  z-index: 10;
}

.hunter-two .picbg {
  background: url(../image/section3/yhbg.png) no-repeat;
  background-size: 100%;
}

.hunter-three .picbg {
  background: url(../image/section3/fsbg.png) no-repeat;
  background-size: 100%;
}

.hunter-four .picbg {
  background: url(../image/section3/qmbg.png) no-repeat;

  background-size: 100%;
}

.yzj_hunter-swiper .swiper-wrapper .swiper-slide-active .hunter-pic img {
  width: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  z-index: 0;
}

.yzj_hunter-swiper .swiper-wrapper .swiper-slide-active .hunter-pic img.dz {
  height: 930px;
}

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

.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-active .hunter-pic {
  opacity: 1;
  /* transition: all .5s ease-in-out; */
}

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

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

/* .hunter-apng {
  width: 309px;
  height: 177px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../image/section3/video-bg.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 375px;
  top: 643px
}

.transformButton1 {
  width: 66px;
  height: 76px;
  background: url(../image/section3/transform1.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 830px;
  left: 45px;
  z-index: 10;
  cursor: pointer;
}

.transformButton1.op {
  width: 66px;
  height: 76px;
  background: url(../image/section3/transformactive1.png) no-repeat;
  background-size: 100%;
  top: 830px;
  left: 45px;
  z-index: 10;
  pointer-events: none;
}

.transformButton2 {
  width: 66px;
  height: 76px;
  background: url(../image/section3/transform2.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 830px;
  left: 125px;
  z-index: 10;
  cursor: pointer;
}

.transformButton2.op {
  width: 66px;
  height: 76px;
  background: url(../image/section3/transformactive2.png) no-repeat;
  background-size: 100%;
  top: 830px;
  left: 125px;
  z-index: 10;
  pointer-events: none;

} */

.wxian {
  width: 720px;
  height: 1131px;
  background: url(../image/section3/wxian.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 39%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


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

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

/* 角色 */
.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;
  top: 380px !important;
  display: none;
}

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

.hunter_img {
  width: 720px;
  height: 828px;
  position: absolute;
  top: 310px !important;
  z-index: 2;
}

.hunter_text {
  width: 242px;
  height: 215px;
  position: absolute;
  z-index: 3;
  bottom: 260px !important;
}

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


/* 重炮手 角色1 */

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

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

/* 文案 */
.hunter-one .hunter_text {
  width: 260px;
  height: 200px;
  background: url(../image/section3/hunter_text_1.png) no-repeat;
  background-size: 100%;
  right: 5%;
  margin-left: -315px;
}

/* 属性雷达图 */
.hunter-one .hunter_map {
  width: 302px;
  height: 382px;
  background: url(../image/section3/hunter_map_1.png) no-repeat;
  background-size: 100%;
  top: 580px;
  left: 60px;
}


/* 魔术师  角色2 */

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

/* 角色 */
.hunter-two .hunter_img {
  width: 687px;
  height: 828px;
  background: url(../image/section3/hunter_img_2.png) no-repeat;
  background-size: 100%;
  top: 310px;
  left: 26px;
}

/* 文案 */
.hunter-two .hunter_text {
  width: 260px;
  height: 200px;
  background: url(../image/section3/hunter_text_2.png) no-repeat;
  background-size: 100%;
  right: 5%;
  margin-left: -315px;
  /* bottom: 330px; */
}

/* 属性雷达图 */
.hunter-two .hunter_map {
  background: url(../image/section3/hunter_map_2.png) no-repeat;
  background-size: 100%;
  width: 330px;
  height: 302px;
  top: 666px;
  left: 40px;
}


/* 龙骑士 角色3 */

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

/* 角色 */
.hunter-three .hunter_img {
  width: 689px;
  height: 812px;
  background: url(../image/section3/hunter_img_3.png) no-repeat;
  background-size: 100%;
  top: 310px;
  left: 32px;
}

/* 文案 */
.hunter-three .hunter_text {
  width: 260px;
  height: 200px;
  background: url(../image/section3/hunter_text_3.png) no-repeat;
  background-size: 100%;
  right: 5%;
  margin-left: -315px;
  /* bottom: 330px; */
}

/* 属性雷达图 */
.hunter-three .hunter_map {
  background: url(../image/section3/hunter_map_3.png) no-repeat;
  background-size: 100%;
  width: 385px;
  height: 313px;
  top: 660px;
  left: 65px;
}

/* 秘法师  角色5*/

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

.hunter-four .hunter_img {
  width: 720px;
  height: 954px;
  background: url(../image/section3/hunter_img_4.png) no-repeat;
  background-size: 100%;
  top: 310px;
  left: 0px;
}

/* 文案 */
.hunter-four .hunter_text {
  width: 260px;
  height: 200px;
  background: url(../image/section3/hunter_text_4.png) no-repeat;
  background-size: 100%;
  right: 5%;
  margin-left: -315px;
  /* bottom: 330px; */
}
  
/* 属性雷达图 */
.hunter-four .hunter_map {
  background: url(../image/section3/hunter_map_4.png) no-repeat;
  background-size: 100%;
  width: 345px;
  height: 456px;
  top: 500px;
  left: 26px;
}


/* 龙灵  角色5*/

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

/* 角色 */
.hunter-five .hunter_img {
  width: 720px;
  height: 933px;
  background: url(../image/section3/hunter_img_5.png) no-repeat;
  background-size: 100%;
  top: 310px;
  left: 0px;
}

/* 文案 */
.hunter-five .hunter_text {
  width: 616px;
  height: 611px;
  background: url(../image/section3/hunter_text_5.png) no-repeat;
  background-size: 100%;
  left: 40px;
  bottom: 340px;
}

/* 属性雷达图 */
.hunter-five .hunter_map {
  background: url(../image/section3/hunter_map_5.png) no-repeat;
  background-size: 100%;
  width: 399px;
  height: 428px;
  top: 563px;
  left: 5px;
}


/* 秘法师  角色6*/

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

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

/* 文案 */
.hunter-six .hunter_text {
  width: 610px;
  height: 611px;
  background: url(../image/section3/hunter_text_6.png) no-repeat;
  background-size: 100%;
  left: 35px;
}

/* 属性雷达图 */
.hunter-six .hunter_map {
  background: url(../image/section3/hunter_map_6.png) no-repeat;
  background-size: 100%;
  width: 503px;
  height: 390px;
  top: 563px;
  left: 5px;
}


.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: 85px;
  height: 85px;
  background: url(../image/section3/voice-btn.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 333px;
  left: 0px;
  /* animation: rotate-clockwise 2.5s linear infinite; */
}

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

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

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

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

.hunter-six .play-voice-btn::after {
  left: 5.2px;
}

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

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

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

.pagination-swiper-container {
  width: 481px;
  height: 110px;
  /* background-color: aqua; */
  position: absolute;
  top: 1290px;
  left: 120px;
  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: 88px;
  height: 16px;
  background: url(../image/section3/active1.png) no-repeat;
  background-size: 100%;
}

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

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

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

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



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



/* 豆点 */

.hunter-swiper-pagination {
  width: 400px;
  height: 131px;
  position: absolute;
  top: 1030px;
  left: 160px;
  display: flex;
  align-items: center;
  /* pointer-events: none; */
  justify-content: space-evenly;
  /* display: none; */
}

.hunter-swiper-pagination .swiper-pagination-bullet {
  width: 91px;
  height: 6px;
  /* margin-right: 20px; */
  opacity: 1;
  /* filter: grayscale(100%); */
  position: relative;
}

.hunter-swiper-pagination .swiper-pagination-bullet-active {
  width: 107px;
  height: 24px;
  /* margin-right: 20px; */
  opacity: 1;
  /* filter: grayscale(0); */
}

/* .hunter-swiper-pagination .swiper-pagination-bullet-active::before {
  content: '';
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 68px;
  height: 49px;
  background: url(../image/section3/active.png) no-repeat;
  background-size: 100%;
} */

.hunter-swiper-pagination .swiper-pagination-bullet:nth-child(1) {
  width: 91px;
  height: 6px;
  background: url(../image/section3/noactive1.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) {
  width: 107px;
  height: 24px;
  background: url(../image/section3/active1.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) {
  width: 91px;
  height: 6px;
  background: url(../image/section3/noactive3.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) {
  width: 107px;
  height: 24px;
  background: url(../image/section3/active3.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) {
  width: 91px;
  height: 6px;
  background: url(../image/section3/noactive2.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) {
  width: 107px;
  height: 24px;
  background: url(../image/section3/active2.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) {
  width: 91px;
  height: 6px;
  background: url(../image/section3/noactive4.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) {
  width: 107px;
  height: 24px;
  background: url(../image/section3/active4.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/section3/active5.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/active5.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/active6.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/active6.png) no-repeat;
  background-size: 100%;
  /* position: absolute;
  top: 0.42rem;
  left: -4.6rem; */
  border-radius: 0%;
}

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


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

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

.hunter_text.animated.ani {
  animation-name: fadeInRight;
  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: fadeInLeft;
  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-swiper-button-prev {
  position: absolute;
  width: 73px;
  height: 77px;
  background: url(../image/section3/prev.png) no-repeat;
  background-size: 100%;
  left: 20px;
  top: 700px;
  z-index: 11;
  cursor: pointer;
}

.hunter-swiper-button-next {
  position: absolute;
   width: 73px;
  height: 77px;
  background: url(../image/section3/next.png) no-repeat;
  background-size: 100%;
  right: 20px;
  top: 700px;
  z-index: 11;
  cursor: pointer;
}


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

@keyframes fadeIn_ben {
  0% {
      opacity: 0
  }

  to {
      opacity: 1
  }
}