* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    width: 3.75rem;
    min-width: 3.75rem;
    background: #f7f9fd;
    color: #212121;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif
}

body {
    padding-bottom: .75rem
}

.page {
    width: 3.75rem;
    overflow: hidden;
    background: #f7f9fd
}

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

button {
    font: inherit;
    border: 0;
    background: none
}

.signals {
    font-size: .12rem;
    letter-spacing: .01rem
}

.header {
    height: .54rem;
    padding: 0 .16rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff
}

.header > .header-logo,
.header > .header-logo img {
    width: 1.325rem;
    height: .28rem;
}

.header > .header-logo {
    display: block
}

.header > .header-logo img {
    display: block;
    object-fit: contain
}

.header-actions {
    display: flex;
    align-items: center;
    gap: .12rem
}

.header-app-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: .27rem;
    padding: 0 .12rem;
    border: .01rem solid #1d479c;
    border-radius: .2rem;
    color: #1d479c;
    font-size: .14rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent
}

.menu {
    width: .24rem;
    height: .24rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.menu img {
    display: block;
    width: .24rem;
    height: .24rem;
    object-fit: contain
}

.hero {
    position: relative;
    width: 3.43rem;
    height: 1.35rem;
    margin: .16rem;
    border-radius: .12rem;
    overflow: hidden;
    box-shadow: 0 .02rem .1rem rgba(228, 230, 234, .35)
}

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

.hero .swiper-slide img {
    object-fit: cover
}

.hero-pagination.swiper-pagination {
    left: 0;
    right: 0;
    bottom: .09rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .03rem
}

.hero-pagination .swiper-pagination-bullet {
    width: .08rem;
    height: .03rem;
    margin: 0 !important;
    border-radius: .03rem;
    background: #fff;
    opacity: 1
}

.hero-pagination .swiper-pagination-bullet-active {
    width: .15rem;
    background: linear-gradient(90deg, #0068fa, #00a7ff)
}

.dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .09rem;
    display: flex;
    justify-content: center;
    gap: .03rem
}

.dots>* {
    display: block;
    width: .08rem;
    height: .03rem;
    border-radius: .03rem;
    background: #fff
}

.dots b {
    width: .15rem;
    background: linear-gradient(90deg, #0068fa, #00a7ff)
}

.news-card {
    position: relative;
    width: 3.43rem;
    height: 2.54rem;
    margin: .16rem;
    padding: 0;
    border-radius: .12rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 .02rem .2rem rgba(228, 230, 234, .35)
}

.news-card.blue {
    background: linear-gradient(180deg, #e6ecff 0, #fff 31%)
}

.news-card.orange {
    background: linear-gradient(180deg, rgba(240, 131, 0, .12) 0, #fff 31%)
}

.news-card header {
    height: .52rem;
    padding: .16rem .12rem .12rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.news-card h2 {
    display: flex;
    align-items: center;
    gap: .06rem;
    margin: 0;
    color: #1d479c;
    font-size: .16rem
}

.news-card h2 img {
    width: .24rem;
    height: .24rem;
    object-fit: contain
}

.news-card header a {
    font-size: .12rem;
    color: #1d479c
}

.news-card header span {
    font-size: .22rem;
    vertical-align: -.02rem
}

.news-card.orange h2,
.news-card.orange header a {
    color: #f08300
}

.news-card ul {
    list-style: none;
    margin: 0;
    padding: 0 0 .12rem
}

.news-card li {
    height: .38rem;
    padding: .08rem .12rem;
    display: flex;
    align-items: center;
    gap: .06rem;
    font-size: .16rem
}

.news-card li:before {
    content: "";
    width: .04rem;
    height: .04rem;
    border-radius: 50%;
    background: #1d479c;
    flex: none
}

.news-card li a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}


.news-card .hot-icon {
    display: block;
    width: .22rem;
    height: .22rem;
    object-fit: contain;
    flex: none
}

.news-card time {
    width: .35rem;
    text-align: right;
    color: #919293;
    font-size: .12rem;
    flex: none
}

.block {
    width: 3.75rem
}

.section-title {
    height: .56rem;
    padding: .16rem .16rem .12rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.section-title h2 {
    position: relative;
    margin: 0;
    padding-left: .16rem;
    color: #1d479c;
    font-size: .2rem;
    line-height: .28rem
}

.section-title h2:before {
    content: "";
    position: absolute;
    left: 0;
    top: .04rem;
    width: .04rem;
    height: .2rem;
    border-radius: .04rem;
    background: linear-gradient(#12356d, #1d479c)
}

.section-title a {
    color: #919293;
    font-size: .12rem
}

.panel {
    width: 3.43rem;
    margin: 0 .16rem .16rem;
    padding: .16rem;
    border-radius: .12rem;
    background: #fff;
    box-shadow: 0 .02rem .1rem rgba(228, 230, 234, .35)
}

.tabs {
    height: .31rem;
    display: flex;
    gap: .12rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch
}

.tabs-mask {
    position: relative
}

.tabs-mask:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: .12rem;
    height: .31rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9));
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s
}

.tabs-mask.has-more:after {
    opacity: 1
}

.tabs::-webkit-scrollbar {
    display: none
}

.tabs button {
    flex: none;
    height: .31rem;
    padding: .06rem .12rem;
    border-radius: .16rem;
    background: #f7f7f7;
    color: #6e6e6e;
    font-size: .14rem;
    white-space: nowrap
}

.tabs button.on {
    background: #e6ecff;
    color: #1d479c;
    font-weight: 600
}

.hscroll {
    display: flex;
    gap: .12rem;
    overflow-x: auto;
    scrollbar-width: none
}

.hscroll::-webkit-scrollbar {
    display: none
}

.course-list {
    margin-top: .16rem
}

.course-list article {
    flex: 0 0 1.28rem;
    height: 1.72rem;
    border: .01rem solid #f0f2f5;
    border-radius: .08rem;
    overflow: hidden
}

.course-list img {
    display: block;
    width: 1.28rem;
    height: .72rem;
    object-fit: cover
}

.course-list h3 {
    height: .51rem;
    margin: 0;
    padding: .1rem .12rem 0;
    overflow: hidden;
    font-size: .14rem;
    line-height: 1.38;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis
}

.course-list b {
    display: block;
    padding: .08rem .12rem;
    color: #ff5456;
    font-size: .18rem
}

.courses .panel {
    height: 2.53rem;
}

.materials .panel {
    height: 2.45rem
}

.file-list {
    margin-top: .16rem
}

.material-panel[hidden] {
    display: none
}

.file-list article {
    flex: 0 0 1.28rem;
    height: 1.69rem;
    padding: .16rem .12rem;
    border: .01rem solid #f0f2f5;
    border-radius: .08rem;
    overflow: hidden
}

.material-card-link {
    display: block;
    width: calc(100% + .24rem);
    height: calc(100% + .32rem);
    margin: -.16rem -.12rem;
    padding: .16rem .12rem;
    -webkit-tap-highlight-color: transparent
}

.material-card-link:active {
    background: #f7f9fd
}

.file-list img {
    display: block;
    width: .48rem;
    height: .48rem;
    margin-bottom: .14rem
}

.file-list h3 {
    height: .44rem;
    margin: 0 0 .06rem;
    overflow: hidden;
    font-size: .16rem;
    line-height: 1.38;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis
}

.file-list p {
    margin: 0;
    color: #919293;
    font-size: .14rem
}

.file-list p b {
    color: #1d479c;
    font-weight: 400
}

.book-list {
    width: 3.43rem;
    height: 3.54rem;
    margin: 0 .16rem .16rem;
    padding: .16rem;
    border-radius: .12rem;
    background: #fff;
    box-shadow: 0 .02rem .1rem rgba(228, 230, 234, .35)
}

.book-list article {
    height: 1.03rem;
    padding-bottom: .12rem;
    margin-bottom: .12rem;
    display: flex;
    border-bottom: .01rem solid #e4e6ea
}

.book-list article:last-child {
    margin: 0;
    border: 0
}

.books .book-list article>a>img {
    display: block;
    width: 1.55rem;
    height: .87rem !important;
    min-height: .87rem;
    max-height: .87rem;
    border-radius: .08rem;
    object-fit: cover;
    flex: none
}

.book-list article>.book-card-link {
    width: 100%;
    height: .87rem;
    display: flex;
    min-width: 0;
    -webkit-tap-highlight-color: transparent
}

.book-card-link>div {
    flex: 1;
    min-width: 0;
    padding: .04rem 0 0 .12rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.book-card-link:active,
.teacher-card-link:active {
    opacity: .82
}

.book-list h3 {
    margin: 0;
    overflow: hidden;
    font-size: .16rem;
    line-height: 1.38;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.book-list b {
    color: #ff5456;
    font-size: .16rem;
    font-weight: 500
}

.teacher-window {
    width: 3.51rem;
    height: 3.83rem;
    margin: 0 .12rem;
    padding: .32rem 0 .16rem;
    border-radius: .12rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 .02rem .2rem rgba(228, 230, 234, .35)
}

.teacher-row {
    display: flex;
    width: 100%;
    gap: 0;
}

.teacher-card {
    flex: 0 0 2.95rem;
    height: 3.35rem;
    border: .01rem solid #f0f2f5;
    border-radius: .08rem;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0;
    text-align: center
}

.teacher-card-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    -webkit-tap-highlight-color: transparent
}

.teacher-row .teacher-card {
    width: 2.95rem
}

.data-state {
    width: 100%;
    margin: .24rem 0;
    color: #919293;
    font-size: .14rem;
    text-align: center
}

.photo {
    position: relative;
    z-index: 1;
    width: 2.95rem;
    height: 1.66rem;
    background: #eef5ff;
    overflow: visible;
    border-radius: .08rem .08rem 0 0
}

.teacher-name {
    height: .54rem;
    padding-top: .14rem;
    display: flex;
    align-items: start;
    justify-content: center;
    gap: .12rem;
    flex: none
}

.teacher-name h3 {
    margin: 0;
    font-size: .18rem
}

.teacher-experience {
    position: relative;
    width: 1.32rem;
    height: .24rem;
    flex: none
}

.teacher-experience-ribbon {
    position: absolute;
    left: .1202rem;
    top: .03rem;
    width: 1.1998rem;
    height: .18rem
}

.teacher-experience-medal {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: .24rem;
    height: .24rem
}

.teacher-experience em {
    position: absolute;
    z-index: 1;
    left: .2501rem;
    top: .035rem;
    color: #fff;
    font-size: .12rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap
}

.teacher-card-link>i {
    display: inline-block;
    padding: .04rem .08rem;
    border-radius: .04rem;
    background: rgba(243, 152, 0, .12);
    color: #f08300;
    font-size: .12rem;
    font-style: normal
}

.teacher-card-link>p {
    height: .59rem;
    margin: .12rem;
    padding: 0;
    overflow: hidden;
    color: #4b5563;
    font-size: .14rem;
    line-height: 1.4;
    text-align: left;
    flex: none
}

.app-banner {
    position: relative;
    width: 3.51rem;
    height: 2.4rem;
    margin: .16rem .12rem;
    border-radius: .12rem;
    overflow: hidden;
    background: #1764de url('../images/app-banner.png') center/cover no-repeat;
    color: #fff
}

.app-phones {
    position: absolute;
    z-index: 1;
    left: 1.99rem;
    top: .1642rem;
    width: 1.43rem;
    height: 2.02rem;
    overflow: hidden;
    opacity: .35;
    pointer-events: none
}

.app-phones img {
    position: absolute;
    display: block;
    object-fit: contain;
    transform-origin: center
}

.app-phone-back {
    left: .633rem;
    top: .2982rem;
    width: .9221rem;
    height: 1.4577rem;
}

.app-phone-front {
    left: -.1413rem;
    top: .1465rem;
    width: 1.1853rem;
    height: 1.8739rem;
    z-index: 99;
}

.app-copy {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: .2rem;
    display: flex;
    flex-direction: column;
    gap: .3rem
}

.app-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .12rem
}

.app-icon {
    width: .32rem;
    height: .32rem;
    overflow: hidden;
    border-radius: .05rem
}

.app-logo {
    display: block;
    width: .32rem;
    height: .32rem;
    object-fit: contain
}

.app-heading h2 {
    margin: 0 0 .06rem;
    font-size: .2rem;
    line-height: 1.38
}

.app-heading p {
    margin: 0;
    font-size: .14rem;
    line-height: 1.38
}

.app-actions {
    display: flex;
    flex-direction: column;
    gap: .12rem
}

.app-actions ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none
}

.app-actions li {
    display: flex;
    align-items: center;
    gap: .06rem;
    font-size: .12rem;
    font-weight: 600;
    white-space: nowrap
}

.app-actions li img {
    width: .16rem;
    height: .16rem;
    flex: none
}

.app-downloads {
    display: flex;
    gap: .06rem
}

.app-downloads a {
    flex: 1 1 0;
    min-width: 0;
    height: .43rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .06rem;
    border: .005rem solid #fff;
    border-radius: .08rem;
    background: rgba(255, 255, 255, .25);
    -webkit-backdrop-filter: blur(.12rem);
    backdrop-filter: blur(.12rem);
    font-size: .14rem
}

.app-downloads a img {
    width: .2rem;
    height: .2rem;
    object-fit: contain
}

.about .section-title {
    padding-left: .12rem;
    padding-right: .12rem
}

.intro {
    margin: 0 .12rem .16rem;
    font-size: .14rem;
    line-height: 1.38
}

.campus-swiper {
    width: 3.75rem;
    padding: 0 .12rem;
    overflow: hidden
}

.campus-list {
    gap: 0
}

.campus-list article {
    flex: 0 0 3.01rem;
    height: 3.095rem;
    border-radius: .12rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 .02rem .2rem rgba(228, 230, 234, .35)
}

.campus-card-image {
    width: 3.01rem;
    height: 1.695rem;
    overflow: hidden
}

.campus-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.campus-card-body {
    height: 1.4rem;
    padding: .16rem .12rem;
    display: flex;
    flex-direction: column;
    gap: .16rem
}

.campus-card-copy {
    display: flex;
    flex-direction: column;
    gap: .06rem
}

.campus-list h3 {
    margin: 0;
    font-size: .16rem
}

.campus-list p {
    height: .4rem;
    margin: 0;
    overflow: hidden;
    color: #919293;
    font-size: .14rem;
    line-height: .2rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.campus-list a {
    height: .24rem;
    display: flex;
    align-items: center;
    gap: .06rem;
    color: #1d479c;
    font-size: .14rem;
    font-weight: 600;
    line-height: .2rem
}

.campus-list a img {
    width: .24rem;
    height: .24rem;
    flex: none;
    transform: rotate(180deg)
}

footer {
    height: .78rem;
    margin-top: .16rem;
    padding: .2rem .16rem;
    background: #fff;
    color: #919293;
    font-size: .12rem;
    line-height: .21rem;
    text-align: center
}

.bottom {
    position: fixed;
    z-index: 20;
    left: 0;
    bottom: 0;
    width: 3.75rem;
    height: .75rem;
    padding: .15rem .24rem .16rem;
    display: flex;
    gap: .12rem;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(.04rem);
    backdrop-filter: blur(.04rem);
    box-shadow: 0 -.02rem .12rem rgba(18, 53, 109, .08)
}

.bottom a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .28rem;
    color: #fff;
    font-size: .16rem;
    font-weight: 600
}

.bottom a:first-child {
    background: linear-gradient(100deg, #ff8a3d, #ff5f5f)
}

.bottom a:last-child {
    background: linear-gradient(100deg, #12356d, #1d479c)
}