/* 页面主体样式 */

body {
    container: body / inline-size;
    /* 设置容器查询，基于内联尺寸 */
    min-height: 100%;
    /* 最小高度为100% */
    display: flex;
    /* 使用弹性布局 */
    flex-direction: column;
    /* 垂直方向排列 */
    line-height: normal;
    /* 行高为正常值 */
    text-align: left;
    /* 文本居中对齐 */
    background-color: #f7f9fc;
    /* 背景色为浅淡灰蓝，提升清爽感 */
    overflow-x: hidden;
    /* 隐藏横向滚动条，避免页面底部滚动 */
    overflow-y: auto;
    /* 保留纵向滚动条 */
}


/* 图片容器样式 */

.qhtp {
    min-width: 0;
    /* 最小宽度为0 */
    flex-grow: 1;
    /* 弹性增长系数为1 */
}


/* 标题符号样式 - 用于大标题 */

.title-symbol {
    --min-font-size: 22;
    /* CSS变量：最小字体大小22px */
    --max-font-size: 48;
    /* CSS变量：最大字体大小48px */
    font-size: var(--interpolate);
    /* 字体大小使用插值变量 */
    font-family: "FZDaBiaoSong-B06";
    /* 字体族：方正大标宋 */
    letter-spacing: 0px;
    /* 字符间距为0 */
    text-align: left;
    /* 文本左对齐 */
}


/* 版块标题区域内的标题居中 */

.col-top1 .title-symbol,
.column .title-symbol {
    text-align: center;
    /* 文本居中对齐 */
}


/* 文本符号样式 - 用于副标题 */

.text-symbol {
    --min-font-size: 15;
    /* CSS变量：最小字体大小15px */
    --max-font-size: 16;
    /* CSS变量：最大字体大小16px */
    font-size: var(--interpolate);
    /* 字体大小使用插值变量 */
    font-family: "Microsoft YaHei";
    /* 字体族：微软雅黑 */
    letter-spacing: 4.12px;
    /* 字符间距4.12px */
    text-align: left;
    /* 文本左对齐 */
}


/* 版块标题区域内的副标题居中 */

.col-top1 .text-symbol,
.column .text-symbol {
    text-align: center;
    /* 文本居中对齐 */
}


/* 列容器样式 - 用于标题区域 */

.column {
    height: 107px;
    /* 高度107px */
    display: flex;
    /* 使用弹性布局 */
    flex-direction: row;
    /* 水平方向排列 */
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: center;
    /* 水平居中对齐 */
    gap: 20px;
    /* 子元素间距20px */
    flex-shrink: 0;
    /* 不允许收缩 */
    color: #c73a3a;
    /* 文字颜色为柔和红色 */
    background-color: transparent;
    /* 去除背景色 */
    padding: 16px 24px;
    /* 内边距：上下16px，左右24px */
    border-radius: 0;
    /* 无圆角 */
    text-align: center;
    /* 文本居中对齐 */
    position: relative;
    /* 相对定位，用于伪元素 */
}

.column::before,
.column::after {
    content: "";
    /* 伪元素内容为空 */
    flex: 1;
    /* 占据剩余空间 */
    height: 1px;
    /* 高度1px */
    background-color: #c73a3a;
    /* 背景色为柔和红色 */
}

.column .title-symbol {
    flex-shrink: 0;
    /* 不允许收缩 */
    font-weight: 400;
    /* 字体粗细400（正常） */
    white-space: nowrap;
    /* 不换行 */
}


/* 行样式C - 用于列表项，无边框 */

.row-c {
    display: flex;
    /* 使用弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 13px;
    /* 子元素间距13px */
    padding: 29px 0;
    /* 内边距：上下29px，左右0 */
    border-bottom: 0.5px dashed rgba(12, 12, 12, 0);
    /* 底部边框：0.5px虚线，透明 */
}


/* 行样式D - 用于列表项，有上边距 */

