/* ============================================================
   雅安市人民政府 - 首页（index）
   布局说明：PC 基础样式为 1200px 居中容器（base.css 在 ≤1280 视口
   会把 .container 强制为 970px，故第一档断点取 1280 与之对齐）；
   响应式三档：1280px(按1024x1366) / 992px(按768x1024) / 450px(按360x740)
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: #000;
    transition: all 0.2s ease;
}

ul {
    list-style: none;
}

img {
    vertical-align: middle;
}

/* ===================== 头条 ===================== */
.toutiao-box {
    margin-top: 20px;
    text-align: center;
}

.toutiao-box h1 a {
    font-size: 32px;
    color: #185ca2;
}

.toutiao-box > span {
    display: block;
    margin-top: 10px;
    color: #185ca2;
}

/* ===================== 要闻区（轮播 + 右侧 tab 列表） ===================== */
.top-news-box {
    display: block;
    justify-content: space-between;
    height: 410px;
    margin-top: 20px;
}

/* ---- 左侧轮播 ---- */
.top-news-box .left-images-box {
    position: relative;
    width: 700px;
    height: 410px;
    flex-shrink: 0;
    overflow: hidden;
    float: left;
}

.top-news-box .left-images-box .bd,
.top-news-box .left-images-box .bd ul,
.top-news-box .left-images-box .bd ul li {
    width: 700px;
    height: 410px;
}

.top-news-box .left-images-box .bd ul li {
    position: absolute;
}

.top-news-box .left-images-box .bd img {
    width: 700px;
    height: 410px;
    object-fit: cover;
}

/* 轮播底部标题条 */
.top-news-box .left-images-box .bd span {
    position: relative;
    float: left;
    z-index: 0;
    width: 100%;
    margin-top: -35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.75);
}

