.support-hero{min-height:68svh;background:#263A36;color:#F7F5F0;padding:clamp(72px,8vw,120px) 7vw 58px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,130px);align-items:center} .support-hero-copy{max-width:920px} .support-hero .h1{font-size:clamp(58px,6vw,112px);line-height:1.02;margin:20px 0 28px} .support-hero p{max-width:700px;font-size:clamp(20px,1.35vw,27px);line-height:1.55;color:rgba(247,245,240,.78)} .support-hero .kicker,.support-services .kicker,.support-request .kicker{color:#D9A27B} .support-hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid rgba(247,245,240,.3);padding-top:18px;color:#D9A27B;letter-spacing:.14em;font-size:13px} .support-services{padding:46px 7vw 62px;background:#E8DED0;color:#263A36;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(48px,9vw,180px)} .support-services-head .h2,.support-request .h2{font-size:clamp(48px,4.7vw,88px);line-height:1.02;margin:20px 0} .support-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px;align-items:stretch;border-top:1px solid rgba(38,58,54,.28)} .support-service-grid article{position:relative;padding:18px 18px 0 0} .support-service-grid article:not(:last-child):after{content:"";position:absolute;top:0;bottom:0;right:-14px;width:1px;background:rgba(38,58,54,.2)} .support-service-grid .number{font-size:clamp(42px,4vw,68px);color:#C77A4A} .support-service-grid h3{font-size:clamp(22px,1.7vw,28px);font-weight:500;line-height:1.2;margin:16px 0 12px} .support-service-grid p{font-size:clamp(16px,1.15vw,19px);line-height:1.55;color:#52635C;margin:0} .support-install-copy .h2{font-size:clamp(42px,4vw,76px);line-height:1.05;margin:18px 0 22px} .support-install-copy .kicker{color:#D9A27B} .support-request .wide{grid-column:1/-1} .support-request .resource-success{display:none} .support-request .submitted .resource-success{display:block;grid-column:1/-1} .resource-gate [type=submit]:disabled{opacity:.62;cursor:not-allowed} .support-request .submit-failed .resource-success{display:block;grid-column:1/-1;color:#b3261e} /* 平板区间（801–1080px）补一条：原来的堆叠断点只到 800px， 而 820/834px 的平板刚好卡在断点之上，仍按桌面版「左标题 + 右三列」排， 右栏只剩约 107px，被内容撑到 449px → 整页横向溢出 68–80px、必须左右滑动。 这里把「服务区改为上下堆叠」提前到 1080px，平板不再溢版； 只影响 .support-services / .support-service-grid，不动 support-hero 首屏。 */ @media(max-width:1080px){.support-services{display:block;padding:72px 24px}.support-service-grid{margin-top:48px;grid-template-columns:1fr}.support-service-grid article{border-top:1px solid rgba(38,58,54,.2);padding:22px 0 4px}.support-service-grid article:first-child{border-top:0}.support-service-grid article:after{display:none}} @media(max-width:800px){.support-hero{grid-template-columns:1fr;min-height:0}.support-hero-visual{height:420px}.support-services,.support-request{display:block;padding:72px 24px}.support-service-grid{margin-top:48px;grid-template-columns:1fr}.support-service-grid article{border-bottom:1px solid rgba(38,58,54,.2);padding-bottom:26px}.support-service-grid article:after{display:none}.support-service-grid article:last-child{border-bottom:0;padding-bottom:0}.support-request .resource-gate-fields{grid-template-columns:1fr}.support-request .wide{grid-column:auto}.support-hero{padding:92px 24px 54px}.support-hero-meta{margin-top:64px}} .audience-section{padding:74px 0 96px!important} .audience-section>.container{width:calc(100% - 80px)!important;max-width:none!important} .audience-section .grid-4,.audience-section .grid-3{grid-template-columns:repeat(4,minmax(0,1fr));gap:52px} .audience-section .number{font-size:clamp(42px,4vw,72px)!important;color:#D9A27B} .audience-section h3,.audience-section .card-title{font-size:clamp(28px,2.2vw,42px)!important;line-height:1.1!important;margin:18px 0!important} .audience-section p,.audience-section .card-copy{font-size:clamp(18px,1.35vw,25px)!important;line-height:1.5!important;color:#52635C!important} [data-lang="en"]:not(body){display:none!important} body.lang-en [data-lang="zh"]{display:none!important} body.lang-en [data-lang="en"]{display:revert!important} .panel-web-catalog{padding:clamp(88px,10vw,160px) 7vw 100px;background:#263A36;color:#F7F5F0} .panel-web-catalog .h1{font-size:clamp(58px,7vw,126px);line-height:1.02;margin:24px 0 28px} .panel-web-catalog .kicker,.panel-web-set .kicker{color:#D9A27B} .catalog-lead{max-width:760px;font-size:20px;line-height:1.6;color:rgba(247,245,240,.75)} .panel-web-set{padding:90px 7vw;background:#F7F5F0;color:#263A54} .panel-web-set-head{display:flex;align-items:end;justify-content:space-between;padding-bottom:24px;margin-bottom:34px} .panel-web-set-head h2{font-size:clamp(28px,3vw,52px);font-weight:400;margin:0} .panel-web-set-head p{max-width:760px;font-size:18px;line-height:1.5;color:#52635C;margin:18px 0 0} .panel-web-pages{display:grid;grid-template-columns:1fr;gap:84px} .panel-web-pages img{height:auto;max-height:none;object-fit:contain} .panel-web-pages figure{margin:0} .panel-web-pages img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;object-position:top;background:#fff} .panel-web-pages figcaption{padding-top:12px;font-size:12px;letter-spacing:.08em;color:#8E6B56} .panel-catalog-files .h2{font-size:clamp(48px,5vw,92px);line-height:1.02;margin:20px 0 62px} .panel-intro-copy,.panel-performance>div{display:flex;flex-direction:column;justify-content:center;padding:clamp(54px,7vw,130px)} .panel-intro .h1{font-size:clamp(58px,6vw,112px);line-height:1.02;margin:20px 0 28px} .panel-intro .kicker,.panel-families .kicker,.panel-performance .kicker,.panel-applications .kicker{color:#D9A27B} .panel-families .h2,.panel-performance .h2,.panel-applications .h2{font-size:clamp(48px,5vw,92px);line-height:1.02;margin:20px 0 0} .ceiling-intro,.ceiling-product,.ceiling-detail{display:grid;grid-template-columns:1fr 1fr;min-height:76svh;background:#F7F5F0;color:#263A36} .ceiling-intro-copy,.ceiling-product>div,.ceiling-detail>div{display:flex;flex-direction:column;justify-content:center;padding:clamp(54px,7vw,130px)} .ceiling-intro>img,.ceiling-product>img{width:100%;height:100%;min-height:76svh;object-fit:cover} .ceiling-intro .h1{font-size:clamp(58px,6vw,112px);line-height:1.02;margin:20px 0 28px} .ceiling-intro p,.ceiling-product p,.ceiling-detail p{max-width:620px;font-size:19px;line-height:1.6;color:#52635C} .ceiling-product.reverse>div{grid-column:1;grid-row:1} .ceiling-product.reverse>img{grid-column:2;grid-row:1} .ceiling-product .h2,.ceiling-detail .h2,.ceiling-scenes .h2{font-size:clamp(48px,5vw,92px);line-height:1.02;margin:20px 0 28px} .ceiling-product .kicker,.ceiling-detail .kicker,.ceiling-scenes .kicker{color:#D9A27B} .doors-hero{position:relative;min-height:82svh;background:#263A36;color:#F7F5F0} .doors-hero>img{width:100%;height:82svh;object-fit:cover;opacity:.72} .doors-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,35,30,.78),rgba(20,35,30,.08) 70%)} .doors-hero-copy{position:absolute;z-index:1;inset:0 auto 0 8vw;width:min(620px,42vw);display:flex;flex-direction:column;justify-content:center} .doors-hero-copy .h1{font-size:clamp(58px,6vw,112px);line-height:1.02;margin:22px 0 28px} .doors-hero-copy p{font-size:22px;line-height:1.55;color:rgba(247,245,240,.84)} .door-series{padding:110px 5vw 140px;background:#F7F5F0;color:#263A36} .door-series-head{display:none!important} .door-series-head .h2{font-size:clamp(54px,5vw,96px);line-height:1.02;margin:18px 0 0} .door-family{border-top:0;padding:44px 0 82px} .door-products article .number,.door-products article .model-tag{position:absolute;z-index:3;order:1;color:#fff!important;text-shadow:0 1px 4px rgba(0,0,0,.65)} .door-products article .number{display:none!important} .door-products article .model-tag{display:none!important} .door-products article img{order:2} .door-products article h3{order:3} .door-family-head{display:flex;align-items:baseline;gap:42px;margin-bottom:28px} .door-family-head h2{font-size:clamp(32px,3vw,52px);font-weight:400;margin:0} .door-family-head .kicker{color:#9A735A} .door-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:max-content;row-gap:96px;column-gap:34px} .door-products article{display:flex;flex-direction:column;min-width:0;background:#F7F5F0;position:relative;z-index:1} .door-products article img{flex:none} .door-products article img{aspect-ratio:3/4!important;height:auto!important;min-height:420px;max-height:620px;width:100%;margin-left:0;margin-right:0;object-fit:contain!important;background:#F4F1EB} .door-products article .model-tag{min-height:28px;margin-top:10px;color:#52635C!important;position:relative;z-index:2} .door-products article h3{position:relative;z-index:2;color:#263A36!important;margin-bottom:0} .door-products article .model-tag span{color:#000!important} /* WC_DOOR_FIRST_FIX（2026-10-15 删除原规则）： 原规则是 .door-family:first-child .door-products{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:34px} 它是「第一个门系列常驻展开、其余折叠」那套旧设计的残留。现在每个系列都有 「点击展开」按钮，这条 !important 会强行显示排在第一个的系列（当时正好是 WPC门墙同色系列）， 而按钮文案仍是「点击展开」——两者自相矛盾，表现为「一进页面这个系列就是展开的」。 必须**直接删掉**这条：titlebar-unify.js 注入的 .door-family:not(.is-open) .door-products{display:none!important} 与它特异性相同， 谁生效取决于文档顺序（那条在 head、本文件在 body），靠加覆盖规则不可靠。 删掉后第一个系列与其它系列行为完全一致：默认折叠，点开才展开。 */ .door-family:first-child .door-products article h3{font-size:20px} .door-family:first-child .door-products article img{aspect-ratio:1/1.1} .door-products article{transition:transform .3s ease} .door-products article:hover{transform:translateY(-6px)} .door-products article img{background:#ebe7df} .door-family:not(:first-child) .door-products article h3{font-size:18px} .door-family:not(:first-child){padding-top:64px} .door-family:first-child{padding-top:0} .door-products article img{width:100%;aspect-ratio:1/1.18;object-fit:cover;display:block;margin-bottom:15px} .door-products article .number{font-size:12px;color:#9A735A;letter-spacing:.1em} .door-products article .model-tag{min-height:20px;margin-top:7px;color:#7F8A84;font-size:12px;letter-spacing:.08em} .door-products article h3{margin-top:6px} .door-products article h3{font-size:15px;line-height:1.25;font-weight:500;margin:7px 0 0} @media(max-width:800px){.door-products img.mobile-fullscreen{position:fixed!important;z-index:9999;inset:0;width:100vw!important;height:100vh!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;background:#000;margin:0!important;cursor:zoom-out}} @media(max-width:900px){.panel-web-catalog{padding:82px 24px 72px}.panel-web-set{padding:64px 24px}.panel-web-set-head{display:block}.panel-web-pages{grid-template-columns:1fr;gap:38px}.panel-web-pages img{height:auto;max-height:none}.panel-catalog-files{padding:72px 24px}.panel-catalog-file-grid a{grid-template-columns:48px 1fr 24px;gap:12px}.panel-catalog-file-grid strong{font-size:18px}.panel-intro,.panel-performance{display:block;min-height:0}.panel-intro>img,.panel-performance>img{min-height:48svh;height:48svh}.panel-intro-copy,.panel-performance>div{padding:64px 24px}.panel-families,.panel-applications{padding:72px 24px}.panel-families-head{display:block;margin-bottom:44px}.panel-family-grid,.panel-application-grid{grid-template-columns:1fr}.panel-family-grid img,.panel-application-grid img{height:360px}.panel-intro,.ceiling-product,.ceiling-detail{display:block;min-height:0}.ceiling-intro>img,.ceiling-product>img,.ceiling-detail>img{min-height:48svh;height:48svh}.ceiling-intro-copy,.ceiling-product>div,.ceiling-detail>div{padding:64px 24px}.ceiling-product.reverse>div,.ceiling-product.reverse>img{display:block}.ceiling-scenes{padding:72px 24px}.ceiling-scenes-grid{grid-template-columns:1fr}.ceiling-scenes-grid img{height:420px}.doors-hero,.doors-hero>img{min-height:70svh;height:70svh}.doors-hero-copy{left:24px;width:calc(100% - 48px)}.door-series{padding:72px 24px}.door-series-head{display:block;margin-bottom:44px}.door-products{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px}.door-family-head{display:block}.door-family-head h2{margin-top:10px}} body:has(.case-grid) .container,body:has(.case-grid) .case-grid{width:calc(100% - 72px)!important;max-width:none!important} .case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .case-grid .case{min-width:0} .case-grid .case img{width:100%;height:clamp(420px,42vw,760px);object-fit:cover;display:block} .case-grid .case-label{padding:22px 0 12px} .case-grid .case-label h3{font-size:clamp(24px,2vw,38px);font-weight:400} .factory-hero,.factory-story{display:grid;grid-template-columns:1fr 1fr;min-height:78svh;background:#F7F5F0;color:#263A36} .factory-hero-image,.factory-story-image{min-height:78svh} .factory-hero img,.factory-story img,.factory-wide img{width:100%;height:100%;object-fit:cover} .factory-hero-copy,.factory-story-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,8vw,140px)} .factory-hero-copy .h1,.factory-story-copy .h2{font-size:clamp(52px,5vw,100px);line-height:1.02;margin:20px 0 30px;color:#263A36} .factory-hero-copy p,.factory-story-copy p{max-width:600px;font-size:clamp(19px,1.3vw,26px);line-height:1.6;color:#52635C} .factory-story-copy .h2{color:#F7F5F0} .factory-wide .h2{font-size:clamp(54px,6vw,112px);line-height:1.02;margin-top:22px;color:#F7F5F0} .factory-line{display:grid;grid-template-columns:.8fr 1.2fr;min-height:62svh;background:#F7F5F0;color:#263A36} .factory-line.reverse{grid-template-columns:1.2fr .8fr;background:#263A36;color:#F7F5F0} .factory-line.reverse>div{grid-column:2} .factory-line.reverse>img{grid-column:1;grid-row:1} .factory-line>div{display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,8vw,130px)} .factory-line>img{width:100%;height:100%;min-height:62svh;object-fit:cover} .factory-line .h2{font-size:clamp(48px,5vw,90px);line-height:1.02;margin:18px 0 26px} .factory-line p{max-width:520px;font-size:20px;line-height:1.55;color:#52635C} .factory-line.reverse p{color:rgba(247,245,240,.8)} .factory-line .kicker{color:#9A735A} .home-header{position:absolute;top:0;left:0;right:0;z-index:19;background:rgba(20,35,30,.16);border-bottom:1px solid rgba(255,255,255,.28);color:#fff} .home-header .logo,.home-header .nav a{color:#f4eee3} .home-header .logo span{color:#d9a27b} .logo{gap:13px;font-size:31px!important;font-weight:700!important;letter-spacing:.025em} .logo:has(.brand-logo):before{display:none} .brand-logo{width:210px!important;height:auto!important;object-fit:contain} .logo:before{content:"";display:inline-block;flex:0 0 26px;width:26px;height:26px;border:1px solid #e7c6a8;border-radius:50%;background:linear-gradient(#f4eee3,#f4eee3) 14px 11px/2px 27px no-repeat,linear-gradient(#f4eee3,#f4eee3) 14px 11px/28px 2px no-repeat,#263a36;box-shadow:0 4px 14px rgba(19,30,27,.25),inset 0 0 0 1px rgba(255,255,255,.08)} .header:not(.home-header) .logo:before{border-color:#c98e68;background:#263a36} .home-header .nav a:after{background:#f1ad82} .home-header .lang{border-color:rgba(255,255,255,.55);color:#fff} .hero .hero-content{left:0!important;right:auto!important;bottom:14px!important;width:96vw!important;max-width:none!important;margin:0!important;padding:0 2vw!important;text-align:left!important;align-items:flex-start!important} .hero h1{max-width:94vw!important} #quote.quote-form-section{background:#F7F5F0!important;color:#263A36!important;padding:56px 0 72px!important;border-top:0!important} #quote.quote-form-section .quote-form-wrap{width:min(92vw,1880px)!important;display:grid!important;grid-template-columns:minmax(420px,.9fr) minmax(620px,1.1fr);gap:clamp(48px,7vw,120px);align-items:center} #quote.quote-form-section .quote-copy{display:flex;flex-direction:column;justify-content:space-between;padding:0;border-right:0} #quote.quote-form-section .quote-copy .kicker{color:#9A735A!important;font-size:13px;letter-spacing:.2em;margin-bottom:32px} #quote.quote-form-section .quote-copy .h2{font-size:clamp(48px,4vw,76px)!important;line-height:1.02!important;letter-spacing:-.05em;color:#263A36!important;margin:0 0 22px!important;font-weight:400} #quote.quote-form-section .quote-copy p{max-width:560px;font-size:clamp(19px,1.35vw,26px)!important;line-height:1.5!important;color:#52635C!important} #quote.quote-form-section .quote-form{display:grid!important;grid-template-columns:1fr 1fr;gap:34px 42px;padding:0!important;background:transparent!important} #quote.quote-form-section .quote-form label{color:#52635C!important;font-size:13px!important;font-weight:700;letter-spacing:.08em} #quote.quote-form-section .quote-form input,#quote.quote-form-section .quote-form textarea{border:0!important;border-bottom:1px solid rgba(38,58,54,.42)!important;border-radius:0!important;background:transparent!important;color:#263A36!important;padding:18px 0!important;font-size:20px!important;outline:none} #quote.quote-form-section .quote-form input:focus,#quote.quote-form-section .quote-form textarea:focus{border-bottom-color:#263A36!important} #quote.quote-form-section .quote-form textarea{height:104px!important} /* 弹窗底色已改白：占位符原来是近白色，在白底上等于看不见 */ #quote.quote-form-section .quote-form textarea::placeholder,#quote.quote-form-section .quote-form input::placeholder{color:rgba(82,99,92,.55)} #quote.quote-form-section .quote-form button{margin-top:22px;border:1px solid #263A36!important;border-radius:0!important;background:#263A36!important;color:#F7F5F0!important;font-size:17px!important;font-weight:700;letter-spacing:.05em;padding:21px!important} #quote.quote-form-section .form-success{color:#14532D!important;background:rgba(255,255,255,.78);padding:12px 18px;border-radius:10px} #quote.quote-form-section .form-failed{color:#8f1d16!important;background:rgba(255,255,255,.78);padding:12px 18px;border-radius:10px} /* ===== 询盘表单弹窗化：页面里只留一个按钮，点开才出现表单 ===== */ #quote.quote-form-section{padding:clamp(52px,6vw,96px) 0!important} .quote-cta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px} /* 区块底色是浅米色 #E8DED0，文字必须是深色 —— 原来是白字，等于看不见 */ .quote-cta .kicker{color:#9A735A;letter-spacing:.16em;font-size:12px} .quote-cta .h2{margin:12px 0 10px;color:#263A36;font-size:clamp(30px,3.6vw,58px);line-height:1.06;font-weight:400} .quote-cta p{margin:0;max-width:560px;color:#52635C;font-size:clamp(16px,1.1vw,19px);line-height:1.5} .quote-cta .btn{flex:0 0 auto;border:1px solid #263A36!important;background:#263A36!important;color:#F7F5F0!important;border-radius:999px;padding:18px 34px;font-size:15px;font-weight:600;cursor:pointer} .quote-cta .btn:hover{background:#16241f!important} /* 层级取 100000：必须高于头部语言下拉菜单（10000），否则弹窗打开时点语言按钮， 下拉菜单会浮在弹窗上面，两个浮层叠在一起。 */ .wc-quote-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px} .wc-quote-modal[hidden]{display:none!important} .wc-quote-backdrop{position:absolute;inset:0;background:rgba(10,14,13,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .wc-quote-dialog{position:relative;z-index:1;width:min(940px,100%);max-height:88vh;overflow:auto;background:#FFFFFF;border:1px solid rgba(38,58,54,.1);border-radius:18px;padding:clamp(26px,3.4vw,52px);box-shadow:0 30px 90px rgba(20,35,30,.3)} .wc-quote-dialog .quote-form-wrap{grid-template-columns:1fr!important;gap:0!important} .wc-quote-dialog .quote-copy .h2{font-size:clamp(24px,2.6vw,38px)!important;margin:8px 0 10px} .wc-quote-dialog .quote-copy p{font-size:15px!important} .wc-quote-dialog .quote-form{margin-top:18px} /* 手机端电话/WhatsApp 为必填：标签补一个星号，避免用户以为可以不填 */ .quote-phone-required>span:first-child:after{content:" *";color:#8f1d16;font-weight:700} .wc-quote-close{position:absolute;top:10px;right:14px;z-index:2;border:0;background:transparent;color:#263A36;font-size:34px;line-height:1;cursor:pointer;opacity:.5;transition:opacity .2s ease,color .2s ease} .wc-quote-close:hover{opacity:1;color:#C77A4A} body.wc-quote-open{overflow:hidden} /* ===== 样品申请弹窗（全站通用，由 script.js 创建）===== */ .wc-sample-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px} .wc-sample-modal[hidden]{display:none!important} .wc-sample-backdrop{position:absolute;inset:0;background:rgba(10,14,13,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .wc-sample-dialog{position:relative;z-index:1;width:min(720px,100%);max-height:88vh;overflow:auto;background:#fff;border:1px solid rgba(38,58,54,.1);border-radius:18px;padding:clamp(24px,3.2vw,44px);box-shadow:0 30px 90px rgba(20,35,30,.3)} .wc-sample-dialog .kicker{color:#9A735A;letter-spacing:.16em;font-size:12px} .wc-sample-dialog .h2{margin:10px 0;color:#263A36;font-size:clamp(24px,2.6vw,36px);line-height:1.15;font-weight:400} .wc-sample-note{margin:0 0 18px;color:#52635C;font-size:14px;line-height:1.7} .wc-sample-form{display:grid;grid-template-columns:1fr 1fr;gap:14px} .wc-sample-form label span{display:block;margin-bottom:6px;color:#52635C;font-size:13px;font-weight:600} .wc-sample-form input,.wc-sample-form textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid rgba(38,58,54,.22);border-radius:8px;background:#fff;color:#263A36;font:inherit;font-size:15px} .wc-sample-form textarea{resize:vertical;line-height:1.6} .wc-sample-form input:focus,.wc-sample-form textarea:focus{outline:none;border-color:#C77A4A} .wc-sample-form .wide{grid-column:1/-1} .wc-sample-form button[type=submit]{justify-self:start;padding:14px 30px;cursor:pointer;border:0} /* 电话/WhatsApp 必填：标签补星号 */ .wc-sample-req>span:first-child:after{content:" *";color:#8f1d16;font-weight:700} .wc-sample-ok,.wc-sample-fail{margin:0;font-size:14px} .wc-sample-ok{color:#14532D;background:rgba(20,83,45,.08);padding:12px 16px;border-radius:10px} .wc-sample-fail{color:#8f1d16;background:rgba(143,29,22,.08);padding:12px 16px;border-radius:10px} .wc-sample-close{position:absolute;top:8px;right:14px;z-index:2;border:0;background:transparent;color:#263A36;font-size:32px;line-height:1;cursor:pointer;opacity:.5;transition:opacity .2s ease,color .2s ease} .wc-sample-close:hover{opacity:1;color:#C77A4A} body.wc-sample-open{overflow:hidden} /* 弹窗挂在 body 上，不在 main/.footer 里，阿语方向要单独接管 */ body.lang-ar .wc-sample-dialog{direction:rtl;text-align:right} @media(max-width:640px){.wc-sample-form{grid-template-columns:1fr}.wc-sample-dialog{max-height:92vh;padding:24px 20px}} @media(max-width:800px){.wc-quote-dialog{max-height:92vh;width:100%}.quote-cta{flex-direction:column;align-items:flex-start}} .quote-form-section{background:#D9A27B!important;padding:clamp(64px,7vw,128px) 0!important} .quote-form-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(48px,8vw,160px);align-items:start} .quote-copy .h2{font-size:clamp(46px,4.5vw,82px);line-height:1.05;margin:12px 0 22px;color:#fff} .quote-copy p{font-size:clamp(18px,1.2vw,23px);line-height:1.55;color:rgba(255,255,255,.88)} .quote-copy .kicker{color:#263A36} .quote-form{display:grid;grid-template-columns:1fr 1fr;gap:18px} .quote-form label{display:grid;gap:8px;color:#263A36;font-size:14px;font-weight:700;letter-spacing:.04em} .quote-form input,.quote-form textarea{width:100%;border:1px solid rgba(38,58,54,.45);border-radius:0;background:rgba(255,255,255,.9);color:#263A36;padding:15px 16px;font:inherit;font-size:16px} .quote-form textarea{height:118px;resize:vertical} .quote-form .wide{grid-column:1/-1} .quote-form button{justify-content:center;border:1px solid #263A36;background:#263A36;color:#fff;cursor:pointer} .quote-form button:hover{background:#1c2e2a} .form-success{display:none!important;grid-column:1/-1;margin:0;color:#263A36;font-weight:700} .quote-form.submitted .form-success{display:block!important} .form-failed{display:none!important;grid-column:1/-1;margin:0;color:#ffd9c7;font-weight:700} .quote-form.submit-failed .form-failed{display:block!important} .support-request .form-failed{display:block;grid-column:1/-1;color:#b3261e} @media(max-width:700px){#quote.quote-form-section .quote-form-wrap{width:calc(100% - 48px)!important;grid-template-columns:1fr!important;gap:50px}#quote.quote-form-section .quote-form{grid-template-columns:1fr!important;gap:28px}#quote.quote-form-section .quote-copy .h2{font-size:48px!important}.quote-form-wrap{grid-template-columns:1fr;gap:38px}.quote-form{grid-template-columns:1fr}.quote-form-section{padding:64px 0!important}} #advantages:has(.benefits-grid){display:block!important;width:100%!important;background:#263A36!important} #advantages:has(.benefits-grid)>.container{display:block!important;width:100%!important;max-width:none!important} #advantages:has(.benefits-grid) .benefits-grid{width:100%!important} .advantages-section{display:block!important;width:100%!important;background:#263A36!important;color:#F4EEE3!important;padding:92px 0 120px} .advantages-section .section-head,.advantages-section .benefits-grid{width:100%!important;max-width:none!important} .advantages-section>.container{display:block!important;width:100%!important;max-width:none;background:transparent!important;padding:0 5vw} .advantages-section .benefits-grid{width:100%!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px} .advantages-section *{background:transparent!important;opacity:1!important} .advantages-section>*,.advantages-section .container,.advantages-section .grid-3,.advantages-section article,.advantages-section .card{background:transparent!important} .advantages-section .grid-3{width:100%;background:transparent!important} .advantages-section .grid-3{grid-template-columns:repeat(3,1fr);column-gap:80px;row-gap:92px} .advantages-section .section-head{display:flex;justify-content:space-between;align-items:end;gap:80px;margin-bottom:70px} .advantages-section .section-head .h2{font-size:clamp(54px,5vw,92px);line-height:1.02} .advantages-section .section-head .intro{font-size:clamp(20px,1.5vw,28px);max-width:650px} .benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(244,238,227,.25)} .benefit-card{min-height:clamp(250px,27vh,340px);padding:34px 32px;background:#263A36!important;border:1px solid rgba(244,238,227,.18)} .benefit-card .number{font-size:30px;margin-bottom:16px} .benefit-card .kicker{font-size:13px;letter-spacing:.16em} .benefit-card h3{font-size:clamp(30px,2.2vw,48px);margin:18px 0 12px} .benefit-card p{font-size:clamp(18px,1.2vw,23px);max-width:520px} .advantages-section .section-head,.advantages-section .section-head .h2,.advantages-section .section-head *{color:#F4EEE3!important} .advantages-section .section-head .intro{color:rgba(244,238,227,.9)!important} .advantages-section .number,.advantages-section .kicker{color:#D9A27B!important} .advantages-section h3{color:#F4EEE3!important;font-size:clamp(25px,2vw,38px)} .advantages-section p{color:rgba(244,238,227,.9)!important;font-size:18px;line-height:1.6} .advantage-panel .advantage-copy .h2{font-size:clamp(58px,5.5vw,108px)!important;line-height:1.02!important} .advantage-panel .advantage-copy .intro{font-size:clamp(20px,1.4vw,28px)!important;line-height:1.5!important} #advantages{padding:0!important;min-height:100svh;background:#263A36!important;display:grid;grid-template-columns:1.08fr .92fr;align-items:stretch} #advantages>div{min-width:0} #advantages>div:first-child{min-height:100svh} #advantages>div:last-child{padding:clamp(58px,7vw,120px) clamp(42px,6vw,120px);display:flex;flex-direction:column;justify-content:center;background:#263A36!important} #advantages .h2{font-size:clamp(52px,5vw,96px)!important;line-height:1.02!important;color:#F4EEE3!important} #advantages .intro,#advantages p{font-size:clamp(18px,1.3vw,25px)!important;line-height:1.55;color:rgba(244,238,227,.9)!important} #advantages .list{margin-top:45px} #advantages li{padding:22px 0;border-top:1px solid rgba(244,238,227,.35);font-size:clamp(20px,1.5vw,29px);color:#F4EEE3} #advantages li:before{color:#D9A27B} .process-section{background:#263A36!important;color:#F4EEE3!important;padding:48px 0 64px;min-height:0;display:block} .process-section .section-head{margin-bottom:42px} .process-section .section-head .h2{font-size:clamp(48px,4.8vw,88px)!important} .process-section .section-head .intro{font-size:clamp(18px,1.2vw,23px)!important} .process-section .section-head .h2{font-size:clamp(58px,6vw,112px)!important;color:#F4EEE3!important} .process-section .section-head .intro{font-size:clamp(21px,1.5vw,30px)!important;color:rgba(244,238,227,.86)!important} .process-section .kicker{color:#D9A27B!important} .process-section>.container{width:calc(100% - 120px);max-width:2300px} .process-section .section-head{display:flex;justify-content:space-between;align-items:end;gap:80px;margin-bottom:76px} .process-section .section-head .h2{font-size:clamp(52px,5vw,96px);line-height:1.02;color:#263A36} .process-section .section-head .intro{font-size:clamp(19px,1.4vw,26px);color:#60736b;max-width:620px} .process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .process-steps article{position:relative;padding:0 42px 0 0} .process-steps article:not(:last-child){margin-right:42px} .process-steps .step-no{font-size:clamp(44px,4vw,72px);line-height:1;color:#D9A27B;margin-bottom:28px} .process-steps .step-line{position:absolute;top:38px;left:78px;right:0;border-top:1px solid #D9A27B} .process-steps h3{font-size:clamp(30px,2.4vw,46px);font-weight:400;margin:0 0 14px;color:#F4EEE3} .process-steps p{font-size:clamp(18px,1.3vw,24px);line-height:1.5;color:rgba(244,238,227,.84);margin:0;max-width:360px} .materials-section{min-height:100svh;padding:54px 0 32px;overflow:hidden} .materials-section>.container{width:100%;max-width:none} .materials-section .section-head{display:block!important;width:min(calc(100% - 80px),1700px);margin:0 auto 34px;text-align:center} .materials-section .section-head>div{text-align:center} .materials-section .section-head .kicker{text-align:center} .materials-section .section-head .h2{font-size:clamp(48px,4.8vw,82px);line-height:1.05;max-width:1400px;margin:0 auto 22px} .materials-section .section-head .intro{font-size:22px;line-height:1.55;max-width:900px;margin:0 auto;color:#52635c;text-align:center} .materials-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:none;cursor:grab;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;padding:0 40px 18px;scrollbar-width:none} .materials-track::-webkit-scrollbar{display:none} .materials-track:active{cursor:grabbing} .material-card{flex:0 0 min(42vw,690px);scroll-snap-align:start;background:#fff} .material-image{height:clamp(390px,48vh,650px);overflow:hidden} .material-image img{transition:transform .8s cubic-bezier(.2,.8,.2,1)} .material-card:hover .material-image img{transform:scale(1.07)} .material-copy{padding:22px 6px 8px} .material-copy h3{font-size:clamp(30px,2.5vw,46px);font-weight:300;margin:5px 0 8px} .material-copy p{font-size:18px;color:#52635c;margin:0;max-width:580px} :root{--ink:#18211f;--muted:#66716d;--cream:#f4f1eb;--paper:#fbfaf7;--line:#d9ddd8;--accent:#be6d47;--sage:#8c9d91;--dark:#18211f;--max:1240px} *{box-sizing:border-box} html{scroll-behavior:smooth} body{overflow-x:hidden;margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Microsoft YaHei",sans-serif;line-height:1.6} a{color:inherit;text-decoration:none} img{display:block;width:100%;height:100%;object-fit:cover} .container{width:min(calc(100% - 40px),1400px);margin:auto} .menu{display:none} .header{height:78px;background:rgba(251,250,247,.94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)} .header .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:22px} .logo{font-weight:800;letter-spacing:.13em;font-size:28px;white-space:nowrap} .logo span{color:var(--accent);font-weight:400} .nav{display:flex;gap:31px;align-items:center;font-size:16px;letter-spacing:.04em} .nav a{position:relative;padding:28px 0} .nav a:after{content:"";position:absolute;left:0;bottom:19px;width:0;height:1px;background:var(--accent);transition:.25s} .nav a:hover:after,.nav a.active:after{width:100%} .actions{display:flex;gap:10px;align-items:center} .lang{border:0!important;background:transparent;padding:14px 18px;font-size:20px;cursor:pointer;display:inline-flex;align-items:center;gap:11px;white-space:nowrap;transition:transform .25s ease,background .25s ease;color:inherit!important} .lang:hover{transform:scale(1.08);background:rgba(255,255,255,.16)} .home-header .lang{margin-right:34px} .btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);padding:15px 24px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;transition:.25s} .btn:hover{background:var(--ink);color:#fff} .btn.fill{background:var(--accent);border-color:var(--accent);color:#fff;border-radius:999px} .btn.fill:hover{background:#9e5535} .menu{display:none;background:none;border:0;font-size:24px} .hero{min-height:100svh;height:100svh;position:relative;color:#fff;background:#34403a;overflow:hidden} .hero-media{position:absolute;inset:0;opacity:.73} .hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,20,.78),rgba(15,23,20,.18) 68%,rgba(15,23,20,.3))} .hero-content{position:relative;z-index:1;min-height:100svh;display:flex,flex-direction:column;justify-content:center;padding:70px 0;max-width:670px} .eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:18px} .hero .eyebrow{color:#e4a17e} .h1{font-size:clamp(42px,6vw,76px);line-height:1.06;font-weight:300;letter-spacing:-.04em;margin:0 0 26px} .h1 em{font-family:Georgia,serif;font-style:italic;font-weight:400} .lead{font-size:18px;max-width:560px;color:rgba(255,255,255,.85);margin:0 0 32px} .hero-meta{display:flex;gap:30px;margin-top:76px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)} .section{padding:105px 0} .section.cream{background:var(--cream)} .section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:44px} .kicker{font-size:11px;color:var(--accent);letter-spacing:.18em;text-transform:uppercase;font-weight:700} .h2{font-size:clamp(31px,4vw,52px);line-height:1.1;font-weight:300;letter-spacing:-.035em;margin:9px 0 0} .h2 em{font-family:Georgia,serif;font-style:italic} .intro{max-width:420px;color:var(--muted);font-size:15px} #products>.container{width:calc(100% - 120px);max-width:2200px} #products .card{position:relative;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease} #products .card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s ease} #products .card:hover{transform:translateY(-14px);box-shadow:0 24px 45px rgba(24,33,31,.16)} #products .card:hover:after{transform:scaleX(1)} #products{padding-top:76px;padding-bottom:130px} #products .section-head{display:block!important;margin:0 auto 52px;text-align:center;max-width:1700px} #products .section-head>div{display:block;text-align:center} #products .section-head .h2{font-size:clamp(58px,6vw,112px);line-height:1;max-width:1500px;margin:0 auto 24px} #products .section-head .intro{font-size:clamp(21px,1.7vw,30px);line-height:1.45;color:#52635c;max-width:1200px;margin:auto} #products .card{position:relative;min-height:min(54vw,720px);overflow:hidden;background:var(--dark);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease} #products .card:hover{transform:translateY(-12px);box-shadow:0 26px 52px rgba(24,33,31,.22)} #products .card:hover .card-image img{transform:scale(1.1);filter:saturate(1.12) contrast(1.04)} .card{background:#fff} .card:hover .card-image img{transform:scale(1.045)} .number{font-size:11px;letter-spacing:.15em;color:var(--accent);margin-bottom:18px} .split{display:grid;grid-template-columns:1fr 1fr;min-height:530px} .split-copy .intro{color:#bdc8c1} .stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stat{padding:28px 20px;border-right:1px solid var(--line)} .stat:last-child{border-right:0} .stat strong{font-size:32px;font-weight:300;display:block} .stat span{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase} .cta{background:var(--accent);color:#fff;padding:72px 0} .cta .container{display:flex;justify-content:space-between;align-items:center;gap:30px} .cta .h2{max-width:650px} .cta .btn{border-color:#fff;color:#fff} .cta .btn:hover{background:#fff;color:var(--accent)} .footer{background:var(--dark);color:#dce3dd;padding:60px 0 25px} .footer-grid{display:grid;grid-template-columns:1.4fr 1.5fr 1fr 1fr 1fr;gap:32px;padding-bottom:45px} /* WC_FOOTER_PRODUCTS（2026-10-15）——「产品目录」栏有 9 项，单列会把页脚拉长近一倍。 改成两列并排：整栏仍占网格中的 1 格（宽 1.5fr），列高与旁边的社交栏大致齐平。 ≤900px 时（见文件末尾 WC_COMPACT）回退为单列，避免手机端把这一格挤成 4 行窄条。 */ .footer-products .footer-col2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} .footer-products .footer-col2 a{display:block;white-space:nowrap} .footer h3{font-weight:400;font-size:14px;margin:0 0 17px} .footer p,.footer a{color:#9eaaa2;font-size:13px} .footer a{display:block;margin:6px 0} .copyright{border-top:1px solid #3b4641;padding-top:20px;color:#7c8981;font-size:11px;display:flex;justify-content:space-between} .page-hero{background:var(--dark);color:#fff;padding:90px 0 78px} .page-hero .h1{max-width:760px;margin-bottom:15px} .page-hero p{color:#bdc8c1;max-width:580px;margin:0} .catalog-item .number{margin:0} @media(max-width:850px){.catalog-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:500px){.catalog-grid{grid-template-columns:1fr}} .product-card .image{position:absolute;inset:0;background:#4d5a52} .product-card .image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,15,13,.75),transparent 70%)} .product-card .content{position:absolute;inset:auto 25px 25px} .quote-dot{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--accent);font-size:22px;line-height:1} @media(max-width:850px){.download-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:500px){.download-grid{grid-template-columns:1fr}} .pain-card .number{font-size:12px} @media(max-width:850px){.pain-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:500px){.pain-grid{grid-template-columns:1fr}} .process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)} .case-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px} .case{position:relative;height:370px;overflow:hidden;color:#fff} .case:nth-child(1){grid-column:span 7} .case:nth-child(2){grid-column:span 5} .case:nth-child(3){grid-column:span 5} .case:nth-child(4){grid-column:span 7} .case:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 65%)} .case .case-label{position:absolute;bottom:22px;left:22px;z-index:1} .case h3{font-size:23px;font-weight:300;margin:4px 0} .form{display:grid;gap:14px} .form input,.form textarea,.form select{width:100%;border:1px solid var(--line);background:#fff;padding:14px;font:inherit;font-size:13px} .form textarea{min-height:120px;resize:vertical} [data-lang=en]{display:none} .lang-en [data-lang=zh]{display:none} .lang-en [data-lang=en]{display:inline} .lang-en p[data-lang=en],.lang-en h1[data-lang=en],.lang-en h2[data-lang=en],.lang-en h3[data-lang=en],.lang-en span[data-lang=en]{display:block} .lang-en .eyebrow[data-lang=en]{display:block} .lang-en .btn[data-lang=en]{display:inline-flex} .lang-en .nav-text[data-lang=en]{display:inline} .lang-en .nav-text[data-lang=zh]{display:none} @media(max-width:850px){.nav a{padding:10px 0}.nav a:after{bottom:5px}.home-header .container{padding-left:16px;padding-right:16px;gap:14px}.header .container{gap:14px;padding-left:16px;padding-right:16px}.hero,.hero-content{min-height:100svh}.grid-3,.product-grid,.contact-box{grid-template-columns:1fr}.split{grid-template-columns:1fr}.split-image{min-height:330px}.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.cta .container{display:block}.cta .btn{margin-top:25px}.case-grid{display:grid;grid-template-columns:1fr 1fr}.case,.case:nth-child(n){grid-column:span 1;height:270px}.case:first-child{grid-column:span 2}.footer-grid{grid-template-columns:1fr 1fr}.copyright{display:block}.copyright span{display:block;margin-top:8px}} @media(max-width:850px){.rich-grid{grid-template-columns:repeat(2,1fr)}.process{grid-template-columns:repeat(2,1fr)}.process-item:nth-child(2){border-right:0}} .header.home-header{background:transparent!important;backdrop-filter:none;border-bottom:0!important} .home-header .nav{flex:1;justify-content:center;gap:clamp(2px,0.6vw,12px)} .home-header .nav a{font-size:12px;font-weight:500;transition:transform .28s cubic-bezier(.2,.8,.2,1),color .28s ease,background .28s ease,box-shadow .28s ease;position:relative;padding:5px 6px;border-radius:4px;white-space:normal;line-height:1.2;text-align:center} .home-header .nav a:after{height:2px;bottom:1px;left:6px;width:0;background:#ffd0a9;transition:width .3s cubic-bezier(.2,.8,.2,1)} .home-header .nav a:hover{transform:translateY(-4px) scale(1.08);color:#fff;background:rgba(190,109,71,.85);box-shadow:0 8px 18px rgba(0,0,0,.22),0 0 14px rgba(255,180,126,.4)} .home-header .nav a:hover:after{width:calc(100% - 28px)} .home-header .nav a.active{font-weight:700} .home-header .container{width:100%;max-width:none;padding-left:clamp(8px,1.2vw,20px);padding-right:clamp(8px,1.2vw,20px);gap:14px} .home-header .logo{display:inline-flex;flex-direction:row;align-items:center;line-height:normal} .header:not(.home-header) .logo{display:inline-flex;flex-direction:row;align-items:center;line-height:normal} .header:not(.home-header) .logo-sub{color:var(--muted)!important} .hero-content{position:absolute;left:0;right:0;bottom:0;min-height:0!important;justify-content:flex-end;padding:0 0 48px!important} .hero .hero-meta{display:none} .hero .eyebrow{font-size:16px} .hero .lead{max-width:900px} .hero .h1{font-size:clamp(60px,7.6vw,108px);text-shadow:0 2px 14px rgba(0,0,0,.18)} .hero .lead{font-size:24px;line-height:1.5;text-shadow:0 2px 10px rgba(0,0,0,.15)} @media(max-width:500px){.hero-content{justify-content:flex-end;padding:45px 0 45px!important}.hero .h1{font-size:62px}} .header.home-header.is-scrolled{position:fixed;top:0;background:rgba(251,250,247,.96)!important;color:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(24,33,31,.08)} .header.home-header.is-scrolled .logo,.header.home-header.is-scrolled .nav a{color:var(--ink)} .header.home-header.is-scrolled .logo span{color:var(--accent)} .header.home-header.is-scrolled .nav a:after{background:var(--accent)} .header.home-header.is-scrolled .lang{border-color:var(--line);color:var(--ink)} .header.home-header{position:absolute;top:0;color:#fff} .header.home-header .logo,.header.home-header .nav a{color:#fff} .header.home-header .btn.fill{background:var(--accent);color:#fff;border-color:var(--accent)} .hero .hero-content{position:absolute!important;left:0;right:auto;width:min(calc(100% - 40px),1600px);margin-left:0!important;margin-right:0!important;bottom:0;min-height:0!important;padding:0 0 0 max(24px,2.5vw)!important;justify-content:flex-end!important} /* WC_HERO_WRAP：首页大标题允许换行。 原来这里是 white-space:nowrap!important + 上限 138px —— 中文标题「墙板、软瓷、吊顶、门、柜与地板，完整、高性价比的快装空间系统。」 30 多字，138px 一行要 4200px 宽，远超 1600px 容器， 右侧「性价比」直接被裁掉（2026-10-17 站长反馈「文案跑出去了」）。 改成 normal 让浏览器自然折行，字号链不变，视觉层级保持。 */ .hero h1{font-size:clamp(72px,6.5vw,138px)!important;line-height:.94!important;font-weight:300!important;letter-spacing:-.045em!important;white-space:normal!important;overflow-wrap:anywhere!important;max-width:94vw!important;margin:0 0 22px!important} .hero h1 em{white-space:nowrap;font-style:normal!important;font-family:inherit!important;color:#d9a27b} .hero h1,.hero .lead{color:#eee9df!important} .hero h1{text-shadow:0 3px 18px rgba(18,28,25,.42)!important} .hero .lead{text-shadow:0 2px 12px rgba(18,28,25,.5)!important} .hero .hero-media:after{background:linear-gradient(90deg,rgba(16,28,24,.84),rgba(16,28,24,.3) 54%,rgba(16,28,24,.08))!important} .hero .lead{font-size:25px!important;line-height:1.4!important;max-width:1250px!important} .hero .eyebrow{font-size:19px!important} @media(max-width:500px){.hero h1{font-size:58px!important;line-height:.96!important;white-space:normal!important}.hero .lead{font-size:22px!important}.hero .lead{font-size:27px!important}.hero .eyebrow{font-size:18px!important}} #products .card{min-height:auto;background:#fff;overflow:hidden;transform:none!important;box-shadow:none!important} #products .card-body .number{color:var(--accent)} #products .card:hover .card-image img{transform:scale(1.04)} @media(max-width:500px){#advantages{display:block;min-height:0}#advantages>div:first-child{min-height:52svh}#advantages>div:last-child{padding:56px 28px 70px}#advantages .h2{font-size:48px!important}#advantages li{font-size:21px;padding:18px 0}.process-section>.container{width:calc(100% - 32px)}.process-section .section-head{display:block;margin-bottom:48px}.process-steps{grid-template-columns:1fr;gap:42px}.process-steps article{padding:0 0 0 0}.process-steps article:not(:last-child){margin-right:0}.process-steps .step-line{display:none}.advantages-section>.container{width:calc(100% - 32px)}.advantages-section .grid-3{grid-template-columns:1fr;row-gap:56px}#products>.container{width:calc(100% - 28px)}#products .card{min-height:460px}#products .card-body{padding:28px}#products .section-head .h2{font-size:48px}.rich-grid,.process{grid-template-columns:1fr}.process-item{border-right:0;border-bottom:1px solid var(--line);margin-right:0;padding-right:0}.container{width:min(calc(100% - 28px),var(--max))}.hero-content{padding:45px 0}.h1{font-size:44px}.section{padding:72px 0}.section-head{display:block}.intro{margin-top:15px}.hero-meta{margin-top:50px;gap:15px;flex-wrap:wrap}.footer-grid{grid-template-columns:1fr}.case-grid{grid-template-columns:1fr}.case,.case:nth-child(n),.case:first-child{grid-column:span 1}.product-card{min-height:330px}} .door-series-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .door-series-grid article{border-top:1px solid rgba(38,58,54,.32);padding-top:20px} .door-series-grid img{width:100%;height:260px;object-fit:cover;object-position:center;display:block;margin-bottom:22px} .door-series-grid h3{font-size:24px;font-weight:500;line-height:1.25;margin:14px 0 10px} .door-series-grid p{font-size:15px;line-height:1.6;color:#52635C} .panel-catalog .h2{font-size:clamp(48px,5vw,92px);line-height:1.02;margin:20px 0 62px} .resource-gate{width:100%} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #C77A4A;outline-offset:3px} @media(max-width:900px){.door-series-grid{grid-template-columns:repeat(2,1fr)}.panel-catalog-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:640px){.door-series-grid{grid-template-columns:1fr}.panel-catalog-grid{grid-template-columns:repeat(2,1fr);gap:24px 18px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}} @media(max-width:1100px){.hero h1{white-space:normal!important;font-size:clamp(44px,6vw,72px)!important;line-height:1.06!important}.hero h1 em{white-space:normal}} @media(max-width:640px){.hero h1{font-size:clamp(34px,7.6vw,50px)!important}.hero .h1{font-size:clamp(34px,7.6vw,50px)}.doors-hero-copy .h1,.panel-intro .h1,.ceiling-intro .h1,.support-hero .h1,.panel-web-catalog .h1,.factory-hero .h1{font-size:clamp(34px,7.6vw,52px)}.panel-families .h2,.panel-performance .h2,.panel-applications .h2,.ceiling-product .h2,.ceiling-detail .h2,.ceiling-scenes .h2,.door-series-head .h2,.support-services-head .h2,.support-request .h2,.panel-catalog .h2{font-size:clamp(30px,6.6vw,46px)}} .header:not(.home-header){background:rgba(24,33,31,.62);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.18)} .header:not(.home-header) .logo,.header:not(.home-header) .nav a{color:#f4eee3} .header:not(.home-header) .logo span{color:#d9a27b} .header:not(.home-header) .lang{color:#f4eee3;border-color:rgba(255,255,255,.45)} .header:not(.home-header) .btn.fill{background:var(--accent);color:#fff;border-color:var(--accent)} .header:not(.home-header) .nav a{padding:20px 16px;border-radius:4px;transition:transform .28s cubic-bezier(.2,.8,.2,1),color .28s ease,background .28s ease,box-shadow .28s ease} .header:not(.home-header) .nav a:after{left:16px;bottom:12px;height:2px;background:#ffd0a9} .header:not(.home-header) .nav a:hover{transform:translateY(-6px) scale(1.1);color:#fff;background:rgba(190,109,71,.9);box-shadow:0 10px 24px rgba(0,0,0,.22),0 0 18px rgba(255,180,126,.34)} .header:not(.home-header) .nav a:hover:after{width:calc(100% - 32px);background:#fff} .header:not(.home-header) .nav a.active{font-weight:600} .header.is-scrolled{background:rgba(251,250,247,.96)!important;border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(24,33,31,.08)} .header.is-scrolled .logo,.header.is-scrolled .nav a{color:var(--ink)!important} .header.is-scrolled .logo span{color:var(--accent)!important} .header.is-scrolled .lang{color:var(--ink)!important;border-color:var(--line)!important} .header.is-scrolled .nav a:after{background:var(--accent)} #quote.quote-form-section .quote-form-wrap{grid-template-columns:1fr!important;gap:50px;width:calc(100% - 32px)!important} #quote.quote-form-section .quote-form{grid-template-columns:1fr!important;gap:24px} .cta{display:block!important} .cta .container{display:block!important;gap:36px!important} .quote-form-section{padding:64px 0!important} .quote-bubble{position:fixed;right:68px;bottom:32px;z-index:50;display:inline-flex;align-items:center;gap:12px;padding:17px 25px 17px 17px;border-radius:999px;background:var(--accent);color:#fff;box-shadow:0 14px 34px rgba(26,35,31,.3);font-size:15px;letter-spacing:.06em;transition:transform .3s ease,box-shadow .3s ease,background .3s ease} .quote-bubble:hover{transform:translateY(-7px) scale(1.06);background:#d5825b;box-shadow:0 18px 40px rgba(26,35,31,.38)} @media(max-width:640px){.quote-bubble{right:16px;bottom:16px;padding:13px 20px 13px 13px;font-size:14px}} @media(max-width:640px){.quote-form .hide-mobile{display:none!important}.quote-form{grid-template-columns:1fr!important;gap:20px}} /* ===== 联系方式板块（每页正文末尾）===== */ .contact-block{background:var(--cream);padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line)} .contact-block .container{max-width:var(--max);margin:0 auto;padding:0 24px} .contact-block .kicker{color:#9A735A;font-size:13px;letter-spacing:.2em;margin-bottom:14px} .contact-value.placeholder{color:#a08b7d;font-weight:500;border-bottom:1px dashed #c9b7a8} @media(max-width:640px){ .contact-block{padding:48px 0} .contact-block .container{padding:0 18px} .contact-grid{grid-template-columns:1fr} .contact-head{margin-bottom:28px}} .wc-toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,18px);z-index:9999;display:flex;align-items:center;gap:10px;padding:13px 22px;background:var(--ink);color:#f7f5f0;font-size:14px;line-height:1.4;border-radius:999px;box-shadow:0 10px 34px rgba(24,33,31,.26);opacity:0;pointer-events:none;transition:opacity .26s ease,transform .26s cubic-bezier(.22,.8,.24,1);max-width:calc(100vw - 40px)} .wc-toast.on{opacity:1;transform:translate(-50%,0)} .wc-toast-dot{width:7px;height:7px;border-radius:50%;background:#7fd1a8;flex:0 0 auto} .wc-toast-dot.fail{background:#e4735a} @media(max-width:640px){.wc-toast{bottom:84px;font-size:13px;padding:12px 18px;max-width:calc(100vw - 32px)}} @media(prefers-reduced-motion:reduce){.wc-toast{transition:opacity .01s linear}} /* ===== 灵感页图片：hover 动态效果 + 点击放大 ===== */ /* --- 1. 卡片 hover 动态 --- */ .case-grid .case{cursor:zoom-in} .case-grid .case img{transition:transform .7s cubic-bezier(.22,.8,.24,1),filter .5s ease} .case-grid .case:hover img{transform:scale(1.07)} .case:after{transition:background .45s ease,opacity .45s ease} .case-grid .case:hover:after{background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.06) 62%,transparent)} .case-grid .case .case-label{transition:transform .5s cubic-bezier(.22,.8,.24,1)} .case-grid .case:hover .case-label{transform:translateY(-6px)} .case-grid .case h3{transition:letter-spacing .5s ease} .case-grid .case:hover h3{letter-spacing:.012em} .case-grid .case .kicker{transition:color .4s ease,opacity .4s ease} .case-grid .case:hover .kicker{color:#e8b98f;opacity:1} /* 放大按钮（右上角） */ .case-grid .case .case-zoom{position:absolute;top:16px;right:16px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(24,33,31,.34);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;opacity:0;transform:scale(.86) translateY(-4px);transition:opacity .38s ease,transform .38s cubic-bezier(.22,.8,.24,1),background .3s ease} .case-grid .case:hover .case-zoom,.case-grid .case:focus-visible .case-zoom{opacity:1;transform:scale(1) translateY(0)} .case-grid .case .case-zoom svg{width:19px;height:19px;display:block} .case-grid .case:hover .case-zoom{background:rgba(24,33,31,.5)} /* 键盘可达 */ .case-grid .case:focus-visible{outline:2px solid #d9a27b;outline-offset:4px} /* --- 2. 图片灯箱 --- */ .wc-lightbox{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:clamp(20px,5vw,72px);background:rgba(16,22,20,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .34s ease} .wc-lightbox.on{opacity:1;pointer-events:auto} .wc-lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px;box-shadow:0 30px 90px rgba(0,0,0,.5);transform:scale(.94);opacity:0;transition:transform .42s cubic-bezier(.22,.8,.24,1),opacity .34s ease} .wc-lightbox.on img{transform:scale(1);opacity:1} .wc-lightbox-close{position:absolute;top:clamp(16px,3vw,30px);right:clamp(16px,3vw,30px);width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(38,58,54,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:background .25s ease,transform .25s ease} .wc-lightbox-close:hover{background:rgba(233,115,90,.72);transform:rotate(90deg)} .wc-lightbox-cap{position:absolute;left:0;right:0;bottom:clamp(18px,3.4vw,34px);text-align:center;color:rgba(247,245,240,.82);font-size:14px;letter-spacing:.02em;padding:0 24px} .wc-lightbox-cap b{display:block;font-weight:400;font-size:clamp(16px,1.3vw,20px);color:#f7f5f0;margin-bottom:3px} .wc-lightbox-count{position:absolute;top:clamp(20px,3.4vw,34px);left:clamp(20px,3.4vw,34px);color:rgba(247,245,240,.6);font-size:13px;letter-spacing:.08em} .wc-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.32);border-radius:50%;background:rgba(38,58,54,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:20px;cursor:pointer;transition:background .25s ease,transform .25s ease} .wc-lightbox-nav:hover{background:rgba(217,162,123,.7)} .wc-lightbox-nav.prev{left:clamp(12px,2.6vw,26px)} .wc-lightbox-nav.next{right:clamp(12px,2.6vw,26px)} .wc-lightbox-nav.prev:hover{transform:translateY(-50%) translateX(-3px)} .wc-lightbox-nav.next:hover{transform:translateY(-50%) translateX(3px)} body.wc-lightbox-open{overflow:hidden} @media(max-width:640px){ .wc-lightbox{padding:14px} .wc-lightbox-nav{width:40px;height:40px;font-size:17px} .wc-lightbox-close{width:42px;height:42px;font-size:22px} .case-grid .case{cursor:pointer}} @media(prefers-reduced-motion:reduce){ .case-grid .case img,.case-grid .case .case-label,.case:after,.case-grid .case .case-zoom,.wc-lightbox,.wc-lightbox img{transition-duration:.01s!important} .case-grid .case:hover img{transform:none}} /* ===== 全站收紧：正文末尾 → 联系方式 的垂直间距 ===== 原状：最后一屏内容到「联系方式」小字实测 202px （.section 底部 105px + .contact-block 顶部 96px 叠加） 现改为：区块底部 28px + 联系方式顶部 28px ≈ 56px，贴近但不拥挤。 仅调整与联系方式相接的最后一个 section，不影响其它档位间距。 */ .contact-block{padding-top:28px!important} .contact-block .contact-head{margin-bottom:30px!important} /* 紧邻联系方式的最后一个 section：收掉底部内边距 */ main > .section:last-of-type, main > section.section:last-of-type, .section:has(+ .contact-block){padding-bottom:28px!important} /* 档案区网格 */ /* 图片档案区块（cream 底）与联系方式的衔接 */ .section.cream:has(+ .contact-block){padding-bottom:28px!important} /* 移动端进一步收紧 */ @media(max-width:768px){ .contact-block{padding-top:24px!important} main > .section:last-of-type, main > section.section:last-of-type, .section:has(+ .contact-block){padding-bottom:24px!important} .section.cream:has(+ .contact-block){padding-bottom:24px!important} } /* ===== 全站收紧 v2：通用命中「联系方式前一个兄弟区块」 ===== v1 的 .section:last-of-type 只能命中标准 .section， 对 panel-web-set / ceiling-scenes / factory-line / support-request 等自定义类名无效，导致部分页间距为 0。 这里改用 :has(+ .contact-block) 相邻兄弟选择器，无论前一区块叫什么名字都能命中。 注意：不使用 .contact-block ~ *，避免误伤其后的 footer。 */ main > *:has(+ .contact-block), section:has(+ .contact-block), div:has(+ .contact-block), article:has(+ .contact-block){padding-bottom:28px!important} /* 联系方式本身顶部统一 28px（此块最后声明，优先级最高） */ .contact-block{padding-top:28px!important} @media(max-width:768px){ main > *:has(+ .contact-block), section:has(+ .contact-block), div:has(+ .contact-block), article:has(+ .contact-block){padding-bottom:24px!important} .contact-block{padding-top:24px!important}} /* ===== 全站收紧 v3：补齐普通块级元素（.cta 等非 section 节点） ===== v2 的 :has() 只写在 section/div/article 上，index.html 末尾是 .cta.quote-form-section， 需要让它也命中。这里用 `*:has(+ .contact-block)` 覆盖所有标签类型。 */ *:has(+ .contact-block){padding-bottom:28px!important} @media(max-width:768px){ *:has(+ .contact-block){padding-bottom:24px!important}} /* ===== 全站收紧 v4：覆盖高优先级的 ID 规则 ===== index.html 末尾区块是 .cta#quote.quote-form-section，原规则 #quote.quote-form-section{padding:56px 0 72px!important} 带 ID 选择器，优先级高于 v3 的 *:has()。 这里用同等的 ID 级选择器覆盖底部 padding，使其与其它 6 页统一为 28px。 */ #quote.quote-form-section{padding-bottom:28px!important} main > #quote.quote-form-section{padding-bottom:28px!important} .cta.quote-form-section{padding-bottom:28px!important} @media(max-width:768px){ #quote.quote-form-section{padding-bottom:24px!important} main > #quote.quote-form-section{padding-bottom:24px!important} .cta.quote-form-section{padding-bottom:24px!important}} /* =================================================================== 全站收紧 v5：压掉「区块之间」的多余留白（第二轮，全站统一 56px） ------------------------------------------------------------------- 背景：用户反馈「这里空白太大了」。 实测根源有两条： A. 各页 hero 底部的 78px，来自 HTML 内联