/* 公共类 */
:root {
    /* ========== 字体系统 ========== */
    /* 字体家族 */
    --font-family-primary: 'MicrosoftYaHei', '微软雅黑', 'Source Han Sans', 'Source Han Sans', 'Microsoft YaHei', 'Alibaba-PuHuiTi', 'Alibaba-PuHuiTi';

    /* 字体大小 - 标题 */
    --font-size-title-xl: 56px;
    /* 超大标题 */
    --font-size-title-lg: 48px;
    /* 大标题 */
    --font-size-title-md: 40px;
    /* 中标题 */
    --font-size-title-sm: 36px;
    /* 小标题 */
    --font-size-title-: 32px;
    /* 超小标题 */
    --font-size-subtitle-lg: 30px;
    /* 大副标题 */
    --font-size-subtitle-md: 28px;
    /* 中副标题 */
    --font-size-subtitle-sm: 24px;
    /* 小副标题 */
    --font-size-subtitle-xs: 22px;
    /* 超小副标题 */
    /* 字体大小 - 正文 */
    --font-size-text-lg: 20px;
    /* 大正文 */
    --font-size-text-md: 18px;
    /* 中正文 */
    --font-size-text-base: 16px;
    /* 基础正文 */
    --font-size-text-sm: 14px;
    /* 小正文 */
    --font-size-text-xs: 12px;
    /* 超小正文 */
    --font-size-text-mini: 10px;
    /* 迷你正文 */

    /* 字体大小 - 功能 */
    --font-size-nav: 20px;
    /* 导航 */
    --font-size-logo: 28px;
    /* Logo */

    /* 字体权重 */
    --font-weight-light: 300;
    /* 轻量 */
    --font-weight-regular: 400;
    /* 常规 */
    --font-weight-medium: 500;
    /* 中等 */
    --font-weight-semibold: 600;
    /* 半粗 */
    --font-weight-bold: 700;
    /* 粗体 */

    /* 行高 */
    --line-height-tight: 1.2;
    /* 紧凑 */
    --line-height-normal: 1.5;
    /* 正常 */
    --line-height-relaxed: 1.8;
    /* 宽松 */
    --line-height-loose: 2;
    /* 松散 */

    /* ========== 颜色系统 ========== */
    /* 品牌颜色 */
    --color-brand-primary: #0066cc;
    /* 主品牌色 */
    --color-brand-primary-hover: #005CAD;
    /* 主品牌色 hover */
    --color-brand-secondary: #0075C2;
    /* 次品牌色 */

    /* 功能颜色 */
    --color-accent-light: #e6f0f8;
    /* 浅色强调 */
    --color-accent-light-hover: #c5dded;
    /* 浅色强调 hover */


    /* 深色强调 */
    --color-accent-dark: #EF3132;
    /* 深色强调 hover */
    --color-accent-dark-hover: #D92626;

    /* 中性颜色 */
    --color-neutral-900: #1D2129;
    /* 最深中性色 */
    --color-neutral-800: #343A40;
    /* 深色中性色 */
    --color-neutral-600: #7B7F8F;
    /* 中色中性色 */
    --color-neutral-400: #E6E6E6;
    /* 浅色中性色 */
    --color-neutral-300: #F0F0F0;
    /* 更浅中性色 */
    --color-neutral-100: #f8f9fa;
    /* 最浅中性色 */

    /* 文本颜色 */
    --color-text-primary: #1D2129;
    /* 主文本色 */
    --color-text-secondary: #858689;
    /* 次文本色 */
    --color-text-tertiary: #E6E6E6;
    /* 第三文本色 */
    --color-text-light: #fff;
    /* 浅色文本 */

    /* 边框颜色 */
    --color-border-light: #D1D1D1;
    /* 浅色边框 */
    --color-border-medium: #E6E6E6;
    /* 中色边框 */
    --color-border-dark: #7B7F8F;
    /* 深色边框 */

    /* 基础颜色 */
    --color-white: #fff;
    /* 白色 */
    --color-black: #000;
    /* 黑色 */

    /* 布局颜色 */
    --color-footer-bg: #333333;
    /* 页脚背景 */
    --color-footer-border: rgba(229, 229, 229, 0.13);
    /* 页脚边框 */

    /* ========== 间距系统 ========== */
    /* 基础间距 */
    --spacing-0: 0px;
    /* 无间距 */
    --spacing-1: 1px;
    /* 1px */
    --spacing-2: 2px;
    /* 2px */
    --spacing-4: 4px;
    /* 4px (实际5px) */
    --spacing-8: 8px;
    /* 8px */
    --spacing-10: 10px;
    /* 10px */
    --spacing-12: 12px;
    /* 12px */
    --spacing-14: 14px;
    /* 14px */
    --spacing-15: 15px;
    /* 15px */
    --spacing-16: 16px;
    /* 16px */
    --spacing-20: 20px;
    /* 20px */
    --spacing-24: 24px;
    /* 24px */
    --spacing-30: 30px;
    /* 30px */
    --spacing-40: 40px;
    /* 40px */
    --spacing-60: 60px;
    /* 60px */
    --spacing-80: 80px;
    /* 80px */
    --spacing-100: 100px;
    /* 100px */
    --spacing-120: 120px;
    /* 120px */
    /* 布局间距 */
    --spacing-section: 128px;
    /* 区块间距 */
    --spacing-container: 64px;
    /* 容器间距 */
    --spacing-component: 32px;
    /* 组件间距 */
    /* ========== 布局系统 ========== */
    /* 容器尺寸 */
    --container-max-width: 1440px;
    /* 容器最大宽度 */

    /* 导航栏 */
    --navbar-height: 80px;
    /* 导航栏高度 */
    --navbar-height-mobile: 80px;
    /* 移动端导航栏高度 */

    /* 页脚 */
    --footer-height: 200px;
    /* 页脚高度 */

    /* ========== 动画系统 ========== */
    /* 动画时长 */
    --animation-duration-fast: 0.3s;
    /* 快速动画 */
    --animation-duration-normal: 0.5s;
    /* 正常动画 */
    --animation-duration-slow: 0.8s;
    /* 慢速动画 */

    /* 动画缓动 */
    --animation-ease-in-out: ease-in-out;
    /* 缓入缓出 */
    --animation-ease-out: ease-out;
    /* 缓出 */
    --animation-ease-in: ease-in;
    /* 缓入 */

    /* ========== 响应式系统 ========== */
    /* 断点 */
    --breakpoint-xs: 480px;
    /* 超小屏幕 */
    --breakpoint-sm: 768px;
    /* 小屏幕 */
    --breakpoint-md: 992px;
    /* 中等屏幕 */
    --breakpoint-lg: 1200px;
    /* 大屏幕 */
    --breakpoint-xl: 1440px;
    /* 超大屏幕 */
}

