:root { --jz-green: #22c55e; --jz-gray-border: #cbd5e1; --jz-radius: 10px; } .btn, .button, .btn-primary, .btn-outline, .cta, a.btn, a.button, button, [type="button"], [type="submit"], [role="button"], .whatsapp, .btn-whatsapp, a[href*="wa.me"], a[href*="whatsapp"], .nav a, .navbar a, .menu a, .navigation a, .header .nav a { box-sizing: border-box !important; border: 1.5px solid var(--jz-gray-border) !important; border-radius: var(--jz-radius) !important; background: transparent !important; background-image: none !important; color: inherit; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .btn:hover, .button:hover, .btn-primary:hover, .btn-outline:hover, .cta:hover, a.btn:hover, a.button:hover, button:hover, [type="button"]:hover, [type="submit"]:hover, [role="button"]:hover, .whatsapp:hover, .btn-whatsapp:hover, a[href*="wa.me"]:hover, a[href*="whatsapp"]:hover, .nav a:hover, .navbar a:hover, .menu a:hover, .navigation a:hover, .header .nav a:hover { background-color: var(--jz-green) !important; background-image: none !important; color: #fff !important; border-color: var(--jz-green) !important; } .btn:focus-visible, .button:focus-visible, .nav a:focus-visible, .menu a:focus-visible, [type="submit"]:focus-visible { outline: 2px solid var(--jz-green); outline-offset: 2px; } .btn::before, .button::before, .nav a::before, .menu a::before, .btn::after, .button::after, .nav a::after, .menu a::after { background-image: none !important; } button:where(:not([class])):contains("提交"), input[type="submit"]:where(:not([class])) { border: 1.5px solid var(--jz-gray-border) !important; border-radius: var(--jz-radius) !important; background: transparent !important; color: inherit; } input[type="submit"], button[type="submit"] { border: 1.5px solid var(--jz-gray-border) !important; border-radius: var(--jz-radius) !important; background: transparent !important; } input[type="submit"]:hover, button[type="submit"]:hover { background-color: var(--jz-green) !important; color: #fff !important; border-color: var(--jz-green) !important; } .whatsapp, .btn-whatsapp, a[href*="wa.me"], a[href*="whatsapp"], input[type="submit"], button[type="submit"] { color: #000 !important; box-shadow: none !important; text-shadow: none !important; } .whatsapp:hover, .btn-whatsapp:hover, a[href*="wa.me"]:hover, a[href*="whatsapp"]:hover, input[type="submit"]:hover, button[type="submit"]:hover { color: #fff !important; } .nav a, .navbar a, .menu a, .navigation a, .header .nav a { background: transparent !important; background-image: none !important; border: none !important; color: #000 !important; } .nav a:hover, .navbar a:hover, .menu a:hover, .navigation a:hover, .header .nav a:hover { background: #22c55e !important; background-image: none !important; color: #fff !important; border: none !important; } .whatsapp, .btn-whatsapp, a[href*="wa.me"], a[href*="whatsapp"], input[type="submit"], button[type="submit"] { box-sizing: border-box !important; border: 1.5px solid #cbd5e1 !important; border-radius: var(--jz-radius, 10px) !important; background: transparent !important; background-image: none !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } .whatsapp:hover, .btn-whatsapp:hover, a[href*="wa.me"]:hover, a[href*="whatsapp"]:hover, input[type="submit"]:hover, button[type="submit"]:hover { background: #22c55e !important; color: #fff !important; border-color: #22c55e !important; box-shadow: none !important; } :root{ --brand:#1EAD4C; --ink:#222; --muted:#666; --line:#E5E5E5; --white:#fff; --brand-300:#22C55E; --brand-400:#16A34A; --brand-700:#0E7A39; --radius:12px; --maxw:1200px; --grad: linear-gradient(135deg, #22C55E 0%, #16A34A 48%, #0E7A39 100%); --divider-gray: #E5E7EB; --card-shadow: 0 8px 22px rgba(0,0,0,.05); } *{box-sizing:border-box} html,body{margin:0;padding:0} html { scroll-behavior: smooth; } body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft Yahei","Helvetica Neue",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.7} .container{max-width:var(--maxw);margin:0 auto;padding:0 16px} .section{padding:48px 0} .site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:20} .nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:56px} .nav-logo img{height:25px;width:auto;object-fit:contain;display:block} @media (max-width:768px){ .nav-logo img{height:25px} } .hamburger{ display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px; position: relative; z-index: 22; } .hamburger .icon-close { display: none; } .hamburger .icon-menu { display: block; } .nav.is-open { display:flex; } .hamburger.is-open .icon-close { display: block; } .hamburger.is-open .icon-menu { display: none; } .nav{position:fixed;inset:56px 0 auto 0;background:#fff;border-top:1px solid var(--line);display:none;flex-direction:column;padding:12px 12px 16px;gap:8px} .nav a{padding:12px;border-radius:10px;color:var(--ink);text-decoration:none;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease} .nav a:hover,.nav a:focus-visible{background:var(--grad);color:#fff;box-shadow:0 4px 10px rgba(23,163,74,.18)} .nav-cta{background:var(--grad)!important;color:#fff!important;border:0!important;margin-left:8px} @media (min-width:768px){ .nav{position:static;display:flex;flex-direction:row;background:transparent;border-top:0;gap:8px;align-items:center} .hamburger{display:none} .nav a{padding:8px 12px} } .hero{ position:relative; padding:140px 16px 120px; color:#fff; text-align: left; background:url('assets/images/hero-bg-desktop.webp') center/cover no-repeat; overflow: hidden; } @media (max-width:768px){ .hero{ padding:100px 16px 80px; background-position: center 45%; } } .hero::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));} .hero::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(45deg, rgba(34,197,94,.18) 0%, rgba(34,197,94,0) 55%);mix-blend-mode:soft-light;} .hero .hero-content{ position:relative; z-index:1; max-width:880px; margin:0 auto; text-align: left; } .hero h1{font-size:clamp(28px,3.2vw + 8px,44px);line-height:1.2;margin:0 0 8px;text-shadow:0 4px 16px rgba(0,0,0,.4)} .subtitle{margin:0 0 20px;color:rgba(255,255,255,.92);font-size:clamp(14px,1.2vw + 6px,20px)} .stats{ display:flex; justify-content: flex-start; flex-wrap:wrap; gap: 32px; margin:0 0 32px; } .stat{ min-width: 180px; display: flex; align-items: center; gap: 14px; background: transparent; border: none; padding: 0; backdrop-filter: none; transition: none; } .stat-content { text-align: left; display: flex; flex-direction: column; } .stat-value-wrapper { display: flex; align-items: baseline; line-height: 1.1; } .stat-value { font-size: 2rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.1; } .stat-suffix { font-size: 1.5rem; font-weight: 500; color: rgba(255, 255, 255, 0.85); margin-left: 4px; line-height: 1; } .stat-label { font-size: 1rem; color: rgba(255, 255, 255, 0.85); margin: 0; font-weight: 500; } .cta-group{ display:flex; justify-content: flex-start; flex-wrap:wrap; gap:14px; margin:0 0 26px } .btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;font-weight:600;text-decoration:none;transition:all .2s ease;border:1px solid transparent;font-size:1rem} .btn-primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(23,163,74,.25)} .btn-outline{border-color:rgba(255,255,255,.6);color:#fff;background:transparent} .btn-light{ background: #f9f9f9; border: 1px solid var(--divider-gray); color: var(--muted); border-radius: 10px; padding: 8px 12px; text-decoration:none; display:inline-block; transition: background-color 0.2s ease; } .btn-light:hover { background: #e9e9e9; color: #000; } .btn-primary:hover { box-shadow: 0 8px 20px rgba(23, 163, 74, .3); } .btn-outline:hover { background: rgba(255, 255, 255, 0.1); box-shadow: none; } .btn-hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 14px; padding: 16px 20px; font-size: 1rem; font-weight: 600; text-decoration: none; backdrop-filter: blur(6px); transition: background-color .2s ease; } .btn-hero-cta:hover { background: rgba(255, 255, 255, 0.15); } .btn-hero-cta img { filter: brightness(0) invert(1); } .sec-head{text-align:center;margin-bottom:14px} .sec-title{margin:0 0 6px;font-size:1.6rem} .sec-sub{margin:0;color:#56645e} .why-band{ padding:56px 0 64px; } .why-wrap{max-width:1200px;margin:0 auto;padding:0 16px;} .why-layout-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } @media (min-width: 900px) { .why-layout-grid { grid-template-columns: 1fr 1.5fr; gap: 48px; } } .why-head{ text-align:left; margin-bottom: 0; } .why-title{ margin:0 0 6px; line-height:1.2; font-size:clamp(26px,3.2vw + 10px,40px); letter-spacing:.2px; color:#0b1310;} .why-title .why-brand{ color:transparent; background: #22c55e; -webkit-background-clip:text; background-clip:text; font-weight:800; } .why-sub{ margin:0; color:#51625a; font-size:clamp(14px,1.1vw + 6px,18px); } .why-four{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:0;} @media (min-width: 680px){ .why-four{ grid-template-columns:repeat(2, 1fr); gap:16px; } } .why-point{ background:#fff; border:1px solid var(--divider-gray); border-radius:16px; padding:18px 16px; text-align:left; box-shadow: var(--card-shadow); transition: none; position: relative; padding-top: 48px; } .why-point-number { position: absolute; top: 10px; left: 16px; font-size: 3.5rem; font-weight: 800; color: #f0f2f5; line-height: 1; z-index: 0; } .why-point-title{ margin:0 0 6px; font-size:1.15rem; font-weight:900; color:#0b1a13; position: relative; z-index: 1; } .why-point-desc{ margin:0; color:#3d4b44; font-size:15px; line-height:1.65; position: relative; z-index: 1; } .products-band{ background:#fff } .prod-slider{ display:grid; grid-auto-flow:column; grid-auto-columns:80%; gap:12px; overflow-x:auto; padding:6px; scroll-snap-type:x mandatory } .prod-slider::-webkit-scrollbar{ display:none } @media (min-width: 900px){ .prod-slider{ grid-template-columns:repeat(5, 1fr); grid-auto-flow:initial; grid-auto-columns:initial; overflow:visible } } @media (max-width: 899px){ .prod-slider{ display:flex; overflow-x:auto; gap:12px; padding:6px 6px 6px 0; scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch; } .prod-card{ flex:0 0 78vw; min-width:78vw; scroll-snap-align:center; } } .sol-grid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; } @media (min-width: 900px){ .sol-grid{ grid-template-columns:repeat(3, 1fr); } } .sol-card{ position:relative; border-radius:14px; overflow:hidden; display:block } .sol-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; } .sol-card:hover img{ transform:scale(1.03); } .sol-mask{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:12px; background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%); color:#fff } .sol-mask h3{ margin:0 0 4px; font-size:1.05rem } .sol-mask p{ margin:0; opacity:.9 } .factory-band{ color:#0b1511; } .factory-hero{ width:100%; border-radius:14px; border:1px solid var(--divider-gray); box-shadow:0 14px 24px rgba(0,0,0,.06); overflow: hidden; } .factory-hero img{ width:100%; height:auto; display: block; transition: transform .25s ease; } .factory-hero:hover img { transform: scale(1.03); } .factory-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:14px 0 } @media (min-width: 900px){ .factory-stats{ grid-template-columns:repeat(4,1fr) } } .statb{ background:#fff; border:1px solid var(--divider-gray); border-radius:12px; padding:14px; text-align:center; box-shadow: var(--card-shadow); } .statb strong{ display:block; font-size:1.2rem; color:#0b1511 } .statb span{ color:#4a5b53 } .factory-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px } @media (min-width: 900px){ .factory-grid{ grid-template-columns:repeat(4,1fr) } } .factory-grid img{ width:100%; height:100%; object-fit: cover; display:block; transition: transform .25s ease; } .trust-band{ color:#0e1713 } .logo-wall{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px } @media (min-width: 900px){ .logo-wall{ grid-template-columns:repeat(6,1fr) } } .logo-tile{ background:#ffffff; border:1px solid var(--divider-gray); border-radius:10px; padding:18px; text-align:center; color: var(--ink); box-shadow: var(--card-shadow); } .trust-photos{ margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } @media (max-width: 899px){ .trust-photos{ grid-template-columns:repeat(2,1fr); } } .trust-photos img{ width:100%; height:100%; object-fit: cover; display:block; transition: transform .25s ease; } .accordion details{ background:#fff; border:1px solid var(--divider-gray); border-radius:12px; padding:10px 12px; margin-bottom:8px; box-shadow: var(--card-shadow); } .accordion summary{ cursor:pointer; font-weight:700 } .accordion p{ margin:8px 0 0; color:#3e4a43 } .lead-band .container{ max-width:900px } .form-layout-vertical { display: flex; flex-direction: column; gap: 16px; background:#ffffff; border:1px solid var(--divider-gray); box-shadow:0 10px 28px rgba(0,0,0,.06); border-radius:14px; padding: 24px; } @media (min-width: 768px) { .form-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-weight: 600; font-size: 0.9rem; } .lead-form input, .lead-form textarea { width:100%; padding:10px 12px; border:1px solid var(--divider-gray); border-radius:10px; font:inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .lead-form input:focus, .lead-form textarea:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(30, 173, 76, 0.15); outline: none; } .checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; background: #f9f9f9; border: 1px solid var(--divider-gray); border-radius: 10px; } @media (min-width: 768px) { .checkbox-grid { grid-template-columns: 1fr 1fr 1fr; } } .checkbox-item { display: flex; align-items: center; gap: 8px; } .checkbox-item label { font-weight: 500; font-size: 0.9rem; } .checkbox-item input[type="checkbox"] { width: auto; } .lead-actions{ display:flex; flex-direction: row; gap:12px; flex-wrap:wrap; margin-top:10px; } .btn-outline-gray { border-color: var(--divider-gray); color: var(--ink); background: #f9f9f9; gap: 8px; flex-grow: 1; } .btn-outline-gray:hover { background: #f0f0f0; border-color: #ccc; } .lead-actions .btn-primary { flex-grow: 1; background: var(--brand-400); } .lead-form .fine{ color:#6b7a72; font-size:12px; margin-top:6px; text-align: center; } .blog-band{ background:#fff } .blog-grid{ display:grid; grid-template-columns:1fr; gap:12px } @media (min-width: 900px){ .blog-grid{ grid-template-columns:repeat(3,1fr) } } .blog-card{ background:#fff; border:1px solid var(--divider-gray); border-radius:14px; padding:12px; box-shadow: var(--card-shadow); } .blog-card img{ width:100%; height:auto; border-radius:10px; margin-bottom:8px } .blog-card h3{ margin:0 0 4px; font-size:1.05rem } .blog-card p{ margin:0 0 10px; color:#3e4a43; font-size:14px } .site-footer { background: var(--section-bg-alt); color: var(--muted); padding-top: 60px; font-size: 0.9rem; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } .footer-col { display: flex; flex-direction: column; gap: 12px; } .footer-logo img { height: 20px; width: auto; } .footer-brief { margin: 0; line-height: 1.6; } .social-links { display: flex; gap: 12px; } .social-links a img { filter: none; opacity: 0.7; transition: opacity 0.2s ease; } .social-links a:hover img { opacity: 1; } .footer-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; } .footer-nav { display: flex; flex-direction: column; gap: 8px; } .footer-nav a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; } .footer-nav a:hover { color: var(--ink); } .footer-contact { font-style: normal; } .footer-contact p { margin: 0 0 4px; } .footer-contact p strong { color: var(--ink); } .footer-bottom-bar { margin-top: 40px; padding: 20px 0; border-top: 1px solid var(--divider-gray); } .footer-bottom-bar .container { display: flex; justify-content: center; text-align: center; } .copyright { margin: 0; font-size: 0.8rem; color: var(--muted); } .prod-card{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--divider-gray); border-radius:16px; padding:0; box-shadow:0 8px 20px rgba(0,0,0,.05); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .prod-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.08); border-color:#d9e8df; } .prod-card .thumb{ position:relative; border-top-left-radius:16px; border-top-right-radius:16px; overflow:hidden; } .prod-card .thumb::before{ content:""; display:block; aspect-ratio: 4/3; } .prod-card .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .prod-card .badge-wrap{ position:absolute; top:10px; left:10px; display:flex; gap:6px; z-index:1; } .badge{ display:inline-flex; align-items:center; padding:6px 10px; font-size:12px; font-weight:700; border-radius:999px; border:1px solid var(--divider-gray); background:rgba(255,255,255,.84); backdrop-filter:blur(4px); color:#0e7a39 } .badge--eco{ color:#0e7a39; border-color:#d9efe3; background:#effaf4; } .badge--hot{ color:#a15c0c; border-color:#f6e7ce; background:#fff7e8; } .badge--custom{ color:#0b4c77; border-color:#d7e9f6; background:#eef7fe; } .prod-card .content{ padding:12px 12px 14px; display:flex; flex-direction:column; gap:8px; } .prod-card h3{ margin:0; font-size:1.08rem; font-weight:800; color:#0b1a13; } .prod-card .subtitle{ margin:0; color:#51625a; font-size:13px; } .prod-card .features{ margin:0; padding-left:18px; color:#3c4742; font-size:14px; line-height:1.55; } .prod-card .features li{ margin:2px 0; } .prod-card .meta{ display:flex; gap:8px; flex-wrap:wrap; color:#51625a; font-size:12px; } .meta .chip{ background:#f6faf7; border:1px solid var(--divider-gray); border-radius:999px; padding:4px 8px; } .prod-card .actions{ display:flex; justify-content:flex-start; gap:8px; margin-top:2px; } .prod-like-sol .prod-tile { display:flex; flex-direction:column; gap:8px; } .prod-like-sol .prod-info { background:#ffffff; border:1px solid var(--divider-gray); border-radius:12px; padding:10px 12px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; flex-grow: 1; transition: none; } .prod-like-sol .features { margin:0 0 6px; color:#3c4742; font-size:14px; line-height:1.55; flex-grow: 1; list-style: disc; padding-left: 20px; } .prod-like-sol .features li { margin:2px 0; position: relative; padding-left: 0; } .prod-like-sol .meta { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 6px; color: var(--muted); font-size:12px; } .prod-like-sol .chip { background: #f9f9f9; border: 1px solid var(--divider-gray); color: var(--muted); border-radius:999px; padding:4px 8px; } .prod-like-sol .actions { display:flex; gap:8px; margin-top: auto; } .blog-card{ transition: none; } .accordion summary{ display:flex; align-items:center; justify-content:space-between; list-style:none; cursor:pointer; position:relative; } .accordion summary::-webkit-details-marker{ display:none } .accordion summary::after{ content:"+"; font-weight:900; color: var(--ink); width:20px; text-align:center; margin-left:12px; transition: transform .18s ease; } .accordion details[open] summary::after{ content:"–"; transform: rotate(0deg); } .factory-stats{ align-items:stretch } .factory-stats .statb{ min-height: 110px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--divider-gray); transition: none; } .testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; } .testimonial-card { background: #fff; border: 1px solid var(--divider-gray); border-radius: 14px; padding: 20px; box-shadow: var(--card-shadow); } .testimonial-card .rating { font-size: 1rem; margin-bottom: 8px; color: #f59e0b; } .testimonial-card .quote { font-size: 1.05rem; font-style: italic; color: #222; margin: 0 0 12px; padding-left: 18px; position: relative; border-left: 3px solid var(--brand-300); } .testimonial-card .author-meta { display: flex; align-items: center; gap: 10px; } .testimonial-card .author-meta .flag { font-size: 1.5rem; } .testimonial-card .author-meta .name { font-weight: 700; color: #3e4a43; } @media (min-width: 900px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } } .process-timeline { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 16px; } .process-timeline-item { display: flex; align-items: flex-start; gap: 16px; background: #fff; border: 1px solid var(--divider-gray); border-radius: 16px; padding: 20px; box-shadow: var(--card-shadow); transition: none; } .process-timeline-marker { flex-shrink: 0; font-size: 1.2rem; line-height: 1; margin-top: 2px; font-weight: 700; color: #555; width: 40px; height: 40px; border: 1px solid var(--divider-gray); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f9f9f9; } .process-timeline-title { font-size: 1.1rem; font-weight: 800; color: var(--ink); margin: 0 0 4px; } .process-timeline-desc { font-size: 0.9rem; color: #3e4a43; margin: 0; flex-grow: 1; } @media (min-width: 1080px) { .process-timeline { flex-direction: row; gap: 0; position: relative; background: #fff; border: 1px solid var(--divider-gray); border-radius: 16px; padding: 24px; box-shadow: var(--card-shadow); } .process-timeline::before { content: ""; position: absolute; top: 44px; left: 10%; width: 80%; height: 1px; background: var(--divider-gray); z-index: 0; } .process-timeline-item { flex-direction: column; align-items: center; text-align: center; border: none; box-shadow: none; padding: 0 12px; position: relative; z-index: 1; background: transparent; width: 16.66%; } .process-timeline-marker { background: #f9f9f9; padding: 4px; } .process-timeline-title { margin-top: 12px; } } .factory-map { margin: 20px 0; } .sub-head-center { text-align: center; font-size: 1.3rem; color: #0b1a13; margin: 24px 0 12px; } .cert-wall { margin-bottom: 24px; gap: 12px; } .cert-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; font-weight: 700; font-size: 0.9rem; } .why-point, .testimonial-card, .process-timeline-item, .logo-tile { transition: none; } .section:not(.hero), .why-band, .products-band, .solutions-band, .factory-band, .trust-band, .faq-band, .lead-band, .blog-band{ padding-top: 80px; padding-bottom: 60px; } .section-bg-base { background: #FFFFFF; } .section-bg-alt { background: linear-gradient(180deg, #F9FAFB 0%, #F4F6F8 100%); } .section:not(.hero), .why-band { border-top: 1px solid var(--divider-gray); } .certs-block { margin-top: 28px; color: rgba(255, 255, 255, 0.9); text-align: left; } .certs-title { font-size: clamp(14px, 1.2vw + 6px, 20px); font-weight: 600; margin-bottom: 10px; } .cert-badges-text { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px 18px; padding: 0; margin: 0; list-style: none; } .badge-text { font-size: clamp(14px, 1.2vw + 6px, 20px); font-weight: 500; } .badge-text span::before { content: "✓"; margin-right: 5px; color: rgba(255, 255, 255, 0.8); font-weight: 700; } .process-timeline-item--highlight { } .process-timeline-item--highlight .process-timeline-marker { } .process-timeline-item--highlight .process-timeline-title { } .process-timeline-item--highlight .process-timeline-desc { } .process-timeline-item--highlight .text-highlight { color: #3e4a43; font-weight: 700; display: block; margin-top: 4px; } .process-timeline-item--highlight:hover { } .process-timeline-item--highlight:hover .process-timeline-marker { } .process-timeline-item--highlight:hover .process-timeline-title { } .process-timeline-item--highlight:hover .process-timeline-desc, .process-timeline-item--highlight:hover .text-highlight { } .media-mentions { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; } @media (min-width: 900px) { .media-mentions { grid-template-columns: repeat(3, 1fr); } } .mention-card { background: #fff; border: 1px solid var(--divider-gray); border-radius: 14px; padding: 20px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; transition: none; } .mention-card:hover { } .mention-quote { font-size: 1rem; font-style: italic; color: #222; margin: 0 0 12px; padding-left: 18px; position: relative; border-left: 3px solid var(--brand-300); flex-grow: 1; } .mention-source { margin: 0; font-weight: 700; color: #3e4a43; font-size: 0.9rem; } .checkbox-item input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 1.15em; height: 1.15em; border: 2px solid var(--divider-gray); border-radius: 4px; background-color: #fff; cursor: pointer; position: relative; display: inline-block; flex-shrink: 0; transition: background-color 0.1s ease, border-color 0.1s ease; } .checkbox-item input[type="checkbox"]:checked { background-color: var(--brand-400); border-color: var(--brand-400); } .checkbox-item input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 0.9em; font-weight: 700; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .anim-fade-up { opacity: 0; animation: fadeUp 0.6s ease-out forwards; } .anim-scroll-fade-up { opacity: 0; visibility: hidden; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .anim-scroll-fade-up.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .hero-product { padding: 100px 16px 80px; background-position: center 60% !important; } .overview-layout { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } .overview-image img { width: 100%; border-radius: var(--radius); box-shadow: var(--card-shadow); border: 1px solid var(--divider-gray); } @media (min-width: 768px) { .overview-layout { grid-template-columns: 1fr 1fr; } } .feature-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; } .feature-card { background: #fff; border: 1px solid var(--divider-gray); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--card-shadow); text-align: left; } .feature-card .feature-title { margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; color: var(--brand-700); } .feature-card p { margin: 0; color: var(--muted); line-height: 1.6; } @media (min-width: 600px) { .feature-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } } .spec-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: flex-start; margin-top: 24px; } .spec-table-wrapper { overflow-x: auto; } .spec-table { width: 100%; min-width: 500px; border-collapse: collapse; border: 1px solid var(--divider-gray); box-shadow: var(--card-shadow); } .spec-table th, .spec-table td { border: 1px solid var(--divider-gray); padding: 12px 14px; text-align: left; vertical-align: middle; } .spec-table th { background: #f9f9f9; font-weight: 700; width: 35%; } .spec-table td { color: var(--muted); } .spec-structure img { width: 100%; border-radius: var(--radius); border: 1px solid var(--divider-gray); background: #f9f9f9; } .custom-note { background: #f6faf7; border: 1px solid var(--divider-gray); border-left: 4px solid var(--brand-400); padding: 16px 20px; margin: 20px 0 0; border-radius: 8px; } .custom-note strong { color: var(--brand-700); font-size: 1.1rem; } @media (min-width: 768px) { .spec-layout { grid-template-columns: 1.2fr 1fr; } } .color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } .color-card { background: #fff; border: 1px solid var(--divider-gray); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; text-align: center; } .color-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #f4f4f4; } .color-card h4 { margin: 14px 0; font-size: 1rem; font-weight: 700; color: var(--ink); } @media (min-width: 900px) { .color-grid { grid-template-columns: repeat(4, 1fr); } } .blog-band .blog-card { display: flex; flex-direction: column; } .blog-band .blog-card h3 { flex-grow: 1; } .blog-band .blog-card .btn-light { margin-top: 10px; align-self: flex-start; } .thank-you-page { padding: 120px 16px; text-align: center; min-height: 60vh; display: flex; align-items: center; justify-content: center; background: var(--section-bg-alt); } .thank-you-page h1 { font-size: clamp(28px, 3.2vw + 8px, 44px); line-height: 1.2; margin: 0 0 8px; color: var(--ink); } .thank-you-page .subtitle { font-size: clamp(14px, 1.2vw + 6px, 20px); color: var(--muted); margin-bottom: 24px; } .solution-matrix-v140 { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; } .solution-matrix-item-v140 { background: #fff; border: 1px solid var(--divider-gray); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; } .matrix-top-row { display: grid; grid-template-columns: 1fr; } .matrix-content { padding: 24px; } .matrix-title { font-size: 1.6rem; font-weight: 800; color: var(--ink); margin: 0; } .matrix-group { margin-bottom: 0; } .matrix-group-title { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0 0 10px; } .matrix-group-text { margin: 0; color: var(--muted); line-height: 1.6; } .matrix-product-list { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .matrix-product-list li { color: var(--muted); line-height: 1.5; } .matrix-images-v139 { padding: 24px; padding-top: 0; } .matrix-images-v139 .sol-card { height: 100%; } .matrix-divider-h { height: 1px; background: var(--divider-gray); margin: 24px 0; } .matrix-divider { height: 1px; background: var(--divider-gray); margin: 0 24px; } .matrix-bottom-row { padding: 24px; } .matrix-bottom-row .matrix-group-title { text-align: left; } .matrix-feature-list { list-style: none; padding-left: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 16px; } .matrix-feature-list li { color: var(--muted); line-height: 1.6; text-align: left; } .feature-item-header { display: flex; align-items: center; gap: 10px; justify-content: flex-start; } .matrix-feature-list li strong { color: var(--ink); font-weight: 400; font-size: 1.05rem; } .matrix-feature-list li img { width: 24px; height: 24px; margin-top: 3px; flex-shrink: 0; filter: invert(48%) sepia(61%) saturate(2153%) hue-rotate(108deg) brightness(97%) contrast(81%); } .feature-item-desc { margin: 6px 0 0 34px; color: var(--muted); font-size: 0.95rem; } @media (min-width: 900px) { .matrix-top-row { grid-template-columns: 1.2fr 1fr; align-items: start; } .matrix-content { padding: 32px 40px; } .matrix-images-v139 { padding: 32px; padding-left: 0; } .matrix-divider { margin: 0 40px; } .matrix-bottom-row { padding: 32px 40px; } .matrix-feature-list { grid-template-columns: repeat(4, 1fr); gap: 24px; } .matrix-feature-list li.has-v-divider { border-left: 1px solid var(--divider-gray); padding-left: 24px; } } .img-zoom-wrapper { display: block; overflow: hidden; border-radius: 10px; border: 1px solid var(--divider-gray); } .img-zoom-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; } .img-zoom-wrapper:hover img { transform: scale(1.03); } .sol-mask-quote { font-style: normal; opacity: 0.8; margin-top: 8px; border-left: none; padding-left: 0; font-size: 0.9rem; } .sol-mask-client { font-weight: 700; font-size: 0.95rem; opacity: 1; color: #fff; margin-top: 8px; } .section, [id="products"], [id="solutions"], [id="testimonials"], [id="process"], [id="factory"], [id="trust"], [id="faq"], [id="get-quote"], [id="knowledge"] { padding-top: 36px !important; padding-bottom: 36px !important; } .section .divider, .divider, .hr, hr { margin-top: 10px !important; margin-bottom: 18px !important; } .section h1, .section h2, .section h3, [id="products"] h2, [id="solutions"] h2, [id="testimonials"] h2, [id="process"] h2, [id="factory"] h2, [id="trust"] h2, [id="faq"] h2, [id="get-quote"] h2, [id="knowledge"] h2 { margin-top: 0 !important; margin-bottom: 10px !important; } .section p, .section ul, .section ol, [id="products"] p, [id="solutions"] p, [id="testimonials"] p, [id="process"] p, [id="factory"] p, [id="trust"] p, [id="faq"] p, [id="get-quote"] p, [id="knowledge"] p { margin-top: 6px !important; margin-bottom: 12px !important; line-height: 1.6; } .section .grid, [id="products"] .grid, [id="solutions"] .grid, [id="knowledge"] .grid { gap: 14px !important; } .faq-item, .accordion-item { margin-bottom: 10px !important; } [id="get-quote"] { padding-top: 28px !important; padding-bottom: 28px !important; } @media (max-width: 768px) { .section, [id="products"], [id="solutions"], [id="testimonials"], [id="process"], [id="factory"], [id="trust"], [id="faq"], [id="get-quote"], [id="knowledge"] { padding-top: 24px !important; padding-bottom: 24px !important; } .section .divider, .divider, .hr, hr { margin-top: 8px !important; margin-bottom: 14px !important; } .section h1, .section h2, .section h3, [id="products"] h2, [id="solutions"] h2, [id="testimonials"] h2, [id="process"] h2, [id="factory"] h2, [id="trust"] h2, [id="faq"] h2, [id="get-quote"] h2, [id="knowledge"] h2 { margin-bottom: 8px !important; } } .hero { padding-top: 120px !important; padding-bottom: 100px !important; } [id="products"] ul, .products ul, .section-products ul { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } [id="products"] li::before, .products li::before, .section-products li::before { content: none !important; display: none !important; } [id="products"] .grid, .section-products .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } #products, .section-products, .products, .products-area { } @media (max-width: 1024px) { #products .grid, .section-products .grid, #products .cards, .section-products .cards { display: grid !important; grid-template-columns: 1fr !important; grid-auto-columns: 1fr !important; gap: 20px !important; } #products .grid > *, .section-products .grid > *, #products .cards > *, .section-products .cards > * { max-width: 100% !important; } } @media (max-width: 1024px) { #products .grid, .section-products .grid, #products .row, .section-products .row, #products .list, .section-products .list { display: flex !important; flex-wrap: wrap !important; } #products .grid > *, .section-products .grid > *, #products .row > *, .section-products .row > *, #products .list > *, .section-products .list > * { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } } @media (max-width: 1024px) { #products [class*="col-"], .section-products [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; } } @media (max-width: 1024px) { #products .card, .section-products .card { margin-left: 0 !important; margin-right: 0 !important; } } :where(#products, .section-products, .products, [id*="product"]) { } @media (max-width: 1200px) { :where(#products, .section-products, .products, [id*="product"]) :is(.grid, .cards, .items, .list, .wrapper) { display: grid !important; grid-template-columns: 1fr !important; grid-auto-columns: 1fr !important; gap: 20px !important; } :where(#products, .section-products, .products, [id*="product"]) :is(.grid, .cards, .items, .list, .wrapper) > * { max-width: 100% !important; } } @media (max-width: 1200px) { :where(#products, .section-products, .products, [id*="product"]) :is(.grid, .row, .list, .cards, .items, .wrapper) { display: flex !important; flex-wrap: wrap !important; } :where(#products, .section-products, .products, [id*="product"]) :is(.grid, .row, .list, .cards, .items, .wrapper) > * { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } :where(#products, .section-products, .products, [id*="product"]) [class*="col-"], :where(#products, .section-products, .products, [id*="product"]) [class*="col-md-"], :where(#products, .section-products, .products, [id*="product"]) [class*="col-sm-"] { flex: 0 0 100% !important; max-width: 100% !important; } } @media (max-width: 1200px) { :where(#products, .section-products, .products, [id*="product"]) :is(.masonry, .multicol, .columns) { column-count: 1 !important; column-gap: 20px !important; } } @media (max-width: 1200px) { :where(#products, .section-products, .products, [id*="product"]) :is(.swiper, .carousel, .slider) :is(.swiper-wrapper, .slides) { display: block !important; transform: none !important; } :where(#products, .section-products, .products, [id*="product"]) :is(.swiper-slide, .slide) { width: 100% !important; margin: 0 0 20px 0 !important; } } @media (max-width: 1200px) { :where(#products, .section-products, .products, [id*="product"]) .card { float: none !important; margin-left: 0 !important; margin-right: 0 !important; } }

/* === PATCH: 产品品类在小屏/缩窗口时每行一项 === */
@media (max-width: 1024px){
  #products .container, .products .container, .section-products .container, #products .prod-like-sol, .products .prod-like-sol, .section-products .prod-like-sol, #products .sol-grid, .products .sol-grid, .section-products .sol-grid, #products .grid, .products .grid, .section-products .grid, #products .row, .products .row, .section-products .row, #products .cards, .products .cards, .section-products .cards, #products .list, .products .list, .section-products .list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* 子项全宽 */
  #products [class*="col-"], .products [class*="col-"], .section-products [class*="col-"],
  #products .grid > *, .products .grid > *, .section-products .grid > *,
  #products .row > *,  .products .row > *,  .section-products .row > *,
  #products .cards > *, .products .cards > *, .section-products .cards > *,
  #products .list > *,  .products .list > *,  .section-products .list > * {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  }
}



/* =====================================================================
   HERO：单色→单色 微渐变（LOGO绿） + 去除文字下第二层渐变 + 背景图适配
   ===================================================================== */
:root{
  --hero-grad-a:#000000;  /* LOGO绿 */
  --hero-grad-d:#2c2f32;  /* 提亮约2% */
  --hero-gradient: linear-gradient(128deg, var(--hero-grad-a) 0%, var(--hero-grad-d) 100%);
}
.hero{ background-image: var(--hero-gradient) !important; background-color: transparent !important; }
.hero .hero-bg, .hero .hero-bg--placeholder, .hero .hero-bg--full{ background: transparent !important; }
.hero .hero-content, .hero .hero-inner, .hero .content-wrap, .hero .hero-panel, .hero .hero-card,
.hero [class*="overlay"], .hero [class*="gradient"], .hero [style*="gradient"],
.hero .glass, .hero .glassy, .hero .backdrop{
  background: transparent !important; background-image:none !important; backdrop-filter:none !important; box-shadow:none !important; border-color:transparent !important;
}
/* 暗场略轻，避免整体偏暗 */
.hero .hero-darkfade{ opacity:.35 !important; transition: opacity 1.4s ease-in-out; }
/* 背景图填充 */
.hero .hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; display:block; }
/* 占位与清晰图过渡 */
.hero .hero-bg--placeholder{ filter:blur(36px); opacity:1; transform:scale(1.045); transition: opacity 1.2s ease-in-out, filter 1.2s ease-in-out, transform 1.2s ease-in-out; }
.hero .hero-bg--full{ opacity:0; transform:scale(1.03); transition: opacity 1.6s ease-in-out, transform 1.8s ease-in-out; }
.hero.hero-loaded .hero-bg--placeholder{ opacity:0; filter:blur(0); }
.hero.hero-loaded .hero-bg--full{ opacity:1; transform:scale(1.0); }



