/* 合作伙伴滚动样式 */
.scroll-wrapper {
  width: 100%;
  margin-inline: auto;
  position: relative;
  height: 100px;
  margin: 1rem 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
}

.scroll-wrapper .mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
}

.customer-logo {
  width: 14rem;
  height: auto;
  position: absolute;
  left: max(calc(14rem * 17), 100%);
  animation-name: customerLogoScorll;
  animation-duration: 60s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 第一个滚动区域16张图片的动画延迟 */
.customer-logo.logo1 {
  animation-delay: calc(-60s * 1 / 16);
}
.customer-logo.logo2 {
  animation-delay: calc(-60s * 2 / 16);
}
.customer-logo.logo3 {
  animation-delay: calc(-60s * 3 / 16);
}
.customer-logo.logo4 {
  animation-delay: calc(-60s * 4 / 16);
}
.customer-logo.logo5 {
  animation-delay: calc(-60s * 5 / 16);
}
.customer-logo.logo6 {
  animation-delay: calc(-60s * 6 / 16);
}
.customer-logo.logo7 {
  animation-delay: calc(-60s * 7 / 16);
}
.customer-logo.logo8 {
  animation-delay: calc(-60s * 8 / 16);
}
.customer-logo.logo9 {
  animation-delay: calc(-60s * 9 / 16);
}
.customer-logo.logo10 {
  animation-delay: calc(-60s * 10 / 16);
}
.customer-logo.logo11 {
  animation-delay: calc(-60s * 11 / 16);
}
.customer-logo.logo12 {
  animation-delay: calc(-60s * 12 / 16);
}
.customer-logo.logo13 {
  animation-delay: calc(-60s * 13 / 16);
}
.customer-logo.logo14 {
  animation-delay: calc(-60s * 14 / 16);
}
.customer-logo.logo15 {
  animation-delay: calc(-60s * 15 / 16);
}
.customer-logo.logo16 {
  animation-delay: calc(-60s * 16 / 16);
}

/* 第二个滚动区域交错延迟（11张图片） */
.scroll-wrapper-stagger .customer-logo {
  left: max(calc(14rem * 11), 100%);
  animation-duration: 36s;
  animation-direction: reverse;
}
.scroll-wrapper-stagger .customer-logo.logo1 {
  animation-delay: calc(-36s * 1 / 11) !important;
}
.scroll-wrapper-stagger .customer-logo.logo2 {
  animation-delay: calc(-36s * 2 / 11) !important;
}
.scroll-wrapper-stagger .customer-logo.logo3 {
  animation-delay: calc(-36s * 3 / 11) !important;
}
.scroll-wrapper-stagger .customer-logo.logo4 {
  animation-delay: calc(-36s * 4 / 11) !important;
}
.scroll-wrapper-stagger .customer-logo.logo5 {
  animation-delay: calc(-36s * 5 / 11) !important;
}
.scroll-wrapper-stagger .customer-logo.logo6 {
  animation-delay: calc(-36s * 6 / 11) !important;
}
.scroll-wrapper-stagger .customer-logo.logo7 {
  animation-delay: calc(-36s * 7 / 11) !important;
}
.scroll-wrapper-stagger .customer-logo.logo8 {
  animation-delay: calc(-36s * 8 / 11) !important;
}
.scroll-wrapper-stagger .customer-logo.logo9 {
  animation-delay: calc(-36s * 9 / 11) !important;
}
.scroll-wrapper-stagger .customer-logo.logo10 {
  animation-delay: calc(-36s * 10 / 11) !important;
}
.scroll-wrapper-stagger .customer-logo.logo11 {
  animation-delay: calc(-36s * 11 / 11) !important;
}

@keyframes customerLogoScorll {
  to {
    left: -14rem;
  }
}