@charset "utf-8";
@import url(./reset.css);
@import url(./font.css);
@import url(./ui.common.css);

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
#classStyudyContent {
  background: #fff;
}
/* 공통 */
* {
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
  touch-action: pan-y;
}
/* 전체 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 8px; /* 스크롤바 너비 */
}
/* 스크롤바의 트랙 (배경) */
::-webkit-scrollbar-track {
  background: transparent;
}
/* 스크롤바의 핸들 (스크롤할 수 있는 부분) */
::-webkit-scrollbar-thumb {
  background: rgba(65, 65, 70, 0.35);
  border-radius: 4px;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  font-weight: 700;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

#wrap {
  position: absolute;
  width: 1920px;
  height: 1080px;
  padding: 0px 0px 0px;
  font-size: 65px;
  font-weight: inherit;
  color: #000;
  text-align: center;
  background: #fff;
  opacity: 0;
}
#wrap.on {
  opacity: 1;
  transition: opacity 0.5s linear;
}

#container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(100%);
  text-align: center;
  overflow: hidden;
  background-color: #fff;
}

#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #bad8ff;
  box-shadow: 0px 15px 100px 0px rgba(94, 157, 237, 0.25);
  z-index: 20;
}

#header .inner {
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
}
#headerInfo {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 0;
}

#headerInfo .mode {
  width: 120px;
  height: 164px;
  background: url(../img/header_mode.png) no-repeat center / 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  font-family: 'Jalnan';
  font-size: 26px;
  color: rgb(255, 255, 255);
  line-height: 1.188;
  text-shadow: 0px 0px 2.6px rgba(65, 65, 70, 0.2);
  padding-top: 38px;
  margin-right: 35px;
  cursor: pointer;
}
#wrap.student #headerInfo .mode {
  padding-top: 52px;
  pointer-events: none;
}
#headerInfo .mode::before {
  content: '학습';
}
#headerInfo .mode > em {
  font-family: 'Jalnan';
  font-size: 26px;
  color: rgb(255, 255, 255);
  margin-top: 2px;
}
#wrap.student #headerInfo .mode > em {
  display: none;
}
#headerInfo > h1 {
  font-family: 'SBAggroM';
  font-size: 38px;
  color: rgb(65, 65, 70);
}
[data-mode='learning'] #headerInfo > h1 {
  display: none;
}
#headerInfo .ls_lists {
  position: relative;
  flex-direction: column;
  align-items: center;
  display: none;
}
[data-mode='learning'] #headerInfo .ls_lists {
  display: flex;
}
#headerInfo .ls_lists .select {
  position: relative;
  width: 700px;
  height: 70px;
  background-color: rgb(238, 245, 253);
  border: 2px solid transparent;
  border-radius: 35px;
  font-family: 'SBAggroM';
  font-weight: 500;
  font-style: normal;
  font-size: 27px;
  color: #393d4d;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 34px;
  cursor: pointer;
}
[data-env='server'].student #headerInfo .ls_lists .select {
  pointer-events: none;
}
#headerInfo .ls_lists.on .select {
  border: 2px solid #4292f6;
}
#headerInfo .ls_lists .select::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 26px;
  height: 15px;
  background: url(../img/ic_arrow_down.png) no-repeat center / 100%;
}
[data-env='server'].student #headerInfo .ls_lists .select::before {
  display: none;
}

#headerInfo .ls_lists > ul {
  position: absolute;
  top: 78px;
  width: 100%;
  max-height: 350px;
  background: #ffffff;
  border-radius: 35px;
  border: 2px solid #ffffff;
  overflow: auto;
  box-shadow: 0px 10px 30px 0px rgba(18, 108, 220, 0.12);
  display: none;
}
[data-env='server'].student #headerInfo .ls_lists > ul {
  display: none;
}
#headerInfo .ls_lists.on > ul {
  display: block;
}

