/* Inner-page content; header, navigation and footer use the homepage styles. */
.news-subpage {
    color: #222
}

body:has(.news-subpage) .site-header {
    color: #fff
}

.news-container {
    width: 85.5%;
    max-width: 1642px;
    margin-inline: auto
}

.news-banner {
    height: calc(968 * var(--u));
    background: #000
}

.news-banner>img {
    object-position: center
}

.news-banner-copy {
    padding-top: calc(365 * var(--u));
    margin-left: 7.3%
}

.news-outline {
    font-family: SourceHan, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: calc(150 * var(--u));
    font-weight: 500;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px #292929
}

.news-banner h1 {
    position: relative;
    margin-top: calc(-41 * var(--u));
    font-size: calc(50 * var(--u));
    font-weight: 500;
    line-height: 1.5
}

.news-banner-intro {
    margin-top: calc(44 * var(--u));
    font-size: calc(22 * var(--u))
}

.news-tabs {
    background: #fff;
    box-shadow: 0 5px 16px #00000009;
    position: relative;
    z-index: 1
}

.news-tabs .news-container {
    gap: calc(90 * var(--u))
}

.news-tabs a {
    height: calc(103 * var(--u));
    min-height: 64px;
    display: flex;
    align-items: center;
    font-size: max(14px, calc(18 * var(--u)));
    border-bottom: 3px solid transparent
}

.news-tabs a[aria-current] {
    color: #a30b40;
    border-color: #a30b40
}

.listing-section {
    background: #f0f0f0;
    padding: calc(81 * var(--u)) 0 calc(118 * var(--u))
}

.listing-grid {
    gap: calc(60 * var(--u)) calc(65 * var(--u))
}

.listing-card {
    min-width: 0;
    background: #fff;
    border-radius: calc(22 * var(--u));
    overflow: hidden
}

.listing-image {
    aspect-ratio: 503/324
}

.listing-image img {
    transition: transform .4s
}

.listing-card:hover .listing-image img {
    transform: scale(1.04)
}

.listing-copy {
    position: relative;
    margin-top: calc(-3 * var(--u));
    border-radius: calc(22 * var(--u));
    background: white;
    padding: calc(28 * var(--u)) calc(27 * var(--u)) calc(26 * var(--u))
}

.listing-category {
    font-size: max(11px, calc(13 * var(--u)));
    line-height: calc(33 * var(--u));
    display: inline-block;
    padding: 0 9px;
    background: #fafafa;
    border-radius: 20px
}

.listing-copy h2 {
    font-size: max(16px, calc(22 * var(--u)));
    line-height: 1.6;
    font-weight: 500;
    min-height: 3.2em;
    margin: calc(19 * var(--u)) 0 calc(27 * var(--u))
}

.listing-copy time {
    font-size: max(11px, calc(12 * var(--u)));
    color: #888
}

.listing-more {
    margin-top: calc(20 * var(--u));
    padding-top: calc(22 * var(--u));
    border-top: 1px solid #e5e5e5;
    gap: 8px;
    font-size: max(12px, calc(14 * var(--u)));
    color: #777
}

.listing-more span {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #b9093b;
    color: white;
    display: grid;
    place-items: center
}

.news-pagination {
    margin-top: calc(92 * var(--u));
    font-size: 13px;
    color: #999;
}
.news-pagination ul {
    display: flex;
    gap: 10px;

}
.news-pagination ul li:first-child,.news-pagination ul li:last-child {
    display: none;
}
.news-pagination a,.news-pagination span {
    height: 43px;
    min-width: 43px;
    border: 1px solid #e7e7e7;
    border-radius: 30px;
    display: grid;
    place-items: center;
    padding: 0 12px
}

.news-pagination a:hover ,.news-pagination li.active a{
    background: #a30b40;
    color: white;
    border-color: #a30b40
}

.news-pagination a[aria-disabled] {
    opacity: .45;
    pointer-events: none
}

.news-detail-page {
    padding-top: calc(107 * 100vw / 1920);
    background: #fff
}

body:has(.news-detail-page) .site-header {
    background: #000;
    outline: 15px solid #000
}

.article-heading {
    background: #f8f8f8 url('../image/news/detail-bg.jpg') center center/cover;
    padding-bottom: calc(47 * var(--u))
}

.article-heading .news-container {
    width: 83.4%
}

.article-breadcrumb {
    height: calc(94 * var(--u));
    min-height: 64px;
    border-bottom: 1px solid #eee;
    color: #999;
    font-size: max(12px, calc(16 * var(--u)))
}

