@charset "utf-8";
/* ==========================================================================
   NewstarHardware —— 参考站 kanouprecision.com 的差异补丁
   1) 适配 Newstar 方形 Logo
   2) 填充参考站留空的首页产品轮播
   3) 子页（产品 / 能力 / 关于 / 新闻 / 联系）沿用同一套设计语言
   颜色全部走 --c-* / 令牌，改一行即可换品牌色（见 :root）
   ========================================================================== */

/* ---------- 1. Logo ----------
   参考站 logo 素材是 360x92 画布（墨迹 281x47，宽高比 5.98），页头按原始尺寸渲染
   -> 页头高 102px；页脚白卡片里缩到 218px 宽 -> 高 55.7px。
   Newstar 原素材是 600x359（近方形），同宽下高 2.34 倍，会把页头/页脚顶高。
   因此派生一版横向组合 logo-h.png（也是 360x92，由原素材的图形 + 字标拼成），
   这样两处尺寸都能与参考站逐像素对齐：
     .header .logo 自然宽 360 -> 页头 5+5+92 = 102px；连带 .infos 也回到 810px
     .ft-meta .logo 内宽 252-30-4 = 218 -> 高 218/3.913 = 55.7px
   所以这里不再覆盖任何 logo 宽度，全部沿用参考站 Common.css 的规则。 */

/* LangBar 右侧两枚入口按钮。
   参考站这两条定位写在页面 body 里的一段内联 <style> 中，不在 Common.css，
   漏搬的后果是 .lang2/.lang3 变成静态流内元素 -> .wrapper 被撑到 80px(2 行)、
   内容溢出到页头下方。参考站 .wrapper 此处高度为 0（子元素全部绝对定位）。 */
.langBar .lang2 { position: absolute; right: 160px; width: auto; text-align: center; }
.langBar .lang3 { position: absolute; right: 260px; width: 180px; text-align: center; }

/* Banner 标题限宽：右侧 880px 起是产品图，标题必须留在左侧，避免白色文字压到浅色产品上 */
.banner .swiper-slide .text h3 { max-width: 660px; }
.banner .swiper-slide .text h3:after { width: 92px; }
.banner .swiper-slide .text p { max-width: 660px; }

/* 技能区标题：参考站写死 height:72px，标题过长会溢出压到卡片上，这里放开高度 */
.skill-intro .tit { height: auto; min-height: 72px; }

/* ---------- 2. 首页产品轮播：参考站该区块内容为空，这里用真实产品填充 ---------- */
.product-slide .swiper-slide { padding: 0 15px; }
.product-slide .item { background: #fff; }
.product-slide .item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; }

/* ---------- 2b. 首页工艺画廊（按工艺分类的滚动展示） ----------
   需求：首页展示「我们生产过不同工艺的图片」，自动滚动 + 鼠标点击/拖拽滚动。
   结构：.product 区块内 .procTabs（工艺切换）+ .procSlider（Swiper，每屏一种工艺）。
   Swiper 一屏只放 1 个 slide，每个 slide 内部是「工艺说明 + 该工艺产品图网格」，
   这样工艺归属一目了然，不会像原来 10 张里 8 张是 CNC 那样失衡。 */
.product .box-title { text-align: center; }
.product .box-title h2 { text-align: center; }
/* 参考站的装饰线是 left:0 绝对定位（左对齐版式）。这里标题改为居中，
   装饰线也要跟着居中，否则会孤零零地贴在左边。 */
.product .box-title:after {
    left: 50%;
    margin-left: -27px;
}
.product .boxSub {
    max-width: 760px;
    margin: 14px auto 0;
    font-size: 15px;
    line-height: 1.7;
    color: #c3cad1;
    text-align: center;
}

/* 工艺切换标签 */
.procTabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}
.procTabs .procTab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 14px;
    color: #dfe4e8;
    cursor: pointer;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 30px;
    transition: all .3s;
}
.procTabs .procTab em {
    font-size: 12px;
    font-style: normal;
    color: #9fb0be;
    transform: translateY(-1px);
}
.procTabs .procTab:hover {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .34);
}
.procTabs .procTab.cur {
    color: #fff;
    background: var(--c-accent);
    border-color: var(--c-accent);
}
.procTabs .procTab.cur em { color: rgba(255, 255, 255, .8); }