@media screen and (max-width: 768px) {
    :root {
        /* 移动端导航栏高度 */
        --navbar-height: var(--navbar-height-mobile);

        /* 移动端页脚高度 */
        --footer-height: 2.4rem;

        /* 移动端边距 */
        --margin-sm: 0.10667rem;
        --margin-md: 0.16rem;
        --margin-lg: 0.21333rem;

        /* 移动端字体大小 - 标题 */
        --font-size-title-xl: 0.69333rem;
        /* 超大标题 */
        --font-size-title-lg: 0.64rem;
        /* 大标题 */
        --font-size-title-md: 0.58667rem;
        /* 中标题 */
        --font-size-title-sm: 0.56rem;
        /* 小标题 */
        --font-size-title-xs: 0.53333rem;
        /* 超小标题 */
        --font-size-subtitle-lg: 0.56rem;
        /* 大副标题 */
        --font-size-subtitle-md: 0.50667rem;
        /* 中副标题 */
        --font-size-subtitle-sm: 0.45333rem;
        /* 小副标题 */
        --font-size-subtitle-xs: 0.42667rem;
        /* 超小副标题 */

        /* 移动端字体大小 - 正文 */
        --font-size-text-lg: 0.42667rem; 
        /* 大正文 */
        --font-size-text-md: 0.4rem;
        /* 中正文 */
        --font-size-text-base: 0.37333rem;
        /* 基础正文 */
        --font-size-text-sm: 0.37333rem;
        /* 小正文 */
        --font-size-text-xs: 0.34667rem;
        /* 超小正文 */
        --font-size-text-mini: 0.32rem;
        /* 迷你正文 */

        /* 移动端字体大小 - 功能 */
        --font-size-nav: 0.34667rem;
        /* 导航 */
        --font-size-logo: 0.42667rem;
        /* Logo */
        /* 基础间距 */
        --spacing-0: 0rem;
        /* 无间距 */
        --spacing-1: 0.01333rem;
        /* 1px */
        --spacing-2: 0.02667rem;
        /* 2px */
        --spacing-4: 0.05333rem;
        /* 4px (实际5px) */
        --spacing-8: 0.10667rem;
        /* 8px */
        --spacing-10: 0.13333rem;
        /* 10px */
        --spacing-12: 0.16rem;
        /* 12px */
        --spacing-14: 0.18667rem;
        /* 14px */
        --spacing-15: 0.2rem;
        /* 15px */
        --spacing-16: 0.21333rem;
        /* 16px */
        --spacing-20: 0.26667rem;
        /* 20px */
        --spacing-24: 0.32rem;
        /* 24px */
        --spacing-30: 0.4rem;
        /* 30px */
        --spacing-40: 0.53333rem;
        /* 40px */
        --spacing-60: 0.8rem;
        /* 60px */
        --spacing-80: 1.06667rem;
        /* 80px */
        --spacing-100: 1.33333rem;
        /* 100px */
        --spacing-120: 1.6rem;
        /* 120px */

        /* 导航栏 */
        --navbar-height: 1.56667rem;
        /* 导航栏高度 */
        --navbar-height-mobile: 1.06667rem;

        /* 布局间距 */
        --spacing-section: 0.8rem;
        /* 区块间距 */
        --spacing-container: 0.26667rem;
        /* 容器间距 */
        --spacing-component: 0.21333rem;
        /* 组件间距 */

        /* 移动端容器尺寸 */
        --container-max-width: 100%;
    }
}

