.page-section {
    width: 100%;
    text-align: center;
    /* padding-top: clamp(30px, 5vw, 60px); */
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5%;
}

.page-section-title {
    text-align: center;
    font-size: clamp(24px, 4vw, 36px);
    margin-bottom: clamp(30px, 7vw, 60px);
    font-weight: 600;
}

.page-content-wrapper {
    display: flex;
    flex-wrap: wrap; /* 关键：屏幕不够宽时自动换行 */
    gap: clamp(20px, 4vw, 40px);
    align-items: flex-start;
}

.page-text-content {
    flex: 1 1 450px; /* 基础宽度 450px，可放大缩小 */
}

.page-text-content p {
    margin-bottom: 20px;
    font-size: 16px;
    text-align: justify;
    line-height: 1.8;
}

/* 链接卡片样式 */
.page-link-card {
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
}

.odd {
    background-color: #ffffff;
}

.even {
    background-color: #f9fafb;
}

.page-link-label {
    font-weight: bold;
    margin-bottom: 10px !important;
}

.page-link-url {
    color: var(--accent-color);
    text-decoration: none;
    word-break: break-all;
    font-size: 14px;
}

.page-link-url:hover {
    text-decoration: underline;
}

/* 图片样式 */
.page-image-content {
    flex: 1 1 450px;
}

.page-image-content img {
    width: 100%;
    height: auto;
    aspect-ratio: 7/5;
    border-radius: 20px; /* 圆角还原设计图 */
    display: block;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* 微弱投影增加质感 */
}

/* 针对手机端的小优化 */
@media (max-width: 600px) {
    .page-text-content {
        order: 2; /* 手机端文字排在图片下面 */
    }
    .page-image-content {
        order: 1;
        margin-bottom: 20px;
    }
    .page-section-title {
        text-align: left; /* 移动端标题居左可能更好看，可根据需求保留 center */
    }
}
/* =========================================
   新增：用于实现之字形（交替）布局的样式
========================================= */
/* 只在桌面端（大屏幕）启用反转布局 */
@media (min-width: 992px) {
    .page-content-wrapper.wrapper-reverse {
        /* 核心：将 flex 容器的主轴方向改为水平反向 */
        /* 此时，HTML 里排在前面的 text-content 会显示在右边，image-content 显示在左边 */
        flex-direction: row-reverse;
    }
}

/* 小优化：给 section 之间加点间距 */
.about-section {
    margin-bottom: clamp(60px, 10vw, 120px);
}






.contact-section {
    width: 100%;
    margin: 0 auto;
    padding-top: 3%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 2%;
    color: #333;
}

/* 公司标题样式 */
.contact-company-name {
    margin-top: 3%;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: bold;
    margin-bottom: clamp(30px, 3vw, 60px);
    color: #1a1a1a;
}



.contact-bar {
    display: flex;
    /* 两个单元分布在左右两端 */
    justify-content: space-between; 
    align-items: center;
    
    width: 100%;
    max-width: 1000px; /* 限制最大宽度，防止拉得太开 */
    margin: 10px auto;
    padding: 10px;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.contact-item {
    display: flex;
    align-items: center;
    /* 单元内：标签和具体内容之间的间距 */
    gap: 20px; 
}

.item-label {
    display: flex;
    align-items: center;
    gap: 8px; /* 图标和“地址”字样之间的间距 */
    color: #002b53; /* 深蓝色 */
    white-space: nowrap; /* 保证标签不换行 */
}

.item-label strong {
    font-size: 16px;
    font-weight: 600;
}

.icon {
    font-size: 18px;
    display: flex;
    align-items: center;
}

.item-value {
    color: #333;
    font-size: 15px;
    /* 稍微调轻文字颜色，增加视觉层级 */
    letter-spacing: 0.5px;
}

/* 响应式适配：在平板或手机上改为纵向排列 */
@media (max-width: 992px) {
    .contact-bar {
        flex-direction: column;
        align-items: flex-start; /* 手机端左对齐 */
        gap: 20px;
    }
    
    .contact-item {
        /* 手机端如果空间不足，允许地址文字换行 */
        flex-wrap: wrap; 
        gap: 10px;
    }
}