@charset "UTF-8";

#page_std {
  --color-text: #000;
  --color-text-red: #d02a2a;
  --color-table-line: #f08341;
  --color-table-cell: #fbd8ac;

  --size-game-text: 66px;
  --size-game-text-small: 48px;
  --size-game-text-table: 36px;
}

/*** 글씨 ***/
/* cafe24 surround */
@font-face { font-family: 'cafe24'; src: url('./Cafe24Ssurround-v2.0.woff') format('woff'); }

/* nexonLv2Gothic */
@font-face {font-family: 'nexonL2G M'; src: url('./NexonLv2GothicMedium.woff') format('woff');}
@font-face {font-family: 'nexonL2G M'; src: url('./NotoSans-Bold.woff') format('woff'); unicode-range: U+FF1C, U+FF1E;}

/* 단위 */
@font-face {font-family: 'NanumMyeongjoB'; src: url('./NanumMyeongjoBold.woff') format('woff');}


/*** #btn-close ***/
#page_std>header>.close { position: absolute; display: none; width: 76px; height: 76px; right: 20px; top: 20px; font-size: 0; z-index: 1; cursor: pointer; background: url(../images/ico_lnbclose.png) no-repeat center; }

/* button */
button { outline: none; }

/*마우스 오버 효과*/
.btn-over { transition: all 0.3s; will-change: auto; }
.btn-over:hover { transform: scale(1.1); }

/* 연산 기호 */
.opt { font-family: inherit; margin: 0 6px; }

/*** #page_std ***/
#page_std .background { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url(../images/bg_extend.png) no-repeat center; }

/*** #p_index ***/
#p_index .shadow { position: absolute; display: block; width: 664px; height: 67px; left: calc(50% - 664px/2); bottom: 40px; background: url(../images/index_shadow.png) no-repeat center/contain; }

#p_index .panel { position: absolute; display: block; width: 929px; height: 722px; left: calc(50% - 930px/2); bottom: 105px; background: url(../images/index_panel.png) no-repeat 6px center/contain; }
#p_index .panel .title { position: absolute; display: block; width: 849px; height: 304px; left: 34px; top: -170px; background: url(../images/index_title.png) no-repeat center/contain; pointer-events: none; }
#p_index .panel ul.list { position: absolute; display: none; top: 288px; padding: 0 60px 0 74px; text-align: center; }
#p_index .panel ul.list.active { display: block; }
#p_index .panel ul.list>li { position: relative; display: inline-block; font-size: 0; cursor: pointer; }
#p_index .panel ul.list>li:nth-child(1) { width: 225px; height: 119px; background: url(../images/btn_index_1.png) no-repeat center/contain; }
#p_index .panel ul.list>li:nth-child(2) { width: 219px; height: 117px; background: url(../images/btn_index_2.png) no-repeat center/contain; }
#p_index .panel ul.list>li:nth-child(3) { width: 220px; height: 120px; background: url(../images/btn_index_3.png) no-repeat center/contain; }
#p_index .panel ul.list>li:nth-child(4) { width: 220px; height: 120px; background: url(../images/btn_index_4.png) no-repeat center/contain; }
#p_index .panel ul.list>li:nth-child(5) { width: 219px; height: 121px; background: url(../images/btn_index_5.png) no-repeat center/contain; }
#p_index .panel ul.list>li:nth-child(6) { width: 219px; height: 118px; background: url(../images/btn_index_6.png) no-repeat center/contain; }

#p_index .panel .title-list { position: absolute; display: block; width: 472px; height: 144px; left: calc(50% - 472px/2); top: 130px; background: url(../images/title_lesson.png) no-repeat center; }

/* stantalone */
#p_index .panel .standalone { position: absolute; display: none; width: 100%; height: 100%; }
#p_index .panel .standalone.active { display: block; }
#p_index .panel .standalone .lesson { position: absolute; width: 100%; top: 240px; color: #05142a; font-family: "cafe24"; font-size: 72px; text-align: center; }
#p_index .panel .standalone .btn-start { position: absolute; display: block; width: 374px; height: 142px; left: calc(50% - 374px/2); bottom: 180px; font-size: 0; background: url(../images/btn_start.png) no-repeat center; }

