@charset "UTF-8";

/* common.css */

/* Black Han Sans 폰트 설정 */
@font-face {
  font-family: "Black Han Sans";
  src: url("/font/black-han-sans.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* Inter 폰트 설정 */
@font-face {
  font-family: "Inter";
  src: url("/font/inter.woff2") format("woff2");
  font-weight: normal; /* 기본 굵기 설정 */
  font-style: normal;
}

/* Montserrat 폰트 설정 */
@font-face {
  font-family: "Montserrat";
  src: url("/font/montserrat.woff2") format("woff2");
  font-weight: normal; /* 기본 굵기 설정 */
  font-style: normal;
}

/* Chosun Centennial 폰트 설정 */
@font-face {
  font-family: "ChosunCentennial";
  src: url("/font/chosunCentennial_ttf.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SangSangRock";
  src: url("https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/SangSangRockOTF.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");

@import url("https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css");

/* -------------------- 공통 ----------------------------- */
body {
  margin: 0; /* 여백 제거 */
  padding: 0;
  background: #eee;
  font-family: "Noto Sans KR", sans-serif;

  user-select: none; /* 텍스트 선택 방지 */
  -webkit-user-select: none; /* 크롬, 사파리 */
  -ms-user-select: none; /* IE/Edge */
  -moz-user-select: none; /* Firefox */
  -webkit-touch-callout: none; /* 복사 메뉴 방지 */
}

.container {
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
  height: 900px;
  max-height: 900px;
}

@keyframes bgp-lr {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -800px 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* header */
.header {
  background: #e1c492;
  padding: 10px 30px 0;
}

.header ul.gnb {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-self: stretch;
  align-items: center;
}

.header ul.gnb li {
  flex: 1;
}
.header ul.gnb li a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.header ul.gnb li a em.icon {
  width: 52px;
  height: 52px;
  background: url(/img/00-icon.png) no-repeat;
  position: relative;
}

.header ul.gnb li:nth-child(2) a em.icon {
  background-position: -60px 0;
}
.header ul.gnb li:nth-child(3) a em.icon {
  background-position: -120px 0;
}
.header ul.gnb li:nth-child(4) a em.icon {
  background-position: -180px 0;
}
.header ul.gnb li:nth-child(5) a em.icon {
  background-position: -240px 0;
}

.header ul.gnb li:nth-child(1):hover a em.icon {
  background-position: 0px -60px;
}
.header ul.gnb li:nth-child(2):hover a em.icon {
  background-position: -60px -60px;
}
.header ul.gnb li:nth-child(3):hover a em.icon {
  background-position: -120px -60px;
}
.header ul.gnb li:nth-child(4):hover a em.icon {
  background-position: -180px -60px;
}
.header ul.gnb li:nth-child(5):hover a em.icon {
  background-position: -240px -60px;
}

.header ul.gnb li:nth-child(4) a em.icon i {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: red;
  position: absolute;
  top: 10px;
  left: calc(50% + 2px);
}

.header ul.gnb li a span {
  padding: 5px 0;
  color: #944000;
  font-weight: 500;
  font-family: "ChosunCentennial";
}

.header ul.gnb li:hover a span {
  color: #075c4c;
}

/* mypage-btn */
.inner {
  position: relative;
}
.qk-btn {
  position: absolute;
  background: linear-gradient(-52deg, #8b6200, #e1a000, #ffc433, #ffffff);
  box-shadow: 0 3px 6px 2px #664f1538;
  padding: 5px;
  border-radius: 100%;
  bottom: 30px;
  right: 3%;
  z-index: 99;
}
.qk-btn a {
  display: block;
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  width: 60px;
  height: 60px;
}
.qk-btn a img {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* bg-map */
.bg-map {
  background: url(/img/00-bg-map.jpg) no-repeat;
}
/* bg-note */
.bg-note {
  position: relative;
  background: url(/img/00-bg-note.jpg) no-repeat;
}
/* bg-house */
.bg-house {
  position: relative;
  background: #f4dead url(/img/00-bg-house.png) no-repeat bottom center /
    contain;
}

/* popup */
.modal-popup {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  /* display: none; */
}
.modal-popup .popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* roll2 */
.roll2 {
  width: 400px;
  height: 540px;
  position: relative;
  background: #517c57;
  box-shadow: 4px 6px 16px 8px #141f16c9;
}

.roll2::before,
.roll2::after {
  content: "";
  width: 420px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.roll2::before {
  height: 48px;
  top: -50px;
  background: url(/img/04-pop-rolltop.png) no-repeat center center / contain;
}

.roll2::after {
  bottom: -12px;
  height: 12px;
  background: url(/img/04-pop-rollbt.png) no-repeat center center / contain;
}

.roll2 .inner {
  background: #fff;
  position: absolute;
  width: 100%;
  padding: 30px 20px;
  box-sizing: border-box;
  top: 50%;
  transform: translateY(-50%);
  height: 400px;
}

/* tit */
.content h2.tit {
  display: block;
  position: relative;
  margin: 50px auto 30px;
  text-align: center;
  font-family: "ChosunCentennial";
  font-size: 42px;
}

.content h2.tit::after {
  content: "";
  width: 70px;
  height: 70px;
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  background: url(/img/00-tit-after.svg) no-repeat;
  opacity: 0.8;
}

/* roll */
.roll {
  width: 400px;
  box-sizing: border-box;
  box-shadow: 2px 0 6px 4px #692e008e, 4px 0px 12px 4px #692e0073;
  position: relative;
  margin: auto;
  padding: 20px 10px;
  max-height: 0;
}

.roll::before,
.roll:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 455px;
  height: 42px;
  background: url(/img/00-roll-top.svg) no-repeat top center / 100%;
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.25));
}

.roll:after {
  top: -28px;
  transform: translateX(-50%);
}

.roll::before {
  bottom: -28px;
  transform: translateX(-50%) rotateX(180deg);
}

.roll .inner {
  border: 3px double #4e1900;
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

.roll .inner::before {
  content: "";
  position: absolute;
  top: -0px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 50px;
  background: url(/img/00-roll-top2.svg) no-repeat top center / 100%;
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));
}

/* ok-btn */
.ok-btn {
  display: block;
  outline: none;
  width: 80px;
  height: 35px;
  border-radius: 5px;
  background: #a66f37;
  box-shadow: inset 0 0 0 3px #f3ad6540, 0 0px 0 2px #875b2e;
  border: 1px solid #875b2e;
  color: #fff;
  margin: 30px auto 0;
  font-size: 16px;
  transition: 0.3s;
  cursor: pointer;
}

.ok-btn:hover {
  box-shadow: inset 0 0 0 3px #f3ad6540, 0 0px 0 4px #875b2e;
  background: #704a24;
}

.close-btn {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: #a66f37 url(/img/00-x.svg) no-repeat center center / 40%;
}

.close-btn:hover {
  background: #704a24 url(/img/00-x.svg) no-repeat center center / 40%;
}

.close-btn p {
  text-indent: -9999px;
  opacity: 0;
}

/* confirm popup */
.confirm::before {
  content: "";
  top: -50px;
  left: 0;
  width: 80px;
  height: 50px;
  position: absolute;
  background: url(/img/00-confirm-crown.png) no-repeat bottom left;
}
.confirm {
  z-index: 9999999;
  background: #fff1b4;
  border-radius: 18px;
  border: 2px solid #5d3c26;
  width: 380px;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 55px 50px;
  box-shadow: inset 0px 0px 0px 8px #a16332, rgba(0, 0, 0, 0.25) 0px 14px 28px,
    rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
/* 
.confirm .popup::before {
  content: "";
  top: -50px;
  left: 0;
  width: 120px;
  height: 50px;
  position: absolute;
  background: url(/img/00-confirm-crown.png) no-repeat bottom left;
} */
/* .confirm .popup {
  z-index: 9999999;
  background: #fff1b4;
  border-radius: 18px;
  border: 2px solid #5d3c26;
  width: 380px;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 55px 50px;
  box-shadow: inset 0px 0px 0px 8px #a16332, rgba(0, 0, 0, 0.25) 0px 14px 28px,
    rgba(0, 0, 0, 0.22) 0px 10px 10px;
} */
.confirm .txt {
  text-align: center;
  color: #9d6132;
  font-weight: bold;
  font-size: 20px;
  display: block;
  line-height: 1.2em;
  margin-bottom: 35px;
}
.confirm .txt2 {
  text-align: center;
  color: #9d6132;
  font-weight: bold;
  font-size: 15px;
  display: block;
  line-height: 1.2em;
  margin-bottom: 20px;
}
.confirm .txt3 {
  text-align: center;
  color: #9d6132;
  font-weight: bold;
  font-size: 15px;
  display: block;
  line-height: 1.2em;
  margin-bottom: 20px;
}
.confirm .btn {
  text-align: center;
}
.confirm .btn button {
  border: 1px solid #fff;
  color: #fff;
  height: 40px;
  width: 120px;
  margin: 5px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 500;
  transition: 0.3s;
}
.confirm .btn button.no {
  background: #1693dc;
  box-shadow: inset 0 4px 4px 0 #00000025, 0 2px 0 2px #1688ca;
}
.confirm .btn button.yes {
  background: #01dd01;
  box-shadow: inset 0 4px 4px 0 #00000025, 0 2px 0 2px #00b800;
}
.confirm .btn button.no:hover {
  background: #0d73ad;
}
.confirm .btn button.yes:hover {
  background: #008b00;
}

/* loading */
.confirm {
  /* display: none; */
}
.modal-popup.loading {
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(54, 33, 2, 0.99) 0%,
    rgba(0, 0, 0, 0.99) 100%
  );
}
.modal-popup.loading .sword-img {
  width: 352px;
  height: 90px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(/img/00-loading-sword3.png) no-repeat left center;
}
.modal-popup.loading .loading-ber {
  width: calc((382px - 100px));
  height: 10px;
  margin: auto;
  padding: 0;
  position: absolute;
  top: 14px;
  left: 105px;
  right: 0;
  bottom: 0;
  list-style: none;
}
.modal-popup.loading .loading-ber li {
  display: block;
  float: left;
  width: calc((100% - 105px) / 5);
  height: 10px;
  margin-right: 10px;
  box-shadow: inset 0px 0px 10px 1px rgba(117, 182, 255, 0.4),
    0px 0px 20px rgba(117, 182, 255, 0.1);
  animation: pulse 1s alternate infinite;
}
.modal-popup.loading .loading-ber li:nth-child(2n) {
  animation-delay: 1s;
}

@keyframes pulse {
  0% {
    background: rgba(255, 255, 255, 1);
    box-shadow: inset 0px 0px 10px 2px rgba(117, 182, 255, 0.5),
      0px 0px 40px 2px rgba(105, 135, 255, 1);
  }
  100% {
    background: rgba(255, 255, 255, 0);
    box-shadow: inset 0px 0px 10px 2px rgba(117, 182, 255, 0.5),
      0px 0px 30px 2px rgba(105, 135, 255, 0.3);
  }
}

/* ---------------------- home ---------------------- */

.home {
  background: #fff3de url(/img/00-bg-home.png) no-repeat bottom center / contain;
}
.game-list {
  margin: auto;
}
.game-list .game-feature {
  font-size: 0;
  word-spacing: 0;
  letter-spacing: 0;
  max-width: 630px;
  height: 560px;
  margin: auto;
  padding: 10px;
  overflow-y: auto;
}
.game-list .game-feature::-webkit-scrollbar {
  display: none;
}
.game-list .map .card.screen {
  filter: blur(1px);
  -webkit-filter: blur(1px);
}
.game-list .map {
  border-radius: 12px;
  display: inline-block;
  font-size: 16px;
  width: 190px;
  height: 260px;
  margin-right: 20px;
  margin-bottom: 20px;
  background: url(/img/H-bg-card.jpg) no-repeat center center;
  border: 1px solid #6f685d;
  box-shadow: 0 2px 4px 4px #3d1d037c, 0 4px 8px 6px #3d1d033d,
    0 6px 16px 8px #3d1d030e;
  padding: 10px;
  position: relative;
  font-family: "ChosunCentennial";
  color: #582412;
}
.game-list .map:nth-child(3n) {
  margin-right: 0;
}
.game-list .map::after {
  content: "";
  width: calc(100% - 20px);
  height: 3px;
  background: #7a5137;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.game-list .map .g-tit {
  text-align: center;
  padding: 10px;
  border: 1px solid #7a5137;
  border-bottom-width: 2px;
  position: relative;
}
.game-list .map .g-tit::before,
.game-list .map .g-tit::after {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  background: url(/img/H-tit-pattern.png) no-repeat;
  top: 0;
}
.game-list .map .g-tit::before {
  left: 0;
}
.game-list .map .g-tit::after {
  right: 0;
  transform: rotate(90deg);
}
.game-list .map .g-tit h4 {
  font-size: 18px;
  font-weight: 500;
}
.game-list .map .g-thum {
  margin: 13px 0;
  width: 100%;
  height: 110px;
  border: 1px solid #7c6255;
  position: relative;
  box-shadow: inset 0 0 4px 4px #7c6255;
}
.game-list .map .g-thum::before {
  content: "";
  width: 100%;
  height: 2px;
  background: #7c6255;
  position: absolute;
  top: -5px;
  left: 0;
}

.game-list .map .g-thum img {
  width: 100%;
  height: 100%;
}
.game-list .map .g-info {
  position: relative;
  padding: 8px 0;
  border: 1px solid #9a8479;
  font-size: 0;
  letter-spacing: 0;
  word-spacing: 0;
}
.game-list .map .g-info::before {
  content: "";
  width: 98.5px;
  height: 15px;
  position: absolute;
  top: -7.5px;
  left: 50%;
  transform: translateX(-50%);
  background: url(/img/H-info-pattern.png) no-repeat center center;
}
.game-list .map .g-info > div {
  display: inline-block;
  width: 50%;
  font-size: 14px;
  text-align: center;
}
.game-list .map .g-info .l-box {
  border-right: 1px solid #9a8479;
}
.game-list .map .g-info p {
  padding: 5px;
  line-height: 1.25em;
}

.game-list .map .close {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(/img/H-lock.png) no-repeat center center;
  border-radius: 12px;
  top: 0;
  left: 0;
  z-index: 2;
}

/* -------------------- 00--preloading ---------------------------- */

.preloading {
  overflow: hidden;
  height: 100vh;
  max-height: 100vh;
}

.preloading .inner {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  animation: bg-c 0.9s 3.4s both linear;
}
@keyframes bg-c {
  0% {
    background-color: #000;
  }
  50% {
    background-color: #fff;
  }
  85% {
    background: url(/img/loading-bg.png) no-repeat top center / cover;
  }
  100% {
    background: url(/img/loading-bg.png) no-repeat top center / cover;
  }
}
.preloading .inner .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  visibility: visible;
  /*animation:fade-out .5s 3s both linear; */
}
.logo .knife {
  width: 100%;
  max-width: 450px;
  height: 1vh;
  position: absolute;
  top: 46%;
  left: -200%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  background: linear-gradient(
    to right,
    #4d4d4dde 0,
    #fff 10%,
    #4d4d4d 20%,
    #fff 30%,
    #4d4d4d 40%,
    #fff 50%,
    #4d4d4d 60%,
    #fff 70%,
    #4d4d4d 80%,
    #fff 90%,
    #4d4d4d 100%
  );
  background-size: 300%;
  background-position: 0;
  animation: knife-p 1.5s cubic-bezier(0.95, 0, 1, 1), shine 2s infinite linear;
  animation-fill-mode: forwards;
  opacity: 0.85;
}

@keyframes knife-p {
  0% {
    left: -180%;
  }
  30% {
    left: -180%;
  }
  100% {
    left: 48%;
  }
}

.logo .knife::before {
  content: "";
  width: 100px;
  height: 420%;
  position: absolute;
  left: -98px;
  top: 50%;
  transform: translateY(-50%);
  background: url(/img/knife-bf.png) no-repeat center right / contain;
}
.logo .knife::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: calc(100% - 1px);
  transform: translateY(-50%);
  border-bottom: 0.7vh solid transparent;
  border-top: 0.7vh solid transparent;
  border-left: 2.6vw solid #c2c2c2;
  border-right: 2.6vw solid transparent;
  animation: edge-c 2.5s infinite linear;
  animation-fill-mode: forwards;
}
@keyframes edge-c {
  0% {
    border-left: 2.5vw solid #e2e2e2;
  }
  20% {
    border-left: 2.5vw solid #cecece;
  }
  40% {
    border-left: 2.5vw solid #555555;
  }
  60% {
    border-left: 2.5vw solid #747474;
  }
  80% {
    border-left: 2.5vw solid #7e7e7e;
  }
  100% {
    border-left: 2.5vw solid #808080;
  }
}

@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}
.logo {
  animation: fade-out 0.5s 3s both linear;
}

@keyframes fade-out {
  0% {
    opacity: 100%;
    visibility: visible;
    width: 500px;
  }
  79.9999% {
    width: 500px;
  }
  80% {
    width: 0%;
  }
  100% {
    opacity: 0%;
    visibility: hidden;
    width: 0;
  }
}

.logo .ahaking {
  position: relative;
  overflow: hidden;
  filter: brightness(200%);
}

.logo .ahaking .txt {
  position: relative;
  text-transform: uppercase;
  background-color: #000;
  color: #fff;
  font-size: 70px;
  font-size: 5vw;
  font-family: math;
  user-select: none;
  display: block;
}
.logo .ahaking .txt::before {
  content: attr(data-text);
  position: absolute;
  color: #fff;
  filter: blur(0.02em);
  mix-blend-mode: difference;
}

.logo .ahaking .gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, red, gold, lightgreen, gold, red);
  mix-blend-mode: multiply;
}

