/* 核心容器 */
.responsive-slider {
  position: relative;
  width: 100%;
  /*max-width: 1200px;   最大宽度限制 */
  margin: 0 auto;
  aspect-ratio: 16/9; /* 现代浏览器宽高比控制 */
  overflow: hidden;
}

/* 备用宽高比方案 */
@supports not (aspect-ratio: 16/9) {
  .responsive-slider {
    height: 0;
    padding-bottom: 56.25%; /* 16:9比例备用方案 */
  }
}

/* 图片自适应 */
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 关键图片适应属性 */
  opacity: 0;
  animation: slideShow 24s linear infinite;
}

/* 动画时序控制 */
.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 6s; }
.slide:nth-child(3) { animation-delay: 12s; }
.slide:nth-child(4) { animation-delay: 18s; }

@keyframes slideShow {
  0% { opacity: 0; }
  2% { opacity: 1; }       /* 淡入时间 */
  20% { opacity: 1; }      /* 保持显示 */
  22% { opacity: 0; }      /* 淡出时间 */
  100% { opacity: 0; }     /* 等待阶段 */
}

/* 响应式适配 */
@media (max-width: 768px) {
  .responsive-slider {
    aspect-ratio: 4/3;     /* 移动端比例调整 */
  }
  
  @supports not (aspect-ratio: 4/3) {
    .responsive-slider {
      padding-bottom: 75%; /* 4:3比例备用 */
    }
  }

  .slide {
    animation-duration: 30s; /* 移动端切换更慢 */
  }
}

@media (max-width: 480px) {
  .responsive-slider {
    aspect-ratio: 1;        /* 正方形显示 */
  }
  
  @supports not (aspect-ratio: 1) {
    .responsive-slider {
      padding-bottom: 100%; /* 1:1比例备用 */
    }
  }
}