@charset "utf-8";

#honor{margin: 0 auto;  }

#honor>.display{margin: 0 auto;padding: 100px 0;}
#honor>.display .list{ margin: 0 auto;}
#honor>.display .list>ul{margin: 0 auto;}
#honor>.display .list>ul>li{display: block;float: left;width:22.75%; margin-right: 3%; margin-bottom: 3%; position: relative; padding: 30px;  background: #fff; transition: all .35s; }
#honor>.display .list>ul>li:nth-child(4n){margin-right: 0;}
#honor>.display .list>ul>li .img{ position: relative; width: 100%;height: 320px;  line-height: 320px; padding-bottom: 20px; background:#fff; overflow: hidden;  text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center;}
#honor>.display .list>ul>li .img>img{ width:auto; max-width: 80%; max-height:100%; transition: all .8s;}
#honor>.display .list>ul>li .tit{font-size:1.6rem; color: #333; text-align: center; border-top: 1px solid #eee; padding-top: 20px; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; transition: all .35s;}
#honor>.display .list>ul>li:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.16);}
#honor>.display .list>ul>li:hover .img>img{transform: scale(1.05);}
#honor>.display .list>ul>li:hover .tit{ color: #154a9a;}



@media only screen and (max-width: 1280px){

    #honor>.display .list>ul>li{width:31.33%; }
    #honor>.display .list>ul>li:nth-child(4n){margin-right: 3%;}
    #honor>.display .list>ul>li:nth-child(3n){margin-right: 0;}

    #honor>.display .list>ul>li .tit{font-size:1.4rem;}



}


@media only screen and (max-width: 1080px){


    #honor>.display .list>ul>li{width:48%; margin-right: 0; }
    #honor>.display .list>ul>li:nth-child(4n){margin-right: 0;}
    #honor>.display .list>ul>li:nth-child(3n){margin-right: 0;}

    #honor>.display .list>ul>li:nth-child(even){float: right;}


}


@media only screen and (max-width: 860px){


    #honor>.display .list>ul>li .tit{font-size:1.2rem;}

}

@media only screen and (max-width: 720px){

    #honor>.display .list>ul>li .img{ height: 280px; line-height: 280px;}


}

@media only screen and (max-width: 640px){

    #honor>.display{padding: 50px 0;}
    #honor>.display .list>ul>li .img{ height: 220px; line-height: 220px;}



}
@media only screen and (max-width: 520px){

    #honor>.display .list>ul>li{display: block;float: none!important;width:100%; margin-right: 0;  height: auto; padding-bottom: 30px; }


}