#headerInfo .ls_lists > ul > ol {
  width: 100%;
  height: 70px;
}
#headerInfo .ls_lists > ul > ol > a {
  width: 100%;
  height: 100%;
  font-family: 'SBAggroM';
  font-weight: 500;
  font-style: normal;
  font-size: 27px;
  color: #393d4d;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 34px;
}
#headerInfo .ls_lists > ul > ol > a:hover {
  background: rgba(66, 146, 246, 0.12);
  color: #126cdc;
}
#headerBtns {
  display: flex;
  align-items: center;
}
#headerBtns .user_name {
  white-space: nowrap;
  font-size: 30px;
  color: #000000;
  line-height: 1.933;
  text-align: right;
  margin-right: 17px;
  display: none;
}
#headerBtns .user_name > strong {
  font-weight: 700;
}
[data-env='server'].student #headerBtns .user_name {
  display: block;
}

#headerBtns .btn_test {
  background-color: rgb(94, 157, 237);
  box-shadow: 0px 4px 0px 0px rgb(76, 128, 194), inset 0px -3px 7px 0px rgba(76, 128, 194, 0.5);
  width: 290px;
  height: 66px;
  border-radius: 33px;
  font-family: 'Jalnan';
  font-size: 24px;
  color: rgb(255, 255, 255);
  line-height: 2.917;
  margin: 0 25px;
  display: none;
}
[data-env='server'] #headerBtns .btn_test {
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-env='server'].student #headerBtns .btn_test {
  display: none;
}

#headerBtns .btns {
  display: flex;
  align-items: center;
  width: 262px;
  height: 70px;
  background: url(../img/header_btn_bg4.png) no-repeat center / 100%;
}
#headerBtns .btns > button {
  position: relative;
}
#headerBtns .btns > button::before {
  content: '나가기';
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Noto Sans CJK KR';
  font-weight: 500;
  font-size: 23px;
  color: rgb(65, 65, 70);
  padding: 2px 12px 4px;
  border-radius: 10px;
  background: #fbfabb;
  display: none;
  align-items: center;
  justify-content: center;
  text-indent: 0px;
  white-space: nowrap;
}
#headerBtns .btns > button.btn_sound::before {
  content: '효과음';
}
#headerBtns .btns > button.btn_set::before {
  content: '설정';
}
#headerBtns .btns > button.btn_full::before {
  content: '전체화면';
}
#headerBtns .btns > button::after {
  content: '';
  position: absolute;
  top: calc(80px - 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 8px 7px 8px;
  border-color: transparent transparent #fbfabb transparent;
  display: none;
}
#headerBtns .btns > button:hover::before,
#headerBtns .btns > button:hover::after {
  display: inline-flex;
}

[data-env='server'] #headerBtns .btns {
  width: 262px;
  background: url(../img/header_btn_bg4.png) no-repeat center / 100%;
}
[data-env='server'].student #headerBtns .btns {
  width: 134px;
  background: url(../img/header_btn_bg3.png) no-repeat center / 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#headerBtns .btns > .btn {
  width: calc(100% / 4);
  height: 70px;
  border-radius: 100%;
}
[data-env='server'] #headerBtns .btns > .btn {
  width: calc(100% / 3);
}
[data-env='server'].student #headerBtns .btns > .btn {
  width: 70px;
}
#headerBtns .btn_sound {
  background: url(../img/btn_sound_on.png) no-repeat center / 38px 38px;
}
#headerBtns .btn_sound.off {
  background: url(../img/btn_sound_off.png) no-repeat center / 38px 38px;
}

#headerBtns .btn_set {
  background: url(../img/btn_setting.png) no-repeat center / 34px 39px;
}

#headerBtns .btn_exit {
  background: url(../img/btn_exit.png) no-repeat 11px center / 34px 35px;
}
[data-env='server'].student #headerBtns .btn_set,
[data-env='server'].student #headerBtns .btn_exit {
  display: none;
}
#headerBtns .btn_full {
  background: url(../img/btn_full.png) no-repeat center / 31px 31px;
}
[data-env='server'] #headerBtns .btn_full {
  /* display: none; */
}
.page {
  position: absolute;
  top: 130px;
  left: 0;
  width: 100%;
  height: calc(100% - 130px);
  background: #fff;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
.page.full {
  top: 0;
  height: 100%;
}
.page.on {
  opacity: 1;
  z-index: 1;
  pointer-events: all;
}
/* 메인 */
#ctMain {
  background: url(../img/main_bg.png) no-repeat 0px 0px / 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
}