.article-breadcrumb span {
    margin: 0 16px
}

.article-heading h1 {
    font-size: calc(32 * var(--u));
    font-weight: 500;
    line-height: 1.6;
    margin-top: calc(36 * var(--u))
}

.article-meta {
    font-size: max(12px, calc(14 * var(--u)));
    color: #888;
    margin-top: calc(27 * var(--u))
}

.article-meta span {
    margin-left: 8px
}

.article-layout {
    width: 85.3%;
    gap: calc(123 * var(--u));
    padding-top: calc(56 * var(--u));
    padding-bottom: calc(141 * var(--u))
}

.article-body {
    min-width: 0;
    font-size: max(14px, calc(16 * var(--u)));
    line-height: 2.65;
    color: #777
}
.article-body img {
    display: block;
    margin: 10px auto;
}
.article-photo {
    margin: calc(45 * var(--u)) 0 calc(48 * var(--u));
    aspect-ratio: 985/520;
    object-fit: cover
}

.article-sidebar h2 {
    font-size: max(20px, calc(24 * var(--u)));
    font-weight: 500;
    border-left: 5px solid #a30b40;
    padding-left: 24px;
    line-height: 1.2;
    margin-bottom: calc(47 * var(--u))
}

.recommend-item {
    grid-template-columns: 40% minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 25px
}

.recommend-item img {
    width: 100%;
    aspect-ratio: 187/117;
    object-fit: cover
}

