body{overflow-x: hidden;} .banner{width:100%;color: #fff;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;} .banner .bannerLeft{float: left;text-align: left;transform: translateX(-100%);-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-o-transform: translateX(-100%);opacity: 0;} .banner .bannerLeft h2{font-size: 45px; line-height: 41px;margin-bottom: 15px;font-weight: normal;margin-top: 40px; letter-spacing: 7px; } .banner .bannerLeft span{font-size: 18px;letter-spacing: 3px;display: block;} .banner .bannerLeft p{font-size: 18px;display:inline-block;padding: 0 20px; height: 40px;line-height: 40px;text-align: center; background: #203471;margin-top: 17px;} .banner .divBox a{float: right;color: #fff;transform: translateX(100%);-webkit-transform: translateX(100%);-moz-transform: translateX(100%);-o-transform: translateX(100%);opacity: 0;} .banner .more span{background-image: url(../img/ico-right.png);color: #fff;} .indexBan{width: 100%;} .indexBan .swiper-wrapper{width: 100%;} .indexBan .swiper-slide{position: relative;width: 100%;overflow: hidden;} .indexBan .swiper-slide .divBox{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);} .indexBan .swiper-slide img{width: 100%;display: block;} .banner .bannerLeft div{width: 172px;height: 118px;font-size: 18px;color: #fff;padding: 16px 0 0 23px;font-weight: bold;position: absolute;top: -135px;left: 0;box-sizing: border-box;line-height: 28px} .banner .divBox a, .banner .bannerLeft{transition: all 0.8s ease-in-out 0.4s;} .banner .swiper-pagination{left: 50%;} /*.banner .swiper-button-prev{background: #fff;}*/ /*.banner .swiper-button-next{background: #fff;}*/ .about{padding: 90px 0 110px;} .about .aboutLeft{width: 580px;float: right;} .about .aboutRight{float: left;background: url(../img/background01.jpg) no-repeat left center;position: relative;width: 620px;} .about .h2Box{color: #444;text-align: left;} .about .pBox{color: #bcbcbc;font-size: 22px;text-align: left;width: auto;display: inline-block;} .about .pBox:after{width: 80px;height: 5px;left: 0;margin-left: 0; bottom: -3px;background: #474747;} .about .aboutUs{margin-top: 40px;color: #444444;line-height: 26px;} .about .more{border-color: #E7E7E7;margin-top: 25px;} /*.about .more:hover{color: #fff;}*/ .about .aboutRight .aboutRight-title{position: absolute;left: 128px;top: 77px;} .about .aboutRight ul{float: right;width: 190px;border-top: 1px solid #E0E0E0;} .about .aboutRight ul li{padding: 45px 0 25px;text-align: center;border-bottom: 1px solid #E0E0E0;} .about .aboutRight ul li h3{font-size: 48px;font-weight: bold;color: #474747;} .about .aboutRight ul li span{width: 36px;height: 1px;background: #E0E0E0;display: block;margin: 12px auto 12px;} .about .aboutRight ul li p{color: #313131;} .about .aboutRight .aboutRight-title h2{font-family: arial;font-size: 38px;color: #B19464;} .about .aboutRight .aboutRight-title p{font-size: 12px;color: rgba(0,0,0,0.6);background: #fff;} .about .more span{background-image: url(../img/ico-right02.png);display: inline-block} .history{padding: 70px 70px 70px 50px;text-align: center;position: relative;background-attachment: fixed !important;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;} .history .h2Box{color: #fff;} .history .pBox{color: #AFAFB1;border-bottom-color: #6E6E6E;margin-bottom: 90px;} .history .pBox:after{background: rgba(255,255,255,0.2);} .history .swiper-slide a{width: 235px; height: 400px;display: block; border: 1px solid #7E7F88;padding: 60px 48px 0;position: relative; box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;text-align: left;} .history .historyList{overflow: hidden;margin-bottom: 80px;padding: 2px 0;} .history .swiper-pagination{left: 50%;-webkit-transform: translate3d(-50%,0,0); -ms-transform: translate3d(-50%,0,0); -o-transform: translate3d(-50%,0,0); transform: translate3d(-50%,0,0);} .history .swiper-pagination-bullet{background: rgba(0,0,0,0);border: 1px solid #F7AD39;width: 15px;height: 15px;margin: 0 5px;} .history .swiper-pagination-bullet-active{background: #B19464;box-shadow: 0 0 1px 3px rgba(177,148,100,0.6);border-color: #B19464;} .history .swiper-slide a time{font-size: 60px;color: #fff;} .history .swiper-slide a span{font-size: 18px;display: block;margin-bottom: 20px;color: rgba(255,255,255,0.2);} .history .swiper-slide a span.historyBg{background: url(../img/ico-botbai.png) no-repeat center;height: 23px;} .history .swiper-slide a div{height: 150px;position: relative;} .history .swiper-slide a div p{font-size: 14px;line-height: 24px;width: 100%;height: 100%; overflow: hidden;color: #fff;} .history .swiper-slide a div p, .history .swiper-slide a div img{position: absolute;top: 50%;left: 50%; transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);} .history .swiper-slide a div img{width: 0; opacity: 0;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-o-border-radius: 50%;} .history .swiper-slide a:hover{border-color: #B19464;} .history .swiper-slide a:hover:after{position: absolute;width: 100%;height: 100%;border: 3px solid #B19464;content: '';display: block;top: -3px;left: -3px;} .history .swiper-slide a:hover time, .history .swiper-slide a:hover span{color: #B19464;} .history .swiper-slide a:hover span.historyBg{background-image: url(../img/ico-bothuang.png);} .history .swiper-slide a:hover div p{width: 0;opacity: 0;height: 0;} .history .swiper-slide a:hover div img{width: 100%;opacity: 1;} .history .swiper-slide a div img, .product .productClass li a, .product .products li a.productMan, .product .products li a.productBtn{transition: all 0.6s;-webkit-transition: all 0.6s;-moz-transition: all 0.6s;-o-transition: all 0.6s;} .product{padding: 90px 0;background: #fff;} .product .divBox{text-align: center;} .product .productClass{display: inline-block;margin-bottom: 60px;} .product .productClass li{float: left;margin-right: 1px;position: relative;} .product .productClass li:after{position: absolute;content: '';display: block;width: 1px; background: #D6D6D6; height: 15px;right: -1px;top: 10px;} .product .productClass li:last-child:after{display: none;} .product .productClass li a{color: #444444;padding: 0 40px;height: 36px;line-height: 36px;text-align: center;display: block;} .product .productClass li.active a, .product .productClass li:hover a{background: #203471;color: #fff;} .product .products{width: 100%;display: none;} .product .products.active{display: block;} .product .products>li{width: 23%;margin:0 1%;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;float: left; position: relative;padding-bottom: 65px;} .product .products>li:last-child{border-right: none;} .product .products li a{display: block;color: #fff;position: relative;width: 100%;height: 363px;} .product .products li a img{max-width: 100%; display: block;position: absolute; /*top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);*/ } .product .products li a.productMan{position: absolute;left: 0;top: 0;width: 100%;height: 100%;padding: 45px 0 0 50px;box-sizing: border-box; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;background: rgba(5,79,160,0.7);opacity: 0;z-index: 1;} .product .products li a.productMan h3{font-size: 18px;margin-bottom: 45px;position: relative;margin-left: -50px;text-align: center;} .product .products li a.productMan h3:after{position: absolute;content: '';display: block;width: 30px;height: 2px;background: #fff;left: 50%;margin-left: -15px;bottom: -24px;} .product .products li a.productMan p, .product .products li a.productMan ol{text-align: left;} .product .products li a.productMan p{margin-bottom: 5px;} .product .products li a.productMan ol{margin-left:0;} .product .products li a.productMan ol li{margin-bottom: 5px;text-indent:0;list-style: none;} .product .products li a.productBtn{width: 34px;height: 34px;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-moz-border-radius: 50%; border: 2px solid #ccc;background: url(/res/images/ico-product-right.png) no-repeat center;z-index: 11;position: absolute; left: 50%;bottom: 30px;margin-left: -17px;} .product .products>li:hover a.productMan{opacity: 1;} .product .products>li:hover a.productBtn{border-color: #fff;background-image: url(/res/images/ico-product-right2.png);} .product .more{margin: 0 auto;border-color: #E0E0E0;color: #898989;} .product .more:hover{color: #fff;} .case{padding-top: 75px;height: 402px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;} .case .h2Box{color: #fff;} .case .pBox{color: #9e9e9e;} .case .divBox{position: relative;} .case .cases{background: #203471;padding: 35px 0;position: absolute;left: 0;margin-top: 55px;width: 70%;} .case .cases ul{margin-left: 30px;width: 145%;} .case .cases ul li{float: left;position: relative;width: 293px;height: 199px;overflow: hidden;} .case .cases ul li a{display: block;} .case .cases ul li.caseFirst{width: 293px;height: 199px;text-align: center;} .case .cases ul li.caseFirst span{width: 75px;height: 75px;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-moz-border-radius: 50%; background: #B19464 url(/res/images/ico-caseboot.png) no-repeat center;display: block;margin: 23px auto;position: relative;} .case .cases ul li.caseFirst span:before, .case .cases ul li.caseFirst span:after{content: '';display: block; width: 100%;height: 100%;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-moz-border-radius: 50%; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);border: 1px solid #B19464; box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;} .case .cases ul li.caseFirst:hover span:before{width: 150%;height: 150%;opacity: 0;} .case .cases ul li.caseFirst:hover span:after{width: 130%;height: 130%;opacity: 0;} .case .cases ul li.caseFirst span:after{transition: all 0.7s ease 0.2s;-webkit-transition: all 0.7s ease 0.2s;-moz-transition: all 0.7s ease 0.2s;-o-transition: all 0.7s ease 0.2s;} .case .cases ul li.caseFirst span:before{transition: all 0.8s;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;-o-transition: all 0.8s;} .case .cases ul li.caseFirst h3{font-size: 24px;color: #fff;margin-bottom: 7px;} .case .cases ul li.caseFirst h4{font-size: 12px;color: #BFBFBF; color: rgba(255,255,255,0.5);position: relative;} .case .cases ul li.caseFirst h4:before, .case .cases ul li.caseFirst h4:after{content: '';display: block;width: 25px;height: 1px;background: #BFBFBF; background: rgba(255,255,255,0.5);position: absolute;top: 50%;} .case .cases ul li.caseFirst h4:before{left:40px} .case .cases ul li.caseFirst h4:after{right: 40px;} .case .cases ul li img{width: 100%;display: block;} .case .cases ul li p{position: absolute;bottom: 0;left: 0;width: 100%;height: 40px;text-align: center;line-height: 40px;font-size: 14px; color: #fff;background: rgba(32,50,106,0.6);} .case .cases ul li:hover p{height: 100%;background: rgba(32,50,106,0.5);line-height: 199px;font-size: 18px;} .case .cases ul li.cseLast{width: 291px;height: 199px;border: 10px solid #B19464;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;position: relative;} .case .cases ul li.cseLast .more1{position: absolute;top: 50%;margin-top: -21px; right: -10px;border: 1px solid #E0E0E0;} .case .cases ul li.cseLast .more1 span{width: 125px;height: 40px;text-align: center;line-height: 40px;color: #8E8E8E;display: inline-block;vertical-align: middle;} .case .cases ul li.cseLast .more1 span.spanBg{background: #B19464 url(/res/images/ico-right.png) no-repeat center;} .case .cases ul li.cseLast .more1:hover span{background: #B19464;color: #fff;} .case .cases ul li.cseLast .more1:hover span.spanBg{background: #fff url(/res/images/ico-right02.png) no-repeat center;} .news{background: #F4F4F4;padding: 70px 0;} .news .h2Box, .team .h2Box, .cantact .h2Box{color: #444444;} .news .pBox, .team .pBox{color: #d1d1d1;margin-bottom: 80px;} .news .pBox:after, .team .pBox:after, .cantact .pBox:after, .case .pBox:after{background: #D1D1D1;} .news .newsBox{float: left;width: 553px;} .news .companyNews{float: right;width: 553px;} .news h3{font-size: 16px;color: #203471;margin-bottom: 12px;} .news h3 span{font-size: 12px;color: #898989;margin-left: 5px;} .news .newsBox div, .news .companyNews div{padding: 12px 0;border-top: 1px solid #EDEDED;border-bottom: 1px solid #EDEDED;} .news .divBox div div a:first-child{width: 175px;float: left;background: #B19464;color: #fff;position: relative;height: 145px;} .news .divBox div div a:first-child p{position: absolute;top: width:80px;top: 50%;left: 50%;transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%);} .news .divBox div div a:first-child time{font-size: 30px;display: block;} .news .divBox div div a:first-child span{font-size: 14px;display: inline-block;position: relative;} .news .divBox div div a:first-child span:after{content: '';display: block;width: 100%;height: 1px;background: #fff;position: absolute;left: 0;bottom: -10px;} .news .divBox div div a:nth-child(2){float: left;} .news .divBox div div a:nth-child(2) img{width: 100%;display: block;} .news .divBox div div a:last-child{float: left;width: 100%;} .news .divBox div.companyNews div a:first-child, .news .divBox .newsBox div a:first-child{background: #203471;} .news .divBox div.companyNews div:hover a:first-child, .news .divBox .newsBox div:hover a:first-child{background: #B19464;} .news .newsBox:hover h3,.news .companyNews:hover h3{color: #B19464;} .news .divBox div div a:last-child{color: #333;margin: 25px 0 10px;} .news .divBox div div a:last-child span, .news .divBox div div a:last-child p{font-size: 18px;color: #333;float: left;} .news .divBox div div a:last-child time, .newsList li a time{float: right;font-size: 15px;margin-top: 3px;color: #333;} .news .divBox div div a:last-child span, .newsList li a span{margin-right: 5px;position: relative;} .news .divBox div div a:last-child span:after, .newsList li a span:after{position: absolute;content: '';display: block;right: -5px;top: 4px;width: 1px;height: 17px;background: #333;} .news .divBox div div a:last-child p, .newsList li a p{margin-left: 5px;} .news .divBox div.newsBox div a:last-child:hover span, .news .divBox div.newsBox div a:last-child:hover p, .news .divBox div.newsBox div a:last-child:hover time, .news .divBox div.companyNews div a:last-child:hover span, .news .divBox div.companyNews div a:last-child:hover p, .news .divBox div.companyNews div a:last-child:hover time{color: #203471;} .news .divBox div.newsBox:hover div a:last-child:hover span, .news .divBox div.newsBox:hover div a:last-child:hover p, .news .divBox div.newsBox:hover div a:last-child:hover time, .news .divBox div.companyNews:hover div a:last-child:hover span, .news .divBox div.companyNews:hover div a:last-child:hover p, .news .divBox div.companyNews:hover div a:last-child:hover time{color: #B19464;} .newsList{padding: 20px 0;} .newsList li{margin-bottom: 10px;} .newsList li a span, .newsList li a p{font-size: 16px;color: #333;float: left;} .newsList li a span:after{} .newsBox .newsList a:last-child:hover span, .newsBox .newsList a:last-child:hover p, .newsBox .newsList a:last-child:hover time{color: #B19464;} .companyNews .newsList a:last-child:hover span, .companyNews .newsList a:last-child:hover p, .companyNews .newsList a:last-child:hover time{color: #203471;} .news .more, .team .more{margin: 65px auto 0;border: 1px solid #E0E0E0;} .team{padding: 65px 0 75px;} .team .more{margin: 75px auto 0;} .teamBar{position: relative;padding: 0 55px;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;} .teamItem .swiper-slide a{display: block;position: relative;width: 255px;} .teamItem .swiper-slide a img{display: block;width: 100%;} .teamItem .swiper-slide a div{width: 100%;height: 100px;background: #E8E8E8;padding: 25px 20px; box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;left: 0;bottom: 0;} .teamItem .swiper-slide a div p{color: #444;font-size: 16px;margin-bottom: 10px;} .teamItem .swiper-slide a div span{color: #a3a3a3;font-size: 12px;} .teamItem .swiper-slide a>span{width: 35px;height: 35px;display: block;position: absolute;right: 20px;bottom: 32px; border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-moz-border-radius: 50%;opacity: 0; background: #fff url(/res/images/ico-product-right.png) no-repeat center;} .teamItem .swiper-slide:hover a>span{opacity: 1;} .teamItem .swiper-slide:hover a div{background: #B19464;} .teamItem .swiper-slide:hover a div p, .teamItem .swiper-slide:hover a div span{color: #fff;} /*.swiper-button-prev, .swiper-container-rtl .swiper-button-next{background: url(/res/images/ico-team-right01.png) no-repeat center;} .swiper-button-prev:hover, .swiper-container-rtl .swiper-button-next:hover{background-image: url(../img/ico-team-left.png);} .swiper-button-next, .swiper-container-rtl .swiper-button-prev{background: url(../img/ico-team-right02.png) no-repeat center;} .swiper-button-next:hover, .swiper-container-rtl .swiper-button-prev:hover{background-image: url(../img/ico-team-right.png);}*/ /*.more:hover span{background-image: url(../img/ico-right.png); color: #fff;}*/ .banner .swiper-slide-active .bannerLeft{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} .banner .swiper-slide-active a{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} /*.banner .bannerLeft{animation: banF 1.2s;} .banner .divBox a{animation: banR 1.2s;}*/ /*@keyframes banF{ from{transform: translateX(-100%);-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-o-transform: translateX(-100%);opacity: 0;} to{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} } @-webkit-keyframes banF{ from{transform: translateX(-100%);-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-o-transform: translateX(-100%);opacity: 0;} to{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} }@-moz-keyframes banF{ from{transform: translateX(-100%);-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-o-transform: translateX(-100%);opacity: 0;} to{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} }@-o-keyframes banF{ from{transform: translateX(-100%);-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-o-transform: translateX(-100%);opacity: 0;} to{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} }*/ /*@keyframes banR{ from{transform: translateX(100%);-webkit-transform: translateX(100%);-moz-transform: translateX(100%);-o-transform: translateX(100%);opacity: 0;} to{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} } @-webkit-keyframes banR{ from{transform: translateX(100%);-webkit-transform: translateX(100%);-moz-transform: translateX(100%);-o-transform: translateX(100%);opacity: 0;} to{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} } @-moz-keyframes banR{ from{transform: translateX(100%);-webkit-transform: translateX(100%);-moz-transform: translateX(100%);-o-transform: translateX(100%);opacity: 0;} to{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} } @-o-keyframes banR{ from{transform: translateX(100%);-webkit-transform: translateX(100%);-moz-transform: translateX(100%);-o-transform: translateX(100%);opacity: 0;} to{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} }*/ .about.active .aboutLeft{animation: act 1.2s;} .about.active .aboutRight ul{animation: act1 1.2s;} .history .h2Box, .history .pBox, .product .h2Box, .case .h2Box, .news .h2Box, .team .h2Box, .cantact .h2Box, .product .pBox, .case .pBox, .news .pBox, .team .pBox, .cantact .pBox, .product .productClass, .teamBar{transform: translateY(500px);-webkit-transform: translateY(500px);-moz-transform: translateY(500px);-o-transform: translateY(500px);opacity: 0;} .history .h2Box, .product .h2Box, .case .h2Box, .news .h2Box, .team .h2Box, .cantact .h2Box{transition: all 1.2s;-webkit-transition: all 1.2s;-moz-transition: all 1.2s;-o-transition: all 1.2s;} .history .pBox, .product .pBox, .case .pBox, .news .pBox, .team .pBox, .cantact .pBox{transition: all 1.2s 0.4s;-webkit-transition: all 1.2s 0.4s;-moz-transition: all 1.2s 0.4s;-o-transition: all 1.2s 0.4s;} .history.active .h2Box, .history.active .pBox, .product.active .h2Box, .case.active .h2Box, .news.active .h2Box, .team.active .h2Box, .cantact.active .h2Box, .product.active .pBox, .case.active .pBox, .news.active .pBox, .team.active .pBox, .cantact.active .pBox, .product.active .productClass, .team.active .teamBar{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} .product .productClass{transition: all 1.2s 0.8s;-webkit-transition: all 1.2s 0.8s;-moz-transition: all 1.2s 0.8s;-o-transition: all 1.2s 0.8s;} .team.active .teamBar{transition: all 1.4s 1.1s;-webkit-transition: all 1.4s 1.1s;-moz-transition: all 1.4s 1.1s;-o-transition: all 1.4s 1.1s;} .history .historyList{transform: translateX(-100%);-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-o-transform: translateX(-100%);opacity: 0; transition: all 1.2s 0.8s;-webkit-transition: all 1.2s 0.8s;-moz-transition: all 1.2s 0.8s;-o-transition: all 1.2s 0.8s;} .history.active .historyList{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} .product .products{opacity: 0;transition: all 1.6s 1.2s;-webkit-transition: all 1.6s 1.2s;-moz-transition: all 1.6s 1.2s;-o-transition: all 1.6s 1.2s;} .product.active .products{opacity: 1; display: flex; flex: 1; width: 100%; overflow: hidden;} .case .cases{opacity: 0;} .case .cases ul{ opacity: 0;transform: translateX(100%);-webkit-transform: translateX(100%);-moz-transform: translateX(100%);-o-transform: translateX(100%);} .case.active .cases{opacity: 1;transition: all 1.2s 1s;-webkit-transition: all 1.2s 1s;-moz-transition: all 1.2s 1s;-o-transition: all 1.2s 1s;} .case.active .cases ul{ opacity: 1;transition: all 1.5s 1s;-webkit-transition: all 1.5s 1s;-moz-transition: all 1.5s 1s;-o-transition: all 1.5s 1s; transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);} /*左淡入*/ @keyframes act{ from{transform: translateX(-100%);-webkit-transform: translateX(-100%);-moz-transform: translateX(-100%);-o-transform: translateX(-100%);opacity: 0;} to{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} } /*右淡入*/ @keyframes act1{ from{transform: translateX(100%);-webkit-transform: translateX(100%);-moz-transform: translateX(100%);-o-transform: translateX(100%);opacity: 0;} to{transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);opacity: 1;} } /*下淡入*/ @keyframes act3{ from{transform: translateY(500px);-webkit-transform: translateY(500px);-moz-transform: translateY(500px);-o-transform: translateY(500px);opacity: 0;} to{transform: translateY(0);-webkit-transform: translateY(0);-moz-transform: translateY(0);-o-transform: translateY(0);opacity: 1;} } /*修改部分*/ @media only screen and (min-width: 1200px) { .news .divBox div div a:nth-child(2){width: 67.5%;} } .about .more img{ display: inline-block; margin-left: 20px; margin-bottom: -4px;} /*.visit {background: url("/res/images/visit.jpg") 100% 100%;width: 100%;color: #fff;} .visit>div{width: 62.5%;margin: 0 auto;-webkit-align-items: center;-moz-align-items: center;display: flex;display: -webkit-flex;align-items: center;height: 234px;position: relative} .visit>div>div:first-child,.cases>div:last-child>div>div:first-child{width: 25%;left: 0;border-bottom: 1px solid #d1d1d1;padding-bottom: 40px;position: absolute;} .visit>div>div:last-child{width: 68%;position: absolute;right: 0;font-size: 14px;} .visit>div>div:last-child>div{margin-left:17.5%;text-align: center} .visit>div>div:last-child>div span{font-size: 49px} .visit>div>div:first-child p:first-child,.cases>div:last-child>div>div:first-child p:first-child{font-size: 31px;color: #fff} .visit>div>div:first-child p:last-child,.cases>div:last-child>div>div:first-child p:last-child{font-size: 14px;color: #bfbfbf} .visit>div>div:first-child:after ,.cases>div:last-child>div>div:first-child:after,.product_all .title:after{ position: absolute; content: ''; display: block; width: 30px; height: 5px; bottom: -3px; } .visit>div>div:first-child:after ,.cases>div:last-child>div>div:first-child:after,.product_all .title:after{ left: 0; margin-left: 0; bottom: -3px; background: #bfbfbf; }*/ .cases>div:last-child>div>div:first-child{width: 50%;left: 0;border-bottom: 1px solid #d1d1d1;padding-bottom: 40px;position: absolute;} .cases>div:last-child>div>div:first-child p:first-child,.visit .l_box p:first-child{font-size: 31px;color: #fff} .cases>div:last-child>div>div:first-child p:last-child,.visit .l_box p:last-child{font-size: 14px;color: #bfbfbf} .visit {width: 100%;color: #fff;} .visit .l_box{width: 39%;background-color: #054fa0;box-sizing: border-box;padding: 60px 0 60px 15%;} .visit .l_box>div{border-bottom: 1px solid #d1d1d1;padding-bottom: 30px;position: relative;width: 72%} .visit .l_box>div:after,.cases>div:last-child>div>div:first-child:after,.product_all .title:after{ position: absolute; content: ''; display: block; width: 30px; height: 5px; bottom: -3px; left: 0; margin-left: 0; background: #bfbfbf; } .visit .r_box{width: 61%;background:url("/res/images/visit.jpg");box-sizing: border-box;padding: 60px 18.8% 60px 0;} .visit .r_box>div{margin-left:10%;text-align: center;font-size: 14px;width: 23%} .visit .r_box>div>p:last-child{font-size: 14px;margin-top: 7px;} .visit .r_box div span{font-size: 49px} .ask{width: 100%;height: 180px;background-color: #f4f4f4} .ask>div{width: 1200px;margin:0 auto;-webkit-align-items: center;-moz-align-items: center;display: flex;display: -webkit-flex;align-items: center;height: 210px;position: relative} .ask>div>div:first-child{width: 80%} .ask>div>div:first-child p:first-child{color: #444444;font-size: 31px;font-weight: 700} .ask>div>div:first-child p:last-child{color: #999999;font-size: 18px;line-height: 42px} .ask>div>div:last-child{position: absolute;right: 0;width: 20%;height: 66px;} .ask>div>div:last-child div{width: 194px;height: 66px;line-height: 66px;font-size: 26px;background-color: #054fa0;color: #fff;text-align: center;position: absolute;right: 0} .product .left{ position: absolute; left: -70px; top: 50%; transform: translateY(-50%);} .product .right{ position: absolute; right: -70px; top: 50%; transform: translateY(-50%);} .advantage{background-color: #f4f4f4;padding: 70px 0} .advantage .divBox1 ul li{width: 33.3%;text-align: center;font-size: 14px;color: #999999;line-height: 30px;} .advantage .divBox1 ul li img{margin:75px 0 30px} .cases >div{width: 50%;height: 497px;} .cases>div:last-child>div.aaa{position: absolute;top: 50%;transform: translateX(-100%) translateY(-50%); -webkit-transform: translateX(-100%) translateY(-50%); -moz-transform: translateX(-100%) translateY(-50%); -o-transform: translateX(-100%) translateY(-50%); opacity: 0; } .cases>div:last-child>div.show{ position: absolute;top: 50%; transform: translateX(0) translateY(-50%); -webkit-transform: translateX(0) translateY(-50%); -moz-transform: translateX(0) translateY(-50%); -o-transform: translateX(0) translateY(-50%); transition: all 0.8s ease-in-out; opacity: 1;} .cases>div:last-child{width: 50%;background-color: #054fa0;position: relative;padding-left: 5%;box-sizing: border-box;text-align: left} .cases>div:last-child>div>div:first-child{position: relative;} .cases>div:last-child>div>div:nth-child(2){color: #fff;margin: 40px 0;width: 57%;font-size: 14px;line-height: 28px;} .cases>div:last-child>div>div:nth-child(2) p:first-child{font-size: 20px;line-height:42px;} .cases .swiper-pagination{left: 10%;transform: translate3d(0,0,0);bottom: 50px} .cases .swiper-slide img{width: 100%;height: 497px} .cases .swiper-pagination span:first-child{margin-left: 0} .cases .swiper-pagination-bullet{background-color: #043e7d;border: 0;} .cases .swiper-pagination-bullet-active{background-color: #fff;} .product_all{padding: 70px 0} .product_all .title{position: relative;width: 40%;left: 0;border-bottom: 1px solid #d1d1d1;padding-bottom: 40px; margin-bottom: 60px;} .product_all .title p:first-child{font-size: 31px;} .product_all .title p:last-child{font-size: 14px;color: #bfbfbf} .product_all .p_nav{margin-top: 30px;} .product_all .p_nav li{width: 128px;height: 44px;margin-bottom: 5px;line-height: 44px;font-size: 16px;color: #a5a5a5;background-color: #f3f3f3;border: 1px solid #ccc;text-align: center;margin-left: 20px;} .product_all .p_nav li.active{background-color: #054fa0;color: #fff;border: 1px solid #054fa0} .product_all .list li{width: 33.3%;display: inline-block; float: left; overflow: hidden; padding: 12px; position: relative; text-align: center; box-sizing: border-box} .product_all .list li>div{overflow: hidden;position: relative} .product_all .list li>div h3{color: #ffffff; display: block; font-size: 26px; height: 100%; left: -100%; letter-spacing: 1px; padding-left: 30px; padding-right: 30px; position: absolute; top: 0; transition: all 0.2s; vertical-align: middle; visibility: hidden; box-sizing: border-box; width: 100%;} /*.product_all .list li>div h3 a{*/ /*color: #ffffff;*/ /*display: block;*/ /*height: 92%;*/ /*position: relative;*/ /*padding-top: 45%;*/ /*width: 100%;*/ /*z-index: 99;*/ /*}*/ .product_all .list li>div h3 .popup_title{ font-size: 24px; font-weight: 200; color: #ffffff; display: block; height: 92%; position: absolute; padding-top: 30%; width: 100%; left: -100%; top:0; transition: all 0.2s 0.2s ease-out; z-index: 99; } .product_all .list li img { width: 100%; height: 262px; } .product_all .list li a.popup-link{ /*background: #fff none repeat scroll 0 0;*/ border-radius: 100%; color: #ffffff; display: block; font-weight: normal; height: auto; opacity: 1; width: auto; line-height: 0.4; /*opacity: 0;*/ padding: 7px 0; position: absolute; left: 50%; margin-left: -25px; top: 55px; z-index: 999;} .product_all .list li a.popup-link i{ color: rgba(5, 79, 160, 0.7); font-size: 30px; } /*.product_all .list li>div:before{*/ /*border-bottom: 1px solid #ffffff;*/ /*border-top: 1px solid #ffffff;*/ /*content: "";*/ /*display: block;*/ /*height: 80%;*/ /*left: -100%;*/ /*position: absolute;*/ /*top: 10%;*/ /*transition: all 0.7s ease 0s;*/ /*visibility: hidden;*/ /*width: 95%;*/ /*z-index: 88;*/ /*}*/ /*.product_all .list li>div:after{*/ /*border-left: 1px solid #ffffff;*/ /*border-right: 1px solid #ffffff;*/ /*content: "";*/ /*display: block;*/ /*height: 95%;*/ /*left: 10%;*/ /*position: absolute;*/ /*top: -100%;*/ /*transition: all 0.7s ease 0s;*/ /*visibility: hidden;*/ /*width: 80%;*/ /*z-index: 88;*/ /*}*/ /*.product_all .list li:hover>div:before,.product_all .list li:hover>div:after{ visibility: visible;}*/ .product_all .list li:hover h3 { background: rgba(5, 79, 160, 0.7) none repeat scroll 0 0; visibility: visible; opacity: 1; } /*.product_all .list li:hover>div:before{ left: 2.5%;}*/ /*.product_all .list li:hover>div:after{ top: 2.5%;}*/ /*.product_all .list li:hover .popup-link {*/ /*height: auto;*/ /*opacity: 1;*/ /*width: auto;*/ /*}*/ /*.product_all .list li:nth-child(3n){padding-right: 0}*/ /*.product_all .list li:nth-child(3n-2){padding-left: 0}*/ .product_all .more,.news .more{margin:45px auto 0;border: 0} .product_all .more img ,.news .more img{ display: inline-block; margin-left: 20px; margin-bottom: -4px; } .product_all .more span,.news .more span{display: inline-block;text-align: center;} .news .divBox1 ul li{width: 586px;background-color: #fff;border-bottom: 3px solid #d1d1d1;transition-duration: .5s;-ms-transition-duration: .5s;-moz-transition-duration: .5s;-webkit-transition-duration: .5s;} .news .divBox1 ul li>img{width: 100%} .news .divBox1 ul li:hover{border-bottom: 3px solid #054fa0; box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1); -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; -moz-transform: translate(0px, -2px); -webkit-transform: translate(0px, -2px); -o-transform: translate(0px, -2px); -ms-transform: translate(0px, -2px); transform: translate(0px, -2px);} .news .divBox1 ul li:nth-child(2n){margin-left: 25px;} .news .divBox1 ul li div.title div:first-child{width: 70%;font-size: 18px} .news .divBox1 ul li>div{padding: 20px;box-sizing: border-box} .news .divBox1 ul li div.title div:last-child{width: 30%;text-align: right;font-size: 12px;color: #cccccc} .news .divBox1 ul li div.title div:last-child img{margin-right: 10px;} .news .divBox1 ul li div.con{margin-top: 10px;position: relative} .news .divBox1 ul li div.con div:first-child{width: 70%;font-size: 14px;color: #999999;line-height: 23px;} .news .divBox1 ul li div.con div:last-child{width: 30%;text-align: right;position: absolute;bottom: 0;right: 0;} .product .swiper-slide{position: relative;width: 1200px;} .product .productMan{position: absolute;width: 100%;height: 100%;background: rgba(5,79,160,0.7);top: 0;left: 0;color: #fff;display: none} .product .productMan div{position: absolute;text-align: left;width: 300px;display:inline-block;top: 50%;left:50%;transform:translateX(-50%) translateY(-50%);} .product .productMan_show {display: block;} .product .divBox1{position: relative} .product .swiper-button-next{right: -50px} .product .swiper-button-prev{left: -50px}