/*
 * 与网站 .warp-mb 的版心保持一致
 */
.zxy-header {
    --zxy-mega-width: 1400px;
}


/*
 * Mega Menu 内部统一 box-sizing
 */
.zxy-mega-panel,
.zxy-mega-panel * {
    box-sizing: border-box;
}


/*
 * 防止网站全局：
 *
 * p,
 * div {
 *     font-size: 18px;
 *     line-height: 1.7;
 * }
 *
 * 干扰 Mega Menu
 */
.zxy-mega-panel,
.zxy-mega-panel div,
.zxy-mega-panel p {
    font-size: inherit;
    line-height: inherit;
    font-weight: 400;
}


/*
 * Mega Menu 基础字体
 */
.zxy-mega-panel {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #173c35;
}



/* =========================================================
   2. DESKTOP TOP MENU
========================================================= */

@media screen and (min-width: 993px) {


    /*
     * 你的普通 navlist > li 原本是：
     *
     * position: relative;
     *
     * Mega Menu 必须改成 static，
     * 这样 1400 / 1170 / 980 面板才能相对整个 Header 定位，
     * 而不是相对 Solution / Industry 那一个小 LI 定位。
     */
    .navlist > li.mega-solution,
    .navlist > li.mega-industry {
        position: static;
    }



    /* =====================================================
       一级菜单链接
    ===================================================== */

    .navlist > li.mega-solution > a,
    .navlist > li.mega-industry > a {
        position: relative;
        padding-right: 27px;
    }



    /* =====================================================
       Hover Bridge
       
       重要：
       修复鼠标从一级菜单往下进入 Mega Menu 时，
       中间经过 Header padding 导致 :hover 丢失的问题。

       一级菜单
             ↓
       透明 Hover Bridge
             ↓
       Mega Menu
    ===================================================== */

    .navlist > li.mega-solution > a::before,
    .navlist > li.mega-industry > a::before {
        content: "";

        position: absolute;

        left: 0;
        right: 0;

        top: 100%;

        /*
         * Header 默认 padding-bottom = 10px
         * active 后 = 5px
         *
         * 设置 22px，
         * 同时略微覆盖 Mega Menu 顶部，
         * 避免浏览器缩放造成 1px 缝隙。
         */
        height: 22px;

        background: transparent;

        pointer-events: auto;

        z-index: 20;
    }



    /* =====================================================
       一级菜单箭头
    ===================================================== */

    .navlist > li.mega-solution > a::after,
    .navlist > li.mega-industry > a::after {
        content: "";

        display: block;

        position: absolute;

        top: 50%;
        right: 5px;

        width: 12px;
        height: 12px;

        background:
            url(../images/jt.png)
            no-repeat
            center;

        background-size: 12px;

        transform:
            translateY(-50%);

        transition:
            transform .25s ease;
    }


    /*
     * 打开以后箭头翻转
     */
    .navlist > li.mega-solution:hover > a::after,
    .navlist > li.mega-industry:hover > a::after,
    .navlist > li.mega-solution:focus-within > a::after,
    .navlist > li.mega-industry:focus-within > a::after {
        transform:
            translateY(-50%)
            rotate(180deg);
    }



    /*
     * PC 不显示手机右侧展开按钮
     */
    .zxy-mega-toggle {
        display: none;
    }

}



/* =========================================================
   3. MEGA MENU OUTER PANEL
========================================================= */

.zxy-mega-panel {
    position: absolute;

    /*
     * 与 Header 底部重叠 2px，
     * 防止 Header 和 Mega Menu 之间产生视觉 / hover 缝隙
     */
    top: calc(100% - 2px);

    left: 50%;

    width: var(--zxy-mega-width);

    margin: 0;

    background: #fff;

    border:
        1px solid #edf1ee;

    border-radius:
        0 0 16px 16px;

    box-shadow:
        0 18px 45px
        rgba(0, 50, 35, .15);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(-50%);

    transition:
        opacity .18s ease,
        visibility .18s ease;

    overflow: hidden;

    z-index: 9999;
}