.recommend-item>div {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.recommend-item h3 {
    font-size: max(13px, calc(16 * var(--u)));
    font-weight: 500;
    line-height: 1.8
}

.recommend-item time {
    font-size: 12px;
    color: #bbb
}

.article-adjacent {
    border-top: 1px solid #eee;
    margin-top: calc(95 * var(--u));
    padding-top: calc(42 * var(--u));
    gap: 24px;
    font-size: max(13px, calc(16 * var(--u)))
}

.article-adjacent a:last-child {
    text-align: right
}

.article-adjacent span,
.article-adjacent time {
    display: block
}

.article-adjacent time {
    color: #333;
    margin: 12px 0
}

.article-adjacent a:hover,
.recommend-item:hover h3,
.listing-copy h2 a:hover {
    color: #a30b40
}

@media(max-width:1199px) {

    .news-container,
    .article-heading .news-container,
    .article-layout {
        width: 90%
    }

    .news-banner {
        height: 600px
    }

    .news-banner-copy {
        padding-top: 210px;
        margin-left: 5%
    }

    .news-outline {
        font-size: 100px
    }

    .news-banner h1 {
        font-size: 36px;
        margin-top: -28px
    }

    .news-banner-intro {
        font-size: 18px;
        margin-top: 65px
    }

    .news-tabs .news-container {
        gap: 45px
    }

    .listing-section {
        padding: 50px 0 65px
    }

    .listing-grid {
        gap: 30px
    }

    .listing-card,
    .listing-copy {
        border-radius: 18px
    }

    .listing-copy {
        padding: 24px
    }

    .listing-category {
        line-height: 28px
    }

    .listing-copy h2 {
        margin: 18px 0 24px
    }

    .listing-more {
        margin-top: 18px;
        padding-top: 18px
    }

    .news-pagination {
        margin-top: 50px
    }

    .news-detail-page {
        padding-top: 96px
    }

    .article-heading {
        padding-bottom: 35px
    }

    .article-heading h1 {
        font-size: 27px;
        margin-top: 28px
    }

    .article-meta {
        margin-top: 18px
    }

    .article-layout {
        gap: 40px;
        padding-top: 45px;
        padding-bottom: 70px
    }

    .article-photo {
        margin: 30px 0
    }

    .article-adjacent {
        margin-top: 45px;
        padding-top: 25px
    }

    .article-sidebar h2 {
        margin-bottom: 28px
    }

    .recommend-item {
        gap: 14px
    }
}

@media(max-width:767px) {
    .news-banner {
        height: 470px
    }

    .news-banner>img {
        object-position: 60% center;
        opacity: .85
    }

    .news-banner-copy {
        padding-top: 175px
    }

    .news-outline {
        font-size: 76px
    }

    .news-banner h1 {
        font-size: 30px;
        margin-top: -24px
    }

    .news-banner-intro {
        font-size: 14px;
        margin-top: 55px
    }

    .news-tabs .news-container {
        justify-content: space-between;
        gap: 12px
    }

    .news-tabs a {
        min-height: 64px
    }

    .listing-grid {
        gap: 28px
    }

    .listing-copy h2 {
        font-size: 18px
    }

    .news-pagination {
        gap: 5px;
        font-size: 12px
    }

    .news-pagination a,.news-pagination span{
        min-width: 32px;
        height: 36px;
        padding: 0 9px
    }

    .article-heading h1 {
        font-size: 23px
    }

    .article-breadcrumb {
        font-size: 11px
    }

    .article-breadcrumb span {
        margin: 0 7px
    }

    .article-meta {
        font-size: 11px;
        line-height: 2
    }

    .article-layout {
        padding-top: 30px
    }

    .article-body {
        line-height: 2.2
    }

    .article-sidebar {
        border-top: 1px solid #eee;
        padding-top: 30px
    }

    .recommend-item {
        grid-template-columns: 120px minmax(0, 1fr)
    }

    .article-adjacent {
        font-size: 12px
    }
}

/* PSD detail icons are original artwork, independent of system glyph fonts. */
.article-breadcrumb>p,
.breadcrumb-home,
.breadcrumb-back {
    display: flex;
    align-items: center
}

.article-breadcrumb>p {
    gap: 18px
}

.article-breadcrumb .breadcrumb-label {
    margin: 0
}

.breadcrumb-home img {
    width: 16px;
    height: 16px;
    max-width: none
}

.breadcrumb-back {
    gap: 13px
}

.breadcrumb-back img {
    width: 17px;
    height: 14px;
    max-width: none
}

.article-breadcrumb .breadcrumb-back span {
    margin: 0
}

/* Coordinates below are measured on the supplied 1920px-wide PSDs. */
@media(min-width:1200px) {
    .news-list-page .news-container {
        width: calc(1642 * var(--u));
        max-width: none
    }

    .news-banner-copy {
        margin-left: calc(140 * var(--u))
    }

    .news-banner h1 {
        margin-left: calc(4 * var(--u));
        font-weight: 500
    }

    .news-banner-intro {
        position: absolute;
        top: calc(584 * var(--u));
        margin-top: 0;
        line-height: calc(33 * var(--u))
    }

    .news-outline {
        font-weight: 500;
        letter-spacing: calc(2 * var(--u));
        transform: scaleX(.96);
        transform-origin: left center
    }

    .news-tabs .news-container {
        gap: calc(93 * var(--u))
    }

    .listing-grid {
        column-gap: calc(66 * var(--u));
        row-gap: calc(57 * var(--u))
    }

    .listing-card {
        height: calc(597 * var(--u));
        border-radius: calc(22 * var(--u))
    }

    .listing-image {
        height: calc(327 * var(--u));
        aspect-ratio: auto
    }

    .listing-copy {
        height: calc(273 * var(--u));
        margin-top: calc(-3 * var(--u));
        padding: calc(28 * var(--u)) calc(27 * var(--u))
    }

    .listing-category {
        font-size: calc(14 * var(--u));
        line-height: calc(33 * var(--u));
        padding-inline: calc(10 * var(--u))
    }

    .listing-copy h2 {
        position: absolute;
        top: calc(73 * var(--u));
        left: calc(30 * var(--u));
        width: calc(435 * var(--u));
        margin: 0;
        font-size: calc(22 * var(--u));
        line-height: calc(35 * var(--u));
        font-weight: 500
    }

    .listing-copy time {
        position: absolute;
        top: calc(164 * var(--u));
        left: calc(27 * var(--u));
        font-size: calc(14 * var(--u));
        line-height: calc(21 * var(--u));
        color: #666
    }

    .listing-more {
        position: absolute;
        top: calc(197 * var(--u));
        left: calc(27 * var(--u));
        right: calc(27 * var(--u));
        margin: 0;
        padding-top: calc(23 * var(--u));
        gap: calc(8 * var(--u));
        font-size: calc(14 * var(--u));
        line-height: calc(25 * var(--u));
        color: #666
    }

    .listing-more span {
        width: calc(25 * var(--u));
        height: calc(25 * var(--u));
        font-size: calc(14 * var(--u))
    }

    .news-pagination {
        margin-top: calc(93 * var(--u));
        gap: calc(10 * var(--u));
        font-size: calc(14 * var(--u))
    }

    .news-pagination a ,.news-pagination  span{
        height: calc(43 * var(--u));
        min-width: calc(43 * var(--u));
        padding-inline: calc(12 * var(--u))
    }

    .news-pagination a[data-page-step] {
        width: calc(79 * var(--u))
    }

    .article-heading {
        height: calc(277 * var(--u));
        padding: 0;
        background-size: 100% auto;
        background-position: center 39%
    }

    .article-heading .news-container {
        position: relative;
        margin-left: calc(141 * var(--u));
        width: calc(1598 * var(--u));
        max-width: none
    }

    .article-breadcrumb {
        height: calc(94 * var(--u));
        min-height: 0;
        font-size: calc(16 * var(--u));
        color: #888
    }

    .article-breadcrumb>p {
        gap: calc(18 * var(--u))
    }

    .article-breadcrumb span {
        margin-inline: calc(16 * var(--u))
    }

    .breadcrumb-home img {
        width: calc(16 * var(--u));
        height: calc(16 * var(--u))
    }

    .breadcrumb-back {
        gap: calc(13 * var(--u))
    }

    .breadcrumb-back img {
        width: calc(17 * var(--u));
        height: calc(14 * var(--u))
    }

    .article-heading h1 {
        position: absolute;
        top: calc(125 * var(--u));
        left: 0;
        margin: 0;
        font-size: calc(30 * var(--u));
        line-height: calc(46 * var(--u));
        font-weight: 500;
        color: #000
    }

    .article-meta {
        position: absolute;
        top: calc(190 * var(--u));
        left: 0;
        margin: 0;
        font-size: calc(14 * var(--u));
        line-height: calc(21 * var(--u));
        color: #666
    }

    .article-layout {
        width: calc(1578 * var(--u));
        max-width: none;
        margin-left: calc(141 * var(--u));
        margin-right: 0;
        grid-template-columns: minmax(0, 985fr) minmax(0, 470fr);
        gap: calc(123 * var(--u));
        padding-top: calc(56 * var(--u));
        padding-bottom: calc(141 * var(--u))
    }

    .article-body {
        font-size: calc(18 * var(--u));
        line-height: calc(41 * var(--u));
        color: #666
    }

    .article-photo {
        margin: calc(35 * var(--u)) 0 calc(59 * var(--u));
        height: calc(520 * var(--u));
        aspect-ratio: 985/520
    }

    .article-sidebar h2 {
        height: calc(28 * var(--u));
        font-size: calc(24 * var(--u));
        line-height: calc(28 * var(--u));
        border-left-width: calc(6 * var(--u));
        padding-left: calc(28 * var(--u));
        margin: 0 0 calc(45 * var(--u)) calc(4 * var(--u))
    }

    .recommend-item {
        height: calc(117 * var(--u));
        grid-template-columns: calc(187 * var(--u)) minmax(0, 1fr);
        gap: calc(19 * var(--u));
        margin-bottom: calc(25.5 * var(--u))
    }

    .recommend-item>div {
        padding-top: calc(2 * var(--u));
        padding-bottom: calc(5 * var(--u))
    }

    .recommend-item h3 {
        font-size: calc(17 * var(--u));
        line-height: calc(31 * var(--u));
        color: #333
    }

    .recommend-item time {
        font-size: calc(15 * var(--u));
        line-height: calc(22 * var(--u));
        color: #c0bebe
    }

    .article-adjacent {
        height: calc(187 * var(--u));
        margin-top: calc(36 * var(--u));
        padding-top: calc(43 * var(--u));
        gap: calc(24 * var(--u));
        font-size: calc(18 * var(--u));
        line-height: calc(34 * var(--u))
    }

    .article-adjacent time {
        margin: calc(20 * var(--u)) 0 calc(18 * var(--u))
    }
}

@media(max-width:767px) {
    .article-breadcrumb>p {
        gap: 10px
    }

    .breadcrumb-back {
        gap: 8px
    }
}

@media(min-width:1200px) {
    .listing-grid {
        padding-bottom: calc(4 * var(--u))
    }

    .listing-card:nth-child(n+7) {
        transform: translateY(calc(4 * var(--u)))
    }

    .news-pagination {
        margin-top: calc(92 * var(--u))
    }

    .article-body>p {
        position: relative;
        top: calc(-8 * var(--u))
    }

    .article-photo~.article-photo {
        margin-top: calc(34 * var(--u));
        margin-bottom: 0
    }

    .article-adjacent {
        margin-top: calc(95 * var(--u))
    }
}

@media(min-width:1200px) {
    .article-heading {
        background-size: 100% 100%;
        background-position: center
    }
}