.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; }*/