.imagelist{background:#fff;}
.imagelist-content{margin:0;}
.imagelist-content:after{display:block; content:''; clear:both;}
.imagelist-item{float:left; width:20%;}
.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; visibility:hidden; opacity:0; background:#000;}
.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 rgba(255,255,255,.38); 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; }
.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:#fc6b00;}
.imagelist dir{padding:12px 0;}
@media(max-width:1600px){  
.imagelist-item{width:25%;}
}
@media(max-width:1200px){  
.imagelist-item{width:33.33%;}
}
@media(max-width:992px){
.imagelist-item{width:50%;}
}
@media(max-width:640px){
.imagelist-item{width:100%;}
}