@charset "utf-8";
 /*Technical Support SudyTech*/
 html{font-size: 5.21vw;}
@font-face {
    font-family: 'Source Han Sans';
    src: url('../fonts/SourceHanSansCN-VF-3500.woff2') format('woff2-variations'), url('../fonts/SourceHanSansCN-VF-3500.otf') format('opentype');
    font-weight: 250 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Han Serif';
    src: url('../fonts/SourceHanSerifCN-VF-3500.woff2') format('woff2-variations'), url('../fonts/SourceHanSerifCN-VF.otf') format('opentype');
    font-weight: 250 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'hongleixingshujianti';
    src: url('../fonts/hongleixingshujianti.ttf') format('truetype');

}
@font-face {
    font-family: 'Montserrat-Bold';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');

}
.line1 {text-overflow:-o-ellipsis-lastline;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.line2 {text-overflow:-o-ellipsis-lastline;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.line3 {text-overflow:-o-ellipsis-lastline;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.line4 {text-overflow:-o-ellipsis-lastline;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;}

:root {
    --blue: #1d428e;
    --deep: #113a81;
    --red: #ac1a02;
    --pale: #eff4fa;
    --ink: #30343b;
    --muted: #8b96a5;
    --container: 15.5rem;
    --ease: cubic-bezier(.22,.61,.36,1)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: "微软雅黑","PingFang SC","Noto Sans CJK SC",Arial,sans-serif;
}

button,input {
    font: inherit
}

button {
    cursor: pointer
}

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block;
    max-width: 100%;
}

[hidden] {
    display: none!important
}

:focus-visible {
    outline: 0.03rem solid transparent;
    /* outline-offset: 0.04rem; */
}

.skip-link {
    display: block;
    height: 0;
    overflow: hidden;
    background: #fff;
    color: var(--blue);
    z-index: 10;
    display: none;
}

.skip-link:focus {
    height: auto;
    padding: 0.12rem
}

.container {
    width: min(var(--container),86vw);
    margin-inline:auto}

.section {
    overflow: hidden
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.73rem;
    margin-bottom: 0.58rem
}

.section-title {
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
    color: var(--blue);
    white-space: nowrap;
    line-height: 1;
    position: relative;
}
.section-title:after{
    content:"";
    width: 0.82rem;
    height: 0.3rem;
    background: url(../images/ttbg.png) no-repeat center/100% 100%;
    position: absolute;
    left: -0.32rem;
    bottom: -0.05rem;
}
.section-title .title-main {
    font-size: clamp(0.38rem,3.1vw,0.57rem);
    letter-spacing: -.12em;
    font-weight: 700;
    font-family: 'hongleixingshujianti';
    font-weight: normal;
}

.section-title .title-side {
    font-size: 0.27rem;
    font-weight: 700;
    color: #333;
    line-height: 1.12;
    font-family: 'Source Han Serif';
}

.section-title small {
    display: block;
    color: var(--red);
    margin-top: -1.6em;
    margin-bottom: .3em;
    font-family: "微软雅黑";
    font-size: 0.12rem;
    font-weight: normal;
}

.section-title.light,.section-title.light .title-side,.section-title.light small {
    color: #fff
}

.more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    color: var(--red);
    font-size: 0.16rem;
    white-space: nowrap;
    transition: gap .25s var(--ease),opacity .25s;
    font-weight: 350;
}

.more-link span {
    font-size: 0.11rem;
    border: 0.01rem solid currentColor;
    border-radius: 50%;
    padding: 0.03rem
}

.more-link:hover,.more-link:focus-visible {
    gap: 0.2rem
}

.more-link.light {
    color: #fff
}

.hero-stage {
    display: grid;
    height: clamp(6.5rem,50.5vw,9.7rem);
    background: var(--blue);
    color: #fff;
    height: 100vh;
}
.carousel-swiper{
    width: 100%;
    height: 100%;
}
.carousel-swiper__item a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.carousel-swiper__item a:after{
    content:"";
    pointer-events: none;
    position: absolute;
    height: clamp(1.9rem, 17vw, 2.52rem);
    width: 100%;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(22, 51, 141, 0) 0%, rgba(22, 51, 141, 0.082) 13.8%, rgba(22, 51, 141, 0.435) 42.4%, #1d428e 100%);
    opacity: 0.5;
}
.carousel-swiper__item .carousel-swiper__image,
.carousel-swiper__item .carousel-swiper__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.carousel-swiper__item .carousel-swiper__video {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.carousel-swiper__item .carousel-swiper__image img,
.carousel-swiper__item .carousel-swiper__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
.carousel-swiper__item:has(video[src]:not([src=""])) .carousel-swiper__video {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.carousel-swiper .swiper-pagination{
    display: flex;
    gap: 0.15rem;
    pointer-events: auto;
    bottom: 0.75rem;
    width: auto;
    right: 50%;
    margin-right: calc(var(--container) / -2);
    left: auto;
}
.carousel-swiper .swiper-pagination-bullet{
    background: #FFFFFF;
    width: 0.16rem;
    height: 0.16rem;
}
.carousel-swiper .swiper-pagination-bullet-active{
    opacity:1
}
.carousel-swiper__item .carousel-swiper__title {color: #fff;position: absolute;z-index: 1;bottom: 0.6rem;width: var(--container);text-align: left;margin: 0 auto;left: 50%;margin-left: calc(var(--container) / -2);font-size: 0.38rem;font-weight: bold;}

.hero-stage>* {
    grid-area: 1/1;
    min-width: 0
}

.hero-swiper,.hero-slide {
    width: 100%;
    height: 100%
}

.hero-slide {
    display: grid;
    grid-template-rows: minmax(0,1fr);
    overflow: hidden
}

.hero-slide>* {
    grid-area: 1/1
}

.hero-slide>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero-shade {
    z-index: 1;
    pointer-events: none;
    position: absolute;
    z-index: 1;
    width: 100%;
    bottom: 0;
    height: 100%;
    background: url(../images/hero-shade.png) no-repeat left bottom/60% auto;
}

.hero-caption {
    z-index: 2;
    align-self: end;
    padding-bottom: 0.6rem;
    font-size: 0.38rem;
    letter-spacing: .03em;
    font-weight: bold;
}

.site-header {
    position: relative;
    align-self: start;
    z-index: 999;
    padding: 0.3rem 0;
    transition: transform 1s;
    width: 100%;
}
.site-header.fix {
    padding: 0.1rem 0;
    background: var(--blue);
}
.site-header.fix::before{
    opacity: 0;
}
.site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: clamp(120%,18vw,2.85rem);
    /* background:linear-gradient(0deg,rgba(22,51,141,0) 2.084%,rgba(22,51,141,.08) 15.302%,rgba(22,51,141,.44) 42.683%,rgba(29,66,142,1) 97.916%); */
    pointer-events: none;
    background-image: linear-gradient( to top, rgba(22, 51, 141, 0) 0%, rgba(22, 51, 141, 0.082) 13.8%, rgba(22, 51, 141, 0.435) 42.4%, rgba(29, 66, 142, 0.952) 100% );
    z-index: -1;
}

.header-inner {
    /* position: relative; */
    display: flex;
    align-items: center;
    gap: 0.48rem;
}

.brand {
    flex: none;
    width: 2.7rem;
    display: block;
}

.brand img {
    width: 100%;
    height: auto
}

.header-right {
    flex: 1;
    min-width: 0;
    display: grid;
}

.utility-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.12rem;
    font-size: 0.14rem;
    color: rgba(255,255,255,.85);
}

.utility-nav a:not(:last-child)::after {
    content: "|";
    margin-left: 0.12rem;
    opacity: .35
}

.utility-nav a:hover,.primary-nav a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.06rem
}

.icon-button {
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.29rem;
    padding: 0 0.04rem;
    line-height: 1
}

.language {
    border: 0.01rem solid rgba(255,255,255,.7);
    font: 0.12rem Arial,sans-serif;
    padding: 0.02rem
}

.primary-nav {
    display: grid;
    font-size: 0.2rem;
    white-space: nowrap;
    color: rgba(255,255,255,.96);
    font-weight: bold;
    font-family: 'Source Han Sans';
}

.primary-nav-links {
    display: grid;
    grid-template-columns: repeat(10,minmax(0,1fr));
    align-items: start;
    gap: 0
}

.primary-nav-links>a,.nav-trigger>a {
    display: block;
    padding: 0.04rem 0.06rem;
    line-height: 2;
}

.nav-trigger {
    display: grid;
    align-content: start;
    min-width: 0;
    position: relative;
    z-index: 99;
}
.nav-trigger[data-submenu='i3'] .nav-submenu, .nav-trigger[data-submenu='i4'] .nav-submenu{
    display: none;
}
.nav-submenu {
    display: grid;
    gap: 0;
    padding: 0.08rem 0;
    background: rgba(13,46,106,.97);
    border-top: 0.02rem solid rgba(255,255,255,.45);
    box-shadow: 0 0.12rem 0.22rem rgba(2,17,50,.22);
    white-space: normal
}

.nav-submenu a {
    display: block;
    padding: 0.09rem 0.1rem;
    font-size: 0.13rem;
    line-height: 1.5
}

.nav-submenu a:hover,.nav-submenu a:focus-visible {
    background: rgba(255,255,255,.12)
}

.primary-nav a {
    transition: color .2s
}

.menu-toggle {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.07rem;
    flex: none;
    width: 0.85rem;
    height: 0.85rem;
    border: 0;
    background: #a81b03;
    color: #fff;
    position: absolute;
    right: 0;
}

.menu-toggle span {
    width: 0.24rem;
    height: 0.02rem;
    background: currentColor;
    transition: transform .25s,opacity .25s
}

.menu-toggle[aria-expanded=true] span:first-child {
    transform: translateY(0.09rem) rotate(45deg)
}

.menu-toggle[aria-expanded=true] span:nth-child(2) {
    opacity: 0
}

.menu-toggle[aria-expanded=true] span:last-child {
    transform: translateY(-0.09rem) rotate(-45deg)
}

.search-form {
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.12rem;
    background: rgba(13,46,106,.95);
    padding: 0.2rem;
    border-radius: 0.04rem;
    max-width: 7.8rem
}

.search-form input {
    min-width: 0;
    flex: 1;
    padding: 0.12rem;
    border: 0;
    border-radius: 0.03rem
}

.search-form button {
    background: var(--red);
    border: 0;
    color: #fff;
    padding: 0.12rem 0.2rem
}

.search-message {
    margin: 0;
    font-size: 0.13rem
}

.hero-controls {
    align-self: end;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    padding-bottom: 0.75rem;
    pointer-events: none
}

.hero-controls .hero-pagination {
    position: static;
    width: max-content;
    flex: none;
    display: flex;
    gap: 0.21rem;
    pointer-events: auto
}

.hero-pagination .swiper-pagination-bullet,.news-dots .swiper-pagination-bullet,.notice-pagination .swiper-pagination-bullet,.topics-pagination .swiper-pagination-bullet {
    width: 0.11rem;
    height: 0.11rem;
    margin: 0!important;
    background: #fff;
    opacity: .4
}
.hero-pagination .swiper-pagination-bullet{    width: 0.16rem;
    height: 0.16rem;}
.hero-pagination .swiper-pagination-bullet-active,.news-dots .swiper-pagination-bullet-active,.notice-pagination .swiper-pagination-bullet-active,.topics-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}
#main {
    background: url(../images/mainbg.jpg) no-repeat center top 2.04rem/100% auto;
}
.news-section {
    padding: 0.74rem 0 0.9rem;
    min-height: 10rem
}

