/* 让轮播图里的 li 绝对定位叠加在一起，并自带 0.5 秒淡入淡出动画 */
.content > ul {
    position: relative;
    width: 580px;
    height: 357px;
}

.content > ul > li {
    position: absolute;
    top: 0;
    left: 0;
    width: 580px;
    height: 357px;
    opacity: 0;              /* 默认透明隐藏 */
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s; /* 渐变动画 */
    z-index: 1;
}

/* 当拥有 active 类名时，淡入显示 */
.content > ul > li.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* 修改原有的小圆点样式，让 .active 作用于 li 自身 */
.dot > ul > li.active {
    background: rgba(255, 255, 255, .6) !important;
}
/* ====================================================
   🛠️ 终极修复：解决按钮错位、变大、以及挡住图片无法点击的问题
   ==================================================== */

.carousel {
    position: relative !important;
    width: 580px !important;
    height: 357px !important;
    overflow: hidden !important;
}

/* 1. 强行把按钮整行容器定位在中央，并设置【鼠标穿透】 */
.carousel .pos {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 50px !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    pointer-events: none !important; /* ✨ 关键：让整行透明区域不响应鼠标，直接“穿透”点击到下方的图片 */
}

/* 2. 恢复真正的左右按钮自身的鼠标响应 */
.carousel .pos .left, 
.carousel .pos .right {
    float: left !important;
    width: 50px !important;
    height: 50px !important;
    display: block !important;
    pointer-events: auto !important; /* ✨ 关键：按钮自身需要响应点击 */
}
.carousel .pos .right {
    float: right !important;
}

/* 3. 约束按钮图标大小 */
.carousel .pos a img {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    display: block !important;
    object-fit: contain !important;
}

/* 4. 同样让底部小圆点的整行容器支持【鼠标穿透】 */
.carousel .dot {
    position: absolute !important;
    z-index: 2 !important;
    width: 100% !important;
    bottom: 30px !important;
    text-align: center !important;
    pointer-events: none !important; /* ✨ 关键：防止小圆点那一整行挡住图片下方 */
}

.carousel .dot ul {
    display: inline-block !important;
    pointer-events: auto !important; /* ✨ 关键：保证小圆点本身可以被点击 */
}

/* ====================================================
   🛠️ 强行修复：小圆点“看不见”、“被遮挡”或“错位”的问题
   ==================================================== */

/* 1. 强制提升整行小圆点容器的层级，并绝对居中 */
.carousel .dot {
    position: absolute !important;
    bottom: 15px !important;       /* 距离底部 15px，确保在安全区域内，不被外框切掉 */
    left: 50% !important;          /* 定位到中间 */
    transform: translateX(-50%) !important; /* 完美水平居中 */
    z-index: 99 !important;        /* ✨ 关键：把层级提到最高，压在图片和按钮之上 */
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    pointer-events: auto !important;
}

/* 2. 清除浏览器自带的 ul 列表缩进和圆点样式 */
.carousel .dot ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;       /* 用 flex 布局让小圆点横向排开 */
    justify-content: center !important;
    align-items: center !important;
}

/* 3. 强行给每个小圆点画出形状和颜色 */
.carousel .dot ul li {
    float: left; /* 备用兼容 */
    width: 10px !important;        /* 强行给圆点 10px 宽度 */
    height: 10px !important;       /* 强行给圆点 10px 高度 */
    margin: 0 5px !important;      /* 圆点之间的左右间距 */
    background-color: rgba(255, 255, 255, 0.5) !important; /* 默认是：半透明白色 */
    border-radius: 50% !important; /* ✨ 关键：把正方形变成正圆形 */
    cursor: pointer !important;
    text-indent: -9999px !important; /* 如果 li 里面有数字，强行把数字隐藏 */
    overflow: hidden !important;
    display: block !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important; /* 加一层微弱黑色边框，防止遇到纯白图片时看不见 */
}

/* 4. 强行让【当前激活/高亮】的小圆点变成纯白色 */
.carousel .dot ul li.active,
.carousel .dot ul li.on {
    background-color: #ffffff !important; /* 激活时变成亮白色 */
    opacity: 1 !important;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8) !important; /* 加点发光效果 */
}