.row-d {
    margin-top: -21px;
    /* 上外边距-21px（向上偏移） */
    display: flex;
    /* 使用弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 13px;
    /* 子元素间距13px */
    padding: 29px 0 28px;
    /* 内边距：上29px，左右0，下28px */
    border-bottom: 0.5px dashed rgba(12, 12, 12, 0);
    /* 底部边框：0.5px虚线，透明 */
}


/* 行左侧矩形装饰 - 红色小方块 */

.row-rect-left {
    width: 9px;
    /* 宽度9px */
    height: 9px;
    /* 高度9px */
    flex-shrink: 0;
    /* 不允许收缩 */
    background-color: #e28b8b;
    /* 背景色为更柔和的淡红色 */
    border-radius: 50%;
    /* 圆形小点 */
}


/* 行文本样式 */

.row-text {
    flex: 1;
    /* 弹性系数1，占据剩余空间 */
    text-align: left;
    /* 文本左对齐 */
}


/* 顶部图片样式 */

.img-top {
    flex-shrink: 0;
    /* 不允许收缩 */
}


/* 导航栏样式 - 第一行导航菜单 */

.row1 {
    display: flex;
    /* 使用弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: center;
    /* 水平居中对齐 */
    gap: 117px;
    /* 子元素间距117px */
    color: #1f2a44;
    /* 文字颜色为深蓝色 */
    font-size: 24px;
    /* 字体大小24px */
    font-family: "Microsoft YaHei UI";
    /* 字体族：微软雅黑UI */
    letter-spacing: 0px;
    /* 字符间距为0 */
    text-align: center;
    /* 文本居中对齐 */
    width: 100%;
    /* 宽度100%，占满整个网页宽度 */
    margin: 0;
    /* 外边距为0 */
    background-color: #ffffff;
    /* 背景色为白色 */
    box-shadow: 0 4px 12px rgba(240, 244, 248, 0.8);
    /* 浅蓝色阴影 */
    padding: 25px 24px;
    /* 内边距：上下25px，左右24px */
}


/* 导航项悬停变色（蓝色 -> 红色） */

.row1 p {
    transition: color 0.2s ease;
    /* 悬停颜色过渡 */
}

.row1 p:hover {
    color: #d9020f;
    /* 悬停时文字变红 */
    cursor: pointer;
    /* 鼠标指针变为手型 */
}


/* 左侧文本和符号项样式 */

.text-left,
.text-symbol-item {
    flex: 0 0 auto;
    /* 弹性系数：不增长、不收缩、自动宽度 */
}


/* 右侧文本样式 */

.text-right {
    flex: 0 0 auto;
    /* 弹性系数：不增长、不收缩、自动宽度 */
}


/* 列容器基础样式 - 所有列的公共样式 */

.col1,
.col2,
.col3,
.col4 {
    margin: 0 auto;
    /* 外边距：上下0，左右自动（水平居中） */
    width: 90%;
    /* 宽度90% */
    max-width: 1201px;
    /* 最大宽度1201px */
    display: flex;
    /* 使用弹性布局 */
    flex-direction: column;
    /* 垂直方向排列 */
    justify-content: center;
    /* 垂直居中对齐 */
    flex-shrink: 0;
    /* 不允许收缩 */
    align-self: center;
    /* 自身居中对齐 */
    font-family: "Microsoft YaHei UI";
    /* 字体族：微软雅黑UI */
    letter-spacing: 0px;
    /* 字符间距为0 */
    text-align: left;
    /* 文本左对齐 */
}


/* 第一列样式 - 头条区域 */

.col1 {
    container: col1 / inline-size;
    /* 设置容器查询，基于内联尺寸 */
    margin-top: 113px;
    /* 上外边距113px */
    height: 593px;
    /* 高度593px */
    max-width: 1197px;
    /* 最大宽度1197px */
    gap: 63px;
    /* 子元素间距63px */
}


/* 第二列样式 - 评论综述区域 */

.col2 {
    margin-top: 63px;
    /* 上外边距63px */
    gap: 51px;
    /* 子元素间距51px */
}


/* 第三列样式 - 展望"十五五"区域 */

