.sitemap, .sitemap a {color: #fff;}
.red {background-color: #F44336 !important}
.red-text {color: #F44336 !important}
.pink {background-color: #e91e63 !important}
.pink-text {color: #e91e63 !important}
.purple {background-color: #9c27b0 !important}
.purple-text {color: #9c27b0 !important}
.blue {background-color: #2196F3 !important}
.blue-text {color: #2196F3 !important}
.light-blue {background-color: #03a9f4 !important}
.light-blue-text {color: #03a9f4 !important}
.green {background-color: #4CAF50 !important}
.green-text {color: #4CAF50 !important}
.yellow {background-color: #ffeb3b !important}
.yellow-text {color: #ffeb3b !important}
.orange {background-color: #ff9800 !important}
.orange-text {color: #ff9800 !important}
.brown {background-color: #795548 !important}
.brown-text {color: #795548 !important}
.grey {background-color: #9e9e9e !important}
.grey-text {color: #9e9e9e !important}
.black {background-color: #000 !important}
.black-text {color: #000 !important}
.white {background-color: #fff !important}
.white-text {color: #fff !important}
.transparent {background-color: rgba(0, 0, 0, 0) !important}
.transparent-text {color: rgba(0, 0, 0, 0) !important}
.hide {display: none !important}
.left-align {text-align: left}
.right-align {text-align: right}
.center, .center-align {text-align: center}
.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}
input, textarea, button {outline-style: none;}
fieldset, img {border: 0}
li, ul {list-style: none}
.art-content li, .art-content ul {list-style: inherit}
a {text-decoration: none}
a:hover {text-decoration: none}
small {font-size: .9em}
input, textarea, button {outline: 0}
header { display: block;clear: both}
.diggit, .jz-comment-box input.button {background: #e80000}

* {margin: 0;padding: 0}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
:after, :before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body {font: 14px "Microsoft YaHei", Arial, Helvetica, sans-serif;color: #555;line-height: 1.5;
  background-color: #f3f9ff;
  background-image: url(images/fond-page-centree.svg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
div, h1, h2, h3, h4, h5, p, form, ul, label, input, textarea, img, span, dl, dt, dd {margin: 0px;padding: 0;outline: 0;}
img {border: 0;display: inline-block}
ul, li {list-style: none;}
ol li {margin-left: 20px;list-style: decimal;padding-left: 3px;}
a {color: #555;text-decoration: none;-webkit-transition: background-color .15s linear, color .15s linear;-moz-transition: background-color .15s linear, color .15s linear;-o-transition: background-color .15s linear, color .15s linear;-ms-transition: background-color .15s linear, color .15s linear;transition: background-color .15s linear, color .15s linear;}
button {transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
a:focus, button:focus {outline: 0;}
a:hover {text-decoration: none;color: #ff6000}
blockquote {background: rgba(68, 142, 246, 0.1);border-left: 4px solid #1BB67C;position: relative;width: 100%;padding: 16px;margin-bottom: 15px;font-size: 14px;padding-left: calc(16px + 16px);border-radius: 5px;transition: all 0.28s ease;-moz-transition: all 0.28s ease;-webkit-transition: all 0.28s ease;-o-transition: all 0.28s ease;}
blockquote:before {position: absolute;color: #1BB67C;content: '\e739';top: calc(50% - 24px * 0.5);left: 4px;width: 24px;height: 24px;text-align: center;font-weight: 600;line-height: 24px;vertical-align: middle;font-family: 'icomoon';}
blockquote p {margin: 2px 0 !important;}
table {border-collapse: collapse}
table, table th, table td {border: 1px solid #eee}
table th, table td {padding: 6px}
table th {background-color: #f6f7f8}
h3 i {margin-right: 6px;}
.bt {font-size: 14px;line-height: 20px;padding: 4px 12px;border-radius: 4px;font-weight: 400;background-color: #1BB67C;}
.app_body { max-height: 100vh;overflow-y: hidden;display: flex;flex-direction: column;}
.app_body .app_index { flex: 1;}
.app_index { display: flex;flex-direction: column; }
.app_header {clear: both;position: relative;background: url("app/bg5.jpg"); background-size: 100% auto;
  background-repeat: no-repeat;height: 90px;flex-shrink: 0;min-height: 90px; }

.app_header .logo { position: absolute;bottom: -4px;left: 50px;}
.app_header .logo img { width: 290px; }
.app_header .loginbox { position: absolute;top: 7px;right: 200px;color: #FFFFFF;z-index: 999}
.app_header .loginbox a { color: #05769b;font-size: 12px;background: #B6EFFE;
  padding: 2px 5px;line-height: 20px;}
.app_header .windowbox { position: absolute;top: 0px;right: 0px;color: #FFFFFF;background: #1BB67C; border-radius: 5px;overflow: hidden;opacity: 0.7 }
.app_header .windowbox span { color: #fff;display: inline-block;font-size: 16px;height: 28px;width: 32px;text-align: center;line-height: 30px;cursor: pointer;}
.app_header .windowbox span:hover { background: #18A06D;}
.app_header .windowbox span.icon-recovery { display: none; }
.app_header .backbox { position: absolute;top: 10px;left: 10px;color: #FFFFFF;display: none;}
.app_header .backbox a { color: #fff;background: #FFFFFF;color: #444444}
.app_header .menu { position: absolute;bottom: 3px;right: 10px;color: #FFFFFF;opacity: 0.9}
.app_header .menu li { list-style: none;display: inline-block}
.app_header .menu li a {font-size: 14px;line-height: 20px;padding: 4px 12px;border-radius: 4px;font-weight: 400;background-color: #1BB67C;color: #FFFFFF;border-bottom-right-radius: 0;border-bottom-left-radius: 0;}

.app_index_top { display: flex;flex-direction: column;align-content: center;justify-content: center;height: 140px; flex-shrink: 0; }
.app_course .app_index_top { height: 100px;}
.app_index_top h1 { text-align: center;font-size: 30px;line-height: 30px;}
.app_index_top p { text-align: center;margin-top: 20px;font-size: 16px;}
.app_index_top h1 span { font-size: 32px;}
.app_body footer { text-align: center;font-size: 12px; position: fixed;bottom: 0;left: 0;width: 100%;height: 30px;background: #1BB67C;color: #fff;line-height: 30px;}
.app_course_list { max-width: 96%;margin: 0 auto;overflow-y: auto;flex: 1;max-height: 70vh; padding-bottom: 220px !important;min-height: 0;}
.app_body *::-webkit-scrollbar { width: 6px; height: 10px;}
.app_body *::-webkit-scrollbar-thumb { border-radius: 6px;background-color: rgba(135, 136, 136, 0.67);}
.app_body *::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #ededed;border-radius: 8px;}
.app_header .menu li a:hover { color: #FFFFFF;background: #0ab1f9;}
.app_level .app_header .logo img { width: 160px;}
.app_level .app_header .logo { bottom: -3px;left: 40%;}
.app_level .app_header { min-height: 40px;height: 40px;}
.app_level .app_header .menu { display: none}
.app_level .app_header .backbox { display: inline}
.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; justify-content: center;}
.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: 210px;height: 220px;display: block;box-shadow: 0 4px 30px rgba(0, 80, 179, .08);border-radius: 15px;font-family: PingFang SC, sans-serif;outline: 0;transition: box-shadow .3s;text-align: left;margin: 10px;
  border: solid 1px #dddddd; }
.lesson-item:hover {box-shadow: 0 8px 30px rgba(0, 80, 179, .12);margin-top: 8px;}
.lesson-item .pic {display: block;margin: 0;padding: 0;border-radius: 15px 15px 0 0;width: 100%;height: 123px}
.lesson-item .content {padding: 8px 12px 16px;position: relative}
.lesson-item .title {height: 48px;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: space-between}
.lesson-bt { padding: 1px 7px; background: #f44336;color: #F5F5F5;border-radius: 10px;margin-right: 10px;}
.app_body { overflow: hidden;}

.level_list_nav { position: fixed;z-index: 9999; right: 10px;bottom: 50px;}
.level_list_nav ul {display: flex;flex-direction: column;max-width: 80px;background: #1BB67C;opacity: 0.5;border-radius: 3px;}
.level_list_nav ul li { text-align: center; list-style: none;display: block;line-height: 25px;padding: 0;margin: 0;color: #fff;}
.level_list_nav ul li a { font-size: 12px;line-height: 25px;color: #fff;}
.level_list_nav ul:hover {opacity: 0.9; }
.level_list_nav ul li:hover { background: #dd7b0b }
hr { color: #e6e6f5;z-index: -1;opacity: 0.3}


.levels {display: block;margin: 15px auto; }
.fixbg { background: url('/static/dazi/bg/bg6.jpeg') no-repeat center top; background-size: cover;z-index: -999;position: fixed;width: 100vw;height: 100vh;top: 0;left: 0;right: 0;bottom: 0;}
.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: 168px;float: left;height: 170px;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: flex-start;align-items: flex-start;flex-direction: row }
.level li {height: 168px;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);}
.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: 24px;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 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: 168px;height: 168px;background-color: #f9f9f9;opacity: .91;z-index: 0}
.level li .level_type {position: absolute;left: 0;right: 0;display: block;width: 168px;height: 168px;opacity: .51;z-index: 0; font-family: "iconfont" !important;text-align: center;line-height: 148px;font-size: 60px;color: #e90;}
.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"; }
.level_type_keybr .level_desc { font-size: 50px;bottom: 45px;z-index: 999;color: #F2C779; text-shadow: 2px 2px 3px rgba(108, 108, 108, 0.2);}
.level_type_keybr.passed .level_desc { color: #FFF; -webkit-text-stroke: 1px #ddd; }
.level_type_keybr .level_num {z-index: 999; color: #888;}
@keyframes waveWater {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(120deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.level .level_type_keybr {
  .level_img { background: #ffffff }

  .stars::before, .stars::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -110%;
    left: -50%;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 40%;
    animation: waveWater var(--duration, 15s) linear infinite;
  }

  .stars::after {
    border-radius: 45%;
    background-color: rgba(255, 255, 255, 0.7);
    animation: waveWater var(--duration, 18s) linear infinite;
  }

  .stars {
    position: absolute;
    width: 100%;height: 170px;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    background: none;
    background-color: #4ab3f4;
    transition: all 0.5s ease;
    opacity: 0.7;
    z-index: 100;

    &.stars- { display: none; }

    &.stars-::before, .stars-::after { animation: none }

    &.stars-1::before, .stars-1::after { top: -110%;}

    &.stars-2::before, .stars-2::after { top: -130%;}

    &.stars-3::before, .stars-3::after { top: -150%;}

    &.stars-4::before, .stars-4::after { top: -170%;}

    &.stars-5::before, .stars-5::after { top: -190%;}

    &.stars-1::after { top: -110%;}

    &.stars-2::after { top: -130%;}

    &.stars-3::after { top: -150%;}

    &.stars-4::after { top: -170%;}

    &.stars-5::after { top: -190%;}

    &.stars-0 {background-color: #c51303; display: block; }

    &.stars-1 {background-color: #96D2F7; display: block; }

    &.stars-2 {background-color: #67BEF3; display: block; }

    &.stars-3 {background-color: #4ab3f4; display: block; }

    &.stars-4 {background-color: #4FB4F1; display: block; }

    &.stars-5 {background-color: #1FA0EE; display: block; }

    &.stars-p {}
  }
}
.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 li.passed .level_type { background: #e90; color: #ee8700;}*/
.level li {
  .stars {background-size: 143px 330px;background-image: url("/static/dazi/images/stars.png");height: 55px;

    &.stars-1 {background-position-y: 330px;}

    &.stars-2 {background-position-y: 275px;}

    &.stars-3 {background-position-y: 220px;}

    &.stars-4 {background-position-y: 165px;}

    &.stars-5 {background-position-y: 110px;}

    &.stars-p {background-position-y: 55px;}
  }
}
.loginbox > a { display: flex;flex-direction: row;align-items: center;margin-top: -5px;}
.app_header .logined { margin-top: -3px;border-radius: 5px;}

.loginbox.logined span {padding: 3px 6px;}
.loginbox.logined .icon-down { font-size: 16px;}
.loginbox .logined img { display: inline-block; width: 20px;border-radius: 20px;vertical-align: baseline}
#mnavh span {display: none;left: 0;text-align: center;}
.loginbox ul {display: none;text-align: center;padding: 0;background: #B6EFFE}
.loginbox:hover ul { display: block;}

.searchbbb {width: 80vw;max-width: 500px;position: relative;margin: 20px auto;height: 69px;padding: 15px 14px 13px;font-size: 20px;}
.searchbbb input {width: 55vw;max-width: 470px;height: 50px;padding: 0 15px 0 15px;font-size: 16px;color: #333;border: 1px solid #d1d1d1;border-radius: 3px;box-shadow: inset 0 1px 2px #eee;}
.searchbbb button {position: absolute;top: 15px;right: 12px;display: block;height: 50px;line-height: 50px;width: 90px;background-color: #4D97FF;color: #fff;text-align: center;border-radius: 0 10px 10px 0;border: none;font-size: 18px;}
.art-condBox {padding: 15px;margin-top: 20px;border-radius: 10px;background: #ffffff}
.art-condBox dl {height: auto;line-height: 25px;margin-bottom: 7px;position: relative;display: flex;flex-direction: row}
.art-condBox dt {width: 70px}
.art-condBox dd {width: auto}
.art-condBox dd a {display: inline-block;font-size: 13px;padding: 0 5px}
.art-condBox dd a.active, .art-condBox dd a:hover {color: #fff;background-color: #4D97FF;border-radius: 2px;-webkit-border-radius: 3px;-moz-border-radius: 2px}
.r_box { display: flex;flex-direction: column;margin: 10px;}
.r_box li .jiao {width: 20%;max-width: 55px;position: absolute;top: 0;left: 0;overflow: hidden;border-radius: 8px 0 0 0;z-index: 1;}
.r_box li .jiaod {width: 10%;}
.r_box li:hover img.jiao {transform: none;}
.r_box li, .aboxd {background: rgba(255, 255, 255, .9);overflow: hidden;color: #797b7c;margin-bottom: 20px;-webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;-webkit-animation-duration: 500ms;animation-duration: 500ms;-webkit-animation-fill-mode: both;animation-fill-mode: both;border-radius: 8px;box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);position: relative;}

.r_box li h2 {font-size: 20px;line-height: 25px;margin: 25px 25px 0;color: #f1404b;font-weight: normal;overflow: hidden;text-overflow: ellipsis;max-height: 25px;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;position: relative;}
.r_box li h2 a {color: #222}
.r_box li h2 a:hover {color: #ff6000}
.r_box li img {float: right;clear: right;width: 100%;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}
.r_box li .listtopimg img {float: none;clear: none;width: 100%;height: 240px;-o-object-fit: cover;object-fit: cover;}
.r_box li .listtopimg {width: 100%;display: block;height: 240px;overflow: hidden;font-size: 14px;border-radius: 8px 8px 0 0;}
.r_box li i {width: 130px;display: block;height: 130px;overflow: hidden;float: left;margin: 20px;font-size: 14px;border-radius: 5px;}
.r_box li i img {width: 100%;height: 130px;-o-object-fit: cover;object-fit: cover;}
.r_box li p {margin: 20px 25px 0;line-height: 22px;overflow: hidden;text-overflow: ellipsis;height: 44px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;position: relative;}
.r_box li:hover img {transform: scale(1.05)}
.r_box li:hover h3 a {color: #19585d;}
.r_box .postfoot {margin: 0 25px 25px;padding-top: 10px;display: block;color: #999;white-space: nowrap;text-overflow: ellipsis;}
.r_box .postfoot .btn { background: #4D97FF;padding: 5px 10px;color: #ffffff;border-radius: 5px;font-size: 14px;}
.r_box .postfoot .btn:hover { background: #a24403;}
.r_box ul { overflow-y: scroll;max-height: 50vh}

.pagelist {text-align: center;color: #666;width: 100%;clear: both;margin: 20px 0;padding: 20px 20px 14px 20px;background: rgba(255, 255, 255, .9);overflow: hidden;-webkit-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;-webkit-animation-duration: 500ms;animation-duration: 500ms;-webkit-animation-fill-mode: both;animation-fill-mode: both;border-radius: 8px;box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.1);}
.pagelist a {color: #666;margin: 0 2px 5px 2px;display: inline-block;padding: 5px 10px;background: rgba(222, 226, 230, .6);border-radius: 4px;}
.pagelist b {padding: 5px 10px;background: #5AA00A;color: #fff;font-weight: normal;border-radius: 4px;}
a.curPage {color: #19585d;font-weight: bold;}
.app_body > .list_content {flex: 1;overflow-y: auto;min-height: 0;margin: 10px auto; width: 100%}
.list_content p { padding: 5px 10px;}
.list_content h2 { padding: 5px 10px;font-size: 16px }
h3 {display: block;padding-bottom: 9px;color: #384d60;font-size: 18px;text-align: left;border-bottom: 1px solid rgba(42, 83, 118, .06)}
.icones-sections {display: grid;grid-gap: 17px;grid-template-columns:1fr 1fr 1fr 1fr 1fr;width: 100%;max-width: 100%;margin-right: auto;margin-bottom: 72px}
@media (max-width: 1000px) {
  .icones-sections {grid-template-columns:1fr 1fr 1fr 1fr}
}
@media (max-width: 800px) {
  .icones-sections {grid-template-columns:1fr 1fr 1fr}
}
@media (max-width: 600px) {
  .icones-sections {grid-template-columns:1fr 1fr}
}
.icones-sections a {display: inline-block;-webkit-box-sizing: border-box;box-sizing: border-box;min-height: 203px;padding: 18px;text-align: center;vertical-align: top;border-radius: 4px;-webkit-box-shadow: 0 0 0 1px rgba(42, 83, 118, .06);box-shadow: 0 0 0 1px rgba(42, 83, 118, .06);-webkit-transition: color .2s, -webkit-box-shadow .2s;transition: color .2s, -webkit-box-shadow .2s;-o-transition: color .2s, box-shadow .2s;transition: color .2s, box-shadow .2s;transition: color .2s, box-shadow .2s, -webkit-box-shadow .2s}
.icones-sections a img {margin: 18px}
.icones-sections a .etiquette {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;min-height: 36px;color: #8ea4b5;font-size: 15px;-webkit-transition: color .2s, -webkit-box-shadow .2s;transition: color .2s, -webkit-box-shadow .2s;-o-transition: color .2s, box-shadow .2s;transition: color .2s, box-shadow .2s;transition: color .2s, box-shadow .2s, -webkit-box-shadow .2s}
.icones-sections a .etiquette::before {display: none}
.icones-sections a:hover {-webkit-box-shadow: 0 0 0 1px rgba(15, 30, 43, .06), 0 3px 10px 1px rgba(2, 4, 5, .06);box-shadow: 0 0 0 1px rgba(15, 30, 43, .06), 0 3px 10px 1px rgba(2, 4, 5, .06)}
.icones-sections a:hover .etiquette {color: #1f394e}
.centre-documentation main h3 {color: #1f394e;font-size: 18px}
.centre-documentation .icones-sections a {-webkit-transition: color .2s;-o-transition: color .2s;transition: color .2s}
.centre-documentation .icones-sections a .etiquette {color: #1f394e;font-size: 16px;line-height: 19px}
.centre-documentation .icones-sections a:hover .etiquette {color: #000}
.delimiteur-page, .game-list { max-width: 1000px;margin: 0 auto;}
.keyboard-ling { text-align: center;color: #888888;font-size: 14px;}
.keyboard-ling span { padding-left: 5px;margin: 4px;}
.keyboard-ling strong { padding-left: 5px;}

.lianxi_body { background: #69b80f}
.lianxi_body .lesson-head .title h3 { color: #fff;}
.lianxi_config {max-width: 800px;margin: 20px auto;padding: 20px;background-color: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);font-size: 16px;}
.lianxi_config h1 {color: #00A6EA;margin-bottom: 10px;font-size: 30px;text-align: center;display: block;width: 100%;}
.lianxi_config .group {margin-bottom: 13px;padding: 10px;background-color: #ffffff;border-radius: 3px;display: flex;flex-wrap: wrap;align-items: center;min-width: 500px;flex-direction: row;justify-content: left;}
.time_config span {font-size: 14px;background: #DAF4FF;border-radius: 5px;padding: 3px 5px;margin-right: 3px !important;cursor: pointer;}
.lianxi_config .label {width: 120px;font-weight: bold;color: #555;margin-right: 15px;}
.lianxi_config .condType {margin-bottom: 5px;}
.lianxi_config .condType dd span.active, .lianxi_config .condType dd span:hover {background-color: #8dcef6;}
.lianxi_config .condType dd span { font-size: 12px;padding: 3px 10px;border-radius: 4px;transition: background-color 0.3s;background: #E3F2FD;cursor: pointer;}
.lianxi_config input[type="text"] {padding: 8px 12px;border: 1px solid #ddd;border-radius: 4px;margin-right: 10px;width: 200px;background: #DAF4FF;}
.lianxi_config input[type="number"] {padding: 8px 12px;border: 1px solid #ddd;border-radius: 4px;margin-right: 10px;width: 100px;background: #DAF4FF;}
.lianxi_config label {display: inline-flex;align-items: center;margin-right: 15px;cursor: pointer;color: #555;}
.lianxi_config input[type="radio"] {margin-right: 5px;border-radius: 4px;padding: 6px 10px;color: #1e88e5;background: #E3F2FD;}
.lianxi_config a, .lianxi_config .button {color: #1e88e5;text-decoration: none;padding: 3px 10px;border-radius: 4px;transition: background-color 0.3s;background: #E3F2FD;cursor: pointer;}
.lianxi_config a:hover {background-color: #e3f2fd;}
.lianxi_config input[type="checkbox"] {width: 18px;height: 18px;border: 2px solid #1e88e5;border-radius: 4px;margin-right: 8px;position: relative;cursor: pointer;transition: all 0.3s ease;}
.lianxi_config input[type="checkbox"]:checked {background-color: #1e88e5;}
.lianxis li { list-style: none;line-height: 28px;font-size: 13px;padding: 3px 9px;border-radius: 5px;border: 1px solid #ddd;display: inline-block;margin: 3px;cursor: pointer;white-space: nowrap;min-width: 160px;}
.lianxis li:hover { background: #DAF4FF}
.lianxi_config span {user-select: none;}
#bt_start {padding: 15px 30px;min-width: 240px;display: block;margin: 5px auto;background: linear-gradient(135deg, #ff5e62, #ff9966); color: white;border: none;font-size: 18px;font-weight: bold;letter-spacing: 1px;border-radius: 50px;box-shadow: 0 4px 15px rgba(255, 94, 98, 0.4);cursor: pointer;transition: all 0.3s ease;transform: translateY(0);}
#bt_start:hover {transform: translateY(-3px);box-shadow: 0 7px 20px rgba(255, 94, 98, 0.6);}
#bt_start:active {transform: translateY(1px);}
.level_text { font-size: 16px;height: 90%;width: 100%;padding: 5px;line-height: 30px;}
#input_type_box .input_types {flex: 1;display: flex;flex-wrap: wrap;gap: 8px 16px;}
#input_type_box .input_types label {display: inline-flex;align-items: center;cursor: pointer;}
#input_type_box .input_types input[type="radio"] {margin-right: 6px;}
.ft_btns {text-align: right;width: 100%}
.ft_btns a {padding: 5px 12px;min-width: 70px;display: inline-block;margin: 5px auto;background: linear-gradient(135deg, #25A6EF, #0a97fc);color: white;border: none;font-size: 14px;letter-spacing: 1px;border-radius: 20px;box-shadow: 0 4px 10px rgb(115, 154, 199);transition: all 0.3s ease;transform: translateY(0);}
.ft_btns a:hover {transform: translateY(-3px);box-shadow: 0 7px 20px rgba(12, 96, 193, 0.6);}
.title-section {text-align: center;margin: 40px 0;}
.title-section h2 {font-size: clamp(1.8rem, 4vw, 2.5rem);font-weight: bold;margin-bottom: 12px;}
.title-section p {color: #6b7280;max-width: 800px;margin: 0 auto;}
.rank-filter {background-color: white;border-radius: 16px;padding: 16px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);margin-bottom: 32px;}
.filter-buttons {display: flex;flex-wrap: wrap;justify-content: center;gap: 12px;}
.filter-btn {padding: 12px 24px;border-radius: 9999px;font-weight: 500;transition: all 0.2s ease;}
.filter-btn.active {background-color: #165DFF;color: white;}
.filter-btn:not(.active) {background-color: #f3f4f6;color: #1f2937;}
.filter-btn:not(.active):hover {background-color: #e5e7eb;}
.rank-tabs {display: grid;grid-template-columns: 1fr;gap: 32px;}
.rank-tab {background-color: white;border-radius: 16px;overflow: hidden;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;}
.rank-tab:hover {box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);}
.tab-header {padding: 20px;color: white;}
.tab-header.chinese {background: linear-gradient(to right, #165DFF, #165DFFcc);}
.tab-header.english {background: linear-gradient(to right, #722ED1, #722ED1cc);}
.tab-header h3 {font-size: 20px;font-weight: bold;display: flex;align-items: center;margin: 0;}
.tab-header h3 i {margin-right: 8px;}
.tab-header p {font-size: 14px;color: rgba(255, 255, 255, 0.8);margin: 4px 0 0 0;}
.tab-content {padding: 20px;}
.rank-table {width: 100%;border-collapse: collapse;border: none;}
.rank-table th {text-align: left;color: #6b7280;font-weight: 500;padding-bottom: 12px;border: none;border-bottom: 1px solid #e5e7eb;}
.rank-table td {padding: 16px 0;border: none;border-bottom: 1px solid #e5e7eb;}
.rank-table tr:last-child td {border-bottom: none;}
.rank-table tr:hover {background-color: #f9fafb;}
.rank-number {display: flex;align-items: center;}
.rank-number span {width: 32px;height: 32px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;}
.rank-number span.top3 {background-color: rgba(22, 93, 255, 0.1);color: #165DFF;}
.rank-number span.other {background-color: #f3f4f6;color: #4b5563;}
.user-info {display: flex;align-items: center;}
.user-info img {width: 40px;height: 40px;border-radius: 50%;margin-right: 12px;}
.user-details .username {font-weight: 500;}
.user-details .country {font-size: 12px;color: #6b7280;}
.speed {font-weight: bold;}
.speed-unit {font-size: 14px;font-weight: normal;color: #6b7280;}
.view-more {margin-top: 16px;text-align: center;}
.view-more button {color: #165DFF;font-weight: 500;transition: color 0.2s ease;}
.view-more button:hover {color: #0e46cc;}
.stats-cards {display: grid;grid-template-columns: 1fr;gap: 24px;margin-top: 48px;}
.stats-card {background-color: white;border-radius: 16px;padding: 24px;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;}
.stats-card:hover {transform: translateY(-2px);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);}
.card-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;}
.card-header h4 {font-weight: bold;margin: 0;}
.card-icon {width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.card-icon.primary {background-color: rgba(22, 93, 255, 0.1);color: #165DFF;}
.card-icon.secondary {background-color: rgba(114, 46, 209, 0.1);color: #722ED1;}
.card-icon.accent {background-color: rgba(255, 125, 0, 0.1);color: #FF7D00;}
.card-value {font-size: 32px;font-weight: bold;margin-bottom: 8px;}
.card-subtext {font-size: 14px;color: #6b7280;}
.improve-section {background: linear-gradient(to right, rgba(22, 93, 255, 0.1), rgba(114, 46, 209, 0.1));border-radius: 24px;padding: 32px;margin-top: 48px;}
.improve-content {display: flex;flex-direction: column;}
.improve-text {margin-bottom: 24px;}
.improve-text h3 {font-size: 24px;font-weight: bold;margin-bottom: 16px;}
.improve-text p {color: #4b5563;margin-bottom: 24px;}
.improve-buttons {display: flex;flex-wrap: wrap;gap: 12px;}
.practice-btn {background-color: #165DFF;color: white;padding: 12px 24px;border-radius: 9999px;font-weight: 500;transition: background-color 0.2s ease;}
.practice-btn:hover {background-color: #0e46cc;}
.learn-more-btn {background-color: white;color: #165DFF;border: 1px solid #165DFF;padding: 12px 24px;border-radius: 9999px;font-weight: 500;transition: background-color 0.2s ease;}
.learn-more-btn:hover {background-color: #f0f5ff;}
.improve-image {display: flex;justify-content: center;}
.improve-image img {border-radius: 16px;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);}
.search-form {background-color: white;border-radius: 16px;padding: 24px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);margin-bottom: 32px;}
.form-group {margin-bottom: 16px;display: flex;flex-direction: row;align-items: center;}
.form-group label {display: inline-block;font-weight: 500;margin-bottom: 8px;}
.form-group button, .form-group input, .form-group select {min-width: 200px;padding: 12px;border: 1px solid #e5e7eb;border-radius: 8px;outline: none;transition: border-color 0.2s ease;margin-left: 20px;}
.form-group input:focus, .form-group select:focus {border-color: #165DFF;}
.search-buttons {display: flex;gap: 12px;margin-top: 24px;}
.search-btn {background-color: #165DFF;color: white;padding: 12px 24px;border-radius: 9999px;font-weight: 500;transition: background-color 0.2s ease;}
.search-btn:hover {background-color: #0e46cc;}
.reset-btn {background-color: #f3f4f6;color: #1f2937;padding: 12px 24px;border-radius: 9999px;font-weight: 500;transition: background-color 0.2s ease;}
.reset-btn:hover {background-color: #e5e7eb;}
.result-table-container {background-color: white;border-radius: 16px;overflow: hidden;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);margin-bottom: 32px;}
.result-table {width: 100%;border-collapse: collapse;}
.result-table th, .result-table td {padding: 16px;text-align: left;}
.result-table th {background-color: #f9fafb;color: #4b5563;font-weight: 500;border-bottom: 1px solid #e5e7eb;}
.result-table td {border-bottom: 1px solid #e5e7eb;}
.result-table tr:last-child td {border-bottom: none;}
.result-table tr:hover {background-color: #f9fafb;}
.title-row {background-color: rgba(22, 93, 255, 0.05);color: #165DFF;}
.title-row td {font-weight: 500;}
.speed {font-weight: bold;}
.speed-unit {font-size: 14px;font-weight: normal;color: #6b7280;}
.correct-rate {font-weight: bold;}
.correct-rate-green {color: #10b981;}
.correct-rate-yellow {color: #f59e0b;}
.correct-rate-red {color: #ef4444;}
.challenge-btn {color: #165DFF;font-weight: 500;transition: color 0.2s ease;}
.challenge-btn:hover {color: #0e46cc;}
.chart-icon {color: #6b7280;transition: color 0.2s ease;}
.chart-icon:hover {color: #165DFF;}
.pagination {display: flex;justify-content: center;gap: 8px;margin-top: 32px;}
.page-btn {width: 36px;height: 36px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 500;transition: all 0.2s ease;}
.page-btn.active {background-color: #165DFF;color: white;}
.page-btn:not(.active) {background-color: #f3f4f6;color: #1f2937;}
.page-btn:not(.active):hover {background-color: #e5e7eb;}
.stats-cards {display: grid;grid-template-columns: 1fr;gap: 24px;margin-top: 48px;}
.stats-card {background-color: white;border-radius: 16px;padding: 24px;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;}
.stats-card:hover {transform: translateY(-2px);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);}
.exams .lesson-item .title { font-size: 13px;}
.typing-test-container {width: 100%;max-width: 500px;padding: 24px;box-sizing: border-box;}
.typing-test-header {text-align: center;margin-bottom: 24px;}
.typing-test-title {color: #1e293b;font-size: 24px;font-weight: 700;margin-bottom: 8px;}
.typing-test-subtitle {color: #64748b;font-size: 16px;}
.typing-test-image {width: 100%;height: 200px;background-color: #e2e8f0;margin-bottom: 24px;border-radius: 8px;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.typing-test-image img {width: 100%;height: 100%;object-fit: cover;}
.typing-test-stats {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 16px;margin-bottom: 24px;}
.typing-test-stat {background-color: #f1f5f9;padding: 16px;border-radius: 8px;text-align: center;}
.typing-test-stat-label {color: #64748b;font-size: 14px;margin-bottom: 4px;}
.typing-test-stat-value {color: #1e293b;font-size: 24px;font-weight: 600;}
.typing-test-button {width: 100%;background-color: #3b82f6;color: white;border: none;border-radius: 8px;padding: 12px 0;font-size: 18px;font-weight: 600;cursor: pointer;transition: background-color 0.3s;box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.4);}
.typing-test-button:hover {background-color: #2563eb;}
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}