#app {
    min-width: 1200px;
    position: relative;
}


.header_content {
    position: relative;
    background-color: #4856f3;
}

.header_list {
    width: 1200px;
    height: 100px;
    line-height: 100px;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .header_list img {
        display: block;
        width: 180px;
    }

    .header_list ul li {
        float: left;
        width: 85px;
        text-align: center;
        height: 36px;
        line-height: 36px;
        color: #ffffff;
        margin-right: 28px;
        letter-spacing: 0.5px;
        font-weight: bold;
        cursor: pointer;
    }

        .header_list ul li a {
            color: #ffffff;
        }

            .header_list ul li a:hover {
                text-decoration: underline;
            }

        .header_list ul li.btn {
            width: 125px;
        }

        .header_list ul li .exit_button {
            border: 1px solid #ffffff;
            border-radius: 8px;
            width: 125px;
            height: 36px;
            color: white;
            cursor: pointer;
            font-size: 14px;
            letter-spacing: 1.5px;
        }

            .header_list ul li .exit_button:hover {
                background-color: rgba(255,255,255,.1);
            }

            .header_list ul li .exit_button .iconfont {
                margin-right: 5px;
            }

    .header_list ul .header {
        width: 45px;
        display: block;
        position: relative;
        top: -4px;
    }

        .header_list ul .header img {
            width: 100%;
            display: block;
        }

.trapezoid_box {
    width: 100%;
    background-color: #eceefe;
}

    .trapezoid_box .trapezoid_box_top {
        width: 100%;
        height: 340px;
        background-color: #4856f3;
        background-image: url('../img/index/shadding_bottom.png');
        background-repeat: no-repeat;
        background-size: 100% 80%;
        background-position: center center;
        position: relative;
    }

        .trapezoid_box .trapezoid_box_top .icon_1 {
            position: absolute;
            right: 100px;
            width: 140px;
            display: block;
            opacity: .6;
            bottom: -120px;
        }

    .trapezoid_box .personal_panel {
        width: 1100px;
        border-radius: 30px;
        padding: 0px 50px;
        margin: 0px auto;
        background-color: #ffffff;
        position: relative;
        top: -200px;
        padding-bottom: 30px;
        z-index: 1;
        min-height: 600px;
    }

.personal_panel .panel_header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    top: -40px;
}

    .personal_panel .panel_header .text_info {
        text-align: center;
        margin-top: 35px;
    }

        .personal_panel .panel_header .text_info .number {
            font-size: 22px;
            font-weight: bold;
            height: 30px;
            line-height: 30px;
        }

            .personal_panel .panel_header .text_info .number.tips {
                color: red;
                animation: time_warning .4s ease-in-out infinite;
            }

@keyframes time_warning {
    0% {
        transform: scale(1) rotateZ(0);
    }

    30% {
        transform: scale(1.5) rotateZ(-10deg);
    }

    60% {
        transform: scale(1) rotateZ(0deg);
    }

    100% {
        transform: scale(1.5) rotateZ(10deg);
    }
}

.personal_panel .panel_header .text_info .text {
    font-size: 14px;
    color: #7e7e7e;
    letter-spacing: 1.5px;
    margin-top: 5px;
    height: 20px;
    line-height: 20px;
}

.personal_img {
    text-align: center;
}

    .personal_img img {
        width: 120px;
        display: block;
        border-radius: 50%;
        border: 3px solid #ffffff;
        box-shadow: 0px 0px 5px #adadad;
        margin: 0px auto;
    }

    .personal_img .personal_name {
        font-weight: bold;
        letter-spacing: 1.2px;
        font-size: 1.1em;
        margin-top: 10px;
        height: 25px;
        line-height: 25px;
    }

    .personal_img .personal_signature {
        font-size: 0.8em;
        color: #989898;
        margin-top: 15px;
    }

