:root {

    --bs-font-sans-serif: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    --bs-font-monospace: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;


    /* ========================================
   图谱光电 - 统一颜色系统优化
   ======================================== */

    /* ========= 主色调系统 ========= */
    --primary-color: #2F80ED; /* 主品牌色 - 科技蓝 */
    --primary-hover: #1c6dd0; /* 主色悬停态 */
    --primary-light: #5fa3f5; /* 主色浅色版 */
    --primary-dark: #1a5bb8; /* 主色深色版 */
    --primary-alpha-10: rgba(47, 128, 237, 0.1);
    --primary-alpha-20: rgba(47, 128, 237, 0.2);
    --primary-alpha-90: rgba(47, 128, 237, 0.9);

    /* ========= 辅助色系统 ========= */
    --secondary-color: #6c757d; /* 中性灰 */
    --secondary-light: #8d959d; /* 浅灰文字 */
    --secondary-dark: #495057; /* 深灰文字 */

    --accent-color: #28a745; /* 成功绿（替代橙色，更专业） */
    --warning-color: #ffc107; /* 警告黄 */
    --danger-color: #dc3545; /* 错误红 */

    /* ========= 背景色系统 ========= */
    --bg-white: #ffffff; /* 纯白背景 */
    --bg-light: #f8f9fa; /* 浅灰背景 */
    --bg-section: #f4f7fc; /* 区块背景（带一点蓝调） */
    --bg-card: #ffffff; /* 卡片背景 */
    --bg-hover: #f1f5f9; /* 悬停背景 */

    /* ========= 文字色系统 ========= */
    --text-primary: #1a202c; /* 主要文字 */
    --text-secondary: #4a5568; /* 次要文字 */
    --text-muted: #718096; /* 辅助文字 */
    --text-light: #a0aec0; /* 浅色文字 */
    --text-white: #ffffff; /* 白色文字 */

    /* ========= 边框色系统 ========= */
    --border-light: #e2e8f0; /* 浅色边框 */
    --border-medium: #cbd5e0; /* 中等边框 */
    --border-dark: #a0aec0; /* 深色边框 */

    /* ========= 导航系统颜色 ========= */
    --nav-bg: rgba(255, 255, 255, 0.95); /* 导航背景（半透明） */
    --nav-text: #333333; /* 导航文字 */
    --nav-hover: var(--primary-color); /* 导航悬停 */
    --nav-active: var(--primary-dark); /* 导航激活 */

    /* ========= 超级菜单颜色 ========= */
    --megamenu-bg: #ffffff; /* 菜单背景 */
    --megamenu-border: #e2e8f0; /* 菜单边框 */
    --megamenu-sidebar-bg: #f8fafc; /* 侧边栏背景 */
    --megamenu-hover: var(--bg-hover); /* 菜单项悬停 */

    /* ========= 页脚颜色 ========= */
    --footer-bg: #1a202c; /* 页脚背景 */
    --footer-text: #a0aec0; /* 页脚文字 */
    --footer-link: #cbd5e0; /* 页脚链接 */
    --footer-link-hover: var(--primary-light);

    /* ========= 渐变系统 ========= */
    --gradient-primary: linear-gradient(135deg, #2F80ED 0%, #1c6dd0 100%);
    --gradient-hero: linear-gradient(135deg, rgba(47, 128, 237, 0.9) 0%, rgba(28, 109, 208, 0.9) 100%);
    --gradient-card: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    --gradient-footer: linear-gradient(180deg, #1a202c 0%, #2d3748 100%);

    /* ========= 阴影系统 ========= */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.16);

    /* ========= 圆角系统 ========= */
    --radius-sm: 6px; /* 小圆角 */
    --radius-md: 12px; /* 中等圆角 */
    --radius-lg: 20px; /* 大圆角 */
    --radius-xl: 32px; /* 超大圆角 */
    --radius-full: 50%; /* 圆形 */

    /* ========= 动画系统 ========= */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ========= 间距系统 ========= */
    --space-xs: 0.25rem; /* 4px */
    --space-sm: 0.5rem; /* 8px */
    --space-md: 1rem; /* 16px */
    --space-lg: 1.5rem; /* 24px */
    --space-xl: 2rem; /* 32px */
    --space-2xl: 3rem; /* 48px */
    --space-3xl: 4rem; /* 64px */

    /* ========= 字体系统 ========= */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */

    /* ========================================
       深色模式支持（可选）
       ======================================== */
    @media (prefers-color-scheme: dark) {
        :root {
            --bg-white: #1a202c;
            --bg-light: #2d3748;
            --bg-section: #2a3142;
            --text-primary: #f7fafc;
            --text-secondary: #e2e8f0;
            --text-muted: #a0aec0;
            --border-light: #4a5568;
            --border-medium: #718096;
        }
    }


    /* ========================================
       响应式颜色调整
       ======================================== */
    @media (max-width: 768px) {
        :root {
            /* 移动端可以稍微调整阴影，减少性能消耗 */
            --shadow-md: var(--shadow-sm);
            --shadow-lg: var(--shadow-md);
        }
    }

    /* ========================================
       高对比度模式支持（无障碍）
       ======================================== */
    @media (prefers-contrast: high) {
        :root {
            --primary-color: #1a5bb8;
            --text-primary: #000000;
            --text-secondary: #333333;
            --border-light: #666666;
        }
    }


    /* =============================================================================================================== */


    --product-ban: url('/assets/images/banner/product_ban.jpg');

    --learn-ban: url('/assets/images/banner/learn_ban.jpg');

    --3d-files-ban: url('/assets/images/banner/3DFiles_ban.jpg');

    --FAQ_ban: url('/assets/images/banner/FAQ_banner.jpg');

    --blog-ban: url('/assets/images/banner/blog_banner.jpg');
    --oem_ban: url('/assets/images/banner/oem_ban.jpg');


    --download_ban: url('/assets/images/banner/download_banner.jpg');

    --manual_ban:url('/assets/images/banner/manuals_banner.jpg');

    --job_ban: url('/assets/images/banner/job_banner.jpg');


    /* 科学成像 - Scientific Imaging --start */
    --Spatial_ban: url('/assets/images/banner/Spatial_ban.jpg');
    --sCMOS_ban: url('/assets/images/banner/sCMOS_ban.jpg');
    --SWIR_ban: url('/assets/images/banner/SWIR_ban.jpg');


    /* 增强成像 - Enhanced Imaging --start */
    --Enhanced_ban: url('/assets/images/banner/Enhanced_ban.jpg');
    --Microscopy_ban: url('/assets/images/banner/Microscopy_ban.jpg');
    --Industry_ban: url('/assets/images/banner/Industry_ban.jpg');
    --LowLight_ban: url('/assets/images/banner/LowLight_ban.jpg');
    --Accessory_ban: url('/assets/images/banner/Accessory_ban.jpg');


    /* 智能成像 - Intelligent Imaging --start */
    --Intelligent_ban: url('/assets/images/banner/Intelligent_ban.jpg');
    --Autofocus_ban: url('/assets/images/banner/Autofocus_ban.jpg');
    --Multi-Iface_ban: url('/assets/images/banner/Multi-Iface_ban.jpg');
    --Microscope_ban: url('/assets/images/banner/Microscope_ban.jpg');
    --Intell-Imaging_ban: url('/assets/images/banner/Intell-Imaging_ban.jpg');

    --proSel_ban: url('/assets/images/banner/productSelect_banner.jpg');




    /* 各页面banner--end*/


    /*导航栏 - start*/

    --learn_nav: url('/assets/images/banner/learn_ban-mo.jpg');
    --solution_nav: url('/assets/images/service/solution_bg3.jpg');

    --Spatial_nav: url('/assets/images/banner/Spatial_ban-mo.jpg');
    --Enhanced_nav: url('/assets/images/banner/Enhanced_ban-mo.jpg');
    --Intelligent_nav: url('/assets/images/banner/Intelligent_ban-mo.jpg');


    --FAQ_nav: url('/assets/images/banner/FAQ_banner-mo.jpg');
    --proSel_nav: url('/assets/images/banner/productSelect_banner-mo.jpg');
    --download_nav: url('/assets/images/banner/download_banner-mo.jpg');
    --bbs_nav: url('/assets/images/bbs_nav_ban_mo.jpg');
    --contact_nav: url('/assets/images/contact_nav_ban.jpg');
    --job_nav: url('/assets/images/job_nav_ban.jpg');


    /*导航栏 - end*/


    table td {
        border: 1px solid #cad9ea;
        color: var(--text-primary);
        text-align: center;
    }

    table th{
        border: 1px solid #cad9ea;
        background: var(--primary-color);
        color: var(--text-white);
        text-align: center;
    }


}


/* 手机端banner */
@media only screen and (max-width: 750px) {
    :root {

        --blog-ban-23: url('../blog_img/blog_23_banner-mo.jpg');

        --FAQ_ban: url('/assets/images/banner/FAQ_banner-mo.jpg');

        --oem_ban: url('/assets/images/banner/oem_ban.jpg');

        --download_ban: url('/assets/images/banner/download_banner-mo.jpg');

        --manual_ban: url('/assets/images/banner/manuals_banner-mo.jpg');


        --product-ban: url('/assets/images/banner/product_ban-mo.jpg');


        --learn-ban: url('/assets/images/banner/learn_ban-mo.jpg');

        --3d-files-ban: url('/assets/images/banner/3DFiles_ban-mo.jpg');

        --solution-ban: url('/assets/images/service/solution_bg3.jpg');


        /* 科学成像 - Scientific Imaging --start */
        --Spatial_ban: url('/assets/images/banner/Spatial_ban-mo.jpg');
        --sCMOS_ban: url('/assets/images/banner/sCMOS_ban-mo.jpg');
        --SWIR_ban: url('/assets/images/banner/SWIR_ban-mo.jpg');


        /* 增强成像 - Enhanced Imaging --start */
        --Enhanced_ban: url('/assets/images/banner/Enhanced_ban-mo.jpg');
        --LowLight_ban: url('/assets/images/banner/LowLight_ban-mo.jpg');
        --Microscopy_ban: url('/assets/images/banner/Microscopy_ban-mo.jpg');
        --Industry_ban: url('/assets/images/banner/Industry_ban-mo.jpg');
        --Accessory_ban: url('/assets/images/banner/Accessory_ban-mo.jpg');


        /* 智能成像 - Intelligent Imaging --start */
        --Intelligent_ban: url('/assets/images/banner/Intelligent_ban-mo.jpg');
        --Microscope_ban: url('/assets/images/banner/Microscope_ban-mo.jpg');
        --Autofocus_ban: url('/assets/images/banner/Autofocus_ban-mo.jpg');
        --Multi-Iface_ban: url('/assets/images/banner/Multi-Iface_ban-mo.jpg');
        --Intell-Imaging_ban: url('/assets/images/banner/Intell-Imaging_ban-mo.jpg');
    }
}

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

}

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

}


