.banner .top {
  margin-bottom: 140px;
}
.banner .top .left .title {
  font-size: 48px;
  letter-spacing: -1px;
}
.banner .right {
  max-width: 436px;
}
.banner .banner-slider {
  width: 100%;
  height: var(--height);
  overflow: hidden;
  /* mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent); */
  height: 40px;
  overflow: hidden;
}
.banner .banner-slider .list {
  display: flex;
  width: 100%;
  min-width: calc(var(--width) * var(--quantity));
  position: relative;
}
.banner .banner-slider .list .item {
  width: var(--width);
  height: var(--height);
  position: absolute;
  left: 100%;
  animation: autoRun 60s linear infinite;
  transition: filter 0.5s;
  animation-delay: calc(60s / var(--quantity) * (var(--position) - 1) - 60s) !important;
  display: flex;
  align-items: center;
  padding: 0 5px;
  justify-content: center;
}
.banner .banner-slider .list .item img {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
}
@keyframes autoRun {
  from {
    left: 100%;
  }
  to {
    left: calc(var(--width) * -1);
  }
}

@media screen and (max-width: 850px) {
  .banner .top.flex-wrapper {
    padding-bottom: 0;
    margin-bottom: 48px;
    gap: 40px;
  }
  .banner .top.flex-wrapper .left .title {
    margin-bottom: 0;
  }
  .banner .button {
    margin-bottom: 80px;
  }
}