.personal_achievement {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    padding: 0 15px;
    border-radius: 6px;
    border: 1px solid #f1f1f1;
}

    .personal_achievement .achievement_icon .text {
        color: #4856f3;
        margin-right: 10px;
    }

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

        .personal_achievement .achievement_icon .person_icon {
            width: 45px;
            height: 30px;
            background-image: url('../img/center/center1.png');
            background-repeat: no-repeat;
            background-size: auto 30px;
            margin: 0 10px;
        }

            .personal_achievement .achievement_icon .person_icon.one {
                background-position: 0px 0px;
            }

            .personal_achievement .achievement_icon .person_icon.two {
                background-position: -45px 0px;
            }

            .personal_achievement .achievement_icon .person_icon.three {
                background-position: -90px 0px;
            }

            .personal_achievement .achievement_icon .person_icon.four {
                background-position: -135px 0px;
            }

            .personal_achievement .achievement_icon .person_icon.five {
                background-position: -180px 0px;
            }

            .personal_achievement .achievement_icon .person_icon.six {
                background-position: -225px 0px;
            }

            .personal_achievement .achievement_icon .person_icon.seven {
                background-position: -270px 0px;
            }

            .personal_achievement .achievement_icon .person_icon.eight {
                background-position: -315px 0px;
            }

    .personal_achievement button {
        width: 110px;
        height: 40px;
        border-radius: 8px;
        color: #ffffff;
        background-color: #0c86fe;
    }

.set_hand.personal_set:hover {
    background-color: #2593ff;
}