/*
 * PC Hover / Keyboard 打开
 */
.navlist > li.mega-solution:hover > .zxy-mega-panel,
.navlist > li.mega-industry:hover > .zxy-mega-panel,
.navlist > li.mega-solution:focus-within > .zxy-mega-panel,
.navlist > li.mega-industry:focus-within > .zxy-mega-panel {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}



/* =========================================================
   4. SOLUTION MEGA MENU
========================================================= */

.zxy-solution-mega {
    padding: 20px;
}



/*
 * 左边分类 + 右边所有内容
 */
.zxy-solution-mega-grid {
    display: grid;

    grid-template-columns:
        270px
        minmax(0, 1fr);

    gap: 30px;

    width: 100%;

    min-width: 0;
}



/* =========================================================
   5. SOLUTION LEFT TABS
========================================================= */

.zxy-solution-tabs {
    display: flex;

    flex-direction: column;

    width: 100%;

    min-width: 0;
}



/* 单个分类 */
.zxy-solution-tab {
    width: 100%;

    min-height: 96px;

    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        20px;

    gap: 14px;

    align-items: center;

    padding:
        15px 17px;

    margin: 0;

    border:
        1px solid #e1e7e3;

    border-radius: 0;

    background: #fff;

    color: #084f43;

    text-align: left;

    cursor: pointer;

    font-family:
        "Poppins",
        sans-serif;

    transition:
        background .2s ease,
        border-color .2s ease,
        padding .2s ease;
}



/*
 * 相邻分类去掉重复 border
 */
.zxy-solution-tab +
.zxy-solution-tab {
    border-top: 0;
}



.zxy-solution-tab:first-child {
    border-radius:
        7px 7px 0 0;
}



.zxy-solution-tab:last-of-type {
    border-radius:
        0 0 7px 7px;
}



/* 分类左边图标容器 */
.zxy-solution-tab-icon {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;
}



/* 分类图标 */
.zxy-solution-tab-icon img {
    display: block;

    max-width: 48px;
    max-height: 48px;

    width: auto;
    height: auto;

    object-fit: contain;
}



/* 分类名称 */
.zxy-solution-tab strong {
    display: block;

    margin: 0;

    color: #075145;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 600;
}



/* 右箭头 */
.zxy-solution-tab-arrow {
    display: block;

    color: #27952b;

    font-size: 23px;

    line-height: 1;

    font-weight: 400;
}



/*
 * 当前分类 / Hover
 */
.zxy-solution-tab:hover,
.zxy-solution-tab.is-active {
    background:
        linear-gradient(
            90deg,
            #f5faf4 0%,
            #edf7eb 100%
        );

    border-left:
        4px solid #48ac20;

    padding-left: 14px;
}



/* =========================================================
   6. SOLUTION LEFT BOTTOM SLOGAN
========================================================= */

.zxy-solution-slogan {
    margin-top: 18px;

    padding:
        14px 8px 0;

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}



.zxy-solution-slogan img {
    display: block;

    width: 39px;
    height: 39px;

    object-fit: contain;

    flex-shrink: 0;
}



.zxy-solution-slogan > div {
    min-width: 0;
}



.zxy-solution-slogan strong {
    display: block;

    margin: 0;

    color: #36566a;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 600;
}



.zxy-solution-slogan span {
    display: block;

    margin-top: 3px;

    color: #697787;

    font-size: 10px;

    line-height: 1.3;
}



/* =========================================================
   7. SOLUTION PANELS
========================================================= */

/*
 * 这里装：
 *
 * Solar Panel
 * Lithium Battery
 * E-Waste
 *
 * 每个 Panel 内同时包含：
 *
 * 中间标题
 * 中间文章列表
 * 右边大图
 * 右边下面三项
 *
 * 所以切换时整个区域一起切换。
 */
