/* 响应式设计 */
@media (min-width: 768px) {
    .navbar .container {
        /* 方法1: 使用 vw 单位进行线性缩放 (推荐) */
        height: calc(45px + (100 - 80) * ((100vw - 320px) / (768 - 320)));

        /* 方法2 (更简洁现代): 使用 clamp() 函数设定一个缩放范围 */
        /* height: clamp(60px, 12vw, 90px); */

        /* 确保内容在高度变化后仍然垂直居中 */
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
    }

    /* 同时，Logo图片的高度也需要成比例缩放 */
    .navbar .logo img {
        /* 使用相同的逻辑，例如从150px缩小到100px */
        width: calc(20px + (150 - 100) * ((100vw - 320px) / (768 - 320)));
        /* 或者使用 clamp() */
        /* width: clamp(100px, 25vw, 150px); */
        height: auto;
        /* 保持宽高比 */
    }

    .nav-links ul li a {
        font-size: clamp(12px, 1.2vw, 16px);
    }

    .nav-links ul {
        display: flex;
        gap: clamp(10px, 2vw, 20px);
        /* 最小值12px，理想值2vw，最大值25px */
    }

    .nav-links li {
        margin-left: clamp(10px, 1.2vw, 30px);
        /* 最小值15px，理想值1.2vw，最大值30px */
        position: relative;
    }

    .company-name {
        margin-left: clamp(25px, 1.2vw, 50px);
        /* 大屏幕上左间距更小 */
    }

    .company-name__link {
        font-size: clamp(16px, 1.5vw, 24px);
        /* 大屏幕上文字更小 */
    }
}

