#slider{
	position:  relative;
	margin-top:  2px;
	height:  300px;
	overflow:  hidden;
}

#slider .img-list{
	height:  300px;
	position:  relative;
}

#slider .img{
	display:  inline-block;
	position:  absolute;
	top:  0;
	width:  100%;
	height:  300px;
	vertical-align:  top;
	background-repeat:  no-repeat;
	cursor:  pointer;
}

#slider .points{
	position:  relative;
	margin-top:  -30px;
	font-size:  0;
	text-align:  center;
}

#slider .point{
	display:  inline-block;
	width:  18px;
	height: 30px;
}

#slider .point .circle{
	width:  1px;
	height:  1px;
	border:  1px solid rgba(204, 204, 204, 0.7);
	background:  rgba(204, 204, 205, 0.7);
	border-radius:  50%;
	margin-left:  7px;
	margin-top:  14px;
	cursor:  pointer;
}

#slider .point.active .circle{
	background-color:  transparent;
	margin-left:  6px;
	margin-top:  12px;
	width:  5px;
	height:  5px;
	cursor:  default;
}

#slider .control{
	position:  absolute;
	margin-top:  -22.5px;
	top:  50%;
	width:  45px;
	height:  45px;
	-ms-transform:  rotate(45deg);
	-webkit-transform:  rotate(45deg);
	transform:  rotate(45deg);
	border:  2px solid rgb(204, 204, 204, 0.7);
	cursor:  pointer;
	transition:  200ms ease-in-out;
}

#slider .control-left{
	left:  -30px;
	border-top:  none;
	border-right:  none;
}

#slider .control-right{
	right:  -30px;
	border-left:  none;
	border-bottom:  none;
}

#slider:hover .control-left{
	left:  20px;
}

#slider:hover .control-right{
	right:  20px;
}