.document-title-bg {
    position: relative; /* 关键：作为子元素的定位基准 */
    background-image: url(../images/down-2.jpg) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 471px;
}

.content-mask {
    position: absolute; /* 绝对定位脱离文档流 */
    left: 21%; /* 左侧30%位置 */
    top: 45%; /* 顶部20%位置 */
    width: 450px;
    height: 200px;
    background: rgba(255, 255, 255, 0.2); /* 半透明背景色 */
    backdrop-filter: blur(10px); /* 模糊效果 */
    -webkit-backdrop-filter: blur(20px); /* 兼容 Safari */
    padding: 20px;
}

.left-right-document {
    display: flex; /* 启用弹性布局 */
    gap: 2px; /* 控制左右div间距 */
}

.left-document {
    width: auto; /* 固定宽度 */
}

.right-document {
    flex: 1; /* 自动填充剩余空间 */
    padding: 10px;
}

.document-container {
    display: flex;
    grid-template-columns: 1fr auto; /* 左侧自适应 + 右侧固定宽度 */
    height: 60px;
}

.left-section {
    width: 30%; /* 左侧宽度 */
    display: flex;
    flex-direction: column; /* 保持垂直列表 */
}

.right-section {
    width: 70%; /* 左侧宽度 */
    display: flex;
    place-items: center; /* 一键实现内容居中 */
    gap: 15px; /* 列间距 */
}

.right-section-col {
    flex: 1; /* 两列等宽分配剩余空间 */
    padding: 15px;
    text-align: right;
    justify-items: center;
}

@media (max-width: 768px) {
    .document-title-bg {
        background-image: url(../images/down-2-768x200.jpg) !important;
        height: 200px;
    }

    .document-container {
        flex-direction: column;
        height: 120px;
    }

    .left-section, .right-section {
        width: 100%;
    }

    .right-section-col {
        padding: 10px 2px;
    }

    .content-mask {
        left: 10%;
        top: 40%;
        width: 280px;
        height: 100px;
        padding: 10px;
    }
}