.red-envelope-rain-wrapper {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: 0;
    /* background-color: rgba(0, 0, 0, 0.6); */
  }
  .red-envelope {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 2;
    cursor: pointer;
  }
  .red-envelope-item1 {
    top: 50px;
    left: 3%;
    animation: fall 3.2s linear infinite;
  }

  .red-envelope-item2 {
    top: 50px;
    left: 13%;
    /* transform: rotate(10deg); */
    animation: fall 3.9s linear infinite;
  }

  .red-envelope-item3 {
    top: 50px;
    left: 28%;
    /* transform: rotate(65deg); */
    animation: fall 3.1s linear infinite;
  }

  .red-envelope-item4 {
    top: 70px;
    left: 39%;
    /* transform: rotate(19deg); */
    animation: fall 3.8s linear infinite;
  }
    .red-envelope-item4-1 {
    top: 30px;
    left: 58%;
    /* transform: rotate(139deg); */
    animation: fall 2.5s linear infinite;
  }

  .red-envelope-item5 {
    top: 250px;
    left: 46%;
    /* transform: rotate(80deg); */
    animation: fall 3.3s linear infinite;
  }

  .red-envelope-item6 {
    top: 200px;
    left: 75%;
    /* transform: rotate(30deg); */
    animation: fall 3.2s linear infinite;
  }
  .red-envelope-item7 {
    top: 50px;
    left: 80%;
    /* transform: rotate(30deg); */
    animation: fall 3.9s linear infinite;
  }
  .red-envelope-item8 {
    top: 50px;
    left: 3%;
    /* transform: rotate(170deg); */
    animation: fall 4.2s linear infinite;
  }

  @keyframes fall {
    to {
      top: 100vh;
    }
  }

  @-webkit-keyframes fall {
    to {
      top: 100vh;
    }
  }

  @-moz-keyframes fall {
    to {
      top: 100vh;
    }
  }

  @media screen and ( min-width: 640px ) {
    .red-envelope {
      width: 100px;
      height: 100px;
    }
  }