.memberCard {
  transform-style: preserve-3d;
  border-radius: 2vw;
  width: 21vw;
  height: 27vw;
  transition: all 1s ease-in-out;
  box-shadow: 0.8vw 0.5vw 0.3vw rgba(69, 65, 65, 0.509);
}
@supports (
  background:
    image(
      "https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png"
    )
) {
  .preload-image {
    background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
    opacity: 0;
    width: 0;
    height: 0;
    background-size: 100% 100%;
  }
}

.memberCard:hover {
  transform: rotateY(180deg);
}
@supports not (backface-visibility: hidden) {
  .memberCard:hover .front-name {
    visibility: hidden;
  }
}

.front {
  height: 100%;
  width: 100%;

  backface-visibility: hidden;
  position: relative;
  top: -100%;
  border-radius: 9%;
  background-size: 100% 110%;
  background-position: 0 80%;

  transform-style: preserve-3d;
}

.front-name {
  position: relative;
  top: 100%;
  width: max-content;
  margin: 0 auto;
  font-size: 2vw;

  color: rgb(255, 255, 255);
  font-weight: bolder;
  backface-visibility: hidden;
}

.back {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 9%;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  border: solid 0.5vw rgb(200, 170, 230);
  background-color: white;
}
.cartoon {
  z-index: 2;
  position: absolute;
  height: 42%;
  width: 62%;
  left: 19%;
}

.back-name {
  position: absolute;
  top: 1.5vw;
  color: rgb(249, 246, 246);
  font-size: 1.3vw;
  height: 3vw;
  width: 100%;
  line-height: 3vw;
  text-align: center;
  font-weight: bold;
  background-size: 110% 170%;
  background-position: 30% 45%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cardiogram.png");
}

.memberCard .baffle {
  position: absolute;
  top: 35%;
  width: 100%;
  height: 65%;
  background-color: rgb(200, 170, 230);
  overflow: hidden;
  border-radius: 0 0 1vw 1vw;
}

.baffle-3 {
  position: absolute;
  left: 15%;
  top: -3vw;
  width: 70%;
  height: 5vw;
  border-radius: 100% 100%;
  background-color: rgb(255, 255, 255);
}
.introduce {
  position: relative;
  left: 5%;
  height: 70%;
  width: 90%;
  top: 4.5vw;
  text-align: justify;
  opacity: 1;
  transition: 1s;
  font-weight: bolded;
  container-type: inline-size;
  font-size: 0.6cqw;
  /* overflow: scroll; */
  font-family: "Career";
}

.ADL > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/adl.jpg");
  background-size: 120% 120%;
  background-position: 80% 0%;
}

.ChenZY > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/chenzy-2.jpg");
  background-size: 100% 100%;
  background-position: 50% 80%;
}

.DengYX > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/dengyx.jpg");
  background-size: 130% 140%;
  background-position: 50% 50%;
}

.DongSR > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/dongsr.jpg");
  background-size: 120% 140%;
  background-position: 60% 16%;
}

.Eating > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/eating.jpg");
  background-size: 180% 180%;
  background-position: 50% 60%;
}

.GeLH > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/gelh.jpg");
  background-size: 320% 150%;
  background-position: 40% 0%;
}

.GeYT > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/geyt.jpg");
  background-size: 150% 150%;
  background-position: 20% 0;
}

.GuoYT > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/guoyt.jpg");
  background-size: 220% 125%;
  background-position: 15% 10%;
}

.GuoYY > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/guoyy.jpg");
  background-size: 200% 200%;
  background-position: 40% 50%;
}

/* .memberCard{
  transform: rotateY(180deg);
} */
.HuX > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/hux.jpg");
  background-size: center;
  background-position: 0 0;
}
.HuX > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 0%;
  transform: scale(1.1);
}
.HuX:hover .HuX-cartoon {
  animation: HuX 2s infinite steps(1, start);
}
@keyframes HuX {
  0% {
    background-position: 0 0%;
  }
  11% {
    background-position: 0% 0%;
  }
  11.01% {
    background-position: 12.5% 0%;
  }
  22% {
    background-position: 12.5% 0%;
  }
  22.01% {
    background-position: 25% 0%;
  }
  33% {
    background-position: 25% 0%;
  }
  33.01% {
    background-position: 37.5% 0%;
  }
  44% {
    background-position: 37.5% 0%;
  }
  44.01% {
    background-position: 50% 0%;
  }
  55% {
    background-position: 50% 0%;
  }
  55.01% {
    background-position: 62.5% 0%;
  }
  66% {
    background-position: 62.5% 0%;
  }
  66.01% {
    background-position: 75% 0%;
  }
  77% {
    background-position: 75% 0%;
  }
  77.01% {
    background-position: 87.5% 0%;
  }
  88% {
    background-position: 87.5% 0%;
  }
  88.01% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}

