@charset "utf-8";


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

#certificates .display{margin: 0 auto;}
#certificates .display .describe{ text-align: center; font-size: 1.6rem; color: #999; line-height: 2.4rem; padding-bottom: 30px;}
#certificates .display .describe>p{margin-bottom: 5px;}

#certificates .display .types{position: relative;z-index: 89; margin: 0 auto;  text-align: center;}
#certificates .display .types ul{display: flex; align-items: center; justify-content: center;flex-wrap: wrap}
#certificates .display .types ul>li{display: inline-block; border: 1px solid #eee; border-radius: 30px; margin-bottom: 15px; margin-right: 15px; transition: all .35s; }
#certificates .display .types ul>li>a{display: block; height: 50px; line-height: 50px; padding: 0 20px; font-size: 2rem; color: #666;transition: all .35s;}
#certificates .display .types ul>li.active{ background: #0758ab;border-color: #0758ab; }
#certificates .display .types ul>li.active>a{color: #fff!important;}
#certificates .display .types ul>li:hover{ border-color: #0758ab;}
#certificates .display .types ul>li:hover>a{color: #0758ab;}
#certificates .display .types .pgwMenu { position: relative;padding: 0;margin: 0; }
#certificates .display .types .pgwMenu ul { list-style: none; white-space: nowrap;}
#certificates .display .types .pgwMenu .pm-links{display: inline-block;vertical-align:top;}
#certificates .display .types .pgwMenu .pm-dropDown{ display: none;position: relative; width: 100%;margin: 0 auto; vertical-align:top; }
#certificates .display .types .pgwMenu .pm-dropDown>a{position: relative; display: block; border: 1px solid #0758ab; border-radius: 30px; font-size: 1.6rem;padding: 10px 30px; text-decoration: none;}
#certificates .display .types .pgwMenu .pm-dropDown>a:after{position: absolute;z-index: 1; right: 30px; top: 50%; margin-top: -15px; text-align: right; width: 30px;height: 30px; line-height: 30px; font-family: iconfont; font-size: 1.8rem; color: #0758ab; content: '\e740';  transition: all .35s; }
#certificates .display .types .pgwMenu .pm-dropDown>a>i{ display: inline-block;vertical-align: middle; margin-right: 5px; font-size: 2rem; color: #0758ab;}
#certificates .display .types .pgwMenu .pm-dropDown>a>span{display: inline-block;vertical-align:middle; text-transform: uppercase; color: #0758ab;}
#certificates .display .types .pgwMenu .pm-dropDown>a.active:after{ transform: rotateX(180deg);}
#certificates .display .types .pgwMenu .pm-links.mob{ position: absolute;z-index: 9; left: 0; margin-top: 10px; width: 100%;box-sizing: border-box;padding: 20px; border-radius: 10px; background: #f6faff; border: 1px solid #eee; box-shadow: 5px 6px 12px rgba(0,0,0,.1); }
#certificates .display .types .pgwMenu .pm-links.mob .pm-box{margin: 0 auto; display: block; padding-right: 20px; max-height: 160px; overflow-x: hidden;overflow-y: auto;}
#certificates .display .types .pgwMenu .pm-links.mob .pm-box::-webkit-scrollbar {width:2px;height: 1px;}
#certificates .display .types .pgwMenu .pm-links.mob .pm-box::-webkit-scrollbar-thumb {box-shadow: inset 0 0 0 rgba(0,0,0,0.2);}
#certificates .display .types .pgwMenu .pm-links.mob .pm-box::-webkit-scrollbar-track {box-shadow: inset 0 0 0 rgba(0,0,0,0.2);border-radius: 0;}
#certificates .display .types .pgwMenu .pm-links.mob .pm-box>li{ display:block!important; padding: 3px 0;margin: 0; border: 0; }
#certificates .display .types .pgwMenu .pm-links.mob .pm-box>li>a{display: block; font-size: 1.6rem;}
#certificates .display .types .pgwMenu .pm-links.mob .pm-box>li>a:hover{ color: #0758ab;}
#certificates .display .types .pgwMenu .pm-viewMore{ display: none;position: relative;vertical-align:middle; background: #eee; border: 2px solid #eee; border-radius: 30px; }
#certificates .display .types .pgwMenu .pm-viewMore:hover{background: #0758ab;border-color: #0758ab; }
#certificates .display .types .pgwMenu .pm-viewMore:hover>a{color: #fff;opacity: 1;}
#certificates .display .types .pgwMenu .pm-viewMore>a{position: relative; display: inline-block; color: #666; height: 42px; line-height: 42px; padding: 0 10px;opacity: .6;  text-decoration: none;}
#certificates .display .types .pgwMenu .pm-viewMore>a>i{font-size: 2rem;}
#certificates .display .types .pgwMenu .pm-viewMore>ul{ position: absolute;z-index: 3; right: 0; margin-top: 10px; background:#eee; padding: 10px 0; border-radius: 8px;overflow: hidden; }
#certificates .display .types .pgwMenu .pm-viewMore>ul>li{ display:block!important; padding: 0;margin: 0; border:0; border-radius: 0; }
#certificates .display .types .pgwMenu .pm-viewMore>ul>li:after{display: none!important;}
#certificates .display .types .pgwMenu .pm-viewMore>ul>li>a{display: block; color:#666; transition: all .35s;}
#certificates .display .types .pgwMenu .pm-viewMore>ul>li>a:hover{ color: #0758ab; }
#certificates .display .types .pgwMenu .pm-viewMore>ul>li.active{background: none;}
#certificates .display .types .pgwMenu .pm-viewMore>ul>li.active>a{color: #0758ab!important;}

