/* 1. 外层容器 */
.page-section {
    max-width: 100%;      /* 限制正文最大宽度，避免大屏阅读疲劳 */
    margin: 0 auto;         /* 水平居中 */
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5%;
}

/* 2. 标题区域居中布局 */
.page-section-title {
    text-align: center;     /* 内容水平居中 */
    margin-bottom: 50px;    /* 标题与正文之间的间距 */
}

.page-section-title h1 {
    font-size: clamp(28px, 4vw, 36px); /* 响应式字体大小 */
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.page-section-content {
}



/* 3. 装饰线 */
.title-line {
    width: 60px;            /* 装饰线宽度 */
    height: 4px;            /* 装饰线厚度 */
    background-color: #007bff; /* 主题色（可改为你公司的绿色或蓝色） */
    margin: 0 auto;         /* 关键：在 text-align 容器中居中 */
    border-radius: 2px;
}

/* 4. 正文内容区域布局 */
article {
    line-height: 1.8;       /* 增加行高，提升阅读舒适度 */
    color: #444;
    font-size: 16px;
    word-wrap: break-word;  /* 防止长英文/代码撑破布局 */
}

/* 5. 对正文内图片的适配 (非常重要) */
article img {
    max-width: 100%;        /* 图片永不溢出 */
    height: auto;           /* 保持比例 */
    border-radius: 8px;
    margin: 20px 0;
    display: block;
}

/* 6. 响应式调整 */
@media (max-width: 768px) {
    .page-section {
        padding: 40px 15px; /* 移动端减小上下间距 */
    }
    .page-section-title {
        margin-bottom: 30px;
    }
}