:root {
  --qi-scroll-title: 48px;
  --marquee-speed: 200s; /* 默认动画速度 */
}

html, body {
  overflow-x: hidden;
}

/* ===== 基础样式 ===== */
.qili-scroll {
  padding: 20px 0;
}

.qili-scroll h2 {
  font-size: var(--qi-scroll-title);
  color: var(--color-primary);
  line-height: 2;
  text-align: center;
  margin-bottom: 20px;
}

/* ===== 跑马灯容器 ===== */
.qili-marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  position: relative;
}

.qili-marquee .marquee-content {
  display: flex;
  overflow: hidden;
  position: relative;
 
}

/* ===== 图片滚动动画（从右向左） ===== */
@keyframes loop-anim-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.qili-marquee .marquee-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: max-content;
  will-change: transform;
  animation: loop-anim-left var(--marquee-speed) linear infinite;
}

/* 悬停暂停 */
.qili-marquee:hover .marquee-item {
  animation-play-state: paused;
}

/* ===== 图片样式 ===== */
.marquee-link {
  display: block;
  line-height: 0;
  transition: transform 0.3s ease;
}

.marquee-link:hover {
  transform: scale(1.05);
}

.qili-marquee .marquee-item img {
  margin: 0 20px;
  height: auto;
  max-height: 400px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

/* ===== 懒加载图片 ===== */
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease;
  background: #f5f5f5;
  border-radius: 8px;
}

.lazy-image.loaded {
  opacity: 1;
}

/* ===== 响应式适配 ===== */
@media (max-width: 1500px) {
  :root { --qi-scroll-title: 42px; }
}

@media (max-width: 1280px) {
  :root { --qi-scroll-title: 36px; }
}

@media (max-width: 1200px) {
  :root { 
    --qi-scroll-title: 30px;
    --marquee-speed: 120s; 
  }
  .qili-marquee .marquee-item img {
    max-height: 300px;
    margin: 0 15px;
  }
}

@media (max-width: 992px) {
  :root { 
    --qi-scroll-title: 26px; 
    --marquee-speed: 100s; 
  }
}

@media (max-width: 768px) {
  :root { 
    --qi-scroll-title: 22px;
    --marquee-speed: 80s;
  }
  .qili-marquee .marquee-item img {
    max-height: 250px;
    margin: 0 10px;
  }
}

@media (max-width: 576px) {
  :root { 
    --qi-scroll-title: 18px;
    --marquee-speed: 70s;
  }
}

@media (max-width: 480px) {
  :root { --marquee-speed: 60s; }
  .qili-marquee .marquee-item img {
    max-height: 150px;
    margin: 0 8px;
  }
}