@charset "utf-8";

/*头部*/ 
.header{width: 100%;height: 640px;background: url(../images/service_images/banner.jpg) no-repeat 0px 0px;position: relative;min-width: 1200px;}
.header-img{width: 80%;margin: 0 auto;position: relative;height: 640px;min-width: 1200px;}
.header-img2{width:40%;position: absolute;bottom:210px;z-index: 3;left: 10%;}
.header-img1 img,.header-img2 img{width: 100%;}


/*咨询服务*/
.zixun{width: 100%;padding: 120px 0 0 0;background: #fff;min-width: 1200px;height: 770px;position: relative;z-index: 5;}
.zixun-small{width: 100%;margin: 0 auto;}
.zixun h2{width: 100%;text-align: center;font-size: 30px;font-weight: 700;margin-bottom: 5px;letter-spacing: 1px;font-family: 微软雅黑;}
.zixun .p1{width: 100%;text-align: center;font-size: 24px;color: #737880;opacity: 0.6;}
.zixun .span{width: 100%}
.zixun span{width: 80px;border-bottom:4px solid #3D7EFF;height: 1px;display: block;margin: 8px auto 40px auto;opacity: 1;}
.zixun .p2{width: 80%;margin: 0 auto;text-align: center;font-size: 14px;font-family: 微软雅黑;color: #777;margin-bottom: 30px;line-height: 28px;width: 60%;margin: 0 auto;}
.zx-box{width: 100%;position: relative;margin: 0 auto;height: 430px;}
.num1{position: absolute;left: 20%;width: 25%;bottom: 40%;}
.num2{position: absolute;left: 20%;bottom: 9%;width: 25%;}
.num3{position: absolute;right: 20%;width: 25%;bottom: 40%;}
.num4{position: absolute;right: 20%;width: 20%;bottom: 3%;}
.num1 img,.num2 img,.num3 img,.num4 img{width: 100%;}
.zx-box .ball{/*width: 60%;*/width:30%;margin: 0 auto;position: relative;/*transform: rotate3d(360deg);*/min-width: 480px;}
.zx-box .ball #loader{width: 100%;bottom: -200px;position: absolute;bottom: -700px;-webkit-animation: spin 30s linear infinite;
        animation: spin 30s linear infinite;}

    @-webkit-keyframes spin {  
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            /*-webkit-transform:rotate3d(0,1,1,360deg);*/
            -ms-transform: rotate(360deg);
            /*-ms-transform:rotate3d(0,1,1,360deg);*/
            transform: rotate(360deg);
            /*transform: rotate3d(0,1,1,360deg);*/
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
           /* -webkit-transform:rotate3d(0,1,1,360deg);
            -ms-transform:rotate3d(0,1,1,360deg);
            transform: rotate3d(0,1,1,360deg);*/
        }
    }
/*顶层设计服务*/
.dingceng{width: 100%;padding: 60px 0 0 0;background: #f5f5f5;min-width: 1400px;height: 770px;position: relative;min-width: 1200px;z-index: 888;box-shadow:20px -60px 57px -19px rgba(255,255,255,.95);}
.dingceng-small{margin: 0 auto;width: 100%;}
.dingceng h2{width: 100%;text-align: center;font-size: 30px;font-weight: 700;margin-bottom: 5px;letter-spacing: 1px;font-family: 微软雅黑;}
.dingceng .p1{width: 100%;text-align: center;font-size: 24px;color: #737880;opacity: 0.6;}
.dingceng .span{width: 100%}
.dingceng span{width: 80px;border-bottom:4px solid #3D7EFF;height: 1px;display: block;margin: 8px auto 40px auto;opacity: 1;}
.dingceng .p2{width: 80%;margin: 0 auto;text-align: center;font-size: 14px;font-family: 微软雅黑;color: #777;margin-bottom: 30px;line-height: 28px;width: 60%;margin: 0 auto;}
.dc-box{width: 100%;position: relative;margin: 0 auto;height: 430px;transition:all 2s;-moz-transition:all 2s;-webkit-transition:all 2s;-o-transition:all 2s;padding-top:100px;visibility:hidden;opacity:0;}
.dc-box li{float: left;}

@media screen and (max-width: 1200px){
    .dc-cont1{width: 4%;height: 100%;background-size:80%!important;min-width: 475px;left: 8%;}
    .dc-cont2{width: 13%;height: 100%;background-size: 75%!important;min-width: 200px;left: 1%;}
    .dc-cont3{width: 5%;height: 100%;background-size: 80%!important;left: 3%;background: url(../images/service_images/dc_arrow3.png) no-repeat 0px 46%;}
    .dc-cont4{width: 25%;height: 100%;background-size: 95%!important;min-width: 400px;left: 2%;}
    .dc-box1{width: 13%;height: 13%;top: 20%;left: 17%;}
    .dc-box2{width: 13%;height: 13%;top: 38%;left: 0%;}
    .dc-box3{width: 14%;height: 14%;top: 51%;left: 17%;}
    .dc-box4{width: 13%;height: 13%;top: 37%;left: 34%;}
    .dc-cont1 i{top:41%;left: 20%;}
    .dc-cont1 .shadow{top:40%;left: 60%;}
    .dc-cont1 .shadow1{top:40%;left: 63%;}
    .dc-cont1 .shadow2{top:40%;left: 66%;}
}
/*@media screen and (min-width:960px) and (max-width:1350px){
    #cp-img ul li img{width: 630px;margin-top:150px;}
}
@media screen and (min-width:1350px) and (max-width:1600px){
    #cp-img ul li img{width: 775px;margin-top:150px;}
}*/
@media screen and (min-width:1200px) and (max-width:2000px){
    .dc-cont1{width: 25%;height: 100%;background-size:95%!important;min-width: 475px;left: 15%;}
    .dc-cont2{width: 13%;height: 100%;background-size: 75%!important;min-width: 200px;left: 15%;}
    .dc-cont3{width: 5%;height: 100%;background-size: 80%!important;left: 15%;background: url(../images/service_images/dc_arrow3.png) no-repeat 0px 54%;}
    .dc-cont4{width: 25%;height: 100%;background-size: 95%!important;min-width: 400px;left: 15%;}
    .dc-box1{width: 13%;height: 13%;top: 25%;left: 17%;}
    .dc-box2{width: 13%;height: 13%;top: 45%;left: 0%;}
    .dc-box3{width: 14%;height: 14%;top: 63%;left: 17%;}
    .dc-box4{width: 13%;height: 13%;top: 45%;left: 34%;}
    .dc-cont1 i{top:50%;left: 20%;}
    .dc-cont1 .shadow{top:48%;left: 78%;}
    .dc-cont1 .shadow1{top:48%;left:75%;}
    .dc-cont1 .shadow2{top:48%;left:72%;}
}
.dc-cont1{background: url(../images/service_images/dc_arrow1.png) no-repeat 0px 0px; position: relative;animation: heart 1s ease-in-out 1s infinite alternate;}
.dc-cont2{background: url(../images/service_images/dc1.png) no-repeat 55% 25%;animation: heart 1s ease-in-out 1s infinite alternate;position: relative;}
.dc-cont3{animation: heart 1s ease-in-out 1s infinite alternate;position: relative;}
.dc-cont4{background: url(../images/service_images/dc2.png) no-repeat 0px 24%;animation: heart 1s ease-in-out 1s infinite alternate;position: relative;}
.dc-box1{position: absolute;animation: heart 1.1s ease-in-out infinite alternate;}
.dc-box1 img{width: 100%;}
.dc-box2{position: absolute;animation: heart 0.8s ease-in-out infinite alternate;}
.dc-box2 img{width: 100%;}
.dc-box3{position: absolute;animation: heart 0.9s ease-in-out infinite alternate;}
.dc-box3 img{width: 100%;}
.dc-box4{position: absolute;animation: heart 1.2s ease-in-out infinite alternate;}
.dc-box4 img{width: 100%;}
.dc-cont1 i{font-style: normal;font-size: 18px;color: #3D7DFF;font-family: 微软雅黑;position: absolute;font-weight: 700;}
@keyframes heart{
from{transform:translate(0,0)}
to{transform:translate(0,8px)}
}

.dc-cont1 .shadow {font-size: 26px;font-family: 微软雅黑;position: absolute;font-weight: 700;width: 7%;height: 15%;
        text-align: center;
        background: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(.4, #fff), color-stop(.5, white), color-stop(.6, #fff), color-stop(1, transparent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /*-webkit-animation: animate 3s infinite;*/
        -webkit-animation: animate 5s linear infinite;
}
            /* 兼容写法，要放在@keyframes前面 */
            @-webkit-keyframes animate {
                /* 背景从-100px的水平位置，移动到+100px的水平位置。如果要移动Y轴的，设置第二个数值 */
                from {background-position: -100px;}
                to {background-position: 100px;}
            }
            @keyframes animate {
                from {background-position: -100px;}
                to {background-position: 100px;}
            }
.dc-cont1 .shadow1 {font-size: 26px;font-family: 微软雅黑;position: absolute;font-weight: 700;width: 7%;height: 15%;
        text-align: center;
        background: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(.4, #fff), color-stop(.5, white), color-stop(.6, #fff), color-stop(1, transparent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /*-webkit-animation: animate 3s infinite;*/
        -webkit-animation: animate 6s linear infinite;
}
            /* 兼容写法，要放在@keyframes前面 */
            @-webkit-keyframes animate {
                /* 背景从-100px的水平位置，移动到+100px的水平位置。如果要移动Y轴的，设置第二个数值 */
                from {background-position: -100px;}
                to {background-position: 100px;}
            }
            @keyframes animate {
                from {background-position: -100px;}
                to {background-position: 100px;}
            }
.dc-cont1 .shadow2 {font-size: 26px;font-family: 微软雅黑;position: absolute;font-weight: 700;width: 7%;height: 15%;
        text-align: center;
        background: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(.4, #fff), color-stop(.5, white), color-stop(.6, #fff), color-stop(1, transparent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        /*-webkit-animation: animate 3s infinite;*/
        -webkit-animation: animate 7s linear infinite;
}
            /* 兼容写法，要放在@keyframes前面 */
            @-webkit-keyframes animate {
                /* 背景从-100px的水平位置，移动到+100px的水平位置。如果要移动Y轴的，设置第二个数值 */
                from {background-position: -100px;}
                to {background-position: 100px;}
            }
            @keyframes animate {
                from {background-position: -100px;}
                to {background-position: 100px;}
            }

/*渐入效果*/

.enterAnimation{
   visibility:visible!important;opacity:1!important;padding-top:0!important;
}
/*集成实施服务*/
.jicheng{width: 100%;background: url(../images/service_images/bg.jpg) no-repeat 0px 0px;box-sizing: border-box;padding-top:60px;min-width: 1200px;background-size: 100% 600px;height: 600px;position: relative;}
.jicheng-small{width: 70%;margin: 0 auto;min-width: 1200px;}
.jicheng h2{width: 100%;text-align: center;font-size: 30px;font-weight: 700;margin-bottom: 5px;letter-spacing: 1px;color: #fff;font-family: 微软雅黑;}
.jicheng .p1{width: 100%;text-align: center;font-size: 24px;color: #fff;opacity: 0.6;}
.jicheng .span{width: 100%}
.jicheng span{width: 80px;border-bottom:4px solid #fafafb;height: 1px;display: block;margin: 8px auto 40px auto;opacity: 1;}
.jicheng-box{width: 90%;height: 300px;font-family:微软雅黑;margin: 0 auto;}
.jicheng .p2{text-align: center;font-size: 14px;line-height: 28px;font-family: 微软雅黑;color: #fff;margin-bottom: 40px; width: 60%;margin: 0 auto;}

.jicheng-box ul{width: 100%;height: 300px;}
.jicheng-box ul li{float: left;width: 20%;text-align: center;padding: 40px 0;box-sizing: border-box;}
.jicheng-box ul li .top{width:160px;height: 160px;border-radius: 50%;border: 3px solid #fff;margin:0 auto;margin-bottom: 30px;transition: 0.2s;}
.jicheng-box ul li .top img{width: 50%;margin-top: 37px;}
.jicheng-box ul li .top:hover{
     -webkit-transform: rotate3d(0,1,0,180deg);
    -moz-transform: rotate3d(0,1,0,180deg);
    transform: rotate3d(0,1,0,180deg);
   transition: -webkit-transform 0.7s ease-in-out;
    transition: -moz-transform 0.7s ease-in-out;
    transition: transform 0.7s ease-in-out;
}
.jicheng-box ul li .bottom{width: 100%;font-size: 18px;text-align: center;color: #fff;}
.jicheng-box ul li .top:hover{background: #3169D6;border-color:#3169D6;}

/*项目运维服务*/
.yunwei{width: 100%;padding: 60px 0 0 0;background: #f5f5f5;min-width: 1200px;height: 650px;}
.yunwei-small{width: 100%;margin: 0 auto;}
.yunwei h2{width: 100%;text-align: center;font-size: 30px;font-weight: 700;margin-bottom: 5px;letter-spacing: 1px;font-family: 微软雅黑;}
.yunwei .p1{width: 100%;text-align: center;font-size: 24px;color: #737880;opacity: 0.6;}
.yunwei .span{width: 100%}
.yunwei span{width: 80px;border-bottom:4px solid #3D7EFF;height: 1px;display: block;margin: 8px auto 40px auto;opacity: 1;}
.yunwei .p2{text-align: center;font-size: 14px;font-family: 微软雅黑;color: #777;margin-bottom: 30px;line-height: 28px;width: 60%;margin: 0 auto 40px auto;}
.yw-box{width: 100%;position: relative;margin: 0 auto;height: 300px;width: 70%;}
.yw-box .yw-ul{width: 100%;height: 300px;transition:all 2s;-moz-transition:all 2s;-webkit-transition:all 2s;-o-transition:all 2s;padding-top:100px;visibility:hidden;opacity:0;}
.yw-box .yw-ul li{float: left;width: 15%;font-family: 微软雅黑;background: #fff;box-sizing: border-box;padding: 30px 20px;
        box-shadow: 3px 6px 19px 1px rgba(139, 146, 162, 0.55);transition: 0.3s;}
.yw-box .yw-ul li:nth-child(2n){margin-top: 40px;}
.yw-box .yw-ul li:hover{cursor: pointer;}
.yw-box .yw-ul li .li-top{text-align: center;font-size: 18px;font-weight: 700;color: #3A3D42;margin-bottom: 40px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.yw-box .yw-ul .lib1{width: 100px;height: 100px;margin: 0 auto;background: url(../images/service_images/yw-icon1.png) no-repeat 10px -119px;}
.yw-box .yw-ul .lib2{width: 100px;height: 100px;margin: 0 auto;background: url(../images/service_images/yw-icon2.png) no-repeat 10px -119px;}
.yw-box .yw-ul .lib3{width: 100px;height: 100px;margin: 0 auto;background: url(../images/service_images/yw-icon3.png) no-repeat 10px -119px;}
.yw-box .yw-ul .lib4{width: 100px;height: 100px;margin: 0 auto;background: url(../images/service_images/yw-icon4.png) no-repeat 10px -119px;}
.yw-box .yw-ul .lib5{width: 100px;height: 100px;margin: 0 auto;background: url(../images/service_images/yw-icon5.png) no-repeat 10px -119px;}
.yw-box .yw-ul .lib6{width: 100px;height: 100px;margin: 0 auto;background: url(../images/service_images/yw-icon6.png) no-repeat 10px -119px;}


 #cas{
            display: block;
            -webkit-animation: spin 30s linear infinite;
            animation: spin 30s linear infinite;
            margin:auto;
        }