@charset "utf-8";

*{

	margin: 0;

	padding: 0;

}

ul li{

	list-style: none;
	color:#000;

}

img{

	border: 0;

}

/* 垂直居中 */

.small-img{

	display: flex;

	align-items:center;

	justify-content: center;

}

.clearfix:before,

.clearfix:after{

  display: table;

  line-height: 0;

  content: "";

}

.magnifier{

	width: 500px;

	position: relative;

	/*margin-top: 100px;*/

	/*margin-left: 100px;*/

}

.magnifier-container{

	width: 500px;

	height: 500px;

	overflow: hidden;

	position: relative;

	border: 1px solid #ddd;

}

.move-view{

	width: 100px;

	height: 100px;

	position: absolute;

	background-image: url('../images/move-box.png');

}

.images-cover{

	height: 100%;

	width: 100%;

	position: relative;

}

.images-cover img{

	position: absolute;

}

.magnifier-assembly{
	margin-top: 27px;
	height: 110px;

	overflow: hidden;

	position: relative;

	padding-left: 30px;

	padding-right: 30px;

}

.magnifier-btn{

	position: absolute;

	font-family: "宋体";

	width: 100%;

	top: 0;

	left: 0;

	margin-top: 0;

}

.magnifier-btn span{

	line-height: 110px;

	height: 110px;

	width: 30px;

	background-color: #6e6e6e;

	color: #fff;

	display: block;

	z-index: 9998;

	text-align: center;

	font-size: 20px;

	cursor: pointer;

	border-radius: 3px;

}

.magnifier-btn .magnifier-btn-left{

	float: left;

}

.magnifier-btn .magnifier-btn-right{

	float: right;

}

.magnifier-line{

	position: relative;

	overflow: hidden;

	height: 110px;

}

.magnifier-line ul{

	display: block;

	font-size: 0;

	width: 10000%;

	position: absolute;

	left: 0;

	z-index: 9997;

}

.magnifier-line li{

	float: left;

	width: 132px;

	cursor: pointer;


}

.magnifier-line ul > .active .small-img{

	border:3px solid #000;

}

.small-img{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	/*margin-left: 18px;*/
	border: 1px solid #ddd;
	height: 110px;

	overflow: hidden;
	margin:8px;
	margin-top: 0;
	margin-bottom: 0;

	text-align: center;

}

.small-img img{

	max-width: 100%;

	max-height: 100%;

}

.magnifier-view{

	width: 100%;

	height: 100%;

	position: absolute;

	right: -105%;

	top: 0;

	z-index: 9999;

	background-color: #fff;

	display: none;

	overflow: hidden;

}

.magnifier-view img{

	display: block;

}

.animation03{

	transition: all 0.3s ease-in 0.1s;

	-ms-transition: all 0.3s ease-in 0.1s;

	-moz-transition: all 0.3s ease-in 0.1s;

	-webkit-transition: all 0.3s ease-in 0.1s;

	-o-transition: all 0.3s ease-in 0.1s;

}