@charset "utf-8";

#certificates{margin: 0 auto;}
#certificates .wrap{margin: 0 auto; padding: 100px 0;}

#certificates .theme{ margin: 0 auto;}
#certificates .theme>.title{display: block; text-align: left; margin: 0 auto;}
#certificates .theme>.title>h3{ position: relative; padding-bottom: 20px; display: block; font-size: 3.2rem; color: #333;}
#certificates .theme>.intro{ width: 70%; margin: 0 auto; padding: 30px 0; text-align: center;font-size: 1.6rem; color: rgba(255,255,255,.5); line-height: 2.4rem;}

#certificates .container{margin: 0 auto; padding: 50px 0;}
#certificates .container>.lists{ margin: 0 auto;}
#certificates .container>.lists>ul{margin: 0 auto;}
#certificates .container>.lists>ul>li{ position: relative; display: block;float: left;width:22.75%; margin-right: 3%; margin-bottom: 3%; background: #fff; transition: all .35s; }
#certificates .container>.lists>ul>li:nth-child(4n){margin-right: 0;}
#certificates .container>.lists>ul>li>a{display: block;position: relative;}
#certificates .container>.lists>ul>li .img{ position: relative; width: 100%;height: 460px; padding: 20px; background:#fff; 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; }
#certificates .container>.lists>ul>li .img>img{ width:auto; max-width: 100%; max-height:100%; transition: all .8s;}
#certificates .container>.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;}
#certificates .container>.lists>ul>li:hover .title{ color: #281b6e;}
#certificates .container>.lists>ul>li:hover .img{ box-shadow: 0 2px 16px rgba(40,27,110,.3);}

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

    #certificates .container>.lists>ul>li .img{ height: 420px;}

}

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

    #certificates .container>.lists>ul>li .img{ height: 400px;}

}

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

    #certificates .container>.lists>ul>li .img{ height: 360px;}

}

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

    #certificates .container>.lists>ul>li .img{ height: 340px;}

}

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

    #certificates .theme>.title>h3 {font-size: 2.8rem;}

    #certificates .container>.lists>ul>li .img{ height: 320px;}

}



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

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

}

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

    #certificates .container>.lists>ul>li .img{ height: 380px;}

}

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

    #certificates .container>.lists>ul>li .img{ height: 360px;}

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

    #certificates .theme>.title>h3 { font-size: 2.4rem;}

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

}



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

    #certificates .wrap{padding: 50px 0;}

    #certificates .theme>.title>h3 { font-size: 2rem;}

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


}


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

    #certificates .container>.lists>ul>li .img{ height: 210px;}

}