/* 公用样式 */ #c-placeholder {height: 1.1rem;} header {position: fixed; left: 0; top: 0; z-index: 99; width: 100%;transition: .5s; border-bottom: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);} .headBox {transition: .5s; height: 1.1rem; position: relative; z-index: 1;} .headBox .logo {padding:.1rem 0;height: 100%;display: flex;} .headBox .logo img {max-width: 100%; max-height: .54rem; object-fit: contain; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);} .headBox .re {height: 100%; gap: .34rem;} /* 导航 */ nav {height: 100%;} nav > ul {display: flex; height: 100%; align-items: center;justify-content: space-between;} nav > ul > li {height: 100%;display: flex;align-items: center;position: static;margin: 0 .247rem;} nav > ul > li > a {color: #fff;font-size: var(--font18);position: relative;display: flex;align-items: center;} nav > ul > li > a::after {content: '';position: absolute;right: -0.03rem;top: 0.05rem;width: 0;height: 1px;background: #fff;transition: .5s;width: .1rem;height: .1rem;background: #008AF4;border-radius: 50%;z-index: -1; opacity: 0;} nav > ul > li.on > a::after {opacity: 1;} @media (any-hover: hover) { nav > ul > li:hover > a::after {opacity: 1;} } .navdown{display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; z-index: 100; border-bottom: .09rem solid #008AF4; border-radius: 0px 0px .1rem .1rem; padding: .24rem .38rem .31rem;} .navdown-item{gap: .6rem; justify-content: space-between;} .nav-btn{width: 19.125%; flex-shrink: 0;} .nav-btn ul{display: flex; gap: .15rem; flex-direction: column;} .nav-btn ul li{transition: .6s;} .nav-btn ul li a{background: #F1F7FC;padding: .1rem .17rem .1rem .26rem;border-radius: .12rem;transition: .6s;flex-wrap: nowrap;} .nav-btn ul li em{color: #333;transition: .6s;flex: 1;} .nav-btn ul li .icon{width: .49rem; height: .49rem; background: #008AF4; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .6s;} .nav-btn ul li .icon img{width: .19rem; object-fit: contain; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);transform: rotate(-45deg); transition: .6s;} .nav-btn ul li.active a{background: #008AF4;} .nav-btn ul li.active em{color: #FFFFFF;} .nav-btn ul li.active .icon{background: #FFFFFF;} .nav-btn ul li.active .icon img{transform: rotate(0deg); -webkit-filter: brightness(1) invert(0); filter: brightness(1) invert(0);} @media (any-hover: hover) { .nav-btn ul li:hover a{background: #008AF4;} .nav-btn ul li:hover em{color: #FFFFFF;} .nav-btn ul li:hover .icon{background: #FFFFFF;} .nav-btn ul li:hover .icon img{transform: rotate(0deg); -webkit-filter: brightness(1) invert(0); filter: brightness(1) invert(0);} } .navdown-content{ width: 32%; flex-shrink: 0;} nav > ul > li:nth-child(2) .navdown-content{flex:1;} .navdown-content-item{display: none;} .navdown-content-item.active{display: block;} .navdown-content-item dl{gap: .24rem;} .navdown-content-item dl dd{background: #F1F7FC; border-radius: .12rem; border: 1px solid #F2F2F2; padding: .23rem;} .navdown-content-item dl dd .pic{overflow: hidden; } .navdown-content-item dl dd .pic img{width: 100%; object-fit: cover; transition: .6s; mix-blend-mode: multiply;} .navdown-content-item dl dd em{color: #333333; text-align: center; display: block;} @media (any-hover: hover) { .navdown-content-item dl dd:hover .pic img{transform: scale(1.1);} .navdown-content-item dl dd:hover em{color: #008AF4;} } .navdown-item2{justify-content: center; gap: .6rem; align-items: stretch} nav > ul > li:nth-child(3) .navdown-item2 .nav-btn{width: 40%; gap: .2rem;} nav > ul > li:nth-child(3) .navdown-item2 .nav-btn ul{display: grid; grid-template-columns: repeat(2, 1fr); gap: .2rem;} .navdown-content .nav-pic{overflow: hidden; border-radius: 0 0 .1rem .1rem; position: relative;} /* .navdown-content .nav-pic::after{content: '';position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,45,80,0.69);} */ .navdown-content .nav-pic img{width: 100%; object-fit: cover; transition: .6s;} .ver a.on{font-weight: bold;} /* 搜索 */ .head_search a {cursor: pointer;position: relative;width: .5rem;height: .5rem;background: #FFFFFF;border-radius: 50%;color: #008AF4;} .head_search img{width: .19rem;} .search-dropdown {position: absolute;top: 110%;right: 0;width: 3.5rem;background: #fff;box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.1);padding: .2rem;border-radius: .1rem;margin-top: .15rem;opacity: 0;visibility: hidden;transform: translateX(3%);transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);z-index: 100;} .search-dropdown.active {opacity: 1;visibility: visible; top: 100%;} /* 小三角 */ .search-dropdown::before {content: "";position: absolute;bottom: 100%;right: .15rem;border-width: .1rem;border-style: solid;border-color: transparent transparent #fff transparent;} .search-dropdown .search-form {display: flex;align-items: center;background: #f5f5f5;border-radius: .5rem;padding: .05rem .15rem;border: 1px solid transparent;transition: all 0.3s;width: 100%;} .search-dropdown .search-form:focus-within {background: #fff;border-color: #008af4;box-shadow: 0 0 .1rem rgba(102, 45, 145, 0.1);} .search-dropdown .search-input {flex: 1;border: none;background: transparent;padding: .1rem;font-size: var(--font14);color: #333;outline: none;} .search-dropdown .search-submit {background: transparent;border: none;color: #008af4;font-size: var(--font18);cursor: pointer;display: flex;align-items: center;justify-content: center;transition: transform 0.3s;} .search-dropdown .search-submit:hover {transform: scale(1.1);} @media screen and (max-width: 767px) { .search-dropdown {position: absolute;top: 1.2rem;left: 0;right: 0;width: 94%;margin-top: 0;} .search-dropdown::before {display: none;} } header.c-style2 {background: #fff;} header.c-style2 .headBox .logo img {-webkit-filter: brightness(1) invert(0); filter: brightness(1) invert(0);} header.c-style2 nav > ul > li > a {color: #333;} header.c-style2 nav > ul > li > a::after {background: #008AF4;} header.c-style2 .ver a{color: #333;} header.c-style2 .ver a.on{color: #008AF4;} header.c-style2 .head_search a{box-shadow: 0px 4px 1px 0px rgba(48,48,48,0.03);} @media (any-hover: hover) { header.c-style2 .ver a:hover{color: #008AF4;} } /* =================头部 end!!!=================== */ /* ===============公用css star!!!!===================*/ .index-more{background: linear-gradient(124deg, #0084E9 0%, #83C0FF 100%);border-radius: 100px;padding: .15rem .315rem;transition: .6s;display: inline-flex;color: #fff;} @media (any-hover: hover) { .index-more:hover {box-shadow: 0 0 0 .1rem rgba(0, 138, 244, .2);} } /* ===============公用css end!!!!===================*/ /* ======首页======= */ .indexBanner { position: relative; overflow: hidden; } .indexBanner .swiper {height: auto;} .indexBanner .slide {overflow: hidden;} .indexBanner .slide .imgBox {position: relative; height: auto;} .indexBanner .slide .imgBox img {width: 100%; object-fit: cover; transition: 1s linear 2s;transform: scale(1.1, 1.1);} .indexBanner .slide .box {width: 100%; height: 100%; display: flex; flex-direction: column; } .indexBanner .slide .con{} .indexBanner .slide .con h2{font-size:.5rem;font-weight: bold;line-height: 1.2;} .indexBanner .slide .con h3{ width: 37%; margin: .34rem 0 .7rem;} .indexBanner .slide .con a{background: linear-gradient(124deg, #0084E9 0%, #84C1FF 100%);border-radius: 0px .18rem 0px .18rem;display: inline-flex;padding: .15rem .38rem; transition: .5s;} .indexBanner .slide .con a img{width: .08rem;} @media (any-hover: hover) { .indexBanner .slide .con a:hover{border-radius: 0;} } /* 当前 */ .indexBanner .swiper-slide-active .imgBox img, .indexBanner .swiper-slide-duplicate-active .imgBox img {transition: 6s linear;transform: scale(1, 1);} /* 控件 */ .indexBanner .pagtion {width: auto;top: 50%;transform: translateY(-50%);right: 8.33%;left: auto;display: flex;flex-direction: column;gap: .11rem;align-items: center;bottom: auto;} .indexBanner .pagtion span {width: .14rem;height: .14rem;background: #FFFFFF;opacity: .3;position: relative;display: inline-flex;align-items: center; transform: scale(.75); transition: .6s;} .indexBanner .pagtion span.swiper-pagination-bullet-active {opacity: 1; transform: scale(1);} /* 新闻通知 */ .indexBanner-box{position: relative;} .news-notice {position: absolute;left: 0;bottom: 0;z-index: 10;width: 100%;border-top: 1px solid rgba(255,255,255,0.3); height: 1.15rem;} .news-notice-box {align-items: stretch;height: 100%;} .news-notice-list {width: 69%;padding: 0 8%;overflow: hidden;height: 100%;} .news-notice-item {width: 100%;height: 100%;box-sizing: border-box;display: flex;align-items: center;} .news-notice-item a {display: block;width: 100%;} .news-notice-item h4 {color: #fff;font-weight: bold;margin-bottom: .03rem;} .news-notice-item p {color: #CACACA;} .news-notice-ctrl {align-items: stretch;width: 31%;height: 100%;} .news-notice-page {background: #fff;height: 100%;width: 58%;} .news-notice-arrow {display: flex;flex-direction: column;gap: .16rem;height: 100%;border-right: 1px solid #F2F2F2;justify-content: center;width: 41%;align-items: center;} .news-notice-arrow span {cursor: pointer;display: flex;align-items: center;justify-content: center;transition: .3s;} .news-notice-arrow span img {width: .21rem;object-fit: contain;display: block;transition: .3s;-webkit-filter: brightness(0);filter: brightness(0);opacity: .45;} .news-notice-arrow .next img {transform: rotate(180deg);} .news-notice-num {display: flex;gap: .04rem;line-height: 1;width: 59%;align-items: baseline;justify-content: center;} .news-notice-num .cur {font-size: var(--font40);font-weight: 800;color: #008AF4;} .news-notice-num i {font-style: normal;color: #333;font-size: var(--font16);padding: 0 .02rem;} .news-notice-num .total {font-size: var(--font16);color: #333;} .news-notice-more {background: #008AF4;color: #fff;height: 100%;transition: .4s;width: 42%; gap: .18rem;} @media (any-hover: hover) { .news-notice-arrow span:hover img{opacity: 1;} .news-notice-more:hover {background: #0074ef;} .news-notice-item a:hover h4 {color: #84C1FF;} } /* 产品与解决方案 */ .proclass-bg {padding: .98rem 0 1.12rem;background: url(../images/proclass-bg.jpg) no-repeat center top / cover;} .proclass-bg .index-title {align-items: flex-start;} .index-title h2 {color: #333;line-height: 1.15;flex-shrink: 0;font-weight: bold;} .index-title h3{margin-bottom: .1rem;} .proclass-bg .index-title h3 {width: 38%; color: #666; margin-bottom: 0; } .proclass-list ul {display: flex;gap: .2rem;height: 5.58rem;margin-top: .98rem;} .proclass-list li {flex: 1;min-width: 0;height: 100%;background: #F0F6F7;border-radius: .14rem;overflow: hidden;transition: flex .5s ease;isolation: isolate;} .proclass-list li.on {flex: 2.91; background: linear-gradient(0deg, #F2F2F2 0%, #EDFAFF 100%);} .proclass-list li a {display: flex; flex-direction: column; align-items: center; height: 100%; padding: .48rem .15rem .3rem; position: relative;} .proclass-list li .txt {text-align: center; width: 100%; position: relative; flex-shrink: 0;} .proclass-list li .txt h4 {color: #333;transition: .5s;} .proclass-list li .txt p {color: #666;opacity: 0;overflow: hidden;transition: .5s;margin: 0.04rem 0 .2rem;} .proclass-list li .txt .index-more{opacity: 0;} .proclass-list li.on .txt p {opacity: 1;} .proclass-list li.on .txt .index-more {opacity: 1;} .proclass-list li .pic {width: 100%;flex: 1;display: flex;align-items: center;justify-content: center;overflow: hidden;} .proclass-list li .pic img {max-width: 100%;max-height: 100%;object-fit: contain;display: block;transition: .5s;mix-blend-mode: multiply;} @media (any-hover: hover) { .proclass-list li.on .txt .more:hover {filter: brightness(1.05);} } /* 关于嘉宝精密 */ .about-bg {padding: 1.5rem 0 .83rem;background: url(../images/about-bg.webp) no-repeat center top / cover;} .about-top {align-items: flex-start;margin-bottom: 1.04rem;} .about-top .index-title {width: 42%;} .about-top .index-title h2 {} .index-title .index-more {margin-top: .41rem;} .about-top .text {width: 50%;} .about-top .text h4 {color: #555;line-height: 1.8;font-weight: 500;margin-bottom: .28rem;} .about-top .text h4:last-child {margin-bottom: 0;} .about-bottom ul {display: flex;gap: .09rem;} .about-bottom li {flex: 1;min-width: 0;background: #E3E3E3;border-radius: .2rem;padding: .31rem .27rem;display: flex;flex-direction: column;transition: .6s;overflow: hidden;} .about-bottom li.on {background: #002F53;flex: 1.6;} .about-bottom li .icon-top {position: relative;margin-bottom: .75rem;} .about-bottom li .icon {position: absolute; left: 0; top: 0; width: .72rem;height: .72rem;border-radius: 50%;background: #41A1EB;display: flex;align-items: center;justify-content: center;overflow: hidden;flex-shrink: 0;width: .64rem;height: .64rem;background: #008AF4;border-radius: 50%;border: .06rem solid #E3E3E3;} .about-bottom li .icon img {max-width: 50%; object-fit: contain; } .about-bottom li .data {align-items: center;gap: .12rem;margin-left: 0.38rem;margin-top: .07rem;} .about-bottom li .data em {line-height: 1;color: #333;transition: .5s;font-size: 1.2rem;font-weight: bold;font-family: 'Montserrat';} .about-bottom li .data .lab {display: flex;flex-direction: column;justify-content: center;} .about-bottom li .data .lab span {color: #333;font-weight: bold;transition: .5s;} .about-bottom li .data .lab h4 {color: #333;font-weight: 500;transition: .5s;} .about-bottom li p {color: #666;transition: .5s;} .about-bottom li.on .icon{border-color: #002F53;} .about-bottom li.on .data em, .about-bottom li.on .data .lab span, .about-bottom li.on .data .lab h4, .about-bottom li.on p {color: #fff;} /* 行业应用 */ .industry-bg {position: relative;overflow: hidden;height: 8.49rem;} .industry-main {position: relative;width: 100%;height: 100%;z-index: 2;} .industry-main .swiper-slide {position: relative;height: 100%;overflow: hidden;} .industry-main .pic {position: absolute; inset: 0; z-index: 1;} .industry-main .pic::after{position: absolute; content: ''; width: 100%; height: 100%; top: 0; background: rgba(1, 52, 90, .7); z-index: 1; } .industry-main .pic img {width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block;} .industry-main .container {position: relative;z-index: 2;height: 100%;display: flex;align-items: flex-start;justify-content: flex-end;margin-top: 1.01rem;} .industry-main .con {width: 55.6%;background: rgba(1, 52, 90, .7);border-radius: .14rem;padding: .9rem .4rem 1rem;color: #fff;} .industry-main .con h4 {margin-bottom: .3rem;color: #fff;} .industry-main .con .text p {color: #fff;line-height: 1.85;margin-bottom: .08rem;} .industry-main .con .text p:last-child {margin-bottom: 0;} .industry-ui {position: absolute;left: 0;right: 0;top: 1.7rem;z-index: 88;display: flex;align-items: center;pointer-events: none;color: #fff;} .industry-ui .index-title{width: 43%;} .industry-ui .index-title h2{color: #fff;} .industry-ui .index-more {pointer-events: auto;} .industry-bottom {position: absolute;z-index: 2;border-top: 1px solid rgba(255, 255, 255, .1);width: 100%;bottom: 0;padding: .23rem 0 .48rem;} .industry-thumbs .swiper-slide {display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;} .industry-thumbs .icon {width: .89rem;height: .89rem;border-radius: 50%;border: 1px solid rgba(255, 255, 255, .3);display: flex;align-items: center;justify-content: center;overflow: hidden;transition: .4s;background: transparent;padding: .11rem;} .industry-thumbs .icon img {object-fit: contain;mix-blend-mode: screen;transition: .4s;max-width: 100%;} .industry-thumbs .swiper-slide span {display: block;margin-top: .2rem;color: #fff;text-align: center;transition: .4s; } .industry-thumbs .swiper-slide-thumb-active .icon {background: #008AF4; border-color: #008AF4;} /* 为什么选择嘉宝精密 */ .why {position: relative;overflow: hidden;padding: 1.12rem 0 .45rem;margin-bottom: 1.1rem;} .why-mark {position: absolute;left: 50%;bottom: 0;transform: translate(-50%, 0);font-size: 1.92rem;font-weight: 800;color: rgba(0, 0, 0, .02);line-height: 1;pointer-events: none;z-index: 0;user-select: none;} .why .container {position: relative;z-index: 1;} .why-list .swiper-wrapper {align-items: center;} /* slide / 图片占位尺寸固定，用 scale 做大小过渡，避免高度变化导致上下晃动 */ .why-list .swiper-slide {width: 40.72%;opacity: .35;display: flex;flex-direction: column;align-items: center;transition: opacity .7s cubic-bezier(0.33, 1, 0.68, 1);} .why-list .swiper-slide-active, .why-list .swiper-slide-duplicate-active {opacity: 1;} .why-list .swiper-slide .pic {width: 100%;border-radius: .08rem;overflow: hidden;aspect-ratio: 652 / 380;height: auto;transform: scale(0.6201);transform-origin: center center;transition: transform .7s cubic-bezier(0.33, 1, 0.68, 1);will-change: transform;} .why-list .swiper-slide-active .pic, .why-list .swiper-slide-duplicate-active .pic {transform: scale(1);} .why-list .swiper-slide .pic img {width: 100%;height: 100%;display: block;object-fit: cover;} .why-list .swiper-slide p {width: 100%;min-height: 1.5em;margin-top: .38rem;color: #333;text-align: center;opacity: 0;visibility: hidden;transition: opacity .5s ease .15s, visibility .5s;font-weight: 500;} .why-list .swiper-slide-active p, .why-list .swiper-slide-duplicate-active p {opacity: 1;visibility: visible;} @media (min-width: 992px) { /* 两侧 scale 后的空隙补偿，视觉间距接近原 spaceBetween:70 */ .why-list .swiper-slide {margin-right: -3.45% !important;} } .why-ctrl {display: flex;align-items: center;justify-content: center;gap: .1rem;margin-top: .33rem;position: relative;z-index: 2;} .why-ctrl .why-prev, .why-ctrl .why-next {background: rgba(0, 138, 244, .3);width: .77rem;height: .49rem;border-radius: .25rem;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: .4s;flex-shrink: 0;opacity: 1;} .why-ctrl img {width: .11rem;display: block;object-fit: contain;} .why-ctrl .why-next img {transform: rotate(180deg);} @media (any-hover: hover) { .why-ctrl .why-prev:hover,.why-ctrl .why-next:hover {background: #008AF4;} } /* 合作客户 */ .partner-bg {background: #fcfeff;padding: 1.05rem 0 1rem; overflow: hidden;} .partner-list {width: 100%;margin: 0 auto;margin-top: .6rem;} .partner-row {display: flex;justify-content: center;align-items: center;gap: .32rem;} .partner-row2 {margin-top: -.4rem;} .partner-item a {display: block;filter: drop-shadow(1px 2px 3px rgba(48, 48, 48, 0.08));transition: filter .4s;} .partner-item .hex {width: 2rem;height: 2.31rem;display: flex;align-items: center;justify-content: center;background: #fff;clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);} .partner-item .hex img {max-width: 85%;max-height: 38%;width: auto;height: auto;object-fit: contain;display: block;position: relative;z-index: 1;} /* 新闻中心 */ .news-bg {padding: 1.1rem 0;background: url(../images/news-bg.jpg) no-repeat center top / cover;} .news-top {align-items: center;margin-bottom: .45rem;} .news-arrow {display: flex;align-items: center;gap: .1rem;flex-shrink: 0;/* padding-bottom: .06rem; */} .news-arrow .news-prev, .news-arrow .news-next {width: .77rem;height: .49rem;border-radius: .25rem;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: .4s;flex-shrink: 0;background: rgba(0, 138, 244, .3);opacity: 1;} .news-arrow img {width: .11rem;display: block;object-fit: contain;-webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1);} .news-arrow .news-next img {transform: rotate(180deg);} .news-list {overflow: hidden;padding: .1rem 0;} .news-item {display: block;background: #fff;border-radius: .14rem;overflow: hidden;box-shadow: 12px 11px 21px 6px rgba(202,202,202,0.06);transition: box-shadow .4s, transform .4s;height: 100%;} .news-item .pic {overflow: hidden;aspect-ratio: 508 / 390;} .news-item .pic img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform .6s;} .news-item .txt {padding: .3rem;} .news-item .txt h4 {color: #333;font-weight: bold;transition: color .4s;} .news-item .bot {margin-top: .12rem;gap: .2rem;} .news-item .bot span, .news-item .bot em {color: #666;font-style: normal;transition: color .4s;} @media (any-hover: hover) { .news-arrow .news-prev:hover,.news-arrow .news-next:hover {background: #0074ef;} .news-item:hover .pic img {transform: scale(1.05);} .news-item:hover .txt h4 {color: #008AF4;} .news-item:hover .bot em {color: #008AF4;} } /* 底部分类链接 */ .class-links {padding: .81rem 0 1rem;} .class-list {display: flex;gap: .38rem;} .class-item {flex: 1;min-width: 0;} .class-list .class-box {height: 3.98rem;border-radius: .14rem;overflow: hidden;background-repeat: no-repeat;background-position: center;background-size: cover;padding: .6rem .66rem .9rem;display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;} .class-item--service .class-box {background-image: url(../images/link-pic.webp);color: #fff;} .class-item--service .txt h3 {color: #fff;margin-bottom: .12rem;font-weight: bold;} .class-item--service .txt p {color: rgba(255, 255, 255, .9);line-height: 1.6;} .class-item--msg .class-box {background-image: url(../images/link-pic2.jpg);} .class-item--msg .txt h3 {color: #333;margin-bottom: .12rem;font-weight: bold;} .class-item .index-more {align-self: flex-start;padding: .14rem .36rem;font-size: var(--font16);border: 0;cursor: pointer;} .class-form {display: flex;align-items: center;gap: .14rem;width: 61.5%;} .class-input {flex: 1;min-width: 0;display: flex;align-items: center;gap: .15rem;background: #fff;border-radius: .27rem;padding: 0 .32rem;height: .54rem; min-height: 38px;} .class-input i {color: #999;font-size: var(--font20);flex-shrink: 0;line-height: 1;} .class-input input {flex: 1;min-width: 0;border: 0;outline: none;background: transparent;height: 100%;font-size: var(--font16);color: #333;} .class-input input::placeholder {color: #999;} .class-form button {cursor: pointer; flex-shrink: 0;height: .54rem;align-items: center;padding: 0 .315rem;background: linear-gradient(124deg, #0084E9 0%, #83C0FF 100%);border-radius: 27px;color: #FFFFFF; min-height: 38px;} @media (any-hover: hover) { } /* ====================================================================底部 */ .footer {background: url(../images/footer-bg.jpg) no-repeat center top / cover;color: #666;padding: .72rem 0 0;} .footer-top {padding-bottom: .55rem;} .footer-main {display: flex;align-items: flex-start;justify-content: space-between; gap: .1rem;} .footer-logo {margin-bottom: .81rem;} .footer-logo img {height: .54rem;width: auto;display: block;object-fit: contain;} .footer-qr {display: flex;gap: .1rem;} .footer-qr li {text-align: center;} .footer-qr .img {width: 1.01rem;height: 1.01rem;margin: 0 auto .05rem;} .footer-qr .img img {width: 100%;height: 100%;object-fit: contain;display: block;} .footer-qr p {font-size: var(--font14);color: #666;} .footer-links {display: flex;justify-content: space-between;/* width: 52%; *//* flex: 1; */gap: .5rem;} .foternav dl {} .foternav dl dt {font-size: var(--font18);font-weight: bold;margin-bottom: .29rem;} .foternav dl dt a {color: #333;} .foternav dl dd {margin-bottom: .1rem;} .foternav dl dd a {display: inline-flex;align-items: center;gap: .08rem;font-size: var(--font15);color: #666;transition: color .3s;line-height: 1.6;} .foternav dl dd a img {width: .06rem;height: auto;object-fit: contain;flex-shrink: 0;} .footer-contact {flex-shrink: 0;width: 17%;} .footer-contact h4 {color: #333;font-size: var(--font18);font-weight: bold;margin-bottom: .29rem;} .footer-info li {display: flex;align-items: center;gap: .1rem;margin-bottom: .15rem;font-size: var(--font15);color: #666;} .footer-info li img {width: .15rem;height: auto;object-fit: contain;flex-shrink: 0;} .footer-info li span {flex: 1;min-width: 0;} .footer-bottom {padding: .24rem 0;border-top: 1px solid rgba(224, 224, 224, .4);font-size: var(--font15);color: #666;} .footer-bottom a {color: #666;transition: color .3s;} .footer-bottom .tech-support {display: flex;align-items: center;} .footer-bottom .tech-support a:first-child{margin-right: .4rem;} @media (any-hover: hover) { .foternav dl dd a:hover {color: #008AF4;} .foternav dl dt a:hover {color: #008AF4;} .footer-bottom a:hover {color: #008AF4;} } /* ====================================================================================内页================================================================================= */ /* 公用样式 */ .ny-banner {position: relative; overflow: hidden;} .ny-banner .imgBox img {width: 100%; min-height: 4.5rem;} .ny-banner .banner-box {} .pro-banner .banner-box .info{margin-top: .87rem; } .banner-title h1{position: relative; display: inline-block;} .banner-title h1:after{position: absolute;content: '';width: .2rem;height: .2rem;border-radius: 50%;background: url(../images/circle-icon.png) no-repeat center; background-size: contain;z-index: -1;right: -0.05rem;top: .03rem;} .banner-title b{font-size: .64rem; display: block;} .ny-banner .pic{width: 49.75%; display: flex; align-items: center; justify-content: center;} .ny-banner .pic img{display: block; max-width: 100%;} .banner-bottom{border-top: 1px solid rgba(255, 255, 255, .2); position: absolute; bottom: 0; z-index: 2; width: 100%; padding: .16rem 0;} .banner-bottom b{display: block; text-transform: uppercase; font-family: Montserrat; font-weight: bold; font-size: 1.2rem; color: rgba(255, 255, 255, 0); text-stroke: 1px #FFFFFF; opacity: 0.08; -webkit-text-stroke: 1px #FFFFFF; line-height: 1;} .banner-bottom .position{position: absolute; top: 50%; transform: translateY(-50%); color: #FFFFFF;} .banner-bottom .position a{color: #FFFFFF; transition: color .3s;} @media (any-hover: hover) { .banner-bottom .position a:hover {color: #008AF4;} } /* 内页分类列表页 */ .nypro-class ul li{background: url(../images/proclass-bg2.webp) no-repeat center top; background-size: cover; padding: .5rem 0;} .nypro-class ul li:nth-of-type(even){background: url(../images/proclass-bg3.jpg) no-repeat center top; background-size: cover; } .nypro-class ul li:nth-of-type(even) .class-box{flex-direction:row-reverse;} .nypro-class ul li .info{width: 50%;} .nypro-class ul li .pic{width:26%;} .nypro-class ul li .pic{display: flex; align-items: center; justify-content: center;} .nypro-class ul li .pic img{display: block; max-width: 100%; mix-blend-mode: multiply;} .nypro-class ul li .info h2{font-weight: 500; color: #333333; line-height: 1;} .nypro-class ul li .info h3{color: #1579C7; font-weight: bold; margin-bottom: .1rem;} .nypro-class ul li .info h4{font-weight: 500; color: #666666; margin: .26rem 0 1.15rem;} /* 内页产品列表页 */ .proMain {padding: .52rem 0;} .proMain-box {align-items: flex-start;gap: .50rem;} .pro-side {width: 28.85%;flex-shrink: 0;position: sticky;top: 1.3rem;} .pro-side ul {display: flex;flex-direction: column;} .pro-side li a{position: relative;} .pro-side li a::after{position: absolute;content: '';left: 0;top: 0;height: 100%;width: 0;background: #008AF4;transition: .6s;z-index: 1;border-radius: 0 .7rem .7rem 0;} .pro-side li a > span {background: #E5E5E5;padding: .54rem 0 .54rem .5rem;transition: .4s;gap: .12rem;width: 83%;/* position: relative; *//* z-index: 3; */} .pro-side li:nth-of-type(even) a > span {background: #F3F8FB;} .pro-side li .icon {width: .33rem;height: .33rem;flex-shrink: 0;display: flex;align-items: center;justify-content: center;position: relative;z-index: 2;} .pro-side li .icon img {width: 100%; height: 100%; object-fit: contain; display: block; transition: .4s;} .pro-side li em {color: #666;font-weight: 500;/* line-height: 1.3; */transition: .4s;position: relative;z-index: 2;} .pro-side li .arrow {width: .08rem;height: auto;flex-shrink: 0;opacity: 0;visibility: hidden;transition: .4s;margin-right: .52rem;position: relative;z-index: 3;} .pro-side li.on a::after{width: 100%;} .pro-side li.on em {color: #fff;} .pro-side li.on .icon img {filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1);} .pro-side li.on .arrow {opacity: 1; visibility: visible;} .pro-content {width: 60.20%;} .pro-head {margin-bottom: .65rem;gap: .2rem;border-bottom: 1px solid #F2F2F2;padding-bottom: .42rem; flex-wrap: wrap;} .pro-head h2 {color: #333;font-weight: bold;} .pro-tabs {gap: .08rem;} .pro-tabs li a {display: flex;align-items: center;color: #333;font-size: var(--font20);padding: .18rem .1rem;border-radius: 100px;transition: .6s;text-align: center;background: #fcfcfc;justify-content: center;} .pro-tabs li.on a {background: #008AF4; color: #fff;} .pro-list ul{gap: .24rem;} .pro-list ul li a {display: flex;flex-direction: column;background: #F1F7FC;border-radius: .14rem;padding: .23rem .23rem .17rem;height: 100%;transition: .4s;position: relative;overflow: hidden;} .pro-list ul li .pic {flex: 1;display: flex;align-items: center;justify-content: center;} .pro-list ul li .pic img {display: block;max-width: 100%;object-fit: contain;transition: .5s; mix-blend-mode: multiply;} .pro-list ul li .bot {gap: .12rem;} .pro-list ul li .bot h3 {color: #333; font-weight: 500; transition: .4s; } .pro-list ul li .more {width: .49rem;height: .49rem;border-radius: 50%;background: #008AF4;display: flex;align-items: center;justify-content: center;flex-shrink: 0;transition: .4s;} .pro-list ul li .more img {width: .14rem; height: auto; display: block; transition: .4s;} @media (any-hover: hover) { .pro-side li:hover a::after{width: 100%;} .pro-side li:hover em {color: #fff;} .pro-side li:hover .icon img {filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1);} .pro-side li:hover .arrow {opacity: 1; visibility: visible;} .pro-tabs li:hover a {background: #008AF4; color: #fff;} .pro-list ul li a:hover .pic img {transform: scale(1.05);} .pro-list ul li a:hover .bot h3 {color: #008AF4;} .pro-list ul li a:hover .more img {transform: rotate(45deg);} } /* 内页产品详情页 */ .proxq-banner{background: url(../images/proxq-banner.jpg) no-repeat center top / cover; padding: .28rem 0 0;} .banner-box{gap: .3rem;} .proxq-left{width: 50%;} .proxq-banner .position{color: #999; margin-bottom: .74rem;} .proxq-banner .position a{color: #999; transition: color .3s;} @media (any-hover: hover) { .proxq-banner .position a:hover {color: #008AF4;} } .proxq-banner .info h1{position: relative;display: inline-block;z-index: 5;} .proxq-banner .info h1:after{position: absolute;content: '';width: .2rem;height: .2rem;border-radius: 50%;background: url(../images/circle-icon2.png) no-repeat center; background-size: contain; z-index: -1;left: -.05rem;top: .05rem;} .proxq-banner .info h2{font-size: .5rem;display: block;font-weight: bold;margin-bottom: .9rem; line-height: 1.2;} .proxq-banner .info a{display: inline-flex;background: linear-gradient(124deg, #0084E9 0%, #84C1FF 100%);border-radius: 0px .18rem 0px .18rem;gap: .17rem;padding: .225rem .305rem; margin-bottom: .42rem;} .banner-en b{font-family: Montserrat;font-weight: bold;font-size: 1.2rem;line-height: 1;color: rgba(0, 0, 0, 0);text-transform: uppercase;text-stroke: 1px #000000;opacity: 0.1;-webkit-text-stroke: 1px #000000;display: block;} .proxq-pic{width: 40%;mix-blend-mode: multiply;} .proxq-gallery{display: flex;align-items: center;width: 100%;} .proxq-main{flex: 1;min-width: 0;position: relative;} .proxq-main-swiper{width: 100%;} .proxq-main-swiper .pic{width: 100%;} .proxq-main-swiper .pic img{width: 100%;height: auto;display: block;object-fit: contain;} .proxq-pagination{position: absolute;display: flex;align-items: center;justify-content: center;gap: .16rem;bottom: 0;} .proxq-pagination .swiper-pagination-bullet{width: .08rem;height: .08rem;margin: 0 !important;background: #c9c9c9;opacity: 1;border-radius: 50%;transition: .3s;} .proxq-pagination .swiper-pagination-bullet-active{background: #666;} .proxq-thumbs-box{display: flex;flex-direction: column;align-items: center;gap: .18rem;flex-shrink: 0;} .proxq-thumbs{width: .89rem;height: calc(.89rem * 3 + .06rem * 2);} .proxq-thumbs .swiper-slide{height: .89rem !important;cursor: pointer;} .proxq-thumbs .pic{width: 100%;height: 100%;border: 1px solid #D5D5D5;background: #fff;overflow: hidden;box-sizing: border-box;transition: border-color .3s;} .proxq-thumbs .pic img{width: 100%;height: 100%;display: block;object-fit: cover;} .proxq-thumbs .swiper-slide-thumb-active .pic{border-color: #008AF4;} .proxq-prev,.proxq-next{width: .50rem;height: .50rem;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: .3s;flex-shrink: 0;border: 1px solid #D8D8D8;} .proxq-prev img,.proxq-next img{width: .15rem;display: block;} .proxq-next img{transform: rotate(180deg);} @media (any-hover: hover) { .proxq-prev:hover,.proxq-next:hover{background: #0077d9;border-color: #0077d9;} .proxq-prev:hover img,.proxq-next:hover img{filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1);} } .proxq-bg{background: #F1F7FC; padding: .74rem 0 .52rem;} .pro-detail{background: #FFFFFF; border-radius: .1rem; padding: .69rem .7rem .66rem; margin-bottom: .37rem; } .pro-detail .detail-title{border-bottom: 1px solid rgba(219, 219, 219, 1); padding-bottom: .4rem; margin-bottom: .4rem;} .pro-content{margin-bottom: .4rem;} .recom-bg{background: #FFFFFF; border-radius: .1rem; padding: .63rem .53rem .68rem;} .recom-list{overflow: hidden; margin-top: .55rem;} .recom-list ul li a {display: flex;flex-direction: column;background: #F1F7FC;border-radius: .14rem;padding: .23rem .23rem .17rem;height: 100%;transition: .4s;position: relative;overflow: hidden;} .recom-list ul li .pic {flex: 1;display: flex;align-items: center;justify-content: center;} .recom-list ul li .pic img {display: block;max-width: 100%;object-fit: contain;transition: .5s; mix-blend-mode: multiply;} .recom-list ul li .bot {gap: .12rem;} .recom-list ul li .bot h3 {color: #333; font-weight: 500; transition: .4s;display: -webkit-box;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical; } .recom-list ul li .more {width: .49rem;height: .49rem;border-radius: 50%;background: #008AF4;display: flex;align-items: center;justify-content: center;flex-shrink: 0;transition: .4s;} .recom-list ul li .more img {width: .14rem; height: auto; display: block; transition: .4s; transform: rotate(45deg);} @media (any-hover: hover) { .recom-list ul li a:hover .pic img {transform: scale(1.05);} .recom-list ul li a:hover .bot h3 {color: #008AF4;} .recom-list ul li a:hover .more img {transform: rotate(-15deg);} } .recom-arrow .swiper-button-prev,.recom-arrow .swiper-button-next{position: relative; width: .49rem; height: .49rem; background: #008AF4; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: .5; } .recom-arrow .swiper-button-prev img,.recom-arrow .swiper-button-next img{width: .19rem;} .recom-arrow .swiper-button-next img{transform: rotate(180deg);} .recom-arrow .swiper-button-prev{left: 0;} .recom-arrow .swiper-button-next{right: 0;} @media (any-hover: hover) { .recom-arrow .swiper-button-prev:hover,.recom-arrow .swiper-button-next:hover{opacity: 1;} } /* 内页应用行业列表页 */ .industryMain{background: #F8FBFE; padding: .99rem 0 .57rem;} .nyindustry-list ul{gap:.29rem .4rem} .nyindustry-list ul li{border-radius: .1rem; overflow: hidden;} .nyindustry-list ul li .pic{overflow: hidden; } .nyindustry-list ul li .pic img{display: block; width: 100%; transition: .6s;} .nyindustry-list ul li .info{background: #FFFFFF; padding: .38rem .55rem;} .nyindustry-list ul li .icon{width: .42rem; height: .42rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center;} .nyindustry-list ul li .icon img{display: block; max-width: 100%; object-fit: contain; -webkit-filter: brightness(1) invert(1); filter: brightness(1) invert(1);} .nyindustry-list ul li .name{gap:.2rem;} .nyindustry-list ul li .name h3{color: #333333;} .nyindustry-list ul li .more{width: .49rem; height: .49rem; border-radius: 50%; background: #008AF4; display: flex; align-items: center; justify-content: center; flex-shrink: 0;} .nyindustry-list ul li .more img{display: block; max-width: 100%; object-fit: contain; transition: .6s;} @media (any-hover: hover) { .nyindustry-list ul li:hover .pic img{transform: scale(1.05);} .nyindustry-list ul li:hover .more img{transform: rotate(45deg);} } /* 内页应用行业详情页 */ .industry-banner .imgBox{background: #002D50;} .industry-banner .imgBox img{opacity: .21;} .industry-banner .banner-box{justify-content: center;} .industryxqMain{background: #F1F7FC; padding: .74rem 0 .91rem;} .industryxq-content{align-items: flex-start;} .industry-left{width: 68.25%;padding: .55rem .55rem .57rem; margin-bottom: 0;} .industry-right{background: #FFFFFF;border-radius: .1rem;padding: .55rem .5rem .46rem;width:29.6875%; position: sticky; top: 1.1rem; } .industryxq-bottom{margin-top: .5rem;} .industry-prev .icon,.industry-next .icon{width: .53rem; height: .53rem; background: linear-gradient(124deg, #0084E9 0%, #83C0FF 100%);padding: .15rem; display: flex; align-items: center; justify-content: center; border-radius: 50%;} .industry-next .icon img{transform: rotate(180deg);} .industry-prev em,.industry-next em{color: #333333; font-weight: 500;} @media (any-hover: hover) { .industry-prev a:hover em,.industry-next a:hover em{color: #008AF4;} } .other-list ul{} .other-list ul li{margin-bottom: .1rem; overflow: hidden; border-radius: .12rem;} .other-list ul li .pic{ overflow: hidden; max-height: 0; opacity: 0; transition: max-height .55s cubic-bezier(0.33, 1, 0.68, 1), opacity .35s ease; } .other-list ul li .pic img{ display: block; width: 100%; transform: scale(1.06); transition: transform .65s cubic-bezier(0.22, 1, 0.36, 1); } .other-list ul li .info {background: #F1F7FC; padding: .16rem .4rem; transition: background .4s ease;} .other-list ul li .info h3{color: #333333;} .other-list ul li .icon{width: .49rem; height: .49rem; border-radius: 50%; background: #008AF4; padding: .15rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0;} .other-list ul li .icon img{display: block; max-width: 100%; object-fit: contain; transition: transform .45s cubic-bezier(0.33, 1, 0.68, 1);} @media (any-hover: hover) { .other-list ul li:hover .pic { max-height: 2.4rem; opacity: 1; } .other-list ul li:hover .pic img {transform: scale(1);} .other-list ul li:hover .info {background: #E8F3FB;} .other-list ul li:hover .icon img {transform: translateX(.04rem);} } /* 内页服务支持 */ .serviceMain{background: #FCFCFC;padding: 1rem 0;} .service-top{position: relative;} .service-top::after{position: absolute;content: '';width: 100%;height: 0.01rem;background: #F0F0F0;top: .03rem;} .service-btn{padding: 0 7%;box-sizing: border-box;margin-bottom: .55rem;} .service-btn ul li{text-align: center; position: relative;} .service-btn ul li::after{position: absolute;content: '';width: 0;height: 0.01rem;background: #0084E9;top: .03rem;left: 50%;transition: .6s;} .service-btn ul li .icon{width: 0.07rem;height: 0.07rem;background: #E1E1E1;margin: 0 auto .2rem;/* opacity: 0; */border-radius: 50%;} .service-btn ul li em{display: block;font-size:var(--font20);color: #333;} .service-btn ul li.swiper-slide-thumb-active .icon{ background: #0084E9;} .service-btn ul li.swiper-slide-thumb-active::after{width: 110%;} .service-btn ul li.swiper-slide-thumb-active em{color: #0084E9; font-weight: bold; } .service-list{--service-pic-w: 50%; --service-info-pad-x: .8rem; position: relative; overflow: hidden;} .service-list ul li .service-box{background: #fff;/* padding: .66rem .82rem .83rem; */box-sizing: border-box;} .service-list ul li .info{width: calc(100% - var(--service-pic-w));padding: 1.03rem var(--service-info-pad-x);display: flex;} .service-list ul li .icon{width: .58rem; height: .58rem;} .service-list ul li .icon img{display: block; max-width: 100%; object-fit: contain; transition: .6s;} .service-list ul li .info strong{font-size: var(--font32);font-weight: bold;color: #333333;display: block;margin: .27rem 0 .12rem;} .service-list ul li .note{color: #666;} .service-list ul li .pic{width: var(--service-pic-w);} .service-list ul li .pic img{display: block;width: 100%;/* border-radius: 0.10rem; */height: 100%;object-fit: cover; min-height: 5rem;} .service-arrow{position: absolute;bottom: .5rem;left: calc(var(--service-pic-w) + var(--service-info-pad-x));z-index: 9999;} #service-prev,#service-next{position: relative;top: auto;width: 0.77rem;height: 0.49rem;background: #008AF4;border-radius: .25rem;display: flex;align-items: center;justify-content: center;z-index: 9999;margin-top: 0;opacity: .3; transition: .6s;} #service-prev img,#service-next img{width: 0.11rem;} #service-prev::after,#service-next::after{display: none;} #service-next img{transform: rotateY(180deg); -webkit-transform: rotateY(180deg);} #service-prev{ left: auto;} #service-next{ right: auto;} @media (any-hover: hover) { #service-prev:hover,#service-next:hover{opacity: 1;} } /* ======关于我们======= */ .aboutSwiper { height: 100vh; position: relative; overflow: hidden; } .aboutSwiper >.swiper-wrapper >.home-slide { height: 100%; position: relative; overflow: hidden; z-index: 2; } .aboutSwiper >.swiper-wrapper >.home-slide >.bjBox { height: 100%; position: absolute; width: 100%; left: 0; top: 0; z-index: -1; } .aboutSwiper >.swiper-wrapper >.home-slide >.bjBox > img ,.aboutSwiper .swiper-wrapper >.home-slide .bjBox video { width: 100%; height: 100%; object-fit: cover; display: block; } /* 控件 */ .aboutpagtion { left: .1rem; right: auto; top: 50%; bottom: auto; width: auto; height: auto; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; gap: .39rem; z-index: 10; } .aboutpagtion.hide {opacity: 0; visibility: hidden; pointer-events: none;} .aboutpagtion .swiper-pagination-bullet { width: auto; height: auto; margin: 0 !important; background: transparent; opacity: 1; border-radius: 0; color: #fff; font-size: var(--font16); line-height: 1; position: relative; padding-left: .11rem; transition: .4s; text-align: left; } .aboutpagtion .swiper-pagination-bullet::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: .4s; } .aboutpagtion .swiper-pagination-bullet-active { /* color: #fff; */ font-weight: bold; } .aboutpagtion .swiper-pagination-bullet-active::before { background: #008AF4; } .aboutpagtion .swiper-pagination-bullet-hidden { display: none !important; } /* 第二屏、第四屏：浅色分页 */ .aboutpagtion.c-style2 .swiper-pagination-bullet{color: #333333;} .aboutpagtion.c-style2 .swiper-pagination-bullet-active{color: rgba(0, 135, 239, 1);} .aboutOne > .bjBox img {object-fit: cover; object-position: center center;} .aboutOne-box {position: relative; z-index: 2; } .aboutOne-box .container { margin-top: 1.1rem; height: calc(100% - 1.1rem); box-sizing: border-box; border-left: 1px solid rgba(255, 255, 255, .2); position: relative; display: flex; flex-direction: column; /* justify-content: center; */ padding-top: 1.5rem; } .aboutOne-box .company {gap: .3rem;width: 100%;} .aboutOne-box .company-left {width: 44%;flex-shrink: 0;margin-left: .66rem;} .aboutOne-box .company-title {margin-bottom: .76rem;} .company-title h2 { display: inline-block; position: relative; font-weight: 500; } .company-title h2::after {position: absolute;content: '';width: .2rem;height: .2rem;border-radius: 50%;background: url(../images/circle-icon.png) no-repeat center;background-size: contain;z-index: -1;right: -.1rem;top: .03rem;} .company-title h3 { font-weight: bold; } .aboutOne-box .info h4 { line-height: 1.7; margin-bottom: .26rem; } .aboutOne-box .info h4:last-child {margin-bottom: 0;} .aboutOne-box .company-right {width: 32%;} .aboutOne-box .company-data { display: flex; gap: 1.35rem 0; flex-wrap: wrap; justify-content: space-between; } .aboutOne-box .company-data .num { align-items: baseline; gap: .06rem; line-height: 1; margin-bottom: .12rem; } .aboutOne-box .company-data .num em,.aboutOne-box .company-data .num b { font-size: .8rem; font-weight: bold; font-family: 'Montserrat'; color: #fff; line-height: 1; } .aboutOne-box .company-data .num span { font-size: var(--font40); font-weight: bold; color: #fff; line-height: 1; } .aboutOne-box .company-data p { color: rgba(255, 255, 255, .85); font-weight: 400; } .company-bottom{ position: absolute; bottom: 1.25rem; width: 100%; } .aboutOne-box .about-scroll {display: flex;flex-direction: column;align-items: center;gap: .1rem;cursor: pointer;z-index: 5;transition: opacity .3s;position: absolute;left: 0;right: 0;top: 50%;transform: translateY(-50%);} .aboutOne-box .about-scroll .icon { width: .49rem; height: .55rem; display: flex; align-items: center; justify-content: center; animation: aboutScrollTip 1.6s ease-in-out infinite; } .aboutOne-box .about-scroll .icon img { width: 100%; height: 100%; object-fit: contain; } .aboutOne-box .about-scroll span { opacity: .9; } @media (any-hover: hover) { .aboutOne-box .about-scroll:hover {opacity: .75;} } @keyframes aboutScrollTip { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(.08rem);} } .aboutOne-box .about-en {position: relative;} .aboutOne-box .about-en b { display: block; text-transform: uppercase; font-family: Montserrat; font-weight: bold; font-size: 1.2rem; color: rgba(255, 255, 255, 0); text-stroke: 1px #FFFFFF; -webkit-text-stroke: 1px #FFFFFF; opacity: 0.08; line-height: 1; text-align: center; } .aboutTwo-box {position: relative; z-index: 2; } .aboutTwo-box .container { margin-top: 1.1rem; height: 100%; position: relative; display: flex; align-items: center; } .aboutTwo-box .develop { width: 100%; height: 100%; align-items: center; position: relative; } .aboutTwo-box .develop-left { width: 100%; position: relative; z-index: 2; margin-left: .66rem; /* margin-top: .8rem; */ } .aboutTwo-box .develop-en { position: absolute; right: 0; top: 1.2rem; pointer-events: none; z-index: 0; width: 51.71%; } .aboutTwo-box .develop-en img{display: block; max-width: 100%;} .aboutTwo-box .develop-list { position: relative; z-index: 1; height: 7.8rem; /* 一次完整显示5条 */ overflow: hidden; padding-left: .16rem; /* 给圆点留出显示空间，避免被裁切 */ } .aboutTwo-box .develop-list.is-static .swiper-wrapper { transform: none !important; } /* 不超过5条时，不高亮首条，仅 hover 高亮 */ .aboutTwo-box .develop-list.is-static .swiper-slide-active::after { border-color: #B5D7F1; } .aboutTwo-box .develop-list.is-static .swiper-slide-active .year { color: #c9c9c9; } .aboutTwo-box .develop-list.is-static .swiper-slide-active .txt h4 { color: #333; } .aboutTwo-box .develop-list.is-static .swiper-slide-active .txt p { color: #333; } .aboutTwo-box .develop-list .swiper-slide { display: flex; align-items: flex-start; gap: .37rem; position: relative; padding-left: .92rem; height: auto; box-sizing: border-box; transition: .35s; } .aboutTwo-box .develop-list .swiper-slide::before { content: ''; position: absolute; left: .06rem; top: .18rem; width: 1px; background: #d9e6f2; height: 100%; } .aboutTwo-box .develop-list .swiper-slide:last-child::before {display: none;} .aboutTwo-box .develop-list .swiper-slide::after { content: ''; position: absolute; left: .06rem; top: .18rem; width: .19rem; height: .19rem; border-radius: 50%; background: #fcfcfc; box-sizing: border-box; transform: translateX(-50%); transition: .35s; z-index: 1; border: .03rem solid #B5D7F1; } .aboutTwo-box .develop-list .year { flex-shrink: 0; /* width: 1.1rem; */ /* font-family: Montserrat; */ font-weight: bold; font-size: .78rem; line-height: 1; color: #c9c9c9; transition: .35s; } .aboutTwo-box .develop-list .txt {padding-top: .06rem;} .aboutTwo-box .develop-list .txt h4 { color: #333; font-weight: bold; margin-bottom: .06rem; transition: .35s; } .aboutTwo-box .develop-list .txt p { color: #333; /* line-height: 1.6; */ transition: .35s; width: 50%; } .aboutTwo-box .develop-list .swiper-slide-active::after, .aboutTwo-box .develop-list .swiper-slide-duplicate-active::after {border-color: #0087EF;} .aboutTwo-box .develop-list .swiper-slide-active .year, .aboutTwo-box .develop-list .swiper-slide-duplicate-active .year, .aboutTwo-box .develop-list .swiper-slide-active .txt h4, .aboutTwo-box .develop-list .swiper-slide-duplicate-active .txt h4 { color: #008AF4; } .aboutTwo-box .develop-list .swiper-slide-active .txt p, .aboutTwo-box .develop-list .swiper-slide-duplicate-active .txt p { color: #666; } @media (any-hover: hover) { .aboutTwo-box .develop-list .swiper-slide:hover::after { border-color: #0087EF; } .aboutTwo-box .develop-list .swiper-slide:hover .year {color: #008AF4;} .aboutTwo-box .develop-list .swiper-slide:hover .txt h4 {color: #008AF4;} .aboutTwo-box .develop-list .swiper-slide:hover .txt p {color: #666;} } .aboutTwo-box .develop-pic { width: 42%; display: flex; align-items: center; justify-content: flex-end; position: relative; z-index: 1; position: absolute; right: 0; bottom: 0; } .aboutTwo-box .develop-pic img { display: block; max-width: 100%; object-fit: contain; } .aboutThree{background: #020838;} .aboutThree-bg { position: absolute; left: 0; right: 0; bottom: -5%; z-index: 0; pointer-events: none; z-index: 4; } .aboutThree-bg img { display: block; width: 100%; height: auto; object-fit: contain; object-position: bottom center; } .aboutThree-box { position: relative; z-index: 2; } .aboutThree-box .container { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; } .aboutThree-box .culture {width: 100%;} .aboutThree-box .culture-top { margin-bottom: .8rem; } .company-title h4{margin-bottom: .05rem;} .aboutThree-box .culture-arrow {gap: .1rem;flex-shrink: 0;} .aboutThree-box .culture-arrow .swiper-button-prev, .aboutThree-box .culture-arrow .swiper-button-next { position: relative; left: auto; right: auto; top: auto; margin: 0; width: .84rem; height: .84rem; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .3s; } .aboutThree-box .culture-arrow .swiper-button-prev::after, .aboutThree-box .culture-arrow .swiper-button-next::after {display: none;} .aboutThree-box .culture-arrow .swiper-button-prev img, .aboutThree-box .culture-arrow .swiper-button-next img { width: .13rem; height: auto; display: block; } .aboutThree-box .culture-arrow .swiper-button-next img {transform: rotate(180deg);} @media (any-hover: hover) { .aboutThree-box .culture-arrow .swiper-button-prev:hover, .aboutThree-box .culture-arrow .swiper-button-next:hover { background: #008AF4; } .aboutThree-box .culture-arrow .swiper-button-prev:hover img, .aboutThree-box .culture-arrow .swiper-button-next:hover img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } } .aboutThree-box .culture-list {overflow: hidden;} .aboutThree-box .culture-item { height: 100%; min-height: 5.84rem; padding: .8rem .3rem; border-radius: .2rem; border: 1px solid rgba(255, 255, 255, .3); background: rgba(8, 28, 78, .55); box-sizing: border-box; display: flex; flex-direction: column; gap: .4rem; transition: .4s; text-align: center; align-items: center; } .aboutThree-box .culture-item .icon { width: .73rem; height: .73rem; display: flex; align-items: center; justify-content: center; } .aboutThree-box .culture-item .icon img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } .aboutThree-box .culture-item .text h4 { color: #fff; font-weight: bold; margin-bottom: .1rem; } .aboutThree-box .culture-item .text p { color: #fff; font-weight: 400; } @media (any-hover: hover) { .aboutThree-box .culture-item:hover { background: rgba(0, 138, 244, .22); border-color: #008AF4; } } /* 第四屏 业务布局 */ .aboutFour {background: #fcfcfc;} .aboutFour-box { position: relative; z-index: 2; overflow: hidden; } .aboutFour-box .container {display: flex;align-items: flex-end;/* position: relative; *//* z-index: 2; *//* box-sizing: border-box; */} .aboutFour-box .business { width: 100%; align-items: center; gap: .4rem; } .aboutFour-box .business-left { width: 38%; flex-shrink: 0; margin-left: .66rem; position: relative; z-index: 2; } .aboutFour-box .company-title {margin-bottom: .53rem;} .aboutFour-box .info {margin-bottom: .7rem;} .aboutFour-box .info h4 { color: #666; line-height: 1.8; font-weight: 400; } .aboutFour-box .business-num {border-bottom: 1px solid #F3F3F3;gap: .83rem;flex-wrap: wrap;padding-bottom: .3rem;margin-bottom: .35rem;} .aboutFour-box .business-num li {min-width: 1.8rem;} .aboutFour-box .business-num .num { align-items: baseline; line-height: 1; margin-bottom: .03rem; font-size: .72rem; font-family: Montserrat; font-weight: 900; color: #0E8EF0; } .aboutFour-box .business-num p { color: #666; font-weight: 500; } .aboutFour-box .business-pic { width: 58%; justify-content: flex-end; position: absolute; z-index: 1; bottom: 0; right: 3%; } .aboutFour-box .business-pic img { display: block; max-width: 100%; object-fit: contain; } .aboutFour-box .business-en { margin-left: .66rem; } .aboutFour-box .business-en img { display: block; width: 100%; height: auto; object-fit: contain; object-position: bottom center; } .aboutFive{padding-top: 1.1rem;} /* 内页新闻中心列表页 */ .news-class{position: absolute; top: 0; height: 100%;} .news-class ul{gap: .5rem;} .news-class ul li{height: 100%;display: flex;align-items: center; transition: .6s; position: relative;} .news-class ul li::after{position: absolute; content: ''; left: 0; right: 0; top: -.05rem; margin: auto; width: .11rem; height: .11rem; background: #008AF4; border-radius: 50%; opacity: 0; transition: .6s;} .news-class ul li a{border-radius: 100px;padding: .095rem .34rem; transition: .6s;} .news-class ul li.on::after{opacity: 1; } .news-class ul li.on a{background: #008AF4;} @media (any-hover: hover) { .news-class ul li:hover::after{opacity: 1;} .news-class ul li:hover a{background: #008AF4;} } .newsMain{background: #f8fbfe; padding: .82rem 0 .73rem;} .nynews-list{margin-bottom: .67rem;} .nynews-list ul li{border-bottom: 1px solid #DDE8F1;height: 100%;border-radius: .08rem;overflow: hidden;} .nynews-list ul li:last-child{border-bottom: 0;} .nynews-item{display: flex;transition: .4s;height: 100%;} .nynews-item .date{position: relative; flex-shrink: 0;width: 1.61rem;display: flex;transition: .4s;flex-direction: column;align-items: center;justify-content: center;} .nynews-item .date::after{content: '';position: absolute;right: -.18rem;top: 50%;transform: translateY(-50%);width: 0;height: 0;border-style: solid;border-width: .1rem 0 .1rem .18rem;border-color: transparent transparent transparent #008AF4;opacity: 0;visibility: hidden;transition: .4s;} .nynews-item .date .day{display: block;font-size: var(--font52);font-weight: 500;color: #333;line-height: 1;transition: .4s;font-family: Montserrat;} .nynews-item .date .ym{display: block;margin-top: .1rem;font-size: var(--font24);color: #333;line-height: 1;transition: .4s;font-family: Montserrat;font-weight: 500;} .news-cor-bg{display: flex;flex: 1;padding: .2rem;padding-left: .18rem;align-items: center;justify-content: space-between;} .news-cor-bg .line{width: .49rem;height: .01rem;background: #CACACA;} .nynews-item .txt{ width: 64.3%;} .nynews-item .txt h3{color: #333; font-weight: bold; transition: color .4s;} .nynews-item .txt p{margin-top: .12rem;color: #666;} .nynews-item .views{gap: .08rem;margin-top: .18rem;} .nynews-item .views img{width: .17rem; height: auto; display: block; object-fit: contain; flex-shrink: 0;} .nynews-item .views em{color: #999; font-style: normal; line-height: 1;} .nynews-item .more{display: block;color: #666;transition: color .4s;border-top: 1px solid #F2F2F2;margin-top: .4rem;padding-top: .2rem;} .nynews-item .pic{flex-shrink: 0;width: 27.13%;border-radius: .08rem;overflow: hidden;} .nynews-item .pic img{display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; min-height: 3rem;} @media (any-hover: hover) { .nynews-item:hover .date{background: #008AF4;} .nynews-item:hover .news-cor-bg{background: #fff;} .nynews-item:hover .news-cor-bg .line{background: #008AF4} .nynews-item:hover .date::after{opacity: 1; visibility: visible;} .nynews-item:hover .date .day, .nynews-item:hover .date .ym{color: #fff;} .nynews-item:hover .txt h3{color: #008AF4;} .nynews-item:hover .more{color: #008AF4;} .nynews-item:hover .pic img{transform: scale(1.05);} } .newsxq-text{margin-top: .22rem;} .newsxq-text ul{gap: .36rem;} .newsxq-text ul li{gap: .08rem;} .newsxq-text ul li img{height: .12rem; width: auto;} .newsxq-text ul li span{color: #666666;} /* 内页新闻详情页 */ .recom-news ul li{margin-bottom: .25rem;} .recom-news ul li .pic{border-radius: 12px;width: 47%;overflow: hidden; } .recom-news ul li .pic img{display: block; width: 100%; transition: .6s;} .recom-news ul li .info{width: 47%;} .recom-news ul li .info h2{color: #333333; margin-bottom: .2rem;} .recom-news ul li .info span{color: #666666;} @media (any-hover: hover) { .recom-news ul li:hover .pic img{transform: scale(1.1);} .recom-news ul li:hover .info h2{color: #008AF4;} } /* 内页联系我们 */ .contact-banner .banner-box{z-index: 5;} .contact-banner .banner-title{position: relative; z-index: 2;} .contact-banner .banner-bottom{z-index: 2; pointer-events: none;} .contact-banner .banner-bottom .position{pointer-events: auto;} .banner-map{position: absolute; bottom: 0; right: 3%;width: 59%; z-index: 2;} .banner-map > img{display: block; width: 100%; height: auto;} .banner-map .map-points{position: absolute; inset: 0; width: 100%; height: 100%;} .banner-map .map-point{position: absolute; z-index: 1; transform: translate(-50%, -100%); cursor: pointer;} .banner-map .map-dot{position: relative; display: block; width: .2rem; height: .32rem;} .banner-map .map-dot img{display: block; width: 100%; height: 100%; object-fit: contain;} .banner-map .map-dot img{position: absolute; left: 0; top: 0; } .banner-map .map-dot img{transition: .25s;} .banner-map .map-pop{position: absolute;left: 50%;bottom: calc(100% + .25rem);transform: translateX(-50%);width: max-content;max-width: 3.7rem;padding: .12rem .29rem .25rem;background: #fff;border-radius: .04rem;box-shadow: 0 .06rem .18rem rgba(0, 0, 0, .12);opacity: 0;visibility: hidden;pointer-events: none;transition: .25s;z-index: 2;} .banner-map .map-pop::after{content: '';position: absolute;left: 50%;bottom: -.20rem;transform: translateX(-50%);border-left: .11rem solid transparent;border-right: .11rem solid transparent;border-top: .2rem solid #fff;} .banner-map .map-pop-hd{display: flex;align-items: center;gap: .15rem;margin-bottom: .18rem;} .banner-map .map-pop-hd img{width: .4rem;height: .41rem;object-fit: contain;flex-shrink: 0;} .banner-map .map-pop-hd strong{color: #008AF4; font-size: var(--font24); font-weight: bold; line-height: 1.2; } .banner-map .map-pop p{color: #333;font-size: var(--font18);font-weight: bold;} .banner-map .map-point:hover, .banner-map .map-point.on{z-index: 5;} .banner-map .map-point:hover .map-pop, .banner-map .map-point.on .map-pop{opacity: 1; visibility: visible;} /* 联系我们主体 */ .contactMain{background: #FCFCFC;} .contact-top{border-bottom: 1px solid #D4D4D4;} .contact-top li{width: 50%;gap: .24rem;padding: .7rem 0 .9rem 7.5%;box-sizing: border-box;flex-direction: column;align-items: flex-start;} .contact-top li + li{border-left: 1px solid #D4D4D4;} .contact-top .icon{width: .45rem;height: .41rem;flex-shrink: 0;display: flex;align-items: center;justify-content: center;} .contact-top .icon img{display: block; max-width: 100%; max-height: 100%; object-fit: contain;} .contact-top .txt{display: flex; flex-direction: column; gap: .08rem;} .contact-top .txt strong{font-size: var(--font42);font-weight: bold;color: #333;line-height: 1.1;} .contact-top .txt span{font-size: var(--font16);color: #333;font-weight: 500;} .contact-bot{border-bottom: 1px solid #D4D4D4;padding: .52rem 0 .48rem;} .contact-bot li{width: 25%;gap: .21rem;padding: 0;box-sizing: border-box;} .contact-bot .icon{width: .43rem;height: .43rem;flex-shrink: 0;display: flex;align-items: center;justify-content: center;} .contact-bot .icon img{display: block; max-width: 100%; max-height: 100%; object-fit: contain;} .contact-bot .icon i{font-size: .32rem; color: #666; line-height: 1;} .contact-bot .txt{display: flex;flex-direction: column;gap: 0;min-width: 0;} .contact-bot .txt span{color: #333;font-weight: bold;} .contact-bot .txt em,.contact-bot .txt a{font-size: var(--font16);color: #333;} .contact-form-box{padding: 1.67rem 0 1.07rem;} .contact-form-box .container{align-items: flex-start; gap: .6rem;} .contact-form-info{width: 40%;flex-shrink: 0;margin-top: .14rem;} .contact-form-info b{display: block;font-family: Montserrat, sans-serif;font-size: .8rem;font-weight: bold;color: #008AF4;line-height: 1;margin-bottom: .4rem;} .contact-form-info h2, .contact-form-info h3{font-size: var(--font48);font-weight: bold;color: #333;line-height: 1.35;} .contact-form-info p{margin-top: .32rem;font-size: var(--font16);color: #333;} .contact-form{width: 50%; flex: 1;} .contact-form-row{gap: .26rem;margin-bottom: .24rem;} .contact-field{flex: 1; min-width: 0;} .contact-field input, .contact-field select{display: block;width: 100%;height: .64rem;border: 0;border-bottom: 1px solid #666;background: transparent;outline: none;font-size: var(--font16);color: #333;border-radius: 0;padding: 0;box-sizing: border-box;transition: border-color .3s;appearance: none;-webkit-appearance: none;} .contact-field input::placeholder{color: #999;} .contact-field select{cursor: pointer; padding-right: .28rem; color: #999; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M1.4.3L6 4.9 10.6.3 12 1.7 6 7.7 0 1.7z'/%3E%3C/svg%3E") no-repeat right .06rem center / .12rem auto;} .contact-field select.has-value{color: #333;} .contact-field select option{color: #333;} .contact-field select option[disabled]{color: #999;} .contact-field input:focus, .contact-field select:focus{border-bottom-color: #008AF4;} .contact-form-code{position: relative;width: 48.4%;margin-bottom: 0;} .contact-form-code .contact-field{flex: 1;} .contact-form-code .code-pic{flex-shrink: 0;width: 1.14rem;height: .46rem;cursor: pointer;position: absolute;right: 0; top: 50%;transform: translateY(-50%);} .contact-form-code .code-pic img{display: block; width: 100%; height: 100%; object-fit: contain;} .contact-submit{display: inline-flex;align-items: center;justify-content: center;height: .54rem;padding: 0 .315rem;margin-top: .35rem;border: 0;border-radius: 100px;background: linear-gradient(124deg, #0084E9 0%, #83C0FF 100%);color: #fff;font-size: var(--font16);cursor: pointer;transition: opacity .3s;} @media (any-hover: hover) { .contact-bot .txt a:hover{color: #008AF4;} .contact-submit:hover{opacity: .88;} } #products-item{position: relative; top:-3rem} .footer-brand{width: 27%;} .foternav dl:nth-child(3){display: none;}