/* 手动轮播样式 */
.banner-container{
	width:80vw;
	height:100vh;
	/* margin:1rem auto; */
	overflow: hidden;
	position: relative;
}

.banner-container .banner-img-container {
	width:160vw;
	height:100vh;
	overflow: hidden;
	position: absolute;
	display: flex;
	transition: transform 0.6s ease;
}

.banner-container .banner-img-container  img{
	width:100%;
	height:100%;
}

/* 轮播图圆点样式 */
.banner-container a {
	width:10px;
	height:10px;
	background:#706d6e;
	position: absolute;
	bottom:1rem;
	border-radius: 100%;
	margin:0;
	z-index: 1;
}

.banner-container input{
	width:10px;
	height:10px;
	position: absolute;
	bottom:1rem;
	margin:0;
	cursor: pointer;
	z-index: 2;
	opacity: 0;
}

/* 设置导航圆点偏移量（居中布局）*/
#banner-control-1,#banner-control-1 + .banner-nav-a{
    top: 50%;
    right: 1.5%;
}
#banner-control-2,#banner-control-2 + .banner-nav-a{
    top: 55%;
    right: 1.5%;
   
}


/* 设置高亮 */
/*当 input 被选中时 他的兄弟级a标签高亮展示*/
input:checked + .banner-nav-a {
    background-color: #FFF14E;
}

/* 设置轮播图动画 */
#banner-control-1:checked ~ .banner-img-container{
	transform: translateX(0vw);
}
#banner-control-2:checked ~ .banner-img-container{
	transform: translateX(-80vw);
}