@charset "UTF-8";
.app-index-container {}
.app-index-container .index-head { text-align: center; }
.app-index-container .index-head .en-title { font-size: var(--app-fs-74); line-height: 1; color: #333; }
.app-index-container .index-head .title { font-size: var(--app-fs-42); color: #333; }
.app-index-container .index-head .sub-title { font-size: var(--app-fs-16); color: rgba(51, 51, 51, 0.65); }

.app-index-banner { height: 100vh; }
.app-index-banner .swiper-index-banner { height: 100% }
.app-index-banner .swiper-slide { position: relative; }
.app-index-banner .swiper-slide .image { width: 100%; height: 100%; object-fit: cover; }
.app-index-banner .swiper-slide .swiper-wrap { position: absolute; top: 50%; left: 0; padding: 0 var(--app-fs-140); color: #fff; transform: translateY(-50%); }
.app-index-banner .swiper-slide .swiper-wrap .en-title { font-size: var(--app-fs-136); line-height: 1; }
.app-index-banner .swiper-slide .swiper-wrap .en-subtitle { font-size: var(--app-fs-68); line-height: 1; }
.app-index-banner .swiper-slide .swiper-wrap .title { margin-top: 1em; font-size: var(--app-fs-28); }
.app-index-banner .swiper-slide .swiper-wrap .more { display: inline-flex; align-items: center; justify-content: space-between; padding-bottom: 1em; margin-top: 2em; border-bottom: 1px solid #fff; font-size: var(--app-fs-14); }
.app-index-banner .swiper-slide .swiper-wrap .more span { white-space: nowrap; }
.app-index-banner .swiper-slide .swiper-wrap .more .iconfont { margin-left: var(--app-fs-44); }
.app-index-banner .swiper-scrollbar { bottom: var(--app-fs-90); left: var(--app-fs-140); width: var(--app-fs-300); background: rgba(255, 255, 255, .3); }
.app-index-banner .swiper-scrollbar .swiper-scrollbar-drag { background: #fff; }
@media (hover:hover) {
    .app-index-banner .swiper-slide .swiper-wrap .more:hover { padding-right: .5em; padding-left: .5em; border-color: var(--app-color-main); color: var(--app-color-main); }
}

.index-change-now { padding: var(--app-fs-118) 0; background-size: cover; background-repeat: no-repeat; }
.index-change-now .wrapper { margin-top: var(--app-fs-130); }
.index-change-now .left { width: 33%; }
.index-change-now .left .head { margin-bottom: var(--app-fs-36); font-size: var(--app-fs-28); color: #333; }
.index-change-now .left .item + .item { margin-top: var(--app-fs-32); }
.index-change-now .left .item .icon-wrap { width: var(--app-fs-56); height: var(--app-fs-56); margin-right: var(--app-fs-32); border-radius: 50%; background: var(--app-color-main); }
.index-change-now .left .item .icon-wrap .icon { width: var(--app-fs-30); }
.index-change-now .left .item .text-wrap { flex: 1; }
.index-change-now .left .item .text-wrap .tit { font-size: var(--app-fs-20); font-weight: 700; color: #333; }
.index-change-now .left .item .text-wrap .txt { font-size: var(--app-fs-16); color: #333; }
.index-change-now .right { position: relative; width: 67%; margin-top: -150px; }
.index-change-now-swiper { position: relative; display: inline-block; }
.index-change-now-swiper .swiper-change-now { position: absolute; top: 14%; left: 14.8%; z-index: 20; width: calc(var(--app-basis-ratio) * 440px); height: calc(var(--app-basis-ratio) * 574px); padding: var(--app-fs-50) var(--app-fs-50) var(--app-fs-50) var(--app-fs-54); background: #fff; }
.index-change-now-swiper .swiper-change-now .swiper-slide { display: flex; justify-content: center; align-items: center; font-size: 0; }
.index-change-now-swiper .swiper-change-now .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.index-change-now-swiper .change-now-2 { position: absolute; top: 30%; left: 34%; z-index: 35; width: calc(var(--app-basis-ratio) * 406px); box-shadow: rgba(17, 17, 26, 0.1) 0 0 16px; }
.index-change-now-swiper .change-now-2 .sup { position: absolute; top: calc(var(--app-fs-28) * -1); right: var(--app-fs-24); z-index: 1; width: var(--app-fs-56); pointer-events: none; }
.index-change-now-swiper .swiper-change-now-2 { border-radius: 12px; pointer-events: none; }
.index-change-now-swiper .swiper-change-now-2 .swiper-slide { position: relative; display: flex; align-items: center; padding: var(--app-fs-22) var(--app-fs-84) var(--app-fs-22) var(--app-fs-22); background: #fff; }
.index-change-now-swiper .swiper-change-now-2 .swiper-slide .icon { width: var(--app-fs-94); object-fit: contain; }
.index-change-now-swiper .swiper-change-now-2 .swiper-slide .text { margin-left: 16px; font-size: var(--app-fs-24); color: #333; }
.index-change-now-swiper .bg { width: calc(var(--app-basis-ratio) * 651px); height: calc(var(--app-basis-ratio) * 772px); pointer-events: none; }
.index-change-now-swiper .frame { position: absolute; top: 14%; left: 14.4%; z-index: 30; width: calc(var(--app-basis-ratio) * 442px); height: calc(var(--app-basis-ratio) * 574px); pointer-events: none; }
.index-change-now-swiper .swiper-button { z-index: 40; width: var(--app-fs-58); height: var(--app-fs-58); border-radius: 50%; background: #cacaca; }
.index-change-now-swiper .swiper-button.swiper-button-prev { left: 0; transform: rotate(180deg); }
.index-change-now-swiper .swiper-button.swiper-button-next { right: 0; }
.index-change-now-swiper .swiper-button .iconfont { font-size: var(--app-fs-26); color: #f8f8f8; }
.index-trend-class { padding: var(--app-fs-124) 0; }
.index-trend-class .app-course-wrapper { margin-top: var(--app-fs-80); }
.index-trend-class .app-course-wrapper .app-course-list .name {  }

@media (max-width: 1024px) {
    .index-change-now .wrapper { flex-direction: column; }
    .index-change-now .left { width: 100%; }
    .index-change-now .right { width: 100%; margin-top: 50px; }
}

@media (max-width: 992px) {}

@media (max-width: 768px) {
    .app-index-banner .swiper-slide .swiper-wrap { width: 100%; padding: 0 var(--app-fs-32); }
    .app-index-banner .swiper-scrollbar { left: 50%; transform: translateX(-50%); }
    .index-change-now-swiper .change-now-2 { top: 26%; }
}

@media (max-width: 600px) {}

@media (max-width: 375px) {}