@charset "utf-8";

#header {
  background-color: #d3f0c2;
  box-shadow: 0px 15px 100px 0px rgba(178, 208, 66, 0.32);
}
#headerInfo .mode {
  background-image: url(../img/header_mode.png);
}
#headerInfo .mode::before {
  content: '확인';
}

#headerBtns .btn_test {
  background-color: #a5c335;
  box-shadow: 0px 4px 0px 0px rgb(145, 169, 54), inset 0px -3px 7px 0px rgba(145, 169, 54, 0.5);
}
#headerBtns .btns {
  background-image: url(../img/header_btn_bg4.png) !important;
}
[data-env='server'].student #headerBtns .btns {
  background-image: url(../img/header_btn_bg2.png);
}
#btnModeChange {
  background-color: #a7c936;
}
#loading .ld_bar {
  background: linear-gradient(to right, #9ad033, #40b218);
}
#loading .ld_bar .pen {
  background-image: url(../img/ic_pencil.png);
}
#loading .ld_txt > strong::before {
  background: #6dc125;
}
#lsList .box {
  border-color: rgba(155, 209, 52, 0.35);
  background-color: #f7fbef;
}
#lsList .box:hover {
  border-color: #9bd134;
}

#lsList .box .ls_num {
  background-image: url(../img/ls_list_mark.png);
}
#lsList .box .thumb::before {
  background: linear-gradient(to right, rgba(247, 251, 239, 0), rgba(247, 251, 239, 1));
}
#lsList .box .btn_vocab {
  background-color: #2ac007;
  box-shadow: 0px 6px 0px 0px rgba(105, 141, 6), inset 0px 3px 7px 0px rgba(105, 141, 6, 0.5);
}
#lsList .box .btn_vocab:active,
#lsList .box .btn_vocab:focus {
  background-color: #2b8525;
  box-shadow: 0px 6px 0px 0px rgba(85, 115, 5, 1), inset 0px 3px 7px 0px rgba(85, 115, 5, 0.5);
}
#cateList {
  background: #dcfeda;
}
#cateList .btns {
  background-color: rgba(129, 173, 8, 0.4);
  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px 1px 0px 0px rgba(129, 173, 8, 0.15), inset 0px 2px 5px 0px rgba(129, 173, 8, 0.15);
  /* background-image: url(../img/header_btn_bg3.png); */
}

#cateList .cate_wrap {
  background-color: rgba(129, 173, 8, 0.15);
  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px 1px 0px 0px rgba(129, 173, 8, 0.15), inset 0px 2px 5px 0px rgba(129, 173, 8, 0.15);
  padding: 95px 50px 62px;
}

#cateList .mode_title {
  background: url(../img/mode_title.png) no-repeat center / 100%;
}
#cateList .cate_card {
  width: 260px;
}
#cateList .cate_card.on {
  background-color: rgba(69, 93, 4, 0.95);
  box-shadow: 0px 4px 0px 0px rgba(56, 76, 3, 1), 0 10px 30px rgba(69, 93, 4, 0.55), inset 0px 3px 7px 0px rgba(56, 76, 3, 0.5);
}
#cateList .cate_card + .cate_card {
  margin-left: 20px;
}
#cateList .cate_card.on > p > span {
  color: #49610a;
}
#cateList .btn_study {
  background-color: #10783e;
  box-shadow: 0px 8px 0px 0px rgba(32, 43, 2, 1), inset 0px 3px 7px 0px rgba(32, 43, 2, 0.5);
}
#cateList .btn_study:focus,
#cateList .btn_study:active {
  box-shadow: 0px -8px 0px 0px rgba(150, 175, 60, 1), inset 3px 7px 0px 0px rgba(32, 43, 2, 1);
}
[check-mode='word-mean'] #headerInfo > h1::after {
  content: '어휘 보고 뜻 고르기';
}
[check-mode='mean-word'] #headerInfo > h1::after {
  content: '뜻 보고 어휘 고르기';
}
[check-mode='word-done'] #headerInfo > h1::after {
  content: '어휘 완성하기';
}
[check-mode='sentence-done'] #headerInfo > h1::after {
  content: '문장 완성하기';
}