.main_title {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.main_title .lesson_title {
  min-width: 314px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #414146;
  border-radius: 31px;
  padding: 0 32px;
  font-family: 'SBAggroM';
  font-size: 32px;
  color: rgb(65, 65, 70);
  line-height: 1.2;
  margin-bottom: 18px;
  padding-top: 6px;
}
#ctMain .main_title > h1 {
  width: 530px;
  height: 146px;
  background: url(../img/main_title.png) no-repeat center / 100%;
}
#ctMain .main_list {
  display: flex;
  align-items: center;
}
#ctMain .main_list > li {
  position: relative;
  width: 612px;
  height: 796px;
  background: url(../img/main_mode1.png) no-repeat center / 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#ctMain .main_list > li:nth-child(2) {
  background-image: url(../img/main_mode2.png);
}
#ctMain .main_list > li:nth-child(3) {
  background-image: url(../img/main_mode3.png);
}

#ctMain .main_list > li.on:nth-child(1) {
  background-image: url(../img/main_mode1_on.png);
}
#ctMain .main_list > li.on:nth-child(2) {
  background-image: url(../img/main_mode2_on.png);
}
#ctMain .main_list > li.on:nth-child(3) {
  background-image: url(../img/main_mode3_on.png);
}
#ctMain .main_list > li .link {
  position: absolute;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  width: 522px;
  height: 666px;
  border-radius: 230px 230px 80px 80px;
}
#ctMain .main_list .mode {
  width: 140px;
  height: 170px;
  font-family: 'Jalnan';
  font-size: 42px;
  color: rgb(255, 255, 255);
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0px 0px 2.6px rgba(65, 65, 70, 0.2);
  margin: 46px auto 305px;
}

#ctMain .main_list .desc {
  width: 490px;
  height: 180px;
  font-size: 34px;
  color: rgb(255, 255, 255);
  line-height: 1.412;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 24px;
}

#ctMain .main_list .btn_start {
  position: relative;
  width: 240px;
  height: 72px;
  font-family: 'Jalnan';
  font-size: 27px;
  color: rgb(255, 255, 255);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a3d7e;
  box-shadow: 0px 6px 0px 0px rgba(8, 50, 103, 1), inset 0px 3px 7px 0px rgba(8, 50, 103, 0.5);
  border-radius: 36px;
  margin-top: -28px;
}
#ctMain .main_list > li:nth-child(2) .btn_start {
  background: #455d04;
  box-shadow: 0px 6px 0px 0px rgba(56, 76, 3, 1), inset 0px 3px 7px 0px rgba(56, 76, 3, 0.5);
}
#ctMain .main_list > li:nth-child(3) .btn_start {
  background: #854e00;
  box-shadow: 0px 6px 0px 0px rgba(108, 63, 0, 1), inset 0px 3px 7px 0px rgba(108, 63, 0, 0.5);
}
#ctMain .main_list li.on .btn_start {
  top: 6px;
  background: #083267;
  box-shadow: inset 3.441px 4.915px 0px 0px rgba(6, 41, 84, 1), inset 0px 3px 7px 0px rgba(6, 41, 84, 0.5);
}
#ctMain .main_list > li.on:nth-child(2) .btn_start {
  background: #384c03;
  box-shadow: inset 3.441px 4.915px 0px 0px rgba(45, 62, 2, 0.004), inset 0px 3px 7px 0px rgba(45, 62, 2, 0.5);
}
#ctMain .main_list > li.on:nth-child(3) .btn_start {
  background: #6c3f00;
  box-shadow: inset 3.441px 4.915px 0px 0px rgba(88, 51, 0, 0.004), inset 0px 3px 7px 0px rgba(88, 51, 0, 0.5);
}
#ctMain .main_list .btn_start::after {
  content: '';
  width: 16px;
  height: 29px;
  background: url(../img/ic_arrow_right.png) no-repeat center / 100%;
  margin-left: 20px;
}

