/* 全局通配符：清除所有标签默认内外边距 */
*{
	margin: 0;    /* 清除外边距 */
	padding: 0;   /* 清除内边距 */
}

/* 轮播图外层容器 */
.banner{
	position: relative; /* 相对定位，内部按钮、指示器可绝对定位 */
	overflow: hidden;   /* 超出容器的轮播图片隐藏 */
}

/* 轮播图片可视区域容器 */
.banner-view{
	position: relative;
	height: 100%;
	z-index: 99;                /* 层级低于控制按钮 */
	background-color: #0A0B10;  /* 轮播空白填充底色：深黑蓝色 */
	background-repeat: no-repeat;/* 背景图不平铺 */
}

/* 单张轮播图片容器标签i */
.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;             /* 文字加粗 */
	background-image:             /* 此处属性无值，预留精灵图按钮 */
}

/* 切换按钮鼠标悬浮效果 */
.banner-btn span:hover{
	background-color: rgba(0,0,0,0.6); /* 透明度提高，底色变浅 */
}

/* 第二个span（右切换按钮）靠右浮动 */
.banner-btn span + span{
	float: right;
}

/* 底部小圆点页码指示器容器 */
.banner-number{
	position: absolute; /* 悬浮在轮播底部 */
	bottom: 35px;       /* 距离底部35像素 */
	width: 100%;
	height: 0;
	font-size: 0;       /* 清除行内元素默认间距 */
	text-align: center; /* 圆点整体居中 */
	z-index: 1000;      /* 顶层显示 */
}

/* 单个页码圆点 */
.banner-number > *{
	display: inline-block;
	border: 2px solid #fff;    /* 白色2px边框 */
	border-radius: 50%;        /* 圆形圆角 */
	margin: 0 8px;             /* 圆点左右间距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; /* 进度条高度3像素 */
	z-index: 1000;
}

/* 进度条填充条 */
.banner-progres i{
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 3px; /* 圆角和容器匹配 */
	display: block;
	height: 100%;
	width: 0; /* 默认宽度0，JS控制动画拉长 */
}