/* 
  수정하고 싶은 곳 검색으로 찾기: 
  1.인트로 스타일 2.문제 스타일 3.결과 스타일 
*/
:root {
  /* colors */
  --body-bg: #fafafa;
  --page-bg: #f5f5f5;

  /* spacing */
  /* this is what defines the global scale */
  --baseline: 12px;
}

/* font */

@font-face {
  font-family: 'Pretendard-400';
  src: url('https://cdn.banggooso.com/assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Pretendard-500';
  src: url('https://cdn.banggooso.com/assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 500;
}

@font-face {
  font-family: 'Pretendard-600';
  src: url('https://cdn.banggooso.com/assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 600;
}

@font-face {
  font-family: 'Pretendard-700';
  src: url('https://cdn.banggooso.com/assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 700;
}

@font-face {
  font-family: 'Pretendard-800';
  src: url('https://cdn.banggooso.com/assets/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 800;
}

@font-face {
  font-family: 'RIDIBATANG';
  src: url('https://cdn.banggooso.com/assets/fonts/RIDIBATANG.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Arita-buriB';
  src: url('https://cdn.banggooso.com/assets/images/game35/Arita-buriB.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* reset.css */

html,
body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 500px) {
  html,
  body {
    font-size: 3.2vw;
  }
}

button,
li,
ul,
dt,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
div,
a,
p,
span,
b {
  transform: skew(0);
}

input {
  outline: none;
  border-radius: 0.1rem;
}

.game-wrapper .game-intro {
  padding: 0;
}

.game-wrapper.basic .game-result {
  padding: 0;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bg-paper-pattern.png');
  background-repeat: repeat-y;
}

.game-wrapper.basic .app-main {
  background-color: #fcfcfc;
}

.hidden {
  display: none;
}

/* 헤더 */

.game-wrapper .app-header .app-header-btn.back {
  background-image: url('https://cdn.banggooso.com/assets/bing/main/result/arrow_back.png');
  background-size: 23%;
  width: 3.5rem;
}

.game-wrapper .app-header .app-logo {
  background-size: contain;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/logo.png');
  width: 26rem;
}

.app .app-header.intro-header {
  position: fixed;
  z-index: 1;
  width: 100%;
  border: none;
}

.game-wrapper.basic .game-wrap {
  position: relative;
  width: 100%;
}

.game-wrapper.basic .app-header {
  height: 4rem;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(12.5px);
  backdrop-filter: blur(12.5px);
  z-index: 999;
  position: absolute;
  width: 100%;
}

.game-wrapper.basic .app-header.result {
  background: rgba(124, 65, 39, 0.3);
  backdrop-filter: blur(7.5px);
}

.game-wrapper .app-header.page {
  position: relative;
  height: 4rem;
}

/* ------------------------ */

/* 인트로 스타일 */

.game-intro {
  overflow: hidden;
}

.intro-container .bg-intro-top .intro-snow {
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
  animation: snow-animation 1.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.intro-container .bg-intro-top .intro-bird {
  position: absolute;
  top: 5.31rem;
  left: 7.5rem;
  width: 5.625rem;
  height: 7.8125rem;
}

.intro-container .bg-intro-top .intro-character {
  position: absolute;
  bottom: -1rem;
  width: 100%;
  height: auto;
  animation: character-animation 1.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes snow-animation {
  0% {
    top: -10rem;
  }
  85% {
    top: 0.5rem;
  }
  100% {
    top: 0;
  }
}

@keyframes character-animation {
  0% {
    bottom: -10rem;
  }
  85% {
    bottom: -0.5rem;
  }
  100% {
    bottom: -1rem;
  }
}

.intro-container .bg-intro-top .bg-intro-top-image {
  width: 100%;
  height: auto;
}

.intro-container .intro-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3rem;
  transform: translateY(-1rem);
}

.intro-container .intro-bottom .bg-intro-bottom {
  width: 100%;
  position: absolute;
  top: -3rem;
}

.intro-container .intro-bottom p {
  color: #97633e;
  text-align: center;
  font-family: 'RIDIBatang';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem; /* 170% */
  letter-spacing: -0.0125rem;
}

.rolling {
  width: 23.5rem;
  height: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 1.12rem;
  border-radius: 0.625rem;
  background: rgba(151, 99, 62, 0.10);
}

.rolling p {
  color: #97633E;
  font-family: 'Pretendard-500' !important;
  font-size: 1.375rem;
  font-style: normal;
  line-height: 2.25rem;
}

.rolling p span {
  font-family: 'Pretendard-700';
}

.rolling .presents {
  width: 18.75rem;
  height: 11.25rem;
}

.rolling .presents div {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 18.75rem;
  height: 11.25rem;
}

.rolling .presents .present-1 {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/intro-item-1.png');
}

.rolling .presents .present-2 {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/intro-item-2.png');
}

.rolling .presents .present-3 {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/intro-item-3.png');
}

.rolling .presents .present-4 {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/intro-item-4.png');
}

.rolling .presents .present-5 {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/intro-item-5.png');
}

#userNickname {
  margin-top: 1.25rem;
  display: flex;
  width: 23.75rem;
  padding: 1.25rem 0;
  justify-content: center;
  align-items: center;
  border-radius: 0.625rem;
  border: 2px solid rgba(86, 59, 55, 0.4);
  background: #fff;
  z-index: 99;
  position: relative;
  color: #563b37;
  text-align: center;
  font-family: 'Pretendard-500';
  font-weight: 500;
  font-size: 1.375rem;
  font-style: normal;
  line-height: normal;
}

#userNickname::placeholder {
  color: rgba(86, 59, 55, 0.5);
}

.game-intro .btn-wrap {
  width: 100%;
  margin: 1rem 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.game-intro .btn-wrap .btn-game-start {
  width: 26.25rem;
  height: 5rem;
  display: flex;
  padding: 1.375rem 0rem;
  justify-content: center;
  align-items: center;
  border-radius: 624.9375rem;
  background: #563b37;
  box-shadow: 0px 0px 20px 0px rgba(255, 252, 233, 0.7), 0px 4px 4.8px 0px rgba(255, 252, 233, 0.2) inset,
    0px 10px 20px 0px rgba(0, 0, 0, 0.2);
  border: none;
  color: #fff;
  text-align: center;
  text-shadow: 0px 0px 4px rgba(255, 252, 233, 0.5);
  font-family: 'RIDIBatang';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
}

.game-intro .game-count {
  width: 85%;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(86, 59, 55, 0.2);
  margin: 2rem 0 0;
}

.game-intro .share-sns-list {
  margin-top: 2rem;
}

.game-intro .game-count .count-label {
  color: #563b37;
  text-align: center;
  font-family: 'Pretendard-500';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.015rem;
}

.game-intro .game-count .count-label::before {
  display: none;
}

.game-intro .game-count .count-num-container {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'NanumSquareNeo-Hv';
  font-size: 1.75rem;
  font-style: normal;
  line-height: 2.625rem;
  color: #000;
}

.game-intro .game-count .count-num {
  color: #563b37;
  text-align: center;
  font-family: 'Pretendard-700';
  font-size: 2.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.0275rem;
}

/* 인트로 공유하기 */

.share-sns-list .list-title span {
  color: #563b37;
  text-align: center;
  font-family: 'Pretendard-600';
  font-size: 1.375rem;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.01375rem;
}

.share-sns-list .list {
  display: flex;
  justify-content: center;
  gap: 0.87rem;
}

.share-sns-list .list li .btn-share.kakao {
  width: 3.375rem;
  height: 3.375rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/kakao.png');
}

.share-sns-list .list li .btn-share.instagram {
  width: 3.375rem;
  height: 3.375rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/instagram.png');
}

.share-sns-list .list li .btn-share.facebook {
  width: 3.375rem;
  height: 3.375rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/facebook.png');
}

.share-sns-list .list li .btn-share.twitter {
  width: 3.375rem;
  height: 3.375rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/twitter.png');
}

.share-sns-list .list li .btn-share.link-copy {
  width: 3.375rem;
  height: 3.375rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/link.png');
}

.share-sns-list .list li + li {
  margin: 0;
}

/* ------------------------------- */

/* 문제 스타일 */

/* 공통 */
.game-wrap .question {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bg-stars.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  padding-top: 4.0625rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.game-wrap .question-14 {
  justify-content: center;
}

.custom-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 999;
}

.text {
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #563b37;
  text-align: center;
  font-family: 'RIDIBatang';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem; /* 154.545% */
}

.answer_container {
  z-index: 9999;
  position: absolute;
  bottom: 0;
}

.question .bottom-dim {
  width: 31.25rem;
  height: 20.125rem;
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, rgba(26, 48, 62, 0) 0%, rgba(26, 48, 62, 0.5) 100%);
  z-index: 99;
}

.answer-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.answer-box {
  width: 27.50075rem;
  height: 7.1875rem;
  color: #563b37;
  text-align: center;
  font-family: 'Pretendard-500';
  font-weight: 500;
  font-size: 1.4375rem;
  font-style: normal;
  line-height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.answer-box p {
  position: relative;
  z-index: 999;
  pointer-events: none;
}

.answer-box.active p {
  color: #fff;
}

.answer-box img {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
}

.question button {
  z-index: 99;
  color: #fff;
  text-align: center;
  text-shadow: 0px 0px 4px rgba(255, 252, 233, 0.5);
  font-family: 'RIDIBatang';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
  display: flex;
  width: 27.5rem;
  height: 5rem;
  padding: 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 624.9375rem;
  background: #563b37;
  box-shadow: 0px 0px 20px 0px rgba(255, 252, 233, 0.7), 0px 4px 4.8px 0px rgba(255, 252, 233, 0.2) inset,
    0px 10px 20px 0px rgba(0, 0, 0, 0.2);
  margin: 1.88rem 0 3.75rem;
}

.question-14 button {
  margin: 1.88rem 0 0 0 !important;
}

.game-wrap .question .question-bottom-bg {
  width: 31.25rem;
  height: 26.68106rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bg-village-snow.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  transform: scale(1.5);
}

.question-1 .question-bottom-bg,
.question-2 .question-bottom-bg,
.question-3 .question-bottom-bg,
.question-15 .question-bottom-bg,
.question-16 .question-bottom-bg,
.question-17 .question-bottom-bg,
.question-18 .question-bottom-bg,
.question-19 .question-bottom-bg {
  transform: scale(1) !important;
}

.question-bottom-chocolate-bg {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bg-village-chocolate.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  width: 31.25rem;
  height: 26.68106rem;
  z-index: 98;
  position: absolute;
  bottom: 0;
}

.question-2 .text {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/textbox-light-1.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 27.5rem;
  height: 5.875rem;
  margin-top: 3.75rem;
  position: absolute;
  letter-spacing: normal;
}

.question-1 .narration,
.question-2 .narration,
.question-4 .narration,
.question-5 .narration,
.question-6 .narration,
.question-7 .narration,
.question-8 .narration,
.question-9 .narration,
.question-10 .narration,
.question-11 .narration,
.question-12 .narration,
.question-13 .narration,
.question-16 .narration,
.question-17 .narration,
.question-18 .narration {
  margin-top: 3.75rem;
  color: #fff;
  text-align: center;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.4), 0px 0px 20px rgba(0, 0, 0, 0.1);
  font-family: 'RIDIBatang';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem; /* 154.545% */
  z-index: 99;
  letter-spacing: normal;
}

.question-14 .narration {
  color: #fff;
  text-align: center;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.4), 0px 0px 20px rgba(0, 0, 0, 0.1);
  font-family: 'RIDIBatang';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem; /* 154.545% */
  z-index: 99;
  letter-spacing: normal;
}

.question-15 .narration {
  margin-top: 3.75rem;
  color: #fff;
  text-align: center;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.4), 0px 0px 20px rgba(0, 0, 0, 0.1);
  font-family: 'RIDIBatang';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem; /* 154.545% */
  z-index: 99;
  transition: opacity 2s linear;
  opacity: 0;
  letter-spacing: normal;
}

.question-15 .narration.active {
  opacity: 1;
}

.question-15 .arrow-down {
  transition: opacity 2s linear;
  display: none;
}

.question-15 .arrow-down.active {
  display: flex;
}

.question-4 .custom-area {
  justify-content: space-between;
  height: 100%;
}

.question-14 .custom-area {
  justify-content: center;
  gap: 1rem;
  height: fit-content;
  position: relative;
  margin-bottom: 3.75rem;
}

.question-2 .narration {
  margin-top: 11.19rem;
}

.arrow-down {
  width: 2.375rem;
  height: 2.375rem;
  flex-shrink: 0;
  z-index: 99;
  animation: arrow-blink 1s linear infinite;
}

@keyframes arrow-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.dim-area {
  width: 31.25rem;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  z-index: 98;
}

.question-3,
.question-19 {
  justify-content: center;
}

.question-3 .text {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/textbox-light-2.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 27.5rem;
  height: 8rem;
  margin-top: 19.75rem;
  position: relative;
  letter-spacing: normal;
}

.question-19 .text {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/textbox-light-3.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 27.5rem;
  height: 15.625rem;
  margin-top: 19.75rem;
  position: relative;
  letter-spacing: normal;
}

.question-3 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bear-intro.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 31.25rem;
  height: 22.8125rem;
  z-index: 999;
  position: absolute;
  top: 0;
}

.question-19 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bear-outro.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 31.25rem;
  height: 23.4375rem;
  z-index: 999;
  position: absolute;
  top: 0;
}

.question-5 .text,
.question-8 .text,
.question-10 .text {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/textbox-light-2.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 27.5rem;
  height: 8rem;
  margin-top: 1.56rem;
  position: relative;
  letter-spacing: normal;
}

.question-14 .text {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/textbox-light-2.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 27.5rem;
  height: 8rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  letter-spacing: normal;
}

.question-12 .text,
.question-16 .text {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/textbox-dark-1.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 27.5rem;
  height: 5.875rem;
  margin-top: 1.56rem;
  position: relative;
  color: #fff;
  text-align: center;
  font-family: 'RIDIBatang';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem; /* 154.545% */
  letter-spacing: normal;
}

.question-17 .text {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/textbox-light-2.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 27.5rem;
  height: 8rem;
  margin-top: 1.56rem;
  position: relative;
  color: #563b37;
  text-align: center;
  font-family: 'RIDIBatang';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem; /* 154.545% */
  letter-spacing: normal;
}

.question-5 .custom-area,
.question-6 .custom-area,
.question-8 .custom-area,
.question-9 .custom-area,
.question-10 .custom-area,
.question-11 .custom-area,
.question-12 .custom-area,
.question-13 .custom-area,
.question-16 .custom-area {
  height: 100%;
}

.question-5 .character-area,
.question-8 .character-area,
.question-10 .character-area {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 31.25rem;
  height: 40.625rem;
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.question-6 .character-area,
.question-9 .character-area,
.question-11 .character-area {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  z-index: 999;
  width: 31.25rem;
  height: 12.5rem;
  transform: translateY(1.88rem);
}

.question-6 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/guest1.png');
}

.question-9 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/guest2.png');
}

.question-11 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/guest3.png');
}