.HeYQ > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/heyq.jpg");
  background-size: 180% 200%;
  background-position: 33% 0;
}
.HeYQ > .back > .cartoon {
  top: 1vh;
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 6.9%;
}
.HeYQ:hover .HeYQ-cartoon {
  animation: HeYQ 2s infinite steps(1, start);
}
@keyframes HeYQ {
  0% {
    background-position: 0 6.9%;
  }
  25% {
    background-position: 0% 6.9%;
  }
  25.01% {
    background-position: 12.5% 6.9%;
  }
  50% {
    background-position: 12.5% 6.9%;
  }
  50.01% {
    background-position: 25% 6.9%;
  }
  75% {
    background-position: 25% 6.9%;
  }
  75.01% {
    background-position: 37.5% 6.9%;
  }
  100% {
    background-position: 37.5% 6.9%;
  }
}

.LiangHX > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/lianghx-2.jpg");
  background-size: 200% 200%;
  background-position: 22% 70%;
}

.LiaoXH > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/liaoxh.jpg");
  background-size: 125% 120%;
  background-position: 50% 50%;
}

.LiuHY > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/liuhy.jpg");
  background-size: 130% 210%;
  background-position: 100% 50%;
}

.LuoSY > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/luosy.jpg");
  background-position: 70% 70%;
  background-size: 130% 140%;
  background-position: 100%;
}

.mentor > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/mentor.jpg");
  background-size: 200% 200%;
  background-position: 40% 50%;
}
.mentor > .back > .cartoon {
  transform: rotateZ(-5deg);
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 13.32%;
}
.mentor:hover .mentor-cartoon {
  animation: mentor 2s infinite steps(1, start);
}
@keyframes mentor {
  0% {
    background-position: 0 13.32%;
  }
  14% {
    background-position: 0% 13.32%;
  }
  14.01% {
    background-position: 12.5% 13.32%;
  }
  28% {
    background-position: 12.5% 13.32%;
  }
  28.01% {
    background-position: 25% 13.32%;
  }
  42% {
    background-position: 25% 13.32%;
  }
  42.01% {
    background-position: 37.5% 13.32%;
  }
  56% {
    background-position: 37.5% 13.32%;
  }
  56.01% {
    background-position: 50% 13.32%;
  }
  70% {
    background-position: 50% 13.32%;
  }
  70.01% {
    background-position: 62.5% 13.32%;
  }
  84% {
    background-position: 62.5% 13.32%;
  }
  84.01% {
    background-position: 75% 13.32%;
  }
  100% {
    background-position: 75% 13.32%;
  }
}

.QingYX > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/qingyx.jpg");
  background-size: 240% 130%;
  background-position: 80% 10%;
}

.QuJY > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/qujy.jpg");
  background-size: 150% 160%;
  background-position: 50% 50%;
}

.RenQ > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/renq.jpg");
  background-size: 220% 110%;
  background-position: 50% 0%;
}

.ShiXY > .front {
  /* background-size: 500% auto;
  background-position: 317% 50%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/ShiXY.jpg"); */
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/shixy.jpg");
  background-size: 110% 100%;
  background-position: 70% 53%;
}

.SunH > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/sunh.jpg");
  background-size: 120% 150%;
  background-position: 50% 90%;
}

.SunT > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/sunt.jpg");
  background-size: 200% 110%;
  background-position: 50% 0%;
}

.ShiShi > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/shishi.jpg");
  background-position: 0 0;
  background-size: 100% 100%;
}

.TanQY > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/tanqy-2.jpg");
  background-size: 100% 100%;
  background-position: 68% 70%;
}

.WanYZ > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/wanyz.jpg");
  background-position: 50% 0%;
  background-size: 120% 120%;
}

.WanYZ > .back > .cartoon {
  left: 4vw;
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 3.33%;
}
.WanYZ:hover .WanYZ-cartoon {
  animation: WanYZ 2s infinite steps(1, start);
}
@keyframes WanYZ {
  0% {
    background-position: 0 3.33%;
  }
  25% {
    background-position: 0% 3.33%;
  }
  25.01% {
    background-position: 12.5% 3.33%;
  }
  50% {
    background-position: 12.5% 3.33%;
  }
  50.01% {
    background-position: 25% 3.33%;
  }
  75% {
    background-position: 25% 3.33%;
  }
  75.01% {
    background-position: 37.5% 3.33%;
  }
  100% {
    background-position: 37.5% 3.33%;
  }
}
/* @keyframes WanYZ {
  0% {
    background-position: 0 3.33%;
  }
  100% {
    background-position: 100% 3.33%;
  }
} */
.XiaoYX > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/xiaoyx.jpg");
  background-size: 125% 120%;
  background-position: 50% 80%;
}

