.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;
  // background: pink;
  position: absolute;
  left: 3.4rem;
  top: 0;
  text-align: center;
  font-size: 0.3rem;
  color: #fff;
  vertical-align: middle;
  >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;
  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;
    >img{
      width: 0.38rem;
      position: absolute;
      top: 0.23rem;
      left: 0.5rem;
    }
  }
  .li-money-click{
    background: url(../images/rich-box-click.png)no-repeat;
    background-size: 100% 100%;
    color: #0bfffb;
    transform: scale(1.00);
  }
}
.diamond-box{
  width: 4.0147rem;
  height: 0.95rem;
  line-height: 0.95rem;
  color: #fff;
  position: absolute;
  text-indent: 1rem;
  font-size: 0.35rem;
  // background: #040431;
  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{
  // position: absolute;
  // width: 4.1rem;
  // height: 1.1rem;
  // background: url(../images/go-btn.png) no-repeat;
  // background-size: 100% 100%;
  // bottom: 0.15rem;
  // right: 0.6rem;

  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;
  // 2.8
  transition:  0.5s top;

  left: 4rem;
  z-index: 5;
}
.fly-go{
  
}
.fly-slow{
  animation: shaky-slow 9s linear infinite;
}
@-webkit-keyframes shaky-slow {
  0% {            -webkit-transform: translate(0rem, 0rem) rotate(0deg) scale(1.00);
  }
  2% {            -webkit-transform: translate(-0.01rem, 0.015rem) rotate(1.5deg) scale(1.00);
  }
  4% {            -webkit-transform: translate(0.013rem, 0rem) rotate(-0.5deg) scale(1.00);
  }
  6% {            -webkit-transform: translate(0.014rem, 0.014rem) rotate(-2deg) scale(1.00);
  }
  8% {            -webkit-transform: translate(-0.013rem, -0.01rem) rotate(-1.5deg) scale(1.00);
  }
  10% {            -webkit-transform: translate(0.014rem, 0rem) rotate(-2deg) scale(1.00);
  }
  12% {            -webkit-transform: translate(-0.013rem, -0.01rem) rotate(-2deg) scale(1.00);
  }
  14% {            -webkit-transform: translate(0.015rem, 0.013rem) rotate(1.5deg) scale(1.00);
  }
  16% {            -webkit-transform: translate(0.015rem, -0.015rem) rotate(-1.5deg) scale(1.00);
  }
  18% {            -webkit-transform: translate(0.013rem, -0.013rem) rotate(-2deg) scale(1.00);
  }
  20% {            -webkit-transform: translate(0.01rem, 0.01rem) rotate(-0.5deg) scale(1.00);
  }
  22% {            -webkit-transform: translate(0.013rem, 0.015rem) rotate(-2deg) scale(1.00);
  }
  24% {            -webkit-transform: translate(-0.014rem, -0.01rem) rotate(2deg) scale(1.00);
  }
  26% {            -webkit-transform: translate(0.013rem, -0.013rem) rotate(0.5deg) scale(1.00);
  }
  28% {            -webkit-transform: translate(0.016rem, -0.016rem) rotate(-2deg) scale(1.00);
  }
  30% {            -webkit-transform: translate(-0.013rem, -0.013rem) rotate(-1.5deg) scale(1.00);
  }
  32% {            -webkit-transform: translate(-0.01rem, 0rem) rotate(2deg) scale(1.00);
  }
  34% {            -webkit-transform: translate(0.013rem, 0.013rem) rotate(-0.5deg) scale(1.00);
  }
  36% {            -webkit-transform: translate(0.013rem, 0.016rem) rotate(1.5deg) scale(1.00);
  }
  38% {            -webkit-transform: translate(0.013rem, -0.016rem) rotate(1.5deg) scale(1.00);
  }
  40% {            -webkit-transform: translate(-0.014rem, -0.01rem) rotate(-0.5deg) scale(1.00);
  }
  42% {            -webkit-transform: translate(-0.014rem, 0.013rem) rotate(-0.5deg) scale(1.00);
  }
  44% {            -webkit-transform: translate(-0.016rem, 0.014rem) rotate(0.5deg) scale(1.00);
  }
  46% {            -webkit-transform: translate(-0.021rem, -0.013rem) rotate(-0.5deg) scale(1.00);
  }
  48% {            -webkit-transform: translate(0.01rem, 0.016rem) rotate(1.5deg) scale(1.00);
  }
  50% {            -webkit-transform: translate(0.016rem, 0.016rem) rotate(1.5deg) scale(1.00);
  }
  52% {            -webkit-transform: translate(-0.014rem, 0.016rem) rotate(0.5deg) scale(1.00);
  }
  54% {            -webkit-transform: translate(0.016rem, -0.01rem) rotate(-2deg) scale(1.00);
  }
  56% {            -webkit-transform: translate(0.013rem, -0.016rem) rotate(-2deg) scale(1.00);
  }
  58% {            -webkit-transform: translate(-0.013rem, -0.016rem) rotate(0.5deg) scale(1.00);
  }
  60% {            -webkit-transform: translate(0.013rem, 0.016rem) rotate(-0.5deg) scale(1.00);
  }
  62% {            -webkit-transform: translate(0rem, 0rem) rotate(-1.5deg) scale(1.00);
  }
  64% {            -webkit-transform: translate(-0.016rem, -0.016rem) rotate(-2deg) scale(1.00);
  }
  66% {            -webkit-transform: translate(0.016rem, -0.016rem) rotate(0.5deg) scale(1.00);
  }
  68% {            -webkit-transform: translate(0rem, -0.016rem) rotate(-2deg) scale(1.00);
  }
  70% {            -webkit-transform: translate(-0.016rem, 0.01rem) rotate(1.5deg) scale(1.00);
  }
  72% {            -webkit-transform: translate(-0.016rem, 0.016rem) rotate(2deg) scale(1.00);
  }
  74% {            -webkit-transform: translate(0.013rem, -0.016rem) rotate(-0.5deg) scale(1.00);
  }
  76% {            -webkit-transform: translate(0.014rem, 0.01rem) rotate(-0.5deg) scale(1.00);
  }
  78% {            -webkit-transform: translate(-0.01rem, 0.014rem) rotate(2deg) scale(1.00);
  }
  80% {            -webkit-transform: translate(0.014rem, 0.016rem) rotate(2deg) scale(1.00);
  }
  82% {            -webkit-transform: translate(-0.016rem, -0.016rem) rotate(-0.5deg) scale(1.00);
  }
  84% {            -webkit-transform: translate(-0.014rem, 0.014rem) rotate(-2deg) scale(1.00);
  }
  86% {            -webkit-transform: translate(0.01rem, 0.014rem) rotate(-2deg) scale(1.00);
  }
  88% {            -webkit-transform: translate(-0.014rem, 0.014rem) rotate(-1.5deg) scale(1.00);
  }
  90% {            -webkit-transform: translate(-0.016rem, -0.016rem) rotate(-2deg) scale(1.00);
  }
  92% {            -webkit-transform: translate(-0.016rem, 0.016rem) rotate(2deg) scale(1.00);
  }
  94% {            -webkit-transform: translate(-0.016rem, -0.016rem) rotate(-2deg) scale(1.00);
  }
  96% {            -webkit-transform: translate(-0.014rem, 0.013rem) rotate(-2deg) scale(1.00);
  }
  98% {            -webkit-transform: translate(0.013rem, 0.01rem) rotate(-0.5deg) scale(1.00);
  }
}
.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;
  >div{
    font-size: 0.3rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    width: 1.333rem;
    color: #74F4FF;
    transform: scale(0.8);
  }
  >div:nth-child(1){
    margin-top: 0.09rem;
  }
}
.time-box{
  width: 4.026rem;
  height: 3.2rem;
  // background: pink;
  position: absolute;
  left: 2.987rem;
  top: 0;
}
.time-box-tips{
  font-size: 0.4rem;
  // font-weight: 700;
  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;
  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;
  .back{
    width: 0.653rem;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
  }
}
.layer-list-ul{
  height: 6.8rem;
  width: 9.5rem;
  // background: pink;
  position: absolute;
  left: 0.25rem;
  top: 2.7rem;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  li{
    height: 1.7rem;
    width: 9.5rem;
    position: relative;
  }
  .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-box1{
    width: 1.05rem;
    height: 1.7rem;
    line-height: 1.7rem;
    text-align: center;
    float: left;
    position: relative; 
    font-size: 0.3rem;
    color: #526EBC;
    >img{
      width: 0.653rem;
      vertical-align: middle;
      margin-top: -0.1rem;
    }
  }
  .layer-list-box2{
    width: 4.7rem;
    height: 1.7rem;
    line-height: 1.7rem;
    float: left;
    position: relative;
    font-size: 0.35rem;
    color: #0BFFFF;
    >img{
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      vertical-align: middle;
      margin-top: -0.1rem;
      margin-right: 0.15rem;
    }
  }
  .layer-list-box3{
    width: 3.75rem;
    height: 1.7rem;
    float: left;
    position: relative; 
    color: #fff;
    font-size: 0.35rem;
    line-height: 1.7rem;
    >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;
  // background: pink;
  position: absolute;
  top: 4.45rem;
  left: 2.3rem;
  font-size: 0;
  text-align: center;
  line-height: 1.8rem;
  >img{
    vertical-align: middle;
    width: 1.5rem;
  }
}
.layer-yes-gift-box2{
  height: 1.8rem;
  width: 1.75rem;
  // background: pink;
  position: absolute;
  top: 4.45rem;
  right: 2.38rem;
  font-size: 0;
  text-align: center;
  line-height: 1.8rem;
  >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;
  p:nth-child(1){
    color: #0BFFFF;
    font-size: 0.3rem;
 
  }
  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;
  p:nth-child(1){
    color: #0BFFFF;
    font-size: 0.3rem;
 
  }
  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;
  .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;
  .back{
    width: 0.653rem;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
  }
}
.layer-rule-content{
  width: 10rem;
  height: 8.7rem;
  // background: pink;
  position: absolute;
  top: 1.726rem;
  left: 0;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  >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;
  li{
    width: 9.35rem;
    height: 0.9rem;
    background: #0F2952;
    margin-bottom: 0.08rem;

  }
  li:nth-child(2n){
    background: none;
  }
  .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-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-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;
  }
  // background: pink;
}
.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;
  // background: pink;
  z-index: 50;
  left: 0;
  top: 3.85rem;
  pointer-events: none;
}
.user-out-box{
  width: 10rem;
  height: 4.2rem;
  position: absolute;
  // background: pink;
  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;
  // transform: translate(1.6rem,4.2rem);
}
.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;
}
//1.29
@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);
  // left: -1.5rem;
}
.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;
  // background: pink;
  z-index: 500;
  overflow: hidden;
  >img{
    position: absolute;
    top: -9rem;
    width: 10rem;
  }
}