.news-head {
    align-items: flex-end;
    margin-bottom: 0.45rem;
}

.heading-pair {
    display: flex;
    align-items: center;
    gap: 0.75rem
}

.news-grid {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(0,1fr);
    gap: 0.38rem
}

.news-feature {
    display: grid;
    min-width: 0;
    overflow: hidden;
}

.news-image-area {
    display: grid
}

.news-image-area>* {
    grid-area: 1/1
}

.news-swiper {
    aspect-ratio: 897/522;
    width: 100%;
    min-width: 0;
    background: #d7dce4
}

.feature-image,.feature-image img {
    width: 100%;
    height: 100%
}

.feature-image img {
    object-fit: cover;
    transition: transform .6s var(--ease)
}

.feature-image:hover img {
    transform: scale(1.035)
}

.news-image-area .news-dots {
    position: static;
    width: max-content;
    height: max-content;
    display: flex;
    align-self: end;
    justify-self: end;
    gap: 0.1rem;
    margin: 0 0.36rem 0.35rem 0;
    z-index: 2
}

.news-dots .swiper-pagination-bullet {
    width: 0.11rem;
    height: 0.11rem;
}

.news-arrows button {
    border: 0;
    background: none;
    color: #fff;
    line-height: 1
}

.news-copy-swiper {
    width: 100%;
    min-width: 0;
    overflow: visible;
    z-index: 2;
}

.news-story-slide {
    height: auto
}

.feature-story {
    display: flex;
    gap: 0.28rem;
    min-height: 1.98rem;
    height: 100%;
    margin-top: 0;
    padding: 0.3rem 0.3rem 0.24rem 0.35rem;
    background: #fff;
    box-shadow: 0 0.04rem 0.25rem rgba(18,54,143,.13);
    transition: transform .25s,box-shadow .25s;
}

.feature-story:hover {
    transform: translateY(-0.05rem);
    box-shadow: 0 0.12rem 0.28rem rgba(18,54,143,.17)
}

.date-badge {
    display: grid;
    align-content: center;
    text-align: center;
    flex: none;
    width: 0.72rem;
    height: 0.83rem;
    background: var(--red);
    color: #fff;
    transform: translateY(-0.64rem);
    font-family: 'Source Han Serif';
    font-weight: bold;
}

.date-badge strong {font-size: 0.31rem;}

.date-badge small {
    font-size: 0.13rem;
}

.story-copy {
      display: flex;
    gap: 0.12rem;
    flex-direction: column;
}

.story-copy strong {
    font-size: 0.2rem;
    line-height: 1.5;
    font-weight: 700;
    font-family: "微软雅黑";
}

.story-copy>span {
    color: #999;
    font-size: 0.15rem;
    line-height: 1.8
}

.story-copy time {
    color: #AC1A02;
    font-size: 0.15rem;
    line-height: 0.18rem;
}

.news-list {
    display: grid;
    grid-template-rows: repeat(5,1fr);
    min-height: 7.22rem
}

.news-list a {
    display: block;
    transition: background .25s,color .25s
}

.news-list-inner {
    display: grid;
    align-content: center;
    gap: 0.22rem;
    height: 100%;
    margin-left: 0.34rem;
    padding: 0.17rem 0.25rem 0.17rem 0.14rem;
    border-bottom: 0.01rem solid #c5cbd6;
    transition: padding .25s,border-color .25s
}

.news-list a:first-child .news-list-inner {
    border-top: 0.01rem solid #c5cbd6
}

.news-list a strong {
    font-size: 0.18rem;
    line-height: 1.75;
    font-weight: 700;
    font-family: "微软雅黑";
}

.news-list time {
    color: var(--red);
    font-size: 0.14rem;
    line-height: 0.2rem;
}
span.time-icon {
    font-size: 0.19rem;
}
.news-list a:hover,.news-list a:focus-visible {
    background: #1f4ba3 url(../images/bg1.png) no-repeat right 12% bottom 24% /0.86rem;
    color: #fff
}

.news-list a:hover .news-list-inner,.news-list a:focus-visible .news-list-inner {
    padding-left: 0.08rem;
    border-color: #1f4ba3
}

.news-list a:hover time,.news-list a:focus-visible time {
    color: rgba(255,255,255,.72)
}

.media-news-section {
    padding: 0 0 0.4rem
}

.media-news-panel {
    display: grid;
    grid-template-columns: 1.7rem 1fr;
    gap: 0.52rem;
    min-height: 6.6rem;
    padding: 0.76rem 0.7rem;
    background: url(../images/main2bg.jpg) no-repeat center/cover;
    position: relative;
}

.media-news-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.64rem
}

.vertical-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.16rem;
}
.vertical-title:after{
    transform: rotate(90deg);
    top: 0.12rem;
    transform-origin: bottom;
    left: auto;
    right: -0.42rem;
}
.vertical-title .title-main {
    writing-mode: vertical-rl;
    letter-spacing: -0.45em;
}

.vertical-title .title-side {
    font-size: 0.27rem;
    writing-mode: vertical-rl
}

.vertical-title small {
    font-size: 0.12rem;
    margin: 0;
    color: var(--red)
}

.media-news-content {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.media-news-swiper {
    width: 100%;
    min-width: 0
}

.media-news-page {
    height: auto
}

.media-news-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: repeat(2,minmax(0,1fr));
    gap: 0.35rem 0.52rem;
    min-height: 4.8rem
}

.media-news-content .media-news-pagination {
    position: static;
    width: 100%;
    display: flex;
    gap: 0.16rem;
    justify-self: center;
    /* transform: translateX(-50%); */
    position: absolute;
    justify-content: center;
    bottom: 0.35rem;
}

.media-news-pagination .swiper-pagination-bullet {
    width: 0.11rem;
    height: 0.11rem;
    margin: 0!important;
    background: #406AC3;
    opacity: .35
}

.media-news-pagination .swiper-pagination-bullet-active {
    opacity: 1
}

.media-article {
    display: grid;
    align-content: start;
    gap: 0.17rem;
    transition: transform .25s
}

.media-article:hover {
    transform: translateY(-0.05rem)
}

.media-article .icon {
    width: 1.1rem;
    height: 0.65rem;
}
.media-article .icon img{
    width: 100%;
    height: 100%;
}
.media-article time {
    color: #2463a3;
    font-family: 'Montserrat-Bold';
    font-size: 0.16rem;
}

.media-article span {
    font-size: 0.18rem;
    line-height: 1.75;
    font-weight: 700;
    font-family: "微软雅黑";
}

.notices-section {
    padding: 1.45rem 0 1.4rem;
    min-height: 6.55rem;
    color: #fff;
    background: url(../images/main3bg.jpg) no-repeat center / cover;
}

.notices-section .section-head {
    margin-bottom: 0.4rem
}

.notices-swiper {
    width: 100%
}

.notice-card {
    display: flex;
    align-items: flex-start;
    gap: 0.24rem;
    min-height: 1.45rem;
    padding: 0.2rem 0.25rem;
    color: #fff;
    transition: background .2s;
}

.notice-card:hover,.notice-card:focus-visible {
    background: rgba(255,255,255,.1)
}

.notice-date {
    flex: none;
    display: grid;
    justify-items: center;
    gap: 0.03rem;
    min-width: 0.5rem;
    padding-right: 0.22rem;
    border-right: 0.01rem solid rgba(255,255,255,.45);
    font-family: 'Source Han Serif';
    font-weight: bold;
}

.notice-date strong {
    font-size: 0.26rem;
    font-weight: bold;
}

.notice-date small {
    font-size: 0.11rem;
    font-weight: bold;
}

.notice-copy {
    display: grid;
    font-size: 0.18rem;
    line-height: 1.7;
    font-weight: bold;
    height: 100%;
    align-content: space-between;
    gap: 0.16rem;
}

.notice-copy em {
    font-style: normal;
    opacity: .55;
    font-size: 0.23rem;
    line-height: 1;
}

.notice-pagination {
    display: flex;
    justify-content: center;
    gap: 0.12rem;
    margin-top: 0.3rem
}

.notice-date {
    align-self: stretch;
    min-height: 1.18rem
}

.quick-links {
    background: #fff;
}

.quick-links .container {
    display: flex;
    justify-content: center;
    gap: 0.85rem
}

.quick-links a {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    min-width: 2rem;
    padding: 0 0 0.36rem;
    font-size: 0.19rem;
    transform: translateY(-0.45rem);
    margin-bottom: -0.45rem;
    transition: transform .25s;
}

.quick-links a:hover {
    transform: translateY(-0.53rem);
    color: var(--red)
}