/* 로딩 */
#loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ebe8ed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  z-index: 1;
}
#loading .ld_track {
  position: relative;
  width: 100%;
  height: 22px;
  background: rgba(65, 65, 70, 0.1);
  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.5), inset 0px 1px 0px 0px rgba(0, 18, 42, 0.05), inset 0px 2px 5px 0px rgba(0, 18, 42, 0.05);
}

#loading .ld_bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 20px;
  background: linear-gradient(to right, #25b1fc, #0072ff);
}

#loading .ld_bar.load {
  animation: load-ani 5s forwards;
}

@keyframes load-ani {
  0% {
    width: 0%;
  }
  95% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
#loading .ld_bar .pen {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 141px;
  height: 162px;
  background: url(../../common/img/ic_pencil.png) no-repeat center / 100%;
}

#loading .ld_txt {
  margin-top: 50px;
  font-family: 'SBAggroM';
  font-size: 52px;
  color: rgb(65, 65, 70);
  line-height: 1.2;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
#loading .ld_txt > strong {
  position: relative;
  top: -5px;
  font-family: 'Jalnan';
  font-size: 50px;
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0px 0px 2.6px rgba(65, 65, 70, 0.2);
  margin-right: 20px;
  z-index: 1;
}

#loading .ld_txt > strong::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(6deg);
  width: 238px;
  height: 76px;
  background: #1291fe;
  z-index: -1;
}

/* 단원 선택 */
.ls_list {
  width: 100%;
  height: 100%;
  background: #f0edf1;
  padding-top: 50px;
  display: flex;
  flex-direction: column;
}
.ls_list::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  width: 100%;
  height: 120px;
  pointer-events: none;
  z-index: 1;
}
.ls_list .btns {
  position: absolute;
  top: 30px;
  right: 60px;
  width: 134px;
  height: 72px;
  background: url(../img/header_btn_bg.png) no-repeat center / 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls_list .main_title .lesson_title {
  margin-bottom: 25px;
}
.ls_list .main_title > h2 {
  font-family: 'Jalnan';
  font-size: 50px;
  color: rgb(65, 65, 70);
  line-height: 1.3;
  text-align: center;
}

#lsList {
  width: 1856px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 14px 48px 100px;
  margin: 0 auto;
  margin-top: calc(70px - 14px);
  overflow: auto;
}
#lsList .box {
  position: relative;
  width: 860px;
  height: 300px;
  border: 4px solid rgba(37, 177, 252, 0.25);
  border-radius: 60px;
  background-color: #eef9ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#lsList .box:hover {
  border-color: #25b1fc;
}

#lsList .box:nth-child(n + 3) {
  margin-top: 40px;
}
#lsList .box .ls_num {
  position: absolute;
  top: -14px;
  left: 10px;
  font-family: 'Jalnan';
  font-size: 28px;
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 2.6px rgba(65, 65, 70, 0.2);
  width: 100px;
  height: 58px;
  background: url(../../common/img/ls_list_mark.png) no-repeat center / 100%;
  padding: 12px 22px 0 0;
  z-index: 1;
}

#lsList .box .thumb {
  position: relative;
  width: 438px;
  height: 100%;
  border-top-left-radius: 55px;
  border-bottom-left-radius: 55px;
  overflow: hidden;
}
#lsList .box .thumb::before {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  width: 100px;
  height: 100%;
  background: linear-gradient(to right, rgba(238, 249, 255, 0), rgba(238, 249, 255, 1));
}
#lsList .box .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#lsList .box .ls_title {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 35px 44px;
}
#lsList .box .ls_title > span {
  font-size: 34px;
  font-family: 'SBAggroL';
  color: rgb(65, 65, 70);
  line-height: 1.294;
  text-align: left;
  flex: 1;
}

