body {
            font-family: 'Prompt', sans-serif;
            text-align: center;
            color: #172853;
            font-size: 16px;
        }
        
        .overlay_check {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            visibility: hidden;
            opacity: 0;
        }
        
        .overlay_check:target {
            visibility: visible;
            opacity: 1;
        }
        
        .popup_check {
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            width: 60%;
            position: relative;
            margin: 8% auto;
        }
        
        .popup_check .close_check {
            position: absolute;
            top: -10px;
            right: 20px;
            transition: all 200ms;
            font-size: 50px;
            font-weight: bold;
            text-decoration: none;
            color: #333;
        }
        
        .popup_check .close_check:hover {
            color: #ff6666;
            text-decoration: none;
            cursor: pointer;
        }
        
        .popup_check .content_check {
            max-height: 60%;
            overflow: auto;
        }
        
        .column_1 {
            float: left;
            width: 65%;
            padding: 0px;
        }
        
        .column_2 {
            float: left;
            width: 50%;
            padding: 0px;
        }
        
        .column_3 {
            float: left;
            width: 33.33%;
            padding: 0px;
        }
        
        .column_score_1 {
            float: left;
            width: 90%;
            padding: 0px;
        }
        
        .column_score_3 {
            float: left;
            width: 65%;
            padding: 0px;
        }
        
        .column_show_level {
            float: left;
            padding: 5px;
            font-size: 14px;
            width: 22.5%;
        }
        
        .column_score_4 {
            float: left;
            width: 40%;
            padding: 0px;
        }
        
        .column_score_2 {
            display: inline-block;
            margin: 1%;
        }
        
        .column_score_5 {
            display: inline-block;
            margin: 1%;
        }
        
        .column_score_6 {
            width: 50%;
            float: left;
        }
        
        .column_score_7 {
            width: 100%;
        }
        
        .column_4 {
            float: left;
            width: 25%;
            padding: 0px;
        }
        
        .column_60 {
            float: left;
            width: 60%;
            padding: 0px;
        }
        
        .column_50 {
            float: left;
            width: 49%;
            padding: 0px;
        }
        
        .column_47 {
            float: left;
            width: 47%;
            padding: 0px;
        }
        
        .column_4_g {
            float: left;
            width: 19%;
            padding: 0px;
            margin-right: 10;
        }
        
        .column_g {
            float: left;
            width: 220px;
            padding: 0px;
        }
        
        .column_g_2 {
            float: left;
            width: 90%;
        }
        
        .column_4_d {
            float: left;
            width: 25%;
            padding: 0px;
        }
        
        .bg_level_1 {
            background-image: url(/img/system/bg_kb.png);
            background-size: cover;
        }
        
        .column_4_a {
            float: left;
            width: 25%;
            padding: 0px;
        }
        
        .column_4_b {
            float: left;
            width: 14%;
            padding: 0px;
            text-align: center;
        }
        
        .column_show_level_2 {
            width: 45%;
            margin-top: 10px;
            margin-left: auto;
            margin-right: auto;
            border-radius: 15px;
            padding: 5;
        }
        
        .column_show_level_1 {
            float: left;
            width: 45%;
            border-radius: 15px;
            padding: 5;
            margin: 1.25%;
            margin-top: 2%;
        }
        
        .column_4_c {
            float: left;
            width: 14%;
            padding: 0px;
            text-align: center;
        }
        
        .column_s {
            padding: 40px;
            margin: 20px;
            background-color: #f2f2f2;
            font-size: 20px;
        }
        
        .column_e {
            padding: 40px;
            margin: 20px;
            background-color: #f2f2f2;
            font-size: 20px;
        }
        
        .column_status {
            float: left;
            width: 23.5%;
            padding: 40px;
            margin: 20px;
            background-color: #f2f2f2;
            font-size: 18px;
            border-radius: 15px;
        }
        
        .column_repass {
            width: 40%;
            padding: 20px;
            font-size: 20px;
            border-radius: 15px;
            margin: auto;
            background-color: #f2f2f2;
        }
        
        .column_status3 {
            float: left;
            width: 42%;
            padding: 20px;
            margin: 20px;
            background-color: #f2f2f2;
            font-size: 18px;
            border-radius: 15px;
        }
        
        .column_status1 {
            float: left;
            background-color: #f2f2f2;
            width: 92%;
            padding: 20px;
            font-size: 18px;
            border-radius: 15px;
        }
        
        .box_webboard {
            float: left;
            background-color: #f2f2f2;
            width: 100%;
            padding: 20px;
            font-size: 18px;
            border-radius: 15px;
        }
        
        .box_date {
            float: left;
            background-color: #f2f2f2;
            width: 28%;
            padding: 20px;
            font-size: 18px;
            border-radius: 15px;
            margin: 10px;
        }
        
        .box_date_2 {
            float: left;
            width: 16.5%;
            font-size: 16px;
        }
        
        .column_status5 {
            padding: 20 20;
            margin: 14px;
            font-size: 18px;
            border-radius: 30px;
        }
        
        .column_check {
            width: 20%;
            padding: 20 20;
            font-size: 18px;
            border-radius: 100px;
            margin: auto;
        }
        
        .column_b_g {
            background-color: #f2f2f2;
        }
        
        .column_b_b {
            background-color: #4b70ce;
        }
        
        .column_b_gr {
            background-color: #00e68a;
        }
        
        .column_b_r {
            background-color: #ff6666;
        }
        
        .column_b_o {
            background-color: #ff8c1a;
        }
        
        .column_b_y {
            background-color: #ffd11a;
        }
        
        .column_bo_g {
            border-style: solid;
            background-color: #e6fff5;
            border-color: #00e68a;
        }
        
        .column_status2 {
            float: left;
            width: 27.5%;
            padding: 20px;
            margin: 10px;
            font-size: 15px;
            border-radius: 15px;
        }
        
        .column_5 {
            float: left;
            width: 20%;
            padding: 0px;
        }
        
        .column_7 {
            float: left;
            width: 14.2%;
            padding: 0px;
        }
        
        .column_l {
            float: left;
        }
        
        .column_r {
            float: right;
        }
        
        .p_h_100 {
            padding: 100 0 0 0;
        }
        
        .p_h_50 {
            padding: 50 0 0 0;
        }
        
        .p_h_60 {
            padding: 60 0 0 0;
        }
        
        .p_h_5p {
            padding: 5% 0 0 0;
        }
        
        .p_h_5p_2 {
            padding: 5% 0;
        }
        
        .p_h_3p {
            padding: 3% 0 0 0;
        }
        
        .p_h_2p {
            padding: 2% 0 0 0;
        }
        
        .p_2p {
            padding: 2% 0;
        }
        
        .p_h_10p {
            padding: 13% 0 0 0;
        }
        
        .p_u_5p {
            padding: 3% 0 0 0;
        }
        
        .p_chap {
            padding: 20 10 0 40;
        }
        
        .p_l {
            padding: 10 20%;
        }
        
        .p_chap_de {
            padding: 0 10 10 7%;
        }
        
        .row_2:after {
            content: "";
            display: table;
            clear: both;
        }
        
        .row_3 {
            content: "";
            display: table;
            clear: both;
            margin: auto;
        }
        
        .f_s {
            font-family: 'Prompt', sans-serif;
        }
        
        .t_l {
            text-align: left;
        }
        
        .t_c {
            text-align: center;
        }
        
        .c_w {
            color: #ffffff;
        }
        
        .f_120 {
            font-size: 120px;
        }
        
        .f_100 {
            font-size: 100px;
        }
        
        .f_90 {
            font-size: 90px;
        }
        
        .f_90_i {
            font-size: 90px;
        }
        
        .f_80 {
            font-size: 80px;
        }
        
        .f_70 {
            font-size: 70px;
        }
        
        .f_60 {
            font-size: 60px;
        }
        
        .f_60_i {
            font-size: 60px;
        }
        
        .f_50 {
            font-size: 50px;
        }
        
        .f_40 {
            font-size: 40px;
        }
        
        .f_30 {
            font-size: 30px;
        }
        
        .f_25 {
            font-size: 25px;
        }
        
        .f_20 {
            font-size: 20px;
        }
        
        .f_16 {
            font-size: 16px;
        }
        
        .f_c_g {
            color: #00e68a;
        }
        
        .f_c_y {
            color: #ffd11a;
        }
        
        .f_c_r {
            color: #ff6666;
        }
        
        .f_c_o {
            color: #ff8c1a;
        }
        
        .t_hover_g:hover {
            color: #4b70ce;
        }
        
        .bt_back_w {
            background-color: #ffffff;
            color: #172853;
            border: 3px solid #172853;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            cursor: pointer;
            border-radius: 50px;
            font-family: 'Prompt', sans-serif;
        }
        
        .bt_back_b {
            background-color: #172853;
            border: 3px solid #172853;
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 15px;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            cursor: pointer;
            border-radius: 50px;
            font-family: 'Prompt', sans-serif;
        }
        
        .bt_back_gray {
            background-color: #f2f2f2;
            border: 3px solid #f2f2f2;
            text-decoration: none;
            display: inline-block;
            font-size: 15px;
            height: 35px;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            cursor: pointer;
            border-radius: 50px;
            font-family: 'Prompt', sans-serif;
        }
        
        .bt_width_130 {
            width: 130px;
            height: 35px;
        }
        
        .bt_width_150 {
            width: 150px;
            height: 35px;
        }
        
        .bt_width_200 {
            width: 200px;
            height: 35px;
        }
        
        .bt_hover_b_w:hover {
            background-color: #ffffff;
        }
        
        .bt_hover_red:hover {
            background-color: #ffffff;
            color: #ff6666;
        }
        
        .bt_hover_red2:hover {
            background-color: #ffffff;
            color: #ff6666;
            border: 3px solid #ff6666;
        }
        
        .bt_hover_g:hover {
            background-color: #ffffff;
            color: #00e68a;
            border: 3px solid #00e68a;
        }
        
        .bt_hover_y:hover {
            background-color: #ffffff;
            color: #ffd11a;
            border: 3px solid #ffd11a;
        }
        
        .bt_hover_blue:hover {
            background-color: #ffffff;
            color: #172853;
            border: 3px solid #172853;
        }
        
        .bt_hover_w:hover {
            background-color: #172853;
            color: #ffffff;
            border: 3px solid #172853;
        }
        
        .bt_status {
            color: #172853;
            text-align: center;
            font-size: 15px;
            border-radius: 50px;
            width: 160px;
            height: 35px;
            font-family: 'Prompt', sans-serif;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            cursor: pointer;
        }
        
        .bt_color_r {
            background-color: #ff6666;
            color: #ffffff;
            border: 3px solid #ff6666;
        }
        
        .bt_color_y {
            background-color: #ffd11a;
            border: 3px solid #ffd11a;
        }
        
        .bt_color_g {
            background-color: #00e68a;
            border: 3px solid #00e68a;
        }
        
        .width_100 {
            width: 100%;
            margin: auto;
        }
        
        .width_95 {
            width: 95%;
            margin: auto;
        }
        
        .width_90 {
            width: 90%;
            margin: auto;
        }
        
        .w_img_80 {
            width: 75%;
            margin: auto;
        }
        
        .width_85 {
            width: 85%;
            margin: auto;
        }
        
        .width_80 {
            width: 80%;
            margin: auto;
        }
        
        .width_75 {
            width: 75%;
            margin: auto;
        }
        
        .width_70 {
            width: 70%;
            margin: auto;
        }
        
        .width_60 {
            width: 60%;
            margin: auto;
        }
        
        .width_50 {
            width: 50%;
            margin: auto;
        }
        
        .width_40 {
            width: 40%;
            margin: auto;
        }
        
        .width_30 {
            width: 30%;
            margin: auto;
        }
        
        .img_ex_width {
            width: 40%;
            margin: auto;
        }
        
        .width_450px {
            width: 450px;
        }
        
        .width_350px {
            width: 414px;
        }
        
        .width_50px {
            width: 50px;
        }
        
        .width_20px {
            width: 20px;
        }
        
        img {
            border-radius: 50%;
        }
        
        .img_s {
            border-radius: 0%;
        }
        
        .show_chap {
            background-color: #f2f2f2;
            padding: 25;
            margin: 10 0 20 0;
        }
        
        .show_table {
            display: grid;
            grid-template-columns: 80% 20%;
            grid-template-areas: "menu content"
        }
        
        .show_table>* {
            background-color: #f2f2f2;
            margin: 10 0 10 0;
            text-align: center;
        }
        
        .show_info {
            padding: 25 10 25 40;
            display: flex;
            grid-area: menu;
            background-color: #f2f2f2;
            ;
        }
        
        .show_status {
            grid-area: content;
            padding: 25 5 25 10;
            background-color: #f2f2f2;
        }
        
        .input {
            background: transparent;
            border: 2px solid rgba(23, 40, 83, 1.0);
            border-radius: 4px;
            color: #172853;
            padding: 4px;
            margin-top: 10px;
            font-family: 'Prompt', sans-serif;
        }
        
        .input_w_ {
            font-size: 15px;
            font-weight: 400;
        }
        
        table {
            border-collapse: collapse;
        }
        
        tr:nth-child(even) {
            background-color: #f2f2f2
        }
        
        ul {
            list-style-type: none;
            margin: 10px;
            padding: 0;
            overflow: hidden;
            background-color: none;
        }
        
        li {
            float: right;
        }
        
        li a {
            display: block;
            color: #ffffff;
            text-align: center;
            padding: 3px 30px;
            margin: 0 5 0 0px;
            text-decoration: none;
            background-color: #0b1734;
            border-radius: 50px;
            border: 3px solid #172853;
        }
        
        li a:hover {
            border-radius: 50px;
            background-color: #ffffff;
            color: #172853;
            border: 3px solid #172853;
        }
        
        .login {
            height: 150px;
            width: 350px;
            padding: 0px;
            z-index: 2;
            left: -0%;
            top: 40%;
            width: 100%;
            text-align: center;
        }
        
        .login input[type=text] {
            width: 350px;
            height: 35px;
            background: transparent;
            border: 2px solid rgba(23, 40, 83, 1.0);
            border-radius: 4px;
            color: #172853;
            font-size: 14px;
            font-weight: 400;
            padding: 4px;
            margin-top: 10px;
            font-family: 'Prompt', sans-serif;
        }
        
        .login input[type=password] {
            width: 350px;
            height: 35px;
            background: transparent;
            border: 2px solid rgba(23, 40, 83, 1.0);
            border-radius: 4px;
            color: #172853;
            font-size: 14px;
            font-weight: 400;
            padding: 4px;
            margin-top: 10px;
            font-family: 'Prompt', sans-serif;
        }
        
        .login input[type=submit] {
            margin-top: 30px;
            background-color: #172853;
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 15px;
            -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
            cursor: pointer;
            border-radius: 50px;
            width: 170px;
            height: 35px;
            font-family: 'Prompt', sans-serif;
            border: 3px solid #172853;
        }
        
        .login input[type=submit]:hover {
            background-color: #ffffff;
            color: #172853;
            border: 3px solid #172853;
        }
        
        .login input[type=submit]:active {
            opacity: 0.6;
        }
        
        .login input[type=text]:focus {
            outline: none;
            border: 2px solid rgba(23, 40, 83, 1.0);
        }
        
        .login input[type=password]:focus {
            outline: none;
            border: 2px solid rgba(23, 40, 83, 1.0);
        }
        
        .login input[type=submit]:focus {
            outline: none;
        }
        
         ::-webkit-input-placeholder {
            color: rgba(23, 40, 83, 0.6);
        }
        
         ::-moz-input-placeholder {
            color: rgba(23, 40, 83, 0.6);
        }
        
        input[type=text] {
            height: 30px;
            background: transparent;
            border: 2px solid rgba(23, 40, 83, 1.0);
            border-radius: 4px;
            color: #172853;
            font-size: 15px;
            font-weight: 400;
            font-family: 'Prompt', sans-serif;
            margin: 5px;
        }
        
        input[type=date] {
            height: 30px;
            background: transparent;
            border: 2px solid rgba(23, 40, 83, 1.0);
            border-radius: 4px;
            color: #172853;
            font-size: 15px;
            font-family: 'Prompt', sans-serif;
            margin: 5px;
        }
        
        input[type=date] {
            height: 30px;
            background: transparent;
            border: 2px solid rgba(23, 40, 83, 1.0);
            border-radius: 4px;
            color: #172853;
            font-size: 15px;
            font-family: 'Prompt', sans-serif;
            margin: 5px;
        }
        
        input[type=time] {
            height: 30px;
            background: transparent;
            border: 2px solid rgba(23, 40, 83, 1.0);
            border-radius: 4px;
            color: #172853;
            font-size: 15px;
            font-family: 'Prompt', sans-serif;
            margin: 5px;
        }
        
        select {
            font-family: 'Prompt', sans-serif;
            font-size: 15px;
            padding: 3px;
            border-radius: 4px;
            height: 35px;
            background: transparent;
            color: #172853;
            border: 2px solid #172853;
            margin: 5px;
        }
        
        .time {
            float: left;
            width: 18%;
            padding: 25px;
            margin: 20px;
            background-color: #f2f2f2;
            font-size: 20px;
            border-radius: 15px;
        }
        
        .f_status5 {
            font-size: 30px;
            color: #ff6666;
        }
        
        .f_status2 {
            font-size: 30px;
            color: #ffaa00;
        }
        
        .f_status3 {
            font-size: 30px;
            color: #1a75ff;
        }
        
        .f_status4 {
            font-size: 30px;
            color: #ac00e6;
        }
        
        .f_status1 {
            font-size: 30px;
            color: #00e68a;
        }
        
        .f_status6 {
            font-size: 30px;
            color: #009999;
        }
        
        .f_c_status5 {
            color: #ff6666;
        }
        
        .f_c_status2 {
            color: #ffaa00;
        }
        
        .f_c_status3 {
            color: #1a75ff;
        }
        
        .f_c_status4 {
            color: #ac00e6;
        }
        
        .f_c_status1 {
            color: #00e68a;
        }
        
        .f_c_status6 {
            color: #009999;
        }
        
        #box {
            margin: 50px 20%;
            text-align: left;
        }
        
        #question {
            color: #666666;
            font-weight: 100;
            font-size: 16px;
            margin: 20px 21%;
            font-family: sans-serif;
            border-radius: 5px;
        }
        
        a {
            color: #172853;
            text-decoration: none;
        }
        
        .card {
            width: 18%;
            height: 102vh;
            background-color: #0b1428;
            position: fixed;
            font-family: 'Prompt', sans-serif;
        }
        
        .foo {
            color: #ffffff;
            bottom: 0;
            margin-top: 120%;
        }
        
        .icon-bar a {
            display: block;
            padding: 10px 10%;
            transition: all 0.3s ease;
            font-family: 'Prompt', sans-serif;
            color: #fff;
        }
        
        .icon-bar a:hover {
            background-color: #172853;
        }
        
        .active {
            background-color: #172853;
        }
        
        .m {
            padding: 0px 0px 0px 10%;
        }
        
        .f_c_b {
            color: #0099ff;
        }
        
        .column_r_80 {
            float: right;
            width: 80%;
        }
        
        th {
            background-color: #172853;
            color: #ffffff;
        }
        
        .hid1 {
            display: block;
        }
        
        .hid2 {
            display: none;
        }
        
        .img2 {
            border-radius: 0;
        }
        
        #chart-container {
            width: 135%;
            height: auto;
            margin-left: -12%;
        }
        
        #chart-container2 {
            width: 100%;
            height: auto;
        }
        
        .status_g0 {
            display: inline-block;
            width: 11px;
            height: 11px;
            margin-left: 5px;
            background-color: rgba(51, 214, 255, 1.0);
            border-radius: 50px;
        }
        
        .status_g1 {
            display: inline-block;
            width: 11px;
            height: 11px;
            margin-left: 5px;
            background-color: rgba(255, 204, 102, 1.0);
            border-radius: 50px;
        }
        
        .status_g15 {
            display: inline-block;
            width: 11px;
            height: 11px;
            margin-left: 5px;
            background-color: rgba(204, 51, 255, 1.0);
            border-radius: 50px;
        }
        
        .status_g2 {
            display: inline-block;
            width: 11px;
            height: 11px;
            margin-left: 5px;
            background-color: rgba(0, 255, 204, 1.0);
            border-radius: 50px;
        }
        
        .status_g25 {
            display: inline-block;
            width: 11px;
            height: 11px;
            margin-left: 5px;
            background-color: rgba(255, 153, 102, 1.0);
            border-radius: 50px;
        }
        
        .status_g3 {
            display: inline-block;
            width: 11px;
            height: 11px;
            margin-left: 5px;
            background-color: rgba(51, 133, 255, 1.0);
            border-radius: 50px;
        }
        
        .status_g35 {
            display: inline-block;
            width: 11px;
            height: 11px;
            margin-left: 5px;
            background-color: rgba(255, 102, 102, 1.0);
            border-radius: 50px;
        }
        
        .status_g4 {
            display: inline-block;
            width: 11px;
            height: 11px;
            margin-left: 5px;
            background-color: rgba(153, 255, 51, 1.0);
            border-radius: 50px;
        }
        
        .status_g0_bg {
            background-color: rgba(51, 214, 255, 0.2);
            border-radius: 10px;
            margin-top: 10;
            padding: 1%;
        }
        
        .status_g1_bg {
            background-color: rgba(255, 204, 102, 0.2);
            border-radius: 10px;
            margin-top: 10;
            padding: 1%;
        }
        
        .status_g15_bg {
            background-color: rgba(204, 51, 255, 0.2);
            border-radius: 10px;
            margin-top: 10;
            padding: 1%;
        }
        
        .status_g2_bg {
            background-color: rgba(0, 255, 204, 0.2);
            border-radius: 10px;
            margin-top: 10;
            padding: 1%;
        }
        
        .status_g25_bg {
            background-color: rgba(255, 153, 102, 0.2);
            border-radius: 10px;
            margin-top: 10;
            padding: 1%;
        }
        
        .status_g3_bg {
            background-color: rgba(51, 133, 255, 0.2);
            border-radius: 10px;
            margin-top: 10;
            padding: 1%;
        }
        
        .status_g35_bg {
            background-color: rgba(255, 102, 102, 0.2);
            border-radius: 10px;
            margin-top: 10;
            padding: 1%;
        }
        
        .status_g4_bg {
            background-color: rgba(153, 255, 51, 0.2);
            border-radius: 10px;
            margin-top: 10;
            padding: 1%;
        }
        
        .zzz img {
            position: absolute;
            z-index: 100;
            text-align: right;
            margin-bottom: 0px;
        }