.slide {
	width: 100%; height: 600px; overflow: hidden; position: relative;
}
.slide ul {
	margin: 0px;
}
.slide ul li {
	list-style: none; left: 0px; top: 0px; width: 100%; height: 100%; display: block; position: absolute;
}
.slide .dots {
	left: 0px; width: 100%; text-align: center; right: 0px; bottom: 20px; position: absolute; z-index: 3;
}
.slide .dots li {
	list-style: none; margin: 0px 10px; border-radius: 50%; border: 2px solid rgb(255, 255, 255); transition:background 0.5s, opacity 0.5s; border-image: none; width: 10px; height: 10px; display: inline-block; cursor: pointer; opacity: 0.4;
}
.slide .dots li.active {
	background: rgb(255, 255, 255); opacity: 1;
}
.slide .arrow {
	transition:background 0.5s, opacity 0.5s; left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; z-index: 2;
}
.slide .arrow .arrow-left {
	transition:background 0.5s, opacity 0.5s; top: 50%; width: 50px; height: 50px; margin-top: -25px; display: block; position: absolute; cursor: pointer; opacity: 0.5;
}
.slide .arrow .arrow-right {
	transition:background 0.5s, opacity 0.5s; top: 50%; width: 50px; height: 50px; margin-top: -25px; display: block; position: absolute; cursor: pointer; opacity: 0.5;
}
.slide .arrow .arrow-left:hover {
	opacity: 1;
}
.slide .arrow .arrow-right:hover {
	opacity: 1;
}
.slide .arrow .arrow-left {
	background: url("../img/arrow-left.png"); left: 20px;
}
.slide .arrow .arrow-right {
	background: url("../img/arrow-right.png"); right: 20px;
}
@media screen and (max-width:959px){
	.slide {
		height: 500px; margin: 20px 0px 0px 0px; 
	}
}
@media screen and (max-width:500px){
	.slide {
		height: 400px; margin: 20px 0px 0px 0px; 
	}
}