.quick-icon {
    display: grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    background: #fff;
    border: 0.08rem solid #fff;
    outline: 0.01rem solid #f1d7d3;
    border-radius: 50%;
    box-shadow: 0 0.05rem 0.15rem rgba(126,39,24,.12);
    font-size: 0.48rem;
    color: var(--red)
}

.quick-icon img {
    width: 0.4rem;
    height: 0.4rem;
    object-fit: contain
}

.academic-section {
    padding: 1.8rem 0 1.4rem;
    min-height: 9.25rem;
    color: #fff;
    background: url(../images/main4bg.jpg) no-repeat top center/ 100% auto;
}

.academic-head {
    align-items: center
}

.academic-tabs,.people-tabs {
    display: flex;
    gap: 0.25rem;
}

.academic-tabs button,.people-tabs button {
    border-radius: 0.4rem;
    padding: 0.15rem 0.32rem;
    transition: background .25s,color .25s,transform .25s;
    font-weight: bold;
    background: #fff;
    font-size: 0.19rem;
    color: var(--red);
    border: 0;
    min-width: 1.35rem;
    box-shadow: 0 0.04rem 0.15rem rgba(92, 36, 22, .1);
}

.academic-tabs button:hover,.academic-tabs button:focus-visible,.academic-tabs button[aria-selected=true] {
    background: var(--red);
    color: #fff;
    transform: translateY(-0.02rem);
}

.academic-content {
    display: grid;
    grid-template-columns: 1.1fr 2.9fr;
    gap: 0;
    min-height: 4.2rem
}

.academic-photo {
    width: 100%;
    height: 4.2rem;
    object-fit: cover
}

.academic-cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 0.26rem
}

.academic-card {
    display: grid;
    align-content: start;
    gap: 0.28rem;
    min-width: 0;
    background: #fff;
    color: #444;
    padding: 0.3rem;
    transition: transform .25s,box-shadow .25s;
}

.academic-card:hover {
    transform: translateY(-0.07rem);
    box-shadow: 0 0.14rem 0.3rem rgba(77,10,3,.24)
}

.forum-meta {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--red)
}

.forum-date {
    display: grid;
    justify-items: center;
    border: 0.04rem solid #f4d2ce;
    width: 0.74rem;
    height: 0.74rem;
    align-content: center;
}

.forum-date strong {
    font-size: 0.36rem;
    line-height: 1.1;
}

.forum-date small {
    font-size: 0.1rem;
}

.forum-meta b {
    line-height: 1.5;
    text-decoration: underline;
    font-size: 0.18rem;
}

.academic-card>strong {
    font-size: 0.18rem;
    line-height: 1.7;
    font-weight: bold;
    text-overflow: -o-ellipsis-lastline;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    height: fit-content;
}
#academic-panel-2 .academic-card>strong {
    -webkit-line-clamp: 6;
}
.forum-details {
    font-size: 0.14rem;
    line-height: 1.6;
}
.forum-details p{
    display: flex;
    gap: 0.1rem;
    padding: 0.06rem 0;
    align-items: flex-start;
    margin: 0;
}
.forum-details p img{
    width: 0.15rem;
    flex: none;
    top: 0.3em;
    position: relative;
}
.academic-empty,.people-empty {
    background: #fff;
    color: #667;
    padding: 0.7rem;
    text-align: center
}

.gallery-section {
    padding: 0 0 1.25rem;
    min-height: 9.65rem
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1.04fr;
    gap: 0.4rem
}

.gallery-photos {
    min-width: 0
}

.gallery-swiper {
    height: 4.1rem;
    background: #d7e3ea
}

.gallery-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gallery-photos-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #194180;
    color: #fff;
    height: 0.44rem;
    padding: 0 0.1rem
}

.gallery-photos-nav button {
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.3rem;
    line-height: 1
}

.gallery-pagination {
    display: flex;
    gap: 0.1rem
}

.gallery-pagination .swiper-pagination-bullet {
    width: 0.08rem;
    height: 0.08rem;
    background: #fff;
    margin: 0!important
}

.gallery-thumbs {
    height: 1.5rem;
    margin-top: 0.15rem
}

.gallery-thumbs button {
    border: 0;
    padding: 0;
    background: none;
    opacity: .72
}

.gallery-thumbs button.swiper-slide-thumb-active {
    opacity: 1;
    outline: 0.05rem solid var(--red);
    outline-offset: -0.05rem
}

.gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: 3rem 2.6rem;
    gap: 0.15rem
}

.video-feature {
    grid-column: span 2
}

.video-tile {
    display: grid;
    overflow: hidden;
    border: 0;
    padding: 0;
    color: #fff;
    text-align: left;
    background: #222
}

.video-tile>* {
    grid-area: 1/1
}

.video-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s
}

.video-tile:hover img {
    transform: scale(1.05)
}

.video-tile span {
    align-self: end;
    padding: 0.5rem 0.24rem 0.24rem;
    background: linear-gradient(transparent,rgba(0,0,0,.8));
    width: 100%;
    font-size: 0.2rem;
    font-weight: bold;
}

.video-tile b {
    align-self: center;
    justify-self: center;
    display: grid;
    place-items: center;
    width: 0.57rem;
    height: 0.57rem;
    border-radius: 50%;
    font-size: 0.25rem;
    font-weight: 400;
    background: rgba(0,0,0,.12)
}

.people-section {
    padding: 0.85rem 0 0.95rem;
    min-height: 9.1rem;
    background: linear-gradient(rgba(245,248,252,.95),rgba(245,248,252,.88)),url('../images/hero.jpg') center bottom/cover
}

.people-head {
    justify-content: flex-start
}

.people-head .more-link {
    margin-left: auto
}

.people-tabs button:hover,.people-tabs button:focus-visible,.people-tabs button[aria-selected=true] {
    background: var(--red);
    color: #fff;
    transform: translateY(-0.02rem)
}

.people-content {
    display: grid;
    grid-template-columns: .9fr 1.3fr;
    gap: 0.6rem;
    align-items: center
}

.people-portrait {
    display: grid;
    justify-items: center;
    gap: 0.18rem
}

.people-swiper {
    width: min(100%,5.4rem);
    aspect-ratio: 1;
    border: 0.18rem solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 0.02rem #d9e9f7,0 0 0 0.12rem rgba(255,255,255,.75);
    overflow: hidden
}

.people-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s;
}

.people-arrows {
    display: flex;
    gap: 0.16rem
}

.people-arrows button {
    border: 0.01rem dashed #7194c5;
    border-radius: 50%;
    color: #5173a9;
    width: 0.44rem;
    height: 0.44rem;
    transition: background .2s,color .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.people-arrows button:hover {
    color: #fff;
    background: #fff;
}

.people-detail h3 {
    font-size: 0.3rem;
    color: var(--blue);
    font-weight: bold;
    margin: 0 0 0.22rem
}

.people-detail p {
    font-size: 0.18rem;
    line-height: 2.15;
    margin: 0 0 0.22rem;
    color: #3E3E3E;
}

.detail-button {
    display: inline-block;
    border-radius: 0.24rem;
    background: #a53441;
    color: #fff;
    padding: 0.1rem 0.28rem;
    font-size: 0.15rem;
    transition: background .2s;
    font-weight: bold;
}

.detail-button:hover {
    background: var(--red)
}

.people-thumbs {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0.35rem;
    margin-top: 0.58rem
}

.people-thumbs button {
    display: grid;
    justify-items: center;
    gap: 0.14rem;
    border: 0;
    background: none;
    color: #444;
    font-size: 0.16rem
}
.mask-img {
    mask: url('../images/mask.png') no-repeat center center/100% 100%;
    padding: 0.05rem;
    aspect-ratio: 144/191;
    background: #fff;
    box-shadow: 0 0.14rem 0.08rem #1d438e12;
    transition: 0.6s;
}
.people-thumbs img {
    width: 1.25rem;
    height: 1.45rem;
    object-fit: cover;
    mask: url('../images/mask.png') no-repeat center center/100% 100%;
    transition: transform .25s
}

.people-thumbs button:hover img,.people-thumbs button:focus-visible img {
    transform: translateY(-0.06rem)
}

.culture-section {
    padding: 0.95rem 0 1.35rem;
    min-height: 10.3rem
}
.culture-section .container{
    position: relative;
}
.culture-grid {
    display: grid;
    grid-template-columns: repeat(12,minmax(0,1fr));
    grid-template-rows: 4.31rem 3.21rem;
    gap: 0
}

.culture-card {
    display: grid;
    overflow: hidden;
    color: #fff;
    min-width: 0
}

.culture-card>* {
    grid-area: 1/1;
}

.culture-card>img:not(.identity-logo) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s
}

.culture-card:hover>img:not(.identity-logo) {
    transform: scale(1.05)
}

.culture-card>span,.culture-card>strong {
    align-self: start;
    justify-self: start;
    padding: 0.35rem 0.41rem;
    font-size: 0.25rem;
    font-weight: bold;
    z-index: 1
}

.culture-gate {
    grid-column: span 2
}

.culture-museum,.culture-geology {
    grid-column: span 2
}

.culture-museum {
    background: #014aa4;
}

.culture-museum img {
    filter: brightness(.7);
    opacity: 0.58;
}

.culture-geology {
    background: #e5ad31;
    position: relative;
}
.culture-geology:before{
    content:"";
    top: 0;
    position: absolute;
    width: 100%;
    height: 80%;
    background-image: linear-gradient(
  to bottom,
  #f0b742 0%,
  rgba(240, 183, 66, 0) 100%
);
    z-index: 1;
    pointer-events: none;
}
.culture-geology img {
    opacity: .72
}

.culture-sculpture {
    grid-column: span 6
}

.culture-corridor {
    grid-column: span 5;
    z-index: 2;
}

.culture-identity {
    grid-column: span 4;
    background: #0d4eb1;
}

.culture-identity>img:not(.identity-logo) {
    opacity: 0.25;
    /* mix-blend-mode: multiply; */
    /* filter: brightness(.9); */
}

