/* =================头部 start!!!=================== */ #c-placeholder {height: 1rem;} header {position: fixed; top: 0; left: 0; z-index: 99;width: 100%; transition: .5s; border-bottom: 1px solid transparent;} .headBox { max-width: 1700px; } .headBox .inner {height: 1.2rem; transition: height .5s;} .headBox .le {flex-shrink: 0;height: 100%;} .headBox .logo a {display: flex; align-items: center;} .headBox .logo img {max-width: 2rem; width: auto; object-fit: contain; transition: .5s; filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1);} /* 右侧区域 */ .headBox .re {display: flex; align-items: center; gap: .8rem;} /* 主导航行 */ .header nav {height: 100%;} .header nav > ul {gap: .7rem; height: 100%;} .header nav > ul > li {position: static; height: 100%; display: flex; align-items:center;} .header nav > ul > li > a {position: relative; color: #fff; font-size: var(--font18); transition: color .3s;} .header nav > ul > li > a::after {content: ''; position: absolute; left: 50%; width: 0; bottom: -30%; height: 2px; background: #0068DD; transition: .3s;} .header nav > ul > li:hover > a::after, .header nav > ul > li.on > a::after {width: 100%; left: 0;} /* 二级横向下拉（参考铭利达） */ .navSub { position: absolute; clip-path: inset(0 0 100% 0); left: 0; top: 99%; z-index: 20; width: 100%; background: #fff; border-top: 1px solid rgba(0, 0, 0, .05);transition: .4s ease; overflow: hidden; box-shadow: 0 .12rem .28rem rgba(0, 0, 0, 0.06);} .navSub-inner {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; padding: .25rem 0;} .navSub-inner a {position: relative; color: #333; font-size: var(--font16); line-height: 1.4; transition: color .3s;} .navSub-inner a::after {display: none;} .navSub-inner a:hover {color: #0068DD;} .header nav > ul > li:hover .navSub {clip-path: inset(0 0 0 0);} /* 搜索 */ .head_search {position: relative; margin-left: .2rem;} .head_search > a {width: auto; height: auto; background: transparent; border-radius: 0; color: #fff; transition: color .3s;} .head_search > a i {font-size: var(--font22); color: #fff; transition: color .3s;} @media (any-hover: hover) { .head_search > a:hover i {color: #0068DD !important;} } .search-dropdown {position: absolute;top: calc(100% + .12rem);right: -.25rem;width: 3.5rem;background: #fff;box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.1);padding: .2rem;border-radius: .1rem;opacity: 0;visibility: hidden;transform: translateY(-.05rem);transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);z-index: 100;} .search-dropdown.active {opacity: 1;visibility: visible;transform: translateY(0);} .search-dropdown::before {content: "";position: absolute;bottom: 100%;right: .25rem;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: #0068DD;box-shadow: 0 0 .1rem rgba(83, 155, 213, 0.15);} .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: #0068DD;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: fixed;top: 1.2rem; left: 5%;right: 5%;width: 90%;transform: translateY(-.05rem);} .search-dropdown::before {display: none;} } /* 语言 */ .head_lang {display: flex; align-items: center; gap: 5px;} .head_lang .lang_item {color: #fff; font-size: var(--font18); transition: color .3s;} .head_lang .lang_divider {color: #fff; font-size: var(--font18); transition: color .3s;} @media (any-hover: hover) { .head_lang .lang_item:hover {color: #0068DD !important;} } /* 悬浮样式 */ header.c-style1 {background: #fff;} header.c-style1 .logo img {filter: none; -webkit-filter: none;} header.c-style1 nav > ul > li > a {color: #000;} header.c-style1 .head_search > a i {color: #000;} header.c-style1 .head_lang .lang_item {color: #333;} header.c-style1 .head_lang .lang_divider {color: #333;} header.c-style1 .mobmenu dl dd {background: #333;} /* 下滑时 */ header.c-style2 {background: #fff; border-color: #eee;} header.c-style2 .headBox .inner {height: 1rem;} header.c-style2 .logo img {filter: none; -webkit-filter: none;} header.c-style2 nav > ul > li > a {color: #000;} header.c-style2 .head_search > a i {color: #000;} header.c-style2 .head_lang .lang_item {color: #000;} header.c-style2 .head_lang .lang_divider {color: #000;} header.c-style2 .mobmenu dl dd {background: #333;} /* =================头部 end!!!=================== */ /* ===============公用css star!!!!===================*/ .more-btn {display: inline-flex;align-items: center; justify-content: center; gap: 5px; padding: .15rem 0.25rem; color: #333; border: 1px solid #6B6B6B; border-radius: 999px;line-height: 1;transition: transform 0.3s, box-shadow 0.3s, background 0.3s, color 0.3s;} .more-btn i {font-size: var(--font18); line-height: 1; transition: transform .3s;} @media (any-hover: hover) { .more-btn:hover {background: #0068DD; border-color: #0068DD; color: #fff;} .more-btn:hover i {transform: translateX(.04rem);} } /* 标题 */ .indexTle h3 {line-height: 1.2;} .indexTle .line {display: block;overflow: hidden;padding-bottom: 0.06em;} .indexTle .char {display: inline-block;will-change: transform, opacity;} /* ===============公用css end!!!!===================*/ /* ======首页======= */ .indexBanner {position: relative;overflow: hidden; height: 100vh; } .indexBanner .swiper {height: 100%;} .indexBanner .container {max-width: 1700px;} .indexBanner .imgBox {height: 100%;} .indexBanner .imgBox img {width: 100%;height: 100%;object-fit: cover; transition: 1s linear 2s;transform: scale(1.1, 1.1);} .indexBanner .banner-inner {} .indexBanner .banner-title {color: #fff;line-height: 1.15;font-size: .6rem; font-weight: bold;} .indexBanner .banner-title .line {display: block;overflow: hidden;padding-bottom: 0.06em;} .indexBanner .banner-title .char {display: inline-block;will-change: transform, opacity;} .indexBanner .swiper-slide-active img, .indexBanner .swiper-slide-duplicate-active img {transition: 6s linear;transform: scale(1, 1);} /* 控制器：圆环进度分页 */ .indexBanner .banner-controls {position: absolute;left: 0;right: 0;bottom: 0.42rem;z-index: 5;pointer-events: none;} .indexBanner .banner-controls-inner {display: flex;align-items: center;} .indexBanner .banner-pagination {display: inline-flex;align-items: center;gap: 0.1rem;pointer-events: auto;} .indexBanner .banner-pagination .swiper-pagination-bullet {position: relative;width: 34px;height: 34px;margin: 0 !important;padding: 0;border-radius: 50%;background: transparent;opacity: 1;cursor: pointer;display: inline-flex;align-items: center;justify-content: center;transition: none;} .indexBanner .banner-pagination .swiper-pagination-bullet .dot {position: relative;z-index: 1;width: 5px;height: 5px;border-radius: 50%;background: #fff;} .indexBanner .banner-pagination .swiper-pagination-bullet .progress-ring {position: absolute;left: 50%;top: 50%;width: 100%;height: 100%;transform: translate(-50%, -50%) rotate(-90deg);opacity: 0;pointer-events: none; transition: .3s;} .indexBanner .banner-pagination .swiper-pagination-bullet .progress-ring circle {fill: none;stroke-width: 1.5;stroke-linecap: round;} .indexBanner .banner-pagination .swiper-pagination-bullet .progress-ring__bg {stroke: rgba(255, 255, 255, 0.35);} .indexBanner .banner-pagination .swiper-pagination-bullet .progress-ring__circle {stroke: #4DB8F0;stroke-dasharray: 88;stroke-dashoffset: 88;} .indexBanner .banner-pagination .swiper-pagination-bullet-active .progress-ring {opacity: 1;} .indexBanner .banner-pagination .swiper-pagination-bullet-active.is-progress .progress-ring__circle {animation: bannerRingProgress var(--banner-progress-duration, 5s) linear forwards;} @keyframes bannerRingProgress { from { stroke-dashoffset: 88; } to { stroke-dashoffset: 0; } } .indexOne {position: relative; background: #fff; z-index: 1;} .indexOne .sceneBox {position: relative; width: 100%; line-height: 0; overflow: visible;} .indexOne .sceneBox video {display: block; width: 100%; height: auto; vertical-align: top;} .indexOne .scenePoints {position: absolute; inset: 0; z-index: 2; pointer-events: none;} .indexOne .point {position: absolute; z-index: 2; width: 0; height: 0; pointer-events: auto;} .indexOne .point:hover, .indexOne .point.on {z-index: 20;} /* 点位百分比相对视频画面，圆心为锚点（按效果图测算） */ .indexOne .point-1 {left: 73.24%;top: 41.8%;} .indexOne .point-2 {left: 48.36%;top: 69.71%;} .indexOne .point-3 {left: 17.85%;top: 70.48%;} .indexOne .point-4 {left: 74.8%;top: 25.92%;} .indexOne .point-5 {left: 79.38%;top: 55.96%;} .indexOne .point .dot {position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); cursor: pointer;} .indexOne .point .dot em {position: relative; z-index: 2; display: block; width: .4rem; height: .4rem; min-width: 25px; min-height: 25px; border-radius: 50%; background: #0068dd; box-shadow: 0 0 0 .06rem rgba(16, 96, 185, .28);} .indexOne .point .dot em::after {content: ""; position: absolute; left: 50%; top: 50%; width: .1rem; height: .1rem; min-width: 6px; min-height: 6px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%);} .indexOne .point .dot .ripple {position: absolute; left: 50%; top: 50%; z-index: 1; width: 100%; height: 100%; border: 1px solid rgba(16, 96, 185, .5); border-radius: 50%; box-sizing: border-box; transform: translate(-50%, -50%); animation: soluSceneRipple 2.4s cubic-bezier(.22, .61, .36, 1) infinite; pointer-events: none;} .indexOne .point .dot .ripple:nth-child(2) {animation-delay: 1.2s;} /* 信息卡：panel 只负责定位与点位间距，.inner 才是白底卡片 */ .indexOne .point .panel {position: absolute; left: 0; top: 50%; z-index: 99; width: calc(2.4rem + .36rem); min-width: 236px; padding: 0 0 0 .36rem; box-sizing: border-box; opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(.06rem); transition: opacity .25s ease, visibility .25s ease, transform .25s ease; transition-delay: .12s; pointer-events: none; line-height: normal; text-align: left;} .indexOne .point .panel .inner {padding: .14rem; border-radius: .1rem; background: #fff; box-shadow: 0 .08rem .24rem rgba(0, 0, 0, .12); box-sizing: border-box;} .indexOne .point .panel .pic {width: 100%; border-radius: .06rem; overflow: hidden; line-height: 0;} .indexOne .point .panel .pic img {display: block; width: 100%; height: 1.2rem; min-height: 90px; object-fit: cover;} .indexOne .point .panel .tit {margin-top: .15rem; color: #333; font-size: var(--font18); font-weight: 700; line-height: 1.35;} .indexOne .point .panel .txt {margin-top: .08rem; color: #666; font-size: var(--font14);} .indexOne .point .panel .btn {display: inline-flex; align-items: center; justify-content: center; margin-top: .2rem; padding: .1rem .15rem; border-radius: .06rem; background: #0068dd; color: #fff; font-size: var(--font14); line-height: 1; transition: background .3s;} /* 底部点位：卡片向上展开，避免溢出视频下方 */ .indexOne .point-2 .panel, .indexOne .point-3 .panel, .indexOne .point-5 .panel {top: auto; bottom: -1rem; padding-bottom: .2rem; transform: translateY(-.04rem);} /* 靠右点位：卡片向左展开，避免溢出画面右侧 */ .indexOne .point-1 .panel, .indexOne .point-4 .panel {left: auto; right: 0; padding: 0 .36rem 0 0; transform: translateY(-50%) translateX(-.06rem);} .indexOne .point-5 .panel {left: auto; right: 0; padding: 0 .36rem .2rem 0; transform: translateY(-.04rem);} /* 悬停立刻显示；离开延迟隐藏，方便移入卡片 */ .indexOne .point:hover .panel, .indexOne .point.on .panel {opacity: 1; visibility: visible; transform: translateY(-50%); pointer-events: auto; transition-delay: 0s;} .indexOne .point-2:hover .panel, .indexOne .point-2.on .panel, .indexOne .point-3:hover .panel, .indexOne .point-3.on .panel, .indexOne .point-5:hover .panel, .indexOne .point-5.on .panel {transform: translateY(0);} @media (any-hover: hover) { .indexOne .point .panel .btn:hover {background: #0d4f9a;} } .indexTwo {padding: 1.2rem 0 1rem; overflow: hidden; background: #fff; z-index: 1; height: 100vh;} .indexTwo .indexTle {margin-bottom: .6rem;} .indexTwo .listBox { position: relative; /* 与 .container 左边缘对齐（width:85%; max-width:1500px） */ padding-left: max(7.5%, calc((100vw - 1700px) / 2)); } @media (max-width: 1280px) { .indexTwo .listBox {padding-left: max(5%, calc((100vw - 1500px) / 2));} } /* 桌面端：保持横向画廊（GSAP 驱动）；≤1023 由 Swiper 接管 */ .indexTwo .list {overflow: visible; margin: 0;} .indexTwo .list .swiper-wrapper {display: flex; align-items: stretch; gap: .75rem; width: max-content; will-change: transform;} .indexTwo .list .swiper-slide {flex-shrink: 0; width: 20%; height: auto; box-sizing: border-box;} .indexTwo .list .item {position: relative; display: block; width: 100%; height: 5rem; border-radius: .15rem; overflow: hidden; color: #fff;} .indexTwo .list .item .imgBox {position: absolute; inset: 0; z-index: 0;} .indexTwo .list .item .imgBox img {width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease;} .indexTwo .list .item .imgBox::after {content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.35) 100%); opacity: 0; transition: .5s; pointer-events: none;} .indexTwo .list .item .con {position: relative; z-index: 1; height: 100%; padding: .45rem .35rem; box-sizing: border-box;} .indexTwo .list .item .tit {font-size: var(--font22); font-weight: bold; color: #fff; line-height: 1.2;} .indexTwo .list .item .icon {flex-shrink: 0; width: .48rem; height: .48rem; min-width: 30px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center;} .indexTwo .list .item .icon img {display: block; width: 100%; height: 100%; object-fit: contain;} .indexTwo .list .item .bot {margin-top: .6rem;} .indexTwo .list .item .tags {display: flex; flex-wrap: wrap; gap: .1rem; opacity: 0; transform: translateY(.12rem); transition: opacity .35s ease, transform .35s ease;} .indexTwo .list .item .tags span {display: inline-flex; align-items: center; padding: .12rem .2rem; border: 1px solid rgba(255,255,255,1); border-radius: 999px; color: #fff; line-height: 1.2;} .indexTwo .list .item .more {position: absolute; bottom: .45rem; display: inline-block; color: #fff; opacity: 0; transform: translateY(.1rem); transition: opacity .35s ease, transform .35s ease;} .indexTwo .field-pagination {display: none;} @media (any-hover: hover) { .indexTwo .list .item:hover .imgBox::after {opacity: 1;} .indexTwo .list .item:hover .imgBox img {transform: scale(1.06);} .indexTwo .list .item:hover .tags, .indexTwo .list .item:hover .more {opacity: 1; transform: translateY(0);} } .indexThree {position: relative; padding-top: .8rem; background: #fff ; overflow: hidden; z-index: 1;} .indexThree::before {content: ''; width: 100%; height: 100%; inset: 0; background: rgba(198, 214, 233, .1); position: absolute;} .indexThree > .container {position: absolute; left: 0; right: 0; top: .6rem; bottom: 0; z-index: 2; max-width: 1700px;} .indexThree .aboutBox {margin-top: .8rem; display: flex; flex-direction: column; justify-content: space-between; flex: 1; padding-bottom: .75rem; box-sizing: border-box;} .indexThree .aboutBox .txtBox {width: 100%;} .indexThree .aboutBox .desc {line-height: 1.8; margin: 0; max-width: 35%;} .indexThree .aboutBox .more-btn {margin-top: .5rem;} .indexThree .aboutBox .dataList {display: flex; align-items: flex-start; gap: .75rem; margin-top: 2.2rem; } .indexThree .aboutBox .dataList .item {} .indexThree .aboutBox .dataList .num {color: #333; font-size: var(--font40); line-height: 1.15; font-weight: bold; } .indexThree .aboutBox .dataList .line {display: block; width: .2rem; height: 3px; margin: .1rem 0 .25rem; background: #0068DD;} .indexThree .aboutBox .dataList .lab {margin: 0; color: #333; line-height: 1.4;} .indexThree .mapBox {position: relative; z-index: 1; width: 100%; margin: 1.2rem auto 0; text-align: right; pointer-events: none;} .indexThree .mapImg {position: relative; width: 100%; opacity: .6; } .indexThree .markers {position: relative; display: inline-block; max-width: 100%; pointer-events: auto;} /* 美洲 / 欧洲 → 昆山 弧线 */ .indexThree .markers .mapArcs {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none;overflow: visible;} .indexThree .markers .mapArcs .arc-line {stroke: #b8c5d6;stroke-width: 1.2;stroke-linecap: round;stroke-dasharray: 6 5;vector-effect: non-scaling-stroke;} /* 蓝色光带持续流向昆山 */ .indexThree .markers .mapArcs .arc-flow {stroke: #0068dd;stroke-width: 2;stroke-dasharray: 14 36;stroke-dashoffset: 0;opacity: .9;filter: drop-shadow(0 0 2px rgba(0, 104, 221, .55));animation: arcFlowToKunshan 2.4s linear infinite; display: none;} .indexThree .markers .mapArcs .arc-flow.arc-europe {animation-duration: 2s;animation-delay: -.6s;} .indexThree .markers .marker {position: absolute; z-index: 1;} .indexThree .markers .marker .pin {width: .4rem; height: .4rem;position: relative; display: inline-block;} .indexThree .markers .marker .pin .pinIcon {width: .19rem; position: absolute; left: 50%;transform: translateX(-50%);top: 0;animation: animateMarker 1s infinite alternate;} .indexThree .markers .marker .pin .pinShadow {position: absolute;width: 100%;bottom: 0;left: 0;} .indexThree .markers .marker .name {font-size: var(--font14);color: #828282; position: absolute; bottom: -50%; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap;} .indexThree .markers .marker.is-kunshan {z-index: 2;} .indexThree .markers .marker.is-kunshan .pin {overflow: visible;} .indexThree .markers .marker.is-kunshan img {position: relative; z-index: 1; width: .36rem;} .indexThree .markers .marker.is-kunshan .name {bottom: auto; top: 50%; left: auto; transform: translateX(5%) translateY(-50%); color: #0068dd;} .indexThree .markers .marker.is-hefei .name {bottom: auto; top: 50%; left: auto; transform: translateX(5%) translateY(-50%);} /* 昆山中心：4 层向外持续扩散圆 */ .indexThree .markers .marker.is-kunshan .ksRipples {position: absolute;left: 50%;top: 72%;width: 5rem;height: 5rem;transform: translate(-50%, -50%);pointer-events: none;z-index: 0;} .indexThree .markers .marker.is-kunshan .ksRipples i {position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 1px solid rgba(120, 178, 232, 1);border-radius: 50%;box-sizing: border-box;opacity: 0;transform: scale(0.06);animation: ksRipple 4s linear infinite;} .indexThree .markers .marker.is-kunshan .ksRipples i:nth-child(1) {animation-delay: 0s;} .indexThree .markers .marker.is-kunshan .ksRipples i:nth-child(2) {animation-delay: 1s;} .indexThree .markers .marker.is-kunshan .ksRipples i:nth-child(3) {animation-delay: 2s;} .indexThree .markers .marker.is-kunshan .ksRipples i:nth-child(4) {animation-delay: 3s;} .indexThree .markers .marker.is-kunshan .ksRipples i:nth-child(5) {animation: none; opacity: 0.5; border: 1px dashed #b8c5d6; transform: scale(1.5);} /* mapImg + mapArcs 占前 2 个子节点，marker 从第 3 起 */ .marker.is-america {left: 24%;top: 26.5%;} .marker.is-europe {left: 49%;top: 19%;} .marker:nth-child(5) {left: 76.5%;top: 28.5%;} .marker:nth-child(6) {left: 73%;top: 34%;} .marker:nth-child(7) {left: 79.5%;top: 33%;} .marker:nth-child(8) {left: 81.39%;top: 34.8%;} .marker:nth-child(9) {left: 74.17%;top: 43.33%;} .marker:nth-child(10) {left: 76%;top: 51.33%;} @keyframes animateMarker { 0% { transform: translateX(-50%) translateY(0%); } 100% { transform: translateX(-50%) translateY(20%); } } @keyframes ksRipple { 0% { transform: scale(0.05); opacity: 0.8; } 65% { opacity: 0.6; } 100% { transform: scale(1); opacity: 0.4; } } .indexFour {padding: .6rem 0 1rem; overflow: hidden; background: #fff; position: relative; z-index: 1;} .indexFour .container {max-width: 1700px;} .customer-marquee {display: flex; flex-direction: column; gap: 0.25rem; margin-top: 1rem; pointer-events:none;} .customer-track {width: 100%; overflow: hidden;} .customer-track-inner {display: flex; width: max-content; will-change: transform;} .customer-logos {display: flex; flex-shrink: 0; gap: 0.1rem; padding-right: 0.1rem;} .customer-logo-item {flex-shrink: 0;} .customer-logos li {flex-shrink: 0;} .customer-logos .logo-card {display: flex; align-items: center; justify-content: center; width: 1.6rem; height: .8rem; padding: 0.2rem; background: #fafafa; border-radius: 100px; box-shadow: 0px 8px 15px 2px rgba(177,177,177,0.04); box-sizing: border-box; transition: box-shadow 0.35s ease, transform 0.35s ease;} .customer-logos .logo-card img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;} .customerBox {position: relative;} .customerBox::before, .customerBox::after {content: ''; position: absolute; top: 0; bottom: 0; width: 1.2rem; z-index: 3; pointer-events: none;} .customerBox::before {left: 0; background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);} .customerBox::after {right: 0; background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);} .indexFour .earth {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 6rem; height: 6rem;} /* .indexFour .earth img {width: 100%; height: 100%; object-fit: contain; animation: rotate 10s linear infinite;} */ .indexFour .earth img {width: 100%; height: 100%; object-fit: contain;} @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .indexFive {padding: 1rem 0; background: #F7F9FA; z-index: 1; position: relative;} .indexFive .container {} .indexFive .indexTle {margin-bottom: .7rem;} .indexFive .newsSwiper {overflow: hidden;} .indexFive .news-card {display: block; color: inherit; transition: transform .35s ease;} .indexFive .news-card .imgBox {position: relative; width: 100%; height: 0; padding-bottom: 62%; border-radius: .12rem; overflow: hidden;} .indexFive .news-card .imgBox img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease;} .indexFive .news-card .meta {margin-top: .22rem;} .indexFive .news-card .tag {display: inline-flex; align-items: center; padding: .06rem .1rem; border-radius: .04rem; background: #E5EBF3; color: #105FB8; font-size: var(--font14); line-height: 1.3;} .indexFive .news-card .date {line-height: 1.3; flex-shrink: 0; color: #666; opacity: .6;} .indexFive .news-card .tit {margin-top: .2rem; line-height: 1.4;} .indexFive .news-card .desc {margin-top: .15rem; } @media (any-hover: hover) { .indexFive .news-card:hover .imgBox img {transform: scale(1.05);} } .indexFive .btnBox {margin-top: .6rem;} /* =========底部 */ .footer {background: #F7F9FA; padding-top: .5rem;} .footer-top {align-items: flex-start; padding-bottom: .4rem; border-bottom: 1px solid rgba(214, 217, 217, .8);} .footer-brand {flex-shrink: 0;} .footer-logo {display: inline-block;} .footer-logo img {display: block; max-width: 2rem; height: auto; object-fit: contain;} .footer-share {display: flex; align-items: center; gap: .16rem; margin-top: .35rem;} .footer-share .share-item {position: relative; display: flex; align-items: center; justify-content: center; width: .4rem; height: .4rem; min-width: 36px; min-height: 36px; border-radius: 50%; background: #ECEDF1; color: #ABABAB; font-size: var(--font20); transition: background .3s, color .3s;} .footer-share .share-item svg path {fill: currentColor;} .footer-share .share-qr {position: absolute; left: 50%; bottom: calc(100% + .12rem); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: .08rem; padding: .12rem; background: #fff; border-radius: .08rem; box-shadow: 0 .08rem .24rem rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(.06rem); transition: opacity .25s ease, visibility .25s ease, transform .25s ease; pointer-events: none; white-space: nowrap;} .footer-share .share-qr::after {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: .08rem solid transparent; border-top-color: #fff;} .footer-share .share-qr img {display: block; width: 1.1rem; height: 1.1rem; min-width: 90px; min-height: 90px; object-fit: contain;} .footer-share .share-qr span {font-size: var(--font12, 12px); color: #666; line-height: 1.2;} .footer-contact {text-align: right;} .footer-phone {justify-content: flex-end; gap: .12rem; color: #105FB8; font-size: var(--font34); font-weight: 700; line-height: 1.2;} .footer-phone i {font-size: var(--font18); line-height: 1; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;border: 2px solid #105FB8;} .footer-addr, .footer-mail {display: block; margin-top: .1rem; color: #5E5E5E; line-height: 1.6;} .footer-mail:hover {color: #0068DD;} .foternav {display: flex; justify-content: space-between; gap: .3rem; padding: .5rem 0 .7rem;} .foternav dl {} .foternav dl dt {margin-bottom: .3rem; color: #333; font-size: var(--font20); font-weight: 700; line-height: 1.4;} .foternav dl dt a {color: #333; transition: color .3s;} .foternav dl .ddbox dd {margin-top: .15rem;} .foternav dl .ddbox dd a {display: inline-block; color: #636363; transition: color .3s;} .footer-copy {padding: .28rem 0; background: #F0F3F5;} .footer-copy p { color: #666;} .footer-copy a {color: #666; transition: color .3s;} .footer-share .share-item.open {background: #0068DD; color: #fff;} .footer-share .share-item.open .share-qr {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;} @media (any-hover: hover) { .footer-share .share-item:hover {background: #0068DD; color: #fff;} .footer-share .share-item:hover .share-qr {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;} .foternav dl .ddbox dd a:hover {color: #0068DD;} .footer-copy a:hover {color: #0068DD;} } /* ====================================================================================================================================内页样式 */ /* 内页公用样式 */ .ny-banner {position: relative; z-index: 1; overflow: hidden;} .ny-banner h1 {line-height: 1.2;} .ny-banner .desc {margin-top: .2rem; max-width: 50%;} .ny-banner .bjBox {} .ny-banner .bjBox img {width: 100%; height: 100%; object-fit: cover; min-height: 5rem;} /* 内页二级导航 */ .ny-nav {background: #fff; border-bottom: 1px solid #ECECEC;} .ny-nav > .container {height: .65rem; min-height: 56px; flex-wrap: wrap;} .ny-nav-list {height: 100%; gap: .3rem;} .ny-nav-list li {height: 100%; display: flex; align-items: center;} .ny-nav-list li a {position: relative; display: flex; align-items: center; padding: 0 .2rem; height: 100%; color: #666; line-height: 1; white-space: nowrap; transition: color .3s;} .ny-nav-list li a::after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: #105FB8; transition: width .4s;} .ny-nav-list li.on a, .ny-nav-list li:hover a {color: #333; font-weight: 700;} .ny-nav-list li.on a::after, .ny-nav-list li:hover a::after {width: 100%;} .ny-nav-list li.on {order: -1;} .ny-nav .breadcrumb {display: flex; align-items: center; gap: 4px; flex-shrink: 0; color: #666; line-height: 1;} .ny-nav .breadcrumb a {color: #666; transition: color .3s;} .ny-nav .breadcrumb em {font-style: normal; color: #666;} @media (any-hover: hover) { .ny-nav .breadcrumb a:hover {color: #105FB8;} } /* 内页公用样式结束 */ /* =========关于我们 - 公司简介 */ .aboutMain {background: #fff;} .aboutOne {padding: 1rem 0 1.2rem;} .aboutOne .introBox {align-items: flex-start; gap: .8rem;} .aboutOne .introBox .le {flex: 0 0 47%;;} .aboutOne .introBox .label {display: block; color: #0068DD; line-height: 1.4;} .aboutOne .introBox .xian {display: block; width: .4rem; height: 0.05rem; min-height: 2px;border-radius: 3px; margin-top: .5rem; background: #0068DD;} .aboutOne .introBox .re {flex: 1; min-width: 0; padding-top: .08rem;} .aboutOne .introBox p {line-height: 1.8;} .aboutOne .introBox p + p {margin-top: .35rem;} .aboutOne .dataList {margin-top: 1.2rem; align-items: flex-start;} .aboutOne .dataList .item {} .aboutOne .dataList .num {line-height: 1.2; font-size: .48rem; color: #333;font-weight: bold;} .aboutOne .dataList .num sup {font-size: .55em; top: -.4em;} .aboutOne .dataList .lab {margin-top: .1rem; line-height: 1.4; font-size: var(--font20); color: #333;} .aboutOne .cont {margin-top: .8rem; position: relative;} .aboutOne .cont .fznei {border-radius: .25rem;position: relative;left: 50%;width: 90vw;max-width: 1700px;-webkit-transform: translateX(-50%);transform: translateX(-50%);overflow: hidden;} .aboutOne .cont .fznei:before {content: "";display: block;padding-bottom: 41%;} .aboutOne .cont .fznei .fzimg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;display: block;} .aboutOne .cont .fznei .fzimg img {display: block;width: 100%;height: calc(100% + var(--about-parallax, 200px));object-fit: cover;object-position: center top;} /* 公司简介 - 视频播放按钮 */ .about-play-btn {position: absolute; left: 50%; top: 50%; z-index: 3; margin: 0; transform: translate(-50%, -50%); cursor: pointer;} .about-play-btn__halo, .about-play-btn__ripple {position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;} .about-play-btn__core {position: relative; z-index: 1; border-radius: 50%; z-index: 3; width: 1rem; height: 1rem; min-width: 44px; min-height: 44px; background: rgba(255, 255, 255,.9); color: #105FB8; font-size: var(--font30);} .about-play-btn__halo {z-index: 2; width: 100%; height: 100%; inset: 0; transform: scale(1.5); background: rgba(255, 255, 255, .35);} .about-play-btn__ripple {z-index: 1; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, .85); opacity: 0; animation: aboutPlayRipple 2.4s cubic-bezier(.22, .61, .36, 1) infinite;} .about-play-btn__ripple:nth-child(2) {animation-delay: 1.2s;} @keyframes aboutPlayRipple { 0% {opacity: .75; transform: translate(-50%, -50%) scale(1);} 70% {opacity: .2;} 100% {opacity: 0; transform: translate(-50%, -50%) scale(2.25);} } /* 关于我们 - 企业文化 */ .aboutTwo {position: relative; padding: 1rem 0 1.6rem; overflow: hidden;} .aboutTwo::before {content: ""; position: absolute; inset: 0; background: url(../images/aboutTwo-bg.webp) center/cover no-repeat; z-index: 0;} .aboutTwo > .container {position: relative; z-index: 1;} .aboutTwo .indexTle {margin-bottom: 1rem;} .aboutTwo .cultureList {display: flex; align-items: stretch; gap: .5rem;} .aboutTwo .cultureList .item {flex: 1; min-width: 0; text-align: center; padding: .6rem .15rem .3rem; min-height: 3.3rem; border-radius: .3rem; border: 1px solid rgba(255, 255, 255, .9); transition: transform .35s ease, box-shadow .35s ease, background .35s ease;} .aboutTwo .cultureList .icon {width: .6rem; height: .6rem; min-width: 30px; min-height: 30px; margin: 0 auto; display: flex; justify-content: center; align-items: center;} .aboutTwo .cultureList .icon img {display: block; max-width: 100%; max-height: 100%; object-fit: contain;} .aboutTwo .cultureList .tit {margin-top: .32rem; font-size: var(--font30); color: #333; line-height: 1.35;} .aboutTwo .cultureList .desc {margin-top: .18rem; font-size: var(--font18); color: #666;} @media (any-hover: hover) { .aboutTwo .cultureList .item:hover {transform: translateY(-.08rem); background: rgba(255, 255, 255, .78); box-shadow: 0 12px 32px rgba(105, 145, 190, .14);} } /* 关于我们 - 发展历程 */ .aboutThree {position: relative; padding: 1rem 0 .7rem; overflow: hidden; } .aboutThree .container {max-width: 1800px; width: 90%;} .aboutThree::before {content: ""; position: absolute; inset: 0; background: url(../images/aboutThree-bg.webp) center/cover no-repeat; z-index: 0;} .aboutThree > .container {position: relative; z-index: 1;} .aboutThree .indexTle {} .aboutThree .historySwiper {--history-slide-height: 4rem; --history-step-offset: .7rem; --history-max-step: 4; padding-left: .1rem; overflow: hidden; height: calc(var(--history-slide-height) + var(--history-max-step) * var(--history-step-offset)); transform: translateY(.8rem);} .aboutThree .historySwiper .swiper-wrapper {align-items: flex-end; height: 100%;} .aboutThree .historySwiper .swiper-slide {height: var(--history-slide-height); display: flex; align-items: flex-end; box-sizing: border-box; padding-right: .2rem;} .aboutThree .historySwiper .item {--step: 0; --step-offset: var(--history-step-offset); position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; padding: 0 0 .3rem .3rem; border-left: 1px dashed rgba(255, 255, 255, .6); color: #fff; box-sizing: border-box; transform: translateY(calc(var(--step) * var(--step-offset) * -1)); transition: .5s;} .aboutThree .historySwiper .item::after {content: ""; position: absolute; left: 0; transform: translateX(-50%); bottom: 0; width: .15rem; height: .15rem; border-radius: 50%; background: #fff;} .aboutThree .historySwiper .year {font-size: var(--font44); line-height: 1.15; position: relative;} .aboutThree .historySwiper .year::before {content: ""; position: absolute; left: -.3rem; transform: translateX(-50%); top: 0; width: .04rem; min-width: 2px; height: .44rem; background: #fff;} .aboutThree .historySwiper .sub {margin-top: .1rem; font-size: var(--font26); line-height: 1.35;} .aboutThree .historySwiper .desc { font-size: var(--font16); margin-top: .6rem;} .aboutThree .history-nav {justify-content: flex-end; max-width: 1500px; gap: .14rem; margin-top: .3rem; z-index: 111; position: relative;} .aboutThree .history-prev, .aboutThree .history-next {width: .66rem; height: .66rem; min-width: 40px; min-height: 40px;background: #fff; color: #B0B8C4; border-radius: 50%; cursor: pointer; font-size: var(--font22); transition: background .3s, color .3s, opacity .3s, transform .3s; user-select: none;} .aboutThree .history-prev.swiper-button-disabled, .aboutThree .history-next.swiper-button-disabled {opacity: .45; cursor: default;} @media (any-hover: hover) { .aboutThree .history-nav> div:not(.swiper-button-disabled):hover {color: #fff; background: #105FB8; transform: scale(1.04);} } .aboutFour {position: relative; overflow: hidden;} .aboutFour .container {top: 10%;transform: translate(-50%, 0%);} .aboutFour .imgBox img {width: 100%; } /* =========加入我们 */ .joinMain {background: #fff;} .joinOne {padding: 1rem 0 1.2rem;} .joinOne .list {display: flex; align-items: stretch; gap: .45rem;} .joinOne .list .item {position: relative; flex: 1; min-width: 0; display: block; border-radius: .18rem; overflow: hidden; color: #fff;} .joinOne .list .item .imgBox {position: relative; width: 100%; overflow: hidden;} .joinOne .list .item .imgBox img { width: 100%; object-fit: cover; transition: transform .6s ease;} .joinOne .list .item .imgBox::after {content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .22) 38%, rgba(0, 0, 0, 0) 58%); pointer-events: none; transition: background .35s ease;} .joinOne .list .item .con {position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 0 .55rem .45rem; box-sizing: border-box;} .joinOne .list .item .tit {font-size: var(--font30); font-weight: 700; color: #fff; line-height: 1.3;} @media (any-hover: hover) { .joinOne .list .item:hover .imgBox img {transform: scale(1.05);} } .joinTwo {padding: 0 0 1.2rem;} .joinTwo .indexTle {margin-bottom: .6rem;} .joinTwo .list {display: flex; align-items: stretch; gap: .55rem;} .joinTwo .list .item {position: relative; flex: 1; min-width: 0; border-radius: .18rem; overflow: hidden; color: #fff; cursor: pointer;} .joinTwo .list .item .imgBox {position: relative; width: 100%; overflow: hidden;} .joinTwo .list .item .imgBox img {width: 100%; object-fit: cover; transition: transform .6s ease;} .joinTwo .list .item .imgBox::before {content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .28) 32%, rgba(0, 0, 0, 0) 55%); pointer-events: none; transition: .5s;} .joinTwo .list .item .imgBox::after {content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .72); opacity: 0; pointer-events: none; transition: opacity .4s ease;} .joinTwo .list .item .con {position: absolute; inset: 0; z-index: 2; padding: .4rem .4rem .7rem .5rem; box-sizing: border-box;} .joinTwo .list .item .hd {position: absolute; left: .5rem; right: .4rem; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; transition: opacity .4s ease, visibility .4s ease, transform .4s ease;} .joinTwo .list .item .hd-bot {bottom: .65rem; opacity: 1; visibility: visible; transform: translateY(0);} .joinTwo .list .item .hd-top {top: .4rem; opacity: 0; gap: .25rem; flex-direction: row; align-items: center; visibility: hidden; transform: translateY(.12rem);} .joinTwo .list .item .icon {flex-shrink: 0; width: .48rem; height: .48rem; min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center;} .joinTwo .list .item .icon img {display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen;} .joinTwo .list .item .tit {font-size: var(--font24); font-weight: bold; color: #fff; line-height: 1.3;} .joinTwo .list .item .desc {position: absolute; left: .4rem; right: .4rem; bottom: .45rem; margin: 0; color: #fff; font-size: var(--font16); line-height: 1.7; opacity: 0; visibility: hidden; transform: translateY(.12rem); transition: opacity .4s ease, visibility .4s ease, transform .4s ease;} @media (any-hover: hover) { .joinTwo .list .item:hover .imgBox img {transform: scale(1.05);} .joinTwo .list .item:hover .imgBox::before {opacity: 0; visibility: hidden;} .joinTwo .list .item:hover .imgBox::after {opacity: 1;} .joinTwo .list .item:hover .hd-bot {opacity: 0; visibility: hidden; transform: translateY(-.08rem);} .joinTwo .list .item:hover .hd-top {opacity: 1; visibility: visible; transform: translateY(0);} .joinTwo .list .item:hover .desc {opacity: 1; visibility: visible; transform: translateY(0);} } .joinThree {padding: .8rem 0 1.2rem;background: #F9F9F9;} .joinThree .indexTle {margin-bottom: .6rem;} .joinThree .jobSearch {width: 65%; max-width: 100%; margin: 0 auto .5rem;} .joinThree .jobSearch-form {display: flex; gap: .16rem; padding-left: .3rem; background: #fff; border: 1px solid #DDDDDD; border-radius: 999px;} .joinThree .jobSearch-form > i {flex-shrink: 0; font-size: var(--font20); color: #c0c4cc; line-height: 1; display: flex; align-items: center;} .joinThree .jobSearch-input {flex: 1; min-width: 0; height: .6rem; min-height: 40px; padding: 0; border: 0; background: transparent; font-size: var(--font16); color: #333; outline: none;} .joinThree .jobSearch-btn {flex-shrink: 0; padding: 0 .5rem; border: 0; border-radius: 999px; background: #105FB8; color: #fff; font-size: var(--font16); cursor: pointer; transition: background .3s;} @media (any-hover: hover) { .joinThree .jobSearch-btn:hover {background: #0057bb;} } .joinThree .jobBox { border-radius: .1rem; overflow: hidden;} .joinThree .job-hd, .joinThree .job-row {display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center;} .joinThree .job-hd {min-height: .6rem; padding: .16rem .2rem; padding-left: .5rem; background: #105FB8; color: #fff; font-size: var(--font18); font-weight: bold;border-radius: 8px;} .joinThree .job-hd span:first-child {text-align: left;} .joinThree .job-item {border-bottom: 1px solid #eee; margin-bottom: 5px;background: #fff; border-radius: 8px;} .joinThree .job-item:last-child {border-bottom: 0;} .joinThree .job-row {min-height: .75rem; padding: .18rem .2rem; padding-left: .5rem; color: #333; font-size: var(--font16); cursor: pointer; transition: background .3s; user-select: none;} .joinThree .job-row span:first-child {text-align: left;} @media (any-hover: hover) { .joinThree .job-item:not(.on) .job-row:hover {background: #f8fafc;} } .joinThree .job-item.on .job-row {border-bottom: 1px solid #eee;} .joinThree .job-detail {display: none; overflow: hidden;} .joinThree .job-detail-inner {padding: .32rem .5rem .5rem;} .joinThree .job-detail-tit {margin: 0 0 .14rem; color: #333; font-size: var(--font16); font-weight: bold; line-height: 1.5;} .joinThree .job-detail-desc {} .joinThree .job-detail-bot {display: flex; justify-content: flex-end; margin-top: .32rem;} .joinThree .job-apply {display: inline-flex; align-items: center; justify-content: center; padding: .1rem .28rem; border-radius: 999px; background: #0068DD; color: #fff; font-size: var(--font16); transition: background .3s;} @media (any-hover: hover) { .joinThree .job-apply:hover {background: #0057bb; color: #fff;} } .joinThree .job-empty {padding: .6rem .2rem; text-align: center; color: #999; font-size: var(--font16); background: #fff; border-radius: 8px;} /* 供应商自荐弹窗 */ .layui-layer.supplier-layer {background: transparent; box-shadow: none; border: 0;} .layui-layer.supplier-layer .layui-layer-content {overflow: visible; padding: 0; background: transparent;} .supplier-pop {width:55vw; max-width: 92vw; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; background: #fff; box-shadow: 0 .12rem .4rem rgba(0, 0, 0, .18);} .supplier-pop__hd {flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 .4rem; height: 1rem; min-height: 56px; background: #0044DD;} .supplier-pop__logo {display: flex; align-items: center; height: .7rem;} .supplier-pop__logo img {display: block; height: 100%; width: auto; max-width: 2rem; object-fit: contain; filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1);} .supplier-pop__close {display: inline-flex; align-items: center; justify-content: center; width: .36rem; height: .36rem; min-width: 28px; min-height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: opacity .3s, transform .4s;} .supplier-pop__close svg {width: .3rem; height: .3rem; min-width: 16px; min-height: 16px; display: block;} .supplier-pop__close:hover { transform: rotate(90deg);} .supplier-pop__bd {flex: 1; overflow-y: auto; padding: .45rem; box-sizing: border-box;} .supplier-pop__tit {position: relative; margin: 0 0 .28rem; padding-left: .14rem; color: #1a39a8; font-size: var(--font20); font-weight: 700; line-height: 1.3;} .supplier-pop__tit::before {content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: .18rem; min-height: 14px; background: #1a39a8; border-radius: 2px; transform: translateY(-50%);} .supplier-pop__grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem .5rem;} .supplier-pop__line {margin: .36rem 0; border: 0; border-top: 1px dashed #d9d9d9;} .supplier-pop__field {min-width: 0;} .supplier-pop__label {display: flex; align-items: center; gap: 2px; margin-bottom: .1rem; color: #333; line-height: 1.4;} .supplier-pop__label em {color: #E60012; font-style: normal; font-weight: 700;} .supplier-pop__field .layui-input, .supplier-pop__field .layui-textarea {display: block; width: 100%; border: 1px solid #E0E0E0; border-radius: 2px; background: #fff; color: #333; box-sizing: border-box; transition: border-color .25s, box-shadow .25s;} .supplier-pop__field .layui-input {height: .48rem; min-height: 40px; line-height: .48rem; padding: 0 .14rem;} .supplier-pop__field .layui-textarea {height: 1.2rem; min-height: 100px; padding: .12rem .14rem; line-height: 1.6; resize: vertical;} .supplier-pop__field .layui-input::placeholder, .supplier-pop__field .layui-textarea::placeholder {color: #B0B0B0; font-size: var(--font14);} .supplier-pop__field .layui-input:focus, .supplier-pop__field .layui-textarea:focus {border-color: #0068DD !important; box-shadow: 0 0 0 2px rgba(0, 104, 221, .12);} .supplier-pop__code {gap: .12rem;} .supplier-pop__code .layui-input {flex: 1; min-width: 0;} .supplier-pop__code img {flex-shrink: 0; width: 1.2rem; height: .48rem; min-width: 100px; min-height: 40px; object-fit: cover; cursor: pointer; border: 1px solid #E0E0E0; border-radius: 2px; background: #f7f7f7;} .supplier-pop__ft {display: flex; justify-content: flex-start; margin-top: .36rem;} .supplier-pop__submit {cursor: pointer; height: auto; min-height: 40px; line-height: 1; border: 0; border-radius: 999px; background: #0044dd; color: #fff; font-size: var(--font16); font-weight: 700; padding: .14rem .3rem; display: inline-flex; align-items: center; justify-content: center; transition: background .3s, box-shadow .3s;} @media (any-hover: hover) { .supplier-pop__submit:hover {background: #0057bb; color: #fff;} } .supplier-pop__submit:active {box-shadow: 0 0 .1rem rgba(0, 104, 221, .45);} /* ===== 资料下载 ===== */ .mater-banner .container {top: 60%;} .mater-banner .con {text-align: center;} .mater-banner .materSearch { z-index: 2; width: 60%; margin: auto; margin-top: .6rem; max-width: 90%; } .mater-banner .materSearch-form {display: flex; align-items: stretch;justify-content: center; gap: .14rem; padding: 0 0 0 .3rem; background: #fff; border-radius: 999px; } .mater-banner .materSearch-form > i {flex-shrink: 0; display: flex; align-items: center; font-size: var(--font24); color: #C0C4CC; line-height: 1;} .mater-banner .materSearch-input {flex: 1; min-width: 0; height: .6rem; min-height: 40px; padding: 0; border: 0; background: transparent; font-size: var(--font16); color: #333; outline: none;} .mater-banner .materSearch-btn {flex-shrink: 0; padding: 0 .52rem; border: 0; border-radius: 999px; background: #105FB8; color: #fff; font-size: var(--font16); font-weight: bold; cursor: pointer; transition: background .3s;} @media (any-hover: hover) { .mater-banner .materSearch-btn:hover {background: #0057bb;} } .materMain {padding: .9rem 0 1.5rem; background: #F0F0F0;} .materMain .materList {display: grid; grid-template-columns: repeat(2, 1fr); gap: .18rem;} .materMain .materList .item {display: flex; align-items: center; gap: .4rem; min-height: 1.4rem; padding: .45rem; background: #fff; color: #333; transition: box-shadow .3s, transform .3s;} .materMain .materList .item .icon {flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1;} .materMain .materList .item .icon.pdf {width: .48rem; height: .48rem; min-width: 34px; min-height: 34px; background: url(../images/PDF-icon.png) center no-repeat; background-size: contain; } .materMain .materList .item .divider {flex-shrink: 0; width: 1px; height: .5rem; min-height: 26px; background: #E8E8E8;} .materMain .materList .item .tit {flex: 1; min-width: 0; margin: 0; font-size: var(--font24); color: #333; line-height: 1.4; transition: color .3s;} .materMain .materList .item .icon.down { color: #105FB8; font-size: var(--font28); transition: transform .3s, color .3s; flex-shrink: 0;} .materMain .materList .item.hide {display: none;} @media (any-hover: hover) { .materMain .materList .item:hover {box-shadow: 0 .08rem .24rem rgba(16, 95, 184, .12); transform: translateY(-2px);} .materMain .materList .item:hover .tit {color: #105FB8;} } .materMain .materTip {margin: 0 0 .24rem; font-size: var(--font16); color: #666; line-height: 1.6;} .materMain .materTip em {font-style: normal; color: #105FB8; font-weight: bold;} .materMain .materEmpty {padding: 1.2rem 0; text-align: center; color: #999; font-size: var(--font16); line-height: 1.8;} .materMain .materEmpty-btn {display: inline-flex; align-items: center; justify-content: center; margin-top: .24rem; padding: .16rem .4rem; border-radius: 999px; background: #105FB8; color: #fff; font-size: var(--font16); line-height: 1; transition: background .3s;} @media (any-hover: hover) { .materMain .materEmpty-btn:hover {background: #0057bb; color: #fff;} } /* =========新闻动态 ========= */ .newsMain {padding: .8rem 0 1.5rem; background: #fff;} .newsFeature {position: relative; background: #F7F9FA; border-radius: .2rem; overflow: hidden;} .newsFeature .feature-item {display: flex; align-items: stretch; min-height: 4.2rem;} .newsFeature .imgBox {flex: 0 0 50%; min-width: 0; border-radius: .12rem; height: 4.8rem; overflow: hidden; position: relative;} .newsFeature .imgBox img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease;} .newsFeature .txtBox {flex: 1; min-width: 0; display: flex; flex-direction: column; padding: .6rem; position: relative;} .newsFeature .date {color: #666; line-height: 1.4;} .newsFeature .tit {margin-top: .2rem; color: #333; line-height: 1.4;} .newsFeature .desc {margin-top: .3rem; flex: 1;color: #9D9D9D;} .newsFeature .more {display: inline-flex; align-items: center; justify-content: center; margin-top: .4rem; align-self: flex-start; padding: .16rem .3rem; border-radius: 999px; background: #105FB8; color: #fff; font-size: var(--font16); line-height: 1; transition: background .3s, transform .3s;} .newsFeature-pagination {position: absolute; right: .55rem; bottom: .35rem; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: .1rem; width: auto !important;} .newsFeature-pagination .swiper-pagination-bullet {width: 8px; height: 8px; margin: 0 !important; background: #D8D8D8; opacity: 1; border-radius: 50%; transition: background .3s, transform .3s;} .newsFeature-pagination .swiper-pagination-bullet-active {background: #0068DD; transform: scale(1.15);} @media (any-hover: hover) { .newsFeature .tit:hover {color: #105FB8;} .newsFeature .more:hover {background: #0057bb; color: #fff;} .newsFeature .imgBox:hover img {transform: scale(1.03);} } .newsList {display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: .8rem;} .newsList .news-card {display: block; color: inherit; transition: transform .35s ease;} .newsList .news-card .imgBox {position: relative; width: 100%; height: 0; padding-bottom: 60%; border-radius: .1rem; overflow: hidden;} .newsList .news-card .imgBox img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease;} .newsList .news-card .meta {margin-top: .25rem;} .newsList .news-card .tag {display: inline-flex; align-items: center; padding: .06rem .1rem; border-radius: .04rem; background: #E5EBF3; color: #105FB8; font-size: var(--font14); line-height: 1.3;} .newsList .news-card .date {line-height: 1.3; flex-shrink: 0; color: #666; opacity: .6;} .newsList .news-card .tit {margin-top: .2rem; color: #232323; line-height: 1.45; transition: color .3s;} .newsList .news-card .desc {margin-top: .12rem; line-height: 1.6;} @media (any-hover: hover) { .newsList .news-card:hover .imgBox img {transform: scale(1.05);} .newsList .news-card:hover .tit {color: #105FB8;} } /* ==新闻详情 */ .newsDateMain {background: #f9f9f9;} .newsDateMain .ny-nav {border-top: 1px solid #eee;} .newsDate {padding: 0.5rem 0 1rem;} .newsxq-box {padding: 0.3rem 0;margin-bottom: 0.44rem;display: flex;justify-content: space-between;align-items: flex-start;} .news-left {width: 68%;} .news-left .newsCon {background: #ffffff;border-radius: 0.1rem;box-shadow: 0 0 0.4rem 0 rgba(226, 225, 224, 0.42);padding: 0.4rem;box-sizing: border-box;} .newsxq-title {border-bottom: 1px solid #ddd;padding-bottom: 0.4rem;} .newsxq-title strong {display: block;font-size: var(--font30);color: #333;font-weight: 700;line-height: 1.4;} .newsxq-title span {display: block;margin-top: 0.1rem;color: #777;} .newsxq-editbox {margin: 0.3rem 0;} .newsxq-editbox img {max-width: 100%;height: auto !important;} .newsxq-page {display: flex;justify-content: space-between;align-items: center;margin-top: 0.5rem;} .newsxq-page a {display: flex;align-items: center;} .news-prev, .news-next {transition: 0.6s;display: flex;align-items: center;justify-content: center;width: 0.5rem;height: 0.5rem;min-width: 35px;min-height: 35px;border: 0.02rem solid #eeeeee;border-radius: 0.05rem;} .news-prev svg {transform: rotateY(180deg);-webkit-transform: rotateY(180deg);} .news-prev svg, .news-next svg {width: 30%;height: 30%;} .newsxq-page em {display: inline-block;font-size: var(--font16);color: #333;} .prev-link em {margin-left: 0.16rem;} .next-link em {margin-right: 0.16rem;} .next-link {flex-direction: row-reverse;} .newsxq-page a:hover .news-prev, .newsxq-page a:hover .news-next {background: #105FB8;} .newsxq-page a:hover svg path {fill: #fff;} .newsxq-box .news-right {width: 29%;background: #fff;border-radius: 0.16rem;box-shadow: 0 0 0.3rem 0 rgba(226, 225, 224, 0.42);padding: 0.4rem;box-sizing: border-box;position: relative;} .newsxq-box .news-right {position: sticky;top: 1.12rem;} .newsxq-box .news-right h2 {font-size: var(--font26);font-weight: 700;} .newsDate .relist li a {display: flex;justify-content: space-between;} .newsDate .relist .reImg {width: 35%;border-radius: 0.05rem;overflow: hidden;min-height: 0.9rem;} .newsDate .relist .reImg img {width: 100%;height: 100%;object-fit: cover;transition: 0.35s;} .newsDate .relist .recon {width: 58%;} .newsDate .relist li {margin-top: 0.3rem;} .newsDate .relist span {color: #999999;font-size: var(--font14);} .newsDate .relist h6 {color: #333333;font-size: var(--font16);transition: 0.35s;margin-top: 0.05rem;} /* .newsDate .news-right::after {content: "";background: #105FB8;width: 65%;position: absolute;left: 50%;bottom: -3%;height: 0.07rem;border-radius: 0.04rem;transform: translate(-50%, -50%);} */ @media (any-hover: hover) { .newsDate .relist li:hover h6 {color: #105FB8;} .newsDate .relist li:hover .reImg img {transform: scale(1.05);} } /* =========联系我们 */ .contactMain {background: #fff;} .tactOne {padding: 1rem 0; overflow: hidden;} .tactOne > .container {position: relative;} .tactOne-inner {position: relative; display: flex; align-items: center; min-height: 6rem;} .tactOne .info {position: relative; z-index: 2; width: 33%; flex-shrink: 0; padding: .35rem 0 .5rem;} .tactOne .info .tit {margin: 0 0 .7rem; color: #333; font-size: var(--font36); line-height: 1.35; font-weight: bold;} .tactOne .infoList {margin: 0; padding: 0; list-style: none;} .tactOne .infoList > li {display: flex; align-items: flex-start; gap: .22rem; margin-top: .48rem;} .tactOne .infoList > li:first-child {margin-top: 0;} .tactOne .infoList .icon {flex-shrink: 0; width: .56rem; height: .56rem; min-width: 44px; min-height: 44px; border-radius: 50%; background: #e7edfc; color: #0f4de4; font-size: var(--font24);} .tactOne .infoList .txt {min-width: 0; padding-top: .02rem;} .tactOne .infoList .lab {display: block; color: #666; line-height: 1.4;} .tactOne .infoList .val {display: block; color: #333; font-size: var(--font24); line-height: 1.45; font-weight: bold;} .tactOne .infoList a.val {transition: color .3s;} @media (any-hover: hover) { .tactOne .infoList a.val:hover {color: #105FB8;} } .tactOne .infoList .follow {align-items: flex-start;} .tactOne .socialList {gap: .12rem; margin-top: .14rem; flex-wrap: wrap;} .tactOne .social-item {position: relative; display: flex; align-items: center; justify-content: center; width: .44rem; height: .44rem; min-width: 36px; min-height: 36px; border: 1px solid #E5E5E5; border-radius: .08rem; color: #B0B0B0; font-size: var(--font20); background: #fff; transition: color .3s, border-color .3s, background .3s;} .tactOne .social-item svg {} .tactOne .social-item svg path {fill: currentColor;} .tactOne .social-item .share-qr {position: absolute; left: 50%; bottom: calc(100% + .12rem); z-index: 5; display: flex; flex-direction: column; align-items: center; padding: .12rem; background: #fff; border-radius: .08rem; box-shadow: 0 .08rem .24rem rgba(0,0,0,.12); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(.06rem); transition: opacity .25s ease, visibility .25s ease, transform .25s ease; pointer-events: none;} .tactOne .social-item .share-qr::after {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: .08rem solid transparent; border-top-color: #fff;} .tactOne .social-item .share-qr img {display: block; width: 1.1rem; height: 1.1rem; min-width: 90px; min-height: 90px; object-fit: contain;} .tactOne .social-item.open {color: #105FB8; border-color: #105FB8;} .tactOne .social-item.open .share-qr {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;} @media (any-hover: hover) { .tactOne .social-item:hover {color: #105FB8; border-color: #105FB8;} .tactOne .social-item:hover .share-qr {opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto;} } /* 地图：container 内起步，贴齐视口右侧 */ .tactOne .mapArea {position: absolute;top: 0;bottom: 0;left: 41%;right: calc((100% - 100vw) / 2);z-index: 1;width: 72%;border-radius: .1rem;overflow: hidden;} .tactOne .mapWrap {position: relative; width: 100%; height: 100%; overflow: hidden;} .tactOne .mapImg {display: block; width: 100%; height: 100%; object-fit: cover;} /* 定位点：对齐效果图中公司位置（蓝点为锚点） */ .tactOne .mapPin {position: absolute;left: 49%;top: 51%;z-index: 2;display: flex;flex-direction: column;align-items: center;transform: translate(-50%, -92%);pointer-events: none;} .tactOne .pinLogo {position: relative;display: flex;align-items: center;justify-content: center;width: .83rem;height: .78rem;min-width: 56px;min-height: 56px;padding: .15rem;background: #fff;border-radius: .1rem;box-shadow: 0 .06rem .2rem rgba(16, 95, 184, .16);box-sizing: border-box;} .tactOne .pinLogo::after {content: "";position: absolute;left: 50%;bottom: 0;z-index: 1;width: 0;height: 0;border-style: solid;border-width: .1rem .08rem 0;border-color: #fff transparent transparent;transform: translate(-50%, 100%);filter: drop-shadow(0 .04rem .08rem rgba(16, 95, 184, .12));} .tactOne .pinLogo img {display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%;} .tactOne .pinDot {position: relative;width: .22rem;height: .22rem;min-width: 12px;min-height: 12px;margin-top: .3rem;} .tactOne .pinDot span {position: absolute;left: 50%;top: 50%;z-index: 2;width: .2rem;height: .2rem;min-width: 10px;min-height: 10px;border-radius: 50%;background: #105FB8;transform: translate(-50%, -50%); border: 3px solid #fff;} .tactOne .pinDot i {position: absolute;left: 50%;top: 50%;width: .22rem;height: .22rem; background: rgba(74, 144, 226, .7);border-radius: 50%;box-sizing: border-box;transform: translate(-50%, -50%);animation: tactPinPulse 2.4s cubic-bezier(.22, .61, .36, 1) infinite;} .tactOne .pinDot i:nth-child(2) {animation-delay: 1.2s;} @keyframes tactPinPulse { 0% {opacity: .7; transform: translate(-50%, -50%) scale(1);} 70% {opacity: .15;} 100% {opacity: 0; transform: translate(-50%, -50%) scale(3.2);} } /* 联系我们 - 留言表单 */ .tactTwo {position: relative; padding: 1rem 0 1.2rem; overflow: hidden; background: #EEEEEE;} .tactTwo::before {content: ""; position: absolute; inset: 0; z-index: 0; background: url(../images/tactTwo-bg.webp) center / cover no-repeat; pointer-events: none;} .tactTwo > .container {position: relative; z-index: 1;} .tactTwo-inner {display: flex; gap: .6rem;} .tactTwo-tit {flex: 0 0 38%; line-height: 1.2;} .tactTwo-form {flex: 1; min-width: 0;} .tactTwo .form-row {display: flex; gap: .45rem .4rem; margin-bottom: .3rem;} .tactTwo .form-item {flex: 1; min-width: 0;} .tactTwo .form-item:first-child, .tactTwo .form-row:first-child .form-item {margin-bottom: 0;} .tactTwo .form-item--full {width: 100%;margin-bottom: .3rem;} .tactTwo .form-lab {display: flex; align-items: center; gap: 2px; margin-bottom: .1rem; color: #333; line-height: 1.4; font-size: var(--font16);} .tactTwo .form-lab em {color: #E60012; font-style: normal; font-weight: 700;} .tactTwo .form-input, .tactTwo .form-textarea {display: block; width: 100%; border: 0; border-radius: 0; background: #E2E2E2; color: #333; box-sizing: border-box; outline: none; font-family: inherit; font-size: var(--font16); transition: background .25s, box-shadow .25s;} .tactTwo .form-input {height: .5rem; min-height: 42px; padding: 0 .16rem; } .tactTwo .form-textarea {height: 1.5rem; min-height: 108px; padding: .12rem .16rem; resize: none;} .tactTwo .form-input::placeholder, .tactTwo .form-textarea::placeholder {color: #B0B0B0; font-size: var(--font14);} .tactTwo .form-input:focus, .tactTwo .form-textarea:focus {background: #dadada; box-shadow: inset 0 0 0 1px rgba(16, 96, 185, .4);} .tactTwo .form-code {display: flex; align-items: center; gap: .1rem; height: .48rem; min-height: 42px; padding-right: .06rem; border-radius: 0; background: #E2E2E2; box-sizing: border-box; transition: background .25s, box-shadow .25s;} .tactTwo .form-code:focus-within {background: #dadada; box-shadow: inset 0 0 0 1px rgba(16, 96, 185, .4);} .tactTwo .form-code .form-input {flex: 1; min-width: 0; height: 100%; min-height: 0; background: transparent; box-shadow: none;} .tactTwo .form-code .form-input:focus {background: transparent; box-shadow: none;} .tactTwo .form-code img {flex-shrink: 0; width: 1.2rem; height: .38rem; min-width: 100px; min-height: 32px; object-fit: cover; cursor: pointer; background: #fff;} .tactTwo .form-submit {margin-top: .5rem;} .tactTwo .form-btn {cursor: pointer; padding: .15rem .6rem; border: 0; border-radius: 0; background: #1060B9; color: #fff; font-size: var(--font16); line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .3s, box-shadow .3s;} .tactTwo .layui-form .form-btn {background: #1060B9;} @media (any-hover: hover) { .tactTwo .form-btn:hover {background: #0d519c; color: #fff;} } .tactTwo .form-btn:active {box-shadow: 0 0 .1rem rgba(16, 96, 185, .45);} /* ===== 解决方案 - 3C电子 ===== */ .soluMain {background: #fff;} .solu_3C_elec_one {padding: 1.05rem 0 1.15rem;} .solu_3C_elec_one .indexTle .tle h3 {line-height: 1.3;} .solu_3C_elec_one .indexTle .desc {max-width: 77%; margin: .3rem auto 0; line-height: 1.8;} .solu_3C_elec_one .painBox {margin-top: 1rem;} .solu_3C_elec_one .pain-tit {margin-bottom: .6rem; line-height: 1.3;} .solu_3C_elec_one .painSwiper {overflow: hidden;} .solu_3C_elec_one .painSwiper .swiper-slide {height: auto;} .solu_3C_elec_one .painSwiper .item {position: relative; height: 100%; min-height: 4.2rem; padding: .3rem; box-sizing: border-box; border-radius: .2rem; background: #F5FAFF; overflow: hidden; transition: background .35s ease;} .solu_3C_elec_one .painSwiper .item .num {display: block; font-size: var(--font30); color: #BBBBBB; } .solu_3C_elec_one .painSwiper .item .icon {position: absolute; top: 0; right: 0; width: 1.42rem; height: 1.42rem; pointer-events: none; z-index: 1;} .solu_3C_elec_one .painSwiper .item .icon img {display: block; width: 100%; height: 100%; object-fit: contain;} .solu_3C_elec_one .painSwiper .item .tit {position: relative; z-index: 2; margin-top: 1rem; line-height: 1.4;} .solu_3C_elec_one .painSwiper .item .txt {position: relative; z-index: 2; margin-top: .5rem;} .solu_3C_elec_one .pain-nav {gap: .12rem; margin-top: .45rem;} .solu_3C_elec_one .pain-prev, .solu_3C_elec_one .pain-next {width: .48rem; height: .48rem; min-width: 36px; min-height: 36px; border-radius: .08rem; background: #EEF1F4; color: #B0B8C4; cursor: pointer; font-size: var(--font22); transition: background .3s, color .3s, opacity .3s, transform .3s; user-select: none;} .solu_3C_elec_one .pain-prev.swiper-button-disabled, .solu_3C_elec_one .pain-next.swiper-button-disabled {opacity: .45; cursor: default;} @media (any-hover: hover) { .solu_3C_elec_one .painSwiper .item:hover {background: rgba(220, 232, 243, 0.5); } .solu_3C_elec_one .pain-nav > div:not(.swiper-button-disabled):hover {color: #fff; background: #105FB8; transform: scale(1.04);} } /* ===== 解决方案 - 3C电子 应用场景 ===== */ .solu_3C_elec_two {background: #fff; position: relative;} .solu_3C_elec_two .indexTle {position: absolute; left: 50%; transform: translateX(-50%); top: 0; padding-top: .8rem; z-index: 1;} .solu_3C_elec_two .sceneBox {position: relative; width: 100%;} .solu_3C_elec_two .sceneBox .bjBox {position: relative; width: 100%; line-height: 0; overflow: hidden;} .solu_3C_elec_two .sceneBox .bjBox img {display: block; width: 100%; height: auto;} .solu_3C_elec_two .scenePoints {position: absolute; inset: 0; z-index: 2; pointer-events: none;} .solu_3C_elec_two .point {position: absolute; z-index: 2; pointer-events: auto;} .solu_3C_elec_two .point:hover, .solu_3C_elec_two .point.on {z-index: 20;} .solu_3C_elec_two .point-1 {left: 20.5%; top: 65%;} .solu_3C_elec_two .point-2 {left: 47%; top: 70%;} .solu_3C_elec_two .point-3 {left: 54%; top: 40%;} .solu_3C_elec_two .point-4 {left: 72%; top: 73%;} .solu_3C_elec_two .point-trigger {background: rgba(255, 255, 255, 0.85); padding: 10px; padding-right: .3rem; border-radius: 100px; position: relative; display: inline-flex; align-items: center; gap: .1rem; cursor: pointer; user-select: none;box-shadow: 0px 0px 15px 0px rgba(104,111,132,0.11);} .solu_3C_elec_two .point .dot {position: relative; flex-shrink: 0; width: .28rem; height: .28rem; min-width: 18px; min-height: 18px; display: flex; align-items: center; justify-content: center;} .solu_3C_elec_two .point .dot em {position: relative; z-index: 2; display: block; width: .22rem; height: .22rem; min-width: 14px; min-height: 14px; border-radius: 50%; background: #1060B9; box-shadow: 0 0 0 .05rem rgba(16, 96, 185, .22); transition: .5s;} .solu_3C_elec_two .point .dot em::after {content: ""; position: absolute; left: 50%; top: 50%; width: .08rem; height: .08rem; min-width: 5px; min-height: 5px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%);} .solu_3C_elec_two .point .dot .ripple {position: absolute; left: 50%; top: 50%; z-index: 1; width: .28rem; height: .28rem; min-width: 18px; min-height: 18px; border: 1px solid rgba(16, 96, 185, .55); border-radius: 50%; box-sizing: border-box; transform: translate(-50%, -50%); animation: soluSceneRipple 2.4s cubic-bezier(.22, .61, .36, 1) infinite; pointer-events: none;} .solu_3C_elec_two .point .dot .ripple:nth-child(2) {animation-delay: 1.2s;} .solu_3C_elec_two .point .label { color: #1a1a1a; line-height: 1; white-space: nowrap; } .solu_3C_elec_two .point .panel {position: absolute; top: 0; left: calc(100% + .12rem); z-index: 99; min-width: 2.4rem; padding: .22rem .28rem; border-radius: .14rem; background: rgba(255, 255, 255, 0.85); box-shadow: 0px 0px 15px 0px rgba(104,111,132,0.11); opacity: 0; visibility: hidden; transform: translateX(.06rem); transition: opacity .28s ease, visibility .28s ease, transform .28s ease; pointer-events: none;} .solu_3C_elec_two .point-3 .panel, .solu_3C_elec_two .point-4 .panel {left: auto; right: calc(100% + .12rem); transform: translateX(-.06rem);} .solu_3C_elec_two .point .panel ul {margin: 0; padding: 0; list-style: none;} .solu_3C_elec_two .point .panel li {position: relative; padding-left: .22rem; color: #333; font-size: var(--font14); margin-bottom: 5px; white-space: nowrap;} .solu_3C_elec_two .point .panel li::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: .08rem; height: .08rem; min-width: 5px; min-height: 5px; border-radius: 50%; background: #1060B9;} .solu_3C_elec_two .point:hover .panel, .solu_3C_elec_two .point.on .panel {opacity: 1; visibility: visible; transform: translate(0, 0); pointer-events: auto;} .solu_3C_elec_two .sceneList {display: none;} @keyframes soluSceneRipple { 0% {transform: translate(-50%, -50%) scale(.7); opacity: .75;} 70% {opacity: .2;} 100% {transform: translate(-50%, -50%) scale(2.4); opacity: 0;} } /* 移动端样式卡片 */ .solu_3C_elec_two .sceneList {display: none; padding-top: .4rem; padding-bottom: .6rem;} .solu_3C_elec_two .sceneList .item {display: none; padding: .32rem .28rem; border-radius: .14rem; background: #F5FAFF; box-sizing: border-box;} .solu_3C_elec_two .sceneList .item.on {display: block;} .solu_3C_elec_two .sceneList .item .tit {position: relative; padding-left: .28rem; margin-bottom: .2rem; color: #1a1a1a; font-weight: 700; line-height: 1.4; font-size: var(--font28);} .solu_3C_elec_two .sceneList .item .tit::before {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: .06rem; height: .28rem; border-radius: 2px; background: #1060B9;} .solu_3C_elec_two .sceneList .item ul {margin: 0; padding: 0; list-style: none;} .solu_3C_elec_two .sceneList .item li {position: relative; padding-left: .22rem; color: #666;margin-top: .1rem;} .solu_3C_elec_two .sceneList .item li:first-child {margin-top: 0;} .solu_3C_elec_two .sceneList .item li::before {content: ""; position: absolute; left: 0; top: .55em; width: .08rem; height: .08rem; min-width: 5px; min-height: 5px; border-radius: 50%; background: #1060B9;} /* 半导体领域 */ .solu_semi .point-1 {left: 25.5%; top: 41.5%;} .solu_semi .point-2 {left: 47%; top: 33.5%;} .solu_semi .point-3 {left: 48.5%; top: 53.5%;} .solu_semi .point-4 {left: 62%; top: 60%;} .solu_semi .point-2 .panel {left: auto; right: calc(100% + .12rem); transform: translateX(-.06rem);} /* 汽车领域 */ .solu_car .point-1 {left: 24.9%; top: 40.8%;} .solu_car .point-2 {left: 36.7%; top: 54.2%;} .solu_car .point-3 {left: 63.2%; top: 45.1%;} .solu_car .point-4 {left: 55.4%; top: 60.1%;} .solu_car .point-5 {left: 73.7%; top: 74%;} .solu_car .point-5 .panel {left: auto; right: calc(100% + .12rem); transform: translateX(-.06rem);} /* 液显 */ .solu_lcd .point-1 {left: 24.9%; top: 40.9%;} .solu_lcd .point-2 {left: 63.2%; top: 45.2%;} .solu_lcd .point-3 {left: 55.3%; top: 60.2%;} .solu_lcd .point-4 {left: 73.6%; top: 74%;} .solu_lcd .point-5 {left: 29.3%; top: 69.7%;} .solu_lcd .point-2 .panel {left: auto; right: calc(100% + .12rem); transform: translateX(-.06rem);} /* 智慧车间 */ .solu_factory .point-1 {left: 22%; top: 45.7%;} .solu_factory .point-2 {left: 36.1%; top: 36.8%;} .solu_factory .point-3 {left: 61.8%; top: 37.4%;} .solu_factory .point-4 {left: 71.6%; top: 57.1%;} .solu_factory .point-5 {left: 52.7%; top: 73.6%;} .solu_factory .point-6 {left: 33.2%; top: 63.4%;} .solu_factory .point-5 .panel {left: auto; right: calc(100% + .12rem); transform: translateX(-.06rem);} /* 解决方案 - 3C电子 - 核心优势 */ .solu_3C_elec_thre {padding: 1rem 0; background: #fff;} .solu_3C_elec_thre .indexTle {margin-bottom: .7rem;} .solu_3C_elec_thre .advList {display: grid; grid-template-columns: repeat(4, 1fr); gap: .24rem; align-items: stretch;} .solu_3C_elec_thre .advList .item {display: flex; flex-direction: column; min-width: 0; height: 100%; padding: .4rem .3rem; box-sizing: border-box; border-radius: .15rem; background: #F5FAFF; transition: transform .35s ease, box-shadow .35s ease, background .35s ease;} .solu_3C_elec_thre .advList .item .icon {width: .48rem; height: .48rem; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: flex-start;} .solu_3C_elec_thre .advList .item .icon img {display: block; max-width: 100%; max-height: 100%; object-fit: contain;} .solu_3C_elec_thre .advList .item .tit {margin-top: 1rem; color: #1a1a1a; line-height: 1.4; font-size: var(--font22);} .solu_3C_elec_thre .advList .item .txt {margin-top: .3rem; font-size: var(--font16); line-height: 1.8;} @media (any-hover: hover) { .solu_3C_elec_thre .advList .item:hover {transform: translateY(-.06rem); box-shadow: 0 .1rem .28rem rgba(16, 96, 185, .1);} } /* 解决方案 - 3C电子 - 相关案例 */ .solu_3C_elec_four {padding: .6rem 0 1.1rem; background: #fff;} .solu_3C_elec_four .indexTle {margin-bottom: .6rem;} .solu_3C_elec_four .caseSwiper {overflow: hidden;} .solu_3C_elec_four .caseSwiper .swiper-slide {height: auto; display: flex;} .solu_3C_elec_four .item {display: flex; flex-direction: column; width: 100%; height: 100%; padding: .2rem; padding-bottom: .4rem; box-sizing: border-box; border-radius: .16rem; background: #F8F8FB; cursor: pointer; transition: transform .35s ease, box-shadow .35s ease;} .solu_3C_elec_four .pic {width: 100%; padding-bottom: 60%; border-radius: .12rem; background: #fff; overflow: hidden; position: relative;} .solu_3C_elec_four .pic img {position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: .5s;} .solu_3C_elec_four .tit {margin-top: .3rem; color: #333; line-height: 1.4; font-size: var(--font24);} .solu_3C_elec_four .desc {margin-top: .1rem; color: #666; font-size: var(--font16); line-height: 1.75; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} .solu_3C_elec_four .video {display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: .5rem; color: #105FB8; font-size: var(--font16); line-height: 1; cursor: pointer; transition: color .3s;} .solu_3C_elec_four .video .play {position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #105FB8; transition: background .3s;} .solu_3C_elec_four .video .play::after {content: ""; display: block; margin-left: 2px; border-style: solid; border-width: 3.5px 0 3.5px 6px; border-color: transparent transparent transparent #fff;} .solu_3C_elec_four .case-pagination {position: relative; left: auto; bottom: auto; display: flex; align-items: center; justify-content: center; gap: .12rem; width: 100%; margin-top: .42rem;} .solu_3C_elec_four .case-pagination .swiper-pagination-bullet {width: 8px; height: 8px; margin: 0 !important; background: #D8D8D8; opacity: 1; border-radius: 50%; transition: background .3s, transform .3s;} .solu_3C_elec_four .case-pagination .swiper-pagination-bullet-active {background: #105FB8; transform: scale(1.15);} @media (any-hover: hover) { .solu_3C_elec_four .item:hover .pic img {transform: scale(1.04);} .solu_3C_elec_four .video:hover {color: #0d4f9a;} .solu_3C_elec_four .video:hover .play {background: #0d4f9a;} } /* ===== 案例中心 ===== */ .caseMain {padding: .8rem 0 1.2rem; background: #F5F5F5;} .caselist {display: flex; flex-direction: column; gap: .5rem;} .caselist .item {display: flex; align-items: stretch; min-height: 4.2rem; background: #fff; border-radius: .16rem; overflow: hidden; box-shadow: 0 .06rem .24rem rgba(0, 40, 80, .05);} .caselist .item .pic {position: relative; flex: 0 0 50%; min-width: 0; display: block; background: #f5f7fa; overflow: hidden;} .caselist .item .pic img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; transition: transform .6s ease;} .caselist .item .txt {flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: .6rem;} .caselist .item .tit {display: block; color: #333; line-height: 1.4; transition: color .3s;} .caselist .item .desc {margin-top: .28rem; color: #666; font-size: var(--font18); line-height: 1.8;} .caselist .item .video-btn {display: inline-flex; align-items: center; gap: .1rem; align-self: flex-start; margin-top: .4rem; padding: .12rem .2rem; border-radius: 999px; background: #0068DD; color: #fff; font-size: var(--font16); line-height: 1; transition: background .3s, transform .3s;} .caselist .item .video-btn i {font-size: var(--font24);} @media (any-hover: hover) { .caselist .item .pic:hover img {transform: scale(1.04);} .caselist .item .tit:hover {color: #105FB8;} .caselist .item .video-btn:hover {background: #0057bb; color: #fff;} } /* ===== 产品中心 ===== */ .product_list {padding: .8rem 0 1rem; background: #F5F5F5;} .product-list-inner {display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem;} .product_list .item {position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: .5rem .25rem; background: #fff; border-radius: .1rem; box-shadow: 0 4px 16px rgba(16, 40, 70, .05); text-align: center; overflow: hidden; transition: box-shadow .35s ease;} .product_list .item::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #0068DD; transform: scaleX(0); transform-origin: center; transition: transform .35s ease;} .product_list .item .pic {display: flex; align-items: center; justify-content: center; width: 100%; height: 2rem;} .product_list .item .pic img {display: block; max-width: 100%; max-height: 100%; object-fit: contain;} .product_list .item .tit {margin-top: .3rem; color: #333; font-size: var(--font18); font-weight: 700; line-height: 1.4; transition: color .3s;} .product_list .item .desc {margin-top: .2rem;font-size: var(--font14);color: #666666;} .product_list .item .more {margin-top: .4rem; color: #105FB8; font-size: var(--font14); line-height: 1; display: flex; align-items: center;} .product_list .item .more i {font-size: var(--font18);} @media (any-hover: hover) { .product_list .item:hover .more {font-weight: bold;} .product_list .item:hover::after {transform: scaleX(1);} .product_list .item:hover .tit {color: #0068DD;} } /* ===== 产品中心 - 详情 ===== */ .prodetail-banner .title { text-align: center; top: 30%; transform: translate(-50%, 0%);} .prodetail-banner .prodetail-more {transform: translate(-50%, 0%); top: auto; bottom: 5%;} .prodetail-banner .prodetail-more .more-btn {background: #0068DD; color: #fff; border-color: #0068DD;} .prodetail-nav {border-top: 1px solid #eee;position: sticky; top: 1rem; z-index: 90;} .prodetailMain .container {max-width: 1600px;} .prodetailMain > div {padding: .8rem 0 1rem;} .prodetail_Tit {margin-bottom: .5rem;} .prodetail_Tit h3 {display: inline-flex; align-items: center; gap: .2rem; color: #333; font-size: var(--font40); font-weight: bold; line-height: 1.3;} .prodetail_Tit h3::before {content: ""; flex-shrink: 0; width: .12rem; height: .12rem; min-width: 10px; min-height: 10px; border: 2px solid #0068DD; border-radius: 50%; box-sizing: border-box;} .prodetail-swiperNav {gap: .12rem;} .prodetail-swiperNav > div {width: .48rem; height: .48rem; min-width: 36px; min-height: 36px; border-radius: .08rem; background: #EEF1F4; color: #B0B8C4; cursor: pointer; font-size: var(--font22); transition: background .3s, color .3s, opacity .3s, transform .3s; user-select: none;} .prodetail-swiperNav > div.swiper-button-disabled {opacity: .45; cursor: default;} .prodetail-swiperNav > div:not(.swiper-button-disabled):active {color: #fff; background: #105FB8; transform: scale(1.04);} @media (any-hover: hover) { .prodetail-swiperNav > div:not(.swiper-button-disabled):hover {color: #fff; background: #105FB8; transform: scale(1.04);} } /* 产品介绍 */ .prodetail_One {background: #fff;} .prodetail_One .prodetail-intro {align-items: center; gap: .6rem;} .prodetail_One .gallery {width: 49%; min-width: 0;} .prodetail_One .info {flex: 1; min-width: 0; display: flex; flex-direction: column; padding-top: .1rem;} .prodetail_One .mainSwiper {position: relative; width: 100%; border-radius: .3rem; overflow: hidden; background: #F5F5F5;} .prodetail_One .mainSwiper .pic {display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 780 / 480; padding: .5rem;} .prodetail_One .mainSwiper .pic img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;} .prodetail_One .gallery-prev, .prodetail_One .gallery-next {position: absolute; top: 50%; z-index: 5; width: .5rem; height: .5rem; min-width: 36px; min-height: 36px; margin-top: -.25rem; border: 1px solid rgba(180, 180, 180, .7); border-radius: 50%; background: rgba(255, 255, 255, .55); color: #B0B0B0; font-size: var(--font24); cursor: pointer; user-select: none; transition: background .3s, color .3s, border-color .3s, opacity .3s;} .prodetail_One .gallery-prev {left: .2rem;} .prodetail_One .gallery-next {right: .2rem;} .prodetail_One .gallery-prev.swiper-button-disabled, .prodetail_One .gallery-next.swiper-button-disabled {opacity: .35; cursor: default;} @media (any-hover: hover) { .prodetail_One .gallery-prev:not(.swiper-button-disabled):hover, .prodetail_One .gallery-next:not(.swiper-button-disabled):hover {color: #0068DD; border-color: #0068DD; background: #fff;} } .prodetail_One .thumbSwiper {margin-top: .3rem; width: 100%;} .prodetail_One .thumbSwiper .swiper-slide {height: auto; cursor: pointer;} .prodetail_One .thumbSwiper .pic {display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 180 / 112; padding: .1rem; border: 1px solid transparent; border-radius: .12rem; background: #F5F5F5; box-sizing: border-box; overflow: hidden; transition: border-color .3s;} .prodetail_One .thumbSwiper .pic img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;} .prodetail_One .thumbSwiper .swiper-slide-thumb-active .pic {border-color: #0068DD;} .prodetail_One .info .tit {margin: 0; color: #333; font-size: var(--font44); font-weight: bold; line-height: 1.35;} .prodetail_One .info .line {width: 100%; height: 1px; margin: .4rem 0; background: #D4D4D4;} .prodetail_One .descList {} .prodetail_One .descList p {position: relative; padding-left: 20px; color: #444; font-size: var(--font16); margin-bottom: .1rem;} .prodetail_One .descList p::before {content: ""; position: absolute; left: 0; top: .58em; min-width: 8px; min-height: 8px; border: 2px solid #0068DD; border-radius: 50%; box-sizing: border-box;} .prodetail_One .featList {display: flex; align-items: flex-start; flex-wrap: wrap; gap: .6rem; row-gap: .4rem; margin-top: auto; padding-top: .8rem;} .prodetail_One .featList li {flex: none; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center;} .prodetail_One .featList .icon {display: flex; align-items: center; justify-content: center; width: .84rem; height: .84rem; min-width: 56px; min-height: 56px; padding: .15rem; border: 1px solid rgba(175, 197, 222, .3); border-radius: 50%; box-sizing: border-box;} .prodetail_One .featList .icon img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;} .prodetail_One .featList span {display: block; margin-top: .15rem; color: #333; line-height: 1.4;} @media (any-hover: hover) { .prodetail_One .thumbSwiper .swiper-slide:hover .pic {border-color: rgba(0, 104, 221, .45);} .prodetail_One .thumbSwiper .swiper-slide-thumb-active:hover .pic {border-color: #0068DD;} } .prodetail_Two {background: #F7F7F7;} .prodetail_Two img {max-width: 100%; height: auto !important;} /* 相关案例 */ .prodetail_Three {background: #fff;} .prodetail_Three .prodetailCaseSwiper {overflow: hidden;} .prodetail_Three .prodetailCaseSwiper .swiper-slide {height: auto; display: flex;} .prodetail_Three .item {display: flex; flex-direction: column; width: 100%; height: 100%; padding: .2rem; padding-bottom: .4rem; box-sizing: border-box; border-radius: .16rem; background: #F8F8FB; cursor: pointer; transition: transform .35s ease, box-shadow .35s ease;} .prodetail_Three .pic {width: 100%; padding-bottom: 60%; border-radius: .12rem; background: #fff; overflow: hidden; position: relative;} .prodetail_Three .pic img {position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: .5s;} .prodetail_Three .tit {margin-top: .3rem; color: #333; line-height: 1.4; font-size: var(--font24);} .prodetail_Three .desc {margin-top: .1rem; color: #666; font-size: var(--font16); line-height: 1.75; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;} .prodetail_Three .video {display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: .5rem; color: #105FB8; font-size: var(--font16); line-height: 1; cursor: pointer; transition: color .3s;} .prodetail_Three .video .play {position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #105FB8; transition: background .3s;} .prodetail_Three .video .play::after {content: ""; display: block; margin-left: 2px; border-style: solid; border-width: 3.5px 0 3.5px 6px; border-color: transparent transparent transparent #fff;} @media (any-hover: hover) { .prodetail_Three .item:hover .pic img {transform: scale(1.04);} .prodetail_Three .video:hover {color: #0d4f9a;} .prodetail_Three .video:hover .play {background: #0d4f9a;} } /* 推荐产品 */ .prodetail_Four {background: #fff;} .prodetail_Four .prodetailRecSwiper {overflow: hidden;} .prodetail_Four .prodetailRecSwiper .swiper-slide {height: auto; display: flex;} .prodetail_Four .item {position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; padding: .5rem .25rem; background: #F8F8FB; border-radius: .1rem; text-align: center; overflow: hidden; transition: box-shadow .35s ease;} .prodetail_Four .item::after {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #0068DD; transform: scaleX(0); transform-origin: center; transition: transform .35s ease;} .prodetail_Four .item .pic {display: flex; align-items: center; justify-content: center; width: 100%; height: 2rem;} .prodetail_Four .item .pic img {display: block; max-width: 100%; max-height: 100%; object-fit: contain;} .prodetail_Four .item .tit {margin-top: .3rem; color: #333; font-size: var(--font18); font-weight: 700; line-height: 1.4; transition: color .3s;} .prodetail_Four .item .desc {margin-top: .2rem; font-size: var(--font14); color: #666666;} .prodetail_Four .item .more {margin-top: .4rem; color: #105FB8; font-size: var(--font14); line-height: 1; display: flex; align-items: center;} .prodetail_Four .item .more i {font-size: var(--font18);} @media (any-hover: hover) { .prodetail_Four .item:hover .more {font-weight: bold;} .prodetail_Four .item:hover::after {transform: scaleX(1);} .prodetail_Four .item:hover .tit {color: #0068DD;} } /* ===== 产品中心 - 工业数字化系统 ===== */ .industryOne {padding: 1rem 0; background: #fff; overflow: hidden;} .industryOne .indexTle {margin-bottom: .7rem;} .industryOne .advList {display: grid; grid-template-columns: repeat(4, 1fr); gap: .24rem; align-items: stretch;} .industryOne .advList .item {display: flex; flex-direction: column; min-width: 0; height: 100%; padding: .4rem .3rem; padding-bottom: .6rem; box-sizing: border-box; border-radius: .15rem; background: #F8F8FB; transition: transform .35s ease, box-shadow .35s ease, background .35s ease;} .industryOne .advList .item .icon {width: .48rem; height: .48rem; min-width: 30px; min-height: 30px; display: flex; align-items: center; justify-content: flex-start;} .industryOne .advList .item .icon img {display: block; max-width: 100%; max-height: 100%; object-fit: contain;} .industryOne .advList .item .tit {margin-top: .8rem; color: #1a1a1a; line-height: 1.4; font-size: var(--font26); font-weight: bold;} .industryOne .advList .item .line {display: block; width: .3rem; height: 4px; margin: 4px 0 .2rem; background: #105FB8; border-radius: 2px;} .industryOne .advList .item .txt {font-size: var(--font16); line-height: 1.8;} @media (any-hover: hover) { .industryOne .advList .item:hover {transform: translateY(-5px);} } .industryTwo {position: relative; overflow: hidden;} .industryTwo .container {top: .7rem; transform: translate(-50%, 0%); z-index: 2;} .industryTwo .imgBox img {width: 100%; position: relative;} .industryThree {padding: 1rem 0 1.2rem; background: #ebecf0; overflow: hidden;} .industryThree .indexTle {margin-bottom: 2.5rem;} /* 方案2：外层舞台按容器宽度缩放，内层按 1920 设计稿定宽（container max=1500） */ .industryThree .imgStage {position: relative; width: 100%; overflow: visible;} .industryThree .imgBox { position: absolute; left: 0; top: 0; width: 1500px; line-height: 0; transform-origin: top left; /* 锁定为 1920 下的 html 字号，内部用 em 代替 rem，避免 ≤1600 rem 被写死导致比例错位 */ font-size: 100px; --ft16: 16px; --ft20: 20px; } .industryThree .imgBox > img {display: block; width: 100%; height: auto;} .industryThree .cardList {position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; pointer-events: none;} .industryThree .cardList .item {position: absolute; z-index: 2; width: 21%; pointer-events: auto;} .industryThree .cardList .panel {position: relative; z-index: 2; padding: .2em; border-radius: .1em; background: linear-gradient(0deg, #FFFFFF 0%, #EBECF0 100%); box-shadow: 0 3px 9px 0 rgba(0,0,0,0.05); border: 1px solid #FFFFFF; box-sizing: border-box;} .industryThree .cardList .tit {margin: 0; color: #333; font-size: var(--ft20); line-height: 1.35;} .industryThree .cardList .txt {margin: .5em 0 0; color: #666; font-size: var(--ft16); line-height: 1.5;} .industryThree .cardList .line {position: absolute; z-index: 1; display: block; width: 1px; background: rgba(255, 255, 255, 0.9); pointer-events: none;} .industryThree .cardList .line .pin {position: absolute; left: 50%; bottom: 0; z-index: 2; width: .16em; height: .16em; display: flex; align-items: center; justify-content: center; transform: translate(-50%, 50%);} .industryThree .cardList .line .pin em {position: relative; z-index: 2; display: block; width: .1em; height: .1em; border-radius: 50%; background: #105FB8; box-shadow: 0 0 0 .03em rgba(16, 95, 184, .28), 0 0 .1em rgba(255, 255, 255, .85);} .industryThree .cardList .line .pin em::after {content: ""; position: absolute; left: 50%; top: 50%; width: .04em; height: .04em; border-radius: 50%; background: #fff; transform: translate(-50%, -50%);} .industryThree .cardList .line .pin .ripple {position: absolute; left: 50%; top: 50%; z-index: 1; width: 100%; height: 100%; border: 1px solid rgba(16, 95, 184, .55); border-radius: 50%; box-sizing: border-box; transform: translate(-50%, -50%); animation: soluSceneRipple 2.4s cubic-bezier(.22, .61, .36, 1) infinite; pointer-events: none;} .industryThree .cardList .line .pin .ripple:nth-child(2) {animation-delay: 1.2s;} /* 左上：设备互联 → 左侧设备监控区 */ .industryThree .cardList .item-1 {left: 13%; top: -13%;} .industryThree .cardList .item-1 .line {left: 100%; top: 70%; height: .9em; transform: rotate(-49deg); transform-origin: top center;} /* 上中：质量管理 → 中上部检测/办公区 */ .industryThree .cardList .item-2 {left: 55%; top: -22%;} .industryThree .cardList .item-2 .line {left: 0%; top: 65%; height: 1em; transform: rotate(38deg); transform-origin: top center;} /* 右上：设备运维 → 右侧控制室 */ .industryThree .cardList .item-3 {left: 79%;top: -10%;} .industryThree .cardList .item-3 .line {left: 0%;top: 80%;height: 1em;transform: rotate(50deg); transform-origin: top center;} /* 右中：智能仓储 → 右下仓储物流区 */ .industryThree .cardList .item-4 {left: 85%;top: 34%;} .industryThree .cardList .item-4 .line {left: 0%;top: 92%;height: .6em;transform: rotate(30deg); transform-origin: top center;} /* 下中：数据平台 → 中部 5G / 数据中枢 */ .industryThree .cardList .item-5 {left: 32%;top: 80%;} .industryThree .cardList .item-5 .line {left: 50%;bottom: 100%; height: 1em;} .industryThree .cardList .item-5 .line .pin {bottom: auto; top: 0; transform: translate(-50%, -50%);} /* 左下：生产计划 → 左下生产线 */ .industryThree .cardList .item-6 {left: 3%;top: 49%;} .industryThree .cardList .item-6 .line {left: 100%;top: 65%;height: 1.5em;transform: rotate(-115deg); transform-origin: top center;} /* ===== 研发创新 - 研发实力 ===== */ .rdcapMain {background: #fff;} .rdcapOne {position: relative; max-width: 1920px; margin: auto;} .rdcapOne .topBox {display: flex; align-items: stretch;} .rdcapOne .pic {position: relative; flex: 0 0 50%; min-width: 0; overflow: hidden; background: #e8eef5;} .rdcapOne .pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform .8s ease;} .rdcapOne .info {flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: .6rem 10% 1rem .9rem; box-sizing: border-box; background: #F5F5F5;} .rdcapOne .info .tit {margin: 0; line-height: 1.2;} .rdcapOne .info .deviceLine {display: block; width: .42rem; height: 4px; margin-top: .3rem; border-radius: 3px; background: #105FB8;} .rdcapOne .info .desc {margin: .5rem 0 0;} .rdcapOne .dataWrap {position: absolute; left: 50%; bottom: 0; z-index: 2; width: 85%; max-width: 1500px; transform: translate(-50%, 70%);} .rdcapOne .dataList {display: flex; align-items: center; justify-content: space-around; gap: .4rem; padding: .6rem .9rem; box-sizing: border-box; border-radius: .15rem; background: #fff; box-shadow: 0px 0px .3rem 0px rgba(104,111,132,0.07);} .rdcapOne .dataList .item {display: flex; align-items: center; gap: .28rem; min-width: 0; transition: transform .35s ease;} .rdcapOne .dataList .icon {flex-shrink: 0; padding: .3rem; width: 1.1rem; height: 1.1rem; min-width: 60px; min-height: 60px; border-radius: 50%;background: #F6F6F6;} .rdcapOne .dataList .icon img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;} .rdcapOne .dataList .txt {min-width: 0;} .rdcapOne .dataList .num {color: #333; font-size: var(--font48); font-weight: bold; line-height: 1; display: flex; align-items: flex-start;} .rdcapOne .dataList .unit {font-size: var(--font30);} .rdcapOne .dataList .lab {margin: .1rem 0 0; color: #333; font-size: var(--font22); line-height: 1.4;} @media (any-hover: hover) { .rdcapOne .pic:hover img {transform: scale(1.04);} .rdcapOne .dataList .item:hover {transform: translateY(-.06rem);} } /* 研发创新 - 研发实力 - 全链路能力 */ .rdcapTwo {padding: 3rem 0 .5rem;} .rdcapTwo .indexTle {margin-bottom: .8rem;} .rdcapTwo .list {display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid #F1F1F1; background: #fff;} .rdcapTwo .list .item {position: relative; min-height: 3rem; overflow: hidden; border-right: 1px solid #F1F1F1; border-bottom: 1px solid #F1F1F1; box-sizing: border-box;} .rdcapTwo .list .item:nth-child(2n) {border-right: none;} .rdcapTwo .list .item:nth-child(n + 3) {border-bottom: none;} .rdcapTwo .list .item .bjBox {position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .45s ease;} .rdcapTwo .list .item .bjBox img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: scale(1.02); transition: transform .6s ease;} /* .rdcapTwo .list .item .bjBox::after {content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .48); pointer-events: none;} */ .rdcapTwo .list .item .con {position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: inherit; padding: .5rem .7rem; box-sizing: border-box;} .rdcapTwo .list .item .icon {width: .52rem; height: .52rem; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center;} .rdcapTwo .list .item .icon img {display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: filter .35s ease;} .rdcapTwo .list .item .tit {margin: .28rem 0 0; color: #333; font-size: var(--font24); line-height: 1.4; transition: color .35s ease;} .rdcapTwo .list .item .desc {margin: .16rem 0 0; color: #666; font-size: var(--font16); transition: color .35s ease;} @media (any-hover: hover) { .rdcapTwo .list .item:hover .bjBox {opacity: 1;} .rdcapTwo .list .item:hover .bjBox img {transform: scale(1.06);} .rdcapTwo .list .item:hover .icon img {filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1);} .rdcapTwo .list .item:hover .tit, .rdcapTwo .list .item:hover .desc {color: #fff;} } /* ===== 研发创新 - 核心技术 ===== */ .coreTechMain {background: #fff;} .coreTechOne {padding: 1rem 0 .6rem;} .coreTechOne .indexTle {margin-bottom: .8rem;} .coreTechOne .advList {display: grid; grid-template-columns: repeat(4, 1fr); gap: .24rem; align-items: stretch;} .coreTechOne .advList .item {display: flex; flex-direction: column; min-width: 0; height: 100%; padding: .4rem .3rem; box-sizing: border-box; border-radius: .15rem; background: #F5FAFF; transition: transform .35s ease, box-shadow .35s ease;} .coreTechOne .advList .item .icon {width: .52rem; height: .52rem; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: flex-start;} .coreTechOne .advList .item .icon img {display: block; max-width: 100%; max-height: 100%; object-fit: contain;} .coreTechOne .advList .item .tit {margin-top: .8rem; color: #1a1a1a; line-height: 1.4; font-size: var(--font22);} .coreTechOne .advList .item .txt {margin-top: .2rem; font-size: var(--font16); line-height: 1.8;} @media (any-hover: hover) { .coreTechOne .advList .item:hover {transform: translateY(-5px); box-shadow: 0 .08rem .24rem rgba(16, 95, 184, .1);} } .coreTechTwo {padding: .6rem 0 1.2rem;} .coreTechTwo .indexTle {margin-bottom: .8rem;} .coreTechTwo .imgBox {width: 100%; line-height: 0; text-align: center;} .coreTechTwo .imgBox img {display: block; margin: auto; max-width: 100%; height: auto;} /* 深度学习 / 智能视觉平台 */ .coreTechThree.coreTechPlat {padding-bottom: 0;} .coreTechPlat {padding: 1rem 0 1rem; background: #EEF5FB;} .coreTechPlat .indexTle {margin-bottom: .7rem;} .coreTechPlat .platSwitch {display: flex; align-items: stretch; gap: .25rem; box-sizing: border-box;} .coreTechPlat .sideTabs {width: 23%; display: flex; flex-direction: column; gap: .12rem; margin: 0; padding: 0; list-style: none;} .coreTechPlat .sideTabs .tab-item {flex: 1; display: flex; align-items: center; justify-content: center; min-height: .8rem; padding: .1rem; box-sizing: border-box; background: #fff; color: #333; font-size: var(--font24); line-height: 1.35; text-align: center; cursor: pointer; user-select: none; transition: background .3s ease, color .3s ease, box-shadow .3s ease;} .coreTechPlat .sideTabs .tab-item span {display: block;} .coreTechPlat .sideTabs .tab-item.on {background: #105FB8; color: #fff; box-shadow: 0 .06rem .18rem rgba(0, 104, 221, .3);} @media (any-hover: hover) { .coreTechPlat .sideTabs .tab-item:not(.on):hover {color: #0068DD;} } .coreTechPlat .tabPanels {flex: 1; min-width: 0; position: relative; background: #fff;} .coreTechPlat .tab-content {display: none; height: 100%; flex-direction: column; padding: .25rem; box-sizing: border-box;} .coreTechPlat .tab-content.on {display: flex;} .coreTechPlat .tab-content .info {flex-shrink: 0; margin-bottom: .28rem;} .coreTechPlat .tab-content .tit {margin: 0; color: #000; font-size: var(--font30); line-height: 1.35;} .coreTechPlat .tab-content .txt {margin: .12rem 0 0; font-size: var(--font16); color: #666;} .coreTechPlat .tab-content .videoBox {position: relative; min-height: 0; width: 100%; overflow: hidden; border-radius: .12rem; border: .12rem solid #566076; line-height: 0;} .coreTechPlat .tab-content .videoBox video {display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; background: #0f1724;} /* ===== 右侧悬浮栏 ===== */ .sideFloat {position: fixed; right: .3rem; bottom: 1.2rem; z-index: 99; display: flex; flex-direction: column; align-items: flex-end; gap: .16rem;} .sideFloat-panel {display: flex; flex-direction: column; width: .7rem; min-width: 60px; background: #fff; border-radius: 999px; box-shadow: 0 4px 16px rgba(0, 0, 0, .08); overflow: visible;} .sideFloat-panel .xian {width: 60%; display: block; height: 1px; background: #e8e8ee; margin: .15rem auto;} .sideFloat-item {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .06rem; padding: .25rem .1rem; padding-bottom: 0; color: #3d445c; text-align: center; cursor: pointer; box-sizing: border-box; transition: color .3s;} .sideFloat-item.sideFloat-phone {padding-top: 0; padding-bottom: .25rem;} .sideFloat-item i {font-size: var(--font28); line-height: 1;} .sideFloat-item .sideFloat-label {font-size: 12px; line-height: 1.2; white-space: nowrap;} .sideFloat-chat, .sideFloat-phone {text-decoration: none; color: inherit;} .sideFloat-chat {border-radius: 999px 999px 0 0;} .sideFloat-phone {border-radius: 0 0 999px 999px;} .sideFloat-phoneNum {position: absolute; right: calc(100% + .08rem); top: 50%; transform: translateY(-50%) translateX(12px); display: flex; align-items: center; gap: .1rem; height: .52rem; min-height: 40px; padding: 0 .22rem 0 .18rem; background: linear-gradient(135deg, #105FB8 0%, #0068DD 100%); border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 104, 221, .28); color: #fff; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1), visibility .35s;} .sideFloat-phoneNum i {display: flex; align-items: center; justify-content: center; width: .34rem; height: .34rem; min-width: 26px; min-height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: .18rem; color: #fff; line-height: 1;} .sideFloat-phoneNum em {font-style: normal; font-size: var(--font16); font-weight: 600; letter-spacing: .04em; line-height: 1; color: #fff;} @media (any-hover: hover) { .sideFloat-item:hover {color: #0068DD;} .sideFloat-phone:hover .sideFloat-phoneNum {opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0);} } .sideFloat-top {display: flex; align-items: center; justify-content: center; width: .7rem; height: .7rem; min-width: 60px; min-height: 60px; background: #fff; border-radius: 50%; box-shadow: 0 4px 16px rgba(0, 0, 0, .08); color: #3d445c; text-decoration: none; transition: color .3s, transform .3s;} .sideFloat-top i {font-size: var(--font30); line-height: 1;} @media (any-hover: hover) { .sideFloat-top:hover {color: #0068DD; transform: translateY(-2px);} } @media screen and (max-width: 767px) { /* 右侧悬浮栏 */ .sideFloat {right: .2rem; bottom: 1.6rem; gap: .12rem;} .sideFloat-panel {min-width: 45px;} .sideFloat-panel .xian {margin: .3rem auto;} .sideFloat-item {padding: .4rem .1rem; gap: .15rem; padding-bottom: 0; } .sideFloat-item.sideFloat-phone {padding-bottom: .4rem;} .sideFloat-item i {font-size: var(--font34);} .sideFloat-item .sideFloat-label {display: none;} .sideFloat-top {min-width: 45px;min-height: 45px;} .sideFloat-phoneNum {display: none;} }