.draggable-card {
  z-index: 30 !important;
  position: absolute;
  top: 3.1204rem;
  left: 0;
  width: 10.0556rem;
  height: 16.4074rem;
  user-select: none; /* 防止文本选择 */
  background: url(https://image-platform.leniugame.com/mobile/4/role_bg.png)
    no-repeat;
  background-size: 10.0556rem 16.4074rem;
  position: absolute;
  z-index: 29;
}
.draggable-card .card_image {
  width: 8.9444rem;
  height: 12.8148rem;
  z-index: 30;
  position: absolute;
  top: 2%;
  right: 0;
}

.show-card {
  z-index: 25 !important;
  position: absolute;
  top: 3.1204rem;
  left: 0;
  width: 10.0556rem;
  height: 16.4074rem;
  user-select: none; /* 防止文本选择 */
  opacity: 0;
  background: url(https://image-platform.leniugame.com/mobile/4/role_bg.png)
    no-repeat;
  background-size: 10.0556rem 16.4074rem;
  position: absolute;
  z-index: 29;
}

.show-card .card_image {
  width: 8.9444rem;
  height: 12.8148rem;
  position: absolute;
  top: 2%;
  right: 0;
}

/* 基础动画效果 */
@keyframes slideInFromLeft {
  from {
    transform: translateX(0) rotate(0) scale(var(--scale-factor));
  }
  50% {
    transform: translateX(-25%) rotate(-15deg) scale(var(--scale-factor));
  }
  90% {
    transform: translate(-130%, -5%) rotate(-25deg) scale(var(--scale-factor));
    opacity: 1;
  }
  91% {
    transform: translate(-130%, -5%) rotate(-25deg) scale(var(--scale-factor));
    opacity: 0;
  }
  92% {
    transform: translateX(0) rotate(0) scale(var(--scale-factor));
    opacity: 0;
  }
  to {
    transform: translateX(0) rotate(0) scale(var(--scale-factor));
    opacity: 0;
  }
}

@keyframes slideInFromRight {
  from {
    transform: translateX(0) rotate(0) scale(var(--scale-factor));
  }
  50% {
    transform: translateX(25%) rotate(15deg) scale(var(--scale-factor));
  }
  90% {
    transform: translate(130%, -5%) rotate(25deg) scale(var(--scale-factor));
    opacity: 1;
  }
  91% {
    transform: translate(130%, -5%) rotate(25deg) scale(var(--scale-factor));
    opacity: 0;
  }
  92% {
    transform: translateX(0) rotate(0) scale(var(--scale-factor));
    opacity: 0;
  }
  to {
    transform: translateX(0) rotate(0) scale(var(--scale-factor));
    opacity: 0;
  }
}

@keyframes bottomImgShow {
  from {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  91% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
.slide-left {
  animation: slideInFromLeft 0.75s ease-in forwards;
  animation-iteration-count: 1;
}

.slide-right {
  animation: slideInFromRight 0.75s ease-in forwards;
  animation-iteration-count: 1;
}

.bottomShow {
  animation: bottomImgShow 0.75s ease-in forwards;
  animation-iteration-count: 1;
}

/* 勇者图鉴标题 */
.role-title {
  background: url(https://image-platform.leniugame.com/mobile/4/title.png)
    no-repeat;
  background-size: 100% 100%;
  width: 6.0926rem;
  height: 0.8704rem;
  position: absolute;
  top: 2.037rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
}

.role-content_bg {
  background: url(https://image-platform.leniugame.com/mobile/4/role_bg.png)
    no-repeat;
  background-size: 100% 100%;
  width: 6.1111rem;
  height: 12.9861rem;
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
}

.role-content_pagenation {
  position: absolute;
  top: 16.629rem;
  width: 100%;
  height: 0.3056rem;
  display: flex;
  justify-content: center;
  z-index: 40;
}
.role-content_pagenation_item {
  width: 0.3056rem;
  height: 0.2963rem;
  background: url(https://image-platform.leniugame.com/mobile/4/point.png)
    no-repeat;
  background-size: 100% 100%;
  margin: 0 0.0741rem;
}

.role-content_pagenation_item.active {
  background: url(https://image-platform.leniugame.com/mobile/4/point_active.png)
    no-repeat;
  background-size: 100% 100%;
  border-radius: 0.0926rem;
}