/*** #game ***/
.con_contents #game { display: block; width: 100%; height: 100%; }

/* bg */
.con_contents #game .bg { display: block; width: 100%; height: 100%; }
.con_contents #game .bg .area { position: absolute; width: 1579px; height: 922px; left: calc(50% - 790px); /*118px;*/ top: 240px; background: url(../images/game_panel.png) no-repeat center/contain; pointer-events: none; }
.con_contents #game .bg .title { position: absolute; width: 100%; top: 40px;
  color: #fff;
  font-family: "cafe24";
  font-size: 72px;
  text-align: center;
  vertical-align: middle;
  text-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.con_contents #game .bg .title>.o { position: relative; display: inline-block; width: calc(566px * 0.2); height: calc(555px * 0.2); vertical-align: middle; background: url(../images/answer_o.png) no-repeat center/contain; }
.con_contents #game .bg .title>.x { position: relative; display: inline-block; width: calc(493px * 0.2); height: calc(492px * 0.2); vertical-align: middle; background: url(../images/answer_x.png) no-repeat center/contain; }

/* tab */
.con_contents #game .tab { position: absolute; left: 380px; /*330px;*/ top: 165px; }
.con_contents #game .tab>ul { position: relative; }
.con_contents #game .tab>ul>li { position: relative; display: inline-block; width: 113px; height: 203px; margin: 0 1px; font-size: 0; cursor: pointer; }

.con_contents #game .tab>ul>li:nth-child(1) { background: url(../images/tab01.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li:nth-child(2) { background: url(../images/tab02.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li:nth-child(3) { background: url(../images/tab03.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li:nth-child(4) { background: url(../images/tab04.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li:nth-child(5) { background: url(../images/tab05.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li:nth-child(6) { background: url(../images/tab06.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li:nth-child(7) { background: url(../images/tab07.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li:nth-child(8) { background: url(../images/tab08.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li:nth-child(9) { background: url(../images/tab09.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li:nth-child(10) { background: url(../images/tab10.png) no-repeat 0 0/contain; }

.con_contents #game .tab>ul>li.on:nth-child(1) { background: url(../images/tab01_on.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li.on:nth-child(2) { background: url(../images/tab02_on.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li.on:nth-child(3) { background: url(../images/tab03_on.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li.on:nth-child(4) { background: url(../images/tab04_on.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li.on:nth-child(5) { background: url(../images/tab05_on.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li.on:nth-child(6) { background: url(../images/tab06_on.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li.on:nth-child(7) { background: url(../images/tab07_on.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li.on:nth-child(8) { background: url(../images/tab08_on.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li.on:nth-child(9) { background: url(../images/tab09_on.png) no-repeat 0 0/contain; }
.con_contents #game .tab>ul>li.on:nth-child(10) { background: url(../images/tab10_on.png) no-repeat 0 0/contain; }

/* timer */
.con_contents #game .timer { position: absolute; display: none; width: 161px; height: 773px; right: 52px; bottom: 185px; background: url(../images/timer_bg.png) no-repeat 0 0; }
.con_contents #game .timer>.mask { position: absolute; display: block; overflow: hidden; width: 45px; height: 580px; left: 58px; top: 56px; border-radius: 23px 23px 0 0; }
.con_contents #game .timer>.mask>.bar { position: absolute; display: block; width: 45px; height: 580px; left: 0px; top: 0px; border-radius: 23px 23px 0 0; background: url(../images/timer_bar.png) repeat-y center; }
.con_contents #game .timer>.mask>.bar.alarm { background: url(../images/timer_bar.gif) repeat-y 0 0 !important; }
.con_contents #game .timer-fx { position: absolute; display: none; width: 157px; height: 164px; right: 48px; bottom: 180px; background: url(../images/timer_clock.png) no-repeat center; }
.con_contents #game .timer-fx .text { position: absolute; width: 100%; left: -5px; bottom: 48px; color: var(--color-text); font-family: "cafe24"; font-size: 48px; text-align: center; line-height: 1.4; }

