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: 17%;
  position: absolute;
  top: -30vh;
  left: 41%;
  animation: fall1 1s ease-in-out forwards;
}
@keyframes fall1 {
  to {
    top: 13%;
  }
}

.top-box .down-btn {
  width: 20%;
  position: absolute;
  top: 82%;
  left: 40%;
  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-bg1 {
  width: 100%;
  display: block;
}
.bottom-box .bottom-bg2 {
  width: 60%;
  position: absolute;
  top: 57%;
  left: 36%;
}

.bottom-box .down-btn {
  width: 20%;
  position: absolute;
  bottom: 5%;
  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: 41%;
  position: absolute;
  top: -45vh;
  left: 30%;
  animation: fall1-m 1s ease-in-out forwards;
}
@keyframes fall1-m {
  to {
    top: 11%;
  }
}
.top-box-m .down-btn {
  width: 40%;
  position: absolute;
  top: 80%;
  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-bg1 {
  width: 100%;
  display: block;
}
.bottom-box-m .bottom-bg2 {
  width: 90%;
  position: absolute;
  top: 60%;
  left: 5%;
}
.bottom-box-m .down-btn {
  width: 40%;
  position: absolute;
  top: 80%;
  left: 30%;
  animation: pulse 1.5s ease-in-out infinite;
}