.YangBH > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/yangbh.jpg");
}
.YangBH > .back > .cartoon {
  transform: scale(1.05);
  left: 4.5vw;
  background-size: 100% 110%;
  background-position: 40% 8%;
  /* background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/YangBH_1.png"); */
}

.YaoYao > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/yaoyao.jpg");
}
.YaoYao > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 9.99%;
}
.YaoYao:hover .YaoYao-cartoon {
  animation: YaoYao 2s infinite steps(1, start);
}
@keyframes YaoYao {
  0% {
    background-position: 0 9.99%;
  }
  16% {
    background-position: 0% 9.99%;
  }
  16.01% {
    background-position: 12.5% 9.99%;
  }
  32% {
    background-position: 12.5% 9.99%;
  }
  32.01% {
    background-position: 25% 9.99%;
  }
  48% {
    background-position: 25% 9.99%;
  }
  48.01% {
    background-position: 37.5% 9.99%;
  }
  64% {
    background-position: 37.5% 9.99%;
  }
  64.01% {
    background-position: 50% 9.99%;
  }
  80% {
    background-position: 50% 9.99%;
  }
  80.01% {
    background-position: 62.5% 9.99%;
  }
  100% {
    background-position: 62.5% 9.99%;
  }
}

.YaoR > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/yaor.jpg");
  background-size: 105% 110%;
  background-position: 100% 0;
}

.YuHY > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/yuhy.jpg");
  background-size: 120% 120%;
  background-position: 50% 10%;
}

.ZhongZM > .front {
  background-image: url("https://static.igem.wiki/teams/5038/img-team/members/zhongzm.jpg");
  background-size: 180% 200%;
  background-position: 0 15%;
}

.person-name {
  top: 70%;
  left: 17%;
  position: absolute;
  z-index: 10;
  color: rgba(248, 248, 255, 0.804);
  font-size: 5vw;
  /* animation: person-name-appear 2s linear 3s forwards; */
  opacity: 0;
}

@keyframes person-name-appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.ShiShi > .back > .cartoon {
  transform: scale(1.1);
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 16.65%;
}
.ShiShi:hover .ShiShi-cartoon {
  animation: ShiShi 2s infinite steps(1, start);
}
@keyframes ShiShi {
  0% {
    background-position: 0 16.65%;
  }
  11% {
    background-position: 0% 16.65%;
  }
  11.01% {
    background-position: 12.5% 16.65%;
  }
  22% {
    background-position: 12.5% 16.65%;
  }
  22.01% {
    background-position: 25% 16.65%;
  }
  33% {
    background-position: 25% 16.65%;
  }
  33.01% {
    background-position: 37.5% 16.65%;
  }
  44% {
    background-position: 37.5% 16.65%;
  }
  44.01% {
    background-position: 50% 16.65%;
  }
  55% {
    background-position: 50% 16.65%;
  }
  55.01% {
    background-position: 62.5% 16.65%;
  }
  66% {
    background-position: 62.5% 16.65%;
  }
  66.01% {
    background-position: 75% 16.65%;
  }
  77% {
    background-position: 75% 16.65%;
  }
  77.01% {
    background-position: 87.5% 16.65%;
  }
  88% {
    background-position: 87.5% 16.65%;
  }
  88.01% {
    background-position: 100% 16.65%;
  }
  100% {
    background-position: 100% 16.65%;
  }
}

.ChenZY > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 19.98%;
}
.ChenZY:hover .ChenZY-cartoon {
  animation: ChenZY 2s infinite steps(1, start);
}
@keyframes ChenZY {
  0% {
    background-position: 0 19.98%;
  }
  11% {
    background-position: 0% 19.98%;
  }
  11.01% {
    background-position: 12.5% 19.98%;
  }
  22% {
    background-position: 12.5% 19.98%;
  }
  22.01% {
    background-position: 25% 19.98%;
  }
  33% {
    background-position: 25% 19.98%;
  }
  33.01% {
    background-position: 37.5% 19.98%;
  }
  44% {
    background-position: 37.5% 19.98%;
  }
  44.01% {
    background-position: 50% 19.98%;
  }
  55% {
    background-position: 50% 19.98%;
  }
  55.01% {
    background-position: 62.5% 19.98%;
  }
  66% {
    background-position: 62.5% 19.98%;
  }
  66.01% {
    background-position: 75% 19.98%;
  }
  77% {
    background-position: 75% 19.98%;
  }
  77.01% {
    background-position: 87.5% 19.98%;
  }
  88% {
    background-position: 87.5% 19.98%;
  }
  88.01% {
    background-position: 100% 19.98%;
  }
  100% {
    background-position: 100% 19.98%;
  }
}

