@charset "utf-8";

#header {
  background-color: #ffe796;
  box-shadow: 0px 15px 100px 0px rgba(255, 185, 53, 0.32);
}

#headerInfo .mode {
  background-image: url(../img/header_mode.png);
}
#headerInfo .mode::before {
  content: '게임';
}
#headerBtns .btn_test {
  background-color: #f7a82d;
  box-shadow: 0px 4px 0px 0px rgb(226, 148, 27), inset 0px -3px 7px 0px rgba(226, 148, 27, 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: #fab332;
}

#loading .ld_bar {
  background: linear-gradient(to right, #ff8400, #fbae00);
}
#loading .ld_bar .pen {
  background-image: url(../img/ic_pencil.png);
}
#loading .ld_txt > strong::before {
  background: #fe9e16;
}
#lsList .box {
  border-color: rgba(252, 183, 45, 0.35);
  background-color: #fff9ef;
}
#lsList .box:hover {
  border-color: #fcb72d;
}
#lsList .box .ls_num {
  background-image: url(../img/ls_list_mark.png);
}
#lsList .box .thumb::before {
  background: linear-gradient(to right, rgba(255, 249, 239, 0), rgba(255, 249, 239, 1));
}
#lsList .box .btn_vocab {
  background-color: rgb(246, 145, 0);
  box-shadow: 0px 6px 0px 0px rgba(200, 118, 0, 1), inset 0px 3px 7px 0px rgba(200, 118, 0, 0.5);
}
#lsList .box .btn_vocab:active,
#lsList .box .btn_vocab:focus {
  background-color: rgb(200, 118, 0);
  box-shadow: 0px 6px 0px 0px rgba(163, 96, 0, 1), inset 1.721px 2.457px 7px 0px rgba(163, 96, 0, 0.5);
}
#cateList {
  background: #fcca53;
}
#cateList .btns {
  background-image: url(../img/header_btn_bg3.png);
}
#cateList .cate_wrap {
  background-color: rgba(246, 145, 0, 0.18);
  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);
  padding: 95px 90px 62px;
}

#cateList .mode_title {
  background: url(../img/mode_title.png) no-repeat center / 100%;
}

#cateList .cate_card {
  width: 330px;
}

#cateList .cate_card.on {
  background-color: rgba(125, 61, 5, 0.95);
  box-shadow: 0px 4px 0px 0px rgba(100, 51, 6, 1), 0 10px 30px rgba(102, 51, 0, 0.55), inset 0px 3px 7px 0px rgba(100, 51, 6, 0.5);
}

#cateList .cate_card + .cate_card {
  margin-left: 60px;
}
#cateList .cate_card.on > p > span {
  color: #80420b;
}
#cateList .btn_study {
  background-color: rgb(83, 49, 0);
  box-shadow: 0px 8px 0px 0px rgba(61, 35, 0, 1), inset 0px 3px 7px 0px rgba(61, 35, 0, 0.5);
}

#cateList .btn_study:focus,
#cateList .btn_study:active {
  box-shadow: 0px -8px 0px 0px rgba(213, 156, 54, 1), inset 3px 7px 0px 0px rgba(61, 35, 0, 1);
}

.page {
  background-color: #ffe27f;
}
.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: rgb(221, 149, 32);
}

.page.result #btnFull {
  background-color: rgba(246, 145, 0, 0.2);
  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);
}

/* OX 게임 */
#gameOX .game_title > i {
  position: relative;
  top: 6px;
  display: inline-block;
  width: 48px;
  height: 48px;
  background: url(../img/txt_O.png) no-repeat center / 100%;
}
#gameOX .game_title > i.incorrect {
  background-image: url(../img/txt_X.png);
}
#gameOX .game_card {
  background: url(../img/ox_bg.png) no-repeat center / 100%;
}
#gameOX .sentence {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
#gameOX .sentence > p {
  font-weight: 700;
  font-size: 94px;
  color: rgb(0, 0, 0);
  line-height: 1.245;
  padding: 48px 140px;
  vertical-align: middle;
  word-break: keep-all;
}
#gameOX .sentence.sm > p {
  font-size: 74px;
}

