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

.phone {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 1200px;
    height: 40px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 14px
}

    .phone > p {
        display: flex;
        align-items: center;
        margin-left: 50px
    }

    .phone .icon {
        margin-right: 5px;
        width: 16px;
        height: 17px
    }

.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1200px;
    height: 95px
}

    .head .logo {
       /* width: 155px;
        height: 52px;*/
        max-width: 155px;
        max-height: 52px;
    }

    .head input {
        box-sizing: border-box;
        width: 520px;
        height: 42px;
        padding: 0 20px;
        background: #f2f2f2;
        border-radius: 21px;
        border: none;
        outline: none;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 14px;
        background-image: url("/images/default/icon_search5.png");
        background-size: 18px 18px;
        background-repeat: no-repeat;
        background-position: 490px 12px
    }

    .head .use {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 14px
    }

        .head .use .icon {
            width: 10px;
            height: 14px;
            border-radius: 1px
        }

        .head .use .download {
            padding: 0 31px 0 5px
        }

.nav {
    width: 1200px;
    display: flex;
    align-items: center
}

    .nav .all {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 275px;
        height: 42px;
        background: #0384fc;
        border-radius: 10px 10px 0px 0px;
        font-size: 16px;
        font-weight: bold;
        color: #ffffff;
        line-height: 16px
    }

    .nav .list-case {
        display: flex;
        align-items: center;
        gap: 60px;
        margin-left: 30px
    }

        .nav .list-case .list {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 400;
            line-height: 16px
        }

            .nav .list-case .list .icon {
                margin-left: 5px;
                width: 10px;
                height: 6px
            }

            .nav .list-case .list .tag {
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: -20px;
                left: 50px;
                width: 36px;
                height: 18px;
                background: #ff433b;
                border-radius: 4px 0px 4px 0px;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                line-height: 12px
            }

.banner {
    position: relative;
    display: flex;
    padding-bottom: 30px;
    justify-content: space-between;
    width: 1200px
}

    .banner .course-case-placeholder {
        width: 275px;
        height: 410px;
        background: #ffffff;
        opacity: .95;
        border-radius: 0px 0px 10px 10px
    }

    .banner .course-case {
        position: absolute;
        top: 0;
        left: 0;
        width: 275px;
        height: 410px;
        overflow: hidden;
        background: #ffffff;
        opacity: .95;
        border-radius: 0px 0px 10px 10px;
        z-index: 10;
        box-shadow: 0 0 5px #ccc;
    }

        .banner .course-case .course {
            box-sizing: border-box;
            padding: 17px 17px 17px 15px;
            border-bottom: 1px solid #eee;
            
        }

            .banner .course-case .course .title {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: bold;
                color: #333333;
                line-height: 16px
            }

                .banner .course-case .course .title .icon {
                    margin-right: 15px;
                    width: 20px;
                    height: 20px
                }

            .banner .course-case .course .list-case {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin-top: 20px;
                gap: 15px;
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                line-height: 14px
            }

        .banner .course-case:hover {
            height: auto
        }

    .banner .content {
        margin-top: 20px;
        width: 655px
    }

        .banner .content .banner-img {
            width: 655px;
            height: 280px
        }

        .banner .content .banner-list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px
        }

            .banner .content .banner-list .list {
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                width: 200px;
                height: 90px
            }

                .banner .content .banner-list .list > img {
                    z-index: 1;
                    position: absolute;
                    width: 200px;
                    height: 90px;
                    border-radius: 10px;
                    box-shadow: 3px 3px 5px #ccc;
                }

                .banner .content .banner-list .list > p {
                    z-index: 2;
                    width: 80px;
                    position: absolute;
                    right: 20px;
                    font-size: 20px;
                    font-weight: bold;
                    color: #ffffff;
                    line-height: 26px;
                    text-shadow: 0 5px 10px rgba(49,49,49,0.29)
                }

    .banner .message {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 210px;
        height: 390px;
        background: #ffffff;
        opacity: .96;
        border-radius: 6px;
        box-shadow: 0 0 5px #ccc;
    }

        .banner .message .avatar {
            width: 70px;
            height: 70px;
            background: #eeeafa;
            border: 1px solid #dddddd;
            border-radius: 50%;
            margin-top:18px;
        }

        .banner .message .welcome {
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            line-height: 38px
        }

        .banner .message .login {
            display: flex;
            align-items: center;
            justify-content: center;
       /*     margin-top: 26px;*/
            width: 170px;
            height: 38px;
            border: 1px solid #0384fc;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 400;
            color: #0384fc;
            line-height: 14px
        }

        .banner .message .register {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 14px;
            width: 170px;
            height: 38px;
            background: #0384fc;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
            line-height: 14px
        }

        .banner .message .ewm {
            margin-top: 14px;
            width: 105px;
            height: 105px;
            border: 1px solid #99c9ff
        }

        .banner .message .follow {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            line-height: 38px
        }

