.first {
    position: relative;
    width: 100%;
    max-width: 19.2rem;
    height: 8rem;
    margin: 0 auto;
    background: #1a1a1a url('../assets/images/news/first-img1.webp') no-repeat center / cover;
    box-sizing: border-box;
    padding: 0 1.6rem;
    color: #FFF;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.first__content {
    flex: 1;
    min-width: 0;
}

.first__title {
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.44rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    margin: 0 0 0.24rem;
}

.first__desc {
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: capitalize;
    margin: 0;
}

.first__breadcrumb {
    position: absolute;
    left: 1.6rem;
    bottom: 0.30rem;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 0.10rem;
    margin: 0;
    padding: 0;
}

.first__breadcrumb a {
    color: #FFF;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.first__breadcrumb a:hover {
    opacity: 0.75;
}

.first__breadcrumb-sep {
    color: #FFF;
    opacity: 0.85;
}

.first__breadcrumb-current {
    color: #FFF;
}

.second {
    padding: 1rem 1.6rem;
}

.second__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.46rem;
}

.second__header h2 {
    color: #333;
    font-family: Inter;
    font-size: 0.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
}

.second__header-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.second__header-nav div {
    padding: 0.16rem 0.5rem;
    background: #F3F3F3;
    color: #333;
    text-align: center;
    font-family: "Avant Garde Gothic Itc L OT";
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    /* 22.5px */
    text-transform: capitalize;
}

.second__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    color: inherit;
    text-decoration: none;
}

.second__inner img {
    width: 5.54rem;
    height: 3.48rem;
    z-index: 10;
    position: absolute;
    left: 0;
    /* 悬浮放大：以左侧为原点，避免放大后压到右侧文本区 */
    transform-origin: left center;
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.75s ease;
    will-change: transform;
}

.second__inner-box {
    width: 13.86rem;
    height: 4rem;
    padding: 0.24rem 0.24rem 0.24rem 3.89rem;
    background: #EFEFEF;
}

.second__inner-box {
    width: 13.86rem;
    height: 4rem;
    padding: 0.24rem 0.24rem 0.24rem 3.89rem;
    background: #EFEFEF;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.second__inner-box div:first-child {
    color: #999;
    font-family: Inter;
    font-size: 0.16rem;
    margin-bottom: 0.14rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
}

