body {
    font-family: system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,sans-serif;
    padding: 0 !important
}

.ui.grid {
    margin: 0
}

    .ui.grid + .grid {
        margin-top: 0rem
    }

.ui.breadcrumb a {
    color: #aaa
}

.el-message-box__header {
    padding: 25px 25px 20px !important
}

.el-message-box__headerbtn {
    top: 23px !important;
    right: 25px !important;
    font-size: 26px !important
}

.el-message-box__title {
    font-size: 20px !important;
    font-weight: 900
}

.el-message-box__content {
    padding: 10px 30px !important;
    line-height: 33px !important;
    font-size: 16px !important;
    color: #606266 !important
}

.el-message-box__btns {
    padding: 20px 25px 20px !important
}

    .el-message-box__btns .el-button span {
        font-size: 16px !important;
        font-weight: 900
    }

.el-button:active, .el-button:focus, .el-button:hover {
    background: #4FA168 !important;
    color: white !important;
    border-color: #4FA168 !important;
    outline: 0
}

.el-select .el-input__inner:focus {
    border-color: #4FA168
}

.el-checkbox__inner:hover {
    border-color: #4FA168
}

.el-checkbox.is-bordered.is-checked {
    border-color: #4FA168
}

.el-input .el-input__inner:hover, .el-input .el-select .el-input.is-focus .el-input__inner {
    border-color: #4FA168 !important
}

.el-date-table td.current:not(.disabled) span {
    background-color: #4FA168 !important;
    color: white
}

.el-date-table td.today span {
    color: #4FA168
}

.el-picker-panel__footer .el-button--text {
    color: #4FA168
}

.el-radio__input.is-checked + .el-radio__label {
    color: #4FA168
}

.el-textarea__inner:focus {
    border-color: #4FA168
}

.el-radio__input.is-checked .el-radio__inner {
    border-color: #4FA168;
    background: #4FA168
}

.el-select .el-input.is-focus .el-input__inner {
    border-color: #4FA168
}

.el-button--primary {
    color: #fff;
    background-color: #4FA168;
    border-color: #4FA168
}

.el-time-panel__btn.confirm {
    font-weight: 800;
    color: #4FA168
}

el-button.is-plain:hover {
    background: #fff;
    border-color: #4FA168;
    color: #4FA168
}

.el-message-box {
    width: 80%
}

    .el-message-box .el-button--primary:focus, .el-message-box .el-button--primary:hover {
        background: #4FA168;
        border-color: #4FA168;
        color: #fff
    }

.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #4FA168
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #4FA168;
    border-color: #4FA168
}

.el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #4FA168
}

.el-dialog {
    width: 90%
}

    .el-dialog .el-dialog__header {
        padding: 35px 20px 10px 42px
    }

    .el-dialog .el-dialog__headerbtn {
        top: 30px;
        right: 30px;
        font-size: 26px
    }

        .el-dialog .el-dialog__headerbtn .el-dialog__close {
            color: #555;
            font-weight: 700
        }

    .el-dialog .el-dialog__title {
        font-size: 24px;
        font-weight: 700
    }

    .el-dialog .el-form-item {
        margin-bottom: 0
    }

    .el-dialog .el-radio__label {
        line-height: 40px;
        font-size: 16px
    }

    .el-dialog .dialog-footer {
        padding: 10px 20px 20px
    }

    .el-dialog .el-button {
        font-weight: 900;
        padding: 8px 20px;
        font-size: 16px
    }

    .el-dialog .el-dialog__body {
        padding: 20px
    }

.el-button--default {
    background: #f2f2f2;
    border-color: #f2f2f2
}

.el-button:active, .el-button:hover, .el-button:focus {
    background: #f2f2f2;
    color: #f2f2f2;
    border-color: #f2f2f2;
    outline: 0
}

.el-input__inner:focus {
    border-color: #4FA168
}

.el-select-dropdown__item.selected {
    color: #4FA168
}

.jy-card-top {
    display: flex;
    padding: 20px 10px 0 10px
}

    .jy-card-top .left img {
        width: 80px;
        height: 90px;
        border-radius: 10px 0
    }

    .jy-card-top .left .image {
        margin-right: 10px
    }

    .jy-card-top .right {
        margin-left: 20px;
        padding-top: 0;
        font-size: 18px;
        min-width: calc(95% - 85px)
    }

        .jy-card-top .right .one {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            align-items: flex-end
        }

            .jy-card-top .right .one .name {
                font-weight: 700
            }

                .jy-card-top .right .one .name .cheng, .jy-card-top .right .one .name .ping {
                    display: inline-block;
                    height: 16px;
                    width: 16px;
                    text-align: center;
                    line-height: 16px;
                    border-radius: 3px;
                    margin-right: 2px
                }

            .jy-card-top .right .one .time {
                font-size: 12px;
                color: #999
            }

        .jy-card-top .right .two {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            align-items: center
        }

            .jy-card-top .right .two .school {
                font-size: 16px;
                color: #555
            }

            .jy-card-top .right .two .medal {
                display: flex;
                text-align: right
            }

                .jy-card-top .right .two .medal img {
                    width: 18px;
                    height: 18px
                }

        .jy-card-top .right .three {
            display: flex;
            justify-content: space-between;
            align-items: center
        }

            .jy-card-top .right .three .subject {
                font-size: 16px;
                color: #555
            }

            .jy-card-top .right .three .type {
                font-size: 14px;
                color: #4FA168
            }

.myself-info {
    background: #fbfbfb;
    margin-top: 20px;
    border-radius: 10px;
    font-size: 13px;
    position: relative;
    line-height: 25px;
    padding: 15px 15px 18px 19px
}

    .myself-info .detail {
        position: absolute;
        top: -18px;
        left: 30px;
        width: 0;
        height: 0;
        border: 10px solid;
        border-color: transparent transparent #f9f9f9
    }

.toolbar-item, .toolbar-layer {
    background: url(../images/toolbar.png) no-repeat
}

.toolbar {
    position: fixed;
    right: 0;
    bottom: 100px
}

.toolbar-item {
    display: block;
    width: 47px;
    height: 47px;
    margin-top: 1px;
    position: relative;
    -moz-transition: background-position .2s;
    -ms-transition: background-position .2s;
    -o-moz-transition: background-position .2s;
    -webkit-moz-transition: background-position .2s;
    transition: background-position .2s
}

    .toolbar-item:hover .toolbar-layer {
        opacity: 1;
        filter: alpha(opacity=50);
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9)
    }

.toolbar-item-weixin {
    background-position: 0 -541px;
    margin-bottom: 9px;
    -moz-border-radius: 12px 0 0 9px;
    -webkit-border-radius: 12px 0 0 9px;
    border-radius: 12px 0 0 9px
}

    .toolbar-item-weixin:hover {
        background-position: 0 -600px
    }

    .toolbar-item-weixin .toolbar-layer {
        height: 212px;
        background-position: 0 -2px
    }

.toolbar-item-app {
    background-position: 0 -426px;
    margin-bottom: 9px;
    -moz-border-radius: 12px 0 0 12px;
    -webkit-border-radius: 12px 0 0 12px;
    border-radius: 12px 0 0 12px
}

    .toolbar-item-app:hover {
        background-position: 0 -483px
    }

.toolbar-item-top {
    background-position: 0 -721px;
    margin-bottom: 5px;
    -moz-border-radius: 12px 0 0 12px;
    -webkit-border-radius: 12px 0 0 12px;
    border-radius: 12px 0 0 12px
}

    .toolbar-item-top:hover {
        background-position: 0 -660px
    }

.toolbar-layer {
    position: absolute;
    right: 50px;
    bottom: -10px;
    width: 172px;
    opacity: 0;
    filter: alpha(opacity=0);
    transform-origin: 95% 95%;
    -moz-transform-origin: 95% 95%;
    -ms-transform-origin: 95% 95%;
    -o-transform-origin: 95% 95%;
    -webkit-transform-origin: 95% 95%;
    transform: scale(0.01);
    -moz-transform: scale(0.01);
    -ms-transform: scale(0.01);
    -o-transform: scale(0.01);
    -webkit-transform: scale(0.01);
    transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    -webkit-transition: all 1s
}

#pc_base {
    min-width: 1000px;
    max-width: 1220px;
    margin: 20px auto 200px auto;
    padding: 0 5vw 0 5vw;
    box-shadow: -1px 0 20px 3px rgba(133,133,133,0.39);
    box-sizing: border-box
}

.pc-mobile-change {
    margin: 0 auto
}

.dot {
    width: 20px;
    height: 20px;
    background: red;
    color: white;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    position: absolute
}

.pc-nav-tag {
    border: 1px solid #4FA168;
    padding: 5px 15px 5px 15px;
    border-radius: 5px;
    color: #4FA168 !important
}

.tg-teacher-blue {
    background: linear-gradient(to right,#7edecc 0,#b3dfec 100%)
}

.tg-student-pink {
    background: linear-gradient(to right,#efcfe4 0,#ffe9c2 100%)
}

.tg-background-Orange1 {
    background-color: #4FA168
}

.tg-background-Orange2 {
    background-color: #4FA168
}

.tg-background-Orange3 {
    background-color: #ffca47
}

.tg-background-Orange4 {
    background-color: #fdeace
}

.tg-background-blue1 {
    background-color: #28b7c9
}

.tg-background-blue2 {
    background-color: #62c3d0
}

.tg-background-gray1 {
    background-color: #303030
}

.tg-background-gray2 {
    background-color: #555
}

.tg-background-gray3 {
    background-color: #999
}

.tg-background-gray4 {
    background-color: #bfbfbf
}

.tg-background-gray5 {
    background-color: #dcdcdc
}

.tg-background-gray6 {
    background-color: #e9e9e9
}

.tg-background-gray7 {
    background-color: #f2f2f2
}

.tg-background-gray8 {
    background-color: #f9f9f9
}

.tg-background-gray9 {
    background-color: #fbfbfb
}

.tg-background-danger1 {
    background-color: #f56c6c
}

.tg-background-white {
    background-color: white !important;
    background: white
}

.text-w {
    color: white
}

.text-red {
    color: red
}

.text-Orange1 {
    color: #4FA168
}

.text-Orange1_un {
    color: #4FA168;
    text-decoration: underline
}

.text-Orange2 {
    color: #4FA168
}

.text-blue1 {
    color: #28b7c9
}

.text-blue2 {
    color: #62c3d0
}

.text-gray1 {
    color: #303030 !important
}

.text-gray2 {
    color: #555
}

.text-gray3 {
    color: #999
}

.text-gray4 {
    color: #bfbfbf
}

.text-gray5 {
    color: #dcdcdc
}

.text-gray6 {
    color: #e9e9e9
}

.text-gray7 {
    color: #f2f2f2
}

.text-gray8 {
    color: #f9f9f9
}

.text-gray9 {
    color: #fbfbfb
}

.b4 {
    font-weight: 400
}

.b5 {
    font-weight: 500
}

.b9 {
    font-weight: 900
}

.tg-font-10px {
    font-size: 10px
}

.tg-font-12px {
    font-size: 12px
}

.tg-font-13px {
    font-size: 13px
}

.tg-font-14px {
    font-size: 14px
}

.tg-font-16px {
    font-size: 16px
}

.tg-font-18px {
    font-size: 18px
}

.tg-border-radius-5 {
    border-radius: 5px
}

.tg-border-radius-8 {
    border-radius: 8px
}

.tg-border-radius-10 {
    border-radius: 10px
}

.tg-border-radius-15 {
    border-radius: 15px
}

.border1-bottom {
    border-bottom: 1px dashed #ccc;
    line-height: 25px
}

.border-bottom {
    border-bottom: 1px dashed #ccc
}

.border-bottom-Orange1 {
    border-bottom: 1px solid #4FA168
}

.border1-Orange1 {
    border: 1px solid #4FA168;
    border-radius: 4px
}

.pointer {
    cursor: pointer !important
}

.debug {
    border: 1px solid red
}

.clear:after {
    content: '';
    height: 0;
    display: block;
    clear: both
}

.tg-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.tg-flex-item-center {
    align-items: center
}

.tg-flex-between {
    display: flex;
    justify-content: space-between
}

.inline-block {
    display: inline-block
}

.tg-bnt-gray {
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
    color: #555;
    background-color: #f2f2f2
}

.tg-bnt-Orange1 {
    font-weight: 400;
    color: #fff;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 12px;
    background-color: #4FA168
}

.tg-bnt-Orange2 {
    font-weight: 400;
    color: #fff;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 12px;
    background-color: #4FA168
}

.user-bnt {
    text-align: right
}

    .user-bnt .el-button {
        font-weight: 400;
        color: #fff;
        padding: 8px 15px;
        border-radius: 8px;
        font-size: 12px;
        margin: 0
    }

.apply-record-cancel {
    margin-top: 10px;
    text-align: right
}

    .apply-record-cancel button {
        margin-left: 0;
        padding: 8px 25px 8px 25px;
        border-radius: 8px
    }

    .apply-record-cancel .el-button + .el-button {
        margin-left: 0
    }

    .apply-record-cancel .el-button:nth-of-type(1) {
        background-color: #f2f2f2;
        color: #555
    }

    .apply-record-cancel .el-button:nth-of-type(2) {
        background-color: #4FA168;
        color: white
    }

.tg-text-underline {
    text-decoration: underline
}

.gray2-12-text {
    color: #555;
    font-size: 12px
}

.details-text {
    font-size: 12px;
    color: #4FA168
}

.time-text {
    font-size: 12px;
    color: #bfbfbf
}

.apply-status-text {
    color: #fff;
    border-radius: 5px;
    display: inline-block;
    padding: 3px 8px;
    font-size: 12px
}

.tg-line-height-15 {
    line-height: 15px
}

.tg-line-height-20 {
    line-height: 20px
}

.tg-line-height-25 {
    line-height: 25px
}

.tg-line-height-30 {
    line-height: 30px
}

.hidden1-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.hidden2-text {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical
}

.hidden3-text {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    -webkit-box-orient: vertical
}

.hidden4-text {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    overflow: hidden;
    -webkit-box-orient: vertical
}

.hidden5-text {
    text-Orangeverflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    overflow: hidden;
    -webkit-box-orient: vertical
}

.el-timeline {
    padding: 0
}

.tg-el-time-orange .el-timeline-item__timestamp.is-top {
    margin-bottom: 0;
    padding-top: 0;
    padding-left: 10px
}

.tg-el-time-orange .el-timeline-item__tail {
    border-left: 2px solid #4FA168
}

.tg-el-time-orange .el-timeline-item__node {
    background-color: #4FA168
}

.tg-el-time-orange .el-timeline-item__wrapper {
    padding-left: 20px
}

.tg-el-time-orange .el-timeline-item__content .text {
    font-size: 12px;
    color: #303030
}

.tg-el-time-orange .el-timeline-item__content .time {
    font-size: 12px;
    color: #303030
}

.tg-el-time-blue .el-timeline-item__timestamp.is-top {
    margin-bottom: 0;
    padding-top: 0;
    padding-left: 10px
}

.tg-el-time-blue .el-timeline-item__tail {
    border-left: 2px solid #28b7c9
}

.tg-el-time-blue .el-timeline-item__node {
    background-color: #28b7c9
}

.tg-el-time-blue .el-timeline-item__wrapper {
    padding-left: 20px
}

.tg-el-time-blue .el-timeline-item__content .text {
    font-size: 12px;
    color: #303030
}

.tg-el-time-blue .el-timeline-item__content .time {
    font-size: 12px;
    color: #303030
}

.liuyan-Orange .el-timeline-item__timestamp.is-top {
    margin-bottom: 0;
    padding-top: 0;
    padding-left: 10px
}

.liuyan-Orange .el-timeline-item__tail {
    border-left: 2px solid #4FA168
}

.liuyan-Orange .el-timeline-item__node {
    background-color: #4FA168
}

.liuyan-Orange .el-timeline-item__wrapper {
    padding-left: 20px
}

.liuyan-Orange .el-timeline-item__content .text {
    font-size: 12px;
    color: #303030
}

.liuyan-Orange .el-timeline-item__content .time {
    font-size: 12px;
    color: #303030
}

.liuyan-Blue .el-timeline-item__timestamp.is-top {
    margin-bottom: 0;
    padding-top: 0;
    padding-left: 10px
}

.liuyan-Blue .el-timeline-item__tail {
    border-left: 2px solid #28b7c9
}

.liuyan-Blue .el-timeline-item__node {
    background-color: #28b7c9
}

.liuyan-Blue .el-timeline-item__wrapper {
    padding-left: 20px
}

.liuyan-Blue .el-timeline-item__content .text {
    font-size: 12px;
    color: #303030
}

.liuyan-Blue .el-timeline-item__content .time {
    font-size: 12px;
    color: #303030
}

.margin-bottom-10 {
    margin-bottom: 10px
}

.margin-bottom-20 {
    margin-bottom: 20px
}

.margin-bottom-30 {
    margin-bottom: 30px
}

.margin-top-0 {
    margin-top: 0
}

.margin-top-10 {
    margin-top: 10px
}

.margin-top-20 {
    margin-top: 20px
}

.margin-top-30 {
    margin-top: 30px
}

.padding-10 {
    padding: 10px
}

.padding-20 {
    padding: 20px
}

.padding-30 {
    padding: 30px
}

.padding-bottom-10 {
    padding-bottom: 10px
}

.padding-bottom-20 {
    padding-bottom: 20px
}

.padding-bottom-30 {
    padding-bottom: 30px
}

.m-1 {
    margin: 10px
}

.m-2 {
    margin: 20px
}

.m-3 {
    margin: 30px
}

.font-s10 {
    font-size: 10px !important
}

.font-s11 {
    font-size: 11px !important
}

.font-s12 {
    font-size: 12px !important
}

.font-s13 {
    font-size: 13px !important
}

.font-s14 {
    font-size: 14px !important
}

.font-s15 {
    font-size: 15px !important
}

.font-s16 {
    font-size: 16px !important
}

.font-s18 {
    font-size: 18px !important
}

.font-s20 {
    font-size: 20px !important
}

.font-s30 {
    font-size: 30px !important
}

.font-s40 {
    font-size: 40px !important
}

.font-w1 {
    font-weight: 100 !important
}

.font-w2 {
    font-weight: 200 !important
}

.font-w3 {
    font-weight: 300 !important
}

.font-w4 {
    font-weight: 400 !important
}

.font-w5 {
    font-weight: 500 !important
}

.font-w6 {
    font-weight: 600 !important
}

.font-w7 {
    font-weight: 700 !important
}

.font-w8 {
    font-weight: 800 !important
}

.font-w9 {
    font-weight: 900 !important
}

.margin-0 {
    margin: 0 !important
}

.margin-5 {
    margin: 5px !important
}

.margin-10 {
    margin: 10px !important
}

.margin-15 {
    margin: 15px !important
}

.margin-20 {
    margin: 20px !important
}

.margin-25 {
    margin: 25px !important
}

.margin-30 {
    margin: 30px !important
}

.margin-40 {
    margin: 40px !important
}

.margin-col-0 {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.margin-col-5 {
    margin-left: 5px !important;
    margin-right: 5px !important
}

.margin-col-10 {
    margin-left: 10px !important;
    margin-right: 10px !important
}

.margin-col-15 {
    margin-left: 15px !important;
    margin-right: 15px !important
}

.margin-col-20 {
    margin-left: 20px !important;
    margin-right: 20px !important
}

.margin-col-25 {
    margin-left: 25px !important;
    margin-right: 25px !important
}

.margin-col-30 {
    margin-left: 30px !important;
    margin-right: 30px !important
}

.margin-col-40 {
    margin-left: 40px !important;
    margin-right: 40px !important
}

.margin-row-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.margin-row-5 {
    margin-top: 5px !important;
    margin-bottom: 5px !important
}

.margin-row-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important
}

.margin-row-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important
}

.margin-row-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important
}