.zxy-solution-panels {
    min-width: 0;

    width: 100%;
}



.zxy-solution-panel {
    display: none;

    grid-template-columns:
        minmax(320px, .9fr)
        minmax(460px, 1.15fr);

    gap: 30px;

    width: 100%;

    min-width: 0;

    align-items: start;
}



.zxy-solution-panel.is-active {
    display: grid;
}



/* =========================================================
   8. SOLUTION CENTER
========================================================= */

.zxy-solution-center {
    min-width: 0;

    padding-top: 8px;
}



/* 小标题 */
.zxy-solution-eyebrow {
    margin:
        0 0 10px;

    color: #2a962c;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}



/* 主标题 */
.zxy-solution-center h3 {
    margin:
        0 0 18px;

    padding: 0;

    color: #064b40;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 25px;

    line-height: 1.25;

    font-weight: 600;
}



/* 链接区域 */
.zxy-solution-links {
    width: 100%;

    min-width: 0;
}



/* 单个 Solution */
.zxy-solution-links a {
    min-height: 55px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 15px;

    padding:
        8px 0;

    border-bottom:
        1px solid #dee5e1;

    color: #173b58;

    font-size: 13px;

    line-height: 1.35;

    font-weight: 400;

    text-decoration: none;

    transition:
        color .2s ease;
}



.zxy-solution-links a span {
    display: block;

    min-width: 0;
}



/* 链接箭头 */
.zxy-solution-links a b {
    display: block;

    flex-shrink: 0;

    color: #27962d;

    font-size: 22px;

    line-height: 1;

    font-weight: 400;

    transition:
        transform .2s ease;
}



.zxy-solution-links a:hover {
    color: #27962d;
}



.zxy-solution-links a:hover b {
    transform:
        translateX(4px);
}



/* =========================================================
   9. SOLUTION RIGHT
========================================================= */

.zxy-solution-right {
    min-width: 0;

    width: 100%;
}



/* =========================================================
   Solution Right Showcase

   这里是整张展示图片，
   完全不可点击。
========================================================= */

.zxy-solution-showcase {
    width: 100%;

    overflow: hidden;

    border-radius: 8px;

    background: #f2f6f3;

    /*
     * 不能点击
     */
    pointer-events: none;

    cursor: default;
}



.zxy-solution-showcase img {
    display: block;

    width: 100%;

    height: auto;

    /*
     * 参考你给的设计比例
     */
    aspect-ratio:
        2 / 1;

    object-fit: cover;

    object-position: center;
}



/* =========================================================
   10. SOLUTION BENEFITS
========================================================= */

.zxy-solution-benefits {
    margin-top: 12px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    width: 100%;

    align-items: stretch;
}



.zxy-solution-benefits > div {
    min-width: 0;

    min-height: 50px;

    padding:
        4px 12px;

    display: flex;

    align-items: center;

    gap: 9px;

    border-right:
        1px solid #dce4df;
}



.zxy-solution-benefits >
div:last-child {
    border-right: 0;
}



.zxy-solution-benefits img {
    display: block;

    width: 34px;
    height: 34px;

    object-fit: contain;

    flex-shrink: 0;
}



.zxy-solution-benefits span {
    display: block;

    min-width: 0;

    color: #53677b;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 400;
}



/* =========================================================
   11. INDUSTRY MEGA MENU
========================================================= */

.zxy-industry-mega {
    padding:
        18px 18px 15px;
}



/* 五张卡片 */
.zxy-industry-cards {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 6px;

    width: 100%;
}



/* 单张卡片 */
.zxy-industry-card {
    position: relative;

    display: block;

    min-width: 0;

    aspect-ratio:
        1.08 / 1;

    overflow: hidden;

    border-radius: 7px;

    background: #075747;

    color: #fff;

    text-decoration: none;
}



/* 背景图 */
.zxy-industry-bg {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform .4s ease;
}



/* 底部绿色渐变 */
.zxy-industry-mask {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,

            rgba(0, 50, 38, 0)
            20%,

            rgba(0, 73, 55, .35)
            55%,

            rgba(0, 67, 51, .96)
            100%
        );

    pointer-events: none;
}



