@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/Inter-var-2.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

@media screen and (min-width:320px)and (max-width:768px) {
    html {
        font-size: 100px;
    }

    body,
    html {
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .header-container .search {
        display: none !important;
    }

    .isVideo_app {
        background: #ffc000 !important;
    }

    .isVideo_appspan {
        color: #000 !important;
    }

    /* 涓や釜鎸夐挳鐨� */
    .wrap {
        position: relative;
        box-shadow: 0 -3px 4px #efefef;
    }

    .wrap>.title img {
        margin-right: .16rem;
        margin-right: .16rem;
        position: relative;
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        border: 2px solid #f98800;
    }

    .wrap>.title {
        display: flex;
        padding: .08rem .04rem 0.08rem .2rem;
        background: #f8fafbfa;
        border-bottom: 1px solid #f39e4b;
    }

    .button-two {
        position: absolute;
        top: 0.11rem;
        right: 4%;
        display: flex;
        width: 0.9rem;
        justify-content: space-between;
    }

    .button-two img {
        width: 26px !important;
    }

    .wrap>.title>h2 {
        padding-top: .16rem;
    }

    .button-two>.study>span>a,
    .buy>span>a {
        font-family: 'Inter';
        font-size: 0.12rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #969191;
        text-align: center;
    }

    .Introduction {
        padding: .12rem 0rem;
        font-family: 'Inter';
        font-style: unset;
        font-weight: 400;
        line-height: .18rem;
        text-indent: .2rem;
        font-size: .14rem;
    }

    .scroll-derc>span,
    .decript>span {
        color: #5c5c5c;
        font-family: 'Inter';
        font-style: unset;
        letter-spacing: 0em;

    }

    .decript>span:nth-child(2) {
        word-wrap: break-word;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 瑙嗛鍒楄〃鏍峰紡 */
    .vjs-poster {
        background-size: cover !important;
    }

    .course_list {
        margin-right: .1rem;
        flex-shrink: 0;
        border-radius: .06rem;
        padding-left: .1rem;
    }

    .vjs-icon-placeholder,
    .vjs-remaining-time-display {
        color: #fff !important;
    }

    .course_list>img {
        width: 70%;
        height: 70%;
    }

    .content {
        display: flex;
        width: 100% !important;
    }

    .scrollView>h3 {
        font-size: .18rem;
    }

    .follow>h3 {
        font-size: .18rem;
    }

    .menu>h3 {
        font-size: .18rem;
    }

    .video-list-app>h3 {
        font-size: .15rem;
        padding: .14rem .2rem;
        text-align: right;
    }

    .video-list-app>h3::after {
        content: '';
        display: inline-block;
        width: 30px;
        height: 12px;
        background: url(/static/img/images/learn/arrow-left.svg) center center no-repeat;
    }

    .video-list {
        display: none;
    }

    .scrollView>.btn_left,
    .btn_right,
    .scrollView>.btn_left_detail,
    .btn_right_detail {
        display: none;
    }

    .scroll-item {
        width: 1.3rem;
        height: 1.5rem;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .scroll-item>a>img {
        width: 80%;
    }

    .content-app {
        display: flex;
    }

    .scrollView>p {
        padding: .14rem 0rem;
    }

    .scrollView-wrap {
        display: none;
    }

    .scrollView-wrap-app {
        display: block;
    }

    .wrapper-app2>.content-app2 {
        display: flex;
    }

    /* 搴曢儴鐨勬牱寮� */
    #footer {
        padding-bottom: .4rem;
    }

    .follow,
    .menu,
    .line {
        position: relative;
        width: 100%;
        line-height: .28rem;
    }

    .flower_us {
        display: flex;
        padding: .14rem 0;
    }

    .flower_us>li {
        width: .28rem;
        height: .28rem;
        background: rgb(193, 188, 188);
        ;
        border-radius: 50%;
        margin-left: .08rem;
    }

    .flower_us>li:nth-last-child(2)>a>svg {
        transform: translate(.07rem, .03rem);
    }

    .flower_us>li>a {
        line-height: .28rem;
    }

    .main-menu {
        display: none;
    }

    .vjs-big-play-button>.vjs-icon-placeholder {
        font-size: .48rem;
        color: #fff;
    }

    .dirc {
        transform: translateY(.3rem);
    }

    .dirc>p {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        color: rgba(92, 92, 92, 0.8);
        padding: .04rem .08rem;
        text-align: center;
    }

    .scroll-item>a {
        display: inline-block;
        text-align: center;
        padding: 10px;
    }

    .scroll-item::after {
        content: '';
        border-right: 1px #ddd solid;
        height: 120px;
        width: 0;
        display: inline-block;
        transform: translateY(-137px);
    }

    .scroll-derc {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    .video-auto {
        box-shadow: 0 2px 2px #ddd;
    }
}


/* 鍏叡澶撮儴鍜屽熬閮ㄧ殑鎵嬫満浠ｇ爜 */

@media screen and (max-width:990px) {
    html {
        font-size: 100px;
    }

    body,
    html {
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .pc_nav {
        display: none !important;
    }

    .app_header,
    #footer {
        display: block !important;
    }

    .header-container {
        display: none;
    }

    .scrollView>h3 {
        position: relative;
        padding: .14rem 0.2rem;
        background: #fff;
        color: #080808;
        border-bottom: 1px solid #dedede
    }

    .app-logo {
        margin: 0 auto;
        text-align: center;
        width: 55%;
    }

    .main-menu {
        padding-left: .1rem;
    }

    .header-container {
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
    }

    .logo {
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        height: .77rem;
        box-shadow: 0 0 8px rgba(201, 201, 201, 0.75)
    }

    .app-logo>.logo-href {
        background: url(https://cdn.shopify.com/s/files/1/0084/2799/5187/files/LOGO-01.svg?25733) center center no-repeat;
        width: 66%;
    }

    .header-container>.search {
        position: relative;
        width: 94%;
        margin: .21rem auto;
        margin-bottom: .21rem;
        top: 70px;
    }

    .magnifying-glass {
        position: absolute;
        right: 0rem;
        top: 0rem;
        width: 52px;
        height: 47px;
        background-color: #f98800;
        border-radius: 0px 5px 5px 0px;
        border-bottom-right-radius: .23rem;
        border-top-right-radius: .23rem;
    }

    .magnifying-glass>.search-icon {
        position: absolute;
        left: 0;
        top: 0rem;
        bottom: 0rem;
        right: 0rem;
        margin: auto;
        display: inline-block;
        width: .18rem;
        height: .18rem;
    }

    .input-box {
        height: .47rem;
        width: 100%;
        padding-left: .2rem;
        box-sizing: border-box;
        font-size: .18rem;
        color: #000;
        border: 2px solid #f98800;
        border-radius: .23rem;
    }

    .navigation-list,
    .nav-list {
        display: none;
    }

    .menu-header {
        position: absolute;
        top: 0.26rem;
        left: 0.2rem;
        background: url(/static/img/images/menu.svg) center no-repeat;
        background-size: contain;
        width: .26rem;
        height: .26rem;
    }

    .curtain {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
        background: rgba(10, 10, 10, 0.5);
        display: none;
    }

    .hot {
        position: relative;
    }

    .hot::after {
        position: absolute;
        top: 6px;
        left: 24%;
        display: block;
        content: 'hot';
        color: #fff;
        background: red;
        width: 30px;
        height: 20px;
        text-align: center;
        border-radius: 4px;
        line-height: 20px;
        font-size: 15px;
    }

    .header-left,
    .second-nav-box {
        position: fixed;
        top: 0;
        left: -250px;
        z-index: 1009;
        height: 100%;
        width: 250px;
        background: #fff;
        display: none;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    /* .arrow-down {
        position: absolute;
        top: 11px;
        right: 39px;
        background: url('../images/arrow down.png') center no-repeat;
        background-size: contain;
        width: .16rem;
        height: .16rem;
    }

    .arrow-down-app {
        position: absolute;
        opacity: 1;
        top: 34%;
        right: 10%;
        background: url('../images/arrow down.png') center no-repeat;
        background-size: contain;
        width: .2rem;
        height: .2rem;
    } */

    .header-left>ul,
    .second-nav-box>ul {
        position: absolute;
        width: 100%;
        height: 86%;
        top: 0.6rem;
        left: 0;
        box-sizing: border-box;
    }

    .second-nav-box>.second-nav-ul {
        top: 0;
    }

    .second-nav-box>.second-nav-ul .back {
        padding-left: 2em;
    }

    .second-nav-box>.second-nav-ul .back .down-arrow {
        left: -1em;
    }

    .header-left>ul>li,
    .second-nav-box>ul>li {
        position: relative;
        padding: .12rem 0rem;
        line-height: .26rem;
        font-family: 'Inter';
        font-style: normal;
        color:#333e48;
        font-weight: 500;
        border-bottom: 1px solid #ddd;
        box-sizing: content-box;
    }

    .header-left>ul>li>a,
    .second-nav-box>ul>li>a {
        font-size: 16px;
        color: #333e48;
        line-height: .26rem;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
    }

    .header-left>ul>.shop-menu>.shop-list {
        background: #fff;
        width: 100%;
        overflow-x: hidden;
        display: none;
        box-sizing: border-box;
        padding-left: .4rem;
    }

    /* 鎵嬫満绔乏渚х殑瀵艰埅 */
    .secondItem {
        position: relative;
        padding: .08rem 0 .08rem .8rem;
        font-size: .16rem;
        color: #615a5a;
        box-sizing: border-box;
    }

    .itemParent {
        display: none;
    }

    .firstarrow {
        top: 20px;
        left: 100px;
    }

    .secondarrow {
        top: 14px;
        left: 186px;
    }

    .third {
        display: flex;
        flex-wrap: wrap;
    }

    .fourth {
        max-width: 50%;
        flex-shrink: 0;
    }

    .fourth>p {
        font-size: .12rem;
        text-align: center;
    }

    .fourth>a {
        display: inline-block;
        text-align: center;
    }

    .fourth>a>img {
        max-width: 100%;
        width: 50%
    }

    .menu-item {
        font-size: 16px;
        transform: translateX(.3rem);
        display: inline-block;
    }

    .main-menu>li>a {
        display: inline-block;
        font-family:'Inter';
        font-style: normal;
        font-weight: 600;
        color: #1b1919;
        font-size: .12rem;
    }

    /* 搴曢儴鐨勬牱寮� */
    /* .hk_home {
        display: none;
    } */

    .hk_footerwrap {
        display: flex;
        flex-direction: column;
        padding: 15px;
    }

    .footerwrap {
        line-height: 40px;
    }

    .bottomlogo>img {
        display: none;
    }

    .pc_nav {
        display: none;
    }

    .one,
    .two,
    .three,
    .four {
        display: none;
    }

    .bottomlogo {
        padding: 0 .19rem;
        margin-bottom: .3rem;
    }

    .footerwrap p {
        position: relative;
    }

    .footerwrap p::after {
        display: inline-block;
        content: '';
        width: 14px;
        height: 14px;
        background: url(/static/img/images/learn/arrow_down.svg) center center no-repeat;
        position: absolute;
        right: 7%;
        top: 0.6em;
    }

    .f-list {
        /* background: #eee; */
        padding-left: 30px;
        width: 100%;
        box-sizing: border-box;
    }

    .block {
        display: block !important;
    }

    /* 搴曢儴鐨勬牱寮� */
    .footer_content img {
        display: none;
    }

    .content-list::after {
        content: '';
        display: inline-block;
        border-bottom: 1px solid #cec4c4;
        height: 1px;
        width: 100%;
        position: absolute;
        top: 46px;
    }
}

@media only screen and (min-width:375px) {
    .header-left>ul {
        bottom: 4.8%;
    }
}

@media only screen and (min-width:411px) {
    .header-left>ul {
        bottom: 6%;
    }
}

@media screen and (min-width:991px) {
    html {
        font-size: 100px;
    }

    body,
    html,
    #app {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .f-list {
        margin-top: 20px;
    }


    .app_header,
    #app_nav {
        display: none !important;
    }

    .hk_buy>a>img:hover {
        cursor: pointer;
        user-select: none;
        transform: scale(1.2);
        transition: all .7s;
    }

    .c_regist>a:hover {
        color: #f98800;
    }

    .course_list:hover span {
        color: #f98800;
    }

    .wrap>.title img {
        display: none;
    }

    /* 澶撮儴鐨勬牱寮忓紑濮� */
    /* 澶撮儴鐨勬牱寮忕粨鏉� */
    /* 瀵艰埅閮ㄥ垎鐨勬牱寮忓紑濮� */
    .nav-list {
        width: 100%;
        height: .6rem;
        background-color: #f6f6f6;
        min-width: 1024px;
        border-bottom: 1px solid #e4e4e4;
    }

    .Catalog::after {
        content: '';
        display: inline-block;
        width: 0;
        border-right: 2px #b8bbbf solid;
        height: 50px;
        position: absolute;
        right: 50%;
        box-shadow: 0 0 7px #bdbdbd;
    }

    .nav-list>ul {
        display: flex;
        box-sizing: border-box;
        max-width: 1200px;
        width: auto;
        margin: 0 auto;
        justify-content: space-between;
        position: relative;
    }

    .nav-list>ul>.list-item {
        font-family: 'Inter';
        font-size: 0.14rem;
        font-weight: 700;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #000;
        width: 14%;
        text-align: center;
        font-stretch: normal;
        line-height: 0.6rem;
    }

    .nav-list>ul>.list-item {
        user-select: none;
        cursor: pointer;
    }

    .product-name {
        line-height: .16rem !important;
    }

    /* 瀵艰埅閮ㄥ垎鐨勬牱寮忕粨鏉� */
    /* 涓棿鍐呭閮ㄥ垎鐨勬牱寮� */
    #main-content {
        max-width: 1200px;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .wrap {
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }

    .wrap>.title {
        display: flex;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        padding: 0.24rem 0rem 0rem 0rem;
    }

    .wrap>.title>h2 {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: 0.3rem !important;
        font-stretch: normal;
        line-height: 0.5rem;
        letter-spacing: 0rem;
        color: #3a3a3a;
        padding-bottom: 22px;
    }

    .button-two>.study>span>a,
    .buy>span>a {
        display: inline-block;
        text-align: center;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: 12px;
        font-stretch: normal;
        letter-spacing: 0;
        color: #3a3a3a;
    }

    .button-two {
        position: absolute;
        right: 0%;
        top: 3%;
        width: 24%;
        display: flex;
        justify-content: space-between;
    }

    .button-two>.study:hover>span>a,
    .buy:hover>span>a {
        user-select: none;
        cursor: pointer;
        text-decoration: none;
    }

    /* 瑙嗛閮ㄥ垎鐨� */
    .hk_wrapp {
        display: flex;
        justify-content: space-around;
    }

    .Catalog,
    .message {
        font-size: 13px;
        line-height: 50px;
        width: 100%;
        text-align: center;
        background: #f1f1f1;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        letter-spacing: 0em;
        color: #4e4e4e !important;
    }

    .video_list {
        background: #dedede;
    }

    .wrap>.video-content {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    .video-auto {
        width: 70%;
        min-width: 70%;
    }

    .video-content>.video-auto {
        border: 1px solid #cccccc;
        background: #fff;
    }

    .video-content>.video-list {
        position: relative;
        width: 28%;
        background-color: #fff;
        min-width: 27%;
    }

    .video-content>.video-list>h3 {
        font-size: 0.2rem;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.45rem;
        letter-spacing: 0rem;
        text-align: center;
        height: .45rem;
        background-color: #eeeeee;
        box-shadow: 0px 15px 10px -7px #b3a49d;
    }

    .course_content {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .study:hover img {
        transform: scale(1.3);
        transition: all .4s;
    }

    .study:hover p {
        color: #f98800;
        transition: all .4s;
    }

    .buy:hover img {
        transform: scale(1.3);
        transition: all .4s;
    }

    .buy:hover p {
        color: #f98800;
        transition: all .4s;
    }

    .course_content>ul {
        width: 100%;
    }

    .course_content>ul>li {
        padding-left: 40px;
        display: flex;
        justify-content: space-between;
        height: .4rem;
    }

    .decript {
        box-sizing: border-box;
        text-align: left;
        width: 100%;
        /* text-overflow: ellipsis;
            white-space: nowrap; */
        overflow: hidden;
    }

    .decript>span {
        font-size: 12px;
        font-family: 'Inter';
        font-style: normal;
        font-stretch: normal;
        color: #3a3a3a;
        line-height: 44px;
    }

    .course_content>ul>li>img {
        max-width: 1.5rem;
        max-height: .9rem;
        width: auto;
        height: auto;
        border: 2px solid transparent;
        box-sizing: border-box;
    }

    .course_content>ul>li>span {
        font-size: .16rem;
        color: #3a3a3a;
        line-height: .22rem;
    }

    .scrollView {
        position: relative;
        width: 100%;
        margin-top: 125px;
        border-radius: 20px;
        margin-bottom: 69px;
    }

    .hk_china {
        cursor: pointer;
        user-select: none;
    }

    .scrollView>h3 {
        transform: translate(0rem, -.6rem);
        font-size: 0.2rem;
        font-family: 'Inter';
        font-style: normal;
        font-weight: normal;
        font-stretch: normal;
        line-height: 0.45rem;
        letter-spacing: 0rem;
    }

    .scrollView>h3::after {
        display: inherit;
        content: '';
        border-bottom: 1px #ddd solid;
    }

    .scrollView>.scrollView-wrap {
        box-sizing: border-box;
        width: 80%;
        margin: 0 auto;
        overflow: hidden;
    }

    .scrollView>.scrollView-wrap>ul {
        white-space: nowrap;
        height: 100%;
        position: relative;
        left: 0;
        font-size: 0;
    }

    .scrollView>.scrollView-wrap>ul>.scroll-item {
        display: inline-block;
        width: 20%;
        background-color: #fff;
        margin: 10px 0;
        border-radius: 8px;
    }

    .scrollView>.scrollView-wrap>ul>.scroll-item:hover {
        box-shadow: 0 0 6px #ced5d1;
    }

    .scrollView>.scrollView-wrap>ul>.scroll-item>a {
        display: inline-block;
        height: 100%;
        width: 100%;
    }

    .scrollView>.scrollView-wrap>ul>.scroll-item>a>img {
        max-width: 100%;
        max-height: 70%;
        width: auto;
        height: auto;
        border: .02rem solid transparent;
        border-top-right-radius: .2rem;
        border-top-left-radius: .2rem;
        box-sizing: border-box;
    }

    .course_list {
        cursor: pointer;
        user-select: none;
    }

    .vjs-poster {
        background-size: cover !important;
    }

    .scroll-item>img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        border: .02rem solid transparent;
        border-top-right-radius: .2rem;
        border-top-left-radius: .2rem;
        box-sizing: border-box;
    }

    .isYellow {
        border: .02rem solid #ff8800 !important;
    }

    .isDerc {
        line-height: .28rem;
        font-size: .16rem;
        font-weight: normal !important;
        font-stretch: normal !important;
        letter-spacing: 0rem !important;
        color: #fd9928 !important;
    }

    .scroll-derc>span {
        display: inline-block;
        padding-left: 16px;
        white-space: normal;
        line-height: 28px;
        font-size: 14px;
        color: #5c5c5c;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        letter-spacing: 0em;
    }

    .scrollView>p {
        position: absolute;
        top: 0.3rem;
        left: 0.2rem;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: 0.2rem;
        color: #3a3a3a;
        line-height: .3rem;
        font-weight: bolder;
    }

    /* 涓棿鍐呭閮ㄥ垎鐨勬牱寮� */
    #footer {
        display: none !important;
    }

    /* 瑙嗛鐨勬牱寮� */
    #example_video_1 {
        width: 12.4rem;
        height: 6.1rem;
    }

    .vjs-paused .vjs-big-play-button,
    .vjs-paused.vjs-has-started .vjs-big-play-button {
        display: block;
    }

    .video-js .vjs-big-play-button {
        font-size: 2.5em;
        line-height: 2.3em;
        height: 2.5em;
        width: 2.5em;
        -webkit-border-radius: 2.5em;
        -moz-border-radius: 2.5em;
        border-radius: 2.5em;
        background-color: #73859f;
        background-color: rgba(115, 133, 159, .5);
        border-width: 0.15em;
        margin-top: -1.25em;
        margin-left: -1.75em;
    }

    /* 涓棿鐨勬挱鏀剧澶� */
    .vjs-big-play-button .vjs-icon-placeholder {
        font-size: 1.63em;
    }

    /* 鍔犺浇鍦嗗湀 */
    .vjs-loading-spinner {
        font-size: 2.5em;
        width: 2em;
        height: 2em;
        border-radius: 1em;
        margin-top: -1em;
        margin-left: -1.5em;
    }

    .btn_left,
    .btn_left_detail {
        width: .5rem;
        height: .5rem;
        position: absolute;
        top: 50%;
        left: 1%;
        /* background: #f39e4b; */
        /* padding: .1rem; */
        box-sizing: border-box;
        /* border-radius: 50%; */
    }

    .btn_left:hover>svg,
    .btn_left_detail:hover>svg {
        transform: scale(1.2);
        cursor: pointer;
        user-select: none;
    }

    .btn_right,
    .btn_right_detail {
        width: .5rem;
        height: .5rem;
        position: absolute;
        top: 50%;
        right: 1%;
        box-sizing: border-box;
    }

    .btn_right:hover>svg,
    .btn_right_detail:hover>svg {
        transform: scale(1.2);
        cursor: pointer;
        user-select: none;
    }

    /* 浜嬩欢鏂规硶鐨勬牱寮� */
    .header_desrc {
        position: absolute;
        display: flex;
        top: auto;
        background: #fff;
        z-index: 9;
        padding-bottom: .3rem;
        border-bottom-left-radius: .1rem;
        border-bottom-right-radius: .2rem;
        max-width: 95%;
        width: 100%;
        box-shadow: 0 1px 4px #a7a7a7;
        left: -3%;
        transform: translateX(3%);
    }

    .header_desrc>.nav_left {
        width: 20%;
        box-sizing: border-box;
    }

    .header_desrc>.nav_left>li>span {
        color: #000;
        font-size: .14rem;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 100 !important;
        letter-spacing: 0em;
    }

    .right_img {
        width: 80%;
        height: auto;
        padding: 20px 10px;
    }

    .right_img>.nav_right {
        width: 100% !important;
    }

    .right_img>.nav_right>li {
        width: 20%;
        box-sizing: border-box;
        transition: transform .4s cubic-bezier(0.55, -0.05, 0.37, 0.74);
    }

    .right_img>.nav_right>li:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 5px #efefef;
    }

    .right_img>.nav_right>li>p {
        color: #000000;
        font-size: 12px;
        text-align: center;
        font-weight: 600 !important;
        padding-bottom: 20px;
    }

    .isVideo {
        font-size: 14px;
        color: #000 !important;
        font-weight: 900;
    }

    .right_img>.nav_right>li>a {
        display: inline-block;
        width: 100%;
        transition: all .4s linear;
    }

    .right_img>.nav_right>li>a>img {
        width: 100%;
        transition: all .4s linear;
    }

    .isActive {
        color: #f49f4c !important;
    }

    .header_desrc>.nav_left>li {
        font-size: .16rem;
        line-height: .46rem;
        color: #fff;
        border-bottom: 1px sandybrown solid;
    }

    .listnav {
        background: #f39e4b;
    }

    .listnav_left_drc {
        color: #fff !important;
        font-weight: 100 !important;
    }

    .borderActive {
        background: #ccc;
    }

    /* PC绔笉鏄剧ずapp绔殑鍏冪礌 */
    .menu-header {
        display: none;
    }

    .header-left {
        display: none;
    }

    .video-list-app {
        display: none;
    }

    .scrollView-wrap-app {
        display: none;
    }

    .flower_us {
        display: flex;
    }

    ::-webkit-input-placeholder {
        /* WebKit, Blink, Edge */
        color: rgb(175, 170, 170);
        font-size: .16rem;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
    }

    :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: rgb(196, 192, 192);
        font-size: .16rem;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
    }

    ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: rgb(175, 170, 170);
        font-size: .16rem;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
    }

    :-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: rgb(175, 170, 170);
        font-size: .16rem;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
    }

    .Catalog,
    .message:hover {
        cursor: pointer;
        user-select: none;
    }

    .Introduction {
        display: none;
        font-size: 13px;
        line-height: 30px;
        width: 100%;
        font-family: 'Inter';
        font-style: normal;
        letter-spacing: 0;
        text-transform: none;
        white-space: normal;
        color: #040404;
        padding: 30px 34px;
        box-sizing: border-box;
    }

    .flex-active {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .scroll-item::before {
        content: '';
        border-right: 1px #ced5d1 solid;
        height: 176px;
        width: 0;
        display: inline-block;
        transform: translateY(46px);
    }

    /* 婊氬姩鏉＄殑鏍峰紡 */
}

