@charset "utf-8";

#quality{margin: 0 auto; }

#quality{position: relative; margin: 0 auto;}
#quality .introduce{margin: 100px auto;}
#quality .introduce>.display{ position: relative;z-index: 50;  box-sizing: border-box; width: 100%; transition: all .35s;}
#quality .introduce>.display .title{ font-size:4rem; color: #333; display: flex; align-items: center;}
#quality .introduce>.display .content{padding: 20px 0; }
#quality .introduce>.display .content>.intro{font-size: 1.6rem; line-height: 2.8rem; color: #555;}
#quality .introduce>.display .content>.img{padding-top: 30px;}
#quality .introduce>.display .content>.img>img{width: 30%;height: auto;}

#quality .project{margin: 0 auto;}
#quality .project>.item{background: #fff; padding: 100px 0; margin: 0 auto;}
#quality .project>.item .box{width: 40%;text-align:left;box-sizing: border-box;}
#quality .project>.item .box>.tit{ position: relative; font-size: 4rem; color: #154a9a; padding: 10px 0;}
#quality .project>.item .box>.tit:after{ position: absolute;z-index: 1; left: 0;bottom: 0; width: 50px;height: 4px; background: #154a9a; content: '';}
#quality .project>.item .box>.txt{ padding: 30px 0; font-size: 1.6rem; color: #666;line-height: 2.4rem;}

#quality .project>.item .picture{width: 55%;}
#quality .project>.item .picture .swiper-slide>p{ display: block;padding-top: 10px; text-align: center; font-size: 1.4rem; color: #666;}
#quality .project>.item .picture .swiper-slide>img{width: 100%;height: auto;}
#quality .project>.item .picture .swiper-pagination{position: relative; bottom: 0;}

#quality .project>.item:nth-child(even){background: none!important;}
#quality .project>.item:nth-child(even) .box{float: right;}
#quality .project>.item:nth-child(even) .picture{float: left;}






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


    #quality .project>.item .box>.tit{ font-size: 3.2rem; }

    #quality .project>.item .box>.txt{ font-size: 1.4rem; line-height: 2rem;}


}



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

    #quality .introduce>.display .content>.img>img{width: 50%;}

    #quality .project>.item .box{width: 100%;float: none;}
    #quality .project>.item .picture{width: 100%;float: none;}


}

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

    #quality .introduce>.display .title{ font-size:3.2rem;}


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

    #quality .project>.item{padding: 80px 0;}

}


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

    #quality .introduce{margin: 50px auto;}

    #quality .introduce>.display .content>.img>img{width: 100%;}


    #quality .project>.item{padding: 50px 0;}




    #quality .introduce>.display .title{ text-align: center; font-size:2.8rem;}
    #quality .project>.item .box>.tit{ text-align: center; font-size: 2.4rem; }
    #quality .project>.item .box>.tit:after{left: 50%; width: 40px; transform: translateX(-50%);}

    #quality .project>.item .picture .swiper-slide>p{  font-size: 1.2rem;}

}