header .layui-nav .layui-nav-item { line-height: 50px;}
header .layui-nav-child { top: 45px;}
header .login_li { position: absolute !important;right: 10px;;top: 0px;}
.layui-nav { background: #00A6EA !important;}
.layui-nav .layui-nav-item a { }
body { background: #F4F5F8 !important;}
header { border-bottom: 1px solid #EEEEEE !important;background: #00A6EA !important;}
.left {float: left !important}
.right {float: right !important}
.mt {margin-top: 10px;}
.mb {margin-bottom: 10px;}
.ml {margin-left: 10px;}
.mr {margin-right: 10px;}
.mt2 {margin-top: 20px;}
.tc {text-align: center}
#main-menu { min-height: 77vh; background: #F4F5F8 !important;}
.main-container { min-height: 90vh; background: #fff !important;}
.layui-menu li, .layui-menu-body-title, .layui-menu-body-title a { padding-left: 20px;font-size: 18px;line-height: 40px;}
.layui-menu li i { margin-right: 5px;}
.layui-nav .layui-nav-item * { font-size: 16px;}
.avatar { margin-bottom: 4px;display: flex;flex-direction: row;justify-content: center;align-items: center;}
.avatar img { width: 60px;display: block;margin: 10px;margin-bottom: 4px}
.avatar .mt {font-size: 12px;}
.tier_box {font-size: 14px;text-align: center;display: flex;flex-direction: row;justify-content: center;align-items: center;}
.avatar .member_level { background: green;border-radius: 3px;color: #fff;font-size: 12px;padding: 1px 3px;cursor: pointer;display: none}
.avatar .member_level .iconfont { font-size: 12px;color: goldenrod}
.avatar .member_level3 { background: #00A6EA;color: #fff;font-size: 12px;}
.avatar .member_level4 { background: #00A6EA;color: #fff;font-size: 12px;}
.avatar .member_level5 { background: goldenrod;color: #fff;font-size: 12px;}
.avatar .member_level6 { background: goldenrod;color: #fff;font-size: 12px;}
.avatar .member_level7 { background: goldenrod;color: #fff;font-size: 12px;}
.avatar .member_level2 .iconfont {display: none}
.avatar .member_level3 .iconfont {display: none}
.avatar .member_level4 .iconfont {display: none}
.avatar .member_level5 .iconfont {display: none}
.avatar .member_level6 .iconfont {display: none}
.avatar .member_level7 .iconfont {display: none}

.main-container .layui-form-item .layui-input-inline { width: auto}
.main-container fieldset { border: 1px solid #EEEEEE}
header .layui-fluid { padding: 0px 5px;}
header .logo { text-align: center}
header .logo h2 { text-align: center;font-size: 26px;max-width: 200px;font-weight: bold;color: #ffffff;line-height: 50px;}
header .logo span { margin-left: -40px;line-height: 40px;}
.layui-fluid { padding: 0px 5px;}
.layui-nav .layui-this:after, .layui-nav-bar { background: none}

.lesson-banner {height: 252px;background-repeat: no-repeat;background-position: 50% 50%;background-size: contain}
.lesson-swiper {width: 100%;position: relative;padding: 10px 4px;box-sizing: border-box;display: flex;flex-direction: row;flex-wrap: wrap}
.lesson-types, .lesson-types > li a {display: flex;border-radius: 500px}
.lesson-types {padding: 10px;margin: 0;list-style: none;background: #eee;overflow: hidden;justify-content: space-between}
.lesson-item, .lesson-types > li a:hover {background: #fff}
.lesson-types > li a {padding: 0 20px;align-items: center}
.lesson-head {display: -webkit-flex;display: flex;margin: 10px 0;height: 34px;justify-content: space-between}
.lesson-head .title {display: -webkit-flex;display: flex}
.lesson-head .title h3 {font-weight: 600;font-size: 24px;height: 34px;line-height: 34px;color: #3e454d;margin-right: 12px}
.lesson-head .title p {font-size: 14px;color: #667280;-webkit-align-self: flex-end;align-self: flex-end;padding-bottom: 3px}
.lesson-item {width: 280px;height: 300px;display: block;box-shadow: 0 2px 20px rgba(0, 80, 179, .18);border-radius: 15px;font-family: PingFang SC, sans-serif;outline: 0;transition: box-shadow .3s;text-align: left;margin: 10px;position: relative}
.lesson-item:hover {box-shadow: 0 8px 30px rgba(0, 80, 179, .12);}
.lesson-item .pic {display: block;margin: 0;padding: 0;border-radius: 15px 15px 0 0;width: 100%;height: 143px}
.lesson-item .content {padding: 8px 8px 8px;position: relative}
.lesson-item .mark { position: absolute;top: -3px;right: 0px;width: auto;background-color: rgb(255, 127, 36);color: #ffffff;font-size: 14px;padding: 3px 6px;border-radius: 0 6px;}
.lesson-item .title {height: 28px;margin-bottom: 8px;font-weight: 500;font-size: 16px;line-height: 24px;color: #3e454d;word-break: break-all;transition: color .3s;white-space: normal;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
.lesson-item .content .foot {display: flex;justify-content: flex-end;color: #666;font-size: 14px;margin-bottom: 10px;}
.lesson-bt { padding: 1px 7px; background: #1E9FFF;color: #F5F5F5;border-radius: 10px;margin-right: 10px;}
.lesson-bt:hover { background: rgb(10, 151, 252);}
.lesson-item i.layui-icon {font-size: 16px;color: #ffb800;}
#main-menu a { display: block !important;}
.layui-card-header {font-size: 16px;}
.member-main { min-height: 80vh}
.layui-card-body { font-size: 16px;}
.layui-checkbox { text-align: justify; position: relative;display: inline-block; line-height: 30px;width: 50px;height: 24px;}
.layui_member .layui-col-md10 > .layui-card { padding: 20px; }
.layui_member .layui-row > .layui-col-md2 { max-width: 200px;}
.layui_member .layui-row > .layui-col-md10 { flex: 1;width: auto;min-width: 600px;}
.layui_member .layui-row { display: flex;flex-direction: row;}
.layui_member .layui-menu .layui-menu-item-checked, .layui-menu .layui-menu-item-checked2 { background: none !important}
.layui_member .layui-menu li, .layui-menu-body-title, .layui-menu-body-title a { font-size: 16px;line-height: 30px;}
.class_list { display: block;padding: 2px;margin-top: 10px;}
.class_list section { display: flex;flex-direction: column;border: 1px solid #1E9FFF;padding: 15px;border-radius: 10px;}
.class_list section .class_course_top { display: flex;flex-direction: row;justify-content: space-between;align-items: center}
.class_list section .class_course_info { display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 20px;}
.class_list section .class_course_rate { display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 5px;}
.class_list section .class_course_info div { text-align: center;font-size: 16px;margin-top: 15px;}
.class_list section .class_course_info strong { display: block;}
.class_list section .class_course_info span { display: block;color: #00aa00}
.class_list section .class_course_rate { display: flex;flex-direction: row}
.class_list section .class_course_top .course_thumb img { width: 160px;}
.class_list section .class_course_top .course_thumb { display: flex;flex-direction: row;align-items: center;}
.class_list section .class_course_top h3 { min-width: 200px;padding: 15px;}
.layui-btn { border-radius: 4px;}
.class_list section .class_course_rate p {min-width: 100px; }
.class_list section .class_course_rate progress { flex: 1;height: 10px;margin-left: 10px;appearance: none;border-radius: 5px;}
.class_course_rate progress::-webkit-progress-bar, .class_course_rate progress::-ms-fill {background-color: #e0e0e0;border-radius: 5px;}
.class_course_rate progress::-webkit-progress-value, .class_course_rate progress::-ms-fill {background-color: #33AFFF;border-radius: 5px;}
.layui-tab-content .lesson-item { width: 200px;height: auto;border: 1px solid #ffffff;cursor: pointer}
.layui-tab-content .lesson-item .pic { height: 100px;}
.layui-tab-content .lesson-item .title { margin-bottom: 5px;}
.layui-tab-content .lesson-item .lesson-bt { cursor: pointer}
.layui-tab-content .lesson-item.active .lesson-bt { background: #FF5722;}
.layui-tab-content .lesson-item.active { border: 1px solid #ff5722;}
.layui-layer #slide_level_range { padding: 18px; }
.layui-badge-rim, .layui-border, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-input-split, .layui-panel, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea { border-color: #CCCCCC;}
.list_add { display: inline-block;padding: 50px;background: #e0e3e7;text-align: center;cursor: pointer }
.list_add i { font-size: 40px;line-height: 40px;color: #fff;}
.list_add div { color: #666;}
.list_add:hover {background: #ddeedd}
.course_edit_box { display: flex;flex-direction: row;background: #EEEEEE}
.course_nav_box { width: 200px;display: flex;flex-direction: column;background: #EFEFEF;min-height: 80vh;margin-top: 15px;background: #ffffff;margin-right: 5px;}
.course_nav_box h4 { font-size: 14px; line-height: 40px;}
.course_nav_box h4 i { font-size: 14px;cursor: pointer}
.course_nav_box ul li { background: #eee;display: flex;flex-direction: row;padding-left: 8px;padding-right: 8px;line-height: 38px;margin: 4px;border-radius: 3px;font-size: 14px;text-align: center;border: 1px solid #EEEEEE;}
.course_nav_box ul li.active {color: #39C5FF}
.course_nav_box ul li:hover { background: #ffffff;}
.course_nav_box ul span { flex: 1;flex-wrap: nowrap; overflow: hidden}
.course_nav_box ul i { width: 20px;}
.course_nav_box .course_img { position: relative;min-height: 140px;}
.course_nav_box .course_img img { width: 100%;}
.course_nav_box .course_img h3 { margin-top: -90px;text-align: center;color: #ffffff}
.course_con_box { width: 400px;display: flex;flex-direction: column;background: #ffffff}
.course_levels_box {flex: 1;display: flex;flex-direction: column}
.course_con_box {background: #ffffff;padding: 10px;margin-top: 10px;}
.course_con_box p { border-bottom: 1px solid #DDDDDD;line-height: 30px;font-weight: normal}
.course_con_box .course_text { background: #EEEEEE;color: #555;font-size: 14px;min-height: 100px;text-align: center;padding: 10px;display: grid;place-items: center; }
.course_con_box .course_des p { line-height: 20px;padding: 5px 10px;font-size: 14px;color: #999999}
.course_con_box .course_foot {text-align: center}


.levels .level h2 { font-size: 28px;line-height: 30px;font-weight: normal;display: block;clear: both;padding-left: 4px;margin-top: 10px;width: 100%}
.levels .level li { list-style: none; width: 108px;height: 110px;border-radius: 11px;margin: 5px }
.level {display: flex;flex-wrap: wrap;max-width: 100%;}
.level ul {list-style-type: none;padding: 0;display: flex;flex-wrap: wrap;margin-top: 10px;justify-content: stretch;align-items: flex-start;flex-direction: row }
.level li {height: 108px;margin: 5px;position: relative;box-sizing: border-box;border: 1px solid #ddd;border-radius: 15px;overflow: hidden;box-shadow: 0 4px 30px rgba(0, 80, 179, .18);cursor: pointer}
.level li:hover {box-shadow: 0 4px 20px rgba(253, 80, 6, 0.28);margin-top: 3px }
.level_num {position: absolute;top: 5px;left: 9px;font-size: 18px;font-weight: bold;color: #666666}
.level li:hover .level_num { color: #222 !important;}
.level_lock {position: absolute;top: 5px;right: 9px;font-size: 24px !important;font-weight: bold;color: #777;display: none}
.level_move {position: absolute;top: 5px;right: 9px;font-size: 14px !important;font-weight: bold;color: #333c4e;display: block}
.level li:not([lock=""]) .level_lock { display: inline-block; }
.level_done {position: absolute;top: 5px;right: 9px;font-size: 24px !important;font-weight: bold;color: #4D97FF;display: none}
.level_title {text-align: center;font-size: 16px;margin-top: 10px;}
.level_star {position: absolute;bottom: 15px;left: 16px;text-align: center;margin: 10px 0;}
.level_desc {position: absolute;bottom: 5px;left: 0;right: 0;text-align: center;font-size: 14px;font-weight: bold;color: #888;}
.level_desc { white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.level li .level_img {position: absolute;left: 0;right: 0;display: block;width: 108px;height: 108px;background-color: #f9f9f9;opacity: .91;z-index: 0}
.level li .level_type {position: absolute;left: 0;right: 0;display: block;width: 108px;height: 108px;opacity: .51;z-index: 0; font-family: "iconfont" !important;text-align: center;line-height: 108px;font-size: 30px;color: #e90;}

.level li .level_type_game, .level li .level_type_game01, .level li .level_type_game02, .level li .level_type_game03 {color: #76bcfa; }
.level li.level_type_video .level_type {color: #690; }
.level li img {display: block;margin: 0 auto;max-width: 80%;max-height: 80%;position: relative;z-index: 20}
.level li:hover .level_img { opacity: 1; }
.level li .stars {height: 90px;width: 140px;display: none}
.level li.passed .level_lock { display: none; }
.level li.passed .level_star { display: block; }
.level li.level_type_video .level_star { display: none !important; }
.level li.passed .level_done { display: block; }
.level .level_video::before { content: "\e888"; }
.level .level_game03::before { content: "\e618"; }
.level .level_game::before { content: "\e618"; }
.level .level_game01::before { content: "\e618"; }
.level .level_game02::before { content: "\e618"; }
.level .level_char::before { content: "\eb0e"; }
.level .level_sent::before { content: "\e7f4"; }
.level .level_zhuyin::before { content: "\e644"; }
.level .level_wordcn::before { content: "\e644"; }
.level .level_worden::before { content: "\e606"; }
.level .level_para::before { content: "\e83c"; }
.level .level_word::before { content: "\e606"; }
.level .level_plus::before { content: "\e603"; }
#btn_add_level { cursor: pointer; }
.level_types { display: flex;flex-direction: row;flex-wrap: wrap}
.level_types li { box-sizing: border-box; width: 48%;text-align: center;padding: 5px;cursor: pointer;border: 2px solid #EDF5FF;border-radius: 3px;;margin: 5px;background: #EDF5FF;padding: 5px;}
.level_types li.active, .level_types li:hover { border-color: #0c7df5;}
.level_types img { width: 100%;}
#level_text {display: grid;grid-template-rows: auto;min-height: 160px;resize: none;}
.layui-form-radio:hover > *, .layui-form-radioed, .layui-form-radioed > i { color: #00A6EA}
.layui-btn { background-color: #00A6EA;}
.layui-btn-normal { background-color: #00A6EA;}
.layui-btn-primary { background-color: #ffffff;}
.layui-card-body h2 { font-size: 20px;}
.layui-elem-quote { border-left-color: #00A6EA}
.login_li a img { width: 30px;border-radius: 30px;}
.login_li .layui-nav-item a { font-size: 12px !important;}
.reach_box {position: relative;min-height: 160px;max-width: 1200px;min-width: 800px}
.reach_box ul { display: flex;flex-direction: row;justify-content: space-between; }
.reach_box ul li {flex: 1; position: relative;min-width: 60px;height: 70px;margin: 0;cursor: pointer;}
.reach_box ul li .strip {width: 100%;height: 4px;position: relative;top: -16px;right: 0;;left: 0;background-color: #ccd2db}
.reach_box ul li.reach .strip {background-color: #00a1d6}
.reach_box ul li.reach .reach-tips {display: none}
.reach_box ul li .icon {width: 50px;height: 50px;margin: 2px auto;position: relative;z-index: 2}
.reach_box ul li .icon img {max-width: 100%}
.reach_box ul li:hover .mp-tips, .reach_box ul li .mp-tips:hover {visibility: visible;opacity: 1;}
.reach_box ul li p.reach-tips {color: #99a2aa;text-align: center;position: absolute;bottom: -22px;width: 100%;line-height: 12px;font-size: 12px;}
.reach_box ul li p.title {color: #00A1D6;text-align: center;max-width: 124px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin: 0 auto}
.reach_box ul li.reach:after {content: "\e602";font-family: 'iconfont';width: 19px;height: 13px;margin: 0 auto 0 -10px;position: absolute;bottom: -15px;left: 47%;font-size: 30px;color: #00A1D6}
.reach_box ul li .mp-tips {min-width: 120px; padding: 11px 15px;border: 1px solid #e5e9ef;color: #ffffff;font-size: 12px;line-height: 20px;box-shadow: 0 2px 4px #DCDCDC;position: absolute;background: #00b5e5;border-radius: 4px;left: -15px;z-index: 9;top: 103px;opacity: 0;visibility: hidden}
.reach_box ul li.reach .mp-tips { }
.reach_box ul li .mp-tips .btn {display: block;height: 24px;line-height: 24px;width: 86px;text-align: center;border-radius: 3px;margin: 15px auto 0;color: #fff;font-size: 12px;background-color: #00a1d6}
.reach_box ul li .mp-tips .btn:hover {background-color: #00b5e5}
.reach_box ul li:last-child .mp-tips {left: -84px}
.member_stat .h4 {font-size: 20px;padding: 20px;}
.member_stat i {font-size: 25px;padding-right: 10px;}
.member_stat > div > div { color: #666;font-size: 14px}
.level_type_img { padding: 15px;}
.ck-bg { display: flex;flex-direction: row;flex-wrap: wrap;}
.ck-bg .cale-warp { margin: 10px;}
.ck-bg .cale-warp .mhead { background: #EEEEEE;text-align: center;}
.ck-bg .cale-warp ul { background: #ffffff}
.ck-bg .cale-warp ul li:nth-of-type(7n) p.succe i {background: transparent;}
.ck-bg .cale-warp ul li:last-of-type p.succe i {background: transparent;}
.ck-bg .cale-warp ul li:nth-of-type(1), .ck-bg .cale-warp ul li:nth-of-type(2), .ck-bg .cale-warp ul li:nth-of-type(3), .ck-bg .cale-warp ul li:nth-of-type(4), .ck-bg .cale-warp ul li:nth-of-type(5), .ck-bg .cale-warp ul li:nth-of-type(6), .ck-bg .cale-warp ul li:nth-of-type(7) {background: rgba(248, 248, 248, 1);font-size: 16px;color: rgba(127, 127, 127, 1);}
.ck-bg .cale-warp ul {margin: 0 auto;width: 245px;height: 245px;overflow: hidden}
.ck-bg .cale-warp ul li {display: flex;justify-content: center;align-items: center;float: left;position: relative;width: 35px;height: 35px;line-height: 35px;text-align: center;font-size: 14px;color: #000}
.ck-bg .cale-warp ul li p {width: 30px;height: 30px;line-height: 30px;text-align: center;border-radius: 100%}
.ck-bg .cale-warp ul li p i {position: absolute;top: 30px;left: -20px;background: rgb(255, 255, 255);width: 0.42rem;height: 0.18rem;right: unset;display: none}
.ck-bg .cale-warp ul li p.succe {background: rgba(248, 190, 69, 1);color: #fff}
.ck-bg .cale-warp ul li p.succe i {position: absolute;top: 20px;right: -10px;background: rgba(248, 190, 69, 1);width: 20px;height: 10px;left: unset;display: none}
.ck-bg .cale-warp ul li p.succe_1 {background: rgb(48, 162, 3);color: #fff}
.ck-bg .cale-warp ul li p.succe_2 {background: rgb(253, 154, 6);color: #fff}
.ck-bg .cale-warp ul li p.succe_3 {background: rgb(5, 118, 155);color: #fff}
.ck-bg .cale-warp ul li p.succe_4 {background: rgb(236, 10, 10);color: #fff}
.ck-bg .cale-warp ul li p.succe_5 {background: rgb(236, 10, 10);color: #fff}
.ck-bg .cale-warp ul li p.succe_6 {background: rgb(236, 10, 10);color: #fff}
.ck-bg .cale-warp ul li p.failed:after {content: "！";color: red;position: absolute;top: -10px;right: 0;font-weight: bold;display: none}
#full_screen_overlay { display: none; position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);justify-content: center;align-items: center;color: white;font-size: 24px;cursor: pointer;z-index: 9999;}
:root {--couleur-degrade-mains: #FFFFFF;--couleur-touche: #eaf0f2;--couleur-tirets: #D8E0E7}
.keystate_hands {float: left;margin-right: 40px;pointer-events: none}
.keystate_hands img {width: 24px}
.keystate_hands span {width: 24px;display: inline-block;font-size: 23px;color:#D0D0D0;text-align: center;}
.keystate_hands span.active {color:  rgb(48, 162, 3)}
.keystate_hands span.warn {color: rgb(253, 154, 6)}
.bloc-statistiques {width: 100%;display: flex;justify-content: center;margin: 30px;}
.bloc-statistiques:after {clear: both;content: "";display: block}
.degrade-main {stop-color: var(--couleur-degrade-mains)}
.tirets {stroke: var(--couleur-tirets)}
.bloc-activite {float: left}
.conteneur-activite {width: auto;max-width:500px;margin-bottom: 36px;vertical-align: top}
.conteneur-activite p {padding: 9px 0;color: #999999}
.caractere {vertical-align: top;text-align: center;font-family: quicksandtt, sans-serif;margin-right: 10px;font-size: 16px;font-weight: 300;display: inline-block;height: 40px;width: 40px;border-radius: 5px;background-color: var(--couleur-touche);line-height: 40px;margin-bottom: 5px;}
.caractere.fond-clair {background-color: #fff}
.image-perfectionnement {width: 30px;margin-top: 7px}
.doigt-0 {margin-left: 1px}
.doigt-1, .doigt-2, .doigt-3, .doigt-8, .doigt-9 {margin-left: 23px}
.doigt-7 {margin-left: 24px}
.doigt-6 {margin-left: 130px}
svg #mains-perfectionnement {fill:#fff;stroke: #999999}
svg #ombre-mains-perfectionnement {fill: #F0F5F9}
.level_mobile {
  .layui-tab-title li { width: 60px;overflow: hidden}

  .layadmin-user-login-main .layui-tab-title li {width: 100px !important;box-sizing: border-box;}

  #full_screen_overlay { display: flex}

  #full_screen_overlay p {text-align: center;}

  .login_msg { display: block !important;}

  .layadmin-user-login-main {width: 80vw;margin: 3px auto;}

  .layui_member .layui-row { display: block}

  .layui_member .layui-row > .layui-col-md10 { min-width: unset;}

  .reach_box { max-width: unset; width: 100%;min-width: unset}

  .layui-col-md10 > .layui-card { padding: 0 !important;margin: 0}

  .lesson-item {
    width: 240px;
    height: 300px;}

  .ck-bg .cale-warp { margin: 1px;}

  .layui-col-md3 { display: none}
}