.margin-row-25 {
    margin-top: 25px !important;
    margin-bottom: 25px !important
}

.margin-row-30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important
}

.margin-row-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important
}

.margin-top-0 {
    margin-top: 0 !important
}

.margin-top-5 {
    margin-top: 5px !important
}

.margin-top-10 {
    margin-top: 10px !important
}

.margin-top-15 {
    margin-top: 15px !important
}

.margin-top-20 {
    margin-top: 20px !important
}

.margin-top-25 {
    margin-top: 25px !important
}

.margin-top-30 {
    margin-top: 30px !important
}

.margin-top-40 {
    margin-top: 40px !important
}

.margin-left-0 {
    margin-left: 0 !important
}

.margin-left-5 {
    margin-left: 5px !important
}

.margin-left-10 {
    margin-left: 10px !important
}

.margin-left-15 {
    margin-left: 15px !important
}

.margin-left-20 {
    margin-left: 20px !important
}

.margin-left-25 {
    margin-left: 25px !important
}

.margin-left-30 {
    margin-left: 30px !important
}

.margin-left-40 {
    margin-left: 40px !important
}

.margin-right-0 {
    margin-right: 0 !important
}

.margin-right-5 {
    margin-right: 5px !important
}

.margin-right-10 {
    margin-right: 10px !important
}

.margin-right-15 {
    margin-right: 15px !important
}

.margin-right-20 {
    margin-right: 20px !important
}

.margin-right-25 {
    margin-right: 25px !important
}

.margin-right-30 {
    margin-right: 30px !important
}

.margin-right-40 {
    margin-right: 40px !important
}

.margin-bottom-0 {
    margin-bottom: 0 !important
}

.margin-bottom-5 {
    margin-bottom: 5px !important
}

.margin-bottom-10 {
    margin-bottom: 10px !important
}

.margin-bottom-15 {
    margin-bottom: 15px !important
}

.margin-bottom-20 {
    margin-bottom: 20px !important
}

.margin-bottom-25 {
    margin-bottom: 25px !important
}

.margin-bottom-30 {
    margin-bottom: 30px !important
}

.margin-bottom-40 {
    margin-bottom: 40px !important
}

.padding-0 {
    padding: 0 !important
}

.padding-5 {
    padding: 5px !important
}

.padding-10 {
    padding: 10px !important
}

.padding-15 {
    padding: 15px !important
}

.padding-20 {
    padding: 20px !important
}

.padding-25 {
    padding: 25px !important
}

.padding-30 {
    padding: 30px !important
}

.padding-40 {
    padding: 40px !important
}

.padding-col-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.padding-col-5 {
    padding-left: 5px !important;
    padding-right: 5px !important
}

.padding-col-10 {
    padding-left: 10px !important;
    padding-right: 10px !important
}

.padding-col-15 {
    padding-left: 15px !important;
    padding-right: 15px !important
}

.padding-col-20 {
    padding-left: 20px !important;
    padding-right: 20px !important
}

.padding-col-25 {
    padding-left: 25px !important;
    padding-right: 25px !important
}

.padding-col-30 {
    padding-left: 30px !important;
    padding-right: 30px !important
}

.padding-col-40 {
    padding-left: 40px !important;
    padding-right: 40px !important
}

.padding-row-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.padding-row-5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important
}

.padding-row-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important
}

.padding-row-15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important
}

.padding-row-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important
}

.padding-row-25 {
    padding-top: 25px !important;
    padding-bottom: 25px !important
}

.padding-row-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important
}

.padding-row-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important
}

.padding-top-0 {
    padding-top: 0 !important
}

.padding-top-5 {
    padding-top: 5px !important
}

.padding-top-10 {
    padding-top: 10px !important
}

.padding-top-15 {
    padding-top: 15px !important
}

.padding-top-20 {
    padding-top: 20px !important
}

.padding-top-30 {
    padding-top: 30px !important
}

.padding-top-40 {
    padding-top: 40px !important
}

.padding-left-0 {
    padding-left: 0 !important
}

.padding-left-5 {
    padding-left: 5px !important
}

.padding-left-10 {
    padding-left: 10px !important
}

.padding-left-15 {
    padding-left: 15px !important
}

.padding-left-20 {
    padding-left: 20px !important
}

.padding-left-30 {
    padding-left: 30px !important
}

.padding-left-40 {
    padding-left: 40px !important
}

.padding-right-0 {
    padding-right: 0 !important
}

.padding-right-5 {
    padding-right: 5px !important
}

.padding-right-10 {
    padding-right: 10px !important
}

.padding-right-15 {
    padding-right: 15px !important
}

.padding-right-20 {
    padding-right: 20px !important
}

.padding-right-30 {
    padding-right: 30px !important
}

.padding-right-40 {
    padding-right: 40px !important
}

.padding-bottom-0 {
    padding-bottom: 0 !important
}

.padding-bottom-5 {
    padding-bottom: 5px !important
}

.padding-bottom-10 {
    padding-bottom: 10px !important
}

.padding-bottom-15 {
    padding-bottom: 15px !important
}

.padding-bottom-20 {
    padding-bottom: 20px !important
}

.padding-bottom-30 {
    padding-bottom: 30px !important
}

.padding-bottom-40 {
    padding-bottom: 40px !important
}

.tg-text-left {
    text-align: left
}

.tg-text-right {
    text-align: right
}

.tg-text-center {
    text-align: center
}

.text-top {
    vertical-align: top !important
}

.text-left {
    text-align: left !important
}

.text-right {
    text-align: right !important
}

.text-center {
    text-align: center !important
}

.text-middle {
    vertical-align: middle !important
}

.text-bottom {
    vertical-align: bottom !important
}

.border-0 {
    border: 0 !important
}

.border-top-0 {
    border-top: 0 !important
}

.border-left-0 {
    border-left: 0 !important
}

.border-right-0 {
    border-right: 0 !important
}

.border-bottom-0 {
    border-bottom: 0 !important
}

.border-radius {
    border-radius: 50% !important
}

.border-radius-0 {
    border-radius: 0 !important
}

.border-radius-5 {
    border-radius: 5px !important
}

.border-radius-6 {
    border-radius: 6px !important
}

.border-radius-left-0 {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important
}

.border-radius-right-0 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

.top-nav {
    position: relative;
    display: flex;
    height: 45px;
    line-height: 45px;
    justify-content: center;
    margin-top: -10px
}

    .top-nav .nav-more {
        display: none;
        color: #4FA168;
        top: 0;
        right: -35px;
        position: absolute;
        display: inline-block;
        z-index: 3
    }

    .top-nav .item::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        border-bottom: 3px solid #4FA168
    }

    .top-nav .nav-content {
        white-space: nowrap;
        padding-right: 16px;
        overflow-y: hidden;
        overflow-x: auto;
        background: #f9f9f9;
        border-radius: 10px 10px 10px 10px;
        width: 100%;
        margin: 0 6%
    }

        .top-nav .nav-content::-webkit-scrollbar {
            display: none
        }

    .top-nav a, .top-nav a:hover {
        box-sizing: border-box;
        display: inline-block;
        margin-left: 8px;
        color: black;
        font-size: 16px
    }

.site {
    /*background: #fbfbfb;*/
    line-height: 30px;
    color: #999;
    font-size: 13px;
    padding-left: 6%;
    padding-right: 6%;
    padding-top: 5px
}

    .site .icon {
        color: #999
    }

    .site a, .site a:hover {
        color: #999
    }

    .site .divider {
        margin: 0 3px 0 3px
    }

nav .el-drawer.rtl .el-drawer__body .nav-url .item {
    text-align: center;
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    font-size: 16px
}

.footer-bottom-tab {
    padding-top: 15px;
    background: #fbfbfb
}

    .footer-bottom-tab .el-tabs__item {
        font-size: 16px;
        padding: 0 8px 0 8px;
        font-weight: 900
    }

    .footer-bottom-tab .el-tabs__nav-wrap::after {
        height: 0
    }

    .footer-bottom-tab .el-tabs__header {
        display: flex;
        justify-content: center;
        margin-bottom: 5px
    }

    .footer-bottom-tab .el-tabs__item:hover, .footer-bottom-tab .el-tabs__item.is-active {
        color: #4FA168;
        font-weight: bold
    }

    .footer-bottom-tab .el-tabs__active-bar {
        background-color: #4FA168;
        bottom: 5px
    }

        .footer-bottom-tab .el-tabs__active-bar is-top {
            width: 30px !important
        }

    .footer-bottom-tab .el-tabs__content {
        line-height: 32px;
        font-size: 15px;
        padding: 0 30px 28px 30px
    }

    .footer-bottom-tab .grid-content {
        color: #555
    }

.bottom-hot-line {
    margin-top: 2rem !important;
    text-align: center;
    color: #555;
    font-size: 18px
}

    .bottom-hot-line a, .bottom-hot-line a:hover {
        display: inline-block;
        margin-left: 10px;
        color: #4FA168
    }

.bottom-text {
    padding: 1rem 0 1rem 0;
    text-align: center;
    color: #999;
    font-size: 10px
}

.bottom-image {
    text-align: center;
    padding: 0 0 1rem 0
}

    .bottom-image .column {
        font-size: 12px;
        color: #303030
    }

    .bottom-image img {
        margin-left: 10px
    }

.bottom-copyright {
    text-align: center
}

    .bottom-copyright .record {
        padding-top: 1rem;
        padding-bottom: 2rem
    }

    .bottom-copyright span, .bottom-copyright a {
        font-size: 12px;
        color: #999
    }

.bottom-contact {
    padding: 0rem 2rem 2rem 2rem !important;
    font-size: 12px
}

    .bottom-contact a {
        color: #555
    }

    .bottom-contact .column {
        padding: 0 !important
    }

.bottom-menu {
    padding: 2rem 1rem 1rem 1rem !important;
    text-align: center;
    background: #f2f2f2;
    border-top: 20px solid #fff
}

.bottom-menu-title {
    position: relative;
    padding-bottom: .8rem
}

    .bottom-menu-title .item {
        margin-right: 10px;
        color: #303030
    }

    .bottom-menu-title .bottom-menu-underline {
        position: absolute;
        bottom: -8px;
        left: 30%;
        height: 2px;
        width: 20px;
        background: #4FA168
    }

    .bottom-menu-title .pos {
        position: relative;
        color: #4FA168
    }

    .bottom-menu-title a:hover {
        color: #4FA168
    }

.ui.tab {
    padding-left: 1rem;
    padding-right: 1rem
}

    .ui.tab .five .column {
        padding: 0 0 .5rem 0 !important;
        font-size: 12px
    }

        .ui.tab .five .column a {
            color: #999
        }

.bottom-nav {
    box-sizing: border-box;
    height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #fff
}

    .bottom-nav .column {
        padding-top: .3rem !important
    }

    .bottom-nav svg {
        width: 25px;
        height: 23px;
        fill: #999
    }

    .bottom-nav span {
        display: inline-block;
        position: relative;
        top: 0;
        color: #999;
        font-size: 13px
    }

.copyright {
    background: #f2f2f2
}

#pc-page .page-next {
    text-align: center;
    display: inline-block;
    padding: 12px 35px;
    color: white;
    background-color: #4FA168;
    border-radius: 8px;
    margin: 40px 15px 5px 15px;
    font-size: 18px
}

#pc-page .page-dot .page-next {
    background: #4FA168
}

#pc-page .page-next-select {
    text-align: center;
    display: inline-block;
    width: 45px;
    height: 45px;
    border: 1px solid #4FA168;
    background: #4FA168;
    color: #fff !important;
    line-height: 45px;
    border-radius: 50%;
    font-size: 18px
}

#pc-page .pagination {
    padding: 20px 0 15px 0 !important
}

#pc-page .teacher-page {
    display: flex;
    align-items: center;
    justify-content: center
}

#mobile-page .page-next {
    text-align: center;
    display: inline-block;
    padding: 7px 20px;
    color: white;
    border-radius: 8px;
    margin: 5px;
    font-size: 14px
}

#mobile-page .page-dot .page-next {
    background: #4FA168
}

#mobile-page .page-next-select {
    text-align: center;
    display: inline-block;
    width: 45px;
    height: 45px;
    border: 1px solid #4FA168;
    background: #4FA168;
    color: #fff !important;
    line-height: 45px;
    border-radius: 50%;
    font-size: 18px
}

#mobile-page .pagination {
    padding: 20px 0 15px 0 !important
}

#mobile-page .teacher-page {
    display: flex;
    align-items: center;
    justify-content: center
}

.layui-laypage {
    text-align: center
}

    .layui-laypage .layui-laypage-em {
        background: #4FA168 !important;
        border-radius: 50%
    }

    .layui-laypage .a:nth-child(1) {
        border-radius: 50% !important
    }

    .layui-laypage a, .layui-laypage span {
        margin: 5px !important;
        height: 30px !important;
        width: 30px !important;
        border: 1px solid #f2f2f2 !important;
        border-radius: 50% !important;
        padding: 0 !important
    }

.el-pagination.el-pagination--small .btn-prev, .el-pagination.el-pagination--small .btn-next {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    padding: 0 6px;
    line-height: 35px;
    border: 1px solid #f2f2f2 !important;
    margin: 5px
}

.el-pagination.el-pagination--small .el-pager .number.active {
    background: #4FA168;
    color: #fff;
    border: 1px solid #4FA168 !important;
    margin: 5px
}

.el-pagination.el-pagination--small .el-pager li {
    color: #303030;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    padding: 0 6px !important;
    line-height: 35px !important;
    border: 1px solid #f2f2f2 !important;
    margin: 5px
}

.logo {
    background-size: cover;
    height: 150px;
    width: auto;
    position: relative;
    padding: 0 0 0 0 !important
}

    .logo .left {
        padding-top: 15px !important;
        padding-left: 15px !important;
        margin-bottom: -4px !important
    }

    .logo .row .column {
        padding-top: 10px !important;
        padding-left: 15px !important;
        margin-bottom: -4px !important
    }

    .logo .column {
        padding: 0 !important
    }

    .logo .change-city {
        display: inline-block;
        position: relative;
        padding-right: .8rem !important;
        top: -4px;
        font-size: 10px;
        color: #303030
    }

    .logo .city {
        display: inline-block;
        padding-top: 10px;
        color: #303030;
        font-size: 16px
    }

.change-main {
    position: relative;
    float: right;
    right: 20px;
    top: 20px
}

    .change-main .icon {
        position: relative;
        bottom: -5px;
        left: 2px;
        transform: rotate(-45deg);
        font-size: 10px !important
    }

