* {
	margin:0;
	padding:0;
	list-style:none;
}
.imgbox {
	width:640px;
	height:220px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
.imgbox li {
	width:150px;
	height:100px;
	margin:10px 0px 0px 10px;
	float:left;
}
.imgbox li img {
	width:100%;
	height:100%;
	display:block;
}
.showimg {
	width:600px;
	height:400px;
	position:absolute;
	left:0;
	right:0;
	top:0;
	margin:auto;
	bottom:0;
	background:#fff;
	box-shadow:0px 0px 0px 1000px rgba(0,0,0,0.7);
	z-index:10;
	transform:scale(0,0);
	transition:transform 1s;
}
.showimg  img {
	width:100%;
	height:100%;
}
.btnL,.btnR {
	width:100px;
	height:200px;
	position:absolute;
	top:0;
	bottom:0;
	margin:auto;
}
.btnL {
	background:url(http://www.jq22.com/demo/jqueryWflbt201803192258/images/left2.png);
	background-size:100px 200px;
	left:0;
}
.btnR {
	background:url(http://www.jq22.com/demo/jqueryWflbt201803192258/images/right2.png);
	background-size:100px 200px;
	right:0;
}
.close {
	width:50px;
	height:50px;
	background:url(http://www.jq22.com/tp/45f352e9-fc7f-44ed-9990-2a100a0c422b.png);
	background-size:50px 50px;
	border-radius:50%;
	position:absolute;
	right:-25px;
	top:-25px;
}
body .active {
	transform:scale(1,1);
}