.live-broadcast {
    padding: 25px 0 40px;
    width: 1200px
}

    .live-broadcast .title-case {
        display: flex;
        align-items: center
    }

        .live-broadcast .title-case .title {
            margin-right: 34px;
            flex-shrink: 0;
            font-size: 20px;
            font-weight: bold;
            color: #333333;
            line-height: 20px
        }

        .live-broadcast .title-case .nav {
            display: flex;
            align-items: center
        }

            .live-broadcast .title-case .nav .list {
                padding: 12px;
                font-size: 13px;
                font-weight: 400;
                line-height: 13px;
                cursor:pointer;
            }

            .live-broadcast .title-case .nav .active-list {
                color: #0384fc;
                background: #ffffff;
                border-radius: 20px;
                box-shadow: 0 0 5px #ddd
            }

        .live-broadcast .title-case .more {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            width: 100px;
            height: 35px;
            background: #f2f2f2;
            border-radius: 18px;
            font-size: 13px;
            font-weight: 400;
            color: #333333;
            line-height: 13px
        }

            .live-broadcast .title-case .more > img {
                width: 10px;
                height: 10px
            }

    .live-broadcast .course-case {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 30px
    }

        .live-broadcast .course-case .course {
            position: relative;
            display: flex;
            width: 388px;
            height: 164px;
            background: #ffffff;
            border: 1px solid #edeff0;
            border-radius: 4px;
            margin:0 8px;
        }

            .live-broadcast .course-case .course .free {
                position: absolute;
                top: 9px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 56px;
                height: 22px;
                background: #ff7001;
                border-radius: 0px 11px 11px 0px;
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                line-height: 14px
            }

            .live-broadcast .course-case .course .info {
                margin: 23px 0 0 19px
            }

                .live-broadcast .course-case .course .info .avatar {
                    border-radius: 50%;
                    width: 74px;
                    height: 74px
                }

                .live-broadcast .course-case .course .info .name {
                    margin-top: 16px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #999999;
                    line-height: 14px
                }

            .live-broadcast .course-case .course .msg {
                margin: 27px 0 0 22px;
                width:250px;
                
            }

                .live-broadcast .course-case .course .msg .time {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    font-weight: 400;
                    color: #666666;
                    line-height: 14px
                }

                    .live-broadcast .course-case .course .msg .time > img {
                        margin-right: 6px;
                        width: 16px;
                        height: 16px
                    }

                .live-broadcast .course-case .course .msg .title {
                    padding: 20px 0 17px;
                    font-size: 16px;
                    font-weight: bold;
                    color: #333333;
                    line-height: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .live-broadcast .course-case .course .msg .chapter {
                    font-size: 14px;
                    font-weight: 400;
                    color: #666666;
                    line-height: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

            .live-broadcast .course-case .course .btn {
                position: absolute;
                bottom: 16px;
                right: 27px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 80px;
                height: 30px;
                background: linear-gradient(90deg, #ff6346, #ff423b);
                border-radius: 15px;
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                line-height: 14px
            }

            .live-broadcast .course-case .course:hover {
                box-shadow: 0 10px 20px 0 #eeeeee
            }

    .live-broadcast .more-case {
        display: flex;
        align-items: center;
        justify-content: center
    }

        .live-broadcast .more-case .more {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 21px;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            line-height: 14px
        }

            .live-broadcast .more-case .more > img {
                margin: 0 5px;
                width: 17px;
                height: 17px
            }

.course-group {
    padding: 41px 0 48px;
    width: 1200px
}

    .course-group .title-case {
        display: flex;
        align-items: center
    }

        .course-group .title-case .title {
            margin-right: 34px;
            flex-shrink: 0;
            font-size: 20px;
            font-weight: bold;
            color: #333333;
            line-height: 20px
        }

        .course-group .title-case .nav {
            display: flex;
            align-items: center
        }

            .course-group .title-case .nav .list {
                padding: 12px;
                font-size: 13px;
                font-weight: 400;
                line-height: 13px;
                cursor:pointer;
            }

            .course-group .title-case .nav .active-list {
                color: #fff;
                background: #0384fc;
                border-radius: 20px;
                box-shadow: 0 0 5px #ddd
            }

        .course-group .title-case .more {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            width: 100px;
            height: 35px;
            background: #f2f2f2;
            border-radius: 18px;
            font-size: 13px;
            font-weight: 400;
            color: #333333;
            line-height: 13px;
            cursor:pointer;
        }

            .course-group .title-case .more > img {
                width: 10px;
                height: 10px
            }

    .course-group .course-case {
        display: flex;
        align-items: center;
        justify-content:  flex-start;
        margin-top: 20px;
    }

        .course-group .course-case .course {
            box-sizing: border-box;
            padding: 31px 20px 18px;
            width: 282px;
            height: 301px;
            background-image: url("../images/bg_kc.png");
            background-size: 100% 100%;
            margin:0 10px;
        }

            .course-group .course-case .course .title {
                font-size: 17px;
                font-weight: bold;
                color: #333333;
                line-height: 28px
            }

            .course-group .course-case .course .grade {
                margin-top: 20px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #0384fc;
                line-height: 34px
            }

            .course-group .course-case .course .teacher-case {
                display: flex;
                align-items: center;
                gap: 20px;
                margin-top: 30px
            }

                .course-group .course-case .course .teacher-case .teacher {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center
                }

                    .course-group .course-case .course .teacher-case .teacher > img {
                        border-radius: 50%;
                        width: 40px;
                        height: 40px
                    }

                    .course-group .course-case .course .teacher-case .teacher > p {
                        font-size: 12px;
                        font-weight: 400;
                        color: #333333;
                        line-height: 34px
                    }

            .course-group .course-case .course .line {
                width: 100%;
                height: 1px;
                background: #ededed
            }

            .course-group .course-case .course .price__btn {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 10px
            }

            .course-group .course-case .course .price {
                font-size: 14px;
                font-weight: bold;
                color: #de3e29;
                line-height: 34px
            }

            .course-group .course-case .course .btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 90px;
                height: 30px;
                background: #0384fc;
                border-radius: 15px;
                font-size: 13px;
                font-weight: 400;
                color: #ffffff;
                line-height: 13px;
                cursor:pointer;
            }

    .course-group .data-case {
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        margin-top: 16px;
        width: 1200px;
        height: 301px;
        background: #ffffff;
        border: 1px solid #f0f0f0;
        border-radius: 10px
    }

        .course-group .data-case .down__hot {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 567px
        }

            .course-group .data-case .down__hot .nav {
                position: relative;
                width: 100%;
                height: 47px;
                border-bottom: 1px solid #f6f6f6
            }

            .course-group .data-case .down__hot .down, .course-group .data-case .down__hot .hot {
                padding: 0 16px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: relative;
                height: 47px;
                font-size: 16px;
                line-height: 47px;
                font-weight: 400;
                color: #333333;
                cursor:pointer;
            }

            .course-group .data-case .down__hot .active::after {
                content: " ";
                position: absolute;
                bottom: 0;
                width: 30px;
                height: 3px;
                background: #0384fc;
                border-radius: 2px
            }

            .course-group .data-case .down__hot .more {
                position: absolute;
                right: 0;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #999999;
                cursor:pointer;
            }

            .course-group .data-case .down__hot .down-list {
                position: relative;
                padding: 20px 0 12px;
                width: 532px;
                font-size: 12px;
                font-weight: 400;
                color: #e5e5e5;
                line-height: 38px;
                border-bottom: 1px dashed #e5e5e5
            }

                .course-group .data-case .down__hot .down-list .name {
                    font-size: 14px;
                    font-weight: 400;
                    color: #555555;
                    line-height: 14px
                }

                .course-group .data-case .down__hot .down-list .size__num {
                    display: flex;
                    align-items: center;
                    margin-top: 10px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #999999;
                    line-height: 24px
                }

                    .course-group .data-case .down__hot .down-list .size__num .num {
                        margin-left: 26px
                    }

                .course-group .data-case .down__hot .down-list .btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    bottom: 12px;
                    right: 0;
                    width: 70px;
                    height: 24px;
                    background: #ffffff;
                    border: 1px solid #b4dbff;
                    border-radius: 12px;
                    font-size: 13px;
                    font-weight: 400;
                    color: #0384fc;
                    line-height: 13px
                }

        .course-group .data-case .online {
            width: 540px
        }

            .course-group .data-case .online .title {
                font-size: 16px;
                font-weight: bold;
                color: #333333;
                line-height: 47px
            }

            .course-group .data-case .online .classify {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 540px;
                height: 91px;
                border: 1px solid #f2f2f2;
                border-radius: 10px
            }

                .course-group .data-case .online .classify .list {
                    width: 33.3%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }

                    .course-group .data-case .online .classify .list > img {
                        width: 44px;
                        height: 44px;
                        margin-right: 10px;
                        
                        
                    }

                    .course-group .data-case .online .classify .list .list-title {
                        font-size: 16px;
                        font-weight: 400;
                        color: #333333
                    }

                    .course-group .data-case .online .classify .list .list-describe {
                        margin-top: 10px;
                        font-size: 13px;
                        font-weight: 400;
                        color: #999999
                    }

        .course-group .data-case .down-app {
            position: relative;
            margin-top: 10px;
            width: 540px;
            height: 134px;
            background-image: url("../images/bg_zt.png");
            background-size: 100% 100%
        }

            .course-group .data-case .down-app .ewm {
                position: absolute;
                top: 21px;
                left: 26px;
                width: 93px;
                height: 93px
            }



.home_container .banner {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 280px;
    min-width: 655px;
    position: relative;
}

    .home_container .banner .swiper-container {
        position: absolute;
        width: 100%;
        height: 280px;
        min-width: 655px;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 3px 3px 5px #ccc;
    }

        .home_container .banner .swiper-container .swiper-slide {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            overflow: hidden;
            border-radius: 10px;
        }

        .home_container .banner .swiper-container > img {
            width: 655px;
            height: 100%;
        }

        .home_container .banner .swiper-container .swiper-pagination-bullet {
            width: 15px;
            height: 15px;
        }

    .home_container .banner .sidebar-left {
        z-index: 100;
        overflow: hidden;
        width: 275px;
        height: 400px;
        background: rgba(255,255,255,0.95);
    }

        .home_container .banner .sidebar-left > .chunk {
            opacity: 0.95;
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

            .home_container .banner .sidebar-left > .chunk .title {
                font-weight: bold;
                font-size: 16px;
                color: #333;
            }

                .home_container .banner .sidebar-left > .chunk .title > span {
                    padding: 0 10px;
                }

            .home_container .banner .sidebar-left > .chunk .list {
                margin-top: 10px;
            }

                .home_container .banner .sidebar-left > .chunk .list p {
                    cursor: pointer;
                    padding: 0 5px;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 24px;
                    color: #333;
                }

                    .home_container .banner .sidebar-left > .chunk .list p:hover {
                        color: #4f92f0;
                    }

    .home_container .banner .login-box {
        z-index: 10;
        margin-left: 715px;
        margin-top: 30px;
        width: 210px;
        height: 330px;
        background: rgba(255,255,255,0.95);
        border-radius: 6px;
    }

        .home_container .banner .login-box .avatar {
            overflow: hidden;
            margin-top: 21px;
            margin-bottom: 13px;
            width: 70px;
            height: 70px;
            background: #eeeafa;
            border: 1px solid #ddd;
            border-radius: 50%;
        }

            .home_container .banner .login-box .avatar img {
                width: 100%;
                height: 100%;
            }

        .home_container .banner .login-box .login-but {
            cursor: pointer;
            margin-top: 26px;
            width: 170px;
            height: 38px;
            font-weight: 400;
            font-size: 14px;
            line-height: 36px;
            color: #0384fc;
            border: 1px solid #0384fc;
            border-radius: 4px;
        }

        .home_container .banner .login-box .register-but {
            cursor: pointer;
            overflow: visible;
            position: relative;
            margin-top: 14px;
            width: 170px;
            height: 38px;
            font-weight: 400;
            font-size: 14px;
            line-height: 36px;
            color: #fff;
            background: #0384fc;
            border-radius: 4px;
        }

            .home_container .banner .login-box .register-but span {
                position: absolute;
                top: -10px;
                right: -10px;
                display: block;
                width: 70px;
                height: 20px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                color: #fff;
                background: #ff8b2d;
                border-radius: 8px 0 8px 0;
            }

        .home_container .banner .login-box .attention {
            margin-top: 23px;
        }

.cursor_pointer {
    cursor: pointer;
}

.nav-list {
    cursor: pointer;
    position: relative;
    height: 42px;
    line-height: 42px;
    text-align: center;
}

.course-menu {
    position: absolute;
    top: 40px;
    left: -165px;
    padding: 25px 0;
    background-color: #fff;
    box-shadow: 0 0 5px #ccc;
    z-index: 999;
}
    .course-menu .course-chunk {
        border-right: 1px solid #f6f6f6;
    }
    .course-menu .title {
        padding: 0 31px;
        font-weight: bold;
        font-size: 16px;
        line-height: 38px;
        color: #333;
        white-space: nowrap;
    }
    .course-menu .course-chunk-list {
        height: 35px;
        font-size: 14px;
        line-height: 35px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 126px
    }
    .flex {
        display: flex;
    }