.culture-identity .identity-logo {
    align-self: center;
    justify-self: center;
    width: 30.6%;
    z-index: 1
}

.culture-history {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    background: url(../images/culture_museum3.jpg) no-repeat center/cover;
    padding: 0.43rem 0.55rem;
    line-height: 1.9
}

.culture-history strong {
    font-size: 0.25rem;
    border-bottom: 0.01rem solid rgba(255,255,255,.45);
    padding: 0;
    padding-bottom: 0.15rem;
}

.culture-history span {
    font-size: 0.16rem;
    margin-top: 0.15rem;
    padding: 0;
    line-height: 1.95;
    opacity: 0.61;
    text-indent: 2em;
font-weight: normal;
}

.convergence-section {
    padding: 0.9rem 0 1.3rem;
    min-height: 9.5rem;
    background: url('../images/convergence_bg.jpg') center bottom/cover;
}

.socials {
    display: flex;
    gap: 0.12rem
}

.social-item {
    position: relative;
    display: flex;
    /* grid-template-rows: 0.4rem; */
    width: 0.4rem;
    justify-content: center;
}

.social-item>a,.social-qr {
    grid-area: 1/1
}

.social-item>a {
    display: grid;
    place-items: center;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #39c852;
    color: #fff;
    font-weight: 700;
    z-index: 1;
    transition: transform .2s
}

.socials .social-item:nth-child(1)>a {
    background: #2CCC46 url(../images/weixin.svg) no-repeat center center/100% 100%;
}
.socials .social-item:nth-child(2)>a {
    background: #eaa41f url(../images/sph.svg) no-repeat center center/100% 100%;
}
.socials .social-item:nth-child(3)>a {
    background: #fff url(../images/weibo.svg) no-repeat center center/100% 100%;
}
.socials .social-item:nth-child(4)>a {
    background: #222 url(../images/douyin.svg) no-repeat center center/100% 100%;
}

.socials .social-item:nth-child(5)>a {
    background: #ee2b58 url(../images/xhs.svg) no-repeat center center/100% 100%;
}

.socials .social-item:nth-child(6)>a {
    background: #fa6e9c url(../images/bilibili.svg) no-repeat center center/100% 100%;
}

.socials a:hover {
    transform: translateY(-0.04rem)
}

/* Media QR popovers reuse the footer pattern, dropping below the icon row. */
.social-qr {
    display: grid;
    justify-items: center;
    align-self: start;
    gap: 0.06rem;
    height: max-content;
    background: #fff;
    color: #1d428e;
    border-radius: 0.04rem;
    box-shadow: 0 0.08rem 0.25rem rgba(4,25,66,.3);
    font-size: 0.12rem;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s,visibility .2s;
    z-index: 5;
    position: absolute;
    top: 130%;
    width: max-content;
    transition: 0.4s;
}

.social-qr img {
    height: auto;
    object-fit: contain;
  /*padding: 0.05rem;*/
    width: 1.8rem;
}

.social-qr small {
    font-size: 0.11rem
}

.socials .social-item:last-child .social-qr {
    justify-self: end
}

.social-item:hover .social-qr,.social-item:focus-within .social-qr,.social-item.is-open .social-qr {
    opacity: 1;
    visibility: visible
}

.convergence-grid {
    display: grid;
    grid-template-columns: 1.15fr .98fr 1.8fr;
    gap: 0.15rem;
    height: 5.9rem
}

.convergence-column {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 0.15rem;
    min-width: 0;
    min-height: 0
}

.convergence-column:has(.tall) {
    grid-template-rows: 1fr
}

.right-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr
}

.right-mosaic .wide {
    grid-column: span 2
}

.convergence-card {
    display: grid;
    overflow: hidden;
    color: #fff;
    background: #333;
    font-size: 0.18rem;
    font-weight: bold;
    position: relative;
}

.convergence-card>* {
    grid-area: 1/1;
    position: relative;
}

.convergence-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
    position: absolute;
}

.convergence-card:hover img {
    transform: scale(1.05)
}

.convergence-card span {
    align-self: end;
    padding: 0.18rem 0.16rem 0.18rem;
    background: linear-gradient(transparent,rgba(0,0,0,.72));
    width: 100%;
    z-index: 1;
    position: absolute;
    z-index: 2;
    bottom: 0;
    line-height: 1.6;
}

.convergence-card b.icon {
    justify-self: end;
    align-self: start;
    margin: 0.12rem;
    background: #e54987;
    border-radius: 0.15rem 0 0 0.15rem;
    padding: 0.05rem 0.1rem;
    font-size: 0.14rem;
    z-index: 1;
    width: 0.5rem;
    margin-right: 0;
    height: 0.29rem;
    background-size: auto 60%;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
}


.topics-section {
    padding: 0.85rem 0 1.3rem;
    min-height: 7.15rem
}

.topics-track {
    display: grid;
    grid-template-columns: 0.5rem minmax(0,1fr) 0.5rem;
    align-items: center;
    gap: 0.24rem
}

.topics-track>button {
    width: 0.48rem;
    height: 0.48rem;
    border: 0.01rem solid #71a7b2;
    background: #fff;
    color: #548d9b;
    border-radius: 50%;
    font-size: 0.24rem;
    transition: background .2s,color .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topics-track>button:hover {
    box-shadow: 0 3px 10px #4f858f80;
    /* color: #fff; */
}

.topics-swiper {
    width: 100%;
    min-width: 0
}

.topic-card {
    height: 4.1rem;
    display: grid;
    overflow: hidden;
    justify-items: center;
}

.topic-card>* {
    grid-area: 1/1
}

.topic-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s
}

.topic-card:hover img {
    transform: scale(1.05)
}

.topic-card span {
    align-self: start;
    justify-self: end;
    margin: 0.3rem 0.2rem;
    color: #fff;
    writing-mode: vertical-lr;
    font-size: 0.18rem;
    line-height: 1.45;
    letter-spacing: .22em;
    /* text-shadow: 0 0.01rem 0.04rem #8c1b09; */
    max-height: 3.3rem;
text-shadow: 0 0 6px #33333375;
}

.topics-pagination {
    display: flex;
    justify-content: center;
    gap: 0.12rem;
    margin-top: 0.46rem;
    width: 100%;
}

.topics-pagination .swiper-pagination-bullet {
    background: var(--red);
    width: 0.08rem;
    height: 0.08rem;
    flex: none;
}

.site-footer {
    color: rgba(255,255,255,.83);
    background: url('../images/footerbg.png') center top/cover;
}
.footer-top{
    display: flex;
    margin-bottom: 0.55rem;
    justify-content: space-between;
}
.footer-brand {
}

.footer-brand img {
    width: 2.7rem
}
.footer-right {
    display: flex;
    gap: 0.44rem;
    justify-content: center;
    align-items: center;
}
.footer-right strong {
    letter-spacing: .15em;
    font-size: 0.49rem;
    font-family: 'hongleixingshujianti';
    font-weight: normal;
    opacity: 0.36;
    line-height: 1;
}
.footer-campus{
    display: flex;
    gap: 0.5rem;
}
.footer-campus .campus .tt {
    font-size: 0.2rem;
    margin-bottom: 0.15rem;
}
.footer-campus .campus p{
    font-size: 0.16rem;
    line-height: 2;
    margin: 0;
}
.footer-info {
    display: grid;
    grid-template-columns: 1fr 1.15fr 2.6rem;
    gap: 0.55rem
}
.footer-campus img {
    height: 1rem;
    width: auto;
    flex: none;
}
.footer-campus .campus{
    display: flex;
    gap: 0.5rem;
}
.footer-info h2,.footer-links h2 {
    font-size: 0.17rem;
    padding-bottom: 0.16rem;
    margin: 0 0 0.12rem;
    border-bottom: 0.01rem solid rgba(255,255,255,.5)
}

.footer-info p {
    font-size: 0.14rem;
    line-height: 2.1;
    margin: 0.03rem 0;
    font-family: 'Source Han Sans';
}

.footer-services {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.12rem 0.2rem;
    font-size: 0.14rem;
    font-family: 'Source Han Sans';
}

.footer-services a:hover,.footer-bottom a:hover {
    color: #fff;
    text-decoration: underline
}

.footer-qrs {
    width: 2.6rem;
    align-self: center
}

.footer-links>div {
}

.footer-links details {
    background: rgba(255,255,255,.18);
    padding: 0.15rem 0.25rem;
    border-radius: 0.04rem;
    font-size: 0.15rem
}

.footer-links summary {
    cursor: pointer
}

.footer-links details a {
    display: block;
    padding: 0.1rem 0;
    font-size: 0.13rem
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 0.45rem;
    padding: 0.25rem 0;
    font-size: 0.14rem;
    z-index: 1;
    position: relative;
}
.footer-bottom .copy{opacity:0.6}
.footer-bottom .return-top{
    font-family: 'Source Han Serif';
    font-weight: bold;
    font-size: 0.14rem;
}
.footer-bottom:after{
    content:"";
    background: #012469;
    position: absolute;
    width: 100vw;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    top: 0;
}
/* Alignment measured from the 19.2rem page inside the 2x design image. */
/* Revision: vertical navigation, linked news slides, academic accordion and gallery controls. */
.academic-content {
    display: block;
    min-height: 4.2rem;
}

.academic-cards {
    display: flex;
    gap: 0.26rem;
    min-height: 4.2rem;
    max-height: 4.2rem;
}

.academic-item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    /* height: 4.2rem; */
    /* overflow: hidden; */
    transition: flex .45s var(--ease)
}

.academic-item.is-active {
    flex: 2.5 1 0
}

.academic-item .academic-photo {
    flex: 0 0 0;
    width: 0;
    height: 100%;
    opacity: 0;
    object-fit: cover;
    transition: flex-basis .45s var(--ease),width .45s var(--ease),opacity .3s
}

.academic-item.is-active .academic-photo {
    flex-basis: 58.7%;
    width: 58.7%;
    opacity: 1
}

.academic-item .academic-card {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 0.05rem 0.2rem rgb(21 55 130 / 12%);
}

.academic-item .academic-card:hover {
    transform: none;
}