.ZhongZM > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 23.310000000000002%;
}
.ZhongZM:hover .ZhongZM-cartoon {
  animation: ZhongZM 2s infinite steps(1, start);
}
@keyframes ZhongZM {
  0% {
    background-position: 0 23.310000000000002%;
  }
  16% {
    background-position: 0% 23.310000000000002%;
  }
  16.01% {
    background-position: 12.5% 23.310000000000002%;
  }
  32% {
    background-position: 12.5% 23.310000000000002%;
  }
  32.01% {
    background-position: 25% 23.310000000000002%;
  }
  48% {
    background-position: 25% 23.310000000000002%;
  }
  48.01% {
    background-position: 37.5% 23.310000000000002%;
  }
  64% {
    background-position: 37.5% 23.310000000000002%;
  }
  64.01% {
    background-position: 50% 23.310000000000002%;
  }
  80% {
    background-position: 50% 23.310000000000002%;
  }
  80.01% {
    background-position: 62.5% 23.310000000000002%;
  }
  100% {
    background-position: 62.5% 23.310000000000002%;
  }
}

.ADL > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 26.64%;
}
.ADL:hover .ADL-cartoon {
  animation: ADL 2s infinite steps(1, start);
}
@keyframes ADL {
  0% {
    background-position: 0 26.64%;
  }
  16% {
    background-position: 0% 26.64%;
  }
  16.01% {
    background-position: 12.5% 26.64%;
  }
  32% {
    background-position: 12.5% 26.64%;
  }
  32.01% {
    background-position: 25% 26.64%;
  }
  48% {
    background-position: 25% 26.64%;
  }
  48.01% {
    background-position: 37.5% 26.64%;
  }
  64% {
    background-position: 37.5% 26.64%;
  }
  64.01% {
    background-position: 50% 26.64%;
  }
  80% {
    background-position: 50% 26.64%;
  }
  80.01% {
    background-position: 62.5% 26.64%;
  }
  100% {
    background-position: 62.5% 26.64%;
  }
}

.LuoSY > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 29.97%;
}
.LuoSY:hover .LuoSY-cartoon {
  animation: LuoSY 2s infinite steps(1, start);
}
@keyframes LuoSY {
  0% {
    background-position: 0 29.97%;
  }
  14% {
    background-position: 0% 29.97%;
  }
  14.01% {
    background-position: 12.5% 29.97%;
  }
  28% {
    background-position: 12.5% 29.97%;
  }
  28.01% {
    background-position: 25% 29.97%;
  }
  42% {
    background-position: 25% 29.97%;
  }
  42.01% {
    background-position: 37.5% 29.97%;
  }
  56% {
    background-position: 37.5% 29.97%;
  }
  56.01% {
    background-position: 50% 29.97%;
  }
  70% {
    background-position: 50% 29.97%;
  }
  70.01% {
    background-position: 62.5% 29.97%;
  }
  84% {
    background-position: 62.5% 29.97%;
  }
  84.01% {
    background-position: 75% 29.97%;
  }
  100% {
    background-position: 75% 29.97%;
  }
}

.YaoR > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 33.3%;
}
.YaoR:hover .YaoR-cartoon {
  animation: YaoR 2s infinite steps(1, start);
}
@keyframes YaoR {
  0% {
    background-position: 0 33.3%;
  }
  14% {
    background-position: 0% 33.3%;
  }
  14.01% {
    background-position: 12.5% 33.3%;
  }
  28% {
    background-position: 12.5% 33.3%;
  }
  28.01% {
    background-position: 25% 33.3%;
  }
  42% {
    background-position: 25% 33.3%;
  }
  42.01% {
    background-position: 37.5% 33.3%;
  }
  56% {
    background-position: 37.5% 33.3%;
  }
  56.01% {
    background-position: 50% 33.3%;
  }
  70% {
    background-position: 50% 33.3%;
  }
  70.01% {
    background-position: 62.5% 33.3%;
  }
  84% {
    background-position: 62.5% 33.3%;
  }
  84.01% {
    background-position: 75% 33.3%;
  }
  100% {
    background-position: 75% 33.3%;
  }
}

.LiangHX > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 36.63%;
}
.LiangHX:hover .LiangHX-cartoon {
  animation: LiangHX 2s infinite steps(1, start);
}
@keyframes LiangHX {
  0% {
    background-position: 0 36.63%;
  }
  20% {
    background-position: 0% 36.63%;
  }
  20.01% {
    background-position: 12.5% 36.63%;
  }
  40% {
    background-position: 12.5% 36.63%;
  }
  40.01% {
    background-position: 25% 36.63%;
  }
  60% {
    background-position: 25% 36.63%;
  }
  60.01% {
    background-position: 37.5% 36.63%;
  }
  80% {
    background-position: 37.5% 36.63%;
  }
  80.01% {
    background-position: 50% 36.63%;
  }
  100% {
    background-position: 50% 36.63%;
  }
}

