@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:#2866F7; 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.7rem;line-height: 3.7rem; 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 #2866F7; border-radius: 100%;color: #2866F7; transition: all .35s; }
#service .pre-sale>.container>.box>ul>li>.tit{ padding: 40px 0; font-size: 1.8rem; font-weight: 700; color: #2866F7;}
#service .pre-sale>.container>.box>ul>li:hover .ico>i{ color: rgba(255,255,255,1); background: #2866F7; 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.7rem;line-height: 3.7rem; 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: flex;width: 100%;}
#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;width:50%;}
#service .after-sale>.container>.box>ul>li .img>img{width: 100%;height: auto; opacity: 1;}
#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{ width:50%;text-align: left;padding:0 30px; 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.6rem;
    line-height: 3.8rem; 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: contain; }
#service .hotline>.container{padding: 160px 0;margin: 0 auto;}
#service .hotline>.container>.tit{font-size: 2rem;color: rgba(255,255,255,1); 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.5rem;
        line-height: 2.8rem;
        text-align: left;
        text-indent: 2em;
    }
    #service .pre-sale>.container{
        padding: 20px 0;
    }
    #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.5rem;
        line-height: 2.8rem;
        text-align: left;
        text-indent: 2em;
    }

    #service .after-sale>.container>.box>ul>li .con,#service .after-sale>.container>.box>ul>li .img{width:100%;}
    #service .after-sale>.container>.box>ul>li>a{flex-direction: column;}
    #service .after-sale>.container>.box.wrap{width:100%;}
    #service .after-sale>.container>.box{padding-top:30px;}
    #service .hotline{background-size: cover;}
    #service .hotline>.container>.tit{font-size: 1.8rem;}
    #service .hotline>.container>.box ul{text-align:left;}
    #service .hotline>.container>.box>ul>li{font-size: 1.8rem;}


}

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

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

    #service .pre-sale>.container>.box{padding: 30px 0;}
    #service .after-sale>.container>.box>ul>li{float: none; width: 100%; margin-bottom: 5%;flex-direction:column;}
    #service .after-sale>.container>.box>ul>li:nth-child(even){float: none;}
    #service .after-sale>.container>.box>ul>li .con{height: auto}
    #service .hotline>.container{padding: 80px 0;}
}

@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;}



}