@media screen and (width: 1024px) {
    .header-container {
        padding: 0rem;
    }

    .navigation-list {
        left: 1.1rem;
    }

    .nav-list>ul>.list-item {
        width: 8%;
    }

    .nav-list>ul {
        padding: 0 0.5rem;
    }

    .header_desrc {
        left: 0;
        width: 94.3%;
    }

    #main-content {
        padding: 0rem .2rem 0rem .2rem;
    }

    .button-two>.study>span>a,
    .buy>span>a {
        font-size: .14rem;
    }

    .button-two {
        right: 0%;
        width: 25%;
    }

    .button-two>.study {
        width: 94px;
    }

    .button-two>.buy {
        width: 94px;
    }

    /* 瑙嗛閮ㄥ垎 */
    .wrap>.video-content>.video-auto {
        width: 72%;
    }

    .vjs-fluid {
        height: 3.87rem !important;
    }

    .wrap>.video-content>.video-list {
        width: 26%;
    }

    .wrap>.video-content>.video-list {
        height: 4rem;
    }

    .course_content {
        height: 88%;
    }

    .wrap>.video-content>.video-auto {
        height: 100%;
    }

    .scrollView>.scrollView-wrap {
        width: 80%;
    }

    /* 搴曢儴 */
    #footer {
        padding: 0.2rem .3rem 0rem .3rem;
    }

    .footer-logo {
        width: 4rem;
    }

    #footer>.follow,
    .line,
    .menu {
        width: auto;
    }

    #learn_footer {
        display: block !important;
    }

    #footer {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .button-two {
        width: 35%;
    }

    .video-list {
        height: 415px;
    }

    @media (min-width: 1100px) {
        .button-two {
            width: 28%;
        }

        .course_content {
            height: 70%;
        }

        .wrap>.video-content>.video-list {
            height: 473px;
        }
    }

    /*>=1100鐨勮澶�*/
    @media (min-width: 1280px) {
        .button-two {
            width: 28%;
        }

        .course_content {
            height: 70%;
        }

        .wrap>.video-content>.video-list {
            height: 473px;
        }
    }

    /*>=1280鐨勮澶�*/
    @media (min-width: 1366px) {
        .button-two {
            width: 10%;
            transform: translateX(-110px);
        }

        .course_content {
            height: 71%;
        }

        .video-list {
            height: 395px;
        }

        /*婊氬姩鏉℃暣浣撴牱寮�*/
        .course_content::-webkit-scrollbar {
            width: 10px;
            height: 1px;
        }

        /*婊氬姩鏉℃粦鍧�*/
        .course_content::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #f39110;
        }

        /*婊氬姩鏉¤建閬�*/
        .course_content::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
            border-radius: 10px;
            background: #ccc;
        }

        .hk_china:hover img {
            transform: scale(1.1)
        }
    }
}

@media screen and (min-width: 769px)and (max-width: 1023px) {
    .video-list {
        height: 4rem;
    }

    .course_content {
        height: 64%;
    }
}

/* @media screen and (min-width: 1025px)and (max-width: 1310px) {
    .pc_nav {
        grid-column-gap: 10px;
    }


} */