#gameOX .answer_btns {
  width: 100%;
  height: 288px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#gameOX .answer_btns > button {
  position: relative;
  width: 180px;
  height: 188px;
  background: url(../img/btn_O_normal.png) no-repeat center / 100%;
}
#gameOX .answer_btns > button.incorrect {
  background-image: url(../img/btn_X_normal.png);
  margin-left: 250px;
}
#gameOX .answer_btns > button.select {
  background-image: url(../img/btn_O_active.png);
}
#gameOX .answer_btns > button.incorrect.select {
  background-image: url(../img/btn_X_active.png);
}
#gameOX .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;
}
#gameOX .answer_btns > button.select::before {
  display: block;
}

#gameCard .game_card,
#gameSpFind .game_card {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 65px 72px;
  justify-content: space-between;
}

#gameCard .game_card .card,
#gameSpFind .game_card .card {
  position: relative;
  border-radius: 30px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 6px 0px 0px rgba(218, 220, 232, 1), inset 0px -3px 7px 0px rgba(218, 220, 232, 0.5);
  width: 360px;
  min-height: 150px;
  border: 2px solid #ccccdd;
  font-size: 48px;
  color: rgb(0, 0, 0);
  font-weight: 700;
  line-height: 1.125;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: keep-all;
  cursor: pointer;
}
#gameCard .game_card .card.sm {
  font-size: 32px;
}

#gameCard .game_card .card.select,
#gameCard .game_card .card.on,
#gameCard .game_card .card.correct {
  border-color: #018174;
  background-color: rgb(0, 160, 143);
  box-shadow: 0px 6px 0px 0px rgba(1, 129, 116, 1), inset 0px -3px 7px 0px rgba(1, 129, 116, 0.5);
  color: rgb(255, 255, 255);
  text-shadow: 0px 1px 5px rgba(65, 65, 70, 0.35);
  pointer-events: none;
}

#gameCard .game_card .card:nth-child(n + 5) {
  margin-top: 42px;
}
#gameCard .game_card .card.correct::before,
#gameSpFind .game_card .card.correct::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/particle1.png) no-repeat center / 100%;
}
#gameCard .game_card .card.incorrect,
#gameSpFind .game_card .card.incorrect {
  color: rgb(255, 255, 255);
  border-color: #cf1855;
  background-color: rgb(255, 30, 104);
  box-shadow: 0px 6px 0px 0px rgba(207, 24, 85, 1), inset 0px -3px 7px 0px rgba(207, 24, 85, 0.5);
  animation: shake 0.3s ease-in-out 3;
  /* animation: name duration timing-function delay iteration-count direction fill-mode; */
}
@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

#gameCard .game_card .card.disabled {
  background-color: rgb(216, 218, 230);
  box-shadow: 0px 6px 0px 0px rgba(190, 191, 212, 1), inset 0px -3px 7px 0px rgba(190, 191, 212, 0.5);
  color: rgba(65, 65, 70, 0.6);
}

#gameSpArr .game_card {
  position: relative;
  z-index: 5;
  height: 654px;
  background: url(../img/sp_arr_bg.png) no-repeat center / 100%;
}
#gameSpArr .btn_reset {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 90px;
  height: 94px;
  background: url(../img/btn_reset.png) no-repeat center / 100%;
}
#gameSpArr .question {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#gameSpArr .question .mean {
  font-size: 94px;
  color: rgb(0, 0, 0);
  font-weight: 700;
  line-height: 1.245;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
#gameSpArr .que_btns {
  width: 100%;
  height: 169px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
#gameSpArr .que_btns > button {
  width: 75px;
  height: 80px;
  font-size: 55px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  line-height: 0.945;
  text-shadow: 0px 1px 5px rgba(65, 65, 70, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: rgb(0, 188, 137);
  box-shadow: 0px 4px 0px 0px rgba(0, 153, 112, 11), inset 0px 3px 7px 0px rgba(0, 153, 112, 0.5);
}
#gameSpArr .que_btns > button.off {
  height: 84px;
  background: #ffe17e;
  box-shadow: none;
  text-indent: -9999px;
  pointer-events: none;
}
#gameSpArr .que_btns > button + button {
  margin-left: 20px;
}
#gameSpArr .answer_btns {
  width: 100%;
  height: 176px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