/* 卡片文字区域 */
.zxy-industry-card-content {
    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 15px;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content:
        space-between;

    gap: 10px;
}



/* 图标 + 文字 */
.zxy-industry-card-main {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;
}



.zxy-industry-card-main > div {
    min-width: 0;
}



/* 圆形分类图标 */
.zxy-industry-icon {
    display: block;

    width: 40px;
    height: 40px;

    object-fit: contain;

    flex-shrink: 0;
}



/* PV-D / PV-MFG */
.zxy-industry-card strong {
    display: block;

    margin: 0;

    color: #fff;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 600;
}



/* 分类说明 */
.zxy-industry-card span {
    display: block;

    margin-top: 3px;

    color:
        rgba(
            255,
            255,
            255,
            .92
        );

    font-size: 9px;

    line-height: 1.3;

    font-weight: 400;
}



/* 圆形箭头 */
.zxy-industry-arrow {
    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #20a13b,
            #65ca2a
        );

    color: #fff;

    font-size: 18px;

    line-height: 1;

    font-weight: 400;

    transition:
        transform .2s ease;
}



/* Hover 图片微放大 */
.zxy-industry-card:hover
.zxy-industry-bg {
    transform:
        scale(1.045);
}



.zxy-industry-card:hover
.zxy-industry-arrow {
    transform:
        translateX(2px);
}



/*
 * 注意：
 *
 * Industry Mega Menu
 * 完全没有：
 *
 * 3 Articles Available
 */



/* =========================================================
   12. INDUSTRY BOTTOM BENEFITS
========================================================= */

.zxy-industry-benefits {
    margin-top: 18px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    width: 100%;
}



.zxy-industry-benefits > div {
    min-width: 0;

    padding:
        4px 25px;

    display: flex;

    align-items: center;

    gap: 12px;

    border-right:
        1px solid #dde4e0;
}



.zxy-industry-benefits >
div:last-child {
    border-right: 0;
}



.zxy-industry-benefits img {
    display: block;

    width: 36px;
    height: 36px;

    flex-shrink: 0;

    object-fit: contain;
}



.zxy-industry-benefits p {
    margin: 0;

    padding: 0;

    min-width: 0;
}



.zxy-industry-benefits strong {
    display: block;

    margin: 0;

    color: #07543f;

    font-size: 11px;

    line-height: 1.25;

    font-weight: 600;
}



.zxy-industry-benefits span {
    display: block;

    margin-top: 3px;

    color: #66777d;

    font-size: 9px;

    line-height: 1.3;

    font-weight: 400;
}



/* =========================================================
   13. <= 1400px

   对应现有：
   .warp-mb {
       width: 1170px;
   }
========================================================= */

@media screen and (max-width: 1400px) {


    .zxy-header {
        --zxy-mega-width: 1170px;
    }



    /* Solution 外层 */

    .zxy-solution-mega {
        padding: 18px;
    }



    .zxy-solution-mega-grid {
        grid-template-columns:
            235px
            minmax(0, 1fr);

        gap: 22px;
    }



    /* Solution 左边 */

    .zxy-solution-tab {
        min-height: 88px;

        grid-template-columns:
            47px
            minmax(0, 1fr)
            18px;

        gap: 11px;

        padding:
            13px 14px;
    }



    .zxy-solution-tab:hover,
    .zxy-solution-tab.is-active {
        padding-left: 11px;
    }



    .zxy-solution-tab-icon {
        width: 47px;
        height: 47px;
    }



    .zxy-solution-tab-icon img {
        max-width: 43px;
        max-height: 43px;
    }



    .zxy-solution-tab strong {
        font-size: 14px;
    }



    /* Solution 右 */

    .zxy-solution-panel {
        grid-template-columns:
            minmax(285px, .9fr)
            minmax(400px, 1.1fr);

        gap: 22px;
    }



    .zxy-solution-center h3 {
        font-size: 21px;
    }



    .zxy-solution-links a {
        min-height: 52px;

        font-size: 12px;
    }



    /* Industry */

    .zxy-industry-card strong {
        font-size: 14px;
    }



    .zxy-industry-benefits > div {
        padding:
            4px 15px;
    }

}



