.honor{padding:60px 0; background:#fff;}
.honor .list ul{margin:0 -28px;}
.honor .list ul:after{display:block; content:''; clear:both;}
.honor .list ul>li{float:left; width:33.333%; padding:28px;}
.honor .list ul>li>div{overflow:hidden; position:relative; transition:0.3s; background:url('') center; background-size:cover;}
.honor .list ul>li>div:before{position:absolute; content:''; background:#fff; top:70%; left:-50%; width:200%; transition:0.8s; padding-bottom:100%; border-radius:50%;}
.honor .list ul>li>div>ins{display:block; position:relative; margin:38px auto 18px auto; z-index:1; width:480px; height:340px; max-width:100%; transition:0.4s;
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;}
.honor .list ul>li>div>ins img{display:block; max-width:100%; max-height:100%; box-shadow:0 2px 10px rgba(0,0,0,0.1);}
.honor .list ul>li>div>h4{text-align:center; position:relative; font-size: 18px; margin-bottom:18px; z-index:2;}
.honor .list ul>li:hover>div{box-shadow:0 2px 12px rgb(46,95,219,0.12); transform:translateY(-2px);}
.honor .list ul>li:hover>div>ins{transform:translateY(-3px);}
.honor .list ul>li:hover>div:before{box-shadow:0 0 18px rgba(0,0,0,0.38);}
.honor .page{margin-top:18px;}
@media(max-width:1200px){
.honor{padding:40px 0;}
.honor .list ul{margin:0 -8px;}
.honor .list ul>li{padding:8px;}
.honor .list ul>li>div>ins{ height:280px;}
}
@media(max-width:992px){
.honor .list ul>li{width:50%;}
}
@media(max-width:767px){
.honor{padding:20px 0;}
.honor .list ul{margin:0 -4px;}
.honor .list ul>li{padding:4px; width:100%;}
.honor .list ul>li>div>ins{margin:18px auto 8px auto}
.honor .list ul>li>div>h4{margin-bottom:8px; font-size: 16px;}
}