* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
ul {
	list-style:none;
}
a {
	text-decoration:none;
}
.content {
	width:500px;
	height:300px;
	margin:0 auto;
	margin-top:30px;
	overflow:hidden;
	position:relative;
	border-radius:6px;
}
.content>.mian {
	position:absolute;
	height:100%;
}
.content>.mian::after {
	content:"";
	clear:both;
	display:block;
}
.content>.mian>.imgas {
	width:500px;
	height:100%;
	float:left;
	transition:all 0.15s linear;
}
.upper,.lower {
	position:absolute;
	font-size:2rem;
	color:#fff;
	top:50%;
	width:40px;
	height:60px;
	text-align:center;
	line-height:55px;
	margin-top:-30px;
	background-color:rgba(0,188,212,0.3);
	transition:all 0.15s ease-in-out;
	cursor:pointer;
	user-select:none;
}
.upper:hover,.lower:hover {
	filter:-shadow(0 0 2px pink);
}
.upper {
	left:0;
}
.lower {
	right:0;
}
.start {
	padding:5px;
	position:absolute;
	top:0;
	right:0;
	color:#000;
	display:flex;
	justify-content:space-between;
	align-items:center;
	background-color:rgba(61,255,135,0.3);
	cursor:pointer;
	user-select:none;
}
.slides {
	position:absolute;
	right:2%;
	bottom:1%;
	display:flex;
}
.slides>li {
	width:15px;
	height:15px;
	background-color:palegreen;
	border-radius:50%;
	transition:all 0.25s linear;
}
.slides>li+li {
	margin-left:10px;
}
.slidesActive {
	background-color:plum !important;
	transform:scale(1.2);
}