[check-mode='word-mean'] #checkWord .game_title::after {
  content: '다음 어휘의 알맞은 우리말 뜻을 골라 보세요.';
}
[check-mode='mean-word'] #checkWord .game_title::after {
  content: '다음 우리말 뜻에 알맞은 어휘를 골라 보세요.';
}
[check-mode='word-done'] #checkWord .game_title::after {
  content: '알맞은 알파벳을 골라 어휘를 완성해 보세요.';
}
[check-mode='sentence-done'] #checkWord .game_title::after {
  content: '알맞은 어휘를 골라 문장을 완성해 보세요. ';
}
.page {
  background-color: #c9edb5;
}
.page.result {
  background: url(../img/result.png) no-repeat center / 100%;
}
.game_ct .btn_next {
  background: url(../img/page_next.png) no-repeat center / 100%;
}
.game_ct .btn_next.on {
  background-image: url(../img/page_next_on.png);
}
.game_bt .page_info * {
  color: #8bab24;
}
.page.result #btnFull {
  background-color: rgba(202, 225, 95, 0.2);
  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px 1px 0px 0px rgba(129, 173, 9, 0.15), inset 0px 2px 5px 0px rgba(129, 173, 9, 0.15);
}
#checkWord .game_card {
  box-shadow: 0px 20px 60px 0px rgba(129, 173, 8, 0.15);
  background: url(../img/check_word_bg.png) no-repeat center / 100%;
}
#checkWord .question {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#checkWord .question .mean {
  font-size: 50px;
  color: rgb(100, 100, 100);
  font-weight: 700;
  line-height: 2.12;
}
#checkWord .question .mean.sm {
  font-size: 45px;
  line-height: 1.333;
}
[check-mode='word-mean'] #checkWord .question .mean,
[check-mode='mean-word'] #checkWord .question .mean,
[check-mode='image-word'] #checkWord .question .mean {
  display: none;
}
#checkWord .question .que {
  font-size: 74px;
  color: rgb(0, 0, 0);
  font-weight: 700;
  line-height: 1.581;
}
#checkWord .question .que.sm {
  font-size: 60px;
  line-height: 1.4;
}
[check-mode='word-mean'] #checkWord .question .que {
  font-size: 94px;
}
#checkWord .question .blank {
  position: relative;
  top: 20px;
  display: inline-block;
  border: 4px solid rgb(216, 216, 216);
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  width: 112px;
  height: 112px;
  margin: 0 16px;
}
[check-mode='sentence-done'] #checkWord .question .blank {
  width: 323px;
  top: 30px;
}
#checkWord .question .que.sm .blank {
  width: 300px;
  height: 90px;
  margin-top: -20px;
}
#checkWord .answer_btns {
  width: 100%;
  height: 248px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#checkWord .answer_btns > button {
  position: relative;
  background-color: rgb(39, 146, 255);
  box-shadow: 0px 8px 0px 0px rgba(32, 119, 209, 1), inset 0px 3px 7px 0px rgba(32, 119, 209, 0.5);
  width: 470px;
  min-height: 140px;
  border-radius: 70px;
  font-size: 48px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-shadow: 0px 1px 5px rgba(65, 65, 70, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
  padding: 0 50px;
}
#checkWord .answer_btns > button.sm {
  font-size: 40px;
}
#checkWord .answer_btns > button + button {
  margin-left: 55px;
}
#checkWord .answer_btns > button.select {
  background-color: rgb(55, 86, 239);
  box-shadow: 0px 8px 0px 0px rgba(45, 70, 196, 1), inset 0px -3px 7px 0px rgba(45, 70, 196, 0.5);
}
#checkWord .answer_btns > button::before {
  content: '';
  position: absolute;
  top: -36px;
  left: 6px;
  width: 111px;
  height: 88px;
  background: url(../../../common/img/icon_answer.png) no-repeat center / 100%;
  display: none;
}
#checkWord .answer_btns > button.select::before {
  display: block;
}

/* 초등 영어 신규 기능 추가 */
#cateList .cate_card > p > span {
  background: #08a810;
}
#cateList .btn_study.off::after {
  background-color: #c1db54;
}
.game_title::before {
  background: url(../../../common/img/icon_bullet2.png) no-repeat center / 100%;
}
.game_bt .btn_pass {
  background-color: #10934d;
}
[check-mode='image-word'] #headerInfo > h1::after {
  content: '그림 보고 어휘 고르기';
}
[check-mode='image-word'] #checkWord .game_title::after {
  content: '다음 그림에 알맞은 어휘를 골라 보세요.';
}
/* 문장 완성하기 예문 번역 구문 처리*/
[check-mode='sentence-done'] #checkWord .question .mean.longSen * {
  font-weight: inherit;
}