@charset "utf-8"; /*------------------index banner-------------------*/ .banner-wrapper{ width: 100%; background: #f8f8f8; } .center-txt{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align: center; } .center-wrapper{ position: absolute; height: 100%; width: 1200px; top:50%; left:50%; transform: translate(-50%,-50%); } .center-left{ position: absolute; left: 0; top:50%; text-align: left; transform: translateY(-50%); } .center-right{ position: absolute; right: 0; top:50%; text-align: right; transform: translateY(-50%); } .banner-wrapper .swiper-slide .center-txt img{ width: 900px; height: auto; position: relative; top: -45px; } .banner-wrapper .swiper-slide .center-left img{ position: relative; top: -50px; width: 660px; } .banner-wrapper .swiper-slide .center-right img{ width: 470px; height: auto; } .banner-wrapper .swiper-slide img{ height: auto; width: 100%; } .banner-wrapper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { position: relative; margin: 0 4px; width: 90px; height: 2px; background: #B4BEC5; top: 0; left: 0; border-radius: 0; opacity: 1; } .banner-wrapper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::after{ content: ''; position: absolute; width: 0; height: 2px; background: #fff; top: 0; left: 0; } .banner-wrapper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::after{ width: 90px; transition: all 4s linear; } .content{padding: 40px 0;position: relative} .content-g{ background: #fafafa; } .content-title{ position: relative; padding-bottom: 10px; margin-bottom: 46px; font-size: 24px; line-height: 35px; color: #595757; font-weight: bold; text-align: center; } .content-title::after{ content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: #3d91ff; } .content-wrapper{width: 1200px;margin: auto;} .news-list{min-height: 387px;} .hot{ position: relative; float: left; width: 580px; height: 387px; overflow: hidden; margin-bottom: 10px; } .hot a img{width: 100%;height: 100%;transition: transform cubic-bezier(.215,.61,.355,1) 1s;object-fit: cover;} .hot:hover a img{ transform: scale(1.1); } .hot a .news-info{ position: absolute; bottom: 0; width: 100%; min-height: 107px; padding: 14px 34px 18px 28px; background: rgba(0,0,0,0.5); border-radius: 0 0 4px 4px; color: #fff; line-height: 20px; } .comment{ float: left; width: 600px; margin-left: 20px; height: 129px; padding: 26px 21px 16px 28px; transition: all .45s ease; } .comment:hover{ box-shadow: 0 3px 15px rgba(71, 119, 183, 0.16); cursor: pointer; transform: translateY(-4px); } .news-title{ margin-bottom: 13px; } .news-dec{ line-height: 24px; font-size: 14px; } .news-time{ float: right; font-size: 14px; line-height: 20px; } .comment .news-title{ padding-left: 10px; border-left: 3px solid #dbdbdb; color: #333; } .comment:hover.news-title{ border-left: 3px solid #3D91FF; color: #3D91FF; } .comment .news-title span,.comment .news-dec{ color: #999; } .seemore {margin: 30px 0 82px;text-align: center;} .seemore .knowmore {position: relative;top: 0;right: 0;display: inline-block;width: 126px;height: 33px;border: 1px solid #90B9FF;border-radius: 17px;line-height: 32px;color: #90B9FF;overflow: hidden;z-index: 1; -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);transition: all .8s linear;} .seemore .knowmore:hover {/* border-color: #3d91ff; */color: #fff;background: #3d91ff;} .product-head {padding-top: 20px;} .product-body {position: relative;width: 100%;height: 618px;margin: 0 auto;} .product-swiper{overflow-y: hidden;height: 480px;position: static} .product-swiper .swiper-slide {height:450px;padding: 48px 38px;background:#fff;border-radius: 4px;text-align: center;transition: 300ms;top: 15px} .product-swiper .logo {width: 100%;height: 94px;text-align: center} .product-swiper .logo img {width: auto;height: 94px;margin: 0} .product-swiper .name {margin-top: 16px;margin-bottom: 32px;font-size: 20px;line-height: 26px;color: #333;font-weight: 600;} .product-swiper .function {text-align: left;font-size: 18px;} .product-swiper .function p {margin-bottom: 16px;font-size: 18px;line-height: 24px;color: #333;} .product-swiper .function p.introduction {height: 120px;margin-bottom: 31px;font-size: 14px;color: #666;} .product-swiper .btn {position: relative;display: inline-block;width: 94px;height: 36px;padding: 0;border: 1px solid #d4d4d4;border-radius: 4px;line-height: 36px;color: #999;transition: all .45s ease;} .product-swiper .btn:active {box-shadow: none;} /* .product-swiper .swiper-slide-active, .product-swiper .swiper-slide-duplicate-active {height: 480px;top: 0}*/ /*.product-swiper .swiper-slide-active .name {margin-top: 42px;margin-bottom: 50px;}*/ /* .product-swiper .swiper-slide-active .btn {background: #3d91ff;border: none;color: #fff;} */ .product-swiper .btn:before {content: '';position: absolute;left: 0;top: 0;width: 0;height: 100%;background: #3d91ff;z-index: 0;transition: all .45s ease;} .product-swiper .btn:hover {border-color: #3d91ff;color: #fff;} .product-swiper .btn:hover:before {width: 100%;} .product-swiper .btn span {position: relative;z-index: 1} .partner-swiper {width: 1200px;height: 280px;position: static} .partner-swiper .swiper-slide img {border-radius: 4px;} .partner-swiper .slide-bottom {position: absolute;bottom: 0;width: 100%;height: 50px;background: rgba(0,0,0,0.6);border-radius: 0 0 4px 4px;text-align: center;font-size: 16px;line-height: 50px;color: #fff;} .partner-swiper .desc {position: absolute;top: 100%;left: 50%;width: 100%;padding: 0 27px;text-align: center;opacity: 0;z-index: 3;filter: alpha(opacity=0); -ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);transform: translate(-50%,-50%);transition: all .6s ease;} .partner-swiper .desc h4 {margin-bottom: 13px;font-size: 17px;line-height: 24px;color: #fff;} .partner-swiper .desc p {text-align: left;font-size: 14px;line-height: 24px;color: #fff;text-indent: 2em;} .partner-swiper .desc .partner-logo {text-align: center;margin-bottom: 10px} .partner-swiper .desc .partner-logo img{width: 90px;height: 90px} .partner-swiper .swiper-slide:hover .slide-bottom {display: none;} .partner-swiper .swiper-slide:hover .desc{opacity: 1;filter: alpha(opacity=100);transition: all .45s ease;color: #fff;top: 50%;} /* 第一版解决方案样式 */ /* 这种改变svg颜色 不兼容IE */ /* -webkit-mask-image: url(../images/swiperToRightDisabled.svg);mask-image: url(../images/swiperToRightDisabled.svg);background-color:#3d91ff; */ .swiper-button-next, .swiper-button-next1 {right: 10px;width: 30px;height: 30px;background: url('../images/swiperToRightDefault.svg');outline: none;transition: all .45s ease;} /* 当它是svg ie浏览器不显示 ! */ .swiper-button-prev, .swiper-button-prev1 {left: 10px;width: 30px;height: 30px;background: url('../images/swiperToLeftDefault.png');outline: none;transition: all .45s ease;} .swiper-button-next:hover, .swiper-button-next1:hover {background: url('../images/swiperToRightHover.svg');} .swiper-button-prev:hover, .swiper-button-prev1:hover {background: url('../images/swiperToLeftHover.svg');} .swiper-button-next:active, .swiper-button-next1:active {background: url('../images/swiperToRightActive.svg');} .swiper-button-prev:active, .swiper-button-prev1:active {background: url('../images/swiperToLeftActive.svg');} .swiper-button-next {margin-top: -9px;} .swiper-button-prev {margin-top: -9px;} .swiper-button-next1 {position: absolute;top: 50%;left: auto;margin-top: -15px;cursor: pointer;} .swiper-button-prev1 {position: absolute;top: 50%;right: auto;margin-top: -15px;cursor: pointer;} .swiper-button-next.swiper-button-disabled, .swiper-button-next1.swiper-button-disabled {background: url('../images/swiperToRightDisabled.svg');opacity: 1;cursor: auto;pointer-events: none;} .swiper-button-prev.swiper-button-disabled, .swiper-button-prev1.swiper-button-disabled {background: url('../images/swiperToLeftDisabled.svg');opacity: 1;cursor: auto;pointer-events: none;} .swiper-box{position: relative;height:510px;} .honour-swiper{height: 510px;position: static;display: none;width: 1000px;float: left } .honour-swiper.active{display: block;justify-content:center} .honour-swiper img{height: 400px;width: auto;margin-top:0} /*#honour-swiper_1 img,#honour-swiper_2 img{height: 100%;width: auto}*/ .honour-swiper .swiper-slide{transform: scale(.8);text-align: center} .honour-swiper .swiper-slide-active, .honour-swiper .swiper-slide-duplicate-active{transform: scale(1)} .swiper-ul{float: left;width: 200px;display: none} .swiper-ul.active{display: block;padding-left: 10px} /*.swiper-ul:after{ content: '……'; position: absolute; bottom: 10px; line-height: 27px; padding: 0 10px; }*/ .swiper-ul li{ display: block; cursor: pointer; width: 100%; background: #fafafa; font-size: 12px; border-bottom: 1px dashed #dedede; border-radius: 0; text-align: left; line-height: 27px; color: #333; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; opacity: 1; padding:0 10px; } .swiper-ul li.active { background: #fafafa; color: #3d91ff; } .link-us{ line-height: 32px; padding: 32px 26px 36px 28px; background: #fff; color: #333; border-radius: 10px 0 0 10px; box-shadow: 0 2px 25px rgba(71,119,183,0.1); font-size: 14px; } .link-us li img{height: 26px;margin-right: 16px;width: auto;} .link-us li {margin-bottom: 30px} .link-us li span{color: #666} .friend-logo img{ width: 100%; height: auto; box-shadow: 0 0 3px rgba(0,0,0,.1); } .friend-logo img:hover{transform: scale(1.03);box-shadow: 0 0 13px rgba(0,0,0,.1);transition: all .2s ease} @media screen and (min-width:1800px) { .carousel-inner>.item>a img {height: 600px;} .ban-div .big-title {margin-bottom: 15px;font-size: 52px;line-height: 69px;font-weight: bold;} .ban-div .big-title1 {margin-top: 147px;} .ban-div .big-title2 {margin-top: 120px;} .ban-div .big-title3 {margin-top: 162px;margin-bottom: 3px;font-size: 46px;line-height: 61px;font-weight: 400;} .ban-div .sub-title {font-size: 18px;line-height: 30px;} .ban-div .sub-title1 {height: 70px;margin-top: 31px;} .ban-div .eng-title {font-size: 32px;line-height: 42px;color: rgba(255,255,255,0.70);} .swiper-button-prev, .swiper-button-prev1 {left: calc(50% - 698px);} .swiper-button-next, .swiper-button-next1 {right: calc(50% - 698px);} } @media screen and (max-width: 1600px){ .swiper-button-prev, .swiper-button-prev1 {left: 40px;} .swiper-button-next, .swiper-button-next1 {right: 40px;} } .honour-swiper>.swiper-pagination-bullets{ bottom: 0; }