.QingYX > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 39.96%;
}
.QingYX:hover .QingYX-cartoon {
  animation: QingYX 2s infinite steps(1, start);
}
@keyframes QingYX {
  0% {
    background-position: 0 39.96%;
  }
  11% {
    background-position: 0% 39.96%;
  }
  11.01% {
    background-position: 12.5% 39.96%;
  }
  22% {
    background-position: 12.5% 39.96%;
  }
  22.01% {
    background-position: 25% 39.96%;
  }
  33% {
    background-position: 25% 39.96%;
  }
  33.01% {
    background-position: 37.5% 39.96%;
  }
  44% {
    background-position: 37.5% 39.96%;
  }
  44.01% {
    background-position: 50% 39.96%;
  }
  55% {
    background-position: 50% 39.96%;
  }
  55.01% {
    background-position: 62.5% 39.96%;
  }
  66% {
    background-position: 62.5% 39.96%;
  }
  66.01% {
    background-position: 75% 39.96%;
  }
  77% {
    background-position: 75% 39.96%;
  }
  77.01% {
    background-position: 87.5% 39.96%;
  }
  88% {
    background-position: 87.5% 39.96%;
  }
  88.01% {
    background-position: 100% 39.96%;
  }
  100% {
    background-position: 100% 39.96%;
  }
}

.TanQY > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 43.29%;
}
.TanQY:hover .TanQY-cartoon {
  animation: TanQY 2s infinite steps(1, start);
}
@keyframes TanQY {
  0% {
    background-position: 0 43.29%;
  }
  20% {
    background-position: 0% 43.29%;
  }
  20.01% {
    background-position: 12.5% 43.29%;
  }
  40% {
    background-position: 12.5% 43.29%;
  }
  40.01% {
    background-position: 25% 43.29%;
  }
  60% {
    background-position: 25% 43.29%;
  }
  60.01% {
    background-position: 37.5% 43.29%;
  }
  80% {
    background-position: 37.5% 43.29%;
  }
  80.01% {
    background-position: 50% 43.29%;
  }
  100% {
    background-position: 50% 43.29%;
  }
}

.DongSR > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 46.620000000000005%;
}
.DongSR:hover .DongSR-cartoon {
  animation: DongSR 2s infinite steps(1, start);
}
@keyframes DongSR {
  0% {
    background-position: 0 46.620000000000005%;
  }
  11% {
    background-position: 0% 46.620000000000005%;
  }
  11.01% {
    background-position: 12.5% 46.620000000000005%;
  }
  22% {
    background-position: 12.5% 46.620000000000005%;
  }
  22.01% {
    background-position: 25% 46.620000000000005%;
  }
  33% {
    background-position: 25% 46.620000000000005%;
  }
  33.01% {
    background-position: 37.5% 46.620000000000005%;
  }
  44% {
    background-position: 37.5% 46.620000000000005%;
  }
  44.01% {
    background-position: 50% 46.620000000000005%;
  }
  55% {
    background-position: 50% 46.620000000000005%;
  }
  55.01% {
    background-position: 62.5% 46.620000000000005%;
  }
  66% {
    background-position: 62.5% 46.620000000000005%;
  }
  66.01% {
    background-position: 75% 46.620000000000005%;
  }
  77% {
    background-position: 75% 46.620000000000005%;
  }
  77.01% {
    background-position: 87.5% 46.620000000000005%;
  }
  88% {
    background-position: 87.5% 46.620000000000005%;
  }
  88.01% {
    background-position: 100% 46.620000000000005%;
  }
  100% {
    background-position: 100% 46.620000000000005%;
  }
}

.GeYT > .back > .cartoon {
  transform: scale(1.1);
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 49.95%;
}
.GeYT:hover .GeYT-cartoon {
  animation: GeYT 2s infinite steps(1, start);
}
@keyframes GeYT {
  0% {
    background-position: 0 49.95%;
  }
  12% {
    background-position: 0% 49.95%;
  }
  12.01% {
    background-position: 12.5% 49.95%;
  }
  24% {
    background-position: 12.5% 49.95%;
  }
  24.01% {
    background-position: 25% 49.95%;
  }
  36% {
    background-position: 25% 49.95%;
  }
  36.01% {
    background-position: 37.5% 49.95%;
  }
  48% {
    background-position: 37.5% 49.95%;
  }
  48.01% {
    background-position: 50% 49.95%;
  }
  60% {
    background-position: 50% 49.95%;
  }
  60.01% {
    background-position: 62.5% 49.95%;
  }
  72% {
    background-position: 62.5% 49.95%;
  }
  72.01% {
    background-position: 75% 49.95%;
  }
  84% {
    background-position: 75% 49.95%;
  }
  84.01% {
    background-position: 87.5% 49.95%;
  }
  100% {
    background-position: 87.5% 49.95%;
  }
}

