.imagelist{padding:60px 0; background:#f8faff;}
.imagelist-content:after{display:block; content:''; clear:both;}
.imagelist-content>ul{position:relative; z-index:1; margin:0 -30px;}
.imagelist-content>ul:after{display:block; content:''; clear:both;}
.imagelist-content>ul>li{float:left; width:33.3333%; margin-bottom:50px; padding:0 30px;}
.imagelist-content>ul>li>div{display:block; background:#fff; border-radius:3px; overflow:hidden; position:relative; box-shadow:0 0 12px rgba(0,0,0,.12);}
.imagelist-content>ul>li>div:before{position:absolute; width:150px; height:150px; border-radius:50%; bottom:-90px; right:-60px; content:''; opacity:0.05; background:#1169d8;}
.imagelist-content>ul>li>div:after{position:absolute; width:210px; height:210px; border-radius:50%; bottom:15px; right:15px; content:''; opacity:0.05;  background:#1684ed;
background:linear-gradient(111deg,#fff,#1684ed);}
.imagelist-content>ul>li>div>a{display:block; overflow:hidden; position:relative; z-index:6;}
.imagelist-content>ul>li>div>a>img{display:block; width:100%; transition:.3s;}
.imagelist-content>ul>li>div:hover>a>img{transform:scale(1.02);}
.imagelist-content>ul>li>div>span{display:block; padding:20px; position:relative; z-index:8;}
.imagelist-content>ul>li>div>span>h3{display:block; font-size:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.imagelist-content>ul>li>div>span>p{display:block; margin:5px 0 30px 0; height:50px; overflow:hidden; color:#787878;}
.imagelist-content>ul>li>div>span>a{display:inline-block; line-height:1; color:#1684ed;}
.imagelist-content>ul>li>div>span>a:after{display:block; content:''; clear:both;}
.imagelist-content>ul>li>div>span>a:hover{color:#1169d8;}
.imagelist-content>ul>li>div>span>a>b{float:left; font-weight:normal;}
.imagelist-content>ul>li>div>span>a>i{float:left; line-height:inherit;}
.imagelist dir{padding:0;}
@media(max-width:1200px){
.imagelist{padding:40px 0;}
.imagelist-content>ul{margin:0 -10px;}
.imagelist-content>ul>li{margin-bottom:30px; padding:0 10px;}
}
@media(max-width:992px){
.imagelist-content>ul>li{width:50%;}    
}
@media(max-width:767px){
.imagelist{padding:20px 0;}
.imagelist-content>ul{margin:0;}
.imagelist-content>ul>li{width:100%; margin-bottom: 10px; padding: 0;} 
.imagelist-content>ul>li>div>span{padding: 10px;}
.imagelist-content>ul>li>div>span>h3{font-size: 18px;}
.imagelist-content>ul>li>div>span>p{margin-bottom:20px;}
}