#lsList .box .btn_vocab {
  background-color: rgb(18, 108, 220);
  box-shadow: 0px 6px 0px 0px rgba(15, 88, 180, 1), inset 0px 3px 7px 0px rgba(15, 88, 180, 0.5);
  width: 190px;
  height: 64px;
  border-radius: 32px;
  font-family: 'Jalnan';
  font-size: 25px;
  color: rgb(255, 255, 255);
  line-height: 1.24;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-mode='learning'] #lsList .box .btn_vocab {
  width: 240px;
}

#lsList .box .btn_vocab:active,
#lsList .box .btn_vocab:focus {
  background-color: #0f58b4;
  box-shadow: 0px 6px 0px 0px rgba(12, 71, 147, 1), inset 0px 3px 7px 0px rgba(12, 71, 147, 0.5);
}

/* 카테고리 선택 */
#cateList {
  width: 100%;
  height: 100%;
  background: #7cb5ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 192px;
}

#cateList .btns {
  position: absolute;
  top: 30px;
  right: 60px;
  width: 134px;
  height: 70px;
  background: url(../img/header_btn_bg3.png) no-repeat center / 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cateList .btns > button {
  position: relative;
  top: 0;
  left: 0;
  text-indent: -9999px;
  width: calc(100% / 2);
  background-color: transparent;
  box-shadow: none;
}

#cateList .btns > button::before {
  content: '나가기';
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Noto Sans CJK KR';
  font-weight: 500;
  font-size: 23px;
  color: rgb(65, 65, 70);
  padding: 2px 12px 4px;
  border-radius: 10px;
  background: #fbfabb;
  display: none;
  align-items: center;
  justify-content: center;
  text-indent: 0px;
  white-space: nowrap;
}

#cateList .btns > button::after {
  content: '';
  position: absolute;
  top: calc(80px - 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 8px 7px 8px;
  border-color: transparent transparent #fbfabb transparent;
  display: none;
}
#cateList .btns > button:hover::before,
#cateList .btns > button:hover::after {
  display: inline-flex;
}
#cateList .cate_wrap {
  position: relative;
  border-radius: 100px;
  background-color: rgba(18, 108, 220, 0.1);
  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px 1px 0px 0px rgba(18, 108, 220, 0.15), inset 0px 2px 5px 0px rgba(18, 108, 220, 0.15);
  padding: 95px 150px 62px;
}
#cateList .mode_title {
  position: absolute;
  top: -72px;
  left: 50%;
  transform: translateX(-50%);
  width: 970px;
  height: 119px;
  background: url(../../common/img/mode_title.png) no-repeat center / 100%;
  font-family: 'Jalnan';
  font-size: 50px;
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 4.5px rgba(1, 65, 147, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}
#cateList .cate_wrap > ul {
  display: flex;
  align-items: center;
}

#cateList .cate_wrap > ul {
  display: flex;
  align-items: center;
}
#cateList .cate_card {
  width: 400px;
  height: 558px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 4px 0px 0px rgba(206, 224, 247, 0.004), inset 0px 3px 7px 0px rgba(206, 224, 247, 0.5);
  border-radius: 60px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 56px;
  cursor: pointer;
}

#cateList .cate_card.on {
  background-color: rgba(10, 61, 126, 0.95);
  box-shadow: 0px 4px 0px 0px rgba(16, 55, 104, 1), 0 10px 30px rgba(10, 61, 126, 0.55), inset 0px 3px 7px 0px rgba(16, 55, 104, 0.5);
}

#cateList .cate_card + .cate_card {
  margin-left: 90px;
}

#cateList .cate_card .icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#cateList .cate_card > p {
  font-family: 'SBAggroM';
  font-size: 36px;
  color: rgb(65, 65, 70);
  text-align: center;
}
#cateList .cate_card.on > p {
  color: #fff;
}
#cateList .cate_card > p > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  background: #414146;
  border-radius: 27px;
  padding: 0 23px;
  font-family: 'SBAggroM';
  font-size: 32px;
  color: rgb(255, 255, 255);
  margin-bottom: 15px;
}
#cateList .cate_card.on > p > span {
  background: #fff;
  color: #104281;
}

