@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
        }

        .courseItemSimple {
            width: 220px;
            height: 230px
        }

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

        .courseItem {
            float: left;
            background: #fff;
            box-shadow: 1px 1px 2px #dedede;
            transition: all .4s ease;
            position: relative;
            overflow: hidden;
            width: 405px;
            height: 10rem
        }

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

        .courseItem .courseTag {
            position: absolute;
            left: 5px;
            top: 5px
        }

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

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

        .courseItem .courseImage {
            position: relative;
            width: 225px;
            height: 100%;
            float: left
        }

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

        .courseItem .right {
            width: 180px;
            height: 100%;
            float: left
        }

        .courseItem .right .studying {
            width: 6.14rem;
            height: 1.86rem;
            font-size: .85rem;
            color: #fff;
            background: #ed7218;
            text-align: center;
            line-height: 1.86rem;
            display: block;
            margin: 20px auto;
            cursor: pointer
        }

        .courseItem p {
            padding: 0 8px;
            font-size: 1rem
        }

        .courseItem p:after {
            clear: both
        }

        .courseItem .courseTitle {
            color: #333;
            font-size: 1rem;
            padding: 0 8px;
            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
        }

        .courseItem .courseTitle .wrapperTag {
            padding: 0 5px 0 0;
            width: auto;
            color: #ff8a35;
            display: inline-block;
            border-radius: 3px
        }

        .courseItem .coursePrice {
            font-size: 1rem;
            float: left
        }

        .courseItem .Free {
            color: #27c836
        }

        .courseItem .Charge {
            color: #f60
        }

        .courseItem .courseCompany {
            color: #888;
            font-size: 1rem;
            width: 100px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: inline-block;
            text-align: right;
            float: right
        }

        .courseItem .courseCompany:hover {
            color: #0072d8
        }

        .courseItem .courseTag {
            width: 45px;
            font-size: 12px;
            color: #fff;
            background: #ddd;
            display: inline-block;
            padding: 2px 0;
            border-radius: 2px;
            text-align: center
        }

        .courseItem .courseTag.vip {
            background: red
        }

        .courseItem .courseTag.pkg {
            background: #8d0007
        }

        .courseItem .courseTag.open {
            background: #ec7119
        }

        .courseItem .courseTag.live {
            background: #0bc507
        }

        .courseItem .courseTag.record {
            background: #db0bdf
        }

        .courseItem .courseTag.activity {
            background: #d3d60d
        }