.tf-content {
    background-color: #efefef;
    --padding-top: 142px;
    --padding-bottom: 112px;
    --padding-left: 242px;
    --padding-right: 242px;
}

@media (max-width: 767px) {
    .tf-content {
        padding-top: calc(var(--padding-top) * var(--extra-small-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--extra-small-ratio));
        padding-left: calc(var(--padding-left) * var(--extra-small-ratio) * .5);
        padding-right: calc(var(--padding-right) * var(--extra-small-ratio) * .5);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tf-content {
        padding-top: calc(var(--padding-top) * var(--small-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--small-ratio));
        padding-left: calc(var(--padding-left) * var(--small-ratio));
        padding-right: calc(var(--padding-right) * var(--small-ratio));
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-content {
        padding-top: calc(var(--padding-top) * var(--middle-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--middle-ratio));
        padding-left: calc(var(--padding-left) * var(--middle-ratio));
        padding-right: calc(var(--padding-right) * var(--middle-ratio));
    }
}

@media (min-width: 1201px) and (max-width: 1452px) {
    .tf-content {
        padding-top: calc(var(--padding-top) * var(--large-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--large-ratio));
        padding-left: calc(var(--padding-left) * var(--large-ratio));
        padding-right: calc(var(--padding-right) * var(--large-ratio));
    }
}

@media (min-width: 1453px) and (max-width: 1771px) {
    .tf-content {
        padding-top: calc(var(--padding-top) * var(--extra-large-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--extra-large-ratio));
        padding-left: calc(var(--padding-left) * var(--extra-large-ratio));
        padding-right: calc(var(--padding-right) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .tf-content {
        padding-top: calc(var(--padding-top) * var(--design-ratio));
        padding-bottom: calc(var(--padding-bottom) * var(--design-ratio));
        padding-left: calc(var(--padding-left) * var(--design-ratio));
        padding-right: calc(var(--padding-right) * var(--design-ratio));
    }
}

/* 听风业务 */
.tf-school-service {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tf-school-service>.title {
    font-family: 'Microsoft YaHei UI';
    font-weight: bold;
    --font-size: 57px;
    line-height: 1;
    text-align: center;
}

@media (max-width: 767px) {
    .tf-school-service>.title {
        font-size: calc(var(--font-size) * var(--extra-small-ratio));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tf-school-service>.title {
        font-size: calc(var(--font-size) * var(--small-ratio));
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-school-service>.title {
        font-size: calc(var(--font-size) * var(--middle-ratio));
    }
}

@media (min-width: 1201px) and (max-width: 1452px) {
    .tf-school-service>.title {
        font-size: calc(var(--font-size) * var(--large-ratio));
    }
}

@media (min-width: 1453px) and (max-width: 1771px) {
    .tf-school-service>.title {
        font-size: calc(var(--font-size) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .tf-school-service>.title {
        font-size: calc(var(--font-size) * var(--design-ratio));
    }
}

.tf-school-service>.tab-nav {
    --margin-top: 79px;
    width: 100%;
}

.tf-school-service>.tab-nav>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.tf-school-service>.tab-nav>ul>li {
    --width: 250px;
    --height: 84px;
    --border-radius: 8px;
    --margin-bottom: 24.5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.tf-school-service>.tab-nav>ul>li.active {
    background-color: #f8ec21;
    cursor: auto;
}

.tf-school-service>.tab-nav>ul>li .tab-item span {
    --font-size: 36px;
    font-family: 'Microsoft YaHei UI';
}

.tf-school-service>.icon_arrow_down {
    --margin-top: 39.5px;
    --margin-bottom: 27px;
    --width: 27px;
    --height: 21px;
}
.tf-school-service>.icon_arrow_down>img {
    width: 100%;
}

.tf-school-service>.service-content {
    width: 100%;
    --height: 937px;
    background-color: white;
    overflow-x: hidden;
    overflow-y: scroll;
}

.tf-school-service>.service-content>img {
    width: 100%;
}

@media (max-width: 767px) {
    .tf-school-service>.tab-nav {
        margin-top: calc(var(--margin-top) * var(--extra-small-ratio));
    }

    .tf-school-service>.tab-nav>ul>li {
        width: calc(var(--width) * var(--extra-small-ratio));
        height: calc(var(--height) * var(--extra-small-ratio));
        border-radius: calc(var(--border-radius) * var(--extra-small-ratio));
        margin-right: calc(var(--margin-right) * var(--extra-small-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--extra-small-ratio));
    }

    .tf-school-service>.tab-nav>ul>li .tab-item span {
        font-size: calc(var(--font-size) * var(--extra-small-ratio));
    }
    
    .tf-school-service>.icon_arrow_down {
        margin-top: calc(var(--margin-top) * var(--extra-small-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--extra-small-ratio));
        width: calc(var(--width) * var(--extra-small-ratio));
        height: calc(var(--height) * var(--extra-small-ratio));
    }
    
    .tf-school-service>.service-content {
        height: calc(var(--height) * var(--extra-small-ratio));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tf-school-service>.tab-nav {
        margin-top: calc(var(--margin-top) * var(--small-ratio));
    }

    .tf-school-service>.tab-nav>ul>li {
        width: calc(var(--width) * var(--small-ratio));
        height: calc(var(--height) * var(--small-ratio));
        border-radius: calc(var(--border-radius) * var(--small-ratio));
        margin-right: calc(var(--margin-right) * var(--small-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--small-ratio));
    }

    .tf-school-service>.tab-nav>ul>li .tab-item span {
        font-size: calc(var(--font-size) * var(--small-ratio));
    }
    
    .tf-school-service>.icon_arrow_down {
        margin-top: calc(var(--margin-top) * var(--small-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--small-ratio));
        width: calc(var(--width) * var(--small-ratio));
        height: calc(var(--height) * var(--small-ratio));
    }
    
    .tf-school-service>.service-content {
        height: calc(var(--height) * var(--small-ratio));
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-school-service>.tab-nav {
        margin-top: calc(var(--margin-top) * var(--middle-ratio));
    }

    .tf-school-service>.tab-nav>ul>li {
        width: calc(var(--width) * var(--middle-ratio));
        height: calc(var(--height) * var(--middle-ratio));
        border-radius: calc(var(--border-radius) * var(--middle-ratio));
        margin-right: calc(var(--margin-right) * var(--middle-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--middle-ratio));
    }

    .tf-school-service>.tab-nav>ul>li .tab-item span {
        font-size: calc(var(--font-size) * var(--middle-ratio));
    }
    
    .tf-school-service>.icon_arrow_down {
        margin-top: calc(var(--margin-top) * var(--middle-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--middle-ratio));
        width: calc(var(--width) * var(--middle-ratio));
        height: calc(var(--height) * var(--middle-ratio));
    }
    
    .tf-school-service>.service-content {
        height: calc(var(--height) * var(--middle-ratio));
    }
}

@media (min-width: 1201px) and (max-width: 1452px) {
    .tf-school-service>.tab-nav {
        margin-top: calc(var(--margin-top) * var(--large-ratio));
    }

    .tf-school-service>.tab-nav>ul>li {
        width: calc(var(--width) * var(--large-ratio));
        height: calc(var(--height) * var(--large-ratio));
        border-radius: calc(var(--border-radius) * var(--large-ratio));
        margin-right: calc(var(--margin-right) * var(--large-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--large-ratio));
    }

    .tf-school-service>.tab-nav>ul>li .tab-item span {
        font-size: calc(var(--font-size) * var(--large-ratio));
    }
    
    .tf-school-service>.icon_arrow_down {
        margin-top: calc(var(--margin-top) * var(--large-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--large-ratio));
        width: calc(var(--width) * var(--large-ratio));
        height: calc(var(--height) * var(--large-ratio));
    }
    
    .tf-school-service>.service-content {
        height: calc(var(--height) * var(--large-ratio));
    }
}

@media (min-width: 1453px) and (max-width: 1771px) {
    .tf-school-service>.tab-nav {
        margin-top: calc(var(--margin-top) * var(--extra-large-ratio));
    }

    .tf-school-service>.tab-nav>ul>li {
        width: calc(var(--width) * var(--extra-large-ratio));
        height: calc(var(--height) * var(--extra-large-ratio));
        border-radius: calc(var(--border-radius) * var(--extra-large-ratio));
        margin-right: calc(var(--margin-right) * var(--extra-large-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--extra-large-ratio));
    }

    .tf-school-service>.tab-nav>ul>li .tab-item span {
        font-size: calc(var(--font-size) * var(--extra-large-ratio));
    }
    
    .tf-school-service>.icon_arrow_down {
        margin-top: calc(var(--margin-top) * var(--extra-large-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--extra-large-ratio));
        width: calc(var(--width) * var(--extra-large-ratio));
        height: calc(var(--height) * var(--extra-large-ratio));
    }
    
    .tf-school-service>.service-content {
        height: calc(var(--height) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .tf-school-service>.tab-nav {
        margin-top: calc(var(--margin-top) * var(--design-ratio));
    }

    .tf-school-service>.tab-nav>ul>li {
        width: calc(var(--width) * var(--design-ratio));
        height: calc(var(--height) * var(--design-ratio));
        border-radius: calc(var(--border-radius) * var(--design-ratio));
        margin-right: calc(var(--margin-right) * var(--design-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--design-ratio));
    }

    .tf-school-service>.tab-nav>ul>li .tab-item span {
        font-size: calc(var(--font-size) * var(--design-ratio));
    }
    
    .tf-school-service>.icon_arrow_down {
        margin-top: calc(var(--margin-top) * var(--design-ratio));
        margin-bottom: calc(var(--margin-bottom) * var(--design-ratio));
        width: calc(var(--width) * var(--design-ratio));
        height: calc(var(--height) * var(--design-ratio));
    }
    
    .tf-school-service>.service-content {
        height: calc(var(--height) * var(--design-ratio));
    }
}

/* 在线课堂 */
.tf-school-classroom {
    --margin-top: 127px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tf-school-classroom>.title>span {
    font-family: 'Microsoft YaHei UI';
    font-weight: bold;
    --font-size: 57px;
    line-height: 1;
}

.tf-school-classroom>.desc {
    width: 100%;
    --margin-top: 61px;
    text-align: left;
}

.tf-school-classroom>.desc>span {
    font-family: 'Microsoft YaHei UI';
    font-weight: lighter;
    --font-size: 35px;
    line-height: 1.5;
}

.tf-school-classroom>.list {
    width: 100%;
    --margin-top: 90px;
}

.tf-school-classroom>.list>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: auto !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.tf-school-classroom>.list>ul>li {
    --margin-bottom: 64px;
}

@media (max-width: 767px) {
    .tf-school-classroom {
        margin-top: calc(var(--margin-top) * var(--extra-small-ratio));
    }
    
    .tf-school-classroom>.title>span {
        font-size: calc(var(--font-size) * var(--extra-small-ratio));
    }
    
    .tf-school-classroom>.desc {
        margin-top: calc(var(--margin-top) * var(--extra-small-ratio));
    }
    
    .tf-school-classroom>.desc>span {
        font-size: calc(var(--font-size) * var(--extra-small-ratio));
    }
    
    .tf-school-classroom>.list {
        margin-top: calc(var(--margin-top) * var(--extra-small-ratio));
    }
    
    .tf-school-classroom>.list>ul>li {
        margin-bottom: calc(var(--margin-bottom) * var(--extra-small-ratio));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tf-school-classroom {
        margin-top: calc(var(--margin-top) * var(--small-ratio));
    }
    
    .tf-school-classroom>.title>span {
        font-size: calc(var(--font-size) * var(--small-ratio));
    }
    
    .tf-school-classroom>.desc {
        margin-top: calc(var(--margin-top) * var(--small-ratio));
    }
    
    .tf-school-classroom>.desc>span {
        font-size: calc(var(--font-size) * var(--small-ratio));
    }
    
    .tf-school-classroom>.list {
        margin-top: calc(var(--margin-top) * var(--small-ratio));
    }
    
    .tf-school-classroom>.list>ul>li {
        margin-bottom: calc(var(--margin-bottom) * var(--small-ratio));
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-school-classroom {
        margin-top: calc(var(--margin-top) * var(--middle-ratio));
    }
    
    .tf-school-classroom>.title>span {
        font-size: calc(var(--font-size) * var(--middle-ratio));
    }
    
    .tf-school-classroom>.desc {
        margin-top: calc(var(--margin-top) * var(--middle-ratio));
    }
    
    .tf-school-classroom>.desc>span {
        font-size: calc(var(--font-size) * var(--middle-ratio));
    }
    
    .tf-school-classroom>.list {
        margin-top: calc(var(--margin-top) * var(--middle-ratio));
    }
    
    .tf-school-classroom>.list>ul>li {
        margin-bottom: calc(var(--margin-bottom) * var(--middle-ratio));
    }
}

@media (min-width: 1201px) and (max-width: 1452px) {
    .tf-school-classroom {
        margin-top: calc(var(--margin-top) * var(--large-ratio));
    }
    
    .tf-school-classroom>.title>span {
        font-size: calc(var(--font-size) * var(--large-ratio));
    }
    
    .tf-school-classroom>.desc {
        margin-top: calc(var(--margin-top) * var(--large-ratio));
    }
    
    .tf-school-classroom>.desc>span {
        font-size: calc(var(--font-size) * var(--large-ratio));
    }
    
    .tf-school-classroom>.list {
        margin-top: calc(var(--margin-top) * var(--large-ratio));
    }
    
    .tf-school-classroom>.list>ul>li {
        margin-bottom: calc(var(--margin-bottom) * var(--large-ratio));
    }
}

@media (min-width: 1453px) and (max-width: 1771px) {
    .tf-school-classroom {
        margin-top: calc(var(--margin-top) * var(--extra-large-ratio));
    }
    
    .tf-school-classroom>.title>span {
        font-size: calc(var(--font-size) * var(--extra-large-ratio));
    }
    
    .tf-school-classroom>.desc {
        margin-top: calc(var(--margin-top) * var(--extra-large-ratio));
    }
    
    .tf-school-classroom>.desc>span {
        font-size: calc(var(--font-size) * var(--extra-large-ratio));
    }
    
    .tf-school-classroom>.list {
        margin-top: calc(var(--margin-top) * var(--extra-large-ratio));
    }
    
    .tf-school-classroom>.list>ul>li {
        margin-bottom: calc(var(--margin-bottom) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .tf-school-classroom {
        margin-top: calc(var(--margin-top) * var(--design-ratio));
    }
    
    .tf-school-classroom>.title>span {
        font-size: calc(var(--font-size) * var(--design-ratio));
    }
    
    .tf-school-classroom>.desc {
        margin-top: calc(var(--margin-top) * var(--design-ratio));
    }
    
    .tf-school-classroom>.desc>span {
        font-size: calc(var(--font-size) * var(--design-ratio));
    }
    
    .tf-school-classroom>.list {
        margin-top: calc(var(--margin-top) * var(--design-ratio));
    }
    
    .tf-school-classroom>.list>ul>li {
        margin-bottom: calc(var(--margin-bottom) * var(--design-ratio));
    }
}

.tf-school-classroom .list .list-item {
    --width: 355px;
}

.list>ul>li {
    cursor: pointer;
}

.list .list-item .avatar {
    --height: 437px;
    width: 100%;
    position: relative;
}

.list .list-item .avatar>img {
    width: 100%;
    height: 100%;
}

.list .list-item .avatar .mask {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.list .list-item .avatar .mask>img {
    --width: 64px;
    --height: 64px;
}

.list .list-item .title {
    --padding-top: 30px;
    --padding-left: 7px;
    text-align: left;
}

.list .list-item .title span {
    --font-size: 28px;
    font-family: 'Microsoft YaHei UI';
    line-height: 1.5;
}

@media (max-width: 767px) {
    .tf-school-classroom .list .list-item {
        width: calc(var(--width) * var(--extra-small-ratio));
    }
    
    .list .list-item .avatar {
        height: calc(var(--height) * var(--extra-small-ratio));
    }

    .list .list-item .avatar .mask>img {
        width: calc(var(--width) * var(--extra-small-ratio));
        height: calc(var(--height) * var(--extra-small-ratio));
    }

    .list .list-item .title {
        padding-top: calc(var(--padding-top) * var(--extra-small-ratio));
        padding-left: calc(var(--padding-left) * var(--extra-small-ratio));
    }
    
    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--extra-small-ratio));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tf-school-classroom .list .list-item {
        width: calc(var(--width) * var(--small-ratio));
    }
    
    .list .list-item .avatar {
        height: calc(var(--height) * var(--small-ratio));
    }

    .list .list-item .avatar .mask>img {
        width: calc(var(--width) * var(--small-ratio));
        height: calc(var(--height) * var(--small-ratio));
    }

    .list .list-item .title {
        padding-top: calc(var(--padding-top) * var(--small-ratio));
        padding-left: calc(var(--padding-left) * var(--small-ratio));
    }
    
    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--small-ratio));
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tf-school-classroom .list .list-item {
        width: calc(var(--width) * var(--middle-ratio));
    }
    
    .list .list-item .avatar {
        height: calc(var(--height) * var(--middle-ratio));
    }
    
    .list .list-item .avatar .mask>img {
        width: calc(var(--width) * var(--middle-ratio));
        height: calc(var(--height) * var(--middle-ratio));
    }

    .list .list-item .title {
        padding-top: calc(var(--padding-top) * var(--middle-ratio));
        padding-left: calc(var(--padding-left) * var(--middle-ratio));
    }
    
    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--middle-ratio));
    }
}

@media (min-width: 1201px) and (max-width: 1452px) {
    .tf-school-classroom .list .list-item {
        width: calc(var(--width) * var(--large-ratio));
    }
    
    .list .list-item .avatar {
        height: calc(var(--height) * var(--large-ratio));
    }
    
    .list .list-item .avatar .mask>img {
        width: calc(var(--width) * var(--large-ratio));
        height: calc(var(--height) * var(--large-ratio));
    }

    .list .list-item .title {
        padding-top: calc(var(--padding-top) * var(--large-ratio));
        padding-left: calc(var(--padding-left) * var(--large-ratio));
    }
    
    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--large-ratio));
    }
}

@media (min-width: 1453px) and (max-width: 1771px) {
    .tf-school-classroom .list .list-item {
        width: calc(var(--width) * var(--extra-large-ratio));
    }
    
    .list .list-item .avatar {
        height: calc(var(--height) * var(--extra-large-ratio));
    }
    
    .list .list-item .avatar .mask>img {
        width: calc(var(--width) * var(--extra-large-ratio));
        height: calc(var(--height) * var(--extra-large-ratio));
    }

    .list .list-item .title {
        padding-top: calc(var(--padding-top) * var(--extra-large-ratio));
        padding-left: calc(var(--padding-left) * var(--extra-large-ratio));
    }
    
    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--extra-large-ratio));
    }
}

@media (min-width: 1772px) {
    .tf-school-classroom .list .list-item {
        width: calc(var(--width) * var(--design-ratio));
    }
    
    .list .list-item .avatar {
        height: calc(var(--height) * var(--design-ratio));
    }
    
    .list .list-item .avatar .mask>img {
        width: calc(var(--width) * var(--design-ratio));
        height: calc(var(--height) * var(--design-ratio));
    }

    .list .list-item .title {
        padding-top: calc(var(--padding-top) * var(--design-ratio));
        padding-left: calc(var(--padding-left) * var(--design-ratio));
    }
    
    .list .list-item .title span {
        font-size: calc(var(--font-size) * var(--design-ratio));
    }
}