.x-contain{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: rgba(40,40,40,0.8);
	overflow: hidden;
	z-index:99999999;
	animation:show 0.8s forwards;
}
.x-contain .showPicName{
	position:absolute;
    right: 0;
    left:0;
    bottom:0;
    height:50px;
    z-index: 500;
    background:rgba(40,40,40,0.2);
    line-height: 50px;
    color: #fff;
    font-size: 16px;
    text-align: center;
}
.x-contain .showPicName span {
    margin: 0 15px;
}
.x-contain .left-rotate{
    display: inline-block;
    width: 30px;
    height: 30px;
    z-index: 500;
    cursor: pointer;
    background:url('./left-rotate.png') center no-repeat;
    background-size: 24px;
    vertical-align: middle;
    opacity:0.9;
    
}
.x-contain .right-rotate{
    display: inline-block;
    width: 30px;
    height: 30px;
    z-index: 500;
    cursor: pointer;
    background: url(./right-rotate.png) center no-repeat;
    background-size: 24px;
    vertical-align: middle;
    opacity: 0.9;
}
@keyframes show {
    from{
    	transform:scale(0,0);
    	-ms-transform:scale(0,0);
    }
    to{
    	transform:scale(1,1);
    	-ms-transform:scale(1,1);
    }
}
.x-contain .list-img{
     position: relative;
     margin:0;
     margin:initial;
 }
.x-contain .x-left,.x-contain .x-right{
     position: absolute;
	 width: 50px;
	 height: 50px;
	 top: 50%;
	 bottom: 50%;
	 margin: auto;
	 cursor: pointer;
	 opacity:0.9;
}
.x-contain .x-left{
    left: 40px;
    background:url('./left.png') center no-repeat;
}
.x-contain .x-left:hover{
	opacity:1;
}
.x-contain .x-right{
    right: 40px;
    background:url('./right.png') center no-repeat;
}
.x-contain .x-right:hover{
	opacity:1;
}
.x-contain .list-img .img-items{
    visibility: hidden;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin:0;
}
.x-contain .list-img  img{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin:0;
}
.x-contain .list-img .x-active{
    visibility: visible;
    display:block;
}     
.x-contain .remove-del{
    position: absolute;
    right: 0;
    width: 30px;
    height: 30px;
    z-index: 500;
    cursor: pointer;
    background:url('./close.png') center no-repeat;
    opacity:0.9;
    
}
	    
.x-contain .remove-del:hover{
    opacity:1;
    animation:rotatein 0.8s forwards;
}
@keyframes rotatein{
	from{
		transform:rotate(0);
		-ms-transform:rotate(0);	
	}
	to{
		transform:rotate(180deg);	
		-ms-transform:rotate(180deg);
	}
}
@keyframes rotateout{
	from{
		transform:rotate(180deg);	
		-ms-transform:rotate(180deg);
	}
	to{
		transform:rotate(-180deg);
		-ms-transform:rotate(-180deg);	
	}
}
.x-contain .hidden-pics{
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}