.container-fluid{max-width:100%} @media (min-width:1920px){.container-fluid{max-width:100%}} /* content.css 给 #content 加了 5.99vw 的底部留白，让 footer 与上一模块之间多出一道空白 */ #content{padding-bottom:0} /* banner：归档快照里 slide 带着 splide 算出的内联 width，会把通栏宽度焊死成 1745， 1440 下溢出、2560 下右侧留白。splide 的 JS 已不加载，这里强制回到流式宽度。 */ .bannerBox .splide__list,.bannerBox .splide__slide{width:100%!important;max-width:100%!important} /* 首页 banner 淡入切换（当前 3 张；加图只需在源 splide__list 里再加一个 slide 的 li， 并在上面的 BANNER_SLIDES 里补一条文案，圆点由 JS 按 slide 数自动生成）。 各 slide 用 grid 同格堆叠，高度由图片自身撑开（避免绝对定位塌陷）， 靠 .is-active 切换 opacity 实现交叉淡化；单图时 JS 不渲染圆点、不轮播。 圆点 .ns-banner-nav 由 JS append 到 .bannerBox，靠其 position:relative 定位。 */ html.js .bannerBox .splide__track{position:relative} html.js .bannerBox .splide__list{display:grid;grid-template-columns:1fr} html.js .bannerBox .splide__slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s;z-index:1} html.js .bannerBox .splide__slide.is-active{opacity:1;visibility:visible;z-index:2} /* 隐藏 epotw 遗留分页/箭头，改用自建底部圆点 */ .bannerBox .splide__pagination{display:none!important} .ns-banner-nav{position:absolute;left:50%;bottom:clamp(14px,1.6vw,22px);transform:translateX(-50%);display:flex;gap:10px;z-index:6} .ns-banner-nav button{width:24px;height:24px;padding:6px;border:0;border-radius:50%;background:rgba(255,255,255,.55);background-clip:content-box;cursor:pointer;transition:background .3s,transform .3s} .ns-banner-nav button.is-active{background:#b3cd4d;background-clip:content-box;transform:scale(1.15)} .ns-banner-nav button:focus-visible{outline:2px solid #b3cd4d;outline-offset:3px} @media (prefers-reduced-motion:reduce){html.js .bannerBox .splide__slide{transition:opacity .01ms}} .NaisiBox .menuBox .menu_wrap ul li{width:16.6667%;padding:0 15px} .NaisiBox .menuBox .menu_wrap ul li+li{border-left:2px solid #ecece6} /* Product Range —— 移植 epotw section2 .ThrRow 的版式： 左 4 栏文案（副标题 + 说明 + 更多按钮），右 6 栏横向滚动产品条。 数值全部取自 .NaisiBox .section2 .ThrRow，未自行发明。 选择器必须带 .section1 .ThrRow.prodRow：content.css 里已存在 .section1 .ThrRow 的居中标题规则（原站该位置是特性列表）， 只有更高权重 + 后加载才能压过它，同时不误伤 section3 的 ThrRow。 */ /* 顶部间距：产品区的 SecRow 已移除，产品条现在是 FristRow 后的第一个内容行， 不补的话卡片会直接贴住通栏图片的下边缘。6.25vw 取自 .NaisiBox .section1 .SecRow 自身的 padding-top，即被删掉那一行原本贡献的留白。 */ .NaisiBox .section1 .ThrRow.prodRow{padding:6.25vw 3.385vw 2.604vw} .NaisiBox .section1 .ThrRow.prodRow .title_wrap.txt_wrap .item{padding-left:0;padding-right:2.604vw} .NaisiBox .section1 .ThrRow.prodRow .title_wrap .item .subTitle{margin:1.302vw 0 2.083vw;text-align:left} .NaisiBox .section1 .ThrRow.prodRow .title_wrap .item .txt{margin-bottom:4.427vw} .NaisiBox .section1 .ThrRow.prodRow .title_wrap .item .more, .NaisiBox .section5 .SecRow .title_wrap .item .more{align-items:center;color:#b3cd4d;display:flex;font-size:clamp(15px,.9375vw,18px);position:relative} .NaisiBox .section1 .ThrRow.prodRow .title_wrap .item .more a, .NaisiBox .section5 .SecRow .title_wrap .item .more a{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0} .NaisiBox .section1 .ThrRow.prodRow .title_wrap .item .more .moreTxt, .NaisiBox .section5 .SecRow .title_wrap .item .more .moreTxt{margin-right:15px} /* content.css 只给 section1/2/3/4 写了 .SecRow 的 padding，没有 section5 的规则， 于是 section5 的文案行 padding 为 0，直接贴在通栏图片下边缘，而 section3 是 6.25vw 3.125vw 1.5625vw。这里补上与 section3 相同的数值。 */ .NaisiBox .section5 .SecRow{padding:6.25vw 3.125vw 1.5625vw} /* content.css 同样没有 .section5 .ThrRow 规则，证书网格下沿内边距为 0， 直接顶到 ContactBox 上。这里对齐 section4 .SecRow 的 8.333vw 收尾值。 */ .NaisiBox .section5 .ThrRow{padding:0 0 8.333vw} .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item{align-items:stretch;display:flex;margin-left:2.604vw;overflow-x:auto;padding-bottom:.6vw;padding-top:0} .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item::-webkit-scrollbar{background-color:#d3d3d3;height:5px} .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item::-webkit-scrollbar-thumb{background-color:#009b9f;height:5px} .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item .img_item{display:block;flex:0 0 auto;margin-right:1.823vw;padding-bottom:1.302vw;text-decoration:none} /* border-radius:0 —— content.css 里 .section1 .ThrRow .img_wrap .item .img 带 border-top-left-radius:5.208vw（原站该位置是单张大图）。产品条搬到 section1 后被这条规则 命中，每张卡左上角被切了个 100px 圆角。原站 .section2 .ThrRow 的卡片图是无圆角的，这里压掉。 */ .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item .img_item .img{border-radius:0;min-width:19.271vw;overflow:hidden;width:19.271vw} /* 原站卡片图是 370x260(1.423:1)；NAISI 封面是 1:1，用 cover 裁回原站节奏 */ .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item .img_item .img img{aspect-ratio:370/260;display:block;object-fit:cover;width:100%;transition:transform .45s ease} .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item .img_item:hover .img img{transform:scale(1.04)} .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item .img_item .txt{color:#666;font-size:clamp(15px,.9375vw,18px);line-height:1;padding:.78125vw 0;text-align:center;transition:color .3s} .NaisiBox .section1 .ThrRow.prodRow .title_wrap .item .txt.product-range-links{display:flex;flex-direction:column;gap:12px;line-height:1.25} .NaisiBox .section1 .ThrRow.prodRow .title_wrap .item .txt.product-range-links a{align-items:center;color:inherit;display:flex;gap:12px;text-decoration:none;white-space:nowrap} .NaisiBox .section1 .ThrRow.prodRow .title_wrap .item .txt.product-range-links a:hover{text-decoration:underline} .NaisiBox .section1 .ThrRow.prodRow .product-range-icon{align-items:center;border:1px solid currentColor;border-radius:50%;display:inline-flex;font-family:Urbanist,Arial,sans-serif;font-size:11px;font-weight:700;height:24px;justify-content:center;letter-spacing:.04em;line-height:1;min-width:24px;width:24px} @media (prefers-reduced-motion:no-preference){.NaisiBox .section1 .ThrRow.prodRow .img_wrap .item{scroll-behavior:smooth}} .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item .img_item:hover .txt{color:#009b9f} .NaisiBox .section3 .ThrRow .img_wrap .item{display:block;width:100%;min-width:0;max-width:100%} .partnerMarquee{overflow:hidden;width:100%;max-width:100%;padding:1.2vw 0} .partnerMarqueeTrack{display:flex;align-items:stretch;gap:0;width:max-content;animation:pmScroll 46s linear infinite;will-change:transform}.partnerMarqueeGroup{display:flex;align-items:center;gap:2.2vw;padding-right:2.2vw;flex:0 0 auto}.partnerMarqueeGroup picture{display:block;flex:0 0 auto} .partnerMarqueeTrack img{height:12vw;min-height:150px;width:auto;object-fit:contain;background:#fff;padding:1.1vw;border-radius:4px} @keyframes pmScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} @media (prefers-reduced-motion:reduce){.partnerMarqueeTrack{animation:none}} .certGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2vw} .certGrid img{width:100%;aspect-ratio:1/1.25;object-fit:contain;background:#fff;border:1px solid #e4e4e4;padding:12px} .awardPair{display:grid;grid-template-columns:1fr 1fr;gap:1.5vw} .awardPair .img{aspect-ratio:3/4} .awardPair .img img{width:100%;height:100%;object-fit:cover;display:block} /* FristRow 栏目（1-5）背景统一为 cover-poster 浅蓝灰色调，标题/编号/导语统一深色。 加轻微白色 text-shadow 提升在渐变背景上的可读性。 */ .NaisiBox .section1 .FristRow .img_wrap .item .img .txt_item, .NaisiBox .section2 .FristRow .img_wrap .item .img .txt_item, .NaisiBox .section3 .FristRow .img_wrap .item .img .txt_item, .NaisiBox .section4 .FristRow .img_wrap .item .img .txt_item, .NaisiBox .section5 .FristRow .img_wrap .item .img .txt_item{position:relative;z-index:1} .NaisiBox .section1 .FristRow .img_wrap .item .img .txt_item .num, .NaisiBox .section2 .FristRow .img_wrap .item .img .txt_item .num, .NaisiBox .section3 .FristRow .img_wrap .item .img .txt_item .num, .NaisiBox .section4 .FristRow .img_wrap .item .img .txt_item .num, .NaisiBox .section5 .FristRow .img_wrap .item .img .txt_item .num, .NaisiBox .section1 .FristRow .img_wrap .item .img .txt_item .title, .NaisiBox .section2 .FristRow .img_wrap .item .img .txt_item .title, .NaisiBox .section3 .FristRow .img_wrap .item .img .txt_item .title, .NaisiBox .section4 .FristRow .img_wrap .item .img .txt_item .title, .NaisiBox .section5 .FristRow .img_wrap .item .img .txt_item .title{color:#0d2c2c;text-shadow:0 1px 2px rgba(255,255,255,0.55)} .NaisiBox .section1 .FristRow .img_wrap .item .img .txt_item .txt, .NaisiBox .section2 .FristRow .img_wrap .item .img .txt_item .txt, .NaisiBox .section3 .FristRow .img_wrap .item .img .txt_item .txt, .NaisiBox .section4 .FristRow .img_wrap .item .img .txt_item .txt, .NaisiBox .section5 .FristRow .img_wrap .item .img .txt_item .txt{color:#3d5a66;opacity:1;text-shadow:0 1px 2px rgba(255,255,255,0.45)} /* section5 "Quality & Certifications" 比其他栏目标题长约一倍，原 50% 标题区 在 1440-1920 下会换两行，导致栏头高度明显高于其它模块。把标题区放宽到 60%， 在保留原字号的前提下可稳定单行。 */ .NaisiBox .section5 .FristRow .img_wrap .item .img .txt_item{width:60%} /* ContactBox 复用 certifications 背景，标题/导语也统一深色 */ .ContactBox .img_wrap .title_wrap .item .title{color:#0d2c2c;text-shadow:0 1px 2px rgba(255,255,255,0.55)} .ContactBox .img_wrap .txt_wrap .item .txt_item .txt{color:#3d5a66;font-size:clamp(15px,.9375vw,18px);line-height:1.7;opacity:1;text-align:left;text-shadow:0 1px 2px rgba(255,255,255,0.45)} /* 首页底部 CTA「Get in Touch」：原浅绿文字压在浅色认证背景上仅 1.79:1，几乎读不出， 也不够醒目。改为实心青柠按钮 + 深色字（贴合品牌 CTA 配色，对比度提至 AA 级以上）， 加 hover 浮起 + 箭头右移，视觉重量明显加重。 */ .ContactBox .txt_wrap .item .more{justify-content:flex-start;margin-top:clamp(18px,1.6vw,26px)} .ContactBox .txt_wrap .item .more a{ display:inline-flex;align-items:center;gap:.6rem; background:#b3cd4d;color:#0d2c2c; font-family:Urbanist-SemiBold,Arial,sans-serif;font-weight:700; font-size:clamp(16px,1.05vw,19px);line-height:1;text-decoration:none; padding:15px 34px;border-radius:4px;border:2px solid #b3cd4d; box-shadow:0 6px 18px rgba(13,44,44,.12); transition:transform .25s,box-shadow .25s,background .25s,border-color .25s; } .ContactBox .txt_wrap .item .more a:hover{ background:#97b13f;border-color:#97b13f; transform:translateY(-2px);box-shadow:0 10px 26px rgba(13,44,44,.18); } .ContactBox .txt_wrap .item .more a .moreTxt{margin-right:0} .ContactBox .txt_wrap .item .more a .icon{display:inline-flex;transition:transform .25s} .ContactBox .txt_wrap .item .more a:hover .icon{transform:translateX(5px)} @media (max-width:575px){ .ContactBox .txt_wrap .item .more a{width:100%;justify-content:center} } /* section2 SecRow 默认把 .subTitle 与 .txt 并排 flex，新副标题是一句长文案， 必须改为上下堆叠；同时取消大写，保留用户给的 sentence case。 */ .NaisiBox .section2 .SecRow .title_wrap .item{display:block} .NaisiBox .section2 .SecRow .title_wrap .item .subTitle{text-transform:none} /* Our Strengths —— 采用 epotw "Characteristics of TPU" 的编号列表版式： 左图 + 右栏 01/02/03/04 条目（圆圈编号 + GTxt 标题 + txt 说明）。 原规则只作用于 .section1 .ThrRow，这里复制到 .section2 .ThrRow.strengthsRow。 */ .NaisiBox .section2 .ThrRow.strengthsRow .title_wrap .item .subTitle{color:#009b9f;margin-bottom:2.34375vw;text-align:center} .NaisiBox .section2 .ThrRow.strengthsRow .InsUlBox{padding-top:2.604vw} .NaisiBox .section2 .ThrRow.strengthsRow .InsUlBox .img_wrap .item .img{border-top-left-radius:6.25vw;overflow:hidden} .NaisiBox .section2 .ThrRow.strengthsRow .InsUlBox .img_wrap .item .img img{display:block;width:100%;height:auto} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item{padding-left:3.385vw} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item .ul_item{align-items:stretch;display:flex;margin-bottom:1.302vw} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item .ul_item .num{align-items:center;background-color:#fff;border:1px solid #b3cd4d;border-radius:50%;color:#b3cd4d;display:flex;font-family:Urbanist-Bold;font-size:clamp(18px,1.458vw,28px);height:3.333vw;justify-content:center;line-height:1;margin-bottom:1.302vw;min-height:3.333vw;min-width:3.333vw;position:relative;width:3.333vw} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item .ul_item .num:before{background-color:#e1e1e1;content:"";height:5.208vw;left:50%;position:absolute;top:calc(100% + 1.042vw);transform:translateX(-50%);width:2px} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item .ul_item .txt_item{padding-left:1.5625vw} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item .ul_item .txt_item .GTxt{margin-bottom:0;padding:.521vw 0 1.5625vw} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item .ul_item .txt_item .txt{position:relative} /* 抵消 content.css 里 .section2 .ThrRow .title_wrap .item .txt 的 4.427vw margin-bottom， 避免 Strengths 每个条目的说明文字被撑得过高 */ .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item .ul_item .txt_item .txt{margin-bottom:0} /* 去掉最后一个编号下方的悬垂连线 */ .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item .ul_item:last-child .num:before{display:none} /* 统一各 section 文案区副标题颜色，避免 content.css 里 section1/2/3/4/5 的 .subTitle 出现 #009b9f / #007a7d 不一致的情况 */ .NaisiBox .section1 .ThrRow.prodRow .title_wrap .item .subTitle, .NaisiBox .section2 .SecRow .title_wrap .item .subTitle, .NaisiBox .section2 .ThrRow .title_wrap .item .subTitle, .NaisiBox .section3 .SecRow .title_wrap .item .subTitle, .NaisiBox .section3 .ThrRow .title_wrap .item .subTitle, .NaisiBox .section4 .SecRow .title_wrap .item .subTitle, .NaisiBox .section4 .ThrRow .title_wrap .item .subTitle, .NaisiBox .section5 .SecRow .title_wrap .item .subTitle{color:#007a7d} .NaisiBox .menuBox .menu_wrap ul li .item .num{color:#667a20} .NaisiBox .menuBox .menu_wrap ul li .item .txt{color:#007a7d} .NaisiBox .section1 .ThrRow.prodRow .title_wrap .item .more,.NaisiBox .section5 .SecRow .title_wrap .item .more{color:#007a7d} #nsTop .nav a:hover,#nsTop .nav a.active{color:var(--primary-dark)} @media (max-width:991px){ .NaisiBox .section1 .ThrRow.prodRow{padding:30px 0} .NaisiBox .section1 .ThrRow.prodRow .title_wrap{margin-bottom:20px} .NaisiBox .section1 .ThrRow.prodRow .title_wrap.txt_wrap .item{padding-right:0} .NaisiBox .section1 .ThrRow.prodRow .title_wrap .item .txt{margin-bottom:20px} .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item{margin-left:0} .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item .img_item .img{min-width:210px;width:210px} .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item .img_item .txt{font-size:15px;padding:10px 0} .certGrid{grid-template-columns:repeat(3,1fr)} .NaisiBox .menuBox .menu_wrap ul li{width:50%} .NaisiBox .menuBox .menu_wrap ul li+li{border-left:none} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap{order:2} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item{padding-left:0} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item .ul_item{margin-bottom:20px} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item .ul_item .num{height:35px;margin-bottom:15px;min-width:35px;width:35px} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item .ul_item .num:before{top:calc(100% + 15px)} .NaisiBox .section2 .ThrRow.strengthsRow .txt_wrap .item .ul_item .txt_item .txt{margin-bottom:0} /* 移动端 content.css 把 FristRow 标题区改回 100%，section5 的 60% 覆写不应残留。 */ .NaisiBox .section5 .FristRow .img_wrap .item .img .txt_item{width:100%} /* 移动端 content.css 把 section3 .SecRow 的左右内边距清零，section5 跟随。 */ .NaisiBox .section5 .SecRow{padding:6.25vw 0 1.5625vw} /* 移动端垂直节奏统一：行与行之间 30px，section 之间 30px + section 自身的 padding-top。 content.css 在 ≤991px 下把 section2 的 ThrRow、section3/5 的 ThrRow 的 padding-top 清成 0， Our Strengths 标题和证书网格会直接贴在上一行的图片下沿。 */ .NaisiBox .section2 .ThrRow.strengthsRow{padding-bottom:30px;padding-top:40px} .NaisiBox .section3 .ThrRow{padding:30px 0} .NaisiBox .section5 .ThrRow{padding-top:30px} .NaisiBox .section3 .SecRow{padding:30px 0 0} .NaisiBox .section4 .SecRow, .NaisiBox .section5 .SecRow{padding-top:30px} } /* 顶部导航 hover 用主色。content.css 原生给的是强调色 #b3cd4d（柠檬绿），与全站主色 #009b9f 不统一，用户要求改用 --primary。这里用与 content.css 完全相同权重的选择器后置覆盖， 同时把 .sub-arrow 与二级菜单的 hover 色一并改掉，避免同一个 hover 里出现两种颜色。 */ .menu_wrap #smartMenusBt4 #main-menu>li>a.highlighted, .menu_wrap #smartMenusBt4 #main-menu>li>a:hover{color:#009b9f} .menu_wrap #smartMenusBt4 #main-menu>li>a.highlighted .sub-arrow, .menu_wrap #smartMenusBt4 #main-menu>li>a:hover .sub-arrow{border-color:#009b9f} .menu_wrap #smartMenusBt4 #main-menu li ul li a.highlighted, .menu_wrap #smartMenusBt4 #main-menu li ul li a:hover{background:#e8f5f5;color:#009b9f} /* 移动端抽屉内的菜单项被 frontend.css 的 .sm-clean a 抢走字族，渲染成 Lucida Sans Unicode， 与桌面端的 Urbanist-SemiBold 不一致。这里在 ≤991px 下还原。 */ @media(max-width:991px){ #header .menu_wrap #smartMenusBt4 #main-menu>li>a{font-family:Urbanist-SemiBold,Arial,Microsoft JhengHei,Helvetica,sans-serif} } /* 内页 footer 样式移植到首页；把第一栏 h4 替换为透明底 logo-footer.png */ .footer{background:#f8f9fa;color:#333;padding:60px 0 0} /* footer 内容列与 header / 正文统一。原先 max-width:1320px 会让 1920 下 footer 比正文窄 488px、左偏 244px，整站左右边界对不齐。 */ /* max-width:none 是必须的：epotw 的 content.css 给 .container 加了 Bootstrap 的 max-width:1140px，不覆盖的话首页 footer 会缩到 1140，与内页（通栏 + 56px）不一致。 首页正文是 Bootstrap 栅格（col-lg-10 是 1600 宽、col-lg-8 是 1280 宽）， 本来就没有单一内容列，所以 footer 直接对齐内页与 header 的通栏边界。 */ .footer .container{width:100%;max-width:none;margin:0 auto;padding-inline:clamp(20px,4vw,64px)} @media(min-width:1440px){.footer .container{padding-inline:56px}} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px} .footer h4{color:#0d2c2c;font-family:'Urbanist',Arial,sans-serif;font-size:clamp(16px,1.146vw,22px);font-weight:700;margin:0 0 16px} .footer a{color:#6b7280;display:block;margin-bottom:8px;text-decoration:none;transition:color .3s} .footer a:hover{color:#009b9f} .footer p{color:#6b7280;line-height:1.6} .footer-logo{display:block;height:auto;margin-bottom:16px;max-width:160px;width:auto} /* footer 社交图标。.footer a 是 display:block（链接竖排），这里要横排。 图标色用 #007a7d：主色 #009b9f 在浅灰底上只有 3.39:1，图标阈值 3:1 勉强过线。 */ .footer-social{display:flex;gap:10px;margin-top:18px} .footer-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:0;border:1px solid #e5e7eb;border-radius:50%;background:#fff;color:#007a7d;transition:background .3s,color .3s,border-color .3s} .footer-social a:hover{background:#007a7d;color:#fff;border-color:#007a7d} .footer-social svg{width:18px;height:18px} /* 版权条通栏：.container 的左右内边距对居中的版权文字没意义，显式清零 */ .footer .container.footer-bottom{margin:40px 0 0;padding:16px 0} .footer-bottom{background:#007a7d;color:#fff;font-size:.85rem;margin-top:40px;padding:16px 0;text-align:center} .footer-bottom a{color:#fff} @media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.footer-grid{grid-template-columns:1fr}} /* 移动端 header 修复：content.css 在 ≤767px 下把 #smartMenusBt4 设为 fixed 顶部， 但背景透明，导致 logo 与汉堡按钮直接浮在 banner/内容上方，滚动时很怪异。 给导航条加白底与阴影，并把 navbar-header 也设为白色，保持和内页/桌面端一致。 同时 banner 标题原来是垂直居中，会被 70px 固定导航条遮挡上半，整体下移。 */ @media(max-width:767px){ #header .menu_wrap #smartMenusBt4{background-color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08)} #header .menu_wrap #smartMenusBt4 .navbar-header{background-color:#fff} #header .menu_wrap #smartMenusBt4 .navbar-header a img{display:block!important;max-height:55px;padding:10px 0} #header .menu_wrap #smartMenusBt4 .navbar-header #openBtn .icon-bar{background-color:#009b9f} .insBannerBox{padding-top:70px} /* footer 链接行高 24px，移动端点击区域偏小，上下各补 6px */ .footer a{padding:6px 0} /* 移动端合作伙伴跑马灯 logo 最小高度 150px 过大，缩到 70px */ .partnerMarqueeTrack img{height:70px;min-height:70px;padding:.6vw} } @media (prefers-reduced-motion: no-preference){ html.js [data-reveal]{ opacity:0; transform:translateY(20px); } html.js [data-reveal].is-visible{ opacity:1; transform:none; transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); } /* Hero 首屏入场：标题 / 副文案 / CTA 依次浮现 */ html.js #banner .BannerTxtBox .item > *{ opacity:0; animation:nsFadeUp .6s cubic-bezier(.22,.61,.36,1) both; } html.js #banner .BannerTxtBox .item > *:nth-child(1){animation-delay:.12s} html.js #banner .BannerTxtBox .item > *:nth-child(2){animation-delay:.26s} html.js #banner .BannerTxtBox .item > *:nth-child(3){animation-delay:.40s} @keyframes nsFadeUp{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} } /* 按钮箭头微交互：More / CTA 文字滑动 */ html.js .NaisiBox .more .moreTxt{ transition:transform .3s ease, color .3s ease; } html.js .NaisiBox .more:hover .moreTxt{ transform:translateX(6px); } /* 产品卡悬浮增强：在原有 scale 基础上加阴影 / 边框浮起 */ html.js .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item .img_item{ border:1px solid #eef1f1; border-radius:4px; transition:transform .45s ease, box-shadow .35s ease, border-color .35s ease; } html.js .NaisiBox .section1 .ThrRow.prodRow .img_wrap .item .img_item:hover{ box-shadow:0 14px 34px rgba(0,155,159,.16); border-color:#009b9f; } } #nsTop{--primary:#009b9f;--primary-dark:#007a7d;--accent:#b3cd4d;--dark:#0d2c2c;--border:#e8f5f5} #nsTop :where(a,button,[tabindex]):focus-visible{outline:3px solid var(--primary-dark);outline-offset:3px} body.nav-open{overflow:hidden} #nsTop .header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--border)} #nsTop .header-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:100%;margin:0 auto;height:92px;gap:16px;padding-inline:clamp(20px,4vw,64px)} @media(min-width:1440px){#nsTop .header-inner{padding-inline:56px}} #nsTop .logo{height:92px;flex-shrink:0;width:auto;object-fit:contain} #nsTop .BannerTxtBox .item .txt{font-size:clamp(18px,1.25vw,24px);font-family:Urbanist,Arial,sans-serif;font-weight:600;color:#b3cd4d} #nsTop #banner .BannerTxtBox .item .txt.ns-green-media{font-size:clamp(22px,1.65vw,32px);font-family:Urbanist,Arial,sans-serif;font-weight:600;color:#fff!important} #nsTop .nav{display:flex;align-items:center;justify-content:center;flex:1;gap:4px} #nsTop .header-search{color:var(--primary);display:flex;align-items:center;justify-content:center;text-decoration:none;flex-shrink:0;margin-left:4px;background:transparent;border:0;padding:0;cursor:pointer} #nsTop .header-search:hover{color:var(--accent)} #nsTop .nav a{font-family:'Urbanist',Arial,sans-serif;font-weight:600;font-size:clamp(15px,.9375vw,18px);color:#666;text-transform:uppercase;letter-spacing:normal;position:relative;padding:.78125vw 1.042vw;transition:all .3s;line-height:17px} #nsTop .nav a:hover,#nsTop .nav a.active{color:var(--primary-dark)} #nsTop .mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px} #nsTop .mobile-toggle span{display:block;width:24px;height:2px;background:var(--dark);margin:5px 0;transition:.25s} #nsTop .nav-backdrop{display:none} @media(max-width:860px){ #nsTop .header{box-shadow:0 2px 10px rgba(0,0,0,.08)} #nsTop .header-inner{height:100px} #nsTop .logo{height:80px} #nsTop .header-search{display:none} #nsTop .mobile-toggle{display:block;z-index:1002} #nsTop .mobile-toggle span{background:var(--primary)} #nsTop .mobile-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} #nsTop .mobile-toggle.is-open span:nth-child(2){opacity:0} #nsTop .mobile-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} #nsTop .nav{position:fixed;top:0;right:0;bottom:0;left:auto;display:flex;flex-direction:column;align-items:stretch;width:min(100%,380px);height:100%;background:#fff;padding:90px 24px 24px;gap:0;border-bottom:none;box-shadow:-2px 0 16px rgba(0,0,0,.12);transform:translateX(100%);transition:transform .3s ease-in-out;overflow-y:auto;z-index:1001} #nsTop .nav.open{transform:translateX(0)} #nsTop .nav a{width:100%;padding:15px;font-size:18px;font-weight:700;line-height:17px;color:#333;border-bottom:1px solid var(--border);transition:all .3s} #nsTop .nav a.active{color:var(--primary-dark)} #nsTop .nav-backdrop{display:block;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .3s} #nsTop .nav-backdrop.show{opacity:1;pointer-events:auto} } /* epotw 给 banner 留了 70px 顶部内边距以避让固定导航，NAISI header 是 sticky（占文档流） 不再需要这段留白，否则 banner 上方凭空多一块。 */ .insBannerBox{padding-top:0!important} /* 批次 C：首页内联展示状态与背景图 */ #banner_block.ns-banner-ready{max-width:100%;visibility:visible} #SideFix.ns-sidefix-hidden{display:none!important} .ns-arrow-icon{display:block;width:.875em;height:1em;fill:currentColor} .ns-clipboard-icon{display:inline-block;width:.75em;height:1em;fill:currentColor;vertical-align:-.125em} .ns-home-bg-products{background-image:url('../images/cover-poster.jpg');background-image:image-set(url('../images/cover-poster.avif') type('image/avif'),url('../images/cover-poster.jpg') type('image/jpeg'))} .ns-home-bg-who{background-image:url('../images/bg-who-we-are.jpg');background-image:image-set(url('../images/bg-who-we-are.avif') type('image/avif'),url('../images/bg-who-we-are.jpg') type('image/jpeg'))} .ns-home-bg-partners{background-image:url('../images/bg-partners.jpg');background-image:image-set(url('../images/bg-partners.avif') type('image/avif'),url('../images/bg-partners.jpg') type('image/jpeg'))} .ns-home-bg-awards{background-image:url('../images/bg-awards.jpg');background-image:image-set(url('../images/bg-awards.avif') type('image/avif'),url('../images/bg-awards.jpg') type('image/jpeg'))} .ns-home-bg-certifications{background-image:url('../images/bg-certifications.jpg');background-image:image-set(url('../images/bg-certifications.avif') type('image/avif'),url('../images/bg-certifications.jpg') type('image/jpeg'))} .ns-home-contact-bg{background-image:url('../images/bg-certifications.jpg');background-image:image-set(url('../images/bg-certifications.avif') type('image/avif'),url('../images/bg-certifications.jpg') type('image/jpeg'));background-size:cover;background-position:50%} /* ========================================================================== 首页锁定样式（原 index.html 内联