/* === Hero 高度 - 再小四分之一 === */
:root{
  --hero-h-d: 54vh;   /* 桌面约 3/4 */
  --hero-h-m: 44vh;   /* 移动更紧凑 */
}
.hero{ min-height: var(--hero-h-d) !important; }
@media (max-width: 768px){
  .hero{ min-height: var(--hero-h-m) !important; }
}



/* === 菜单按钮：绿色底 + 白色图标（hover & 展开）=== */
.hamburger{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hamburger:hover{
  background-color:#22c55e !important;
  border-color:#22c55e !important;
  box-shadow:none !important;
}
.hamburger:hover img,
.hamburger:hover svg{
  filter: brightness(0) invert(1) !important;
  color:#fff !important; fill:#fff !important; stroke:#fff !important;
}
.hamburger[aria-expanded="true"]{
  background-color:#22c55e !important;
  border-color:#22c55e !important;
  box-shadow:none !important;
}
.hamburger[aria-expanded="true"] img,
.hamburger[aria-expanded="true"] svg{
  filter: brightness(0) invert(1) !important;
  color:#fff !important; fill:#fff !important; stroke:#fff !important;
}
.hamburger img.icon-menu{ display:inline-block; }
.hamburger img.icon-close{ display:none; }
.hamburger[aria-expanded="true"] img.icon-menu{ display:none !important; }
.hamburger[aria-expanded="true"] img.icon-close{ display:inline-block !important; }



/* =====================================================================
   HERO 高度修正（更小 + 覆盖通用.section留白）
   说明：有的主题会给 .section 统一较大的 padding，这里单独为 .hero 降低。
   ===================================================================== */
:root{
  --hero-h-d: 46vh;  /* 桌面更小（原来约72vh的 ~64%） */
  --hero-h-m: 38vh;  /* 移动更小 */
  --hero-pt-d: 32px; /* 桌面上下内边距更小 */
  --hero-pb-d: 32px;
  --hero-pt-m: 22px; /* 移动上下内边距更小 */
  --hero-pb-m: 22px;
}

/* 仅 Hero 使用更小的高度与内边距 */
.hero{
  min-height: var(--hero-h-d) !important;
  padding-top: var(--hero-pt-d) !important;
  padding-bottom: var(--hero-pb-d) !important;
}
@media (max-width: 768px){
  .hero{
    min-height: var(--hero-h-m) !important;
    padding-top: var(--hero-pt-m) !important;
    padding-bottom: var(--hero-pb-m) !important;
  }
}

/* 若 .hero 同时带有 .section 等类，确保更小的留白生效 */
.hero.section, section.hero, .section-hero, [data-section="hero"], [id*="hero"].section{
  padding-top: var(--hero-pt-d) !important;
  padding-bottom: var(--hero-pb-d) !important;
}
@media (max-width: 768px){
  .hero.section, section.hero, .section-hero, [data-section="hero"], [id*="hero"].section{
    padding-top: var(--hero-pt-m) !important;
    padding-bottom: var(--hero-pb-m) !important;
  }
}

/* 背景图保持铺满 */
.hero .hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  z-index:0; display:block;
}



