/* * @Author: GoastShadow * @Date: 2017-05-31 11:40:45 * @Last Modified by: anchen * @Last Modified time: 2017-06-15 16:20:46 */ p {padding: 0;} .container>h1 { text-align: center;position: relative;color: #333;display: none;} .container>h1:after { content: '';width: 26px;height:1px;background: #333;position: absolute;left: 50%;margin-left: -13px;bottom: -22px;} .container>p { width: 773px;text-align: center;margin: 0 auto;margin-top: 50px;display: none;position: relative;} .container { width: 1200px;margin: 0 auto;} /*动画*/ /*左边渐渐引入*/ @-webkit-keyframes leftFadeIn { from{opacity:0; -webkit-transform:translateX(-40px);} } @-moz-keyframes leftFadeIn { from{opacity:0; -webkit-transform:translateX(-40px);} } @-ms-keyframes leftFadeIn { from{opacity:0; -webkit-transform:translateX(-40px);} } @-o-keyframes leftFadeIn { from{opacity:0; -webkit-transform:translateX(-40px);} } @keyframes leftFadeIn { from{opacity:0; -webkit-transform:translateX(-40px);} } /*右边渐渐引入*/ @-webkit-keyframes rightFadeIn { from{opacity:0; -webkit-transform:translateX(40px);} } @-moz-keyframes rightFadeIn { from{opacity:0; -webkit-transform:translateX(40px);} } @-ms-keyframes rightFadeIn { from{opacity:0; -webkit-transform:translateX(40px);} } @-o-keyframes rightFadeIn { from{opacity:0; -webkit-transform:translateX(40px);} } @keyframes rightFadeIn { from{opacity:0; -webkit-transform:translateX(40px);} } /*从下滑上*/ @-webkit-keyframes upFadeIn { from{opacity:0; -webkit-transform:translateY(-40px);} } @-moz-keyframes upFadeIn { from{opacity:0; -webkit-transform:translateY(-40px);} } @-ms-keyframes upFadeIn { from{opacity:0; -webkit-transform:translateY(-40px);} } @-o-keyframes upFadeIn { from{opacity:0; -webkit-transform:translateY(-40px);} } @keyframes upFadeIn { from{opacity:0; -webkit-transform:translateY(-40px);} } #banner { width: 100%;height: 405px;} #banner .slideBox { border: none;height: 405px;} .banner2{overflow: hidden;height: 405px!important;} .bd {overflow: hidden;} /*.banner img { width:auto;height: auto;}*/ #banner .slideBox ul li{ height: 405px;} .b_wz { position: absolute;top: 128px;left: 120px;display: block;z-index: 33;} .b_wz.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s 1; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s 1; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s 1;} #boxOl { width: 662px;height: 405px;position: absolute!important;right: 0;bottom: 10px;z-index: 22;} #boxOl ol { width: 662px;height: 435px;list-style: none;} #boxOl li{ width: 700px;height: 435px;position: absolute;right: 0;bottom: 20px;} #boxOl li img { float: right;} .b_wz h1 { font-size: 38px;margin-bottom: 20px;padding: 10px 0;} .b_wz h1.act2 { -webkit-animation: opcity 2s; -o-animation: opcity 2s; animation: opcity 2s;} .b_wz p { font-size: 16px;} .b_wz span { padding: 5px 10px;border-radius: 4px;border: 1px solid #fff;margin-right: 10px;margin-top: 10px;display: inline-block;cursor: pointer;} .b_wz span:hover { background: #8ac33c;border-color: #8ac33c;color: #fff;} /*________________________________________云IT——————页面_________________________________________*/ /*云IT---第一块数据*/ #ourPower { width: 100%;background: #fff;padding-bottom: 40px;overflow: hidden;} #ourPower .left { float: left;margin-left: 40px;margin-top: 45px;position: relative;} #ourPower .left.act2 {-webkit-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; -o-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1;} #ourPower .left>div { position: absolute;color: #333;} #ourPower .left>div p { line-height: 18px;padding: 0;text-align: center;} #ourPower .left .t1 {top: 245px;left: 2px;} #ourPower .left .t2 {top: 98px;left: 80px;} #ourPower .left .t3 {top: 88px;right: 100px;} #ourPower .left .t4 {top: 210px;right: 0px;} #ourPower .left .t3 p { text-align: left;} #ourPower .right { float: left;margin-left: 85px;width: 630px;margin-top: 78px;} #ourPower .right.act2 {-webkit-animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; -o-animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1;} #ourPower .left.act2 {-webkit-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; -o-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1;} #ourPower .right ul { list-style: disc;margin-top: 20px;margin-left: 15px;} #ourPower .right ul li { margin-bottom: 5px;} /*云IT---关注云过程/简单化*/ #concern { width: 100%;background: url(../images/our2.png) no-repeat center center;padding-top: 50px;overflow: hidden;display: none;} #concern.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s 1; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s 1; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s 1;} #concern.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2s both;} #concern.act2 .container>p {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2s both;} #concern .square.act2 ul li:nth-child(1){animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2s both;} #concern .square.act2 ul li:nth-child(2){animation: TopdownIn 2s cubic-bezier(.4,0,.2,1) .4s both;} #concern .square.act2 ul li:nth-child(3){animation: TopdownIn 3s cubic-bezier(.4,0,.2,1) .6s both;} #concern .square ul { display: block;margin-top: 30px;overflow: hidden;} #concern .square ul li { width: 298px;height: 350px;margin: 0 50px;float: left;background: url(../images/concern_0.png) no-repeat;cursor: pointer;transition: all .2s;opacity:.7;} #concern .square ul li a { display: block;} #concern .square ul li:hover { background: url(../images/concern_1.png) no-repeat;box-shadow: 0 3px 5px rgba(0,0,0,0.3);color: #004a9a;} #concern .square ul li h1 { font-size: 24px;text-align: center;margin-top: 80px;} #concern .square ul li p { margin-top: 70px; color: #fff;padding: 28px 35px;text-align: justify;font-size: 14px;} #concern .more_square { margin: 50px 29px;display: none;} #concern .left,#concern .right { float: left;} #concern .sec1 { width: 100%;height: 160px;overflow: hidden;background: #fff;} #concern.act2 .more_square .sec1{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2s both; } #concern.act2 .more_square .sec2{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2.5s both; } #concern.act2 .more_square .sec3{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 3s both; } #concern.act2 .more_square .sec4{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 3.5s both; } #concern .sec1 .left { width: 110px;height: 100%;background: #004a9a;text-align: center;line-height: 160px;color: #fff;} #concern .sec1 .right {border: 1px solid #d8d8d8;width: 1028px;height: 158px;border-left: none;} #concern .sec1 .right ul { padding: 10px ;} #concern .sec1 .right ul li { width: 310px;height: 65px;float: left;background: #f9f9f9 ;border-radius: 5px;margin-right: 39px;margin-bottom: 10px;position: relative;} #concern .sec1 .right ul li span { width: 25px;height: 23px;background: url(../images/sprite_01.png) no-repeat;background-position: -7px -7px;position: absolute;top:20px;left: 10px;} #concern .sec1 .right ul li:nth-child(2) span { background-position: -46px -7px;} #concern .sec1 .right ul li:nth-child(3) span { background-position: -77px -7px;} #concern .sec1 .right ul li:nth-child(4) span { height: 26px;background-position: -111px -7px;} #concern .sec1 .right ul li:nth-child(5) span { background-position: -150px -7px;} #concern .sec1 .right ul li:nth-child(6) span { background-position: -188px -7px;} #concern .sec1 .right ul li:nth-child(3), #concern .sec1 .right ul li:nth-child(6) {margin-right: 0;} #concern .sec1 .right ul li .txt { margin-left: 50px;margin-top: 5px;color: #333;font-size: 26px;} #concern .sec1 .right ul li .txt h3 { font-size: 15px;} #concern .sec1 .right ul li .txt p {line-height: 18px;word-break: break-all;font-size: 12px;color: #666;} #concern .sec2 { width: 100%;height: 110px;margin-top: 10px;background: #fff;} #concern .sec2 .left { width: 110px;height: 112px;background: #004a9a;text-align: center;line-height: 112px;color:#fff;} #concern .sec2 .right {border: 1px solid #d8d8d8;width: 1030px;height: 110px;border-left: none;} #concern .sec2 .right div { margin-top: 10px;margin-left: 9px;float: left;} #concern .sec2 .right .s1 { width: 425px;height: 88px;border: 1px solid #d8d8d8;} #concern .sec2 .right .s2 { width: 255px;height: 88px;border: 1px solid #d8d8d8;} #concern .sec2 .right .s3 { width: 309px;height: 88px;border: 1px solid #d8d8d8;} #concern .sec2 .right h1 { text-align: center;position: relative;line-height:36px;margin-left: 15px;margin-top: 4px;} #concern .sec2 .right .s2 h1 { margin-left: 40px;} #concern .sec2 .right h1 span { width: 30px;height: 20px;background: url(../images/sprite_01.png) no-repeat -7px -45px;display: inline-block;position: absolute;left: 85px;top: 7px;} #concern .sec2 .right .s2 span { width: 30px;height: 30px;background-position: -48px -40px;left: -10px;top: 5px;} #concern .sec2 .right .s3 span { width: 31px;height: 12px;background-position: -88px -49px;left: 50px;top: 14px;} #concern .sec2 ul li { float: left;padding: 5px 2px;border: 1px dashed #d9d9d9;font-size: 12px;margin: 0 2px;margin-top: 10px;background: #f9f9f9;} #concern .sec2 .s1 h1 {padding-left: 60px;} #concern .sec2 .s3 h1 {padding-left: 50px;} #concern .sec2 .s1 h1 span{left: 118px;} #concern .sec2 .s3 h1 span{left: 50px;top: 12px;} #concern .sec3 { margin-top: 10px;overflow: hidden;} #concern .sec3>.left{ width: 108px;height: 113px;padding: 20px 0;background: #004a9a;text-align: center;color: #fff;line-height: 53px;} #concern .sec3>.right { width: 1030px;height: 151px;border: 1px solid #d8d8d8;border-left: none;background: #fff;} #concern .sec3 .right>div {float: left; margin-top: 7px;margin-left: 10px;} #concern .sec3 .right .s1 { width: 380px;height: 138px;border: 1px solid #dadada;} #concern .sec3 .right .s2 { width: 290px;height: 138px;border: 1px solid #dadada;} #concern .sec3 .right .s3 { width: 315px;height: 138px;border: 1px solid #dadada;} #concern .sec3 .right .s1 .top ul, #concern .sec3 .right .s2 .top ul, #concern .sec3 .right .s3 .top ul { display: flex;} #concern .sec3 .right .s1 .top ul li, #concern .sec3 .right .s2 .top ul li, #concern .sec3 .right .s3 .top ul li {flex: 1;width: 69px;height: 72px;border: 1px dashed #dadada;border-radius: 4px;margin: 5px;text-align: center;background: #f9f9f9;} #concern .sec3 .right .s1 .top ul li p, #concern .sec3 .right .s2 .top ul li p, #concern .sec3 .right .s3 .top ul li p { font-size: 12px;line-height: 20px;} #concern .sec3 .right .s1 .top ul li span { width: 33px;height: 25px;background: url(../images/sprite_01.png) no-repeat -7px -80px;display: block;margin: 3px 0;margin-left: 23px;} #concern .sec3 .right .s1 .top ul li:nth-child(2) span{ background-position: -55px -80px;margin-left: 25px;} #concern .sec3 .right .s1 .top ul li:nth-child(3) span{ background-position: -95px -80px;margin-left: 25px;} #concern .sec3 .right .s1 .top ul li:nth-child(4) span{ background-position: -95px -80px;margin-left: 25px;} #concern .sec3 .right .s1 .bottom { margin-top: 2px;} #concern .sec3 .right .s2 .bottom { margin-top: 6px;} #concern .sec3 .right .s1 .bottom .left, #concern .sec3 .right .s2 .bottom .left{ float: left;margin-left: 30px;} #concern .sec3 .right .s1 .bottom .right, #concern .sec3 .right .s2 .bottom .right { float: right;margin-right: 30px;} #concern .sec3 .right .s1 .bottom span { width: 40px;height: 30px;background: url(../images/sprite_01.png) no-repeat -135px -40px;display: block;margin-left: 20px;} #concern .sec3 .right .s2 .top ul li span { width: 33px;height: 25px;background: url(../images/sprite_01.png) no-repeat -7px -80px;display: block;margin: 3px 0;margin-left: 23px;} #concern .sec3 .right .s2 .top ul li:nth-child(2) span{background-position: -55px -80px;margin-left: 25px;} #concern .sec3 .right .s2 .top ul li:nth-child(3) span{height: 12px;background-position: -132px -86px;margin-left: 25px;margin-top: 12px;} #concern .sec3 .right .s2 .bottom span { width: 55px;height: 26px;background: url(../images/sprite_01.png) no-repeat -186px -42px;display: block;margin-left: 10px;} #concern .sec3 .right .s3 .top ul li span { width: 25px;height: 25px;background: url(../images/sprite_01.png) no-repeat -169px -80px;display: block;margin: 3px 0;margin-left: 27px;} #concern .sec3 .right .s3 .top ul li:nth-child(2) span{background-position: -208px -80px;margin-left: 28px;} #concern .sec3 .right .s3 .top ul li:nth-child(3) span{width: 27px;background-position: -242px -80px;} #concern .sec3 .right .s3 .bottom span { width: 55px;height: 20px;background: url(../images/sprite_01.png) no-repeat -253px -48px;display: block;margin-left: 10px;} #concern .sec3 .right .s3 .bottom .left { width: 78px;margin: 0 auto;float: none;margin-top: 7px;} #concern .sec4 { width: 100%;height: 50px;background: #004a9a;margin-top: 10px;} #concern .sec4 ul { display: flex;margin-left: 140px;} #concern .sec4 ul li { flex:1;height: 50px;color: #fff;margin-top: 2px;} #concern .sec4 ul li span { width: 42px;height: 29px;background: url(../images/sprite_01.png) no-repeat -6px -115px;display: inline-block;float: left;margin-top: 10px;margin-right: 10px;} #concern .sec4 ul li:nth-child(2) span { background-position: -66px -114px;margin-left: 120px;} #concern .sec4 ul li:nth-child(1) span { background-position: -6px -115px;margin-left: 75px;} #concern .sec4 ul li:nth-child(3) span { background-position: -126px -114px;margin-left: 60px;} #concern .sec4 ul li p { font-size: 12px;float: left;} /*云IT新架构*/ #newFrame { width: 100%;background: #fff;padding-top: 50px;overflow: hidden;display: none;} #newFrame.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both;} #newFrame.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 4s both;} #newFrame.act2 .container>p {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 4s both;} #newFrame ul { display: flex;margin-bottom: 50px;} #newFrame ul li { flex: 1;padding: 30px 0;cursor: pointer;transition: all .3s;margin: 0 10px;margin-top: 40px;} #newFrame ul li span { width: 115px;height: 115px;background: url(../images/circles.png) no-repeat 0 0;display: block;margin-left: 84px;} #newFrame ul li:nth-child(2) span { background-position: -115px 0;} #newFrame ul li:nth-child(3) span { background-position: -230px 0;} #newFrame ul li:nth-child(4) span { background-position: -345px 0;} #newFrame ul li h3 { font-size: 18px;font-weight: 700;color: #333;text-align: center;margin: 25px 0;} #newFrame ul li p { width: 250px;margin: 0 auto;text-align: justify;} #newFrame ul li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.4);} #newFrame ul .c1:hover span { background-position: 0 -116px;} #newFrame ul .c2:hover span { background-position: -115px -116px;} #newFrame ul .c3:hover span { background-position: -230px -116px;} #newFrame ul .c4:hover span { background-position: -345px -116px;} #newFrame.act2 .c1{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 4.5s both; } #newFrame.act2 .c2{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 4.8s both; } #newFrame.act2 .c3{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 5.1s both; } #newFrame.act2 .c4{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 5.4s both; } /*围绕客户需求*/ #aroundCus { width: 100%;background: #f5f5f5;padding-top: 50px;overflow: hidden;display: none;padding-bottom: 50px;} #aroundCus.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both;} #aroundCus.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2s both;} #aroundCus.act2 .container>p {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2s both;} #aroundCus ul { display: flex;margin-top: 80px;} #aroundCus ul>li { flex: 1;margin-right: 35px;cursor: pointer;background: #ebebeb;transition: all .4s;} #aroundCus ul>li:hover { transform: translateY(-5px);box-shadow: 0 3px 5px rgba(0,0,0,.4);} #aroundCus ul>li:nth-child(3) { margin-right: 0;} #aroundCus ul>li.c1:hover .top span{ background-position: 0 -320px;} #aroundCus ul>li.c2:hover .top span{ background-position: -94px -320px;} #aroundCus ul>li.c3:hover .top span{ background-position: -171px -320px;} #aroundCus ul li .top { width: 100%;height: 126px;background: #fff;position: relative;} #aroundCus ul li .top span { width: 68px;height: 63px;background: url(../images/circles.png) no-repeat 0 -250px;position: absolute;top:30px;left: 90px;} #aroundCus ul li:nth-child(2) .top span {background-position: -94px -250px;} #aroundCus ul li:nth-child(3) .top span {background-position: -171px -250px;} #aroundCus ul li .top b { color: #333;margin-top: 50px;margin-left: 170px;display: inline-block;} #aroundCus.act2 .c1{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2s both; } #aroundCus.act2 .c2{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2.4s both; } #aroundCus.act2 .c3{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 3.2s both; } #aroundCus ol { list-style: disc;padding: 30px 20px;padding-left: 40px;} #aroundCus ol li { font-size: 14px;} /*典型客户案例*/ #cases { padding-top: 50px;overflow: hidden;} #cases .container { position: relative;} #cases .container>h1 { display: block;margin-bottom: 60px;} #cases .hd a { width: 39px;height: 39px;position: absolute;z-index: 1;} #cases { padding-top: 50px;overflow: hidden;padding-bottom: 110px;} #cases .container { position: relative;} #cases .container>h1 { display: block;margin-bottom: 60px;} #cases .hd a { width: 39px;height: 39px;position: absolute;z-index: 1;} #cases .prev {background: url(../images/toleft02.png) no-repeat;left: -58px;top: 50%;margin-top: -100px;} #cases .prevStop {background: url(../images/toleft01.png) no-repeat;left: -58px;top: 50%;margin-top: -100px;} #cases .next {background: url(../images/toright02.png) no-repeat;right: -58px;top: 50%;margin-top: -100px;} #cases .nextStop{ background: url(../images/toright01.png) no-repeat;right: -58px;top: 50%;margin-top: -100px;} /*#cases .bd { height: 181px!important;}*/ #cases .picScroll-left .bd ul>li { width: 378px;margin: 10px 10px;margin-right: 15px;transition: all .2s;text-align: center;border: 1px solid #ccc;padding-top: 20px;} #cases .picScroll-left .bd ul li .box { padding: 20px;border-top: 1px solid #ccc;text-align: left;height: 136px;overflow: hidden;margin-top: 20px;} #cases .picScroll-left .bd ul li h1 { color: #a0a0a0;} #cases .picScroll-left .bd ul li h2 { font-size: 20px;text-align: left;color: #333;margin: 10px 0;} #cases .picScroll-left .bd ul li h1 span { color: #333;} #cases .picScroll-left .bd ul li a { display: block;} /*#cases .picScroll-left .bd ul li img { display: block;margin-top: 20px;}*/ #cases .picScroll-left .bd ul li:hover { box-shadow: 0 1px 5px rgba(0,0,0,0.4);} #cases .picScroll-left .bd ul li:last-child{margin-right: 0;} #cases .picScroll-left .bd ul li p { height: 45px;overflow-y: hidden;} #cases ol { list-style: none;padding: 0 30px ;overflow-y: hidden;margin-top: 30px;} #cases ol li { float: left;margin-right: 20px;border: 1px solid #ccc;width: 121px;} #cases ol li:last-child { margin-right: 0;} #cases ol li img { width: 100%;} #cases .more { text-align: center;margin-top:80px;} #cases .more a{ padding: 10px 50px;border: 1px solid #666;border-radius: 20px;font-size: 18px;} #cases .more a:hover { background: #97c740;color: #fff;border-color: #97c740;} /*政府机构*/ #goverment { width: 100%;margin-top: 60px;padding-bottom: 100px;} #goverment ul,#goverment ol { list-style: none;} #goverment ul>li { border-bottom: 1px solid #c4c4c4;} #goverment ul>li h1{padding: 20px 0;padding-left: 70px;position: relative;} #goverment ul>li h1.cli2 { color: #fff;box-shadow: 0 1px 5px rgba(0,0,0,0.4);} #goverment ul>li h1.cli2 span { background: url(../images/reduce.png) no-repeat;position: absolute;right: 30px;top: 50%;margin-top: -15px;} #goverment ul>li:nth-child(1) h1{background: url(../images/p1.png) no-repeat 20px 50%;} #goverment ul>li:nth-child(1) h1:hover{background: #004a9a url(../images/p1-1.png) no-repeat 20px 50%;color: #fff;} #goverment ul>li:nth-child(1) h1.cli2{background: #004a9a url(../images/p1-1.png) no-repeat 20px 50%;} #goverment ul>li:nth-child(2) h1{background: url(../images/p2.png) no-repeat 20px 50%;} #goverment ul>li:nth-child(2) h1:hover{background: #004a9a url(../images/p2-1.png) no-repeat 20px 50%;color: #fff;} #goverment ul>li:nth-child(2) h1.cli2{background:#004a9a url(../images/p2-1.png) no-repeat 20px 50%;} #goverment ul>li:nth-child(3) h1{background: url(../images/p3.png) no-repeat 20px 50%;} #goverment ul>li:nth-child(3) h1:hover{background: #004a9a url(../images/p3-2.png) no-repeat 20px 50%;color: #fff;} #goverment ul>li:nth-child(3) h1.cli2{background:#004a9a url(../images/p3-1.png) no-repeat 20px 50%;} #goverment ul>li:nth-child(4) h1{background: url(../images/p4.png) no-repeat 20px 50%;} #goverment ul>li:nth-child(4) h1:hover{background: #004a9a url(../images/p4-2.png) no-repeat 20px 50%;color: #fff;} #goverment ul>li:nth-child(4) h1.cli2{background:#004a9a url(../images/p4-1.png) no-repeat 20px 50%;} #goverment ul>li h1 span { width: 31px;height: 31px;background: url(../images/plus.png) no-repeat;position: absolute;right: 30px;top: 50%;margin-top: -15px;} #goverment ul>li ol { background: #f5f5f5;padding: 40px 0;display: none;overflow: hidden;} #goverment ul>li ol li { float: left;text-align: center;margin: 0 12px;} #goverment ul>li ol li:last-child { margin-right: 10px;} #goverment ul>li ol li img { border: 2px solid #d0d0d0;} /*视频*/ #video { width: 100%;background: #fafafa;overflow: hidden;padding-bottom: 50px;} #video h2 { padding-top: 50px; padding-bottom: 40px;font-size: 18px;} #video h2 a { float: right;font-size: 14px;color: #97c740;transition:all .1s;} #video h2 a:hover { text-decoration: underline;} #video h2 a img { margin-top: 5px;margin-left: 5px;} #video ul { overflow: hidden;} #video ul li { float: left;margin-right: 30px;width: 265px;} #video ul li p { margin-top: 10px;} #video .resource { width: 45%;float: left;} #video .resource ol,#video .news ol { list-style-image: url(../images/disc.jpg) ;} #video .resource ol li,#video .news ol li { padding-left: 10px;} #video li a { width: 100%;display: inline-block;font-size: 14px;line-height: 30px;margin: 10px 0;transition: all 0.1s;} #video li a:hover { color: #97c740;} #video .resource ol li a img { float: right;} #video .news ol li a span { float: right;} #video .news { width: 45%;float: right;} /*----------------------------------------桌面云----------------------------------------------*/ /*adesk桌面云*/ #deskbanner { width: 1200px; margin:0 auto;height: 405px;background: url(../images/deskbanner.png) no-repeat!important;} #aDesk { width: 100%;padding-bottom: 60px;color: #333;} #aDesk.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0 both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s both;} #aDesk.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s both;} #aDesk.act2 .container>p {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s both;} #aDesk .box { margin-top: 65px;overflow: hidden;position: relative;} #aDesk .box>div { width: 284px;} #aDesk .box .contact { width: 44%;height: 68px;position: absolute;top: 100px;left: 323px;border: 2px dashed #d1d1d1;z-index: 0;border-left: none;border-right: none;} #aDesk .box .contact:before {content: '';width: 6px;height: 10px;background-image: url(../images/sq.png);position: absolute;right: 0;top: -6px;z-index: 0;} #aDesk .box .contact:after {content: '';width: 6px;height: 10px;background-image: url(../images/sq.png);position: absolute;right: 0;bottom: -6px;z-index: 0;} #aDesk .box>div h2 { height: 36px;background: url(../images/deskPicbj.jpg) no-repeat;text-align: center;line-height: 36px;color: #fff;} #aDesk .box .b1 {margin-left: 40px;float: left;} #aDesk .box .b2,#aDesk .box .b3 {margin-left: 130px;float: left;position: relative;z-index: 22;} #aDesk .box .b2 p {text-align: center;position: absolute;left: 50%;margin-left:-20%;bottom: 10px;} #aDesk .box .b3 ul { position: absolute;top: 36px;left: 20px;} #aDesk .box .b3 ul li { line-height: 70px;} #aDesk .container .text { padding-top: 20px;margin: 0 20px;} #aDesk .container .text p { margin: 10px 0;color: #666;} #aDesk .b2 span { width: 4px;height: 4px;border-radius: 50%;background: #004a9a;border: 2px solid #7ca1c9;position: absolute;-webkit-animation: scaleC 1.4s ease-in-out both infinite; -o-animation: scaleC 1.4s ease-in-out both infinite; animation: scaleC 1.4s ease-in-out both infinite;} #aDesk .b2 .s1 { top: 129px;left: 116px;animation-delay: -0.64s;} #aDesk .b2 .s2 { top: 130px;left: 130px;width: 2px;height: 2px;animation-delay: -0.48s;} #aDesk .b2 .s3 { top: 131px;left: 140px;width: 2px;height: 2px;border: 1px solid #7ca1c9;animation-delay: -0.32s;} #aDesk .b2 .s4 { top: 130px;left: 148px;width: 2px;height: 2px;animation-delay: -0.16s;} #aDesk .b2 .s5 { top: 129px;left: 160px;animation-delay: 4s;} /*桌面云-产品组件*/ #desk-pro { width: 100%;padding-top: 50px;background: #f1f1f1;color: #333;padding-bottom: 25px;} #desk-pro.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0 both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #desk-pro.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s both;} #desk-pro.act2 .container>p {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s both;} #desk-pro .container>ul { margin: 0 20px;margin-top: 65px;border-radius: 4px;display:flex;background: #fff;} #desk-pro .container>ul>li { padding: 28px 0;flex: 1;text-align: center;font-size: 18px;position: relative;padding-left: 80px;background: #fff;transition: all .1s; border-right: 1px solid #333;border: 1px solid #333;border-right-left: 0;} #desk-pro .container>ul>li+li {margin-left: -1px;} #desk-pro .container>ul>li span { width: 25px;height: 25px;background: url(../images/deskIco01.png) no-repeat;position: absolute;left: 152px;top: 28px;} #desk-pro .container>ul>li:first-child, #sightAnalyse .container>ul>li:first-child, #claSpecial .container>ul>li:first-child, #branchP3 .container>ul>li:first-child { border-top-left-radius: 4px;border-bottom-left-radius: 4px;} #desk-pro .container>ul>li:last-child, #sightAnalyse .container>ul>li:last-child, #claSpecial .container>ul>li:last-child, #branchP3 .container>ul>li:last-child{ border-top-right-radius: 4px;border-bottom-right-radius: 4px;} #desk-pro .container>ul>li:nth-child(2) span { width: 36px;height: 21px;background: url(../images/deskIco02.png) no-repeat;left: 118px;} #desk-pro .container>ul>li:nth-child(3) span { width: 29px;height: 26px;background: url(../images/deskIco03.png) no-repeat;left: 108px;} #desk-pro .container>ul>li:hover,#desk-pro ul li.cli3 { background: #8ac33c ;box-shadow:3px 3px 15px rgba(0,0,0,.6);z-index: 32;color: #fff;border: 1px solid #8ac33c;} #desk-pro .container>ul>.tab1:hover span, #desk-pro .container>ul>.tab1.cli3 span { background: url(../images/deskIco01-1.png) no-repeat;} #desk-pro .container>ul>.tab2:hover span, #desk-pro .container>ul>.tab2.cli3 span { background: url(../images/deskIco02-1.png) no-repeat;} #desk-pro .container>ul>.tab3:hover span, #desk-pro .container>ul>.tab3.cli3 span{ background: url(../images/deskIco03-1.png) no-repeat;} #desk-pro .container>div { margin: 0 20px;margin-top: 30px;font-size: 14px;color: #666;display:none;} .show { display: block!important;} #desk-pro .box1 .pic, #desk-pro .box2 .pic, #desk-pro .box3 .pic { width: 100%;height: 307px;background: url(../images/deskPic04.jpg) no-repeat 50% 50%;margin: 20px 0;position: relative;} #desk-pro .box1 .pic span { position: absolute;} #desk-pro .box1 .pic span.s1 { top: 105px;left: 260px;} #desk-pro .box1 .pic span.s2 { top: 105px;left: 371px;} #desk-pro .box1 .pic span.s3 { top: 105px;left: 489px;} #desk-pro .box1 .pic span.s4 { bottom: 50px;left: 335px;} #desk-pro .box1 .pic span.s5 { bottom: 50px;right: 348px;} #desk-pro .box1 .pic span.s6 { font-size: 18px;color: #8ac33c;bottom: 20px;left: 500px;font-weight: 700;} i { font-style: normal;} s { text-decoration: none;} #desk-pro .box2 .pic {background: url(../images/deskPic05.jpg) no-repeat 50% 50%;margin-top: 64px;} #desk-pro .box2 .pic span {width: 270px;display: block;position: absolute;} #desk-pro .box2 .pic span i { font-size: 16px;color: #8ac33c;display: block;} #desk-pro .box2 .pic span s { font-size: 12px;color: #333;} #desk-pro .box2 .pic .s1 { top: 132px;left: 208px;} #desk-pro .box2 .pic .s2 { top: 68px;right:165px;} #desk-pro .box2 .pic .s3 { bottom: 45px;right:165px;} #desk-pro .box3 .pic {background: url(../images/deskPic06.jpg) no-repeat 50% 50%;overflow:hidden;padding: 44px 0;margin-top: 40px;position: relative;} #desk-pro .box3 .pic ul { margin: 0 37px;overflow: hidden;position: absolute;top: 0;padding-top: 20px;} #desk-pro .box3 .pic ul li { float: left;width: 223px;height: 262px;background: url(../images/tabbj.png) no-repeat;position: relative;border-radius: 5px;transition: all .2s;margin-top: 20px;cursor: pointer;} #desk-pro .box3 .pic ul li+li { margin-left: 60px;} #desk-pro .box3 .pic ul li s{ height: 6px;width: 6px;border: 2px solid #333;position: absolute;right:10px;top: 10px;border-radius: 50%;} #desk-pro .box3 .pic ul li h1 { height: 121px;background: url(../images/deskIco04-1.png) no-repeat center center;} #desk-pro .box3 .pic ul li:nth-child(2) h1 { background: url(../images/deskIco05-1.png) no-repeat center center;} #desk-pro .box3 .pic ul li:nth-child(3) h1 { background: url(../images/deskIco06-1.png) no-repeat center center;} #desk-pro .box3 .pic ul li:nth-child(4) h1 { background: url(../images/deskIco07-1.png) no-repeat center center;} #desk-pro .box3 .pic ul li h2 { margin: 15px 0;font-size: 14px;color: #fff;text-align: center;} #desk-pro .box3 .pic ul li p { text-align: center;color: #fff;font-size: 12px;line-height: 24px;} #desk-pro .box3 .pic ul li.cli4 { box-shadow: 1px 4px 10px rgba(0,0,0,.4);transform: translateY(-5px);} #desk-pro .box3 .pic ul li.cli4 s { background: #004a9a;} #desk-pro .box3 .pic ul li:nth-child(1).cli4 h1{background:url(../images/deskIco04-2.png) no-repeat center center;} #desk-pro .box3 .pic ul li:nth-child(2).cli4 h1{background:url(../images/deskIco05-2.png) no-repeat center center;} #desk-pro .box3 .pic ul li:nth-child(3).cli4 h1{background:url(../images/deskIco06-2.png) no-repeat center center;} #desk-pro .box3 .pic ul li:nth-child(4).cli4 h1{background:url(../images/deskIco07-2.png) no-repeat center center;} #desk-pro .box3 .pic h5 { font-size: 16px;text-align: center;margin-top: 30px;font-weight: 600;} #desk-pro .box3 .pic ol { list-style-type: disc;overflow: hidden;padding-left: 20px;} #desk-pro .box3 .pic .text { position: absolute;bottom: 32px;left: 29%;color: #333;} #desk-pro .box3 .pic ol li { float: left;margin-right: 30px;font-size: 12px;} /*核心优势*/ #technology {width: 100%;padding-top: 50px;overflow: hidden;display: block;padding-bottom: 50px;} #technology .container>h1 { display: block;} #technology .container>p { display: block;} #technology.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both;} #technology.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both;} #technology.act2 .container>p {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both;} #technology ul { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;margin-top: 55px;} #technology ul li { flex: 1;padding: 25px;transition: all .2s;} #technology ul li+li { margin-left: 55px;} #technology ul li h1 { height: 133px;background: url(../images/deskIco08-1.png) no-repeat center center;} #technology ul li:nth-child(2) h1 { height: 133px;background: url(../images/deskIco09-1.png) no-repeat center center;} #technology ul li:nth-child(3) h1 { height: 133px;background: url(../images/deskIco10-1.png) no-repeat center center;} #technology ul li:nth-child(4) h1 { height: 133px;background: url(../images/deskIco11-1.png) no-repeat center center;} #technology ul li h2 { text-align: center;font-size: 18px;font-weight: 600;margin: 22px 0;} #technology ul li p { position: relative;margin-bottom: 10px;} #technology ul li p:after{ content: '';width: 4px;height:45px;background: url(../images/circle2.png) no-repeat;position: absolute;top: 10px;left: -10px;} #technology ul li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.4);} #technology ul li.c1:hover h1 { background: url(../images/deskIco08-2.png) no-repeat center center;} #technology ul li.c2:hover h1{ background: url(../images/deskIco09-2.png) no-repeat center center;} #technology ul li.c3:hover h1{ background: url(../images/deskIco10-2.png) no-repeat center center;} #technology ul li.c4:hover h1{ background: url(../images/deskIco11-2.png) no-repeat center center;} #technology.act2 .c1{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2s both; } #technology.act2 .c2{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2.4s both; } #technology.act2 .c3{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2.8s both; } #technology.act2 .c4{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 3.2s both; } /*品牌实力*/ #famouse {width: 100%;padding-top: 50px;overflow: hidden;display: block;background: #f1f1f1;padding-bottom: 50px;display: none;} #famouse .container>h1 { display: block;} #famouse .container>p { display: block;} #famouse.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both;} #famouse.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #famouse.act2 .container>p {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #famouse ul { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;margin-top: 55px;} #famouse ul li { flex: 1;padding: 25px;transition: all .2s;} #famouse ul li+li { margin-left: 55px;} #famouse ul li h1 { height: 133px;background: url(../images/deskIco12-1.png) no-repeat center center;margin-bottom: 20px;} #famouse ul li:nth-child(2) h1 { height: 133px;background: url(../images/deskIco13-1.png) no-repeat center center;} #famouse ul li:nth-child(3) h1 { height: 133px;background: url(../images/deskIco14-1.png) no-repeat center center;} #famouse ul li:nth-child(4) h1 { height: 133px;background: url(../images/deskIco15-1.png) no-repeat center center;} #famouse ul li p { position: relative;margin: 10px 0;color: #333;} #famouse ul li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.4);} #famouse ul li.c1:hover h1 { background: url(../images/deskIco12-2.png) no-repeat center center;} #famouse ul li.c2:hover h1{ background: url(../images/deskIco13-2.png) no-repeat center center;} #famouse ul li.c3:hover h1{ background: url(../images/deskIco14-2.png) no-repeat center center;} #famouse ul li.c4:hover h1{ background: url(../images/deskIco15-2.png) no-repeat center center;} #famouse.act2 .c1{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2s both; } #famouse.act2 .c2{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2.4s both; } #famouse.act2 .c3{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2.8s both; } #famouse.act2 .c4{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 3.2s both; } @-webkit-keyframes TopdownIn{ from{opacity:0; -webkit-transform:translateY(40px);} } @-moz-keyframes TopdownIn { from{opacity:0; -webkit-transform:translateY(40px);} } @-ms-keyframes TopdownIn { from{opacity:0; -webkit-transform:translateY(40px);} } @-o-keyframes TopdownIn { from{opacity:0; -webkit-transform:translateY(40px);} } @keyframes TopdownIn { from{opacity:0; -webkit-transform:translateY(40px);} } /*----------------------------------企业云--------------------------------------------------*/ #compoBanner { width: 100%;height: 405px;background: url(../images/compo_bj.jpg) no-repeat!important;} #compoBanner #boxOl { width: 662px;height: 405px;position: absolute!important;right: 40px;bottom: 0;z-index: 22;} #compoBanner #boxOl ol { width: 685px;height: 435px;list-style: none;} #compoBanner #boxOl li{ width: 700px;height: 435px;position: absolute;right: 0;bottom: 0;} #compoBanner #boxOl li img { float: right;} #acloud, #keyCloud { width: 100%;background: #fff;padding-bottom: 40px;overflow: hidden;} #acloud .left, #keyCloud .left { float: left;margin-left: 80px;margin-top: 45px;position: relative;} #keyCloud .left { margin-left: 10px;} #acloud .left.act2, #keyCloud .left.act2, #branchP1 .lefts.act2 {-webkit-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; -o-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1;} #acloud .left>div, #keyCloud .left>div { position: absolute;color: #333;} #keyCloud .left>div { color: #fff;} #acloud .left>div p, #keyCloud .left>div p { line-height: 18px;padding: 0;text-align: center;} #acloud .left .t1 {top: 90px;left: -80px;} #acloud .left .t2 {top: 20px;right: 45px;} #acloud .left .t3 {bottom: 165px;right:-66px;} #acloud .left .t4 {bottom: 20px;right: 0px;} #acloud .left .t5 { bottom: 40px;left: -30px;} #keyCloud .left .t1 {top: 12px;left: 400px;} #keyCloud .left .t2 {top: 265px;left: 222px;} #keyCloud .left .t3 {top: 265px;left:374px;} #keyCloud .left .t4 {top: 265px;left: 527px;} #keyCloud .left .t5 {top: 189px;left: 88px;color: #666;} #keyCloud .left p { margin-top: -20px;text-align: center;} #keyCloud .left p span { margin-right: 40px;} #acloud .right, #keyCloud .right { float: right;margin-left: 85px;width: 630px;margin-top: 128px;} #keyCloud .right { margin-top: 148px;} #keyCloud .right {width: 440px;margin-left: 0;} #acloud .right h3, #keyCloud .right h3, #centerTask .rights h3 { font-size: 30px;color: #000;position: relative;margin-bottom: 50px;} #acloud .right h3:after, #keyCloud .right h3:after, #centerTask .rights h3:after { content: '';width: 20px;height: 1px;background: #000;position: absolute;left: 0;bottom: -20px;} #acloud .right p, #keyCloud .right p {margin-bottom: 15px;} #keyCloud .right p { color: #999;} #acloud .right.act2, #keyCloud .right.act2, #branchP1 .rights.act2 {-webkit-animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; -o-animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1;} { float: right;margin-left: 85px;width: 630px;margin-top: 128px;} #basicCloud { width: 100%;background: #f7f7f7;padding-top: 50px;overflow: hidden;padding-bottom: 80px;} #basicCloud .container>h1 { margin-bottom: 70px;} #basicCloud.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both;} #basicCloud .container>h1.act2 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1);} #basicCloud .box { margin: 0 50px;} #basicCloud .box .left, #basicCloud .box .right{ width: 459px;height: 504px;background: url(../images/compo_pic2.png) no-repeat;float: left;position: relative;margin-top: 110px;display: none;} #basicCloud .box .mid { width: 116px;height: 64px;background: url(../images/compo_to.png) no-repeat;margin: 210px 30px;float: left;text-align: center;line-height: 64px;color: #fff;font-size: 18px;display: none;} #basicCloud .box .right { background: url(../images/compo_pic3.png) no-repeat;} #basicCloud .box .left h1, #basicCloud .box .right h1 { height: 43px;text-align: center;color: #fff;font-size: 16px;line-height: 43px;} #basicCloud .box .left h5, #basicCloud .box .right h5 { position: absolute;top: -100px;} #basicCloud .box .left span { font-size: 14px;color: #333;position: absolute;} #basicCloud .box .left .s1 { top: 93px;left: 30px;} #basicCloud .box .left .s2 { top: 165px;left: 30px;} #basicCloud .box .left .s3 { top: 305px;left: 30px;} #basicCloud .box .left .s4 { top: 356px;left: 30px;} #basicCloud .box .left .s5 { top: 450px;left: 30px;} #basicCloud .box .left .s6 { top: 254px;left: 201px;} #basicCloud .box .right .s7 { top: 95px;right: 30px;position: absolute;} #basicCloud .box .left p, #basicCloud .box .right { position: relative;} #basicCloud .box .right p{ margin-top: 473px;text-align: center;font-size: 18px;color: #333;} #basicCloud .box .right p { color: #004a9a;} #basicCloud .box .right h4 { position: absolute;top: 220px;text-align: center;left: 80px;font-size: 12px;} #basicCloud .box .right h4 span { padding: 11px 8px;border: 1px solid #999;} #basicCloud .box .right h4 span+span { margin-left: -1px;} #basicCloud .box .right h3 { position: absolute;bottom: 105px;left: 80px;} #basicCloud .box .left.act2 {-webkit-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s both; -o-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s both; animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s both;} #basicCloud .box .mid.act2 {-webkit-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) .5s both; -o-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) .5s both; animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #basicCloud .box .right.act2 {-webkit-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 1s both; -o-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 1s both; animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 1s both;} /*云功能*/ #compoCloud { width: 100%;padding-top: 50px;background: #f1f1f1;color: #333;padding-bottom: 25px;} #compoCloud.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0 both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #compoCloud.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s both;} #compoCloud.act2 .container>p {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s both;} #compoCloud .container>ul, #sightAnalyse .container>ul, #claSpecial .container>ul, #branchP3 .container>ul { margin: 0 20px;margin-top: 65px;border-radius: 4px;display:flex;background: #fff;} #compoCloud .container>ul>li, #sightAnalyse .container>ul>li, #claSpecial .container>ul>li, #branchP3 .container>ul>li { padding: 28px 0;flex: 1;text-align: center;font-size: 18px;position: relative;padding-left: 80px;background: #fff;transition: all .1s; border-right: 1px solid #333;border: 1px solid #333;border-right-left: 0;} #compoCloud .container>ul>li+li, #sightAnalyse .container>ul>li+li , #claSpecial .container>ul>li+li, #branchP3 .container>ul>li+li{margin-left: -1px;} #compoCloud .container>ul>li span { width: 25px;height: 25px;background: url(../images/deskIco01.png) no-repeat;position: absolute;left: 152px;top: 28px;} #compoCloud .container>ul>li:first-child{ border-top-left-radius: 4px;border-bottom-left-radius: 4px;} #compoCloud .container>ul>li:last-child{ border-top-right-radius: 4px;border-bottom-right-radius: 4px;} #compoCloud .container>ul>li:nth-child(2) span { width: 36px;height: 21px;background: url(../images/deskIco02.png) no-repeat;left: 118px;} #compoCloud .container>ul>li:nth-child(3) span { width: 29px;height: 26px;background: url(../images/deskIco03.png) no-repeat;left: 108px;} #compoCloud .container>ul>li:hover,#compoCloud ul li.cli3, #sightAnalyse .container>ul>li:hover,#sightAnalyse ul li.cli3, #claSpecial ul li.cli3,#claSpecial ul li:hover , #branchP3 ul li.cli3,#branchP3 ul li:hover{ background: #8ac33c ;box-shadow:3px 3px 15px rgba(0,0,0,.6);z-index: 32;color: #fff;border: 1px solid #8ac33c;} #compoCloud .container>ul>.tab1:hover span, #compoCloud .container>ul>.tab1.cli3 span { background: url(../images/deskIco01-1.png) no-repeat;} #compoCloud .container>ul>.tab2:hover span, #compoCloud .container>ul>.tab2.cli3 span { background: url(../images/deskIco02-1.png) no-repeat;} #compoCloud .container>ul>.tab3:hover span, #compoCloud .container>ul>.tab3.cli3 span{ background: url(../images/deskIco03-1.png) no-repeat;} #compoCloud .container>div { margin-top: 30px;font-size: 14px;color: #666;display:none;} .show { display: block!important;} #compoCloud .box1 { box-shadow: 0 0 10px rgba(0,0,0,0.4);} #compoCloud .box1 .pic, #compoCloud .box2 .pic, #compoCloud .box3 .pic { margin: 85px 0;width: 100%;background: #fff;height: 755px;padding:40px 0;padding-bottom: 0;} #compoCloud .box1 .pic ul { margin: 0 35px;border: 1px solid #aeaeae;display: block;} #compoCloud .box1 .pic ul>li {overflow: hidden;} #compoCloud .box1 .pic ul>li+li { border-top: 1px solid #aeaeae;} #compoCloud .box1 .pic .left p { font-size: 18px;width: 20px;margin: 0 auto;margin-top: 30px;} #compoCloud .box1 .pic ul>li:nth-child(2) {height: 260px;} #compoCloud .box1 .pic ul>li:nth-child(1) {height: 159px;} #compoCloud .box1 .pic ul>li:nth-child(1) p{margin-top: 24px;} #compoCloud .box1 .pic ul>li:nth-child(2) p{margin-top: 65px;} #compoCloud .box1 .pic ul>li:nth-child(2) span { display: block;text-align: center;margin-top: 10px;} #compoCloud .box1 .pic ul>li:nth-child(3) p{margin-top: -5px;} #compoCloud .box1 .pic ul>li:nth-child(3) p{height: 190px;} #compoCloud .box1 .pic .left { width: 70px;height: 100%;background: #f2f2f2;position: relative;} #compoCloud .box1 .pic ul>li:nth-child(3) s {transform: rotate(90deg);display: block;margin-top: 53px;height: 18px;font-size: 18px;} #compoCloud .box1 .rights {float: left;width: 1018px;} #compoCloud .box1 .rights ol {margin: 30px 60px;list-style: none;margin-left: 70px;} #compoCloud .box1 .rights ol li { width: 145px;height: 37px;border: 1px solid #aeaeae;float: left;margin-right: 30px;margin-bottom: 15px;text-align: center;line-height: 37px;font-size: 14px;color: #333;background: #f7f7f7;} #compoCloud .box1 ul>li:nth-child(3) .rights {height: 257px; background: url(../images/compo_pic5.png) no-repeat center center;} #compoCloud .box2>p, #compoCloud .box3>p{ text-align: center;} #compoCloud .box2 .pic, #compoCloud .box3 .pic {overflow:hidden;padding: 44px 0;margin-top: 40px;position: relative;background: none;} #compoCloud .box2 .pic ul, #compoCloud .box3 .pic ul { overflow: hidden;position: absolute;top: 0;padding-top: 20px;} #compoCloud .box3 {margin: 0!important;} #compoCloud .box2 .pic ul li, #compoCloud .box3 .pic ul li { float: left;width: 354px;height: 318px;background: #fff;position: relative;border-radius: 5px;transition: all .2s;margin: 20px 36px 40px 8px;cursor: pointer;} #compoCloud .box3 .pic ul li {width: 278px;height: 359px;margin-right: 13px;} #compoCloud .box2 .pic ul li:nth-child(3), #compoCloud .box2 .pic ul li:nth-child(6), #compoCloud .box2 .pic ul li:nth-child(9), #compoCloud .box3 .pic ul li:nth-child(4){margin-right: 0;} /*#compoCloud .box2 .pic ul li s{ height: 6px;width: 6px;border: 2px solid #333;position: absolute;right:10px;top: 10px;border-radius: 50%;}*/ #compoCloud .box3 p { margin: 30px;} #compoCloud .box2 .pic ul li:hover, #compoCloud .box3 .pic ul li:hover { box-shadow: 0 0 15px rgba(0,0,0,0.5);} #compoCloud .box2 .pic ul li h1, #compoCloud .box3 .pic ul li h1 { text-align: center;} #compoCloud .box2 .pic ul li h1 s{width: 94px; height: 94px;background: url(../images/conpoIco4.png) no-repeat 0 0;display: inline-block;margin-top: 27px;} #compoCloud .box2 .pic ul li:nth-child(2) s { background-position: -95px 0;} #compoCloud .box2 .pic ul li:nth-child(3) s { background: url(../images/conpoIco4.png) no-repeat -191px 0;} #compoCloud .box2 .pic ul li:nth-child(4) s { background: url(../images/conpoIco4.png) no-repeat -286px 0;} #compoCloud .box2 .pic ul li:nth-child(5) s { background: url(../images/conpoIco4.png) no-repeat -380px 0;} #compoCloud .box2 .pic ul li:nth-child(6) s { background: url(../images/conpoIco4.png) no-repeat -476px 0;} #compoCloud .box2 .pic ul li.c1:hover s {background-position: 0px -95px;} #compoCloud .box2 .pic ul li.c2:hover s {background-position: -96px -95px;} #compoCloud .box2 .pic ul li.c3:hover s {background-position: -191px -95px;} #compoCloud .box2 .pic ul li.c4:hover s {background-position: -286px -95px;} #compoCloud .box2 .pic ul li.c5:hover s {background-position: -380px -95px;} #compoCloud .box2 .pic ul li.c6:hover s {background-position: -476px -95px;} #compoCloud .box2 .pic ul li h2, #compoCloud .box3 .pic ul li h2 { margin: 20px 0;font-size: 14px;color: #333;text-align: center;font-size: 18px;} #compoCloud .box2 .pic ul li p, #compoCloud .box3 .pic ul li p { text-align: left;color: #666;font-size: 14px;line-height: 22px;margin: 0 20px;} #compoCloud .box2 .pic ul li.cli4, #compoCloud .box3 .pic ul li.cli4 { box-shadow: 1px 4px 10px rgba(0,0,0,.4);transform: translateY(-5px);} #compoCloud .box2 .pic h5 { font-size: 16px;text-align: center;margin-top: 30px;font-weight: 600;} #compoCloud .box2 .pic ol { list-style-type: disc;overflow: hidden;padding-left: 20px;} #compoCloud .box2 .pic .text { position: absolute;bottom: 32px;left: 29%;color: #333;} #compoCloud .box2 .pic ol li { float: left;margin-right: 30px;font-size: 12px;} #compoCloud .box3 .pic ul li s {width: 97px;height: 97px;background: url(../images/conpoIco5.png) no-repeat 0 0;display: inline-block;margin-top: 27px;} #compoCloud .box3 .pic ul li:nth-child(2) s{background-position: -98px 0;} #compoCloud .box3 .pic ul li:nth-child(3) s{background-position: -196px 0;} #compoCloud .box3 .pic ul li:nth-child(4) s{background-position: -294px 0;} #compoCloud .box3 .pic ul li:nth-child(5) s{background-position: -392px 0;} #compoCloud .box3 .pic ul li:nth-child(6) s{background-position: -490px 0;} #compoCloud .box3 .pic ul li:nth-child(7) s{background-position: -588px 0;} #compoCloud .box3 .pic ul li.c1:hover s {background-position: 0px -98px;} #compoCloud .box3 .pic ul li.c2:hover s {background-position: -98px -98px;} #compoCloud .box3 .pic ul li.c3:hover s {background-position: -196px -98px;} #compoCloud .box3 .pic ul li.c4:hover s {background-position: -294px -98px;} #compoCloud .box3 .pic ul li.c5:hover s {background-position: -392px -98px;} #compoCloud .box3 .pic ul li.c6:hover s {background-position: -490px -98px;} #compoCloud .box3 .pic ul li.c7:hover s {background-position: -588px -98px;} /*核心优势*/ #compoTech {width: 100%;padding-top: 50px;overflow: hidden;padding-bottom: 50px;} #compoTech.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2 ; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2 ; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2 ;} #compoTech.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1);} #compoTech ul { margin-top: 55px;} #compoTech ul li { width: 22%;height: 323px;float: left;transition: all .2s;margin-right: 45px;padding: 20px 0;} #compoTech ul li:nth-child(4), #compoTech ul li:nth-child(8){margin-right: 0;} #compoTech ul li h1 { text-align: center;} #compoTech ul li h1 s {width: 108px; height: 122px;background: url(../images/conpoIco6.png) no-repeat 0 0;display: inline-block;margin-top: 10px;} #compoTech ul li:nth-child(2) h1 s{ background-position: -109px 0;} #compoTech ul li:nth-child(3) h1 s{ background-position: -218px 0;} #compoTech ul li:nth-child(4) h1 s{ background-position: -328px 0;} #compoTech ul li:nth-child(5) h1 s{ background-position: -437px 0;} #compoTech ul li:nth-child(6) h1 s{ background-position: -546px 0;} #compoTech ul li:nth-child(7) h1 s{ background-position: -655px 0;} #compoTech ul li:nth-child(8) h1 s{ background-position: -764px 0;} #compoTech ul li.c1:hover h1 s {background-position: 0 -123px;} #compoTech ul li.c2:hover h1 s {background-position: -109px -123px;} #compoTech ul li.c3:hover h1 s {background-position: -218px -123px;} #compoTech ul li.c4:hover h1 s {background-position: -328px -123px;} #compoTech ul li.c5:hover h1 s {background-position: -437px -123px;} #compoTech ul li.c6:hover h1 s {background-position: -546px -123px;} #compoTech ul li.c7:hover h1 s {background-position: -655px -123px;} #compoTech ul li.c8:hover h1 s {background-position: -764px -123px;} #compoTech ul li h2 { text-align: center;font-size: 18px;font-weight: 600;margin: 22px 0;color: #333;} #compoTech ul li p { position: relative;margin: 0 20px;} #compoTech ul li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.4);} #compoTech.act2 .c1{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2s both; } #compoTech.act2 .c2{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .4s both; } #compoTech.act2 .c3{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .6s both; } #compoTech.act2 .c4{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .8s both; } #compoTech.act2 .c5{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; } #compoTech.act2 .c6{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1.2s both; } #compoTech.act2 .c7{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1.4s both; } #compoTech.act2 .c8{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1.6s both; } /*典型应用场景*/ #compoSight {width: 100%;padding-top: 50px;overflow: hidden;padding-bottom: 50px;background: #f2f2f2;} #compoSight .container>h1 { margin-bottom: 50px;} #compoSight.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2 ; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2 ;} #compoSight.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .4 ;} #compoSight ul { margin-top: 55px;} #compoSight ul li { width: 30%;height: 425px;float: left;transition: all .2s;margin-right: 45px;padding: 20px 0;} #compoSight ul li:nth-child(3), #compoSight ul li:nth-child(6){margin-right: 0;} #compoSight ul li h1 { text-align: center;} #compoSight ul li h1 s {width: 166px; height: 181px;background: url(../images/conpoIcon11.png) no-repeat;display: inline-block;margin-top: 10px;} #compoSight ul li:nth-child(2) h1 s{ background: url(../images/conpoIcon12.png) no-repeat;} #compoSight ul li:nth-child(3) h1 s{ background: url(../images/conpoIcon13.png) no-repeat;} #compoSight ul li:nth-child(4) h1 s{ background: url(../images/conpoIcon14.png) no-repeat;} #compoSight ul li:nth-child(5) h1 s{ background: url(../images/conpoIco9.png) no-repeat;} #compoSight ul li:nth-child(6) h1 s{ background: url(../images/conpoIco10.png) no-repeat;} #compoSight ul li h2 { text-align: center;font-size: 18px;font-weight: 600;margin: 22px 0;color: #333;} #compoSight ul li p { position: relative;margin: 0 20px;} #compoSight ul li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.4);} #compoSight.act2 .c1{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2s both; } #compoSight.act2 .c2{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .4s both; } #compoSight.act2 .c3{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .6s both; } #compoSight.act2 .c4{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .8s both; } .index-case-wrap{width: 100%;background: #fff;padding-bottom: 100px;padding-top: 50px;} .index-case-wrap.act2 { animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2s both;} .index-case-wrap .container>h1 { display: block;} .index-case-wrap .container>p { display: block;} /*.index-case-wrap.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .4 ; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .4 ;}*/ .index-case-wrap .container>h1 { margin-bottom: 50px;} .index-case-wrap .index-case .title{padding-top: 60px;padding-bottom: 40px;text-align: center;font-size: 30px;color: #333;} .index-case-wrap .index-case .information, .index-case-wrap .index-case .information2{height: 344px;width: 290px;background: #f2f2f2;float: left;margin:0 5px;transition: box-shadow 500ms linear,-webkit-transform 500ms linear,-moz-transform 500ms linear,-o-transform 500ms linear,transform 500ms linear,background-color 500ms linear;} .index-case-wrap .index-case .information .mt8, .index-case-wrap .index-case .information2 .mt8 { margin-top: 10px;margin-left: 10px;} .index-case-wrap .index-case .information:hover, .index-case-wrap .index-case .information2:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1);transform: translate3d(0,-2px,0);background-color: #fff;cursor: pointer;} .index-case-wrap .index-case .information .name, .index-case-wrap .index-case .information2 .name{font-size: 16px;color: #666;padding-left: 15px;width: 250px;padding-top: 15px;height: 45px;} .index-case-wrap .index-case .information .name a:hover, .index-case-wrap .index-case .information2 .name a:hover{color: #1a50a3;} .index-case-wrap .ta-c { text-align: center;} .index-case-wrap .index-case .information .synopsis, .index-case-wrap .index-case .information2 .synopsis{font-size: 14px;padding-left: 15px;color: #999;margin-top: 15px;width: 255px;height: 63px;} .index-case-wrap .index-case .zcbutton a{width: 200px;height: 48px;line-height: 48px;text-align: center;font-size: 18px;color: #666;background: #fff;display: inline-block;margin-top: 40px;border-radius: 20px;border: 1px solid #666;} .index-case-wrap .index-case .zcbutton a:hover{ background: #666;color: #fff;} /*.index-case-wrap.act2 .information:nth-child(1){animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2s both; } .index-case-wrap.act2 .information:nth-child(2){animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .4s both; } .index-case-wrap.act2 .information:nth-child(3){animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .6s both; } .index-case-wrap.act2 .information:nth-child(4){animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .8s both; } */ /*-------------------------------------------BA系统-----------------------------------------*/ #whyAnalyse { width: 100%;background: url(../images/ba_whyneed_bj.jpg) no-repeat center center;padding-top: 22px;} #whyAnalyse.act2{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2s both; } #whyAnalyse.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s both;} #whyAnalyse .box { width: 100%;height: 565px;background: url(../images/why_bj02.png) no-repeat center top;margin-top: 60px;position: relative;} #whyAnalyse.act2 .box { animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both;} #whyAnalyse .box span { position: absolute;} #whyAnalyse .box .s1 { top: 110px;left: 118px;font-size: 20px;} #whyAnalyse.act2 .box .s1 { animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 1s both;} #whyAnalyse .box .s2 { top: 60px;right:124px;font-size: 20px;} #whyAnalyse.act2 .box .s2 { animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 1 both;} #whyAnalyse .box .s3 { top: 220px;left:140px;} #whyAnalyse.act2 .box .s3 { animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 1.5s both;} #whyAnalyse .box .s4 { top: 190px;right:115px;} #whyAnalyse.act2 .box .s4 { animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 1.5 both;} #whyAnalyse .box .s5 { bottom: 210px;left:150px;} #whyAnalyse.act2 .box .s5 { animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 2s both;} #whyAnalyse .box .s6 { bottom: 250px;right:170px;} #whyAnalyse.act2 .box .s6 { animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 2 both;} #whyAnalyse .box .s7 { bottom: 250px;left:496px;font-size: 18px;font-weight: 700;text-align: center;color: #333;} #whyAnalyse .box p { position: absolute;bottom: 60px;width: 600px;text-align: center;left: 300px;color: #333;font-size: 14px;} /*产品概述*/ #pro_resume { width: 100%;padding-top: 30px;padding-bottom: 40px;background: url(../images/ba_pro_bj.png) no-repeat center bottom;} #pro_resume.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1); -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1); animation: TopdownIn 1s cubic-bezier(.4,0,.2,1);} #pro_resume .container>p { width: 86%;margin: 0 13%;margin-top: 50px;} #pro_resume .box {width: 100%;height: 900px;background: url(../images/ba_pic03.png) no-repeat center center;margin-top: 20px;font-size: 14px;position: relative;color: #fff;} #pro_resume .box h2 { text-align: center;color: #fff;padding-top: 15px;} #pro_resume .box span { position: absolute;font-size: 12px;} #pro_resume .box .s1 {top: 197px;left: 57px;} #pro_resume .box .s2 {top: 15px;left: 98px;color:#fff;font-size: 14px;} #pro_resume .box .s3 {top: 176px;left: 568px;color:#666;font-size: 16px;font-weight: 600;} #pro_resume .box .s4 {top: 225px;left: 522px;color:#666;} #pro_resume .box .s5 {top: 197px;right: 63px;color:#fff;} #pro_resume .box .s6 {top: 176px;left: 384px;color:#666;font-size: 16px;font-weight: 600;} #pro_resume .box .s7 {top: 225px;left: 328px;color:#666;} #pro_resume .box .s8 {top: 176px;right: 380px;color:#666;font-size: 16px;font-weight: 600;} #pro_resume .box .s9 {top: 225px;right: 345px;color:#666;} #pro_resume .box .s10 {top: 15px;right: 98px;color:#fff;font-size: 14px;} #pro_resume .box s { width: 11px;height: 11px;background: url(../images/circle3.png) no-repeat;position: absolute;-webkit-animation: scaleC 1.4s ease-in-out both infinite; -o-animation: scaleC 1.4s ease-in-out both infinite; animation: scaleC 1.4s ease-in-out both infinite;} #pro_resume .box .ss1 { top: 208px;left: 410px;} #pro_resume .box .ss2 { top: 208px;left: 595px;} #pro_resume .box .ss3 { top: 208px;right: 405px;} #pro_resume .box .ss4 { width: 15px;height: 15px;background: url(../images/ba_circle4.png) no-repeat;top: 200px;right: 162px;cursor: pointer;} /*#pro_resume .box .ss5 {width: 154px;height: 44px;position: absolute;right: 99px;top: 156px;cursor: pointer;}*/ /*#pro_resume .box img { position: absolute;top: -68px;right: 230px;z-index: 88;display: none;}*/ /*触发spp弹窗*/ .spp{ width: 100%;height: 100%;background: rgba(0,0,0,0.4);position: fixed;top: 0;left: 0;z-index: 55;display: none;} @-webkit-keyframes scaleC { 0%, 80%, 100% { -webkit-transform: scale(0.0); } 40% { -webkit-transform: scale(1.0) ;} } @-moz-keyframes scaleC { 0%, 80%, 100% { -webkit-transform: scale(0.0); } 40% { -webkit-transform: scale(1.0) ;} } @-ms-keyframes scaleC { 0%, 80%, 100% { -webkit-transform: scale(0.0); } 40% { -webkit-transform: scale(1.0) ;} } @-o-keyframes scaleC { 0%, 80%, 100% { -webkit-transform: scale(0.0); } 40% { -webkit-transform: scale(1.0) ;} } @keyframes scaleC { 0%, 80%, 100% { -webkit-transform: scale(0.0); } 40% { -webkit-transform: scale(1.0) ;} } /*场景式应用分析*/ #sightAnalyse,#branchP3 { margin-top: 60px;background: #f7f7f7;padding-top: 30px;position: relative;padding-bottom: 50px;} #sightAnalyse.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #sightAnalyse .zhe, #branchP3 .zhe { width: 100%;height: 234px;background: #fff;position: absolute;top: 0;left: 0;z-index: 0;} #sightAnalyse ul li { cursor: pointer;} #sightAnalyse .container>ul>li>span { width: 25px;height: 25px;position: absolute;left: 225px;top: 28px;background: url(../images/ba_spri01.png) no-repeat 0 0;} #sightAnalyse ul li:nth-child(2) span{width: 40px;height: 18px;background-position: -26px 0;left: 210px;top: 30px;} #sightAnalyse .container>ul>.tab1.cli3 span { background: url(../images/ba_spri01.png) no-repeat 0 -26px;} #sightAnalyse .container>ul>.tab1:hover span { background: url(../images/ba_spri01.png) no-repeat 0 -26px;} #sightAnalyse .container>ul>.tab2.cli3 span { background: url(../images/ba_spri01.png) no-repeat -26px -26px;} #sightAnalyse .container>ul>.tab2:hover span { background: url(../images/ba_spri01.png) no-repeat -26px -26px;} #sightAnalyse .container>div , #claSpecial .container>div{ margin-top: 50px;height: 690px;width: 100%;position: relative;display: none;} #sightAnalyse .container>div ol { list-style: none;} #sightAnalyse .box1 ul { width: 100%;overflow: hidden;padding: 0 30px;position: relative;} #sightAnalyse .box1 ul li{ padding: 0 30px;padding-bottom:30px;float: left;font-size: 14px;position: relative;padding-top: 40px;} #sightAnalyse .box1 ul li:nth-child(1) { margin-left: 65px;} #sightAnalyse .box1 ul li>span { width: 35px;height: 35px;background: url(../images/ba_tab_spri.png) no-repeat 0 0;position: absolute;top: 0;left: 50%;margin-left: -17px;} #sightAnalyse .box1 ul li.cli5>span, #sightAnalyse .box1 ul li:hover>span { background-position: 0 -36px;} #sightAnalyse .box1 ul .s2>span{ background-position: -36px -0px;} #sightAnalyse .box1 ul .s2.cli5>span, #sightAnalyse .box1 ul .s2:hover>span { background-position: -36px -36px;} #sightAnalyse .box1 ul .s3>span{ background-position: -72px 0px;} #sightAnalyse .box1 ul .s3.cli5>span, #sightAnalyse .box1 ul .s3:hover>span { background-position: -72px -36px;} #sightAnalyse .box1 ul .s4>span{ background-position: -108px 0px;} #sightAnalyse .box1 ul .s4.cli5>span , #sightAnalyse .box1 ul .s4:hover>span { background-position: -108px -36px;} #sightAnalyse .box1 ul .s5>span{background-position: -144px 0px;} #sightAnalyse .box1 ul .s5.cli5>span, #sightAnalyse .box1 ul .s5:hover>span { background-position: -144px -36px;} #sightAnalyse .box1 ul .s6>span{ background-position: -180px 0;} #sightAnalyse .box1 ul .s6.cli5>span, #sightAnalyse .box1 ul .s6:hover>span { background-position: -180px -36px;} #sightAnalyse .box1 ul .s7>span{background-position: -216px 0;margin-left: -25px;} #sightAnalyse .box1 ul .s7.cli5>span, #sightAnalyse .box1 ul .s7:hover>span { background-position: -216px -36px;} /*#sightAnalyse .box1 ul li:hover.s1:after , #sightAnalyse .box2 ul li:hover.s1:after , #sightAnalyse .box1 ul li:hover.s2:after , #sightAnalyse .box2 ul li:hover.s2:after , #sightAnalyse .box1 ul li:hover.s3:after , #sightAnalyse .box2 ul li:hover.s3:after , #sightAnalyse .box1 ul li:hover.s4:after , #sightAnalyse .box1 ul li:hover.s5:after , #sightAnalyse .box1 ul li:hover.s6:after , #sightAnalyse .box1 ul li:hover.s7:after , */ #sightAnalyse .box1 ul li.cli5:after, #sightAnalyse .box2 ul li.cli5:after{ content: '';width: 22px;height: 19px;background: url(../images/ba_spri01.png) no-repeat -73px -13px;position: absolute;left: 50%;margin-left: -11px;bottom: 2px;} #sightAnalyse .box2 ul li.cli5:after, #sightAnalyse .box2 ul li:hover.s1:after, #sightAnalyse .box2 ul li:hover.s2:after, #sightAnalyse .box2 ul li:hover.s3:after { bottom: -25px;} #sightAnalyse .box { width: 1200px;position: absolute;top: 110px;left: 0;display: none;} #sightAnalyse .box .pic { box-shadow: 0 0 15px rgba(0,0,0,0.3);width: 1130px;height: 500px;background: #fff;padding: 15px;margin: 0 15px;} #sightAnalyse .box1 .pic img { max-width: 870px;} #sightAnalyse .box .left { float: left;} #sightAnalyse .box .rights { float: left;width: 215px;margin-left: 30px;} #sightAnalyse .box .rights h3 { font-size: 18px;color: #333;margin: 10px 0;margin-bottom: 20px;font-weight: 600;} #sightAnalyse .box .rights dl { padding-bottom: 15px;border-bottom: 1px dashed #ccc;text-align: justify;} #sightAnalyse .box .rights dl dt { margin-bottom: 5px;font-size: 14px;color: #5f6367;} #sightAnalyse .box .rights dl dt span { color: #666;display: block;} #sightAnalyse .box .rights dl dt s { color: #333;font-weight: 600;display: block;padding-bottom: 5px;} #sightAnalyse .box .rights dl dd { font-size: 12px;line-height: 18px;position: relative;padding-left: 10px;margin-bottom: 10px;color: #999;} #sightAnalyse .box .rights dl dd:before{ content: '';width: 3px;height: 3px;background: #333;position: absolute;left: 0;top: 8px;border-radius: 50%;} #sightAnalyse .box .rights dl dd span { font-size: 14px;color: #555;display: inline-block;margin-bottom: 6px;} #sightAnalyse .box .rights a { padding: 10px;color: #92c749;border: 1px solid #8ac33c;border-radius: 4px;margin-top: 30px;display: inline-block;} #sightAnalyse .box .rights a:hover { background: #8ac33c;color: #fff;} #sightAnalyse .box2 ul { margin: 0 375px;} #sightAnalyse .box2 ul>li { float: left;padding: 0 20px;position: relative;padding-top: 45px;} #sightAnalyse .box2 ul>li>span { width: 35px;height: 35px;background: url(../images/ba_tab_spri.png) no-repeat -252px 0;position: absolute;left: 50%;margin-left: -18px;top: 0;} #sightAnalyse .box2 ul>li:hover span, #sightAnalyse .box2 ul>.s1.cli5 span { background-position: -252px -36px;} #sightAnalyse .box2 ul>li:nth-child(2) span{background-position: -288px 0px;} #sightAnalyse .box2 ul>li.s2:hover span, #sightAnalyse .box2 ul>.s2.cli5 span { background-position: -288px -36px;} #sightAnalyse .box2 ul>li:nth-child(3) span{background-position: -324px 0px;} #sightAnalyse .box2 ul>li.s3:hover span, #sightAnalyse .box2 ul>.s3.cli5 span { background-position: -324px -36px;} /*方案构成*/ #project { padding-top: 50px;padding-bottom: 50px;} #project.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #project .container>h1 { margin-bottom: 50px;} #project .box { overflow: hidden;padding: 0 40px;} #project .box2 { border-top: 1px solid #c9c9c9;margin-top: 20px;} #project .box .left { width: 300px;height: 280px;background: url(../images/ba_circle2.png) no-repeat;position: relative;} #project .box .left span { position: absolute;color: #333;} #project .box .left .s1 { top: 173px;left:71px;} #project .box .left .s2 { top: 173px;right:54px;} #project .box .rights { float: right;width: 685px;margin-right: 30px;margin-top: 50px;} #project .box .rights dt { font-size: 18px;color: #333;line-height: 60px;} #project .box2 .left dt { font-size: 18px;color: #333;line-height: 60px;} #project .box .rights dd { line-height: 30px;font-size: 14px;} #project .box2 .left dd { line-height: 30px;font-size: 14px;} #project .box2 { overflow: hidden;} #project .box2 .left { width: 685px;margin-top: 50px;} #project .box2 .rights { float: right;width: 322px;height: 268px;background: url(../images/ba_pic02.png) no-repeat;} #project dd, #ourGood dd { position: relative;padding-left: 15px;} #project dd:before, #ourGood dd:before { content: '';width: 2px;height: 2px;background: #666;border-radius: 50%;position: absolute;left: 6px;top: 15px;margin-top: -1px;} /*我们的优势*/ #ourGood { width: 100%;background: #f7f7f7;padding-top: 50px;padding-bottom: 50px;} #ourGood.act2 {-webkit-animation: TopdownIn 2s cubic-bezier(.4,0,.2,1) .5 both; -o-animation: TopdownIn 3s cubic-bezier(.4,0,.2,1) .5 both; animation: TopdownIn 3s cubic-bezier(.4,0,.2,1) .5 both;} #ourGood ul { display: flex;margin-top: 50px;overflow: hidden;height: 370px;padding: 20px 0;} #ourGood ul li { flex: 1;position: relative;margin: 0 20px;cursor: pointer;padding: 0 10px;padding-top: 165px;padding-bottom: 20px;transition: all .2s;} #ourGood ul li:nth-child(2) { margin: 0 80px;} #ourGood ul li span { width: 108px;height: 122px;background: url(../images/ba_spri01.png) no-repeat 0 -145px;position: absolute;top: 20px;left: 50%;margin-left: -54px;} #ourGood ul li:nth-child(2) span{ background-position: -111px -145px;} #ourGood ul li:nth-child(3) span{ background-position: -221px -145px;} #ourGood ul li dt { font-size: 18px;color: #333;font-weight: 700;text-align: center;margin-bottom: 20px;} #ourGood ul li dd { line-height: 24px;} #ourGood ul li:hover { box-shadow: 0 0 10px rgba(0,0,0,.4);} #ourGood ul .s1:hover span { background-position: 0 -268px;} #ourGood ul .s2:hover span { background-position: -111px -268px;} #ourGood ul .s3:hover span { background-position: -221px -268px;} #ourGood.act2 .s1{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; } #ourGood.act2 .s2{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; } #ourGood.act2 .s3{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1.5s both; } /*--------------------------------------------分支云--------------------------------------------*/ #branch { width: 100%;height: 405px;background: url(../images/fen_bannerbj.png) no-repeat!important;} #branchP1 { margin-top: 50px;overflow: hidden;padding-bottom: 40px;} #branchP1 .lefts{float: left;width: 600px;height: 560px;background: url(../images/fen_pic08.png) no-repeat; position: relative;} #branchP1 .lefts .btn1 { width: 10px;height: 25px;background: #d4d4d4 url(../images/btn1.png) no-repeat center center;border-radius: 3px;position: absolute;left: 156px;top: 110px;cursor: pointer;} #branchP1 .lefts .open1, #branchP1 .lefts .open2 { width: 230px;height: 170px;background: #f9f9f9;position: absolute;top: -76px;left: 20px;display: none;} #branchP1 .lefts .open2 { top: -76px;left: -240px;} #branchP1 .lefts .btn1.cli6 .open1 { display: block!important;} #branchP1 .lefts .btn2.cli6 .open2 { display: block!important;} #branchP1 .lefts dt { font-size: 16px; color: #333;margin: 10px;} #branchP1 .lefts dd { font-size: 12px;color: #666;padding-left: 20px;position: relative;} #branchP1 .lefts dd:after { content:'';width: 3px;height: 3px;background: #75bc2e;border-radius: 50%;position: absolute;left: 10px;top: 10px;} #branchP1 .lefts .open3 {width: 250px;display: block;background: none;top: 365px;right: 43px;position: absolute;font-size: 12px;} #branchP1 .lefts .open3 dd { font-size: 12px;} #branchP1 .lefts .btn2 { width: 10px;height: 25px;background: #d4d4d4 url(../images/btn2.png) no-repeat center center;border-radius: 3px;position: absolute;right: 152px;top: 110px;cursor: pointer;} #branchP1 .lefts span { position: absolute;} #branchP1 .lefts .s1 { top: 6px;left: 65px;color: #fff;} #branchP1 .lefts .s2 { top: 172px;left: 66px;color: #333;} #branchP1 .lefts .s3 { top: 6px;right: 52px;color: #fff;} #branchP1 .lefts .s4 { top: 140px;right: 52px;color: #333;text-align: center;} #branchP1 .lefts .s5 { bottom: 156px;left: 158px;color: #fff;text-align: center;} #branchP1 .lefts .s6 { bottom: 66px;left: 140px;color: #333;} #branchP1 .lefts .s7 { bottom: 24px;left: 154px;color: #333;} #branchP1 .rights{float: right; width: 525px;margin-right: 20px;margin-top: 100px;} #branchP1 h3 { font-size: 28px;color: #000;position: relative;margin-bottom: 50px;} #branchP1 h3:after{content: '';width: 28px;height: 1px;background: #000;position: absolute;bottom: -20px;left: 0;} #branchP1 p { margin-bottom: 30px;font-size: 14px;} /*典型特性*/ #claSpecial {width: 100%;height: 100%;background: #f7f7f7 url(../images/fen_tab_bj.jpg) no-repeat center bottom; padding-top: 50px;padding-bottom: 100px;} #claSpecial.act2 { -webkit-animation: TopdownIn 2s cubic-bezier(.4,0,.2,1) .5 both; -o-animation: TopdownIn 2s cubic-bezier(.4,0,.2,1) .5 both; animation: TopdownIn 2s cubic-bezier(.4,0,.2,1) .5 both;} #claSpecial.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s both;} #claSpecial ul li { cursor: pointer;} #claSpecial .container ul>li:nth-child(1) { padding-left: 40px;} #claSpecial .container ul>li:nth-child(1) span{ width: 25px;height: 24px;background: url(../images/fen_spri01.png) no-repeat 0 -31px!important;position: absolute;left: 210px;top: 30px;} #claSpecial .container ul>.tab1.cli3 span {background: url(../images/fen_spri01.png) no-repeat 0 -56px!important;} #claSpecial .container ul>.tab1:hover span {background: url(../images/fen_spri01.png) no-repeat 0 -56px!important;} #claSpecial .container ul>li:nth-child(2) { padding-left:80px;} #claSpecial .container ul>li:nth-child(2) span{ width: 25px;height: 24px;background: url(../images/fen_spri01.png) no-repeat -30px -31px!important;position: absolute;left: 210px;top: 30px;} #claSpecial .container ul>.tab2.cli3 span {background: url(../images/fen_spri01.png) no-repeat -30px -56px!important;} #claSpecial .container ul>.tab2:hover span {background: url(../images/fen_spri01.png) no-repeat -30px -56px!important;} #claSpecial .boxClassic1,#claSpecial .boxClassic2 { height: 760px;} #claSpecial .boxClassic1 p { padding: 0 20px;margin-bottom: 25px;color: #333;} #claSpecial .boxClassic2 p { padding: 0 20px;margin-bottom: 25px;} #claSpecial .pic { width: 740px;height: 510px;background: #fff url(../images/fen_pic09.png) no-repeat center center;margin: 0 auto;padding: 30px;position: relative;box-shadow: 0 0 10px rgba(0,0,0,0.4);} #claSpecial .boxClassic2 .pic {background: #fff url(../images/fen_pic10.jpg) no-repeat center center;margin: 0 auto;padding: 30px;position: relative;} #claSpecial .pic .simple { width: 69px;height: 54px;background: url(../images/fen_to.png) no-repeat;position: absolute;top: 262px;right: 188px;text-align: center;line-height: 48px;color: #fff;-webkit-animation: iniplay 1s ease-in-out infinite ; -o-animation: iniplay 1s ease-in-out infinite; animation: iniplay 1s ease-in-out infinite;} @-webkit-keyframes iniplay { from{ opacity:0;transform: translateX(-40px);} to{transform:translateX(0);} } @-moz-keyframes iniplay { from{ opacity:0;transform: translateX(-40px);} to{transform:translateX(0);} } @-ms-keyframes iniplay { from{ opacity:0;transform: translateX(-40px);} to{transform:translateX(0);} } @-o-keyframes iniplay { from{opacity:0; transform: translateX(-40px);} to{transform:translateX(0);} } @keyframes iniplay { from{opacity:0; transform: translateX(-40px);} to{transform:translateX(0);} } #claSpecial .pic .tit { color: #fff;font-weight: 600;font-size: 14px;} #claSpecial .pic .tit2 { color: #333;font-size: 12px;} #claSpecial .pic span{position: absolute;} #claSpecial .pic .s1 { top: 35px;left: 252px;} #claSpecial .pic .s2 { top: 37px;right: 50px;} #claSpecial .pic .s3 { top: 78px;left: 256px;color: #fff;} #claSpecial .pic .s4 { top: 190px;left: 125px;color: #fff;} #claSpecial .pic .s5 { top: 190px;left: 383px;color: #fff;} #claSpecial .pic .s6 { top: 220px;left: 120px;} #claSpecial .pic .s7 { top: 220px;left: 375px;} #claSpecial .pic .s8{ top:250px;left: 130px;} #claSpecial .pic .s9{ top:250px;left: 387px;} #claSpecial .pic .s10{ top:285px;left: 119px;} #claSpecial .pic .s11{ top:285px;left: 376px;} #claSpecial .pic .s12{ top:380px;left:96px;} #claSpecial .pic .s13{ top:380px;left:356px;} #claSpecial .pic .s14{ bottom:53px;left:87px;} #claSpecial .pic .s15{ bottom:53px;left:208px;} #claSpecial .pic .s16{ bottom:53px;left:340px;} #claSpecial .pic .s17{ bottom:53px;right:300px;} #claSpecial .pic .s18{ top:119px;right:66px;} #claSpecial .pic .s19{ top:210px;right:80px;} #claSpecial .pic .s20{ top:326px;right:96px;} /*分支云功能*/ #branchP3 .container>div { display: none;} #branchP3.act2 { -webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5 both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5 both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5 both;} #branchP3.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s both;} #branchP3 ul li { cursor: pointer;} #branchP3 .zhe { height: 171px;} #branchP3 .container>ul>li:nth-child(1) { padding-left: 40px;} #branchP3 .container>ul>li:nth-child(1) span{ width: 25px;height: 25px;background: url(../images/fen_spri01.png) no-repeat 0 -85px;position: absolute;left: 125px;top: 27px;} #branchP3 .container>ul>.tab1.cli3 span, #branchP3 .container>ul>.tab1:hover span {background: url(../images/fen_spri01.png) no-repeat 0 -111px;} #branchP3 .container>ul>li:nth-child(2) { padding-left:80px;} #branchP3 .container>ul>li:nth-child(2) span{ width: 36px;height: 12px;background: url(../images/fen_spri01.png) no-repeat -30px -85px;position: absolute;left: 123px;top: 33px;} #branchP3 .container>ul>.tab2.cli3 span, #branchP3 .container>ul>.tab2:hover span {background: url(../images/fen_spri01.png) no-repeat -30px -111px!important;} #branchP3 .container>ul>li:nth-child(3) span{ width: 35px;height: 12px;background: url(../images/fen_spri01.png) no-repeat -70px -85px;position: absolute;left: 118px;top: 33px;} #branchP3 .container>ul>.tab3.cli3 span, #branchP3 .container>ul>.tab3:hover span {background: url(../images/fen_spri01.png) no-repeat -70px -111px!important;} /*#branchP3 .box1 {padding: 0 20px;height: 475px;margin-top: 30px;}*/ #branchP3 .box1 { width: 756px;height: 400px;padding: 15px;border: 1px solid #e6e6e6;margin: 0 auto;margin-top: 30px;} #branchP3 .box1 .top, #branchP3 .box1 .middle, #branchP3 .box1 .bottom { width: 100%;height: 111px;border: 1px solid #e6e6e6;margin-bottom: 10px;} #branchP3 .box1 .top .l, #branchP3 .box1 .middle .l, #branchP3 .box1 .bottom .l {width: 107px;height: 111px;background: #004a9a;float: left;color: #fff;text-align: center;} #branchP3 .box1 .top .l h1, #branchP3 .box1 .middle .l h1, #branchP3 .box1 .bottom .l h1{font-size: 16px;margin-top: 30px;} #branchP3 .box1 .top .l p, #branchP3 .box1 .middle .l p, #branchP3 .box1 .bottom .l p{ font-size: 12px;} #branchP3 .box1 .top .r , #branchP3 .box1 .middle .r{ width: 626px;height: 91px;background: #fff;float: right;padding: 10px;} #branchP3 .box1 .top .r .l2 { width: 265px;float: left;margin-right: 10px;} #branchP3 .box1 .top .r .l2 span, #branchP3 .box1 .top .r .m span , #branchP3 .box1 .top .r .r2 span{ width: 100%;height: 40px;text-align: center;line-height: 40px;color: #333;display: block;background: #f9f9f9;border-radius: 3px;} #branchP3 .box1 .top .r .l2 s, #branchP3 .box1 .top .r .m s, #branchP3 .box1 .top .r .r2 s { padding: 3.5px;background: #f9f9f9;border-radius: 3px;display: inline-block;font-size: 12px;line-height: 16px;margin-top: 10px;} #branchP3 .box1 .top .r .m { float: left;width: 197px;margin-right: 7px;} #branchP3 .box1 .top .r .r2 { float: left;width: 135px;} #branchP3 .box1 .middle .r, #branchP3 .box1 .bottom .r { width: 635px;height: 101px;padding: 6px;} #branchP3 .box1 .middle .r ol { display: flex;list-style: none;} #branchP3 .box1 .middle .r ol li{ flex: 1;position: relative;} #branchP3 .box1 .middle .r ol li span { width: 82px;height: 82px;background: url(../images/fen_spri01.png) no-repeat -573px 0;position: absolute;top:0;left: 30px;} #branchP3 .box1 .middle .r ol li:nth-child(2) span{background-position: -661px 0;} #branchP3 .box1 .middle .r ol li:nth-child(3) span{background-position: -746px 0;} #branchP3 .box1 .middle .r ol li:nth-child(4) span{background-position: -833px 0;} #branchP3 .box1 .middle .r ol li p { text-align: center;margin-top: 83px;} #branchP3 .box1 .bottom { height: 155px;} #branchP3 .box1 .bottom .l { height: 155px;} #branchP3 .box1 .bottom .l h1 { margin-top: 50px;} #branchP3 .box1 .bottom .r { background: #fff url(../images/fen_pic11.jpg) no-repeat center center;float: right;height: 155px;position: relative;} #branchP3 .box1 .bottom .r span { position: absolute;font-size: 12px;} #branchP3 .box1 .bottom .r .s1 { top: 42px;left: 193px;} #branchP3 .box1 .bottom .r .s2 { bottom: 15px;left: 71px;} #branchP3 .box1 .bottom .r .s3 { bottom: 15px;left: 188px;} #branchP3 .box1 .bottom .r .s4 { top: 20px;left: 330px;} #branchP3 .box1 .bottom .r .s5 { top: 55px;right: 94px;} #branchP3 .box1 .bottom .r .s6 { bottom: 26px;right: 66px;} #branchP3 .box2 { width: 100%;height: 430px;margin: 0 20px;} #branchP3 .box2 p{ margin-top: 30px;} #branchP3 .box2 .pic {width: 672px;height: 365px;background: url(../images/fen_pic12.jpg) no-repeat;border: 1px solid #e6e6e6;margin: 0 auto;margin-top: 20px;position: relative;} #branchP3 .box2 .pic span { font-size: 12px;position: absolute;} #branchP3 .box2 .pic .s1 { top: 148px;left: 120px;} #branchP3 .box2 .pic .s2 { top: 118px;left: 202px;} #branchP3 .box2 .pic .s3 { top: 100px;left: 300px;} #branchP3 .box2 .pic .s4 { top: 118px;right: 208px;} #branchP3 .box2 .pic .s5 { top: 148px;right: 136px;} #branchP3 .box3>p { margin: 0 20px;margin-top: 30px;} #branchP3 .box3 .pic {background: url(../images/deskPic06.jpg) no-repeat 50% 50%;overflow:hidden;position: relative;height: 388px;margin-top:0;} #branchP3 .box3 .pic ol { margin: 0 37px;overflow: hidden;position: absolute;top: 0;padding-top: 20px;list-style: none;} #branchP3 .box3 .pic ol li { float: left;width: 223px;height: 262px;background: url(../images/tabbj.png) no-repeat;position: relative;border-radius: 5px;transition: all .2s;margin-top: 35px;cursor: pointer;} #branchP3 .box3 .pic ol li+li { margin-left: 30px;} #branchP3 .box3 .pic ol li s{ height: 6px;width: 6px;border: 2px solid #333;position: absolute;right:10px;top: 10px;border-radius: 50%;} #branchP3 .box3 .pic ol li h2 { margin: 5px 0;margin-bottom: 5px;font-size: 14px;color: #fff;text-align: center;margin-top: 135px;} #branchP3 .box3 .pic ol li p { margin: 0 10px;text-align: left;color: #fff;font-size: 12px;line-height: 24px;} #branchP3 .box3 .pic ol li.cli4 { box-shadow: 1px 4px 10px rgba(0,0,0,.4);transform: translateY(-5px);} #branchP3 .box3 .pic ol li.cli4 s { background: #004a9a;} #branchP3 .box3 .pic ol li h1{ background: #000;width: 86px;height: 88px;background: url(../images/fen_spri01.png) no-repeat -562px -87px;position: absolute;top: 17px;left: 69px;} #branchP3 .box3 .pic ol li:nth-child(2) h1{background-position: -650px -87px;} #branchP3 .box3 .pic ol li:nth-child(3) h1{background-position: -739px -87px;} #branchP3 .box3 .pic ol li:nth-child(4) h1{background-position: -827px -87px;} #branchP3 .box3 .pic ol li:nth-child(2).cli4 h1{background-position: -650px -87px;} #branchP3 .box3 .pic ol li:nth-child(3).cli4 h1{background-position: -739px -87px;} #branchP3 .box3 .pic ol li:nth-child(4).cli4 h1{background-position: -827px -87px;} #branchP3 .box3 .pic h5 { font-size: 16px;text-align: center;margin-top: 30px;font-weight: 600;} #branchP3 .box3 .pic ol { overflow: hidden;padding-left: 20px;} #branchP3 .box3 .pic .text { position: absolute;bottom: 32px;left: 29%;color: #333;} #branchP3 .box3 .pic ol li { float: left;margin-right: 30px;font-size: 12px;} /*核心技术优势*/ #centerTech { padding-top: 50px;overflow: hidden;padding-bottom: 50px;} #centerTech.act2 { -webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5 both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5 both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5 both;} #centerTech.act2 .container>h1 {animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 0s both;} #centerTech ul { margin-top: 55px;} #centerTech ul li { width: 22%;height: 323px;float: left;transition: all .2s;margin-right: 45px;padding: 20px 0;cursor: pointer;} #centerTech ul li:nth-child(4){margin-right: 0;} #centerTech ul li h1 { text-align: center;} #centerTech ul li h1 s {width: 108px; height: 122px;background: url(../images/fen_spri01.png) no-repeat -107px 0;display: inline-block;margin-top: 10px;} #centerTech ul li:nth-child(2) h1 s{ background-position: -216px 0;} #centerTech ul li:nth-child(3) h1 s{ background-position: -325px 0;} #centerTech ul li:nth-child(4) h1 s{ background-position: -435px 0;} #centerTech ul li.c1:hover h1 s {background-position: -107px -123px;} #centerTech ul li.c2:hover h1 s {background-position: -216px -123px;} #centerTech ul li.c3:hover h1 s {background-position: -325px -123px;} #centerTech ul li.c4:hover h1 s {background-position: -435px -123px;} #centerTech ul li h2 { text-align: center;font-size: 18px;font-weight: 600;margin: 22px 0;color: #333;} #centerTech ul li p { position: relative;margin: 0 20px;} #centerTech ul li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.4);} #centerTech.act2 .c1{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2s both; } #centerTech.act2 .c2{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .4s both; } #centerTech.act2 .c3{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .6s both; } #centerTech.act2 .c4{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .8s both; } #centerTech.act2 .c5{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; } #centerTech.act2 .c6{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1.2s both; } #centerTech.act2 .c7{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1.4s both; } #centerTech.act2 .c8{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1.6s both; } .crazy { background: #f7f7f7;} /*---------------------------------------EMM-------------------------------------------*/ #emmBanner { width: 100%;height: 405px;background: url(../images/EMM_bannerbj.jpg) no-repeat!important;} #centerTask { overflow: hidden;margin-top: 50px;} #centerTask .left { width: 507px;height: 354px;background: url(../images/EMM_ico01.png) no-repeat center center;position: relative;} #centerTask .left.act2 {-webkit-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; -o-animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1;} #centerTask .left .t1 { position: absolute;font-size: 14px;color:#004a9a;top: 142px;left: 228px;} #centerTask .left span { position: absolute;width: 52px;height: 52px;-webkit-animation: round 2s ease-in-out infinite; -o-animation: round 2s ease-in-out infinite; animation: round 2s ease-in-out infinite;} #centerTask .left .s1 { background: url(../images/EMM_ico2.png) no-repeat;top: 2px;left: 55px;} #centerTask .left .s2{background: url(../images/EMM_ico3.png) no-repeat;top:22px;right: 15px;animation-delay: .5s;} #centerTask .left .s3{background: url(../images/EMM_ico4.png) no-repeat;top:160px;;left: 15px;animation-delay: 1s;} #centerTask .left .s4{background: url(../images/EMM_ico5.png) no-repeat;bottom:30px;;left: 111px;animation-delay: 1.5s;} #centerTask .left .s5{width: 61px;height: 61px;background: url(../images/EMM_ico6.png) no-repeat;bottom:32px;;right: 23px;animation-delay: 2s;} #centerTask .rights{ float: right;margin-left: 85px;width: 600px;margin-top: 90px;} #centerTask .rights.act2 {-webkit-animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; -o-animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1; animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 0s 1;} @-webkit-keyframes round { from{transform: rotateZ(360deg);} } @-moz-keyframes round { from{transform: rotateZ(360deg);} } @-ms-keyframes round { from{transform: rotateZ(360deg);} } @-o-keyframes round { from{transform: rotateZ(360deg);} } @keyframes round { from{transform: rotateZ(360deg);} } #challenge { width: 100%;background: #fafafa;padding-top: 50px;} #challenge.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #challenge.act2 .container>h1 { -webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #challenge.act2 .container>p { -webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #challenge .box { width: 100%;height: 530px;background: url(../images/EMM_pic02.png) no-repeat;position: relative;margin-top: 20px;} #challenge .box>div { padding: 20px;width: 308px; position: absolute;border: 1px solid #e7e7e7;background: #fff;} #challenge .box>span { position: absolute;font-size: 18px;color: #61a7e0;} #challenge .box .s1 { top: 160px;left: 585px;} #challenge .box .s2 { top: 223px;left: 585px;} #challenge .box .s3 { top: 288px;left: 585px;} #challenge .box .box1 { top: 150px;left: 0;} #challenge .box h1 { font-size: 18px;color: #333;margin-bottom: 10px;} #challenge .box p { width: 308px;} #challenge .box .box2 { top: 65px;right:10px;} #challenge .box .box3 { bottom: 70px;right:10px;} #challenge.act2 .box1{animation: leftFadeIn 1s cubic-bezier(.4,0,.2,1) 1s both;} #challenge.act2 .box2{animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 1.5s both;} #challenge.act2 .box3{animation: rightFadeIn 1s cubic-bezier(.4,0,.2,1) 2s both;} /*深信服产品概述*/ #emmPro { width: 100%;padding-top: 50px;background: url(../images/EMM_bj2.png) no-repeat center center;padding-bottom: 80px;} #emmPro.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #emmPro.act2 .container>h1 { -webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #emmPro.act2 .container>p { -webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #emmPro .box { width: 100%;height: 220px;background: url(../images/EMM_pic03.png) no-repeat center center;margin-top: 70px;position: relative;margin-bottom: 30px;} #emmPro .box span { font-size: 14px;color: #8ac33c;position: absolute;} #emmPro .box span s { width: 14px;height: 14px;background: url(../images/key.png) no-repeat;display: inline-block;margin-right: 5px;-webkit-background-size: contain; background-size: contain;} #emmPro .box .s1 { top: 140px;left: 208px;} #emmPro .box .s2 { top: 192px;left: 571px;} #emmPro .box .s3 { top: 130px;right: 342px;} #emmPro .box .s4 { top: 190px;right:55px;} #emmPro .text { padding: 0 20px;} #emmPro .text p{ margin-bottom: 10px;position: relative;padding-left: 10px;} #emmPro .text p:before {content: '';width: 3px;height: 3px;background: #666;position: absolute;left: 0;top: 10px;border-radius: 50%;} /*我们的优势*/ #emmGood { padding: 50px 0;} #emmGood.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #emmGood.act2 .container>h1 { -webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #emmGood.act2 .container>p { -webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #emmGood ul { display: flex;margin-top: 50px;} #emmGood ul li { flex:1;padding: 20px 0;padding-bottom: 40px;transition: all 1s;} #emmGood ul li+li { margin-left: 50px;} #emmGood ul li h1 { text-align: center;} #emmGood ul li h1 s {width: 108px; height: 122px;background: url(../images/EMM_ico07_1.png) no-repeat;display: inline-block;margin-top: 10px;} #emmGood ul li:nth-child(2) h1 s{ background: url(../images/EMM_ico08_1.png) no-repeat;} #emmGood ul li:nth-child(3) h1 s{background: url(../images/EMM_ico09_1.png) no-repeat;} #emmGood ul li.c1:hover h1 s {background: url(../images/EMM_ico07_2.png) no-repeat;} #emmGood ul li.c2:hover h1 s {background: url(../images/EMM_ico08_2.png) no-repeat;} #emmGood ul li.c3:hover h1 s {background: url(../images/EMM_ico09_2.png) no-repeat;} #emmGood ul li h2 { text-align: center;font-size: 18px;font-weight: 600;margin: 22px 0;} #emmGood ul li p { position: relative;margin: 0 20px;} #emmGood.act2 .c1{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .2s both; } #emmGood.act2 .c2{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; } #emmGood.act2 .c3{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1.4s both; } #emmGood ul li:hover {box-shadow: 0 0 10px rgba(0,0,0,0.4);} /*emm场景化*/ #emmSight {width: 100%;padding-top: 50px;overflow: hidden;padding-bottom: 50px;background: #f2f2f2;} #emmSight.act2 {-webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; -o-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both; animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #emmSight.act2 .container>h1 { -webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #emmSight.act2 .container>p { -webkit-animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) .5s both;} #emmSight .container>h1 { margin-bottom: 50px;} #emmSight ul { margin-top: 55px;display: flex;} #emmSight ul li { flex:1;height: 425px;float: left;transition: all 1s;padding: 20px 0;} #emmSight ul li+li { margin-left: 50px;} #emmSight ul li:nth-child(4){margin-right: 0;} #emmSight ul li h1 { text-align: center;} #emmSight ul li h1 s {width: 166px; height: 181px;background: url(../images/EMM_pic08.png) no-repeat;display: inline-block;margin-top: 10px;} #emmSight ul li:nth-child(2) h1 s{ background: url(../images/EMM_pic09.png) no-repeat;} #emmSight ul li:nth-child(3) h1 s{ background: url(../images/EMM_pic10.png) no-repeat;} #emmSight ul li h2 { text-align: center;font-size: 18px;font-weight: 600;margin: 22px 0;} #emmSight ul li p { position: relative;margin: 0 20px;} #emmSight ul li:hover {box-shadow: 0 0 10px rgba(0,0,0,0.4);} #emmSight.act2 .c1{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1s both; } #emmSight.act2 .c2{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 1.5s both; } #emmSight.act2 .c3{animation: TopdownIn 1s cubic-bezier(.4,0,.2,1) 2s both; } .index-case-wrap .index-case .information2 { width: 380px;height:445px;} .index-case-wrap .index-case .information2 .name{ height: auto;}