.col3 {
    container: col3 / inline-size;
    /* 设置容器查询，基于内联尺寸 */
    margin-top: 48px;
    /* 上外边距48px */
    height: 550px;
    /* 高度550px */
    gap: 63px;
    /* 子元素间距63px */
}


/* 第四列样式 - 我们的"十四五"区域 */

.col4 {
    container: col4 / inline-size;
    /* 设置容器查询，基于内联尺寸 */
    margin-top: 63px;
    /* 上外边距63px */
    height: 387px;
    /* 高度387px */
    gap: 63px;
    /* 子元素间距63px */
}


/* 头条标题容器样式 */

.tt {
    margin: 0 99px;
    /* 外边距：上下0，左右99px */
    height: 117px;
    /* 高度117px */
    display: flex;
    /* 使用弹性布局 */
    flex-direction: column;
    /* 垂直方向排列 */
    justify-content: center;
    /* 垂直居中对齐 */
    gap: 10px;
    /* 子元素间距10px */
    flex-shrink: 0;
    /* 不允许收缩 */
    color: #c73a3a;
    /* 文字颜色为柔和红色 */
    background-color: rgba(159, 159, 159, 0);
    /* 背景色透明 */
    padding: 0 14px;
    /* 内边距：上下0，左右14px */
    text-align: center;
    /* 文本居中对齐 */
}


/* 头条副标题样式 */

.tt-subtitle {
    margin-top: -8px;
    /* 上外边距-8px（向上偏移） */
    --min-font-size: 20;
    /* CSS变量：最小字体大小20px */
    --max-font-size: 40;
    /* CSS变量：最大字体大小40px */
    font-size: var(--interpolate);
    /* 字体大小使用插值变量 */
    font-weight: 700;
    /* 字体粗细700（粗体） */
    text-align: center;
    /* 文本居中对齐 */
}


/* 头条文本样式 */

.tt-text {
    margin: 0 6px;
    /* 外边距：上下0，左右6px */
    --min-font-size: 16;
    /* CSS变量：最小字体大小16px */
    --max-font-size: 20;
    /* CSS变量：最大字体大小20px */
    font-size: var(--interpolate);
    /* 字体大小使用插值变量 */
    font-weight: 400;
    /* 字体粗细400（正常） */
    text-align: center;
    /* 文本居中对齐 */
}


/* 第二行样式 - 内容区域 */

.row2 {
    display: flex;
    /* 使用弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 31px;
    /* 子元素间距31px */
    color: #000;
    /* 文字颜色为黑色 */
    font-size: 20px;
    /* 字体大小20px */
    font-weight: 700;
    /* 字体粗细700（粗体） */
    text-align: left;
    /* 文本左对齐 */
}


/* 图片1样式 */

.qhtp1 {
    width: 103%;
    /* 宽度103% */
}


/* 右侧列样式 */

.col-right {
    width: 97%;
    /* 宽度97% */
    height: 413px;
    /* 高度413px */
    display: flex;
    /* 使用弹性布局 */
    flex-direction: column;
    /* 垂直方向排列 */
    justify-content: center;
    /* 垂直居中对齐 */
    flex-grow: 1;
    /* 弹性增长系数为1 */
}


/* 行样式A - 带虚线边框的列表项 */

.row-a {
    display: flex;
    /* 使用弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 13px;
    /* 子元素间距13px */
    padding: 29px 0;
    /* 内边距：上下29px，左右0 */
    border-bottom: 0.5px dashed rgba(12, 12, 12, 0.33);
    /* 底部边框：0.5px虚线，33%透明度 */
}


/* 行样式B - 带虚线边框的列表项，底部内边距不同 */

.row-b {
    display: flex;
    /* 使用弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 13px;
    /* 子元素间距13px */
    padding: 29px 0 28px;
    /* 内边距：上29px，左右0，下28px */
    border-bottom: 0.5px dashed rgba(12, 12, 12, 0.33);
    /* 底部边框：0.5px虚线，33%透明度 */
}


/* 列顶部样式1 - 评论综述标题区域 */