.tg-label-help {
    display: inline-block;
    width: 15px;
    height: 15px;
    line-height: 15px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    background: #4FA168
}

.tg-left-label {
    display: inline-block;
    position: relative;
    top: 1px;
    width: 5px;
    height: 12px;
    background: #4FA168;
    border-radius: 3px 0;
    font-size: 16px
}

.tg-red-dot {
    position: absolute;
    top: -12px;
    right: -13px;
    background: red;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    text-align: center;
    line-height: 22px
}

.index-logo-top {
    width: 100vw;
    position: absolute;
    z-index: 3
}

.swiper-index-image {
    height: 170px
}

    .swiper-index-image img {
        height: 100%;
        width: 100%
    }

.swiper-pagination {
    position: absolute;
    bottom: 0;
    --swiper-theme-color: #555 !important
}

.swiper-pagination-bullet {
    background: #999 !important
}

.index-hot-line {
    position: relative;
    padding-top: 2.8rem !important;
    z-index: 2 !important;
    padding-bottom: 8px !important
}

    .index-hot-line .right {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-end;
        align-content: space-between;
        flex-direction: column;
        align-content: flex-end
    }

.hot-line-text, .hot-line {
    padding: 0 !important
}

    .hot-line-text .row {
        position: relative
    }

        .hot-line-text .row h2 {
            display: inline-block;
            margin: 0 !important;
            font-weight: 900;
            font-family: "黑体";
            padding-bottom: 4px;
            color: black;
            font-size: 20px
        }

            .hot-line-text .row h2 .icon {
                position: relative;
                left: -2px;
                color: #4FA168;
                transform: rotate(-50deg)
            }

        .hot-line-text .row span:nth-of-type(1) {
            white-space: nowrap;
            position: relative;
            display: inline-block;
            color: #999;
            padding-top: 2px;
            font-size: 13px
        }

        .hot-line-text .row span:nth-of-type(3) {
            display: inline-block;
            position: relative;
            top: -5px;
            color: #999;
            line-height: 1px;
            font-size: 11px
        }

.site-nav {
    background: #fff;
    position: relative;
    top: -35px;
    z-index: 3
}

    .site-nav .ui.breadcrumb {
        font-size: 12px
    }

        .site-nav .ui.breadcrumb .divider {
            margin: 0 .2rem 0 .2rem !important
        }

        .site-nav .ui.breadcrumb .icon {
            color: #ccc
        }

.index-site-nav {
    background: #fff
}

    .index-site-nav .ui.breadcrumb {
        font-size: 12px
    }

        .index-site-nav .ui.breadcrumb .divider {
            margin: 0 .2rem 0 .2rem !important
        }

        .index-site-nav .ui.breadcrumb .icon {
            color: #ccc
        }

.site-nav-height {
    height: 1rem
}

.teacher-search .el-input--mini .el-input__inner {
    height: 35px;
    line-height: 35px
}

.teacher-search .el-input--mini input::placeholder {
    color: #555
}

.teacher-search .el-col-lg-4-8 {
    width: 20% !important;
    padding: 5px 0 5px 0
}

.teacher-search .search {
    padding: 0 8%
}

    .teacher-search .search a {
        display: inline-block;
        text-align: center;
        background: #4FA168;
        color: white;
        padding: 9px 9px;
        border-radius: 3px;
        font-size: 14px;
        width: 27%
    }

.teacher-search .item {
    text-align: center;
    font-size: 16px;
    min-height: 25px;
    line-height: 25px
}

.index-top-nav {
    position: relative;
    background: #f2f2f2
}

    .index-top-nav .nav-more {
        color: #4FA168;
        top: 10px;
        right: 15px;
        position: absolute;
        z-index: 3
    }

    .index-top-nav .nav-content {
        white-space: nowrap;
        margin-left: .4rem;
        margin-right: 3rem;
        padding-left: .8rem;
        padding-right: .8rem;
        overflow-y: hidden;
        overflow-x: auto
    }

        .index-top-nav .nav-content::-webkit-scrollbar {
            display: none
        }

    .index-top-nav a {
        margin-left: -8px;
        box-sizing: border-box;
        display: inline-block;
        padding: .75rem .8rem .75rem .8rem;
        color: #4FA168
    }

    .index-top-nav .item {
        background: #4FA168;
        color: #fff;
        margin-right: .8rem;
        margin-left: .5rem;
        padding: .75rem .9rem .75rem .9rem
    }

.hot-line {
    padding-top: 0 !important
}

    .hot-line a:nth-of-type(1) {
        color: #4FA168;
        display: inline-block;
        padding-bottom: 5px;
        padding-top: 3px;
        font-size: 18px
    }

    .hot-line a:nth-of-type(2) {
        color: #4FA168;
        font-size: 18px
    }

.index_list {
    display: flex;
    flex-wrap: wrap;
    text-align: center
}

    .index_list .item {
        width: 25%;
        padding: 0 0 15px 0;
        position: relative
    }

        .index_list .item svg {
            width: 40px;
            height: 50px;
            fill: #4FA168
        }

        .index_list .item span {
            color: #555;
            font-size: 13px
        }

.class-search {
    padding: 0 1rem 0 1rem !important;
    background: #fbfbfb
}

    .class-search .row.two.column {
        padding-top: 2rem !important
    }

.new-login a {
    width: 100%;
    padding: 0 !important
}

.class-search-title, .new-login-title {
    font-weight: bold
}

    .class-search-title span:nth-of-type(1), .new-login-title span:nth-of-type(1) {
        display: inline-block;
        position: relative;
        top: 2px;
        width: 6px;
        height: 17px;
        background: #4FA168;
        margin: .5rem 1rem 0 1rem;
        border-radius: 3px 0 3px 0;
        font-size: 10px
    }

    .class-search-title span:nth-of-type(2), .new-login-title span:nth-of-type(2) {
        display: inline-block;
        color: black;
        font-size: 16px
    }

.class-search-title-right {
    padding-top: 10px;
    color: #4FA168
}

.index-teacher-more {
    width: 100%;
    padding: 10px 15px 20px 0;
    text-align: right
}

    .index-teacher-more a, .index-teacher-more a:hover {
        color: #4FA168
    }

.index-order-more {
    margin-top: 10px;
    padding: 10px 15px 20px 0;
    padding-right: 30px !important;
    width: 100%;
    text-align: right
}

    .index-order-more a, .index-order-more a:hover {
        color: #28b7c9
    }

.index-help-more {
    width: 100%;
    text-align: right
}

    .index-help-more a, .index-help-more a:hover {
        color: #4FA168
    }

.class-search-list {
    white-space: nowrap;
    margin: 0 auto
}

    .class-search-list .row:nth-of-type(1) {
        padding-top: 1rem;
        border-top: 1px dashed #ccc
    }

    .class-search-list .row {
        padding: .2rem 1rem .2rem 1rem !important;
        border-bottom: 1px dashed #ccc
    }

        .class-search-list .row a {
            color: #303030
        }

            .class-search-list .row a:hover {
                color: #303030
            }

        .class-search-list .row .center.aligned.column {
            padding: .5rem 0 .5rem 0 !important
        }

.four.wide.column {
    padding-top: 0 !important;
    padding-bottom: .5rem !important
}

    .four.wide.column a {
        color: #303030
    }

.new-login {
    padding: 15px 6% !important;
    background: #fff
}

    .new-login .row.two.column {
        padding-bottom: 1rem !important
    }

.jy-count span:nth-of-type(1) {
    background: #4FA168 !important
}

.order .order.student {
    width: 100%
}

.order .column.row {
    padding: 1.5rem 1rem 0 1rem
}

    .order .column.row .column.info {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #f2f2f2;
        color: #303030
    }

.order .order-title {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 1rem !important;
    margin-right: 1rem !important;
    margin-left: 1rem !important
}

.order .header {
    font-family: '黑体',sans-serif !important;
    padding-bottom: .5rem;
    font-weight: normal !important;
    font-size: 16px
}

    .order .header span:nth-of-type(1) {
        color: #4FA168;
        font-weight: bold
    }

    .order .header span:nth-of-type(3) {
        font-size: 12px
    }

    .order .header span:nth-of-type(4) {
        float: right;
        color: #999;
        font-size: 12px
    }

.description {
    line-height: 1.8rem;
    color: #999;
    font-size: 13px
}

    .description .icon {
        color: #ccc
    }

.ui.grid.help {
    margin-top: 2rem !important
}

    .ui.grid.help .row.two.column {
        padding: 1rem
    }

.ui.help-list {
    padding: 1rem 2rem 2rem 2rem
}

    .ui.help-list a {
        color: #999
    }

    .ui.help-list .one {
        text-Orangeverflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: .6rem 0 .6rem 0
    }

        .ui.help-list .one .icon {
            line-height: 15px;
            transform: scale(0.3)
        }

.feedback {
    margin-top: 2rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important
}

    .feedback .column {
        padding-top: 0rem !important;
        padding-bottom: 0rem !important
    }

    .feedback a {
        color: #303030
    }

.site-class {
    margin-top: 2rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    font-size: 12px
}

    .site-class .column {
        padding: 0 !important
    }

    .site-class a {
        color: #555
    }

.transition {
    animation-duration: 0 !important
}

.ui.dimmer {
    background-color: rgba(0,0,0,0.3) !important
}

.ui.help-list, .ui.grid.help {
    background: #fbfbfb
}

    .ui.help-list .ui.two.column.grid {
        padding: 1rem 0 1rem 0
    }

        .ui.help-list .ui.two.column.grid .student-help-bottom {
            position: absolute;
            bottom: -10px;
            left: 50%;
            right: 50%;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #fdedd7
        }

        .ui.help-list .ui.two.column.grid .teacher-help-bottom {
            display: none;
            position: absolute;
            bottom: -10px;
            width: 0;
            height: 0;
            left: 40%;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #e9f4ea
        }

        .ui.help-list .ui.two.column.grid .column:nth-of-type(1) {
            position: relative;
            border-radius: 7px 0 0 7px;
            background: #fdeace;
            padding: .6rem .3rem .6rem .3rem !important
        }

            .ui.help-list .ui.two.column.grid .column:nth-of-type(1) span {
                color: #4FA168;
                font-size: 16px
            }

        .ui.help-list .ui.two.column.grid .column:nth-of-type(2) {
            position: relative;
            border-radius: 0 7px 7px 0;
            background: #eaf4eb;
            padding: .6rem .3rem .6rem .3rem !important
        }

            .ui.help-list .ui.two.column.grid .column:nth-of-type(2) span {
                color: #28b7c9;
                font-size: 16px
            }

.student-help a, .teacher-help a, .student-help a:hover, .teacher-help a:hover {
    color: #555
}

.student-help .icon {
    color: #4FA168
}

.student-help .help-more {
    padding-top: 1rem;
    float: right;
    color: #4FA168
}

.teacher-help {
    display: none
}

    .teacher-help .icon {
        color: #62c3d0
    }

    .teacher-help .help-more {
        padding-top: 1rem;
        float: right;
        color: #62c3d0
    }

.letter {
    margin: 0 2rem 0 3rem !important;
    padding-bottom: 1rem !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

    .letter a, .letter a:hover {
        line-height: 2rem;
        color: #999
    }

    .letter .column {
        padding: 0 !important
    }

.quick.help-list {
    background: 0
}

    .quick.help-list .ui.two.column.grid .column:nth-of-type(1) {
        background: 0
    }

        .quick.help-list .ui.two.column.grid .column:nth-of-type(1) span:nth-of-type(2) {
            color: #303030
        }

    .quick.help-list .ui.two.column.grid .column:nth-of-type(2) {
        background: 0
    }

        .quick.help-list .ui.two.column.grid .column:nth-of-type(2) span {
            display: inline-block;
            padding-top: 10px;
            color: #4FA168
        }

    .quick.help-list .ui.two.column.grid .class-search-title span {
        margin: 0 5px 0 0
    }

    .quick.help-list .class-search-title-right a {
        display: inline-block;
        padding-top: 3px;
        font-size: 14px;
        color: #4FA168
    }

.delta {
    margin: auto 50%;
    position: relative;
    top: -10px;
    left: -15px;
    z-index: 999;
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent transparent white
}

.teacher-site {
    background: #fff
}

.teacher-select {
    z-index: 2;
    height: 45px;
    position: relative;
    padding: 5px 0 0 0;
    box-shadow: 2px 2px 5px #989898;
    border-radius: 5px;
    margin: 10px 20px
}

    .teacher-select .center.aligned.column {
        position: relative
    }

    .teacher-select .ui.four.column.grid {
        margin-left: 1rem;
        margin-right: 1rem;
        align-items: center
    }

    .teacher-select .subject, .teacher-select .school, .teacher-select .sex, .teacher-select .sort, .teacher-select .type, .teacher-select .filter, .teacher-select .area, .teacher-select .identity {
        padding: .2rem .2rem .2rem .8rem;
        border-radius: 5px;
        color: #555;
        font-weight: bold;
        font-size: 16px
    }

        .teacher-select .subject .icon, .teacher-select .school .icon, .teacher-select .sex .icon, .teacher-select .sort .icon, .teacher-select .type .icon, .teacher-select .filter .icon, .teacher-select .area .icon, .teacher-select .identity .icon {
            position: relative;
            top: 1px;
            transform: scale(0.7);
            font-size: 20px
        }

    .teacher-select .center.aligned.column {
        padding: .2rem .3rem .2rem .3rem !important;
        white-space: nowrap
    }

.subject .delta {
    top: -7px
}

.subject-more {
    z-index: 100 !important;
    background: #fff;
    width: 100vw;
    position: absolute;
    padding: 0 8px 0 0
}

    .subject-more .hot-sub {
        font-weight: 900;
        color: #4FA168;
        padding-left: 10px;
        font-size: 16px
    }

    .subject-more .subject-item {
        text-align: center;
        min-height: 25px;
        line-height: 25px;
        margin-top: 3px;
        margin-bottom: 2px;
        border: 1px solid #e9e9e9;
        padding: 3px 2px 3px 2px;
        border-radius: 10px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px
    }

    .subject-more .subject-all-item {
        border: 1px solid #e9e9e9;
        padding: 4px 10px;
        margin-right: 10px;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        border-radius: 5px
    }

    .subject-more .subject-nolimit {
        border: 1px solid #e9e9e9;
        padding: 4px 10px;
        position: absolute;
        top: 0;
        left: 60px;
        text-align: center;
        border-radius: 5px
    }

    .subject-more .one-layer {
        display: flex;
        justify-content: space-between;
        background-color: #f9f9f9;
        font-weight: 900;
        color: #4FA168;
        margin-top: 10px;
        padding: 5px
    }

    .subject-more .tow-layer {
        margin-top: 10px
    }

        .subject-more .tow-layer .line {
            min-height: 25px;
            line-height: 25px;
            margin-top: 3px;
            margin-bottom: 2px;
            padding: 3px 2px 3px 2px;
            overflow: hidden;
            white-space: nowrap;
            font-size: 14px;
            text-align: center;
            border-radius: 10px
        }

            .subject-more .tow-layer .line a {
                border: 1px solid #e9e9e9;
                border-radius: 10px
            }

    .subject-more a {
        display: block;
        width: 100%;
        height: 100%
    }

    .subject-more #tab-0 {
        margin-top: 10px
    }

    .subject-more #select-main {
        width: 100vw;
        margin: 0;
        padding: 0;
        overflow: hidden;
        position: relative;
        z-index: 5
    }

    .subject-more .select-box {
        background: #f2f2f2;
        line-height: 28px;
        position: relative;
        float: left;
        width: 85px;
        height: 490px
    }

        .subject-more .select-box ul {
            margin: 0;
            padding: 0;
            list-style: none;
            position: absolute;
            height: 25px;
            text-align: center
        }

        .subject-more .select-box li {
            display: block;
            cursor: pointer;
            width: 85px;
            color: #303030;
            height: 35px;
            line-height: 35px;
            background-color: #f2f2f2;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff
        }

            .subject-more .select-box li.hover {
                padding: 0;
                background: #fff;
                width: 85px;
                border: 1px solid #fff;
                border-right: 0;
                color: #555;
                height: 35px;
                line-height: 35px
            }

    .subject-more .select-content {
        margin-top: 0;
        border-top: 0;
        padding: 20px 0 0 3px;
        border-left: 0;
        margin-left: 100px
    }

        .subject-more .select-content *::-webkit-scrollbar {
            width: 2px;
            background: #f9f9f9
        }

        .subject-more .select-content div {
            overflow-y: auto;
            max-height: 470px
        }

        .subject-more .select-content .ui.four.column.grid {
            margin-bottom: .5rem
        }

        .subject-more .select-content .center.aligned.column {
            width: 28%;
            padding: .2rem .1rem .2rem .1rem !important;
            margin: .3rem .3rem .3rem .3rem !important;
            border-radius: 10px;
            color: #bfbfbf;
            background: #f2f2f2
        }

        .subject-more .select-content .row .icon {
            white-space: nowrap;
            color: #ffca47
        }

        .subject-more .select-content .row span {
            margin-right: 10px;
            color: #4FA168;
            font-weight: bold
        }

        .subject-more .select-content #con_one_1 .row {
            margin-bottom: 10px
        }

        .subject-more .select-content #con_one_2 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_3 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_4 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_5 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_6 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_7 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_8 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_9 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_10 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_11 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_12 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_13 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_14 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_15 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_16 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_17 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_18 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_19 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_20 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_21 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_22 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_23 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_24 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_25 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_26 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_27 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_28 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_29 {
            margin-top: 10px
        }

        .subject-more .select-content #con_one_30 {
            margin-top: 10px
        }