#gameSpArr .answer_btns > button {
  border: 2px solid rgb(202, 202, 202);
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 4px 0px 0px rgba(202, 202, 202, 1), inset 0px 3px 7px 0px rgba(202, 202, 202, 0.5);
  width: 71px;
  height: 76px;
  z-index: 571;
  font-size: 50px;
  color: rgb(0, 0, 0);
  font-weight: 700;
  line-height: 0.678;
  display: flex;
  align-items: center;
  justify-content: center;
}
#gameSpArr .answer_btns > button.off {
  border-color: rgb(190, 191, 212);
  background-color: rgb(216, 218, 230);
  box-shadow: 0px 4px 0px 0px rgba(190, 191, 212, 1), inset 0px 3px 7px 0px rgba(190, 191, 212, 0.5);
  pointer-events: none;
  text-indent: -9999px;
}
#gameSpArr .answer_btns.finish > button {
  background: #e7d1ae;
  box-shadow: inset 0px 2px 10px 0px rgba(182, 150, 51, 0.25);
  border: none;
  pointer-events: none;
  text-indent: -9999px;
}
#gameSpFind .game_card {
  padding: 60px 72px;
}
#gameSpFind .game_card .card {
  position: relative;
  width: 480px;
  font-size: 45px;
}
#gameSpFind .game_card .card.center {
  border-color: #aed7c4;
  background-color: rgb(229, 244, 229);
  box-shadow: 0px 6px 0px 0px rgba(174, 215, 196, 1), inset -1.545px -2.572px 7px 0px rgba(0, 162, 119, 0.15);
  color: #008275;
  pointer-events: none;
  font-size: 55px;
}
#gameSpFind .game_card .card.correct {
  border-color: #018174;
  background-color: rgb(0, 160, 143);
  box-shadow: 0px 6px 0px 0px rgba(1, 129, 116, 1), inset 0px -3px 7px 0px rgba(1, 129, 116, 0.5);
  color: rgb(255, 255, 255);
  text-shadow: 0px 1px 5px rgba(65, 65, 70, 0.35);
}
#gameSpFind .game_card .card.correct::before {
  /* background: url(../img/particle2.png) no-repeat center / 100%; */
  display: none;
}
#gameSpFind .game_card .card:nth-child(n + 4) {
  margin-top: 44px;
}
#gameSpFind .game_card .card .particle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
/* 튜토리얼 팝업 */
.tutorial.game_ox .pop.p1 .txt {
  top: 477px;
  left: 580px;
  width: 699px;
  height: 477px;
  background: url(../img/game_ox_tu1.png) no-repeat center / 100%;
  padding: 36px 0 0 277px;
}
.tutorial.game_ox .pop.p1 .ani1 {
  position: absolute;
  top: 729px;
  left: 551px;
}
.tutorial.game_ox .pop.p2 .txt {
  top: 316px;
  left: 653px;
  width: 564px;
  height: 577px;
  background: url(../img/game_ox_tu2.png) no-repeat center / 100%;
  padding: 84px 0 0 180px;
}

.tutorial.game_ox .success {
  margin-top: 36px;
}

