.page-mask {
    overflow-x: clip;
    overflow-y: visible;
}
.page-mask img {
    --w: calc(1319 / 1920 * 100vw);
    width: var(--w);
    max-height: unset;
    position: absolute;
    bottom: calc(-228 / 1080 * 100dvh);
    right: calc(-272 / 1920 * 100vw);
    z-index: -1;
}
.section-heading {
    padding-top: calc(102 * var(--rpx));
}

.news-module {
    margin-top: calc(150 * var(--rpx));
}

.news-module .module-main {
    --col: 3;
    --gap: calc(50 * var(--rpx));
    --w: calc((100% - (var(--col) - 1) * var(--gap)) / var(--col));
    gap: var(--gap);
    padding-top: calc(40 * var(--rpx));
}

.new {
    width: var(--w);
    flex: 0 0 auto;
}
.new.new--top {
    width: 100%;
}
.new.new--top .new-wrapper {
    aspect-ratio: unset;
}
.new.new--top .new-poster {
    height: unset;
    aspect-ratio: 800 / 440;
}
.new.new--top .new-desc {
    position: relative;
    opacity: 1;
    z-index: 1;
}
.new .new-wrapper {
    aspect-ratio: 500 / 540;
    border-radius: var(--radio-16);
    overflow: hidden;
    position: relative;
}
.new .new-poster {
    height: 50%;
    transition: .3s linear;
}
.new .new-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s linear;
}
.new .new-content {
    padding: calc(28 * var(--rpx));
    padding-top: calc(20 * var(--rpx));
    background: #FAFAFA;
    position: relative;
    z-index: 1;
}
.new .new-content::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--primary-foreground), var(--secondary-foreground));
    opacity: 0;
    z-index: -1;
}
.new .new-section {
    height: 100%;
}
.new .new-time {
    color: var(--primary);
    display: flex;
    align-items: center;
    position: relative;
    transition: .3s linear;
}
.new .new-time::before {
    --l: calc(10 * var(--rpx));
    content: "";
    width: var(--l);
    height: var(--l);
    border-radius: 50%;
    margin-right: calc(10 * var(--rpx));
    background: var(--primary-foreground);
    transition: .3s linear;
}
.new .new-title {
    font-size: var(--font-size-24);
    transition: .3s linear;
}
.new .new-time+.new-title {
    margin-top: calc(8 * var(--rpx));
}
.new .new-desc {
    font-size: 16px;
    margin-top: calc(28 * var(--rpx));
    position: absolute;
    opacity: 0;
    transition: .3s linear;
}

.new .read-more {
    color: rgba(51, 51, 51, .5);
    margin-top: auto;
    transition: .3s linear;
}
.new .read-more .read-more__btn {
    border: 1px solid rgba(0, 0, 0, .1);
}
.new .read-more .read-more__btn img {
    width: 10px;
    filter: url(#filter-gray);
}
.new:not(.new--top):hover .new-poster {
    height: 100%;
    position: absolute;
    inset: 0;
}
.new:not(.new--top):hover .new-content {
    background: transparent;
}
.new:not(.new--top):hover .new-content::after {
    opacity: .9;
}
.new:not(.new--top):hover .new-time,
.new:not(.new--top):hover .new-title,
.new:not(.new--top):hover .new-desc,
.new:not(.new--top):hover .read-more {
    color: #fff;
}
.new:not(.new--top):hover .new-time::before {
    background: currentColor;
}
.new:not(.new--top):hover .new-desc {
    position: relative;
    opacity: 1;
}
.new:not(.new--top):hover .read-more .read-more__btn {
    color: #fff;
    background: currentColor;
    border-color: currentColor;
}
.new:not(.new--top):hover .read-more .read-more__btn img {
    filter: url(#filter-green);
}
.new.new--top:hover .new-poster img {
    transform: scale(1.2);
}

@media screen and (max-width: 960px) {
    .news-module .module-main {
        --col: 2;
    }
}
@media screen and (max-width: 750px) {
    .page-mask img {
        width: calc(660 * var(--rpx));
        bottom: calc(-200 / 1080 * 100dvh);
        right: calc(-600 / 1920 * 100vw);
    }
    /* .section-heading {
        padding-top: calc(50 * var(--rpx));
    } */
    .news-module {
        margin-top: calc(75 * var(--rpx));
    }
    .news-module .module-main {
        --col: 1;
    }
    .new--top .new-wrapper {
        flex-wrap: wrap;
    }
    .new.new--top .new-poster,
    .new .new-content {
        width: 100%;
        flex: 0 0 auto;
    }
    .new .new-content {
        padding: calc(20 * var(--rpx));
        padding-top: calc(12 * var(--rpx));
    }

    .new .new-title {
        font-size: var(--font-size-16);
    }
}