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

#customization{margin: 0 auto;}


#customization .introduce{margin: 0 auto; padding-top: 100px;}
#customization .introduce>.wrap{max-width: 1200px; padding: 50px 0;}
#customization .introduce .layout{ box-sizing: border-box; box-shadow: 6px 6px 30px 0 rgba(5, 58, 169, 0.2);padding: 60px; }
#customization .introduce .layout .title{ text-align: left; }
#customization .introduce .layout .title>h3{font-weight: bold; font-size: 3.2rem;}
#customization .introduce .layout .describe{ padding: 30px 0; text-align: left; font-size: 1.6rem; font-weight: 200; color: #666;line-height: 2.4rem;}
#customization .introduce .consult{ position: relative; width: 40%; height: 800px; background: url("../img/customization_img.jpg") no-repeat; background-size: cover; text-align: right;border-radius: 0 0 100% 100%;}


#customization .consult{margin: 0 auto; padding-bottom: 50px;}
#customization .consult>.wrap{ max-width: 1600px;}
#customization .consult .layout{ padding: 50px 0;}
#customization .consult .layout .img{ width: 50%;}
#customization .consult .layout .box{ width: 50%; padding: 100px 0 0 100px;}
#customization .consult .layout .box>.title{ text-align: left; margin:  auto;}
#customization .consult .layout .box>.title>h3{font-weight: bold;  font-size: 3.2rem;}
#customization .consult .layout .box>.describe{ padding: 30px 0; text-align: left; font-size: 1.6rem; font-weight: 200; color: #666;line-height: 2.4rem;}
#customization .consult .layout .box>.more{text-align: left;padding-top: 30px;}
#customization .consult .layout .box>.more>a{ position: relative; display: inline-block; padding-bottom: 10px; font-size: 1.6rem; font-weight: 700; color: #00a2f5;transition: all .35s;}
#customization .consult .layout .box>.more>a:after{position: absolute;z-index: 12; left: 0;bottom: 0;width: 0;height: 1px; background: #00a2f5; content: '';transition: all .35s;}
#customization .consult .layout .box>.more>a>span{display: inline-block;vertical-align: middle;}
#customization .consult .layout .box>.more>a>i{display:inline-block;margin-left: 10px; font-size: 1.8rem;vertical-align: middle;}
#customization .consult .layout .box>.more>a:hover:after{ width: 100%;}




#customization .process{margin: 0 auto; }
#customization .process>.wrap{max-width: 1200px;}
#customization .process .title{ width: 50%; text-align: center;margin: 0 auto;}
#customization .process .title>h3{ position: relative;z-index: 20;  font-size: 3.2rem; padding:30px 0 20px 0; font-weight: bold;}
#customization .process .describe{ width: 70%;margin: 0 auto; text-align: center;font-size: 1.6rem;font-weight: 200;  color: #999; line-height: 2.4rem;}
#customization .process .container{margin: 0 auto;position: relative; padding: 50px 0;}
#customization .process .container .lists{ margin: 0 auto;}
#customization .process .container .lists>ul{margin: 0 auto;text-align: center; }
#customization .process .container .lists>ul>li{ position: relative; display: inline-flex; justify-content:center; align-items: flex-start; width:24.6%; box-sizing: border-box; padding: 50px 0; text-align: center;}
#customization .process .container .lists>ul>li:after{position: absolute;z-index: 12; right: -20px; top: 50%; transform: translateY(-50%); width: 40px;height: 40px; line-height: 40px; text-align: center; font-family: iconfont; font-size: 1.4rem; font-weight: 700; color: #00a2f5; content: '\e612';}
#customization .process .container .lists>ul>li:last-child:after, #customization .process .container .lists>ul>li:nth-child(4n):after{display: none;}
#customization .process .container .lists>ul>li a>.tit{text-align: center; font-size: 1.8rem;font-weight: bold;color: #333; line-height: 2.4rem; padding: 15px 0; text-transform: capitalize; transition: all .35s;}



