site_8g/src/components/Box/redpacked.module.scss

@keyframes smoothscroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-20rem);
  }
}

.scrollAnimation {
  padding: 3px 0;
  animation: smoothscroll 30s linear infinite;
}


/* From Uiverse.io by vamsidevendrakumar */
.card {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

.cardInner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.999s;
}

.card:hover .cardInner {
  transform: rotateY(180deg);
}

.cardFront,
.cardBack {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.cardFront {
  background-color: #6A2C70;
  color: #fff;
  display: flex;
  align-items: center;
  border: 10px solid #6A2C70;
  border-radius: 10px;
  justify-content: center;
  font-size: 24px;
  transform: rotateY(0deg);
}

.cardBack {
  background-color: #F08A5D;
  color: #fff;
  display: flex;
  align-items: center;
  border: 10px solid #F08A5D;
  border-radius: 10px;
  justify-content: center;
  font-size: 24px;
  transform: rotateY(180deg);
}

.packetWrapper {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  animation: down 8s linear infinite;
  font-size: 0;
}

.packet{
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 3s ease;
  transform: rotate(0);
}

@keyframes down {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100vh);
  }
}


.promoRules{
  // background:url('/hby/hby_bg.png') no-repeat;
  background-size: 100% 100%;

  .promoTitle{
    font-weight:400;
    font-weight:700;
  }
  .titleWrap{
    font-size:.18rem;
    text-align: center;
    color:#ffdf7f;
    margin:0.1rem 0;
  }
  .tips{
    margin:0 auto;
    width:2.5rem;
    height:0.6rem;
    background: url('/hby/tip-bg.png') no-repeat;
    background-size: 100% auto;
    display: flex;
    justify-content: center;
    line-height:0.48rem;
    .tipsIcon{
      display: inline-block;
      width:0.40rem;
      height:0.25rem;
      margin:0.11rem 0 0;
    }
    .tipsTime{
      color:#3ab54c;
      font-size:.18rem;
      font-weight:700;
      margin:0 0 0 0.1rem;
    }
  }

  .times1{
    margin:0.14rem auto;
  }

  .rulelist{
    width:90%;
    font-family: 'Arial-BoldMT, Arial';
    color:#fff8bb;
    font-size:0.1rem;
    line-height:0.14rem;
    list-style-type: disc;
    transform: scale(0.96);
    margin:0.08rem 0 0 .1rem;
    .ruleItem{
      list-style: disc;
    }
  }
  .closeIcon{
    position: absolute;
    width: 30px;
    height:30px;
    right:0.12rem;
    top:0.1rem;
    cursor: pointer;
  }
}


.redclose{
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;

  width: 2.09rem;
  height: 2.575rem;
  // background: url('/hby/red-bg1.png') no-repeat;
  // background-size: 2.09rem 2.575rem;
  z-index: 120;
  .closeIcon{
    position: absolute;
    right:0;
    top:0;
    width:40px;
    height:40px;
    cursor: pointer;
  }
  .redIcon{
    cursor: pointer;
  }
  .title{
    color: #ffd800;
    font-size: .18rem;
    text-align: center;
    font-family:' Arial-BoldMT,Arial';
    font-weight: 700;
    width: 1.8rem;
    height: .25rem;
    margin-top: .24rem
  }

  .desc{
    color: #fff;
    font-size: .13rem;
    font-family: 'Arial-BoldMT,Arial';
    width: 1.6rem;
    height: 1rem;
    margin-left: .22rem;
    .desclist{
      list-style-type: disc;
      font-size:0.1rem;
      transform: scale(0.96);
      font-weight: 400;
      .line{
        margin-top: .09rem;
        margin-left: -.14rem;
        width: 1.6rem;
        height: .005rem;
        background: hsla(0,0%,100%,.2)
      }
      li{
        margin-top: .08rem;
        list-style: disc;
      }
    }
  }

  .openBtn {
    cursor: pointer;
    margin: .06rem auto 0;
    width: 1rem;
    height: .3rem;
    line-height: .3rem;
    font-family: 'Arial-BoldMT,Arial';
    color: #613e00;
    font-size: .115rem;
    font-weight: 700;
    text-align: center
  }

}

.redopen{
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;

  width: 2.11rem;
  height: 2.555rem;
  // background: url('/hby/red-bg2.png') no-repeat;
  // background-size: 2.11rem 2.555rem;
  z-index: 120;
  .closeIcon{
    position: absolute;
    right:0;
    top:0;
    cursor: pointer;
  }
  .title{
    color: #925c00;
    font-size: .14rem;
    text-align: center;
    font-weight: bold;
    font-family: 'Arial-BoldMT,Arial';
    width: 1.595rem;
    margin: 0.6rem 0 0.1rem 0;
  }
  .cash{
    color: #c2302e;
    font-family: "Arial-BoldMT,Arial";
    font-weight: 700;
    font-size: .55rem;
    flex: 1;
    //display: flex;
    //align-items: center;
  }
  .tips{
    width: 1.545rem;
    color: #ffd800;
    text-align: center;
    font-family:" Arial-BoldMT,Arial";
    font-size: .1rem;
    line-height:.12rem;
    margin-bottom: 0.3rem;
  }

}