/* 画廊主体 */
.procSlider { margin-top: 34px; }
.procSlider .procSlide { padding: 0 15px; }

.procSlider .procHead {
    padding: 0 4px 20px;
    text-align: center;
}
.procSlider .procName {
    display: block;
    font: 500 22px/1.4 'Montserrat', sans-serif;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.procSlider .procDesc {
    display: block;
    max-width: 720px;
    margin: 8px auto 0;
    font-size: 14px;
    line-height: 1.7;
    color: #b9c2cb;
}
.procSlider .procMore {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    color: var(--c-accent);
}
.procSlider .procMore:hover { text-decoration: underline; }

/* 工艺内产品图网格：一张屏内尽量多放几张 */
.procGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    align-content: start;
    min-height: 60px;
}
.procGrid .item {
    display: block;
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.procGrid .item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #fff;
    transition: transform .6s;
}
/* 悬停：缩放 + 绿色查看按钮（沿用原轮播的交互语言） */
.procGrid .item:before {
    display: block;
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 20%;
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    font-size: 24px;
    color: #fff;
    font-family: "iconfont";
    content: "\e681";
    background: var(--c-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all .5s;
}
.procGrid .item:after {
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: all .5s;
}
.procGrid .item:hover img { transform: scale(1.08); }
.procGrid .item:hover:before { top: 50%; }
.procGrid .item:hover:before,
.procGrid .item:hover:after { opacity: 1; }

/* 分页点 */
.procSlider .procPager {
    padding-top: 26px;
    text-align: center;
}
.procSlider .procPager span {
    width: 12px;
    height: 12px;
    background: #f5f5f5;
    border: 1px solid #bcbcbc;
    opacity: 1;
}
.procSlider .procPager span.swiper-pagination-bullet-active { background: var(--c-accent); border-color: var(--c-accent); }

@media (max-width: 1200px) {
    .procGrid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 992px) {
    .procTabs { gap: 8px; }
    .procTabs .procTab { padding: 8px 14px; font-size: 13px; }
    .procGrid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .procSlider .procName { font-size: 19px; }
}
@media (max-width: 640px) {
    .procGrid { grid-template-columns: repeat(2, 1fr); }
    .procTabs .procTab { padding: 7px 12px; font-size: 12px; }
    .procTabs .procTab em { display: none; }
}

/* 客凭卡（testimonial）：头像用能力图标，方块图裁成圆。
   h3 字号/行高沿用参考站 .testimonial-slide .hd .text h3 的 font:600 1.3em/2em，
   不再覆盖（.hd 本身固定 130px，改字号只影响观感不影响版式）。 */
.testimonial-slide .hd .pic { background: #fff; }
.testimonial-slide .hd .pic img { border-radius: 50%; }

/* 首页 OUR PRODUCTS 网格：参考站 .clients-list li img 素材统一 170x131（宽高比 1.298），
   卡片高度由它决定（119.8/1.298 + 4px 边框 = 96.2px），这里对齐同一比例 */
.clients-list li img { aspect-ratio: 170 / 131; object-fit: cover; background: #fff; }

/* ---------- 3. 子页通用：内页头 ---------- */
.pageHero {
    position: relative;
    padding: 62px 0 58px;
    overflow: hidden;
    color: #fff;
    background: var(--c-blue);
    background-image: url(../images/bg/ad03_bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.pageHero:after {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    content: "";
    background: var(--c-accent);
}
.pageHero h2 {
    font: 600 40px/1.2 'Montserrat', sans-serif;
    letter-spacing: .3px;
    color: #fff;
}
.pageHero p {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.75;
    color: #cdd8e2;
}
.pageHero .crumb {
    margin-top: 22px;
    font-size: 13px;
    letter-spacing: .5px;
    color: #9fb0c0;
}
.pageHero .crumb a { color: var(--c-accent); }
.pageHero .crumb span { padding: 0 10px; color: #6b7f92; }

/* ---------- 4. 区块标题（沿用参考站 .box-title 的绿色短下划线） ---------- */
.block-title {
    position: relative;
    margin-bottom: 40px;
    padding-bottom: 20px;
    overflow: hidden;
}
.block-title:after {
    display: block;
    position: absolute;
    left: 0; bottom: 0;
    width: 55px; height: 3px;
    content: "";
    background: var(--c-accent);
}
.block-title h2 {
    font: 600 28px/1.3 'Montserrat', sans-serif;
    letter-spacing: .3px;
    color: #000;
    text-transform: uppercase;
}
.block-title > span {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    color: #898989;
}

/* ---------- 5. 产品 / 能力页 ---------- */
.prodBlock { padding: 60px 0; overflow: hidden; background: #fff; }
.prodBlock:nth-of-type(even) { background: var(--c-light); }
.prodGrid, .capGrid { margin: -15px; overflow: hidden; }
.prodGrid > li, .capGrid > li {
    float: left;
    margin: 15px;
    width: calc(25% - 30px);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    transition: all .5s;
}
.capGrid > li { width: calc(33.33% - 30px); }
.prodGrid > li:hover, .capGrid > li:hover { box-shadow: 0 0 26px rgba(0, 0, 0, .2); }
.prodGrid .pic { overflow: hidden; background: #fff; }
.prodGrid .pic img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: all .8s; }
.prodGrid > li:hover .pic img { transform: scale(1.08); }
.prodGrid .txt { padding: 18px 16px 20px; border-top: 2px solid var(--c-accent); }
.prodGrid .txt h3 {
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #242424;
    overflow: hidden;
}
.prodGrid .txt span {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--c-accent);
}

/* 能力页：流程卡（横排，图标在左） */
.capGrid > li {
    float: none;
    width: auto;
    margin: 15px;
    box-shadow: none;
    border: 1px solid #e6e6e6;
    background: #fff;
}
.capGrid > li > a {
    display: block;
    padding: 26px 28px;
    transition: all .5s;
}
.capGrid > li > a:hover { background: var(--c-navy); }
.capGrid li em {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: var(--c-accent);
    border-radius: 3px;
}
.capGrid li span {
    display: block;
    margin-top: 14px;
    font-size: 16px;
    color: #333;
}
.capGrid li a:hover span { color: #fff; }

/* 能力页：行业列表 */
.solGrid { margin: -10px; overflow: hidden; }
.solGrid > li {
    float: left;
    margin: 10px;
    padding: 22px 24px;
    width: calc(33.33% - 20px);
    font-size: 15px;
    font-weight: 600;
    color: #242424;
    background: var(--c-light);
    border-left: 3px solid var(--c-accent);
}

/* ---------- 6. 关于页 ---------- */
.capIntro { padding: 70px 0; overflow: hidden; background: #fff; }
.capIntro.alt { background: var(--c-light); }
.capIntro .text { text-align: center; overflow: hidden; }
.capIntro .text h2 {
    font-family: sans-serif;
    font-size: 40px;
    line-height: 1.25;
    color: #242424;
}
.capIntro .text .summary {
    margin: 0 auto;
    padding-top: 20px;
    max-width: 1000px;
    font-size: 18px;
    font-family: sans-serif;
    color: #6c6c6c;
    line-height: 1.8;
    text-align: left;
    overflow: hidden;
}
.capIntro .text .summary strong { color: #242424; }
.cultureTags { padding-top: 40px; text-align: center; overflow: hidden; }
.cultureTags span {
    display: inline-block;
    margin: 6px 8px;
    padding: 12px 26px;
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #fff;
    background: var(--c-navy);
    border-radius: 4px;
}
.aboutStats {
    padding: 0 0 20px;
    overflow: hidden;
    background: var(--c-blue);
}
.aboutStats ul { display: flex; width: 100%; }
.aboutStats li {
    flex: 1;
    padding: 46px 10px;
    text-align: center;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, .14);
}
.aboutStats li:last-child { border-right: none; }
.aboutStats li em {
    display: block;
    font: 700 44px/1 'Montserrat', sans-serif;
    color: #fff;
}
.aboutStats li span {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #a9c0d4;
}

/* ---------- 7. 新闻页 ---------- */
.newsPage { padding: 60px 0; overflow: hidden; background: #fff; }
.newsPage:nth-of-type(even) { background: var(--c-light); }
.newsGrid { margin: -20px; overflow: hidden; }
.newsGrid > li {
    float: left;
    margin: 20px;
    width: calc(33.33% - 40px);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
.newsGrid .pic { overflow: hidden; }
.newsGrid .pic img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; transition: all .8s; }
.newsGrid > li:hover .pic img { transform: scale(1.08); }
.newsGrid .text { padding: 22px 22px 26px; }
.newsGrid .meta { overflow: hidden; }
.newsGrid .meta span {
    display: inline-block;
    padding-right: 14px;
    margin-right: 14px;
    font-size: 13px;
    font-style: italic;
    color: #a6a6a6;
    border-right: 1px solid #dcdcdc;
}
.newsGrid .meta span:last-child { border-right: none; }
.newsGrid h3 {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #000;
}
.newsGrid p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.7;
    color: #8e8d8d;
}

/* ---------- 8. 联系页 ---------- */
.contactPage { padding: 70px 0; }
.contactList { overflow: hidden; }
.contactList > li {
    padding: 22px 0;
    overflow: hidden;
    border-bottom: 1px dashed #e0e0e0;
}
.contactList > li:last-child { border-bottom: none; }
.contactList .icon {
    float: left;
    width: 48px; height: 48px;
    line-height: 48px;
    text-align: center;
    background: var(--c-light);
    border-radius: 50%;
}
.contactList .icon i { font-size: 22px; color: var(--c-accent); }
.contactList .text { padding-left: 68px; overflow: hidden; }
.contactList .text h3 { font-size: 16px; font-weight: 700; color: #242424; }
.contactList .text p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: #6c6c6c; }
.contactList .text p a { color: var(--c-accent); }
.contactNote {
    margin-top: 30px;
    padding: 22px 24px;
    overflow: hidden;
    background: var(--c-light);
    border-left: 3px solid var(--c-accent);
}
.contactNote p { font-size: 14px; line-height: 1.75; color: #6c6c6c; }

/* ---------- 9. 表单校验提示 / 弹窗 ---------- */

/* 蜜罐字段：移到可视区外，正常用户看不见也 Tab 不到。
   用绝对定位而非 display:none —— 前者更容易被采集脚本填上，且对表单行高零影响
   （.msgForm 的行高严格对齐参考站，任何占位的可见元素都会破坏版式）。 */
.msgForm li.hp {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}
.msgForm li.hp input { width: 1px !important; height: 1px !important; }

.msgForm li .err {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #d93638;
}
.msgForm li.error input, .msgForm li.error textarea { border-color: #d93638; }
.msgForm .formTip {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.7;
    color: #999;
}
.msgForm .formTip a { color: var(--c-accent); }
.msgForm .success {
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: #0b6b2c;
    background: #eaf7ef;
    border-left: 3px solid var(--c-accent);
}
.alert {
    position: fixed;
    z-index: 99999;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}
.alert .inner {
    min-width: 320px;
    padding: 34px 40px;
    text-align: center;
    background: #fff;
    box-shadow: 0 10px 50px rgba(0, 0, 0, .3);
}
.alert .tit { display: none; }
.alert .message { font-size: 15px; line-height: 1.7; color: #333; }
.alert .close { margin-top: 22px; }
.alert .close a {
    display: inline-block;
    padding: 8px 32px;
    font-size: 14px;
    color: #fff;
    background: var(--c-accent);
    border-radius: 4px;
    transition: all .5s;
}
.alert .close a:hover { background: var(--c-navy); }

/* ---------- 10. 响应式 ---------- */
@media (max-width: 1200px) {
    /* 参考站移动端把 .header .logo 收到 158px，这里沿用同一值 */
    .header .logo { width: 158px; }
    .pageHero { padding: 40px 0 36px; }
    .pageHero h2 { font-size: 24px; }
    .pageHero p { font-size: 14px; }
    .prodBlock, .newsPage, .contactPage { padding: 40px 0; }
    .capIntro { padding: 40px 0; }
    .capIntro .text { text-align: left; }
    .capIntro .text h2 { font-size: 20px; }
    .capIntro .text .summary { font-size: 16px; }
    .block-title { margin-bottom: 24px; }
    .block-title h2 { font-size: 20px; }
    .prodGrid, .capGrid, .newsGrid, .solGrid { margin: 0; }
    .prodGrid > li, .capGrid > li, .newsGrid > li, .solGrid > li {
        float: none;
        margin: 0 0 16px;
        width: 100%;
    }
    .capGrid > li { margin: 0 0 12px; }
    .capGrid > li > a { padding: 18px 20px; }
    .aboutStats ul { display: block; }
    .aboutStats li { padding: 22px 10px; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .14); }
    .aboutStats li:last-child { border-bottom: none; }
    .aboutStats li em { font-size: 30px; }
    .contactList .text { padding-left: 60px; }
}