.col-top1 {
    height: 107px;
    /* 高度107px */
    display: flex;
    /* 使用弹性布局 */
    flex-direction: row;
    /* 水平方向排列 */
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: center;
    /* 水平居中对齐 */
    gap: 20px;
    /* 子元素间距20px */
    flex-shrink: 0;
    /* 不允许收缩 */
    color: #d9020f;
    /* 文字颜色为红色 */
    background-color: transparent;
    /* 去除背景色 */
    padding: 16px 24px;
    /* 内边距：上下16px，左右24px */
    border-radius: 0;
    /* 无圆角 */
    text-align: center;
    /* 文本居中对齐 */
    position: relative;
    /* 相对定位，用于伪元素 */
}

.col-top1::before,
.col-top1::after {
    content: "";
    /* 伪元素内容为空 */
    flex: 1;
    /* 占据剩余空间 */
    height: 1px;
    /* 高度1px */
    background-color: #c73a3a;
    /* 背景色为柔和红色 */
}

.col-top1 .title-symbol {
    flex-shrink: 0;
    /* 不允许收缩 */
    font-weight: 400;
    /* 字体粗细400（正常） */
    white-space: nowrap;
    /* 不换行 */
}


/* 第八行样式 - 卡片容器 */

.row8 {
    container: row8 / inline-size;
    /* 设置容器查询，基于内联尺寸 */
    display: flex;
    /* 使用弹性布局 */
    flex-wrap: wrap;
    /* 允许换行 */
    align-items: flex-start;
    /* 交叉轴起点对齐 */
    align-content: flex-start;
    /* 多行内容起点对齐 */
    gap: 21px;
    /* 子元素间距21px */
    row-gap: 27px;
    /* 行间距27px */
    letter-spacing: 0px;
    /* 字符间距为0 */
}


/* 卡片样式 */

.card {
    width: 100%;
    /* 宽度100% */
    max-width: 590px;
    /* 最大宽度590px */
    display: flex;
    /* 使用弹性布局 */
    align-items: flex-start;
    /* 交叉轴起点对齐 */
    gap: 15px;
    /* 子元素间距15px */
    flex-shrink: 0;
    /* 不允许收缩 */
    background-color: #ffffff;
    /* 背景色为白色，清爽干净 */
    padding: 39px 47px 10px 18px;
    /* 内边距：上39px，右47px，下10px，左18px */
    border: 1px solid #e5eaf1;
    /* 边框：1px实线，浅灰蓝 */
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    /* 悬停过渡效果 */
}


/* 卡片悬停效果 - 柔和的对比色调 */

.card:hover {
    background-color: #f6f9ff;
    /* 略浅的淡蓝灰，形成柔和对比 */
    border-color: #d7dff0;
    /* 边框颜色稍加深 */
    box-shadow: 0 10px 24px rgba(31, 42, 68, 0.12);
    /* 柔和阴影，增强悬浮感 */
    transform: translateY(-3px);
    /* 轻微上移，增强交互感 */
}


/* 卡片文本样式 - 日期显示 */
   
.card-text {
    flex-grow: 1;
    /* 弹性增长系数为1 */
    color: #d9020f;
    /* 文字颜色为黑色 */
    font-size: 24px;
    /* 字体大小24px */
    font-family: "Microsoft YaHei";
    /* 字体族：微软雅黑 */
    font-weight: 400;
    /* 字体粗细400（正常） */
    text-align: center;
    /* 文本左对齐 */
}


/* 卡片列样式 */

.card-col {
    width: 100%;
    /* 宽度100% */
    height: 167px;
    /* 高度167px */
    max-width: 428px;
    /* 最大宽度428px */
    display: flex;
    /* 使用弹性布局 */
    flex-direction: column;
    /* 垂直方向排列 */
    /* justify-content: center; */
    /* 垂直居中对齐 */
    gap: 23px;
    /* 子元素间距23px */
    flex-shrink: 0;
    /* 不允许收缩 */
}


/* 卡片文本符号1 - 卡片标题 */