/* 扩展的Bootstrap容器响应式断点 */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-xxxl,
.container-xxxxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

/* 原有断点保持不变 */
@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px;
    }
}

/* 扩展的断点 */
@media (min-width: 1600px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1520px;
    }
}

@media (min-width: 1700px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1620px;
    }
}

@media (min-width: 1800px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1720px;
    }
}

@media (min-width: 1900px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1820px;
    }
}

/* 新增超大屏幕断点 */
@media (min-width: 2200px) {
    .container-xxxl, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1920px;
    }
}

@media (min-width: 2400px) {
    .container-xxxl, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 2100px;
    }
}

@media (min-width: 2560px) {
    .container-xxxxl, .container-xxxl, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 2200px;
    }
}

/* 4K显示器支持 */
@media (min-width: 3840px) {
    .container-xxxxl, .container-xxxl, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 3640px;
    }
}



/* 为了保持一致性，添加相应的栅格系统扩展 */
@media (min-width: 2560px) {
    .col-xxxxl-auto { flex: 0 0 auto; width: auto; }
    .col-xxxxl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .col-xxxxl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .col-xxxxl-3 { flex: 0 0 auto; width: 25%; }
    .col-xxxxl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-xxxxl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xxxxl-6 { flex: 0 0 auto; width: 50%; }
    .col-xxxxl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-xxxxl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-xxxxl-9 { flex: 0 0 auto; width: 75%; }
    .col-xxxxl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xxxxl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xxxxl-12 { flex: 0 0 auto; width: 100%; }
}

