@charset "utf-8";
/* multi15 手机端（≤1220 顶部导航+抽屉、≤768 底部操作条）和窄屏补充样式，在 style.css 之后加载。PC（>1400）不受影响。 */

/* 首页 banner 背景图：--bg 原图（PC），--bg-m 828 宽 WebP（≤768）。由 functions.phtml 的 $bg_vars 输出 */
.ban_sw .swiper-slide[style*="--bg"] { background-image: var(--bg); }
@media (max-width: 768px) {
    .ban_sw .swiper-slide[style*="--bg"] { background-image: var(--bg-m, var(--bg)); }
}

/* ================================================================
   手机站骨架：≤1220 顶部导航 + 抽屉菜单（不再用左侧固定侧栏）；
   ≤768 底部操作条、询价表单从底部弹出
   ================================================================ */
.m-header,
.m-drawer,
.m-mask,
.m-actbar {
    display: none;
}

@media (max-width: 1220px) {
    .pages .sides {
        display: none;
    }
    .pages {
        padding-left: 0;
    }
    .m-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
        height: 60px;
        padding: 0 8px 0 16px;
        background: #111119;
    }
    .m-logo img {
        display: block;
        height: 40px;
        width: auto;
    }
    .m-menu-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .m-menu-btn i {
        display: block;
        width: 24px;
        height: 2px;
        margin: 3px 0;
        background: #fff;
    }

    /* 抽屉 */
    .m-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 86vw;
        max-width: 360px;
        background: #fff;
        z-index: 1001;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .3s, visibility .3s;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        line-height: normal;
        text-align: left;
        font-family: "PingFang";
    }
    body.m-drawer-open .m-drawer {
        transform: none;
        visibility: visible;
    }
    .m-mask {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1000;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
    }
    body.m-drawer-open .m-mask {
        opacity: 1;
        pointer-events: auto;
    }
    body.m-drawer-open {
        overflow: hidden;
    }
    .m-drawer-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: none;
        height: 56px;
        padding: 0 6px 0 16px;
        background: #111119;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 1px;
    }
    .m-drawer-close {
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
        color: #fff;
        font-size: 32px;
        line-height: 44px;
        cursor: pointer;
    }
    .m-drawer-lang {
        display: flex;
        flex-wrap: wrap;
        flex: none;
        padding: 6px 10px;
        border-bottom: 1px solid #eee;
    }
    .m-drawer-lang a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
        font-size: 14px;
        color: #333;
    }
    .m-drawer-lang a.on {
        color: #B35F00;
        font-weight: bold;
    }
    .m-drawer-lang img {
        width: 20px;
        margin-right: 6px;
    }
    .m-drawer-list {
        flex: 1;
    }
    .m-drawer-row {
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid #eee;
    }
    .m-drawer-row a {
        flex: 1;
        min-width: 0;
        display: block;
        padding: 13px 16px;
        font-size: 16px;
        line-height: 22px;
        color: #111119;
        overflow-wrap: break-word;
    }
    .m-drawer-item.on > .m-drawer-row {
        box-shadow: inset 4px 0 0 #FF8F03;
    }
    .m-drawer-row a[aria-current="page"] {
        color: #B35F00;
        font-weight: bold;
    }
    .m-drawer-toggle {
        flex: none;
        position: relative;
        width: 48px;
        border: 0;
        border-left: 1px solid #eee;
        background: none;
        cursor: pointer;
    }
    .m-drawer-toggle::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #B35F00;
        border-bottom: 2px solid #B35F00;
        transform: translate(-50%, -70%) rotate(45deg);
        transition: transform .2s;
    }
    .m-drawer-item.open > .m-drawer-row > .m-drawer-toggle::before {
        transform: translate(-50%, -30%) rotate(-135deg);
    }
    .m-drawer-sub {
        display: none;
        background: #f6f6f8;
    }
    .m-drawer-item.open > .m-drawer-sub {
        display: block;
    }
    .m-drawer-sub .m-drawer-row a {
        padding-left: 28px;
        font-size: 15px;
    }
    .m-drawer-sub .m-drawer-sub .m-drawer-row a {
        padding-left: 40px;
        font-size: 14px;
        color: #444;
    }
    .m-drawer-contact {
        flex: none;
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
        background: #111119;
    }
    .m-drawer-contact a {
        display: flex;
        align-items: center;
        min-height: 44px;
        color: #fff;
        font-size: 14px;
        overflow-wrap: anywhere;
    }
    .m-drawer-contact svg {
        flex: none;
        width: 18px;
        height: 18px;
        margin-right: 8px;
    }
}

