p {padding: 0;} s,i,em { list-style: none;font-style: normal;} .container>h1 {text-align: center;position: relative;color: #333;font-size: 30px;line-height: 26px;font-weight: 400;margin-bottom: 55px;} .container>h1:after { content: '';width: 26px;height:1px;background: #333;position: absolute;left: 50%;margin-left: -13px;bottom: -22px;} .container>p {position: relative;} .container {margin: 0 auto;} * { padding: 0;margin: 0;} /*#banner { width: 100%;height: 405px;background: url(../images/yunIT_bj.jpg) no-repeat;}*/ #banner .slideBox { border: none;height: 405px;} .banner2,.bd {overflow: hidden;height: 405px!important;} /*.banner img { width:auto;height: auto;}*/ #banner .slideBox ul li{ height: 405px;} #yun1 { width: 100%;height: 405px;background: #000;background: url(../images/yun1.png) no-repeat!important;} .b_wz { position: absolute;top: 128px;left: 20px;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;} #protect1 { padding: 50px 0;background: url(../images/protect_bj1.png) no-repeat center bottom;} #protect1 .box { width:560px;height: 575px;background: url(../images/protect_bj2.png) no-repeat;margin: 0 auto;position: relative;} #protect1 .box .p1 { position: absolute;top: 355px;left: 70px;} #protect1 .box .p2 { position: absolute;top: 20px;left: 295px;} #protect1 .box .p3 { position: absolute;top: 138px;left: 130px;} #protect1 .box .p4 { position: absolute;top: 263px;left: 390px;} #protect1 .box div span { width: 60px;height: 60px;background: rgba(238,238,238,0.7) url(../images/spri01.png) no-repeat center center;border-radius: 50%;text-align: center;display: inline-block;} #protect1 .box div i { display: block;color: #333;} #protect1 .box .p2 span { background: rgba(238,238,238,0.7) url(../images/spri02.png) no-repeat center center;;} #protect1 .box .p3 span { background: rgba(238,238,238,0.7) url(../images/spri03.png) no-repeat center center;;} #protect1 .box .p4 span { background: rgba(238,238,238,0.7) url(../images/spri04.png) no-repeat center center;;} #protect1 .box s { width: 17px;height: 17px;background: #fff;border: 1px solid #004a9a;border-radius: 50%;display: inline-block;position: absolute;-webkit-animation: autoPlay 1s infinite; -o-animation: autoPlay 1s infinite; animation: autoPlay 1s infinite;} #protect1 .box .s1 { top: 105px;left: 320px;} #protect1 .box .s2 { top: 230px;left: 145px;} #protect1 .box .s3 { top: 445px;left: 96px;} #protect1 .box .s4 { top: 360px;left: 390px;} #protect1 .box em { width: 11px;height: 11px;background: #004e9a;border-radius: 50%;position: absolute;cursor: pointer;} #protect1 .box .em1 { top: 109px;left: 324px;} #protect1 .box .em2 { top: 234px;left: 149px;} #protect1 .box .em3 { top: 449px;left: 100px;} #protect1 .box .em4 { top: 364px;left: 394px;} @-webkit-keyframes autoPlay { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } @-moz-keyframes autoPlay { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } @-ms-keyframes autoPlay { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } @-o-keyframes autoPlay { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes autoPlay { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } #protect1 .box .boxl { width: 408px;height: 86px;background: url(../images/protect1.png) no-repeat center bottom;position: absolute;opacity: 0;} #protect1 .box .boxr { width: 474px;height: 92px;background: url(../images/protect2.png) no-repeat center bottom;position: absolute;opacity: 0;} #protect1 .box .l1 { top: 156px;left: -260px; } #protect1 .box .l2 { top: 371px;left: -308px;} #protect1 .box .l3 { top: 28px;left: 333px;} #protect1 .box .l4 { top: 282px;left: 405px;} #protect1 .box .boxl p { width: 334px;height: 38px;background: #f1f1f1;padding: 10px;color: #333;} #protect1 .box .boxr p { width:405px;height: 38px;background: #f1f1f1;padding: 10px;float: right;color: #333;} #protect1 .box .l1.ani,#protect1 .box .l2.ani,#protect1 .box .l3.anis,#protect1 .box .l4.anis,#eye1 .squar.anis { opacity: 1!important;} #protect1 .box .l1.ani p,#protect1 .box .l2.ani p{ -webkit-animation: rotateR .3s 1;-o-animation: rotateR .3s 1;animation: rotateR .3s 1;} #protect1 .box .l3.anis p,#protect1 .box .l4.anis p,#eye1 .left .squar.anis p { -webkit-animation: rotateL .3s 1; -o-animation: rotateL .3s 1; animation: rotateL .3s 1;} @-webkit-keyframes rotateR { from{ transform: translateX(-40px);opacity:0;} } @-moz-keyframes rotateR { from{ transform: translateX(-40px);opacity:0;} } @-ms-keyframes rotateR { from{ transform: translateX(-40px);opacity:0;} } @-o-keyframes rotateR { from{ transform: translateX(-40px);opacity:0;} } @keyframes rotateR { from{ transform: translateX(-40px);opacity:0;} } /*安全防护的理想效果*/ #protect2 { padding: 50px 0;background: #eee;} #protect2 .pic {background: url(../images/deskPic06.jpg) no-repeat 50% 50%;overflow:hidden;position: relative;height: 388px;margin-top:0;} #protect2 .pic ol { margin: 0 37px;overflow: hidden;position: absolute;top: 0;padding: 20px;list-style: none;} #protect2 .pic ol li { float: left;width: 223px;height: 262px;background: url(../images/protect_bj3.png) no-repeat;position: relative;border-radius: 5px;transition: all .2s;margin-top: 35px;} #protect2 .pic ol li:hover { background: url(../images/protect_bj3_2.png) no-repeat;} #protect2 .pic ol li+li { margin-left: 20px;} #protect2 .pic ol li s{ height: 6px;width: 6px;border: 2px solid #333;position: absolute;right:10px;top: 10px;border-radius: 50%;} #protect2 .pic ol li h2 { margin: 5px 0;margin-bottom: 5px;font-size: 18px;color: #fff;text-align: center;margin-top: 145px;position: relative;margin-bottom: 20px;} #protect2 .pic ol li h2:after { content: '';width: 6px;height: 10px;background: url(../images/rain.png) no-repeat;position: absolute;bottom: -15px;left: 50%;margin-left: -3px;display: none;} #protect2 .pic ol li:hover h2:after {display: block;} #protect2 .pic ol li p { margin: 0 5px;text-align: center;color: #fff;font-size: 12px;line-height: 22px;} #protect2 .pic ol li.cli4 { box-shadow: 1px 4px 10px rgba(0,0,0,.4);transform: translateY(-5px);} #protect2 .pic ol li.cli4 s { background: #004a9a;} #protect2 .pic ol li h1{ background: #000;width: 95px;height: 98px;background: url(../images/protect3.png) no-repeat;position: absolute;top: 17px;left: 69px;} #protect2 .pic ol li:nth-child(2) h1{background: url(../images/protect4.png) no-repeat;} #protect2 .pic ol li:nth-child(3) h1{background: url(../images/protect5.png) no-repeat;} #protect2 .pic ol li:nth-child(4) h1{background: url(../images/protect6.png) no-repeat;} #protect2 .pic ol li:nth-child(1).cli4 h1{background: url(../images/protect3_2.png) no-repeat;} #protect2 .pic ol li:nth-child(2).cli4 h1{background: url(../images/protect4_2.png) no-repeat;} #protect2 .pic ol li:nth-child(3).cli4 h1{background: url(../images/protect5_2.png) no-repeat;} #protect2 .pic ol li:nth-child(4).cli4 h1{background: url(../images/protect6_2.png) no-repeat;} #protect2 .pic h5 { font-size: 16px;text-align: center;margin-top: 30px;font-weight: 600;} #protect2 .pic ol { overflow: hidden;padding-left: 20px;} #protect2 .pic .text { position: absolute;bottom: 32px;left: 29%;color: #333;} #protect2 .pic ol li { float: left;margin-right: 30px;font-size: 12px;} /*产品概述*/ #protect3 {padding: 70px 0;background: #f7f7f7;} #protect3 .part1 { width: 1080px;height: 348px;background: url(../images/area_bj06.png) no-repeat center center;margin: 0 auto;margin-top: 20px;} #protect3 .part2 { background:#eee url(../images/protect_bj4.png) no-repeat center top;padding-top: 60px;position: relative;padding-bottom: 30px;} #protect3 .part2 .circle { position: absolute;width: 18px;height: 32px;top: -8px;left: 50%;margin-left: -9px;text-align: center;line-height: 10px;} #protect3 .part2 .circle span { width: 8px;height: 8px;background: #004e9a;border-radius: 50%;display: inline-block;-webkit-animation: autoScale 1s infinite; -o-animation: autoScale 1s infinite; animation: autoScale 1s infinite;} #Protect img{ width:100%; } #protect3 .part2 .circle .s2 { transform: scale(0.8);animation-delay: .2s;} #protect3 .part2 .circle .s3 { transform: scale(0.6);animation-delay: .6s;} @-webkit-keyframes autoScale { 0%{ transform: scale(0);} 50%{ transform: scale(1);} 100%{ transform: scale(0);} } @-moz-keyframes autoScale { 0%{ transform: scale(0);} 50%{ transform: scale(1);} 100%{ transform: scale(0);} } @-ms-keyframes autoScale { 0%{ transform: scale(0);} 50%{ transform: scale(1);} 100%{ transform: scale(0);} } @-o-keyframes autoScale { 0%{ transform: scale(0);} 50%{ transform: scale(1);} 100%{ transform: scale(0);} } @keyframes autoScale { 0%{ transform: scale(0);} 50%{ transform: scale(1);} 100%{ transform: scale(0);} } #protect3 .part2 ul { display:flex;padding: 0 150px;} #protect3 .part2 ul li{flex: 1;text-align: center;} #protect3 .part2 ul li span { background: url(../images/pro_spri1.png) no-repeat 0 -50px;width: 25px;height: 25px;display: block;margin: 0 auto;margin-bottom: 10px;} #protect3 .part2 ul li:nth-child(2) span {width: 21px;height: 26px; background: url(../images/pro_spri1.png) no-repeat -41px -50px;} #protect3 .part2 ul li:nth-child(3) span { background: url(../images/pro_spri1.png) no-repeat -76px -56px;vertical-align: bottom;} #protect3 .part2 ul li.cli { color: #004e9a;} #protect3 .part2 ul .n1.cli span { background-position: 0 -82px;} #protect3 .part2 ul .n2.cli span { background-position: -41px -82px;} #protect3 .part2 ul .n3.cli span { background-position: -76px -88px;} #protect3 .part2 .box { margin-top: 15px;display: none;} #protect3 .part2 .box.show { display: block;} #protect3 .part2 .box ol { overflow-y: hidden;list-style: none;padding: 20px 0;} #protect3 .part2 .box ol li{ width: 265px;height: 350px;float: left;background: url(../images/protect_bj5.png) no-repeat;margin: 0 55px;position: relative;transition: all .3s;} #protect3 .part2 .box ol li:first-child { margin-left: 100px;} #protect3 .part2 .box ol li span { width: 150px;height: 150px;background: url(../images/protect_bj6.png) no-repeat;position: absolute;top: 30px;left: 57px;transition: all .5s;} #protect3 .part2 .box ol li i { width: 108px;height: 108px;background: rgba(255,255,255,.3);position: absolute;top: 52px;left: 78px;border-radius: 50%;text-align: center;} #protect3 .part2 .box ol li i s { width: 52px;height: 49px;background: url(../images/pro_spri1.png) no-repeat 0 -123px;display: inline-block;vertical-align: middle;margin-top: 28px;} #protect3 .part2 .box ol li:nth-child(2) i s { background: url(../images/pro_spri1.png) no-repeat -62px -123px;} #protect3 .part2 .box ol li:nth-child(3) i s {width: 54px;height: 52px; background: url(../images/pro_spri1.png) no-repeat -119px -123px;} #protect3 .part2 .box ol li h3 { font-size: 16px;color: #fff;margin-top: 190px;text-align: center;position: relative;} #protect3 .part2 .box ol li h3:after { content: '';width: 20px;height: 2px;background: #fff;position: absolute;bottom: -10px;left: 50%;margin-left: -10px;} #protect3 .part2 .box ol li p { padding: 15px;margin-top: 5px;color: #fff;font-size: 12px;text-align: justify;} #protect3 .part2 .box ol li:hover { box-shadow: 0 0 25px rgba(0,0,0,0.6);} #protect3 .part2 .box ol li:hover span { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);} #protect3 .part2 .box2 ol li:nth-child(1) i s { width: 52px;height: 52px;background: url(../images/pro_spri1.png) no-repeat 0 -190px;} #protect3 .part2 .box2 ol li:nth-child(2) i s { width: 50px;height: 48px;background: url(../images/pro_spri1.png) no-repeat -62px -190px;} #protect3 .part2 .box2 ol li:nth-child(3) i s { width: 50px;height: 50px;background: url(../images/pro_spri1.png) no-repeat -119px -190px;} #protect3 .part2 .box3 ol li { background: url(../images/protect_bj5_2.png) no-repeat;} #protect3 .part2 .box3 ol li .pic { width: 215px;height: 145px;border-radius: 6px;margin: 25px;overflow: hidden;position: relative;} #protect3 .part2 .box3 ol li .pic img { width: 100%;} #protect3 .part2 .box3 ol li .pic p { width: 215px;height: 145px;background: rgba(0,0,0,0.7);position: absolute;top: 0;left: 0;margin-top: 0;padding: 0;line-height: 185px;text-align: center;opacity: 0;transition: all .3s;} #protect3 .part2 .box3 ol li .pic em { width: 25px;height: 25px;background: url(../images/check.png) no-repeat;position: absolute;top: 50px;left: 50%;margin-left: -12px;} #protect3 .part2 .box3 ol li:hover p { opacity:1;} #protect3 .part2 .box3 ol li h3 { margin-top: 10px;} .olay { background: rgba(0,0,0,0.6);position: fixed;top: 0;left: 0;z-index: 2016;display: none;} .olay.show,.bigpic img.show,.bigpic.show { display: block;} .bigpic { border-radius: 8px;position: fixed;top: 20px;z-index: 2017;display: none;width: 100%;} .bigpic .container { position: relative;} .bigpic img { display: block;border: 20px solid #fff;border-radius: 8px;display:none;max-width: 1160px;background: #fff;margin: 0 auto;} .bigpic .close {width: 35px;height: 35px;background: url(../images/close.png) no-repeat;cursor: pointer;position: absolute;top: -5px;right: -5px;} /*核心技术优势*/ #protect4,#eye3 {padding: 80px 0 50px 0;background: #fff;} #protect4 ul,#eye3 ul {margin-top: 0;overflow: hidden;padding: 10px 20px 5px 20px;} #protect4 ul li,#eye3 ul li {width: 22%;height: auto;float: left;transition: all .2s;margin-right: 2%;padding: 20px 0;} /**一般进出口贸易内容页css*/ #qqck01 {padding: 80px 0 50px 0;background: #bfffff;} #qqck01 ul{margin-top: 0;overflow: hidden;padding: 10px 20px 5px 20px;} #qqck01 ul li{ padding：10px 0; } #qqck01 h1{ text-align: center;line-height: 22px;} #qqck01 img{ border-radius: 15px; box-shadow: 0 0 5px #ccc; -webkit-transition: -webkit-transform 2s ease-out; -moz-transition: -moz-transform 2s ease-out; -o-transition: -o-transform 2s ease-out; -ms-transition: -ms-transform 2s ease-out; } #qqck01 img:hover{ border-radius: 15px; box-shadow: 0 0 5px #F40; -webkit-transition: -webkit-transform 2s ease-out; -moz-transition: -moz-transform 2s ease-out; -o-transition: -o-transform 2s ease-out; -ms-transition: -ms-transform 2s ease-out; } #qqck01 h2{ text-align: center;line-height: 22px;font-size: 18px; margin:10px auto;} #qqck01 p{ text-align: center;line-height: 35px; border-radius: 25px; border: 1px solid #8d8d8d;} #qqck01 p:hover{ text-align: center;line-height: 35px; border-radius: 25px; border: 1px solid #F40; } #qqck01 .f1{width:30%;height: auto;float: left;transition: all .2s;margin-right: 4%;padding: 20px 0;} #qqck01 ul .f2{width:30%;height: auto;float: left;transition: all .2s;margin-right: 4%;padding: 20px 0;} #qqck01 .f3{width:30%;height: auto;float: left;transition: all .2s;margin-right: 4%;padding: 20px 0;} /*东南亚进出口专线*/ #dny01 {padding: 80px 0 50px 0;background: #bfffff;} #dny01 ul{margin-top: 0;overflow: hidden;padding: 10px 20px 5px 20px;} #dny01 ul li{ padding：10px 0; } #dny01 h1{ text-align: center;line-height: 22px;} #dny01 img{ border-radius: 15px; box-shadow: 0 0 5px #ccc; -webkit-transition: -webkit-transform 2s ease-out; -moz-transition: -moz-transform 2s ease-out; -o-transition: -o-transform 2s ease-out; -ms-transition: -ms-transform 2s ease-out; } #dny01 img:hover{ border-radius: 15px; box-shadow: 0 0 5px #F40; -webkit-transition: -webkit-transform 2s ease-out; -moz-transition: -moz-transform 2s ease-out; -o-transition: -o-transform 2s ease-out; -ms-transition: -ms-transform 2s ease-out; } #dny01 h2{ text-align: center;line-height: 22px;font-size: 18px; margin:20px auto;} #dny01 p{ text-align: center;line-height: 35px; border-radius: 25px; border: 1px solid #8d8d8d;} #dny01 p:hover{ text-align: center;line-height: 35px; border-radius: 25px; border: 1px solid #F40; } /* bootstrap摘录内容 */ .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto } @media (min-width:768px) { .container { width: 750px } } @media (min-width:992px) { .container { width: 970px } } @media (min-width:1200px) { .container { width: 1170px } } .container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto } .row { margin-right: -15px; margin-left: -15px } .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px } .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { float: left } .col-xs-12 { width: 100% } .col-xs-11 { width: 91.66666667% } .col-xs-10 { width: 83.33333333% } .col-xs-9 { width: 75% } .col-xs-8 { width: 66.66666667% } .col-xs-7 { width: 58.33333333% } .col-xs-6 { width: 50% } .col-xs-5 { width: 41.66666667% } .col-xs-4 { width: 33.33333333% } .col-xs-3 { width: 25% } .col-xs-2 { width: 16.66666667% } .col-xs-1 { width: 8.33333333% } .col-xs-pull-12 { right: 100% } .col-xs-pull-11 { right: 91.66666667% } .col-xs-pull-10 { right: 83.33333333% } .col-xs-pull-9 { right: 75% } .col-xs-pull-8 { right: 66.66666667% } .col-xs-pull-7 { right: 58.33333333% } .col-xs-pull-6 { right: 50% } .col-xs-pull-5 { right: 41.66666667% } .col-xs-pull-4 { right: 33.33333333% } .col-xs-pull-3 { right: 25% } .col-xs-pull-2 { right: 16.66666667% } .col-xs-pull-1 { right: 8.33333333% } .col-xs-pull-0 { right: auto } .col-xs-push-12 { left: 100% } .col-xs-push-11 { left: 91.66666667% } .col-xs-push-10 { left: 83.33333333% } .col-xs-push-9 { left: 75% } .col-xs-push-8 { left: 66.66666667% } .col-xs-push-7 { left: 58.33333333% } .col-xs-push-6 { left: 50% } .col-xs-push-5 { left: 41.66666667% } .col-xs-push-4 { left: 33.33333333% } .col-xs-push-3 { left: 25% } .col-xs-push-2 { left: 16.66666667% } .col-xs-push-1 { left: 8.33333333% } .col-xs-push-0 { left: auto } .col-xs-offset-12 { margin-left: 100% } .col-xs-offset-11 { margin-left: 91.66666667% } .col-xs-offset-10 { margin-left: 83.33333333% } .col-xs-offset-9 { margin-left: 75% } .col-xs-offset-8 { margin-left: 66.66666667% } .col-xs-offset-7 { margin-left: 58.33333333% } .col-xs-offset-6 { margin-left: 50% } .col-xs-offset-5 { margin-left: 41.66666667% } .col-xs-offset-4 { margin-left: 33.33333333% } .col-xs-offset-3 { margin-left: 25% } .col-xs-offset-2 { margin-left: 16.66666667% } .col-xs-offset-1 { margin-left: 8.33333333% } .col-xs-offset-0 { margin-left: 0 } @media (min-width:768px) { .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 { float: left } .col-sm-12 { width: 100% } .col-sm-11 { width: 91.66666667% } .col-sm-10 { width: 83.33333333% } .col-sm-9 { width: 75% } .col-sm-8 { width: 66.66666667% } .col-sm-7 { width: 58.33333333% } .col-sm-6 { width: 50% } .col-sm-5 { width: 41.66666667% } .col-sm-4 { width: 33.33333333% } .col-sm-3 { width: 25% } .col-sm-2 { width: 16.66666667% } .col-sm-1 { width: 8.33333333% } .col-sm-pull-12 { right: 100% } .col-sm-pull-11 { right: 91.66666667% } .col-sm-pull-10 { right: 83.33333333% } .col-sm-pull-9 { right: 75% } .col-sm-pull-8 { right: 66.66666667% } .col-sm-pull-7 { right: 58.33333333% } .col-sm-pull-6 { right: 50% } .col-sm-pull-5 { right: 41.66666667% } .col-sm-pull-4 { right: 33.33333333% } .col-sm-pull-3 { right: 25% } .col-sm-pull-2 { right: 16.66666667% } .col-sm-pull-1 { right: 8.33333333% } .col-sm-pull-0 { right: auto } .col-sm-push-12 { left: 100% } .col-sm-push-11 { left: 91.66666667% } .col-sm-push-10 { left: 83.33333333% } .col-sm-push-9 { left: 75% } .col-sm-push-8 { left: 66.66666667% } .col-sm-push-7 { left: 58.33333333% } .col-sm-push-6 { left: 50% } .col-sm-push-5 { left: 41.66666667% } .col-sm-push-4 { left: 33.33333333% } .col-sm-push-3 { left: 25% } .col-sm-push-2 { left: 16.66666667% } .col-sm-push-1 { left: 8.33333333% } .col-sm-push-0 { left: auto } .col-sm-offset-12 { margin-left: 100% } .col-sm-offset-11 { margin-left: 91.66666667% } .col-sm-offset-10 { margin-left: 83.33333333% } .col-sm-offset-9 { margin-left: 75% } .col-sm-offset-8 { margin-left: 66.66666667% } .col-sm-offset-7 { margin-left: 58.33333333% } .col-sm-offset-6 { margin-left: 50% } .col-sm-offset-5 { margin-left: 41.66666667% } .col-sm-offset-4 { margin-left: 33.33333333% } .col-sm-offset-3 { margin-left: 25% } .col-sm-offset-2 { margin-left: 16.66666667% } .col-sm-offset-1 { margin-left: 8.33333333% } .col-sm-offset-0 { margin-left: 0 } } @media (min-width:992px) { .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 { float: left } .col-md-12 { width: 100% } .col-md-11 { width: 91.66666667% } .col-md-10 { width: 83.33333333% } .col-md-9 { width: 75% } .col-md-8 { width: 66.66666667% } .col-md-7 { width: 58.33333333% } .col-md-6 { width: 50% } .col-md-5 { width: 41.66666667% } .col-md-4 { width: 33.33333333% } .col-md-3 { width: 25% } .col-md-2 { width: 16.66666667% } .col-md-1 { width: 8.33333333% } .col-md-pull-12 { right: 100% } .col-md-pull-11 { right: 91.66666667% } .col-md-pull-10 { right: 83.33333333% } .col-md-pull-9 { right: 75% } .col-md-pull-8 { right: 66.66666667% } .col-md-pull-7 { right: 58.33333333% } .col-md-pull-6 { right: 50% } .col-md-pull-5 { right: 41.66666667% } .col-md-pull-4 { right: 33.33333333% } .col-md-pull-3 { right: 25% } .col-md-pull-2 { right: 16.66666667% } .col-md-pull-1 { right: 8.33333333% } .col-md-pull-0 { right: auto } .col-md-push-12 { left: 100% } .col-md-push-11 { left: 91.66666667% } .col-md-push-10 { left: 83.33333333% } .col-md-push-9 { left: 75% } .col-md-push-8 { left: 66.66666667% } .col-md-push-7 { left: 58.33333333% } .col-md-push-6 { left: 50% } .col-md-push-5 { left: 41.66666667% } .col-md-push-4 { left: 33.33333333% } .col-md-push-3 { left: 25% } .col-md-push-2 { left: 16.66666667% } .col-md-push-1 { left: 8.33333333% } .col-md-push-0 { left: auto } .col-md-offset-12 { margin-left: 100% } .col-md-offset-11 { margin-left: 91.66666667% } .col-md-offset-10 { margin-left: 83.33333333% } .col-md-offset-9 { margin-left: 75% } .col-md-offset-8 { margin-left: 66.66666667% } .col-md-offset-7 { margin-left: 58.33333333% } .col-md-offset-6 { margin-left: 50% } .col-md-offset-5 { margin-left: 41.66666667% } .col-md-offset-4 { margin-left: 33.33333333% } .col-md-offset-3 { margin-left: 25% } .col-md-offset-2 { margin-left: 16.66666667% } .col-md-offset-1 { margin-left: 8.33333333% } .col-md-offset-0 { margin-left: 0 } } @media (min-width:1200px) { .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 { float: left } .col-lg-12 { width: 100% } .col-lg-11 { width: 91.66666667% } .col-lg-10 { width: 83.33333333% } .col-lg-9 { width: 75% } .col-lg-8 { width: 66.66666667% } .col-lg-7 { width: 58.33333333% } .col-lg-6 { width: 50% } .col-lg-5 { width: 41.66666667% } .col-lg-4 { width: 33.33333333% } .col-lg-3 { width: 25% } .col-lg-2 { width: 16.66666667% } .col-lg-1 { width: 8.33333333% } .col-lg-pull-12 { right: 100% } .col-lg-pull-11 { right: 91.66666667% } .col-lg-pull-10 { right: 83.33333333% } .col-lg-pull-9 { right: 75% } .col-lg-pull-8 { right: 66.66666667% } .col-lg-pull-7 { right: 58.33333333% } .col-lg-pull-6 { right: 50% } .col-lg-pull-5 { right: 41.66666667% } .col-lg-pull-4 { right: 33.33333333% } .col-lg-pull-3 { right: 25% } .col-lg-pull-2 { right: 16.66666667% } .col-lg-pull-1 { right: 8.33333333% } .col-lg-pull-0 { right: auto } .col-lg-push-12 { left: 100% } .col-lg-push-11 { left: 91.66666667% } .col-lg-push-10 { left: 83.33333333% } .col-lg-push-9 { left: 75% } .col-lg-push-8 { left: 66.66666667% } .col-lg-push-7 { left: 58.33333333% } .col-lg-push-6 { left: 50% } .col-lg-push-5 { left: 41.66666667% } .col-lg-push-4 { left: 33.33333333% } .col-lg-push-3 { left: 25% } .col-lg-push-2 { left: 16.66666667% } .col-lg-push-1 { left: 8.33333333% } .col-lg-push-0 { left: auto } .col-lg-offset-12 { margin-left: 100% } .col-lg-offset-11 { margin-left: 91.66666667% } .col-lg-offset-10 { margin-left: 83.33333333% } .col-lg-offset-9 { margin-left: 75% } .col-lg-offset-8 { margin-left: 66.66666667% } .col-lg-offset-7 { margin-left: 58.33333333% } .col-lg-offset-6 { margin-left: 50% } .col-lg-offset-5 { margin-left: 41.66666667% } .col-lg-offset-4 { margin-left: 33.33333333% } .col-lg-offset-3 { margin-left: 25% } .col-lg-offset-2 { margin-left: 16.66666667% } .col-lg-offset-1 { margin-left: 8.33333333% } .col-lg-offset-0 { margin-left: 0 } } /* bootstrap摘录内容结束 */ #protect4 ul li:nth-child(4n), #eye3 ul li:nth-child(4n){margin-right: 0;} #protect4 ul li h1,#eye3 ul li h1 {text-align: center;line-height: 22px;} #protect4 ul li h1 s {width: 110px;display: inline-block;margin-top: 10px;} #protect4 ul li h2,#eye3 ul li h2 {text-align: center;font-size: 18px;font-weight: 600;line-height: 22px;margin: 20px 10px;color: #333;} #protect4 ul li p,#eye3 ul li p {position: relative;margin: 0 20px;text-align: center;} #protect4 ul li:hover,#eye3 ul li:hover { box-shadow: 0 0 10px rgba(0, 55, 236, 0.4);} #protect4 ul li .anniu{ border-radius: 10px; border: 1px solid #939393; padding: 5px;} #protect4 ul li .anniu:hover{ border-radius: 10px; border: 1px solid #939393; padding: 5px; color:rgba(0, 55, 236, 0.4); } #protect4 .xiaotubiao li img{ border-radius: 85px; box-shadow: 0 0 5px #ccc; -webkit-transition: -webkit-transform 2s ease-out; -moz-transition: -moz-transform 2s ease-out; -o-transition: -o-transform 2s ease-out; -ms-transition: -ms-transform 2s ease-out; } #protect4 .xiaotubiao li img :hover{ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); } /*品牌实力*/ #protect5 { padding: 50px 0;background: #eee;} #protect5 ul {overflow: hidden;margin-top: 55px;padding: 20px;} #protect5 ul li { width: 270px;height: 370px;float: left;padding: 25px;transition: all .2s;margin-bottom: 20px;} #protect5 ul li+li { margin-left: 85px;} #protect5 ul li:nth-child(4){margin-left: 0;} #protect5 ul li h1 { height: 144px;background: url(../images/eye09.png) no-repeat center center;margin-bottom: 20px;} #protect5 ul li h2 { font-size: 18px;color: #333;text-align: center;width: 70%;margin: 30px auto;font-weight: bold;} #protect5 ul li:nth-child(2) h1 { background: url(../images/eye10.png) no-repeat center center;} #protect5 ul li:nth-child(3) h1 { background: url(../images/eye11.png) no-repeat center center;} #protect5 ul li:nth-child(4) h1 { background: url(../images/eye12.png) no-repeat center center;} #protect5 ul li:nth-child(5) h1 { background: url(../images/eye13.png) no-repeat center center;} #protect5 ul li:nth-child(6) h1 { background: url(../images/eye14.png) no-repeat center center;} #protect5 ul li p { position: relative;margin: 10px 0;color: #333;} #protect5 ul li:hover { box-shadow: 0 0 10px rgba(0,0,0,0.4);background: #fff;} .pr_title1 h1{background:#F7F7F7;display:inline-block;padding:0 20px;font-weight:400;color: #333;} /*云边界*/ #area { background: url(../images/area_bj.png) no-repeat center center;height: 405px;} /*需求分析*/ #area1 { padding: 50px 0;background: #fff url(../images/area_bj04.png) no-repeat center bottom;} #area1 .box{ width: 100%;height: 482px;background: url(../images/area_bj05_2.png) no-repeat center center;margin-top: 20px;} #area1 h3 { font-size: 12px;text-align: center;} /*产品概述*/ #area3 .part1 { width: 1078px;height: 348px;background: url(../images/area_bj06.png) no-repeat;margin: 0 auto;} /*深信服云眼*/ #eye { background: url(../images/yunEye.png) no-repeat center center;height: 405px;} /*需求分析*/ #eye1 { padding: 50px 0;overflow: hidden;} #eye1 h1 { margin-bottom: 50px;} #eye1 .left { width: 383px;height: 525px;background: url(../images/umbrella.png) no-repeat;position: relative;} #eye1 .right {width: 740px;height: 525px;overflow: hidden;} #eye1 .right .top,#eye1 .right .middle,#eye1 .right .bottom { overflow: hidden;margin-bottom: 20px;} #eye1 .right .l { width: 85px;height: 85px;float: left;background: url(../images/eye_01.png) no-repeat;} #eye1 .right .r { width: 610px;float: right;} #eye1 .right .r p { background: #eee;padding: 5px 10px;margin-bottom: 5px;color: #333;} #eye1 .right .r ul { list-style: lower-alpha;padding-left: 20px;border-top: 1px dashed #67b3e4;padding-top: 5px;} #eye1 .right .r ul li { font-size: 12px;line-height: 18px;} #eye1 .right .r h2 { font-size: 12px;line-height: 18px;padding-left: 10px;border-top: 1px dashed #67b3e4;padding-top: 5px;} #eye1 .right .middle .l { background: url(../images/eye_02.png) no-repeat;} #eye1 .right .bottom .l { background: url(../images/eye_03.png) no-repeat;} #eye1 .left span { width: 15px;height: 15px;background: rgba(123,189,50,0.5);position: absolute;-webkit-animation: autoScale 1s infinite; -o-animation: autoScale 1s infinite; animation: autoScale 1s infinite;border-radius: 50%;} #eye1 .left .s1 { top: 59px;left: 131px;} #eye1 .left .s2 { top:129px;left: 341px;} #eye1 .left .s3 { top: 348px;left: 340px;} #eye1 .left .s4 { top: 256px;left: 222px;} #eye1 .left .s5 { top: 414px;left: 130px;} #eye1 .left .s6 { top: 236px;left: 0px;} #eye1 .left i { width: 9px;height: 9px;background: #7bbd32;position: absolute;border-radius: 50%;cursor: pointer;} #eye1 .left .i1 { top: 62px;left: 134px;} #eye1 .left .i2 { top: 132px;left: 344px;} #eye1 .left .i3 { top: 351px;left: 343px;} #eye1 .left .i4 { top: 259px;left: 225px;} #eye1 .left .i5 { top: 417px;left: 133px;} #eye1 .left .i6 { top: 239px;left: 3px;} #eye1 .left .squar { width: 320px;height: 60px;background: url(../images/eye_bj04.png) no-repeat;position: absolute;background-size: cover;opacity: 0;} #eye1 .left .squar p { padding: 5px 5px;float: right;width: 290px;background: #fafafa;font-size: 12px;color: #333;} #eye1 .left .l1 { left: 133px;top: 3px;} #eye1 .left .l2 { left: 346px;top: 73px;} #eye1 .left .l3 { left: 344px;top: 287px;} #eye1 .left .l4 { left: 227px;top: 197px;} #eye1 .left .l5 { left: 137px;top: 357px;} #eye1 .left .l6 { left: 0px;top: 176px;} #eye1 .left .l2 { width: 300px;height: 60px;} #eye1 .left .l3 { width: 230px;height: 60px;} #eye1 .left .l3 p{ width: 220px;} #eye1 .left .l5 { width: 280px;height: 60px;} #eye1 .left .l6 { width: 358px;height: 60px;} #eye1 .left .l2 p{ width: 260px;} #eye1 .left .l5 p{ width: 250px;} #eye1 .left .l6 p{ width: 330px;} @-webkit-keyframes rotateL { from{ transform: translateX(40px);opacity:0;} } @-moz-keyframes rotateL { from{ transform: translateX(40px);opacity:0;} } @-ms-keyframes rotateL { from{ transform: translateX(40px);opacity:0;} } @-o-keyframes rotateL { from{ transform: translateX(40px);opacity:0;} } @keyframes rotateL { from{ transform: translateX(40px);opacity:0;} } #eye2 { padding: 50px 0;background: #eee;} #eye2 .bar { width: 100%;height: 53px;background: url(../images/eye_bj05.png) no-repeat center top;margin-top: 30px;margin-bottom: 20px;position: relative;} #eye2 .bar span { position: absolute;font-size: 14px;color: #001e5f;} #eye2 .bar .s1 { left: 290px;} #eye2 .bar .s2 { left: 888px;} #eye2 ul { overflow: hidden;} #eye2 ul li { width: 300px;height: 450px;float: left;position: relative;text-align: center;overflow: hidden;} #eye2 ul li img { width: 300px;height: 450px;position: absolute;top: 0;left: 0;z-index: 1;} #eye2 ul li .zhe,#eye2 ul li .text { width: 100%;height: 450px;background: rgba(0,0,0,0.4);position: absolute;top: 0;left: 0;z-index: 10;} #eye2 ul li .text { z-index: 55;background: none;height: 300px;position: absolute;left: 0;top: 155px;transition: all .3s;} #eye2 ul li:hover .zhe{ background: rgba(0,0,0,0);} #eye2 ul li span { width: 72px;height: 70px;background: url(../images/eye05.png) no-repeat;display: inline-block;} #eye2 ul li:nth-child(2) span { background: url(../images/eye06.png) no-repeat;} #eye2 ul li:nth-child(3) span { background: url(../images/eye07.png) no-repeat;} #eye2 ul li:nth-child(4) span { background: url(../images/eye08.png) no-repeat;} #eye2 ul li:hover .text { top: 75px;} #eye2 ul li .text h2 { text-align: center;font-size: 18px;color: #fff;margin-top: 20px;position: relative;} #eye2 ul li .text h2:after { content: '';width: 20px;height: 1px;background: #fff;position: absolute;bottom: -20px;left: 50%;margin-left: -10px;} #eye2 ul li .box { width: 100%;height: 447px;border-top: 5px solid #001e5f;position: absolute;bottom: -447px;left: 0;z-index: 33;background: rgba(0,30,95,0.4);transition: all .3s;} #eye2 ul li .box2 { background: rgba(120,188,39,0.4);border-top: 5px solid #78bc27;} #eye2 ul li .box3 { background: rgba(235,97,30,0.4);border-top: 5px solid #eb611e;} #eye2 ul li .box4 { background: rgba(0,136,156,0.4);border-top: 5px solid #00889c;} #eye2 ul li .box p { margin: 0 20px;text-align: justify;color: #fff;margin-top: 230px;} #eye2 ul li:hover img{ -webkit-filter: blur(5px); filter: blur(9px);} #eye2 ul li:hover .box { bottom: 0;} #eye3 ul li h1 s {width: 108px; height: 123px;background: url(../images/eye_spri01.png) no-repeat 0 0;display: inline-block;margin-top: 10px; } #eye3 ul li:nth-child(2) h1 s { background: url(../images/eye_spri01.png) no-repeat -115px 0 ;} #eye3 ul li:nth-child(3) h1 s { background: url(../images/eye_spri01.png) no-repeat -230px 0 ;} #eye3 ul li:nth-child(4) h1 s { background: url(../images/eye_spri01.png) no-repeat -345px 0 ;} #eye3 ul .c1:hover h1 s { background: url(../images/eye_spri01.png) no-repeat 0 -125px;} #eye3 ul .c2:hover h1 s { background: url(../images/eye_spri01.png) no-repeat -115px -125px;} #eye3 ul .c3:hover h1 s { background: url(../images/eye_spri01.png) no-repeat -230px -125px;} #eye3 ul .c4:hover h1 s { background: url(../images/eye_spri01.png) no-repeat -345px -125px;} #eye4 { padding: 50px 0;background: #fafafa;} #eye4 ul { margin-top: 55px;display: flex;} #eye4 ul li { flex:1;height: 470px;float: left;transition: all 1s;padding: 20px 0;} #eye4 ul li+li { margin-left: 20px;} #eye4 ul li:nth-child(4){margin-right: 0;} #eye4 ul li h1 { text-align: center;} #eye4 ul li h1 s {width: 166px; height: 181px;background: url(../images/eye09.png) no-repeat;display: inline-block;margin-top: 10px;} #eye4 ul li:nth-child(2) h1 s{ background: url(../images/eye10.png) no-repeat;} #eye4 ul li:nth-child(3) h1 s{ background: url(../images/eye11.png) no-repeat;} #eye4 ul li:nth-child(4) h1 s{ background: url(../images/eye12.png) no-repeat;} #eye4 ul li:nth-child(5) h1 s{ background: url(../images/eye13.png) no-repeat;} #eye4 ul li:nth-child(6) h1 s{ background: url(../images/eye14.png) no-repeat;} #eye4 ul li h2 { text-align: center;font-size: 18px;font-weight: 600;margin: 22px 0;} #eye4 ul li p { position: relative;margin: 0 10px;} #eye4 ul li:hover {box-shadow: 0 0 10px rgba(0,0,0,0.4);} .kk_page01{ width: 100%;} .kk_page01 ul{ display:table; width:100%; margin: 0;padding: 0;} .kk_page01 ul li{display:table-cell;float:left;width: 25%;text-align:center;vertical-align:middle;padding: 0;} .kk_page01 ul li h3{ color: #333; font-size: 18px;font-weight: 700;line-height: 1.3;width: 80%;margin-left: auto;margin-right: auto; margin-top: 20px; margin-bottom: 10px} .kk_page01 ul li b{background-repeat:no-repeat;background-position:center center;width: 156px;height: auto;display:inline-block;vertical-align:middle;margin-bottom: 10px;} .kk_page01 ul li:hover{ -webkit-transition:0.75s;-moz-transition:0.75s;-ms-transition:0.75s;-o-transition:0.75s;transition:0.75s;} .kk_page01 ul li:hover b{ -webkit-transition:0.75s;-moz-transition:0.75s;-ms-transition:0.75s;-o-transition:0.75s;transition:0.75s;} .kk_page01 ul li:hover h3{color:#008cd6;-webkit-transition:0.75s;-moz-transition:0.75s;-ms-transition:0.75s;-o-transition:0.75s;transition:0.75s;} .kk_page01 ul li:hover span{color:#008cd6;-webkit-transition:0.75s;-moz-transition:0.75s;-ms-transition:0.75s;-o-transition:0.75s;transition:0.75s;} .zzz3{display:block;margin-top: 20px;line-height: 1.75;color: #787878;overflow: hidden;font-size: 14px;font-weight: 400;text-transform:uppercase;} /*核心优势*/ #technology {width: 100%;overflow: hidden;display: block; padding:80px 0 40px 0;} #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: 20px;width: 25%;transition: all .2s;text-align: center;} #technology ul li+li { margin-left: 55px;} #technology ul li h1 {width:110px;margin: 0 auto;} #technology ul li h2 {text-align: center;font-size: 18px;font-weight: 600;margin: 22px 0;color: #333;} #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; } @media all and (max-width:980px){ #protect4 ul li,#eye3 ul li {width: 48%;height: auto;float: left;transition: all .2s;margin-right: 2%;padding: 20px 0;} .kk_page01 ul li{display:table-cell;float:left;width: 50%;text-align:center;vertical-align:middle;padding: 2.6em 0 1.6em 0;} .container>h1 {text-align: center;position: relative;color: #333;font-size: 30px;line-height: 26px;font-weight: 400;margin-bottom: 55px;} } @media all and (max-width:640px){ #protect4 ul li,#eye3 ul li {width: 100%;height: auto;float: left;transition: all .2s;margin: 0;padding: 20px 0;} .kk_page01 ul li{display:table-cell;float:left;width: 100%;text-align:center;vertical-align:middle;padding: 2.6em 0 1.6em 0;} } .title22{font-family: microsoft yahei;font-size: 26px;color:#fff;text-align: center;padding-top: 95px;line-height: 1.4;} .title22 span{font-family:arial;font-size: 14px;color:#cbcbcb;display: block;} .square{text-align: center;margin: 15px 0 0px 0;}