.GuoYT > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 53.28%;
}
.GuoYT:hover .GuoYT-cartoon {
  animation: GuoYT 2s infinite steps(1, start);
}
@keyframes GuoYT {
  0% {
    background-position: 0 53.28%;
  }
  14% {
    background-position: 0% 53.28%;
  }
  14.01% {
    background-position: 12.5% 53.28%;
  }
  28% {
    background-position: 12.5% 53.28%;
  }
  28.01% {
    background-position: 25% 53.28%;
  }
  42% {
    background-position: 25% 53.28%;
  }
  42.01% {
    background-position: 37.5% 53.28%;
  }
  56% {
    background-position: 37.5% 53.28%;
  }
  56.01% {
    background-position: 50% 53.28%;
  }
  70% {
    background-position: 50% 53.28%;
  }
  70.01% {
    background-position: 62.5% 53.28%;
  }
  84% {
    background-position: 62.5% 53.28%;
  }
  84.01% {
    background-position: 75% 53.28%;
  }
  100% {
    background-position: 75% 53.28%;
  }
}

.LiuHY > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 56.61%;
}
.LiuHY:hover .LiuHY-cartoon {
  animation: LiuHY 2s infinite steps(1, start);
}
@keyframes LiuHY {
  0% {
    background-position: 0 56.61%;
  }
  20% {
    background-position: 0% 56.61%;
  }
  20.01% {
    background-position: 12.5% 56.61%;
  }
  40% {
    background-position: 12.5% 56.61%;
  }
  40.01% {
    background-position: 25% 56.61%;
  }
  60% {
    background-position: 25% 56.61%;
  }
  60.01% {
    background-position: 37.5% 56.61%;
  }
  80% {
    background-position: 37.5% 56.61%;
  }
  80.01% {
    background-position: 50% 56.61%;
  }
  100% {
    background-position: 50% 56.61%;
  }
}

.LiaoXH > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 59.94%;
}
.LiaoXH:hover .LiaoXH-cartoon {
  animation: LiaoXH 2s infinite steps(1, start);
}
@keyframes LiaoXH {
  0% {
    background-position: 0 59.94%;
  }
  14% {
    background-position: 0% 59.94%;
  }
  14.01% {
    background-position: 12.5% 59.94%;
  }
  28% {
    background-position: 12.5% 59.94%;
  }
  28.01% {
    background-position: 25% 59.94%;
  }
  42% {
    background-position: 25% 59.94%;
  }
  42.01% {
    background-position: 37.5% 59.94%;
  }
  56% {
    background-position: 37.5% 59.94%;
  }
  56.01% {
    background-position: 50% 59.94%;
  }
  70% {
    background-position: 50% 59.94%;
  }
  70.01% {
    background-position: 62.5% 59.94%;
  }
  84% {
    background-position: 62.5% 59.94%;
  }
  84.01% {
    background-position: 75% 59.94%;
  }
  100% {
    background-position: 75% 59.94%;
  }
}

.RenQ > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 63.27%;
}
.RenQ:hover .RenQ-cartoon {
  animation: RenQ 2s infinite steps(1, start);
}
@keyframes RenQ {
  0% {
    background-position: 0 63.27%;
  }
  12% {
    background-position: 0% 63.27%;
  }
  12.01% {
    background-position: 12.5% 63.27%;
  }
  24% {
    background-position: 12.5% 63.27%;
  }
  24.01% {
    background-position: 25% 63.27%;
  }
  36% {
    background-position: 25% 63.27%;
  }
  36.01% {
    background-position: 37.5% 63.27%;
  }
  48% {
    background-position: 37.5% 63.27%;
  }
  48.01% {
    background-position: 50% 63.27%;
  }
  60% {
    background-position: 50% 63.27%;
  }
  60.01% {
    background-position: 62.5% 63.27%;
  }
  72% {
    background-position: 62.5% 63.27%;
  }
  72.01% {
    background-position: 75% 63.27%;
  }
  84% {
    background-position: 75% 63.27%;
  }
  84.01% {
    background-position: 87.5% 63.27%;
  }
  100% {
    background-position: 87.5% 63.27%;
  }
}

.Eating > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 66.6%;
}
.Eating:hover .Eating-cartoon {
  animation: Eating 2s infinite steps(1, start);
}
@keyframes Eating {
  0% {
    background-position: 0 66.6%;
  }
  25% {
    background-position: 0% 66.6%;
  }
  25.01% {
    background-position: 12.5% 66.6%;
  }
  50% {
    background-position: 12.5% 66.6%;
  }
  50.01% {
    background-position: 25% 66.6%;
  }
  75% {
    background-position: 25% 66.6%;
  }
  75.01% {
    background-position: 37.5% 66.6%;
  }
  100% {
    background-position: 37.5% 66.6%;
  }
}