.gallery-grid {
    align-items: stretch
}

.gallery-photos {
    display: grid;
    grid-template-rows: minmax(0,1fr) 1.5rem;
    gap: 0.15rem;
    min-width: 0;
    height: 7rem
}

.gallery-main {
    display: grid;
    min-height: 0
}

.gallery-main>* {
    grid-area: 1/1
}

.gallery-main .gallery-swiper {
    width: 100%;
    height: 100%;
    min-height: 0
}

.gallery-slide-link {
    display: block;
    width: 100%;
    height: 100%
}

.gallery-photos-nav,.news-arrows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    align-items: stretch;
    justify-content: initial;
    height: auto;
    padding: 0;
    background: none;
    pointer-events: none;
    z-index: 2
}

.gallery-photos-nav button,.news-arrows button {
    width: 0.29rem;
    height: 0.6rem;
    align-self: center;
    background: rgba(0,0,0,.28);
    pointer-events: auto;
    font-size: 0.28rem
}

.gallery-photos-nav .gallery-prev,.news-arrows .news-prev {
    grid-column: 1;
    grid-row: 1/3;
    justify-self: start
}

.gallery-photos-nav .gallery-next,.news-arrows .news-next {
    grid-column: 2;
    grid-row: 1/3;
    justify-self: end
}

.gallery-photos-nav .gallery-pagination {
    position: static;
    width: max-content;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    display: flex;
    gap: 0.1rem;
    margin: 0 0.28rem 0.28rem 0;
    pointer-events: auto
}

.gallery-thumbs {
    height: 1.5rem;
    margin-top: 0;
    min-width: 0
}

.video-grid {
    height: 7rem;
    grid-template-rows: minmax(0,1.83fr) minmax(0,1fr);
    min-width: 0
}

/* Image gallery: the large image and linked thumbnails form one column. */
.gallery-photos {
    width: 100%;
    min-width: 0
}

.gallery-main {
    min-width: 0
}

.gallery-thumbs {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    align-self: stretch
}

.gallery-thumbs .swiper-wrapper,.gallery-thumbs .swiper-slide {
    height: 100%
}

.gallery-thumbs .swiper-slide {
    display: block;
    min-width: 0;
    overflow: hidden
}

.gallery-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* The portrait fades while the following portraits slide as a second Swiper. */
.people-detail {
    min-width: 0
}
.person-detail {
    display: none
}

.person-detail.is-active {
    display: block;
    animation: personDetailIn .5s var(--ease) both
}

@keyframes personDetailIn {
    from {
        opacity: 0;
        transform: translateY(.16rem)
    }

    to {
        opacity: 1;
        transform: none
    }
}
.people-swiper .swiper-slide {
    height: 100%
}

.people-thumbs {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    margin-top: 0.58rem;
    padding-top: 0.1rem;
}
.people-swiper .swiper-slide:hover img ,.people-thumbs  .swiper-slide:hover .mask-img{
    transform: scale(1.05);
}
.people-thumbs .swiper-wrapper {
    align-items: start
}

.people-thumbs .swiper-slide {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.14rem;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #444;
    font-size: 0.18rem;
    text-align: center;
    font-weight: bold;
}

.people-thumbs .swiper-slide img {
    max-width: 100%
}

/* The center topic is straight; cards on each side share one shape. */
.topic-card.topic-left {
    clip-path: polygon(0 0,100% 7%,100% 93%,0 100%)
}

.topic-card.topic-center {
    clip-path: none
}

.topic-card.topic-right {
    clip-path: polygon(0 7%,100% 0,100% 100%,0 93%);
    justify-content: left;
}

/* A fine inner circle is separate from each announcement icon's white disc. */
.quick-icon {
    border: 0;
    outline: 0
}

.quick-icon::before,.quick-icon img {
    grid-area: 1/1
}

.quick-icon::before {
    content: "";
    width: calc(100% - 0.14rem);
    height: calc(100% - 0.14rem);
    border: 0.01rem dashed  #e2c4c2;
    border-radius: 50%
}

.quick-icon img {
    z-index: 1
}

/* Footer icons stay linked and reveal their matching QR on hover or focus. */
.footer-links {
    width: 3.01rem;
}

.footer-links h2 {
    grid-column: 1;
    grid-row: 1
}

.footer-links>.footer-socials {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    align-items: center;
    justify-self: end;
    gap: 0.08rem
}

.footer-social-item {
    display: grid;
    grid-template-rows: 0.36rem;
    justify-items: center;
    width: 0.36rem
}

.footer-social-item>a,.footer-social-qr {
    grid-area: 1/1
}

.footer-social-item>a {
    display: block;
    width: 0.36rem;
    height: 0.36rem;
    z-index: 1
}

.footer-social-item>a img {
    width: 100%;
    height: 100%
}

.footer-social-qr {
    display: grid;
    justify-items: center;
    align-self: start;
    gap: 0.06rem;
    width: 1.48rem;
    height: max-content;
    padding: 0.08rem;
    background: #fff;
    color: #1d428e;
    border-radius: 0.04rem;
    box-shadow: 0 0.08rem 0.25rem rgba(4,25,66,.3);
    font-size: 0.12rem;
    text-align: center;
    transform: translateY(calc(-100% - 0.12rem));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s,visibility .2s;
    z-index: 3
}

.footer-social-qr img {
    width: 1.32rem;
    height: 1.32rem;
    object-fit: contain
}

.footer-social-qr small {
    font-size: 0.11rem
}

.footer-social-item:hover .footer-social-qr,.footer-social-item:focus-within .footer-social-qr,.footer-social-item.is-open .footer-social-qr {
    opacity: 1;
    visibility: visible
}

/* News date and card match the flat design treatment. */
.feature-story,.feature-story:hover {
    box-shadow: none;
    transform: none
}

.feature-date {
    display: grid;
    justify-items: center;
    align-content: start;
    flex: none;
    width: 0.72rem;
    margin-top: -0.75rem
}

.feature-date .date-badge {
    margin-top: 0;
    transform: none
}

.feature-date-rule {
    width: 0.01rem;
    height: 1.08rem;
    margin-top: 0.14rem;
    background: var(--red)
}

/* Pagination sits over the blue footer area. */
.topics-pagination .media-news-pagination {
    position: static;
    width: max-content;
    display: flex;
    gap: 0.16rem;
    justify-self: center;
    transform: translateX(-50%);
}

.topics-pagination .swiper-pagination-bullet {
    width: 0.11rem;
    height: 0.11rem;
    margin: 0!important;
    background: #406AC3;
    opacity: .35
}

.topics-pagination .swiper-pagination-bullet-active {
    opacity: 1
}

/* Footer link menus open upwards without changing the footer layout. */
.footer-links>.footer-selects {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 0.55rem
}

.footer-select {
    display: grid;
    grid-template-rows: 0.46rem;
    min-width: 0
}

.footer-select>button,.footer-select-menu {
    grid-area: 1/1
}

.footer-select>button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.3rem;
    border: 0;
    border-radius: 0.03rem;
    background: rgba(255,255,255,.18);
    color: #fff;
    text-align: left;
    font-size: 0.16rem;
    z-index: 2
}

.footer-select>button::after {
    content: "";
    width: 0.07rem;
    height: 0.07rem;
    border-right: 0.02rem solid currentColor;
    border-bottom: 0.02rem solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s
}

.footer-select.is-open>button::after {
    transform: rotate(225deg)
}

.footer-select-menu {
    display: grid;
    align-self: start;
    justify-self: stretch;
    height: max-content;
    max-height: min(3.2rem,50vh);
    overflow-y: auto;
    padding: 0.08rem 0;
    background: #31559a;
    border: 0.01rem solid rgba(255,255,255,.28);
    border-radius: 0.03rem 0.03rem 0 0;
    box-shadow: 0 0.12rem 0.24rem rgba(3,21,70,.25);
    transform: translateY(calc(-100% + 0.12rem));
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .25s var(--ease),clip-path .25s var(--ease),opacity .2s,visibility .2s;
    z-index: 3
}

.footer-select.is-open .footer-select-menu {
    transform: translateY(-100%);
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.footer-select-menu a {
    display: block;
    padding: 0.12rem 0.24rem;
    color: #fff;
    font-size: 0.14rem;
    line-height: 1.5
}

.footer-select-menu a:hover,.footer-select-menu a:focus-visible {
    background: rgba(255,255,255,.14)
}

/* Shared hover language and fluid desktop measurements. */
body {
    overflow-x: clip;
    font-size: 13px;
}

a:hover,a:focus-visible {
    text-decoration: none!important
}

a:not(.swiper-slide) {
    transition: color .25s var(--ease),background-color .25s var(--ease),opacity .25s var(--ease),transform .25s var(--ease)
}

.utility-nav a:hover,.primary-nav a:hover {
    color: #ffe5d7;
    text-decoration: none
}

.primary-nav-links>a:hover,.nav-trigger>a:hover {
    transform: translateY(-0.02rem)
}

.footer-services a:hover,.footer-bottom a:hover {
    opacity: .8;
    text-decoration: none
}

.media-article span {
    transition: color .25s var(--ease)
}

.media-article:hover span {
    color: var(--red)
}

/* Spacious dropdowns remain in the navigation's Grid flow. */
.nav-submenu {
    justify-self: center;
    width: max-content;
    /* margin-top: clamp(0.12rem,1vw,0.18rem); */
    padding: 0.08rem 0;
    border: 0.01rem solid rgba(255,255,255,.2);
    border-top: 0.03rem solid #d9a6a0;
    border-radius: 0.04rem;
    background: rgba(13,46,106,.96);
    box-shadow: 0 0.15rem 0.3rem rgba(3,20,57,.23);
    position: absolute;
    top: 100%;
    min-width: 1.8rem;
}

.nav-trigger.is-open {
    z-index: 5
}

.nav-submenu a {
    min-height: 0.46rem;
    padding: 0.12rem 0.2rem;
    font-size: 0.16rem;
    line-height: 1.55;
    transition: background-color .22s,color .22s,transform .22s;
    box-sizing: border-box;
    text-align: center;
}

.nav-submenu a+a {
    border-top: 0.01rem solid rgba(255,255,255,.11)
}

.nav-submenu a:hover,.nav-submenu a:focus-visible {
    background: rgba(255,255,255,.12);
    color: #fff;
    /* transform: translateX(0.04rem); */
}

/* The news item gets a soft bottom shadow while its text stays interactive. */
.news-feature {
    /* box-shadow: 0 0.15rem 0.22rem -0.16rem rgba(25,55,103,.32); */
}

.story-copy strong,.story-copy time {
    transition: color .25s var(--ease),transform .25s var(--ease)
}

.feature-story:hover .story-copy strong,.feature-story:focus-visible .story-copy strong {
    color: var(--red);
    transform: translateX(0.03rem)
}

.feature-story:hover .story-copy time,.feature-story:focus-visible .story-copy time {
    color: #8e210c
}

/* Thumbnail selection and navigation state. */
.gallery-thumbs .swiper-slide {
    display: grid;
    border-radius: 0.06rem;
    opacity: .74;
    transition: opacity .25s var(--ease),transform .25s var(--ease)
}

.gallery-thumbs .swiper-slide img,.gallery-thumbs .swiper-slide::after {
    grid-area: 1/1
}

.gallery-thumbs .swiper-slide::after {
    content: "";
    border: 0.02rem solid transparent;
    border-radius: 0.06rem;
    box-shadow: inset 0 0 0 0 rgba(255,255,255,0);
    pointer-events: none;
    z-index: 1;
    transition: border-color .25s,box-shadow .25s
}

.gallery-thumbs .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
    outline: 0
}