#teacher-top-select {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    background: white
}

    #teacher-top-select ::-webkit-scrollbar {
        width: 3px;
        display: none
    }

    #teacher-top-select .el-tabs {
        height: 100%
    }

    #teacher-top-select .el-tabs--left .el-tabs__item.is-left {
        text-align: center
    }

    #teacher-top-select .el-tabs__header .is-left {
        background: #f9f9f9;
        font-size: 14px;
        text-align: left !important
    }

    #teacher-top-select .el-tab-pane {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto
    }

    #teacher-top-select .el-tabs__item {
        padding: 0 10px;
        height: 37px;
        line-height: 37px
    }

        #teacher-top-select .el-tabs__item:hover {
            color: #4FA168
        }

        #teacher-top-select .el-tabs__item.is-active {
            font-weight: bold;
            color: #4FA168;
            background-color: white;
            font-size: 16px
        }

    #teacher-top-select .el-tabs__active-bar {
        display: none;
        background-color: #4FA168
    }

    #teacher-top-select .el-tabs--left .el-tabs__nav-wrap.is-left::after, #teacher-top-select .el-tabs--left .el-tabs__nav-wrap.is-right::after, #teacher-top-select .el-tabs--right .el-tabs__nav-wrap.is-left::after, #teacher-top-select .el-tabs--right .el-tabs__nav-wrap.is-right::after {
        display: none
    }

    #teacher-top-select .el-tabs__content {
        padding-top: 30px;
        height: 100%
    }

.area-more, .school-more, .identity-more, .filter-more {
    padding-top: 2rem !important;
    height: calc(100vh - 130px)
}

.subject-more {
    height: calc(100vh - 150px)
}

.area-more {
    z-index: 100 !important;
    padding: 1rem;
    background: #fff;
    width: 100vw;
    position: absolute
}

    .area-more .a-list {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        padding-bottom: 20px
    }

        .area-more .a-list a {
            width: 30%;
            font-size: 14px;
            text-align: center;
            margin: 5px;
            padding: 5px 10px 5px 10px;
            overflow: hidden;
            white-space: nowrap;
            border: 1px solid #e9e9e9;
            border-radius: 10px
        }

.school-more {
    z-index: 100 !important;
    background: #fff;
    width: 100vw;
    position: absolute;
    padding: 1rem
}

    .school-more .a-list {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        padding-bottom: 20px
    }

        .school-more .a-list a {
            width: 30%;
            font-size: 14px;
            text-align: center;
            margin: 5px;
            padding: 5px 10px 5px 10px;
            overflow: hidden;
            white-space: nowrap;
            border: 1px solid #e9e9e9;
            border-radius: 10px
        }

.identity-more {
    text-align: center;
    z-index: 100 !important;
    background: #fff;
    width: 100vw;
    position: absolute;
    padding: 1rem
}

    .identity-more a {
        width: 80%;
        text-align: center;
        display: inline-block;
        padding: .5rem;
        border: 1px solid #e9e9e9;
        border-radius: 10px;
        font-size: 14px;
        margin-bottom: .8rem
    }

.filter-more {
    z-index: 100 !important;
    background: #fff;
    width: 100vw;
    position: absolute;
    padding: 1rem
}

    .filter-more .four {
        text-align: center;
        padding: 0 !important
    }

    .filter-more .teacher-type {
        white-space: nowrap;
        padding: 0 !important
    }

    .filter-more a {
        display: inline-block;
        border: 1px solid #e9e9e9;
        padding: 5px 15px 5px 15px;
        border-radius: 9px 9px 9px 9px;
        font-size: 14px;
        color: #555
    }

    .filter-more .ui.grid .column {
        display: inline-block
    }

        .filter-more .ui.grid .column:nth-of-type(1) {
            padding-top: 8px !important;
            font-size: 13px
        }

        .filter-more .ui.grid .column:nth-of-type(2) {
            padding-top: 0 !important;
            padding-left: 0 !important;
            font-size: 14px
        }

    .filter-more .ui.grid .teacher-id input:focus {
        border: 1px solid #4FA168
    }

    .filter-more .ui.grid .teacher-id input {
        width: 220px
    }

    .filter-more .a_post {
        display: block;
        margin: 25px auto !important;
        padding-top: 5px;
        width: 100px;
        height: 30px;
        border-radius: 4px;
        background-color: #4FA168;
        color: #fff;
        font-size: 14px;
        text-align: center;
        border: 1px solid #4FA168
    }

.a_border {
    border: 1px solid #4FA168 !important
}

.teacher-index-title {
    margin: 10px 0 20px 25px
}

    .teacher-index-title span:nth-of-type(1) {
        display: inline-block;
        margin-right: 5px
    }

    .teacher-index-title h1 {
        margin: 0 !important;
        display: inline-block;
        color: #303030;
        font-size: 18px;
        font-weight: bold
    }

.teacher-label {
    position: relative;
    padding: 0 1rem 0 1rem !important
}

    .teacher-label .label {
        font-weight: normal !important;
        background: #fdeace !important;
        margin-bottom: .3rem !important;
        font-size: 13px !important
    }

        .teacher-label .label .icon {
            color: #4FA168 !important
        }

.el-icon-close.icon {
    position: absolute;
    z-index: 10;
    top: -5px;
    right: 15px;
    font-size: 25px
}

.more-main {
    box-shadow: 0 10px 10px 0 #dcdcdc;
    -webkit-box-shadow: 0 10px 10px 0 #dcdcdc;
    -moz-box-shadow: 0 10px 10px 0 #dcdcdc
}

.teacher-list a:hover {
    color: #333
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
}

.fade-enter, .fade-leave-to {
    opacity: 0
}

.teacher_icon {
    position: relative !important;
    transform: rotate(180deg) scale(0.7) !important;
    color: #4FA168
}

.teacher-index-bottom {
    margin: 15px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px 0 10px 0
}

    .teacher-index-bottom span:nth-of-type(1) {
        display: inline-block;
        margin-right: 5px
    }

    .teacher-index-bottom span:nth-of-type(2) {
        color: #303030;
        font-size: 18px;
        font-weight: bold
    }

    .teacher-index-bottom p {
        font-size: 13px;
        line-height: 23px;
        color: #999;
        margin-top: 10px;
        margin-left: 16px
    }

        .teacher-index-bottom p a, .teacher-index-bottom p a:hover {
            color: #4FA168
        }

.image-list {
    position: fixed !important;
    background: #000 !important;
    z-index: 999 !important;
    height: 100% !important;
    width: 100% !important;
    top: 0
}

    .image-list .swiper-container-image .swiper-pagination {
        position: relative;
        color: #fff;
        font-size: 18px;
        z-index: 99999 !important;
        height: 0;
        bottom: 95vh;
        padding-top: 0
    }

    .image-list .close {
        display: block !important;
        z-index: 999999 !important
    }

    .image-list .swiper-container-image {
        background: #000 !important;
        height: 100vh !important
    }

    .image-list .swiper-slide {
        width: 100vw !important;
        height: 100vh !important
    }

        .image-list .swiper-slide video {
            autoplay: autoplay;
            object-fit: fill;
            width: 100vw;
            height: 220px;
            position: absolute;
            left: 0;
            top: 33%
        }

.swiper-container-image {
    background: white;
    margin-top: 10px;
    height: 220px
}

    .swiper-container-image .swiper-slide {
        width: 100vw;
        height: 100px
    }

    .swiper-container-image .close {
        display: none;
        position: absolute;
        top: 5%;
        right: 5%;
        color: #fff;
        font-size: 18px;
        z-index: 2
    }

    .swiper-container-image .swiper-scrollbar {
        bottom: 189px !important;
        z-index: 1
    }

    .swiper-container-image .swiper-pagination {
        position: relative;
        color: #fff;
        font-size: 18px;
        height: 220px;
        z-index: 9999999 !important;
        bottom: 220px;
        padding-top: 200px
    }

    .swiper-container-image .swiper-slide video {
        object-fit: fill;
        width: 100vw;
        height: 220px;
        position: absolute;
        left: 0;
        top: 35%
    }

    .swiper-container-image .swiper-slide img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        transform: translate(-50%,-50%);
        position: absolute;
        left: 50%;
        top: 50%;
        vertical-align: middle
    }

.swiper-button-prev:after, .swiper-button-next:after {
    color: #fff
}

.teacher-info-site {
    margin-top: 45px;
    padding-left: 14px;
    background: #fff;
    margin-bottom: 0
}

.teacher-info-carousel {
    box-sizing: border-box;
    height: 220px;
    background: #fbfbfb;
    overflow: hidden
}

    .teacher-info-carousel .teacher-image-main {
        box-sizing: border-box;
        float: left;
        height: 220px;
        width: 73%;
        border-right: 5px solid #e9e9e9
    }

        .teacher-info-carousel .teacher-image-main img {
            width: 100%;
            height: 100%
        }

        .teacher-info-carousel .teacher-image-main video {
            width: 100%;
            height: 100%;
            object-fit: fill
        }

    .teacher-info-carousel .right1 {
        box-sizing: border-box;
        float: left;
        height: 110px;
        width: 27%;
        border-bottom: 5px solid #e9e9e9
    }

        .teacher-info-carousel .right1 img {
            width: 100%;
            height: 100%
        }

    .teacher-info-carousel .right2 {
        text-align: center;
        box-sizing: border-box;
        float: left;
        height: 110px;
        width: 27%;
        background-size: cover;
        background: #4FA168
    }

        .teacher-info-carousel .right2 span {
            display: block;
            margin: 40% auto;
            color: #fff;
            font-weight: bold;
            font-size: 18px
        }

.teacher.jy-list {
    display: inline;
    background: 0;
    padding: 0 !important;
    margin: 0
}

.info-nav {
    height: 50px;
    background: #fff;
    color: #4FA168;
    line-height: 41px;
    font-size: 18px;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 9;
    padding-bottom: 60px
}

    .info-nav .info-left, .info-nav .info-return {
        float: left;
        color: #303030;
        font-size: 18px;
        font-weight: bold
    }

    .info-nav .info-left {
        line-height: 53px
    }

    .info-nav .info-return {
        line-height: 51px
    }

    .info-nav .right-city, .info-nav .right-more, .info-nav .right-logo, .info-nav .right-share {
        float: right;
        height: 40px
    }

    .info-nav .right-logo {
        margin-top: 8px;
        margin-left: 4px
    }

    .info-nav .right-share {
        margin-top: 10px;
        margin-right: 5px
    }

    .info-nav .right-more {
        margin-top: 10px
    }

        .info-nav .right-more .icon {
            margin-top: 3px;
            transform: scale(0.8);
            font-size: 24px
        }

    .info-nav .info-return {
        margin-top: 6.5px;
        margin-left: 0
    }

    .info-nav .info-left {
        margin-top: 5.5px
    }

    .info-nav .right-share {
        height: 40px;
        padding-top: 5px
    }

        .info-nav .right-share svg {
            z-index: 3;
            fill: #4FA168;
            width: 20px;
            height: 20px
        }

    .info-nav .right-city {
        position: relative;
        line-height: 40px
    }

        .info-nav .right-city a, .info-nav .right-city a:hover {
            color: #4FA168;
            font-size: 18px
        }

        .info-nav .right-city .icon {
            position: relative;
            bottom: -8px;
            left: -10px;
            transform: rotate(-45deg);
            font-size: 10px !important
        }

.teacher-info-top .teacher-img {
    width: 35%;
    float: left;
    padding: 20px 0 0 20px
}

    .teacher-info-top .teacher-img img {
        width: 90px;
        height: 90px;
        border-radius: 5px;
        margin-bottom: 15px
    }

.teacher-info-top .teacher-info {
    width: 65%;
    float: left;
    padding-top: 20px;
    padding-right: 20px
}

    .teacher-info-top .teacher-info .teacher-name {
        margin-bottom: 5px
    }

        .teacher-info-top .teacher-info .teacher-name span:nth-of-type(1) {
            font-size: 18px;
            color: #303030
        }

        .teacher-info-top .teacher-info .teacher-name span:nth-of-type(2) {
            font-size: 13px
        }

    .teacher-info-top .teacher-info .teacher-login {
        color: #999;
        font-size: 13px
    }

    .teacher-info-top .teacher-info .teacher-medal {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between
    }

        .teacher-info-top .teacher-info .teacher-medal .teacher-pass {
            box-sizing: border-box;
            text-align: center;
            border-radius: 5px;
            height: 22px;
            border: 1px solid #4FA168;
            font-size: 12px;
            line-height: 20px;
            color: #4FA168;
            padding: 0 5px 1px 5px;
            margin-right: 5px
        }

        .teacher-info-top .teacher-info .teacher-medal .jy-list.teacher {
            margin-bottom: 5px
        }

        .teacher-info-top .teacher-info .teacher-medal .jy-star {
            color: #4FA168
        }

        .teacher-info-top .teacher-info .teacher-medal img {
            line-height: 15px
        }

        .teacher-info-top .teacher-info .teacher-medal .cheng, .teacher-info-top .teacher-info .teacher-medal .ping {
            display: inline-block;
            height: 16px;
            width: 16px;
            text-align: center;
            line-height: 16px;
            border-radius: 3px;
            margin-right: 2px
        }

.base-top {
    height: 45px;
    line-height: 45px
}

    .base-top span {
        display: inline-block
    }

        .base-top span:nth-of-type(2) {
            font-size: 14px;
            margin-left: 10px
        }

    .base-top .base-info:nth-last-child(1) div {
        width: auto
    }

    .base-top .base-info:nth-last-child(2) div {
        width: auto
    }

    .base-top .base-title {
        font-weight: bold;
        font-size: 18px
    }

.teacher-base-info .base-info {
    margin-right: 5px;
    margin-left: 5px;
    border-bottom: 1px dashed #dcdcdc;
    margin-bottom: 10px
}

    .teacher-base-info .base-info div {
        margin: 0;
        width: 50%;
        float: left;
        margin-bottom: 8px
    }

        .teacher-base-info .base-info div .left {
            margin-left: 0;
            padding-left: 15px;
            color: #999;
            font-size: 12px
        }

        .teacher-base-info .base-info div .right {
            padding-left: 0;
            color: #555;
            margin-left: 0;
            font-size: 14px
        }

            .teacher-base-info .base-info div .right .icon {
                width: 10px;
                height: 10px;
                color: #555
            }

.tutor-info {
    word-break: break-all
}

.tutor-list {
    margin-bottom: 15px
}

.tutor-info-title {
    color: #4FA168
}

.tutor-info-main {
    color: #555;
    line-height: 25px
}

    .tutor-info-main a, .tutor-info-main a:hover {
        margin-right: 10px;
        color: #28b7c9;
        line-height: 25px
    }

.tutor-join .share, .tutor-join .collect {
    text-align: center;
    margin: 10px;
    float: left
}

.tutor-join .tutor-share {
    font-size: 12px;
    padding-top: 1rem;
    padding-left: 2rem
}

.tutor-join .tg-label-help {
    position: relative;
    left: 10px;
    top: 15px
}

.tutor-join svg {
    width: 20px;
    height: 20px;
    fill: #4FA168
}

.tutor-join button {
    color: #fff;
    border: 0;
    height: 35px;
    padding: 4px 15px 4px 15px;
    font-size: 13px;
    border-radius: 9px 0 9px 0;
    top: 15px;
    left: 10px;
    margin-right: 10px
}

.tutor-join .add-bnt {
    background: #4FA168
}

.tutor-join .line-bnt {
    background: #4FA168
}

.tutor-join .tutor-help {
    text-align: center;
    padding-bottom: 30px
}

    .tutor-join .tutor-help img {
        position: relative;
        top: 8px;
        left: -8px
    }

    .tutor-join .tutor-help span:nth-of-type(1) {
        text-align: center;
        margin-bottom: 10px
    }

        .tutor-join .tutor-help span:nth-of-type(1) a {
            font-size: 18px;
            font-weight: bold
        }

    .tutor-join .tutor-help span:nth-of-type(2) {
        display: inline-block;
        color: #999;
        font-size: 11px;
        margin-bottom: 5px
    }

    .tutor-join .tutor-help span:nth-of-type(3) {
        margin-bottom: 10px;
        display: inline-block;
        color: #999;
        font-size: 13px
    }

    .tutor-join .tutor-help a, .tutor-join .tutor-help a:hover {
        color: #4FA168
    }

.student-reviews .tg-left-label {
    background: #4FA168
}

.student-reviews .left {
    float: left
}

.student-reviews .right {
    float: right
}

    .student-reviews .right a, .student-reviews .right a:hover {
        line-height: 45px;
        color: #4FA168
    }

.student-reviews .title .right {
    padding-right: 20px
}

