:root {
    /* 主题色与常用颜色 */
    --page-bg: #fffefe;
    --color-accent-red: #ea0202;
    --color-title-red: #e00404;
    --color-text-main: #000000;
    --color-card-border: #dfdfdf;
    --color-card-border-soft: #e2e0e0;
    --color-surface: #ffffff;
    --color-footer-text: #ede4d3;

    /* 文字字号与行高 */
    --font-size-body-lg: 20px;
    --font-size-footer: 16px;
    --line-height-loose: 3.05;

    /* 间距与圆角 */
    --space-section-gap: 46px;
    --space-gap-md: 16px;
    --radius-card: 12px;

    /* 通用水平间距（同时用于 margin 与 padding） */
    --margin-sm: 16px;
    --margin-md: 24px;
}

body {
    /* 页面整体布局容器 */
    container: body / inline-size;
    /* 启用容器查询，按宽度作为查询维度 */
    min-height: 100%;
    /* 页面最小高度占满视口高度 */
    display: flex;
    /* 使用弹性布局排布页面 */
    flex-direction: column;
    /* 子元素按列垂直排列 */
    gap: var(--space-section-gap);
    /* 页面各大模块的垂直间距 */
    letter-spacing: 0;
    /* 文本字符间距为 0 */
    
    /* 默认文字居中对齐 */
    background-color: var(--page-bg);
    /* 页面整体背景颜色 */
    overflow: auto;
    /* 内容超出时允许滚动 */
}



li br{display:none;}
.row ul li {
    color: #e28b8b;
    list-style-type: disc;
    margin-left: 0px;
    font-size: 1.4em; 
    width:555px;
    float:left;
}
.row15 ul li ::marker {
  color: #e28b8b; /* 设置颜色 */
  font-size: 1.4em; /* 可选：调整大小 */
}

.row ul li h3 {
    font-size: 20px;
    line-height: 60px;
    font-family: "微软雅黑";
    background-image: url(zfx1.png);
    background-repeat: no-repeat;
    background-position: left 26px;
    color: #000000;
    text-align: left;
}
.list02{
 display: flex;    flex-wrap: wrap;
    align-items: flex-start;
    gap: 21px;
    row-gap: 27px;
    letter-spacing: 0px;
}

.timeBox .time,
.times .time {
	display: none;
}

.qhtp_tu{
    width: 600px;
    height: 412px;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
   margin:0 auto;
}
.qhtp_tu ul {
    float: left;
    width: 1200px;
    margin-bottom: 16px;
}
.qhtp_tu .img {
    width: 4400px;
    overflow: hidden;
    position: absolute;
   
    left: 0; 
}
.fl {float: left;}
.qhtp_tu .img li {
    position: relative;
    float: left;
}

.img li a p br {
    display: none;
}

.qhtp_tu .img li img {
    width: 600px;
    height: 412px;
}

.qhtp_tu .img li .desc {
    position: absolute;
    bottom: 0px;
    width: 600px;
    margin-left: 0px;
   padding-left: 20px;
    line-height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    text-align: left;
}
.qhtp_tu .cut {
    position: absolute;
    top: 35% !important;
    padding: 10px;
     background: url(left.png) center no-repeat;
    color: #cec7c2;
}

.qhtp_tu .cut.next {
    right: 0;
     background: url(right.png) center no-repeat;
}

.qhtp_tu1{
    width: 600px;
    height: 412px;
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
   margin:0 auto;
}
.qhtp_tu1 ul {
    float: left;
    width: 1200px;
    margin-bottom: 16px;
}
.qhtp_tu1 .img {
    width: 4400px;
    overflow: hidden;
    position: absolute;
   
    left: 0; 
}
.fl {float: left;}
.qhtp_tu1 .img li {
    position: relative;
    float: left;
}

.img li a p br {
    display: none;
}

.qhtp_tu1 .img li img {
    width: 600px;
    height: 412px;
}

.qhtp_tu1 .img li .desc {
    position: absolute;
    bottom: 10px;
    width: 600px;
    margin-left: 0px;
   padding-left: 20px;
    line-height: 40px;
    background: rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    text-align: left;
}
.qhtp_tu1 .cut {
    position: absolute;
    top: 35% !important;
    padding: 10px;
     background: url(left.png) center no-repeat;
    color: #cec7c2;
}

.qhtp_tu1 .cut.next {
    right: 0;
     background: url(right.png) center no-repeat;
}