.gallery-thumbs .swiper-slide.swiper-slide-thumb-active::after {
    border-color: rgba(169,38,20,.78);
    box-shadow: inset 0 0 0 0.02rem rgba(255,255,255,.8)
}

.gallery-thumbs .swiper-slide:hover {
    opacity: 1;
    transform: translateY(-0.02rem)
}

.gallery-photos-nav button,.news-arrows button {
    transition: color .25s,background-color .25s,opacity .25s
}

.gallery-photos-nav button:not(.swiper-button-disabled):hover,.news-arrows button:not(.swiper-button-disabled):hover {
    background: rgba(25,65,128,.7)
}

.gallery-photos-nav button.swiper-button-disabled,.news-arrows button.swiper-button-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
    background: rgba(0,0,0,.12)
}

.video-tile span,.video-tile b {
    z-index: 1
}

.video-tile span {
    transition: color .25s,background-color .25s
}

.video-tile:hover span {
    color: #fff
}

.video-tile b {
    transition: transform .55s var(--ease),background-color .3s,border-color .3s
}

.video-tile:hover b,.video-tile:focus-visible b {
    transform: rotate(360deg) scale(1.08);
    background: rgba(172,26,2,.82);
    border-color: #fff
}

/* Portrait orbit and a stable three-line biography. */
.people-content {
    grid-template-columns: minmax(0,36.5%) minmax(0,1fr);
    gap: clamp(0.25rem,3vw,0.6rem)
}

.people-portrait-visual {
    display: grid;
    place-items: center;
    width: min(100%,5.6rem);
    aspect-ratio: 1
}

.people-portrait-visual>* {
    grid-area: 1/1
}

.people-orbit {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    border: 0.01rem dashed #91b7d5;
    border-radius: 50%;
    pointer-events: none;
    animation: people-orbit 22s linear infinite
}

.people-orbit::after {
    content: "";
    justify-self: end;
    align-self: center;
    width: 0.11rem;
    height: 0.11rem;
    border: 0.02rem solid #fff;
    border-radius: 50%;
    background: #2f699d;
    box-shadow: 0 0 0 0.01rem #71a6ce;
    transform: translateX(50%)
}

.people-portrait-visual .people-swiper {
    width: calc(100% - clamp(0.3rem,2.6vw,0.5rem));
    aspect-ratio: 1;
    z-index: 1
}

.people-detail p {
    height: 6.45em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden
}

@keyframes people-orbit {
    to {
        transform: rotate(360deg)
    }
}

/* Scale each large media block with the viewport while preserving the 19.2rem design. */
/* Topic cards now interpolate between matching polygon shapes. */
.topic-card {
    height: auto;
    aspect-ratio: 301/430;
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    transition: clip-path .55s var(--ease)
}

.topic-card.topic-center {
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%)
}

.topic-card span {
    z-index: 1;
    margin: clamp(0.4rem,2.9vw,0.2rem) clamp(0.18rem,1.3vw,0.25rem);
    max-height: calc(100% - 0.9rem);
    font-size: 0.2rem;
    font-weight: bold;
}

.footer-select-menu {
    border: 0
}

/* Navigation and utility controls. Closed menus remain in the Grid flow but take no space. */
.utility-nav {
    min-height: 0.36rem;
    align-items: center
}

.utility-nav>a:not(.language) {
    display: inline-flex;
    align-items: center;
    min-height: 0.36rem;
    line-height: 1.2
}

.nav-submenu {
    max-height: 0;
    margin-top: 0 ! important;
    padding-block:0;
    border-width: 0;
    box-shadow: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* transform: translateY(-0.12rem); */
    transition: max-height .32s var(--ease),margin-top .32s var(--ease),padding .32s var(--ease),opacity .25s var(--ease),transform .32s var(--ease),visibility .32s;
    position: absolute;
}

.nav-trigger.is-open .nav-submenu {
    max-height: 24rem;
    margin-top: clamp(0.12rem,1vw,0.18rem);
    padding-block:0.08rem;border-width: 0.01rem;
    border-top-width: 0.03rem;
    box-shadow: 0 0.15rem 0.3rem rgba(3,20,57,.23);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0)
}

/* Native modal keeps the search field centered without positioning page content. */
body.search-open {
    overflow: hidden
}

.search-overlay:not([open]) {
    display: none
}

.search-overlay[open] {
    display: grid;
    grid-template-rows: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    justify-items: center;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: auto;
    padding: clamp(0.24rem,4vw,0.72rem);
    border: 0;
    background: rgba(8,31,73,.96);
    color: #fff
}
.search-overlay[open]>div{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    max-width: none;
    max-height: none;
    margin: auto;
    padding: clamp(0.24rem, 4vw, 0.72rem);
    border: 0;
    color: #fff;
}
.search-overlay::backdrop {
    background: rgba(4,18,45,.6)
}

.search-close {
    grid-row: 1;
    align-self: start;
    justify-self: end;
    border: 0;
    background: none;
    color: #fff;
    font-size: clamp(0.36rem,3vw,0.52rem);
    line-height: 1;
    transition: transform .25s,color .25s
}

.search-close:hover,.search-close:focus-visible {
    color: #ffe5d7;
    transform: rotate(90deg)
}

.search-overlay .search-form {
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: stretch;
    gap: 0.16rem;
    width: min(7.6rem,100%);
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0
}

.search-form label {
    grid-column: 1/-1;
    margin-bottom: clamp(0.12rem,2vw,0.3rem);
    font-size: clamp(0.24rem,3vw,0.4rem);
    text-align: center;
    letter-spacing: .12em
}

.search-form input {
    min-width: 0;
    padding: 0.16rem 0.2rem;
    border: 0.01rem solid rgba(255,255,255,.7);
    border-radius: 0.03rem;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 0.18rem;
    outline-offset: 0.03rem
}

.search-form input::placeholder {
    color: rgba(255,255,255,.65)
}

.search-form button {
    min-width: 1.1rem;
    border-radius: 0.03rem;
    background: var(--red);
    transition: background .25s,transform .25s
}

.search-form button:hover,.search-form button:focus-visible {
    background: #cf3215;
    transform: translateY(-0.02rem)
}

.search-form .search-message {
    grid-column: 1/-1;
    min-height: 1.5em;
    text-align: center;
    color: rgba(255,255,255,.8)
}

/* Tight notice dates, linked academic cards, and equal gallery columns. */
.notice-date {
    align-content: start;
    grid-template-rows: max-content max-content;
    row-gap: 0.02rem
}

.academic-item .academic-card {
    text-decoration: none
}

.gallery-grid,.gallery-photos,.gallery-main,.video-grid,.video-tile {
    min-width: 0;
    min-height: 0
}

.video-tile img {
    min-width: 0;
    min-height: 0
}

.gallery-thumbs .swiper-slide {
    grid-template: minmax(0,1fr)/minmax(0,1fr)
}

.gallery-thumbs .swiper-slide img {
    min-width: 0;
    min-height: 0;
    z-index: 0
}

.gallery-thumbs .swiper-slide::after {
    width: auto;
    height: auto;
    margin: 0.03rem;
    border: 0;
    box-shadow: none;
    z-index: 2
}

.gallery-thumbs .swiper-slide.swiper-slide-thumb-active::after {
    box-shadow: inset 0 0 0 0.02rem #fff,inset 0 0 0 0.05rem rgba(169,38,20,.88)
}

/* Two distinct, counter-rotating portrait orbits. */
.people-orbit--dashed {
    width: calc(100% - 0.18rem);
    border-color: #91b7d5;
    animation-duration: 24s
}

.people-orbit--dashed::after {
    width: 0.07rem;
    height: 0.07rem;
    border: 0.02rem solid #fff;
    background: #2f699d;
    box-shadow: 0 0 0 0.01rem #71a6ce
}

.people-orbit--solid {
    width: 100%;
    border: 0.01rem solid rgba(91,147,192,.72);
    animation: people-orbit 32s linear infinite reverse
}

.people-orbit--solid::after {
    width: 0.08rem;
    height: 0.08rem;
    border: 0;
    background: #5b94c1;
    box-shadow: 0 0 0 0.02rem #fff
}

/* The gate is a non-interactive background surface beside the culture cards. */
.culture-gate {
    width: 6.28rem;
    height: 3.05rem;
    margin-left: calc(-1 * clamp(0rem,14.6vw,2.8rem));
    background: url('../images/culture_gate.png') right bottom/contain no-repeat;
    position: absolute;
    left: 0;
    top: 1.9rem;
    z-index: 1;
}

