body {
  background: linear-gradient(43.31deg, #000925 -1.53%, #3a0030 102.11%);
}

.ea_hc {
  background: none;
  min-height: inherit;
}

/* luckydraw */
.luckydraw {
  width: 100%;
  padding: 8.625vw 0px 0px 0px;
}

.luckydrawc {
  width: 100%;
}

.luckydrawct1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.luckydrawct1 img {
  width: 43.489583vw;
}

.luckydrawct2 {
  width: 100%;
  padding: 40px 0px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: WorkSans-Medium;
  font-weight: 500;
  font-size: 1.66666vw;
  line-height: 119.3%;
  /* or 38px */
  text-align: center;
  color: #ffffff;
}

.luckydrawct3 {
  width: 100%;
  padding: 30px 0px 7.03125vw 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: WorkSans-ExtraBold;
  font-weight: 800;
  font-size: 2.5vw;
  line-height: 119.3%;
  /* or 57px */
  text-align: center;
  color: #ffffff;
}

.luckydrawct4 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.luckydrawct4 span {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 7.29166vw;
  height: 7.29166vw;
  left: 883.24px;
  top: 848px;
  background: radial-gradient(92.09% 85.42% at 86.3% 87.5%,
      rgba(0, 0, 0, 0.23) 0%,
      rgba(0, 0, 0, 0) 86.18%)
    /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
    ,
    radial-gradient(65.28% 65.28% at 26.39% 20.83%,
      rgba(255, 255, 255, 0.413) 0%,
      rgba(255, 255, 255, 0) 69.79%,
      rgba(255, 255, 255, 0) 100%)
    /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
    ,
    #d458ff;
  box-shadow: 5.62376px 53.4257px 87.1683px rgba(0, 0, 0, 0.5);
  border-radius: 153.248px;
  font-family: SourceSansPro-Black;
  font-weight: 900;
  font-size: 2.60416vw;
  line-height: 2.60416vw;
  /* identical to box height */
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 1.40594px 1.40594px 1.40594px rgba(0, 0, 0, 0.25);

  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}

.luckydrawct5 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 800;
  font-size: 25px;
  line-height: 119.3%;
  /* or 30px */
  text-align: center;
  color: #ffffff;
  padding: 15px 0px 0px 0px;
}

.luckydrawctLi {
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  background: linear-gradient(43.31deg, #003654 -1.53%, #8b0075 102.11%);
  mix-blend-mode: normal;
  backdrop-filter: blur(80px);
  /* Note: backdrop-filter has minimal browser support */
  z-index: 1000;
}

.luckydrawctLir {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.luckydrawctLil {}

.luckydrawctLil1 {
  width: 100%;
  padding: 3.645833vw 0px;
  text-align: center;
}

.luckydrawctLil1 img {
  height: 6.25vw;
}

.luckydrawctLil2 {
  position: absolute;
  right: 10%;
  top: 6.25vw;
  cursor: pointer;
}

.luckydrawctLil2 img {
  height: 15px;
}

.cen {
  width: 830px;
  height: 625px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
}

.cen::before {
  display: block;
  content: "";
  background: url("/static/img/stage5.png") no-repeat 100% 100%;
  background-size: 100% 100%;
  width: 240px;
  height: 158px;
  z-index: 200;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.stageBgdb {
  position: absolute;
  width: 550px;
  height: 341px;
  background: url("/static/img/backboard.png") no-repeat 100% 100%;
  background-size: 100% 100%;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-40deg) rotateZ(0deg);
  transition: 0.8s;
  z-index: 1;
  top: 123px;
  right: -32px;
}

.stageqiandb_front {
  position: absolute;
  width: 515px;
  height: 80px;
  background: url("/static/img/front.png") no-repeat 100% 100%;
  background-size: 100% 100%;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-40deg) rotateZ(0deg);
  transition: 0.8s;
  z-index: 1000;
  bottom: 0px;
  left: -7px;
}

.stageqiandb_side {
  position: absolute;
  width: 426px;
  height: 95px;
  background: url("/static/img/side.png") no-repeat 100% 100%;
  transform-style: preserve-3d;
  transform: rotateX(37deg) rotateY(-38deg) rotateZ(-2deg);
  transition: 0.8s;
  background-size: 100% 100%;
  z-index: 1000;
  bottom: 11px;
  right: 0px;
}

.stage {
  position: relative;
  width: 180px;
  height: 180px;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-40deg) rotateZ(0deg);
  transition: 0.8s;
}

