.role_container {
  width: 100%;
  height: 100%;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/bg4.png")
    no-repeat;
  background-size: 100% 100%;
}

.role_text.soldier {
  width: 25.1vw;
  height: 59.45vh;
  position: absolute;
  left: 21.875vw;
  top: 11.69vh;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/role_soldier_text.png")
    no-repeat;
  background-size: 100% 100%;
}

.role_text.monk {
  width: 25.1vw;
  height: 59.55vh;
  position: absolute;
  left: 21.875vw;
  top: 11.69vh;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/role_monk_text.png")
    no-repeat;
  background-size: 100% 100%;
}

.role_text.shooter {
  width: 25.1vw;
  height: 61.68vh;
  position: absolute;
  left: 21.875vw;
  top: 11.69vh;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/role_shooter_text.png")
    no-repeat;
  background-size: 100% 100%;
}

.role_text.assassin {
  width: 25.1vw;
  height: 61.78vh;
  position: absolute;
  left: 21.875vw;
  top: 11.69vh;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/role_assassin_text.png")
    no-repeat;
  background-size: 100% 100%;
}
@keyframes roleDownFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-8.13vh);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes roleUpFadeIn {
  0% {
    opacity: 0;
    transform: translateY(8.13vh);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.downAnimation {
  animation: roleDownFadeIn 1s forwards;
}

.upAnimation {
  animation: roleUpFadeIn 1s forwards;
}

.role_person.soldier {
  width: 41.77vw;
  height: 79.17vh;
  position: absolute;
  left: 43.65vw;
  top: 4.67vh;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/role_soldier_person.png")
    no-repeat;
  background-size: 100% 100%;
}

.role_person.monk {
  width: 41.77vw;
  height: 79.17vh;
  position: absolute;
  left: 43.65vw;
  top: 4.67vh;
  padding: 3.61vh 0.96vw;
  box-sizing: border-box;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/role_monk_person.png")
    no-repeat;
  background-size: calc(100% - 1.93vw) calc(100% - 7.22vh);
  background-position: 0.96vw 3.61vh;
}

.role_person.shooter {
  width: 41.77vw;
  height: 79.17vh;
  position: absolute;
  left: 43.65vw;
  top: 4.67vh;
  padding: 3.3vh 1.28vw;
  box-sizing: border-box;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/role_shooter_person.png")
    no-repeat;
  background-size: calc(100% - 2.55vw) calc(100% - 6.61vh);
  background-position: 1.28vw 3.3vh;
}

.role_person.assassin {
  width: 41.77vw;
  height: 79.17vh;
  position: absolute;
  left: 43.65vw;
  top: 4.67vh;
  padding: 3.61vh 0;
  box-sizing: border-box;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/role_assassin_person.png")
    no-repeat;
  background-size: calc(100% - 1.93vw) calc(100% - 7.22vh);
  background-position: 0 3.61vh;
}

.role_label {
  width: 6.15vw;
  height: 24.7vh;
  position: absolute;
  left: 74.74vw;
  top: 27.03vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.role_label_soldier {
  position: relative;
  width: 5.1vw;
  height: 5.79vh;
  transition: width 0.3s ease;
  cursor: pointer;
}

.role_label_soldier::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/soldier.png")
    no-repeat;
  background-size: 100% 100%;
  transition: opacity 0.3s ease;
}

.role_label_soldier::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/soldier_hover.png")
    no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.role_label_soldier.active {
  width: 100%;
}

.role_label_soldier.active::before {
  opacity: 0;
}

.role_label_soldier.active::after {
  opacity: 1;
}

.role_label_monk {
  position: relative;
  width: 5.1vw;
  height: 5.79vh;
  transition: width 0.3s ease;
  cursor: pointer;
}

.role_label_monk::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/monk.png")
    no-repeat;
  background-size: 100% 100%;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.role_label_monk::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/monk_hover.png")
    no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.role_label_monk.active {
  width: 100%;
}

.role_label_monk.active::before {
  opacity: 0;
}

.role_label_monk.active::after {
  opacity: 1;
}

.role_label_shooter {
  position: relative;
  width: 5.1vw;
  height: 5.79vh;
  transition: width 0.3s ease;
  cursor: pointer;
}

.role_label_shooter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/shooter.png")
    no-repeat;
  background-size: 100% 100%;
  transition: opacity 0.3s ease;
}

.role_label_shooter::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/shooter_hover.png")
    no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.role_label_shooter.active {
  width: 100%;
}

.role_label_shooter.active::before {
  opacity: 0;
}

.role_label_shooter.active::after {
  opacity: 1;
}

.role_label_assassin {
  position: relative;
  width: 5.1vw;
  height: 5.79vh;
  transition: width 0.3s ease;
  cursor: pointer;
}

.role_label_assassin::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/assassin.png")
    no-repeat;
  background-size: 100% 100%;
  transition: opacity 0.3s ease;
}

.role_label_assassin::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://image-platform.leniugame.com/pc_high_definition/4/assassin_hover.png")
    no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.role_label_assassin.active {
  width: 100%;
}

.role_label_assassin.active::before {
  opacity: 0;
}

.role_label_assassin.active::after {
  opacity: 1;
}