.question-5 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/hand-gift1.png');
}

.question-8 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/hand-gift2.png');
}

.question-10 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/hand-gift3.png');
}

.question-12 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/chocobear1.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 23.75rem;
  height: 16.03125rem;
  position: absolute;
  bottom: 16rem;
}

.question-13 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/chocobear2.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 23.75rem;
  height: 16.03125rem;
  position: absolute;
  bottom: 16rem;
}

.question-5 .question-bottom-bg,
.question-8 .question-bottom-bg {
  opacity: 0.4;
}

.question-6 .narration,
.question-9 .narration {
  position: absolute;
  bottom: 19rem;
}

.question-11 .narration {
  position: absolute;
  top: 18rem;
}

.question-11 .arrow-down {
  position: absolute;
  top: 30rem;
}

.question-6 .text {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/textbox-dark-2.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 27.5rem;
  height: 8rem;
  margin-top: 10rem;
  position: relative;
  color: #fff;
  text-align: center;
  font-family: 'RIDIBatang';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem; /* 154.545% */
  letter-spacing: normal;
}

.question-9 .text,
.question-11 .text {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/textbox-dark-3.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 27.5rem;
  height: 10.125rem;
  margin-top: 10rem;
  position: relative;
  color: #fff;
  text-align: center;
  font-family: 'RIDIBatang';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem; /* 154.545% */
  letter-spacing: normal;
}