.stage1 {
  position: absolute;
  bottom: 77px;
  left: 93px;
  z-index: 100;
}

.stage2 {
  position: absolute;
  bottom: 131px;
  left: 200px;
  z-index: 95;
}

.stage3 {
  position: absolute;
  bottom: 186px;
  left: 309px;
  z-index: 94;
}

.stage4 {
  position: absolute;
  bottom: 31px;
  left: 222px;
  z-index: 200;
}

.stage5 {
  position: absolute;
  bottom: 86px;
  left: 330px;
  z-index: 150;
}

.stage6 {
  position: absolute;
  bottom: 141px;
  left: 438px;
  z-index: 100;
}

.stage7 {
  position: absolute;
  bottom: -15px;
  left: 352px;
  z-index: 300;
}

.stage8 {
  position: absolute;
  bottom: 41px;
  left: 460px;
  z-index: 250;
}

.stage9 {
  position: absolute;
  bottom: 95px;
  left: 567px;
  z-index: 215;
}

.stage>.face {
  position: absolute;
  width: 170px;
  height: 210px;
  /* box-shadow: 0 0 15px #999 inset; */
  font-size: 100px;
  line-height: 190px;
  text-align: center;
  bottom: 0px;
  left: 0px;
  transition: 0.8s;
}

.stage>.front {
  transform: translateZ(82px);
  background: url("/static/img/zhengmian.png") no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage>.rear {
  transform: rotateY(180deg) translateZ(85px);
  background: #000;
}

.stage>.left {
  transform: rotateY(-90deg) translateZ(82px);
  background: #000;
}

.stage>.right {
  transform: rotateY(90deg) translateZ(85px);
  background: url(/static/img/cemian.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage>.bottom {
  transform: rotateX(-90deg) translateZ(85px);
  background: #000;
}

.stage:hover {
  /* transform: rotateY(360deg); */
}

.small {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -25px;
  margin-top: -25px;
  transform-style: preserve-3d;
  transition: 0.8s;
  display: none;
}

.small>.face {
  position: absolute;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 15px #999 inset;
  font-size: 100px;
  line-height: 100px;
  text-align: center;
  color: pink;
}

.small>.front {
  background: url("images/1.jpg") no-repeat center;
  transform: translateZ(25px);
}

.small>.rear {
  background: url("images/2.jpg") no-repeat center;
  transform: rotateY(180deg) translateZ(25px);
}

.small>.left {
  background: url("images/3.jpg") no-repeat center;
  transform: rotateY(-90deg) translateZ(25px);
}

.small>.right {
  background: url("images/4.jpg") no-repeat center;
  transform: rotateY(90deg) translateZ(25px);
}

.small>.top {
  background: url("images/5.jpg") no-repeat center;
  transform: rotateX(90deg) translateZ(25px);
}

.small>.bottom {
  background: url("images/6.jpg") no-repeat center;
  transform: rotateX(-90deg) translateZ(25px);
}

.stagecur>.front,
.stagecur>.rear,
.stagecur>.left,
.stagecur>.right {
  height: 270px;
}

.stagecur>.top1 {
  transform-origin: center left;
  transform: translateZ(5px) translateX(2px) translateY(-92px) rotateX(90deg) rotateY(-0deg);
  transition: 0.8s;
  z-index: 2;
  height: 143px;
  width: 85px;
  background: url(img/shang_left.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stagecur>.front {
  /* transform: translateZ(65px); */
}

.stagecur:hover .small {
  /* transform: translateY(-400px) rotateY(360deg); */
}

.stage>.top1 {
  transform-origin: center left;
  transform: translateZ(8px) translateX(-93px) translateY(-130px) rotateX(90deg) rotateY(0deg);
  transition: 0.8s;
  z-index: 2;
  height: 170px;
  width: 85px;
  left: 100px;
  background: url(img/shang_left.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage1>.top1 {
  background: url(img/stage1_top_l.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage2>.top1 {
  background: url(img/stage2_top_l.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage3>.top1 {
  background: url(img/stage3_top_l.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage4>.top1 {
  background: url(img/stage4_top_l.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage6>.top1 {
  background: url(img/stage6_top_l.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage7>.top1 {
  background: url(img/stage7_top_l.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage8>.top1 {
  background: url(img/stage8_top_l.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage9>.top1 {
  background: url(img/stage9_top_l.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage>.top2 {
  transform-origin: center right;
  /* transform: rotateX(90deg) translateZ(100px); */
  transform: translateZ(8px) translateX(-7px) translateY(-130px) rotateX(90deg) rotateY(-0deg);
  transition: 0.8s;
  z-index: 2;
  height: 170px;
  width: 85px;
  left: 100px;
  background: url(img/shang_right.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage1>.top2 {
  background: url(img/stage1_top_r.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage2>.top2 {
  background: url(img/stage2_top_r.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage3>.top2 {
  background: url(img/stage3_top_r.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage4>.top2 {
  background: url(img/stage4_top_r.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage6>.top2 {
  background: url(img/stage6_top_r.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage7>.top2 {
  background: url(img/stage7_top_r.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage8>.top2 {
  background: url(img/stage8_top_r.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stage9>.top2 {
  background: url(img/stage9_top_r.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}

.stagecur>.top1 {
  transform: translateZ(7px) translateX(-88px) translateY(-190px) rotateX(90deg) rotateY(-0deg);
}

.stagecur>.top2 {
  transform: translateZ(8px) translateX(-6px) translateY(-190px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
}

.stagecur:hover>.top1 {
  transform: translateZ(7px) translateX(-88px) translateY(-160px) rotateX(90deg) rotateY(-125deg);
}

.stagecur:hover>.top2 {
  transform: translateZ(8px) translateX(-6px) translateY(-160px) rotateX(90deg) rotateY(125deg);
}

/* Winning */
.Winning {
  position: absolute;
  background: rgb(3 0 4 / 80%);
  border-radius: 40px;
  z-index: 2000;
  top: 50%;
  left: 50%;
  width: 0px;
  height: 0px;
  padding: 0px;
  box-sizing: border-box;
  opacity: 0;
  overflow: hidden;
  transition: all 1s ease;
  transform: translate(-50%, -50%);
}

.Winningcur {
  opacity: 1;
  width: 1000px;
  height: 800px;
  box-sizing: border-box;
}

.Winningclose {
  position: absolute;
  right: 5.208333vw;
  top: 5%;
}

.Winningclose img {
  height: 15px;
  cursor: pointer;
}

.Winningul {
  width: auto;
  height: auto;
}

.Winningul1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Winningul2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.Winningul3 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.Winningulli {
  background: linear-gradient(45deg,
      rgba(48, 27, 172, 0.2) 5.65%,
      rgba(137, 0, 74, 0.49) 94.35%);
  backdrop-filter: blur(11.4406px);

  /* Note: backdrop-filter has minimal browser support */
  border-radius: 30px;
  padding: 4.166vw 3.645833333vw;
  width: 400px;
  height: 600px;
  opacity: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 1s ease-out;
}

/* .Winningcur .Winningulli {
  border-radius: 2.6875vw;
  padding: 4.166vw 3.645833333vw;
  width: 28.3854vw;
  height: 43.564vw;
  opacity: 1;
} */

.Winningulwz1 {
  font-family: WorkSans-SemiBold;
  font-weight: 600;
  font-size: 1.875vw;
  line-height: 147.8%;

  /* or 53px */
  text-align: center;
  color: #ffffff;
}

.Winningulwz2 {
  font-weight: 600;
  font-size: 1.35416vw;
  line-height: 147.8%;

  /* or 38px */
  text-align: center;
  color: #ffffff;
}

.Winningulwz3 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Winningulwz3 a {
  padding:0.2rem 1.5rem;
  background: radial-gradient(92.09% 85.42% at 86.3% 87.5%,
      rgba(0, 0, 0, 0.23) 0%,
      rgba(0, 0, 0, 0) 86.18%),
    radial-gradient(65.28% 65.28% at 26.39% 20.83%,
      rgba(255, 255, 255, 0.413) 0%,
      rgba(255, 255, 255, 0) 69.79%,
      rgba(255, 255, 255, 0) 100%),
    #d458ff;
  box-shadow: 3.59649px 1.27117px 10.1694px rgba(148, 148, 148, 0.5);
  border-radius: 4.6875vw;
  border: 0px;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 31px;
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0.899124px 0.899124px 0.899124px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


.Winningulimg {
  width: 100%;
  text-align: center;
}

.Winningulimg img {
  max-width: 100%;
}

.Winningul3 .Winningulli {
  padding: 2.08333vw 3.125vw;
}

.Winningul3 .Winningulimg img {
  width: 13.5416vw;
}

.Winningul3 .Winningulwz1 {
  /* font-size: 1.041666vw; */
}

.Winningul3 .Winningulwz2 {
  /* font-size: 0.78125vw; */
}

.Winningul3 .Winningulwz3 button {
  width: 6.291666vw;
  height: 2.645833333vw;
  font-size: 0.9239vw;
  font-weight: 300;
}

/* Winning end*/
@media screen and (max-width: 768px) {


  .Winning {
    border-radius:0;
  }

  .Winningcur {
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .Winningulli{
    width:auto;
    height:auto;
    position:static;
    transform: none;
  }

  .Winningclose {
    position: absolute;
    right: 5.208333vw;
    top: 5%;
  }

  .Winningclose img {
    height: 15px;
    cursor: pointer;
  }

  .Winningul {
    width: auto;
    height: auto;
  }

  .Winningul1 {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .Winningul2 {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .Winningul3 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .Winningulli {



    /* Note: backdrop-filter has minimal browser support */

    border-radius: 10px;

    padding: 20px;

    width: 270px;

    height: 80%;

  }

  /* .Winningcur .Winningulli {
    border-radius: 2.6875vw;
    padding: 4.166vw 3.645833333vw;
    width: 28.3854vw;
    height: 43.564vw;
    opacity: 1;
  } */

  .Winningulwz1 {
    font-weight: 100;
    font-size: 16px;


    /* or 53px */
  }

  .Winningulwz2 {
    font-weight: 100;
    font-size: 14px;


    /* or 38px */
  }

  .Winningulwz3 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .Winningulwz3 a {
    font-weight: 200;
  }


  .Winningulimg {
    width: 100%;
    text-align: center;
  }

  .Winningulimg img {
    max-width: 100%;
  }

  .Winningul3 .Winningulli {
    padding: 2.08333vw 3.125vw;
  }

  .Winningul3 .Winningulimg img {
    width: 13.5416vw;
  }

  .Winningul3 .Winningulwz1 {
    /* font-size: 1.041666vw; */
  }

  .Winningul3 .Winningulwz2 {
    /* font-size: 0.78125vw; */
  }

  .Winningul3 .Winningulwz3 button {
    width: 6.291666vw;
    height: 2.645833333vw;
    font-size: 0.9239vw;
    font-weight: 300;
  }
}

/* luckydraw end*/

@media screen and (max-width: 768px) {
  .luckydraw {
    width: 100%;
    padding: 8.625vw 0px 0px 0px;
  }

  .luckydrawc {
    width: 100%;
  }

  .luckydrawct1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .luckydrawct1 img {
    width: 43.489583vw;
  }

  .luckydrawct2 {
    width: 100%;
    padding: 40px 0px 0px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: WorkSans-Medium;
    font-weight: 500;
    font-size: 1.66666vw;
    line-height: 119.3%;
    /* or 38px */
    text-align: center;
    color: #ffffff;
  }

  .luckydrawct3 {
    width: 100%;
    padding: 30px 0px 7.03125vw 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: WorkSans-ExtraBold;
    font-weight: 800;
    font-size: 2.5vw;
    line-height: 119.3%;
    /* or 57px */
    text-align: center;
    color: #ffffff;
  }

  .luckydrawct4 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .luckydrawct4 span {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 7.29166vw;
    height: 7.29166vw;
    left: 883.24px;
    top: 848px;
    background: radial-gradient(92.09% 85.42% at 86.3% 87.5%,
        rgba(0, 0, 0, 0.23) 0%,
        rgba(0, 0, 0, 0) 86.18%)
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
      ,
      radial-gradient(65.28% 65.28% at 26.39% 20.83%,
        rgba(255, 255, 255, 0.413) 0%,
        rgba(255, 255, 255, 0) 69.79%,
        rgba(255, 255, 255, 0) 100%)
      /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */
      ,
      #d458ff;
    box-shadow: 5.62376px 53.4257px 87.1683px rgba(0, 0, 0, 0.5);
    border-radius: 153.248px;
    font-family: SourceSansPro-Black;
    font-weight: 900;
    font-size: 2.60416vw;
    line-height: 2.60416vw;
    /* identical to box height */
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 1.40594px 1.40594px 1.40594px rgba(0, 0, 0, 0.25);

    /* Inside auto layout */
    flex: none;
    order: 0;
    flex-grow: 0;
  }

  .luckydrawct5 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Work Sans";
    font-style: normal;
    font-weight: 800;
    font-size: 25px;
    line-height: 119.3%;
    /* or 30px */
    text-align: center;
    color: #ffffff;
    padding: 15px 0px 0px 0px;
  }

  .luckydrawctLi {
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;

    /* Note: backdrop-filter has minimal browser support */
    z-index: 1000;
    flex-wrap: wrap;
  }

  .luckydrawctLir {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .luckydrawctLil {}

  .luckydrawctLil1 {
    width: 100%;
    padding: 3.645833vmax 0px;
    text-align: center;
  }

  .luckydrawctLil1 img {
    height: 6.25vmax;
  }

  .luckydrawctLil2 {
    position: absolute;
    right: 10%;
    top: 6.25vw;
    cursor: pointer;
  }

  .luckydrawctLil2 img {
    height: 15px;
  }

  .cen {
    width: 360px;
    height: 270px;
  }

  .cen::before {
    width: 105px;
    height: 69px;
  }

  .stageBgdb {
    position: absolute;
    width: 240px;
    height: 148px;
    transition: 0.8s;
    z-index: 1;
    top: 53px;
    right: -14px;
  }

  .stageqiandb_front {
    position: absolute;
    width: 224px;
    height: 35px;
    transform: rotateX(-25deg) rotateY(-40deg) rotateZ(0deg);
    transition: 0.8s;
    z-index: 1000;
    bottom: 0px;
    left: -3px;
  }

  .stageqiandb_side {
    position: absolute;
    width: 185px;
    height: 41px;
    transform: rotateX(37deg) rotateY(-38deg) rotateZ(-2deg);
    transition: 0.8s;
    background-size: 100% 100%;
    z-index: 1000;
    bottom: 3px;
    right: 0px;
  }

  .stage {
    position: relative;
    width: 78px;
    height: 78px;
    transform-style: preserve-3d;
    transform: rotateX(-25deg) rotateY(-40deg) rotateZ(0deg);
    transition: 0.8s;
  }

  .stage1 {
    position: absolute;
    bottom: 32px;
    left: 40px;
    z-index: 100;
  }

  .stage2 {
    position: absolute;
    bottom: 56px;
    left: 87px;
    z-index: 95;
  }

  .stage3 {
    position: absolute;
    bottom: 81px;
    left: 134px;
    z-index: 94;
  }

  .stage4 {
    position: absolute;
    bottom: 13px;
    left: 96px;
    z-index: 200;
  }

  .stage5 {
    position: absolute;
    bottom: 37px;
    left: 143px;
    z-index: 150;
  }

  .stage6 {
    position: absolute;
    bottom: 61px;
    left: 190px;
    z-index: 100;
  }

  .stage7 {
    position: absolute;
    bottom: -8px;
    left: 155px;
    z-index: 300;
  }

  .stage8 {
    position: absolute;
    bottom: 16px;
    left: 200px;
    z-index: 250;
  }

  .stage9 {
    position: absolute;
    bottom: 40px;
    left: 246px;
    z-index: 215;
  }

  .stage>.face {
    position: absolute;
    width: 75px;
    height: 90px;
  }

  .stage>.front {
    transform: translateZ(38px);
  }

  .stage>.rear {
    transform: rotateY(180deg) translateZ(37px);
    background: #000;
  }

  .stage>.left {
    transform: rotateY(-90deg) translateZ(36px);
    background: #000;
  }

  .stage>.right {
    transform: rotateY(90deg) translateZ(38px);
    background: url(/static/img/cemian.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage>.bottom {
    transform: rotateX(-88deg) translateY(5px) translateZ(45px);
    background: #000;
  }

  .stage:hover {
    /* transform: rotateY(360deg); */
  }

  .small {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin-left: -25px;
    margin-top: -25px;
    transform-style: preserve-3d;
    transition: 0.8s;
    display: none;
  }

  .small>.face {
    position: absolute;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px #999 inset;
    font-size: 100px;
    line-height: 100px;
    text-align: center;
    color: pink;
  }

  .small>.front {
    background: url("images/1.jpg") no-repeat center;
    transform: translateZ(25px);
  }

  .small>.rear {
    background: url("images/2.jpg") no-repeat center;
    transform: rotateY(180deg) translateZ(25px);
  }

  .small>.left {
    background: url("images/3.jpg") no-repeat center;
    transform: rotateY(-90deg) translateZ(25px);
  }

  .small>.right {
    background: url("images/4.jpg") no-repeat center;
    transform: rotateY(90deg) translateZ(25px);
  }

  .small>.top {
    background: url("images/5.jpg") no-repeat center;
    transform: rotateX(90deg) translateZ(25px);
  }

  .small>.bottom {
    background: url("images/6.jpg") no-repeat center;
    transform: rotateX(-90deg) translateZ(25px);
  }

  .stagecur>.front,
  .stagecur>.rear,
  .stagecur>.left,
  .stagecur>.right {
    height: 104px;
  }

  .stagecur>.top1 {
    transform-origin: center left;
    transform: translateZ(5px) translateX(2px) translateY(-92px) rotateX(90deg) rotateY(-0deg);
    transition: 0.8s;
    z-index: 2;
    height: 143px;
    width: 85px;
    background: url(img/shang_left.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stagecur>.front {
    /* transform: translateZ(36px); */
  }

  .stagecur:hover .small {
    /* transform: translateY(-400px) rotateY(360deg); */
  }

  .stage>.top1 {
    transform-origin: center left;
    transform: translateZ(6px) translateX(-39px) translateY(-57px) rotateX(90deg) rotateY(0deg);
    transition: 0.8s;
    z-index: 2;
    height: 74px;
    width: 40px;
    left: 44px;
    background: url(img/shang_left.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage1>.top1 {
    background: url(img/stage1_top_l.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage2>.top1 {
    background: url(img/stage2_top_l.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage3>.top1 {
    background: url(img/stage3_top_l.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage4>.top1 {
    background: url(img/stage4_top_l.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage6>.top1 {
    background: url(img/stage6_top_l.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage7>.top1 {
    background: url(img/stage7_top_l.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage8>.top1 {
    background: url(img/stage8_top_l.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage9>.top1 {
    background: url(img/stage9_top_l.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage>.top2 {
    transform-origin: center right;
    /* transform: rotateX(90deg) translateZ(100px); */
    transform: translateZ(7px) translateX(0px) translateY(-57px) rotateX(90deg) rotateY(-0deg);
    transition: 0.8s;
    z-index: 2;
    height: 74px;
    width: 40px;
    left: 44px;
  }

  .stage1>.top2 {
    background: url(img/stage1_top_r.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage2>.top2 {
    background: url(img/stage2_top_r.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage3>.top2 {
    background: url(img/stage3_top_r.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage4>.top2 {
    background: url(img/stage4_top_r.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage6>.top2 {
    background: url(img/stage6_top_r.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage7>.top2 {
    background: url(img/stage7_top_r.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage8>.top2 {
    background: url(img/stage8_top_r.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stage9>.top2 {
    background: url(img/stage9_top_r.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }

  .stagecur>.top1 {
    transform: translateZ(2px) translateX(-42px) translateY(-67px) rotateX(90deg) rotateY(-0deg);
  }

  .stagecur>.top2 {
    transform: translateZ(7px) translateX(0px) translateY(-70px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  }

  .stagecur:hover>.top1 {
    transform: translateZ(7px) translateX(-88px) translateY(-160px) rotateX(90deg) rotateY(-125deg);
  }

  .stagecur:hover>.top2 {
    transform: translateZ(8px) translateX(-6px) translateY(-160px) rotateX(90deg) rotateY(125deg);
  }
}