.mainwarp {
    width: 100%
}

.mainwarp .bannerSwiper {
    width: 100%;
    position: relative
}

.mainwarp .bannerSwiper .swiper-slide {
    width: 100%;
    /* height: 9.1rem */
}

.mainwarp .bannerSwiper .swiper-slide .swiperPic {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.mainwarp .bannerSwiper .swiperBtn {
    width: 100%;
    height: .62rem;
    z-index: 200;
    position: absolute;
    top: 50%;
    display: flex;
    justify-content: center
}

.mainwarp .bannerSwiper .swiperBtn .btns {
    width: 15.26rem;
    display: flex;
    justify-content: space-between
}

@media(max-width: 1570px) {
    .mainwarp .bannerSwiper .swiperBtn .btns {
        padding: 0 .2rem
    }
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-prev {
    height: .62rem;
    width: .62rem;
    border-radius: 50%;
    background-color: #fff;
    position: inherit
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-prev .arrowLeft {
    display: block
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-prev .arrowLeftActive {
    display: none;
    transform: rotateY(180deg)
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-prev img {
    width: 100%
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-prev:hover .arrowLeft, .mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-prev:active .arrowLeft {
    display: none
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-prev:hover .arrowLeftActive, .mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-prev:active .arrowLeftActive {
    display: block
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-prev::after {
    content: ""
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-next {
    height: .62rem;
    width: .62rem;
    border-radius: 50%;
    background-color: #fff;
    position: inherit
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-next .arrowRight {
    display: block;
    transform: rotateY(180deg)
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-next .arrowRightActive {
    display: none
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-next img {
    width: 100%
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-next:hover .arrowRight, .mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-next:active .arrowRight {
    display: none
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-next:hover .arrowRightActive, .mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-next:active .arrowRightActive {
    display: block
}

.mainwarp .bannerSwiper .swiperBtn .btns .swiper-button-next::after {
    content: ""
}

.mainwarp .bannerSwiper .bannerFooter {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: .7rem;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center
}

.mainwarp .bannerSwiper .bannerFooter .divider {
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: .2
}

.mainwarp .bannerSwiper .bannerFooter .notice {
    width: 12.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.mainwarp .bannerSwiper .bannerFooter .notice .noticeTitle {
    font-size: .16rem;
    font-weight: bold;
    color: #fff;
    padding: 0 .03rem
}

.mainwarp .bannerSwiper .bannerFooter .notice .noticeContent {
    flex: 1;
    width: 0;
    padding: 0 .18rem
}

.mainwarp .bannerSwiper .bannerFooter .notice .noticeContent .noticeTxt {
    font-size: .16rem;
    color: #fff;
    margin-right: .7rem;
    text-overflow: ellipsis
}

.mainwarp .bannerSwiper .bannerFooter .notice .noticeContent .noticeTime {
    font-size: .14rem;
    font-family: "Roboto";
    color: rgba(255, 255, 255, .502)
}

.mainwarp .bannerSwiper .bannerFooter .notice .noticeMore {
    color: #fff;
    padding-right: 1.05rem;
    font-size: .16rem
}

.mainwarp .popularSection {
    width: 12.8rem;
    margin: 0 auto;
    padding-top: 1rem
}

.mainwarp .popularSection .popularTitle {
    text-align: center
}

.mainwarp .popularSection .popularTitle div {
    margin-top: .16rem
}

.mainwarp .popularSection .popularTitle div .zhTitle {
    display: block
}

.mainwarp .popularSection .popularTitle div .titleInfo {
    display: block;
    margin: 0;
    margin-top: .3rem
}

.mainwarp .popularSection .popularContent {
    margin-top: .4rem;
    width: 100%
}

.mainwarp .popularSection .popularContent .popularClass {
    margin-top: .4rem;
    position: relative
}

.mainwarp .popularSection .popularContent .popularClass .classIntro .imgBox img {
    width: 4.13rem;
    height: 2.12rem;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.mainwarp .popularSection .popularContent .popularClass .classIntro .classTags {
    margin: .2rem .28rem
}

.mainwarp .popularSection .popularContent .popularClass .classIntro .classInfo {
    margin: 0 .28rem
}

.mainwarp .popularSection .popularContent .popularClass .classIntro .classInfo .classTitle {
    font-size: .18rem;
    font-family: "SourceHanSansCN";
    color: #333;
    font-weight: bold;
    line-height: 1.2
}

.mainwarp .popularSection .popularContent .popularClass .classIntro .classInfo .classContent {
    font-size: .16rem;
    font-family: "SourceHanSansCN";
    color: #333;
    line-height: 1.2;
    margin-top: .11rem
}

.mainwarp .popularSection .popularContent .popularClass .classIntro .classInfo .more {
    margin-top: .29rem;
    font-size: .14rem;
    color: #2c71f0
}

.mainwarp .popularSection .popularContent .popularClass .classIntro .classInfo .more img {
    width: .14rem;
    top: 0rem
}

.mainwarp .popularSection .popularContent .popularClass .classSwiper {
    --swiper-pagination-color: #333333
}

.mainwarp .popularSection .popularContent .popularClass .classSwiper .swiper-pagination {
    position: initial;
    margin: .34rem 0;
    padding: 0;
    z-index: 200
}

.mainwarp .popularSection .popularContent .popularClass .swiper-button-prev {
    --swiper-navigation-size: 0.26rem;
    position: absolute;
    top: 1.13rem;
    left: -0.6rem;
    color: #333;
    font-weight: bold
}

.mainwarp .popularSection .popularContent .popularClass .swiper-button-next {
    --swiper-navigation-size: 0.26rem;
    position: absolute;
    top: 1.13rem;
    right: -0.6rem;
    color: #333;
    font-weight: bold
}

.mainwarp .teacherSection {
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    padding-top: 1rem;
    background-color: #f2f5f7
}

.mainwarp .teacherSection .teacherContent {
    width: 100%
}

.mainwarp .teacherSection .teacherContent .teacher {
    margin-top: .48rem
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper {
    padding-bottom: .47rem;
    --swiper-pagination-color: #009944
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro {
    width: 25%
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro .imgBox {
    width: 100%;
    overflow: hidden;
    position: relative
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro .imgBox img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro .imgBox .hoverInfo {
    opacity: 0;
    background-color: rgba(0, 0, 0, .67);
    z-index: 200;
    transition: opacity .3s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro .imgBox .hoverInfo .infoBox {
    display: flex;
    flex-direction: column;
    width: 100%
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro .imgBox .hoverInfo .infoBox .quotesIcon {
    width: .26rem;
    height: .26rem;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro .imgBox .hoverInfo .infoBox .upper {
    margin-left: .15rem;
    margin-right: auto
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro .imgBox .hoverInfo .infoBox .under {
    margin-left: auto;
    margin-right: .15rem
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro .imgBox .hoverInfo .infoBox .infoTxt {
    min-height: 1.5rem;
    font-size: .18rem;
    flex: 1;
    height: 0;
    color: #fff;
    line-height: .3rem;
    display: flex;
    justify-content: center;
    align-items: center
}

    .mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro .imgBox .hoverInfo .infoBox .infoTxt p {
        text-align: center;
        word-break: break-all;
        padding: 0 0.1rem;
    }

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro .imgBox:hover .hoverInfo {
    opacity: 1
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro .teacherName {
    margin-top: .2rem;
    margin-left: .3rem;
    font-size: .24rem;
    text-align:center;
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .teacherIntro .teacherInfo {
    margin-top: .11rem;
    margin-left: .3rem;
    font-size: .16rem;
    line-height: 1;
    color: #999
}

.mainwarp .teacherSection .teacherContent .teacher .teacherSwiper .swiper-pagination {
    bottom: 0;
    top: auto
}

.mainwarp .keySection {
    width: 12.8rem;
    margin: 0 auto;
    padding-top: 1.1rem
}

.mainwarp .keySection .keyContent {
    margin-top: .62rem;
    width: 100%
}

.mainwarp .keySection .keyContent .keyCourses {
    margin-top: .5rem;
    position: relative
}

.mainwarp .keySection .keyContent .keyCourses .courseIntro img {
    width: 3.05rem;
    height: 1.72rem;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.mainwarp .keySection .keyContent .keyCourses .courseIntro .courseTitle {
    margin-top: .2rem;
    font-size: .18rem;
    font-family: "SourceHanSansCN";
    color: #333;
    font-weight: bold;
    line-height: 1
}

.mainwarp .keySection .keyContent .keyCourses .courseIntro .courseContent {
    font-size: .14rem;
    font-family: "SourceHanSansCN";
    color: #333;
    line-height: 1.714;
    margin-top: .12rem
}

.mainwarp .keySection .keyContent .keyCourses .keySwiper {
    --swiper-pagination-color: #333333
}

.mainwarp .keySection .keyContent .keyCourses .keySwiper .swiper-pagination {
    position: initial;
    margin: .65rem 0;
    padding: 0;
    z-index: 200
}

.mainwarp .keySection .keyContent .keyCourses .swiper-button-prev {
    --swiper-navigation-size: 0.26rem;
    position: absolute;
    top: 1.13rem;
    left: -0.6rem;
    color: #333;
    font-weight: bold
}

.mainwarp .keySection .keyContent .keyCourses .swiper-button-next {
    --swiper-navigation-size: 0.26rem;
    position: absolute;
    top: 1.13rem;
    right: -0.6rem;
    color: #333;
    font-weight: bold
}

.mainwarp .introSection {
    width: 100%;
    max-width: 14.4rem;
    margin: 0 auto;
    min-height: 8.1rem;
    position: relative
}

.mainwarp .introSection .introBg {
    position: absolute;
    right: 0;
    z-index: -100
}

.mainwarp .introSection .introBg img {
    width: 11.68rem;
    height: 8.1rem;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.mainwarp .introSection .introContent {
    width: 12.8rem;
    margin: 0 auto;
    padding-top: .4rem;
    line-height: 1;
    height: 6.2rem;
    margin-top: 0.4rem;
}

.mainwarp .introSection .introContent .schoolIntro {
    width: 4.74rem;
    height: 100%;
    padding: .7rem 1rem .9rem 1rem;
    margin-left: -1rem;
    box-sizing: content-box;
    background-color: #f2f5f7
}

.mainwarp .introSection .introContent .schoolIntro .schoolTitle {
    width: 100%;
    line-height: 1
}

.mainwarp .introSection .introContent .schoolIntro .schoolMsg {
    display: flex;
    flex-direction: column
}

.mainwarp .introSection .introContent .schoolIntro .schoolMsg .msg1 {
    margin-top: .5rem;
    font-size: .24rem;
    color: #333;
    line-height: 1;
    font-weight: 500
}

    .mainwarp .introSection .introContent .schoolIntro .schoolMsg .msg2 {
        margin-top: .15rem;
        font-size: .14rem;
        font-family: "SourceHanSansCN";
        color: #666;
        line-height: 1.714;
        flex: 1;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8;
        text-overflow: ellipsis;
    }

.mainwarp .introSection .introContent .schoolIntro .schoolMsg .contactBtn {
    margin-top: .55rem;
    margin-bottom: 1rem;
    width: 1.5rem;
    height: .44rem;
    font-size: .16rem;
    font-weight: 400;
    border: .01rem solid #d2d2d3;
    border-radius: .22rem;
    background: rgba(0, 0, 0, 0);
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.mainwarp .introSection .introContent .schoolIntro .schoolMsg .introTags {
    display: flex;
    justify-content: space-between
}

.mainwarp .introSection .introContent .schoolIntro .schoolMsg .introTags .tag .number {
    font-size: .36rem;
    font-family: "Roboto";
    color: #333
}

.mainwarp .introSection .introContent .schoolIntro .schoolMsg .introTags .tag .label {
    font-size: .16rem;
    font-family: "SourceHanSansCN";
    color: #333;
    margin-left: .05rem;
    margin-top: .13rem
}

.mainwarp .newsSection {
    width: 100%;
    max-width: 19.2rem;
    margin: 0 auto;
    margin-top: .4rem;
    padding: .61rem 0;
    background-image: url("/asset/img/bgImg/bgImage1.png");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.mainwarp .newsSection .newsContent {
    width: 12.8rem;
    margin: .44rem auto 0;
    display: flex;
    justify-content: space-between
}

.mainwarp .newsSection .newsContent .mainNews {
    width: 6.3rem
}

.mainwarp .newsSection .newsContent .mainNews img {
    width: 6.3rem;
    height: 4.73rem;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.mainwarp .newsSection .newsContent .mainNews .mainItem {
    margin-top: .2rem
}

.mainwarp .newsSection .newsContent .listNews {
    width: 6.3rem;
    list-style: none
}

.mainwarp .newsSection .newsContent .newsItem {
    width: 4.5rem;
    margin: 0 auto
}

.mainwarp .newsSection .newsContent .newsItem .newsTitle {
    font-size: .18rem;
    font-family: "SourceHanSansCN";
    font-weight: 5rem;
    color: #333;
    line-height: 1.667
}

.mainwarp .newsSection .newsContent .newsItem .newsDate {
    font-size: .16rem;
    font-family: "Arial";
    color: #666;
    line-height: 1;
    margin-top: .15rem
}

.mainwarp .newsSection .newsContent .newsItem .divider {
    width: .4rem;
    height: .02rem;
    background-color: #e5e5e5;
    margin: .3rem 0
}

.mainwarp .cooperativeSection {
    width: 100%;
    background-image: url("/asset/img/bgImg/bgImage2.png");
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 1rem 0
}

.mainwarp .cooperativeSection .cooperativeTitle {
    text-align: center;
    color: #fff
}

.mainwarp .cooperativeSection .cooperativeTitle .titleInfo {
    display: block;
    margin-left: 0rem;
    margin-top: .3rem;
    line-height: 1
}

.mainwarp .cooperativeSection .cooperativeContent {
    width: 12.8rem;
    border-radius: .1rem;
    background-color: #fff;
    margin: .45rem auto 0
}

.mainwarp .cooperativeSection .cooperativeContent .institutions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: .14rem .2rem
}

.mainwarp .cooperativeSection .cooperativeContent .institutions img {
    margin: .14rem .2rem;
    display: block;
    width: 1.35rem;
    height: .5rem;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}