.question-13 .text {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/textbox-dark-3.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 27.5rem;
  height: 10.125rem;
  margin-top: 1.56rem;
  position: relative;
  color: #fff;
  text-align: center;
  font-family: 'RIDIBatang';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem; /* 154.545% */
  letter-spacing: normal;
}

/* 초콜릿 */

.chocolate-bg {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bg-chocolate.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 31.25rem;
  height: 59.32619rem;
  z-index: 99;
  position: absolute;
}

.question-15 .question-bottom-chocolate-bg {
  animation: choco-bg-animate 3s linear;
}

@keyframes choco-bg-animate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.question-15 .chocolate-bg {
  transform: translateY(-23rem);
  animation: choco-animate15 2s;
}

@keyframes choco-animate15 {
  0% {
    transform: translateY(-50rem);
  }
  100% {
    transform: translateY(-23rem);
  }
}

.question-16 .chocolate-bg {
  animation: choco-animate16 2s;
  transform: translateY(-18rem);
}

@keyframes choco-animate16 {
  0% {
    transform: translateY(-23rem);
  }
  100% {
    transform: translateY(-18rem);
  }
}

.question-17 .chocolate-bg {
  animation: choco-animate17 2s;
  transform: translateY(-13rem);
}

@keyframes choco-animate17 {
  0% {
    transform: translateY(-18rem);
  }
  100% {
    transform: translateY(-13rem);
  }
}