.logo .ahaking .spotlight {
  position: absolute;
  top: -100%;
  left: -100%;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, white, transparent 25%) center / 25% 25%,
    radial-gradient(circle, white, black 25%) center / 12.5% 12.5%;
  animation: light 5s linear infinite;
  mix-blend-mode: color-dodge;
}
@keyframes light {
  to {
    transform: translate(50%, 50%);
  }
}

.loading-img .skip {
  z-index: 99;
  position: absolute;
  min-width: 100px;
  min-height: 40px;
  top: 265px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.8vh 1.2vw;
  background: #bb7b44;
  border: 2px solid #e0b48c;
  border-radius: 3px;
  box-shadow: 0 0.3em 0 0.2em #8b5c32, 0 0.3em 0.3em 0.2em #3b2715da;
  font-size: 14px;
  font-weight: bold;
  color: #ffe7d3;
  animation: fade-in 0s 5s linear both;
  transition: 0.3s;
  cursor: pointer;
  visibility: visible;
}
.loading-img .skip:hover {
  background: #8b5c32;
}

@keyframes fade-in {
  0% {
    opacity: 0%;
    visibility: hidden;
    width: 0;
  }
  0.0001% {
    width: 100%;
  }
  100% {
    opacity: 100%;
    visibility: visible;
  }
}

.preloading .inner .tit-animation {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 100px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}
.preloading .inner .tit-animation span {
  position: relative;
  top: 20px;
  display: inline-block;
  animation: bounce 0.3s ease infinite alternate;

  font-family: "Titan One", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 90px;
  color: #fa7400;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
    0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
    0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
}
.preloading .inner .tit-animation span:nth-child(2) {
  animation-delay: 0.1s;
}
.preloading .inner .tit-animation span:nth-child(3) {
  animation-delay: 0.2s;
}
.preloading .inner .tit-animation span:nth-child(4) {
  animation-delay: 0.3s;
}
.preloading .inner .tit-animation span:nth-child(5) {
  animation-delay: 0.4s;
}
.preloading .inner .tit-animation span:nth-child(6) {
  animation-delay: 0.5s;
}
.preloading .inner .tit-animation span:nth-child(7) {
  animation-delay: 0.6s;
}
.preloading .inner .tit-animation span:nth-child(8) {
  animation-delay: 0.7s;
}
@keyframes bounce {
  100% {
    top: -20px;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
      0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,
      0 50px 25px rgba(0, 0, 0, 0.2);
  }
}

.blue {
  color: #0070ff !important;
}
.purple {
  color: #5b3c8a !important;
}
.preloading .inner .loading-img {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  animation: fade-in 1s 4s linear both;
}
.loading-img .person {
  width: 100%;
  height: 70%;
  position: relative;
  top: 80px;
}

