.imagelist{padding:50px 0; background:;}
.imagelist-content{display:block; margin:0 -16px;}
.imagelist-content:after{display:block; content:''; clear:both;}
.imagelist-item{float:left; width:33.333%; padding:16px;}
.imagelist-item a{display:block; border:1px solid #e8e8e8; background:#fff; overflow:hidden;}
.imagelist-item a>ins{display:block; overflow:hidden; position:relative;}
.imagelist-item a>ins:before{position:absolute; content:'+'; font-size:38px; color:#fff; z-index:1; top:0; right:0; bottom:0; left:0; 
background:rgba(0,0,0,0.38); transform:translateY(-100%); transition:.3s;
display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-o-box; display:box; 
-webkit-box-pack:center; -moz-box-pack:center; -ms-flex-pack:center; -o-box-pack:center; box-pack:center; 
-webkit-box-align:center; -moz-box-align:center; -ms-flex-align:center; -o-box-align:center; box-align:center;}
.imagelist-item a>ins>img{display:block; width:100%; transition:.8s;}
.imagelist-item a span{display:block; padding:28px; transition:.3s; position:relative; z-index:8; background:#fff;}
.imagelist-item a span>h3{margin-bottom:18px; overflow:hidden; transition:.3s; text-overflow:ellipsis; white-space:nowrap; font-size:18px;}
.imagelist-item a span>p{display:block; overflow:hidden; transition:.3s; color:#989898; height:63px;}
.imagelist-item a span>u{display:block; text-decoration:none; transition:.3s; height:30px; margin-top:18px;}
.imagelist-item a span>u>i{display:inline-block; border:1px solid #d8d8d8; transition:.3s; border-radius:3px; font-style:normal; line-height:28px; padding:0 8px; color:#686868;}
.imagelist-item a span>u>i+i{margin-left:6px;}
.imagelist-item a span>u>i:hover{color:#fff; border-color:#f20f0f; background:#f20f0f;}

.imagelist-item a:hover>ins:before{transform:translateY(0);}
.imagelist-item a:hover>ins>img{transform:scale(1.08);}
.imagelist-item a:hover span{transform:translateY(-18px);}
.imagelist-item a:hover span>h3{transform:translateY(8px); color:#f20f0f;}
.imagelist-item a:hover span>p{transform:translateY(8px);}
.imagelist-item a:hover span>u{transform:translateY(8px);}
.imagelist dir{padding-top:38px;}
@media(max-width:1200px){
.imagelist{padding:38px 0;}
.imagelist-content{margin:0 -10px;}
.imagelist-item{padding:10px;}
.imagelist-item a span{padding:18px;}
.imagelist-item a span>h3{margin-bottom:8px;}
.imagelist dir{padding-top:28px;}
}
@media(max-width:992px){
.imagelist-item{width:50%;}
}
@media(max-width:767px){
.imagelist{padding:18px 0;}
.imagelist-content{margin:0 -4px;}
.imagelist-item{width:100%; padding:4px;}
.imagelist dir{padding-top:18px;}
}