/* =====头部===== */ body {min-width: 1250px;overflow-x: auto;} #c-placeholder {height:0.8rem;min-height: 80px;} header {position: fixed; left: 0; top: 0; z-index: 99; width: 100%; transition: .5s; border-bottom: 1px solid rgba(255, 255, 255,.1);} .headBox {height:0.8rem; min-height: 80px; display: flex; justify-content: space-between; box-sizing: border-box;} .headBox .le{width: 14%;/* background: #fff;*/} .headBox .logo img {max-width: 2.1rem; display: none;} .headBox .logo .logo1 {display: block;} .headBox .logoCon{position: relative; padding-left: .25rem; margin-left: .37rem; display: none} .headBox .logoCon::after{position: absolute; content: ''; width: 0.01rem;height: 0.27rem;background: rgba(242,242,242,0.2); left: 0; top: 50%; transform: translateY(-50%);} /* 头部右侧 */ /*.header{ background: #fff;}*/ .headBox .re { width: 50%; } /* 导航 */ nav {width: 82%;height: 100%;} nav > ul {display: flex; height: 100%; justify-content: space-between;} nav > ul > li {height: 100%; position: relative;} nav .layui-nav {background: none; padding: 0;} nav .layui-nav .layui-nav-item {line-height: initial; display: flex; align-items: center;} nav .layui-nav .layui-nav-item.has-sub {position: relative;} nav .layui-nav .layui-nav-item > a {padding: 0; font-size: var(--font16);color: #333; position: relative; } nav .layui-nav .layui-nav-more {top: 50%; right: -.16rem; position: absolute; } nav .layui-nav .layui-nav-more:before{display: block; content: ''!important; background: url(../images/nav-icon2.png) center; width: 0.08rem; height: 0.04rem; min-width: 8px; min-height: 4px;} nav .layui-nav .layui-this:after, nav .layui-nav-bar {display: none;} /* 下拉 */ nav .layui-nav-child { top: 100%; background: #fff; box-sizing: border-box;} /* 搜索按钮 */ .heSearch {cursor: pointer; } .heSearch a {width: 0.48rem;height: 0.48rem;background: #00265b; min-height: 30px; min-width: 30px; border-radius: 50%;} /* 搜索下拉 */ .hadbox-sec4 {position: absolute;left: 0;top: 100%;width: 100%;display: none; box-sizing: border-box;} .hadbox-sec4 {background-color: #fff;padding: .5rem; border-top: 1px solid #eee; box-shadow: 0 2px 2px rgba(0, 0, 0,.1);} .hadbox-sec4 .close {position: absolute; right: 1.5%; top: 5%; cursor: pointer; max-width: .3rem;} .hadbox-sec4 .close svg {max-width: 100%;} .hadbox-sec4 .f_tit {color: #222222;margin-bottom: 0.24rem;font-size: var(--font30);} .hadbox-sec4 .form {display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #dddddd;} .hadbox-sec4 .form i { display: block; width: 0.3rem; overflow: hidden;} .hadbox-sec4 .form i svg {width: 100%;} .hadbox-sec4 .form input {width: calc(100% - 3.1rem);padding: 0.16rem 0.24rem; color: #333333; flex: 1;} .hadbox-sec4 .form .f_sub {width: 1.6rem; height: 0.56rem; min-height: 45px; background: #00265b;border-radius: 5px;font-size: var(--font24);color: #ffffff;cursor: pointer;} @media screen and (min-width: 200px) and (max-width: 767px) { .hadbox-sec4 {padding: .6rem .3rem;} .hadbox-sec4 .form {padding-bottom: .2rem;} .hadbox-sec4 .f_tit {font-size: var(--font20);} } .layui-nav .layui-nav-item a:hover{color:#333} /* 头部下滑样式 */ .header.c-style2 {background: rgba(255, 255, 255, 1); border-bottom: none; box-shadow: 0 0 3px rgba(0, 0, 0,.1);} .header.c-style2 nav > ul > li > a {color: #333;} /* .header.c-style2 .headBox .logo a {color: #333;} .header.c-style2 .headBox .logo1 {display: none;} .header.c-style2 .headBox .logo2 {display: block;} .header.c-style2 .headBox .logo h1 {color: #333;} .header.c-style2 .headBox .logo p {color: #333;} */ .header.c-style2 nav .layui-nav .layui-nav-more:before{ background: url(../images/nav-icon2.png) center;} .header.c-style2 nav .layui-nav .layui-nav-item a:hover {color: #00265b;} .header.c-style2 nav .layui-nav .layui-nav-item > a::after {background: #00265b;} /* ==================公用css====================== */ /* 滚动条 */ .headerNavScroll::-webkit-scrollbar {width: 3px; scrollbar-width:thin;scrollbar-color:#00265b #DDDDDD;} /*定义滑块 内阴影*/ .headerNavScroll::-webkit-scrollbar-thumb {background: #00265b; border-radius: 5px;} /*定义滚动条轨道 内阴影*/ .headerNavScroll::-webkit-scrollbar-track {background: #E5E5E5;} /* ===============公用css end!!!!===================*/ .more1 {display: inline-flex; align-items: center; border-radius: 5px; padding: .2rem .6rem; background: #00265b; transition: .5s; position: relative;z-index: 1; overflow: hidden;} .more1 i {transform: rotate(145deg);} .more1:hover {-webkit-box-shadow: 0 0 0 0.1rem rgba(24, 131, 207,.2);box-shadow: 0 0 0 0.1rem rgba(24, 131, 207,.2);} /* ======首页======= */ /* banner */ .indexBanner {overflow: hidden; position: relative;} .indexBanner .swiper {} .indexBanner .slide .bjBox {} .indexBanner .slide .bjBox img{display: block;width: 100%;} /*.indexBanner .slide .bjBox img {width: 100%;height: auto;transition: 1s linear 2s;transform: scale(1.1, 1.1); display: block; object-fit: cover;}*/ /*.indexBanner .swiper-slide-active .bjBox img, .indexBanner .swiper-slide-duplicate-active .bjBox img { transition: 6s linear;transform: scale(1, 1);}*/ /* 控件 */ .indexBanner .swiper-pagination {bottom: .77rem;} .indexBanner .swiper-pagination span {width: 0.83rem;height: 0.02rem;background: #ffffff; opacity: 1; border-radius: 0; margin: 0 0.19rem!important;} .indexBanner .swiper-pagination .swiper-pagination-bullet-active {background: #00265B;} .indexBanner .swjt {width: 0.6rem;height: 0.6rem;background: #00265B; } .indexBanner .swjt.swiper-button-next {right: 7%;} .indexBanner .swjt.swiper-button-prev {left: 7%; } /* 搜索 */ .pannel-box{height: 0.65rem; min-height: 45px;} .hot ul em{color: #333333;letter-spacing: 0.01rem; margin-left: .15rem;} .hot ul li{margin-right: .46rem;} .hot ul li:last-child{margin-right: 0;} .hot ul li a{color: #666;} .hot ul li:hover a{color: #00265B;} .search{width: 2.95rem;height: 0.65rem;background: #00265b; min-width: 200px; min-height: 45px;} .search input{letter-spacing: 0.01rem; color: #c9c9c9;} .search input::placeholder{color: #c9c9c9;} .search-submit{background: url(../images/search-icon2.png) no-repeat center; width: 0.18rem;height: 0.19rem; min-width: 14px;} /*字体引入*/ @font-face { font-family: "PFBold"; src: url("../font/PingFang Bold.woff2"); } @font-face { font-family: "PFHeavy"; src: url("../font/PingFang-Heavy.woff"); } @font-face { font-family: "PFMedium"; src: url("../font/PingFang Medium.woff2"); } /* 首页产品中心 */ .pro-bg{background: #e6edf8; padding: 0.43rem 0 0.54rem;} .product-title{width: 28%;} .product-title span{font-family: "PFMedium"; text-transform: uppercase; display: block;} .product-title strong{font-size: var(--font50); color: #00265b; margin-bottom: .21rem; display: block;} .product-title h2{color: #666; margin-bottom: .42rem;} .pro-bg .swiperCon {flex: 1; max-width: calc(100% - 28% - .5rem);display: flex; justify-content: space-between; align-items: center;} .pro-bg .swiperBox {} .pro-bg .swiperBox .swiper {margin: 0;} .pro-bg .swiperBox1 {width: 52%;position: relative; width: 4.6rem; height: 4.6rem; display: flex; align-items: center; justify-content: center;} .pro-bg .swiperBox1 .swiper {height: 81%; width: 81%; border-radius: 50%;} .pro-bg .swiperBox1 .swiper .imgBox{height: 100%; background: #fff; display: flex; align-items: center; justify-content: center;} .pro-bg .swiperBox1 .swiper .imgBox img {width: 100%;} .pro-bg .swiperBox1 .cirleBox {position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px dashed #fff; border-radius: 50%; transition: .5s;} .pro-bg .cirleBox li {position: absolute;top: 50%;left: 50%; transform-origin: center;} .pro-bg .cirleBox li i {background: rgba(0, 38, 91,.5); width: .12rem; height: .12rem; border-radius: 50%; display: block; position: relative;} .pro-bg .cirleBox li i::after {content: ''; position: absolute; transform: translate(-50%, -50%) ;left: 50%; top: 50%; border-radius: 50%; width: 200%; height: 200%; background: rgba(0, 38, 91,1); animation: scalemap 2s linear infinite; visibility: hidden;} .pro-bg .cirleBox li:nth-child(1) {} /* 分别计算每个li的角度并定位 *//* 半径230px减去li半径得到230px */ .pro-bg .cirleBox li:nth-child(1) {transform: translate(-50%, -50%) rotate(0deg) translateX(2.3rem); } .pro-bg .cirleBox li:nth-child(2) {transform: translate(-50%, -50%) rotate(60deg) translateX(2.3rem);} .pro-bg .cirleBox li:nth-child(3) {transform: translate(-50%, -50%) rotate(120deg) translateX(2.3rem);} .pro-bg .cirleBox li:nth-child(4) {transform: translate(-50%, -50%) rotate(180deg) translateX(2.3rem);} .pro-bg .cirleBox li:nth-child(5) {transform: translate(-50%, -50%) rotate(240deg) translateX(2.3rem);} .pro-bg .cirleBox li:nth-child(6) {transform: translate(-50%, -50%) rotate(300deg) translateX(2.3rem);} /* 控制圆的旋转位置*/ .pro-bg .cirleBox.active1 {transform: rotate(0deg);} .pro-bg .cirleBox.active1 li:nth-child(1) i {background: rgba(0, 38, 91,1);} .pro-bg .cirleBox.active1 li:nth-child(1) i::after {visibility: visible;} .pro-bg .cirleBox.active2 {transform: rotate(60deg);} .pro-bg .cirleBox.active2 li:nth-child(6) i {background: rgba(0, 38, 91,1);} .pro-bg .cirleBox.active2 li:nth-child(6) i::after {visibility: visible;} .pro-bg .cirleBox.active3 {transform: rotate(120deg);} .pro-bg .cirleBox.active3 li:nth-child(5) i {background: rgba(0, 38, 91,1);} .pro-bg .cirleBox.active3 li:nth-child(5) i::after {visibility: visible;} .pro-bg .cirleBox.active4 {transform: rotate(180deg);} .pro-bg .cirleBox.active4 li:nth-child(4) i {background: rgba(0, 38, 91,1);} .pro-bg .cirleBox.active4 li:nth-child(4) i::after {visibility: visible;} .pro-bg .cirleBox.active5 {transform: rotate(240deg);} .pro-bg .cirleBox.active5 li:nth-child(3) i {background: rgba(0, 38, 91,1);} .pro-bg .cirleBox.active5 li:nth-child(3) i::after {visibility: visible;} .pro-bg .cirleBox.active6 {transform: rotate(300deg);} .pro-bg .cirleBox.active6 li:nth-child(2) i {background: rgba(0, 38, 91,1);} .pro-bg .cirleBox.active6 li:nth-child(2) i::after {visibility: visible;} /* 控件 */ .pro-bg .swiperBox .jtBox {bottom: 0; top: auto; transform: translateY(50%); position: absolute; background: #fff; border-radius: 100px; padding: .1rem .2rem;} .pro-bg .swiperBox .jtBox .swjt {position: relative; margin: 0; display: inline-block; top: auto; height: auto; right: 0; width: auto;} .pro-bg .swiperBox .jtBox .swjt i {font-weight: 700; font-size: var(--font20); color: #00265b;} .pro-bg .swiperBox .jtBox .swjt.swiper-button-prev {margin-right: .3rem; left: 0;} .pro-bg .thumbBox {margin-top: .5rem;position: relative;} .pro-bg .thumbBox::after{position: absolute;content: '';width: 100%;height: 0.01rem;background: url(../images/pro-line2.png) no-repeat center;z-index: 0;left: 0;top: 24%;} .pro-bg .thumbBox .swiper .slide {cursor: pointer;} .pro-bg .swiperBox2 {width: 40%;} .pro-bg .swiperBox2 .swiper {overflow: visible;} .swiperBox2 .tle h3{color: #00265b; margin-bottom: .1rem;} .swiperBox2 .tle h4{color: #333333; margin-bottom: .37rem;} .swiperBox2 .xian{display: block; width: 100%; height: 0.01rem; background: rgba(0,38,91,0.5); margin-bottom: .33rem;} .swiperBox2 .text p{line-height: 2; margin-bottom: .75rem;} .pro-btn .swiper-wrapper .swiper-slide{text-align: center;margin-top: 0.2rem;} .pro-btn .cirle i {background: rgba(0, 38, 91,1);width: .12rem;height: .12rem;border-radius: 50%;display: block;position: relative;margin: 0 auto;z-index: 2222;} .pro-btn .cirle i::after {content: ''; position: absolute; transform: translate(-50%, -50%) ;left: 50%; top: 50%; border-radius: 50%; width: 200%; height: 200%; background: rgba(0, 38, 91,1); animation: scalemap 2s linear infinite; visibility: hidden;} .pro-btn .swiper-wrapper .swiper-slide-thumb-active .cirle i::after { visibility: visible;} .pro-btn span{color: #666666; border-radius: 100px; width: 100%; display: block; padding: 0.12rem 0; transition: 0.6s; margin-top: .25rem;} .pro-btn .swiper-wrapper .swiper-slide-thumb-active span{ background: #00265b; color: #fff; font-weight: bold;} /* 首页产品列表页 */ .product{padding: .53rem 0;} .product .w1500{position: relative;} #product-prev,#product-next{width: 0.6rem;height: 0.6rem;background: #00265B; } .product-list{overflow: hidden;} .product-box .w1300{ min-width: 86%;} .product-list ul li{border: 0.01rem solid #f2f2f2; box-shadow: 0px .03rem .07rem 0px rgba(0, 0, 0, 0.06);} .product-list ul li .pic {overflow: hidden;} .product-list ul li .pic img{display: block; width: 100%; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden;backface-visibility: hidden;opacity: 1;} .product-list ul li:hover .pic img{-webkit-transform: scale3d(1.1,1.1,1);transform: scale3d(1.1,1.1,1);-webkit-transition: opacity 1s, -webkit-transform 1s;transition: opacity 1s, transform 1s;-webkit-backface-visibility: hidden;backface-visibility: hidden;} .product-list ul li .info{text-align: center; padding: 0.3rem 8% 0.4rem; box-sizing: border-box; transition: 0.6s;} .product-list ul li .info strong{color: #333; margin-bottom: 0.2rem;} .product-list ul li .info p{margin-bottom: .27rem;} .product-list ul li .more{width: 0.44rem;height: 0.44rem;background: #00265b; border-radius: 50%; min-width: 35px; min-height: 35px; margin: 0 auto;} .product-list ul li .more img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);} .product-list ul li .info b{transition: 0.6s; font-family: "PFBold"; font-size: 0.8rem; color: rgba(255, 255, 255, 0.1); font-weight: 800; text-transform: uppercase; position: absolute; bottom: -100%; left: 0;right: 0; z-index: 0;} .product-list ul li:hover .info{background: #333740;} .product-list ul li:hover .info strong{color: #fff;} .product-list ul li:hover .info p{color: #fff;} .product-list ul li:hover .more{background: #fff;} .product-list ul li:hover .more img{-webkit-filter: brightness(1) invert(0); filter: brightness(1) invert(0);} .product-list ul li:hover .info b{bottom: 0;} /* 苏州×××机械科技有限公司 */ .about{background: #fefbfb; padding: 0.67rem 0 0.81rem;} .about-box {margin-bottom: 0.77rem;} .about-box .info{width: 47.39%;} .about-title {margin-bottom: .52rem;} .about-title strong{display: block; margin-bottom: .07rem;} .about-title span{display: block; color: #666666;letter-spacing: 0.01rem; margin-bottom: .34rem;} .about-title i{display: block; width: 0.83rem;height: 0.02rem;background: #00265b;} .about-box .info p{color: #555555; line-height: 2.2; margin-bottom: .29rem;} .index-more a{background: #00265b; display: inline-block; padding: 0.14rem 0.23rem; z-index: 3; position: relative;} .index-more a:before {content: ''; z-index: -1; transition: 1s; box-sizing: border-box;transform: scale(1); opacity: 1; width: 100%; height: 100%;background: #00265b; position: absolute; top: 0;right: 0;bottom: 0; left: 0;} .index-more a:hover:before{transform: scale(1.2) scaleY(1.3); opacity: 0; visibility: hidden;} .index-more em{color: #ffffff; margin-right: .26rem;} .about-box .pic{width: 48.69%;} .about-box .pic img{display: block; max-width: 100%;} .about-ys ul{display: grid; grid-template-columns: repeat(4, 1fr); gap:4.3%} .about-ys ul li{background: #f5f5f5; padding: 0.35rem 7% 0.31rem; box-sizing: border-box; position: relative;} .about-ys ul li::after{position: absolute; content: ''; width: 0; height: 100%;background: #00265b; left: 0; top: 0; transition: 0.6s; z-index: 1;} .about-ys ul li h2{margin: 0.23rem 0 0; position: relative;z-index: 2;} .about-ys ul li span{color: #666; font-family: Arial; position: relative;z-index: 2;} .about-ys ul li img{transition: 0.6s; position: relative;z-index: 2;} .about-ys ul li:hover::after{width: 100%;} .about-ys ul li:hover .about-icon1{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); transform: rotateY(180deg); -webkit-transform: rotateY(180deg); /* Safari 与 Chrome */} .about-ys ul li:hover .about-icon2{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .about-ys ul li:hover h2,.about-ys ul li:hover span{color: #fff;} /* 服务流程 */ .service-bg{background: url(../images/service-bg.jpg) no-repeat center; padding: .52rem 0 .66rem; background-attachment: fixed;} .index-title{color: #ffffff; border-bottom: 1px solid rgba(242,242,242,0.1); padding-bottom: .45rem; margin-bottom: 0.51rem;} .index-title strong{font-size: 0.5rem; line-height: 1;} .title-en{position: relative; margin-left: .26rem; padding-left: .24rem; margin-top: 0.04rem;} .title-en::after{position: absolute; content: ''; left: 0; width: 1px; height: 100%; background: #F2F2F2; top: 50%; transform: translateY(-50%);} .index-title span{ text-transform: uppercase; } .index-title h2{margin-top: .23rem;} .index-more2 a{background: #ffffff;} .index-more2 a:before{background: #ffffff;} .index-more2 em{color: #00265b;} .service-list ul{display: grid; grid-template-columns: repeat(5, 1fr); gap:4.3%} .service-list ul li{cursor: pointer; transition: 0.6s; position: relative; background: #ffffff;border-radius: 0.25rem 0.25rem 1.08rem 1.08rem; text-align: center; padding: .3rem 1% .9rem; box-sizing: border-box; max-height: 298px;} .service-list ul li:first-child{padding: .3rem 9% .32rem;} .service-list ul li:hover{transform: translateY(-10%);} .service-list ul li .icon{margin-bottom: 0.2rem;} .service-list ul li .icon img{max-width: 100%;} .service-list ul li strong{color: #00265b; margin-bottom: .17rem; display: block;} .service-list ul li h3{color: #666; } .service-list ul li .more{width: 0.44rem;height: 0.44rem;background: #00265b; min-width: 35px; min-height: 35px; border-radius: 50%; margin: auto; position: absolute; bottom: 0.32rem; left: 0; right: 0;} .service-list ul li b{font-size: 1.38rem; line-height: 1; letter-spacing: 0.06rem; color: rgba(51,51,51,0.1); position: absolute; top: .14rem; left: 0; right: 0; margin: auto;font-family: "PFHeavy";} /* 优势 */ .ys{padding: .74rem 0 0;} .ys-title{margin-bottom: .6rem;} .ys-title strong{font-size: 0.5rem; color: #00265b; display: block; margin-bottom: .06rem;} .ys-list ul li .pic{height: 4.79rem;} .ys-list ul li .pic,.ys-list ul li .ys-box{width: 50%;} .ys-list ul li .info{padding-left: 5.7%;} .ys-list ul li .text{border-left: 1px solid #e8e8e8; padding-left: .24rem; margin-left: .24rem;} .ys-list ul li .text strong{color: #00265b; display: block; line-height: 1; margin-bottom: .11rem;} .ys-list ul li .text span{color: #666666; text-transform: uppercase; } .ys-list ul li .info h3{background: #00265b; padding: .15rem .45rem; color: #ffffff; display: inline-block; margin: .23rem 0 .26rem;} .ys-list ul li .info p{ margin-bottom: .15rem;} .ys-list ul li .info p>img{margin-right: .09rem;} .ys-list ul li:nth-child(2n){flex-direction: row-reverse;} .ys-list ul li:nth-child(2n) .ys-box{justify-content: flex-end;} .ys-list ul li:nth-child(2n) .info{padding-left: 0; padding-right: 6%;} .index-more3 a{padding: .19rem .43rem; margin-top: .23rem;} .index-more3 em{margin-right: 0;} /* 应用领域 */ .app{background: url(../images/app-bg.jpg) no-repeat center top; padding: 0.62rem 0 .78rem; background-size: cover;} .app .index-title2{border-color: #F2F2F2;} .index-title2 strong{color: #00265b;} .index-title2 span{color: #000000;} .index-title2 h2{color: #666666;} .app-list ul{display: grid;grid-template-columns:30% 30% 35%;row-gap:26px;column-gap:22px;grid-template-rows: 204px calc(46px - 24px) calc(160px - 30px) 0 0 calc(230px - 30px);} .app-list ul li{position: relative;} .app-list ul li a{display: block; height: 100%;} .app-list ul li .pic{overflow: hidden; height: 100%;} .app-list ul li .pic img {display: block;width: 100%; height: 100%; object-fit: cover; transition: .5s;} .app-list ul li:hover img {transform: scale(1.05);} .app-list ul li:nth-child(1){grid-row-start: 1;grid-row-end: 3;} .app-list ul li:nth-child(2){grid-row-start: 1;grid-row-end: 4;} .app-list ul li:nth-child(3){grid-row-start: 1;grid-row-end: 2; grid-column-start: 3;} .app-list ul li:nth-child(4){grid-column-start: 3; grid-row-start: 2;grid-row-end: 5;} .app-list ul li:nth-child(5){grid-row-start: 3;grid-row-end: 7; } .app-list ul li:nth-child(6){grid-row-start: 4;grid-row-end: 7; } .app-list ul li:nth-child(7){grid-row-start: 5;grid-row-end: 7; } .app-list ul li .info{align-items: flex-end; padding: 0 8% .24rem; box-sizing: border-box; position: absolute; content: ''; background: url(../images/app-info1.png) no-repeat center bottom; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; z-index: 1; } .app-list ul li .info em{color: #fff;} .app-list ul li:nth-child(3) .info,.app-list ul li:nth-child(4) .info,.app-list ul li:nth-child(7) .info{background: url(../images/app-info3.png) no-repeat center bottom;} /* 工程案例 */ .case{background: url(../images/case-bg.jpg) no-repeat center; padding: 0.93rem 0 0.8rem;} .case-list{position: relative; overflow: hidden; padding-bottom: .69rem;} .case-list ul li .pic{position: relative; overflow: hidden;} .case-list ul li .pic>img{display: block; width: 100%; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden;backface-visibility: hidden;opacity: 1;} .case-list ul li:hover .pic>img{-webkit-transform: scale3d(1.1,1.1,1);transform: scale3d(1.1,1.1,1);-webkit-transition: opacity 1s, -webkit-transform 1s;transition: opacity 1s, transform 1s;-webkit-backface-visibility: hidden;backface-visibility: hidden;} .case-list ul li .hide{position: absolute; content: ''; width: 100%; height: 100%; content: ''; top: 0; display: flex; align-items: center; justify-content: center; z-index: 2;} .case-list ul li .more{width: 0.72rem;height: 0.72rem;background: #00265b; min-width: 35px; min-height: 35px; border-radius: 50%; transform: scale(0); transition: 0.6s;} .case-list ul li:hover .more{transform: scale(1);} .case-list ul li .info{background: #fff; padding: 0.22rem 7% 0.27rem; box-sizing: border-box;} .case-list ul li .info strong{color: #00265b; margin-bottom: .07rem;} .case-list ul li .info p{color: #666666;} #case-num{bottom: -.69rem;top: auto;background: transparent;height: 3px; position: relative;} #case-num::after{position: absolute;content: ''; width: 100%; height: 1px; background: rgba(242,242,242,.1); left: 0; top: 50%; transform: translateY(-50%); z-index: 1;} #case-num.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: #f2f2f2!important;height: 3px;z-index: 2;} /* 新闻中心 */ .news{background: url(../images/news-bg.jpg) no-repeat center; padding: 0.5rem 0 .78rem; background-size: cover;} .news-left{width: 63%;} .news-left ul li{width: 48%;} .news-left ul li .pic{overflow: hidden; position: relative;border-radius: 0.1rem;} .news-left ul li .pic em{position: absolute; content: ''; top: .18rem; left: .18rem; display: block; font-weight: 700; background: rgba(0,0,0,0.6); border-radius: 0.2rem; padding: 0.08rem 0.22rem;} .news-left ul li .pic img{display: block; width: 100%; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden;backface-visibility: hidden;opacity: 1;} .news-left ul li:hover .pic img{-webkit-transform: scale3d(1.1,1.1,1);transform: scale3d(1.1,1.1,1);-webkit-transition: opacity 1s, -webkit-transform 1s;transition: opacity 1s, transform 1s;-webkit-backface-visibility: hidden;backface-visibility: hidden;} .news-left ul li .info{padding: 0.25rem 3% 0;} .news-left ul li .info span{color: #999999; margin-bottom: .13rem; font-family: Arial;} .news-left ul li .info span>img{margin-right: 0.1rem;} .news-left ul li .info strong{color: #333333; margin-bottom: .12rem;} .news-left ul li .info p{color: #666666; margin-bottom: .16rem;} .news-left ul li .info em{color: #8c8c8c;} .news-right{width: 34%;} .news-right em{display: inline-block; font-weight: 700; background: rgba(0,0,0,0.45); border-radius: 0.2rem; padding: 0.08rem 0.22rem; margin-bottom: .24rem;} .news-list{overflow-y: scroll; height: 4.7rem;} .news-list dl{ border-bottom: 1px solid rgba(238,238,238,1); width: 90%; padding-bottom: 0.2rem; margin-bottom: 0.2rem;} .news-list dl dt{color: #999999; font-family: Arial; margin-bottom: .04rem;} .news-list dl dd{color: #333333; font-weight: 700;} .news-list::-webkit-scrollbar{ width: 0.05rem; border-radius: 0.03rem; } /*定义滚动条轨道 内阴影+圆角*/ .news-list::-webkit-scrollbar-track{ background: #dddddd; border-radius: 0.03rem;} /*定义滑块 内阴影+圆角*/ .news-list::-webkit-scrollbar-thumb{ background: #00265b; border-radius: 0.03rem!important; } /* 留言 */ .message-bg{background: url(../images/meesage-bg.jpg) no-repeat center; padding: .66rem 0 .57rem; background-size: cover;} .message h2{} .message input{background: transparent; font-size: var(--font14);} .message .code{width: 2.48rem;height: 0.4rem;border: 0.01rem solid #cfcfcf;padding: 0.06rem 0;box-sizing: border-box;min-width: 200px;min-height: 35px;justify-content: space-between;} .message .code img{display: block;max-width: 100%;height: 39px;} .message .code input{border: none;} .message button{margin-left: .16rem; background: #00265b;border-radius: 0.02rem; height: 0.4rem; min-height: 35px;} .message ul{display: grid; grid-template-columns: repeat(4,auto); gap: 0.09rem .54rem; margin-top: .43rem;} .message input{color: #fff;} .message input::placeholder,.message select::placeholder{color: #cfcfcf;} /* 公共底部 */ .footer{background: #1b1b1b;} .foot-top{padding: .61rem 0 .43rem; border-bottom: 2px solid rgba(163, 163, 163, 0.07);} .foot-icon img{margin-right: .23rem;} .foot-icon em{color: #bbb; display: block;} .foot-icon strong{} .foot-middle{border-top: 2px solid #0a0a0a; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 0.2rem 0 0.6rem;} .foot-middle dl:nth-child(3),.foot-middle dl:nth-child(6){display: none} .foot-middle dl dt{color: #ffffff; font-size: var(--font18); margin-bottom: .23rem; } .foot-middle dl i{ width: 0.3rem;height: 0.02rem;background: #ffffff; display: block; margin-bottom: .2rem;} .foot-middle dl dd a{color: #797979;font-size: var(--font15); line-height: 2.5;} .foot-middle em{display: block; color: rgba(255,255,255,0.5); margin-top: .13rem;} .foot-copy{padding: .18rem 0;} .foot-copy p,.foot-copy a{color: rgba(255,255,255,0.3);font-size: var(--font15); } .foot-middle dl dd a:hover,.foot-copy a:hover{color: #fff;} /* 内页banner */ .ny-banner img{display: block; width: 100%;} /* 单篇页面*/ .mbx {padding: .15rem 0; border-bottom: 1px solid #eee;} .layui-breadcrumb a:hover {color: #125F97 !important;} .ny-main .box {padding: .5rem 0;} .ny-main .box img {max-width: 100%;} .about-main{margin: 0.5rem 0;} .ny-title{margin-bottom: 0.3rem;} .ny-title strong{display: block;} /* 产品中心 */ .proMain .box {display: flex; align-items: flex-start; padding: .5rem 0;} .casenav {background: #fcfcfc; flex-shrink: 0; padding-bottom: .4rem; min-width: 3rem; position: sticky; top: 1.5rem;} .casenav .tle {background: url(../images/casenav-tle-bj.jpg) no-repeat center; background-size: cover; padding: .4rem .32rem;color: #ffffff; font-size: var(--font32);} .casenav ul {padding: 0 .32rem;} .casenav li {padding: .2rem 0; border-bottom: 1px solid rgba(153, 153, 153,.1);} .casenav li a {display: flex; align-items: center; justify-content: space-between; color: #333333; font-size: var(--font18);} .casenav li a span {margin-right: .2rem;} .casenav li .icBox {margin-right: .15rem; width: .24rem; flex-shrink: 0;} .casenav li .icBox img {filter: brightness(0); -webkit-filter:brightness(0); max-width: 100%;} .casenav li .jt {width: 0.29rem;height: 0.29rem; min-height: 24px; min-width: 24px; border: 1px solid #333333; border-radius: 50%; transition: .5s; flex-shrink: 0;} .casenav li .jt svg {max-width: 50%;} .casenav li a:hover .icBox img {filter: none; -webkit-filter:none;} .casenav li a:hover {color:#00265b; font-weight: 700;} .casenav li a:hover .jt {background:#00265b; border-color:#00265b;} .casenav li a:hover .jt svg path {fill: #fff;} .casenav li.on .icBox img {filter: none; -webkit-filter:none;} .casenav li.on a {color:#00265b; font-weight: 700;} .casenav li.on {color:#00265b; font-weight: 700;} .casenav li.on .jt {background:#00265b; border-color:#00265b;} .casenav li.on .jt svg path {fill: #fff;} /* .casenav li.on .jt {transform: rotate(90deg);} */ .casenav .tleBox {padding: 0 .3rem;margin-top: .4rem;flex-direction: column;align-items: flex-start;} .casenav .telCon{margin-bottom: .1rem} .casenav .tleBox img {max-width: 90%; max-height: auto;} .casenav .tleBox img {max-width: 90%; max-height: auto;} .prolist {flex: 1;margin-left: .3rem; } .prolist ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem;} .prolist li {background: #f2f2f2; padding: .2rem;} .prolist li .imgBox {overflow: hidden; position: relative;} .prolist li .imgBox img {width: 100%; height: 100%; object-fit: cover; transition: .5s;} .prolist li .imgBox .mask { position: absolute;inset: 0; width: 100%; height: 100%;background: rgba(0, 0, 0,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: .5s;} .prolist li .imgBox .icBox {width: 0.5rem;height: 0.5rem;background: #00265b; border-radius: 50%;} .prolist li .imgBox .icBox svg {max-width: 50%;} .prolist li .con {display: flex; align-items: center; justify-content: space-between; margin-top: .2rem;} .prolist li .con .p1 {font-size: var(--font18);} .prolist li i {flex-shrink: 0; width: 0.3rem; height: 0.3rem; border-radius: 50%; border: 1px solid #333333; border-radius: 50%; transition: .5s;} .prolist li:hover .imgBox img {transform: scale(1.05);} .prolist li:hover .con .p1 {font-weight: 700; color: #00265b;} .prolist li:hover i {border-color: #00265b;} .prolist li:hover i svg path {fill: #00265b; } .prolist li:hover .imgBox .mask {opacity: 1;} /* 产品详情 */ .proDate {margin-left: .5rem; flex: 1; max-width: calc(100% - 3.5rem);} @media screen and (min-width: 200px) and (max-width: 1580px) { .proDate {max-width: calc(100% - 4.5rem);} } /* 内页产品详情页 */ .proDate .proxq {align-items: flex-start;} .proxq-pic {width: 44%;} .proxq-info {width: 50%;} .propic-big {margin-bottom: .25rem;} .propic-big ul li { box-sizing: border-box;border: 1px solid #eeeeee;} .propic-big ul li .pic img { display: block;width: 100%;} .propic-small ul li {background: #fff;position: relative;} .propic-small ul li .pic {box-sizing: border-box;border: 1px solid #eeeeee;} .propic-small ul li .pic img {display: block;width: 100%;} .propic-small ul li.swiper-slide-thumb-active .pic {border-color: #00265b;} .proxq-info strong {display: block;font-size: var(--font24);color: #333;border-bottom: 1px solid #eee;padding-bottom: .18rem;margin-bottom: .3rem;} .proxq-info span{ display: block; color: #666; font-weight: normal} .proxq-info .text {margin-bottom: .3rem;font-size: var(--font15); color: #666;} .proxq-btn a {z-index: 0;position: relative;overflow: hidden;display: inline-block;width: 1.4rem; min-width:110px; line-height: .54rem; background: #000;border-radius: 100px;text-align: center;color: #fff;} .proxq-btn a:before {content: "";position: absolute;width: 0;height: 100%;left: 50%;top: 0;z-index: -1;opacity: 2;transition: all 0.4s;} .proxq-btn a:before {background: #00265b;} .proxq-btn a:hover:before {width: 100%;left: 0;opacity: 1;} .dateInfo {margin-top: 1rem;} .dateInfo .tle {padding-bottom: .2rem;border-bottom: 1px solid #DDDDDD;} .dateInfo .tle h3 {font-size: var(--font24);color: #333333;position: relative;padding-left: .15rem;font-weight: 700;} .dateInfo .tle h3::before {content: "";height: 70%;width: 5px;background: #00265b;position: absolute;left: 0;top: 15%;border-radius: 0.05rem;} .dateInfo .infoCon {margin: .2rem 0;overflow: hidden;} .dateInfo .infoCon img {max-width: 100%;} /* 新闻中心 */ .newslist {width: 100%;} .newslist li {margin-bottom: .35rem;} .newslist li a {display: flex;justify-content: space-between;background: #fafafa;padding: .2rem;box-sizing: border-box;align-items: center;} .newslist li .imgBox {width: 27%;overflow: hidden;} .newslist li .imgBox img {width: 100%;min-height: 150px;object-fit: cover;transition: .5s;} .newslist li .con {width: 70%;} .newslist li h6 {font-size: var(--font20);color: #333;font-weight: bold;} .newslist li p {margin-top: .1rem;color: #666;font-size: var(--font15);margin-bottom: .2rem;} .newslist li span{font-size: var(--font14); color: #666; margin-bottom: 5px; display: block;} .newslist li .more {transition: all .5s;margin-top: .3rem;background: #808080;color: #fff;width: 1.3rem;height:.45rem;min-width: 110px;min-height: 35px;border-radius: 50px;font-size: var(--font15);} .newslist li .more svg {margin-left: .15rem;} .newslist li:hover .more {background: #00265b;} .newslist li:hover .imgBox img {transform: scale(1.1);} .newsxq-box {margin-top: .8rem; margin-bottom: 1rem;display: flex;justify-content: space-between;align-items: flex-start;} .nynews-left {width: 68%;} .nynews-left .newsCon {background: #ffffff;border-radius: 10px;box-shadow: 0rem 0rem 0.4rem 0rem rgba(226, 225, 224, 0.42);padding: .6rem .4rem;box-sizing: border-box;} .newsxq-title {border-bottom: 1px solid #ddd;padding-bottom: .4rem;} .newsxq-title strong {display: block;font-size: var(--font30);color: #333;margin-bottom: .1rem;} .newsxq-title span {display: block;color: #777;margin: .1rem .3rem 0 0;} .newsxq-title .titleDisc {display: flex;flex-wrap: wrap;} .newsxq-editbox {margin: .3rem 0;} .newsxq-editbox img {max-width: 100%;height: auto !important;} .newsxq-box .nynews-right {width: 29%;background: #fff;border-radius: .1rem;box-shadow: 0rem 0rem 0.3rem 0rem rgba(226, 225, 224, 0.42);padding: .4rem;box-sizing: border-box;position: relative;} .newsxq-box .nynews-right {position: sticky;top:1.5rem;} .relist li {padding: .3rem 0;border-bottom: 1px solid #F2F2F2;} .relist li .time {font-size: var(--font14);font-weight: 500;color: #999999;} .relist span {color: #999999;font-size: var(--font14);} .relist h6 {color: #333333;font-size: var(--font18);transition: .35s;font-weight: 700;margin-top: .1rem;} .relist li:hover h6 {color: #00265b;} .relist li:hover .reImg img {transform: scale(1.05);} .nynews-right::after {content: "";background: #00265b;width: 65%;position: absolute;left: 50%;bottom: -1%;height: 0.07rem;transform: translate(-50%, -50%); border-radius: .05rem} .newsxq-page {display: flex;justify-content: space-between;align-items: center;margin-top: .1rem;} .newsxq-page a {display: flex;align-items: center;} .news-prev, .news-next {transition: 0.6s;display: flex;align-items: center;justify-content: center;width: .6rem;height:.6rem;border: 1px solid #00265b;} .news-prev svg {transform: rotateY(180deg);-webkit-transform: rotateY(180deg);} .newsxq-page em {display: inline-block;color: #333;} .prev-link em {margin-left: .15rem;} .next-link em {margin-right: .15rem;} .next-link {flex-direction: row-reverse;} .backlist a {width: 1.68rem;min-width: 125px;min-height: 42px;height: .58rem;background: #00265b;color: #fff;} .backlist svg {margin-right: .1rem;} .backlist a:active {background: #00265b;} .newsxq-page a:active .news-prev, .newsxq-page a:active .news-next {background: #00265b;border-color: #00265b;} .newsxq-page a:active svg path {fill: #fff;} @media (any-hover: hover) { .newsxq-page a:hover .news-prev,.newsxq-page a:hover .news-next {background: #00265b;border-color: #00265b;} .newsxq-page a:hover svg path {fill: #fff;} } /* 内页图片列表页 */ .ny-right {flex: 1;margin-left: .3rem; overflow: hidden;} .picture-list ul{display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; } .picture-list ul li .pic{overflow: hidden;} .picture-list ul li .pic img{display: block; width: 100%; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden;backface-visibility: hidden;opacity: 1;} .picture-list ul li:hover .pic img{-webkit-transform: scale3d(1.1,1.1,1);transform: scale3d(1.1,1.1,1);-webkit-transition: opacity 1s, -webkit-transform 1s;transition: opacity 1s, transform 1s;-webkit-backface-visibility: hidden;backface-visibility: hidden;} .picture-list ul li .name{ padding: 0.15rem 2%; background: #f5f5f5; transition: 0.6s;} .picture-list ul li .name em{ text-align: center; } .picture-list ul li:hover .name{background: #00265B;} .picture-list ul li:hover .name em{color: #fff;} /* 内页图片详情页 */ .pic-title{text-align: center; margin-bottom: 0.3rem;} .pic-title h3{ color: #333; margin-bottom: 0.15rem;} .pic-title i{display: block; width: 0.5rem; height: 0.03rem; background: #00265B; margin: 0 auto;} .news-link{border-top: 1px solid #f2f2f2; padding-top:.57rem; margin-top: 0.5rem;} .news-link p{display: block; color: #333; display: flex; align-items: center;} .news-link p img{margin-right: .15rem;} .news-link p a{color: #333;} .news-link p:last-child{} .news-link p:last-child img{transform: rotateY(180deg); -webkit-transform: rotateY(180deg); margin-left: .15rem; margin-right: 0;} .news-link p a:hover{color: #00265B;} .news-link .xq-back a{margin:0 auto;} .xq-back a{transition:0.6s; display: block; color: #fff; background: #000; border-radius:0.2rem; text-align: center; margin: .4rem auto 0; padding: 0.1rem 0.3rem;} .xq-back a>img{display: inline-block; margin-right: .11rem; vertical-align: middle;} .xq-back a:hover{background: #00265B;} /* 2025.8.11首页成功案例 框架修改*/ .index-case{padding: .8rem 0;} .case-title{text-align: center; margin-bottom: .5rem;} .case-title span{ color: #000;} .case-title strong{ display: block; color: #00265b; font-size: 0.5rem; line-height: 1; margin: .1rem 0 .2rem;} .cases-list ul{display: grid;grid-template-columns: repeat(3, 1fr); gap: .36rem .4rem} .cases-list ul li{background: #f5f5f5; border-radius: 0 .1rem .1rem 0; padding: .05rem; box-sizing: border-box;} .cases-list ul li .pic{width: 40%; background: #fff; display: flex; align-items: center; justify-content: center; height: 2rem;} .cases-list ul li .pic img{display: block; width: 100%; height: 100%; object-fit: cover;} .cases-list ul li .info{width: 50%; margin-right: 5%;} .cases-list ul li .info em{color: #333;display: block; margin-bottom: .1rem;} .cases-list ul li .info p{color: #666; font-size: var(--font14);} .cases-list ul li:hover .info em{ color: #00265b; font-weight: bold;} .contact-text strong{display: block; color: #00265b; font-weight: bold; font-size: 0.3rem; margin-bottom: 0.1rem}