/* ==============================
   自定义轮播图样式（含指示器 dots）
   适用于 .silder + .slider-dots 结构
   ============================== */

/* 轮播图容器：相对定位，便于内部绝对定位元素（如 dots） */
.silder {
  position: relative;
  /* width: 100%; */
  /* 高度建议由 JS 或内联样式控制，或设固定值 */
}

/* 轮播列表（可选，用于包裹 .slide） */
.silder_list {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 单个幻灯片项 */
.slide {
  display: none;
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例并填满容器 */
  display: block;
}

/* 当前激活的幻灯片 */
.slide.activeImg {
  display: block;
}

/* ========== 指示器（Dots） ========== */

/* 指示器容器 - 定位在右下角 */
.slider-dots {
  position: absolute;
  bottom: 16px;       /* 距离底部 16px */
  right: 16px;        /* 距离右侧 16px */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;           /* 圆点间距 */
  z-index: 10000;
}

/* 默认圆点样式 */
.slider-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5); /* 半透明白 */
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-block;
}

/* 激活状态的圆点 */
.slider-dots .dot.active {
  background-color: #ffffff; /* 纯白 */
}

/* 可选：鼠标悬停效果（提升交互体验） */
.slider-dots .dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}