.GeLH > .back > .cartoon {
  transform: scale(1.1);
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 69.93%;
}
.GeLH:hover .GeLH-cartoon {
  animation: GeLH 2s infinite steps(1, start);
}
@keyframes GeLH {
  0% {
    background-position: 0 69.93%;
  }
  14% {
    background-position: 0% 69.93%;
  }
  14.01% {
    background-position: 12.5% 69.93%;
  }
  28% {
    background-position: 12.5% 69.93%;
  }
  28.01% {
    background-position: 25% 69.93%;
  }
  42% {
    background-position: 25% 69.93%;
  }
  42.01% {
    background-position: 37.5% 69.93%;
  }
  56% {
    background-position: 37.5% 69.93%;
  }
  56.01% {
    background-position: 50% 69.93%;
  }
  70% {
    background-position: 50% 69.93%;
  }
  70.01% {
    background-position: 62.5% 69.93%;
  }
  84% {
    background-position: 62.5% 69.93%;
  }
  84.01% {
    background-position: 75% 69.93%;
  }
  100% {
    background-position: 75% 69.93%;
  }
}

.ShiXY > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 73.26%;
}
.ShiXY:hover .ShiXY-cartoon {
  animation: ShiXY 2s infinite steps(1, start);
}
@keyframes ShiXY {
  0% {
    background-position: 0 73.26%;
  }
  11% {
    background-position: 0% 73.26%;
  }
  11.01% {
    background-position: 12.5% 73.26%;
  }
  22% {
    background-position: 12.5% 73.26%;
  }
  22.01% {
    background-position: 25% 73.26%;
  }
  33% {
    background-position: 25% 73.26%;
  }
  33.01% {
    background-position: 37.5% 73.26%;
  }
  44% {
    background-position: 37.5% 73.26%;
  }
  44.01% {
    background-position: 50% 73.26%;
  }
  55% {
    background-position: 50% 73.26%;
  }
  55.01% {
    background-position: 62.5% 73.26%;
  }
  66% {
    background-position: 62.5% 73.26%;
  }
  66.01% {
    background-position: 75% 73.26%;
  }
  77% {
    background-position: 75% 73.26%;
  }
  77.01% {
    background-position: 87.5% 73.26%;
  }
  88% {
    background-position: 87.5% 73.26%;
  }
  88.01% {
    background-position: 100% 73.26%;
  }
  100% {
    background-position: 100% 73.26%;
  }
}

.GuoYY > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 76.59%;
}
.GuoYY:hover .GuoYY-cartoon {
  animation: GuoYY 2s infinite steps(1, start);
}
@keyframes GuoYY {
  0% {
    background-position: 0 76.59%;
  }
  25% {
    background-position: 0% 76.59%;
  }
  25.01% {
    background-position: 12.5% 76.59%;
  }
  50% {
    background-position: 12.5% 76.59%;
  }
  50.01% {
    background-position: 25% 76.59%;
  }
  75% {
    background-position: 25% 76.59%;
  }
  75.01% {
    background-position: 37.5% 76.59%;
  }
  100% {
    background-position: 37.5% 76.59%;
  }
}

.YuHY > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 79.92%;
}
.YuHY:hover .YuHY-cartoon {
  animation: YuHY 2s infinite steps(1, start);
}
@keyframes YuHY {
  0% {
    background-position: 0 79.92%;
  }
  20% {
    background-position: 0% 79.92%;
  }
  20.01% {
    background-position: 12.5% 79.92%;
  }
  40% {
    background-position: 12.5% 79.92%;
  }
  40.01% {
    background-position: 25% 79.92%;
  }
  60% {
    background-position: 25% 79.92%;
  }
  60.01% {
    background-position: 37.5% 79.92%;
  }
  80% {
    background-position: 37.5% 79.92%;
  }
  80.01% {
    background-position: 50% 79.92%;
  }
  100% {
    background-position: 50% 79.92%;
  }
}

.QuJY > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 83.25%;
}
.QuJY:hover .QuJY-cartoon {
  animation: QuJY 2s infinite steps(1, start);
}
@keyframes QuJY {
  0% {
    background-position: 0 83.25%;
  }
  16% {
    background-position: 0% 83.25%;
  }
  16.01% {
    background-position: 12.5% 83.25%;
  }
  32% {
    background-position: 12.5% 83.25%;
  }
  32.01% {
    background-position: 25% 83.25%;
  }
  48% {
    background-position: 25% 83.25%;
  }
  48.01% {
    background-position: 37.5% 83.25%;
  }
  64% {
    background-position: 37.5% 83.25%;
  }
  64.01% {
    background-position: 50% 83.25%;
  }
  80% {
    background-position: 50% 83.25%;
  }
  80.01% {
    background-position: 62.5% 83.25%;
  }
  100% {
    background-position: 62.5% 83.25%;
  }
}

