@charset "utf-8";

#certificate{margin: 0 auto; padding: 100px 0;}

#certificate .display .lists{ margin: 0 auto;}
#certificate .display .lists>ul{margin: 0 auto;}
#certificate .display .lists>ul>li{ position: relative; display: block;float: left;width:22.75%; margin-right: 3%; margin-bottom: 3%; background: #fff; transition: all .35s; }
#certificate .display .lists>ul>li:nth-child(4n){margin-right: 0;}
#certificate .display .lists>ul>li>a{display: block;position: relative;}
#certificate .display .lists>ul>li .img{ position: relative; width: 100%;height: 460px; padding: 20px; background:#fff; border-radius: 20px; box-shadow: 0 2px 16px rgba(0,0,0,.1); overflow: hidden;  text-align:center; display: flex;align-items: center; align-content: center; justify-content: center; transition: all .35s; }
#certificate .display .lists>ul>li .img>img{ width:auto; max-width: 100%; max-height:100%; transition: all .8s;}
#certificate .display .lists>ul>li .title{ padding: 20px 10px; height: 56px; line-height: 1.8rem; font-size:1.4rem; color: #333; text-align: center;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: all .35s;}
#certificate .display .lists>ul>li:hover .title{ color: #281b6e;}
#certificate .display .lists>ul>li:hover .img{ box-shadow: 0 2px 16px rgba(0,0,0,.3);}
#certificate .display .lists>ul>li:hover .img>img{transform: scale(1.1)}

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

    #certificate .display .lists>ul>li .img{ height: 420px;}

}

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

    #certificate .display .lists>ul>li .img{ height: 400px;}

}

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

    #certificate .display .lists>ul>li .img{ height: 360px;}

}

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

    #certificate .display .lists>ul>li .img{ height: 340px;}

}

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


    #certificate .display .lists>ul>li .img{ height: 320px;}

}



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

    #certificate .display .lists>ul>li{ width: 31.33%;}
    #certificate .display .lists>ul>li:nth-child(4n){ margin-right: 3%;}
    #certificate .display .lists>ul>li:nth-child(3n){ margin-right: 0;}
    #certificate .display .lists>ul>li .img{ height: 420px;}

}

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

    #certificate .display .lists>ul>li .img{ height: 380px;}

}

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

    #certificate .display .lists>ul>li .img{ height: 360px;}

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


    #certificate .display .lists>ul>li{ width: 48%; margin-right: 0;}
    #certificate .display .lists>ul>li:nth-child(4n){ margin-right: 0;}
    #certificate .display .lists>ul>li:nth-child(even){ float: right;}
    #certificate .display .lists>ul>li .img{ height: 420px;}

}



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

    #certificate{padding: 50px 0;}

    #certificate .display .lists>ul{ display: block; }
    #certificate .display .lists>ul>li{display: inline-block; width: 48%;}
    #certificate .display .lists>ul>li a>.title {  font-size: 1.2rem;}
    #certificate .display .lists>ul>li .img{ height: 360px;}


}


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

    #certificate .display .lists>ul>li .img{ height: 210px;}

}