.main_heros_switch {
  width: 2.4rem;
  height: 0.6rem;
  position: absolute;
  top: 50%;
  transform: translateY(1.5rem);
  z-index: 5;
  background-image: url("../img/heroes/type/arc.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.main_heros_switch.mei {
  left: 2.2rem;
  padding-left: 0.48rem;
}

.main_heros_switch.lan {
  left: 2.2rem;
  padding-left: 0.48rem;
}

.main_heros_switch.queenie {
  left: 2.3rem;
  padding-left: 0.48rem;
}

.main_heros_switch.candice {
  left: 2.3rem;
  padding-left: 0.48rem;
}

.main_heros_switch.carolyn {
  left: 2.3rem;
  padding-left: 0.48rem;
}

.main_heros_switch.badun {
  left: 2.4rem;
  padding-left: 0.48rem;
}

.main_heros_switch.baliya {
  left: 2.4rem;
  padding-left: 0.48rem;
}

.main_heros_switch.lichade {
  left: 2.4rem;
  padding-left: 0.48rem;
}

.main_heros_switch.idun {
  left: 2.4rem;
  padding-left: 0.48rem;
}

.main_heros_switch.ella {
  left: 2.4rem;
  padding-left: 0.48rem;
}

.main_heros_switch.ailin {
  left: 2.4rem;
  padding-left: 0.48rem;
}

.main_heros_switch.nike {
  left: 2.4rem;
  padding-left: 0.48rem;
}

.main_heros_switch_item {
  width: 0.54rem;
  height: 0.54rem;
  background-image: url("../img/heroes/hero-type-spirte.png");
  background-size: 1.08rem 2.7rem;
  position: absolute;
  cursor: pointer;
  transition: transform 0.6s ease, box-shadow 2s ease;
  animation: fadeIn 1.5s ease;
}

.main_heros_switch_item.sun {
  background-position: -0.552rem -1.596rem;
}

.main_heros_switch_item.sun.active {
  background-position: 0 -1.596rem;
}

.main_heros_switch_item.moon {
  background-position: -0.54rem -2.124rem;
}

.main_heros_switch_item.moon.active {
  background-position: 0 -2.124rem;
}

.main_heros_switch_item.leaf {
  background-position: -0.54rem -1.068rem;
}

.main_heros_switch_item.leaf.active {
  background-position: 0.012rem -1.068rem;
}

.main_heros_switch_item.water {
  background-position: -0.54rem -0.54rem;
}

.main_heros_switch_item.water.active {
  background-position: 0 -0.54rem;
}

.main_heros_switch_item.fire {
  background-position: -0.552rem 0px;
}

.main_heros_switch_item.fire.active {
  background-position: 0 0;
}

.main_heros_switch_item.two_left {
  transform: translate3d(0.096rem, 0.144rem, 0);
}

.main_heros_switch_item.two_right {
  transform: translate3d(1.008rem, 0.168rem, 0);
}

.main_heros_switch_item.three_left {
  transform: translate3d(-0.3rem, -0.06rem, 0);
}

.main_heros_switch_item.three_middle {
  transform: translate3d(0.624rem, 0.264rem, 0);
}

.main_heros_switch_item.three_right {
  transform: translate3d(1.416rem, -0.096rem, 0);
}