/* btns */
.con_contents #game .btns .btn_index { position: absolute; width: 112px; height: 102px; left: 116px; top: 44px; font-size: 0; background: url(../images/btn_index.png) no-repeat center/contain; }
#p_std.noindex .con_contents #game .btns .btn_index { display: none; }
.con_contents #game .btns .btn_restart { position: absolute; display: none; width: 311px; height: 129px; right: 30px; bottom: 20px; font-size: 0; background: url(../images/btn_restart.png) no-repeat center/contain; }


/* jsmun */
.con_contents .jsmun >.btn_area { position: absolute; width: 1580px;
  height: 826px; left: calc(50% - 790px); top: 240px; pointer-events: none; }
.con_contents .jsmun >.btn_area button { font-size: 0; pointer-events: auto; }
.con_contents .jsmun >.btn_area button.btnGameSolve,
.con_contents .jsmun >.btn_area button.btn_ans { display: none; }
.con_contents .jsmun >.btn_area button.btn_check { position: absolute; width: 318px; height: 177px; right: 100px; bottom: 80px; font-size: 0; background: url(../images/btn_answer.png) no-repeat center; }

.con_contents .jsmun >.btn_area button.btn_retry { position: absolute; width: 318px; height: 177px; right: 100px; bottom: 80px; font-size: 0; background: url(../images/btn_retry.png) no-repeat center/contain; }

/* .con_contents .jsmun >.btn_area button.btn_next { position: relative; width: 318px; height: 177px; font-size: 0; background: url(../images/btn_next.png) no-repeat center; } */
.con_contents .jsmun >.btn_area button.btn_prev { position: absolute; width: 67px; height: 106px; left: 10px; top: calc(50% - 60px); font-size: 0; background: url(../images/btn_swiper_prev.png) no-repeat center; }
.con_contents .jsmun >.btn_area button.btn_prev:hover { background: url(../images/btn_swiper_prev_hover.png) no-repeat center; }
.con_contents .jsmun >.btn_area button.btn_prev.off { background: url(../images/btn_swiper_prev_off.png) no-repeat center; pointer-events: none; }
.con_contents .jsmun >.btn_area button.btn_next { position: absolute; width: 67px; height: 106px; right: 10px; top: calc(50% - 60px); font-size: 0; background: url(../images/btn_swiper_next.png) no-repeat center; }
.con_contents .jsmun >.btn_area button.btn_next:hover { background: url(../images/btn_swiper_next_hover.png) no-repeat center; }
.con_contents .jsmun >.btn_area button.btn_next.off { background: url(../images/btn_swiper_next_off.png) no-repeat center; pointer-events: none; }

.con_contents .jsmun li.quizLayer>h1 { display: none; }

.con_contents .jsmun li.quizLayer .dan { color: var(--color-text); font-family: 'NanumMyeongjoB'; letter-spacing: 0px; margin-left: 8px; }

.con_contents .jsmun li.quizLayer>div.q { position: absolute; display: flex; flex-direction: column; justify-content: center; left: calc(50% - 1372px/2); /*220px;*/ top: 330px; width: 1372px; height: 640px; }
.con_contents .jsmun li.quizLayer>div.q.row { flex-direction: row; justify-content: flex-start; align-items: center; padding: 0px 80px; }

.con_contents .jsmun li.quizLayer>div.q:not(.row) .text { position: relative; display: block; width: 100%; height: auto; padding: 0px 100px; color: var(--color-text); font-family: "nexonL2G M"; font-size: var(--size-game-text); text-align: center; line-height: 1.4; word-break: keep-all; }