#certificates .display .lists{margin: 0 auto; padding-top: 30px;}
#certificates .display .lists>ul{margin: 0 auto;}
#certificates .display .lists>ul>li{display: block;float: left;width:22.75%; margin-right: 3%; margin-bottom: 3%; position: relative; border-radius: 10px; padding: 30px;  background: #fff;  border: 1px solid #eee; box-sizing: border-box; transition: all .35s; }
#certificates .display .lists>ul>li:nth-child(4n){margin-right: 0;}
#certificates .display .lists>ul>li>a{display: block;position: relative;}
#certificates .display .lists>ul>li .img{ position: relative; width: 100%;height: 320px;  line-height: 320px; padding-bottom: 20px; background:#fff;  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;}
#certificates .display .lists>ul>li .img:after{position: absolute;z-index: 1; left: 50%; top: 50%;  transform: translate(-50%,-50%); width: 50px; height: 50px; line-height: 50px; text-align: center; background: rgba(7,88,171,.9); opacity: 0; border-radius: 100%; font-family: iconfont; font-size: 2.4rem; color: #fff; content: '\e600'; transition: all .35s;}
#certificates .display .lists>ul>li .img>img{ width:auto; max-width: 80%; max-height:100%; transition: all .8s;}
#certificates .display .lists>ul>li .title{font-size:1.6rem; color: #333; text-align: center;  padding-top: 20px; padding-bottom: 0; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; transition: all .35s;}
#certificates .display .lists>ul>li:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.16);}
#certificates .display .lists>ul>li:hover .img>img{transform: scale(1.05);}
#certificates .display .lists>ul>li:hover .img:after{opacity: 1; transform: translate(-50%,-60%); }
#certificates .display .lists>ul>li:hover .title{ color: #0758ab;}


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


    #certificates .display .lists>ul>li{width:31.33%; }
    #certificates .display .lists>ul>li:nth-child(4n){margin-right: 3%;}
    #certificates .display .lists>ul>li:nth-child(3n){margin-right: 0;}
    #certificates .display .lists>ul>li .title{font-size:1.4rem;}


}


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


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


}


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



}

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


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

}


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

    #certificates{ padding: 50px 0;}
    #certificates .display .describe{ font-size: 1.4rem; line-height: 2rem;}
    #certificates .display .lists>ul>li .img{ height: 220px; line-height: 220px;}
    #certificates .display .lists>ul>li .title{font-size:1.2rem;}

}


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


    #certificates .display .lists>ul>li{float: none;width:100%; padding: 20px; margin-bottom: 20px; }
    #certificates .display .lists>ul>li:nth-child(even){float: none;}
    #certificates .display .lists>ul>li .img{ height: auto;}


    /*#certificates .display .lists>ul>li{padding: 20px;}*/
    /*#certificates .display .lists>ul>li .img{ height: 110px; line-height:110px;}*/


}