.question-18 .chocolate-bg {
  animation: choco-animate18 2s;
  transform: translateY(-8rem);
}

@keyframes choco-animate18 {
  0% {
    transform: translateY(-13rem);
  }
  100% {
    transform: translateY(-8rem);
  }
}

.question-19 .question-bottom-bg {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bg-tree.png') !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1;
  animation: bg-animate 2.5s linear;
}

@keyframes bg-animate {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.question-19 .custom-area,
.question-19 .dim-area {
  opacity: 0;
}

.question-19 .custom-area.active,
.question-19 .dim-area.active {
  opacity: 1;
}

/* 결과 스타일 */

.result-container .result-top {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
}

.result-container .result-title {
  margin-top: 6.5625rem;
  color: #97633e;
  text-align: center;
  -webkit-text-stroke-width: 0.5;
  -webkit-text-stroke-color: #97633e;
  font-family: 'RIDIBatang';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem; /* 130.769% */
  letter-spacing: normal;
}

.result-container .result-subtitle-wrap {
  display: flex;
  width: 100%;
  justify-content: center;
}

.result-container .result-subtitle-wrap .result-subtitle {
  width: fit-content;
  color: #97633e;
  text-align: center;
  font-family: 'Pretendard-400';
  font-size: 1.375rem;
  font-style: normal;
  line-height: 2.25rem; /* 120% */
  margin: 0.88rem 0 1.12rem;
  letter-spacing: normal;
  display: flex;
  padding: 0.25rem 1rem;
  justify-content: center;
  align-items: center;
  border-radius: 0.625rem;
  background: rgba(151, 99, 62, 0.1);
}

.result-container .result-subtitle-wrap .result-subtitle span {
  font-family: 'Pretendard-700';
}

.result-container .result-image {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result-container .result-image .capture-wrapper.green-cover {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bg-result-top-green.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 25rem;
  height: 34.375rem;
}

.result-container .result-image .capture-wrapper.red-cover {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bg-result-top-red.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 25rem;
  height: 34.375rem;
}

.result-container .result-image .capture-wrapper .capture-wrap {
  width: 25rem;
  height: 34.375rem;
  transform: translateX(-0.63rem);
}

.result-container .result-image .capture-wrapper .capture-wrap p {
  font-family: 'Arita-buriB';
  color: #f8f4e7;
  text-align: center;
  font-size: 1.625rem;
  font-style: normal;
  line-height: 2rem;
  position: absolute;
  top: 2.88rem;
  left: 50%;
  transform: translateX(-50%);
}

.result-container .result-image .capture-wrapper .capture-wrap .result_image {
  width: 100%;
  height: 100%;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
}

.img-object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem 0.625rem 0.625rem 0.25rem;
}

.result-container .result-image .text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.63rem;
}

.result-container .result-image .text .arrow-up {
  width: 1.5rem;
  height: 1.5rem;
}

.result-container .result-image .text p {
  color: #563b37;
  text-align: center;
  font-family: 'Pretendard-500';
  font-weight: 500;
  font-size: 1rem;
  font-style: normal;
  line-height: 2.25rem; /* 225% */
  letter-spacing: normal;
}

.result-container .notice-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result-container .notice-container .notice {
  display: flex;
  padding: 0.25rem 0;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.625rem;
  background-color: rgba(151, 99, 62, 0.1);
  width: 18.6875rem;
  color: #97633e;
  text-align: center;
  font-family: 'Pretendard-500';
  font-weight: 500;
  font-size: 1.125rem;
  font-style: normal;
  line-height: 2.25rem; /* 200% */
  letter-spacing: normal;
}

.result-container .notice-container .notice-sub {
  color: #97633e;
  text-align: center;
  font-family: 'Pretendard-400';
  font-size: 1rem;
  font-style: normal;
  line-height: 1.625rem; /* 162.5% */
  margin: 0.5rem 0 2.25rem;
  letter-spacing: normal;
}

.result-container .image-2 .landing-btn-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 2.75rem;
}

.result-container .image-2 .landing-btn-wrapper a {
  display: flex;
  width: 27.5rem;
  height: 5rem;
  padding: 0.625rem;
  justify-content: center;
  align-items: center;
  border-radius: 624.9375rem;
  background: #563b37;
  box-shadow: 0px 0px 20px 0px rgba(255, 252, 233, 0.7), 0px 4px 4.8px 0px rgba(255, 252, 233, 0.2) inset,
    0px 10px 20px 0px rgba(0, 0, 0, 0.2);
  color: #fff;
  text-align: center;
  text-shadow: 0px 0px 4px rgba(255, 252, 233, 0.5);
  font-family: 'RIDIBatang';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
}

.result-container .image-1,
.result-container .image-2 {
  width: 100%;
}

.result-container .image-1 img,
.result-container .image-2 img {
  width: 100%;
  height: auto;
}

.centered {
  margin: auto;
  width: max-content;
}

.result-4cut-image {
  width: 100%;
  height: 100%;
  border-top-right-radius: 1.25rem;
  border-bottom-right-radius: 1.25rem;
}

