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

@import url('https://fonts.font.im/css?family=Oswald:200,300,400,500,600,700');


#quality{margin: 0 auto;}


#quality .introduce{margin: 0 auto; padding: 100px 0;}
#quality .introduce>.wrap{max-width: 1200px;}
#quality .introduce .layout{ padding: 50px 0;}
#quality .introduce .layout .box{ width: 50%; padding: 50px 0;}
#quality .introduce .layout .box>.title{font-weight: bold; font-size: 3.6rem;}
#quality .introduce .layout .box>.describe{ padding: 30px 0; text-align: left; font-size: 1.6rem; font-weight: 200; color: #666;line-height: 2.4rem;}
#quality .introduce .layout .box>.advantage{padding-top: 30px;}
#quality .introduce .layout .box>.advantage>p{display: block; padding: 5px 0; font-size: 1.6rem; font-weight: 200; line-height: 2.4rem; color: #999;}
#quality .introduce .layout .box>.advantage>p>i{display: inline-block;vertical-align: middle; color: #ccc; font-size: 1.8rem;font-weight: 200; }
#quality .introduce .layout .box>.advantage>p>span{display: inline-block;vertical-align: middle;  margin-left: 10px;}
#quality .introduce .layout .img{ position: relative; width: 40%; text-align: right;}
#quality .introduce .layout .img>.ico{position: absolute;z-index: 10; right: -60px; bottom: 50px; padding: 50px; background: rgba(59,165,244,.8);}
#quality .introduce .layout .img>.ico>i{font-size: 6rem; color: #fff;}
#quality .introduce .layout .img>img{width: 100%;height: auto;}


#quality .control{margin: 0 auto;background: #f1f9ff; padding: 100px 0;}
#quality .control>.wrap{max-width: 1200px;}
#quality .control .title{text-align: center;margin: 0 auto;}
#quality .control .title>h3{ position: relative;z-index: 20; font-size: 3.6rem; padding:30px 0 20px 0; font-weight: bold;}
#quality .control .describe{ width: 60%;margin: 0 auto; text-align: center;font-size: 1.6rem;font-weight: 200;  color: #999; line-height: 2.4rem;}
#quality .control .container{margin: 0 auto;position: relative; padding: 50px 0;}
#quality .control .container .lists{ margin: 0 auto;}
#quality .control .container .lists>ul{margin: 0 auto;}
#quality .control .container .lists>ul>li{display: block;float: left; width: 31.33%; margin-right: 3%; margin-bottom: 3%;}
#quality .control .container .lists>ul>li:nth-child(3n){margin-right: 0;}
#quality .control .container .lists>ul>li a>.img{text-align: left;}
#quality .control .container .lists>ul>li a>.img>img{width: 100%;height: auto;}
#quality .control .container .lists>ul>li a>.tit{text-align: center;font-size: 1.6rem;font-weight: bold;color: #333; padding: 15px; transition: all .35s;}