.desc {
    color: #888888;
    font-size: 16px;
}

.pointer {
    position: absolute;
    bottom: 5px;
    overflow: hidden;
    right: 5px;
    width: 100px !important;
}

.pointer li {
    float: left;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    margin-right: 10px;
}

.pointer li.now {
    background: #cc0000;
}

.qhtpr {
    float: right;
    width: 565px;
   margin-top: -10px;

}

.qhtpr ul li h3 {
    font-size: 20px;
    
    line-height: 35px;
    font-family: "微软雅黑";
    background-image: url(zfx1.png);
    background-repeat: no-repeat;
    background-position: left 26px;
    padding-left: 0px;
    text-align: left; 
    color: #000000;
}

.qhtpr ul li {
    color: #e28b8b;
    list-style-type: disc;
   
    margin-left: 25px;
    font-size: 1.4em; 
}
.qhtpr ul li ::marker {
  color: #e28b8b; /* 设置颜色 */
  font-size: 1.4em; /* 可选：调整大小 */
}


.qhtpr ul li h3 {
    margin: 14px 0;
}

.qhtpr ul li h3.nomargin {
    margin-top: 0px;
}

.qhtpr p {
    text-indent: 2em;
    font-size: 12px;
    line-height: 24px;
}

.qhtpr p span {
    font-size: 18px;
    font-weight: bold;
    color: #900;
}

.qhtpr p span a:link {
    color: #900;
    text-decoration: none;
}




/* 列表项通用样式（带圆点） */

.symbol-b {
    /* 列表项外层容器，带圆形标记 */
    margin-right: -17px;
    /* 向右微调整体位置使对齐更好 */
    margin-top: -6px;
    /* 向上微调整体位置 */
    display: flex;
    /* 使用弹性布局排列圆点和文字 */
    align-items: center;
    /* 垂直方向居中对齐 */
    gap: var(--space-gap-md);
    /* 圆点和文字之间的水平间距 */
    padding-top: 4px;
    /* 上内边距，增大可读性 */
    padding-bottom: 2px;
    /* 下内边距，增大可读性 */
}

.symbol-circle {
    /* 红色圆点 */
    margin-top: -2px;
    /* 向上微调圆点垂直位置 */
    width: 13px;
    /* 圆点宽度 */
    flex-shrink: 0;
    /* 防止圆点在弹性布局中被压缩 */
    background-color: var(--color-accent-red);
    /* 圆点填充颜色为红色 */
    aspect-ratio: 3277539 / 3249824;
    /* 近似 1:1 的宽高比，保持为圆形 */
    border-radius: 50%;
    /* 将方形变为圆形 */
}

.symbol-link2 {
    /* 列表中文本链接样式 */
    flex-grow: 1;
    /* 文本占据剩余空间 */
    text-align: left;
    /* 文本左对齐 */
}

.rect {
    /* 标题后面的白色矩形底板 */
    position: absolute;
    /* 绝对定位用于放在卡片边框上方 */
    z-index: 1;
    /* 保证在卡片边框之上但在文字之下 */
    left: 206px;
    /* 距离容器左侧的偏移量 */
    width: 184px;
    /* 底板宽度 */
    height: 62px;
    /* 底板高度 */
    background-color: var(--color-surface);
    /* 底板背景为白色 */
}

.card {
    /* 公共卡片样式 */
    display: flex;
    /* 使用弹性布局容纳多行列表 */
    flex-direction: column;
    /* 内部内容按列垂直排列 */
    padding-left: var(--margin-md);
    /* 左侧内边距，为圆点和文字留空间 */
    padding-top: 25px;
    /* 顶部内边距 */
    border: 1px solid var(--color-card-border);
    /* 灰色边框 */
    border-radius: var(--radius-card);
    /* 边框圆角 */
}

.banner {
    /* 顶部横幅图片 */
    flex-shrink: 0;
    /* 防止在弹性布局中被缩小 */
}

.title-toutiao {
    /* 头条标题样式 */
    width: 1000px;
    margin: 0 auto;
    color: var(--color-title-red);
    /* 文本颜色为红色 */
    --min-font-size: 22;
    /* 自定义属性：最小字号 */
    --max-font-size: 48;
    /* 自定义属性：最大字号 */
    font-size: var(--interpolate);
    /* 使用全局插值字号（由其他逻辑控制） */
    font-family: "Abhaya Libre ExtraBold";
    /* 标题使用加粗英文字体 */
    font-weight: 800;
    /* 超粗字体 */
    line-height: normal;
    /* 行高使用默认值 */
    text-align: center;
}