.student-reviews .student-label {
    margin: 0 30px 10px 11px;
    padding: 10px;
    border-top: 1px dotted #bfbfbf;
    border-bottom: 1px dotted #bfbfbf
}

    .student-reviews .student-label .item {
        float: left;
        line-height: 10px;
        border: 1px solid #ccc;
        color: #999;
        border-radius: 10px;
        padding: 8px;
        margin: 5px;
        text-align: center;
        vertical-align: middle;
        font-size: 13px
    }

.student-reviews .student-comment span {
    display: block;
    font-size: 16px;
    font-weight: normal;
    color: #303030
}

    .student-reviews .student-comment span .date {
        float: right;
        color: #555;
        font-size: 14px
    }

.student-reviews .student-comment .feedback {
    padding: 0 0 1rem 0 !important;
    margin-right: 2rem;
    margin-left: 2rem;
    border-bottom: 1px dotted #bfbfbf
}

.student-reviews .student-comment .describe {
    font-size: 14px;
    color: #555;
    line-height: 25px
}

.student-reviews .student-comment .start-time {
    font-size: 10px;
    color: #999
}

.student-reviews .student-comment .tags {
    color: #999;
    font-size: 12px
}

.student-reviews .student-comment .versus {
    text-align: right;
    font-size: 12px
}

.student-reviews .student-comment .teacher-comment, .student-reviews .student-comment .student-comment-info {
    margin: 5px;
    font-size: 14px;
    display: inline-block;
    color: #999
}

    .student-reviews .student-comment .teacher-comment span, .student-reviews .student-comment .student-comment-info span {
        display: inline-block;
        font-size: 14px;
        color: #555
    }

    .student-reviews .student-comment .teacher-comment .time, .student-reviews .student-comment .student-comment-info .time {
        color: #999;
        display: inline-block;
        text-indent: 3px
    }

.student-reviews.log {
    background: #fbfbfb;
    padding-bottom: 20px
}

    .student-reviews.log .title {
        border-bottom: 1px dotted #bfbfbf
    }

        .student-reviews.log .title .right {
            padding-right: 10px
        }

    .student-reviews.log .log-info {
        padding: 10px;
        border-bottom: 1px dotted #bfbfbf;
        font-size: 16px
    }

        .student-reviews.log .log-info .right {
            font-size: 13px;
            color: #999
        }

        .student-reviews.log .log-info span {
            display: block;
            font-size: 15px;
            color: #555;
            line-height: 30px
        }

.student-comment:last-child .feedback {
    border-bottom: 0
}

.teacher-info-bottom-nav {
    z-index: 9;
    text-align: center;
    width: 100%;
    height: 55px;
    background: #f9f9f9;
    position: fixed;
    bottom: 0;
    list-style-type: none;
    padding: 0;
    color: #999
}

    .teacher-info-bottom-nav .add-bnt {
        background: #4FA168
    }

    .teacher-info-bottom-nav .line-bnt {
        background: #4FA168
    }

    .teacher-info-bottom-nav svg {
        fill: #999
    }

    .teacher-info-bottom-nav .icon {
        margin-top: 11px;
        width: 20px;
        height: 20px
    }

    .teacher-info-bottom-nav .collect {
        position: relative;
        float: left;
        margin-left: 20px
    }

        .teacher-info-bottom-nav .collect span {
            position: relative;
            top: 2px;
            font-size: 12px
        }

        .teacher-info-bottom-nav .collect a, .teacher-info-bottom-nav .collect a:hover {
            color: #999
        }

    .teacher-info-bottom-nav button {
        float: left;
        color: #fff;
        border: 0;
        height: 33px;
        width: 6.5rem;
        padding: 2px 5px 2px 5px;
        font-size: 16px;
        top: 11px;
        left: 20px
    }

    .teacher-info-bottom-nav .collect:last-child {
        margin-right: 25px;
        float: right
    }

.subject-more.student {
    font-size: 13px
}

    .subject-more.student .row:nth-child(1) {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 10%
    }

    .subject-more.student input[type=text] {
        width: 80%;
        border: 1px solid #e9e9e9;
        height: 30px;
        padding: 10px
    }

        .subject-more.student input[type=text]:focus {
            outline: 0;
            border: 1px solid #dcdcdc
        }

        .subject-more.student input[type=text]::-webkit-input-placeholder {
            color: #dcdcdc
        }

    .subject-more.student button {
        background: #4FA168;
        color: #fff;
        border: 0;
        height: 30px;
        border-radius: 5px;
        width: 38%;
        margin: 10px
    }

    .subject-more.student .subject-list {
        margin-bottom: 20px;
        justify-content: center
    }

        .subject-more.student .subject-list a {
            display: block;
            width: 100%;
            height: 100%
        }

    .subject-more.student .center.aligned.column {
        padding: 5px 0 !important;
        color: #bfbfbf;
        background: #f9f9f9;
        border-radius: 10px;
        margin: .3rem !important;
        width: 20%
    }

.filter-more a {
    padding: 9px
}

.filter-more.student .row {
    display: flex;
    justify-content: space-evenly;
    margin: 10px 10%
}

.filter-more.student input[type=text] {
    width: 80%;
    border: 1px solid #e9e9e9;
    height: 30px
}

    .filter-more.student input[type=text]:focus {
        outline: 0;
        border: 1px solid #dcdcdc
    }

    .filter-more.student input[type=text]::-webkit-input-placeholder {
        color: #dcdcdc
    }

.filter-more.student button {
    background: #4FA168;
    color: #fff;
    border: 0;
    height: 30px;
    border-radius: 5px;
    width: 38%
}

.area-more.student .a-list a {
    width: auto
}

.x-box .el-checkbox {
    position: relative;
    top: 2px
}

.x-box .el-checkbox, .x-box .is-checked {
    color: #4FA168
}

.x-box .el-checkbox__inner, .x-box .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #4FA168
}

.x-box .el-checkbox__input.is-checked .el-checkbox__inner, .x-box .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #4FA168;
    border-color: #4FA168
}

.x-box .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #4FA168
}

.x-box .el-checkbox__label {
    padding-left: 0
}

.order.student {
    border-top: 0
}

    .order.student a {
        width: 100%
    }

.teacher-index-title.student {
    margin-bottom: 10px
}

.student-title {
    text-align: left;
    padding: 10px 0 0 0;
    margin: 10px 0 0 0;
    border-radius: 8px
}

    .student-title h2 {
        font-weight: 900;
        font-size: 22px
    }

.student-top-image {
    margin: 20px
}

    .student-top-image img {
        width: 100%;
        height: auto
    }

.student-order-info {
    padding: 15px 0;
    line-height: 25px;
    background: white
}

    .student-order-info .row:nth-child(10) .right {
        color: #4FA168;
        font-size: 16px
    }

    .student-order-info .row:nth-child(5) .right span {
        display: inline-block;
        color: #62c3d0;
        padding-top: 5px
    }

    .student-order-info .row:nth-child(5) .right a {
        margin-left: 10px;
        margin-right: 10px;
        background: #4FA168;
        color: white;
        padding: 0 5px;
        font-size: 13px;
        line-height: 20px;
        border-radius: 3px
    }

    .student-order-info .column {
        padding: 0 !important
    }

    .student-order-info .row {
        position: relative;
        margin-top: 6px !important;
        padding-bottom: 6px;
        border-bottom: 1px dashed #bfbfbf
    }

    .student-order-info .left {
        vertical-align: top;
        display: inline-block;
        color: #999;
        font-size: 13px;
        padding-left: 10px
    }

    .student-order-info .right {
        display: inline-block;
        color: #303030;
        font-size: 15px;
        width: 70%
    }

.student-apply .tutor-join .tutor-share, .student-apply .tutor-help {
    background: #fff
}

.student-apply .tutor-join {
    border-radius: 8px;
    margin: 25px 0
}

.student-apply .apply-number {
    font-size: 13px;
    top: 15px
}

    .student-apply .apply-number span {
        color: #4FA168
    }

.student-apply .tutor-share {
    padding-left: 3.5rem
}

.student-apply .tg-label-help {
    top: 15px
}

.student-apply button {
    background: #4FA168 !important;
    font-weight: bold;
    height: 40px;
    padding: 4px 40px;
    font-size: 18px
}

.teacher-apply-post {
    margin: 20px 8%
}

    .teacher-apply-post .ui.form textarea:not([rows]) {
        height: 5em
    }

    .teacher-apply-post .ui.form textarea {
        border: 1px solid #fff
    }

    .teacher-apply-post button {
        width: 100%;
        background: #4FA168 !important;
        color: #fff !important;
        font-weight: normal !important
    }

    .teacher-apply-post textarea {
        background: #f9f9f9 !important
    }

        .teacher-apply-post textarea:focus {
            border-color: #4FA168 !important
        }

.teacher-apply-help-text {
    margin: 20px 8%;
    font-size: 14px;
    border-radius: 10px;
    padding: 20px;
    line-height: 30px;
    color: #303030
}

.teacher-apply-bottom {
    font-size: 12px;
    color: #bfbfbf;
    text-align: center;
    padding-bottom: 80px
}

.teacher-apply-success {
    padding: 40px;
    background: #fbfbfb;
    color: #303030
}

    .teacher-apply-success .image {
        margin-bottom: 10px;
        position: relative
    }

        .teacher-apply-success .image span {
            position: absolute;
            display: inline-block;
            font-weight: bold;
            top: 40px;
            left: 100px;
            font-size: 18px;
            color: #f56c6c
        }

.apply-reg {
    box-sizing: border-box;
    position: relative;
    top: -20px;
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    margin: 15px;
    box-shadow: 1px 8px 30px 5px #f2f2f2;
    -webkit-box-shadow: 1px 8px 30px 5px #f2f2f2;
    -moz-box-shadow: 1px 8px 30px 5px #f2f2f2
}

    .apply-reg .apply-reg-top {
        padding-right: 20px;
        padding-left: 20px
    }

    .apply-reg .phone {
        font-size: 24px;
        color: #4FA168;
        font-weight: bold
    }

.teacher-apply-tab .el-checkbox__label {
    display: none
}

.teacher-apply-tab .el-tabs.el-tabs--top {
    margin-top: 10px
}

.teacher-apply-tab .el-tabs__item.is-top.is-active {
    font-size: 18px;
    font-weight: 900
}

.teacher-apply-tab .el-tabs__item.is-top {
    font-size: 16px;
    font-weight: 900
}

.teacher-apply-tab .el-checkbox__inner {
    height: 17px;
    width: 17px
}

.teacher-apply-tab .el-input {
    height: 30px;
    line-height: 30px
}

.teacher-apply-tab .el-checkbox__inner::after {
    border: 3px solid #fff;
    border-left: 0;
    border-top: 0
}

.teacher-apply-tab .ele_tab {
    padding: 0
}

    .teacher-apply-tab .ele_tab .el-tabs__header {
        margin: 0 20px 0 20px
    }

    .teacher-apply-tab .ele_tab .help {
        line-height: 20px;
        font-size: 12px;
        padding: 20px;
        background: #f2f2f2
    }

        .teacher-apply-tab .ele_tab .help .text {
            display: flex;
            justify-content: space-between
        }

            .teacher-apply-tab .ele_tab .help .text .tg-label-help {
                color: #fff
            }

            .teacher-apply-tab .ele_tab .help .text span {
                color: #4FA168
            }

    .teacher-apply-tab .ele_tab .post span {
        display: block
    }

    .teacher-apply-tab .ele_tab .post button {
        background: #4FA168
    }

    .teacher-apply-tab .ele_tab .post .reg-main .el-textarea__inner {
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid #bfbfbf;
        resize: none
    }

    .teacher-apply-tab .ele_tab .teacher-apply-list .row-bg {
        align-items: center;
        padding: 10px 0 10px 0;
        background: white;
        border-bottom: 8px solid #f9f9f9
    }

    .teacher-apply-tab .ele_tab .teacher-apply-list .list-select {
        padding-left: 20px
    }

    .teacher-apply-tab .ele_tab .teacher-apply-list .list-img img {
        width: 35px;
        height: 35px;
        border-radius: 50%
    }

    .teacher-apply-tab .ele_tab .teacher-apply-list .list-info span {
        display: block;
        font-size: 14px;
        line-height: 22px
    }

    .teacher-apply-tab .ele_tab .teacher-apply-list .list-time {
        text-align: right;
        padding-right: 20px
    }

        .teacher-apply-tab .ele_tab .teacher-apply-list .list-time button {
            background: #4FA168;
            font-size: 11px;
            padding: 3px 7px;
            border-radius: 5px;
            color: #fff;
            border: 0;
            margin-top: 5px
        }

        .teacher-apply-tab .ele_tab .teacher-apply-list .list-time span {
            display: block;
            font-size: 12px
        }

.help-tab .ui.top.attached.tabular.menu {
    justify-content: center
}

.help-tab span {
    color: #555
}

.help-tab .el-tabs__item.is-top.is-active {
    font-size: 20px !important;
    font-weight: bold !important;
    line-height: 30px !important
}

.help-tab .el-tabs__item {
    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 30px !important;
    color: #555
}

.help-tab .el-tab-pane {
    padding: 20px 15px 15px 15px !important
}

    .help-tab .el-tab-pane a {
        color: #555
    }

.help-tab .item.active span {
    color: #4FA168
}

.help-tab .ui.segment[class*="bottom attached"] {
    margin-bottom: 0
}

.help-tab .ui.bottom.attached.tab.segment {
    border: 0
}

    .help-tab .ui.bottom.attached.tab.segment #student_help_list, .help-tab .ui.bottom.attached.tab.segment #teacher_help_list {
        text-align: left
    }

    .help-tab .ui.bottom.attached.tab.segment .list {
        text-align: center
    }

        .help-tab .ui.bottom.attached.tab.segment .list a, .help-tab .ui.bottom.attached.tab.segment .list a:hover {
            display: inline-block;
            color: #555
        }

.help-post-bottom {
    margin: 10px
}

    .help-post-bottom button {
        width: 100%;
        background: #4FA168 !important;
        color: #fff !important;
        font-weight: normal !important
    }

    .help-post-bottom textarea {
        background: #f9f9f9 !important
    }

        .help-post-bottom textarea:focus {
            border-color: #4FA168 !important
        }

    .help-post-bottom input {
        background: #f9f9f9 !important
    }

        .help-post-bottom input:focus {
            border-color: #4FA168 !important
        }

.detail-top-image {
    margin-top: 10px;
    margin-bottom: 10px
}

    .detail-top-image img {
        width: 100%;
        height: 220px
    }

.detail-text {
    margin: 50px 12% 50px
}

    .detail-text .fee-a {
        border-top: 1px solid #4FA168;
        padding: 20px 0 50px 0
    }

    .detail-text .fee-b {
        border-top: 1px solid #4FA168;
        border-bottom: 1px solid #4FA168;
        padding: 20px 0 20px 0
    }

    .detail-text h2 {
        padding: 25px 0 0 0;
        font-width: 700 !important
    }

    .detail-text .view-count {
        color: #bfbfbf;
        margin: 13px 11px 30px 0;
        display: flex;
        justify-content: flex-start;
        align-items: center
    }

        .detail-text .view-count img {
            width: 20px;
            height: 20px;
            border-radius: 50%
        }

    .detail-text .detail-text-content {
        color: #555;
        line-height: 25px
    }

        .detail-text .detail-text-content p {
            line-height: 30px
        }

    .detail-text .useful {
        display: flex;
        justify-content: space-around;
        font-size: 13px
    }

        .detail-text .useful div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            height: 60px;
            margin: 40px 10px 40px 10px;
            background: #f9f9f9;
            border-radius: 10px
        }

            .detail-text .useful div img {
                margin-right: 10px;
                width: 25px;
                height: 25px
            }

.help-nav {
    z-index: 9999;
    padding-top: 10px;
    display: flex;
    justify-content: space-evenly;
    text-align: center
}

    .help-nav .button {
        font-weight: normal;
        color: white;
        background: #4FA168;
        border-radius: 9px 0
    }

        .help-nav .button:hover {
            color: white;
            background: #4FA168
        }

.help-about {
    padding: 20px
}

    .help-about li {
        border-bottom: 1px dashed #e4e7ed !important;
        padding-bottom: 10px
    }

    .help-about .title {
        margin-left: 10px;
        font-size: 16px;
        font-weight: bold
    }

    .help-about ul {
        padding-left: 18px;
        margin-top: 20px
    }

.login-bottom {
    text-align: right
}

    .login-bottom a, .login-bottom a:hover {
        color: #4FA168
    }

    .login-bottom .reg-pwd {
        padding-right: 25px
    }

    .login-bottom .login-bottom-img {
        position: relative;
        text-align: center
    }

        .login-bottom .login-bottom-img .hr {
            width: 100%;
            position: absolute;
            top: 20px;
            height: 1px;
            background: #f2f2f2;
            z-index: -1
        }

        .login-bottom .login-bottom-img span {
            font-size: 12px;
            color: #bfbfbf
        }

.account-login .reg-main, .msg-login .reg-main {
    margin-top: -15px
}

.ele_tab {
    padding: 20px
}

    .ele_tab .el-tabs__item:hover {
        color: #4FA168;
        cursor: pointer
    }

    .ele_tab .el-tabs__active-bar {
        background-color: #4FA168
    }

    .ele_tab .el-tabs__item.is-active {
        color: #4FA168
    }

