master/css/services.css

.services-banner{
    width: 100%;
    height: 540px;
    background: url(../images/services_bgIxo.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.services-bannertit{
    width: 700px;
    line-height: 50px;
    font-size:44px;
    font-weight:500;
    color:rgba(255,255,255,1);
    text-align: center;
    margin: 191px auto 0;
    background-color: #3F9FFE;
}
.servicessection-wrap{
    padding: 70px 0;
}
.services-bannertext{
    width: 700px;
    background-color: #3F9FFE;
    font-size:24px;
    font-weight:500;
    color:rgba(255,255,255,1);
    text-align: center;
    margin: 0 auto;
}
.services-content{
    background-color: #fff;
}
.services_bgF7F8FA{
    background-color: #F7F8FA;
    width: 100%;
}
.section{
    padding: 0 !important;
}
/*tab sta */
.services-wrap{
    /*height: 680px;*/
    /*width: 1200px;*/
    margin: 0 auto;
    width: 100%;
}
.part{ height: 480px; position: relative; overflow: hidden; width: 1000px; padding: 0;}
.part .con{ width: 100%; }
.part .bd, .part .bd ul {
    width: 100%;
    height: 100%;
}
.part .bd {
    width: 100%;
    float: left;
}
.part3 .hd,.part5 .hd{width: 500px!important; margin-top: 50px; overflow: hidden;margin-left:500px; background: #fff; z-index: 1000;}
.part .hd h2{width: 110px; cursor: pointer; float: left; font-size: 20px; padding-bottom: 15px; margin-bottom: 0; text-align: center;}
.part .hd h2.active-nav{ border-bottom: solid 3px #3F9FFE;color:#3F9FFE; }
.part .bd{width: 100%;float: left;}
.part .line {
    width: 100%;
    /* margin: 0 auto; */
    height: 1px;
    background: #818181;
    overflow: hidden;
    position: absolute;
    bottom: 1px;
}
.part .bd .p1 {
    font-size: 30px;
    padding: 25px 0 5px;
}
.part .bd .p2 {
    font-size: 18px;
    line-height: 40px;
    color: #666;
    font-weight: normal;
}
.part .bd .img img {
    /*border: solid 1px #b8b8b8;*/
    display: block;
    margin: 0px auto;
    width: 80%;
    height: 80%;
}
.part3 .bd .txt , .part5 .bd .txt {float: right; width: 500px;}
.part4 .bd .txt {float: left; width: 500px; margin-left: 0px;}
.part3 .hd h2 .icon{ width: 54px;height: 54px; margin-bottom: 15px; background:url(../images/service_bgsmallIco.png) -4px 0 no-repeat; display: inline-block; }
.part3 .hd h2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -544px 0 no-repeat;}
.part3 .hd h2 span{display: block;}
.part3 .hd h2.icon2 .icon{ background:url(../images/service_bgsmallIco.png) -65px 0 no-repeat; }
.part3 .hd h2.icon2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -605px 0 no-repeat;}
.part3 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -127px 0 no-repeat; }
.part3 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -667px 0 no-repeat;}
.part3 .bd .img {
    /*width: 433.6px;*/
    /*height: 395.2px;*/
    z-index: 1000;
    margin: -50px 0 0 0%;
    float: left;
    /*overflow: hidden;*/
}
/*part4==============*/
.part4 .phonebg{
    background: #f7f7f7 url(../images/service_bgsmallIco.png) 0 0 no-repeat;
}
.part4 .hd {
    margin-top: 50px;
    z-index: 1000;
    width: 500px!important;
    overflow: hidden;
    margin-left: 0px;
    background: #f7f7f7;
}
.part4 .hd h2 .icon{ width: 54px;height: 54px; margin-bottom: 15px; background:url(../images/service_bgsmallIco.png) -183px 0 no-repeat; display: inline-block; }
.part4 .hd h2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -723px 0 no-repeat;}
.part4 .hd h2 span{display: block;}
.part4 .hd h2.icon2 .icon{ background:url(../images/service_bgsmallIco.png) -244px 0 no-repeat; }
.part4 .hd h2.icon2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -784px 0 no-repeat;}
.part4 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -305px 0 no-repeat; }
.part4 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -845px 0 no-repeat;}
.part4 .bd .img {
    /*width: 433.6px;*/
    /*height: 395.2px;*/
    z-index: 1000;
    margin: -50px 0 0 30px;
    float: left;
    /*overflow: hidden;*/
}
/*part5==============*/
.part5 .phonebg{
    background: #f7f7f7 url(../images/service_bgsmallIco.png) 0 0 no-repeat;
}
.part5 .hd h2 .icon{ width: 54px;height: 54px; margin-bottom: 15px; background:url(../images/service_bgsmallIco.png) -363px 0 no-repeat; display: inline-block; }
.part5 .hd h2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -903px 0 no-repeat;}
.part5 .hd h2 span{display: block;}
.part5 .hd h2.icon2 .icon{ background:url(../images/service_bgsmallIco.png) -424px 0 no-repeat; }
.part5 .hd h2.icon2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -964px 0 no-repeat;}
.part5 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -485px 0 no-repeat; }
.part5 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -1025px 0 no-repeat;}
.part5 .bd .img {
    /*width: 433.6px;*/
    /*height: 395.2px;*/
    z-index: 1000;
    margin: -50px 0 0 0%;
    float: left;
    /*overflow: hidden;*/
}
@media screen and (min-width: 1000px) and (max-width: 2500px){
    .part .bd .img {
        width: 433.6px;
        height: 395.2px;
    }
}
@media screen and (min-width: 980px) and (max-width: 1000px){
    .part .bd .img {
        width: 433.6px;
        height: 395.2px;
    }
    .part3 .bd .txt,  .part5 .bd .txt {
        margin-right: 0px;
    }
}
@media screen and (min-width: 767px) and (max-width: 980px){
    .container{width: 100% !important}
    .part .bd .img {
        width: 80%;
        height: 80%;
    }
     .part{height: auto}
     .part .con {
        width: 100%;
        margin-left: 0px;
        margin-bottom: 50px;
    }
     .part .hd {
        width:100%;
        margin:20px auto 0;
        text-align: center;
        overflow: hidden;
    }
     .part .bd .p1 {
        font-size:2.5rem; text-align: center;
    }
     .part .bd .p2 {
        font-size: 2.1rem; display: none
    }
     .part  .line{width: 100%;}
     .part .hd h2 {
        width: 80px;
        float: none; display: inline-block; margin-left: -4px;
    }
     .part .bd .img {
        font-size: 34px;
        margin: 0 auto; float: none;
        position: static;
    }
     .part3 , .part4, .part5 {
        height: 750px;
    }
     .part .hd {
        width: 100%;
        margin: 30px auto 0;
    }
     .part3 .bd .txt,  .part5 .bd .txt {
        float: none;
        width: 100%;
        margin:0 auto;
    }
     .part4 .bd .txt {
        float: none;
        width: 100%;
        margin-left: 0;
    }
}
@media screen and (min-width: 320px) and (max-width: 767px){
    .container{
        width: 100%
    }
     .part{height: auto; width: 100%;}
     .part .con {
        width: 100%;
        margin-left: 0px;
        margin-bottom: 50px;
    }
     .part .hd {
        width:100%;
        margin:20px auto 0;
        text-align: center;
        overflow: hidden;
    }
     .part .bd .p1 {
        font-size:2.5rem; text-align: center;
    }
     .part .bd .p2 {
        font-size: 2.1rem; display: none
    }
     .part  .line{width: 100%;}
     .part .hd h2 {
        width: 72px;
        float: none; display: inline-block; margin-left: -4px;
    }
     .part .bd .img {
        font-size: 34px;
        margin: 0 auto; float: none;
        position: static;
    }
     .part3 , .part4, .part5 {
        height: 550px;
        width: 100%;
    }
     .part .hd {
        width: 90% !important;
        margin: 30px auto 0;
    }
     .part3 .bd .txt,  .part5 .bd .txt {
        float: none;
        width: 100%;
        margin:0 auto;
    }
     .part4 .bd .txt {
        float: none;
        width: 100%;
        margin-left: 0;
    }
}
/*footer sta*/
.services-foottit{
    height:38px;
    line-height:38px;
    font-size:36px;
    font-weight:500;
    color:rgba(0,0,0,1);
    margin: 0px auto 71px;
}
.services-foot-cont{
    width: 100%;
}
.services-foot-div{
    height: 302px;
    background:rgba(255,255,255,1);
    box-shadow:2px 2px 2px 2px rgba(234,235,235,0.48);
}
.services-foot-div div:nth-of-type(1){
    height: 165px;
    width: 100%;
}
.services-footmsgtit{
    /*width:150px;*/
    height:33px;
    font-size:29px;
    font-weight:bold;
    color:rgba(78,166,253,1);
    line-height:33px;
    text-align: left;
    margin-left: 40px;
    margin-top: 25px;
}
.services-footmsg{
    font-size: 16px;
    font-weight: 500;
    color: rgba(0,0,0,0.6);
    line-height: 22px;
    text-align: left;
    padding: 0 20px 0 40px;
}
.services-footIco1{
    background: url("../images/services_footIco1.png") no-repeat;
    /*background-size: ;*/
}
.services-footIco2{
    background: url("../images/services_footIco2.png") no-repeat;
    /*background-size: ;*/
}
.services-footIco3{
    background: url("../images/services_footIco3.png") no-repeat;
    /*background-size: ;*/
}
.services-footIco4{
    background: url("../images/services_footIco4.png") no-repeat;
    /*background-size: ;*/
}
/*.ai-success-stories-list-bar{
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 50%;
    height: 2px;
    background: rgba(63,159,254,1);
    transition:width .8s;
    -webkit-transition:width .8s;
}
.ai-bar{
    width:100%;
    transition:width .8s;
    -webkit-transition:width .8s;
}*/