@charset "utf-8";

@import url('https://fonts.font.im/css?family=Roboto+Condensed');



#service{margin: 0 auto;}
#service .title{text-align: left;}
#service .title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#service .title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#service .title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}

#service .process{background: #f2f3f5; padding: 110px 0; margin:  0 auto;}
#service .process .items{margin: 0 auto; padding: 60px 0;}
#service .process .items>.row{ position: relative; display: block; float: left;width: 23.5%; height: 220px; margin-bottom: 2%; margin-right: 2%; box-sizing: border-box;padding: 30px; text-align: left; overflow: hidden; cursor: pointer; background: #fff; transition: all .35s;}
#service .process .items>.row:nth-child(4n){margin-right: 0;}
#service .process .items>.row>.ico{ height: 85px; text-align: left;}
#service .process .items>.row>.ico>img{filter: grayscale(100%);  transition: all .36s;}
#service .process .items>.row>.title{ padding: 15px 0; font-size: 2.2rem; color: #676767;transition: all .35s;}
#service .process .items>.row>.line{ position: relative; display: block; background: #e6e6e6;overflow: hidden; height: 2px; margin: 0 auto;}
#service .process .items>.row>.line:after{ position: absolute;z-index: 10; right: 0; width: 100%;height: 100%; background: #002fa7;  background: linear-gradient(to right, #4f8ef9, #002fa7); content: '';}
#service .process .items>.row>.number{position: absolute;z-index: 50; right:55px;bottom: 32px; width: 30px; height: 30px; line-height: 30px; overflow: hidden; font-size: 2rem; font-family: 'Roboto Condensed', sans-serif; color: #fff; background: #4f8ffa; border-radius: 100%; border: 1px solid #002fa7; text-align: center; transition: all .35s;}
#service .process .items>.row:hover{box-shadow: 0 3px 16px rgba(0,0,0,.1);}
#service .process .items>.row:hover .ico>img{filter: grayscale(0); }
#service .process .items>.row:hover .title{color: #002fa7;}
#service .process .items>.row:hover .line:after{animation:lefttoright 1000ms ease-in-out 1 forwards;}




#service .stores{padding: 110px 0; margin:  0 auto;}
#service .stores .query{display: block;margin: 0 auto; padding: 60px 0;}
#service .stores .query>.item{ display: block; float: left; width: 32.33%;margin-right: 1.5%;}
#service .stores .query>.item:nth-child(3n){margin-right: 0;}
#service .stores .query>.item .layui-input, .layui-select, .layui-textarea{height: 60px!important;}
#service .stores .query>.item .layui-form-select dl { top: 59px;border-radius: 0!important;}
#service .stores .query>.item .layui-form-selectup dl {top: auto; bottom: 59px;}
#service .stores .query>.item .layui-form-select dl dd.layui-this { position: relative; background-color: #f3f3f3!important; color: #002fa7!important;}
#service .stores .query>.item .layui-form-select dl dd.layui-this:after{position: absolute;z-index: 10; right: 10px; top: 50%; transform: translateY(-50%); width: 20px;height: 20px; line-height: 20px; color: #002fa7; text-align: center; font-family: iconfont; font-size: 1.6rem; content: '\e6b5';}
#service .stores .query>.item>a{display: block; height: 60px; line-height: 60px; background: #002fa7; font-size: 1.8rem; color: #fff;text-align: center; transition: all .35s;}
#service .stores .query>.item .layui-anim::-webkit-scrollbar {width:2px;height: 2px;}
#service .stores .query>.item .layui-anim::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0); background:#002fa7;}
#service .stores .query>.item .layui-anim::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);border-radius: 0;background: #fff;}

#service .stores .lists{margin: 0 auto;}
#service .stores .lists>p{color: #999; font-size: 1.6rem;}
#service .stores .lists>ul{margin: 0 auto;}
#service .stores .lists>ul>li{ position: relative; display: block; float: left; width: 32.33%; margin-right: 1.5%; margin-bottom: 1.5%; border: 1px solid #e5e5e5; box-sizing: border-box; transition: all .35s;}
#service .stores .lists>ul>li:nth-child(3n){margin-right: 0;}
#service .stores .lists>ul>li>a{display: block;padding: 25px;}
#service .stores .lists>ul>li>a .tit{font-size: 2rem; color: #000;transition: all .35s;}
#service .stores .lists>ul>li>a .box{ margin: 20px 0; height: 80px; font-size: 1.6rem; color: #676767; transition: all .35s;}
#service .stores .lists>ul>li>a .box>p{margin-bottom: 10px;}
#service .stores .lists>ul>li>a .viewmap{ font-size: 1.6rem; color: #002fa7;}
#service .stores .lists>ul>li:hover{background: #002fa7; border-color: #002fa7; box-shadow: 0 0 16px rgba(0,47,167,.8);}
#service .stores .lists>ul>li:hover .tit{color: #fff;}
#service .stores .lists>ul>li:hover .box{color: #fff;}
#service .stores .lists>ul>li:hover .viewmap{color: #fff;}