/* 添加实用的显示/隐藏类 */
@media (min-width: 1600px) {
    .d-xxxl-none { display: none !important; }
    .d-xxxl-inline { display: inline !important; }
    .d-xxxl-inline-block { display: inline-block !important; }
    .d-xxxl-block { display: block !important; }
    .d-xxxl-grid { display: grid !important; }
    .d-xxxl-table { display: table !important; }
    .d-xxxl-table-row { display: table-row !important; }
    .d-xxxl-table-cell { display: table-cell !important; }
    .d-xxxl-flex { display: flex !important; }
    .d-xxxl-inline-flex { display: inline-flex !important; }
}

@media (min-width: 2560px) {
    .d-xxxxl-none { display: none !important; }
    .d-xxxxl-inline { display: inline !important; }
    .d-xxxxl-inline-block { display: inline-block !important; }
    .d-xxxxl-block { display: block !important; }
    .d-xxxxl-grid { display: grid !important; }
    .d-xxxxl-table { display: table !important; }
    .d-xxxxl-table-row { display: table-row !important; }
    .d-xxxxl-table-cell { display: table-cell !important; }
    .d-xxxxl-flex { display: flex !important; }
    .d-xxxxl-inline-flex { display: inline-flex !important; }
}

/* 间距工具类扩展 */
@media (min-width: 1600px) {
    .mt-xxxl-0 { margin-top: 0 !important; }
    .mt-xxxl-1 { margin-top: 0.25rem !important; }
    .mt-xxxl-2 { margin-top: 0.5rem !important; }
    .mt-xxxl-3 { margin-top: 1rem !important; }
    .mt-xxxl-4 { margin-top: 1.5rem !important; }
    .mt-xxxl-5 { margin-top: 3rem !important; }

    .mb-xxxl-0 { margin-bottom: 0 !important; }
    .mb-xxxl-1 { margin-bottom: 0.25rem !important; }
    .mb-xxxl-2 { margin-bottom: 0.5rem !important; }
    .mb-xxxl-3 { margin-bottom: 1rem !important; }
    .mb-xxxl-4 { margin-bottom: 1.5rem !important; }
    .mb-xxxl-5 { margin-bottom: 3rem !important; }

    .pt-xxxl-0 { padding-top: 0 !important; }
    .pt-xxxl-1 { padding-top: 0.25rem !important; }
    .pt-xxxl-2 { padding-top: 0.5rem !important; }
    .pt-xxxl-3 { padding-top: 1rem !important; }
    .pt-xxxl-4 { padding-top: 1.5rem !important; }
    .pt-xxxl-5 { padding-top: 3rem !important; }

    .pb-xxxl-0 { padding-bottom: 0 !important; }
    .pb-xxxl-1 { padding-bottom: 0.25rem !important; }
    .pb-xxxl-2 { padding-bottom: 0.5rem !important; }
    .pb-xxxl-3 { padding-bottom: 1rem !important; }
    .pb-xxxl-4 { padding-bottom: 1.5rem !important; }
    .pb-xxxl-5 { padding-bottom: 3rem !important; }
}

/* 优化容器在不同屏幕上的内边距 */
@media (min-width: 1600px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-xxxl,
    .container-xxxxl {
        --bs-gutter-x: 2rem;
    }
}

@media (min-width: 2560px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-xxxl,
    .container-xxxxl {
        --bs-gutter-x: 3rem;
    }
}



/* 保持标准布局直到2000px */
@media (min-width: 1400px) and (max-width: 1999px) {
    .container .row .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}

/* 只在2000px以上才扩展到6列 */
@media (min-width: 2560px) {
    .col-xxxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
}

/* 产品卡片间距优化 */
.product-item-wrap {
    padding: 0 15px;
    margin-bottom: 30px;
}

/* 确保产品卡片的最小和最大宽度合理 */
.product-item {
    min-width: 260px;
    max-width: 380px;
    margin: 0 auto;
}

/* 针对超大屏幕的容器宽度限制 */
@media (min-width: 2560px) {
    .product-grid-container {
        max-width: 2400px;
        margin: 0 auto;
        padding: 0 30px;
    }
}