/* =====================================================================
   HERO 文字上下留空一致 & 中置对齐修正
   - 让内容整体垂直居中（上下留白尽量对称）
   - 控制内容块自身的内边距（桌面/移动可调）
   - 抹平首末元素的多余外边距，避免底部看起来更宽
   ===================================================================== */
:root{
  --hero-content-py-d: 28px;  /* 桌面内容块上下内边距 */
  --hero-content-py-m: 20px;  /* 移动内容块上下内边距 */
  --hero-gap-d: 12px;         /* 桌面内元素间距 */
  --hero-gap-m: 10px;         /* 移动内元素间距 */
}

/* 让 hero 内容垂直居中（背景图/遮罩是 absolute，不参与布局） */
.hero{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* 常见内容容器名：兼容多种结构命名 */
.hero .hero-content,
.hero .hero-inner,
.hero .content,
.hero .content-wrap,
.hero > .container{
  padding-top: var(--hero-content-py-d) !important;
  padding-bottom: var(--hero-content-py-d) !important;
}
@media (max-width: 768px){
  .hero .hero-content,
  .hero .hero-inner,
  .hero .content,
  .hero .content-wrap,
  .hero > .container{
    padding-top: var(--hero-content-py-m) !important;
    padding-bottom: var(--hero-content-py-m) !important;
  }
}

/* 抹平首尾的外边距，避免顶部贴边、底部空太大 */
.hero .hero-content > :first-child,
.hero .hero-inner  > :first-child,
.hero .content      > :first-child,
.hero .content-wrap > :first-child,
.hero > .container  > :first-child{
  margin-top: 0 !important;
}
.hero .hero-content > :last-child,
.hero .hero-inner  > :last-child,
.hero .content      > :last-child,
.hero .content-wrap > :last-child,
.hero > .container  > :last-child{
  margin-bottom: 0 !important;
}

/* 统一内元素间距（避免某个段落或列表的下边距过大） */
.hero .hero-content > *,
.hero .hero-inner  > *,
.hero .content      > *,
.hero .content-wrap > *,
.hero > .container  > *{
  margin-top: var(--hero-gap-d) !important;
  margin-bottom: var(--hero-gap-d) !important;
}
@media (max-width: 768px){
  .hero .hero-content > *,
  .hero .hero-inner  > *,
  .hero .content      > *,
  .hero .content-wrap > *,
  .hero > .container  > *{
    margin-top: var(--hero-gap-m) !important;
    margin-bottom: var(--hero-gap-m) !important;
  }
}

/* 减小“认证/徽章”区域的外边距（泛化选择器，命中 cert/badge/list） */
.hero [class*="cert"]{ margin-top: 6px !important; margin-bottom: 6px !important; }
.hero [class*="badge"]{ margin-top: 6px !important; margin-bottom: 6px !important; }
.hero [class*="list"] .item,
.hero [class*="list"] li{ margin-top: 6px !important; margin-bottom: 6px !important; }



/* =====================================================================
   减小 Hero 与下一栏（“为什么选择 JUZZI”等）之间的留空
   - 缩小紧邻 .hero 的下一栏的顶部 padding
   - 清除其第一个标题/段落的额外上外边距
   ===================================================================== */
:root{
  --after-hero-pt-d: 24px; /* 桌面：Hero 下方到下一栏的顶部留白 */
  --after-hero-pt-m: 16px; /* 移动：更紧凑 */
}

/* Hero 本身不再额外留出底部间距 */
.hero{ margin-bottom: 0 !important; }

/* 紧随 Hero 的第一栏：通常就是“为什么选择 JUZZI” */
.hero + section,
.hero + .section,
.hero + [class*="section-"],
.hero + [data-section]{
  padding-top: var(--after-hero-pt-d) !important;
}
@media (max-width:768px){
  .hero + section,
  .hero + .section,
  .hero + [class*="section-"],
  .hero + [data-section]{
    padding-top: var(--after-hero-pt-m) !important;
  }
}

/* 去掉该栏第一个块级元素的多余上外边距（常见是 H2/H3 或段落） */
.hero + section > *:first-child,
.hero + .section > *:first-child,
.hero + [class*="section-"] > *:first-child,
.hero + [data-section] > *:first-child{
  margin-top: 0 !important;
}

/* 如果标题本身还有内部包裹，继续抹平第一层包裹的上外边距 */
.hero + section > *:first-child > *:first-child,
.hero + .section > *:first-child > *:first-child,
.hero + [class*="section-"] > *:first-child > *:first-child,
.hero + [data-section] > *:first-child > *:first-child{
  margin-top: 0 !important;
}
/* =====================================================================
   “为什么选择 JUZZI” 上下留白一致（针对紧随 .hero 的第一栏）
   - 该栏 padding-top 与 padding-bottom 相同
   - 首元素去掉上外边距，末元素去掉下外边距，确保视觉对称
   ===================================================================== */
:root{
  --why-py-d: 48px;  /* 桌面内边距（可改：40/56 等） */
  --why-py-m: 28px;  /* 移动内边距 */
}

/* 第一栏（通常是“为什么选择 JUZZI”） */
.hero + section,
.hero + .section,
.hero + [class*="section-"],
.hero + [data-section]{
  padding-top: var(--why-py-d) !important;
  padding-bottom: var(--why-py-d) !important;
}
@media (max-width:768px){
  .hero + section,
  .hero + .section,
  .hero + [class*="section-"],
  .hero + [data-section]{
    padding-top: var(--why-py-m) !important;
    padding-bottom: var(--why-py-m) !important;
  }
}

/* 若内部有容器包裹，也做对称 */
.hero + section > .container,
.hero + .section > .container,
.hero + [class*="section-"] > .container,
.hero + [data-section] > .container{
  padding-top: var(--why-py-d) !important;
  padding-bottom: var(--why-py-d) !important;
}
@media (max-width:768px){
  .hero + section > .container,
  .hero + .section > .container,
  .hero + [class*="section-"] > .container,
  .hero + [data-section] > .container{
    padding-top: var(--why-py-m) !important;
    padding-bottom: var(--why-py-m) !important;
  }
}

/* 抹平首/末子元素的额外外边距，避免视觉偏差 */
.hero + section > *:first-child,
.hero + .section > *:first-child,
.hero + [class*="section-"] > *:first-child,
.hero + [data-section] > *:first-child,
.hero + section > .container > *:first-child,
.hero + .section > .container > *:first-child,
.hero + [class*="section-"] > .container > *:first-child,
.hero + [data-section] > .container > *:first-child{ margin-top:0 !important; }

.hero + section > *:last-child,
.hero + .section > *:last-child,
.hero + [class*="section-"] > *:last-child,
.hero + [data-section] > *:last-child,
.hero + section > .container > *:last-child,
.hero + .section > .container > *:last-child,
.hero + [class*="section-"] > .container > *:last-child,
.hero + [data-section] > .container > *:last-child{ margin-bottom:0 !important; }