.flipbook {
  margin: 1rem 0;
  height: 23.4375rem;
  transform: translateX(3rem) translateZ(1rem);
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.flipbook .arrow_forward {
  width: auto;
  height: 2.75rem;
  position: absolute;
  top: 50%;
  right: -28.4rem;
  transform: translateY(-50%);
  z-index: 999;
}

.flipbook .arrow_backward {
  width: auto;
  height: 2.75rem;
  position: absolute;
  top: 38%;
  right: 0.25rem;
  transform: rotate(-180deg) translateY(-50%);
  z-index: 999;
}

.flipbook .leaf {
  position: absolute;
  transform-style: preserve-3d;
  width: 26.25rem;
  height: 23.4375rem;
  background-color: #fff;
  transition: transform 1s;
  transform: rotate3d(0, 1, 0, 0deg);
  transform-origin: left 0px;
  border-radius: 0 1.25rem 1.25rem 0;
}

.flipbook .leaf .page {
  transform-style: preserve-3d;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.flipbook .leaf .page-btn-area {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
}

.flipbook .leaf .page-btn-area .prev,
.flipbook .leaf .page-btn-area .next {
  width: 50%;
  height: 100%;
}

.flipbook .leaf .page.front:not(.external) {
  box-shadow: inset 5px 0px 5px -5px #0005;
}

.flipbook .leaf .page.back {
  transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 0.1px);
}

.flipbook .leaf .page.back:not(.external) {
  box-shadow: inset -5px 0px 5px -5px #0005;
}

.disabled {
  user-select: none;
  opacity: 0.6;
}

/* .page.front{
  border-radius: 0rem 1.25rem 1.25rem 0;
} */

.page.back {
  border-radius: 1.25rem 0rem 0rem 1.25rem;
}

#prevPage,
#nextPage {
  width: 5rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
}

/* 결과 공유하기 */

.game-result .share-sns-list {
  margin: 3.12rem 0 2rem;
}

.share-sns-list.result {
  margin: 2.75rem 0 1rem 0;
}

.share-sns-list.result .list-title span {
  color: #898989;
  text-align: center;
  font-family: 'NanumSquareNeo-Bd';
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.6875rem;
}

.share-sns-list.result .list li .btn-share.kakao {
  width: 3.375rem;
  height: 3.375rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/kakao.png');
}

.share-sns-list.result .list li .btn-share.instagram {
  width: 3.375rem;
  height: 3.375rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/instagram.png');
}

.share-sns-list.result .list li .btn-share.facebook {
  width: 3.375rem;
  height: 3.375rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/facebook.png');
}

.share-sns-list.result .list li .btn-share.twitter {
  width: 3.375rem;
  height: 3.375rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/twitter.png');
}

.share-sns-list.result .list li .btn-share.link-copy {
  width: 3.375rem;
  height: 3.375rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/link.png');
}

.share-sns-list.result .list li + li {
  margin: 0;
}

.share-sns-list .list-title .countBox {
  margin-left: 0.3rem;
}

.share-sns-list .list-title .countBox .countImg {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/share.png');
  background-position: center;
  background-size: contain;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  transform: translateY(-0.2rem);
}

.share-sns-list .list-title .countBox .countNumber {
  color: #563b37;
  text-align: center;
  font-family: 'Pretendard-500';
  font-weight: 500;
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.25rem; /* 111.111% */
  letter-spacing: -0.01125rem;
}

/* 가장 많은 유형 */

.game-result .most-types-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.game-result .result-box.most {
  border: 1.5px solid #97633e40;
  width: 27.5rem;
  border-radius: 0.75rem;
}

