@font-face {
            font-family: certificate;
            src: url("/s/fonts/certificate.woff");
            src: url("/s/fonts/certificate.woff") format("woff"), url("/s/fonts/certificate.TTF") format("truetype")
        }

        @font-face {
            font-family: Noto Serif SC;
            src: url("/s/fonts/SourceHanSerifCN-Bold.otf") format("opentype");
            font-weight: 700;
            font-style: normal
        }

        body {
            -webkit-text-size-adjust: 100% !important;
            -ms-text-size-adjust: 100% !important;
            text-size-adjust: 100% !important;
            -moz-text-size-adjust: 100% !important
        }

        .theme-color {
            color: #0073d8
        }

        .pay-color {
            color: red
        }

        .free-color {
            color: #27c836
        }

        .link-span {
            color: #ff9700;
            cursor: pointer
        }

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

        .role-box {
            display: inline-block;
            padding: 1px 5px;
            border-radius: 3px;
            color: #fff !important;
            margin-right: 10px
        }

        .role-box.role-admin {
            background: linear-gradient(90deg, #c30000, #5e0000)
        }

        .role-box.role-monitor {
            background: linear-gradient(90deg, #fc4b4c, #c40203)
        }

        .role-box.role-committee {
            background: linear-gradient(90deg, #ffbe69, #ffa32c)
        }

        .ant-breadcrumb .ant-breadcrumb-link {
            color: #333;
            font-size: 14px;
            font-weight: 400;
            cursor: default
        }

        .course-item-simple {
            width: 280px;
            height: auto
        }

        .course-item-square {
            width: 260px;
            height: 480px
        }

        .course-item {
            display: inline-block;
            background: #fff;
            transition: all .4s ease;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            border: 1px solid #ececec
        }

        .course-item .new-course-btm {
            position: static;
            background-color: #fff;
            padding: 1rem .8rem
        }

        .course-item .course-tag {
            left: 5px;
            top: 5px
        }

        .course-item .wrapper-vip-icon {
            width: 40px;
            height: 40px;
            background: #f60;
            border-radius: 50%;
            position: absolute;
            left: -10px;
            top: -10px
        }

        .course-item .wrapper-vip-icon .vip-icon {
            color: #fff;
            font-size: 12px;
            position: absolute;
            right: 6px;
            bottom: 6px
        }

        .course-item .course-image {
            position: relative;
            width: 100%;
            height: 210px
        }

        .course-item .course-image .course-statu {
            width: 100%;
            padding: 4px 8px;
            position: absolute;
            left: 0;
            bottom: 0;
            color: #fff;
            background: rgba(0, 0, 0, .3);
            margin: 0;
            font-size: .85rem
        }

        .course-item .course-image .hover {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            display: table;
            text-align: center;
            opacity: 0;
            background-color: rgba(0, 0, 0, .5);
            width: 100%;
            height: 100%;
            transition: opacity .4s ease;
            padding: 10px;
            z-index: 9
        }

        .course-item .course-image .hover div {
            display: table-cell;
            vertical-align: middle;
            color: #fff
        }

        .course-item .course-image .hover div span {
            margin: 15px 4px 0;
            display: inline-block
        }

        .course-item .course-image .hover .fa {
            margin-right: 3px
        }

        .course-item p:after {
            clear: both
        }

        .course-item .course-title {
            color: #333;
            font-size: 1rem;
            margin: 0;
            margin-bottom: .4rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .course-item .course-title .wrapper-tag {
            padding: 0 5px 0 0;
            width: auto;
            color: #ff8a35;
            display: inline-block;
            border-radius: 3px
        }

        .course-item .course-price {
            font-size: 1rem;
            float: left
        }

        .course-item .charge,
        .course-item .free {
            color: #ff9700
        }

        .course-item .course-company {
            color: #999;
            font-size: 1rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: inline-block;
            text-align: right;
            float: right
        }

        .course-item .course-company:hover {
            color: #0072d8
        }

        .course-item .course-company i {
            display: inline-block
        }

        .course-item .course-company .view-count {
            display: inline-block;
            vertical-align: middle
        }

        .course-item:hover .hover {
            opacity: 1
        }

        .course-item:hover .new-course-btm {
            background: #ff9700;
            color: #fff;
            transition: all .4s
        }

        .course-item:hover .new-course-btm .course-company,
        .course-item:hover .new-course-btm .course-title,
        .course-item:hover .new-course-btm .free,
        .course-item:hover .new-course-btm .price,
        .course-item:hover .new-course-btm .title {
            color: #fff
        }

        .course-item .course-tag {
            width: 130px;
            height: 25px;
            transform: rotate(-45deg);
            position: absolute;
            top: 10px;
            left: -45px;
            color: #fff;
            text-align: center;
            font-size: .85rem;
            line-height: 25px
        }

        .course-item .course-tag.open {
            background: #2aad74
        }

        .course-item .course-tag.live {
            background: #c30000
        }

        .course-item .course-tag.record {
            background: #dd9e17
        }

        .course-item .course-tag.vip {
            background: red
        }

        .course-item .course-tag.pkg {
            background: #8d0007
        }

        .course-item .course-tag.activity {
            background: #d3d60d
        }

        .course-item .course-tag.course {
            background: #9ec02d
        }

        .course-item .course-tag.end {
            background: #a6a6a6
        }

        .course-item .single-course-praise {
            width: 30px;
            height: 25px;
            line-height: 25px;
            background: rgba(0, 0, 0, .6);
            position: absolute;
            right: 0;
            top: 20px;
            border-radius: 15px 0 0 15px;
            color: #97999e;
            text-align: center;
            z-index: 100
        }

        .course-item .single-course-praise i {
            color: #97999e;
            font-size: 1.14rem
        }

        .course-item .single-course-praise.active,
        .course-item .single-course-praise.active i {
            color: #fff
        }

        .course-single-item {
            width: 100%;
            float: left;
            transition: box-shadow .5s;
            cursor: pointer
        }

        .course-single-item:hover {
            box-shadow: 0 5px 20px rgba(0, 0, 0, .3)
        }

        .course-single-item:hover img {
            transform: scale3d(1.1, 1.1, 1)
        }

        .course-single-item .buy-btn-bar {
            padding: 10px
        }

        .course-single-item .buy-btn-bar .buy-btn {
            width: 100%;
            background: #198fe2;
            color: #fff;
            text-align: center;
            padding: 10px;
            border-radius: 3px
        }

        .course-single-item .course-single-image {
            position: relative;
            cursor: pointer;
            overflow: hidden
        }

        .course-single-item .course-single-image img {
            transition: transform .5s
        }

        .course-single-item .course-single-image .discount-time {
            position: absolute;
            min-width: 100px;
            background: rgba(255, 153, 51, .8);
            color: #fff;
            right: 0;
            top: 0;
            padding: 3px 5px;
            border-bottom-left-radius: 10px
        }

        .course-single-item .course-single-image .isVip {
            height: 30px;
            line-height: 30px;
            width: auto;
            padding: 0 10px;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
            font-size: 12px;
            background: red;
            color: #fff
        }

        .course-single-item .course-single-image .areaTag {
            position: absolute;
            background: #0072d8;
            color: #fff;
            display: inline-block;
            width: 76px;
            height: 30px;
            line-height: 30px;
            top: 0;
            left: 0;
            text-align: center;
            z-index: 2
        }

        .course-single-item .course-single-image .count-down-day,
        .course-single-item .course-single-image .live-start {
            position: absolute;
            background: rgba(0, 0, 0, .5);
            line-height: 36px;
            height: 36px;
            width: 100%;
            bottom: 0;
            left: 0;
            color: #fff;
            z-index: 2
        }

        .course-single-item .course-single-image .count-down-day .count-down,
        .course-single-item .course-single-image .live-start .count-down {
            display: inline-block
        }

        .course-single-item .course-single-image .count-down-day .count-down span.width,
        .course-single-item .course-single-image .live-start .count-down span.width {
            width: 8px;
            display: inline-block
        }

        .course-single-item .course-single-image .visiable-hour .count-down span:first-child,
        .course-single-item .course-single-image .visiable-hour .count-down span:nth-child(2) {
            display: none
        }

        .course-single-item .course-single-image .count-down-day {
            text-align: center
        }

        .course-single-item .course-single-image .live-start {
            text-align: left;
            padding-left: 15px
        }

        .course-single-item .course-single-image .live-start .count-down {
            display: inline-block
        }

        .course-single-item .course-single-image .live-tag {
            height: 22px;
            line-height: 22px;
            width: auto;
            padding: 0 10px;
            border-radius: 11px;
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 2;
            font-size: 12px
        }

        .course-single-item .course-single-image .live-tag.live-begin {
            background: #09bf74;
            color: #fff
        }

        .course-single-item .course-single-image .live-tag.live-ex {
            background: #ff9700;
            color: #fff
        }

        .course-single-item .course-single-image .live-ing {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            text-align: center;
            font-size: 18px;
            line-height: 215px
        }

        .course-single-item .course-single-image .live-ing span {
            padding-left: 20px
        }

        .course-single-item .course-single-info {
            padding: 10px 15px
        }

        .course-single-item .course-single-info .course-title {
            -webkit-line-clamp: 1;
            /*! autoprefixer: off */
            /*! autoprefixer: on */
            height: 1.5em;
            margin-bottom: 10px;
            cursor: pointer;
            font-weight: 700
        }

        .course-single-item .course-single-info .course-title,
        .course-single-item .course-single-info .course-title-moreline {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5em;
            white-space: normal;
            word-break: break-all
        }

        .course-single-item .course-single-info .course-title-moreline {
            -webkit-line-clamp: 2;
            /*! autoprefixer: off */
            /*! autoprefixer: on */
            height: 3em
        }

        .course-single-item .course-single-info .clearfix span {
            display: inline-block;
            color: #7f868c
        }

        .course-single-item .course-single-info .clearfix .credit {
            color: red;
            font-weight: 500
        }

        .course-single-item .course-single-info .clearfix .free {
            color: #09bf74 !important;
            font-size: 1rem
        }

        .course-single-item .course-single-info .clearfix .price {
            float: right;
            color: #ff9700 !important
        }

        .course-single-item .course-single-info .clearfix .green {
            color: #53b901 !important
        }

        .course-single-item .course-single-info .clearfix .charge {
            color: #ff9700 !important;
            font-size: 1rem
        }

        .course-single-item .course-single-info .clearfix .discount-price {
            margin-left: 10px;
            color: #999;
            font-weight: 400;
            text-decoration: line-through
        }

        .course-single-item .course-single-info .text-reverse {
            color: #ff9700 !important
        }

        .course-single-item .loader {
            margin: 0 auto;
            top: 50%;
            left: 50%;
            margin-top: -.5em;
            margin-left: -50px
        }

        .course-single-item .loader,
        .course-single-item .loader:after,
        .course-single-item .loader:before {
            background: #fff;
            animation: load1 1s infinite ease-in-out;
            width: 5px;
            height: 1em
        }

        .course-single-item .loader:after,
        .course-single-item .loader:before {
            position: absolute;
            top: 0;
            content: ""
        }

        .course-single-item .loader:before {
            left: -1em
        }

        .course-single-item .loader {
            position: absolute;
            font-size: 11px;
            animation-delay: .16s
        }

        .course-single-item .loader:after {
            left: 1em;
            animation-delay: .32s
        }

        .course-tutoring-item {
            width: 100%;
            float: left;
            transition: box-shadow .5s;
            cursor: pointer;
            margin-bottom: 30px
        }

        .course-tutoring-item:hover {
            box-shadow: 0 5px 20px rgba(0, 0, 0, .3)
        }

        .course-tutoring-item:hover img {
            transform: scale3d(1.1, 1.1, 1)
        }

        .course-tutoring-item .buy-btn-bar {
            display: -ms-flexbox;
            display: flex
        }

        .course-tutoring-item .buy-btn-bar .buy-btn {
            background: #198fe2;
            color: #fff;
            text-align: center;
            padding: 10px;
            -ms-flex: auto;
            flex: auto
        }

        .course-tutoring-item .buy-btn-bar>button {
            width: auto;
            height: auto;
            padding: 0;
            -ms-flex: auto;
            flex: auto
        }

        .course-tutoring-item .course-single-image {
            position: relative;
            cursor: pointer;
            overflow: hidden
        }

        .course-tutoring-item .course-single-image img {
            transition: transform .5s
        }

        .course-tutoring-item .course-single-image .discount-time {
            position: absolute;
            min-width: 100px;
            background: rgba(255, 153, 51, .8);
            color: #fff;
            right: 0;
            top: 0;
            padding: 3px 5px;
            border-bottom-left-radius: 10px
        }

        .course-tutoring-item .course-single-image .isVip {
            height: 30px;
            line-height: 30px;
            width: auto;
            padding: 0 10px;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
            font-size: 12px;
            background: red;
            color: #fff
        }

        .course-tutoring-item .course-single-info {
            border: 1px solid #eee;
            padding: 10px !important;
            border-top: 0;
            border-bottom: 0
        }

        .course-tutoring-item .course-single-info .course-title {
            -webkit-line-clamp: 1;
            /*! autoprefixer: off */
            /*! autoprefixer: on */
            height: 1.5em;
            margin-bottom: 10px;
            cursor: pointer;
            font-weight: 700
        }

        .course-tutoring-item .course-single-info .course-title,
        .course-tutoring-item .course-single-info .course-title-moreline {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5em;
            white-space: normal;
            word-break: break-all
        }

        .course-tutoring-item .course-single-info .course-title-moreline {
            -webkit-line-clamp: 2;
            /*! autoprefixer: off */
            /*! autoprefixer: on */
            height: 3em
        }

        .course-tutoring-item .course-single-info .clearfix span {
            display: inline-block;
            color: #7f868c
        }

        .course-tutoring-item .course-single-info .clearfix .credit {
            color: red;
            font-weight: 500;
            font-size: 16px
        }

        .course-tutoring-item .course-single-info .clearfix .free {
            color: #09bf74 !important;
            font-size: 1rem
        }

        .course-tutoring-item .course-single-info .clearfix .price {
            float: right;
            margin-top: 1px;
            color: #ff9700 !important
        }

        .course-tutoring-item .course-single-info .clearfix .green {
            color: #53b901 !important
        }

        .course-tutoring-item .course-single-info .clearfix .charge {
            color: #ff9700 !important;
            font-size: 1rem
        }

        .course-tutoring-item .course-single-info .clearfix .discount-price {
            margin-left: 10px;
            color: #999;
            font-weight: 400;
            text-decoration: line-through
        }

        .course-tutoring-item .course-single-info .text-reverse {
            color: #ff9700 !important
        }

        .course-tutoring-item .loader {
            margin: 0 auto;
            top: 50%;
            left: 50%;
            margin-top: -.5em;
            margin-left: -50px
        }

        .course-tutoring-item .loader,
        .course-tutoring-item .loader:after,
        .course-tutoring-item .loader:before {
            background: #fff;
            animation: load1 1s infinite ease-in-out;
            width: 5px;
            height: 1em
        }

        .course-tutoring-item .loader:after,
        .course-tutoring-item .loader:before {
            position: absolute;
            top: 0;
            content: ""
        }

        .course-tutoring-item .loader:before {
            left: -1em
        }

        .course-tutoring-item .loader {
            position: absolute;
            font-size: 11px;
            animation-delay: .16s
        }

        .course-tutoring-item .loader:after {
            left: 1em;
            animation-delay: .32s
        }

        @keyframes load1 {

            0%,
            80%,
            to {
                box-shadow: 0 0 #fff;
                height: 1em
            }

            40% {
                box-shadow: 0 -1em #fff;
                height: 1.5em
            }
        }

        .course-five {
            width: 225px;
            margin-right: 18px;
            box-shadow: 0 0 20px #dcdcdc
        }

        .course-five:nth-child(5n) {
            margin-right: 0
        }

        .course-five .course-single-image {
            height: 108px;
            width: 100%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .course-five .course-single-image img {
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important;
            width: auto !important;
            height: auto !important;
        }

        .course-five .course-single-info .course-title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            -moz-box-orient: vertical;
            /*! autoprefixer: on */
            overflow: hidden;
            height: 3em;
            line-height: 1.5em;
            white-space: normal;
            word-break: break-all
        }

        .course-four {
            width: 285px;
            margin-right: 20px
        }

        .course-four:hover {
            box-shadow: none
        }

        .course-four:nth-child(4n) {
            margin-right: 0
        }

        .course-four .course-single-image {
            height: 210px;
            width: 100%
        }

        .course-four .course-single-info {
            padding: 10px 0
        }

        .course-four .course-single-info .clearfix span {
            font-size: 14px
        }

        .course-three {
            width: 386px;
            margin-right: 20px;
            margin-bottom: 20px
        }

        .course-three:nth-child(3n) {
            margin-right: 0
        }

        .course-three .course-single-image {
            height: 215px;
            width: 100%
        }

        .course-three .course-single-info {
            border: 1px solid #eee;
            border-top: none
        }