/* =========================================================
   14. <= 1200px

   对应现有：
   .warp-mb {
       width: 980px;
   }
========================================================= */

@media screen and (max-width: 1200px) {


    .zxy-header {
        --zxy-mega-width: 980px;
    }



    /* =========================
       Solution
    ========================= */

    .zxy-solution-mega {
        padding: 15px;
    }



    .zxy-solution-mega-grid {
        grid-template-columns:
            200px
            minmax(0, 1fr);

        gap: 16px;
    }



    .zxy-solution-tab {
        min-height: 80px;

        grid-template-columns:
            40px
            minmax(0, 1fr)
            15px;

        gap: 8px;

        padding:
            10px 11px;
    }



    .zxy-solution-tab:hover,
    .zxy-solution-tab.is-active {
        padding-left: 8px;
    }



    .zxy-solution-tab-icon {
        width: 40px;
        height: 40px;
    }



    .zxy-solution-tab-icon img {
        max-width: 38px;
        max-height: 38px;
    }



    .zxy-solution-tab strong {
        font-size: 13px;
    }



    .zxy-solution-tab-arrow {
        font-size: 18px;
    }



    .zxy-solution-slogan {
        padding-left: 3px;
        padding-right: 3px;
    }



    .zxy-solution-slogan img {
        width: 32px;
        height: 32px;
    }



    .zxy-solution-slogan strong {
        font-size: 10px;
    }



    .zxy-solution-slogan span {
        font-size: 8px;
    }



    /* =========================
       Solution Panel
    ========================= */

    .zxy-solution-panel {
        grid-template-columns:
            minmax(255px, .95fr)
            minmax(330px, 1.05fr);

        gap: 16px;
    }



    .zxy-solution-eyebrow {
        font-size: 8px;

        letter-spacing: 2px;
    }



    .zxy-solution-center h3 {
        margin-bottom: 12px;

        font-size: 18px;
    }



    .zxy-solution-links a {
        min-height: 48px;

        font-size: 11px;
    }



    .zxy-solution-benefits > div {
        padding:
            3px 8px;

        gap: 6px;
    }



    .zxy-solution-benefits img {
        width: 28px;
        height: 28px;
    }



    .zxy-solution-benefits span {
        font-size: 8px;
    }



    /* =========================
       Industry
    ========================= */

    .zxy-industry-mega {
        padding:
            14px 14px 12px;
    }



    .zxy-industry-card-content {
        left: 9px;
        right: 9px;
        bottom: 10px;

        gap: 6px;
    }



    .zxy-industry-card-main {
        gap: 6px;
    }



    .zxy-industry-icon {
        width: 30px;
        height: 30px;
    }



    .zxy-industry-card strong {
        font-size: 12px;
    }



    .zxy-industry-card span {
        font-size: 8px;
    }



    .zxy-industry-arrow {
        width: 27px;
        height: 27px;

        font-size: 14px;
    }



    .zxy-industry-benefits > div {
        padding:
            3px 8px;

        gap: 7px;
    }



    .zxy-industry-benefits img {
        width: 29px;
        height: 29px;
    }



    .zxy-industry-benefits strong {
        font-size: 9px;
    }



    .zxy-industry-benefits span {
        font-size: 8px;
    }

}



/* =========================================================
   15. <= 992px
   MOBILE / TABLET

   继续使用你现有的左侧 Drawer Menu。
========================================================= */