.col {
    /* 左侧图片   右侧列表区域整体容器 */
    position: relative;
    /* 作为内部绝对定位元素的参考 */
    margin: 25px auto 0 auto;
    /* 顶部外边距并水平居中 */
    width: 90%;
    /* 宽度占视口宽度的 90% */
    max-width: 1200px;
    /* 最大宽度 1200 像素 */
    display: flex;
    /* 使用弹性布局，使右侧列表垂直叠放 */
    flex-direction: column;
    /* 子元素按列布局 */
    align-self: center;
    /* 在父级弹性布局中居中对齐 */
    color: var(--color-text-main);
    /* 文本颜色为黑色 */
    --min-font-size: 16;
    /* 自定义属性：最小正文字号 */
    --max-font-size: 20;
    /* 自定义属性：最大正文字号 */
    font-size: var(--interpolate);
    /* 使用插值字号（由其他逻辑控制） */
    font-family: "Microsoft YaHei";
    /* 使用微软雅黑中文字体 */
    font-weight: 400;
    /* 常规字重 */
    line-height: var(--line-height-loose);
    /* 较大的行高，提高可读性 */
     flex-direction: row;
   
}


/* 左侧矩形小方块列表（图右侧） */

.symbol-a {
    /* 单条小方块 文字的行容器 */
    display: flex;
    /* 使用弹性布局排列小方块和文字 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: var(--space-gap-md);
    /* 小方块与文字之间的水平间距 */
    padding: 4px 30px 2px 0;
    /* 内边距控制行高度和右侧留白 */
}

.symbol-rect-left {
    /* 小红色方块 */
    margin-top: -2px;
    /* 向上微调位置 */
    width: 8px;
    /* 方块宽度 */
    height: 8px;
    /* 方块高度 */
    flex-shrink: 0;
    /* 防止被压缩 */
    background-color: var(--color-accent-red);
    /* 方块填充颜色红色 */
}

.symbol-link1 {
    /* 小方块右侧的文字链接 */
    flex-grow: 1;
    /* 占据剩余水平空间 */
    text-align: left;
    /* 文本左对齐 */
}

.img {
    /* 左侧大图样式 */
    position: absolute;
    /* 绝对定位在容器左侧 */
    top: 2px;
    /* 距顶部 2 像素 */
    left: 0;
    /* 紧贴左侧 */
    width: 100%;
    /* 宽度占满父级宽度 */
    
}

.row {
    /* 下方左右两列（评论解读   省内要闻/党校学习）整体容器 */
    display: flex;
    /* 使用弹性布局排列左右两列 */
    align-items: flex-start;
    /* 顶部对齐 */
    gap: 20px;
    /* 两列之间的水平间距 */
    align-self: center;
    /* 在父级中居中排列 */
}

.group-left {
    /* 左侧“评论解读”整体容器 */
    position: relative;
    /* 作为内部绝对定位矩形的参照 */
    margin: -17px 0 -2px -2px;
    /* 微调整体位置 */
    width: 594px;
    /* 固定宽度与右侧保持一致 */
    flex-shrink: 0;
    /* 防止压缩变窄 */
    text-align: center;
    /* 内部标题居中 */
    padding-top: 59px;
    /* 顶部留出给标题和矩形的空间 */
}

.card1 {
    /* 左侧列表卡片样式 */
    display: flex;
    /* 弹性布局以容纳多行条目 */
    flex-direction: column;
    /* 每条条目垂直排布 */
    background-color: var(--color-surface);
    /* 卡片背景为白色 */
    padding: 35px 0 26px var(--margin-md);
    /* 上、下、左内边距 */
    border: 1px solid var(--color-card-border-soft);
    /* 淡灰色边框 */
    border-radius: var(--radius-card);
    /* 圆角边框 */
}

.card1,
.card2,
.group-bottom {
    color: var(--color-text-main);
    /* 文本颜色为黑色 */
    font-size: var(--font-size-body-lg);
    /* 字号 20 像素 */
    font-family: "Abhaya Libre";
    /* 使用 Abhaya 字体 */
    font-weight: 400;
    /* 常规字重 */
    line-height: var(--line-height-loose);
    /* 行高与右侧保持一致 */
}

