@charset "utf-8";

/* ============================================
   碎片切换轮播 - 样式表
   ============================================ */

/* --- 全局重置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

}

/* --- 页面容器 --- */
.page-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 50px; /* 轮播距顶部的间距 */
}

/* --- 轮播主容器 --- */
.banner {
    position: relative;
    overflow: hidden; /* 裁剪超出容器的碎片动画 */
}

/* --- 图片渲染区域 --- */
.banner-view {
    position: relative;
    height: 100%;
    z-index: 99;
    background-color: #0A0B10; /* 图片加载前的占位背景色 */
    background-repeat: no-repeat;
}

/* 每个栅格碎片 - 由 JS 动态创建 */
.banner-view i {
    position: relative;
    display: block;
    float: left;
    background-repeat: no-repeat;
}

/* --- 左右切换按钮 --- */
.banner-btn {
    position: absolute;
    width: 100%;
    height: 0;
    top: 45%; /* 垂直居中偏上 */
    font-family: "宋体";
    font-size: 20px;
    z-index: 1000;
}

/* 单个按钮样式 */
.banner-btn span {
    display: block;
    float: left;
    width: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
    color: #CCCCCC;
    cursor: pointer;
    font-weight: 800;
}

/* 按钮悬停效果 */
.banner-btn span:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* 下一个按钮（>）靠右 */
.banner-btn span + span {
    float: right;
}

/* --- 底部圆点指示器 --- */
.banner-number {
    position: absolute;
    bottom: 35px;
    width: 100%;
    height: 0;
    font-size: 0;
    text-align: center;
    z-index: 1000;
}

/* 每个圆点 */
.banner-number > * {
    display: inline-block;
    border: 2px solid #fff;
    border-radius: 50%;
    margin: 0 8px;
    width: 10px;
    height: 10px;
    background-color: #003D4F; /* 未选中状态 */
    cursor: pointer;
}

/* 圆点悬停 & 当前选中状态 */
.banner-number > *:hover,
.banner-number > *.on {
    background-color: #666666;
}

/* --- 底部进度条 --- */
.banner-progres {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 3px;
    z-index: 1000;
}

/* 进度条填充条 - 由 JS 控制宽度动画 */
.banner-progres i {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
    display: block;
    height: 100%;
    width: 0;
}