#banner{position: relative;width: 100%;z-index: 1;} #banner .swiper-container{overflow: hidden;} #banner .swiper-slide{width: 100%;position: relative;cursor: pointer;} #banner .swiper-slide a{height: 100%;width: 100%;float: left;min-width:1200px;position:relative;} #banner .swiper-slide a img{display:block;width:100%;} #banner .swiper-slide .g{position: absolute;height: 100%;top:0;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);} #banner .swiper-slide .word{position: absolute;top: 20%;left: 38px;} #banner .swiper-slide .word h2{color: #fff;font-size: 67.68px;font-weight: normal;padding-bottom: 30px;} #banner .swiper-slide .word p{color: #fff;font-size: 40PX;font-weight: normal;} #banner .swiper-slide .word h3{padding-top: 40px;} #banner .swiper-slide .word h3 em{color: #fff;font-size: 22.56px;padding: 7px 30px;border-radius: 50px;border:1px solid #fff;margin-right: 20px;} #banner .swiper-slide .zs{position: absolute;top:25%;right: 0;} #banner .swiper-button-prev{width:175px;height:100%;margin-top:0;position: absolute;left: 0;top:0;background:none;} #banner .swiper-button-next{width:175px;height:100%;margin-top:0; position: absolute;right:0;top:0;background:none;} #banner .swiper-button-prev:hover{visibility:visible;background:url(../images/index/r1.png) center left no-repeat;} #banner .swiper-button-next:hover{visibility:visible;background:url(../images/index/r2.png) center right no-repeat;} #banner .control-cover1{position:absolute;top:0;right:0;height:100%;width:175px;z-index:1;} #banner .control-cover2{position:absolute;top:0;left:0;height:100%;width:175px;z-index:1;} #banner .swiper-pagination{position: absolute;bottom: 35px;cursor: pointer;} #banner .swiper-pagination li{margin-right: 10px;display: inline-block;font-size: 0;height: 16px;width: 16px;} #banner .swiper-pagination li span{display: block;text-align: center;float: left;width: 0px;} #banner .swiper-pagination li:nth-child(1){ width: 12px;height: 16px;background: url(../images/index/01.png) left center no-repeat; } #banner .swiper-pagination li:nth-child(2){ width: 3px;height: 16px;background: url(../images/index/02.png) left center no-repeat; } #banner .swiper-pagination li:nth-child(3){ width: 13px;height: 16px;background: url(../images/index/03.png)left center no-repeat; } #banner .swiper-pagination li:nth-child(4){ width: 14px;height: 16px;background: url(../images/index/04.png) left center no-repeat; } #banner .swiper-pagination li:nth-child(5){ width: 16px;height: 16px;background: url(../images/index/05.png) left center no-repeat; } #banner .swiper-pagination li:nth-child(6){ width: 16px;height: 16px;background: url(../images/index/06.png) left center no-repeat; } #banner .swiper-pagination li:nth-child(1) span{ width: 12px;height: 16px;background: url(../images/index/01.png) left center no-repeat; } #banner .swiper-pagination li:nth-child(2) span{ width: 3px;height: 16px;background: url(../images/index/02.png) left center no-repeat; } #banner .swiper-pagination li:nth-child(3) span{ width: 13px;height: 16px;background: url(../images/index/03.png)left center no-repeat; } #banner .swiper-pagination li:nth-child(4) span{ width: 14px;height: 16px;background: url(../images/index/04.png) left center no-repeat; } #banner .swiper-pagination li:nth-child(5) span{ width: 16px;height: 16px;background: url(../images/index/05.png) left center no-repeat; } #banner .swiper-pagination li:nth-child(6) span{ width: 16px;height: 16px;background: url(../images/index/06.png) left center no-repeat; } #banner .swiper-pagination li.active:nth-child(1) span{ width: 12px;height: 16px;background: url(../images/index/h01.png) left center no-repeat; } #banner .swiper-pagination li.active span{width: 16px; -webkit-animation:WS 6s ease-in-out; -moz-animation:WS 6s ease-in-out; -ms-animation:WS 6s ease-in-out; animation:WS 6s ease-in-out;} #banner .swiper-pagination li.active:nth-child(2) span{ width: 3px;height: 16px;background: url(../images/index/h02.png) left center no-repeat; } #banner .swiper-pagination li.active:nth-child(3) span{ width: 13px;height: 16px;background: url(../images/index/h03.png) left center no-repeat; } #banner .swiper-pagination li.active:nth-child(4) span{ width: 14px;height: 16px;background: url(../images/index/h04.png) left center no-repeat; } #banner .swiper-pagination li.active:nth-child(5) span{ width: 16px;height: 16px;background: url(../images/index/h05.png) left center no-repeat; } #banner .swiper-pagination li.active:nth-child(6) span{ width: 16px;height: 16px;background: url(../images/index/h06.png) left center no-repeat; } #banner .swiper-pagination .swiper-pagination-bullet{width:12px;height:12px;background-color:#ffffff;opacity:1;border-radius:12px;transition-duration:0.5s;} #banner .swiper-pagination .swiper-pagination-bullet-active{width:44px;background-color:#19458d;} /*公共title*/ .title-h{position: relative;padding:30px 0;} .title-h em{color: #333;font-family: 'arial';font-size: 28px;font-weight:bold;} .title-h em span{font-family: '微软雅黑';color: #176fc0;} .title-h .mor{position: relative;width: 28px;height: 28px;} .title-h .mor a{cursor: pointer;float:left;width:100%;height: 100%;background: url(../images/mor.png) center no-repeat;} .title-h .mor:hover a{background: url(../images/morh.png) center no-repeat;} /*公共title*/ .index01{background:url(../images/index/index01bg.png) center no-repeat;} .index02{background:url(../images/index/index02bg.png) center no-repeat;} .index03{background:url(../images/index/index03bg.png) center no-repeat;} .content{position: relative;width: 100%;} .product-banner{width: 100%;position: relative;height: 213px;} .product-banner .swiper-slide{margin-right: 25px; -webkit-transition: all ease-in .3s;transition: all ease-in .3s;} .product-banner .swiper-slide a{height: 213px;width: 100%;float: left;} .product-banner .swiper-container{width: 100%;position: relative;height: 100%;} .product-banner .swiper-button-prev{position: absolute;left:3%;top: 50%;width: 66px;height: 76px;background: #242c38 url(../images/index/le.png) center no-repeat;opacity: .4;z-index: 99;margin-top:-38px;} .product-banner .swiper-button-next{position: absolute;right:3%;top: 50%;width: 66px;height: 76px;background: #242c38 url(../images/index/ri.png) center no-repeat;opacity: .4;z-index: 99;margin-top:-38px;} .product-banner .swiper-button-prev:hover{background: #176fc0 url(../images/index/le.png) center no-repeat;opacity: 1;} .product-banner .swiper-button-next:hover{background: #176fc0 url(../images/index/ri.png) center no-repeat;opacity: 1;} .product-banner .swiper-slide b{position: absolute;width: 100%;height: 100%;background: url(../images/index/bg01.png) center no-repeat;} .product-banner .swiper-slide .lag{transition: all 0.5s; position: absolute;width: 100%;height: 100%;background:url(../images/index/bg.png) center no-repeat;opacity: 0;} .product-banner .swiper-slide .con h2{width:100%;box-sizing:border-box; z-index:1;display:block;position: absolute;top:15%;color: #fff;font-size: 20px;padding-left: 35px;background: url(../images/h.png) left center no-repeat;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .product-banner .swiper-slide .con span{width:100%;box-sizing:border-box;z-index:1;display:block;position: absolute;top:31%;color: #fefefe;font-size: 14px;font-family: 'arial';padding-left: 35px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .product-banner .swiper-slide .con p{z-index:1;display: block;position: absolute;top: 45%;color: #fff;font-size: 15px;padding:0 35px;width: 100%;box-sizing:border-box;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;visibility:hidden;} .product-banner .swiper-slide .con em{z-index:1;display: block;position: absolute;bottom:6%;left:35px;display:none; } .product-banner .swiper-slide .con{position: absolute;bottom: -50%;z-index: 2;left: 0;width: 100%;height: 100%;display: block;transition: bottom .3s;} .product-banner .swiper-slide.active{margin:0 auto; -webkit-transition: all ease-in .3s;transition: all ease-in .3s;} .product-banner .swiper-slide.active .lag{display: block;opacity: 1;} .product-banner .swiper-slide.active .con{bottom: 0;} .product-banner .swiper-slide.active .lag h2{background: url(../images/h2.png) left center no-repeat;} .product-banner .swiper-slide.active .con p{visibility:visible;} .case{position: relative;width: 100%;height: 485px;} .case .swiper-container{height: 485px;position:relative;overflow: hidden;} .case .swiper-container .swiper-slide{width: 100%;position: relative;height: 100%;z-index: 2;} .case .swiper-container .swiper-slide b{position: absolute;width: 100%;display: block;height: 100%;} .case .swiper-container .swiper-slide h5{padding-top: 95px;color: #fff;font-size: 55px;text-align: center;font-weight: normal;z-index: 2;} .case .swiper-container .swiper-slide h5 em{padding-left: 15px;} .case .swiper-container .swiper-slide p{line-height: 1.8rem;padding:30px 0 45px 0;font-weight: normal;color: #fff;font-size: 16px;text-align: center;margin:0 auto;width: 875px;} .case .swiper-container .swiper-slide .de{width: 120px;margin:0 auto;height: 35px;} .case .swiper-container .swiper-slide .de a{font-weight: normal;line-height: 35px;border-radius: 5px;float: left;height: 35px;background: #0994dc;text-align: center;width: 100%;color: #fff;font-size: 14px;} .case .swiper-container .swiper-pagination{bottom: 5%;} .case .swiper-container .swiper-pagination-bullet{width: 40px;height: 6px;background: #fff;opacity: 1;border-radius:0;} .case .swiper-container .swiper-button-next{right:90px;} .case .swiper-container .swiper-button-prev{left:90px;} /*分页器*/ .case .swiper-pagination-bullet { display: inline-block; width: 40px; height: 30px; margin: 0 3px; cursor: pointer; background: none; border-radius:0; opacity: 1; } .case .swiper-pagination-bullet span { width: 40px; height: 6px; display: block; background:#fff; opacity: 1; } .case .swiper-pagination-bullet-active span{ background:#0994dc; opacity: 1; } .case .autoplay .swiper-pagination-bullet-active span{ background: #fff; opacity: 1; } .case .swiper-pagination-bullet i{ background: #0994dc; opacity: 1; height: 6px; transform:scaleX(0); transform-origin: 0; display: block; } .case .autoplay .firsrCurrent i{ transition:transform 2.9s linear; transform:scaleX(1); } .case .autoplay .current i{ transition:transform 4s linear; transform:scaleX(1); } .case .autoplay .replace span{ background:#0994dc; opacity: 1; } .Technology{position: relative;padding-bottom: 53px;} .Technology ul li{box-shadow: 0 0 10px 1px #d7d7d7;background: #fff;float: left;width: 284px;margin-right: 20px;padding-bottom: 25px;} .Technology ul li a{float: left;} .Technology ul li:last-child{margin-right: 0;} .Technology ul li .img{height: 213.13px;width:284px;overflow: hidden;} .Technology ul li .img img{width: 100%;transition-duration: .5s;} .Technology ul li h2{color: #333;font-size: 20px;padding:20px 15px 10px 15px;font-weight: bold;} .Technology ul li p{padding: 0 15px;color: #666;font-size: 14px;line-height: 1.5rem;padding-bottom: 10px;} .Technology ul li .cka{margin-right: 15px;font-size: 14px;color: #333;background: url(../images/index/am.png) right center no-repeat;padding-right: 25px;float: right;} .Technology ul li:hover{box-shadow: 0 0 10px 5px #ccc;margin-top: -13px;transition:all 0.4s;} .Technology ul li:hover h2{color: #176fc0;} .Technology ul li:hover .img img{transform: scale(1.03);} .Technology ul li:hover .cka{color: #176fc0;background: url(../images/index/am02.png) right center no-repeat;} .title-h .mor a,.case .swiper-container .swiper-slide em img,.product-banner .swiper-slide .lag em{transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;} .title-h .mor a:hover,.case .swiper-container .swiper-slide em img:hover,.product-banner .swiper-slide .lag em:hover{transform: translate(8px,0);-webkit-transform: translate(8px,0);-moz-transform: translate(8px,0);-o-transform: translate(8px,0);-ms-transform: translate(8px,0);} @keyframes WS { 0% {width:0px;} 100% {width:16px;} } @-webkit-keyframes WS { 0% {width: 0px;} 100% {width: 16px;} } @-moz-keyframes WS { 0% {width: 0px;} 100% {width: 16px;} } @-o-keyframes WS { 0% {width: 0px;} 100% {width: 16px;} }