.second__inner-box div:nth-child(2) {
    color: var(--Style, #02347D);
    font-family: Inter;
    font-size: 0.26rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0.14rem;
}

.second__inner-box div:nth-child(3) {
    overflow: hidden;
    color: #1A1A1A;
    text-overflow: ellipsis;
    font-family: Inter;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0.8rem;
}

.second__inner-box .second__more {
    color: var(--Style, #02347D);
    font-family: Inter;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
}

.second__bottom{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0.46rem;
}

.second__bottom-item{
    display: flex;
    flex-direction: column;
    margin-bottom: 0.46rem;
    color: inherit;
    text-decoration: none;
}

.second__bottom-item-img {
    width: 7.85rem;
    height: 4rem;
    overflow: hidden;
}

.second__bottom-item-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.second__bottom-item-box{
    width: 7.85rem;
    height: 2.21rem;
    padding: 0.2rem;
    display: flex;
    flex-direction: column;
    background: #EFEFEF;
}

.second__bottom-item-box div:first-child {
    color: #999;
    font-family: Inter;
    font-size: 0.16rem;
    margin-bottom: 0.14rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
}

.second__bottom-item-box div:nth-child(2) {
    color: var(--Style, #02347D);
    font-family: Inter;
    font-size: 0.26rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0.14rem;
        white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.second__bottom-item-box div:nth-child(3) {
    overflow: hidden;
    color: #666666;
    text-overflow: ellipsis;
    font-family: Inter;
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.second__bottom-item-box .second__more {
    color: var(--Style, #02347D);
    font-family: Inter;
    font-size: 0.16rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
}

.second__pagination{
    margin-top: 0;
}

/* ============================================================
   第二屏：个性化滚动入场动效
   JS（js/news.js）为「标题栏 / 头条卡 / 列表卡 / 分页器」分别挂载
   IntersectionObserver，元素进入视口才播放，同批次内错峰 0.12s。
   关键帧统一使用 backwards 填充：动画结束后回归基础样式，
   不会与后面的悬浮 transform 冲突。
   ============================================================ */
html.js .second__header:not(.is-in-view),
html.js .second__inner:not(.is-in-view),
html.js .second__bottom-item:not(.is-in-view),
html.js .second__pagination:not(.is-in-view) {
    opacity: 0;
}

/* ---- 1. 标题：去模糊上浮 ---- */
.second__header.is-in-view h2 {
    animation: nsTitleIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* ---- 2. 分类切换：依次回弹落入 ---- */
.second__header.is-in-view .second__header-nav div {
    animation: nsPillIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.second__header.is-in-view .second__header-nav div:nth-child(1) {
    animation-delay: 0.14s;
}

.second__header.is-in-view .second__header-nav div:nth-child(2) {
    animation-delay: 0.24s;
}

.second__header.is-in-view .second__header-nav div:nth-child(3) {
    animation-delay: 0.34s;
}

/* ---- 3. 头条卡：大图左推入 + 文本区右推入 + 文案逐行浮现 ---- */
.second__inner.is-in-view > img {
    animation: nsHeroImgIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.08s backwards;
}

.second__inner.is-in-view .second__inner-box {
    animation: nsSlideRight 1s cubic-bezier(0.22, 1, 0.36, 1) 0.24s backwards;
}

.second__inner.is-in-view .second__inner-box > * {
    animation: nsLineIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.second__inner.is-in-view .second__inner-box > *:nth-child(1) {
    animation-delay: 0.4s;
}

.second__inner.is-in-view .second__inner-box > *:nth-child(2) {
    animation-delay: 0.48s;
}

.second__inner.is-in-view .second__inner-box > *:nth-child(3) {
    animation-delay: 0.56s;
}

.second__inner.is-in-view .second__inner-box > *:nth-child(4) {
    animation-delay: 0.64s;
}

/* ---- 4. 列表卡：逐张上浮，配图由放大归位 ---- */
.second__bottom-item.is-in-view {
    animation: nsCardIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.second__bottom-item.is-in-view .second__bottom-item-img img {
    animation: nsImgZoom 1.25s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

.second__bottom-item.is-in-view .second__bottom-item-box > * {
    animation: nsLineIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.second__bottom-item.is-in-view .second__bottom-item-box > *:nth-child(1) {
    animation-delay: 0.3s;
}

.second__bottom-item.is-in-view .second__bottom-item-box > *:nth-child(2) {
    animation-delay: 0.38s;
}

.second__bottom-item.is-in-view .second__bottom-item-box > *:nth-child(3) {
    animation-delay: 0.46s;
}

.second__bottom-item.is-in-view .second__bottom-item-box > *:nth-child(4) {
    animation-delay: 0.54s;
}

/* ---- 5. 分页器 ---- */
.second__pagination.is-in-view {
    animation: nsLineIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
}

/* ---------- 关键帧 ---------- */
@keyframes nsTitleIn {
    from {
        opacity: 0;
        transform: translateY(0.24rem);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes nsPillIn {
    from {
        opacity: 0;
        transform: translateY(-0.18rem) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes nsHeroImgIn {
    from {
        opacity: 0;
        transform: translateX(-0.55rem) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes nsSlideRight {
    from {
        opacity: 0;
        transform: translateX(0.45rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes nsCardIn {
    from {
        opacity: 0;
        transform: translateY(0.36rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes nsImgZoom {
    from {
        opacity: 0;
        transform: scale(1.18);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes nsLineIn {
    from {
        opacity: 0;
        transform: translateY(0.16rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   第二屏：悬浮动效
   ============================================================ */

/* ---- 分类切换：背景 #02347D + 文字白色（自下而上填充） ---- */
.second__header-nav div {
    position: relative;
    /* 与 ::before 的 z-index:-1 配合：自身成为层叠上下文，
       保证填充色块盖在底色之上、文字之下 */
    z-index: 0;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.4s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.second__header-nav div::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #02347D;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.second__header-nav div:hover {
    color: #FFF;
    transform: translateY(-0.04rem);
}

.second__header-nav div:hover::before {
    transform: scaleY(1);
}

/* 点击反馈：按下瞬间轻微内缩，松手回弹 */
.second__header-nav div:active {
    transform: translateY(0) scale(0.95);
    transition-duration: 0.12s;
}

.second__header-nav div:active::before {
    transition-duration: 0.12s;
}

/* 选中态：点击后保持蓝底白字（JS 切换 .is-active） */
.second__header-nav div.is-active {
    color: #FFF;
}

.second__header-nav div.is-active::before {
    transform: scaleY(1);
}

/* 键盘可达：聚焦时给出清晰描边 */
.second__header-nav div:focus-visible,
.second__inner:focus-visible,
.second__bottom-item:focus-visible {
    outline: 0.02rem solid #02347D;
    outline-offset: 0.04rem;
}

/* ---- 头条卡：整体上浮 + 大图缓推 + 顶部亮条 + 链接下划线展开 ---- */
.second__inner-box {
    position: relative;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.5s ease;
    will-change: transform;
}

.second__inner-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0.05rem;
    z-index: 2;
    background: linear-gradient(90deg, #02347D, #00B8E2);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.second__inner-box div:nth-child(2) {
    transition: color 0.4s ease;
}

.second__inner-box .second__more {
    align-self: flex-start;
    padding-bottom: 0.04rem;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 0.01rem;
    transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.4s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.second__inner:hover > img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

.second__inner:hover .second__inner-box {
    transform: translateY(-0.05rem);
    background: #FFF;
}

.second__inner:hover .second__inner-box::before {
    transform: scaleX(1);
}

.second__inner:hover .second__inner-box div:nth-child(2) {
    color: #0A4BA8;
}

.second__inner:hover .second__more {
    background-size: 100% 0.01rem;
    transform: translateX(0.06rem);
}

/* 点击反馈：保持上浮位置并轻微内缩 */
.second__inner:active .second__inner-box {
    transform: translateY(-0.05rem) scale(0.995);
    transition-duration: 0.15s;
}

/* ---- 列表卡：上浮 + 配图推近 + 文本区反白（文本变色） ---- */
.second__bottom-item {
    position: relative;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.second__bottom-item-box {
    transition: background 0.45s ease;
}

.second__bottom-item-box div:first-child,
.second__bottom-item-box div:nth-child(2),
.second__bottom-item-box div:nth-child(3) {
    transition: color 0.4s ease;
}

.second__bottom-item-box .second__more {
    align-self: flex-start;
    padding-bottom: 0.04rem;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 0.01rem;
    transition: color 0.4s ease,
        background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.second__bottom-item:hover {
    transform: translateY(-0.08rem);
}

/* 点击反馈：保持上浮位置并轻微内缩 */
.second__bottom-item:active {
    transform: translateY(-0.08rem) scale(0.995);
    transition-duration: 0.15s;
}

.second__bottom-item:hover .second__bottom-item-img img {
    transform: scale(1.08);
}

.second__bottom-item:hover .second__bottom-item-box {
    background: var(--Style, #02347D);
}

.second__bottom-item:hover .second__bottom-item-box div:first-child {
    color: rgba(255, 255, 255, 0.72);
}

.second__bottom-item:hover .second__bottom-item-box div:nth-child(2) {
    color: #FFF;
}

.second__bottom-item:hover .second__bottom-item-box div:nth-child(3) {
    color: rgba(255, 255, 255, 0.85);
}

.second__bottom-item:hover .second__more {
    color: #FFF;
    background-size: 100% 0.01rem;
    transform: translateX(0.06rem);
}

/* ---- 移动端：悬浮不做位移，避免误触跳动 ---- */
html[data-mode="h5"] .second__header-nav div:hover,
html[data-mode="h5"] .second__inner:hover .second__inner-box,
html[data-mode="h5"] .second__bottom-item:hover {
    transform: none;
}

html[data-mode="h5"] .second__inner:hover > img,
html[data-mode="h5"] .second__bottom-item:hover .second__bottom-item-img img {
    transform: none;
}

/* ============================================================
   H5 排版适配（data-mode="h5"，750 设计稿基准）
   ============================================================ */
/* ---------- 第一屏 ---------- */
html[data-mode="h5"] .first {
    height: 4.4rem;
    padding: 0 0.3rem;
}

html[data-mode="h5"] .first__title {
    font-size: 0.4rem;
    margin-bottom: 0.16rem;
}

html[data-mode="h5"] .first__desc {
    font-size: 0.24rem;
}

html[data-mode="h5"] .first__breadcrumb {
    left: 0.3rem;
    bottom: 0.2rem;
    font-size: 0.22rem;
    gap: 0.08rem;
}

/* ---------- 第二屏容器与标题栏 ---------- */
html[data-mode="h5"] .second {
    padding: 0.6rem 0.3rem;
    /* 入场动画的 translateX(±0.45rem) 在窄屏会形成瞬时横向溢出，此处裁掉 */
    overflow: hidden;
}

html[data-mode="h5"] .second__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.24rem;
    margin-bottom: 0.3rem;
}

html[data-mode="h5"] .second__header h2 {
    font-size: 0.36rem;
}

/* 分类切换胶囊：窄屏改为横向滚动，避免整行撑宽 */
html[data-mode="h5"] .second__header-nav {
    width: 100%;
    gap: 0.16rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

html[data-mode="h5"] .second__header-nav::-webkit-scrollbar {
    display: none;
}

html[data-mode="h5"] .second__header-nav div {
    flex-shrink: 0;
    padding: 0.16rem 0.28rem;
    font-size: 0.24rem;
}

/* ---------- 头条卡：PC 为「左侧叠图 + 右侧文本块」，H5 改为纵向堆叠 ---------- */
html[data-mode="h5"] .second__inner {
    flex-direction: column;
    align-items: stretch;
}

html[data-mode="h5"] .second__inner img {
    position: static;
    width: 100%;
    height: 3.6rem;
}

html[data-mode="h5"] .second__inner-box {
    width: 100%;
    height: auto;
    padding: 0.24rem;
}

html[data-mode="h5"] .second__inner-box div:first-child {
    font-size: 0.24rem;
    margin-bottom: 0.12rem;
}

html[data-mode="h5"] .second__inner-box div:nth-child(2) {
    font-size: 0.3rem;
    margin-bottom: 0.12rem;
}

html[data-mode="h5"] .second__inner-box div:nth-child(3) {
    font-size: 0.24rem;
    margin-bottom: 0.24rem;
}

html[data-mode="h5"] .second__inner-box .second__more,
html[data-mode="h5"] .second__bottom-item-box .second__more {
    font-size: 0.24rem;
}

/* ---------- 列表：PC 为两列，H5 改为单列 ---------- */
html[data-mode="h5"] .second__bottom {
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

html[data-mode="h5"] .second__bottom-item {
    width: 100%;
    margin-bottom: 0;
}

/* 图片与信息框的固定 7.85rem 在窄屏会直接撑破页面 */
html[data-mode="h5"] .second__bottom-item-img {
    width: 100%;
    height: 3.6rem;
}

html[data-mode="h5"] .second__bottom-item-box {
    width: 100%;
    height: auto;
    padding: 0.24rem;
}

html[data-mode="h5"] .second__bottom-item-box div:first-child {
    font-size: 0.24rem;
    margin-bottom: 0.12rem;
}

html[data-mode="h5"] .second__bottom-item-box div:nth-child(2) {
    font-size: 0.3rem;
    margin-bottom: 0.12rem;
}

html[data-mode="h5"] .second__bottom-item-box div:nth-child(3) {
    font-size: 0.24rem;
    margin-bottom: 0.24rem;
}

/* ---- 系统开启“减少动态效果”：直接显示，关闭位移与动画 ---- */
@media (prefers-reduced-motion: reduce) {

    html.js .second__header:not(.is-in-view),
    html.js .second__inner:not(.is-in-view),
    html.js .second__bottom-item:not(.is-in-view),
    html.js .second__pagination:not(.is-in-view) {
        opacity: 1;
    }

    .second__header.is-in-view h2,
    .second__header.is-in-view .second__header-nav div,
    .second__inner.is-in-view > img,
    .second__inner.is-in-view .second__inner-box,
    .second__inner.is-in-view .second__inner-box > *,
    .second__bottom-item.is-in-view,
    .second__bottom-item.is-in-view .second__bottom-item-img img,
    .second__bottom-item.is-in-view .second__bottom-item-box > *,
    .second__pagination.is-in-view {
        animation: none;
    }

    .second__header-nav div:hover,
    .second__inner:hover .second__inner-box,
    .second__bottom-item:hover {
        transform: none;
    }

    .second__inner:hover > img,
    .second__bottom-item:hover .second__bottom-item-img img {
        transform: none;
    }
}