* {
	padding:0;
	margin:0;
	box-sizing:border-box;
}
.main {
	width:500px;
	height:300px;
	border:1px solid black; 
	margin:50px auto;
	position:relative;
	overflow:hidden;
} 
.box {
	width:calc(6*500px);
	height:100%;
	/* border:1px solid red;
	*/

        transition:all 0.5s linear
}
.lf {
	height:100%;
	width:500px;
	/* border:1px solid green;
	*/
        float:left;
}
.main_left {
	position:absolute;
	top:125px;
	width:50px;
	height:50px;
	left:0px;
	/* border:1px solid blue;
	*/
        background:gray;
	cursor:pointer;
	opacity:0.5;
}
.main_right {
	position:absolute;
	top:125px;
	width:50px;
	height:50px;
	right:0px;
	background:gray;
	/* border:1px solid blue;
	*/
        cursor:pointer;
	opacity:0.5;
}
.lf img {
	width:100%;
	height:100%;
}
span p {
	line-height:50px;
	text-align:center;
}
.point-box {
	position:absolute;
	bottom:0;
	right:0;
	display:flex;
}
.point-box div {
	width:20px;
	height:20px;
	border-radius:50%;
	border:1px solid black;
	margin-right:5px;
	text-align:center;
	line-height:20px;
}
.color {
	background-color:red;
}