.reg-top {
    margin: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .reg-top .left {
        font-size: 16px
    }

        .reg-top .left .icon {
            color: #bfbfbf;
            font-weight: normal
        }

        .reg-top .left span {
            color: #303030;
            font-weight: bold
        }

.reg-main {
    margin: 30px 10% 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column
}

    .reg-main .el-input__inner {
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid #bfbfbf
    }

        .reg-main .el-input__inner:after {
            border-bottom: 1px solid #bfbfbf
        }

        .reg-main .el-input__inner:focus {
            border-bottom: 1px solid #4FA168
        }

    .reg-main .el-radio.is-checked .el-radio__label {
        color: #4FA168
    }

    .reg-main .el-radio__inner {
        width: 15px;
        height: 15px
    }

    .reg-main .el-radio {
        margin-right: 0
    }

    .reg-main .el-radio__input.is-checked .el-radio__inner {
        border-color: #4FA168;
        background: #4FA168
    }

        .reg-main .el-radio__input.is-checked .el-radio__inner:hover {
            border-color: #4FA168
        }

    .reg-main .el-button--primary.is-disabled {
        background-color: #4FA168;
        border-color: #4FA168
    }

    .reg-main .el-button--primary {
        width: 100%;
        background-color: #4FA168;
        border-color: #4FA168
    }

        .reg-main .el-button--primary:hover {
            background-color: #4FA168;
            border-color: #4FA168
        }

    .reg-main .user-agree .el-checkbox__inner {
        border-color: #4FA168
    }

        .reg-main .user-agree .el-checkbox__inner:hover {
            border-color: #4FA168
        }

    .reg-main .user-agree .is-checked .el-checkbox__inner {
        background-color: #4FA168;
        border-color: #4FA168
    }

    .reg-main .user-agree a, .reg-main .user-agree a:hover {
        font-size: 12px;
        color: #999
    }

    .reg-main .msg_code .el-button {
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding: 0;
        background-color: white;
        border-color: #4FA168;
        color: #4FA168;
        right: 0
    }

        .reg-main .msg_code .el-button:hover {
            background-color: white;
            border-color: #4FA168;
            color: #4FA168
        }

    .reg-main .img_code {
        position: relative
    }

        .reg-main .img_code img {
            width: 100%;
            height: 38px;
            right: 0
        }

.reg-teacher-one, .reg-teacher-two {
    margin: 20px 35px 50px 35px
}

    .reg-teacher-one .el-form-item__label, .reg-teacher-two .el-form-item__label {
        color: #4FA168
    }

    .reg-teacher-one .el-date-editor.el-input, .reg-teacher-two .el-date-editor.el-input {
        width: 100%
    }

    .reg-teacher-one .el-select, .reg-teacher-two .el-select, .reg-teacher-one .el-input, .reg-teacher-two .el-input, .reg-teacher-one .el-input__inner, .reg-teacher-two .el-input__inner {
        width: 100%
    }

        .reg-teacher-one .el-input__inner:focus, .reg-teacher-two .el-input__inner:focus, .reg-teacher-one .el-textarea__inner:focus, .reg-teacher-two .el-textarea__inner:focus {
            border-color: #4FA168
        }

        .reg-teacher-one .el-select .el-input__inner:focus, .reg-teacher-two .el-select .el-input__inner:focus {
            border-color: #4FA168
        }

        .reg-teacher-one .el-select .el-input.is-focus .el-input__inner, .reg-teacher-two .el-select .el-input.is-focus .el-input__inner {
            border-color: #4FA168
        }

    .reg-teacher-one button, .reg-teacher-two button, .reg-teacher-one button:hover, .reg-teacher-two button:hover {
        width: 100%;
        background-color: #4FA168;
        border-color: #4FA168
    }

    .reg-teacher-one .avatar-uploader {
        text-align: center
    }

        .reg-teacher-one .avatar-uploader img {
            width: 111px;
            height: 130px;
            border: 1px solid #f2f2f2;
            border-radius: 7px
        }

    .reg-teacher-two .el-checkbox__input.is-checked .el-checkbox__inner, .reg-teacher-two .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #4FA168;
        border-color: #4FA168
    }

    .reg-teacher-two .el-checkbox__inner:hover {
        border-color: #4FA168 !important
    }

    .reg-teacher-two .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #4FA168
    }

    .reg-teacher-two .el-tree {
        border-radius: 4px;
        border: 1px solid #dcdfe6
    }

    .reg-teacher-two .disabled .el-upload--picture-card {
        display: none
    }

.notes-top-tag {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-top: 10px
}

    .notes-top-tag span {
        display: inline-block;
        font-size: 12px;
        margin-bottom: 5px
    }

    .notes-top-tag a {
        display: inline-block;
        padding: 1px 15px 1px 15px;
        border: 1px solid #f2f2f2;
        color: #999;
        border-radius: 13px;
        margin-right: 5px;
        letter-spacing: 1px;
        font-size: 10px;
        margin-bottom: 5px
    }

.notes .ele_tab {
    padding-top: 0
}

    .notes .ele_tab .title {
        width: 100%
    }

    .notes .ele_tab .new-notes {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between
    }

        .notes .ele_tab .new-notes .right-img {
            border-radius: 5px
        }

            .notes .ele_tab .new-notes .right-img img {
                border-radius: 5px
            }

        .notes .ele_tab .new-notes .left {
            height: 60px;
            width: calc(100% - 80px);
            padding-right: 10px
        }

            .notes .ele_tab .new-notes .left .title {
                font-size: 16px;
                overflow: hidden;
                text-Orangeverflow: ellipsis;
                white-space: nowrap
            }

            .notes .ele_tab .new-notes .left .describe {
                font-size: 12px;
                color: #bfbfbf;
                margin-bottom: 5px;
                margin-top: 5px;
                overflow: hidden;
                text-Orangeverflow: ellipsis;
                white-space: nowrap
            }

        .notes .ele_tab .new-notes img {
            width: 80px;
            height: 60px
        }

        .notes .ele_tab .new-notes .view-count {
            color: #bfbfbf;
            display: flex;
            justify-items: center;
            justify-content: space-between;
            align-items: center
        }

            .notes .ele_tab .new-notes .view-count .name {
                display: flex;
                align-items: center
            }

            .notes .ele_tab .new-notes .view-count img {
                width: 20px;
                height: 20px;
                border-radius: 50%
            }

.detail-text-content {
    margin-bottom: 20px
}

.detail-comment-list {
    background: #f9f9f9;
    padding: 20px
}

    .detail-comment-list .title {
        margin-left: 10px;
        font-size: 18px
    }

    .detail-comment-list .comment {
        margin-top: 20px
    }

        .detail-comment-list .comment .top {
            display: flex;
            justify-content: space-between
        }

            .detail-comment-list .comment .top .name {
                display: flex;
                align-items: center;
                margin-bottom: 15px
            }

                .detail-comment-list .comment .top .name span {
                    display: inline-block;
                    margin-left: 5px
                }

            .detail-comment-list .comment .top img {
                width: 20px;
                height: 20px;
                border-radius: 50%
            }

.notes-comment-post {
    margin-top: 40px
}

    .notes-comment-post .post {
        margin: 10px
    }

        .notes-comment-post .post button {
            width: 100%;
            background: #4FA168 !important;
            color: #fff !important;
            font-weight: normal !important
        }

        .notes-comment-post .post textarea {
            background: #f9f9f9 !important
        }

            .notes-comment-post .post textarea:focus {
                border-color: #4FA168 !important
            }

        .notes-comment-post .post input {
            background: #f9f9f9 !important
        }

            .notes-comment-post .post input:focus {
                border-color: #4FA168 !important
            }

.notes-detail {
    border-top: 10px solid white
}

    .notes-detail .notes {
        margin-top: 10px
    }

    .notes-detail .ele_tab {
        padding: 0
    }

        .notes-detail .ele_tab .left .title {
            margin: 0
        }

.about-top-nav {
    height: 220px
}

    .about-top-nav nav .info-nav {
        position: static;
        background: 0
    }

        .about-top-nav nav .info-nav .info-left {
            color: #4FA168
        }

.about-main .title {
    margin-bottom: 20px
}

    .about-main .title h1 {
        font-weight: bold
    }

.about-main .text {
    margin-bottom: 20px;
    line-height: 25px
}

.about-main .about-post .zan-father {
    display: flex;
    justify-content: center
}

.about-main .about-post .zan {
    padding: 10px 0;
    width: 60px;
    height: 60px;
    background: #f2f2f2;
    text-align: center;
    border-radius: 50%;
    color: #555;
    margin-bottom: 20px
}

.about-main .about-post svg {
    width: 25px;
    height: 25px;
    fill: #4FA168
}

#about-questions {
    width: 100%;
    height: 36px;
    border-radius: .28571429rem;
    background: #4FA168;
    color: white;
    border: 0;
    font-weight: 400
}

.user-top-nav {
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px
}

    .user-top-nav i {
        margin: 0;
        font-size: 18px
    }

    .user-top-nav .name {
        font-weight: bold;
        font-size: 16px
    }

    .user-top-nav .right {
        display: flex;
        align-items: center
    }

        .user-top-nav .right a, .user-top-nav .right a:hover {
            color: white
        }

.white.user-top-nav {
    background: white
}

    .white.user-top-nav .name {
        color: black
    }

    .white.user-top-nav i {
        color: black
    }

.user-top-text {
    background: #f9f9f9;
    color: black;
    padding: 15px 20px;
    font-size: 14px;
    margin: 0 6%;
    border-radius: 10px;
    line-height: 25px
}

    .user-top-text img {
        position: relative;
        top: -5px
    }

.user-teacher-top {
    position: relative
}

    .user-teacher-top .user-pay {
        width: 100%;
        height: 160px;
        background: white;
        position: absolute;
        padding: 20px
    }

        .user-teacher-top .user-pay .bottom {
            padding-top: 10px
        }

        .user-teacher-top .user-pay .top, .user-teacher-top .user-pay .bottom {
            height: 50%;
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: space-between
        }

            .user-teacher-top .user-pay .top span, .user-teacher-top .user-pay .bottom span {
                color: #999;
                font-size: 14px
            }

            .user-teacher-top .user-pay .top svg, .user-teacher-top .user-pay .bottom svg {
                width: 35px;
                height: 35px;
                fill: #4FA168
            }

    .user-teacher-top .teacher-img {
        padding-top: 10px;
        padding-left: 20px
    }

        .user-teacher-top .teacher-img img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid white
        }

    .user-teacher-top .teacher-info {
        width: 100%;
        padding: 20px
    }

        .user-teacher-top .teacher-info .jy-star {
            color: #4FA168
        }

        .user-teacher-top .teacher-info .integral {
            color: white;
            font-weight: bold;
            margin-bottom: 5px
        }

        .user-teacher-top .teacher-info .model {
            display: flex;
            justify-content: space-between
        }

            .user-teacher-top .teacher-info .model .left {
                display: flex
            }

            .user-teacher-top .teacher-info .model .right span {
                display: inline-block;
                color: white;
                background: #4FA168;
                font-size: 10px;
                padding: 3px 5px 3px 5px;
                border-radius: 5px
            }

.user-main {
    padding-left: 6%;
    padding-right: 6%
}

    .user-main svg {
        width: 20px;
        height: 20px;
        fill: #4FA168
    }

    .user-main .quick-order {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        padding: 20px 10px 20px 10px;
        color: white;
        border-radius: 10px;
        background-color: #4FA168
    }

    .user-main .sign-in {
        display: flex;
        justify-content: space-between;
        margin: 5px 0 15px 0
    }

        .user-main .sign-in a {
            width: 50%;
            height: 60px
        }

        .user-main .sign-in .left, .user-main .sign-in .right {
            border-radius: 10px
        }

        .user-main .sign-in .left {
            background: #d5ead9;
            color: #5ba997;
            margin-right: 5px
        }

        .user-main .sign-in .right {
            background: #fdeace;
            color: #4FA168;
            margin-left: 5px
        }

    .user-main .user-items-top {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 130px;
        margin-bottom: 35px
    }

        .user-main .user-items-top .blue {
            background: #62c3d0
        }

        .user-main .user-items-top .Orange {
            background: #4FA168
        }

        .user-main .user-items-top .danger {
            background: #e96aa6
        }

        .user-main .user-items-top .item {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            width: 21.5%;
            height: 50%;
            margin: 5px 5px 5px 5px;
            color: white
        }

    .user-main .user-items-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center
    }

        .user-main .user-items-bottom a {
            display: block;
            width: 100%;
            height: 100%
        }

        .user-main .user-items-bottom .item {
            position: relative;
            border: 1px solid #fbfbfb;
            text-align: center;
            width: 44%;
            border-radius: 8px;
            padding: 8px 0;
            line-height: 25px;
            margin: 7px;
            font-size: 16px;
            background: #fbfbfb
        }

.user-red-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: red
}

.class-feedback-post .layui-form-select dl dd.layui-this {
    background-color: #4FA168;
    color: #fff
}

.class-feedback-post .layui-laydate .layui-this {
    background-color: red !important;
    color: #fff !important
}

#pane-first .order-lists {
    border-bottom: 1px solid #f2f2f2
}

.user-order .el-form-item__label {
    color: #4FA168
}

.user-order .el-form .el-form-item:last-child {
    padding-top: 10px;
    text-align: right
}

    .user-order .el-form .el-form-item:last-child button:nth-of-type(1) {
        background: #f2f2f2;
        border-color: #f2f2f2;
        color: #555
    }

    .user-order .el-form .el-form-item:last-child button:nth-of-type(2) {
        background: #4FA168;
        border-color: #4FA168
    }

.user-order .el-form-item {
    margin-bottom: 0
}

.user-order .el-dialog__body {
    padding-top: 0
}

.user-order .el-dialog {
    width: 100%
}

.user-order .el-date-editor.el-input, .user-order .el-select {
    width: 100%
}

.user-order .order-lists {
    padding-top: 0;
    padding-bottom: 25px;
    border-bottom: 1px solid #dcdcdc;
    padding-top: 10px;
    padding-bottom: 10px
}

    .user-order .order-lists .user-order-feedback {
        background: #fbfbfb;
        padding: 20px;
        border-radius: 10px;
        margin: 0 0 10px 0
    }

    .user-order .order-lists .feedback-bnt {
        text-align: right
    }

        .user-order .order-lists .feedback-bnt .el-button {
            padding: 4px 10px;
            font-size: 12px;
            color: white;
            background: #28b7c9;
            margin-bottom: 5px
        }

    .user-order .order-lists .Orange {
        color: #4FA168 !important
    }

    .user-order .order-lists .list {
        padding: 25px 10px 0 10px;
        position: relative
    }

        .user-order .order-lists .list .Blue {
            background: #28b7c9
        }

        .user-order .order-lists .list .pay-bnt, .user-order .order-lists .list .feedback-bnt {
            position: absolute;
            display: block;
            bottom: 0;
            right: 2px;
            background: #4FA168;
            color: white;
            padding: 8px 15px;
            border-radius: 5px;
            font-size: 16px
        }

        .user-order .order-lists .list .class-feedback {
            position: absolute;
            bottom: 0;
            right: 0
        }

            .user-order .order-lists .list .class-feedback a, .user-order .order-lists .list .class-feedback a:hover {
                color: white;
                padding: 4px 10px 4px 10px;
                border-radius: 5px;
                font-size: 12px
            }

            .user-order .order-lists .list .class-feedback .no-feedback-bnt {
                background: #28b7c9
            }

            .user-order .order-lists .list .class-feedback .feedback-bnt {
                background: #4FA168
            }

        .user-order .order-lists .list .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap
        }

            .user-order .order-lists .list .title .left {
                font-weight: bold;
                font-size: 20px
            }

            .user-order .order-lists .list .title .right {
                color: #999;
                font-size: 14px
            }

        .user-order .order-lists .list .info {
            margin: 8px 0 8px 0
        }

            .user-order .order-lists .list .info .left {
                color: #bfbfbf;
                font-size: 13px
            }

            .user-order .order-lists .list .info .right {
                color: #555;
                font-size: 15px;
                line-height: 20px
            }

.user-massage {
    position: relative
}

    .user-massage .item {
        position: absolute
    }

    .user-massage .main {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        line-height: 25px;
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 10px
    }

    .user-massage .left-logo {
        width: 35px;
        height: 35px;
        min-width: 35px;
        min-height: 35px;
        border-radius: 50%;
        line-height: 35px;
        text-align: center;
        color: white;
        font-weight: bold;
        margin: 10px 10px 10px 0
    }

    .user-massage .info {
        color: #555;
        font-size: 15px;
        margin-bottom: 5px;
        line-height: 25px
    }

    .user-massage .time {
        color: #bfbfbf
    }

    .user-massage .reply {
        padding: 2px 8px 2px 8px;
        background-color: #4FA168;
        font-size: 10px;
        color: white;
        border-radius: 5px
    }

.user-setting .setting-list .list {
    border-bottom: 1px solid #e9e9e9;
    padding: 10px 5px 10px 5px;
    margin: 0 10px 0 10px;
    display: flex;
    justify-content: space-between
}

    .user-setting .setting-list .list .right .left {
        color: #555
    }

