.page2 {
  width: 100%;
  height: 15rem;
  margin: 0 auto;
  position: relative;
  top: 0.2rem;
}
/* 重构后的四职业/男女角色轮播 */
.role-title {
  position: absolute;
  top: 1rem;
  left: 50%;
  width: 3.75rem;
  height: 1.11rem;
  background: url(../image/section5/title.png) center / 100% 100% no-repeat;
  pointer-events: none;
  transform: translateX(-50%);
  z-index: 9;
}

.role-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 15rem;
  overflow: visible;
  z-index: 0;
}

.role-career-swiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15rem;
  overflow: hidden;
  z-index: 2;
}

.role-career-swiper > .swiper-wrapper,
.role-career-slide,
.role-gender-swiper,
.role-gender-swiper > .swiper-wrapper,
.role-gender-slide {
  width: 100%;
  height: 100%;
}

.role-career-slide,
.role-gender-slide {
  position: relative;
  overflow: hidden;
}

/* .role-gender-slide::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 7.2rem;
  height: 11.35rem;
  background: url(../image/section5/role-bg.png) ;
  background-size:100%;
  background-repeat: no-repeat;
  pointer-events: none;
} */

.role-portrait {
  position: absolute;
  top: 0;
  left: 50%;
  width: 7.2rem;
  height: 11.35rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-blend-mode: normal;
  z-index: 2;
}

