@charset "utf-8";
/* CSS Document */


/* 自动轮播样式 */
.banner-container{
	width:1920px;
	height: 582px;
	/* 轮播图居中 */
	margin:1rem auto;
	/* 隐藏超出展示容器的内容 */
	overflow: hidden;
	position: relative;
}

.banner-container .banner-img-container {
	width:7680px;
	height:582px;
	overflow: hidden;
	position: absolute;
	/* 开启弹性盒，让图片横向排列 */
	display: flex;
   /* animation，@keyframes 搭配使用  run为自定义名称，10s时间*/
	animation: run 10s ease infinite;
}

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

/* 动画关键帧 */
/* 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。 */
@keyframes run {
	0%,10%{
		/* margin-left: 0; */
		transform: translateX(0);
	}
	20%,30%{
		/* margin-left: -1200px;; */
		transform: translateX(-1920px);
	}
	40%,50%{
		/* margin-left: -2400px; */
		transform: translateX(-3840px);
	}
	60%,70%{
		/* margin-left: -2400px; */
		transform: translateX(-5760px);
	}
	100%{
		/* margin-left: -3600px; */
		transform: translateX(0);
	}

}