/* Media captions and footer links stay legible and within the shared container. */
.convergence-card span {
    padding-bottom: clamp(0.3rem,2.4vw,0.46rem);
    transition: color .3s var(--ease),padding-bottom .3s var(--ease),text-shadow .3s var(--ease)
}

.convergence-card::after {
    content: "";
    grid-area: 1/1;
    align-self: end;
    justify-self: start;
    width: 0.4rem;
    height: 0.04rem;
    margin-left: 0.16rem;
    background: #ed6f98;
    z-index: 2;
    transition: width .3s var(--ease)
}


.convergence-card b {
    transition: transform .3s var(--ease),background-color .3s var(--ease)
}
.convergence-card .play{
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    top: 50%;
    left: 50%;
    margin-top: -0.4rem;
    margin-left: -0.4rem;
}
.section-head>.r {
    display: flex;
    gap: 0.7rem;
}
.convergence-card:hover span,.convergence-card:focus-visible span {
    padding-bottom: 0.3rem;
    text-shadow: 0 0.02rem 0.08rem rgba(0,0,0,.5)
}

.convergence-card:hover::after,.convergence-card:focus-visible::after {
    width: 0.56rem
}

.convergence-card:hover b,.convergence-card:focus-visible b {
    transform: translateY(-0.03rem) scale(1.08)
}

.footer-links>.footer-selects {
    width: min(100%,11.8rem);
    min-width: 0
}

.footer-links>.footer-socials {
    min-width: 0
}

.footer-social-qr {
    justify-self: center
}

/* Follow-up: evenly space the actual navigation labels and ease the modal entrance. */
.search-overlay[open] {
    opacity: 0;
    transition: opacity .32s var(--ease)
}

.search-overlay[open].is-visible {
    opacity: 1
}

.search-overlay::backdrop {
    background: rgba(4,18,45,0);
    transition: background-color .32s var(--ease)
}

.search-overlay.is-visible::backdrop {
    background: rgba(4,18,45,.6)
}

.search-overlay .search-form {
    opacity: 0;
    transform: translateY(0.22rem) scale(.985);
    transition: opacity .34s var(--ease),transform .38s var(--ease)
}

.search-overlay.is-visible .search-form {
    opacity: 1;
    transform: none
}

.search-overlay .search-close {
    opacity: 0;
    transform: translateY(-0.08rem);
    transition: opacity .3s var(--ease),transform .3s var(--ease),color .25s
}

.search-overlay.is-visible .search-close {
    opacity: 1;
    transform: none
}

.search-overlay.is-visible .search-close:hover,.search-overlay.is-visible .search-close:focus-visible {
    transform: rotate(90deg)
}

/* The active thumbnail has one complete border flush with its outer edge. */
.gallery-thumbs .swiper-slide {
    border: 0.03rem solid transparent;
    border-radius: 0;
    transition: border-color .25s var(--ease),opacity .25s var(--ease),filter .25s var(--ease)
}

.gallery-thumbs .swiper-slide.swiper-slide-thumb-active {
    border-color: var(--red);
    outline: 0
}

.gallery-thumbs .swiper-slide::after {
    content: none
}

.gallery-thumbs .swiper-slide:hover {
    transform: none;
    opacity: 1;
    filter: brightness(1.06)
}

/* Only the two orbit tracks remain outside the portrait. */
.people-portrait-visual .people-swiper {
    border: 0;
    box-shadow: none
}

.people-orbit--solid {
    border-color: rgba(137,181,214,.5)
}

.people-orbit--solid::after {
    justify-self: center;
    align-self: start;
    transform: translateY(-50%)
}

.people-thumbs .swiper-slide img {
    transition: filter .25s var(--ease);
}

.people-thumbs .swiper-slide:hover img,.people-thumbs .swiper-slide:focus-visible img {
    transform: none;
    filter: brightness(1.08)
}

.people-thumbs .swiper-slide:hover span,.people-thumbs .swiper-slide:focus-visible span {
    color: var(--red)
}

/* Keep every media tile and its caption inside its assigned grid track. */
.convergence-column {
    grid-template-rows: repeat(2,minmax(0,1fr))
}

.convergence-column:has(.tall) {
    grid-template-rows: minmax(0,1fr)
}

.right-mosaic {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(2,minmax(0,1fr))
}

.convergence-grid,.convergence-column,.convergence-card,.convergence-card img {
    min-width: 0;
    min-height: 0
}

.convergence-card {
    grid-template-rows: minmax(0,1fr)
}

.convergence-card img {
    z-index: 0
}

.convergence-card span {
    color: #fff;
    z-index: 3;
    padding-bottom: 0.25rem;
    text-shadow: 0 0.01rem 0.04rem rgba(0,0,0,.75)
}