/* 定位类 */
.relative {
    position: relative;
}

/*  flex 布局 */
.flex {
    display: flex;
    align-items: center;
}

.flex-j-start {
    justify-content: flex-start;
}

.flex-j-center {
    justify-content: center;
}

.flex-j-end {
    justify-content: flex-end;
}

.flex-j-between {
    justify-content: space-between;
}

.flex-j-around {
    justify-content: space-around;
}

.flex-a-start {
    align-items: flex-start;
}

.flex-a-end {
    align-items: flex-end;
}

.flex-a-center {
    align-items: center;
}

.flex-a-stretch {
    align-items: stretch;
}

.flex-c {
    display: flex;
    flex-direction: column;
}

.flex-r-gap-5 {
    display: flex;
    gap: var(--spacing-4);
    align-items: center;
}

.flex-r-gap-10 {
    display: flex;
    gap: var(--spacing-10);
    align-items: center;
    justify-content: space-between;
}

.flex-r-gap-20 {
    display: flex;
    gap: var(--spacing-20);
    align-items: center;
    justify-content: space-between;
}

.flex-c-gap-10 {
    display: flex;
    gap: var(--spacing-10);
    flex-direction: column;
}

.flex-c-gap-20 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
}

.flex-c-gap-30 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-30);
}

/* 文本类 */
.ellipsis {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.ellipsis-2 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ellipsis-3 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.ellipsis-4 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.ellipsis-5 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.ellipsis-6 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

.ellipsis-7 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
}

.ellipsis-8 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    overflow: hidden;
}

.ellipsis-9 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 9;
    overflow: hidden;
}

.z-index--1 {
    position: relative;
    z-index: -1;
}

.height-100 {
    height: 100%;
}

h1,
h1 a {
    font-size: var(--font-size-title-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    transition: all var(--animation-duration-fast) var(--animation-ease-in-out);
}

h1 a:hover {
    color: var(--color-brand-primary);
}

h2,
h2 a {
    font-size: var(--font-size-title-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    transition: all var(--animation-duration-fast) var(--animation-ease-in-out);
}

h2 a:hover {
    color: var(--color-brand-primary);
}


h3,
h3 a {
    font-size: var(--font-size-title-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    transition: all var(--animation-duration-fast) var(--animation-ease-in-out);
}

h3 a:hover {
    color: var(--color-brand-primary);
}

h4,
h4 a {
    font-size: var(--font-size-subtitle-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    transition: all var(--animation-duration-fast) var(--animation-ease-in-out);
}

h4 a:hover {
    color: var(--color-brand-primary);
}

h5,
h5 a {
    font-size: var(--font-size-text-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    transition: all var(--animation-duration-fast) var(--animation-ease-in-out);
}

h5 a:hover {
    color: var(--color-brand-primary);
}

h6,
h6 a {
    font-size: var(--font-size-text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    transition: all var(--animation-duration-fast) var(--animation-ease-in-out);
}

h6 a:hover {
    color: var(--color-brand-primary);
}

.p1 {
    text-indent: 2em;
    font-size: var(--font-size-text-lg);
    line-height: var(--line-height-loose);
}

.p2 {
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-loose);
}

.p3 {
    font-size: var(--font-size-text-xs);
    line-height: var(--line-height-loose);
}

.line-height-3 {
    line-height: 3;
}

.line-height-2 {
    line-height: 2;
}

.line-height-1-5 {
    line-height: 1.5;
}


/* 颜色类 */
.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-white {
    color: var(--color-white);
}

.text-black {
    color: var(--color-black);
}

.text-333 {
    color: #333;
}

.text-666 {
    color: #666;
}

.text-999 {
    color: #999;
}

/* 图片类 */
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.img-cover-center {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.img-contain-center {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* 边距类 */
.margin-auto {
    margin: 0 auto;
}

.slideInUp {
    animation: slideInUp 0.8s ease-out;
}

.wow {
    visibility: hidden;
}

.speech-item {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

.speech-item:nth-child(1) {
    animation-delay: 0.1s;
}

.speech-item:nth-child(2) {
    animation-delay: 0.2s;
}

.speech-item:nth-child(3) {
    animation-delay: 0.3s;
}

.speech-item:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 动画 */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* @media screen and (max-width: 768px) {

    .xd-flex-c {
        flex-direction: column;
    }

    .xd-hidden {
        display: none;
    }
} */