.imagelist{padding:50px 0; background:;}
.imagelist-content{margin:0 -16px;}
.imagelist-content:after{display:block; content:''; clear:both;}
.imagelist-item{float:left; width:25%; padding:16px;}
.imagelist-item a{position:relative; display:block; overflow:hidden;}
.imagelist-item a:before{position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; content:''; transition:.3s; transform:scale(0.6); visibility:hidden; opacity:0; background:#505fb7;}
.imagelist-item a span{position:absolute; z-index:8; top:50%; left:0; right:0; margin-top:-14px; padding:0 28px; text-align:center; color:#fff;}
.imagelist-item a span h3{font-size:24px; line-height:28px; transition:.3s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 0 8px #000;}
.imagelist-item a span p{opacity:0; visibility:hidden; transition:.3s; overflow:hidden; height:112px;}
.imagelist-item a span u{opacity:0; visibility:hidden; transition:.3s; border:1px solid #fff; transition:.3s; font-style:normal; text-decoration:none; padding:8px 18px; border-radius:3px;}
.imagelist-item a span u i{padding-left:8px;}
.imagelist-item a img{display:block; width:100%; transition:.3s;}
.imagelist-item a:hover img{transform:scale(1.08);}
.imagelist-item a:hover:before{visibility:visible; opacity:.8; transform:scale(1);}
.imagelist-item a:hover span h3{text-shadow:none; transform:translateY(-74px);}
.imagelist-item a:hover span p{opacity:1; visibility:visible; transform:translateY(-56px);}
.imagelist-item a:hover span u{opacity:1; visibility:visible;}
.imagelist-item a:hover span u:hover{background:#fff; color:#505fb7;}
.imagelist dir{padding:12px 0;}
@media(max-width:1200px){
.imagelist{padding:38px 0;}
.imagelist-content{margin:0 -8px;}
.imagelist-item{padding:8px; width:33.333%;}
}
@media(max-width:992px){
.imagelist-item{width:50%;}
}
@media(max-width:767px){
.imagelist{padding:18px 0;}
}
@media(max-width:640px){
.imagelist-item{width:100%;}
.imagelist-content{margin:0;}
}