/* 轮播图容器样式 */
.cl {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 轮播图项容器 */
.cl-header {
  display: flex;
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

/* 单个轮播图项样式 - 关键部分 */
.cl-image {
  /* 动态宽度计算：100% / 列表长度 */
  flex: 1 0 0; 
  min-width: 0; /* 防止内容溢出 */
  height: 100px;
  /* object-fit: cover; */
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 
    0 6px 15px rgba(0, 0, 0, 0.1),
    0 0 0 2px rgba(255, 255, 255, 0.8);
  /* margin: 0 10px; */
  position: relative;
  overflow: hidden;
} 
.cl-header2{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: -10px;
}
.cl-image2{
   border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 
    0 6px 15px rgba(0, 0, 0, 0.1),
    0 0 0 2px rgba(255, 255, 255, 0.8);
}

/* 添加悬停效果 */
.cl-image:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.15),
    0 0 0 3px #4dabf7;
  z-index: 10;
}
.cl-image2:hover{
    transform: translateY(-8px) scale(1.03);
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.15),
    0 0 0 3px #4dabf7;
  z-index: 10;
}

.cl-image2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
  opacity: 0.7;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 添加悬停时的覆盖效果 */
.cl-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
  opacity: 0.7;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cl-image:hover::after {
  opacity: 0.9;
}