@charset "UTF-8";

/* 公用容器样式 */
.s4-bd1,
.s4-bd2 {
    width: 100%;
    margin: 0 auto;
    border-radius: .2rem;
    overflow: hidden;
    padding: .2rem 0;
}

/* 两个区域使用相同的列表结构 */
.s4-bd1 ul,
.s4-bd2 ul {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
}

/* 第一个区域：向左滚动 (0% → -50%) */
.s4-bd1 ul {
    animation: moveLeft 80s linear infinite;
}

@keyframes moveLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* 第二个区域：向右滚动 (-50% → 0%) */
.s4-bd2 ul {
    animation: moveRight 80s linear infinite;
}

@keyframes moveRight {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* 列表项固定宽度 */
.s4-bd1 li,
.s4-bd2 li {
    flex: 0 0 auto;
    line-height: 0;
}

/* 图片块样式 (保留原比例) */
.s4-bd1 .pic,
.s4-bd2 .pic {
    width: 4.62rem;
    padding-top: 56%;
    border-radius: 0.12rem;
    margin: 0 0.2rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* box-shadow: 0 0.08rem 0.12rem rgba(0, 0, 0, 0.3); */
}

/* 区域二：缩略图铺满容器 */
.s4-bd2 .pic .thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* 悬浮特效：暗色遮罩 + 缩略图放大 */
.s4-bd2 .pic.video-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 3;
    transition: background 0.4s ease;
    pointer-events: none;
    border-radius: 0.12rem;
}

.s4-bd2 .pic.video-item:hover::after {
    background: rgba(0, 0, 0, 0.35);
}

.s4-bd2 .pic.video-item:hover .thumb {
    transform: scale(1.08);
    filter: brightness(0.85);
}

/* s4区域视频元素隐藏（仅用作数据源） */
.s4-bd2 .pic video,
.picMarquee-top .pic video {
    display: none;
}

/* 百廿芳华视频封面（thumb）— 统一尺寸，保持比例居中 */
.picMarquee-top .pic.video-item .thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    border-radius: .2rem;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.picMarquee-top .pic.video-item:hover .thumb {
    transform: scale(1.08);
    filter: brightness(0.85);
}

/* 播放按钮图标（通用） */
.s4-bd2 .pic .play-btn,
.picMarquee-top .pic .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 0.7rem;
    height: 0.7rem;
    background: rgba(0, 0, 0, 0.6);
    border: 0.03rem solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, transform 0.3s;
    pointer-events: none;
}

.s4-bd2 .pic .play-btn i,
.picMarquee-top .pic .play-btn i {
    color: #fff;
    font-size: 0.28rem;
    margin-left: 0.06rem;
}

.s4-bd2 .pic:hover .play-btn,
.picMarquee-top .pic:hover .play-btn {
    background: rgba(154, 17, 26, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
    transform: translate(-50%, -50%) scale(1.12);
}

/* 百廿芳华picMarquee视频项样式 */
.picMarquee-top .pic.video-item {
    position: relative;
    overflow: hidden;
    border-radius: .2rem;
}

.picMarquee-top .pic.video-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    z-index: 5;
    transition: background 0.4s ease;
    pointer-events: none;
    border-radius: .2rem;
}

.picMarquee-top .pic.video-item:hover::after {
    background: rgba(0, 0, 0, 0.35);
}

.picMarquee-top .pic.video-item:hover .thumb {
    transform: scale(1.08);
    filter: brightness(0.85);
}

/* 悬浮暂停 —— 通过类控制 */
.paused ul {
    animation-play-state: paused !important;
}

.s4 {
    position: relative;
}

.s4::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30%;
    height: 50%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 65%, #FFFFFF 100%);
    z-index: 9;
    pointer-events: none;
}

.s4::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 65%, #FFFFFF 100%);
    z-index: 9;
    pointer-events: none;
}




.s3-lg {
    position: relative;
    width: 3.2rem;
    background: rgba(255, 255, 255, 0.68);
    border-radius: 0.12rem;
    padding: 0.3rem;
    box-shadow: 0 0.04rem 0.2rem rgba(0, 0, 0, 0.1);
}

.s3-lg img {
    display: block;
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
    width: auto;
    height: auto;
    max-width: calc(100% - 0.6rem);
    max-height: calc(100% - 0.6rem);
    margin: auto;
    object-fit: contain;
}

@font-face {
    font-family: "AlimamaFangYuanTiVF-MediumSquare";
    src: url('fonts/AlimamaFangYuanTiVF.woff');
    font-style: normal;
}


