.honor{padding:58px 0; background:;}
.honor-content ul{margin:0 -28px;}
.honor-content ul:after{display:block; content:''; clear:both;}
.honor-content ul>li{float:left; width:33.333%; padding:28px;}
.honor-content ul>li>div{overflow:hidden; position:relative; transition:0.3s; border:1px solid #e8e8e8; background:url('') center; background-size:cover;}
.honor-content ul>li>div:before{position:absolute; content:''; background:#fff; top:60%; left:-50%; width:200%; transition:0.8s; padding-bottom:100%; border-radius:50%; box-shadow:0 0 8px rgba(0,0,0,0.18);}
.honor-content ul>li>div>ins{display:block; position:relative; margin:38px auto 18px auto; z-index:1; width:360px; height:320px; 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-content ul>li>div>ins img{display:block; max-width:100%; max-height:100%; box-shadow:0 2px 8px rgba(0,0,0,0.28);}
.honor-content ul>li>div>h4{text-align:center; position:relative; margin-bottom:18px; z-index:2;}
.honor-content ul>li:hover>div{box-shadow:0 4px 12px rgba(0,0,0,0.28); transform:translateY(-2px);}
.honor-content ul>li:hover>div>ins{transform:translateY(-3px);}
.honor-content 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:38px 0;}
.honor-content ul{margin:0 -8px;}
.honor-content ul>li{padding:8px;}
.honor-content ul>li>div>ins{height:260px;}
}
@media(max-width:992px){
.honor-content ul>li{width:50%;}
}
@media(max-width:767px){
.honor{padding:18px 0;}
.honor-content ul{margin:0;}
.honor-content ul>li{width:100%;}
}