.personal_panel .works_type {
    width: 100%;
    height: 70px;
    line-height: 70px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 25px;
    margin-top: -30px;
}

    .personal_panel .works_type .my_works {
        font-size: 1.5em;
        margin-right: 25px;
        font-weight: bold;
    }

    .personal_panel .works_type button {
        padding: 0 25px;
        height: 35px;
        letter-spacing: 1.5px;
        border-radius: 25px;
        margin-right: 20px;
        color: #787878;
        font-size: 14px;
    }

        .personal_panel .works_type button:hover {
            background-color: #eff0ff;
        }

        .personal_panel .works_type button.active,
        .personal_panel .works_type button.active:hover {
            color: #ffffff;
            background-color: #4856f3;
        }

    .personal_panel .works_type .start_project {
        background: linear-gradient(to bottom,#6459e8,#3246c2);
        padding: 0 25px;
        width: auto;
        box-shadow: 3px 3px 5px #97a3ff;
        letter-spacing: 1.5px;
        height: 55px;
        color: white;
        margin-left: auto;
        cursor: pointer;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

        .personal_panel .works_type .start_project img {
            display: block;
            width: 90px;
        }

        .personal_panel .works_type .start_project:hover {
            background: linear-gradient(to bottom,#6d61ff,#3c54e5);
        }

        .personal_panel .works_type .start_project:active {
            background: linear-gradient(to bottom,#5c52d3,#2d3ea9);
        }

.trapezoid_box .personal_panel .work_type_panel {
    display: none;
}

    .trapezoid_box .personal_panel .work_type_panel.show {
        display: block;
        animation: fadeIn .2s;
    }

    .trapezoid_box .personal_panel .work_type_panel .my_classes {
        display: flex;
        align-items: center;
        width: calc(100% - 25px);
        margin: 0 auto;
        margin-bottom: 30px;
    }

        .trapezoid_box .personal_panel .work_type_panel .my_classes .my_classes_text {
            border-left: 4px solid #4856f3;
            height: 15px;
            line-height: 15px;
            padding-left: 10px;
            letter-spacing: 1px;
            font-weight: bold;
        }

        .trapezoid_box .personal_panel .work_type_panel .my_classes .my_class_list {
            margin-left: 50px;
            display: flex;
            align-items: center;
        }

            .trapezoid_box .personal_panel .work_type_panel .my_classes .my_class_list li {
                color: #027dfd;
                font-size: 14px;
                border: 1px solid #027dfd;
                text-align: center;
                padding: 5px 15px;
                border-radius: 20px;
                height: 20px;
                line-height: 20px;
                cursor: pointer;
                margin-right: 25px;
            }

                .trapezoid_box .personal_panel .work_type_panel .my_classes .my_class_list li:hover {
                    background-color: #f5faff;
                }

                .trapezoid_box .personal_panel .work_type_panel .my_classes .my_class_list li.active,
                .trapezoid_box .personal_panel .work_type_panel .my_classes .my_class_list li.active:hover {
                    background-color: #027dfd;
                    color: white;
                }

    .trapezoid_box .personal_panel .work_type_panel .work_class_list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

        .trapezoid_box .personal_panel .work_type_panel .work_class_list > li {
            width: calc(25% - 20px);
            margin: 0 10px;
            margin-bottom: 20px;
            cursor: pointer;
        }

            .trapezoid_box .personal_panel .work_type_panel .work_class_list > li .cover {
                width: 100%;
                position: relative;
                border-radius: 10px;
                overflow: hidden;
                transition: transform .2s;
                position: relative;
            }

            .trapezoid_box .personal_panel .work_type_panel .work_class_list > li:hover .cover {
                transform: scale(1.05);
            }

            .trapezoid_box .personal_panel .work_type_panel .work_class_list > li .cover .today {
                position: absolute;
                top: 10px;
                right: 10px;
                color: white;
                text-align: center;
                text-shadow: 1px 1px 2px #834e00;
            }

                .trapezoid_box .personal_panel .work_type_panel .work_class_list > li .cover .today .today_icon {
                    font-size: 26px;
                }

                .trapezoid_box .personal_panel .work_type_panel .work_class_list > li .cover .today .today_text {
                    font-size: 12px;
                    margin-top: 5px;
                }

            .trapezoid_box .personal_panel .work_type_panel .work_class_list > li .cover > img {
                display: block;
                width: 100%;
                background-color: #f59f1f;
            }

            .trapezoid_box .personal_panel .work_type_panel .work_class_list > li .cover .lock {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
                background-color: rgba(0,0,0,.7);
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .trapezoid_box .personal_panel .work_type_panel .work_class_list > li .cover .lock img {
                    display: block;
                    width: 60px;
                }

            .trapezoid_box .personal_panel .work_type_panel .work_class_list > li .work_class_title {
                padding: 5px 0;
                font-size: 16px;
                height: 25px;
                line-height: 25px;
            }

.personal_panel .load_more {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    color: #979797;
    letter-spacing: 1.5px;
}

    .personal_panel .load_more img {
        display: block;
        width: 30px;
        margin-right: 5px;
    }

    .personal_panel .load_more .iconfont {
        font-size: 18px;
        margin-right: 10px;
        color: #3ec142;
    }

.works_box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .works_box.loading,
    .works_box.empty {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 140px 0;
    }

        .works_box.loading img {
            display: block;
            width: 100px;
        }

        .works_box.empty img {
            display: block;
            width: 142px;
        }

        .works_box.loading p,
        .works_box.empty p {
            color: #8b8b8b;
            margin-top: 15px;
            letter-spacing: 1.5px;
        }

    .works_box .work_item {
        width: calc(33.3333333% - 20px);
        border-radius: 12px;
        margin: 0 10px;
        margin-bottom: 20px;
        box-sizing: border-box;
    }

        .works_box .work_item .image {
            width: 340px;
            height: 255px;
            display: block;
            border-radius: 8px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            transition: all .15s ease-in-out;
            border: 1px solid #f7f7f7;
        }

        .works_box .work_item:hover .image {
            transform: scale(1.05)
        }

        .works_box .work_item .image img {
            display: block;
            width: 340px;
            height: 255px;
        }

        .works_box .work_item .image .mask_action {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            background-color: rgba(255,255,255,.7);
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .works_box .work_item:hover .mask_action {
            display: flex;
        }

        .works_box .work_item .image .mask_action .action_btn {
            background: linear-gradient(to bottom,#6459e8,#3246c2);
            padding: 0 20px;
            width: auto;
            box-shadow: 3px 3px 5px #97a3ff;
            letter-spacing: 1.5px;
            height: 40px;
            color: white;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
        }

            .works_box .work_item .image .mask_action .action_btn:hover {
                background: linear-gradient(to bottom,#7267f9,#4859bd);
            }

            .works_box .work_item .image .mask_action .action_btn.delete {
                margin-top: 15px;
                background: linear-gradient(to bottom, #f36868, #c92703);
                box-shadow: 3px 3px 5px #fbb4b4;
            }

                .works_box .work_item .image .mask_action .action_btn.delete:hover {
                    background: linear-gradient(to bottom, #f97979, #e32e06);
                }

        .works_box .work_item .works_name {
            margin: 0 auto;
            margin-top: 10px;
            width: 340px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 18px;
            letter-spacing: 1.5px;
        }

        .works_box .work_item .crate_time {
            font-size: 0.75em;
            color: #838383;
            width: 340px;
            margin: 0 auto;
            margin-top: 5px;
        }

.cartoon {
    width: 140px;
    display: block;
    opacity: .6;
    z-index: 11;
}

    .cartoon.ThreeT {
        position: absolute;
        right: 100px;
        top: 20%;
    }

    .cartoon.OneT {
        position: absolute;
        left: 100px;
        top: 40%;
    }

    .cartoon.TwoT {
        position: absolute;
        right: 100px;
        top: 65%;
    }

.quit_container,
.continue_container,
.lock_warning_container,
.lessones_container {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .continue_container .continue_confirm {
        background-color: white;
        border-radius: 12px;
        padding: 10px;
        width: 500px;
        box-shadow: 3px 4px 10px #4c4c4c;
    }

    .quit_container .quit_confirm {
        border-radius: 12px;
        padding: 10px;
        width: 500px;
        background-color: #4856f3;
        box-shadow: 3px 4px 5px rgba(0,0,0,.3);
    }

        .quit_container .quit_confirm .caption {
            color: white;
            font-size: 22px;
            height: 25px;
            line-height: 25px;
            padding: 15px;
            text-align: center;
            letter-spacing: 1.5px;
        }

        .quit_container .quit_confirm .quit_icon {
            display: block;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            border-radius: 50%;
            width: 70px;
            box-shadow: 3px 4px 5px #1929df;
        }

        .quit_container .quit_confirm .quit_text {
            text-align: center;
            color: white;
            letter-spacing: 1.5px;
            height: 25px;
            line-height: 25px;
        }

        .quit_container .quit_confirm .quit_buttons {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 40px 0;
            margin-bottom: 30px;
        }

            .quit_container .quit_confirm .quit_buttons .btn {
                margin: 0 40px;
                height: 40px;
                background-color: #ffffff2b;
                color: white;
                width: 150px;
                border-radius: 8px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .quit_container .quit_confirm .quit_buttons .btn img {
                    margin-right: 10px;
                    display: block;
                    width: 25px;
                }

                .quit_container .quit_confirm .quit_buttons .btn:hover {
                    background-color: rgba(255,255,255,.3);
                }

                .quit_container .quit_confirm .quit_buttons .btn:active {
                    background-color: rgba(255,255,255,.4);
                }

                .quit_container .quit_confirm .quit_buttons .btn.cancel {
                    background: none;
                }

                    .quit_container .quit_confirm .quit_buttons .btn.cancel:hover {
                        background-color: rgba(255,255,255,.1);
                    }

                    .quit_container .quit_confirm .quit_buttons .btn.cancel:active {
                        background-color: rgba(255,255,255,.2);
                    }

        .quit_container .quit_confirm.fade_in,
        .continue_container .continue_confirm.fade_in {
            animation: fadeIn .35s;
            animation-fill-mode: forwards;
        }

    .continue_container .continue_confirm .caption {
        text-align: center;
        font-size: 24px;
        height: 30px;
        line-height: 30px;
        margin-top: 20px;
        margin-bottom: 30px;
        letter-spacing: 1.5px;
        font-weight: bold;
    }

    .continue_container .continue_confirm .continue_icon {
        display: block;
        margin: 0 auto;
        width: 90px;
        background-color: white;
        padding: 20px;
        border-radius: 50%;
        box-shadow: 0px 0px 10px #ededed;
    }

        .continue_container .continue_confirm .continue_icon.warning {
            box-shadow: 0px 0px 20px #ffe4e4;
        }

    .continue_container .continue_confirm .continue_text {
        text-align: center;
        margin-top: 25px;
        color: #7a7a7a;
        height: 20px;
        line-height: 20px;
        letter-spacing: 1.5px;
    }

    .continue_container .continue_confirm .continue_buttons {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: calc(100% - 60px);
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 15px;
    }

        .continue_container .continue_confirm .continue_buttons .btn {
            background: linear-gradient(to bottom,#6459e8,#3246c2);
            width: 45%;
            height: 45px;
            border-radius: 8px;
            color: white;
            box-shadow: 3px 3px 5px #97a3ff;
            letter-spacing: 1.5px;
            cursor: pointer;
        }

            .continue_container .continue_confirm .continue_buttons .btn:hover {
                background: linear-gradient(to bottom,#6d61ff,#3c54e5);
            }

            .continue_container .continue_confirm .continue_buttons .btn:active {
                background: linear-gradient(to bottom,#5c52d3,#2d3ea9);
            }

            .continue_container .continue_confirm .continue_buttons .btn.warning {
                background: linear-gradient(to bottom,#ff3535,#a10101);
                box-shadow: 1px 1px 5px #ff9393;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .continue_container .continue_confirm .continue_buttons .btn.warning img {
                    display: block;
                    width: 45px;
                    height: 45px;
                }

                .continue_container .continue_confirm .continue_buttons .btn.warning:hover {
                    background: linear-gradient(to bottom,#f75353,#cb0505);
                }

                .continue_container .continue_confirm .continue_buttons .btn.warning:active {
                    background: linear-gradient(to bottom,#e32f2f,#810202);
                }

                .continue_container .continue_confirm .continue_buttons .btn.warning.ing {
                    color: rgb(255 255 255 / 40%);
                }

@keyframes fadeIn {
    from {
        opacity: .5;
    }

    to {
        opacity: 1;
    }
}

.lock_warning_container .lock_box {
    background-color: white;
    padding: 30px 50px;
    border-radius: 10px;
    width: 200px;
    box-shadow: 3px 3px 15px #565656;
}

    .lock_warning_container .lock_box .lock_box_img {
        display: block;
        width: 110px;
        margin: 0 auto;
    }

    .lock_warning_container .lock_box .lock_box_text {
        text-align: center;
        margin-top: 15px;
        color: #6c6c6c;
        font-size: 17px;
        letter-spacing: 1.5px;
    }

    .lock_warning_container .lock_box .lock_box_button {
        background: linear-gradient(to bottom,#6459e8,#3246c2);
        padding: 0 20px;
        width: auto;
        box-shadow: 3px 3px 5px #97a3ff;
        letter-spacing: 1.5px;
        height: 40px;
        color: white;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        width: 100%;
        margin-top: 30px;
    }

        .lock_warning_container .lock_box .lock_box_button:hover {
            background: linear-gradient(to bottom,#6c61f7,#3a50d7);
        }

        .lock_warning_container .lock_box .lock_box_button:active {
            background: linear-gradient(to bottom,#5d52d9,#2d3faf);
        }

.lessones_container .lessones_box {
    background-color: white;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 3px 3px 15px #565656;
    overflow: hidden;
}

    .lessones_container .lessones_box.none_pd {
        padding: 0;
        box-shadow: 3px 3px 5px rgba(0,11,108,.3);
        background: none;
    }

    .lessones_container .lessones_box .lessones_box_loading,
    .lessones_container .lessones_box .lessones_box_none {
        padding: 30px;
    }

    .lessones_container .lessones_box .lessones_box_none {
        width: 300px;
    }

    .lessones_container .lessones_box .lessones_box_loading img {
        display: block;
        width: 90px;
        margin: 0 auto;
    }

    .lessones_container .lessones_box .lessones_box_loading p {
        text-align: center;
        margin-top: 10px;
        color: #6c6c6c;
    }

    .lessones_container .lessones_box .lessones_box_none .iconfont {
        font-size: 5em;
        display: block;
        width: 80px;
        height: 80px;
        margin: 0 auto;
        color: #767676;
    }

    .lessones_container .lessones_box .lessones_box_none p {
        text-align: center;
        margin-top: 20px;
        color: #767676;
        font-size: 17px;
        letter-spacing: 1.5px;
    }

    .lessones_container .lessones_box .lessones_box_none .lessones_box_none_button {
        background: linear-gradient(to bottom,#6459e8,#3246c2);
        padding: 0 20px;
        width: auto;
        box-shadow: 3px 3px 5px #97a3ff;
        letter-spacing: 1.5px;
        height: 40px;
        color: white;
        border-radius: 8px;
        cursor: pointer;
        font-size: 15px;
        width: 100%;
        margin-top: 30px;
    }

        .lessones_container .lessones_box .lessones_box_none .lessones_box_none_button:hover {
            background: linear-gradient(to bottom,#6c61f7,#3a50d7);
        }

        .lessones_container .lessones_box .lessones_box_none .lessones_box_none_button:active {
            background: linear-gradient(to bottom,#5d52d9,#2d3faf);
        }

    .lessones_container .lessones_box .lessones_task {
        width: 1000px;
    }

        .lessones_container .lessones_box .lessones_task .lessones_task_caption {
            padding: 15px;
            background-color: #4856f3;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 30px;
        }

            .lessones_container .lessones_box .lessones_task .lessones_task_caption .txt {
                font-size: 18px;
                letter-spacing: 1.5px;
            }

            .lessones_container .lessones_box .lessones_task .lessones_task_caption .iconfont {
                font-size: 26px;
                cursor: pointer;
                display: block;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
            }

                .lessones_container .lessones_box .lessones_task .lessones_task_caption .iconfont:hover {
                    transform: scale(1.05);
                }

                .lessones_container .lessones_box .lessones_task .lessones_task_caption .iconfont:active {
                    transform: scale(.95);
                }

    .lessones_container .lessones_box .lessones_box_list {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 10px;
        padding-top: 20px;
        flex-wrap: wrap;
        background-color: white;
    }

        .lessones_container .lessones_box .lessones_box_list li {
            width: calc(33.33333% - 20px);
            margin: 0 10px;
            margin-bottom: 20px;
            overflow: hidden;
            border-radius: 8px;
            position: relative;
            transition: transform .2s;
            cursor: pointer;
            background-color: #f9f9f9;
            border: 1px solid #f3f3f3;
            box-shadow: 3px 3px 5px #d5d5d5;
        }

            .lessones_container .lessones_box .lessones_box_list li:hover {
                transform: scale(1.05);
            }

            .lessones_container .lessones_box .lessones_box_list li .cover {
                display: block;
                width: 100%;
            }

            .lessones_container .lessones_box .lessones_box_list li .task_title {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                background-color: rgba(0,0,0,.6);
                box-sizing: border-box;
                padding: 5px 10px;
                color: white;
            }

                .lessones_container .lessones_box .lessones_box_list li .task_title .row {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 30px;
                    line-height: 30px;
                    letter-spacing: 1.5px;
                    font-size: 14px;
                }

                    .lessones_container .lessones_box .lessones_box_list li .task_title .row .iconfont {
                        font-size: 18px;
                        display: block;
                        width: 20px;
                    }

                    .lessones_container .lessones_box .lessones_box_list li .task_title .row.time {
                        letter-spacing: 0;
                        font-size: 12px;
                        color: rgba(255,255,255,.7);
                        height: 25px;
                        line-height: 25px;
                    }

                    .lessones_container .lessones_box .lessones_box_list li .task_title .row .text {
                        font-size: 16px;
                        display: block;
                        width: calc(100% - 30px);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

            .lessones_container .lessones_box .lessones_box_list li .task_lock {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
                background-color: rgba(0,0,0,.7);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }

                .lessones_container .lessones_box .lessones_box_list li .task_lock .iconfont {
                    font-size: 3em;
                    color: white;
                }

                .lessones_container .lessones_box .lessones_box_list li .task_lock .text {
                    color: white;
                    margin-top: 10px;
                    font-size: 14px;
                    letter-spacing: 1.5px;
                }

.trapezoid_box .personal_panel .exam_caption {
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
    font-size: 24px;
}

.trapezoid_box .personal_panel .content_panel {
    display: flex;
    align-items: flex-start;
    border-top: 1px solid #f5f5f5;
    padding-top: 25px;
}

    .trapezoid_box .personal_panel .content_panel .left {
        width: calc(100% - 320px);
        margin-right: 20px;
        -webkit-user-select: none;
    }

        .trapezoid_box .personal_panel .content_panel .left .exam_type {
            margin-bottom: 15px;
            font-weight: bold;
        }

        .trapezoid_box .personal_panel .content_panel .left .title {
            font-size: 18px;
            display: flex;
            align-items: flex-start;
        }

            .trapezoid_box .personal_panel .content_panel .left .title .topic_number {
                margin-right: 15px;
            }

            .trapezoid_box .personal_panel .content_panel .left .title .play {
                display: block;
                width: 24px;
                height: 24px;
                margin-top: 0;
                margin-right: 10px;
                cursor: pointer;
            }

                .trapezoid_box .personal_panel .content_panel .left .title .play.ing {
                    border-radius: 50%;
                    animation: flash .5s ease-in-out infinite;
                }

@keyframes flash {
    0% {
        background-color: white;
    }

    100% {
        background-color: #e5e5e5;
    }
}


.trapezoid_box .personal_panel .content_panel .left .title img {
    display: block;
    max-width: 90%;
}

.trapezoid_box .personal_panel .content_panel .left .options {
    margin-top: 15px;
    width: 600px;
}

    .trapezoid_box .personal_panel .content_panel .left .options .warning {
        background-color: #ffecec;
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 12px;
        border: 1px solid #ffb5b5;
        font-size: 12px;
        color: #ff6565;
        letter-spacing: 1px;
    }

    .trapezoid_box .personal_panel .content_panel .left .options .option {
        display: flex;
        align-items: center;
        background-color: #f9f9f9;
        padding: 20px 10px;
        border-radius: 10px;
        border: 1px solid #ededed;
        color: #686868;
        font-size: 14px;
        margin-bottom: 20px;
        cursor: pointer;
    }

        .trapezoid_box .personal_panel .content_panel .left .options .option .num {
            margin-right: 5px;
            font-weight: bold;
            width: 20px;
            text-align: center;
        }

        .trapezoid_box .personal_panel .content_panel .left .options .option .play {
            display: block;
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }

            .trapezoid_box .personal_panel .content_panel .left .options .option .play.ing {
                border-radius: 50%;
                animation: flash .5s ease-in-out infinite;
            }

        .trapezoid_box .personal_panel .content_panel .left .options .option .text {
            word-break: break-all;
            display: flex;
            align-items: center;
            margin-left: 5px;
        }

            .trapezoid_box .personal_panel .content_panel .left .options .option .text img {
                display: block;
                max-width: 100%;
            }

        .trapezoid_box .personal_panel .content_panel .left .options .option:hover {
            background-color: #f3f3f3;
        }

        .trapezoid_box .personal_panel .content_panel .left .options .option.active {
            background-color: #4856f3;
            color: white;
        }

.trapezoid_box .personal_panel .content_panel .left .actions {
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .trapezoid_box .personal_panel .content_panel .left .actions .btn {
        width: calc(50% - 10px);
        height: 45px;
        text-align: center;
        line-height: 45px;
        color: white;
        background-color: #4856f3;
        border-radius: 10px;
        cursor: pointer;
    }

        .trapezoid_box .personal_panel .content_panel .left .actions .btn:hover {
            background-color: #404de1;
        }

        .trapezoid_box .personal_panel .content_panel .left .actions .btn.dis {
            background-color: lightgrey;
        }

.trapezoid_box .personal_panel .content_panel .right {
    width: 300px;
    background-color: #f9f9f9;
    padding: 15px;
    box-sizing: border-box;
    border: 1px solid #f3f3f3;
    border-radius: 10px;
}

    .trapezoid_box .personal_panel .content_panel .right .caption {
        font-weight: bold;
        height: 25px;
        line-height: 25px;
        border-bottom: 1px solid #efefef;
        padding-bottom: 10px;
    }

    .trapezoid_box .personal_panel .content_panel .right .list {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
    }

        .trapezoid_box .personal_panel .content_panel .right .list .item {
            text-align: center;
            padding: 5px;
            width: calc(20% - 10px);
            margin: 5px;
            box-sizing: border-box;
            background-color: #fff;
            border: 1px solid #e9e9e9;
            border-radius: 6px;
            color: gray;
            font-size: 14px;
            cursor: pointer;
        }

            .trapezoid_box .personal_panel .content_panel .right .list .item:hover {
                background-color: #f9f9f9;
            }

            .trapezoid_box .personal_panel .content_panel .right .list .item.ed.active,
            .trapezoid_box .personal_panel .content_panel .right .list .item.active {
                background-color: #4856f3;
                color: white;
            }

            .trapezoid_box .personal_panel .content_panel .right .list .item.ed {
                background-color: #f1f1f1;
            }

    .trapezoid_box .personal_panel .content_panel .right .example {
        display: flex;
        align-items: center;
        margin-top: 15px;
        border-top: 1px solid #efefef;
        padding-top: 15px;
    }

        .trapezoid_box .personal_panel .content_panel .right .example .example_item {
            width: 33.33333%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .8em;
        }

            .trapezoid_box .personal_panel .content_panel .right .example .example_item .block {
                width: 20px;
                height: 20px;
                border-radius: 6px;
                border: 1px solid #e9e9e9;
            }

                .trapezoid_box .personal_panel .content_panel .right .example .example_item .block.b_1 {
                    background-color: #f1f1f1;
                }

                .trapezoid_box .personal_panel .content_panel .right .example .example_item .block.b_2 {
                    background-color: #4856f3;
                }

                .trapezoid_box .personal_panel .content_panel .right .example .example_item .block.b_3 {
                    background-color: white;
                }

            .trapezoid_box .personal_panel .content_panel .right .example .example_item .text {
                margin-left: 5px;
                color: #6b6b6b;
            }

    .trapezoid_box .personal_panel .content_panel .right .return {
        background-color: #ffffff;
        margin-top: 20px;
        color: #696969;
        text-align: center;
        border-radius: 10px;
        height: 45px;
        line-height: 45px;
        font-size: 12px;
        cursor: pointer;
        border: 1px solid #efefef;
    }

        .trapezoid_box .personal_panel .content_panel .right .return:hover {
            background-color: #f9f9f9;
        }

.submit_waiting,
.time_over {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,.7);
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .time_over .inner_bar {
        background-color: #6459e8;
        width: 100%;
        padding: 25px 0;
    }

        .time_over .inner_bar .time_over_content {
            width: 1100px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

            .time_over .inner_bar .time_over_content .time_over_caption {
                color: white;
                font-size: 2em;
                font-weight: bold;
                text-shadow: 1px 1px 1px black;
                letter-spacing: 2px;
                display: flex;
                align-items: center;
            }

                .time_over .inner_bar .time_over_content .time_over_caption .time_over_icon {
                    display: block;
                    width: 50px;
                    height: 42px;
                    margin-right: 10px;
                }

            .time_over .inner_bar .time_over_content .time_over_des {
                color: white;
                margin-top: 10px;
                letter-spacing: 1.5px;
            }

            .time_over .inner_bar .time_over_content .time_over_button {
                margin-top: 25px;
                width: 200px;
                height: 45px;
                background-color: white;
                color: #333;
                border-radius: 25px;
                line-height: 45px;
                text-align: center;
                border: 1px solid #333;
                cursor: pointer;
                -webkit-user-select: none;
                font-size: 14px;
            }

                .time_over .inner_bar .time_over_content .time_over_button:hover {
                    background-color: #e9e9e9;
                }

    .submit_waiting .submit_content {
        background-color: white;
        border-radius: 12px;
        padding: 25px;
        padding-top: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        -webkit-user-select: none;
        width: 300px;
    }

        .submit_waiting .submit_content.tran {
            background-color: transparent !important;
            animation: zoom_in .25s;
        }

        .submit_waiting .submit_content .waiting_icon {
            display: block;
            width: 100px;
            height: 100px;
        }

        .submit_waiting .submit_content .waiting_caption {
            font-weight: bold;
        }

        .submit_waiting .submit_content .waiting_des {
            text-align: center;
            font-size: 12px;
            margin-top: 10px;
            color: #9f9f9f;
        }

        .submit_waiting .submit_content .waiting_copy {
            font-size: 12px;
            margin-top: 10px;
            color: #5f5f5f;
            font-weight: bold;
            text-decoration: underline;
            letter-spacing: .5px;
            cursor: pointer;
        }

        .submit_waiting .submit_content .copy_input {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            height: 80px;
            background-color: #f9f9f9;
            border: 1px solid #e1e1e1;
            margin-top: 15px;
            resize: none;
        }

        .submit_waiting .submit_content .submit_success {
            background-image: url(../img/submit_success.png);
            background-repeat: no-repeat;
            background-size: 100% auto;
            width: 300px;
            height: 234px;
            box-sizing: border-box;
            padding: 60px;
            padding-top: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .submit_waiting .submit_content .score_text {
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 1.5px;
            color: #6b6b6b;
        }

        .submit_waiting .submit_content .score_value {
            font-size: 3em;
            font-weight: bold;
            color: #6c61f7;
            text-shadow: 1px 1px 2px black;
            height: 70px;
            line-height: 70px;
        }

        .submit_waiting .submit_content .submit_button {
            height: 45px;
            line-height: 45px;
            background-color: #f9f9f9;
            width: 100%;
            text-align: center;
            border-radius: 12px;
            font-size: .8em;
            color: #7b7b7b;
            border: 1px solid #ededed;
            cursor: pointer;
            margin-top: 15px;
        }

            .submit_waiting .submit_content .submit_button:hover {
                background-color: #f1f1f1;
            }

            .submit_waiting .submit_content .submit_button.texture {
                background-color: transparent;
                background-image: url('../img/submit_success_button.png');
                background-repeat: no-repeat;
                background-size: 100% auto;
                width: 180px;
                height: 72px;
                border: none;
                transition: transform .2s;
            }

                .submit_waiting .submit_content .submit_button.texture:hover {
                    transform: scale(1.1);
                }

.loading_box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 300px;
    -webkit-user-select: none;
}

    .loading_box .loading_img {
        display: block;
        width: 100px;
        height: 100px;
    }

    .loading_box .loading_text {
        margin-top: 10px;
        font-size: 14px;
        letter-spacing: 1px;
    }

@keyframes zoom_in {
    0% {
        transform: scale(.7);
        opacity: .5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}