.symbol12 {
    /* 第一条列表的特殊位置微调 */
    margin-left: 1px;
    /* 向右微调 1 像素 */
    margin-right: -18px;
    /* 向左收紧 18 像素 */
    margin-top: 0;
    /* 顶部外边距为 0 */
}

.symbol16,
.symbol17,
.symbol18,
.symbol19 {
    /* 后几条列表项统一去掉上外边距 */
    margin-top: 0;
    /* 清除上方多余空隙 */
}

.rect1 {
    /* 左侧标题底部矩形底板 */
    top: 22px;
    /* 与卡片顶部的垂直距离 */
}

.subtitle-symbol1 {
    /* 左侧红色小标题“评论解读” */
    left: 186px;
    /* 左侧偏移量 */
    right: 184px;
    /* 右侧偏移量，控制居中宽度 */
}

.col-right {
    /* 右侧“省内要闻   党校学习”整体容器 */
    margin: 18px -2px -18px 0;
    /* 与左侧卡片纵向对齐的外边距 */
    width: 590px;
    /* 固定宽度与左侧接近 */
    display: flex;
    /* 垂直堆叠上、下两块卡片区域 */
    flex-direction: column;
    /* 纵向排列 group1 和 group-bottom */
    gap: 4px;
    /* 上下区域之间的间距 */
    flex-shrink: 0;
    /* 防止被压缩变窄 */
    text-align: center;
    /* 标题居中显示 */
    padding-bottom: 16px;
    /* 底部留白 */
}

.group1 {
    /* 上方“省内要闻”区域外层容器 */
    position: relative;
    /* 为矩形和标题提供定位参照 */
    margin-left: -4px;
    /* 微调整体位置 */
    margin-top: -37px;
    /* 向上微调与左侧对齐 */
    padding-top: 60px;
    /* 为标题和矩形预留顶部空间 */
}

.card2 {
    /* “省内要闻”列表卡片，样式复用自通用 .card */
}

.card2 .symbol1 {
    /* “省内要闻”第一条列表位置微调 */
    margin-left: 1px;
    /* 向右微调 1 像素 */
    margin-right: -18px;
    /* 向左收紧 18 像素 */
    margin-top: 0;
    /* 去掉顶部多余空隙 */
}

.rect2 {
    /* “省内要闻”标题底部矩形底板 */
    top: 18px;
    /* 与标题垂直间距 */
}

.subtitle-symbol2 {
    /* “省内要闻”红色小标题 */
    left: 184px;
    /* 左侧偏移量 */
    right: 186px;
    /* 右侧偏移量 */
}

.subtitle-symbol1,
.subtitle-symbol2,
.subtitle-symbol3 {
    position: absolute;
    /* 定位在白色矩形上方 */
    z-index: 2;
    /* 高于矩形显示 */
    top: 0;
    /* 顶部对齐父容器 */
}

.group-bottom {
    /* 下方“党校学习”整体容器（已简化层级） */
    position: relative;
    /* 作为矩形和卡片的定位参照 */
    margin-left: -4px;
    /* 向左微调以与上方对齐 */
    min-height: 311px;
    /* 保证区域最小高度与视觉设计一致 */
    flex-shrink: 0;
    /* 防止压缩高度 */
    width: 100%;
    /* 宽度占满父级列宽 */
    max-width: 594px;
    /* 最大宽度与左侧卡片一致 */
}

.card3 {
    /* “党校学习”列表卡片，相对 group-bottom 定位 */
    position: absolute;
    /* 绝对定位到标题和矩形下方 */
    top: 42px;
    /* 与标题底部的垂直距离 */
    left: 0;
    /* 紧贴容器左侧 */
    width: 100%;
    /* 宽度占满父容器 */
    max-width: 594px;
    /* 最大宽度 594 像素 */
    bottom: -20px;
}

.card3 .symbol1 {
    /* “党校学习”第一条列表位置微调 */
    margin-left: 1px;
    /* 向右微调 1 像素 */
    margin-right: -18px;
    /* 向左收紧 18 像素 */
    margin-top: 0;
    /* 去掉顶部多余空隙 */
}

.rect3 {
    /* “党校学习”标题底部矩形底板 */
    position: absolute;
    /* 绝对定位在 group-bottom 顶部 */
    top: 0;
    /* 顶部对齐父容器 */
    left: 206px;
    /* 左侧偏移量，与其他区域保持一致 */
    width: 184px;
    /* 底板宽度 */
    height: 62px;
    /* 底板高度 */
    background-color: var(--color-surface);
    /* 底板背景为白色 */
}