a {
    display: block;
}

.banner {
    height: 100vh;
    overflow: hidden;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    will-change: transform;
}

.banner ul li video,
.banner ul li a img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}

.banner ul li a {
    display: block;
    position: relative;
    padding-top: 0;
    height: 100vh;
    overflow: hidden;
}

.banner .slick {
    position: relative;
    z-index: 9;
    height: 100%;
}

.banner .slick-slide a {
    display: block;
    position: relative;
}

.banner>ul::before {
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    bottom: -1.8rem;
    ————————background: url(../images/ban-zz.png) no-repeat center bottom;
    background-size: 100%;
    z-index: 1;
}

.banner>ul::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 10%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    z-index: 2;
}

.banner .slick-dots {
    bottom: 0.2rem;
    z-index: 3;
}

.banner .slick-dots li {
    width: .61rem;
    height: .21rem;
    background: url(../images/ban-d.png) no-repeat center center;
    background-size: .09rem;
    transition: all 0.3s;
    margin: 0;
}

.banner .slick-dots li.slick-active {
    background: url(../images/ban-da.png) no-repeat center center;
    background-size: 100% 100%;
}

.banner .slick-slide.slick-current a img {
    animation: img_scale 8s linear;
}

/* 第3张slide图片调大一倍（覆盖current动画避免冲突） */
.banner .slick-slide.slide-zoom a img,
.banner .slick-slide.slide-zoom.slick-current a img {
    transform: scale(2) !important;
    animation: none !important;
}

@keyframes img_scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* body-main - 内容区域 */
.body-main {
    position: relative;
    z-index: 2;
    background-color: #fff;
    min-height: 100vh;
}

/* s1 */
.index {
    position: relative;
    z-index: 10;
    margin-top: 0;
}

