@charset "UTF-8";

.wheel {
  position: fixed;
  top: 50%;
  right: -0.3rem;
  z-index: 15;
  display: inline-block;
  width: 3.92rem;
  height: 3.41rem;
  margin-top: -0rem;
  background: url(//statics.igg.com/assets/cc/res/events/2021/turn-table/img/zhuanpan.png) no-repeat;
  background-size: 100% 100%;
  -webkit-animation: 2s gife infinite;
  -moz-animation: 2s gife infinite;
  -ms-animation: 2s btn infinite;
  -o-animation: 2s gife infinite;
  animation: 2s gife infinite;
  -webkit-transform: scale3d(0.9, 0.9, 0.9);
  -moz-transform: scale3d(0.9, 0.9, 0.9);
  -ms-transform: scale3d(0.9, 0.9, 0.9);
  -o-transform: scale3d(0.9, 0.9, 0.9);
  transform: scale3d(0.9, 0.9, 0.9);
  z-index: 15;
}
@-webkit-keyframes gife {
  0% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
  }
  5%,
  10% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -1deg);
  }
  15%,
  5%,
  35%,
  45% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 1deg);
  }
  20%,
  30%,
  40% {
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -1deg);
  }
  50% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
  }
}
@-moz-keyframes gife {
  0% {
    -moz-transform: scale3d(0.9, 0.9, 0.9);
  }
  5%,
  10% {
    -moz-transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -1deg);
  }
  15%,
  5%,
  35%,
  45% {
    -moz-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 1deg);
  }
  20%,
  30%,
  40% {
    -moz-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -1deg);
  }
  50% {
    -moz-transform: scale3d(0.9, 0.9, 0.9);
  }
}
@-ms-keyframes gife {
  0% {
    -ms-transform: scale3d(0.9, 0.9, 0.9);
  }
  5%,
  10% {
    -ms-transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -1deg);
  }
  15%,
  5%,
  35%,
  45% {
    -ms-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 1deg);
  }
  20%,
  30%,
  40% {
    -ms-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -1deg);
  }
  50% {
    -ms-transform: scale3d(0.9, 0.9, 0.9);
  }
}
@-o-keyframes gife {
  0% {
    -o-transform: scale3d(0.9, 0.9, 0.9);
  }
  5%,
  10% {
    -o-transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -1deg);
  }
  15%,
  5%,
  35%,
  45% {
    -o-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 1deg);
  }
  20%,
  30%,
  40% {
    -o-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -1deg);
  }
  50% {
    -o-transform: scale3d(0.9, 0.9, 0.9);
  }
}
@keyframes gife {
  0% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  5%,
  10% {
    transform: scale3d(0.8, 0.8, 0.8) rotate3d(0, 0, 1, -1deg);
  }
  15%,
  5%,
  35%,
  45% {
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 1deg);
  }
  20%,
  30%,
  40% {
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -1deg);
  }
  50% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
}
/* .wheel::after {
  position: absolute;
  top: 0.78rem;
  left: 1.02rem;
  width: 1.06rem;
  height: 1.06rem;
  background: url(//img1.igg.com/game/lo/images/event/lords/a15/zhizhen.png) no-repeat center top / contain;
  content: '';
} */
.card {
  position: fixed;
  top: 50%;
  right: 0.1rem;
  z-index: 2;
  display: inline-block;
  width: 3rem;
  height: 3rem;
  margin-top: 1.5rem;
  background: url(//statics.igg.com/assets/lo/res/events/2021/lords-card/img/icon-fanpai3.png) no-repeat;
  background-size: 100% 100%;
  z-index: 15;
}
.card {
  -webkit-transform: scale3d(0.9, 0.9, 0.9);
  -moz-transform: scale3d(0.9, 0.9, 0.9);
  -ms-transform: scale3d(0.9, 0.9, 0.9);
  -o-transform: scale3d(0.9, 0.9, 0.9);
  transform: scale3d(0.9, 0.9, 0.9);
  -webkit-animation: 2s gife infinite;
  -moz-animation: 2s gife infinite;
  -ms-animation: 2s btn infinite;
  -o-animation: 2s gife infinite;
  animation: 2s gife infinite;
}

@media screen and (max-width: 812px) and (orientation: portrait) {
  .wheel {
    top: 9rem;
    right: 0.05rem;
    width: 6.5rem;
    height: 5.66rem;
  }
   .card {
    top: 8.5rem;
    right: 0.1rem;
    width: 6.5rem;
    height: 6.5rem;
    /* width: 3rem;
    height: 3rem; */
  }
  /*
  .wheel::after {
    top: 0.54rem;
    left: 0.7rem;
    width: 0.742rem;
    height: 0.742rem;
  } */
}