@charset "utf-8";
/* CSS Document */


#honor{margin: 0 auto; padding: 60px 0;}
#honor>.title{ text-align: center; margin: 0 auto;padding: 50px 0;}
#honor>.title>h3{ font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto;}

#honor>.item{display: block; margin: 0 auto; padding: 50px 0;}
#honor>.item .box-l{ width: 25%; text-align: left;}
#honor>.item .box-l>.title{display: block;}
#honor>.item .box-l>.title>i{display: block; padding-bottom: 10px;}
#honor>.item .box-l>.title>i>img{ height: 60px; width: auto;opacity: .3;}
#honor>.item .box-l>.title>h3{ font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto;}
#honor>.item .box-l>.more{padding-top: 15px;}
#honor>.item .box-l>.more>a{ display: inline-block; padding: 8px 20px;border: 1px solid #ddd; font-size: 1.4rem; color: #999;transition: all .35s;}
#honor>.item .box-l>.more>a>i{ margin-left: 10px; float:right;color: rgba(4,91,169,1); font-size: 1.8rem; transition: all .35s;}
#honor>.item .box-l>.more>a:hover{background: rgba(4,91,169,1); padding-right: 30px; border: 1px solid #fff; color: #fff;}
#honor>.item .box-l>.more>a:hover i{color: #fff; transform: translateX(10px);}

#honor>.item .box-r{width: 75% !important;}
#honor>.item .container{width: 100%;}
#honor>.item .container>.list{margin:0 auto;padding:10px 0;overflow:hidden;}
#honor>.item .container>.list>ul{display:block;margin:0 auto;padding:0;}
#honor>.item .container>.list>ul>li{width: 22.75%;float: left;margin-right: 3%;}
#honor>.item .container>.list>ul>li:nth-child(4n){margin-right:0;}
#honor>.item .container>.list>ul>li .img{ position: relative; width: 100%;height: 250px; background:#fff; overflow: hidden; border: 1px solid #ddd; padding:10px 0; 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; overflow: hidden; line-height: 230px;}
#honor>.item .container>.list>ul>li .img:after{position: absolute;z-index: 8;left: 0;top: 0;width: 100%;height: 100%; background: rgba(0,91,97,.3); font-family: iconfont; font-size: 4.6rem; color: rgba(255,255,255,1); content: '\e626'; opacity: 0; transition: all .35s;}
#honor>.item .container>.list>ul>li .img:before{ position: absolute;z-index: 2;left: 0;top: 0;width: 100%;height: 100%; background: url("../img/logo.png") no-repeat; background-position: 50% 50%; background-size: 180px auto; opacity: .2; content: '';}
#honor>.item .container>.list>ul>li .img>img{ width:auto; max-width: 80%; max-height:100%;}
#honor>.item .container>.list>ul>li .tit{font-size:1.4rem;line-height:2.4rem;padding:30px 0;color:#666;text-align:center; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#honor>.item .container>.list>ul>li:hover .img:after{opacity: 1; transform: scale(1.1);}
#honor>.item .container>.list>ul>li:hover .tit{color: rgba(4,91,169,1); transform: translateY(-4px);}

#honor>.item .box-r{border-bottom: 1px solid #ddd;}
#honor>.item:last-child  .box-r{border-bottom: 0;}


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

    #honor>.item{ padding: 30px 0;}
    #honor>.item .box-l{ width: 100%; float: none; text-align: center; padding-bottom: 20px;}
    #honor>.item .box-l>.title>i{display: none;}
    #honor>.item .box-l>.title{float:left;}
    #honor>.item .box-l>.title>h3{font-size: 3rem;}
    #honor>.item .box-l>.more{float: right; padding-top: 0;}
    #honor>.item .box-l>.more>a{ padding: 8px 16px;font-size: 1.2rem;}
    #honor>.item .box-l>.more>a>i{ font-size: 1.6rem; }
    #honor>.item .box-r{width: 100% !important; float: none;}

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



}

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

    #honor{ padding: 20px 0;}
    #honor>.title{padding: 10px 0;}
    #honor>.title>h3{ font-size: 3.2rem;}

    #honor>.item .box-l>.title>h3{ font-size: 3.2rem;}

    #honor>.item{ padding:20px 5%;}
    #honor>.item .container>.list>ul>li{width:48%;margin-right: 0;}
    #honor>.item .container>.list>ul>li:nth-child(even){ float:right;}
    #honor>.item .container>.list>ul>li:nth-child(4n){margin-right:2% !important;}
    #honor>.item .container>.list>ul>li:nth-child(2n){margin-right:0 !important;}
    #honor>.item .container>.list>ul>li .tit{padding:20px 10px;}

}

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


}

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

    #honor>.title>h3{ font-size: 2.8rem;}
    #honor>.item .box-l>.title>h3{ font-size: 2.8rem;}

}

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

    #honor>.title>h3{ font-size: 2.4rem;}
    #honor>.item .box-l>.title>h3{ font-size: 2.4rem;}
    #honor>.display{padding:30px 0;}


    #honor>.item .container>.list>ul>li .img{ height:110px; line-height:110px;}
    #honor>.item .container>.list>ul>li .tit{ padding:10px;}

}