@media screen and (max-width: 992px) {


    /*
     * PC 上 li 是 static，
     * 手机恢复 relative，
     * 方便展开按钮定位。
     */
    .navlist > li.mega-solution,
    .navlist > li.mega-industry {
        position: relative;
    }



    /*
     * 手机不要 PC Hover Bridge
     */
    .navlist > li.mega-solution > a::before,
    .navlist > li.mega-industry > a::before {
        display: none;
    }



    /*
     * 手机不要 PC 一级箭头
     */
    .navlist > li.mega-solution > a::after,
    .navlist > li.mega-industry > a::after {
        display: none !important;
    }



    /* =====================================================
       Mobile Mega Toggle
    ===================================================== */

    .zxy-mega-toggle {
        position: absolute;

        top: 0;
        right: 0;

        display: block;

        width: 50px;
        height: 50px;

        margin: 0;

        padding: 0;

        border: 0;

        outline: 0;

        background:
            url(../images/jt.png)
            no-repeat
            center;

        background-size: 12px;

        cursor: pointer;

        transition:
            transform .25s ease;

        z-index: 10;
    }



    .is-mega-open >
    .zxy-mega-toggle {
        transform:
            rotate(180deg);
    }



    /* =====================================================
       Mobile Mega Panel
    ===================================================== */

    .zxy-mega-panel {
        position: static;

        display: none;

        width: 100%;

        max-width: none;

        margin: 0;

        padding:
            12px 0 18px;

        border: 0;

        border-top:
            2px solid #76b519;

        border-radius: 0;

        box-shadow: none;

        background: #fff;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: none;

        overflow: visible;

        transition: none;
    }



    .is-mega-open >
    .zxy-mega-panel {
        display: block;
    }



    /* =====================================================
       Solution Mobile
    ===================================================== */

    .zxy-solution-mega-grid {
        display: block;

        width: 100%;
    }



    /*
     * 左边三个分类
     */
    .zxy-solution-tabs {
        width: 100%;
    }



    .zxy-solution-tab {
        min-height: 60px;

        grid-template-columns:
            35px
            minmax(0, 1fr)
            17px;

        gap: 9px;

        padding:
            8px 10px;
    }



    .zxy-solution-tab:hover,
    .zxy-solution-tab.is-active {
        padding-left: 7px;
    }



    .zxy-solution-tab-icon {
        width: 34px;
        height: 34px;
    }



    .zxy-solution-tab-icon img {
        max-width: 32px;
        max-height: 32px;
    }



    .zxy-solution-tab strong {
        font-size: 12px;
    }



    .zxy-solution-tab-arrow {
        font-size: 17px;
    }



    /*
     * 手机隐藏左下 slogan，
     * 避免菜单过长。
     */
    .zxy-solution-slogan {
        display: none;
    }



    /* =====================================================
       Solution Mobile Panels
    ===================================================== */

    .zxy-solution-panels {
        padding-top: 15px;

        width: 100%;
    }



    .zxy-solution-panel {
        display: none;

        grid-template-columns:
            1fr;

        gap: 15px;

        width: 100%;
    }



    .zxy-solution-panel.is-active {
        display: grid;
    }



    .zxy-solution-center {
        padding: 0;
    }



    .zxy-solution-eyebrow {
        margin-bottom: 7px;

        font-size: 8px;

        letter-spacing: 2px;
    }



    .zxy-solution-center h3 {
        margin-bottom: 10px;

        font-size: 16px;

        line-height: 1.3;
    }



    .zxy-solution-links a {
        min-height: 45px;

        padding:
            7px 0;

        font-size: 11px;
    }



    /*
     * 手机展示图
     */
    .zxy-solution-showcase img {
        aspect-ratio:
            16 / 10;
    }



    /*
     * Tablet / Drawer 稍宽时
     * 三项继续横排
     */
    .zxy-solution-benefits {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }



    .zxy-solution-benefits > div {
        padding:
            5px 8px;
    }



    /* =====================================================
       Industry Mobile
    ===================================================== */

    .zxy-industry-mega {
        padding:
            12px 0 18px;
    }



    /*
     * 平板 / 侧栏宽度允许时：
     * 两列
     */
    .zxy-industry-cards {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 8px;
    }



    .zxy-industry-card {
        aspect-ratio:
            16 / 11;
    }



    .zxy-industry-card-content {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }



    .zxy-industry-icon {
        width: 35px;
        height: 35px;
    }



    .zxy-industry-card strong {
        font-size: 13px;
    }



    .zxy-industry-card span {
        font-size: 9px;
    }



    .zxy-industry-arrow {
        width: 30px;
        height: 30px;

        font-size: 15px;
    }



    /*
     * Industry 底部四项：
     * 平板 2 x 2
     */
    .zxy-industry-benefits {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        margin-top: 12px;
    }



    .zxy-industry-benefits > div {
        min-height: 52px;

        padding:
            7px 6px;

        border-right: 0;

        border-bottom:
            1px solid #e3e8e5;
    }



    .zxy-industry-benefits strong {
        font-size: 10px;
    }



    .zxy-industry-benefits span {
        font-size: 8px;
    }

}