#cateList .btn_study {
  width: 300px;
  height: 85px;
  background-color: rgb(6, 38, 80);
  box-shadow: 0px 8px 0px 0px rgba(4, 26, 56, 1), inset 0px 3px 7px 0px rgba(4, 26, 56, 0.5);
  margin-top: 35px;
  font-family: 'Jalnan';
  font-size: 38px;
  color: rgb(255, 255, 255);
  text-shadow: 0px 1px 5px rgba(65, 65, 70, 0.35);
  border-radius: 42px;
}
#cateList .btn_study.off {
  pointer-events: none;
  opacity: 0.5;
}

#cateList .btn_study:focus,
#cateList .btn_study:active {
  margin-top: 43px;
  box-shadow: 0px -8px 0px 0px rgba(87, 140, 209, 1), inset 3px 7px 0px 0px rgba(4, 26, 56, 1);
}

.game_inner {
  position: relative;
  padding: 65px 120px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.game_title {
  position: relative;
  font-weight: 500;
  font-size: 45px;
  color: rgb(0, 0, 0);
  line-height: 1.289;
  text-align: left;
  padding-left: 55px;
  letter-spacing: -0.02em;
}
.game_title::before {
  content: '';
  width: 18px;
  height: 25px;
  position: absolute;
  top: 17px;
  left: 20px;
  background: url(../img/icon_bullet.png) no-repeat center / 100%;
}
.game_top {
  position: relative;
  padding-right: 0;
  width: 100%;
}
.guage_area {
  position: absolute;
  top: 12px;
  right: 0;
  background-color: rgba(255, 206, 89, 0.8);
  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px 1px 0px 0px rgba(246, 145, 0, 0.15), inset 0px 2px 5px 0px rgba(246, 145, 0, 0.15);
  width: 317px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 22px;
  padding-left: 9px;
  padding-right: 17px;
}

.guage_area .guage_wrap {
  position: relative;
  width: 200px;
  height: 26px;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 13px;
}

.guage_area .guage_wrap .guage {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 26px;
  background: url(../img/guage.png) no-repeat center / 100%;
}

.guage_area .time {
  width: 85px;
  font-family: 'SBAggroM';
  font-weight: 500;
  font-size: 22px;
  color: rgb(205, 16, 43);
  text-align: right;
  display: flex;
  align-items: self-start;
  padding-top: 3px;
  white-space: nowrap;
}
.guage_area .time::before {
  content: '';
  width: 24px;
  height: 24px;
  background: url(../img/icon_time.png) no-repeat center / 100%;
  margin-right: 7px;
}
.game_ct {
  margin-top: 30px;
  position: relative;
  width: 100%;
}
.game_ct .game_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 662px;
  background: #fffcf2;
  border-radius: 80px;
  box-shadow: 0px 20px 60px 0px rgba(246, 145, 0, 0.15);
}
.game_ct .sound_btns,
.game_ct .sound_btns > button {
  position: absolute;
  top: 0;
  left: 0;
}
.game_ct .sound_btns {
  top: 40px;
  left: 1550px;
  width: 90px;
  height: 94px;
  z-index: 5;
}
.game_ct .sound_btns > button {
  width: 100%;
  height: 100%;
  background: url(../../common/img/btn_play.png) no-repeat center / 100%;
  display: none;
}
.game_ct .sound_btns > .btn_stop {
  background: url(../../common/img/btn_stop.png) no-repeat center / 100%;
}
.game_ct .sound_btns > .wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #c5eee6;
  border-radius: 100%;
}
.game_ct .sound_btns > .wave.w1 {
  background: #e6f6ed;
}
.game_ct .sound_btns[data-mode='play'] .wave {
  animation: soundWave1 2s linear infinite;
}
.game_ct .sound_btns[data-mode='play'] .wave.w1 {
  animation: soundWave2 2s linear infinite;
}
@keyframes soundWave1 {
  0% {
    width: 90px;
    height: 94px;
  }
  100% {
    width: 110px;
    height: 114px;
  }
}
@keyframes soundWave2 {
  0% {
    width: 90px;
    height: 94px;
  }
  100% {
    width: 140px;
    height: 144px;
  }
}