.convergence-card::after {
    margin: 0 0 0.02rem 0.16rem;
    z-index: 4
}
.convergence-card.weixin::after{
    background: #2CCC46;
}
.convergence-card.weibo::after{background:#FF0035}
.convergence-card.xhs::after{
    background:#FF0035
}
.convergence-card.douyin::after{background:#EDA150}
.convergence-card.sph::after{background:#EDA150}
.convergence-card.bilibili::after{}
.convergence-card b {
    z-index: 4;
}
.convergence-card b.weixin {
    background-color: #2CCC46;
    background-image: url(../images/s-weixin.svg);
}
.convergence-card b.weibo {
    background-color: #D4382A;
    background-image: url(../images/s-weibo.svg);
}
.convergence-card b.xhs{
    background-color: #FF0035;
    background-image: url(../images/s-xhs.svg);
    background-size: auto 46%;
}
.convergence-card b.bilibili {
    background-color: #FB7299;
    background-image: url(../images/s-bilibili.svg);
}
.convergence-card b.douyin {
    background-color: #333;
    background-image: url(../images/s-douyin.svg);
}
.convergence-card b.sph {
    background-color: #EDA150;
    background-image: url(../images/s-sph.svg);
    background-repeat: no-repeat;
    background-position: center center;
}
.convergence-card:hover span,.convergence-card:focus-visible span {
    z-index: 4
}
.convergence-card:hover span,.convergence-card:focus-visible span {
    /* padding-bottom: clamp(0.46rem,3.3vw,0.62rem); */
}

/* Contact details, common links and social icons share the same footer columns. */
/* Keep the utility links, search/language controls and all ten nav items as peers. */
.header-right {
    grid-template-columns: minmax(0,1fr) auto auto;
    column-gap: 0.12rem;
    row-gap: 0.1rem;
}

.utility-nav {
    grid-column: 1;
    min-width: 0
}

.header-search-wrap,.header-language-wrap {
    display: grid;
    place-items: center;
    min-height: 0.36rem
}

.header-search-wrap {
    grid-column: 2
}

.header-language-wrap {
    grid-column: 3
}

.header-search-wrap .search-toggle {
    display: grid;
    place-items: center;
    width: 0.36rem;
    height: 0.36rem;
    padding: 0;
    line-height: 1
}

.header-search-wrap .search-toggle svg {
    display: block
}

.header-language-wrap .language {
    display: grid;
    place-items: center;
    min-width: 0.26rem;
    height: 0.24rem;
    padding: 0;
    line-height: 1;
    border-radius: 0.04rem;
}

.primary-nav {
    grid-column: 1/-1
}

.nav-home {
    display: grid;
    align-content: start;
    min-width: 0
}

.nav-home>a {
    display: block;
    padding: 0.04rem 0.06rem
}

.nav-home>a:hover {
    transform: translateY(-0.02rem)
}

/* Match the design's soft shadow, full thumbnail selection and portrait rings. */
.news-feature {
    box-shadow: 0 0.03rem 0.2rem rgba(25,55,103,.1);
}

.gallery-thumbs .swiper-slide {
    display: grid;
    border: 0;
    border-radius: 0
}

.gallery-thumbs .swiper-slide.swiper-slide-thumb-active {
    border: 0
}

.gallery-thumbs .swiper-slide::after {
    content: "";
    width: auto;
    height: auto;
    margin: 0;
    border: 0.06rem solid transparent;
    border-radius: 0;
    box-shadow: none;
    z-index: 2
}

.gallery-thumbs .swiper-slide.swiper-slide-thumb-active::after {
    border-color: var(--red);
    box-shadow: none
}

.people-portrait-visual::before {
    content: "";
    grid-area: 1/1;
    width: calc(100% - clamp(0.12rem,1.4vw,0.26rem));
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0.03rem 0.18rem rgba(77,126,165,.08)
}

.people-orbit {
    z-index: 1
}

.people-orbit--dashed {
    border: 0.02rem dashed rgba(91,147,192,.72)
}

.people-portrait-visual .people-swiper {
    z-index: 2
}

/* The common links and social accounts are siblings in the footer grid. */
.footer-lower {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: end;
    column-gap: clamp(0.24rem,3vw,0.6rem);
    min-width: 0
}


.footer-links>.footer-selects {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    min-width: 0;
    width: 100%
}

.footer-socials {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 0.08rem;
    min-width: 0
}

.footer-info h2 {
    /* border-bottom: 0; */
}

/* The more icon is a small dot inside a light ring; hover moves only the icon. */
.more-link {
    gap: 0.1rem;
    transition: color .28s var(--ease),opacity .28s var(--ease),transform .28s var(--ease)
}

.more-link .more-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 0.17rem;
    height: 0.17rem;
    padding: 0;
    border: 0.01rem solid rgba(172,26,2,.38);
    border-radius: 50%;
    font-size: 0;
    transition: transform .32s var(--ease),border-color .32s var(--ease)
}

.more-link .more-icon::before {
    content: "";
    width: 0.07rem;
    height: 0.07rem;
    border-radius: 50%;
    background: currentColor
}

.more-link.light .more-icon {
    border-color: rgba(255,255,255,.5)
}

.more-link:hover,.more-link:focus-visible {
    gap: 0.1rem;
    color: #cc3b20;
    transform: translateY(-0.01rem)
}

.more-link.light:hover,.more-link.light:focus-visible {
    color: #fff;
    opacity: .78
}

.more-link:hover .more-icon,.more-link:focus-visible .more-icon {
    border-color: currentColor;
    transform: translateX(0.03rem) scale(1.08)
}

/* The last navigation label reaches the same right edge as EN. */
/* English labels sit above the adjacent Chinese title without overlap. */
.section-title:not(.vertical-title) {
    align-items: flex-start;
}

.section-title:not(.vertical-title) .title-side {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: clamp(0.02rem,.25vw,0.05rem);
    line-height: 1
}

.section-title:not(.vertical-title) small {
    margin: 0;
    line-height: 1;
    white-space: nowrap
}

.news-tab {
    padding: 0;
    border: 0;
    background: none;
    color: var(--blue);
    text-align: left;
    cursor: pointer;
    transition: 0.6s;
}
.news-tab:before{
    content:"";
    width: 0.82rem;
    height: 0.82rem;
    border-radius: 50%;
    background-image: radial-gradient(
    circle at 42.3% 23.1%,
    rgba(172, 26, 2, 0.302) 0%,
    rgba(172, 26, 2, 0) 47.2%
  );
    opacity: 0.62;
    position: absolute;
    left: -0.15rem;
    top: -0.22rem;
    opacity: 0;
    transition: 0.6s;
}
.news-tab[aria-selected="true"],.news-tab:hover,.news-tab:focus-visible {
    opacity: 1
}

.news-tab:hover {
    transform: translateY(-0.02rem)
}
.news-tab[aria-selected="true"]:before{
    opacity: 0.62;
}
/* The 0.18rem More icon follows the two supplied radial gradients. */
.more-link .more-icon {
    width: 0.18rem;
    height: 0.18rem;
    border: 0;
    background: radial-gradient(50.00% 106.51% at 100% 50%,rgba(189,26,33,0) 0%,rgba(189,26,33,.2) 100%)
}

.more-link .more-icon::before {
    width: 0.07rem;
    height: 0.07rem;
    background: #bd1a21
}

.more-link.light .more-icon {
    border: 0;
    background: radial-gradient(50.00% 106.51% at 100% 50%,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 100%)
}

.more-link.light .more-icon::before {
    background: #fff
}

.more-link:hover .more-icon,.more-link:focus-visible .more-icon {
    border-color: transparent;
    transform: translateX(0.03rem) scale(1.06)
}

/* A wider white disc frames both rotating tracks. Desktop thumbs use one image-width slide and equal measured gaps. */
.people-portrait-visual::before {
    width: min(calc(100% + clamp(0.24rem,2.5vw,0.48rem)),calc(100vw - 0.32rem));
    pointer-events: none
}

/* QR overlays do not set the width of the social icon grid. */
.footer-lower {
    width: 100%;
    max-width: 100%;
    min-width: 0
}

.footer-socials {
    width: 1.68rem;
    max-width: 100%;
    min-width: 0;
    justify-self: end
}

.footer-social-item {
    flex: 0 0 0.36rem;
    width: 0.36rem;
    min-width: 0;
    grid-template-columns: 0.36rem
}

/* Category content enters gently while inactive panels stay out of the layout. */
.news-grid[hidden],.academic-content[hidden],.people-content[hidden] {
    display: none
}

.tab-panel-enter {
    animation: tab-panel-enter .35s var(--ease) both
}

@keyframes tab-panel-enter {
    from {
        opacity: 0;
        transform: translateY(0.12rem)
    }

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

/* Notice pagination follows three complete groups of announcements. */
.notice-page {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: clamp(0.15rem,1.4vw,0.26rem);
    height: auto
}

.notice-page .notice-card {
    min-width: 0;
    width: auto;
}

.notice-pagination {
    position: static;
    width: max-content;
    min-height: 0.12rem;
    align-items: center;
    margin: 0.2rem auto 0;
}

/* Match the larger, leftward portrait circle while keeping the detail column aligned. */
/* Touch layouts show every academic image without requiring hover. */
/* Portrait layers: outer solid track, white disc, dashed track, then photo. */
.people-orbit--solid {
    width: 100%;
    z-index: 0
}

.people-portrait-visual::before {
    width: calc(100% - clamp(0.28rem,3.125vw,0.4rem));
    z-index: 1;
    background: radial-gradient(50.00% 111.80% at 100% 50%,rgba(235,247,255,1) 0%,rgba(245,251,255,1) 93%,rgba(255,255,255,1) 100%)
}

.people-orbit--dashed {
    width: calc(100% - clamp(0.48rem,4.7vw,0.7rem));
    z-index: 2
}

.people-portrait-visual .people-swiper {
    width: 84%;
    z-index: 3
}

.people-arrows {
    margin-top: calc(-1 * clamp(0.28rem,4.5vw,0.85rem));
    z-index: 4
}

/* Keep the campus visible behind the centered search form. */
.search-overlay[open] {
    background: rgba(7,31,73,.4);
    -webkit-backdrop-filter: blur(0.08rem);
    backdrop-filter: blur(0.08rem)
}

.search-overlay.is-visible::backdrop {
    background: rgba(4,18,45,.12)
}

/* Preserve the notice dots while restoring the generous space before shortcuts. */
/* Keep the mobile collage paired, with the identity image filling its own row. */
/* Full-screen navigation uses the same source links as the header. */
body.site-menu-open {
    overflow: hidden
}

.site-menu:not([open]) {
    display: none
}

.site-menu[open] {
    display: block
}

.site-menu {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg,rgba(17,53,122,.94),rgba(24,65,139,.97));
    -webkit-backdrop-filter: blur(0.1rem);
    backdrop-filter: blur(0.1rem);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0)
}

.site-menu::backdrop {
    background: rgba(6,25,65,.34)
}

.site-menu.menu-css-fallback {
    transition: opacity .4s var(--ease),clip-path .58s var(--ease),visibility .4s
}

.site-menu.menu-css-fallback.is-visible {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0)
}

.site-menu-inner {
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    width: min(16.6rem,92vw);
    height: 100%;
    margin-inline:auto}

.site-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.24rem;
    padding: clamp(0.22rem,2.3vw,0.4rem) 0
}

.site-menu-brand {
    display: block;
    width: clamp(2.05rem,16vw,2.8rem)
}

.site-menu-brand img {
    width: 100%;
    height: auto
}

.site-menu-close {
    display: grid;
    place-items: center;
    flex: none;
    width: clamp(0.52rem,4.2vw,0.7rem);
    aspect-ratio: 1;
    border: 0.01rem solid rgba(255,255,255,.46);
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: clamp(0.31rem,2.5vw,0.42rem);
    font-weight: 300;
    line-height: 1;
    transition: background .25s,transform .35s var(--ease)
}

.site-menu-close:hover,.site-menu-close:focus-visible {
    background: rgba(255,255,255,.24);
    transform: rotate(90deg)
}

.site-menu-close span {
    margin-top: -.12em
}

.site-menu-nav {
    display: grid;
    /* grid-template-columns: repeat(10,minmax(0,1fr)); */
    align-content: start;
    gap: clamp(0.14rem,1.55vw,0.3rem);
    min-height: 0;
    padding: 0.3rem;
    overflow-y: auto;
    margin-right: -0.3rem;
    scrollbar-color: rgba(255,255,255,.35) transparent;
    scrollbar-width: thin;
    justify-content: space-between;
    grid-auto-flow: column;
}

.site-menu-column {
    min-width: 0
}
#site-menu-submenu-2,#site-menu-submenu-3,*[aria-controls="site-menu-submenu-2"],*[aria-controls="site-menu-submenu-3"]{
    display: none ! important;
}
.site-menu-column:first-child{display:none}
.site-menu-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.08rem
}

.site-menu-heading {
    display: block;
    color: #fff;
    font-size: clamp(0.17rem,1.05vw,0.21rem);
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap
}

.site-menu-heading:hover,.site-menu-heading:focus-visible {
    color: #ffe9d8;
    transform: translateY(-0.02rem)
}

.site-menu-submenu-inner {
    display: grid;
    align-content: start;
    gap: 0.15rem;
    padding-top: clamp(0.21rem,2vw,0.34rem);
    font-size: 0.12rem;
}

.site-menu-submenu a {
    display: block;
    color: rgba(255,255,255,.78);
    font-size: 0.14rem;
    line-height: 1.4;
    overflow-wrap: anywhere
}

.site-menu-submenu a:hover,.site-menu-submenu a:focus-visible {
    color: #fff;
    transform: translateX(0.04rem)
}

.site-menu-expand {
    display: none
}

.site-menu-bottom {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    column-gap: 0.12rem;
    min-height: 0.84rem;
    padding: 0.2rem 0;
    border-top: 0.01rem solid rgba(255,255,255,.3)
}

.site-menu-utilities {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.12rem clamp(0.16rem,2vw,0.34rem);
    min-width: 0;
    font-size: clamp(0.12rem,.8vw,0.15rem)
}

.site-menu-search-wrap,.site-menu-language-wrap {
    display: grid;
    place-items: center
}

.site-menu-search-wrap {
    margin-left: clamp(0.04rem,1vw,0.22rem)
}

.site-menu-search-wrap .site-menu-search {
    display: grid;
    place-items: center;
    width: 0.36rem;
    height: 0.36rem;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    line-height: 1;
    transition: color .25s,transform .25s
}

.site-menu-search-wrap .site-menu-search svg {
    display: block
}

.site-menu-language-wrap .language {
    display: grid;
    place-items: center;
    min-width: 0.36rem;
    height: 0.26rem;
    padding: 0;
    line-height: 1
}

.site-menu-utilities a,.site-menu-language-wrap .language {
    color: rgba(255,255,255,.82)
}

.site-menu-utilities a:hover,.site-menu-utilities a:focus-visible,.site-menu-search-wrap .site-menu-search:hover,.site-menu-search-wrap .site-menu-search:focus-visible,.site-menu-language-wrap .language:hover,.site-menu-language-wrap .language:focus-visible {
    color: #fff;
    transform: translateY(-0.02rem)
}
.article-body .wp_articlecontent img {
    margin: 0 auto;
}