.banner{
	width: 100%;
	position: relative;
}


.arrow{
	position: absolute;
	width: 100%;
    transform: translateY(50px);
	bottom: 50%;
	display: flex;
	justify-content: space-between;
}

.arrow-l,
.arrow-r {
    height: 100px;
	width: 50px;
}

.arrow-l {
    cursor: pointer;
    background: url(./../img/banner/arrow-l.png) no-repeat center center / contain;
}
.arrow-r {
    cursor: pointer;
    background: url(./../img/banner/arrow-r.png) no-repeat center center / contain;
}
.arrow-l:hover{
    background: url(./../img/banner/arrow-l-a.png) no-repeat center center / contain;
}
.arrow-r:hover{
    background: url(./../img/banner/arrow-r-a.png) no-repeat center center / contain;
}

.icon-box{
	position: absolute;
	width: 100%;
	bottom: 10px;
	display: flex;
	justify-content: center;
}
.icon-item {
	float: left;
	margin:0 10px;
    height: 15px;
    width: 15px;
    border: 2px solid #fff;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.fixed{
	width: 100%;
	opacity: 0;
}

.bannerImg{
	position: relative;
	overflow: hidden;
	width: 100%;
}
.bannerImg img{
	width: 100%;
}
.bannerImg li{
	overflow: hidden;
	width: calc(100% / 3);
	flex-shrink: 0;
}
.bannerImg .ulImg{
	display: flex;
	/* transition: all 0.3s; */
	width: 300%;
	z-index: -99;
	position: absolute;
	top: 0px;
	left: 0px;
}
.active {
    background: #fff;
}






.focus {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.focus img {
	width:100%;
}
.focus ul {
	overflow: hidden;
	margin-left: -100%;
	width: 500%;
}

.focus ul li {
	float: left;
	width: 20%;
}
.focus ol {
	position: absolute;
	bottom: 15px;
	right: 15px;
	margin: 0;
}
.focus ol li{
	display: inline-block;  /*使li标签在一行显示*/
	width: 5px;
	height: 5px;
	border-radius: 2px;
	background-color: white;
	list-style: none;
	transition: all .3s;  /*使宽度慢慢变化*/
}
.focus ol li.current {
	width: 15px;
	background-color: coral;
}