.con_contents .jsmun li.quizLayer>div.q.row .text { position: relative; display: inline-block; padding: 0px 0px; color: var(--color-text); font-family: "nexonL2G M"; font-size: var(--size-game-text); text-align: left; line-height: 1.4; word-break: keep-all; }

/* 이전 */
.con_contents .jsmun li.quizLayer>div.q:not(.row)>div:has(+ div.text) { margin-bottom: 20px; }
.con_contents .jsmun li.quizLayer>div.q.row>div:has(+ div.text) { margin-right: 40px; }
/* 이후 */
.con_contents .jsmun li.quizLayer>div.q:not(.row)>div.text + div { margin-top: 20px; }
.con_contents .jsmun li.quizLayer>div.q.row>div.text + div { margin-left: 40px; }


/* title */
.con_contents .jsmun li.quizLayer>div.q>div.title { color: var(--color-text); font-family: "nexonL2G M"; font-size: var(--size-game-text-small); text-align: center; line-height: 1.4; }


/* box */
.con_contents .jsmun li.quizLayer .box { position: relative; display: inline-block; width: 72px; height: 72px; margin-right: 8px; font-family: "nexonL2G M"; font-size: var(--size-game-text); line-height: 1.4; color: var(--color-text-red); text-align: center; vertical-align: -15px; border: 2px solid #666; border-radius: 8px; background: #fff; box-shadow: 5px 5px rgba(0, 0, 0, 0.2); }


/* formula */
.con_contents .jsmun li.quizLayer .formula { position: relative; display: block; margin: 0 auto; text-align: right; }
.con_contents .jsmun li.quizLayer .formula .numbers { position: relative; display: block; right: 0px; font-family: "nexonL2G M"; font-size: var(--size-game-text); line-height: 1.2; letter-spacing: 60px; color: var(--color-text); }
.con_contents .jsmun li.quizLayer .formula .line { position: relative; width: 100%; height: 2px; margin-bottom: 12px; background: var(--color-text); }
.con_contents .jsmun li.quizLayer .formula .box { width: 330px; color: var(--color-guide); }
.con_contents .jsmun li.quizLayer .formula .box.bottom { margin: 8px 22px 0 0; }
.con_contents .jsmun li.quizLayer .formula .divisor { position: relative; height: 0px; left: -90px; color: var(--color-text); font-family: "nexonL2G M"; font-size: var(--size-game-text); line-height: 1.2; text-align: left; }
.con_contents .jsmun li.quizLayer .formula .divisor::before { content: ""; position: absolute; display: block; width: calc(100% + 30px); height: 2px; left: 60px; top: 0px; background: var(--color-text); }
.con_contents .jsmun li.quizLayer .formula .divisor::after { content: ")"; position: absolute; display: block; left: 60px; top: -6px; font-family: "NanumMyeongjoB"; }


/* fraction */
.con_contents .jsmun li.quizLayer .fraction { position: relative; display: inline-block; vertical-align: middle; margin-right: 8px; }
.con_contents .jsmun li.quizLayer .fraction>.top,
.con_contents .jsmun li.quizLayer .fraction>.bottom { position: relative; display: block; color: var(--color-text); font-family: "nexonL2G M"; font-size: inherit; line-height: 1.2; text-align: center; margin: 0 16px; }
.con_contents .jsmun li.quizLayer .fraction>.line { position: relative; display: block; width: 100%; height: 2px; margin-bottom: 6px; background: var(--color-text); }


/* table */
.con_contents .jsmun li.quizLayer>div.q>div.title.table { margin: 0 auto 20px; padding: 6px 40px; color: var(--color-text); font-family: "nexonL2G M"; font-size: var(--size-game-text-table); text-align: center; line-height: 1.4; border-radius: 20px; background: var(--color-table-cell); }

.con_contents .jsmun ul.levelLayer>li>div.q .table-wrap { position: relative; overflow: hidden; width: auto; margin: 0 auto; border-radius: 10px; border: 2px solid var(--color-table-line); }

.con_contents .jsmun ul.levelLayer>li>div.q table { position: relative; margin: 0 -1px -1px 0; border-collapse: separate; border-spacing: 0; width: auto; }
.con_contents .jsmun ul.levelLayer>li>div.q table th,
.con_contents .jsmun ul.levelLayer>li>div.q table td { font-family: "nexonL2G M"; font-size: var(--size-game-text-table); line-height: 1.2; text-align: center; padding: 10px 20px; }
.con_contents .jsmun ul.levelLayer>li>div.q table th { background: var(--color-table-cell); color: var(--color-table-line); border-right: 1px solid var(--color-table-line); border-bottom: 1px solid var(--color-table-line); }
.con_contents .jsmun ul.levelLayer>li>div.q table td { color: var(--color-text-q); border-right: 1px solid var(--color-table-line); border-bottom: 1px solid var(--color-table-line); background-color: #fff; }


/* o, x */
/*
#std_judge { position: absolute; display: block; left: 50%; top: 50%; pointer-events: none; }
#std_judge .o { position: absolute; display: block; width: 566px; height: 555px; left: calc(0px - 566px/2); top: calc(0px - 556px/2); background: url(../images/answer_o.png) no-repeat center/contain; }
#std_judge .x { position: absolute; display: block; width: 493px; height: 492px; left: calc(0px - 494px/2); top: calc(0px - 492px/2); background: url(../images/answer_x.png) no-repeat center/contain; }
*/

#std_judge { position: absolute; display: block; right: 20px; bottom: 20px; pointer-events: none; }
#std_judge .o { position: relative; display: block; width: 261px; height: 254px; left: 0px; top: 0px; background: url(../images/check_o.png) no-repeat center/contain; }
#std_judge .x { position: relative; display: block; width: 256px; height: 256px; left: 0px; top: 0px; background: url(../images/check_x.png) no-repeat center/contain; }

/* ex */
#game .quizLayer>.ex { display: none; }
#game .quizLayer>.ex.active { display: block; }

#game .quizLayer>.ex>.up,
#game .quizLayer>.ex>.down {
  position: absolute;
  width: auto;
  height: 100px;
  padding: 0 8px;
  color: var(--color-text-red);
  font-family: "nexonL2G M";
  font-size: var(--size-game-text);
  line-height: 1.0;
  text-align: center;
}
#game .quizLayer>.ex>.horizon {
  position: absolute;
  width: auto;
  height: 100px;
  color: var(--color-text-red);
  font-family: "nexonL2G M";
  font-size: var(--size-game-text);
  line-height: 100px;
  text-align: center;
  vertical-align: 18px;
}
#game .quizLayer>.ex>.horizon>.slash {
  position: relative;
  display: inline-block;
  height: 6px;
  margin: 0 10px;
  line-height: 100px;
  background-color: var(--color-text-red);
  vertical-align: 18px;
}

#game .quizLayer>.ex>.up { padding-bottom: 28px; border-bottom: 6px solid var(--color-text-red); }
#game .quizLayer>.ex>.up.number { padding-bottom: 18px; }
#game .quizLayer>.ex>.down { padding-top: 32px; border-top: 6px solid var(--color-text-red); }
#game .quizLayer>.ex>.down.number { padding-top: 24px; }

#game .quizLayer>.ex .dan,
#game .quizLayer>.ex .fraction>* { color: var(--color-text-red); }
#game .quizLayer>.ex .fraction>.line { background-color: var(--color-text-red); }
#game .quizLayer>.ex .text {
  position: absolute;
  width: auto;
  height: 100px;
  left: 0px;
  color: var(--color-text-red);
  font-family: "nexonL2G M";
  font-size: var(--size-game-text);
  text-align: center;
}
#game .quizLayer>.ex.up .text { line-height: 68px; }
#game .quizLayer>.ex.down .text { line-height: 80px; }