/* ================= 电脑端原版样式 (100%保持原样，禁止变动) ================= */
.news_info_container{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20vh;
    box-sizing: border-box;
}

.news_info_container .width_limit{
    position: relative;
    width: 61%;
}

.news_info_container .switch_container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.news_info_container .switch_container .btn{
    display: flex;
    align-items: center;
    color: #808181;
}
.news_info_container .switch_container .btn .icon{
    width: 1.979vw;
    height: 1.979vw;
    border-radius: 50%;
    border: 1px solid #808181;
    display: flex;
    justify-content: center;
    align-items: center;
}
.news_info_container .switch_container .btn .text{
    font-size: 0.94vw;
    font-weight: bold;
    color: #808181;
    margin: 0 0.729vw;
}
.news_info_container .switch_container .btn .iconfont{
    font-size: 1vw;
    line-height: 0;
}
.news_info_container .switch_container .btn.left .iconfont{
    transform: rotate(180deg);
}

.news_info_container .title_time{
    margin-bottom: 3vw;
}
.news_info_container .title_time .title{
    font-weight: bold;
    font-size: 3.125vw;
    color: #1B1B1B;
    margin: 2.448vw 0 1.667vw;
}
.news_info_container .title_time .time_container{
    display: flex;
    align-items: center;
}
.news_info_container .title_time .time{
    font-size: 0.84vw;
    color: #808080;
    margin-right: 1.4vw;
}
.news_info_container .title_time .iconfont{
    font-size: 0.94vw;
    color: #808080;
}

.news_info_container .article_main p,.news_info_container .article_main span{
    font-size: 0.84vw;
    color: #434343;
    font-family: none;
    white-space: pre-line;
    word-break: normal;
    word-wrap:break-word;
    line-height: 1.5;
    overflow-wrap: break-word;
}
.news_info_container .article_main img{
    width: 100%;
    object-fit: contain;
    margin: 3.646vw 0;
    transition: scale .5s;
}
.news_info_container .article_main img:first-child {
    margin-top: 0;
}
.news_info_container .article_main img:hover{
    scale: 1.02;
}

