body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.top-box {
  width: 100%;
  position: relative;
}
.top-box .top-bg1 {
  width: 100%;
  display: block;
}
.top-box .top-bg2 {
  width: 55%;
  position: absolute;
  top: -30vh;
  left: 7%;
  animation: fall1 1s ease-in-out forwards;
}
@keyframes fall1 {
  to {
    top: 6%;
  }
}
.top-box .top-bg3 {
  width: 30%;
  position: absolute;
  left: 38%;
  top: -25vh;
  /* transform: translateX(-50%); */
  animation: fall2 1s ease-in-out forwards;
  animation-delay: 0.8s;
}
@keyframes fall2 {
  to {
    top: 18%;
    transform: translate(51%, 0);
  }
}
.top-box .top-bg4 {
  width: 30%;
  position: absolute;
  top: -25vh;
  left: 35%;
  animation: fall3 1.5s ease-in-out forwards;
  animation-delay: 1.5s;
}
@keyframes fall3 {
  to {
    top: 37%;
    transform: translate(79%, 0);
  }
}
.top-box .down-btn {
  width: 20%;
  position: absolute;
  top: 65%;
  left: 62%;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.bottom-box {
  width: 100%;
  position: relative;
}
.bottom-box .bottom-bg {
  width: 100%;
  display: block;
}
.bottom-box .bottom-bg1 {
  width: 55%;
  position: absolute;
  top: 8%;
  left: 32%;
}
.bottom-box .bottom-bg2 {
  width: 46%;
  position: absolute;
  top: 3%;
  left: 9%;
}
.bottom-box .bottom-bg3 {
  width: 40%;
  position: absolute;
  top: 68%;
  left: 30%;
}
.bottom-box .bottom-bg4 {
  width: 40%;
  position: absolute;
  top: 73%;
  left: 30%;
}
.bottom-box .down-btn {
  width: 20%;
  position: absolute;
  top: 84%;
  left: 40%;
  animation: pulse 1.5s ease-in-out infinite;
}

/* 移动端 */
.top-box-m {
  width: 100%;
  position: relative;
}
.top-box-m .top-bg1 {
  width: 100%;
  display: block;
}
.top-box-m .top-bg2 {
  width: 100%;
  position: absolute;
  top: -85vh;
  left: 0;
  animation: fall1-m 1s ease-in-out forwards;
}
@keyframes fall1-m {
  to {
    top: 0;
  }
}
.top-box-m .top-bg3 {
  width: 70%;
  position: absolute;
  left: 2%;
  top: -25vh;
  /* transform: translateX(-50%); */
  animation: fall2-m 1s ease-in-out forwards;
  animation-delay: 0.8s;
}
@keyframes fall2-m {
  to {
    top: 53%;
  }
}
.top-box-m .top-bg4 {
  width: 70%;
  position: absolute;
  top: -20vh;
  left: 18%;
  animation: fall3-m 1.5s ease-in-out forwards;
  animation-delay: 1.5s;
}
@keyframes fall3-m {
  to {
    top: 73%;
  }
}
.top-box-m .down-btn {
  width: 40%;
  position: absolute;
  top: 88%;
  left: 30%;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.bottom-box-m {
  width: 100%;
  position: relative;
}
.bottom-box-m .bottom-bg {
  width: 100%;
  display: block;
}
.bottom-box-m .bottom-bg1 {
  width: 90%;
  position: absolute;
  top: 15%;
  left: 5%;
}
.bottom-box-m .bottom-bg2 {
  width: 90%;
  position: absolute;
  top: 3%;
  left: 0;
}
.bottom-box-m .bottom-bg3 {
  width: 80%;
  position: absolute;
  top: 56%;
  left: 10%;
}
.bottom-box-m .bottom-bg4 {
  width: 80%;
  position: absolute;
  top: 62%;
  left: 10%;
}
.bottom-box-m .down-btn {
  width: 40%;
  position: absolute;
  top: 72%;
  left: 30%;
  animation: pulse 1.5s ease-in-out infinite;
}