* {
	margin:0;
	padding:0;
}
li {
	list-style:none;
}
#box1,#box2,#box3 {
	position:relative;
	width:500px;
	height:300px;
	margin:50px auto;
}
.pic li {
	width:500px;
	height:300px;
	display:none;
	float:left;
	font-size:100px;
	line-height:300px;
	text-align:center;
	color:#fff;
}
.pic li.active {
	display:block;
}
.tab {
	position:absolute;
	bottom:20px;
	left:50%;
	width:150px;
	height:14px;
	padding:5px 0;
	margin-left:-80px;
	background:rgba(0,0,0,.5);
	border-radius:20px;
	transition:all 0.3s linear;
}
.tab:hover {
	transform:scale(1.2);
}
.tab li {
	float:left;
	height:14px;
	width:14px;
	margin:0 8px;
	border-radius:50%;
	background:#fff;
	cursor:pointer;
}
.tab li.active {
	background:#f60;
}
.btn {
	position:absolute;
	top:50%;
	margin-top:-30px;
	width:30px;
	height:60px;
	font-size:30px;
	line-height:60px;
	text-align:center;
	cursor:pointer;
	background:rgba(0,0,0,.5);
	color:#fff;
	cursor:pointer;
}
.right {
	right:0;
}