@media (max-width: 768px) {
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }
    /* 右下角 Leave a message、banner 右上角联系条由底部操作条替代 */
    .fastopen,
    .banner .tops {
        display: none !important;
    }
    .m-actbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        height: calc(56px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
    }
    .m-act {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        border: 0;
        font-family: inherit;
        font-size: 15px;
        color: #fff;
        cursor: pointer;
    }
    .m-act svg {
        flex: none;
        width: 22px;
        height: 22px;
        margin-right: 6px;
    }
    .m-act-wa {
        background: #1b7f3b;
    }
    .m-act-mail {
        background: #3f4a50;
    }
    .m-act-quote {
        flex: 1.3;
        background: #FF8F03;
        color: #111119;
        font-size: 16px;
        font-weight: bold;
    }

    /* 询价表单（右下角那个）：从底部弹出，遮罩用同一个 .m-mask */
    body.m-sheet-open .m-mask {
        opacity: 1;
        pointer-events: auto;
    }
    .quote {
        z-index: 1001;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .quote .qtit {
        border-radius: 16px 16px 0 0;
    }
    .quote .close {
        width: 44px;
        height: 44px;
        padding: 12px;
    }
    .quote .fills {
        padding: 16px;
    }
    .quote .fills input,
    .quote .fills textarea {
        font-size: 16px;
    }
    .quote .fills button {
        height: 46px;
        line-height: 46px;
    }
    /* 产品页 Quote Online：同样从底部弹出 */
    .popask {
        z-index: 1001;
    }
    .popask .askmid {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: none;
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    .popask input {
        font-size: 16px;
    }
    .popask .close {
        width: 44px;
        height: 44px;
        padding: 9px;
        top: 6px;
        right: 6px;
    }
}

/* ================================================================
   页脚（所有页面共用）
   ================================================================ */
@media (max-width: 1220px) {
    .footer .both {
        flex-wrap: wrap;
        gap: 30px;
    }
    .footer .find input {
        width: 320px;
    }
}
@media (max-width: 768px) {
    .footer .ftopm,
    .footer .both {
        flex-direction: column;
        align-items: stretch;
    }
    .footer .ftop .ftopm {
        gap: 16px;
    }
    .footer .find {
        display: flex;
    }
    .footer .find input {
        flex: 1;
        min-width: 0;
        width: auto;
        font-size: 16px;
    }
    .footer .find button {
        width: auto;
        padding: 0 16px;
        font-size: 16px;
    }
    .footer .both {
        padding: 36px 0;
    }
    .footer .both .info,
    .footer .forms,
    .footer .gys {
        width: 100%;
    }
    .footer .forms input,
    .footer .forms textarea {
        font-size: 16px;
    }
    .footer .forms .sub {
        width: 100%;
        height: 46px;
    }
    .footer .lxs .lxone {
        min-height: 44px;
        margin-bottom: 8px;
        overflow-wrap: anywhere;
    }
    .footer .links {
        flex-wrap: wrap;
    }
    .footer .links .lka {
        font-size: 16px;
        margin-right: 18px;
    }
    .footer .bainfo {
        flex-wrap: wrap;
    }
    .footer .bainfo p,
    .footer .bainfo a {
        font-size: 14px;
        margin-right: 0;
        line-height: 22px;
    }
}

/* 后台富文本（产品模块、新闻正文、分类说明）：表格横向滚动，图片和视频不超宽，长单词换行 */
@media (max-width: 1220px) {
    .cpart .txts,
    .infos .word,
    .words {
        overflow-wrap: break-word;
    }
    .cpart .txts table,
    .infos .word table,
    .words table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cpart .txts table td,
    .infos .word table td,
    .words table td {
        min-width: 64px;
    }
    .cpart .txts img,
    .infos .word img,
    .words img {
        max-width: 100%;
        height: auto;
    }
    .cpart .txts iframe,
    .cpart .txts video,
    .infos .word iframe,
    .infos .word video {
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* 首页企业文化三栏：手机上一栏一个（三栏时图标会超出屏幕） */
@media (max-width: 768px) {
    .sy_cul .item {
        width: 100%;
        float: none;
        margin: 0 0 20px;
    }
}

/* 首页"社会责任 / 数字"区：手机上上下排列 */
@media (max-width: 768px) {
    .sy_job .cont12 {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .sy_job .btna {
        margin-left: 0;
    }
    .sy_job .info {
        padding: 50px 0;
    }
    .sy_job .info .nums {
        width: auto;
        padding: 30px 20px;
    }
    .sy_job .lks {
        width: 100%;
    }
}

/* ================================================================
   各页面（≤1220 平板 / ≤768 手机）
   ================================================================ */
@media (max-width: 1220px) {
    .tit2 h1,
    .tit2 h3 {
        font-size: 36px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }
    .tit span,
    .tit b {
        font-size: 32px;
        overflow-wrap: anywhere;
    }
    .banner .word h1,
    .banner .word h3 {
        overflow-wrap: anywhere;
    }
    /* 产品详情：页面导航不再绝对定位在左边，放到图片上面 */
    .cppage .boths {
        padding-left: 0;
    }
    .cppage .boths .fnav {
        position: static;
        width: 100%;
        height: auto;
        padding-right: 0;
        margin-bottom: 20px;
    }
    .cpdesc .fdpic {
        width: 100%;
    }
    .errors .word .tu {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .tit2 h1,
    .tit2 h3 {
        font-size: 28px;
    }
    .tit {
        margin-bottom: 24px;
    }
    .tit span,
    .tit b {
        font-size: 26px;
    }
    .sypart {
        padding: 50px 0;
    }
    .gypage,
    .lxpage {
        padding-top: 30px;
    }

    /* ---------- 首页 ---------- */
    .banner,
    .banner .ban_sw,
    .banner .swiper-slide,
    .banner .videobox,
    .banner .videobox #video2 {
        height: 78vh;
        min-height: 520px;
        max-height: 700px;
    }
    .banner .swiper-slide {
        background-size: cover;
    }
    .banner .word {
        width: 88%;
        justify-content: flex-start;
        padding-top: 18%;
    }
    .banner .word h1,
    .banner .word h3 {
        font-size: 32px;
        text-shadow: #FF8F03 2px -2px 0;
    }
    .banner .word .both {
        margin-top: 24px;
    }
    .banner .word .btna {
        width: auto;
        height: 48px;
        padding: 0 22px;
        font-size: 17px;
        margin-right: 20px;
    }
    .banner .bots {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 6%;
        background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
    }
    .banner .bots .bitem span {
        font-size: 16px;
    }
    .banner .bots .bitem i {
        font-size: 13px;
        color: #ccc;
        margin-top: 2px;
    }
    .sy_cp .item {
        width: calc(50% - 6px);
        margin: 0 12px 12px 0;
    }
    .sy_cp .item:nth-child(3n) {
        margin-right: 12px;
    }
    .sy_cp .item:nth-child(2n) {
        margin-right: 0;
    }
    .sy_cp .item .ups {
        padding: 10px;
        background: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .7));
    }
    .sy_cp .item .ups .bot {
        left: 10px;
        right: 10px;
        bottom: 6px;
    }
    .sy_cp .item .ups .bot .name {
        font-size: 15px;
        line-height: 20px;
    }
    .sy_about .info,
    .sy_about .photo {
        width: 100%;
        float: none;
    }
    .sy_about .info .desc {
        font-size: 16px;
        line-height: 28px;
    }
    .sy_about .info h3 {
        margin: 30px 0 12px;
    }
    .sy_about .photo {
        padding: 70px 30px 60px 50px;
    }
    .sy_vds .vds,
    .sy_vds .pics {
        width: 100%;
        float: none;
    }
    .sy_vds .vds .zwimg {
        display: none;
    }
    .sy_vds .ups {
        position: static;
        padding: 40px 6%;
    }
    .sy_vds .ups p {
        font-size: 16px;
        line-height: 26px;
        margin: 16px 0;
    }
    .sy_new .item {
        width: 100%;
        float: none;
        margin: 0 0 24px;
    }
    .sy_cul .desc {
        width: 100%;
        font-size: 16px;
    }

    /* ---------- 产品中心、产品分类 ---------- */
    .cppage .lists {
        padding: 30px 4%;
    }
    .cppage .items {
        width: 100%;
        float: none;
        margin: 0 0 30px;
    }
    .cppage .items .lks {
        height: auto;
        max-width: none;
        padding: 0 20px;
    }
    .cppage .items .more {
        position: static;
        width: 100%;
        text-align: center;
        background-color: #111119;
    }
    .cppage .item {
        width: calc(50% - 6px);
        margin: 0 12px 12px 0;
    }
    .cppage .item:nth-child(3n) {
        margin-right: 12px;
    }
    .cppage .list .item:nth-child(2n+1) {
        margin-right: 0;
    }
    /* 列表第一格是页面导航（盖在占位图上），手机上占满一行，不显示占位图 */
    .cppage .list .item:first-child {
        width: 100%;
        margin-right: 0;
    }
    .cppage .list .item:first-child .pics {
        display: none;
    }
    .cppage .item .fnav {
        position: static;
        height: auto;
    }
    .cppage .item .ups p {
        font-size: 14px;
        line-height: 20px;
    }
    .cppage .words {
        font-size: 15px;
        line-height: 26px;
    }
    .cppage h4,
    .cppage h1.cp-name {
        font-size: 24px;
        line-height: 32px;
        padding: 24px 0;
    }

    /* ---------- 产品详情 ---------- */
    .cppage .boths .menu,
    .cppage .boths .tu_sw {
        width: 100%;
        float: none;
    }
    .cppage .boths .menu {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 16px;
    }
    .cppage .boths .mone {
        min-height: 0;
        margin: 0;
        padding: 12px 6px;
        font-size: 13px;
        text-align: center;
    }
    .cppage .boths .btnall {
        padding: 0;
        gap: 12px;
        margin-top: 20px;
    }
    .cppage .boths .btnall a {
        width: auto;
        flex: 1;
        height: 48px;
        font-size: 16px;
    }
    .cppage .boths .btnall a img {
        margin-right: 8px;
    }
    .cpdesc .cpart h3 {
        font-size: 20px;
        line-height: 28px;
    }
    .cpdesc .cpart .txts,
    .cpdesc .cpart ul li {
        font-size: 15px;
        line-height: 28px;
    }
    .cpdesc .fitem {
        width: calc(50% - 6px);
        margin: 0 12px 12px 0;
    }
    .cpdesc .fitem:nth-child(3n) {
        margin-right: 12px;
    }
    .cpdesc .fitem:nth-child(2n) {
        margin-right: 0;
    }

    /* ---------- Processing、项目、新闻 ---------- */
    .cesspage .item {
        width: 100%;
        float: none;
        margin: 0 0 40px;
    }
    .cesspage .item .pic {
        margin-right: 20px;
    }
    .cesspage .item .pic .tu,
    .cesspage .item:hover .pic .tu {
        transform: translate(16px, 14px);
    }
    .cesspage .item .name {
        font-size: 18px;
        margin-top: 20px;
    }
    .newpage .items {
        width: 100%;
        float: none;
        margin: 0 0 40px;
    }
    .newpage .item {
        width: 100%;
        float: none;
        margin: 0 0 20px;
        padding: 20px 16px;
    }
    .newpage .infos h3,
    .newpage .infos h1.art-title {
        font-size: 22px;
        line-height: 30px;
    }
    .newpage .infos .word {
        font-size: 16px;
        line-height: 28px;
    }
    .newpage .infos .tus .tu,
    .newpage .infos img {
        max-width: 100%;
        height: auto;
    }

    /* ---------- 关于 ---------- */
    .gy_txt {
        padding: 50px 0 60px;
        font-size: 16px;
    }
    .gy_txt h3 {
        font-size: 26px;
        line-height: 34px;
        margin-bottom: 24px;
    }
    .gy_txt .say_sw .item {
        padding: 30px 20px 60px 60px;
    }
    .gy_txt .say_sw .item .txa {
        left: -10px;
        width: 64px;
        height: 64px;
    }
    .gy_txt .say_sw .item .txa img {
        width: 50px;
        height: 50px;
    }
    .gy_vds .rdeal {
        position: static;
        margin-top: 16px;
    }
    .gy_vds .item .name span {
        font-size: 16px;
    }

    /* ---------- 联系 ---------- */
    .lxpage .putbox h3 {
        margin-bottom: 30px;
    }
    .lxpage .putbox h3 b {
        font-size: 26px;
        line-height: 32px;
    }
    .lxpage form,
    .lxpage .putbox .both .txts,
    .lxpage .txts {
        width: 100%;
        float: none;
    }
    .lxpage .put input {
        width: 100%;
        float: none;
        line-height: 48px;
        margin-bottom: 16px;
        font-size: 16px;
    }
    .lxpage .put textarea {
        margin-bottom: 16px;
        font-size: 16px;
    }
    .lxpage .txts {
        margin-top: 30px;
    }
    .lxpage .txts .ups {
        padding: 24px;
        font-size: 16px;
    }
    .lxpage .maps {
        padding-top: 0;
    }
    .lxpage .maps ul {
        position: static;
        transform: none;
        padding: 20px 0;
    }
    .lxpage .maps ul li {
        width: 100%;
        float: none;
        margin: 0 0 12px;
        padding: 20px;
    }
    .lxpage .maps ul li p span {
        height: auto;
        overflow-wrap: anywhere;
    }
    .lxpage .maps .map {
        aspect-ratio: 4 / 3;
    }

    /* ---------- 404、success ---------- */
    .popfeed .word h1,
    .popfeed .word h3 {
        font-size: 56px;
    }
    .popfeed .word .deal a {
        width: auto;
        flex: 1;
        height: 50px;
        line-height: 48px;
        font-size: 20px;
        margin: 0 8px;
    }
    .errors .word .deal {
        flex-wrap: wrap;
        gap: 10px;
    }
    .errors .word .deal a {
        width: auto;
        min-width: 44%;
        height: 48px;
        margin: 0;
        font-size: 15px;
    }
}

/* 询价框：只有 ≤768 从底部弹出、有遮罩时才锁定页面滚动（769–1220 是右下角的小窗，没有遮罩） */
@media (max-width: 768px) {
    body.m-sheet-open {
        overflow: hidden;
    }
}

/* ================================================================
   2026-11-12 各分辨率复查修正
   ================================================================ */

/* 页脚 769–1550：三栏（简介 335 + 表单 304 + 联系方式 280）放不下，原来挤在一起、表单贴着图标。
   改成两列：左边简介和联系方式，右边留言表单 */
@media (min-width: 769px) and (max-width: 1550px) {
    .footer .both {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 48px;
        row-gap: 28px;
        flex-wrap: nowrap;
    }
    .footer .both .info {
        grid-column: 1;
        grid-row: 1;
        width: auto;
    }
    .footer .both .gys {
        grid-column: 1;
        grid-row: 2;
        width: auto;
    }
    .footer .both .forms {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: auto;
    }
    .footer .forms .sub {
        width: 100%;
    }
    .footer .ftop .ftopm {
        gap: 24px;
    }
    .footer .find {
        display: flex;
        flex: 0 1 450px;
        min-width: 0;
    }
    .footer .find input {
        flex: 1;
        min-width: 0;
        width: auto;
    }
    .footer .find button {
        flex: none;
    }
}
/* 版权行：放不下时整段换行（原来 "All rights reserved"、备案号各自折成两行、行距 16px 挤在一起）；
   底部留出右下角 Leave a message 按钮的高度，滚到底时不再挡住备案号 */
@media (min-width: 769px) {
    .footer .bainfo {
        flex-wrap: wrap;
        column-gap: 50px;
        row-gap: 4px;
        line-height: 26px;
    }
    .footer .bainfo p,
    .footer .bainfo a {
        margin-right: 0;
    }
    .footer .fbot {
        padding-bottom: 84px;
    }
}
@media (max-width: 768px) {
    .footer .bainfo {
        column-gap: 12px;
    }
}

/* 首页企业文化三张卡片：电脑上正文不再截成 5 行省略号，三张等高 */
@media (min-width: 769px) {
    .sy_cul .lists {
        display: flex;
        gap: 30px;
    }
    .sy_cul .item {
        float: none;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        margin-right: 0;
    }
    .sy_cul .item .txt {
        height: 100%;
    }
}
.sy_cul .item .txt p {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: none;
    min-height: 0;
}
@media (min-width: 1221px) and (max-width: 1440px) {
    .sy_cul .item .txt {
        padding: 70px 20px 24px;
    }
    .sy_cul .item .txt h3 {
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 14px;
    }
}
/* 企业文化下面那段说明：和标题、卡片左边对齐（原来 90% 宽居中，比上面缩进 40–60px），行距和正文一致 */
.sy_cul .desc {
    width: auto;
    line-height: 32px;
}

/* 首页新闻（手机/平板单列）：日期和下一条新闻的图片之间留出间距；标题不再固定两行高 */
@media (max-width: 768px) {
    .sy_new .item {
        margin-bottom: 36px;
    }
    .sy_new .item .txt .name {
        height: auto;
    }
    .sy_new .item .txt .time {
        margin-top: 10px;
    }
}

/* 联系页地址/邮箱/电话卡片：完整显示，不再截成 "admin@kua…"、"+86 15954941…" */
.lxpage .maps ul li p span {
    display: block;
    height: auto;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: none;
    overflow-wrap: anywhere;
}
@media (min-width: 769px) and (max-width: 1550px) {
    .lxpage .maps ul li {
        padding: 28px 24px;
    }
    .lxpage .maps ul li img {
        float: none;
        width: 40px;
        margin: 0 0 12px;
    }
    .lxpage .maps ul li p {
        float: none;
        width: auto;
    }
}
/* 产品页 Quote Online 询价框：769–1220 时遮罩盖不住顶部页头（页头 z-index 100），各宽度都放到最上层 */
.popask {
    z-index: 1001;
}

/* 联系页三张卡片等高 */
@media (min-width: 769px) {
    .lxpage .maps ul {
        display: flex;
        gap: 30px;
    }
    .lxpage .maps ul li {
        float: none;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        margin-right: 0;
    }
}
@media (min-width: 769px) and (max-width: 1550px) {
    .lxpage .maps {
        padding-top: 200px;
    }
}

/* 联系页右侧说明卡片：图标不再压住第一行正文 */
.lxpage .txts img {
    width: 76px;
    margin-bottom: 16px;
}
.lxpage .txts p {
    transform: none;
}

/* 产品详情顶部（769–1550）：原来左边 Page Navigation 30% + 卖点卡 + 520px 主图三栏挤在一起，
   1440 卖点卡只剩 108px 一行一个词、1280 主图下面空 330px。改成导航一行放在上面，下面卖点卡 38% + 主图 58% 等高 */
@media (min-width: 769px) and (max-width: 1550px) {
    .cppage .boths {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        padding-left: 0;
    }
    .cppage .boths > div[style*="clear"] {
        display: none;
    }
    .cppage .boths .fnav {
        position: static;
        width: 100%;
        height: auto;
        padding-right: 0;
        margin-bottom: 20px;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .cppage .boths .fnav .links {
        display: contents;
    }
    .cppage .boths .fnav .bt {
        flex: 0 0 auto;
        height: 44px;
        padding: 0 20px;
    }
    .cppage .boths .fnav .lk {
        flex: 0 1 auto;
        height: 44px;
        margin-top: 0;
        padding: 0 12px 0 18px;
    }
    .cppage .boths .fnav .lk span {
        width: auto;
        height: 44px;
        white-space: nowrap;
    }
    .cppage .boths .fnav .lk i {
        width: 26px;
    }
    .cppage .boths .menu {
        float: none;
        width: 38%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 0;
    }
    .cppage .boths .mone {
        flex: 1 1 0;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 12px 16px;
    }
    .cppage .boths .tu_sw {
        float: none;
        width: 58%;
        height: auto;
        margin: 0;
    }
    .cppage .boths .tu_sw .tu {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
}
/* 手机：Page Navigation 同样改成按钮条，原来五行列表把产品图挤出第一屏 */
@media (max-width: 768px) {
    .cppage .boths .fnav,
    .cppage .item .fnav {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .cppage .boths .fnav .links,
    .cppage .item .fnav .links {
        display: contents;
    }
    .cppage .boths .fnav .bt,
    .cppage .item .fnav .bt {
        flex: 0 0 100%;
        height: 40px;
        padding: 0 14px;
        font-size: 16px;
    }
    .cppage .boths .fnav .lk,
    .cppage .item .fnav .lk {
        flex: 0 1 auto;
        max-width: 100%;
        height: auto;
        min-height: 40px;
        margin-top: 0;
        padding: 0 8px 0 12px;
    }
    .cppage .boths .fnav .lk span,
    .cppage .item .fnav .lk span {
        width: auto;
        height: auto;
        font-size: 13px;
        line-height: 18px;
        padding: 6px 0;
    }
    .cppage .boths .fnav .lk i,
    .cppage .item .fnav .lk i {
        width: 22px;
        flex: none;
    }
}
/* Quote Online / Contact Us：左右和内容对齐（原来按 8% 内边距 space-around 摆放，左右都对不上） */
@media (min-width: 769px) {
    .cppage .boths .btnall {
        justify-content: flex-start;
        gap: 24px;
        padding: 0;
    }
    .cppage .boths .btnall a {
        flex: 1 1 0;
        width: auto;
        max-width: 320px;
    }
}

/* 后台富文本里的表格：外层滚动框（public.js 加），表格撑满内容区；列多放不下时可横滑，右边渐隐提示 */
.tbl-box {
    position: relative;
    margin: 10px 0 24px;
}
.tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tbl-box::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.18));
    opacity: 0;
    transition: opacity 0.2s;
}
.tbl-box.has-more::after {
    opacity: 1;
}
.cpart .txts .tbl-scroll table,
.infos .word .tbl-scroll table,
.words .tbl-scroll table {
    display: table;
    width: 100%;
    max-width: none;
    overflow: visible;
    margin: 0;
}
/* 单元格：原来一行 40px 行高、左右 5px，折行后很松、文字贴着竖线 */
.cpdesc .cpart table td,
.cpdesc .cpart table th,
.infos .word table td,
.words table td {
    line-height: 22px;
    padding: 9px 10px;
}
@media (max-width: 768px) {
    .cpdesc .cpart table td,
    .cpdesc .cpart table th,
    .infos .word table td,
    .words table td {
        font-size: 13px;
        line-height: 20px;
        padding: 8px 8px;
    }
    .cpart .txts table td,
    .infos .word table td,
    .words table td {
        min-width: 72px;
    }
}
.cpart .txts table td p,
.infos .word table td p,
.words table td p {
    margin: 0;
}
/* 单元格里没有空格的长串（如 SGCC/CGCC/TDC51DZM/...）允许断行，不再把表格撑宽到要横滑 */
.cpart .txts table td,
.infos .word table td,
.words table td {
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* 两列参数表（public.js 加 tbl-kv）：参数名列固定比例，PC 端原来只按内容宽，"Product Name" 也折两行 */
.cpart .txts table.tbl-kv td:first-child,
.infos .word table.tbl-kv td:first-child,
.words table.tbl-kv td:first-child {
    width: 22%;
}
/* 两列参数表：手机端左对齐，参数名列窄一些，长参数值不再居中显得被切掉 */
@media (max-width: 768px) {
    .cpart .txts table.tbl-kv td,
    .infos .word table.tbl-kv td,
    .words table.tbl-kv td {
        text-align: left;
        vertical-align: top;
    }
    .cpart .txts table.tbl-kv td:first-child,
    .infos .word table.tbl-kv td:first-child,
    .words table.tbl-kv td:first-child {
        width: 34%;
    }
    .cpart .txts table.tbl-kv td p + p,
    .infos .word table.tbl-kv td p + p,
    .words table.tbl-kv td p + p {
        margin-top: 6px;
    }
}

/* 正文：段落之间留间距；整段加粗的表名/小标题（public.js 加 sub-h）按小标题显示 */
.cpdesc .cpart .txts p + p {
    margin-top: 12px;
}
.cpart .txts p.sub-h,
.words p.sub-h {
    font-size: 18px;
    line-height: 28px;
    color: #000;
    margin: 28px 0 4px;
}

/* 产品详情 Application Field：标题和卡片左对齐（原来卡片 80% 宽居中），卡片等高，和页脚之间空白减小 */
.cpdesc .cpart.bghui {
    padding: 30px 24px;
}
.cpdesc .fdpic {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
}
.cpdesc .fdpic > div[style*="clear"] {
    display: none;
}
.cpdesc .fitem,
.cpdesc .fitem:nth-child(2n),
.cpdesc .fitem:nth-child(3n) {
    float: none;
    width: auto;
    margin: 0;
}
.cpdesc .fitem .name {
    font-size: 18px;
    line-height: 26px;
    padding: 16px 10px;
}
.cpdesc .cpart:last-child {
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .cpdesc .cpart.bghui {
        padding: 24px 12px;
    }
    .cpdesc .fdpic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .cpdesc .fitem .name {
        font-size: 15px;
        line-height: 22px;
        padding: 10px 6px;
    }
}

/* 产品分类页 Page Navigation（769–1550）：原来盖在第一格方形占位图上、高度固定，1280 时第 3 项被横着切断、
   1366/1440 看不到 Application Field。改成占满一行的按钮条，不显示占位图（手机上已经这样） */
@media (min-width: 769px) and (max-width: 1550px) {
    .cppage .list .item:first-child {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
        cursor: default;
    }
    .cppage .list .item:first-child .pics {
        display: none;
    }
    .cppage .item .fnav {
        position: static;
        height: auto;
        padding-right: 0;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .cppage .item .fnav .bt {
        height: 44px;
        padding: 0 20px;
    }
    .cppage .item .fnav .links {
        display: contents;
    }
    .cppage .item .fnav .lk {
        height: 44px;
        margin-top: 0;
        padding: 0 12px 0 18px;
    }
    .cppage .item .fnav .lk span {
        width: auto;
        height: 44px;
        white-space: nowrap;
    }
    /* 第一格变成整行后，后面的产品从第 2 格开始每行 3 个 */
    .cppage .list .item:nth-child(3n) {
        margin-right: 45px;
    }
    .cppage .list .item:nth-child(3n+1) {
        margin-right: 0;
    }
}
/* 产品卡片 View More：不再折成 "View / More"（手机）或缩成 "More"（1280） */
.cppage .item .more,
.cppage .items .more {
    width: auto;
    min-width: 40%;
    padding: 0 14px;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .cppage .item .more {
        font-size: 13px;
        padding: 0 8px;
    }
}
/* 产品卡片标题：单行居中、折成两行时也居中（原来两行时左对齐） */
.cppage .item .ups {
    text-align: center;
}
/* 产品中心分类卡（1221–1550）：卡片太窄，标题截成 "custom stee…"、列表只剩十几个字符。收窄间距、标题字号 */
@media (min-width: 1221px) and (max-width: 1550px) {
    .cppage .lists {
        padding: 40px 3%;
    }
    .cppage .items {
        width: calc(33.33% - 16px);
        margin-right: 24px;
        padding: 36px 16px;
    }
    .cppage .items h5 {
        font-size: 20px;
    }
    .cppage .items .lka {
        font-size: 16px;
    }
}

/* 新闻列表：改成网格。原来 1280/1366 一行三张太窄（日期拆成两行、标题第 3 行截断）；
   手机上卡片是 inline 的 <a>，去掉浮动后阴影框缩成左边一条，内容跑到框外 */
.newpage .list:has(> .item) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.newpage .list:has(> .item) > div[style*="clear"] {
    display: none;
}
.newpage .list > .item {
    display: block;
    float: none;
    width: auto;
    margin: 0;
}
.newpage .item .lib .lone {
    width: auto;
    white-space: nowrap;
}
.newpage .item .name {
    height: auto;
    min-height: 48px;
}
.newpage .item .desc {
    height: auto;
}
@media (max-width: 1399px) {
    .newpage .list:has(> .item) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 599px) {
    .newpage .list:has(> .item) {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .newpage .list > .item {
        padding: 16px 16px 20px;
    }
}

/* 项目列表：两列网格占满内容区（原来右边比左边多空 70px），手机一列 */
.newpage .list:has(> .items) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 30px;
}
.newpage .list:has(> .items) > div[style*="clear"] {
    display: none;
}
.newpage .list > .items {
    float: none;
    width: auto;
    margin: 0;
}
@media (max-width: 599px) {
    .newpage .list:has(> .items) {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}
/* 图片上的白字标题（项目、关于页项目、首页产品分类）：底部加深色渐变，浅色图片上也看得清 */
.newpage .items .ups,
.sy_cp .item .ups {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 60%);
}

/* 加工工艺：右列图片原来往右下偏移 50px，顶到屏幕右边被切掉。外框右边、下边留出偏移的位置 */
@media (min-width: 769px) {
    .cesspage .list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 60px;
        row-gap: 40px;
    }
    .cesspage .list > div[style*="clear"] {
        display: none;
    }
    .cesspage .item {
        float: none;
        width: auto;
        margin: 0;
    }
    .cesspage .item .pic {
        margin-right: 50px;
    }
    .cesspage .item .name {
        padding-left: 50px;
    }
}
@media (max-width: 768px) {
    .cesspage .item {
        margin-bottom: 52px;
    }
    .cesspage .item .name {
        margin-top: 30px;
        padding-left: 16px;
    }
}

/* 新闻详情：文章标题比正文里的小标题还小、灰色居中；改成黑色大标题，正文左对齐和页头一致 */
.newpage .infos {
    max-width: 900px;
    margin: 0;
}
.newpage .infos h3.art-title,
.newpage .infos h1.art-title {
    font-size: 34px;
    line-height: 1.3;
    color: #111;
    text-align: left;
    margin-bottom: 28px;
}
.newpage .infos .lib {
    padding: 0;
}
/* 正文排版：段落、小标题间距，列表符号，figure/blockquote 不再有浏览器默认的 40px 缩进 */
.newpage .infos .word p,
.newpage .infos .word ul,
.newpage .infos .word ol {
    margin: 0 0 14px;
}
.newpage .infos .word h1,
.newpage .infos .word h2,
.newpage .infos .word h3,
.newpage .infos .word h4 {
    font-size: 24px;
    line-height: 1.35;
    margin: 32px 0 12px;
    color: #000;
}
.newpage .infos .word h1:first-child,
.newpage .infos .word h2:first-child {
    margin-top: 0;
}
.newpage .infos .word h3,
.newpage .infos .word h4 {
    font-size: 20px;
}
.newpage .infos .word ul {
    list-style: disc;
    padding-left: 1.4em;
}
.newpage .infos .word ol {
    list-style: decimal;
    padding-left: 1.6em;
}
.newpage .infos .word li {
    margin-bottom: 6px;
}
.newpage .infos .word figure,
.newpage .infos .word blockquote {
    margin: 0 0 14px;
}
.newpage .infos .word a {
    color: #e07b00;
    text-decoration: underline;
}
.newpage .infos .bot {
    line-height: 28px;
}
.newpage .infos .bot p {
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .newpage .infos h3.art-title,
    .newpage .infos h1.art-title {
        font-size: 24px;
        margin-bottom: 18px;
    }
    .newpage .infos .word h1,
    .newpage .infos .word h2 {
        font-size: 20px;
    }
    .newpage .infos .word h3,
    .newpage .infos .word h4 {
        font-size: 18px;
    }
    .newpage .infos .bot {
        font-size: 16px;
        line-height: 24px;
    }
}

/* 404：数字 404 是背景图的一部分。手机/平板竖屏把背景图缩放到 404 在上方，文字放在下面，不再互相压住 */
.errors .word .deal a {
    background-color: rgba(244, 244, 244, 0.92);
    padding: 0 12px;
}
@media (max-width: 768px) {
    .errors {
        background-size: min(276vw, 1400px) auto;
        background-position: center top;
        overflow-y: auto;
    }
    .errors .word {
        justify-content: flex-start;
        height: auto;
        min-height: 100%;
        padding: min(86vw, 440px) 20px 30px;
        text-align: center;
    }
    .errors .word h1,
    .errors .word h3 {
        font-size: 20px;
    }
    .errors .word .lx {
        flex-direction: column;
        padding: 10px 0;
    }
    .errors .word .lx .lka {
        margin: 0;
        font-size: 17px;
    }
    .errors .word .deal {
        flex-direction: column;
        align-items: center;
    }
    .errors .word .deal a {
        width: 100%;
        max-width: 320px;
    }
}