#quality .certificate{margin: 0 auto; padding: 100px 0;}
#quality .certificate>.wrap{max-width: 1200px;}
#quality .certificate .title{text-align: center;margin: 0 auto;}
#quality .certificate .title>h3{ position: relative;z-index: 20; font-size: 3.6rem; padding:30px 0 20px 0; font-weight: bold;}
#quality .certificate .describe{ width: 90%;margin: 0 auto; text-align: center;font-size: 1.6rem;font-weight: 200;  color: #999; line-height: 2.4rem;}
#quality .certificate .container{margin: 0 auto;position: relative; padding: 50px 0;}
#quality .certificate .container .button-next, #quality .certificate .container .button-prev{position: absolute;z-index: 10;right: -70px; top: 50%; transform: translateY(-50%); color: #fff; cursor: pointer; text-align: center; width: 50px;height: 50px; line-height: 50px; border-radius: 100%; background: rgba(0,0,0,.4); transition: all .35s;}
#quality .certificate .container .button-prev{left: -70px; right: auto;}
#quality .certificate .container .button-next>i, #quality .certificate .container .button-prev>i{font-size: 2.4rem;}
#quality .certificate .container .button-next:hover, #quality .certificate .container .button-prev:hover{background: rgba(59,165,244,.8);}
#quality .certificate .container .swiper-slide{ text-align: center;}
#quality .certificate .container .swiper-slide>a{display: block;}
#quality .certificate .container .swiper-slide>a .img{overflow: hidden;position: relative;}
#quality .certificate .container .swiper-slide>a .img:after{position: absolute;z-index: 12; left: 0;top: 0; width: 100%;height: 100%;opacity: 0; background: rgba(0,0,0,.3); content: '';transition: all .35s;}
#quality .certificate .container .swiper-slide>a .img>img{ width: 100%;height: auto; transition: all 1s; }
#quality .certificate .container .swiper-slide>a .tit{padding: 15px; font-size: 1.6rem; font-weight: bold;color: #333; overflow: hidden; text-overflow:ellipsis;white-space: nowrap;}
#quality .certificate .container .swiper-slide>a:hover .img:after{opacity: 1;}
#quality .certificate .container .swiper-slide>a:hover .img>img{transform: scale(1.03);}
#quality .certificate .container .swiper-pagination{ position: relative; bottom: 0; padding-top: 10px;}
#quality .certificate .container .swiper-pagination .swiper-pagination-bullet{ background: #00a2f5;}






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


    #quality .introduce .layout .box{ width: 42%; }

    #quality .introduce .layout .img{ width: 50%;}

}




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


    #quality .introduce .layout .box>.title{font-size: 3.2rem;}
    #quality .introduce .layout .box>.describe{font-size: 1.5rem; line-height: 2.2rem;}
    #quality .introduce .layout .box>.advantage>p{font-size: 1.4rem; line-height: 2rem;}
    #quality .introduce .layout .box>.advantage>p>i{font-size: 1.6rem;}


    #quality .control .title>h3{ font-size: 3.2rem;}
    #quality .control .describe{ width: 70%; font-size: 1.5rem; line-height: 2.2rem;}


    #quality .certificate .title>h3{ font-size: 3.2rem;}
    #quality .certificate .describe{font-size: 1.5rem; line-height: 2.2rem;}

    #quality .certificate .container .button-next, #quality .certificate .container .button-prev{right: -30px; width: 46px;height: 46px; line-height: 46px; }
    #quality .certificate .container .button-prev{left: -30px;}


}


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

    #quality .introduce .layout .box{ width: 100%; float: none; }
    #quality .introduce .layout .img{ width: 100%; float: none; }

}


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


    #quality .introduce .layout .box>.title{font-size: 2.8rem;}
    #quality .introduce .layout .box>.describe{font-size: 1.4rem; line-height: 2rem;}
    #quality .introduce .layout .img>.ico{right: 0; bottom: 0; padding: 30px;}
    #quality .introduce .layout .img>.ico>i{font-size: 4rem;}


    #quality .control .title>h3{ font-size: 2.8rem;}
    #quality .control .describe{ width: 80%; font-size: 1.4rem; line-height: 2rem;}
    #quality .control .container .lists>ul>li{width: 48.5%; margin-right: 0; margin-bottom: 0;}
    #quality .control .container .lists>ul>li:nth-child(even){float: right;}


    #quality .certificate .title>h3{ font-size: 2.8rem;}
    #quality .certificate .describe{font-size: 1.4rem; line-height: 2rem;}




}

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

    #quality .introduce{padding: 50px 0;}
    #quality .introduce .layout{ padding: 0;}

    #quality .control{padding: 50px 0;}
    #quality .control .container .lists>ul>li{width: 100%; float: none;}
    #quality .control .container .lists>ul>li:nth-child(even){float: none;}
    #quality .control .container .lists>ul>li a>.tit{font-size: 1.4rem;}

    #quality .certificate{padding: 50px 0;}


}


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


    #quality .introduce .layout .box>.title{font-size: 2.4rem;}
    #quality .introduce .layout .box>.describe{font-size: 1.2rem;}



    #quality .control .title>h3{ font-size: 2.4rem;}
    #quality .control .describe{ width: 100%; font-size: 1.2rem;}


    #quality .certificate .title>h3{ font-size: 2.4rem;}
    #quality .certificate .describe{font-size: 1.2rem; }
    #quality .certificate .container .button-next, #quality .certificate .container .button-prev{display: none;}

}