.SunH > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 86.58%;
}
.SunH:hover .SunH-cartoon {
  animation: SunH 2s infinite steps(1, start);
}
@keyframes SunH {
  0% {
    background-position: 0 86.58%;
  }
  12% {
    background-position: 0% 86.58%;
  }
  12.01% {
    background-position: 12.5% 86.58%;
  }
  24% {
    background-position: 12.5% 86.58%;
  }
  24.01% {
    background-position: 25% 86.58%;
  }
  36% {
    background-position: 25% 86.58%;
  }
  36.01% {
    background-position: 37.5% 86.58%;
  }
  48% {
    background-position: 37.5% 86.58%;
  }
  48.01% {
    background-position: 50% 86.58%;
  }
  60% {
    background-position: 50% 86.58%;
  }
  60.01% {
    background-position: 62.5% 86.58%;
  }
  72% {
    background-position: 62.5% 86.58%;
  }
  72.01% {
    background-position: 75% 86.58%;
  }
  84% {
    background-position: 75% 86.58%;
  }
  84.01% {
    background-position: 87.5% 86.58%;
  }
  100% {
    background-position: 87.5% 86.58%;
  }
}

.YangBH > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 89.91%;
}
.YangBH:hover .YangBH-cartoon {
  animation: YangBH 2s infinite steps(1, start);
}
@keyframes YangBH {
  0% {
    background-position: 0 89.91%;
  }
  20% {
    background-position: 0% 89.91%;
  }
  20.01% {
    background-position: 12.5% 89.91%;
  }
  40% {
    background-position: 12.5% 89.91%;
  }
  40.01% {
    background-position: 25% 89.91%;
  }
  60% {
    background-position: 25% 89.91%;
  }
  60.01% {
    background-position: 37.5% 89.91%;
  }
  80% {
    background-position: 37.5% 89.91%;
  }
  80.01% {
    background-position: 50% 89.91%;
  }
  100% {
    background-position: 50% 89.91%;
  }
}

.XiaoYX > .back > .cartoon {
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 93.24000000000001%;
}
.XiaoYX:hover .XiaoYX-cartoon {
  animation: XiaoYX 2s infinite steps(1, start);
}
@keyframes XiaoYX {
  0% {
    background-position: 0 93.24000000000001%;
  }
  33% {
    background-position: 0% 93.24000000000001%;
  }
  33.01% {
    background-position: 12.5% 93.24000000000001%;
  }
  66% {
    background-position: 12.5% 93.24000000000001%;
  }
  66.01% {
    background-position: 25% 93.24000000000001%;
  }
  100% {
    background-position: 25% 93.24000000000001%;
  }
}

.SunT > .back > .cartoon {
  transform: scale(1.1);
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 96.57000000000001%;
}
.SunT:hover .SunT-cartoon {
  animation: SunT 2s infinite steps(1, start);
}
@keyframes SunT {
  0% {
    background-position: 0 96.57000000000001%;
  }
  25% {
    background-position: 0% 96.57000000000001%;
  }
  25.01% {
    background-position: 12.5% 96.57000000000001%;
  }
  50% {
    background-position: 12.5% 96.57000000000001%;
  }
  50.01% {
    background-position: 25% 96.57000000000001%;
  }
  75% {
    background-position: 25% 96.57000000000001%;
  }
  75.01% {
    background-position: 37.5% 96.57000000000001%;
  }
  100% {
    background-position: 37.5% 96.57000000000001%;
  }
}

.DengYX > .back > .cartoon {
  transform: scale(1.1);
  background-size: 900% 3100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/cartoon/all-cartoon.png");
  background-position: 0 99.9%;
}
.DengYX:hover .DengYX-cartoon {
  animation: DengYX 2s infinite steps(1, start);
}
@keyframes DengYX {
  0% {
    background-position: 0 99.9%;
  }
  20% {
    background-position: 0% 99.9%;
  }
  20.01% {
    background-position: 12.5% 99.9%;
  }
  40% {
    background-position: 12.5% 99.9%;
  }
  40.01% {
    background-position: 25% 99.9%;
  }
  60% {
    background-position: 25% 99.9%;
  }
  60.01% {
    background-position: 37.5% 99.9%;
  }
  80% {
    background-position: 37.5% 99.9%;
  }
  80.01% {
    background-position: 50% 99.9%;
  }
  100% {
    background-position: 50% 99.9%;
  }
}
@media (max-width: 500px) {
  .HeYQ-cartoon {
    top: 0 !important;
  }
  .introduce {
    font-size: 2.3px;
  }
}