* {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;}
progress {display: inline-block;vertical-align: baseline}
progress {-webkit-appearance: none;-moz-appearance: none;display: inline-block;appearance: none;width: 100%;height: .5rem;overflow: hidden;border: 0;}
.level_nav .container { margin-top: -8px;}
.level_nav {background-color: #EEEEEE;height: 42px;border-bottom: 1px solid #CCCCCC;margin-top: -2px;z-index: 88}
.level_nav nav {width: 100%;margin: 0 auto;display: flex;flex-direction: row;align-items: center;justify-content: space-between;height: 40px;}
.level_nav .score_bar {font-size: 12px;margin-right: 10px;user-select: none;max-width: 500px;overflow: hidden;text-wrap: nowrap; white-space: nowrap;}
.level_nav .score_bar span[id] {color: #fa7407;margin-right: 10px; }
.level_nav .score_bar input { vertical-align: middle;}
.level_nav .score_bar input[type=input] { width: 25px;height: 20px;}
.level_nav nav ul {list-style-type: none;padding: 0;margin: 0;}
.level_nav nav * {user-select: none !important;-webkit-user-select: none;}

.level_nav nav .more {display: flex;}
.level_nav nav h1 {text-align: left;flex-grow: 1;font-size: 14px;line-height: 26px;padding-left: 20px;color: #0C0C0C;font-weight: normal;max-width: 500px;overflow: hidden;text-wrap: nowrap; white-space: nowrap;}
.level_nav nav ul.tools {display: flex; flex-direction: row;}
.level_nav nav ul.tools a { text-decoration: none; color: #666666; }
.level_nav nav ul li {display: block;margin-left: 20px;list-style: none;padding: 0;margin: 0 }
.level_nav nav li span, .level_nav nav li a {text-decoration: none !important;color: #666;padding: 5px 10px;border-radius: 5px;transition: background-color 0.3s, color 0.3s;text-indent: -9999px;overflow: hidden;font-size: 12px;}
.level_nav nav li > div > div > .iconfont { min-width: 100px;}
.tools .bt_stat span { background-color: transparent !important;cursor: none;transition: none !important;}
.tools .bt_stat #bt_stat_1 {font-size: 15px;color: #fa7407; }
.tools .bt_stat #bt_stat_0 { font-size: 13px; color: #0c7df5}
.level_desc { white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.level_nav nav ul li > span:hover, .level_nav nav ul li > a:hover {background-color: #888;color: #fff;cursor: pointer;}
.level_nav nav .secondary {color: #007BFF;}
.level_nav nav .secondary:hover {text-decoration: underline;}
.level_nav nav ul.tools li { position: relative;}
.tools .options {position: absolute;top: 50px;width: 300px;background: #ffffff;text-align: left;line-height: 35px; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);}
.tools .options > div { border-bottom: 1px solid #CCCCCC;position: relative;}
.tools .options .options_close { position: absolute;top: 1px;right: 5px;z-index: 999}

.tools .options > div:last-child {border-bottom: none;}
.tools .options input { vertical-align: middle;}
.tools .options > div > a { }
.tools .options > div > a:hover { background: #EEEEEE;border-radius: 3px;}
.level_nav nav ul.keyboard-themes { display: flex; flex-direction: column; align-items: center;margin-top: -20px }
.level_nav nav ul.keyboard-themes li { list-style: none; display: flex !important; flex-direction: row; align-items: center;justify-content: center;padding: 5px;cursor: pointer;}
.level_nav nav ul.keyboard-themes li img { width: 170px; height: 60px;border-radius: 10px;margin-left: 20px;border: 3px solid #fff}
.level_nav nav ul.keyboard-themes li.active img { border: 3px solid #5DB7E5 }
.level_nav nav ul.keyboard-themes li:hover img { border: 3px solid #b7dbff }
.level_nav nav ul.keyboard-themes li i { font-style: normal;margin-left: 10px}
.level_nav nav ul.bg-themes { display: flex; flex-direction: row;flex-wrap: wrap; align-items: center;margin-top: 4px }
.level_nav nav ul.bg-themes li { list-style: none; display: flex !important; flex-direction: column; align-items: center;justify-content: center;cursor: pointer; width: 150px; height: auto;border-radius: 10px;margin: 10px;border: 3px solid #ddd;overflow: hidden}
.level_nav nav ul.bg-themes li img { width: 150px; height: auto}
.level_nav nav ul.bg-themes li i { font-style: normal;font-size: 12px;margin-top: -50px;color: #666666}
.level_nav nav ul.bg-themes li.active { border: 3px solid #5DB7E5 }
.level_nav nav ul.bg-themes li:hover { border: 3px solid #b7dbff }
.level_nav nav ul.bg-themes.bg-pets li img { width: 60px;height: 60px;border-radius: 5px;margin-top: 4px;}
.level_nav nav ul.bg-themes.bg-pets li { width: 100px;height: 100px;}
.level_nav nav ul.bg-themes.bg-pets li i { color: #222222;margin-top: 0px;}
#bt_pet_options { position: fixed;top: 80px;left: 10%;right: 10%;}
.tools #bt_pet_options .options { width: auto;}
.level_body { display: flex; flex-direction: column;height: 100vh; background: #EDF6FF;min-width: 600px;}
.container, .container-fluid {width: 100%;margin-right: auto;margin-left: auto;padding-right: var(--pico-spacing);padding-left: var(--pico-spacing);display: flex;flex-direction: column;}
.level_header { background: #EEEEEE;border-bottom: 1px solid #CCCCCC;max-height: 40px}
.level_header .level_nav { border-bottom: none !important;max-height: 38px;position: relative;z-index: 119;margin-top: 1px}
.video-js { background: #ffffff !important;}
.video-js .vjs-big-play-button {
  line-height: inherit;
  position: absolute;
  top: 40% !important;
  left: 45% !important;;
}
@media (min-width: 576px) {
  .container {max-width: 510px;padding-right: 0;padding-left: 0}

  .level_para_line { max-width: 600px}
}
@media (min-width: 768px) {
  .container {max-width: 768px}

  .level_para_line { max-width: 760px}
}
@media (min-width: 1024px) {
  .container {max-width: 1024px}

  .level_para_line { max-width: 960px}
}
@media (min-width: 1280px) {
  .container {max-width: 1200px}

  .level_para_line { max-width: 1200px}
}
@media (min-width: 1536px) {
  .container {max-width: 1450px}

  .level_para_line { max-width: 1200px}

  .level_zhuyin_line { max-width: 1300px}
}
@media (max-width: 1280px) {
  .level_nav nav h1 { display: none !important;}

  /*.level_nav nav ul.tools { display: none !important;}*/
}
@media (max-width: 1024px) {
  .level_nav .score_bar {display: none !important;}

  /*.level_nav nav ul.tools { display: none !important;}*/
}
.keyboard-plugin { position: relative;margin: auto;margin-top: 50px;overflow: hidden}
.keyboardBox { margin: 0 auto}
.active-key-pointer {display: block;position: absolute;

  &:before {content: '';display: block;background: radial-gradient(transparent 20%, #0383f2);opacity: 0;position: absolute;top: 0;left: -20px;width: 40px;height: 40px;border-radius: 50%;animation: animate1 3s steps(25, jump-none) infinite;animation-delay: 0.6s;}

  &:after {content: '';display: block;background: radial-gradient(transparent 20%, #0383f2);opacity: 0;position: absolute;top: 0;left: -20px;width: 40px;height: 40px;border-radius: 50%;animation: animate2 3s steps(25, jump-none) infinite;animation-delay: 0.6s;}

  @keyframes animate1 {
    0% {transform: scale(1);opacity: 0;}
    25% {transform: scale(3);opacity: 0.2;}
    80% {transform: scale(1);}
    100% {opacity: 0;}
  }
  @keyframes animate2 {
    0% {transform: scale(1);opacity: 0;}
    35% {transform: scale(2);opacity: 0.3;}
    85% {transform: scale(1);opacity: 0;}
  }}
/*.keyboard {top: 0;left: 0;}*/
/*.typing-block {width: 1031px;height:auto;margin: 0 auto;position: relative;overflow-x: hidden}*/
/*.hand {position: absolute;pointer-events: none;top: -10px;left: 0;opacity: 0.8;transform: translate(87px, 86px) scale(2.2);}*/
.hand {position: absolute;pointer-events: none;height: 363px;top: -10px;left: 0px;opacity: 0.8;transform: translateX(55px) scale(1.55);}
.level_box { flex: 1; display: flex; flex-direction: row; }

.level_box *::-webkit-scrollbar { width: 6px; height: 1px;}
.level_box *::-webkit-scrollbar-thumb { border-radius: 6px;background-color: rgba(135, 136, 136, 0.67);}
.level_box *::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #ededed;border-radius: 8px;}
.level_body .level_box {position: relative;}
.level_body .level_box::before { content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-repeat: no-repeat;background-size: 100% 100%;background-position: center;opacity: 0.5;z-index: -9999}
.level_body.bg0 .level_box::before { background-image: url('/static/dazi/images/levelbg0.jpg'); }
.level_body.bg1 .level_box::before { background-image: url('/static/dazi/images/levelbg1.jpg'); }
.level_body.bg2 .level_box::before { background-image: url('/static/dazi/images/levelbg2.jpg'); }
.level_body.bg3 .level_box::before { background-image: url('/static/dazi/images/levelbg3.jpg'); }
.level_body.bg4 .level_box::before { background-image: url('/static/dazi/images/levelbg4.jpg'); }
.level_body.bg5 .level_box::before { background-image: url('/static/dazi/images/levelbg5.jpg'); }
.level_body.bg6 .level_box::before { background-image: url('/static/dazi/images/levelbg6.jpg'); }
.level_body.bg7 .level_box::before { background-image: url('/static/dazi/images/levelbg7.jpg'); }
.level_body.bg8 .level_box::before { background-image: url('/static/dazi/images/levelbg8.jpg'); }
.level_body.bg9 .level_box::before { background-image: url('/static/dazi/images/levelbg9.jpg'); }
.level_body.bga .level_box::before { background-image: url('/static/dazi/images/levelbga.jpg'); }

.level_page {display: flex;justify-content: center;align-items: center;margin-bottom: 20px;}
.level_video {height: 100%;min-height: 100%;min-width: 80%;width: 80%;flex-direction: column;box-sizing: border-box;display: flex;place-content: center;align-items: center;margin-top: 50px;}
.level_video video { display: block;margin: 5px auto;}
.step-content { width: 680px;height: 250px;margin: 0 auto;}
.step-content .intro-text { margin-top: 50px;font-size: 30px;}
.step-content .intro-text i { display: inline-block;position: relative;font-size: 30px;color: white;background-color: #ABC250;padding: 3px 15px;border-radius: 5px;animation: shakeText 1s ease forwards;font-style: normal;margin: 0px 3px;}
@keyframes shakeText {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0);
  }
}
.level_process { position: fixed;left: 0;right: 0;bottom: 0;height: 50px;background: #FFF;border-top: 1px solid #CCCCCC; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;display: flex;justify-content: center}
.level_process_content {width: 800px;display: flex;justify-content: center;align-items: center;position: relative;}
.level_process_content .btn {background-color: #fff;color: #8D8D8D;padding: 6px 25px;border-radius: 25px;cursor: pointer;font-size: 16px;transition: background-color 0.3s;border: 1px solid #CCCCCC;}
.level_process_content .btn:hover {background-color: #33AFFF;color: #ffffff}
.level_process_content .btn.active {background-color: #33AFFF;color: #ffffff}
.level_process_content .btn:disabled {background-color: #DDDDDD !important;cursor: not-allowed;color: #999 !important;}
.level_process_content .pass_bar { font-size: 12px;text-align: center; position: absolute;top: 50%;left: 10px;transform: translateY(-50%); width: 100%;color: #aaa}
.level_process_content progress {flex: 1;height: 14px;margin: 0 10px;-webkit-appearance: none;appearance: none;}
.level_process_content progress::-webkit-progress-bar {background-color: #e0e0e0;border-radius: 5px;}
.level_process_content progress::-webkit-progress-value {background-color: #33AFFF;border-radius: 5px;}
.level_char_lines { display: flex;margin: 5px auto;width: 900px;flex-direction: column;margin-top: 120px; }
.level_char_lines .level_char_line {display: flex;justify-content: space-around;align-items: center; flex-direction: row; margin: 10px 0;display: none}
.level_char_lines .char_box { display: flex;justify-content: center;align-items: center; flex-direction: column; width: 50px;height: auto }
.level_char_lines .char_icon {width: 30px;height: 30px;margin-bottom: 15px;color: #10c373;font-size: 25px !important;text-align: center;}
.level_char_lines .char_char {font-size: 34px;line-height: 65px;margin-bottom: 5px;width: 70px;height: 70px;border-radius: 5px;border: solid 1px #eee;text-align: center;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);display: block;padding: 1px 6px;}
.level_char_lines .char_cursor {width: 70px;height: 2px;background-color: deepskyblue;margin-top: 5px;opacity: 0}
.level_char_lines .active .char_cursor {opacity: 1}
.level_char_lines .correct .char_char {border: solid 1px #0e9e5d;background: rgba(127, 255, 204, 0.61);color: #0e9e5d;}
.level_char_lines .correct .char_icon {content: "\e600";}
.level_char_lines .incorrect .char_char {border: solid 1px #ff5e7c;background: rgba(255, 94, 124, 0.33);color: #ff5e7c;}
.level_char_lines .incorrect .char_icon {content: "\e80e";color: #ff5e7c;}
.level_sent_line {display: flex;margin: 5px auto;flex-direction: row; flex-wrap: wrap;width: 880px;padding: 5px;box-sizing: border-box;display: none;justify-content: center;max-width: 90vw!important;}
.level_sent_line .char_box {width: 28px;display: flex;flex-direction: column; align-items: center;justify-content: center;margin: 1px;}
.level_sent_line .char_char {font-size: 35px;color: #666666;font-family: Roboto Mono, Noto Sans, Arial, Verdana, Consolas;font-style: normal;font-weight: 400;padding: 0px 2px;}
.level_sent_line .char_cursor {height: 2px;background-color: #8D8D8D;width: 24px;opacity: 0.3;margin-top: 5px;}

.level_sent_line .char_box.active .char_cursor { background: #0A6BF9;opacity: 1}
.level_sent_line .char_box.correct { background: #abd38a;color: #ffffff}
.level_sent_line .char_box[fixed].correct { background: #1f8f24}
.level_sent_line .char_box .char_char { background: none !important;}
.level_sent_line .char_box.correct .char_char {color: #ffffff;}
.level_sent_line .char_box.correct .char_cursor { opacity: 0}
.level_sent_line .char_box.incorrect { background: pink}
/* 注音类型 */
.level_zhuyin_lines {margin-top: 20px;max-height: 305px;overflow: hidden;overflow-y: auto;}
.level_sent_lines {margin-top: 30px;max-height: 325px;overflow: hidden;overflow-y: auto;}

.level_word_lines {margin-top: 60px;height: auto;overflow: hidden;overflow-y: hidden;display: flex;align-items: center;flex-direction: row;min-height: 160px;max-height: 250px;}
.level_word_lines .level_line { display: none;position: relative}
.level_zhuyin_line {display: flex;margin: 5px auto;flex-direction: row; flex-wrap: wrap;padding: 5px;box-sizing: border-box; justify-content: center;}
.level_word_line {display: flex;margin: 5px auto;flex-direction: row; flex-wrap: wrap;width: 880px;padding: 5px;box-sizing: border-box; justify-content: center;}
.word_sound { color: #aaaaaa;font-size: 14px;}
.word_box { display: flex;flex-direction: column;justify-content: center;align-items: center;margin-bottom: 3px;margin-left: 3px;}
.word_cursor { height: 2px;background-color: #a5e2f6;width: 96%;opacity: 0.5;margin-top: 0px;display: none}
.word_label { display: block;font-size: 28px;text-align: center;color: #333;}
.level_worden_lines .word_label { font-size: 16px;}
.level_worden_lines.level_word_lines { min-height: 200px;}
.word_pingyin { display: flex;flex-direction: row;padding: 0 2px;}
.char_box {min-width: 18px;display: flex;flex-direction: column; align-items: center;justify-content: center;margin: 1px;}
.char_char {font-size: 30px;color: #666666;font-family: Roboto Mono, Noto Sans, Arial, Verdana, Consolas;font-style: normal;font-weight: 200;padding: 0px 2px;}
.bg0 .char_char, .bg1 .char_char, .bg2 .char_char, .bg3 .char_char, .bg4 .char_char, .bg5 .char_char, .bg6 .char_char, .bg7 .char_char, .bg8 .char_char, .bg9 .char_char { color: #333333;}
.char_cursor {display: block;height: 2px;background-color: #fd9a06;width: 100%;opacity: 0.5;margin-top: 5px;}
.word_box:nth-child(4n) .char_cursor {background: #0A6BF9}
.word_box:nth-child(4n+2) .char_cursor {background: #f9120a}
.word_box:nth-child(4n+1) .char_cursor {background: #49b111}
.word_box:nth-child(4n+3) .char_cursor {background: #a24403}
.char_box.active .char_cursor { background: #0A6BF9;opacity: 1}
.char_box.correct .char_char { background: #d6f4f9}
.char_box.correct .char_cursor { opacity: 0}
.char_box.incorrect .char_char { background: pink}
.char_box[fixed].correct .char_char { background: #ffe974}
.level_word_line .sound_box { position: absolute;top: -10px;left: 50%;transform: translate(-50%, -50%);width: 30px;height: 30px;cursor: pointer;text-align: center}
.level_word_line .sound_box:hover { font-weight: bolder;color: #0c7df5}
.level_game { margin-top: 50px;}
.level_game canvas {background-color: rgba(0, 0, 0, 0);}
.level_para_line { display: block;width: 100%;background: #ffffff;border-radius: 4px; box-shadow: inset 0 0 4px rgb(84, 53, 7, 0.2);padding: 3px;padding-bottom: 0px;margin: auto auto;margin-bottom: 10px;}
.level_para_line .words_box { display: block;user-select: none;user-focus: none;}
.level_para_line .words_box .word_box { display: inline-block;padding: 0 !important;margin: 0 !important;box-sizing: content-box}
.level_para_line .words_box .word_label { padding: 0 !important;margin: 0 !important;box-sizing: content-box}
.level_para_line .words_box .word_box .word_label { font-size: 30px;font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;min-width: 3px;}
.level_para_line .input_box { display: block;width: 100% !important;height: 50px;border: 1px solid #ffffff;font-size: 30px;font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;letter-spacing: 0px;margin-bottom: 5px;border-top-color: #ddeedd}
.level_para_line .input_box:disabled {}
.level_para_line .word_cursor { display: block;opacity: 0}
.level_para_line .on .word_cursor {opacity: 0.3;background-color: #205b02;}
.level_para_line .incorrect .word_label {color: #ff5e7c;}
.level_para_line .correct .word_label {color: #0086d2;}
.level_para_lines { width: 98%;margin: 10px auto}
.level_text { display: block;width: 100%;height: 100%;}
/*.level_para_line .on .word_label {border-top: 1px solid #205b02}*/
.notify_para {position: absolute; background-color: #205b02;border-radius: 10px;display: flex;justify-content: center;align-items: center;z-index: 9999;overflow: hidden}
.notify_para span { background: rgba(255, 255, 255, 0.3);box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);border: 1px solid rgba(255, 255, 255, 0.5);backdrop-filter: blur(10px);display: flex;justify-content: center;align-items: center;font-size: 14px;padding: 1px 8px;color: rgba(0, 0, 0, 0.8);color: #ffffff}
#GameDiv {margin: 0 auto;position: relative;margin-top: 20px;background: #0c7df5}
#Cocos3dGameContainer, #GameCanvas {width: 100%;height: 100%;}
#GameCanvas canvas { background-color: transparent;outline: none !important; border: 0;}
.stars_box h2 { font-size: 20px;text-align: center;color: #000000; }
.stars_box .stars_list li { list-style: none; position: relative; flex-grow: 0;margin-bottom: 0;margin-right: 20px;}
@keyframes float-1 {
  50% {
    transform: rotate(-18deg) translateY(75%)
  }
}
@keyframes float-2 {
  50% {
    transform: rotate(-15deg) translateY(20%)
  }
}
@keyframes float-3 {
  50% {
    transform: translateY(-10%)
  }
}
@keyframes float-4 {
  50% {
    transform: rotate(15deg) translateY(20%)
  }
}
@keyframes float-5 {
  50% {
    transform: rotate(18deg) translateY(75%)
  }
}
.container h1 { font-size: 20px;font-weight: normal;padding: 10px;text-align: center}
.stars_box .stars_list li.active {animation: float-1 2.5s ease-in-out infinite;}
.stars_box .stars_list li:nth-child(1) {animation: float-1 2.5s ease-in-out infinite;transform: rotate(-20deg) translateY(75%)}
.stars_box .stars_list li:nth-child(2) {animation: float-2 2.5s ease-in-out infinite;transform: rotate(-18deg) translateY(20%)}
.stars_box .stars_list li:nth-child(3) {animation: float-3 2.5s ease-in-out infinite;transform: translateY(-8%)}
.stars_box .stars_list li:nth-child(4) {animation: float-4 2.5s ease-in-out infinite; transform: rotate(18deg) translateY(20%)}
.stars_box .stars_list li:nth-child(5) {animation: float-5 2.5s ease-in-out infinite;transform: rotate(20deg) translateY(75%)}
.stars_box .stars_list li .star-empty {width: 96%;}
.stars_box .stars_list li .star-image {left: 0;opacity: 0;position: absolute;top: -9%;}
.stars_box .stars_list li.active .star-image {opacity: 1;}
.stars_box .score_list { width: 900px;margin: 5px auto; list-style-type: none;padding: 0;display: flex;flex-direction: row;justify-content: center;margin-top: 50px;}
.stars_box .stars_list li { list-style: none; position: relative; flex-grow: 0;margin: 0;}
.level_navs { position: absolute;overflow-y: scroll;left: 0;top: 40px;bottom: 50px;width: 400px;z-index: 888;background: #ffffff;padding-left: 10px;}
.level_navs *::-webkit-scrollbar { width: 6px; height: 1px;}
.level_navs *::-webkit-scrollbar-thumb { border-radius: 6px;background-color: rgba(135, 136, 136, 0.67);}
.level_navs *::-webkit-scrollbar-track { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);background: #ededed;border-radius: 8px;}
.level_navs ul { display: flex;flex-direction: row;flex-wrap: wrap;padding: 5px;}
.level_navs h3 { font-size: 14px;padding-left: 5px;}
.level_navs ul li { list-style: none; position: relative; flex-grow: 0;margin: 0;width: 25px;height: 25px;margin: 2px;background: #F5F5F5;overflow: hidden;text-align: center;line-height: 20px;cursor: pointer;border-radius: 3px;}
.level_navs ul li a { font-size: 12px;opacity: 0.24; color: #000000;display: block}
.level_navs p { text-align: left;margin: 5px;font-size: 14px;}
.level_navs p a { color: #666; text-decoration: none;background: #ffffff;padding: 3px 10px;border-radius: 4px;}
.level_navs p a:first-child { color: #ffffff;background: #0c7df5;}
.level_navs ul li.passed { background: #55d912;border: 1px solid #55d912;}
.level_navs ul li.passed a { color: #ffffff;opacity: 0.64;}

.level_navs ul li.active { background: #fd9a06;border: 1px solid #d99312;}
.level_navs ul li.active a { color: #ffffff;opacity: 0.64;}
.level_nav.active {background: #ddeedd}
.level_subnav .level_icon_video::before { content: "\e888"; }
.level_subnav .level_icon_game03::before { content: "\e618"; }
.level_subnav .level_icon_game::before { content: "\e618"; }
.level_subnav .level_icon_game01::before { content: "\e618"; }
.level_subnav .level_icon_game02::before { content: "\e618"; }
.level_subnav .level_icon_char::before { content: "\eb0e"; }
.level_subnav .level_icon_sent::before { content: "\e7f4"; }
.level_subnav .level_icon_zhuyin::before { content: "\e644"; }
.level_subnav .level_icon_wordcn::before { content: "\e644"; }
.level_subnav .level_icon_worden::before { content: "\e606"; }
.level_subnav .level_icon_para::before { content: "\e83c"; }
.level_subnav .level_icon_word::before { content: "\e606"; }
.level_subnav .level_icon_plus::before { content: "\e603"; }
.level_subnav .level_icon_keybr::before { content: "\e91a"; }

.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"; }

.failed_box {width: 100%;margin: 80px auto; padding: 20px;position: relative;display: flex;justify-content: center;align-items: center;flex-direction: row }
.failed_box .failed_box_l { width: 200px;}
.failed_box .failed_box_l img { width: 200px;}
.failed_box .failed_box_r { width: 400px; display: flex;flex-direction: column; padding: 30px;text-align: center}
.failed_box .failed_box_r .btn {background-color: #33AFFF;color: #ffffff;padding: 10px 35px;border-radius: 35px;cursor: pointer;font-size: 20px;transition: background-color 0.3s;border: 1px solid #CCCCCC; }
.failed_box .failed_box_r h1 { font-size: 30px;margin-bottom: 20px;}
.failed_box .failed_box_r p { font-size: 18px;}
.failed_box .failed_box_r .mt2 { margin-top: 50px;}
#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;}
.level_wrap { height: 100vh;display: flex;flex-direction: column;}
.reach_box {position: relative;min-height: 160px;width: 90%;margin: 20px auto}
.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;list-style: none;}
.reach_box ul li .strip {width: 100%;height: 8px;position: relative;top: -16px;right: 0;;left: 0;background-color: #ccd2db}
.reach_box li.reach .strip i { display: block;height: 9px; background-color: rgba(0, 255, 100, 0.8)}
.reach_box 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 {text-indent: -20px; color: #99a2aa;text-align: left;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 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: rgba(50, 220, 50, 0.9)}
.reach_box li.reach_at .strip i { display: block;height: 9px; width: 20%; background: green;border-radius: 10px; background: linear-gradient(90deg, rgba(0, 255, 100, 0.8) 0%, rgba(50, 220, 50, 0.9) 50%, rgba(0, 200, 80, 0.8) 100%);box-shadow: 0 0 5px rgba(0, 255, 100, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.3);}
.reach_at .icon::after {content: "";position: absolute;top: -50%;left: -100%;width: 60%;height: 200%;background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);transform: rotate(30deg);animation: lightSweep 3s infinite;z-index: 2;}
@keyframes lightSweep {
  0% { left: -100%; opacity: 0; }
  20% { opacity: 0.8; }
  100% { left: 150%; opacity: 0; }
}
.reach_at .icon img {position: relative;z-index: 1;filter: drop-shadow(0 0 5px rgba(100, 255, 150, 0.6)) brightness(1.1);}
.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 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}
.reward_h { display: block;text-align: right; font-size: 25px;background: url("/static/dazi/images/ban3.gif") center center no-repeat;width: 300px; background-size: 300px auto;}
.reward_h h3 { text-align: center;font-size: 25px;color: #FFFFFF;line-height: 70px;width: 300px;height: 100px;}
.stars_box .failed_box { width: 200px;}
.reward_list {display: flex;flex-direction: column;justify-content: space-between;list-style: none;margin: 5px;margin-top: 20px;margin-bottom: 30px;}
.reward_list li {position: relative;list-style: none;width: 300px;margin: 10px;}
.reward_list li img {width: 100%;height: auto;}
.reward_list li span {position: absolute;}
.reward_list li .reward_tit {top: 9px;left: 65px;}
.reward_list li .reward_txt {top: 30px;left: 178px;}
.reward_list li .reward_score {top: 17px;left: 243px;color: #FFFFFF;width: 45px;text-align: center;}
.reward_list li .reward_progress {display: block;overflow: hidden;width: 107px;height: 7px;top: 37px;left: 66px;}
.reward_list li .reward_progress i { display: block; width: 1%; height: 9px;background: green;border-radius: 10px; background: linear-gradient(90deg, rgba(0, 255, 100, 0.8) 0%, rgba(50, 220, 50, 0.9) 50%, rgba(0, 200, 80, 0.8) 100%);box-shadow: 0 0 5px rgba(0, 255, 100, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.3);}
.reward_list li .reward_progress i::after {content: '';position: absolute;top: 0;left: -100%;width: 50%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation: shimmer 2s infinite;}
.reward_list li .reward_progress i:before {content: '';position: absolute;top: 0;left: -100%;width: 50%;height: 100%;background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));animation: crystalShine 3s infinite linear;}

@keyframes crystalShine {
  100% {left: 150%;}
}
.stars_box {width: 100%;margin: 10px auto; padding: 10px;position: relative; background: #FFF; flex: 1;display: flex;flex-direction: column;justify-content: space-around}
.stars_box .stars_list { width: 450px;margin: 5px 70px; list-style-type: none;padding: 0;align-items: baseline;display: flex;flex-direction: row;justify-content: space-between}
.stars_row { display: flex;flex-direction: row; justify-content: center; align-items: center;}
.stars_col { display: flex;flex-direction: column; align-items: center;justify-content: center; }
.star_emoj { margin-top: 60px;}
.live2dBox { opacity: 0; display: block;width: 306px; position: fixed;overflow: hidden;left: 0px;bottom: 20px;height: 177px;overflow: hidden !important; box-sizing: border-box}
.live2dBox > img { display: block; height: auto;width: 306px;position: absolute; left: 0px; top: 0; }
.live2dBox canvas { position: absolute; top: 0px; left: 0px; margin: auto; }
.live2dBox .live2dBoxKeymaps { position: absolute; top: 0px; left: 0px; margin: auto;width: 306px; height: 177px; overflow: hidden}
.live2dBox .live2dBoxKeymaps img { display: inline-block;width: 306px;height: 177px; position: absolute;top: 0px;left: 0px;opacity: 0;z-index: 999;}
.live2dBox .live2dBoxKeymaps img.active { opacity: 1 }
.live2dBox .live2dButtons { position: absolute;right: 2px;top: 2px;display: flex;flex-direction: column;}
.live2dBox .live2dButtons span {padding: 3px;background: #dddddd;border-radius: 4px;opacity: 0.1;margin: 3px;cursor: pointer !important;}
.live2dBox:hover .live2dButtons span {opacity: 0.8;z-index: 1999;}
.need_box { display: flex;flex-direction: row;justify-content: space-between;align-items: center;width: 300px;margin: 5px auto}
.need_box .need_item { display: flex;flex-direction: column; align-items: center;text-align: center; width: 120px;}
.need_box .need_item img { max-width: 100%; height: 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;}
/*横屏幕兼容*/
.level_heng {
  #full_screen_overlay { display: none!important;}
}
/*小屏幕兼容*/
.level_mobile, .level_heng  {
  #full_screen_overlay { display: flex}

  #full_screen_overlay p {
    text-align: center;
  }

  .container { width: 100vw !important; max-width: 100vw;}

  .level_nav { width: 96vw !important; }

  .level_body { min-width: auto;width: 100%;overflow: hidden}

  .level_lines { margin-top: 5px !important;}

  .keyboard-plugin { margin-top: 5px !important;}

  .level_process { right: 10px;bottom: 20px;height: 60px; width: auto;background: none;left: auto;opacity: 0.7;border-top: none;box-shadow: none}

  .level_process_content { flex-direction: column;width: auto}

  .level_process_content .progress { display: none; }

  .level_process_content button { margin: 3px;}

  .level_page { margin-bottom: 4px;}

  .level_word_lines { height: auto;min-height: 30px}
  .level_word_lines  .char_char {font-size: 30px;}
  .level_word_lines  .word_label {font-size: 30px;}

  .level_char_lines .char_box { width: 60px;}

  .level_char_lines .char_char {width: 50px;height: 50px;line-height: 50px;font-size: 25px;}

  .level_char_lines .level_char_line { margin: 1px auto;}

  .level_char_lines .char_icon { font-size: 20px !important;height: 20px;width: 20px;}

  .level_sent_line .char_char { font-size: 25px;}

  .level_body .level_box { }

  .level_sent_line .char_cursor { margin-top: 1px;}

  .level_zhuyin_lines { height: 155px;margin:1px auto;padding: 2px;}

  .char_char { font-size: 20px;}

  .level_sent_line .char_box { min-width: 16px;width: auto;margin-bottom: 3px;}

  .level_sent_line .char_cursor { min-width: 16px;width: auto}

  .word_label { font-size: 20px; overflow: hidden;white-space: nowrap; text-overflow: ellipsis; max-width: 400px; margin-left: 20px; }

  .level_nav nav ul.bg-themes li { width: 70px;}

  .level_nav nav ul.bg-themes.bg-pets li { width: 48px;height: 60px;align-items: center;margin: 3px;border: 1px solid #ddd;}

  .level_nav nav ul.bg-themes.bg-pets li i { font-size: 8px; margin-top: -10px;}

  .level_nav nav ul.bg-themes.bg-pets li img { width: 40px;height: 40px;}

  .level_nav nav ul.keyboard-themes { flex-direction: row;flex-wrap: wrap;margin-top: 8px;}

  .level_nav nav ul.keyboard-themes li img { width: 100px;height: auto;}

  #bt_kefu_options img { width: 200px !important;}

  .level_video { margin-top: 3px;}

  .video-js { background: none}

  .step-content { height: auto}

  .step-content .intro-text { margin-top: 20px;}

  .level_header { width: 100vw;}

  .stars_box .stars_list { width: 320px}

  .stars_box { margin: 2px;padding: 0px;}

  .reward_list { margin-top: 10px;margin-bottom: 5px;}

  .reward_list li { margin: 1px}

  .stars_box .stars_list { width: 280px;margin: 5px;}

  .star_emoj {margin-top: 8px;}

  .reward_h { width: 200px;background-size: 200px auto;}

  .reward_h h3 {text-align: center;font-size: 18px;color: #FFFFFF;line-height: 30px;width: 200px;height: 50px;}

  .reach_box ul li p.title { font-size: 10px;}

  .reach_box { margin: 2px auto;width: 80vw}

  .reach_box ul li .icon { width: 40px;height: 40px;}

  .reach_box ul li p.reach-tips { bottom: -2px;}

  .reach_box li.reach_at .strip i { height: 5px;}

  .reach_box ul li .strip { height: 5px;}

  .reach_box li.reach:after { font-size: 12px;bottom: -10px;}

  .live2dBox > img { display: block; height: auto;width: 153px;position: absolute; left: 0px; top: 0; }

  .live2dBox .live2dBoxKeymaps { position: absolute; top: 0px; left: 0px; margin: auto;width: 153px; height: 88px; overflow: hidden}

  .live2dBox .live2dBoxKeymaps img { display: inline-block;width: 153px;height: 88px; position: absolute;top: 0px;left: 0px;opacity: 0;z-index: 999;}
  .level_game { margin-top: 0px;}
  .level_worden_lines.level_word_lines { min-height: 80px}
  .level_word_line { align-items: center }
  .level_word_line > div { padding-left: 10px;}
  .level_word_line .word_box { flex-direction: row}
  .level_word_line .sound_box {  position: relative;top: auto;left: auto;margin-top: 30px;}

}