.game-result .result-box.most,
.game-intro .result-box.most {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-intro .result-box.most {
  border: none;
  margin: 0 0 7rem 0;
  padding: 0;
}

.game-result .result-box.most .deco_1,
.game-intro .result-box.most .deco_1 {
  width: 0.9375rem;
  height: 0.9375rem;
  margin-bottom: 0.5rem;
}

.game-result .result-box.most .result-box-title > span,
.game-intro .result-box.most .result-box-title > span {
  color: #563b37;
  text-align: center;
  font-family: 'Pretendard-700';
  font-size: 1.625rem;
  font-style: normal;
  line-height: 1.625rem; /* 100% */
  letter-spacing: normal;
}

.game-result .result-box.most .result-box-title::before,
.game-intro .result-box.most .result-box-title::before {
  display: none;
}

.game-result .result-box.most .result-box-title2,
.game-intro .result-box.most .result-box-title2 {
  margin-top: 0.5rem;
}

.game-result .result-box.most .result-box-title2 > small,
.game-intro .result-box.most .result-box-title2 > small {
  color: #563b37;
  text-align: center;
  font-family: 'Pretendard-400';
  font-weight: 400;
  font-size: 0.875rem;
  font-style: normal;
  line-height: normal;
}

.game-result .img-halt-box {
  display: flex;
  justify-content: center;
}

.game-result .img-halt-box .list {
  width: 24rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.game-intro .img-halt-box .list li {
  flex: initial;
  width: 12rem;
}

.game-intro .img-halt-box .list li a {
  padding: 0;
}

.game-result .img-halt-box .list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex: 1 0 0;
  width: 12rem;
}

.game-intro .img-halt-box .list {
  justify-content: center;
  gap: 0.75rem;
}

.game-intro .img-halt-box .list li img,
.game-result .img-halt-box .list li img {
  width: 8.125rem;
  height: 11.17188rem;
  border-radius: 0.25rem;
}

.game-wrapper.basic .result-box .img-halt-box ul.list > li span.label-top {
  color: #563b37;
  text-align: center;
  font-family: 'Pretendard-700';
  font-size: 1.51356rem;
  font-style: normal;
  line-height: normal;
  text-shadow: none;
  letter-spacing: normal;
}

.game-wrapper.basic .result-box .img-halt-box ul.list > li span.label-bottom {
  margin-bottom: 1rem;
}

.result-box .img-halt-box ul.list > li a span {
  color: #563b37;
  text-align: center;
  font-family: 'Pretendard-600';
  font-size: 1.375rem;
  font-style: normal;
  line-height: 1.625rem; /* 118.182% */
  letter-spacing: normal;
}

.result-box .img-halt-box ul.list > li span.label-bottom > em {
  color: #563b37;
  text-align: center;
  font-family: 'Pretendard-400';
  font-weight: 400;
  font-size: 0.875rem;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}

.game-result .btn_myranking {
  margin: 0;
  width: 23.75rem;
}

.game-wrapper.basic .game-result .btn_myranking > a {
  box-shadow: none;
  display: flex;
  padding: 1.375rem 0.75rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border: none;
  background: #97633e;
  border-radius: 10rem;
  color: #fff;
  font-family: 'Pretendard-700';
  font-size: 1.375rem;
  font-style: normal;
  line-height: 2.0625rem;
  letter-spacing: normal;
}

.game-wrapper.basic .game-result .result-box {
  background-color: rgba(255, 255, 255, 0.3);
  padding: 2rem 1.88rem;
}

.game-wrapper.basic .game-result .result-box .btn_myranking > a::after {
  display: none;
}

/* 다시하기 버튼 */

.game-result .btn_retest {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 1.5rem 0 4rem;
}

.game-result .btn_retest > a {
  display: flex;
  width: 27.75rem;
  height: 4.875rem;
  padding: 1.375rem 0;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-radius: 10rem;
  background: #563b37;
  color: #fff;
  font-family: 'Pretendard-700' !important;
  font-size: 1.5rem !important;
  font-style: normal;
  line-height: 2.0625rem;
  box-shadow: none !important;
  background-image: none;
  letter-spacing: normal;
}

.game-result .btn_retest > a img {
  width: 1.75rem;
  height: 1.75rem;
}

/* 콘텐츠 더보기 */

.contents-more {
  background: transparent;
  border: none;
  flex-direction: column;
  width: 100%;
  border-radius: 0;
  padding: 2.5rem 0;
  margin: 0;
}

.contents-more .contents-main .contents-logo img {
  width: 8.334rem;
}

.contents-more .contents-list .game-btn {
  width: 100%;
  border-radius: 0;
  margin: 0;
  text-align: left;
  padding: 1.66681rem 2.00013rem;
  position: relative;
  letter-spacing: 0.1px;
  background-color: transparent !important;
  border: none !important;
  border-top: 1.333px solid #563b37 !important;
  cursor: pointer;
  font-family: 'Pretendard';
  font-size: 1.3125rem !important;
  line-height: normal;
}

.contents-more .contents-list .game-btn a {
  color: #563b37cc;
  font-family: 'Pretendard-500';
  font-weight: 500;
}

.contents-more .contents-list .game-btn:before {
  left: 90%;
  width: 2rem;
  height: 2rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/expand_more.png');
  background-size: contain;
}

.contents-more .contents-main {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0 1.7rem 1rem 1.7rem;
}

.contents-more .contents-list {
  margin: 0 0 0.7rem 0;
  border-left: 1px solid #373c3f;
  border-left: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contents-more .contents-list > div {
  border-top: 1px solid #373c3f;
}

.contents-more .contents-main .sub-text {
  color: #563b37;
  font-family: 'Pretendard';
  font-size: 1.50013rem;
  font-style: normal;
  line-height: 2.16681rem;
}

/* 추천 콘텐츠 */

.game-result .recommend-list .inner .title {
  color: #563b37;
  font-family: 'Pretendard-700';
  font-size: 1.5rem;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.033rem;
  margin-bottom: 0.5rem;
}

.game-result .recommend-list {
  background: transparent;
}

.game-result .recommend-list:before {
  background: #97633e33;
  height: 14.5rem;
}

.game-result .recommend-list .inner {
  margin: 0 1.5rem;
}

.game-result .recommend-list .swiper-slide {
  width: 10.831rem;
  height: 13.33044rem;
}

.game-result .recommend-list .slide-box {
  width: 10.831rem;
  height: 13.33044rem;
  border: 0.4rem solid #563b37;
}

.game-result .recommend-list .slide-box .img-box {
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 0;
  width: 100%;
  height: 100%;
}

.game-result .recommend-list .slide-box .slide-text {
  width: 9rem;
  padding: 0;
  position: absolute;
  bottom: 0.3rem;
  left: 51%;
  transform: translateX(-50%);
  color: #373c3f;
  font-family: 'Pretendard';
  font-size: 0.99981rem;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.022rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-result .recommend-list .slide-box .link {
  padding: 0;
}

.game-result .recommend-list .btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0 3rem 0;
}

.btn-white-round {
  width: 15.24669rem;
  height: 3.99913rem;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.24975rem;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.0275rem;
  background-color: #563b37;
}

/* 모달 스타일 */

.dim {
  display: none;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
}

.dim .input_modal,
.dim .detail_container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dim .modal_container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fcfcfc;
  width: 28.25rem;
  height: 39.875rem;
}

.dim .modal_container.fit_content {
  height: fit-content;
}

.dim .modal_container .close {
  position: absolute;
  top: 0.87rem;
  right: 0.87rem;
  width: 2rem;
  height: 2rem;
}

.dim .input_modal .title {
  color: #000;
  font-family: 'NanumSquareNeo-Eb';
  font-size: 1.375rem;
  font-style: normal;
  line-height: 2.0625rem;
  position: relative;
  letter-spacing: normal;
  padding: 0.75rem 1.5rem 0 1.5rem;
  margin-bottom: 0.75rem;
}

.dim .input_modal .title .title_line {
  width: 10.625rem;
  height: 0.5rem;
  position: absolute;
  left: 1.25rem;
  bottom: -0.3rem;
}

.dim .input_modal .input_container {
  overflow: scroll;
}

.dim .input_modal .userInfo {
  display: flex;
  padding: 0.375rem 2rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  align-self: stretch;
}

.dim .input_modal .userInfo .title {
  padding: 0;
  color: #000;
  font-family: 'NanumSquareNeo-Bd';
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.6875rem;
  margin: 0;
}

.dim .input_modal .userInfo .title span {
  color: #eb008b;
  margin-left: 0.2rem;
}

.dim .input_modal .userInfo .name,
.dim .input_modal .userInfo .number {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #898989;
  font-family: 'NanumSquareNeo-Bd';
  font-size: 1rem;
  font-style: normal;
  line-height: 1.5rem;
  margin-top: 0.25rem;
}

.dim .input_modal .userInfo .name input,
.dim .input_modal .userInfo .number input {
  width: 21rem;
  height: 3.69rem;
  padding: 1rem 0.75rem;
  border: 1px solid #ededed;
  font-family: 'NanumSquareNeo-Bd';
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.6875rem;
}

.dim .input_modal .userInfo .name input::placeholder,
.dim .input_modal .userInfo .number input::placeholder {
  color: #cbcbcb;
}

.dim .input_modal .sns {
  height: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dim .input_modal .sns .sns_share {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24.3rem;
  gap: 0.25rem;
  padding: 0.375rem 0;
}

.dim .input_modal .sns .sns_share .title {
  padding: 0;
  color: #000;
  font-family: 'NanumSquareNeo-Bd';
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.6875rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 24.3rem;
  margin: 0;
}

.dim .input_modal .sns .sns_share .title .event_text {
  width: 12.875rem;
  height: auto;
}

.dim .input_modal .sns .sns_share .checkbox_container {
  display: flex;
  gap: 1.75rem;
  width: 100%;
  margin: 0.25rem 2rem 0.125rem 2rem;
}

.dim .input_modal .sns .sns_share .checkbox_container .instagram,
.dim .input_modal .sns .sns_share .checkbox_container .twitter {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.dim .input_modal .sns .sns_share .checkbox_container .instagram .checkbox,
.dim .input_modal .sns .sns_share .checkbox_container .twitter .checkbox {
  width: 1.46094rem;
  height: 1.375rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game220/modal/inactive_checkbox.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.dim .input_modal .sns .sns_share .checkbox_container .instagram p,
.dim .input_modal .sns .sns_share .checkbox_container .twitter p {
  font-size: 1.125rem;
  font-family: 'NanumSquareNeo-Bd';
  color: #808080;
  font-style: normal;
  line-height: 1.6875rem;
}

.dim .input_modal .sns .sns_share .instagram_input_container,
.dim .input_modal .sns .sns_share .twitter_input_container {
  display: none;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.dim .input_modal .sns .sns_share .instagram_input_container label,
.dim .input_modal .sns .sns_share .twitter_input_container label {
  color: #898989;
  font-family: 'NanumSquareNeo-Bd';
  font-size: 1rem;
  font-style: normal;
  line-height: 1.5rem;
}

.dim .input_modal .sns .sns_share .instagram_input_container input,
.dim .input_modal .sns .sns_share .twitter_input_container input {
  display: flex;
  padding: 1rem 0.75rem;
  align-items: center;
  align-self: stretch;
  border: 1px solid #ededed;
  background: #fff;
  font-family: 'NanumSquareNeo-Bd';
  font-size: 1.125rem;
  font-style: normal;
  line-height: 1.6875rem;
}

.dim .input_modal .sns .sns_share .instagram_input_container input::placeholder,
.dim .input_modal .sns .sns_share .twitter_input_container input::placeholder {
  color: #cbcbcb;
}

.dim .input_modal .sns .notification {
  word-break: keep-all;
  padding: 0.75rem 0.5rem 0.875rem 0.5rem;
  margin: 0.75rem 2rem 0 2rem;
  color: #898989;
  font-family: 'NanumSquareNeo-Bd';
  font-size: 0.8125rem;
  font-style: normal;
  line-height: 1.21875rem;
  letter-spacing: normal;
  background-color: #f6f6f6;
  width: 24.3rem;
}

.dim .input_modal .sns .notification a {
  color: #eb008b;
}

.dim .input_modal .personal_info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 1.75rem;
  margin-top: 0.75rem;
}

.dim .input_modal .personal_info .container {
  width: 25.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  letter-spacing: normal;
  line-height: 1.40625rem !important;
  font-family: 'NanumSquareNeo-Bd';
}

.dim .input_modal .personal_info img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.458rem;
  height: 1.458rem;
}

.dim .input_modal .personal_info .detail {
  color: #898989;
}

.dim .input_modal .submit_button {
  margin: 1.25rem 1.5rem 1.5rem 1.5rem;
  width: 25.25rem;
  padding: 1.375rem 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #cbcbcb;
  color: #fff;
  font-family: 'NanumSquareNeo-Eb';
  font-size: 1.375rem;
  font-style: normal;
  line-height: 2.0625rem;
}

.dim .input_modal .submit_button.active {
  background: black;
  color: white;
}

.dim .detail_container {
  display: none;
}

.dim .detail_container .title {
  color: #000;
  font-family: 'NanumSquareNeo-Eb';
  font-size: 1.375rem;
  font-style: normal;
  line-height: 2.0625rem;
  display: flex;
  padding: 0.75rem 1.5rem 0.625rem 1.5rem;
  align-items: center;
  align-self: stretch;
}

.dim .detail_container .title img {
  width: 1.5rem;
  height: auto;
}

.dim .detail_container p {
  margin: 0 2rem;
  padding: 0.84rem 0 2.34rem 0;
  color: #898989;
  font-family: 'NanumSquareNeo-Bd';
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.3125rem;
  letter-spacing: normal;
}

.dim .detail_container p span {
  font-family: 'NanumSquareNeo-Eb';
}

.dim .success {
  display: none;
  width: 28.25rem;
  height: 30.5rem;
  flex-direction: column;
  align-items: center;
  background: #fcfcfc;
  position: relative;
}

.dim .success .title {
  color: #000;
  font-family: 'NanumSquareNeo-Eb';
  font-size: 1.375rem;
  font-style: normal;
  line-height: 2.0625rem;
  padding: 1rem 0 0 1.5rem;
  align-self: flex-start;
  margin-bottom: 0.5rem;
}

.dim .success .content {
  overflow: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dim .success .content .detail .title svg {
  transition: transform 0.5s linear;
}

.dim .success .success_image {
  width: 21.875rem;
  height: 12.5rem;
  flex-shrink: 0;
}

.dim .success .alert {
  color: #eb008b;
  text-align: center;
  font-family: 'NanumSquareNeo-Bd';
  font-size: 1.25rem;
  font-style: normal;
  line-height: 1.875rem;
  margin-top: 0.75rem;
}

.dim .success .detail .title {
  color: #898989;
  font-family: 'NanumSquareNeo-Bd';
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0 0 0;
}

.dim .success .detail .title span {
  color: #000;
  line-height: 1.3125rem;
  text-decoration-line: underline;
  margin-right: 0.2rem;
  margin-left: 0.5rem;
}

.dim .success .detail .text_area {
  display: none;
  word-break: keep-all;
  color: #898989;
  font-family: 'NanumSquareNeo-Rg';
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.125rem;
  padding: 0 2rem;
}

.dim .success .landing_button {
  display: flex;
  padding: 1.375rem 0.75rem;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
  font-family: 'NanumSquareNeo-Eb';
  font-size: 1.375rem;
  font-style: normal;
  line-height: 2.0625rem;
  position: relative;
  width: 25.25rem;
  height: 4.8125rem;
  margin: 3.5rem 0 1.5rem 0;
}

.dim .success .landing_button img {
  position: absolute;
  top: -2.8rem;
  width: 9.19rem;
  height: auto;
  animation: animationBounce 1.2s infinite;
}

@keyframes animationBounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.2rem);
  }

  100% {
    transform: translateY(0);
  }
}

/* 전체 유형 순위 */

.test-lists-wrap .test-lists .test-list-item .item-wrap .thumb {
  width: fit-content;
  margin-right: 2rem;
}

.test-lists-wrap .test-lists .test-list-item .item-wrap .thumb img {
  width: 5.45456rem;
  height: 7.5rem;
  margin: 0;
  border-radius: 0.25rem;
}

.test-lists-wrap .test-lists .test-list-item .item-wrap .content .num {
  position: absolute;
  top: -1.8rem;
  right: 0;
  width: 2.625rem !important;
  height: 4.0625rem;
  padding-top: 0.5rem;
  color: #fff;
  text-align: center;
  font-family: 'RIDIBatang';
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 114.286% */
  text-shadow: none;
}

.test-lists-wrap .test-lists .test-list-item:nth-child(2n + 1) .item-wrap .content .num {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bookmark-green.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.test-lists-wrap .test-lists .test-list-item:nth-child(2n) .item-wrap .content .num {
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bookmark-red.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.test-lists-wrap .test-lists .test-list-item .item-wrap .content .item-info > p {
  color: #563b37;
  font-family: 'RIDIBatang';
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1rem; /* 100% */
  letter-spacing: normal;
}

.test-lists-wrap .test-lists .test-list-item .item-wrap .content .item-info .item-title p {
  color: #563b37;
  font-family: 'RIDIBatang';
  font-size: 1.5rem !important;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem; /* 133.333% */
  margin-top: 0.37rem;
  letter-spacing: normal;
}

.test-lists-wrap .title {
  width: 100%;
  background-color: #fff;
  padding: 0 0 0.63rem 0;
  margin: 0;
}

.test-lists-wrap .title::before {
  display: none;
}

.test-lists-wrap .title img {
  width: 12.5rem;
  height: 2.5rem;
}

.test-lists-wrap .rank_title_wrap .rank-title {
  color: #97633e;
  text-align: center;
  -webkit-text-stroke-width: 0.5;
  -webkit-text-stroke-color: #97633e;
  font-family: 'RIDIBatang';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.125rem; /* 130.769% */
  margin: 6.0825rem 0 1.5rem 0;
}

.test-lists-wrap .rank_title_wrap .rank-title .deco_1 {
  width: 0.9375rem;
  height: 0.9375rem;
}

.game-wrapper.basic .test-lists-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/bg-ranking.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.game-wrapper.basic .test-lists-wrap .bird {
  position: absolute;
  top: 6.2rem;
  left: 1.3rem;
  width: 6.25rem;
  height: auto;
}

.game-wrapper .test-lists-wrap .test-lists .test-list-item {
  padding: 1.125rem 1rem;
  border: none;
  background: #fff;
  border-radius: 0;
  margin-bottom: 1rem;
  background-image: url('https://cdn.banggooso.com/assets/images/game241/rank-box.png');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 27.5rem;
  height: auto;
}

.game-wrapper .test-lists-wrap .test-lists .test-list-item .item-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-wrapper .test-lists-wrap .test-lists .test-list-item .item-wrap .content {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1 0 0;
}

.test-lists-wrap .test-lists .test-list-item.rank_list .percen {
  display: flex;
  padding: 0.25rem 1rem;
  justify-content: center;
  align-items: center;
  width: fit-content;
  border-radius: 62.4375rem;
  background: rgba(151, 99, 62, 0.1);
  color: #97633e;
  text-align: center;
  font-family: 'RIDIBatang';
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem; /* 150% */
  margin-top: 0.88rem;
  letter-spacing: normal;
}

.test-lists-wrap .test-lists .test-list-item .item-wrap .item-info p {
  font-family: 'NanumSquareNeo-Bd';
}

.plus {
  color: black !important;
  font-size: 1.75rem !important;
  font-family: 'NanumSquareNeo-Eb' !important;
}

.event-notice {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.red-arrow {
  width: 1.75rem !important;
  height: 1.75rem !important;
}

.event-notice p {
  color: #E6392F;
  font-family: 'Pretendard-400';
  font-size: 1.375rem;
}

.event-notice p span {
  font-family: 'Pretendard-500' !important;
}