/* --- 1. 全局定义与复位 --- */
    :root {
        --primary-blue: #003366;
        --secondary-blue: #0056b3;
        --accent-gold: #c5a059;
        --light-bg: #f4f7f9;
        --text-dark: #2d3436;
        --white: #ffffff;
    }
    
    /* --- 2. 容器与布局 --- */
    .container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px; /* 解决手机端左右留白 */
    }

 

   /* Banner */
        .hero, .page-banner { min-height: 180px;    padding-top: 0px;!important
    height: 300px;!important } /* 手机端 Banner 比例调优 */
        .hero h1 { font-size: 22px !important; }

    /* --- 5. 图文介绍 (Intro) --- */
    .intro-section { padding: 80px 10px; }
    .intro-grid { 
        display: flex; 
        align-items: center; 
        gap: 60px; /* 电脑端左右间距 */
    }
    .intro-img { flex: 0 0 45%; } /* 图片占45% */
    .intro-img img { width: 100%; border-radius: 10px; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
    .intro-content { flex: 1; }
    .intro-content h2 { color: var(--primary-blue); margin-bottom: 20px; font-size: 28px; }

    /* --- 6. 核心优势 (Values) --- */
    .values-section { background: var(--light-bg); padding: 80px 0; }
    .section-title { text-align: center; margin-bottom: 50px; }
    .values-grid { 
        display: grid; 
        grid-template-columns: repeat(4, 1fr); 
        gap: 25px; 
    }
    .value-card { 
        background: var(--white); 
        padding: 40px 20px; 
        text-align: center; 
        border-radius: 8px; 
        transition: 0.3s; 
    }
    .value-card:hover { transform: translateY(-10px); }
    .value-card i { font-size: 40px; color: var(--secondary-blue); margin-bottom: 15px; }

    /* --- 7. 发展历程 (Timeline) --- */
    .timeline-section { padding: 80px 0; }
    .timeline { position: relative; max-width: 900px; margin: 0 auto; padding: 20px 0; }
    /* 中间竖线 */
    .timeline::after { 
        content: ''; 
        position: absolute; 
        width: 2px; 
        background: #eee; 
        top: 0; bottom: 0; 
        left: 50%; 
        margin-left: -1px; 
    }

    .timeline-item { 
        position: relative; 
        width: 50%; 
        padding: 20px 40px; 
    }
    /* 时间点圆圈 */
    .timeline-item::after { 
        content: ''; 
        position: absolute; 
        width: 16px; height: 16px; 
        background: var(--accent-gold); 
        border: 4px solid var(--white); 
        border-radius: 50%; 
        top: 24px; 
        z-index: 2; 
    }

    .left { left: 0; text-align: right; }
    .left::after { right: -8px; }
    .right { left: 50%; text-align: left; }
    .right::after { left: -8px; }

    .timeline-date { font-weight: bold; color: var(--primary-blue); font-size: 20px; margin-bottom: 5px; }

    /* --- 8. 响应式适配 (手机端 768px 以下) --- */
    @media (max-width: 768px) {

      /* Banner 手机端适配 */
        .page-banner { min-height: 250px; padding-top: 60px; }
        .page-banner h1 { font-size: 28px !important; }

       /* 手机端图文转为上下结构 */
        .intro-grid { flex-direction: column; gap: 20px; }
        .intro-img { flex: 0 0 100%; }

        /* 核心优势转为两列 */
        .values-grid { grid-template-columns: repeat(2, 1fr); }

        /* 时间轴全部靠左 (核心修正) */
        .timeline::after { left: 20px; } /* 竖线移到左侧 */
        .timeline-item { 
            width: 100% !important; 
            left: 0 !important; 
            text-align: left !important; 
            padding-left: 50px !important; 
            padding-right: 0 !important;
        }
        .timeline-item::after { left: 12px !important; right: auto !important; }
    }

    @media (max-width: 480px) {
        .values-grid { grid-template-columns: 1fr; }
    }