.loading-img .person .img {
  width: 46%;
  height: 100%;
  position: absolute;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

.loading-img .person .img.left-img {
  left: -100%;
  background-image: url(/img/intro/a1.webp);
  animation: left-img 25s 5s ease-in infinite;
}
.loading-img .person .img.right-img {
  right: -100%;
  background-image: url(/img/intro/a2.webp);
  background-size: 85%;
  animation: right-img 25s 5.2s ease-in infinite;
}

@keyframes left-img {
  0% {
    background-image: url(/img/intro/a1.webp);
    left: -100%;
    background-size: 85%;
  }
  3% {
    left: 0;
  }
  13.6666% {
    left: 0;
  }
  16.6666% {
    background-image: url(/img/intro/a1.webp);
    left: -100%;
    background-size: 85%;
  }

  16.6667% {
    background-image: url(/img/intro/a3.webp);
    left: -100%;
    background-size: 67%;
  }
  19.6667% {
    left: 0%;
  }
  30.3333% {
    left: 0%;
  }
  33.3333% {
    background-image: url(/img/intro/a3.webp);
    left: -100%;
    background-size: 67%;
  }

  33.3334% {
    background-image: url(/img/intro/a5.webp);
    left: -100%;
    background-size: 56%;
  }
  36.3334% {
    left: 0;
  }
  47% {
    left: 0;
  }
  50% {
    background-image: url(/img/intro/a5.webp);
    left: -100%;
    background-size: 56%;
    background-position: center bottom;
  }

  50.0001% {
    background-image: url(/img/intro/a7.webp);
    left: -100%;
    background-size: 61%;
    background-position: center bottom 40px;
  }
  53.0001% {
    left: 0;
  }
  63.6666% {
    left: 0;
  }
  66.6666% {
    background-image: url(/img/intro/a7.webp);
    left: -100%;
    background-size: 61%;
    background-position: center bottom 40px;
    width: 46%;
  }

  66.6667% {
    background-image: url(/img/intro/a9.webp);
    left: -100%;
    background-size: 100%;
    background-position: center bottom 40px;
    width: 54%;
  }
  69.6667% {
    left: 0;
  }
  80.3333% {
    left: 0;
  }
  83.3333% {
    background-image: url(/img/intro/a9.webp);
    left: -100%;
    background-size: 100%;
    background-position: center bottom 40px;
    width: 54%;
  }

  83.3334% {
    background-image: url(/img/intro/a11.webp);
    left: -100%;
    background-size: 75%;
    background-position: center bottom 50px;
    width: 46%;
  }
  86.3334% {
    left: 0;
  }
  97% {
    left: 0;
  }
  100% {
    background-image: url(/img/intro/a11.webp);
    left: -100%;
    background-size: 75%;
    background-position: center bottom 50px;
    width: 46%;
  }
}
@keyframes right-img {
  0% {
    background-image: url(/img/intro/a2.webp);
    right: -100%;
    background-size: 85%;
  }
  3% {
    right: 0;
  }
  13.6666% {
    right: 0;
  }
  16.6666% {
    background-image: url(/img/intro/a2.webp);
    right: -100%;
    background-size: 85%;
    background-position: center bottom;
  }

  16.6667% {
    background-image: url(/img/intro/a4.webp);
    right: -100%;
    background-size: 72%;
    background-position: center bottom 60px;
  }
  19.6667% {
    right: 0%;
  }
  30.3333% {
    right: 0%;
  }
  33.3333% {
    background-image: url(/img/intro/a4.webp);
    right: -100%;
    background-size: 72%;
    background-position: center bottom 60px;
  }

  33.3334% {
    background-image: url(/img/intro/a6.webp);
    right: -100%;
    background-size: 56%;
    background-position: center bottom 40px;
  }
  36.3334% {
    right: 0;
  }
  47% {
    right: 0;
  }
  50% {
    background-image: url(/img/intro/a6.webp);
    right: -100%;
    background-size: 56%;
  }

  50.0001% {
    background-image: url(/img/intro/a8.webp);
    right: -100%;
    background-size: 61%;
  }
  53.0001% {
    right: 0;
  }
  63.6666% {
    right: 0;
  }
  66.6666% {
    background-image: url(/img/intro/a8.webp);
    right: -100%;
    background-size: 61%;
    background-position: center bottom 40px;
  }

  66.6667% {
    background-image: url(/img/intro/a10.webp);
    right: -100%;
    background-size: 80%;
    background-position: center bottom 60px;
  }
  69.6667% {
    right: 0;
  }
  80.3333% {
    right: 0;
  }
  83.3333% {
    background-image: url(/img/intro/a10.webp);
    right: -100%;
    background-size: 80%;
    background-position: center bottom 60px;
  }

  83.3334% {
    background-image: url(/img/intro/a12.webp);
    right: -100%;
    background-size: 70%;
    background-position: center bottom;
  }
  86.3334% {
    right: 0;
  }
  97% {
    right: 0;
  }
  100% {
    background-image: url(/img/intro/a12.webp);
    right: -100%;
    background-size: 70%;
    background-position: center bottom;
  }
}

.loading-img .map {
  width: 100%;
  height: 42%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
.loading-img .map .img {
  width: 100%;
  height: 100%;
  background: url(/img/loading-bt.png) no-repeat top center / cover;
  filter: drop-shadow(0px -5px 12px #00153b5d);
}

@keyframes sizeup {
  0% {
    transform: scale(0);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: scale(1);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: scale(0.7);
    animation-timing-function: ease-in;
  }
  72% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  81% {
    transform: scale(0.84);
    animation-timing-function: ease-in;
  }
  89% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
  95% {
    transform: scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: scale(1);
    animation-timing-function: ease-out;
  }
}

/* -------------------- 01-login ---------------------------- */
.container.login {
  background-position: -100000px 0;
  animation: bgp-lr 80s linear infinite;
}
.container.login .inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.login-content {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login-content h2.tit {
  margin-top: 80px;
  text-align: center;
  font-family: "ChosunCentennial";
  font-size: 48px;
}

.login-content h2.tit b {
  font-size: 60px;
}

.login-content h2.tit br {
  display: none;
}

.login-content .sns-login .sns-btn {
  margin-top: 50px;
}

.login-content .sns-login .sns-btn a {
  display: block;
  text-align: center;
  max-width: 375px;
  padding: 20px 0;
  box-shadow: 0 4px 4px 0 rgba(87, 32, 0, 0.15);
  border-radius: 5px;
  margin: 10px auto;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  position: relative;
}

.login-content .sns-login .sns-btn a.kakao {
  background: #ffe600;
  color: #381e1e;
  text-shadow: none;
}
.login-content .sns-login .sns-btn a.naver {
  background: #00c536;
}
.login-content .sns-login .sns-btn a.facebook {
  background: #1877f2;
}
.login-content .sns-login .sns-btn a.google {
  background: #ea4335;
}
.login-content .sns-login .sns-btn a.apple {
  background: #000;
}

.login-content .sns-login .sns-btn a img {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(8px, -50%);
}

.login-content .sns-login .sns-btn a.kakao img {
  width: 25px;
  height: 25px;
  left: 6px;
}

.login-content .sns-login .sns-btn a.facebook img,
.login-content .sns-login .sns-btn a.apple img {
  width: 22px;
  height: 22px;
}

.login .inner p.inquiry-txt {
  width: 100%;
  position: absolute;
  bottom: 30px;
  text-align: center;
  color: #5e5e5e;
}

/* -------------------- 02-store ---------------------------- */
.container.store .header ul.gnb li:nth-child(1) a em.icon {
  background-position: 0px -60px;
}
.container.store .header ul.gnb li:nth-child(1) a span {
  color: #0a6d5b;
}

.store {
  background: #ffebbd;
}

.store-content {
  padding: 0 2.5%;
  position: relative;
}
.store-content .top {
  position: relative;
  width: 100%;
  height: 190px;
  background: url(/img/02-roof.png) no-repeat top center / contain;
  z-index: 2;
}
.store-content .coin-box {
  min-width: 130px;
  padding: 8px 20px;
  border-radius: 30px;
  border: 1px solid #000000;
  background: #310000c7;
  box-shadow: 0 4px 4px #0000003a;
  position: absolute;
  top: 7vw;
  right: 10%;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.store-content .coin-box p {
  display: inline-block;
  transform: translateY(-6px);
  width: calc(100% - 35px);
  text-align: right;
}
.store-content .coin-box em {
  content: "";
  width: 25px;
  height: 25px;
  display: inline-block;
  margin-right: 5px;
  background: url(/img/00-icon-walnut.svg) no-repeat center center;
}

.store-content {
  padding: 0 7%;
}
.store-content .front {
  margin: auto;
  text-align: center;
  margin-top: 50px;
  z-index: 5;
  position: relative;
}
.store-content .front .tit {
  display: inline-block;
  width: 307px;
  height: 114px;
  border-radius: 15px;
  background: linear-gradient(to bottom, #f3bc56, #f4ab4f);
  box-shadow: 0 6px 4px rgba(92, 52, 0, 0.493);
  position: relative;
}

.store-content .front .tit::before,
.store-content .front .tit::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.store-content .front .tit::before {
  left: 15px;
}
.store-content .front .tit::after {
  right: 15px;
}
.store-content .front .tit div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  font-family: "ChosunCentennial";
}
.store-content .front .tit div h2 {
  color: #fd633b;
  font-weight: bold;
  font-size: 42px;
}
.store-content .front .tit div p {
  padding: 5px;
  margin-top: 10px;
  border-top: 2px solid #eee;
  border-bottom: 2px solid #eee;
  font-size: 16px;
}

.store-content .shop {
  margin: -70px auto 0;
}
.shop .shop-list {
  padding: 0 50px;
}
.shop .shop-list .list-inner {
  background: #ffdcbb;
  border: 30px solid #ab6e44;
  box-shadow: inset 0 -10px 25px 9px #692e004a;
  border-bottom-width: 110px;
  height: calc(600px);
  padding: 60px 10px 25px;
  overflow-y: auto;
  position: relative;
  margin-top: -73px;
}
.shop .shop-list .list-inner::-webkit-scrollbar {
  display: none;
}
.shop::after {
  content: "";
  background: url(/img/02-counter.png) no-repeat bottom center;
  width: 120px;
  height: 120px;
  position: absolute;
  bottom: 110px;
  right: 12%;
}
.shop .shop-list::-webkit-scrollbar {
  width: 10px;
}
.shop .shop-list::-webkit-scrollbar-button {
  display: none;
}

.shop .shop-list .goods {
  background: #d57f3b;
  border-radius: 15px;
  max-width: 480px;
  margin: auto;
  border: 3px solid #93524a;
  margin-bottom: 35px;
  padding: 5px;
  box-shadow: 0 4px 8px #0000003f;
}

.shop .shop-list .goods > div {
  border: 1px solid #c96847;
  background: #ffefd8;
  border-radius: 12px;
  padding: 10px;
}
.shop-list .goods .gd-name {
  height: 45px;
  line-height: 45px;
  padding: 0 15px;
  /* background: #F9E2CD; */
  background: url(/img/02-bg-tit.png) no-repeat center center / contain;
  color: #874100;
  text-shadow: 1px 1px 1px #ffc768;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
.shop-list .goods .info {
  font-size: 0;
  letter-spacing: 0;
  word-spacing: 0;
  margin-top: 15px;
  display: flex;
}
.shop-list .goods .info .thum {
  width: 120px;
  height: 165px;
  background: #eee;
  display: inline-block;
  margin-right: 10px;
  border-radius: 5px;
  /* overflow: hidden; */
  border: 2px solid brown;
  position: relative; /* 자식 요소를 기준으로 위치 설정 가능 */
}
.shop-list .goods .info .thum img {
  width: 100%;
  height: 100%;
}

.shop-list .goods .info .heart {
  display: flex; /* 내용 정렬을 위한 flexbox 사용 */
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 26px;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4); /* 그라데이션 배경 */
  color: white; /* 텍스트 색상 */
  font-size: 14px; /* 글씨 크기 */
  font-weight: bold; /* 글씨 굵기 */
  text-align: center;
  border: 2px solid #ff6f61; /* 테두리 색상 */
  border-radius: 15px; /* 둥근 테두리 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 입체감 추가 */
  margin-top: 10px; /* 간격 추가 */
}

.shop-list .goods .info .buy {
  width: calc(100% - 130px);
  display: inline-block;
  vertical-align: top;
}
.shop-list .goods .detail {
  padding: 10px;
  background: #ffd5a9;
  height: 100px;
  overflow-y: auto;
  border-radius: 5px;
  border: 2px solid #fff0d5;
}
.shop-list .goods .detail::-webkit-scrollbar {
  width: 10px;
}
.shop-list .goods .detail::-webkit-scrollbar-button {
  display: none;
}
.shop-list .goods .detail p {
  line-height: 1.25em;
  font-size: 15px;
  color: #562600;
}
.shop-list .goods .info .buy .gd-price {
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  background: #ffe8bd;
  border-radius: 5px;
  position: relative;
  margin-top: 10px;
  font-size: 16px;
}
.shop-list .goods .info .buy .gd-price em {
  width: 22px;
  height: 22px;
  margin-right: 5px;
  transform: translateY(5.5px);
  background: url(/img/00-icon-walnut.svg) no-repeat center center / contain;
  display: inline-block;
}
.shop-list .goods .info .buy .gd-price p {
  display: inline-block;
  color: #643800;
  font-weight: bold;
}
.shop-list .goods .info .buy button {
  padding: 5px 15px;
  border-radius: 30px;
  background: #e96249;
  border: 2px solid #93524a;
  color: #fff;
  margin-left: 15px;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.shop-list .goods .info .buy button.complete {
  background: #969696 !important;
}

/* -------------------- 03-ranking ---------------------------- */
.container.ranking .header ul.gnb li:nth-child(2) a em.icon {
  background-position: -60px -60px;
}
.container.ranking .header ul.gnb li:nth-child(2) a span {
  color: #0a6d5b;
}
.tabs {
  overflow: hidden;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 10px;
}

.tabs li {
  float: left;
  box-sizing: border-box;
  background: #9a8777;
  border: 2px solid #a44232;
  border-right: 0;
  box-shadow: 0px 8px 0px #65594e;
}

.tabs li.on {
  background: #dc882a;
  box-shadow: 0px 8px 0px #9e611c;
}

.tabs li:first-child {
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
}

.tabs li:last-child {
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  border-right: 2px solid #a44232;
}

.tabs li a {
  display: block;
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;

  text-shadow: 1px 1px 2px #00000070;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}
.list-st {
  margin-top: 30px;
  padding: 0 8%;
}

.rk-list .tabs li {
  width: 25%;
}

.tab-cont .list {
  max-height: 510px;
  overflow-y: auto;
  padding: 10px;
}
.tab-cont .list::-webkit-scrollbar {
  display: none;
}
.brief {
  margin-top: 10px;
}
.brief em {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #fff;
  box-shadow: 0px 1px 1px #000;
  margin: 10px auto;
}

.tab-cont .my-rk {
  margin-top: 10px;
  padding: 10px;
}
.tab-cont .rk-box {
  border: 1px solid #beb3a7;
  box-shadow: 0 4px 8px #00000050;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px;
  height: 90px;
  background: #ede6dc;
  margin-bottom: 10px;
}
.tab-cont .rk-box:last-child {
  margin-bottom: 0;
}
.tab-cont .rk-box.rk {
  background-repeat: no-repeat;
  background-position: center center;
}
.tab-cont .rk-box.rk1 {
  background-image: url(/img/03-bg-rk1.jpg);
}
.tab-cont .rk-box.rk2 {
  background-image: url(/img/03-bg-rk2.jpg);
}
.tab-cont .rk-box.rk3 {
  background-image: url(/img/03-bg-rk3.jpg);
}
.tab-cont .rk-box > div {
  float: left;
}

/* left */
.tab-cont .rk-box .left {
  box-sizing: border-box;
  width: 100px;
  height: 100%;
  position: relative;
}
.tab-cont .rk-box .left .spot {
  width: 100%;
  position: absolute;
  top: calc(50% + 4px);
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.tab-cont .rk-box.rk .left .spot {
  width: auto;
}
.tab-cont .rk-box .spot .rank {
  width: 100%;
  font-weight: bold;
  font-size: 20px;
}
.tab-cont .rk-box.rk .left .spot .rank {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  box-shadow: 0 4px 4px #00000095;
  background: url(/img/03-icon-rk.svg) no-repeat;
  background-size: 368%;
  color: #ffd600;
  text-shadow: 1px 1px 1px #000;
  line-height: 44px;
  font-size: 24px;
}
.tab-cont .rk-box.rk1 .left .spot .rank {
  background-position: 0 0;
}
.tab-cont .rk-box.rk2 .left .spot .rank {
  background-position: -64px 0;
}
.tab-cont .rk-box.rk3 .left .spot .rank {
  background-position: -129px 0;
}

.tab-cont .rk-box .left .spot em {
  display: block;
  font-weight: bold;
  margin-top: 4px;
}
.tab-cont .rk-box .left .spot .rk-up {
  color: #ff0000;
}
.tab-cont .rk-box .left .spot .rk-down {
  color: #0038ff;
}
.tab-cont .rk-box .left .spot .rk-sam {
  color: #3d3d3d;
}

.tab-cont .rk-box .left .spot em::before {
  content: "";
  width: 14px;
  height: 10px;
  display: inline-block;
  background: url(/img/03-icon-rk.svg) no-repeat;
  background-size: 450%;
}
.tab-cont .rk-box .left .spot .rk-up::before {
  background-position: 1px -22px;
  color: #ff0000;
}
.tab-cont .rk-box .left .spot .rk-down::before {
  background-position: -16px -22px;
  color: #0038ff;
}
.tab-cont .rk-box .left .spot .rk-sam::before {
  background-position: -31px -22px;
  color: #3d3d3d;
}

/* center */

.tab-cont .rk-box .center {
  min-width: 250px;
  max-width: calc(100% - 260px);
  width: calc(100% - 161px);
  height: 100%;
  overflow: hidden;
}
.tab-cont .rk-box .center .photo {
  float: left;
  width: 65px;
  height: 100%;
  position: relative;
}
.tab-cont .rk-box .center .photo img {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-radius: 100%;
  border: 1px solid #989898;
  box-shadow: 0 0 0 3px #fff;
}

.tab-cont .rk-box .center .info {
  float: left;
  width: calc(100% - 65px);
  height: 100%;
}
.tab-cont .rk-box .center .info .nick {
  width: 100%;
  height: 50%;
  border-bottom: 2px solid #fff;
  position: relative;
}
.tab-cont .rk-box .center .info .nick::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #fff;
  position: absolute;
  bottom: -5.5px;
  right: 0;
}
.tab-cont .rk-box .center .info .nick p {
  display: block;
  width: 100%;
  height: 100%;
  padding: 14px 15px 0;
  font-size: 20px;
  font-weight: bold;
}
.tab-cont .rk-box.rk .center .info .nick p {
  color: #fff;
  text-shadow: 2px 2px 1px #00000080;
}

.tab-cont .rk-box .center .info .lv-progress {
  width: 100%;
  height: 50%;
  padding: 8px 15px 0 25px;
  font-size: 0;
  letter-spacing: 0;
  word-spacing: 0;
}
.tab-cont .rk-box .center .info .lv-progress > div {
  border: 1px solid pink;
  background: #fff;
  padding: 0px 5px;
  border-radius: 30px;
  display: inline-block;
  font-weight: bold;
  color: #674d36;
  font-size: 14px;
}
.tab-cont .rk-box .center .info .lv-progress .lv {
  margin-right: 6px;
  position: relative;
  top: -6px;
}
.tab-cont .rk-box .center .info .lv-progress .lv em.icon {
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: -1px;
  left: -15px;
  background: url(/img/00-icon-lv.svg) no-repeat center bottom / contain;
}
.tab-cont .rk-box .center .info .lv-progress .lv .txt {
  padding: 5px 15px;
  min-width: 100px;
  text-align: center;
}

.tab-cont .rk-box .center .info .lv-progress .progress {
  padding: 2px 5px;
  width: 40%;
  position: relative;
}
.tab-cont .rk-box .center .info .lv-progress .progress .percent {
  background: #fed750;
  width: 0;
  padding: 10px 0;
  border-radius: 30px;
}
.tab-cont .rk-box .center .info .lv-progress .progress .txt {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}

/* right */
.tab-cont .rk-box .right {
  float: right;
  max-width: 180px;
  height: 100%;
}

.tab-cont .rk-box .right .point {
  margin: 18px 20px;
  margin-left: 0;
  background: #fff;
  padding: 3px 15px 3px 10px;
  border-radius: 30px;
  font-size: 0;
  letter-spacing: 0;
  word-spacing: 0;
}
.tab-cont .rk-box .right .point .icon {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-right: 5px;
  transform: translateY(5px);
  background: url(/img/00-icon-point.svg) no-repeat center center / contain;
}
.tab-cont .rk-box .right .point .txt {
  display: inline-block;
  height: 35px;
  line-height: 35px;
  transform: translateY(-7px);
  font-size: 18px;
}

/* -------------------- 04-notice ---------------------------- */
.container.notice .header ul.gnb li:nth-child(4) a em.icon {
  background-position: -180px -60px;
}
.container.notice .header ul.gnb li:nth-child(4) a span {
  color: #0a6d5b;
}

.notice-content {
  width: 100%;
  height: calc(900px - 88px);
  padding: 15px;
  /* border: 4px solid #82281c; */
  box-sizing: border-box;
}
.notice-content > div {
  width: 100%;
  height: 100%;
  padding: 0 8%;
  border: 2px solid #000;
  box-sizing: border-box;
}

.notice-content::before {
  content: "";
  width: 100%;
  height: 350px;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  background: url(/img/00-bg-note-p.jpg) no-repeat bottom center / contain;
}
.content h2.tit {
  max-width: 255px;
}

.notice-content > div ul.nt-list {
  margin: auto;
  max-height: 525px;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}
.notice-content > div ul.nt-list::-webkit-scrollbar {
  width: 10px;
}
.notice-content > div ul.nt-list::-webkit-scrollbar-track {
  background-color: rgb(100, 57, 0);
}
.notice-content > div ul.nt-list::-webkit-scrollbar-thumb {
  background-color: rgba(207, 117, 0, 0.712);
}
.notice-content > div ul.nt-list::-webkit-scrollbar-button {
  display: none;
}

ul.nt-list li {
  margin-bottom: 25px;
}

ul.nt-list li a {
  display: block;
  width: 100%;
  height: 80px;
  margin: auto;
  padding: 15px;
  position: relative;
  box-sizing: border-box;
  border: 1px solid #727272;
  background: #fff7ea;
  box-shadow: 0 4px 6px #00000045;
  transition: 0.3s;
}
ul.nt-list li a:hover {
  background: #ffcb6b;
}

ul.nt-list li a::before,
ul.nt-list li a::after {
  content: "";
  width: 5px;
  height: 95px;
  border: 1px solid #727272;
  background: #adadad;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
}

ul.nt-list li a::before {
  left: -2.5px;
}
ul.nt-list li a::after {
  right: -2.5px;
}
ul.nt-list li a p {
  text-align: center;
  margin-bottom: 8px;
  color: #e9af00;
}

ul.nt-list li a span {
  text-align: center;
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #404558;
}

ul.nt-list li a:hover p {
  color: #5e5e5e;
}

.nt-popup .popup .roll2 .inner .nt-tit {
  border-bottom: 1px solid #000;
  padding: 5px 0;
  line-height: 1.6em;
}

.nt-popup .popup .roll2 .inner .nt-tit h3 {
  font-size: 24px;
  font-family: "ChosunCentennial";
  font-weight: 600;
  border-bottom: 5px solid #000;
  padding: 8px 0px;
}

.nt-popup .popup .roll2 .inner .nt-cont {
  line-height: normal;
  height: 270px;
  box-sizing: border-box;
  padding: 20px 10px 20px 0;
  overflow-y: auto;
}

.nt-popup .popup .roll2 .inner .nt-cont span {
  color: #555;
  line-height: 1.35em;
  font-size: 16px;
}

.nt-popup .popup .roll2 .inner .ok-btn {
  position: absolute;
  bottom: -55px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  line-height: 35px;
}

/* -------------------- 05-setting ---------------------------- */
.container.setting .header ul.gnb li:nth-child(5) a em.icon {
  background-position: -240px -60px;
}
.container.setting .header ul.gnb li:nth-child(5) a span {
  color: #0a6d5b;
}

.content.setting-content h2.tit {
  max-width: 125px;
}

.set-info.roll {
  max-height: 500px;
  background: #3c3c3c;
  animation: open 0.7s 0.1s ease-out both;
}

.set-info.roll .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 500px;
  padding: 0;
  border-color: #edb2be;
  animation: open3 0.7s 0.1s ease-out both;
}

@keyframes open3 {
  0% {
    height: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    height: 280px;
    opacity: 1;
  }
}
.set-info .inner .set {
  display: flex;
  justify-content: center;
  align-items: center;
}

.set-info .inner .set .op.voice {
  margin-left: 50px;
}
.set-info .inner .set .op h3 {
  color: #fff;
  text-align: center;
  font-size: 18px;
}
.set-info .inner .set .op label {
  display: block;
  cursor: pointer;
}

.set-info .inner .set .op label:nth-child(3) {
  width: 60px;
  border-radius: 100%;
  margin: 10px auto 20px;
}

.set-info .inner .set .op label:last-child {
  width: 60px;
  height: 30px;
  border-radius: 30px;
}

.set-info .inner .set .op label .icon-box {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background: url(/img/05-icon-sound.png) no-repeat;
}

.set-info .inner .set .op.sound label .icon-box {
  background-position: 0px -60px;
}
.set-info .inner .set .op.sound input:checked ~ label .icon-box {
  background-position: 0 0px;
}
.set-info .inner .set .op.voice label .icon-box {
  background-position: -60px -60px;
}
.set-info .inner .set .op.voice input:checked ~ label .icon-box {
  background-position: -60px 0px;
}

.set-info .inner .set .op label .on-off {
  width: 100%;
  height: 100%;
  margin: auto;
  position: relative;
  border: 3px solid #efe1c2;
  background: #5e5e5e;
  border-radius: 30px;
  box-sizing: border-box;
}

.set-info .inner .set .op input:checked ~ label .on-off {
  background: #68cf03;
}
.set-info .inner .set .op label .on-off em {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: linear-gradient(to right, #efe0c0, #fafaf3);
  box-shadow: inset 3px 0px 2px 0px #fef7fd, inset -3px 0px 2px 0px #efd093,
    0px 0px 3px 3px #50505083;
}

.set-info .inner .set .op input:checked ~ label .on-off em {
  left: auto;
  right: 0;
}
.set-info .inner .set .op input {
  display: none;
}

/* -------------------- 06-profile ---------------------------- */
.profile-content .user-info {
  background: #ebe5cb;
  animation: open 0.8s ease-out both;
  margin-top: 60px;
}

@keyframes open {
  0% {
    max-height: 0;
  }
  100% {
    max-height: 522px;
  }
}

.profile-content .user-info .inner {
  animation: open2 0.7s 0.1s ease-out both;
}

@keyframes open2 {
  0% {
    max-height: 0;
    padding: 0 30px;
  }
  10% {
    opacity: 0;
  }
  100% {
    max-height: 482px;
    padding: 30px;
    opacity: 1;
  }
}

.user-info .inner .user-photo {
  margin-bottom: 16px;
}

.user-info .inner .user-photo .photo-box {
  overflow: hidden;
  position: relative;
  width: 100px;
  height: 100px;
  margin: auto;
  border: 1px solid #999;
  border-radius: 100%;
  box-shadow: 0 4px 4px #4e260033;
}

.user-info .inner .user-photo .photo-box img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  cursor: pointer;
}

.user-info .inner .user-photo input[type="file"] {
  display: none;
}

.user-info .inner .user-photo label {
  display: inline-block;
  margin: auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 100%;
}

.user-info .inner .user-photo label em.file-btn {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 0px;
  right: -15px;
  transform: translateX(-50%);
  border: 1px solid #999;
  background: #d9d9d9 url(/img/06-camera-fill.svg) no-repeat center center / 70%;
  border-radius: 100%;
  box-shadow: 0 4px 4px #4e260033;
  cursor: pointer;
}
.user-info .inner .user-name {
  text-align: center;
}
.user-info .inner .user-name h3 {
  color: #704b2a;
  font-size: 18px;
  font-weight: 600;
}

.user-info .inner .user-name input[type="text"] {
  display: block;
  margin: 10px auto 5px;
  width: 100%;
  height: 45px;
  line-height: 45px;
  box-sizing: border-box;
  border: 3px solid #ece9e8;
  border-radius: 30px;
  background: #fff;
  box-shadow: inset 1px 2px 2px 0 #5a2d1a, 0px 2px 2px 0 #00000030;
  font-size: 15px;
  text-align: center;
  color: #af9568;
  outline: none;
}
.user-info .inner .user-name input[type="text"]:focus {
  outline: none;
}
.user-info .inner .user-name input[type="text"]:focus::placeholder {
  opacity: 0;
  transition: 0.2s;
}
.user-info .inner .user-name input[type="text"]::placeholder {
  text-align: center;
  color: #af9568;
}
.user-info .inner .user-name input[type="text"] + .warning {
  color: red;
  font-size: 14px;
  font-weight: 500;
}

.user-info .inner .ex {
  width: 100%;
  padding: 20px;
  margin: 10px auto 0;
  background: #fff9ee;
  box-sizing: border-box;
  border-radius: 10px;
}

.user-info .inner .ex p {
  font-size: 14px;
  line-height: 1.35em;
  margin-bottom: 13px;
  color: #4e1900;
  font-weight: 400;
}

.user-info .inner .ex p::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background: #4e1900;
  display: inline-block;
  margin-right: 8px;
  transform: translateY(-3px);
}

.user-info .inner .ex p:last-child {
  margin-bottom: 0;
}

/* -------------------- 07-record  // 09-history ---------------------------- */

.tabs.mypage-tabs li {
  width: calc(100% / 3);
}
.list-st .tab-cont .list {
  max-height: 610px;
  padding: 10px 0px;
}
.list-st .tab-cont .table {
  padding: 10px;
}
.list-st .tab-cont .table ul {
  display: flex;
  justify-items: center;
  align-items: center;
}
.list-st .tab-cont .table ul li {
  text-align: center;
  flex: 1;
  color: #5c2a00;
}
/* th */
.list-st .tab-cont .table ul.th li {
  font-weight: bold;
  font-size: 18px;
  padding: 10px 5px;
}
/* th-txt */
.list-st .tab-cont .table ul.th li p {
  display: inline-block;
}
/* tr */
.list-st .tab-cont .table ul.tr {
  background: #fff2df;
  margin-bottom: 15px;
  box-shadow: 0 4px 4px #5c1a0050;
  border-radius: 10px;
  font-size: 14px;
}
.list-st .tab-cont .table ul.tr:nth-child(2n) {
  background: #ffdb8a;
}
/* td */
.list-st .tab-cont .table ul.tr li {
  padding: 14px 5px 24px 5px;
}
.list-st .tab-cont .table ul.tr li.td {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ----- record ----- */
.record {
  background: #f4dead;
}
/* th-icon */
.rc-list .tab-cont .table ul.th li em {
  width: 25px;
  height: 25px;
  display: inline-block;
  transform: translateY(3px);
  margin-right: 4px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.rc-list .tab-cont .table ul.th li.time em {
  background-image: url(/img/00-icon-time.svg);
}
.rc-list .tab-cont .table ul.th li.lv em {
  background-image: url(/img/00-icon-lv.svg);
}
.rc-list .tab-cont .table ul.th li.point em {
  background-image: url(/img/00-icon-point.svg);
}
.rc-list .tab-cont .table ul.th li.coin em {
  background-image: url(/img/00-icon-walnut.svg);
}
.rc-list .tab-cont .table ul.tr li.td::after {
  content: "";
  width: 100%;
  height: 10px;
  position: absolute;
  bottom: -7px;
  left: 0;
  background: #fd6969;
}
.rc-list .tab-cont .table ul.tr li.td.time::after {
  bottom: 0;
  border-bottom-left-radius: 10px;
}
.rc-list .tab-cont .table ul.tr li.td.lv::after {
  background: #78719a;
}
.rc-list .tab-cont .table ul.tr li.td.point::after {
  background: #fcd66b;
}
.rc-list .tab-cont .table ul.tr li.td.coin::after {
  background: #cacd62;
  border-bottom-right-radius: 10px;
}

/* ----- history ----- */
.history {
  background: beige;
}

.hst-list .tab-cont .table ul.th li {
  padding: 18px 5px;
  flex: 2;
}
.hst-list .tab-cont .table ul.th li:first-child {
  flex: 3;
}
.hst-list .tab-cont .table ul.th li:last-child {
  flex: 4;
}
/* .hst-list  .tab-cont .table ul.th li br{display: none;} */

.hst-list .tab-cont .table ul.tr {
  overflow: hidden;
}
.hst-list .tab-cont .table ul.tr li {
  padding: 15px 5px;
}
.hst-list .tab-cont .table ul.tr li.td {
  flex: 2;
}
.hst-list .tab-cont .table ul.tr li.td.no {
  flex: 3;
}
.hst-list .tab-cont .table ul.tr li.td.product,
.hst-list .tab-cont .table ul.tr li.td.state {
  font-weight: bold;
}
.hst-list .tab-cont .table ul.tr li.td.payment {
  flex: 4;
  text-align: left;
  background: rgba(204, 41, 0, 0.05);
  color: rgba(0, 0, 0, 0.5);
}

.hst-list .tab-cont .table ul.tr li.td::after {
  content: "";
  width: 2px;
  height: 40px;
  background: orangered;
  opacity: 0.1;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.hst-list .tab-cont .table ul.tr li.td:nth-child(4):after,
.hst-list .tab-cont .table ul.tr li.td:last-child:after {
  display: none;
}

/* ----------------------------------------------------------------------- */
/* -------------------------------- 08-game --------------------------------- */
/* .game{border: 1px solid #000;} */
.game .inner {
  height: calc(100%);
}
.game .inner .top {
  width: 100%;
  height: 236px;
  background: url(/img/08-top-roof.jpg) no-repeat top center;
}
.game .inner .top .game-info {
  padding: 10px 30px;
  height: 100%;
}
.top .game-info .line {
  overflow: hidden;
}

/* line1 */
.top .game-info .line1 {
  color: #fff;
}
/* progress */
.top .game-info .line .progress {
  float: left;
}
.top .game-info .line .progress .pg-ber {
  border: 2px solid #d18700;
  width: 140px;
  background: #826100;
  padding: 3px 5px;
  border-radius: 30px;
  display: inline-block;
}
.top .game-info .line .progress .pg-ber .ber {
  background: #ffb000;
  border-radius: 30px;
  padding: 6px 0;
}
.top .game-info .line .progress b {
  transform: translate(3px, -4px);
  display: inline-block;
}
/* time */
.top .game-info .line .time {
  float: right;
}

/* line2 */
.top .game-info .line2 {
  width: 100%;
  height: calc(100% - 55px);
}

/* king-box */
.top .game-info .line .king-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-style: normal;
  font-family: "Lobster", sans-serif;
  font-weight: bolder;
  letter-spacing: 0.1em;
}

/* user-box */
.top .game-info .line .king-box .user-box {
  width: calc((100% - 120px) / 2);
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: end;
}
.top .game-info .line .king-box .user-box .outline {
  background: linear-gradient(
    -60deg,
    #000000 10%,
    white 11%,
    white 20%,
    #000000 21%,
    #000000 30%,
    white 31%,
    white 40%,
    #000000 41%,
    #000000 50%,
    white 51%,
    white 60%,
    #000000 61%,
    #000000 70%,
    white 71%,
    white 80%,
    #000000 81%,
    #000000 90%,
    white 91%,
    white 100%
  );
  width: 150px;
  height: 60px;
  border-radius: 5px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(75, 75, 75);
}
.top .game-info .line .king-box .user-box .life {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  flex-wrap: wrap;
  display: flex;
  background: #fff7f7fc;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #6f6f6f;
}
.top .game-info .line .king-box .user-box .life em.heart {
  width: 20%;
  height: 30px;
  background: url(../img/08-icon-heart.png) no-repeat center center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.top .game-info .line .king-box .user-box .life b {
  font-size: 24px;
}

.top .game-info .line .king-box .user-box .point {
  position: relative;
}
.top .game-info .line .king-box .user-box .point em {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  background: url(../img/00-icon-point.svg) no-repeat center center / contain;
}
.top .game-info .line .king-box .user-box .point p {
  display: inline-block;
  padding: 8px 30px 8px 60px;
  border: 2px solid #f3a113;
  background: #000000a2;
  border-radius: 30px;
  color: #fff;
  font-size: 18px;
}

/* k-photo */
.top .game-info .line .king-box .k-photo {
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
}
.top .game-info .line .king-box .k-photo img {
  width: 100%;
  height: 100%;
}

/* k-info */
.top .game-info .line .king-box .k-info {
  width: calc((100% - 120px) / 2);
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: start;
}
.top .game-info .line .king-box .k-info .sound {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 100%;
  background: url(../img/stop.svg) no-repeat center center;
  background-size: contain;
}
.top .game-info .line .king-box .k-info .sound:hover {
  background: url(../img/stop-hover.svg) no-repeat center center / contain;
}
.top .game-info .line .king-box .k-info .score-wrapper {
  width: 45%;
  height: 38px;
  margin-left: 10px;
  position: relative;
  box-sizing: border-box;
  font-size: 20px;
  font-weight: bold;
}
.king-box .k-info .score-wrapper .icon-wrapper {
  z-index: 1;
  width: 40px;
  height: 40px;
  padding-top: 7px;
  position: absolute;
  left: -10px;
  border: 3px solid #c68306;
  background: orange;
  border-radius: 50%;
  text-align: center;
  color: #fff2d8;
}
.king-box .k-info .score-wrapper .point-bar {
  z-index: 0;
  width: 100%;
  padding: 5px;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid #c68306;
  border-radius: 20px;
  background: #ffa500;
  background: -moz-linear-gradient(-45deg, #ffa500 47%, #ff4500 47%);
  background: -webkit-linear-gradient(-45deg, #ffa500 47%, #ff4500 47%);
  background: linear-gradient(135deg, #ffa500 47%, #ff4500 47%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa500', endColorstr='#ff4500',GradientType=1 );
}
.king-box .k-info .score-wrapper .point-bar .bg {
  width: 100%;
  height: 25px;
  padding: 3px;
  background: rgb(255, 255, 224);
  border-radius: 15px;
}
.king-box .k-info .score-wrapper .point-bar .percentage {
  height: 100%;
  line-height: 0.65em;
  border-radius: 15px;
  text-align: center;
  font-size: 24px;
  font-style: oblique;
  font-family: "Lobster", sans-serif;
  font-weight: bolder;
  text-shadow: 1px 2px 1px #5c0000;
  color: #ff0000;
}

.game-content {
  height: calc(100% - 236px);
  position: relative;
  background: #e4cfa3;
}

/* intro */
.intro {
  z-index: 10;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  /* display: none; */
}
.intro .door {
  width: 50%;
  height: 100%;
  border: 5px solid #755723;
  background: url(/img/08-door.png) no-repeat center center;
  box-shadow: inset 0 0 0 20px #bb7b44, 0 0 80px rgba(100, 51, 9, 0.5),
    0 0 40px rgba(100, 51, 9, 0.8);
}
@keyframes open-ldoor {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-550px);
  }
}

@keyframes open-rdoor {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(550px);
  }
}
.intro .l-door {
  float: left;
  border-right-width: 3px;
}
/*^^좌문열기*/
.intro .l-door.open {
  animation: open-ldoor 1.5s 0.5s ease-in-out both;
}
.intro .r-door {
  float: right;
  border-left-width: 3px;
}
/*^^우문열기*/
.intro .r-door.open {
  animation: open-rdoor 1.5s 0.5s ease-in-out both;
}

/* answer-box */
.game-content .answer-box {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 30px;
  background: #ceb075;
  overflow: hidden;

  border: 2px solid transparent; /* 기본 테두리 */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 테두리 색상과 그림자 변화 애니메이션 */
}

.game-content .answer-box button {
  display: flex; /* Flexbox를 사용 */
  align-items: center; /* 세로 중앙 정렬 */
  justify-content: center; /* 가로 중앙 정렬 */
  cursor: pointer;
  float: left;
  width: calc((100% - 18px) / 2);
  margin-right: 10px;
  background: #fffae3;
  border: 1px solid #452c00;
  border-radius: 5px;
  box-shadow: inset -2px -3px 3px 1px #452c0050, 2px 2px 2px #00000010;
  padding: 16px 8px;
  max-height: 50px;
  font-size: 15px;
  font-weight: bold;
  color: #3c0600;
  text-align: center; /* 텍스트 중앙 정렬 */
}
.game-content .answer-box button:nth-child(2n) {
  margin-right: 0;
}
.game-content .answer-box button:nth-child(1),
.game-content .answer-box button:nth-child(2) {
  margin-bottom: 10px;
}
.game-content .answer-box button.x {
  background: #00a010;
}
.game-content .answer-box button.o {
  background: #ff650e;
  box-shadow: inset 0 0 0 3px #ffe76a, 0 0 2px 2px #ff7a00;
}

/* quiz-box  */
.quiz-box {
  height: calc(100% - 169px);
  padding: 20px;
  background: #ffc233;
  border: 10px solid #feef94;
  overflow: hidden;
}

.quiz-box .quiz {
  width: 100%;
  height: 100%;
  margin-bottom: 30px;
  position: relative;
  background: #fffae3 url(/img/08-bg-pattern.png) no-repeat center center / 40%;
  border: 5px solid #e4cfa3;
  box-shadow: 0px 4px 4px #99721791;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/*^^문제오픈*/
.quiz-box.txt-quiz .quiz.start {
  animation: slide-up 0.5s 7s ease-in-out both;
}
@keyframes slide-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100% - 30px));
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.quiz-box .quiz .timer {
  z-index: 2;
  width: 80px;
  height: 50px;
  margin: 1% 0;
  background: url(/img/08-timer.png) no-repeat top right 15px / contain;
}
.quiz-box .quiz .timer .second {
  position: absolute;
  top: 20px;
  right: 40px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
}
.quiz-box .quiz .question {
  width: 92%;
  height: calc(86% - 140px);
  margin: auto;
  overflow-y: auto;
}
.quiz-box .quiz .question::-webkit-scrollbar {
  width: 10px;
}
.quiz-box .quiz .question::-webkit-scrollbar-thumb {
  background-color: #ff0000;
}
.quiz-box .quiz .question::-webkit-scrollbar-track {
  background-color: rgba(83, 21, 9, 0.322);
}
.quiz-box .quiz .question p {
  position: relative;
  line-height: 1.5em;
  font-size: 22px;
  font-weight: 600;
  color: #371401;
  margin-top: 5px;
}

/* damage */
.quiz-box .quiz .damage {
  padding: 5px 10px 8px;
  position: absolute;
  top: 120px;
  left: 65%;
  background: #000;
  border: 3px solid #000;
  font-size: 34px;
  font-weight: bold;
  font-family: "Montserrat";
  color: #ff0000;
  opacity: 0;
}
.quiz-box .quiz .damage.open {
  animation: dmg-up 2s 0.5s ease-out both;
}
@keyframes dmg-up {
  00% {
    opacity: 0;
    transform: translate(-50%, -40px);
    border-color: #ff0000;
  }
  25% {
    opacity: 1;
    border-color: #000;
  }
  50% {
    transform: translate(-50%, -110px);
    border-color: #ff0000;
  }
  75% {
    opacity: 1;
    border-color: #000;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -110px);
    border-color: #ff0000;
  }
}

.quiz-box .quiz .damage em {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(/img/08-icon-heart.png) no-repeat center bottom / contain;
  transform: translate(5px, 3px);
}
.quiz-box .quiz .damage p {
  display: inline-block;
}

/* txt-quiz */
.txt-quiz {
  /* display: none; */
}
/* img-quiz */
.img-quiz {
  /* display: none; */
}

.quiz-box.img-quiz .quiz .question {
  display: flex;
  padding: 0px;
  align-items: center;
  flex-direction: column;
  height: calc(100% - 120px);
  overflow: hidden;
  overflow-y: auto;
  width: 70%;
}
.quiz-box.img-quiz .quiz .question::-webkit-scrollbar {
  display: none;
}
.img-quiz .question .txt {
  text-align: center;
  padding: 0px;
  margin-bottom: 10px;
  order: 1;
}

.question .img-box {
  width: 98%;
  order: 2;
  background: brown;
  /* min-width: 340px; */
  position: relative;
  border: 6px solid #b33000;
  box-shadow: 5px 5px 10px #0000006a;
}
.question .img-box::before,
.question .img-box::after,
.question .img-box .frame::before,
.question .img-box .frame::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: url(/img/08-qz-imgframe.png) no-repeat top left;
}
.question .img-box::before {
  top: -8px;
  left: -12px;
}
.question .img-box::after {
  left: -8px;
  bottom: -12px;
  transform: rotate(-90deg);
}
.question .img-box .frame::before {
  right: -8px;
  top: -12px;
  transform: rotate(90deg);
}
.question .img-box .frame::after {
  bottom: -8px;
  right: -12px;
  transform: rotate(-180deg);
}

.question .img-box .frame {
  background: #fff;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.question .img-box .frame img {
  width: 100%;
  height: 100%;
}

/* timer animation */
.timer {
  position: absolute;
  top: 0px;
  right: 0px;
}

.clock {
  height: 28px;
  width: 28px;
  position: absolute;
  top: 12px;
  right: 7px;
  transform: translateX(-50%) rotate(90deg);
  animation: radial 3s 2.5s linear both;
  border-radius: 100%;
  border: 15px solid #ff432e;
  animation: none;
}
/* data 값이 true일 때 애니메이션 활성화 */
.clock.animate {
  animation: radial 5s 0s linear both;
}

.second::after {
  font-family: "Montserrat";
  content: "5";
  width: 30px;
  height: 30px;
  position: absolute;
  top: -7px;
  right: -17px;
  /* animation: timer_countdown 5s 0s linear forwards; */
  animation: none; /* 기본 비활성화 */
}
.second.animate::after {
  animation: timer_countdown 5s 0s linear forwards;
}

@keyframes timer_countdown {
  0% {
    content: "5";
  }
  20% {
    content: "4";
  }
  40% {
    content: "3";
  }
  60% {
    content: "2";
  }
  80% {
    content: "1";
  }
  100% {
    content: "0";
  }
}

@keyframes radial {
  0% {
    clip-path: polygon(
      0% 50%,
      0% 50%,
      0% 50%,
      0% 50%,
      0% 50%,
      0% 50%,
      50% 50%,
      0% 50%
    );
  }
  12.5% {
    clip-path: polygon(
      0% 0%,
      50% 0%,
      50% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      50% 50%,
      0% 50%
    );
  }
  25% {
    clip-path: polygon(
      0% 0%,
      50% 0%,
      50% 0%,
      50% 0%,
      50% 0%,
      50% 0%,
      50% 50%,
      0% 50%
    );
  }
  37.5% {
    clip-path: polygon(
      0% 0%,
      50% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      100% 0%,
      50% 50%,
      0% 50%
    );
  }
  50% {
    clip-path: polygon(
      0% 0%,
      50% 0%,
      100% 0%,
      100% 50%,
      100% 50%,
      100% 50%,
      50% 50%,
      0% 50%
    );
  }
  62.5% {
    clip-path: polygon(
      0% 0%,
      50% 0%,
      100% 0%,
      100% 100%,
      100% 100%,
      100% 100%,
      50% 50%,
      0% 50%
    );
  }
  75% {
    clip-path: polygon(
      0% 0%,
      50% 0%,
      100% 0%,
      100% 100%,
      50% 100%,
      50% 100%,
      50% 50%,
      0% 50%
    );
  }
  87.5% {
    clip-path: polygon(
      0% 0%,
      50% 0%,
      100% 0%,
      100% 100%,
      0% 100%,
      0% 100%,
      50% 50%,
      0% 50%
    );
  }
  100% {
    clip-path: polygon(
      0% 0%,
      50% 0%,
      100% 0%,
      100% 100%,
      0% 100%,
      0% 50%,
      50% 50%,
      0% 50%
    );
  }
}

/* game 팝업 공통 */
.game-popup {
  display: block;
  /* display: none; */
}
.game-popup .popup {
  position: relative;
}
.game-popup .inner {
  width: 390px;
  height: 580px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 6px 30px #000;
}
.game-popup .inner::after {
  content: "";
  width: calc(100% + 60px);
  height: 26px;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
.game-popup .layer {
  text-align: center;
  margin: auto;
}
.game-popup .layer .tit {
  width: 100%;
  height: 80px;
  position: relative;
  text-align: center;
  margin-top: -20px;
}

.game-popup .layer .tit::before,
.game-popup .layer .tit::after {
  content: "";
  width: 55%;
  height: 68px;
  top: 50%;
  position: absolute;
}
.game-popup .layer .tit::before {
  left: -50px;
  transform: translateY(-50%);
}
.game-popup .layer .tit::after {
  right: -50px;
  transform: translateY(-50%) rotateY(180deg);
}
.game-popup .layer .tit h2 {
  z-index: 100;
  display: block;
  width: 280px;
  height: 62px;
  line-height: 44px;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 30px;
  font-weight: 900;
  font-size: 26px;
}
.game-popup .layer .tit em {
  width: 32px;
  height: 32px;
  display: inline-block;
  transform: translate(-8px, 6px);
}
.game-popup .layer .point-box {
  display: inline-block;
  min-width: 60%;
  padding: 6px;
  margin: auto;
  margin-top: -10px;
  border: 4px solid #d9d9d9a2;
  background: #fff;
  border-radius: 5px;
  text-align: center;
}
.game-popup .layer .point-box em {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  background: url(/img/00-icon-point.svg) no-repeat center center / contain;
}
.game-popup .layer .point-box p {
  display: inline-block;
  transform: translateY(-7px);
  font-weight: bold;
  font-size: 20px;
}
.game-popup .layer .king-box {
  background: #fff;
  margin: 20px 0;
  height: 345px;
  padding: 20px 10px;
}
.game-popup .layer .king-box .summary {
  word-spacing: 0;
  font-size: 0;
  letter-spacing: 0;
}

.game-popup .layer .king-box .summary .thum {
  display: inline-block;
  border: 1px solid #bbb;
  background: #eee;
  width: 120px;
  height: 150px;
  vertical-align: top;
  overflow: hidden;
}
.game-popup .layer .king-box .summary .thum img {
  width: 100%;
  height: 100%;
}

.game-popup .layer .king-box .summary .info {
  display: inline-block;
  width: calc(100% - 130px);
  height: 150px;
  margin-left: 10px;
  font-size: 16px;
  vertical-align: top;
  text-align: center;
}

.game-popup .layer .king-box .summary .info .generation {
  height: calc(60px);
  padding: 8px 0;
  color: #ffe400;
  background: linear-gradient(
    to right,
    #990000 0%,
    #ff0000 35%,
    #ff0000 65%,
    #990000 100%
  );
  border: 1px solid #d0d0d0;
}
.game-popup .layer .king-box .summary .info .generation h3 {
  margin-top: 5px;
  font-size: 18px;
  font-weight: bold;
}

.game-popup .layer .king-box .summary .info .line {
  height: 30px;
  line-height: 28px;
  border: 1px solid #d0d0d0;
  border-top: 1px solid transparent;
  overflow: hidden;
  font-size: 14px;
}

.game-popup .layer .king-box .summary .info .line b {
  float: left;
  width: 40%;
  border-right: 1px solid #d0d0d0;
  background: #ff0000;
  color: #fff;
}
.game-popup .layer .king-box .summary .info .line p {
  float: left;
  width: 60%;
}

.game-popup .layer .king-box .detail {
  border: 1px solid #bbb;
  margin-top: 10px;
  padding: 10px;
  line-height: 1.25em;
  height: 146px;
  overflow-y: auto;
  text-align: left;
  color: #555;
  font-size: 15px;
}

.game-popup .layer .btn {
  letter-spacing: 0;
  word-spacing: 0;
  font-size: 0;
  text-align: center;
}
.game-popup .layer .btn a {
  text-align: center;
  width: 60px;
  height: 56px;
  display: inline-block;
  margin-right: 15px;
  background: url(/img/00-icon.png) no-repeat top left;
  background-size: 320px 265px;
}
.game-popup .layer .btn a:last-child {
  margin-right: 0;
}

.game-popup .layer .btn a.return {
  background-position: 0 -132.5px;
}
.game-popup .layer .btn a.home {
  background-position: -64px -132.5px;
}
.game-popup .layer .btn a.continue {
  background-position: -128px -132.5px;
}

.game-popup .layer .btn a.return:hover {
  background-position: 0 -198.75px;
}
.game-popup .layer .btn a.home:hover {
  background-position: -64px -198.75px;
}
.game-popup .layer .btn a.continue:hover {
  background-position: -128px -198.75px;
}

/* 성공 팝업 */
/* .game-popup .success-popup{display: none;} */
.game-popup .success-popup .pop-bg {
  width: 630px;
  height: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(/img/08-pop-success-bg.png) no-repeat center center / contain;
  animation: bg-pop 1s 0.3s ease-out both;
}

@keyframes bg-pop {
  0% {
    width: 0;
    height: 0;
  }
  100% {
    width: 630px;
    height: 800px;
  }
}

.game-popup .success-popup .inner {
  background: #c08752;
  border: 10px solid #ac641c;
}
.game-popup .success-popup .inner::after {
  background: url(/img/08-pop-success-bt.png) no-repeat bottom center / contain;
}

.game-popup .success-popup .layer .tit::before,
.game-popup .success-popup .layer .tit::after {
  background: url(/img/08-pop-success-top.png) no-repeat center center / contain;
}

.game-popup .success-popup .layer .tit h2 {
  background: #fac763;
  border: 8px solid #c87422;
  box-shadow: 0 4px 4px #563622, inset 0 -26px 4px #e8b551;
  color: #6e4123;
}
.game-popup .success-popup .layer .tit em {
  background: url(/img/08-pop-emoji-happy.png) no-repeat center center / contain;
}

/* 실패 팝업 */
.game-popup .fail-popup {
  display: block;
}
.game-popup .fail-popup .inner {
  background: #a28f76;
  border: 10px solid #775641;
}
.game-popup .fail-popup .inner::after {
  background: url(/img/08-pop-fail-bt.png) no-repeat bottom center / contain;
}
.game-popup .fail-popup .layer .tit::before,
.game-popup .fail-popup .layer .tit::after {
  background: url(/img/08-pop-fail-top.png) no-repeat center center / contain;
}
.game-popup .fail-popup .layer .tit em {
  background: url(/img/08-pop-emoji-sad.png) no-repeat center center / contain;
}

.game-popup .fail-popup .layer .tit h2 {
  background: #a89279;
  border: 8px solid #806946;
  box-shadow: 0 4px 4px #563622, inset 0 -26px 4px #9e8a73;
  color: #fff;
  text-shadow: 1px 1px 1px #563622;
}

/* 종료팝업 */
.game-popup {
  display: block;
}
.game-popup .gameover-popup {
  display: block;
}

.game-popup .gameover-popup .inner {
  background: #fffcf5;
  border: 10px solid #00b2c6;
}

.gameover-popup .inner::after {
  background: url(/img/08-pop-gameover-bt.png) no-repeat bottom center / contain;
}
.gameover-popup .layer {
  height: 100%;
}
.gameover-popup .layer .tit::before,
.game-popup .gameover-popup .layer .tit::after {
  background: url(/img/08-pop-gameover-top.png) no-repeat center center /
    contain;
}

.gameover-popup .layer .tit h2 {
  background: #23d6e7;
  border: 8px solid #026c82;
  box-shadow: 0 4px 4px #013e4b, inset 0 -26px 4px #00b2c6;
  color: #fff !important;
  text-shadow: 1px 1px 1px #013e4b;
}

.gameover-popup .layer .game-name {
  height: 35px;
  line-height: 35px;
  background: linear-gradient(
    to right,
    rgba(35, 214, 231, 0) 5%,
    rgba(35, 214, 231, 1),
    rgba(35, 214, 231, 0) 95%
  );
}
.gameover-popup .layer .game-name h2 {
  font-weight: bold;
  font-size: 18px;
}

.gameover-popup .layer .game-result {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 85%;
  height: calc(100% - 200px);
  margin: 10px auto;
  padding: 20px 3px;
  border-radius: 10px;
  border: 3px dotted #d1c0aa;
  background: #f5e9d9;
  box-shadow: inset 0 8px 8px 3px #dfd1c0, inset 0 -8px 8px 3px #fff8ee;
  font-family: "Black Han Sans", sans-serif;
}

.gameover-popup .layer .game-result .point-box {
  width: 255px;
  margin: 0;
  padding: 20px 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: #ac6b4b;
  box-shadow: inset 0 4px 4px 1px #6e442d, inset 0 -4px 4px 1px #cc8968;
}
.gameover-popup .layer .game-result .point-box p {
  transform: none;
  color: #fff;
  font-size: 30px;
  text-shadow: 2px 2px 2px #5e3620;
}

.gameover-popup .layer .game-result .detail {
  width: 255px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.gameover-popup .layer .game-result .detail > div {
  display: flex;
  justify-content: space-around;
}
.gameover-popup .layer .game-result .detail > div:first-child {
  margin: 20px auto 40px;
}
.game-result .detail .walnut,
.game-result .detail .rank {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 10px;
  border: 4px solid #e3bb84;
  background: linear-gradient(to top, #fef2e2, #d8a35d88);
  box-shadow: inset 0 4px 4px 4px #d8a35d42;
}
.game-result .detail .walnut {
  margin-right: 15px;
}
.game-result .detail .walnut em,
.game-result .detail .rank em {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #d8a35d42;
}
.game-result .detail .walnut em {
  background: url(/img/08-pop-icon-walnut.svg) no-repeat center center / 60%;
}
.game-result .detail .rank em {
  background: url(/img/08-pop-icon-rank.svg) no-repeat center center / 65%;
}

.game-result .detail .walnut p,
.game-result .detail .rank p {
  position: absolute;
  bottom: 14px;
  color: #be444f;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff,
    2px 2px 2px #fff, 2px 2px 3px #000000d2;
  text-align: center;
  width: 100%;
}

.game-result .detail > div:last-child {
  border-top: 3px dotted #d9916d;
  padding-top: 24px;
}
.game-result .detail .game-num,
.game-result .detail .game-time {
  color: #d9916d;
  text-shadow: 1px 1px 1px #180a03;
  font-size: 14px;
  font-weight: 300;
}

.game-popup .layer .btn a.go-ranking {
  background-position: -65px 0;
}
.game-popup .layer .btn a.go-ranking:hover {
  filter: grayscale(0.3);
}

/* 일시정지 팝업 */
/* .modal-popup{display: none;} */
.pause-popup {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pause-popup .box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 30px;
}
.pause-popup .box .speed-auto-btn {
  width: 100%;
  margin: 10px 0;
  font-family: "ChosunCentennial", sans-serif;
}
.pause-popup .box .speed-auto-btn .speed-btn {
  flex-wrap: wrap;
  justify-content: center;
  flex: 2;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
}
.pause-popup .box .speed-auto-btn .speed-btn h3 {
  width: 100%;
}
.pause-popup .box .speed-auto-btn .speed-btn label {
  width: 35px;
  height: 35px;
  margin: 5px 5px 0px 5px;
}
.pause-popup .box .speed-auto-btn .auto-btn input ~ label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.7);
}
.pause-popup .box .set-btn {
  width: 100%;
  display: flex;
  justify-content: center;
}
.pause-popup .box .set-btn input {
  display: none;
}
.pause-popup .box .set-btn input ~ label {
  padding: 5px;
  margin: 0 10px;
  color: #ffd404;
  letter-spacing: 0.2em;
  text-shadow: -2px -1px 0 #a04f00, 1px -1px 0 #a04f00, -1px 1px 0 #a04f00,
    1px 1px 0 #a04f00;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  font-family: "ChosunCentennial", sans-serif;
}
.pause-popup .box .set-btn input ~ label em {
  width: 40px;
  height: 40px;
  margin-left: 6px;
}
.pause-popup .box .set-btn input[id="s-onoff"] ~ label.bg-sound-btn em {
  background: url(/img/bg-sound-off.svg) no-repeat center center / contain;
}
.pause-popup .box .set-btn input[id="v-onoff"] ~ label.voice-btn em {
  background: url(/img/voice-off.svg) no-repeat center center / contain;
}
.pause-popup .box .set-btn input[id="s-onoff"]:checked ~ label.bg-sound-btn em {
  background: url(/img/bg-sound-on.svg) no-repeat center center / contain;
}
.pause-popup .box .set-btn input[id="v-onoff"]:checked ~ label.voice-btn em {
  background: url(/img/voice-on.svg) no-repeat center center / contain;
}

.pause-popup .box button {
  text-decoration: none !important;
  outline: none !important;
  border: none;
  z-index: 1;
  display: inline-block;
  position: relative;
  margin: 10px 0;
  padding: 15px 115px;
  text-align: center;
  font-size: 20px;
  transition: 0.2s;
  cursor: pointer;

  color: #6b778400;
  background-color: #080808bf;
  box-shadow: 0px -2px 2px 4px #373737, 2px 2px 2px 2px #555555,
    2px -2px 2px 2px #000000, -2px 2px 2px 2px #2d2d2d;
  border-radius: 5px;
}
.pause-popup .box button::after {
  content: attr(data-title);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 1;
  line-height: 2.1em;
  color: #ffffff;
  letter-spacing: 0.2em;
  font-family: "ChosunCentennial", sans-serif;
  text-shadow: 0px 3px 2px #8f5701;
  border-radius: 10px;
  transition: 0.2s;

  background-color: #ffc800;
  border-top: 5px solid #ffda52;
  border-left: 8px solid #75421f;
  border-right: 8px solid #75421f;
  border-bottom: 12px solid #b76113;
  box-shadow: inset 10px -5px 14px #ff8f00, inset -10px -7px 22px #ffcc13;
}

.pause-popup .box button.play::after {
  background: #54d440;
  border-top-color: #71eb5d;
  border-left-color: #2a6d20;
  border-right-color: #2a6d20;
  border-bottom-color: #348628;
  box-shadow: inset 10px -5px 14px #2dc118, inset -10px -7px 22px #389b29;
  text-shadow: 0px 3px 2px #27690f;
}
.pause-popup .box button.share::after {
  background: #3ebbf7;
  border-top-color: #72ccf7;
  border-left-color: #12517d;
  border-right-color: #12517d;
  border-bottom-color: #266b91;
  box-shadow: inset 10px -5px 14px #1582bd, inset -10px -7px 22px #00a3ff;
  text-shadow: 0px 3px 2px #0e4f69;
}

.pause-popup .box button:hover::after {
  border-top-width: 8px;
  border-left-width: 8px;
  border-right-width: 8px;
  border-bottom-width: 9px;
  transform: scale(0.97, 0.9);

  color: #eedca2;
  box-shadow: inset 10px 16px 14px #f7a628, inset -10px 13px 22px #ff922f;
}

.pause-popup .box button.play:hover::after {
  color: #b2eba9;
  box-shadow: inset 10px 16px 14px #39ba28, inset -10px 13px 22px #46b136;
}
.pause-popup .box button.share:hover::after {
  color: #a3e2ff;
  box-shadow: inset 10px 16px 14px #249cdd, inset -10px 13px 22px #2787bf;
}
/* ----- */

/* -------------------- 10-ready ---------------------------- */
.container.ready > .inner {
  height: 100%;
}
.content.ready-content {
  height: calc(100% - 88px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.ready-content .roll {
  background: #f9f5ea;
  max-height: 530px;
}
.ready-content .roll .inner {
  animation: open4 0.7s 0.1s ease-out both;
}

@keyframes open4 {
  0% {
    height: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    height: 485px;
    opacity: 1;
  }
}

.game-setting {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  border-color: #875b2e !important;
}
.game-setting h2.name {
  margin-top: 55px;
  font-family: "SangSangRock";
  font-size: 30px;
  font-weight: bold;
  color: #471900;
}
.game-setting .about {
  height: 120px;
  margin: 10px 20px 10px;
  padding: 15px;
  overflow-y: auto;
  scrollbar-width: none;
  border-radius: 10px;
  background: #f4ecd3;
  border: 2px solid #fff9ec;
  box-shadow: inset 2px 4px 4px 0px #a39067, 1px 2px 2px 2px #a3906779;
  font-family: "NanumSquare";
  font-size: 12px;
}
.game-setting .about::-webkit-scrollbar {
  display: none;
}
.game-setting .about p {
  margin-bottom: 5px;
  font-weight: bolder;
  font-size: 14px;
  color: #5e2100;
}
.game-setting .about span {
  display: block;
  margin-bottom: 15px;
  line-height: 1.55em;
  color: #2e1000;
}
.game-setting .about span:last-child {
  margin-bottom: 0;
}

.game-setting .setting-area {
  width: calc(100% - 40px);
  padding: 15px;
  margin: 10px auto 20px;
  border-radius: 10px;
  border: 3px dashed rgb(170, 124, 63);
  background: #eddec1;
  font-family: "NanumSquare";
}
.game-setting .setting-area .lang {
  display: flex;
  flex-wrap: wrap;
}
.game-setting .setting-area .lang h3 {
  width: 100%;
  margin-bottom: 15px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #8f520c;
  text-shadow: 1px 1px #4923003b;
}
.game-setting .setting-area .lang input {
  display: none;
}
.game-setting .setting-area .lang input ~ label {
  width: 25%;
  height: 45px;
  display: block;
  font-size: 12px;
  cursor: pointer;
}
.game-setting .setting-area .lang input ~ label em {
  width: 100%;
  height: 30px;
  display: block;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  filter: grayscale(1);
}
.game-setting .setting-area .lang input[id="korea"] ~ label.kor em {
  background-image: url(/img/10-icon-kor.png);
}
.game-setting .setting-area .lang input[id="english"] ~ label.eng em {
  background-image: url(/img/10-icon-eng.png);
}
.game-setting .setting-area .lang input[id="spanish"] ~ label.esp em {
  background-image: url(/img/10-icon-esp.png);
}
.game-setting .setting-area .lang input[id="japanese"] ~ label.jpn em {
  background-image: url(/img/10-icon-jpn.png);
}
.game-setting .setting-area .lang input[id="chinese"] ~ label.chn em {
  background-image: url(/img/10-icon-chn.png);
}

.game-setting .setting-area .lang input[id="korea"]:checked ~ label.kor em,
.game-setting .setting-area .lang input[id="english"]:checked ~ label.eng em,
.game-setting .setting-area .lang input[id="spanish"]:checked ~ label.esp em,
.game-setting .setting-area .lang input[id="japanese"]:checked ~ label.jpn em,
.game-setting .setting-area .lang input[id="chinese"]:checked ~ label.chn em {
  filter: grayscale(0);
}
.game-setting .setting-area .lang input ~ label p {
  text-align: center;
  font-weight: bold;
  color: #333;
  margin-top: 3px;
}
.game-setting .setting-area .lang input[id="korea"]:checked ~ label.kor p,
.game-setting .setting-area .lang input[id="english"]:checked ~ label.eng p,
.game-setting .setting-area .lang input[id="spanish"]:checked ~ label.esp p,
.game-setting .setting-area .lang input[id="japanese"]:checked ~ label.jpn p,
.game-setting .setting-area .lang input[id="chinese"]:checked ~ label.chn p {
  color: red;
}

.game-setting .setting-area .vox {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.game-setting .setting-area .vox label {
  width: 50%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.game-setting .setting-area .vox label > div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 2px solid #f3e7c7;
  background: #f9f5ea;
  filter: grayscale(0.3);
  font-size: 16px;
}

.game-setting .setting-area .vox h3 {
  font-size: 12px;
  font-weight: bold;
  color: #7e440e;
}
.game-setting .setting-area .vox input {
  display: none;
}
.game-setting .setting-area .vox label .icon-box {
  width: 25px;
  height: 22px;
  margin-left: 4%;
}

.game-setting .setting-area .vox label .sound .icon-box {
  background: url(/img/10-icon-s-off.svg) no-repeat center center / contain;
}
.game-setting .setting-area .vox input:checked + label .sound,
.game-setting .setting-area .vox input:checked + label .voice {
  background: #eeb704;
  filter: grayscale(0);
}
.game-setting .setting-area .vox input:checked + label .sound .icon-box {
  background: url(/img/10-icon-s-on.svg) no-repeat center center / contain;
}

.game-setting .setting-area .vox label .voice .icon-box {
  background: url(/img/10-icon-v-off.svg) no-repeat center center / contain;
}

.game-setting .setting-area .vox input:checked + label .voice .icon-box {
  background: url(/img/10-icon-v-on.svg) no-repeat center center / contain;
}
.game-setting .start-btn {
  width: 180px;
  height: 45px;
  line-height: 34px;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  background: #f4bc0b;
  border-radius: 10px;
  border: 2px solid #8d4200;
  box-shadow: inset 0 1px 2px 2px #ffcfa5d5, inset 0 -4px 4px 4px #b856016c,
    0px 0px 3px #0000008c;
  font-weight: bold;
  font-size: 20px;
  color: #fff1e4;
  text-shadow: 1px 2px 2px #8d4200;
  transition: 0.1s;
  cursor: pointer;
}

.game-setting .start-btn:hover {
  scale: 0.97;
}

/* ##### 1021 추가 ##### */
/* 게임속도 및 자동진행 버튼 */
.speed-auto-btn {
  display: flex;
  margin-top: 10px;
}
.speed-auto-btn .speed-btn {
  display: flex;
  flex: 2.5;
  padding: 3px 0;
  margin-right: 8px;
  border-radius: 5px;
  border: 2px solid #f4e5bd;
  background: #f9f5ea;
}
.speed-auto-btn h3 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8f520c;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px #4923003b;
}
.speed-auto-btn .speed-btn input {
  display: none;
}
.speed-auto-btn .speed-btn label {
  width: 30%;
  margin-right: 8px;
  cursor: pointer;
}
.speed-auto-btn .speed-btn label em {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  background: #f4e5bd;
  box-shadow: inset 0px -1px 2px #8f520c, inset 1px 2px 2px #fff6dc;
  color: #8f520c;
  font-weight: bolder;
  transition: 0.3s;
}
.speed-auto-btn .speed-btn input[id="speed-value1"]:active ~ label.value1 em,
.speed-auto-btn .speed-btn input[id="speed-value2"]:active ~ label.value2 em,
.speed-auto-btn .speed-btn input[id="speed-value3"]:active ~ label.value3 em {
  transform: scale(0.3);
}

.speed-auto-btn .speed-btn input[id="speed-value1"]:checked ~ label.value1 em,
.speed-auto-btn .speed-btn input[id="speed-value2"]:checked ~ label.value2 em,
.speed-auto-btn .speed-btn input[id="speed-value3"]:checked ~ label.value3 em {
  background: #8f520c;
  color: #f4e5bd;
  box-shadow: inset -2px -3px 5px #361e02, inset 2px 3px 5px #cb791b;
}
.speed-auto-btn .auto-btn {
  flex: 1;
}
.speed-auto-btn .auto-btn h3 {
  cursor: pointer;
  font-size: 12px;
  color: #333;
}
.speed-auto-btn .auto-btn input {
  display: none;
}
.speed-auto-btn .auto-btn em {
  display: block;
  cursor: pointer;
  margin-top: 3px;
}
.speed-auto-btn .auto-btn em::before {
  content: "OFF";
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.speed-auto-btn .auto-btn input ~ label {
  display: block;
  padding: 3px 0;
  border: 2px solid #f4e5bd;
  border-radius: 5px;
  background: #bbb;
  color: #fff;
  transition: 0.3s;
}
.speed-auto-btn .auto-btn input:checked ~ label {
  background: #eeb704;
  color: #f9f5ea;
}
.speed-auto-btn .auto-btn input:checked ~ label h3 {
  color: #8f520c;
}
.speed-auto-btn .auto-btn input:active ~ label {
  transform: scale(0.3);
}
.speed-auto-btn .auto-btn input:checked ~ label em::before {
  content: "ON";
}