.s1 {
    padding-top: 1rem;
    background: url(../images/s1-bg.png) no-repeat center top;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.s1 .w16 {
    padding-top: 80px;
}
.tit {
    position: relative;
    margin-bottom: .25rem;
    z-index: 99999;
}

.tit h3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.more {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);

    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.tit h3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tit h3 b {
    font-family: 'sys_bd';
    font-size: .6rem;
    color: #9a111a;
    line-height: 1;
    font-weight: normal;
}

.tit h3 b:last-child {
    color: #c7aa8b;
}

.more {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.more a {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    color: #333333;
    font-size: .18rem;
}

.more a img {
    width: .29rem;
    margin-left: .05rem;
    transition: all 0.3s;
}

.more a:hover img {
    margin-left: .1rem;
}

.more a:hover {
    color: #9a111a;
}

.s1-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.s1-ban {
    width: 8.8rem;
    margin-right: .4rem;
}


.s1-ban .pic {
    border-radius: .2rem;
    margin: 0 .15rem;
    padding-top: 5rem;
}

.s1-ifo {
    background-image: linear-gradient(0deg, #9a111a 0%, #df2834 100%);
    border-radius: .2rem .21rem .21rem .21rem;
    padding: .1rem;
    padding-left: .4rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: -0.2rem;
    position: relative;
    z-index: 2;
}

.s1-tx h3 {
    font-size: .24rem;
    line-height: .32rem;
    height: .64rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #ffffff;
    margin-bottom: .1rem;
}

.s1-tx p {
    font-size: .2rem;
    color: #ffffff;
    opacity: 0.6;
}

.s1-tx {
    flex: 1;
    min-width: 0;
}

.s1-date {
    width: 1.17rem;
    height: 1.16rem;
    background-color: #c7aa8b;
    border-radius: .2rem;
    margin-left: .9rem;
    font-family: 'sys_bd';
    text-align: center;
    padding-top: .25rem;
}

.s1-date b {
    font-size: .36rem;
    color: #ffffff;
    line-height: 1;
    line-height: 1;
}

.s1-date span {
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
}

.s1-date span::before {
    content: '/';
    margin-right: .05rem;
    margin-left: .05rem;
}

.s1-ban .slick-prev {
    width: auto;
    height: auto;
    background: none;
    top: auto;
    transform: none;
    left: auto;
    right: .8rem;
    bottom: .3rem;
    font-size: .2rem;
    color: #fff;
}

.s1-ban .slick-prev:before,
.s1-ban .slick-next:before {
    content: none;
}

.s1-ban .slick-next {
    width: auto;
    height: auto;
    background: none;
    top: auto;
    transform: none;
    left: auto;
    right: .45rem;
    bottom: .3rem;
    font-size: .2rem;
    color: #fff;
}

.s1-r {
    flex: 1;
    min-width: 0;
}

.s1-r ul li a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: .18rem .4rem;
    border-bottom: .01rem solid #ddd;
    border-radius: .2rem;
    transition: all 0.3s;
}

.s1-rd {
    text-align: center;
    width: .86rem;
    height: .89rem;
    background: linear-gradient(180deg, #d4b896 0%, #c7aa8b 50%, #b8946e 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.03rem 0.06rem rgba(0,0,0,0.15);
    padding-top: .12rem;
    margin-right: .25rem;
    transition: all 0.3s;
}

.s1-rd b {
    font-size: .32rem;
    color: #ffffff;
    display: block;
    line-height: 1;
    padding-bottom: .1rem;
    position: relative;
    margin-bottom: .03rem;
    transition: all 0.3s;
}

.s1-rd b::before {
    content: '';
    width: .54rem;
    border-top: .01rem dashed #fff;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: all 0.3s;
}

.s1-rd span {
    font-size: .14rem;
    color: #ffffff;
    display: block;
    transition: all 0.3s;
}

.s1-txt {
    flex: 1;
    min-width: 0;
}

.s1-txt p {
    font-size: .24rem;
    line-height: .36rem;
    color: #333333;
    max-height: .72rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    transition: all 0.3s;
}

/* 校庆动态 - 采用校庆要闻悬停效果 */
.s1-r ul li:hover {
    border-color: transparent;
}

.s1-r ul li:hover a {
    background: url(../images/s2-tbg.png) no-repeat;
    background-size: cover;
    border-color: transparent;
}

.s1-r ul li a:hover .s1-rd {
    background: linear-gradient(180deg, #f0e4d4 0%, #e8d5bc 50%, #dcc4a8 100%);
    box-shadow: 0 0.04rem 0.1rem rgba(199, 170, 139, 0.5);
}

.s1-r ul li a:hover b {
    color: #9a111a;
}

.s1-r ul li a:hover b::before {
    border-color: #9a111a;
}

.s1-r ul li a:hover span {
    color: #9a111a;
}

.s1-r ul li:hover p {
    color: #ffffff;
}

.s1-lt {
    margin-top: .33rem;
}

.s1-lt>ul {
    margin: 0 -0.15rem;
}

.s1-lt ul li a {
    padding: .35rem .25rem;
    margin: .3rem .15rem;
    background-color: #ffffff;
    border-radius: .12rem;
    border-bottom: .05rem solid #9a111a;
    transition: all 0.3s;
}

.s1-lt ul li a:hover {
    background: url(../images/s1-tbgh.png) no-repeat;
    background-size: cover;
    border-color: #c7aa8b;
    box-shadow: 0rem 0rem .3rem .02rem rgba(45, 45, 45, 0.16);
}

.s1-lt ul li a h3 {
    font-size: .2rem;
    line-height: .3rem;
    color: #333333;
    height: .6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: .3rem;
    transition: all 0.3s;
}

.s1-lt ul li a p {
    font-size: .16rem;
    line-height: .36rem;
    color: #666666;
    padding-left: .26rem;
    transition: all 0.3s;
}

.s1-sj {
    background: url(../images/ico-sj1.png) no-repeat left center;
    background-size: auto .16rem;
}

.s1-wz {
    background: url(../images/ico-wz1.png) no-repeat left center;
    background-size: auto .16rem;
}

.s1-lt ul li a p img {
    height: .16rem;
    margin-right: .1rem;
}

.s1-lt ul li a:hover h3 {
    color: #c7aa8b;
}

.s1-lt ul li a:hover p {
    color: #c7aa8b;
}

.s1-lt ul li a:hover .s1-sj {
    background: url(../images/ico-sj2.png) no-repeat left center;
    background-size: auto .16rem;
}

.s1-lt ul li a:hover .s1-wz {
    background: url(../images/ico-wz2.png) no-repeat left center;
    background-size: auto .16rem;
}

/* s2 */
.s2 {
    padding-bottom: 1.2rem;
    background: url(../images/s2-bg.png) no-repeat;
    background-size: cover;
    padding-top: 1.2rem;
}

.s2-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.s2-lt {
    width: 100%;
    margin-right: .35rem;
}

.s2-lt>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.s2-lt ul li a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100%;
    transition: all 0.3s;
}

.s2-d {
    text-align: center;
    width: .86rem;
    height: .89rem;
    background: linear-gradient(180deg, #d4b896 0%, #c7aa8b 50%, #b8946e 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.03rem 0.06rem rgba(0,0,0,0.15);
    padding-top: .12rem;
    margin-right: .25rem;
}

.s2-lt ul li a:hover .s2-d {
    background: linear-gradient(180deg, #f0e4d4 0%, #e8d5bc 50%, #dcc4a8 100%);
    box-shadow: 0 0.04rem 0.1rem rgba(199, 170, 139, 0.5);
}

.s2-d b {
    font-size: .32rem;
    color: #ffffff;
    display: block;
    line-height: 1;
    padding-bottom: .1rem;
    position: relative;
    margin-bottom: .03rem;
}

.s2-lt ul li a:hover b {
    color: #9a111a;
}

.s2-lt ul li a:hover b::before {
    border-color: #9a111a;
}

.s2-lt ul li a:hover span {
    color: #9a111a;
}

.s2-d b::before {
    content: '';
    width: .54rem;
    border-top: .01rem dashed #fff;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.s2-d span {
    font-size: .14rem;
    color: #ffffff;
    display: block;
}

.s2-txt {
    flex: 1;
    min-width: 0;
}

.s2-lt ul li {
    width: 48%;
}

.s2-ban {
    flex: 1;
    min-width: 0;
}

.s2-ban a {
    position: relative;
    border-radius: .2rem;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.s2-ban a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 30%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}


.s2-ifo {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding-left: 1.09rem;
    padding-right: .4rem;
    z-index: 2;
}

.s2-ifo p {
    font-size: .24rem;
    letter-spacing: -0.01rem;
    color: #ffffff;
    padding: .3rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s2-date {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #9a111a;
    border-radius: 0rem .2rem 0rem .2rem;
    color: #ffffff;
    text-align: center;
    padding: .15rem;
    z-index: 2;
}

.s2-date b {
    font-size: .4rem;
    line-height: 1;
    letter-spacing: -0.02rem;
    color: #ffffff;
    display: block;
}

.s2-date span {
    font-size: .18rem;
    letter-spacing: -0.01rem;
    color: #ffffff;
    opacity: 0.6;
    display: block;
}

.s2-lt ul li a {
    padding: .22rem .4rem;
    border-radius: .2rem;
    transition: all 0.3s;
}

.s2-lt ul li {
    border-bottom: .01rem solid rgba(0, 0, 0, 0.2);
}

.s2-lt ul li a h3 {
    font-size: .24rem;
    line-height: .32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #333333;
    margin-bottom: .2rem;
    font-weight: 600;
}

.s2-lt ul li a p {
    font-size: .16rem;
    line-height: .36rem;
    color: #666666;
    padding-left: .26rem;
}

.s2-wz {
    background: url(../images/ico-wz1.png) no-repeat left center;
    background-size: auto .16rem;
}

.s2-sj {
    background: url(../images/ico-sj1.png) no-repeat left center;
    background-size: auto .16rem;
}

.s2-lt ul li:hover {
    border-color: transparent;
}

.s2-lt ul li:hover a {
    background: url(../images/s2-tbg.png) no-repeat;
    background-size: cover;
    border-color: transparent;
}

.s2-lt ul li:hover h3 {
    color: #ffffff;
}

.s2-lt ul li:hover .s2-wz {
    background: url(../images/ico-wz2.png) no-repeat left center;
    background-size: auto .16rem;
}

.s2-lt ul li:hover .s2-sj {
    background: url(../images/ico-sj2.png) no-repeat left center;
    background-size: auto .16rem;
}

.s2-lt ul li:hover p {
    color: #ffffff;
}

.s2-ban {
    position: relative;
    width: 8.8rem;
    padding-right: .63rem;
}

.s2-ban .pic {
    padding-top: 6rem;
}

.s2-ban ul {
    width: 100%;
    padding-top: 6rem;
    position: relative;
}

.s2-ban ul li {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: translateX(1.4rem) scale(0.8);
    transition: all 0.5s;
    opacity: 0;
}

.s2-ban ul li.cur {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    transform: scale(1);
    opacity: 1;
}

.s2-ban ul li.cur2 {
    opacity: 1;
}

.s2-ban ul li.cur2 .s2-date {
    opacity: 0;
}

.s2-ban ul li.cur2 .s2-ifo {
    opacity: 0;
}

.s2-next {
    width: .5rem;
    height: .5rem;
    background: url(../images/s2-r.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    right: .4rem;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 99;
    transition: all 0.3s;
}

.s2-next:hover {
    transform: translateY(-50%) scale(1.1);
}

.s2-ban ul li.cur2 a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 3;
    transition: all 0.3s;
}


/* s3 */

.s3 {
    background: url(../images/s3-bg.jpg) no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.2rem 0;
}

.s3-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

/* 左侧 logo */
.s3-lg {
    margin-right: 1.35rem;
}

.s3-tit {
    position: relative;
    margin-bottom: .4rem;
    text-align: center;
}

.s3-tit h3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.s3-tit h3 b {
    font-family: 'sys_bd';
    font-size: .6rem;
    line-height: 1;
    color: #ffffff;
    font-weight: normal;
}

/* 标题末字强调色（与其他栏目标题统一） */
.s3-tit h3 b:last-child {
    color: #c7aa8b;
}

.s3-more {
    font-size: .18rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
}

.s3-more a {
    color: #c7aa8b;
}

.s3-more a img {
    width: .29rem;
    margin-left: .03rem;
}

.s3-lt {
    flex: 1;
    min-width: 0;
}

/* 注：以下卡片样式基于当前 2 个子栏目（校友卡申领 / 爱心捐赠）设计。
   若后期恢复为 4 个子栏目，需将 li 宽度调整为 calc(50% - .15rem) 保持两列，
   或将宽度改为 25% 且关闭 gap，并考虑还原旧网格线样式。 */
.s3-lt ul {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.s3-lt ul li {
    width: calc(50% - .15rem);
}

.s3-lt ul li a {
    height: 100%;
    padding: .55rem .4rem .5rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 100%);
    border: .01rem solid rgba(255, 255, 255, 0.22);
    border-radius: .2rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 .06rem .3rem rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* 卡片底部高光装饰 */
.s3-lt ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: .04rem;
    background: linear-gradient(90deg, transparent, #c7aa8b, transparent);
    border-radius: .04rem .04rem 0 0;
    transition: width 0.35s ease;
}

.s3-lt ul li a:hover {
    background: linear-gradient(135deg, rgba(199, 170, 139, 0.35) 0%, rgba(199, 170, 139, 0.15) 100%);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 .1rem .4rem rgba(0, 0, 0, 0.22);
    transform: translateY(-.06rem);
}

.s3-lt ul li a:hover::before {
    width: 60%;
}

.s3-tx h3 {
    color: #ffffff;
    font-size: .36rem;
    margin-top: .25rem;
    margin-bottom: 0;
    letter-spacing: .08em;
}

.s3-tx p {
    font-family: 'sys_bd';
    font-size: .24rem;
    line-height: .36rem;
    height: .72rem;
    color: #ffffff;
    opacity: 0.4;
    font-weight: 100;
}

.s3-lt ul li a .ico {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(199, 170, 139, 0.28) 0%, rgba(199, 170, 139, 0.08) 100%);
    border: .01rem solid rgba(255, 255, 255, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.35s ease;
}

.s3-lt ul li a:hover img {
    animation: jello 1.2s;
}

.s3-lt ul li a .ico img {
    max-height: 100%;
    min-height: 88%;
    width: 0.95rem;
}

/* s3 图标 Font Awesome 自适应字号 + 悬停旋转 */
.s3-lt ul li a .ico i {
    font-size: .52rem;
    color: #e9d9c4;
    transition: transform 0.6s ease;
    display: block;
}

.s3-lt ul li a:hover .ico i {
    animation: rotateIcon 1s ease-in-out;
    color: #ffffff;
}

/* s6 旧图标样式（已迁移至卡片布局） —— 保留旋转动画供其他模块复用 */

/* 通用图标旋转动画 */
@keyframes rotateIcon {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(360deg); }
    100% { transform: rotate(360deg); }
}


/* s4 */
.s4 {
    padding-top: 1.2rem;
    padding-bottom: 2rem;
    background: url(../images/s4-bg.png) no-repeat;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.s4-ban {
    margin-bottom: .6rem;
    margin-top: -0.3rem;
}

.s4-ban a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: .3rem;
}

.s4-ban>ul {
    margin: 0 -0.3rem;
}

.s4-ban a .pic {
    width: 7.2rem;
    padding-top: 4.05rem;
    background-color: #c7aa8b;
    box-shadow: 0rem 0rem .3rem .03rem rgba(20, 20, 20, 0.3);
    border-radius: .2rem;
    margin-right: .6rem;
}

.s4-tx {
    flex: 1;
    min-width: 0;
}

.s4-tx p {
    font-size: .28rem;
    line-height: .54rem;
    color: #333333;
    text-align: justify;
    text-indent: 2em;
}

.s4-date {
    font-family: 'sys_bd';
    font-size: 3rem;
    line-height: 1;
    color: #9a111a;
    opacity: 0.06;
    position: absolute;
    right: 0;
    top: -0.5rem;
    font-weight: 600;
}

.s4-nf {
    border-bottom: solid .02rem #c7aa8b;
    padding: 0 1.6rem;
    position: relative;
}

.s4-nf ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.s4-line {
    position: absolute;
    left: .3rem;
    bottom: -0.03rem;
    width: 10%;
    height: .05rem;
    background-color: #c7aa8b;
    transition: all 0.3s ease;
}

.s4-line::before {
    content: '';
    width: 2rem;
    height: 100%;
    position: absolute;
    top: 0;
    right: 100%;
    background-color: #c7aa8b;
}

.s4-line::after {
    content: '';
    width: .22rem;
    height: .22rem;
    background: url(../images/s4-dots.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    right: -0.11rem;
    transform: translateY(-50%);
}

.s4-nf ul li p {
    font-family: 'sys_bd';
    font-size: .3rem;
    line-height: 1;
    color: #9a111a;
    opacity: 0.6;
    font-weight: 500;
    cursor: pointer;
    padding-bottom: .55rem;
    position: relative;
    transition: all 0.3s ease;
}

.s4-nf ul li {
    position: relative;
}

.s4-nf ul li::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: .35rem;
    border-left: solid .02rem #c7aa8b;
}

.s4-nf ul li.cur p {
    opacity: 1;
    transform: scale(1.2);
    font-weight: 600;
}

/* s5 */
.s5 {
    padding-bottom: 1rem;
    background: url(../images/s5-bg.png) no-repeat center bottom;
    background-size: 100% 100%;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 底部增加白色过渡到透明的遮罩 */
.s5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 65%, #FFFFFF 100%);
}

.s5 .tit {
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.s5-more {
    margin-top: .6rem;
    display: flex;
    justify-content: center;
    gap: .2rem;
}

.s5-more a {
    width: 1.8rem;
    line-height: .66rem;
    background-color: #ffffff;
    border-radius: .33rem;
    border: solid .01rem #9a111a;
    text-align: center;
    color: #9a111a;
    font-size: .22rem;
    margin: 0;
    display: inline-block;
    transition: background-color .3s, color .3s;
}

.s5-more a:hover {
    background-color: #9a111a;
    color: #fff;
}

.s5-p {
    margin: .14rem 0;
}

.s5-p img {
    width: 100%;
    display: block;
    border-radius: .16rem;
    object-fit: cover;
}

.s5-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: -0.5rem;
}

/* .picMarquee-top {
    background: #fff;
    mask: linear-gradient(0deg, transparent, #fff 100%);
    -webkit-mask: linear-gradient(0deg, transparent, #fff 100%);
} */

.picMarquee-top .bd {
    height: 100%;
    overflow: hidden;
}

.picMarquee-top1 {
    width: 22.5%;
    height: 8.6rem;
}

.picMarquee-top2 {
    width: 22.5%;
    height: 7.17rem;
}

.picMarquee-top3 {
    width: 22.5%;
    height: 7.17rem;
}

.picMarquee-top4 {
    width: 22.5%;
    height: 8.6rem;
}

.picMarquee-top .bd {
    position: relative;
    border-radius: .2rem;
    overflow: hidden;
}

.picMarquee-top .bd ul {
    position: absolute;
    left: 0;
    right: 0;
}

.picMarquee-top .bd ul li {
    padding-bottom: .15rem;
}

.picMarquee-top .bd ul li a {
    display: block;
    border-radius: .2rem;
    overflow: hidden;
}

.picMarquee-top .bd ul li a img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.picMarquee-top .bd ul li a:hover img {
    transform: scale(1.08);
    filter: brightness(0.85);
}

/* picMarquee内的视频项与图片项尺寸一致 */
.picMarquee-top .bd ul li .pic.video-item {
    display: block;
    width: 100%;
    border-radius: .2rem;
    overflow: hidden;
    position: relative;
}

.picMarquee-top .bd ul li .pic.video-item .thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}














@media screen and (max-width: 1024px) {
    .banner {
        height: 300px;
        position: relative !important;
    }
    .banner ul li a {
        height: 300px;
    }
    .fix-top {
        display: none;
    }
    .body-main {
        margin-top: 0;
    }

    .banner>ul::before,
    .banner>ul::after {
        display: none;
    }

    .banner .slick-dots {
        bottom: .3rem;
    }

    .s1 {
        padding: .5rem 0;
    }

    .s1 .w16 {
        padding-top: 0;
    }

    .s1 .more {
        top: 50% !important;
    }

    .tit h3 b {
        font-size: .4rem;
    }

    .tit {
        margin-bottom: .4rem;
    }

    .s1-ban {
        width: 100%;
        margin: 0;
        margin-bottom: .3rem;
    }

    .s1-r {
        flex: auto;
        width: 100%;
    }

    .s1-ban .pic {
        padding-top: 58%;
    }

    .s1-lt {
        margin-top: 0;
    }

    .s1-date {
        margin-left: .4rem;
    }

    .s2-lt {
        width: 100%;
        margin: 0;
        margin-bottom: .3rem;
    }

    .s2-ban {
        flex: auto;
        width: 100%;
    }

    .s2-ban ul {
        padding-top: 60%;
    }

    .s2 {
        padding-bottom: .5rem;
    }

    .s3 {
        padding: .7rem 0;
    }

    .s3-tit {
        width: 100%;
        margin: 0;
        margin-bottom: .35rem;
        padding: 0;
        text-align: center;
    }

    .s3-tit h3 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .s3-tit h3 b {
        font-size: .4rem;
    }

    .s3-lt {
        flex: auto;
        width: 100%;
    }

    .s3-lg {
        margin: 0 auto;
        margin-bottom: .3rem;
    }

    .s4-ban a .pic {
        width: 100%;
        margin: 0;
        margin-bottom: .3rem;
        padding-top: 57%;
    }

    .s4-tx {
        flex: auto;
        width: 100%;
    }

    .s4-date {
        top: auto;
        bottom: 0;
        display: none;
    }

    .s4-tx p {
        font-size: .2rem;
        line-height: .36rem;
    }

    .s4-nf {
        padding: 0 .2rem;
    }


    .s4-nf ul li p {
        font-size: .2rem;
    }

    .s4-line {
        display: none;
    }

    .s4 {
        padding: .5rem 0;
    }

    .s1-r ul li a {
        padding: .18rem .1rem;
    }

    .s4-timeline-section .tl-card {
        margin: 0 !important;
    }

    .s4::before,
    .s4::after {
        display: none;
    }

}

@media screen and (max-width: 768px) {
    .s2-lt ul li {
        width: 100%;
    }

    .s2-lt ul li a {
        padding: .3rem;
    }
}

@media screen and (max-width: 640px) {
    .s2-ban {
        width: 100%;
        padding-right: 0;
    }

    .s2-ban ul li.cur2 {
        opacity: 0;
    }

    .s2-next {
        opacity: 0;
    }

    .s3-lt ul {
        gap: .2rem;
    }

    .s3-lt ul li {
        width: calc(50% - .1rem);
    }

    .s4-ban {
        margin-bottom: 0rem;
    }

    .s4-nf ul li {
        width: 14.28%;
        text-align: center;
        margin-top: .3rem;
        border-bottom: .01rem solid #c7aa8b;
    }

    .s4-nf {
        border-color: transparent;
    }

    .picMarquee-top {
        width: 48%;
        margin-top: .2rem;
        height: auto;
    }

    /* 手机端每个瀑布流只显示2个，静态展示不再滚动 */
    .picMarquee-top .bd {
        height: auto;
    }

    .picMarquee-top .bd ul {
        position: static;
        transform: none !important;
    }

    .picMarquee-top .bd ul li:nth-child(n+3) {
        display: none;
    }

    /* 手机端两列重排：左列风景(top1+top2)、右列教师(top3+top4) */
    .picMarquee-top1 { order: 1; }
    .picMarquee-top3 { order: 2; }
    .picMarquee-top2 { order: 3; }
    .picMarquee-top4 { order: 4; }

    .s5-c {
        margin-top: 0;
        align-items: flex-start;
    }

    .s5 .tit {
        margin-bottom: .5rem;
    }
}

@media screen and (max-width: 480px) {
    .s3-lg {
        width: 100%;
        margin: 0 auto;
        margin-bottom: .25rem;
    }

    .s3-lg img {
        position: static;
        width: 2rem;
        height: auto;
        max-width: 100%;
        max-height: none;
        margin: 0 auto;
    }

    .s3-lt ul {
        gap: .15rem;
    }

    .s3-lt ul li {
        width: calc(50% - .075rem);
    }

    .s3-lt ul li a {
        padding: .35rem .25rem;
        border-radius: .14rem;
    }

    .s3-lt ul li a .ico {
        width: .8rem;
        height: .8rem;
    }

    .s3-lt ul li a .ico i {
        font-size: .36rem;
    }

    .s3-tx h3 {
        font-size: .26rem;
        margin-top: .18rem;
        letter-spacing: .04em;
    }

    .s3-tx p {
        font-size: .14rem;
        line-height: .2rem;
        height: .4rem;
    }

    .s2-lt ul li a h3 {
        font-size: .2rem;
    }

    .s2-ifo p,
    .s1-txt p {
        font-size: .2rem;
    }

    .s1-rd b {
        font-size: .26rem;
    }

    .s1-rd {
        padding-top: .15rem;
    }

    .s2-lt ul li a {
        padding: .2rem;
    }

    .s2-date b {
        font-size: .3rem;
    }

    .s3-tx h3 {
        font-size: .24rem;
    }

    .tit h3 b {
        font-size: .3rem;
    }


    .s5-more {
        margin-top: .2rem;
        gap: .15rem;
    }

    .s5-more a {
        width: 1.4rem;
        line-height: .46rem;
        font-size: .19rem;
    }

    .s1-lt ul li a {
        padding: .2rem;
    }

    .s1-tx h3 {
        font-size: .2rem;
    }

    .s1-date b {
        font-size: .26rem;
    }

    .s1-ifo {
        padding-left: .2rem;
    }

    .s1-date {
        margin-left: .1rem;
    }

    .s1-date {
        width: 1rem;
        height: 1rem;
    }

    .s1-ban .slick-next {
        right: .35rem;
    }

    .s3-tit h3 b {
        font-size: .3rem;
    }
}

/* ==================== 爱心捐赠：微信小程序提示弹窗 ==================== */
.donate-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
}

.donate-modal {
    position: relative;
    width: 5.6rem;
    max-width: 92%;
    background: #fff;
    border-radius: 0.16rem;
    padding: 0.5rem 0.45rem 0.45rem;
    text-align: center;
    box-shadow: 0 0.12rem 0.4rem rgba(0, 0, 0, 0.25);
    animation: donateModalIn 0.3s ease;
}

@keyframes donateModalIn {
    from {
        transform: translateY(0.4rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.donate-modal-close {
    position: absolute;
    top: 0.12rem;
    right: 0.16rem;
    width: 0.4rem;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    font-size: 0.24rem;
    color: #999;
    cursor: pointer;
    transition: color 0.3s;
}

.donate-modal-close:hover {
    color: #333;
}

.donate-modal-icon {
    font-size: 0.6rem;
    color: #c7aa8b;
    margin-bottom: 0.15rem;
}

.donate-modal-title {
    font-size: 0.32rem;
    color: #333;
    margin-bottom: 0.12rem;
    font-weight: bold;
}

.donate-modal-desc {
    font-size: 0.22rem;
    color: #666;
    line-height: 0.36rem;
    margin-bottom: 0.2rem;
}

.donate-modal-qr {
    display: block;
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 auto 0.2rem;
    border: 1px solid #eee;
    border-radius: 0.08rem;
}

.donate-modal-tip {
    font-size: 0.2rem;
    color: #e6a23c;
    line-height: 0.32rem;
    margin-bottom: 0.15rem;
    display: none;
}

.donate-modal-btns {
    display: flex;
    gap: 0.2rem;
    justify-content: center;
}

.donate-btn {
    display: inline-block;
    padding: 0.16rem 0.4rem;
    font-size: 0.22rem;
    border-radius: 0.06rem;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.donate-btn-copy {
    background: #fff;
    color: #c7aa8b;
    border: 1px solid #c7aa8b;
}

.donate-btn-copy:hover {
    background: #c7aa8b;
    color: #fff;
}

.donate-btn-open {
    background: #c7aa8b;
    color: #fff;
    border: 1px solid #c7aa8b;
}

.donate-btn-open:hover {
    background: #b3966f;
}

/* 移动端适配 */
@media (max-width: 1024px) {
    .donate-modal {
        width: 5rem;
        padding: 0.4rem 0.35rem 0.35rem;
    }

    .donate-modal-title {
        font-size: 0.3rem;
    }

    .donate-modal-desc {
        font-size: 0.22rem;
    }

    .donate-modal-qr {
        width: 2.2rem;
        height: 2.2rem;
    }

    .donate-btn {
        padding: 0.14rem 0.32rem;
        font-size: 0.22rem;
    }
}