.news_limit{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.news_limit .title{
    font-weight: bold;
    font-size: 1.875vw;
    color: #1B1B1B;
    line-height: 1;
    margin: 13.125vw 0 3.75vw;
}
.news_list{
    position: relative;
    width: 62%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.news_list .news_item{
    position: relative;
    width: 48.3%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6.66vw;
}
.news_list .news_item .card_container{
    position: relative;
    width: 100%;
    padding: 0.84vw;
    box-sizing: border-box;
    background-color: #F3F5F8;
    border-radius: 1.1vw;
}
.card_container .img_container{
    position: relative;
    width: 100%;
    height: 15vw;
    border-radius: 1vw;
    overflow: hidden;
}
.card_container .img_container img{
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card_container .title{
    font-weight: bold;
    font-size: 1.563vw;
    color: #262626;
    padding: 0 5%;
    margin-top: 2.45vw;
    line-height: 1.2;
}
.card_container .text{
    color: #4D4D4D;
    font-size: 0.94vw;
    line-height: 1.666;
    padding: 0 5%;
    margin-top: 1.06vw;
}
.card_container .time{
    display: inline-flex;
    padding: 0.73vw 1.15vw;
    box-sizing: border-box;
    border-radius: 999px;
    background-color: #DCE2EC;
    color: #143B84;
    font-size: 0.84vw;
    line-height: 1;
    margin-left: 5%;
    margin-top: 1.788vw;
    margin-bottom: 1.042vw;
}

/* ================= 平板端适配 (769px ~ 1024px) ================= */
@media (max-width: 1024px) and (min-width: 769px) {
    .news_info_container {
        padding-top: 140px;
    }
    .news_info_container .width_limit {
        width: 82%;
    }
    .news_info_container .title_time .title {
        font-size: 28px;
    }
    .news_info_container .title_time .time {
        font-size: 14px;
    }
    .news_info_container .article_main p,
    .news_info_container .article_main span {
        font-size: 16px;
        line-height: 1.75;
    }
    .news_limit .title {
        font-size: 24px;
        margin: 60px 0 24px;
    }
    .news_list {
        width: 82%;
    }
    .card_container .img_container {
        height: 200px;
    }
    .card_container .title {
        font-size: 18px;
    }
    .card_container .text {
        font-size: 13.5px;
    }
}

/* ================= 移动端专属适配 (<= 768px) ================= */
@media screen and (max-width: 768px) {
    /* 1. 主体容器与内边距 */
    .news_info_container {
        padding-top: 95px; /* 避开固定导航条 */
    }

    .news_info_container .width_limit {
        width: 92%; /* 展开宽度，提供宽裕的手机阅读视野 */
    }

    /* 2. 上下方翻页控制栏 */
    .news_info_container .switch_container {
        margin-bottom: 18px;
    }

    .news_info_container .switch_container .btn .icon {
        width: 28px;
        height: 28px;
        border-width: 1.5px;
    }

    .news_info_container .switch_container .btn .text {
        font-size: 13px;
        margin: 0 6px;
    }

    .news_info_container .switch_container .btn .iconfont {
        font-size: 12px;
    }

    /* 3. 标题与时间标签 */
    .news_info_container .title_time {
        margin-bottom: 20px;
    }

    .news_info_container .title_time .title {
        font-size: 21px;
        line-height: 1.35;
        margin: 12px 0 10px;
        color: #1A1A1A;
    }

    .news_info_container .title_time .time {
        font-size: 12.5px;
        margin-right: 8px;
    }

    .news_info_container .title_time .iconfont {
        font-size: 13px;
    }

    /* 4. 文章正文排版（提升移动端可读性） */
    .news_info_container .article_main p,
    .news_info_container .article_main span {
        font-size: 15px;
        line-height: 1.8;
        color: #333333;
        font-family: inherit;
        letter-spacing: 0.2px;
    }

    .news_info_container .article_main img {
        margin: 18px 0;
        border-radius: 8px;
    }

    /* 移动端取消 hover 放大，避免触屏闪烁 */
    .news_info_container .article_main img:hover {
        scale: 1;
    }

    /* 5. 推荐新闻板块 */
    .news_limit .title {
        font-size: 20px;
        margin: 46px 0 18px;
    }

    .news_list {
        width: 92%;
        flex-direction: column;
    }

    /* 推荐列表切换为单列排版 */
    .news_list .news_item {
        width: 100%;
        margin-bottom: 18px;
    }

    .news_list .news_item .card_container {
        width: 100%;
        padding: 12px;
        border-radius: 14px;
    }

    .card_container .img_container {
        width: 100%;
        height: 175px;
        border-radius: 10px;
    }

    .card_container .title {
        font-size: 16px;
        line-height: 1.4;
        margin-top: 12px;
        padding: 0 4px;
    }

    .card_container .text {
        font-size: 13px;
        line-height: 1.55;
        margin-top: 8px;
        padding: 0 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card_container .time {
        font-size: 11.5px;
        padding: 4px 12px;
        margin-left: 4px;
        margin-top: 12px;
        margin-bottom: 4px;
    }
}
/* ================= 详情页推荐资讯 Card Hover 交互动效 ================= */

/* 1. 设置手型指针与各属性平滑过渡 */
.news_list .news_item {
    cursor: pointer;
}

.news_list .news_item .card_container {
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.35s ease;
    will-change: transform, box-shadow;
}

.card_container .img_container img {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.card_container .title {
    transition: color 0.3s ease;
}

.card_container .time {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 2. 鼠标悬停 (Hover) 触发的动效体系 (仅对支持 Hover 设备生效) */
@media (hover: hover) {
    /* 卡片上浮 + 由浅灰底渐变为纯白底 + 品牌深蓝弥散软投影 */
    .news_list .news_item:hover .card_container {
        transform: translateY(-8px);
        background-color: #ffffff;
        box-shadow: 0 16px 32px rgba(19, 57, 132, 0.08), 
                    0 4px 12px rgba(0, 0, 0, 0.04);
    }

    /* 封面图平滑放大缩放 (Zoom-in) */
    .news_list .news_item:hover .img_container img {
        transform: scale(1.06);
    }

    /* 标题高亮为品牌蓝 */
    .news_list .news_item:hover .title {
        color: #143B84;
    }

    /* 时间胶囊变为品牌纯蓝实心标签 */
    .news_list .news_item:hover .time {
        background-color: #143B84;
        color: #ffffff;
    }
}

/* ================= 上/下一篇 Switch Btn Hover 交互动效 ================= */

/* 1. 设置手型与过渡属性 */
.news_info_container .switch_container .btn {
    cursor: pointer;
    user-select: none;
}

.news_info_container .switch_container .btn .text {
    transition: color 0.3s ease;
}

.news_info_container .switch_container .btn .icon {
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                background-color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.news_info_container .switch_container .btn .iconfont {
    transition: color 0.3s ease;
}

/* 2. 悬停 (Hover) 交互 */
@media (hover: hover) {
    /* 文字变色 */
    .news_info_container .switch_container .btn:hover .text {
        color: #143B84;
    }

    /* 图标圆圈：变为品牌蓝底 + 白箭头 + 柔和光晕 */
    .news_info_container .switch_container .btn:hover .icon {
        background-color: #143B84;
        border-color: #143B84;
        box-shadow: 0 4px 12px rgba(20, 59, 132, 0.25);
    }

    .news_info_container .switch_container .btn:hover .iconfont {
        color: #ffffff;
    }

    /* 左侧按钮悬停：圆圈向左平滑微位移 */
    .news_info_container .switch_container .btn.left:hover .icon {
        transform: translateX(-4px);
    }

    /* 右侧按钮悬停：圆圈向右平滑微位移 */
    .news_info_container .switch_container .btn:not(.left):hover .icon {
        transform: translateX(4px);
    }
}