.card-text-symbol1 {
    color: #000;
    /* 文字颜色为黑色 */
    font-size: 19px;
    /* 字体大小19px */
    font-family: "Microsoft YaHei";
    /* 字体族：微软雅黑 */
    font-weight: 700;
    /* 字体粗细700（粗体） */
    line-height: 1.469;
    /* 行高1.469倍 */
    text-align: left;
    /* 文本左对齐 */
}


/* 卡片文本符号2 - 卡片内容描述 */

.card-text-symbol2 {
    padding-top: 10px;
    height: 88px;
    /* 高度88px */
    flex-shrink: 0;
    /* 不允许收缩 */
    color: rgba(0, 0, 0, 0.51);
    /* 文字颜色：黑色51%透明度 */
    font-size: 13px;
    /* 字体大小13px */
    font-family: "Microsoft YaHei UI";
    /* 字体族：微软雅黑UI */
    font-weight: 290;
    /* 字体粗细290 */
    line-height: 1.381;
    /* 行高1.381倍 */
    text-align: left;
    /* 文本左对齐 */
}


/* 第九行样式 - 展望"十五五"内容区域 */

.row9 {
    display: flex;
    /* 使用弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 51px;
    /* 子元素间距51px */
    color: #000;
    /* 文字颜色为黑色 */
    font-size: 20px;
    /* 字体大小20px */
    font-family: "Microsoft YaHei UI";
    /* 字体族：微软雅黑UI */
    letter-spacing: 0px;
    /* 字符间距为0 */
    background-color: rgba(151, 149, 149, 0);
    /* 背景色透明 */
    padding: 0 3px;
    /* 内边距：上下0，左右3px */
    text-align: left;
    /* 文本左对齐 */
}


/* 卡片左侧基础样式 - 左侧和右侧卡片的公共样式 */

.card-left1,
.card-left2,
.card-right {
    display: flex;
    /* 使用弹性布局 */
    flex-direction: column;
    /* 垂直方向排列 */
    justify-content: center;
    /* 垂直居中对齐 */
    flex-grow: 1;
    /* 弹性增长系数为1 */
    background-color: rgba(161, 27, 27, 0);
    /* 背景色透明 */
}


/* 卡片左侧1样式 */

.card-left1 {
    width: 99%;
    /* 宽度99% */
    height: 380px;
    /* 高度380px */
}


/* 行10样式 - 上边距调整 */

.row10 {
    margin-top: -16px;
    /* 上外边距-16px（向上偏移） */
}


/* 行11和行13样式 - 上边距重置 */

.row11,
.row13 {
    margin-top: 0;
    /* 上外边距为0 */
}


/* 图片2样式 */

.qhtp2 {
    width: 101%;
    /* 宽度101% */
}


/* 第十五行样式 - 我们的"十四五"内容区域 */

.row15 {
    display: flex;
    /* 使用弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 51px;
    /* 子元素间距51px */
    color: #000;
    /* 文字颜色为黑色 */
    font-size: 20px;
    /* 字体大小20px */
    font-family: "Microsoft YaHei UI";
    /* 字体族：微软雅黑UI */
    letter-spacing: 0px;
    /* 字符间距为0 */
    background-color: rgba(151, 149, 149, 0);
    /* 背景色透明 */
    padding: 0 0 0 20px;
    /* 内边距：上下0，左右9px */
    text-align: left;
    /* 文本左对齐 */
}


/* 卡片左侧2样式 */

.card-left2 {
    margin: -74px 0;
    /* 外边距：上下-74px，左右0 */
    width: 100%;
    /* 宽度100% */
    height: 365px;
    /* 高度365px */
    padding: 49px 0 48px;
    /* 内边距：上49px，左右0，下48px */
}


/* 行18和行19样式 - 上边距调整 */

.row18,
.row19 {
    margin-top: -21px;
    /* 上外边距-21px（向上偏移） */
}


/* 卡片右侧样式 */

.card-right {
    margin: -74px 0;
    /* 外边距：上下-74px，左右0 */
    width: 100%;
    /* 宽度100% */
    height: 365px;
    /* 高度365px */
    padding: 49px 0;
    /* 内边距：上下49px，左右0 */
}


/* 行21样式 - 上边距调整 */