.role-portrait-label {
  position: absolute;
  top: calc(50% + 4rem);
  left: 50%;
  z-index: 2;
  display: block;
  width: 5.3rem;
  height: 2.09rem;
  transform: translate(-50%, -50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 0;
}

.role-portrait-label-1 {
  width: 5.01rem;
  height: 4.32rem;
  background-image: url(../image/section5/text-1.png);
}

.role-portrait-label-2 {
  width: 5.01rem;
  height: 4.32rem;
  background-image: url(../image/section5/text-2.png);
}

.role-portrait-label-3 {
  width: 5.01rem;
  height: 4.32rem;
  background-image: url(../image/section5/text-3.png);
}

.role-portrait-label-4 {
  width: 5.01rem;
  height: 4.32rem;
  background-image: url(../image/section5/text-4.png);
}

.role-portrait-label-5 {
  width: 5.01rem;
  height: 4.32rem;
  background-image: url(../image/section5/text-5.png);
}

.role-portrait-assassin-male {
 background-image: url(../image/section5/assassin-male.png);
}

.role-portrait-assassin-female {
   background-image: url(../image/section5/assassin-female.png);
}

.role-portrait-blade-male {
  width: 7.2rem;
  height: 11.35rem;
  /* top: 2.11rem;
  margin-left: -0.6rem; */
  background-image: url(../image/section5/blade-male.png);
}
.role-portrait-blade-female {
  background-image: url(../image/section5/blade-female.png);
}

.role-portrait-mage-male{
  width: 7.2rem;
  height: 11.35rem;
   background-image: url(../image/section5/mage-male.png);
}

.role-portrait-mage-female {
 background-image: url(../image/section5/mage-female.png);
}

.role-portrait-gunner-male{
  width: 7.2rem;
  height: 11.35rem;
 background-image: url(../image/section5/gunner-male.png);
}
.role-portrait-gunner-female {
 background-image: url(../image/section5/gunner-female.png);
}

.role-portrait-hunter-male {
  width: 7.2rem;
  height: 11.35rem;
 background-image: url(../image/section5/hunter-male.png);
}
.role-portrait-hunter-female {
 background-image: url(../image/section5/hunter-female.png);
}

.role-career-avatar-pagination {
  position: absolute;
  top: 6.15rem;
  left: 50%;
  width: 100%;
  height: 1.6rem;
  transform: translateX(-50%);
  z-index: 5;
}

.role-career-avatar,
.role-career-bottom-button,
.role-gender-button,
.role-career-nav {
  padding: 0;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.role-career-avatar {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1.28rem;
  color: #b7bdce;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(-50%) ;
  transform-origin: center bottom;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

/* 中间隐藏位置不要过渡动画 */
.role-career-avatar[data-avatar-position="hidden"] {
  transition: none;
}

.role-career-avatar.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.role-career-avatar[data-avatar-position="left"] {
  left: calc(50% - 1.55rem);
  transform: translateX(-50%) translateY(0.22rem);
}

.role-career-avatar[data-avatar-position="center"] {
  left: 50%;
  transform: translateX(-50%) ;
}

.role-career-avatar[data-avatar-position="right"] {
  left: calc(50% + 1.55rem);
  transform: translateX(-50%) translateY(0.22rem);
}

.role-career-avatar.is-active {
  color: #f4d58c;
  /* opacity: 1; */
  transform: translateX(-50%) scale(1) rotate(0deg);
  display: none;
}

.role-career-avatar-image {
  display: block;
  width: 1.9rem;
  height: 2.15rem;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 0;
}

.role-career-avatar-image[data-avatar-image="ck-1.png"] {
  width: 1.55rem;
  height: 1.4rem;
  background-image: url(../image/section5/ck-1.png);
  background-size: 100%;
  margin-left: 0.3rem;
  margin-top: 0.05rem;
}

.role-career-avatar-image[data-avatar-image="ck-2.png"] {
  background-image: url(../image/section5/ck-2.png);
}

.role-career-avatar-image[data-avatar-image="js-1.png"] {
  width: 1.06rem;
  height: 1.53rem;
  background-image: url(../image/section5/js-1.png);
  background-size: 100%;
  margin-top: -0.11rem;
  margin-left: 0;
}

.role-career-avatar-image[data-avatar-image="js-2.png"] {
  background-image: url(../image/section5/js-2.png);
}

.role-career-avatar-image[data-avatar-image="fs-1.png"] {
  width: 1.06rem;
  height: 1.57rem;
  background-image: url(../image/section5/fs-1.png);
  background-size: 100%;
  margin-top: -0.14rem;
  margin-left: 0;
}

.role-career-avatar-image[data-avatar-image="fs-2.png"] {
  background-image: url(../image/section5/fs-2.png);
}

.role-career-avatar-image[data-avatar-image="qs-1.png"] {
  width: 1.06rem;
  height: 1.33rem;
  background-image: url(../image/section5/qs-1.png);
  background-size: 100%;
  margin-top: 0.11rem;
  margin-left: 0;
}

.role-career-avatar-image[data-avatar-image="qs-2.png"] {
  background-image: url(../image/section5/qs-2.png);
}

.role-career-avatar-image[data-avatar-image="ly-1.png"] {
  width: 1.28rem;
  height: 1.44rem;
  background-image: url(../image/section5/ly-1.png);
  background-size: 100%;
  margin-left: -0.2rem;
}


.role-career-avatar-name {
  margin-top: 0.08rem;
  font-size: 0.24rem;
  line-height: 1;
}

.role-gender-pagination {
  position: absolute;
  top: 6.4rem;
  left: 50%;
  display: flex;
  gap: 0.18rem;
  transform: translateX(-50%);
  z-index: 8;
}

/* 性别按钮 */
.role-gender-button {
  width: 1.2rem;
  height: 1.2rem;
  color: transparent;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1rem 1.02rem;
  border: 0;
  border-radius: 0;
  font-size: 0;
  display: none;
}

.role-gender-button[data-gender-index="0"] {
  background-image: url(../image/section5/nan.png);
}

.role-gender-button[data-gender-index="0"].is-active {
  background-image: url(../image/section5/nan-active.png);
  background-size: 1.2rem 1.2rem;
}

.role-gender-button[data-gender-index="1"] {
  background-image: url(../image/section5/nv.png);
}

.role-gender-button[data-gender-index="1"].is-active {
  background-image: url(../image/section5/nv-active.png);
  background-size: 1.2rem 1.2rem;
}

/* 职业轮播图左右按钮  */
.role-career-nav {
  position: absolute;
  bottom: 1.65rem;
  width: 0.48rem;
  height: 0.58rem;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 7;
}

.role-career-prev {
  left: 0.12rem;
  background-image: url(../image/section5/swiper-button-prev.png);
  display: none;
}

.role-career-next {
  right: 0.12rem;
  background-image: url(../image/section5/swiper-button-next.png);
  display: none;
}

.role-career-top-nav {
  position: absolute;
  top: -0.85rem;
  width: 0.68rem;
  height: 0.47rem;
  padding: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.57rem 0.66rem;
  border: 0;
  cursor: pointer;
  z-index: 7;
}

.role-career-top-prev {
  left: calc(50% - 3.3rem);
  background-image: url(../image/section5/swiper-button-prev1.png);
}

.role-career-top-next {
  right: calc(50% - 3.3rem);
  background-image: url(../image/section5/swiper-button-next1.png);
}

.role-career-bottom-pagination {
  position: absolute;
  bottom: 0.97rem;
  left: 50%;
  width: 100%;
  height: 1.6rem;
  transform: translateX(-50%);
  z-index: 6;
}

.role-career-bottom-button {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.02rem;
  /* min-width: 1.02rem; */
  height: 1.3rem;
  color: transparent;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0;
  border-radius: 0;
  font-size: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateX(-50%) ;
  transform-origin: center bottom;
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.role-career-bottom-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.role-career-bottom-button[data-career-position="left"] {
  left: calc(50% - 1.9rem);
  transform: translateX(-50%);
}

.role-career-bottom-button[data-career-position="center"] {
  left: 50%;
  transform: translateX(-50%);
}

.role-career-bottom-button[data-career-position="right"] {
  left: calc(50% + 1.9rem);
  transform: translateX(-50%);
}

.role-career-bottom-button[data-career-index="0"] {
  background-image: url(../image/section5/ck.png);
}

.role-career-bottom-button[data-career-index="1"] {
  background-image: url(../image/section5/js.png);
}

.role-career-bottom-button[data-career-index="2"] {
  width: 0.84rem;
  background-image: url(../image/section5/mf.png);
}

.role-career-bottom-button[data-career-index="3"] {
  background-image: url(../image/section5/qs.png);
}

.role-career-bottom-button.is-active {
  opacity: 1;
  animation: role-career-bottom-breathe 1.5s ease-in-out infinite;
}

@keyframes role-career-bottom-breathe {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(244, 213, 140, 0));
    transform: translateX(-50%) scale(1) rotate(0deg);
  }

  50% {
    filter: drop-shadow(0 0 0.08rem rgba(244, 213, 140, .55));
    transform: translateX(-50%) scale(1.06) rotate(0deg);
  }
}

/* 动画样式 */