.user-setting .changePhone .el-dialog {
    margin-top: 15vh !important
}

.user-setting .changePwd .el-dialog {
    margin-top: 5vh !important
}

.user-setting .log-out-bnt {
    margin: 20px;
    text-align: center;
    height: 35px;
    border-radius: 5px;
    line-height: 35px;
    background: #4FA168;
    color: white
}

.user-teacher-record .list {
    border-bottom: 1px solid #dcdcdc
}

.user-teacher-record .title-top .apply {
    font-size: 15px;
    color: #555;
    line-height: 26px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.user-teacher-record .title-top .time {
    color: #999;
    font-size: 14px;
    line-height: 25px
}

.user-teacher-record .record-info {
    margin-top: -12px;
    padding: 0 0 25px 30px;
    border-radius: 15px
}

.user-teacher-record .liuyan {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #555;
    font-size: 14px;
    line-height: 25px
}

    .user-teacher-record .liuyan span {
        color: #303030;
        font-size: 14px;
        font-weight: bold
    }

.user-teacher-record .progress span {
    font-size: 14px
}

.user-teacher-record .progress .one {
    color: #303030;
    font-weight: bold;
    font-size: 14px
}

.user-teacher-record .progress .three {
    color: #555
}

    .user-teacher-record .progress .three .apply-status-text {
        margin: 10px 5px 10px 0
    }

.user-teacher-record .progress .bottom {
    margin-top: 8px;
    display: flex;
    justify-content: space-between
}

    .user-teacher-record .progress .bottom .left {
        font-size: 14px;
        color: #999
    }

    .user-teacher-record .progress .bottom .right {
        font-size: 14px
    }

        .user-teacher-record .progress .bottom .right a, .user-teacher-record .progress .bottom .right a:hover {
            color: #4FA168
        }

.booking-alipay .title-top {
    border-radius: 15px;
    padding: 20px 10px 10px;
    margin-bottom: 10px
}

    .booking-alipay .title-top .title {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 5px
    }

        .booking-alipay .title-top .title .title-left {
            font-size: 18px;
            font-weight: 900
        }

        .booking-alipay .title-top .title .title-right {
            font-size: 10px;
            color: #bfbfbf
        }

    .booking-alipay .title-top .alipay-info {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        line-height: 25px
    }

        .booking-alipay .title-top .alipay-info .right {
            color: #555
        }

        .booking-alipay .title-top .alipay-info .left {
            color: #bfbfbf
        }

.booking-alipay .class-time .id {
    font-weight: bold;
    margin-bottom: 5px
}

.booking-alipay .class-time .count {
    font-size: 12px;
    color: #555
}

    .booking-alipay .class-time .count span {
        color: #4FA168
    }

.booking-alipay .class-time .layui-table th {
    text-align: center
}

.booking-alipay .class-time .layui-table td {
    color: #4FA168;
    text-align: center
}

.booking-alipay .class-time .liuyan {
    margin-bottom: 10px;
    padding: 10px
}

    .booking-alipay .class-time .liuyan span {
        display: block;
        margin-bottom: 10px;
        font-size: 12px
    }

        .booking-alipay .class-time .liuyan span:nth-of-type(1) {
            color: #555
        }

        .booking-alipay .class-time .liuyan span:nth-of-type(2) {
            color: #4FA168
        }

    .booking-alipay .class-time .liuyan .el-timeline-item__timestamp.is-top {
        margin-bottom: 0;
        padding-top: 0;
        padding-left: 10px
    }

    .booking-alipay .class-time .liuyan .el-timeline-item__tail {
        border-left: 2px solid #4FA168
    }

    .booking-alipay .class-time .liuyan .el-timeline-item__node {
        background-color: #4FA168
    }

    .booking-alipay .class-time .liuyan .el-timeline-item__wrapper {
        padding-left: 20px
    }

    .booking-alipay .class-time .liuyan .el-timeline-item__content .text {
        font-size: 12px;
        color: #303030
    }

    .booking-alipay .class-time .liuyan .el-timeline-item__content .time {
        font-size: 12px;
        color: #303030
    }

    .booking-alipay .class-time .liuyan .reply {
        margin-top: -15px;
        text-align: right
    }

        .booking-alipay .class-time .liuyan .reply .el-button {
            font-weight: normal;
            color: white;
            padding: 8px 15px 8px 15px;
            border-radius: 8px;
            font-size: 12px;
            margin: 0
        }

            .booking-alipay .class-time .liuyan .reply .el-button span {
                margin-bottom: 0;
                color: white
            }

            .booking-alipay .class-time .liuyan .reply .el-button:nth-of-type(1) {
                background-color: #4FA168
            }

            .booking-alipay .class-time .liuyan .reply .el-button:nth-of-type(2) {
                background-color: #4FA168
            }

.booking-alipay .teacher-info {
    display: flex;
    align-items: center
}

    .booking-alipay .teacher-info img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px
    }

    .booking-alipay .teacher-info .name {
        margin-top: 10px
    }

.booking-alipay .ele_tab .accept_ok .el-dialog__body {
    padding: 10px
}

    .booking-alipay .ele_tab .accept_ok .el-dialog__body .title-top {
        border-radius: 0
    }

    .booking-alipay .ele_tab .accept_ok .el-dialog__body .text {
        color: #f56c6c
    }

    .booking-alipay .ele_tab .accept_ok .el-dialog__body .ok-bnt {
        text-align: right
    }

.booking-alipay .ele_tab .server .el-upload-list--picture-card .el-upload-list__item, .booking-alipay .ele_tab .server .el-upload.el-upload--picture-card {
    width: 70px;
    height: 70px;
    line-height: 80px
}

.user-record-details.booking-alipay .apply-record-cancel {
    text-align: center;
    margin-left: -20px
}

.user-record-details.booking-alipay .list .progress {
    margin: 10px 0 40px 0
}

.user-record-details.booking-alipay .title-top {
    background: #fbfbfb;
    padding: 20px 30px 20px
}

    .user-record-details.booking-alipay .title-top .time-details {
        display: flex;
        justify-content: space-between
    }

        .user-record-details.booking-alipay .title-top .time-details .time-text {
            font-size: 14px !important;
            line-height: 25px;
            color: #999
        }

        .user-record-details.booking-alipay .title-top .time-details .details-text {
            font-size: 14px;
            color: #4FA168
        }

.user-record-details.booking-alipay .title .title-left {
    margin: 5px 0 5px
}

.user-record-details.booking-alipay .apply-status-text {
    line-height: 15px;
    font-size: 15px
}

.head-photo .change {
    background-color: #4FA168;
    color: white;
    margin-top: 30px;
    font-size: 16px;
    padding: 10px 25px !important;
    border-radius: 5px;
    font-weight: 900
}

.user-photos {
    padding: 10px 6%
}

    .user-photos .video .el-icon-plus:before {
        color: #28b7c9
    }

    .user-photos .img .el-icon-plus:before {
        color: #4FA168
    }

    .user-photos .top1, .user-photos .top2 {
        border-radius: 5px;
        margin: 10px 10px 0 10px;
        padding: 10px;
        background-color: #f9f9f9;
        color: #555;
        display: flex;
        align-items: center;
        font-size: 13px
    }

        .user-photos .top1 .left, .user-photos .top2 .left {
            font-size: 18px;
            font-weight: bold;
            vertical-align: middle;
            padding: 10px 30px 10px 10px;
            width: 30%
        }

        .user-photos .top1 .right, .user-photos .top2 .right {
            width: 70%;
            line-height: 20px
        }

    .user-photos .top1 {
        border-left: 5px solid #4FA168
    }

        .user-photos .top1 .left {
            color: #4FA168
        }

    .user-photos .top2 {
        border-left: 5px solid #28b7c9
    }

        .user-photos .top2 .left {
            color: #28b7c9
        }

    .user-photos .el-upload--picture-card {
        width: 100px;
        height: 100px;
        line-height: 100px
    }

    .user-photos .el-upload-list--picture-card .el-upload-list__item {
        width: 98px;
        height: 98px;
        line-height: 100px
    }

    .user-photos .el-upload-list--picture-card .el-upload-list__item-actions span + span {
        margin-left: 0
    }

    .user-photos .el-upload-list--picture-card .el-upload-list__item-thumbnail {
        vertical-align: middle
    }

.user-my-notes .top {
    text-align: right
}

    .user-my-notes .top img {
        width: 200px;
        height: 100px
    }

    .user-my-notes .top a, .user-my-notes .top a:hover {
        color: white;
        background-color: #4FA168;
        padding: 12px 22px 12px 22px;
        border-radius: 8px
    }

.user-my-notes .bottom > .title {
    border-radius: 8px;
    background-color: #f9f9f9
}

.my-notes-send .el-button + .el-button {
    margin-left: 0
}

.my-notes-send .bottom-bnt .el-button {
    width: 100%;
    background-color: #4FA168;
    color: white
}

.user-share .share-type {
    background-color: #f2f2f2;
    border-radius: 10px
}

    .user-share .share-type .el-form-item__content {
        line-height: 10px
    }

    .user-share .share-type .el-button {
        width: 100%
    }

.money-record-details .layui-table[lay-size=sm] th, .money-record-details .layui-table[lay-size=sm] td {
    padding: 5px 40px
}

.user-score .top {
    background-color: #f2f2f2;
    padding: 10px 0 10px 0
}

.user-score .row {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 10px
}

.user-score .one {
    width: 30%;
    font-size: 12px
}