#service .orderform{ display: none; background: #f2f3f5; padding: 90px 0; margin:  0 auto;}
#service .orderform .form{margin: 0 auto; padding: 40px 0;}
#service .orderform .form>.row{display: inline-flex; justify-content: space-between; align-items: center; float: left; width: 31.33%;margin-right: 3%; border: 1px solid #ccc; box-sizing: border-box; padding: 0 20px; background: #fff; transition: all .35s;}
#service .orderform .form>.row:nth-child(3n){margin-right: 0;}
#service .orderform .form>.row input{display: inline-block; border: 0; background: none; width: 70%; height: 60px; line-height: 60px; font-size: 1.6rem; color: #002fa7;}
#service .orderform .form>.row a{display: block;}
#service .orderform .form>.row a>img{filter: grayscale(100%); opacity: .6;transition: all .35s; }
#service .orderform .form>.row a:hover img{opacity: 1;filter: grayscale(0);}
#service .orderform .form>.row:hover{ border-color: #002fa7;}
#service .orderform .tips{text-align: center;margin: 0 auto;}
#service .orderform .tips>h3{ display: block; font-size: 2rem; font-weight: 400; color: #000;}
#service .orderform .tips>p{display: block;padding-top: 5px; font-size: 1.6rem;color: #676767;}
.layui-layer-btn .layui-layer-btn0 {border-color: #000!important;background-color: #000!important;}




#service .questions{background: #f2f3f5; padding: 90px 0; margin:  0 auto; border-top: 2px solid #fff;}
#service .questions .lists{margin: 0 auto; padding: 40px 0;}
#service .questions .lists>ul{margin: 0 auto;}
#service .questions .lists>ul>li{ position: relative; display: block; float: left; width: 48%; border-bottom: 1px solid #ccc; box-sizing: border-box;}
#service .questions .lists>ul>li:nth-child(1), #service .questions .lists>ul>li:nth-child(2){border-top: 1px solid #ccc;}
#service .questions .lists>ul>li:nth-child(even){float: right;}
#service .questions .lists>ul>li a{display: block; position: relative; text-align: left;}
#service .questions .lists>ul>li a>.theme{ position: relative; font-size: 2rem; color: #000; width: 100%; height: 100px; line-height: 100px; overflow: hidden;text-overflow:ellipsis; white-space: nowrap; box-sizing: border-box;padding: 0 10% 0 6px; transition: all .35s;}
#service .questions .lists>ul>li a>.theme:after{position: absolute;z-index: 10; right: 6px;top: 50%; transform: translateY(-50%); box-sizing: border-box; width: 30px;height: 30px; line-height: 30px; border: 1px solid #787878; color: #787878; border-radius: 100%; text-align: center; font-family: iconfont; font-size: 2rem; content: '\e686'; transition: all .35s;}
#service .questions .lists>ul>li a>.box{ display: none; position: absolute;z-index: 10; left: 0; top: 80px; width: 100%; font-size: 1.6rem; color: #676767;border-bottom: 1px solid #ccc; line-height: 2.8rem; box-sizing: border-box; padding:0 20px 20px 20px; background: #fff;}
#service .questions .lists>ul>li.active{background: #fff;z-index: 100;}
#service .questions .lists>ul>li.active .theme:after{ content: '\e693'; color: #787878!important; border-color: #787878!important;}
#service .questions .lists>ul>li.active .theme{color: #000!important;}
#service .questions .lists>ul>li a:hover .theme{color: #002fa7;}
#service .questions .lists>ul>li a:hover .theme:after{color: #002fa7; border-color: #002fa7;}


#service .contacts{padding: 100px 0; margin:  0 auto;}
#service .contacts .container{margin: 0 auto;padding: 40px 0;}
#service .contacts .container>.info{ width: 50%; text-align: left;}
#service .contacts .container>.info>.title{font-size: 2rem; color: #000; margin-bottom: 10px;}
#service .contacts .container>.info>.text{font-size: 1.6rem; color: #676767;}
#service .contacts .container>.info>.text>p{margin-bottom: 10px;}
#service .contacts .container>.qrcode{width: 50%; position: relative;margin-top: -140px; right: -50px; }
#service .contacts .container>.qrcode>.row{display: block; float: left; width: 33.33%; margin-bottom: 40px; text-align: center;}
#service .contacts .container>.qrcode>.row p{ padding: 10px 0; font-size: 1.4rem; color: #676767;}


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

    #service .title>h3{ font-size: 2.8rem;}
    #service .title>p{ font-size: 1.6rem;}


    #service .process .items>.row{ width: 32%;}
    #service .process .items>.row:nth-child(4n){margin-right: 2%;}
    #service .process .items>.row:nth-child(3n){margin-right: 0;}
    #service .process .items>.row>.title {font-size: 2rem;}

    #service .contacts .container>.info{}





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

    #service .stores .lists>ul>li{ width: 49.25%; margin-right: 0;}
    #service .stores .lists>ul>li:nth-child(even){ float: right;}




}

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

    #service .contacts .container>.info{width: 40%;}
    #service .contacts .container>.qrcode{width: 60%; }

}


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


    #service .process .items>.row{height: 200px;}
    #service .process .items>.row>.ico { height: 65px; }


    #service .questions .lists>ul>li{ float: none; width: 100%;}
    #service .questions .lists>ul>li:nth-child(even){float: none;}
    #service .questions .lists>ul>li:nth-child(2){border-top: 0;}
    #service .questions .lists>ul>li a>.theme{ font-size: 1.8rem;height: 90px; line-height: 90px;}
    #service .questions .lists>ul>li a>.box{position: relative; top: 0; border-bottom: 0;}

    #service .orderform .tips>h3{font-size: 1.8rem; }
    #service .orderform .tips>p{font-size: 1.4rem;}


    #service .contacts .container>.info{ width: 100%; float: none;}
    #service .contacts .container>.qrcode{ width: 80%; float: none; margin-top: 30px;right: 0;}

}

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


    #service .orderform .form>.row{display: flex;float: none; width: 100%;margin-right: 0; margin-bottom: 20px;}
    #service .orderform .form>.row:nth-child(3n){margin-right: 0;}

    #service .questions .lists>ul>li a>.box{ font-size: 1.5rem;}



}

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

    #service .process{padding: 80px 0; }
    #service .process .items{padding: 30px 0;}
    #service .process .items>.row{ width: 49%; margin-right: 0;}
    #service .process .items>.row:nth-child(4n){margin-right: 0;}
    #service .process .items>.row:nth-child(even){float: right;}
    #service .process .items>.row>.title {font-size: 1.8rem;}
    #service .process .items>.row>.number{bottom: 36px;}


    #service .stores{padding: 50px 0;}
    #service .stores .query{padding: 30px 0 10px 0;}
    #service .stores .query>.item{ display: block; float: none; width: 100%;margin-right: 0; margin-bottom: 1.5%;}
    #service .stores .query>.item .layui-input, .layui-select, .layui-textarea{height: 50px!important;}
    #service .stores .query>.item .layui-form-select dl { top:49px;}
    #service .stores .query>.item .layui-form-selectup dl {top: auto; bottom: 49px;}
    #service .stores .query>.item>a{height: 50px; line-height: 50px;}
    #service .stores .lists>ul>li>a .tit{font-size: 1.8rem;}
    #service .stores .lists>ul>li>a .box{ height: 70px; font-size: 1.4rem;}



    #service .orderform{padding: 50px 0;}
    #service .orderform .form>.row input{height: 50px; line-height: 50px; font-size: 1.4rem;}

    #service .questions{padding: 50px 0;}

    #service .contacts{padding: 50px 0;}
    #service .contacts .container>.info>.text{font-size: 1.5rem;}
    #service .contacts .container>.qrcode{ width: 100%;}


}

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

    #service .title>h3{ font-size: 2rem; padding-bottom: 10px;}
    #service .title>p{ font-size: 1.4rem; padding-top: 5px;}


    #service .stores .lists>ul>li{ float: none; width: 100%; margin-bottom: 10px;}
    #service .stores .lists>ul>li:nth-child(even){ float: none;}

    #service .stores .lists>ul>li>a {padding: 10px; }
    #service .stores .lists>ul>li>a .box{ margin: 10px 0;}
    #service .stores .lists>ul>li>a .box>p{margin-bottom:5px;}





    #service .questions .lists>ul>li a>.theme{ font-size: 1.6rem;height: 70px; line-height: 70px;}
    #service .questions .lists>ul>li a>.theme:after{width: 24px;height: 24px; line-height: 24px; font-size: 1.6rem;}
    #service .questions .lists>ul>li a>.box{ font-size: 1.4rem;}

    #service .contacts .container>.info>.text{font-size: 1.3rem;}
    #service .contacts .container>.qrcode>.row{width: 50%; margin-bottom: 20px;}
    #service .contacts .container>.qrcode>.row img{width: 100px; height: auto;}
    #service .contacts .container>.qrcode>.row p{ width: 46%; padding: 5px 0; height: 30px; font-size: 1.2rem; color: #676767; margin: 0 auto}

}




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

    #service .process{padding: 50px 0;}
    #service .process .items>.row{ width: 100%; height: 180px; float: none; margin-bottom: 15px;}
    #service .process .items>.row:nth-child(even){float: none;}
    #service .process .items>.row>.ico{ height: 45px;}
    #service .process .items>.row>.ico>img { width: 36px; }


    #service .stores{padding: 30px 0;}
    #service .orderform{padding: 30px 0;}
    #service .contacts{padding: 30px 0;}

}


@keyframes lefttoright{ 0%{width: 100%;right: 0;} 50%{width: 0;right: 0;} 100%{width: 100%;left: 0;}}