.subtitle-symbol3 {
    /* “党校学习”红色小标题 */
    top: -13px;
    /* 相对矩形轻微上移 */
    left: 184px;
    /* 左侧偏移量 */
    right: 186px;
    /* 右侧偏移量 */
}

.footer {
    /* 页面底部红色版权信息区域 */
    margin-top: 44px;
    /* 与主体内容之间的垂直间距 */
    color: var(--color-footer-text);
    /* 文本颜色为浅米色 */
    font-size: var(--font-size-footer);
    /* 底部文字字号 */
    line-height: 2.04;
    /* 较大的行高，提升阅读性 */
    background-color: var(--color-accent-red);
    /* 底部背景为红色 */
    padding: 53px 486px;
    /* 上下与左右内边距 */
}


/* 响应式断点：整体边距与内边距调整 */

@media screen and (max-width: 1280px) {
    /* 当视口宽度小于等于 1280 像素时 */
    .symbol-b {
        /* 列表项行容器 */
        margin-inline: 0;
        /* 清除左右外边距，避免过多缩进 */
    }
    .title-toutiao {
        /* 头条标题 */
        margin-inline: var(--margin-sm);
        /* 使用全局小号水平间距 */
    }
    .col {
        /* 上方图片列表区域 */
        padding-inline: 0;
        /* 去除左右内边距，让内容更紧凑 */
    }
    .symbol-a {
        /* 小方块行容器 */
        padding-inline: 0;
        /* 去掉左右内边距 */
    }
    .group-left {
        /* 左侧评论解读区域 */
        margin-inline: 0;
        /* 清除左右外边距 */
    }
    .symbol12 {
        /* 首条列表项 */
        margin-inline: 0;
        /* 取消特殊的左右微调 */
    }
    .col-right {
        /* 右侧整体区域 */
        margin-inline: 0;
        /* 清除左右外边距 */
    }
    .group1 {
        /* 省内要闻区域 */
        margin-inline: 0;
        /* 清除左右外边距 */
    }
    .card2 .symbol1 {
        /* 省内要闻首条列表项 */
        margin-inline: 0;
        /* 取消特殊的左右微调 */
    }
    .group-bottom {
        /* 党校学习区域 */
        margin-inline: 0;
        /* 清除左右外边距 */
    }
    .card3 .symbol1 {
        /* 党校学习首条列表项 */
        margin-inline: 0;
        /* 取消特殊的左右微调 */
    }
    .footer {
        /* 底部版权区域 */
        padding-inline: var(--margin-md);
        /* 使用中号水平内边距 */
    }
}

@media screen and (max-width: 576px) {
    /* 当视口宽度小于等于 576 像素（手机）时 */
    .footer {
        /* 底部版权区域 */
        padding-inline: var(--margin-sm);
        /* 使用更小的水平内边距 */
    }
}


/* 容器查询：根据 body 宽度调整布局（而非视口宽度） */

@container body (width < 1199px) {
    /* 当 body 有效宽度小于 1199 像素时 */
    .row {
        /* 下方左右两列整体容器 */
        flex-direction: column;
        /* 改为上下排列两大区域 */
        align-items: stretch;
        /* 子元素拉伸占满宽度 */
        gap: 100px;
        /* 上下两块区域之间较大间距 */
    }
    .title-toutiao {
        /* 头条标题 */
        margin-left: 0;
        /* 左外边距清零 */
        margin-right: 0;
        /* 右外边距清零 */
    }
    .row>* {
        /* 直接子元素（左列和右列） */
        margin-left: unset !important;
        /* 清空左外边距，覆盖原设置 */
        margin-right: unset !important;
        /* 清空右外边距，覆盖原设置 */
        margin-top: unset !important;
        /* 清空上外边距，避免重叠 */
    }
    .row>.group-left {
        /* 左侧评论解读列 */
        width: 100%;
        /* 宽度占满可用宽度 */
        max-width: 594px;
        /* 最大宽度仍为 594 像素 */
    }
    .row>.col-right {
        /* 右侧两块列表列 */
        width: 100%;
        /* 宽度占满可用宽度 */
        max-width: 590px;
        /* 最大宽度为 590 像素 */
    }
}