.ban-bg {
  width: 10rem;
  height: 10.426rem;
  background: url(../images/bg.png) no-repeat;
  background-size: 100% 100%;
  position: fixed;
  bottom: 0.5rem;
  left: 0;
  overflow: hidden;
}
.fly-bg {
  position: absolute;
  width: 10rem;
  height: 10.426rem;
  background: url(../images/bg-fly.png) no-repeat;
  background-size: 100% auto;
  background-position-y: -44.3rem;
  left: 0;
  bottom: 0.5rem;
  z-index: -1;
  border-radius: 0.2rem 0.2rem 0 0;
  transition: 1s linear all;
}
.fly-bg-show {
  animation: flyBgShow 4s linear infinite;
}
@keyframes flyBgShow {
  0% {
    background-position-y: -33rem;
  }
  100% {
    background-position-y: 0rem;
  }
}
.bottom-box1 {
  width: 10rem;
  height: 3.13rem;
  background: url(../images/bottom-box1.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 0.35s all;
  z-index: 2;
}
.bottom-box2 {
  width: 10rem;
  height: 2.373rem;
  background: url(../images/bottom-box2.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  transition: 0.5s all;
  bottom: -2.373rem;
}
.out-fly-btn {
  position: absolute;
  left: 2.947rem;
  top: 0.9rem;
  width: 4.106rem;
  height: 1.106rem;
  background: url(../images/out-fly-btn.png) no-repeat;
  background-size: 100% 100%;
}
.out-fly-end {
  position: absolute;
  left: 2.947rem;
  top: 0.9rem;
  width: 4.106rem;
  height: 1.106rem;
  background: url(../images/out-fly-end.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  font-size: 0.33rem;
  color: #fff;
  line-height: 1.106rem;
}
.out-fly-no {
  position: absolute;
  left: 3.0135rem;
  top: 0.95rem;
  width: 3.974rem;
  height: 0.974rem;
  background: url(../images/out-fly-no.png) no-repeat;
  background-size: 100% 100%;
}
.card-box {
  height: 0.55rem;
  line-height: 0.53rem;
  width: 3.2rem;
  position: absolute;
  left: 3.4rem;
  top: 0;
  text-align: center;
  font-size: 0.3rem;
  color: #fff;
  vertical-align: middle;
}
.card-box > img {
  width: 0.45rem;
  position: relative;
  top: 0.08rem;
}
.card-add-box {
  height: 0.55rem;
  width: 3.2rem;
  position: absolute;
  top: 0;
  left: 0;
}
.card-add-num {
  width: 3.2rem;
  text-align: center;
  font-size: 0.35rem;
  color: #fff;
  transform: translate(0, 0.5rem);
  animation: addShow 0.4s linear 1 forwards;
  position: absolute;
  bottom: 0;
}
@keyframes addShow {
  0% {
    transform: translate(0, 0.5rem);
    opacity: 1 ;
  }
  50% {
    transform: translate(0, 0.2rem);
    opacity: 1;
  }
  100% {
    transform: translate(0, -0.3rem);
    opacity: 0;
  }
}
.bottom-money-box {
  margin-top: 0.85rem;
  width: 10rem;
}
.bottom-money-box li {
  width: 2.29rem;
  height: 0.93rem;
  text-align: center;
  line-height: 0.93rem;
  font-size: 0.3rem;
  color: #fff;
  font-weight: 700;
  background: url(../images/rich-box.png) no-repeat;
  background-size: 100% 100%;
  float: left;
  margin-left: 0.16rem;
  transition: 0.1s all;
  position: relative;
  text-indent: 0.33rem;
}
.bottom-money-box li > img {
  width: 0.38rem;
  position: absolute;
  top: 0.23rem;
  left: 0.5rem;
}
.bottom-money-box .li-money-click {
  background: url(../images/rich-box-click.png) no-repeat;
  background-size: 100% 100%;
  color: #0bfffb;
  transform: scale(1);
}
.diamond-box {
  width: 4.0147rem;
  height: 0.95rem;
  line-height: 0.95rem;
  color: #fff;
  position: absolute;
  text-indent: 1rem;
  font-size: 0.35rem;
  top: 1.98rem;
  left: 0.26rem;
  background: url(../images/diamond-box.png) no-repeat;
  background-size: 100% 100%;
}
.add-btn {
  height: 0.68rem;
  position: absolute;
  right: 0.2rem;
  top: 0.13rem;
}
.go-btn {
  width: 5.12rem;
  height: 1.6rem;
  background: url(../images/go-btn-show.png) no-repeat;
  background-size: 100% auto;
  position: absolute;
  right: 0.3rem;
  top: 1.65rem;
  transform: scale(0.82);
  animation: goBtnShow 3s steps(44, start) 0ms infinite forwards;
}
@keyframes goBtnShow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -70.4rem;
  }
}
.hot {
  width: 2.506rem;
  position: absolute;
  top: 2.45rem;
  left: -0.2rem;
  display: none;
  opacity: 0.85;
}
.hot-go {
  display: none;
  width: 7rem;
  position: absolute;
  left: -2.4rem;
  top: 2.65rem;
}
.fly {
  position: absolute;
  width: 2.106rem;
  height: 3.33rem;
  background: url(../images/fly.png) no-repeat;
  background-size: 100% 100%;
  top: 3.6rem;
  transition: 0.5s top;
  left: 4rem;
  z-index: 5;
}
.fly-slow {
  animation: shaky-slow 9s linear infinite;
}
@-webkit-keyframes shaky-slow {
  0% {
    -webkit-transform: translate(0rem, 0rem) rotate(0deg) scale(1);
  }
  2% {
    -webkit-transform: translate(-0.01rem, 0.015rem) rotate(1.5deg) scale(1);
  }
  4% {
    -webkit-transform: translate(0.013rem, 0rem) rotate(-0.5deg) scale(1);
  }
  6% {
    -webkit-transform: translate(0.014rem, 0.014rem) rotate(-2deg) scale(1);
  }
  8% {
    -webkit-transform: translate(-0.013rem, -0.01rem) rotate(-1.5deg) scale(1);
  }
  10% {
    -webkit-transform: translate(0.014rem, 0rem) rotate(-2deg) scale(1);
  }
  12% {
    -webkit-transform: translate(-0.013rem, -0.01rem) rotate(-2deg) scale(1);
  }
  14% {
    -webkit-transform: translate(0.015rem, 0.013rem) rotate(1.5deg) scale(1);
  }
  16% {
    -webkit-transform: translate(0.015rem, -0.015rem) rotate(-1.5deg) scale(1);
  }
  18% {
    -webkit-transform: translate(0.013rem, -0.013rem) rotate(-2deg) scale(1);
  }
  20% {
    -webkit-transform: translate(0.01rem, 0.01rem) rotate(-0.5deg) scale(1);
  }
  22% {
    -webkit-transform: translate(0.013rem, 0.015rem) rotate(-2deg) scale(1);
  }
  24% {
    -webkit-transform: translate(-0.014rem, -0.01rem) rotate(2deg) scale(1);
  }
  26% {
    -webkit-transform: translate(0.013rem, -0.013rem) rotate(0.5deg) scale(1);
  }
  28% {
    -webkit-transform: translate(0.016rem, -0.016rem) rotate(-2deg) scale(1);
  }
  30% {
    -webkit-transform: translate(-0.013rem, -0.013rem) rotate(-1.5deg) scale(1);
  }
  32% {
    -webkit-transform: translate(-0.01rem, 0rem) rotate(2deg) scale(1);
  }
  34% {
    -webkit-transform: translate(0.013rem, 0.013rem) rotate(-0.5deg) scale(1);
  }
  36% {
    -webkit-transform: translate(0.013rem, 0.016rem) rotate(1.5deg) scale(1);
  }
  38% {
    -webkit-transform: translate(0.013rem, -0.016rem) rotate(1.5deg) scale(1);
  }
  40% {
    -webkit-transform: translate(-0.014rem, -0.01rem) rotate(-0.5deg) scale(1);
  }
  42% {
    -webkit-transform: translate(-0.014rem, 0.013rem) rotate(-0.5deg) scale(1);
  }
  44% {
    -webkit-transform: translate(-0.016rem, 0.014rem) rotate(0.5deg) scale(1);
  }
  46% {
    -webkit-transform: translate(-0.021rem, -0.013rem) rotate(-0.5deg) scale(1);
  }
  48% {
    -webkit-transform: translate(0.01rem, 0.016rem) rotate(1.5deg) scale(1);
  }
  50% {
    -webkit-transform: translate(0.016rem, 0.016rem) rotate(1.5deg) scale(1);
  }
  52% {
    -webkit-transform: translate(-0.014rem, 0.016rem) rotate(0.5deg) scale(1);
  }
  54% {
    -webkit-transform: translate(0.016rem, -0.01rem) rotate(-2deg) scale(1);
  }
  56% {
    -webkit-transform: translate(0.013rem, -0.016rem) rotate(-2deg) scale(1);
  }
  58% {
    -webkit-transform: translate(-0.013rem, -0.016rem) rotate(0.5deg) scale(1);
  }
  60% {
    -webkit-transform: translate(0.013rem, 0.016rem) rotate(-0.5deg) scale(1);
  }
  62% {
    -webkit-transform: translate(0rem, 0rem) rotate(-1.5deg) scale(1);
  }
  64% {
    -webkit-transform: translate(-0.016rem, -0.016rem) rotate(-2deg) scale(1);
  }
  66% {
    -webkit-transform: translate(0.016rem, -0.016rem) rotate(0.5deg) scale(1);
  }
  68% {
    -webkit-transform: translate(0rem, -0.016rem) rotate(-2deg) scale(1);
  }
  70% {
    -webkit-transform: translate(-0.016rem, 0.01rem) rotate(1.5deg) scale(1);
  }
  72% {
    -webkit-transform: translate(-0.016rem, 0.016rem) rotate(2deg) scale(1);
  }
  74% {
    -webkit-transform: translate(0.013rem, -0.016rem) rotate(-0.5deg) scale(1);
  }
  76% {
    -webkit-transform: translate(0.014rem, 0.01rem) rotate(-0.5deg) scale(1);
  }
  78% {
    -webkit-transform: translate(-0.01rem, 0.014rem) rotate(2deg) scale(1);
  }
  80% {
    -webkit-transform: translate(0.014rem, 0.016rem) rotate(2deg) scale(1);
  }
  82% {
    -webkit-transform: translate(-0.016rem, -0.016rem) rotate(-0.5deg) scale(1);
  }
  84% {
    -webkit-transform: translate(-0.014rem, 0.014rem) rotate(-2deg) scale(1);
  }
  86% {
    -webkit-transform: translate(0.01rem, 0.014rem) rotate(-2deg) scale(1);
  }
  88% {
    -webkit-transform: translate(-0.014rem, 0.014rem) rotate(-1.5deg) scale(1);
  }
  90% {
    -webkit-transform: translate(-0.016rem, -0.016rem) rotate(-2deg) scale(1);
  }
  92% {
    -webkit-transform: translate(-0.016rem, 0.016rem) rotate(2deg) scale(1);
  }
  94% {
    -webkit-transform: translate(-0.016rem, -0.016rem) rotate(-2deg) scale(1);
  }
  96% {
    -webkit-transform: translate(-0.014rem, 0.013rem) rotate(-2deg) scale(1);
  }
  98% {
    -webkit-transform: translate(0.013rem, 0.01rem) rotate(-0.5deg) scale(1);
  }
}
.fly-face {
  width: 1rem;
  height: 1rem;
  border-radius: 1rem;
  position: absolute;
  top: 0.85rem;
  left: 0.56rem;
}
.more-btn {
  width: 0.653rem;
  height: 0.653rem;
  background: url(../images/more-btn.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 0.43rem;
  top: 0.45rem;
}
.more-list {
  width: 1.333rem;
  height: 1.893rem;
  display: none;
  background: url(../images/more-list.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 0.1rem;
  top: 1.2rem;
}
.more-list > div {
  font-size: 0.3rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  width: 1.333rem;
  color: #74F4FF;
  transform: scale(0.8);
}
.more-list > div:nth-child(1) {
  margin-top: 0.09rem;
}
.time-box {
  width: 4.026rem;
  height: 3.2rem;
  position: absolute;
  left: 2.987rem;
  top: 0;
}
.time-box-tips {
  font-size: 0.4rem;
  text-align: center;
  color: #fff;
  padding-top: 0.4rem;
}
.num-box {
  width: 4.026rem;
  height: 1.333rem;
  line-height: 1.333rem;
  background: url(../images/num-box.png) no-repeat;
  background-size: 100% 100%;
  font-size: 0;
  text-align: center;
}
.num-box img {
  vertical-align: middle;
  height: 0.853rem;
}
.num-box-p1 {
  position: absolute;
  width: 0.96rem;
  height: 1.28rem;
  background: url(../images/num-bg.png) no-repeat;
  background-position-y: 2rem;
  background-size: 100% auto;
  transform: scale(0.7);
  top: 50%;
  margin-top: -0.64rem;
  left: 1.2rem;
}
.num-box-p2 {
  position: absolute;
  width: 0.96rem;
  height: 1.28rem;
  background: url(../images/num-bg.png) no-repeat;
  background-position-y: 2rem;
  background-size: 100% auto;
  transform: scale(0.7);
  top: 50%;
  margin-top: -0.64rem;
  left: 1.85rem;
}
.n0 {
  background-position-y: -11.51rem;
}
.n1 {
  background-position-y: -10.23rem;
}
.n2 {
  background-position-y: -8.95rem;
}
.n3 {
  background-position-y: -7.67rem;
}
.n4 {
  background-position-y: -6.39rem;
}
.n5 {
  background-position-y: -5.11rem;
}
.n6 {
  background-position-y: -3.83rem;
}
.n7 {
  background-position-y: -2.55rem;
}
.n8 {
  background-position-y: -1.27rem;
}
.n9 {
  background-position-y: 0;
}
.layer-list {
  width: 10rem;
  height: 10.426rem;
  background: url(../images/layer-list.png) no-repeat;
  background-size: 100% auto;
  z-index: 800;
  background-position-y: -0.3rem;
  position: absolute;
  left: -10rem;
  transition: 0.25s all;
}
.layer-list .back {
  width: 0.653rem;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}
.layer-list-ul {
  height: 6.8rem;
  width: 9.5rem;
  position: absolute;
  left: 0.25rem;
  top: 2.7rem;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.layer-list-ul li {
  height: 1.7rem;
  width: 9.5rem;
  position: relative;
}
.layer-list-ul .line {
  height: 0.027rem;
  width: 10rem;
  color: #2A3656;
  background: url(../images/line.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
}
.layer-list-ul .layer-list-box1 {
  width: 1.05rem;
  height: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  float: left;
  position: relative;
  font-size: 0.3rem;
  color: #526EBC;
}
.layer-list-ul .layer-list-box1 > img {
  width: 0.653rem;
  vertical-align: middle;
  margin-top: -0.1rem;
}
.layer-list-ul .layer-list-box2 {
  width: 4.7rem;
  height: 1.7rem;
  line-height: 1.7rem;
  float: left;
  position: relative;
  font-size: 0.35rem;
  color: #0BFFFF;
}
.layer-list-ul .layer-list-box2 > img {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  vertical-align: middle;
  margin-top: -0.1rem;
  margin-right: 0.15rem;
}
.layer-list-ul .layer-list-box3 {
  width: 3.75rem;
  height: 1.7rem;
  float: left;
  position: relative;
  color: #fff;
  font-size: 0.35rem;
  line-height: 1.7rem;
}
.layer-list-ul .layer-list-box3 > span {
  color: #0BFFFF;
}
.time-box-man {
  font-size: 0.35rem;
  color: #fff;
  text-align: center;
  padding-top: 0.1rem;
}
.layer-over {
  width: 9.906rem;
  height: 8.32rem;
  background: url(../images/layer-over.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  display: none;
}
.layer-yes {
  width: 9.906rem;
  height: 8.32rem;
  background: url(../images/layer-yes.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  display: none;
}
.layer-no {
  width: 9.906rem;
  height: 8.32rem;
  background: url(../images/layer-no.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  display: none;
}
.layer-boom {
  width: 9.906rem;
  height: 8.32rem;
  background: url(../images/layer-boom.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
  display: none;
}
.layer-no-p1 {
  color: #fff;
  font-size: 0.35rem;
  font-weight: 700;
  position: absolute;
  top: 1.45rem;
  left: 5.1rem;
}
.layer-no-p2 {
  color: #fff;
  font-size: 0.35rem;
  font-weight: 700;
  position: absolute;
  top: 2.03rem;
  left: 5.1rem;
}
.layer-yes-p1 {
  color: #fff;
  font-size: 0.35rem;
  font-weight: 700;
  position: absolute;
  top: 1.45rem;
  left: 5.1rem;
}
.layer-yes-p2 {
  color: #fff;
  font-size: 0.35rem;
  font-weight: 700;
  position: absolute;
  top: 2.03rem;
  left: 5.1rem;
}
.layer-yes-p3 {
  color: #fff;
  font-size: 0.35rem;
  font-weight: 700;
  position: absolute;
  top: 2.58rem;
  left: 5.1rem;
}
.layer-yes-gift-box1 {
  height: 1.8rem;
  width: 1.75rem;
  position: absolute;
  top: 4.45rem;
  left: 2.3rem;
  font-size: 0;
  text-align: center;
  line-height: 1.8rem;
}
.layer-yes-gift-box1 > img {
  vertical-align: middle;
  width: 1.5rem;
}
.layer-yes-gift-box2 {
  height: 1.8rem;
  width: 1.75rem;
  position: absolute;
  top: 4.45rem;
  right: 2.38rem;
  font-size: 0;
  text-align: center;
  line-height: 1.8rem;
}
.layer-yes-gift-box2 > img {
  vertical-align: middle;
  width: 1.5rem;
}
.layer-yes-gift-text1 {
  width: 2.7rem;
  text-align: center;
  position: absolute;
  top: 6.4rem;
  left: 1.75rem;
}
.layer-yes-gift-text1 p:nth-child(1) {
  color: #0BFFFF;
  font-size: 0.3rem;
}
.layer-yes-gift-text1 p:nth-child(2) {
  color: #fff;
  font-weight: 700;
  font-size: 0.35rem;
  padding-top: 0.05rem;
}
.layer-yes-gift-text2 {
  width: 2.7rem;
  text-align: center;
  position: absolute;
  top: 6.4rem;
  right: 1.93rem;
}
.layer-yes-gift-text2 p:nth-child(1) {
  color: #0BFFFF;
  font-size: 0.3rem;
}
.layer-yes-gift-text2 p:nth-child(2) {
  color: #fff;
  font-weight: 700;
  font-size: 0.35rem;
  padding-top: 0.05rem;
}
.layer-history {
  width: 10rem;
  height: 10.426rem;
  background: url(../images/layer-history.png) no-repeat;
  background-size: 100% auto;
  z-index: 800;
  background-position-y: -0.3rem;
  position: absolute;
  left: -10rem;
  transition: 0.25s all;
}
.layer-history .back {
  width: 0.653rem;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}
.layer-rule {
  width: 10rem;
  height: 10.426rem;
  background: url(../images/layer-rule.png) no-repeat;
  background-size: 100% auto;
  z-index: 800;
  background-position-y: -0.3rem;
  position: absolute;
  left: -10rem;
  transition: 0.25s all;
}
.layer-rule .back {
  width: 0.653rem;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}
.layer-rule-content {
  width: 10rem;
  height: 8.7rem;
  position: absolute;
  top: 1.726rem;
  left: 0;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  text-align: center;
}
.layer-rule-content > img {
  width: 9.4rem;
}
.layer-history-ul {
  height: 7.2rem;
  width: 9.35rem;
  position: absolute;
  left: 0.325rem;
  top: 2.7rem;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.layer-history-ul li {
  width: 9.35rem;
  height: 0.9rem;
  background: #0F2952;
  margin-bottom: 0.08rem;
}
.layer-history-ul li:nth-child(2n) {
  background: none;
}
.layer-history-ul .layer-history-box1 {
  position: relative;
  width: 3.25rem;
  height: 0.9rem;
  float: left;
  color: #FFFFFF;
  font-size: 0.3rem;
  line-height: 0.9rem;
  text-indent: 0.35rem;
}
.layer-history-ul .layer-history-box2 {
  position: relative;
  width: 3.4rem;
  height: 0.9rem;
  float: left;
  color: #FFFFFF;
  font-size: 0.3rem;
  line-height: 0.9rem;
  text-indent: 0.8rem;
}
.layer-history-ul .layer-history-box3 {
  position: relative;
  width: 2.65rem;
  height: 0.9rem;
  float: left;
  color: #C8C7C6;
  line-height: 0.9rem;
  font-size: 0.3rem;
  text-indent: 0.75rem;
}
.boomShow {
  display: none;
  width: 4.186rem;
  position: absolute;
  left: 2.907rem;
  z-index: 50;
  top: 2rem;
}
.mi-bg {
  display: none;
  position: relative;
  width: 4.133rem;
  text-align: center;
  height: 0.906rem;
  line-height: 0.906rem;
  background: url(../images/mi-bg.png) no-repeat;
  background-size: 100% 100%;
  left: 2.933rem;
  top: 6.8rem;
  z-index: 50;
  font-size: 0.4rem;
  color: #CCF783;
  font-weight: 700;
}
.star-show {
  width: 10rem;
  height: 1.6rem;
  background: url(../images/star-show.png) no-repeat;
  background-size: 100% auto;
  background-position: 0 0;
  position: absolute;
  z-index: 50;
  pointer-events: none;
  top: 1rem;
  display: none;
}
.star-show-go {
  display: block;
  animation: starShow 1.5s steps(33, start) 0ms 1 forwards;
}
@keyframes starShow {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -52.8rem;
  }
}
.user-going-box {
  width: 10rem;
  height: 3rem;
  position: absolute;
  z-index: 50;
  left: 0;
  top: 3.85rem;
  pointer-events: none;
}
.user-out-box {
  width: 10rem;
  height: 4.2rem;
  position: absolute;
  z-index: 4;
  left: 0;
  top: 3.5rem;
}
.out-man {
  width: 1.02rem;
  height: 0.97rem;
  background: url(../images/man.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  transform: translate(4.49rem, 0.8rem) scale(0);
  overflow: hidden;
}
.user-out-left {
  animation: manLeftOut 1.8s 1 linear forwards;
}
@keyframes manLeftOut {
  0% {
    transform: translate(4.49rem, 0.8rem) scale(0);
  }
  30% {
    transform: translate(3.2rem, -0.3rem) scale(0.5);
  }
  65% {
    transform: translate(2.4rem, 2.3rem) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(1.6rem, 4.2rem) scale(1);
    opacity: 0;
  }
}
.user-out-right {
  animation: manRightOut 1.8s 1 linear forwards;
}
@keyframes manRightOut {
  0% {
    transform: translate(4.49rem, 0.8rem) scale(0);
  }
  30% {
    transform: translate(5.78rem, -0.3rem) scale(0.5);
  }
  65% {
    transform: translate(6.78rem, 2.3rem) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(7.58rem, 4.2rem) scale(1);
    opacity: 0;
  }
}
.user-man {
  width: 1.02rem;
  height: 0.97rem;
  background: url(../images/man.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  transform: translate(-1.5rem, 0);
}
.user-man-left {
  animation: manLeftGo 1.2s 1 linear forwards;
}
@keyframes manLeftGo {
  0% {
    transform: translate(-1.5rem, 0);
  }
  40% {
    transform: translate(2.8rem, 0) scale(1, 1);
  }
  50% {
    height: 0.6rem;
    transform: translate(2.8rem, 0) scale(1, 1);
  }
  54% {
    height: 0.97rem;
    transform: translate(2.8rem, 0) scale(1, 1);
  }
  67% {
    transform: translate(3.25rem, -1rem) scale(0.8, 1.1);
  }
  80% {
    transform: translate(3.6rem, -2.2rem) scale(0.8, 1.1);
  }
  95% {
    transform: translate(4.55rem, -1.4rem) scale(0.5, 0.5);
  }
  100% {
    transform: translate(4.55rem, -1.4rem) scale(0, 0);
  }
}
.user-man-right {
  animation: manRightGo 1.2s 1 linear forwards;
}
@keyframes manRightGo {
  0% {
    transform: translate(10.5rem, 0);
  }
  40% {
    transform: translate(6.3rem, 0) scale(1, 1);
  }
  50% {
    height: 0.6rem;
    transform: translate(6.3rem, 0) scale(1, 1);
  }
  54% {
    height: 0.97rem;
    transform: translate(6.3rem, 0) scale(1, 1);
  }
  67% {
    transform: translate(5.9rem, -1rem) scale(0.8, 1.1);
  }
  80% {
    transform: translate(5.5rem, -2.3rem) scale(0.8, 1.1);
  }
  95% {
    transform: translate(4.55rem, -1.4rem) scale(0.5, 0.5);
  }
  100% {
    transform: translate(4.55rem, -1.4rem) scale(0, 0);
  }
}
.get-show {
  height: 10.9rem;
  display: none;
  width: 10rem;
  position: absolute;
  bottom: 0rem;
  opacity: 0.8;
  pointer-events: none;
  left: 0;
  z-index: 500;
  overflow: hidden;
}
.get-show > img {
  position: absolute;
  top: -9rem;
  width: 10rem;
}