.imagelist{padding:60px 0; background:;}
.imagelist-text{text-align:center; font-size:16px; margin-bottom:50px;}
.imagelist-list{display:block;}
.imagelist-list>ul{display:block; margin:0 -12px;}
.imagelist-list>ul:after{display:block; content:''; clear:both;}
.imagelist-list>ul>li{float:left; width:33.3333%; padding:12px;}
.imagelist-list>ul>li>a{display:block; position:relative; color:#fff; overflow:hidden;}
.imagelist-list>ul>li>a>img{display:block; width:100%;}
.imagelist-list>ul>li>a>aside{display:block; position:absolute; left:0; right:0; top:0; bottom:0; z-index:8; text-align:center; padding:20px; background:rgba(0,0,0,.68);
visibility:hidden; opacity:0; transform:scale(1.1); transition:.3s;
display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-o-box; display:box; 
-webkit-box-orient:vertical; -moz-box-orient:vertical; -ms-box-orient:vertical; -o-box-orient:vertical; box-orient:vertical;
-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-list>ul>li>a:hover>aside{visibility:visible; opacity:1; transform:scale(1);}
.imagelist-list>ul>li>a>aside>h3{font-size:26px;}
.imagelist-list>ul>li>a>aside>em{display:block; font-style:normal; margin-top:10px; color:#ddd;}
.imagelist-list>ul>li>a>aside>span{font-size:16px; display:inline-block; padding-top:20px; color:#bbb;}
.imagelist-list>ul>li>a>aside>span>b{display:inline-block; font-weight:normal; transition:.3s;}
.imagelist-list>ul>li>a>aside>span>i{transition:.3s;}
.imagelist-list>ul>li>a>aside>span:hover{color:#768047;}
.imagelist-list>ul>li>a>aside>span:hover>b{transform:translateX(2px);}
.imagelist-list>ul>li>a>aside>span:hover>i{transform:translateX(5px);}
.imagelist dir{padding:40px 0 0;}
@media(max-width:1200px){
.imagelist{padding:40px 0;}
.imagelist-text{font-size:15px; margin-bottom:30px;}
.imagelist-list>ul{margin:0 -10px;}
.imagelist-list>ul>li{padding:10px;}
.imagelist-list>ul>li>a>aside>span{font-size:15px;}
.imagelist-list>ul>li>a>aside>h3{font-size:22px;}
.imagelist dir{padding:30px 0 0;}
}
@media(max-width:992px){
.imagelist-list>ul>li{width:50%;}  
}
@media(max-width:767px){
.imagelist{padding:20px 0;}
.imagelist-text{font-size:14px; margin-bottom:10px;}
.imagelist-list>ul{margin:0 -4px;}
.imagelist-list>ul>li{padding:4px;}
.imagelist-list>ul>li>a>aside>span{font-size:14px; padding-top:0;}
.imagelist-list>ul>li>a>aside>h3{font-size:18px;}
.imagelist-list>ul>li>a>aside>em{font-size:14px;}
.imagelist dir{padding:15px 0 0;}
}