/* =========================================================
   16. <= 600px
========================================================= */

@media screen and (max-width: 600px) {


    /* =====================================================
       Solution
    ===================================================== */

    .zxy-solution-center h3 {
        font-size: 15px;
    }



    .zxy-solution-links a {
        font-size: 10px;
    }



    /*
     * 三个 benefit 手机改为单列
     */
    .zxy-solution-benefits {
        grid-template-columns:
            1fr;
    }



    .zxy-solution-benefits > div {
        min-height: 43px;

        padding:
            6px 2px;

        border-right: 0;

        border-bottom:
            1px solid #e3e8e5;
    }



    .zxy-solution-benefits >
    div:last-child {
        border-bottom: 0;
    }



    .zxy-solution-benefits img {
        width: 30px;
        height: 30px;
    }



    .zxy-solution-benefits span {
        font-size: 9px;
    }



    /* =====================================================
       Industry
    ===================================================== */

    /*
     * 小屏幕单列
     */
    .zxy-industry-cards {
        grid-template-columns:
            1fr;
    }



    .zxy-industry-card {
        aspect-ratio:
            16 / 10;
    }



    .zxy-industry-card-content {
        left: 14px;
        right: 14px;
        bottom: 13px;
    }



    .zxy-industry-icon {
        width: 38px;
        height: 38px;
    }



    .zxy-industry-card strong {
        font-size: 14px;
    }



    .zxy-industry-card span {
        font-size: 9px;
    }



    /*
     * 底部四项单列
     */
    .zxy-industry-benefits {
        grid-template-columns:
            1fr;
    }



    .zxy-industry-benefits > div {
        min-height: 52px;

        padding:
            8px 4px;

        border-right: 0;

        border-bottom:
            1px solid #e3e8e5;
    }



    .zxy-industry-benefits >
    div:last-child {
        border-bottom: 0;
    }



    .zxy-industry-benefits img {
        width: 32px;
        height: 32px;
    }



    .zxy-industry-benefits strong {
        font-size: 10px;
    }



    .zxy-industry-benefits span {
        font-size: 8px;
    }

}



/* =========================================================
   17. <= 380px
========================================================= */

@media screen and (max-width: 380px) {


    .zxy-solution-tab {
        grid-template-columns:
            31px
            minmax(0, 1fr)
            15px;

        gap: 7px;
    }



    .zxy-solution-tab-icon {
        width: 30px;
        height: 30px;
    }



    .zxy-solution-tab-icon img {
        max-width: 28px;
        max-height: 28px;
    }



    .zxy-solution-tab strong {
        font-size: 11px;
    }



    .zxy-solution-center h3 {
        font-size: 14px;
    }



    .zxy-industry-card strong {
        font-size: 13px;
    }

}