:root { --mat-navy: #0f335f; --mat-unit: calc(100vh - var(--header-height)); }
html { font-family: Arial, sans-serif; font-weight: 300; color: #333; background: #fff; }
* { box-sizing: border-box; }
.main { height: auto; min-height: 100vh; max-height: none; }
.main.is-page-stack, .main:has(.page-stack) { overflow: visible; height: auto; max-height: none; }
.page-stack { margin-top: var(--header-height); }
@media (prefers-reduced-motion:reduce) {
.page-stack [class*="-trAnim-"], .page-stack [class*="mfg-"] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ===== 制造页入场动画（5 种，section.active 触发）===== */
/* rise: 自下而上 | fade: 纯淡入 | left/right: 左右滑入 | scale: 缩放淡入 */
[class*="mfg-rise-"], [class*="mfg-left-"], [class*="mfg-right-"], [class*="mfg-scale-"] { opacity: 0; transition-property: opacity, transform; transition-duration: .75s; transition-timing-function: cubic-bezier(.25, .46, .45, .94); }
[class*="mfg-fade-"] { opacity: 0; transition: opacity .75s ease; }
.mfg-rise-1, .mfg-fade-1, .mfg-left-1, .mfg-right-1, .mfg-scale-1 { transition-delay: .05s; }
.mfg-rise-2, .mfg-fade-2, .mfg-left-2, .mfg-right-2, .mfg-scale-2 { transition-delay: .15s; }
.mfg-rise-3, .mfg-fade-3, .mfg-left-3, .mfg-right-3, .mfg-scale-3 { transition-delay: .25s; }
.mfg-rise-4, .mfg-fade-4, .mfg-left-4, .mfg-right-4, .mfg-scale-4 { transition-delay: .35s; }
.mfg-rise-5, .mfg-fade-5, .mfg-left-5, .mfg-right-5, .mfg-scale-5 { transition-delay: .45s; }
.mfg-rise-6, .mfg-fade-6, .mfg-left-6, .mfg-right-6, .mfg-scale-6 { transition-delay: .55s; }
.mfg-rise-7, .mfg-fade-7, .mfg-left-7, .mfg-right-7, .mfg-scale-7 { transition-delay: .65s; }
.mfg-rise-8, .mfg-fade-8, .mfg-left-8, .mfg-right-8, .mfg-scale-8 { transition-delay: .75s; }
[class*="mfg-rise-"] { transform: translate3d(0, 3rem, 0); }
[class*="mfg-left-"] { transform: translate3d(-3rem, 0, 0); }
[class*="mfg-right-"] { transform: translate3d(3rem, 0, 0); }
[class*="mfg-scale-"] { transform: scale(.94); }
.page-stack .active [class*="mfg-rise-"], .page-stack .active [class*="mfg-left-"], .page-stack .active [class*="mfg-right-"], .page-stack .active [class*="mfg-scale-"], .page-stack .active [class*="mfg-fade-"] { opacity: 1; transform: none; }
.manufacturing-system { position: relative; width: 100%; padding: 0; overflow: hidden; box-sizing: border-box; }
.manufacturing-system-bg { position: relative; width: 100%; overflow: hidden; }
.manufacturing-system-bg img { width: 100%; vertical-align: middle; }
.manufacturing-system-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 77rem; padding: 5.25rem 2rem 0 7.2%; box-sizing: border-box; }
.manufacturing-wrap { position: relative; width: 100%; }
.delivered-wrap { margin: 10% auto 0rem; width: 100%; max-width: 1400px; }
.delivered { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 524px; max-width: 100%; height: 730px; padding: 5.5rem 2rem 3.2rem; background-color: transparent; box-sizing: border-box; }
.delivered-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0 1.7rem; height: 2.5rem; font-size: .95rem; font-weight: 500; letter-spacing: .2em; line-height: 1; text-align: center; color: #7fe3f5; border: 1px solid #7fe3f5; border-radius: 999px; background: rgba(15, 51, 95, .3); box-sizing: border-box; }
.delivered-title { margin: 3rem 0 0; font-size: 2.2rem; font-weight: 700; line-height: 1.15; color: #ffffff; }
.delivered-title2 { margin: 1rem 0 0; font-size: 2.2rem; font-weight: 700; line-height: 1.15; background: linear-gradient(102.46deg, #00F0FF -3.7%, #44ACEF 73.3%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.delivered-label { margin-top: 2rem; font-size: 1.05rem; font-weight: 200; letter-spacing: .06em; color: #949494; }
.delivered-line { width: 4rem; height: 7px; margin-top: 1.2rem; background: #D9D9D9; }
.delivered-desc { margin-top: auto; padding-bottom: 3rem; font-size: 1.125rem; font-weight: 300; line-height: 1.9; color: #949494; }
.philosophy { position: relative; margin: 13.5% auto 5%; width: 100%; max-width: 1400px; color: #fff }
.philosophy-title { margin-bottom: 1.5rem; font-size: 4rem; font-weight: bold; color: #ffffff; }
.philosophy-subtitle { margin-bottom: 10px; font-size: 1.5rem; line-height: 1.4; font-weight: 300; color: #ffffff; }
.philosophy-description { margin-bottom: 1.5rem; line-height: 1.4; font-size: 1.5rem; font-weight: 300; color: #ffffff; }
.produce-items { position: relative; margin: 5% auto 8%; width: 100%; max-width: 1400px; display: flex; flex-wrap: wrap; justify-content: space-between; color: #fff }
.produce-items .item { position: relative; width: 18%; min-width: 230px; }
.produce-items .item-title { font-size: 1.4rem; font-weight: 300; color: #ffffff; }
.produce-items .item-line { margin: 1.5rem 0; height: 1px; width: 90%; background: #ffffff; }
.produce-items .item-subtitle { margin-bottom: 2rem; font-size: 1.4rem; font-weight: 300; }
.choose-us { padding: 5% 0 5%; width: 100%; background-color: #051932; }
.choose-us h2 { margin: 20px auto 80px; text-align: center; font-size: 55px; font-weight: 400; color: #ffffff; }
.controller { margin: 0 auto; width: 100%; max-width: 1400px; }
.choose-us-title { margin-bottom: 1.5rem; font-size: 4rem; font-weight: bold; color: #ffffff; text-align: center; }
.choose-us-items { display: grid; flex-wrap: wrap; grid-template-columns: repeat(3, 1fr); gap: 20px; justify-content: space-between; }
.choose-us-items .item { padding: 1.5rem; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; border-radius: 10px; border: 1px solid rgba(0, 240, 255, 0.29); background: rgba(15, 51, 95, 1); }
.choose-us-items .item img { margin-bottom: 10px; width: 77px; max-width: 77px; height: auto; }
.choose-us-items .item .title { font-size: 1.5rem; font-weight: 300; color: #ffffff; }
.choose-us-items .item .line { width: 100px; height: 2px; background: #ffffff; }
.scale { padding: 0 0 90px 0; position: relative; background: linear-gradient(90deg, #74BCE7 0%, #0F335F 100%) top / 100% 50% no-repeat, rgba(5, 25, 50, 1); overflow: hidden; }
.scale-content { position: relative; z-index: 1; margin: 0 auto; width: 100%; max-width: 1400px; padding: 0; box-sizing: border-box; border-radius: 10px; border: 1px solid transparent; background: rgba(15, 51, 95, 0.3); }
.scale-bg { position: absolute; left: 0; right: 0; bottom: 50%; width: 100%; max-width: 100%; height: auto; display: block; object-fit: cover; object-position: center bottom; z-index: 0; pointer-events: none; }
.temp-title { margin: 100px auto 20px; font-size: 4rem; font-weight: bold; color: #ffffff; text-align: center; }
.temp-subtitle { margin: 10px auto 170px; font-size: 1.5rem; font-weight: 300; color: #ffffff; text-align: center; }
.scale-items { display: flex; justify-content: space-around; margin-top: -70px; }
.scale-items .item { padding: 5px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #00f0ff; border-radius: 10px; width: 30%; max-width: 380px; }
.scale-items .item-title-text { font-size: 2.5rem; font-weight: bold; color: #ffffff; }
.scale-items .item-unit { font-size: 1.5rem; font-weight: 300; color: #ffffff; vertical-align: middle; }
.scale-items .item-desc { margin-top: .35rem; font-size: .875rem; line-height: 1.55; color: #0F335F; width: 100%; }
.scale-items .item-desc-label { display: block; font-weight: 500; }
.scale-items .item-desc-detail { margin-top: .2rem; text-wrap: pretty; word-break: normal; overflow-wrap: break-word; hyphens: none; }
.production-wrap { margin-top: calc(50% - 110px); overflow: hidden; }
.production-image { position: relative; margin: 0 auto 90px; width: 100%; max-width: 1130px; }
.production-swiper { position: relative; width: 100%; max-width: 1130px; overflow: hidden; }
.production-swiper .swiper-slide { width: 100%; max-width: 1130px; opacity: 0 !important; transition: opacity .6s ease; }
.production-swiper .swiper-slide-active { opacity: 1 !important; }
.production-image img { width: 100%; max-width: 1130px; height: auto; display: block; }
.production-desc { margin: 10px auto 60px; }
.production-image-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; width: 100%; pointer-events: none; }
.production-image-text .text-list { margin: 0 auto; padding: 10px; display: flex; justify-content: space-evenly; align-items: center; width: 100%; max-width: 1000px; background: rgba(116, 188, 231, 0.54); pointer-events: auto; }
.production-image-text .text-list .text { margin: 0; padding: 0; border: none; background: transparent; font-size: 16px; font-weight: 300; color: rgba(15, 51, 95, 1); vertical-align: middle; cursor: pointer; transition: color .25s ease; }
.production-image-text .text-list .text.is-active { color: #ffffff; }
.production-image-text span.line { display: block; width: 1px; height: 25px; background-color: none; }
.warehousing { position: relative; overflow: hidden; }
.warehousing-content { position: absolute; width: 100%; top: 0; left: 0; z-index: 2; padding: 0 1rem; box-sizing: border-box; }
.warehousing-title { color: #0F335F; }
.warehousing-subtitle { color: #0F335F; }
.warehousing-bg { display: block; width: 100%; height: auto; }
.hd-thermal__glow { position: absolute; z-index: 7; aspect-ratio: 1; pointer-events: none; mix-blend-mode: lighten; background: center / contain no-repeat; opacity: 0; transition: opacity .4s ease calc(var(--content-appear-time, .75s) + .5s); }
.hd-thermal.active .hd-thermal__glow { opacity: 1; }
.hd-thermal__glow--1 { top: 10%; left: 26%; width: min(38%, 30rem); background-image: url('../image/hd-thermal-bg1.svg'); }
.hd-thermal__glow--2 { top: 43%; left: 3%; width: min(46%, 36rem); background-image: url('../image/hd-thermal-bg1.svg'); transition-delay: calc(var(--content-appear-time, .75s) + .65s); }
.hd-thermal__glow--3 { right: -9%; bottom: -23%; width: min(55%, 45rem); background-image: url('../image/hd-thermal-bg1.svg'); transition-delay: calc(var(--content-appear-time, .75s) + .8s); }
.body-zh .delivered-title { font-size: 90px; }
.body-zh .delivered-title2 { font-size: 74px; }
.body-zh .production-image-text .text-list { max-width: 600px; }
@media screen and (max-width:991px) {
.body-zh .delivered-title { font-size: 48px; }
.body-zh .delivered-title2 { font-size: 40px; }
.body-zh .production-image-text .text-list { max-width: 100%; }
}
@media screen and (max-width:576px) {
.body-zh .delivered-title { font-size: 14vw; }
.body-zh .delivered-title2 { font-size: 11.5vw; }
}
@media screen and (max-width:1400px) {
.scale-content { margin: 0 15px; width: calc(100% - 30px); }
.controller { margin-left: 14px; margin-right: 14px; width: calc(100% - 30px); overflow: hidden; }
.philosophy, .produce-items { margin-left: 15px; margin-right: 15px; width: calc(100% - 30px); }
.produce-items { }
.delivered-wrap { margin-left: 10px; margin-right: 10px; }

}
@media screen and (max-width:1200px) {

}
@media screen and (max-width:991px) {
.manufacturing-system { }
.manufacturing-system-bg img { position: absolute; top: 0; left: 50%; width: auto; min-width: 100%; height: 100%; max-width: none; transform: translateX(-50%); object-fit: cover; object-position: top center; }
.delivered-wrap { margin: .8rem auto; }
.delivered {  margin: 0 auto; padding: 2.4rem 2rem 2rem; }
.delivered-icon { height: 3.2rem; padding: 0 2rem; font-size: 1.4rem; }
.delivered-title { margin-top: 2.2rem; font-size: 3rem; }
.delivered-title2 { margin-top: 1.1rem; font-size: 2.5rem; }
.delivered-label { margin-top: 1.6rem; font-size: 1.6rem; }
.delivered-line { margin-top: 1rem; }
.delivered-desc { padding-top: 2rem; font-size: 1.45rem; }
.scale { padding-bottom: 60px; }
.scale-content { margin-left: 15px; margin-right: 15px; width: calc(100% - 30px); }
.scale .temp-title { margin: 56px auto 14px; font-size: 2.25rem; padding: 0 1rem; }
.scale .temp-subtitle { margin: 0 auto 90px; font-size: 1.125rem; padding: 0 1.25rem; }
.scale-bg { bottom: auto; top: 0; height: 46%; }
.scale-items { flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: -36px; padding: 0 12px 16px; }
.scale-items .item { width: calc(50% - 6px); min-width: 0; max-width: none; flex: 1 1 calc(50% - 6px); padding: 12px 10px; }
.scale-items .item:last-child { width: min(100%, 520px); flex: 1 1 100%; }
.scale-items .item-title-text { font-size: 1.6rem; }
.scale-items .item-unit { font-size: 1rem; }
.scale-items .item-desc { font-size: .8125rem; line-height: 1.6; }
.scale-items .item-desc-detail { padding: 0 .15rem; }
.production-wrap { margin-top: 1.5rem; padding: 0 12px; }
.production-desc { margin-bottom: 32px; padding: 0 .5rem; }
.production-image { margin-bottom: 48px; }
.production-image-text .text-list { flex-wrap: wrap; justify-content: center; gap: 6px 10px; padding: 10px 8px; }
.production-image-text .text-list .text { font-size: 13px; }
.production-image-text span.line { height: 18px; }
.warehousing .temp-title { margin: 52px auto 14px; font-size: 2.25rem; padding: 0 1.25rem; }
.warehousing .temp-subtitle { margin: 0 auto 28px; font-size: 1.125rem; line-height: 1.55; padding: 0 1.25rem; }
}
@media screen and (max-width:1200px) {
.produce-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.produce-items .item { width: 100%; min-width: 0; }
.produce-items .item img { width: 100%; height: auto; }
.produce-items .item-line { width: 50%; }
}
@media screen and (max-width:768px) {
.scale .temp-title { margin-top: 48px; font-size: 1.875rem; }
.scale .temp-subtitle { margin-bottom: 72px; }
.production-image-text .text-list .text { font-size: 12px; }
.warehousing .temp-title { margin: 36px auto 10px; font-size: 1.75rem; }
.warehousing .temp-subtitle { margin: 0 auto 20px; font-size: 1rem; }
}
@media screen and (max-width:991px) { }
@media screen and (max-width:768px) { }
@media screen and (max-width:576px) {
.delivered-wrap { margin: .6rem auto; }
.delivered { width: min(90%, 576px); height: auto;         /* aspect-ratio: 481 / 679; */ padding: 9% 8% 8%; background-size: 100% auto !important; background-position: top center !important; border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; }
.delivered-icon { height: 2.6rem; padding: 0 1.6rem; font-size: .9rem; letter-spacing: .16em; }
.delivered-title { margin-top: 1.9rem; font-size: 2.1rem; }
.delivered-title2 { margin-top: .9rem; font-size: 1.9rem; }
.delivered-label { margin-top: 1.3rem; font-size: 1rem; }
.delivered-line { margin-top: .9rem; }
.delivered-desc { padding-top: 1.5rem; font-size: .9rem; line-height: 1.75; }
.philosophy-title { font-size: 30px; }
.philosophy-subtitle { font-size: 1rem; }
.philosophy-description { font-size: 1rem; }
.produce-items { margin-top: 50px; margin-bottom: 50px; margin-left: 15px; margin-right: 15px; width: calc(100% - 30px); display: grid; flex-wrap: wrap; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; justify-content: space-between; }
.produce-items .item { min-width: 0; margin-bottom: 30px; width: 100%; }
.produce-items .item img { width: 100%; }
.produce-items .item-title { font-size: 1rem; }
.produce-items .item-line { margin: 1rem 0; width: 100%; }
.produce-items .item-subtitle { font-size: 1rem; }
.choose-us h2 { margin-bottom: 40px; font-size: 30px; }
.choose-us-items { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.choose-us-items .item { min-width: 0; padding: 1rem .75rem; gap: 10px; }
.choose-us-items .item img { width: 48px; max-width: 48px; }
.choose-us-items .item .title { font-size: .875rem; word-break: break-word; }
.choose-us-items .item .line { width: 60px; }
.scale { padding-bottom: 40px; }
.scale .temp-title { margin: 36px auto 10px; font-size: 1.375rem; }
.scale .temp-subtitle { margin-bottom: 52px; font-size: .875rem; line-height: 1.5; }
.scale-bg { height: 40%; }
.scale-items { flex-direction: column; align-items: center; margin-top: -20px; gap: 10px; padding: 0 10px 12px; }
.scale-items .item { width: 100%; max-width: none; flex: none; padding: 14px 16px; }
.scale-items .item:last-child { width: 100%; max-width: none; }
.scale-items .item-title-text { font-size: 1.375rem; }
.scale-items .item-desc { font-size: .8125rem; line-height: 1.65; }
.scale-items .item-desc-detail { padding: 0 .25rem; }
.production-wrap { margin-top: 1rem; padding: 0 8px; }
.production-desc { margin-bottom: 20px; font-size: .875rem; }
.production-image { margin-bottom: 32px; border-radius: 8px; overflow: hidden; }
.production-image-text .text-list { gap: 4px 6px; padding: 8px 6px; }
.production-image-text span.line { display: none; }
.production-image-text .text-list .text { font-size: 11px; }
.warehousing .temp-title { margin: 28px auto 8px; font-size: 1.375rem; padding: 0 1rem; line-height: 1.35; }
.warehousing .temp-subtitle { margin: 0 auto 16px; font-size: .875rem; line-height: 1.6; padding: 0 1rem; }
.warehousing-content { padding: 0 .75rem; }
}
/* ================= 工艺轮播（左列表高亮 + 右图 swiper） ================= */
.project { position: relative; padding: 5.5rem 0 6rem; color: #fff; background: linear-gradient(74.18deg, #74BCE7 11.05%, #0F335F 92.92%); overflow: hidden; }
.project__inner { position: relative; display: flex; align-items: center; gap: 5%; margin: 0 auto; width: 100%; max-width: 1400px; padding: 0 2rem; box-sizing: border-box; }
.project-nav { flex: 0 0 34%; max-width: 34%; display: flex; flex-direction: column; gap: 2.4rem; }
.project-nav__item { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; color: rgba(255, 255, 255, .38); transition: color .35s ease; }
.project-nav__title { display: inline-flex; align-items: center; gap: 20px; margin: 0 0 .7rem; font-size: 1.75rem; font-weight: 700; line-height: 1.3; color: #0F335F; }
.project-nav__arrow { flex-shrink: 0; display: block; width: 2rem; height: 2rem; object-fit: contain; transition: transform .35s ease, filter .35s ease; }
.project-nav__item:hover .project-nav__arrow, .project-nav__item:focus-visible .project-nav__arrow { transform: translateX(4px); }
.project-nav__desc { margin: 0; font-size: .95rem; font-weight: 300; line-height: 1.7; color: #0F335F; }
.project-nav__item.is-active .project-nav__title, .project-nav__item.is-active .project-nav__desc { color: #fff; }
.project-nav__item.is-active .project-nav__arrow { filter: brightness(0) invert(1); }
.project-swiper { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; }
.project-swiper .swiper-wrapper, .project-swiper .swiper-slide { width: 100%; max-width: 100%; }
.project .swiper-slide { opacity: 1 !important; transition: opacity .6s ease !important; }
.project .swiper-slide:not(.swiper-slide-active) { opacity: 0 !important; }
.project-visual { width: 100%; max-width: 100%; border-radius: 1.5rem; overflow: hidden; }
.project-visual img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: cover; }
@media screen and (max-width:991px) {
.project { padding: 3.5rem 0 4rem; }
.project__inner { flex-direction: column; align-items: stretch; gap: 2rem; width: 100%; max-width: 100%; overflow: hidden; }
.project-nav { flex: none; max-width: none; width: 100%; gap: 1.5rem; }
.project-swiper { width: 100%; max-width: 100%; }
.project-nav__title { font-size: 1.4rem; }
.project-visual { border-radius: 1rem; }
.project-visual img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 10; }
}
@media screen and (max-width:576px) {
.project { padding: 2.5rem 0 3rem; background: linear-gradient(180deg, #74BCE7 11.05%, #0F335F 92.92%); }
.project__inner { padding: 0 1.2rem; gap: 1.4rem; }
.project-visual { border-radius: .75rem; }
.project-visual img { aspect-ratio: 4 / 3; }
.project-nav { gap: 1.1rem; }
.project-nav__title { margin-bottom: .45rem; font-size: 1.15rem; }
.project-nav__desc { font-size: .8125rem; line-height: 1.6; }
}