.row21 {
    margin-top: -21px;
    /* 上外边距-21px（向上偏移） */
}


/* 页脚样式 */

.footer {
    margin: 74px -1px 0 1px;
    /* 外边距：上74px，右-1px，下0，左1px */
    color: #13132a;
    /* 文字颜色为深蓝灰色 */
    font-size: 14px;
    /* 字体大小14px */
    font-family: "Microsoft YaHei";
    /* 字体族：微软雅黑 */
    line-height: 2.139;
    /* 行高2.139倍 */
    letter-spacing: 0px;
    /* 字符间距为0 */
    background-color: #f7f9fc;
    /* 背景色为浅灰蓝，统一整体清爽基调 */
    padding: 64px 24px;
    /* 内边距：上下64px，左右24px */
    text-align: center;
    /* 文本居中对齐 */
}


/* 响应式设计 - 屏幕宽度小于1280px时的样式调整 */

@media screen and (max-width: 1280px) {
    .row1 {
        padding-inline: var(--margin-sm);
        /* 水平内边距使用小边距变量 */
    }
    .tt {
        margin-inline: 0;
        /* 水平外边距为0 */
    }
    .tt-text {
        margin-inline: 0;
        /* 水平外边距为0 */
    }
    .col-top1 {
        padding-inline: var(--margin-sm);
        /* 水平内边距使用小边距变量 */
    }
    .card {
        padding-inline: var(--margin-sm);
        /* 水平内边距使用小边距变量 */
    }
    .footer {
        padding-inline: var(--margin-sm);
        /* 水平内边距使用小边距变量 */
    }
}


/* 容器查询 - body容器宽度小于1105px时的导航栏样式 */

@container body (width < 1105px) {
    .row1 {
        flex-direction: column;
        /* 垂直方向排列 */
        align-items: center;
        /* 垂直居中对齐 */
        gap: 13px;
        /* 子元素间距13px */
    }
    .row1>* {
        text-align: center;
        /* 所有子元素文本居中对齐 */
    }
}


/* 容器查询 - col1容器宽度小于828px时的内容布局调整 */

@container col1 (width < 828px) {
    .row2 {
        flex-direction: column;
        /* 垂直方向排列 */
        align-items: stretch;
        /* 交叉轴拉伸对齐 */
        gap: 58px;
        /* 子元素间距58px */
    }
    .row2>.qhtp1 {
        width: 100%;
        /* 宽度100% */
    }
    .row2>.col-right {
        width: 100%;
        /* 宽度100% */
    }
}


/* 容器查询 - row8容器宽度小于589px时的卡片布局调整 */

@container row8 (width < 589px) {
    .card {
        flex-direction: column;
        /* 垂直方向排列 */
        align-items: stretch;
        /* 交叉轴拉伸对齐 */
        gap: 18px;
        /* 子元素间距18px */
    }
    .card>.card-col {
        align-self: center;
        /* 自身居中对齐 */
    }
}


/* 容器查询 - col3容器宽度小于839px时的内容布局调整 */

@container col3 (width < 839px) {
    .row9 {
        flex-direction: column;
        /* 垂直方向排列 */
        align-items: stretch;
        /* 交叉轴拉伸对齐 */
        gap: 51px;
        /* 子元素间距51px */
    }
    .row9>.card-left1 {
        width: 100%;
        /* 宽度100% */
    }
    .row9>.qhtp2 {
        width: 100%;
        /* 宽度100% */
    }
}


/* 容器查询 - col4容器宽度小于880px时的内容布局调整 */

@container col4 (width < 880px) {
    .row15 {
        flex-direction: column;
        /* 垂直方向排列 */
        align-items: stretch;
        /* 交叉轴拉伸对齐 */
        gap: 48px;
        /* 子元素间距48px */
    }
    .row15>* {
        margin-top: unset !important;
        /* 重置所有子元素的上外边距 */
    }
    .row15>.card-left2 {
        width: 100%;
        /* 宽度100% */
    }
    .row15>.card-right {
        width: 100%;
        /* 宽度100% */
    }
}