#customization .quality{margin: 0 auto; background: #f1f9ff; padding: 100px 0;}
#customization .quality>.wrap{max-width: 1400px;}
#customization .quality .layout{ padding: 50px 0;}
#customization .quality .layout .box{ width: 40%; padding: 50px 100px 50px 0;}
#customization .quality .layout .box>.title{ text-align: left; margin:  auto;}
#customization .quality .layout .box>.title>h3{font-weight: bold; font-size: 3.2rem;}
#customization .quality .layout .box>.describe{ padding: 30px 0; text-align: left; font-size: 1.6rem; font-weight: 200; color: #666;line-height: 2.4rem;}
#customization .quality .layout .box>.more{text-align: left;padding-top: 30px;}
#customization .quality .layout .box>.more>a{display: inline-block; background: #00a2f5;border: 1px solid #00a2f5; padding: 12px 26px; font-size: 1.6rem; font-weight: 200; color: #fff;transition: all .35s;}
#customization .quality .layout .box>.more>a>span{display: inline-block;vertical-align: middle;}
#customization .quality .layout .box>.more>a>i{display: inline-block;margin-left: 10px; font-size: 2rem;vertical-align: middle;}
#customization .quality .layout .box>.more>a:hover{color: #00a2f5; background: none;}
#customization .quality .layout .shows{ position: relative; width: 60%; box-sizing: border-box; box-shadow: 6px 6px 30px 0 rgba(5, 58, 169, 0.2);padding: 60px;background: #fff;}
#customization .quality .layout .shows .swiper .swiper-slide{position: relative;}
#customization .quality .layout .shows .swiper .swiper-slide:after{position: absolute;z-index: 1; left: 0;bottom: 0;width: 100%;height: 200px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)); content: '';}
#customization .quality .layout .shows .swiper .swiper-slide>span{position: absolute;z-index: 12; left: 0;bottom: 0;width: 100%; padding: 20px; font-size: 2rem; color: #fff;font-weight: 600; text-align: left;}
#customization .quality .layout .shows .swiper .swiper-pagination{position: relative;bottom: 0; padding-top: 20px;}
#customization .quality .layout .shows .swiper .swiper-pagination-bullet { width: 20px; height: 20px;text-align: center;line-height: 20px;font-size: 12px;color: #000;opacity: 1; background: rgba(0, 0, 0, 0.2);}
#customization .quality .layout .shows .swiper .swiper-pagination-bullet-active {color: #fff; background: #00a2f5;}




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

    #customization .consult .layout .img{ width: 55%;}
    #customization .consult .layout .box{ width: 45%; padding: 50px 0 0 80px;}

}


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


    #customization .introduce .layout .title>h3{font-size: 3.2rem;}

    #customization .consult .wrap{max-width: inherit;width: 100%;}
    #customization .consult .layout .img{ width: 100%; float: none;}
    #customization .consult .layout .box{ width: 100%; float: none; padding:30px 100px;}
    #customization .consult .layout .box>.title>h3{font-size: 3.2rem;}

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


    #customization .quality .layout .box{ width: 100%; float: none; padding: 0 50px 50px 50px;}
    #customization .quality .layout .box>.title>h3{ font-size: 3.2rem;}
    #customization .quality .layout .shows{ width: 100%;float: none;}

}



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


    #customization .introduce .layout .title>h3{font-size: 2.8rem;}
    #customization .introduce .layout .describe{font-size: 1.4rem; line-height: 2rem;}

    #customization .process .title { width: 60%;}
    #customization .process .title>h3{ font-size: 2.8rem;}
    #customization .process .describe{ width: 80%; font-size: 1.4rem; line-height: 2rem;}
    #customization .process .container .lists>ul>li{padding: 30px 0; width: 24.4%;}
    #customization .process .container .lists>ul>li a>.img>img{ height: 100px; width: auto;}
    #customization .process .container .lists>ul>li a>.tit{font-size: 1.4rem;padding: 10px 0; line-height: 2rem;}



    #customization .consult .layout { padding: 0; }
    #customization .consult .layout .box>.title>h3{ font-size: 2.8rem;}
    #customization .consult .layout .box>.describe{ font-size: 1.4rem; line-height: 2rem;}

    #customization .quality .layout { padding: 0; }
    #customization .quality .layout .box>.title>h3{ font-size: 2.8rem;}
    #customization .quality .layout .box>.describe{ font-size: 1.4rem; line-height: 2rem;}
    #customization .quality .layout .shows .swiper .swiper-slide>span { font-size: 1.8rem; }


}


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

    #customization .process .title { width: 80%;}
    #customization .process .container .lists>ul>li a>.img>img{ height: 80px;}


}




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

    #customization .introduce{padding-top: 50px;}

    #customization .process{padding: 50px 0;}
    #customization .process .describe { width: 100%;}
    #customization .process .container { padding-bottom: 0; }
    #customization .process .container .lists>ul>li a>.img>img{ height: 60px;}
    #customization .process .container .lists>ul>li a>.tit {font-size: 1.2rem;line-height: 1.6rem; }


    #customization .quality{padding: 50px 0;}
    #customization .quality .layout .shows .swiper .swiper-slide>span {font-size: 1.6rem;}



}


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

    #customization .introduce .layout { padding: 30px; }
    #customization .introduce .layout .title>h3{font-size: 2.4rem;}
    #customization .introduce .layout .describe{font-size: 1.2rem;}

    #customization .consult {padding-bottom: 0; }
    #customization .consult .layout .box {padding: 0 30px 30px 30px; }
    #customization .consult .layout .box>.title>h3{font-size: 2.4rem;}
    #customization .consult .layout .box>.describe{font-size: 1.2rem;}
    #customization .consult .layout .box>.more>a {font-size: 1.4rem; }

    #customization .process .title { width: 100%;}
    #customization .process .title>h3{ font-size: 2.4rem;}
    #customization .process .describe{ width: 100%; font-size: 1.2rem;}
    #customization .process .container{padding: 0;}
    #customization .process .container .lists>ul>li{width:48%;}
    #customization .process .container .lists>ul>li:nth-child(2n):after{display: none;}
    #customization .process .container .lists>ul>li:last-child:after{display: block; right: auto; left: 50%; bottom: auto; top: -20px; transform: translateY(0) translateX(-50%); content: '\e610';}
    /*#customization .process .container .lists>ul>li:nth-child(4):after{display: block;}*/

    #customization .quality .layout .box { padding: 0;}
    #customization .quality .layout .box>.title>h3{ font-size: 2.4rem;}
    #customization .quality .layout .box>.describe{ font-size: 1.2rem;}
    #customization .quality .layout .box>.more{padding: 0 0 30px 0;}
    #customization .quality .layout .box>.more>a{ padding: 8px 20px; font-size: 1.4rem;}
    #customization .quality .layout .box>.more>a>i{font-size: 1.8rem;}


    #customization .quality .layout .shows {padding: 20px; }


}