@media (max-width: 768px) {
    .navbar .container {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 20px;
        /* 添加左右内边距，避免贴边 */
    }

    .company-name {
        margin-left: 5px;
    }

    .company-name__link {
        font-size: 16px;
    }

    .nav-links {
        position: fixed;
        top: 100px;
        left: -100%;
        width: 50%;
        height: calc(100vh - 70px);
        background-color: #fff;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        padding: 20px;
        transform: translateX(0%);
    }

    .navbar .logo img {
        width: 100px;
        height: auto;
        /* 保持宽高比 */
    }

    .nav-links.active {
        left: 0;
    }

    .nav-links ul {
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .nav-links li {
        margin: 15px 0;
    }

    .nav-links .sub-box1 {
        display: none;
        /* 默认隐藏 */
        width: 100%;
        /* 宽度充满父容器 */
        position: static;
        /* 取消可能存在的绝对定位 */
    }

    .nav-links .sub-box {
        display: block;
        /* 改为垂直堆叠 */
        width: 100%;
    }

    .nav-links .sub-box a {
        display: block;
        padding: 12px 20px;
        /* 增加触摸面积 */
        /* 可以添加边框、背景色等样式来区分层级 */
        border-top: 1px solid #f0f0f0;
    }

    .mobile-menu-toggle {
        display: block;
        margin-left: auto;
        /* 右对齐 */
    }

    /* 菜单按钮动画 */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}

/* 响应式设计 - 手机版 */
@media (max-width: 768px) {
    .container3 {
        flex-direction: column;
        height: auto;
        padding: 15px;
    }
    
    /* 隐藏左侧信息区域 */
    .container3 .info-section {
        display: none;
    }
    
    /* 缩小并调整拓扑容器 */
    .topology-container {
        width: 100%;
        flex-direction: column;
        padding: 20px 10px;
        gap: 30px;
    }
    
    /* 隐藏中间节点区域 */
    .center-section {
        display: none;
    }
    
    /* 调整左右节点区域 */
    .left-section, .right-section {
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        width: 100%;
    }
    
    /* 缩小节点尺寸 */
    .node {
        width: 120px;
        height: 110px;
        margin: 0;
    }
    
    /* 调整节点悬停效果 */
    .node:hover {
        transform: scale(1.8) !important;
        z-index: 10;
    }
    
    /* 调整节点图片 */
    .node img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    /* 调整节点覆盖文字 */
    .node-overlay {
        font-size: 0.8rem;
        padding: 8px;
    }
    
    /* 隐藏所有连接线 */
    .connection {
        display: none;
    }
}

/* 超小屏幕额外调整 */
@media (max-width: 480px) {
    .container3 {
        padding: 10px;
    }
    
    .topology-container {
        padding: 15px 5px;
        gap: 20px;
    }
    
    .left-section, .right-section {
        gap: 15px;
    }
    
    .node {
        width: 100px;
        height: 90px;
    }
    
    .node:hover {
        transform: scale(1.6) !important;
    }
    
    .node-overlay {
        font-size: 0.7rem;
        padding: 6px;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .banner-secondary {
        height: 210px;
        overflow: hidden;
    }
    
    .banner-secondary-image {
        object-fit: cover;
        object-position: center -10%; /* 从center改为70%，图片下移 */
        width: 300%;
        margin-left: -100%;
        height: 100%;
    }

    .sub-nav-link {
        padding: 14px 20px;
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .banner-secondary {
        height: 158px;
    }
    
    .banner-secondary-image {
        object-position: center -10%; /* 同样下移 */
    }

    .sub-nav-list {
        flex-direction: column;
    }

    /* 在移动设备上移除分隔线 */
    .sub-nav-item:not(:last-child)::after {
        display: none;
    }

    .sub-nav-link {
        text-align: center;
        border-bottom: 1px solid #3a5071;
    }

    .sub-nav-item:last-child .sub-nav-link {
        border-bottom: none;
    }
}

/* 响应式设计 */
@media (max-width: 1100px) {
    .split-pair {
        flex-direction: column;
        min-height: auto;
        margin-top: 20px;
    }

    .text-block,
    .image-block {
        width: 100%;
        min-height: 450px;
        /* 重置所有边距 */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .split-pair.reverse {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .split-pair {
        height: auto;
        margin-top: 15px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .text-block {
        padding: 35px 25px;
        min-height: auto;
        margin-right: 0 !important;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 12px 12px 0 0;
        order: 1;
    }

    .image-block {
        min-height: 350px;
        padding: 20px;
        border-radius: 0 0 12px 12px;
        width: 100%;
    }

    .text-block h2 {
        font-size: 1.6rem;
        text-align: center;
        margin-bottom: 25px;
        color: #2c3e50;
    }

    .split-pair-features {
        margin-bottom: 25px;
    }

    .split-pair-feature {
        margin-bottom: 20px;
    }

    .split-pair-feature p {
        font-size: 0.95rem;
        line-height: 1.7;
        text-align: justify;
        margin-bottom: 0;
    }

    .highlight {
        background: linear-gradient(120deg, #a8e6cf 0%, #dcedc1 100%);
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 600;
    }

    .btn {
        display: block;
        width: 180px;
        margin: 0 auto;
        padding: 12px 25px;
        text-align: center;
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: white;
        text-decoration: none;
        border-radius: 25px;
        font-weight: 600;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
    }

    .image-placeholder {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .image-placeholder img {
        border-radius: 8px;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .image-placeholder img:hover {
        transform: scale(1.03);
    }
}

@media (max-width: 576px) {
    .split-pair {
        margin-top: 10px;
    }

    .text-block {
        padding: 25px 20px;
    }

    .text-block h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .image-block {
        min-height: 280px;
        padding: 15px;
    }

    .split-pair-feature p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .btn {
        width: 160px;
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .split-pair-feature {
        margin-bottom: 15px;
    }
}

@media (max-width: 400px) {
    .text-block {
        padding: 20px 15px;
    }

    .image-block {
        min-height: 250px;
        padding: 10px;
    }

    .text-block h2 {
        font-size: 1.4rem;
    }

    .split-pair-feature p {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .alternating-container {
        flex-direction: column;
    }

    .alternating-image {
        width: 100%;
        height: 250px;
        max-width: 100%;
    }
}