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

#qualification{ position: relative;z-index: 5; background: #fff; margin: 0 auto;}

#qualification .list{margin:0 auto;padding:10px;overflow:hidden;}
#qualification .list>ul{display:block;margin:0 auto;padding:0;}
#qualification .list>ul>li{width: 23.5%;float: left;margin-right: 2%;}
#qualification .list>ul>li:nth-child(4n){margin-right:0;}
#qualification .list>ul>li .img{ position: relative; width: 100%;height: 230px; 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;}
#qualification .list>ul>li .img:after{position: absolute;z-index: 8;left: 0;top: 0;width: 100%;height: 100%; background: rgba(1,64,153,.8); font-family: iconfont; font-size: 4.6rem; color: rgba(255,255,255,1); content: '\e626'; opacity: 0; transition: all .35s;}
#qualification .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: '';}
#qualification .list>ul>li .img>img{ width:auto;height:100%;}
#qualification .list>ul>li .tit{font-size:1.4rem;line-height:2.4rem;padding:30px 0 70px 0;color:#666;text-align:center; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#qualification .list>ul>li:hover .img:after{opacity: 1; transform: scale(1.1);}
#qualification .list>ul>li:hover .tit{color: rgba(1,64,153,1); transform: translateY(-4px);}




@media only screen and (max-width: 960px){
    #qualification .list>ul>li{width:48%;margin-right: 0;}
    #qualification .list>ul>li:nth-child(even){ float:right;}
    #qualification .list>ul>li:nth-child(4n){margin-right:2% !important;}
    #qualification .list>ul>li:nth-child(2n){margin-right:0 !important;}
    #qualification .list>ul>li .tit{padding:20px 10px;}

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


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


}