.top-news-box .left-images-box .bd ul li span a {
    display: inline-block;
    width: 500px;
    margin-left: 15px;
    color: #fff !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 轮播指示点 */
.top-news-box .left-images-box .hd {
    position: absolute;
    right: 0;
    bottom: 10px;
    z-index: 1;
}

.top-news-box .left-images-box .hd ul {
    float: right;
    margin-top: 15px;
    margin-right: 5px;
}

.top-news-box .left-images-box .hd ul li {
    float: left;
    width: 15px;
    height: 15px;
    margin-right: 10px;
    line-height: 14px;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    cursor: pointer;
    transition: all 1s;
}

.top-news-box .left-images-box .hd .on {
    width: 50px;
    background: #fff;
    color: #fff;
}

/* ---- 右侧 tab 列表 ---- */
.top-news-box .right-list-box {
    width: 480px;
    height: 410px;
    flex-shrink: 0;
    float: right;
}

.top-news-box .right-list-box .hd {
    height: 50px;
}

.top-news-box .right-list-box .hd ul {
    display: flex;
}

.top-news-box .right-list-box .hd ul li {
    width: 240px;
    height: 40px;
    text-align: center;
    background-color: #d9ebff;
}

.top-news-box .right-list-box .hd .on {
    background-color: #185ca2;
}

.top-news-box .right-list-box .hd .on a {
    color: #fff;
}

.top-news-box .right-list-box .hd ul li a {
    color: #2f2f2e;
    font-size: 20px;
    font-weight: bold;
    transition: none;
}

.top-news-box .right-list-box .bd,
.top-news-box .right-list-box .bd > div {
    height: 360px;
}

.top-news-box .right-list-box .bd ul {
    /* inline-block 让空列表宽度塌缩为 0，
       后面的 .wjk 文件库行才能与它同行排列（与线上效果一致） */
    display: inline-block;
    height: 360px;
    overflow: hidden;
}

.top-news-box .right-list-box .bd .gwyxx ul {
    height: 280px;
    display: block;
}

.top-news-box .right-list-box .bd .szfxx ul {
    height: 320px;
}

.top-news-box .right-list-box .bd ul li {
    margin-left: 20px;
    line-height: 40px;
    color: #185ca2;
    list-style: disc;
}
.top-news-box .right-list-box .bd .szfxx .wjk{height: 40px;}
#szfzcwjk{line-height: 30px;}
.top-news-box .right-list-box .bd ul li a {
    display: block;
    width: 460px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-news-box .right-list-box .bd ul li span {
    float: right;
    font-size: 0;
}

/* 文件库行（关注/政策文件库） */
.top-news-box .right-list-box .bd .wjk {
    /* inline-block 与空的新闻列表 ul 同行排列（与线上效果一致） */
    display: inline-block;
    width: 460px;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-news-box .right-list-box .bd .wjk .wjk_title {
    /* 必须显式 width:auto：上面的 .bd ul li a{width:460px} 会级联到本锚点，
       把 label 撑成一整行，导致后面的 wjk_text 换行被裁掉（PC 也复现） */
    display: inline-block;
    width: auto;
    color: #ff0000;
    vertical-align: bottom;
    white-space: nowrap;
}

.top-news-box .right-list-box .bd .wjk .wjk_text {
    display: inline-block;
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ===================== 双横幅链接 ===================== */
.hf-images-box-2 {
    display: block;
    justify-content: space-between;
    margin-top: 20px;
}

.hf-images-box-2 .images-box img {
    display: block;
    width: 590px;
    height: 85px;
}

/* ===================== 网站横幅轮播 ===================== */
.hf-images-box-1 {
    position: relative;
    margin: 20px auto;
    overflow: hidden;
    background: #fff;
}

.hf-images-box-1 .bd ul li {
    display: none;
}

.hf-images-box-1 .hd {
    position: absolute;
    right: 9px;
    bottom: 10px;
    z-index: 1;
    padding-left: 2px;
}

.hf-images-box-1 .hd ul li {
    float: left;
    width: 20px;
    height: 10px;
    margin-left: 5px;
    line-height: 18px;
    text-align: center;
    color: #f60;
    font-size: 13px;
    background: #fff;
    opacity: 0.7;
    cursor: pointer;
}

.hf-images-box-1 .hd .on {
    position: relative;
    z-index: 2;
    background: #5192dc;
    color: #fff;
    font-weight: bold;
    opacity: 1;
}
.hf-images-box-left{
    float: left;
}
.hf-images-box-right{
    float: right;
}
/* ===================== 专题专栏 ===================== */
.ztzl-box {
    margin-top: 20px;
    margin-bottom: 20px;
}

.ztzl-iamges-box {
    /* 高度随内容等比收缩（原固定 390px，窄容器下改由矩阵 aspect-ratio 决定） */
    height: auto;
    border: 2px solid #ddecf8;
    border-radius: 20px;
}

.ztzl-iamges-box .ztzl-iamges {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 15px;
}

.ztzl-iamges-box .ztzl-iamges ul {
    display: grid;
    width: 100%;
    /* 比例列宽（原 306/396/396），窄容器（base.css 970px 规则）下整体等比缩放 */
    grid-template-columns: 306fr 396fr 396fr;
    /* 原矩阵 1138x344，整体保持比例，行高由宽度推导 */
    aspect-ratio: 1138 / 344;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}

.ztzl-iamges-box .ztzl-iamges ul li:first-child {
    grid-row: 1 / 3;
}

.ztzl-iamges-box .ztzl-iamges ul li a,
.ztzl-iamges-box .ztzl-iamges ul li a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tab-brief > .hd li + li a {
    margin-left: 0px; 
}
/* ===================== 响应式：1280px（按 1024x1366 编写） =====================
   断点取 1280 而非 1200：base.css 在 ≤1280 视口会把 .container 强制为 970px(!important)，
   若响应式规则 1200px 才生效，1201~1280 区间（PC 放大 125%~150%）固定像素模块
   （700+480、590x2）会溢出 970px 容器导致浮动换行错位；1280 起流式规则即接管，
   该区间容器同为 970px，渲染与已验证正常的 993~1200 区间完全一致。 */
@media (max-width:1280px) {
    .container {
        width: 100%;
        max-width: 1200px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .toutiao-box {margin-top: 0px;}
    .toutiao-box h1 a {
        font-size: 26px;
    }

    .toutiao-box > span {
        font-size: 15px;
    }

    .top-news-box {
        height: auto;
    }

    /* 左轮播：PC 用固定 700x410，窄屏改为按比例自适应高度。
       注意 li 是绝对定位（SuperSlide 需要），父级若 height:auto 会塌成 0，
       所以这里用 aspect-ratio 给 .left-images-box 一个确定高度。 */
    .top-news-box .left-images-box {
        width: 58%;
        height: auto;
        aspect-ratio: 700 / 410;
    }
    .top-news-box .right-list-box .bd .gwyxx ul {height: 200px;}
    .top-news-box .right-list-box .bd .szfxx ul {height: 240px;}
    .top-news-box .right-list-box .bd ul {height: 280px;}
    .zxyw-gsgg{height: 315px;}
    .gwy-szf .wjk li{height: 35px;}
    .gwy-szf .wjk a{line-height: 35px;}
    .top-news-box .right-list-box .bd, .top-news-box .right-list-box .bd > div {
        height: 275px;
    }
    .top-news-box .left-images-box .bd,
    .top-news-box .left-images-box .bd ul,
    .top-news-box .left-images-box .bd ul li {
        width: 100%;
        height: 100%;
    }

    .top-news-box .left-images-box .bd img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .top-news-box .left-images-box .bd ul li span a {
        /* 标题条右侧是指示点区域，用 calc 预留位置，
           避免标题文字被指示点压住（右侧留 120px 点区 + 12px 间距） */
        width: calc(100% - 150px);
    }

    /* 指示点收窄，给标题留出更多横向空间 */
    .top-news-box .left-images-box .hd ul {
        margin-right: 12px;
    }

    .top-news-box .left-images-box .hd ul li {
        width: 12px;
        height: 12px;
        margin-right: 6px;
    }

    .top-news-box .left-images-box .hd .on {
        width: 30px;
    }

    .top-news-box .right-list-box {
        width: 40%;
        height: auto;
    }

    /* tab 头部：撑满整行 + 两栏等分。
       必须 float:none + width:100%，否则 common.css 的 float:left 会让 ul
       收缩成"内容宽"，li 的百分比宽度失效、标题换行并压住下方列表。 */
    .top-news-box .right-list-box .hd {
        height: auto;
    }

    .top-news-box .right-list-box .hd ul {
        float: none;
        display: flex;
        width: 100%;
    }

    .top-news-box .right-list-box .hd ul li {
        float: none;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 44px;
        line-height: 44px;
    }

    .top-news-box .right-list-box .hd ul li a {
        display: block;
        margin-left: 0;
        padding: 0 8px;
        line-height: 44px;
        font-size: 17px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 新闻列表：去掉 PC 的 inline-block 塌缩技巧，改为整行块级，
       条目文本整行省略，不再撑破容器。
       用 :not(.wjk) 排除"关注/政策文件库"行，避免误伤其 label 宽度。 */
    .top-news-box .right-list-box .bd ul {
        display: block;
        width: 100%;
    }

    .top-news-box .right-list-box .bd ul:not(.wjk) li a {
        display: block;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 关注 / 政策文件库行：label 固定宽 + 标题弹性省略，杜绝横向溢出 */
    .top-news-box .right-list-box .bd .wjk {
        display: block;
        width: 100%;
        white-space: normal;
    }

    .top-news-box .right-list-box .bd .wjk > li {
        display: flex;
        align-items: center;
        /* width:auto（而非 100%）配合继承来的 margin-left:20px，
           让行宽自动扣掉缩进，与新闻列表条目左边缘对齐且不溢出 */
        width: auto;
        min-width: 0;
    }

    .top-news-box .right-list-box .bd .wjk .wjk_title {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
    }

    .top-news-box .right-list-box .bd .wjk .wjk_text {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .hf-images-box-2 .images-box {
        width: 48.5%;
    }

    .hf-images-box-2 .images-box img {
        width: 100%;
        height: auto;
    }

    /* 网站横幅图随容器等比缩放：≤1280 时容器为 970px，
       原图约 1200px 宽会被 overflow 裁掉右侧 */
    .hf-images-box-1 .bd ul li img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* 专题专栏：不在此档拍平——基础样式的等比矩阵（306fr/396fr/396fr +
       aspect-ratio 1138/344 + 首图跨两行 + object-fit:cover）本身就是流式的，
       970px 容器下整体等比缩小即可；若改为 3 等列 + 图片自然高，
       高图会把第一行撑到 500px 以上，造成大片空白错位 */
    .hf-images-box-1 .hd{right: 30px;}
}

/* ===================== 响应式：992px（按 768x1024 编写） ===================== */
@media (max-width:992px) {
    .toutiao-box{margin-top: 10px;}
    .toutiao-box h1{
        line-height: 30px;
    }
    .toutiao-box h1 a {
        font-size: 22px;
    }
    
    .top-news-box {
        flex-direction: column;
    }

    .top-news-box .left-images-box {
        width: 100%;
        aspect-ratio: 700 / 410;
    }

    .top-news-box .left-images-box .hd ul li {
        width: 12px;
        height: 12px;
        margin-right: 6px;
    }
    .top-news-box .left-images-box .bd span {
        margin-top: -30px;
    }
    .top-news-box .left-images-box .hd .on {
        width: 30px;
    }

    .top-news-box .right-list-box {
        width: 100%;
        margin-top: 15px;
    }

    .top-news-box .right-list-box .bd,
    .top-news-box .right-list-box .bd > div,
    .top-news-box .right-list-box .bd ul,
    .top-news-box .right-list-box .bd .gwyxx ul,
    .top-news-box .right-list-box .bd .szfxx ul {
        height: auto;
    }

    .top-news-box .right-list-box .bd .gwyxx ul {height: 200px;}
    .top-news-box .right-list-box .bd .szfxx ul {height: 240px;}
    .top-news-box .right-list-box .bd ul {height: 280px;}
    .gwy-szf .wjk li{height: 40px;}
    .gwy-szf .wjk a{line-height: 40px;}
    .zxyw-gsgg{height: auto;}
    .top-news-box .right-list-box .bd, .top-news-box .right-list-box .bd > div {
        height: 275px;
    }
    .top-news-box .right-list-box .hd ul li a {
        font-size: 16px;
    }

    .hf-images-box-2 {
        flex-direction: column;
        margin-top: 10px;
    }

    .hf-images-box-2 .images-box {
        width: 100%;
    }

    .hf-images-box-2 .hf-images-box-right {
        margin-top: 12px;
    }

    .hf-images-box-1 {
        margin-top: 10px;
        padding: 0 15px 0;
    }
    body:not(.nores) .ztzl-box {
        width: calc(100% - 30px) !important;
    }

    /* 专题专栏沿用基础等比矩阵，不再改为 3 等列 */
}

/* ===================== 响应式：450px（按 360x740 编写） ===================== */
@media (max-width:460px){
    .toutiao-box {
        padding-left: 0px;
        padding-right: 0px;
    }
    .toutiao-box h1 a {
        font-size: 19px;
    }

    .toutiao-box > span {
        margin-top: 10px;
        font-size: 14px;
    }
    .right-list-box .bd{
        overflow: hidden;
    }
    .right-list-box .pal{
        max-height: 360px;
    }
    .top-news-box .right-list-box .bd .wjk li:nth-child(1){}
	.top-news-box .right-list-box .bd .wjk li:nth-child(2){
        margin-left: 15px !important;
    }
    #szfzcwjk{margin-left: 10px !important;}
    /* 窄屏纵向堆叠后 30px 区块间距偏大，收窄节奏 */
    .top-news-box {
        margin-top: 20px;
    }

    /* 头条/要闻/公告四栏目：左右留白收窄到 8px（覆盖 .container 的 15px） */
    .top-news-box {
        padding-left: 0px;
        padding-right: 0px;
    }

    .top-news-box .left-images-box .bd ul li span a {
        width: calc(100% - 132px);
        font-size: 14px;
    }

    .top-news-box .left-images-box .hd ul li {
        width: 10px;
        height: 10px;
        margin-right: 5px;
    }

    .top-news-box .left-images-box .hd .on {
        width: 26px;
    }

    .top-news-box .right-list-box .hd ul li {
        height: 40px;
        line-height: 40px;
    }

    .top-news-box .right-list-box .hd ul li a {
        padding: 0 6px;
        line-height: 40px;
        font-size: 15px;
    }

    .top-news-box .right-list-box .bd .szfxx ul {
        font-size: 15px;
        height: 235px;
    }
    .top-news-box .right-list-box .bd ul li {
        line-height: 40px;
    }

    .top-news-box .right-list-box .bd .wjk {
        font-size: 15px;
    }
    .hf-images-box-1 .hd{display: none;}
    .hf-images-box-1 .hd ul li {
        display:none;
        width: 14px;
        height: 8px;
    }
    body:not(.nores) .ztzl-box {
        width: calc(100% - 30px) !important;
    }
    /* 单列：解除基础矩阵的等比高度与首图跨行，图片按原始比例纵排 */
    .ztzl-iamges-box .ztzl-iamges ul {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: none;
        aspect-ratio: auto;
        gap: 10px;
    }
    .ztzl-iamges-box .ztzl-iamges ul li:first-child {
        grid-row: auto;
    }
    .ztzl-iamges-box .ztzl-iamges ul li a img {
        height: auto;
    }
    .ztzl-box{
        padding-left: 0px;
        padding-right: 0px;
        
    }
}