.user-score .two {
    width: 45%;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.user-score .one, .user-score .two {
    background-color: white;
    padding: 10px 15px 10px 15px;
    border-radius: 15px
}

.user-score .renzheng {
    display: inline-block;
    border: 1px solid #4FA168;
    border-radius: 3px;
    padding: 2px 5px 2px 5px;
    font-size: 12px
}

.user-score td .el-button {
    padding: 5px;
    background-color: #4FA168
}

.user-comment .ele_tab .list {
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 20px;
    margin-bottom: 20px
}

.user-internship .ruleForm {
    padding: 10px 40px 10px 40px
}

    .user-internship .ruleForm .el-form-item__label {
        color: #4FA168
    }

.student-techaer-comment .el-checkbox__input {
    display: none
}

.student-techaer-comment .el-checkbox__label {
    padding-left: 0;
    font-size: 10px
}

.student-techaer-comment .el-checkbox.is-bordered {
    padding: 3px 13px 3px 13px;
    height: auto;
    border-radius: 10px
}

    .student-techaer-comment .el-checkbox.is-bordered + .el-checkbox.is-bordered {
        margin-left: 0
    }

.student-techaer-comment .el-checkbox {
    margin: 0
}

.student-techaer-comment .el-form-item__content {
    line-height: 30px
}

.student-techaer-comment .select-label .el-checkbox {
    margin-bottom: 5px
}

.user-student-booking .top {
    display: flex;
    align-items: center
}

    .user-student-booking .top img {
        margin: 10px 15px 20px 10px;
        border-radius: 50%
    }

.user-student-booking .el-date-editor .el-input__icon {
    display: none
}

.user-student-booking .el-date-editor .el-input__inner {
    padding: 0 3px 0 3px
}

.user-student-booking .booking-table {
    margin: 0 20px 0 20px
}

    .user-student-booking .booking-table tbody tr td {
        color: #4FA168
    }

.user-student-booking .booking-info {
    margin-left: 20px
}

    .user-student-booking .booking-info .item {
        display: flex;
        margin-bottom: 5px;
        font-size: 13px
    }

.modify_time .el-input__inner, .drawback .el-input__inner {
    padding: 0 0 0 5px
}

.modify_time .el-input__icon, .drawback .el-input__icon {
    display: none
}

.modify_time .el-dialog__body, .drawback .el-dialog__body {
    padding: 0
}

.user-change-vx .el-form-item__label {
    color: #4FA168;
    font-size: 16px
}

#pc_base {
    font-family: Arial,Hiragino Sans GB,STHeiti,Helvetica Neue,Helvetica,Microsoft Yahei,WenQuanYi Micro Hei,sans-serif !important
}

    #pc_base .el-dialog {
        width: 30% !important
    }

    #pc_base * {
        box-sizing: border-box
    }

    #pc_base #header #logo {
        padding: 40px 0 0 0
    }

    #pc_base #header .pc-nav-login .outermost {
        display: flex;
        width: 280px;
        flex-wrap: wrap
    }

    #pc_base #header .pc-nav-login .pc-city-change {
        display: flex
    }

        #pc_base #header .pc-nav-login .pc-city-change a {
            font-size: 24px;
            font-weight: bold
        }

        #pc_base #header .pc-nav-login .pc-city-change img {
            margin: 0 10px 0 5px
        }

    #pc_base #header .pc-nav-login #teacher-top-select .subject-item {
        margin-top: 2px;
        margin-bottom: 2px;
        border: 1px solid #e9e9e9;
        padding: 3px 2px 3px 2px;
        border-radius: 10px;
        text-align: center;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px
    }

    #pc_base #header .pc-nav-login #teacher-top-select .subject-all-item {
        padding: 4px 10px;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        border-radius: 10px
    }

    #pc_base #header .pc-nav-login #teacher-top-select .subject-nolimit {
        padding: 4px 10px;
        position: absolute;
        top: 0;
        left: 60px;
        text-align: center;
        border-radius: 10px
    }

    #pc_base #header .pc-nav-login #teacher-top-select .one-layer {
        font-weight: 900;
        color: #4FA168;
        margin-top: 10px;
        padding: 5px;
        background-color: #f9f9f9;
        display: flex;
        justify-content: space-between
    }

    #pc_base #header .pc-nav-login #teacher-top-select .tow-layer {
        margin-top: 10px
    }

        #pc_base #header .pc-nav-login #teacher-top-select .tow-layer .line a {
            border: 1px solid #e9e9e9;
            margin-top: 2px;
            margin-bottom: 2px;
            padding: 3px 2px 3px 2px;
            font-size: 14px;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            border-radius: 10px;
            text-align: center
        }

    #pc_base #header .subject_search .el-input__inner {
        border-radius: 100px;
        background: #f9f9f9;
        border-color: #f9f9f9;
        font-size: 14px;
        border-radius: 15px 0 0 15px !important
    }

    #pc_base #header .subject_search .el-input--mini .el-input__inner {
        line-height: 28px;
        border-color: #f9f9f9
    }

    #pc_base #header .subject_search .el-input-group__append {
        border-radius: 0 100px 100px 0;
        background: #f9f9f9;
        border-color: #f9f9f9;
        padding: 0 10px
    }

        #pc_base #header .subject_search .el-input-group__append .el-icon-search {
            color: #4FA168;
            font-weight: bold;
            font-size: 16px
        }

    #pc_base #header .subject_search #open:active, #pc_base #header .subject_search #open:focus, #pc_base #header #open:hover {
        background-color: transparent !important;
        border-color: transparent !important
    }

    #pc_base #header .pc-nav-select-main {
        padding-top: 5px;
        margin-left: 15px;
        white-space: nowrap;
        position: relative
    }

        #pc_base #header .pc-nav-select-main .more-main.subject-more {
            width: 500px;
            height: 700px;
            position: absolute;
            top: 5px;
            left: 0;
            font-size: 14px
        }

        #pc_base #header .pc-nav-select-main #teacher-top-select .hot-sub {
            font-weight: 900;
            color: #4FA168;
            padding-left: 10px
        }

        #pc_base #header .pc-nav-select-main #teacher-top-select .el-tabs__content {
            padding-top: 30px
        }

    #pc_base .site i.icon {
        margin-right: 5px
    }

    #pc_base .pc-nav-link a {
        color: #999
    }

    #pc_base .pc-nav-link i {
        padding-right: 5px;
        font-size: 16px
    }

    #pc_base .pc-city-change {
        padding-left: 20px;
        align-items: center
    }

        #pc_base .pc-city-change .icon {
            position: relative;
            bottom: -6px;
            left: -2px;
            transform: rotate(-45deg);
            font-size: 15px
        }

    #pc_base .pc-index-grid {
        display: flex;
        justify-content: space-between;
        margin: 35px 0 40px 0
    }

        #pc_base .pc-index-grid .item {
            display: flex;
            justify-content: start
        }

            #pc_base .pc-index-grid .item .icon {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                color: #4FA168;
                margin-right: 25px
            }

                #pc_base .pc-index-grid .item .icon span {
                    display: inline-block;
                    margin-top: 10px
                }

            #pc_base .pc-index-grid .item .text {
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
                background-color: #f9f9f9;
                width: 210px;
                height: 105px;
                padding: 20px 35px 20px 10px;
                border-radius: 15px 0 15px 0;
                flex-direction: column;
                align-items: flex-end
            }

            #pc_base .pc-index-grid .item svg {
                width: 50px;
                height: 50px;
                fill: #4FA168
            }

    #pc_base header {
        display: flex;
        justify-content: space-between
    }

        #pc_base header #teacher-top-select .el-tabs__header .is-left {
            font-size: 15px !important
        }

        #pc_base header #teacher-top-select ::-webkit-scrollbar {
            width: 5px;
            height: 10px;
            background-color: #4FA168;
            display: block
        }

        #pc_base header #teacher-top-select ::-webkit-scrollbar-track {
            border-radius: 10px;
            background-color: #f5f5f5
        }

        #pc_base header #teacher-top-select ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: #4FA168
        }

        #pc_base header .subject_search {
            display: flex;
            justify-content: flex-start;
            padding-top: 15px
        }

            #pc_base header .subject_search .el-input__inner:focus {
                border-color: #4FA168
            }

            #pc_base header .subject_search .el-input__inner {
                border-radius: 15px
            }

            #pc_base header .subject_search .so-link {
                width: 40px;
                height: 25px;
                text-align: center;
                line-height: 25px;
                margin: 0 0 0 10px;
                color: white;
                background-color: #4FA168;
                border-radius: 5px
            }

        #pc_base header .pc-nav-login {
            padding: 40px 0 0 0;
            width: 80%
        }

            #pc_base header .pc-nav-login .jyk-more.down {
                top: 19px;
                right: 195px;
                width: 0;
                height: 0;
                border-left: 30px solid transparent;
                border-right: 30px solid transparent;
                border-bottom: 25px solid #fafafa;
                padding: 0;
                box-shadow: none
            }

            #pc_base header .pc-nav-login .jyk-more {
                position: absolute;
                right: 163px;
                top: 28px;
                box-shadow: 0 11px 21px 0 rgba(88,88,88,0.75);
                z-index: 999;
                padding: 20px 0 20px 0
            }

                #pc_base header .pc-nav-login .jyk-more a {
                    font-size: 14px;
                    padding: 0 30px 0 30px;
                    line-height: 35px;
                    display: block
                }

                    #pc_base header .pc-nav-login .jyk-more a:hover {
                        color: #4FA168;
                        border-radius: 0;
                        background-color: white
                    }

        #pc_base header .pc-login a {
            padding: 3px 5px 3px 5px;
            border: 1px solid #dcdcdc;
            border-radius: 5px 0 5px 0;
            margin: 0 0 0 8px;
            font-size: 14px !important
        }

            #pc_base header .pc-login a:hover {
                background-color: white
            }

        #pc_base header nav {
            margin-top: 0;
            margin-bottom: 20px
        }

            #pc_base header nav .nav-link-background-color a {
                font-size: 16px;
                padding: 12px 12px 10px 12px
            }

                #pc_base header nav .nav-link-background-color a:hover {
                    background-color: #4FA168;
                    color: white;
                    border-radius: 10px 0 10px 0
                }

    #pc_base .banner {
        height: 200px;
        background-color: #d4e3cc;
        margin-bottom: 20px;
        padding: 20px 60px 0 100px;
        border-radius: 20px
    }

        #pc_base .banner .left .title {
            font-size: 24px;
            font-weight: bold;
            color: #4FA168;
            letter-spacing: 3px;
            margin: 10px 0 5px 0
        }

        #pc_base .banner .left .text {
            color: #4FA168;
            line-height: 25px
        }

        #pc_base .banner .right {
            margin-right: 90px
        }

    #pc_base .el-icon-arrow-down, #pc_base .el-icon-arrow-up {
        cursor: pointer
    }

    #pc_base .teacher-condition-list {
        font-size: 15px
    }

    #pc_base .url-list {
        display: flex;
        justify-content: flex-start;
        position: relative;
        padding-right: 20px
    }

        #pc_base .url-list .one {
            white-space: nowrap;
            text-align: right;
            min-width: 100px;
            font-size: 16px !important;
            font-weight: 900;
            color: #4FA168
        }

            #pc_base .url-list .one a {
                color: #4FA168
            }

        #pc_base .url-list .hidden {
            height: 50px;
            overflow: hidden
        }

        #pc_base .url-list .up-down {
            position: absolute;
            color: #4FA168;
            font-weight: bold;
            right: 0;
            top: 18px
        }

        #pc_base .url-list .name {
            height: 50px;
            line-height: 50px;
            margin-right: 10px;
            font-weight: bold;
            white-space: nowrap
        }

        #pc_base .url-list a {
            line-height: 40px;
            padding: 5px;
            display: inline-block;
            position: relative
        }

            #pc_base .url-list a:hover {
                color: #4FA168;
                font-weight: bold
            }

    #pc_base .pc-user-card {
        display: flex;
        justify-content: space-between;
        margin-top: 90px;
        margin-bottom: 50px
    }

        #pc_base .pc-user-card a {
            width: 15%
        }

        #pc_base .pc-user-card .card {
            border-radius: 15px 0 15px 0;
            background-color: #f9f9f9 !important;
            height: 135px;
            width: 140px;
            position: relative;
            margin-left: 30px
        }

            #pc_base .pc-user-card .card .head-photo {
                position: absolute;
                top: -40px;
                text-align: center;
                width: 100%
            }

                #pc_base .pc-user-card .card .head-photo img {
                    border-radius: 50%;
                    height: 80px;
                    width: 80px
                }

            #pc_base .pc-user-card .card .card-info {
                text-align: center;
                width: 100%;
                padding-top: 50px;
                line-height: 25px
            }

    #pc_base .pc-order-list {
        margin-top: 10px;
        border-top: 1px dashed #ccc;
        font-size: 15px
    }

        #pc_base .pc-order-list .order-info {
            display: flex;
            width: 100%;
            align-items: center;
            flex-wrap: nowrap;
            border-bottom: 1px dashed #ccc;
            padding: 10px 0 10px 0
        }

            #pc_base .pc-order-list .order-info :nth-of-type {
                border-top: 1px solid red
            }

            #pc_base .pc-order-list .order-info .order-item {
                padding-right: 20px
            }

            #pc_base .pc-order-list .order-info .time {
                text-align: right
            }

        #pc_base .pc-order-list a:hover {
            color: #4FA168
        }

    #pc_base .pc-index-swiper {
        position: relative
    }

        #pc_base .pc-index-swiper .swiper-button-next, #pc_base .pc-index-swiper .swiper-button-prev {
            display: none
        }

            #pc_base .pc-index-swiper .swiper-button-next:after, #pc_base .pc-index-swiper .swiper-button-prev:after {
                color: #e9e9e9
            }

        #pc_base .pc-index-swiper:hover .swiper-button-next, #pc_base .pc-index-swiper:hover .swiper-button-prev {
            display: flex !important
        }

        #pc_base .pc-index-swiper img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover
        }

    #pc_base .pc-step1, #pc_base .pc-step2, #pc_base .pc-step3, #pc_base .pc-step4 {
        display: flex;
        margin: 20px 20px 50px 20px;
        position: relative;
        align-items: center
    }

        #pc_base .pc-step1 .left, #pc_base .pc-step2 .left, #pc_base .pc-step3 .left, #pc_base .pc-step4 .left {
            width: 100px;
            height: 100px;
            margin: 10px 70px 10px 10px
        }

            #pc_base .pc-step1 .left img, #pc_base .pc-step2 .left img, #pc_base .pc-step3 .left img, #pc_base .pc-step4 .left img {
                width: 100%
            }

        #pc_base .pc-step1 .right, #pc_base .pc-step2 .right, #pc_base .pc-step3 .right, #pc_base .pc-step4 .right {
            border-radius: 15px 0 15px 0;
            box-shadow: 3px 3px 4px #c1c1c1;
            border: solid 1px #f0f0f0;
            padding: 50px;
            width: 100%
        }

        #pc_base .pc-step1 .right {
            padding-top: 40px;
            padding-bottom: 40px
        }

            #pc_base .pc-step1 .right img {
                position: absolute;
                width: 196px;
                height: 150px;
                bottom: 0;
                right: 30px
            }

        #pc_base .pc-step3 .right {
            padding-top: 60px;
            padding-bottom: 60px;
            line-height: 30px
        }

            #pc_base .pc-step3 .right span {
                display: block;
                padding-left: 250px
            }

            #pc_base .pc-step3 .right img {
                position: absolute;
                width: 160px;
                height: 130px;
                bottom: 0;
                left: 200px
            }

        #pc_base .pc-step4 .right {
            padding-top: 60px;
            padding-bottom: 60px;
            line-height: 30px
        }

            #pc_base .pc-step4 .right img {
                position: absolute;
                width: 130px;
                height: 130px;
                bottom: 25px;
                right: 100px
            }

    #pc_base .pc-info-title {
        padding: 0 100px 30px 0
    }

        #pc_base .pc-info-title h2 {
            font-weight: bold;
            text-align: right
        }

    #pc_base footer {
        padding: 100px 0 100px 0
    }

        #pc_base footer .pc-index-about {
            display: flex;
            justify-content: space-between
        }

            #pc_base footer .pc-index-about h2 {
                line-height: 50px
            }

            #pc_base footer .pc-index-about .item {
                background-color: #f9f9f9;
                width: 210px;
                height: 260px;
                border-radius: 15px 0 15px 0;
                padding: 25px 15px 25px 35px;
                line-height: 30px
            }

        #pc_base footer .pc-index-copyright {
            margin-top: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center
        }

            #pc_base footer .pc-index-copyright .item {
                line-height: 25px
            }

    #pc_base .pc-teacher_id_search {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 160px
    }

        #pc_base .pc-teacher_id_search .el-input__inner:focus {
            border-color: #4FA168
        }

        #pc_base .pc-teacher_id_search .el-input__inner {
            border-radius: 15px
        }

        #pc_base .pc-teacher_id_search .so-link {
            width: 40px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            margin: 0 0 0 10px;
            color: white;
            background-color: #4FA168;
            border-radius: 5px
        }

    #pc_base .pc-teacher-list .teacher-item {
        border-bottom: 1px dashed #ccc;
        padding: 30px 30px 30px 70px
    }

        #pc_base .pc-teacher-list .teacher-item:hover {
            background: #f2f2f2
        }

        #pc_base .pc-teacher-list .teacher-item .left {
            display: flex
        }

            #pc_base .pc-teacher-list .teacher-item .left .photo {
                margin-right: 40px
            }

                #pc_base .pc-teacher-list .teacher-item .left .photo img {
                    width: 85px;
                    height: 100px;
                    border-radius: 20px 0 20px 0;
                    box-shadow: 3px 3px 4px #c1c1c1;
                    transition: all .4s;
                    margin-top: 7px
                }

                    #pc_base .pc-teacher-list .teacher-item .left .photo img:hover {
                        transform: scale(1.3)
                    }

            #pc_base .pc-teacher-list .teacher-item .left .teacher-info {
                width: 620px;
                min-width: 500px
            }

                #pc_base .pc-teacher-list .teacher-item .left .teacher-info .title {
                    line-height: 35px
                }

        #pc_base .pc-teacher-list .teacher-item .right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-width: 160px;
            max-width: 160px;
            margin-left: 10px
        }

            #pc_base .pc-teacher-list .teacher-item .right .info-bnt {
                border-radius: 10px 0
            }

                #pc_base .pc-teacher-list .teacher-item .right .info-bnt:hover {
                    background: #4FA168
                }

    #pc_base .pc-teacher-info {
        display: flex;
        justify-content: space-between
    }

        #pc_base .pc-teacher-info .teacher-info-a {
            margin: 0 0 0 13px;
            position: sticky;
            top: 0;
            background-color: white;
            padding-top: 20px;
            padding-bottom: 20px
        }

            #pc_base .pc-teacher-info .teacher-info-a a {
                margin-right: 40px;
                font-size: 18px
            }

    #pc_base .teacher-info .td-style {
        line-height: 40px
    }

        #pc_base .teacher-info .td-style div {
            width: 49%;
            border-bottom: 1px dashed #ccc
        }

    #pc_base .teacher-main .teacher-base-info .base-top {
        padding: 0
    }

        #pc_base .teacher-main .teacher-base-info .base-top span:nth-of-type(1) {
            margin-left: 0
        }

        #pc_base .teacher-main .teacher-base-info .base-top .base-title {
            border-bottom: #e57609 solid 1px;
            font-weight: normal
        }

    #pc_base .pc-teacher-info-top .teacher-info-item {
        height: 40px;
        line-height: 40px
    }

        #pc_base .pc-teacher-info-top .teacher-info-item .font_boder_13 {
            color: #e57609;
            border: solid 1px #e57609;
            padding: 2px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px
        }

    #pc_base .photo-list > .el-dialog {
        width: 60% !important;
        height: 70vh
    }

        #pc_base .photo-list > .el-dialog .el-dialog__body {
            height: 90%
        }

    #pc_base .teacher-info-header img {
        transition: all .4s;
        border-radius: 25px 0 25px 0;
        border: #f0f0f0 solid 2px;
        box-shadow: 3px 3px 4px #c1c1c1;
        width: 132px;
        height: 155px;
        border: #fff solid 3px
    }

        #pc_base .teacher-info-header img:hover {
            transform: scale(1.3)
        }

    #pc_base .url-list .item {
        position: absolute;
        top: -5px;
        min-width: 100%;
        z-index: 5;
        padding: 20px 40px 20px 40px;
        box-shadow: 0 11px 21px 0 rgba(88,88,88,0.75);
        border: 1px solid #4FA168
    }

    #pc_base .url-list.teacher-info .show:after {
        display: block !important
    }

    #pc_base .url-list.teacher-info a:after {
        content: '';
        width: 0;
        height: 0;
        border-bottom: 8px solid #4FA168;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        position: absolute;
        top: 38px;
        left: calc(50% - 10px);
        z-index: 10;
        display: none
    }

.pc-student-list a:hover {
    color: #4FA168
}

.pc-student-list .student-item {
    font-size: 15px;
    padding: 20px 0 20px 0;
    border-bottom: 1px dashed #ccc
}

    .pc-student-list .student-item .left {
        display: flex;
        align-items: center
    }

    .pc-student-list .student-item .right {
        display: flex;
        align-items: center
    }

.pc-student-info {
    padding: 0 12%
}

    .pc-student-info .navigation {
        border-radius: 5px;
        padding: 3px 8px 3px 8px;
        color: white;
        background-color: #4FA168;
        display: inline-block
    }

    .pc-student-info .order-info {
        margin-bottom: 30px
    }

        .pc-student-info .order-info .title {
            border-bottom: #e57609 solid 1px;
            padding-bottom: 10px;
            font-size: 20px;
            font-weight: bold;
            padding-left: 100px;
            color: #e57609
        }

        .pc-student-info .order-info .left-right {
            display: flex;
            justify-content: space-between
        }

        .pc-student-info .order-info .left, .pc-student-info .order-info .right {
            min-width: 49%
        }

        .pc-student-info .order-info .order-item {
            display: flex;
            line-height: 25px;
            padding: 15px 0 15px 40px;
            border-bottom: 1px dashed #ccc;
            font-size: 16px;
            align-items: center
        }

            .pc-student-info .order-info .order-item span {
                min-width: 75px;
                word-break: break-all
            }

    .pc-student-info .info {
        display: flex;
        justify-content: space-between
    }

        .pc-student-info .info .left, .pc-student-info .info .right {
            min-width: 45%;
            min-height: 180px;
            background-color: #f2f2f2;
            border-radius: 15px 0 15px 0;
            padding: 30px 0 40px 40px
        }

        .pc-student-info .info .left {
            line-height: 25px
        }

        .pc-student-info .info .right {
            display: flex;
            justify-content: space-around;
            align-items: center
        }

.pc-user-base {
    display: flex
}

    .pc-user-base .user-nav-link {
        border-right: 1px solid #f2f2f2
    }

        .pc-user-base .user-nav-link a {
            display: block;
            line-height: 40px
        }

    .pc-user-base .user-main {
        padding-left: 0;
        padding-right: 0
    }

    .pc-user-base .user-teacher-top .user-pay .user-red-dot {
        width: 20px;
        height: 20px
    }

    .pc-user-base .user-main .quick-order {
        display: flex;
        height: 100px;
        background-color: #f7e8d1
    }

        .pc-user-base .user-main .quick-order img {
            height: 100px;
            width: 120px;
            position: absolute;
            top: -40px;
            right: 50px
        }

    .pc-user-base .user-main .user-items-top {
        margin-bottom: 0;
        height: auto
    }

        .pc-user-base .user-main .user-items-top .item {
            height: 80px;
            width: 80px;
            margin: 20px
        }

            .pc-user-base .user-main .user-items-top .item span {
                align-self: center
            }

            .pc-user-base .user-main .user-items-top .item a {
                display: flex;
                justify-content: center;
                width: 100%;
                height: 100%
            }

.pc-user-teacher-message-order .items > .item {
    display: flex;
    justify-content: space-between
}

    .pc-user-teacher-message-order .items > .item .user-red-dot {
        text-align: center;
        line-height: 30px;
        width: 30px !important;
        height: 30px !important;
        color: white;
        font-weight: bold;
        top: -10px;
        right: -10px
    }

    .pc-user-teacher-message-order .items > .item .left, .pc-user-teacher-message-order .items > .item .right {
        height: 90px;
        width: 48%;
        border-radius: 10px;
        position: relative
    }

        .pc-user-teacher-message-order .items > .item .left a, .pc-user-teacher-message-order .items > .item .right a {
            z-index: 5;
            padding: 20px 0 0 15px;
            font-size: 16px;
            color: white;
            width: 100%;
            height: 100%;
            display: block
        }

            .pc-user-teacher-message-order .items > .item .left a:hover, .pc-user-teacher-message-order .items > .item .right a:hover {
                color: white
            }