.game_ct .sound_btns[data-mode='play'] > .btn_play,
.game_ct .sound_btns[data-mode='stop'] > .btn_stop {
  display: block;
}
.game_ct .btn_next {
  position: absolute;
  top: 50%;
  right: -81px;
  transform: translateY(-50%);
  width: 56px;
  height: 118px;
  pointer-events: none;
}
.game_ct .btn_next.on {
  pointer-events: all;
  animation: blink 1.5s infinite;
}

.game_ct .feedback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 80px;
  display: none;
  overflow: hidden;
}
.game_ct .feedback.show {
  display: block;
  z-index: 10;
}

.game_ct .feedback .box {
  position: absolute;
  bottom: -152px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 152px;
  background: #00bc89;
  border-radius: 60px 60px 0 0;
  border: 2px solid #009970;
  border-bottom: none;
  font-size: 48px;
  font-family: 'Jalnan';
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 3.25px rgba(65, 65, 70, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
}
.game_ct .feedback.show .box {
  animation: showUpFeedback 1s ease 1 forwards;
}
@keyframes showUpFeedback {
  0% {
    bottom: -152px;
  }
  100% {
    bottom: 0;
  }
}
.game_ct .feedback .box.incorrect {
  background-color: #ff1e68;
  border-color: #cf1855;
}
.game_ct .feedback[data-answer='true'] .box.correct,
.game_ct .feedback[data-answer='false'] .box.incorrect {
  display: flex;
}

.game_bt {
  position: relative;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}
.game_bt .page_info {
  display: flex;
  align-items: center;
  justify-content: center;
}
.game_bt .page_info * {
  font-family: 'Jalnan';
  font-size: 32px;
}
.game_bt .page_info .current {
  color: #414146;
}
.game_bt .page_info .slash {
  margin: 0 6px;
}
.game_bt .btn_pass {
  position: absolute;
  top: 0;
  right: 0;
  width: 190px;
  height: 70px;
  border-radius: 33px;
  background-color: rgb(65, 65, 70);
  box-shadow: 0px 4px 0px 0px rgba(53, 53, 57, 0.004), inset 0px 3px 7px 0px rgba(53, 53, 57, 0.5);
  font-family: 'Jalnan';
  font-size: 24px;
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}
.game_bt .btn_pass::after {
  content: '';
  width: 14px;
  height: 23px;
  background: url(../img/icon_pass.png) no-repeat center / 100%;
  margin-left: 18px;
}
.game_bt .btn_pass.disabled {
  opacity: 0.5;
}
.page.result {
  z-index: 30;
}
.result .finish_gif {
  position: absolute;
  top: -2px;
  left: 500px;
}
.result .ribbon {
  position: absolute;
  top: 438px;
  left: 50%;
  transform: translateX(-50%);
  width: 650px;
  height: 119px;
  background: url(../img/ribbon.png) no-repeat center / 100%;
  font-family: 'JALNAN';
  font-style: normal;
  font-weight: 700;
  font-size: 50px;
  color: rgb(255, 255, 255);
  text-align: center;
  text-shadow: 0px 0px 4.5px rgb(89, 14, 142);
  padding-top: 26px;
}
.result_area {
  position: absolute;
  top: 612px;
  left: 50%;
  transform: translateX(-50%);
}
.result_area .box_wrap {
  padding: 30px;
  background: #fffaef;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.result_area .box_wrap .row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.result_area .box {
  width: 380px;
  height: 164px;
  background: url(../img/result_correct.png) no-repeat center / 100%;
  display: flex;
  align-items: center;
}
.result_area .box.incorrect {
  background-image: url(../img/result_incorrect.png);
}
.result_area .box + .box {
  margin-left: 20px;
}
.result_area .box > h3 {
  width: 180px;
  font-family: 'JALNAN';
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  color: rgb(255, 255, 255);
  text-shadow: 0px 0px 3.25px rgb(65, 65, 70);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.result_area .box > h3 > small {
  width: 90px;
  height: 30px;
  background: #ffffff;
  border-radius: 15px;
  font-family: 'Noto Sans CJK KR';
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  color: rgb(207, 24, 85);
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: none;
  margin-top: 12px;
}

.result_area .box .cnt {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  font-family: 'Noto Sans CJK KR';
  font-weight: 700;
  font-style: normal;
  font-size: 32px;
  color: rgb(0, 130, 117);
  padding-right: 36px;
  margin-top: -12px;
}

.result_area .box .cnt > em {
  position: relative;
  top: 12px;
  font-family: 'JALNAN';
  font-style: normal;
  font-weight: 700;
  font-size: 68px;
  color: rgb(0, 130, 117);
  line-height: 1.2;
  margin-right: 8px;
}
.result_area .box.incorrect .cnt,
.result_area .box.incorrect .cnt > em {
  color: #c1094a;
}
.result_area .btn_check {
  width: 330px;
  height: 78px;
  background-color: rgb(48, 59, 121);
  box-shadow: 0px 6px 0px 0px rgba(25, 35, 90, 0.004), inset 0px 3px 7px 0px rgba(25, 35, 90, 0.5);
  border-radius: 36px;
  font-family: 'JALNAN';
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
.result_area .btn_check::after {
  content: '';
  width: 15px;
  height: 27px;
  background: url(../img/icon_arrow.png) no-repeat center / 100%;
  margin-left: 18px;
}
.result_area .next_btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}
.result_area .next_btns > button {
  width: 240px;
  height: 66px;
  border-radius: 33px;
  background-color: rgb(65, 65, 70);
  box-shadow: 0px 4px 0px 0px rgba(53, 53, 57, 1), inset 0px 3px 7px 0px rgba(53, 53, 57, 0.5);
  font-family: 'Jalnan';
  font-style: normal;
  font-weight: 700;
  font-size: 27px;
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
}
.result_area .next_btns > .btn_homework {
  display: none;
}
.result_area .next_btns > button.off {
  pointer-events: none;
  opacity: 0.5;
}
[data-env='server'].student .result_area .next_btns > .btn_homework {
  display: flex;
}
.result_area .next_btns > button + button {
  margin-left: 40px;
}

#setNick {
  background: #ebe8ed;
  z-index: 30;
}
#setNick .title {
  position: absolute;
  top: 310px;
  left: 50%;
  transform: translateX(-50%);
  width: 1230px;
  height: 119px;
  font-size: 50px;
  font-family: 'Jalnan';
  color: rgb(255, 255, 255);
  line-height: 1.3;
  text-align: center;
  text-shadow: 0px 0px 4.5px rgba(89, 14, 142, 1);
  background: url(../img/nick_title.png) no-repeat center / 100%;
  padding-top: 20px;
  z-index: 1;
}

#setNick .ip_area {
  position: absolute;
  top: 384px;
  left: 50%;
  transform: translateX(-50%);
  width: 1680px;
  height: 395px;
  border-radius: 100px;
  background-color: rgba(192, 187, 195, 0.149);
  box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px 1px 0px 0px rgba(152, 132, 166, 0.15), inset 0px 2px 5px 0px rgba(152, 132, 166, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
#setNick .ip_wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#setNick .nickname {
  border: 4px solid rgba(88, 44, 119, 0.3);
  background-color: rgb(255, 255, 255);
  width: 930px;
  height: 100px;
  padding: 0 20px;
  border-right: none;
  font-size: 40px;
  font-family: 'Jalnan';
  text-align: center;
}
#setNick .btn_set {
  background-color: #414146;
  box-shadow: 0px 4px 0px 0px rgba(53, 53, 57, 1), inset 0px 3px 7px 0px rgba(53, 53, 57, 0.5);
  width: 190px;
  height: 96px;
  font-size: 30px;
  font-family: 'Jalnan';
  color: rgb(255, 255, 255);
  border-radius: 0 20px 20px 0;
}