@charset "utf-8";
/* CSS Document */
html, body {background: #f3f3f3!important;}

#service{ position: relative;z-index: 5; background: #f3f3f3; margin: 0 auto; padding-top: 100px;}

#service{ margin:0 auto;background: #f3f3f3;}
#service .title{ position:relative; width:86%; max-width:1300px; margin:0 auto; font-size: 4.5rem; color: #333; text-align:center;font-weight: 400;}
#service .title:after{position:absolute;z-index:3;left:50%; bottom:-10px; margin-left: -30px; width:60px;height:3px; background:rgba(38,87,161,1); content:'';}

#service .pre-sale{margin: 0 auto;}
#service .pre-sale>.container{margin: 0 auto; padding: 50px 0;}
#service .pre-sale>.container>.describe{ width: 80%; margin: 0 auto; font-size: 1.6rem;line-height: 2.8rem; text-align: center; color: #666;}
#service .pre-sale>.container>.box{margin: 0 auto; padding: 80px 0;}
#service .pre-sale>.container>.box>ul>li{display: inline-block; float: left; width: 20%; text-align: center; transition: all .35s;}
#service .pre-sale>.container>.box>ul>li>.ico{ text-align: center; margin: 0 auto; }
#service .pre-sale>.container>.box>ul>li>.ico>i{ padding: 20px; font-size: 6rem; font-weight: 100; border: 4px solid rgba(38,87,161,1); border-radius: 100%;color: rgba(38,87,161,1); transition: all .35s; }
#service .pre-sale>.container>.box>ul>li>.tit{ padding: 40px 0; font-size: 1.8rem; font-weight: 700; color: rgba(38,87,161,1);}
#service .pre-sale>.container>.box>ul>li:hover .ico>i{ color: rgba(255,255,255,1); background: rgba(38,87,161,1); border: 0; }
#service .pre-sale>.container>.box>ul>li:hover { transform: translateY(-8px);}


#service .after-sale{margin: 0 auto; background: #fff; padding: 100px 0;}
#service .after-sale>.container{margin: 0 auto;}
#service .after-sale>.container>.describe{width: 80%; margin: 0 auto;font-size: 1.6rem;line-height: 2.8rem; padding-top: 50px; text-align: center; color: #666;}
#service .after-sale>.container>.box{margin: 0 auto; padding-top: 80px;}
#service .after-sale>.container>.box>ul{margin: 0 auto;}
#service .after-sale>.container>.box>ul>li{display: block;float: left; width: 48%;}
#service .after-sale>.container>.box>ul>li:nth-child(even){float: right;}
#service .after-sale>.container>.box>ul>li .img{ text-align: center;position: relative; background: #000; }
#service .after-sale>.container>.box>ul>li .img>img{width: 100%;height: auto; opacity: .5;}
#service .after-sale>.container>.box>ul>li .img>span{ position: absolute;z-index: 3; left:0; top: 50%; margin-top: -30px; width: 100%;height: 60px; line-height: 60px; text-align: center; font-size: 3.2rem; color: #fff;}
#service .after-sale>.container>.box>ul>li .con{ text-align: left;padding:0 30px; height: 300px; border: 1px solid #ddd;overflow: auto;}
#service .after-sale>.container>.box>ul>li .con>.txt{margin:0 auto;box-sizing: border-box; padding: 20px; text-align: left; font-size: 1.4rem; line-height: 2.4rem; color: #666;}
#service .after-sale>.container>.box>ul>li .con>.txt>p{ margin-bottom:10px; font-size: 1.4rem; line-height: 2.4rem; color: #666;}


#service .hotline{margin: 0 auto; background: url("../img/service_hotline_bg.jpg") no-repeat; background-attachment: fixed; background-position: 50% 50%; background-size: cover; }
#service .hotline>.container{padding: 160px 0;margin: 0 auto;}
#service .hotline>.container>.tit{font-size: 2rem;color: rgba(255,255,255,.7); text-align: center;}
#service .hotline>.container>.tit>i{display: block; font-size: 4.8rem;color: rgba(146,191,46,1);}
#service .hotline>.container>.box{margin: 0 auto; padding-top: 50px; text-align: center;}
#service .hotline>.container>.box>ul>li{display: inline-block; padding: 0 20px;font-size: 2.8rem; color: #fff;}
#service .hotline>.container>.box>ul>li>i{font-size: 3rem; margin-right: 10px;}


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

    #service .pre-sale>.container>.describe{ width: 100%;}
    #service .after-sale>.container>.describe{ width: 100%;}

}

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


    #service .title{ font-size: 3.6rem;}

    #service .pre-sale>.container>.describe{ font-size: 1.4rem; line-height: 2rem;}

    #service .pre-sale>.container>.box>ul>li>.ico>i{ font-size: 5.2rem;}
    #service .pre-sale>.container>.box>ul>li>.tit{ font-size: 1.7rem; }


    #service .after-sale>.container>.describe{font-size: 1.4rem; line-height: 2rem;}




}

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

    #service .pre-sale>.container>.box>ul>li>.ico>i{ font-size: 4.6rem;}
    #service .pre-sale>.container>.box>ul>li>.tit{ font-size: 1.6rem; }

    #service .after-sale>.container>.box>ul>li{float: none; width: 100%; margin-bottom: 5%;}
    #service .after-sale>.container>.box>ul>li:nth-child(even){float: none;}
    #service .after-sale>.container>.box>ul>li .con{height: auto}


}

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

    #service{  padding-top:50px;}
    #service .after-sale{padding: 50px 0;}

    #service .title{ font-size: 2.8rem;}

    #service .pre-sale>.container>.box>ul>li{display: inline-block; float: left; width: 30.33%; text-align: center; transition: all .35s;}

    #service .after-sale>.container>.box>ul>li .con{padding: 0;}



}