html,body {
	background-color:#232323;
}
#wrap {
	width:500px;
	height:300px;
	margin:10px auto;
	padding:10px;
	border-radius:5px;
	box-shadow:0 0 5px #000;
	position:relative;
}
#wrap .pic {
	width:500px;
	height:300px;
	perspective:800px;
}
#wrap .pic ul {
	width:500px;
	height:300px;
	position:absolute;
	transform-style:preserve-3d;
	z-index:-1;
}
#wrap .pic ul.now {
	z-index:2;
}
#wrap .pic ul.next {
	z-index:1;
}
#wrap .pic ul li {
	list-style:none;
	position:absolute;
	transform:translate(0px,0px) rotateX(0deg);
	border:1px solid transparent;
	background-origin:border-box;
	opacity:1;
}
#wrap .pic ul li.on {
	transform:translate(-50px,-50px) rotateX(720deg);
	border:1px solid #000;
	opacity:0;
}
#wrap .pic ul li.move {
	transition:1.5s transform,1.5s opacity;
}
#wrap .pic ul li.last {
	transform:translate(0px,0px) rotateX(0deg);
	border:1px solid transparent;
	opacity:1;
}
#wrap .pic .ul1 li {
	background-image:url("http://www.jq22.com/img/cs/500x300a.png");
}
#wrap .pic .ul2 li {
	background-image:url("http://www.jq22.com/img/cs/500x300b.png");
}
#wrap .pic .ul3 li {
	background-image:url("http://www.jq22.com/img/cs/500x300c.png");
}
#wrap .pic .ul4 li {
	background-image:url("http://www.jq22.com/img/cs/500x300d.png");
}
#wrap .pic .ul5 li {
	background-image:url("http://www.jq22.com/img/cs/500x300.png");
}
#wrap .btn div {
	width:40px;
	height:69px;
	position:absolute;
	top:50%;
	margin-top:-35px;
	background-image:url("http://www.jq22.com/tp/6abd91bf-5c97-4fbc-8de6-3fe65ebbe561.png");
	cursor:pointer;
}
#wrap .btn div#left {
	left:15px;
	background-position:0px 0px;
}
#wrap .btn div#right {
	right:15px;
	background-position:-42px 0px;
}