.tutorial.game_card .pop.p1 .txt {
  top: 354px;
  left: 107px;
  width: 773px;
  height: 402px;
  background: url(../img/game_card_tu1.png) no-repeat center / 100%;
  padding: 31px 0 0 452px;
}
.tutorial.game_card .pop.p1 .ani1 {
  position: absolute;
  top: 530px;
  left: 86px;
}
.tutorial.game_card .pop.p2 .txt {
  top: 546px;
  left: 888px;
  width: 773px;
  height: 408px;
  background: url(../img/game_card_tu2.png) no-repeat center / 100%;
  padding: 31px 0 0 452px;
}
.tutorial.game_card .pop.p2 .ani2 {
  position: absolute;
  top: 720px;
  left: 870px;
}
.tutorial.game_card .pop.p3 .txt {
  top: 356px;
  left: 191px;
  width: 1146px;
  height: 533px;
  background: url(../img/game_card_tu3.png) no-repeat center / 100%;
  padding: 80px 0 0 30px;
}
.tutorial.game_card .pop.p3 .ani3 {
  position: absolute;
  top: 515px;
  left: 157px;
  width: 433px;
}
.tutorial.game_card .pop.p3 .ani3:nth-of-type(2) {
  top: 706px;
  left: 941px;
}
.tutorial.game_card .card {
  position: absolute;
  top: 539px;
  left: 195px;
  width: 360px;
  height: 150px;
  font-size: 48px;
  color: rgb(0, 0, 0);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial.game_card .card.c2 {
  top: 731px;
  left: 976px;
  color: #fff;
  font-size: 42px;
}
.tutorial.game_card .pop.p3 .card {
  color: #fff;
}

.tutorial.game_card .success {
  margin-top: 34px;
}
.tutorial.game_card .success::after {
  width: 142px;
}

.tutorial.game_sp_arr .pop.p1 {
  background: url(../img/game_sp_arr_tu1_1.png) no-repeat 635px 583px / 849px 418px;
}

.tutorial.game_sp_arr .pop.p1 .ani1 {
  position: absolute;
  top: 811px;
  left: 788px;
  animation: moveGameSpAni1 1.5s linear 0.5s 2 forwards;
}

@keyframes moveGameSpAni1 {
  0% {
    top: 811px;
    left: 788px;
  }
  80% {
    top: 592px;
    left: 503px;
  }
  100% {
    top: 592px;
    left: 503px;
  }
}

.tutorial.game_sp_arr .pop.p3 {
  background: url(../img/game_sp_arr_tu3_1.png) no-repeat 164px 311px / 1543px 607px;
}
.tutorial.game_sp_arr .txt {
  position: absolute;
}
.tutorial.game_sp_arr .pop.p1 .txt.t1 {
  top: 617px;
  left: 1073px;
}
.tutorial.game_sp_arr .pop.p1 .txt.t2 {
  top: 662px;
  left: 1052px;
}
.tutorial.game_sp_arr .pop.p2 .txt.t1 {
  top: 628px;
  left: 733px;
  width: 615px;
  height: 269px;
  background: url(../img/game_sp_arr_tu2_1.png) no-repeat center / 100%;
  padding: 32px 0 0 84px;
}
.tutorial.game_sp_arr .pop.p2 .txt.t2 {
  top: 409px;
  left: 638px;
  width: 617px;
  height: 267px;
  background: url(../img/game_sp_arr_tu2_2.png) no-repeat center / 100%;
  padding: 34px 0 0 86px;
}
.tutorial.game_sp_arr .pop.p2 .ani1 {
  position: absolute;
  top: 777px;
  left: 571px;
}
.tutorial.game_sp_arr .pop.p2 .ani2 {
  top: 556px;
  left: 491px;
}
.tutorial.game_sp_arr .pop.p3 .txt.t1 {
  top: 754px;
  left: 235px;
}
.tutorial.game_sp_arr .pop.p3 .txt.t2 {
  top: 311px;
  left: 1293px;
  width: 414px;
  height: 366px;
  background: url(../img/game_sp_arr_tu3_2.png) no-repeat center / 100%;
  padding: 80px 0 0 28px;
}
.tutorial.game_sp_arr .pop.p3 .spell {
  position: absolute;
  top: 592px;
  left: 639px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.tutorial.game_sp_arr .pop.p3 .spell > span {
  width: 75px;
  height: 84px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  font-size: 55px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  text-shadow: 0px 1px 5px rgba(65, 65, 70, 0.35);
  line-height: 1;
}

.tutorial.game_sp_arr .pop.p3 .spell.correct > span:nth-child(6) {
  order: 1;
}
.tutorial.game_sp_arr .success {
  margin-top: 35px;
}

.tutorial.game_sp_find .pop.p1 {
  background: url(../img/game_sp_find_tu1.png) no-repeat 631px 159px / 927px 402px;
}
.tutorial.game_sp_find .pop.p1 .ani1 {
  position: absolute;
  top: 335px;
  left: 608px;
}

.tutorial.game_sp_find .pop.p2 {
  background: url(../img/game_sp_find_tu2.png) no-repeat 717px 84px / 945px 411px;
}
.tutorial.game_sp_find .pop .txt {
  position: absolute;
  top: 190px;
  left: 1307px;
}
.tutorial.game_sp_find .pop.p2 .txt {
  top: 171px;
  left: 1271px;
}

.tutorial.game_sp_find .pop .card {
  position: absolute;
  top: 343px;
  left: 719px;
  font-size: 48px;
  color: rgb(0, 0, 0);
  font-weight: 700;
  line-height: 1.125;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 480px;
  height: 146px;
}
.tutorial.game_sp_find .pop.p2 .card {
  color: #ffffff;
}

.tutorial.game_sp_find .success {
  margin-top: 78px;
}