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

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

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

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

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

@font-face {
  font-family: 'DungGeunMo';
  src: url('https://cdn.banggooso.com/assets/images/game245/font/DungGeunMo.ttf');
}

html,
body {
  font-size: 16px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: 'Pretendard';
  text-align: center;
}

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

button,
a {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

.game-wrapper {
  height: 100dvh !important;
  letter-spacing: normal;
}

.d-none {
  display: none !important;
}

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

.cursor-p {
  cursor: pointer;
}

.game-wrapper .app-header .app-header-btn.back {
  background: url(https://cdn.banggooso.com/assets/images/game267/header_white_back.png) no-repeat center / 0.66669rem
    1.3265rem;
}

.game-wrapper .app-header .app-logo {
  width: 9.3025rem;
  height: 100%;
  flex-shrink: 0;
  background: url(https://cdn.banggooso.com/assets/images/game267/logo_white.png) no-repeat center / contain;
}

.game-wrapper .app-header .sound-btn {
  width: 3.5rem;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: url(https://cdn.banggooso.com/assets/images/game267/header_sound.png) no-repeat 0.5rem center / 2rem
    1.75rem;
}

.game-wrapper .app-header .sound-btn.off:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  height: 2px;
  background: #fff;
  transform-origin: left;
  transform: rotate(315deg) translate(-50%);
}

/* intro */
.game-wrapper.basic .app-header {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999 !important;
  border: 0;
}

.game-wrapper .app-header.intro {
  background: rgba(0, 0, 0, 0.4) !important;
  background-blend-mode: multiply;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.game-intro {
  height: auto;
  padding-bottom: 6.25rem;
  padding-bottom: 0 !important;
  background: url(https://cdn.banggooso.com/assets/images/game267/intro_bg.png) no-repeat center / cover !important;
}

.game-intro .ttl-bg-wrapper {
  position: relative;
}

.game-intro .ttl-bg-wrapper .colb-logo-1 {
  position: absolute;
  top: 1.42rem;
  left: 10.11rem;
  width: 4.54169rem;
  height: 1.25rem;
  flex-shrink: 0;
  aspect-ratio: 72.67/20;
  background: url(https://cdn.banggooso.com/assets/images/game267/intro_colb_logo_1.png) no-repeat center / contain;
}

.game-intro .ttl-bg-wrapper .colb-logo-2 {
  position: absolute;
  top: 1.71rem;
  right: 11.73rem;
  width: 2.60244rem;
  height: 0.80438rem;
  flex-shrink: 0;
  aspect-ratio: 41.64/12.87;
  background: url(https://cdn.banggooso.com/assets/images/game267/intro_colb_logo_2.png) no-repeat center / contain;
}

.game-intro .ttl-bg-wrapper img {
  width: 100%;
  height: 32.1875rem;
}

.game-intro .intro-content {
  padding-top: 4.0625rem;
}

.game-intro .input-wrapper {
  display: flex;
  flex-flow: wrap;
  gap: 0.62rem;
  margin: 1.5rem 1.88rem 0;
}

.game-intro .input-wrapper > div {
  flex: 1 100%;
  position: relative;
}

.game-intro .input-wrapper input {
  width: 100%;
  height: 4.0625rem;
  border-radius: 0.75rem;
  border: 2px solid #d3d3d3;
  background: #fff;
  padding: 0 1.5rem;
  padding-right: 3rem;
  color: #413830;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.01375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-intro .input-wrapper input ~ label {
  position: absolute;
  top: 1.38rem;
  right: 1.5rem;
  width: 1.32506rem;
  height: 1.32725rem;
  flex-shrink: 0;
  aspect-ratio: 21.2/21.24;
  background: url(https://cdn.banggooso.com/assets/images/game267/ico_search_black.png) no-repeat center / contain;
  cursor: pointer;
}

.game-intro .input-wrapper input.readonly ~ label {
  opacity: 0.5;
}

.game-intro .input-wrapper .school-checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: calc(1.25rem - 0.62rem);
  padding-left: 0.75rem;
}

.game-intro .input-wrapper .school-checkbox-wrapper input {
  width: 0;
  height: 0;
  flex-shrink: 0;
  aspect-ratio: 21.2/21.24;
  position: absolute;
  left: -9999px;
}

.game-intro .input-wrapper .school-checkbox-wrapper label {
  color: rgba(65, 56, 48, 0.8);
  font-feature-settings: 'hist' on;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.0125rem;
  position: static;
  width: auto;
  height: auto;
  flex-shrink: 0;
  background: initial;
  aspect-ratio: initial;
  display: flex;
  gap: 0.62rem;
}

.game-intro .input-wrapper .school-checkbox-wrapper label:before {
  content: '';
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 0.375rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/ico_input_checkbox_white.png) no-repeat center /
    0.8125rem 0.61056rem #413830;
  opacity: 0.3;
}

.game-intro .input-wrapper .school-checkbox-wrapper input:checked + label:before {
  opacity: 1;
}

.game-intro .input-wrapper input::placeholder {
  color: rgba(65, 56, 48, 0.3);
}

.game-intro .input-wrapper input.readonly {
  border-radius: 0.75rem;
  border: 1.5px solid #d2cbc3;
  opacity: 0.5;
  background: #fff;
  cursor: default;
}

.game-intro .input-wrapper button {
  flex: 1 100%;
  display: flex;
  height: 5rem;
  filter: drop-shadow(0px 4px 6px rgba(66, 56, 48, 0.5));
  background: url(https://cdn.banggooso.com/assets/images/game267/intro_grn_btn.png) no-repeat center / cover;
  margin-top: 1.38rem;
}

.game-intro .input-wrapper .fiction-info-txt {
  text-align: center;
  color: rgba(65, 56, 48, 0.6);
  font-feature-settings: 'hist' on;
  font-family: 'Pretendard';
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.0125rem;
  width: 100%;
  margin-top: calc(1.25rem - 0.62rem);
}

.game-intro .participant-count {
  margin: 0 1.87rem;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  padding: 2.5rem 0rem 1.25rem 0rem;
  border-bottom: 1px solid rgba(65, 56, 48, 0.6);
}

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

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

.game-intro .share-container {
  width: 100%;
  padding: 2.5rem 0rem 3.75rem 0rem;
}

.game-intro .share-sns-list {
  margin: 0;
}

.game-intro .share-container .list-title {
  color: #413830;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.625rem;
  /* 108.333% */
  letter-spacing: -0.015rem;
}

.game-intro .share-container .list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.game-intro .share-container li {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  overflow: hidden;
}

.game-intro .share-sns-list .btn-share {
  width: 100%;
  height: 100%;
}

.game-intro .share-container li + li {
  margin: 0;
}

.game-intro .share-sns-list .btn-share.kakao {
  background: url(https://cdn.banggooso.com/assets/images/game267/share_new_common_kakao_white.png) no-repeat center /
    1.26044rem 1.15794rem #413830;
}

.game-intro .share-sns-list .btn-share.instagram {
  background: url(https://cdn.banggooso.com/assets/images/game267/share_new_common_instagram_white.png) no-repeat center /
    1.7044rem #413830;
}

.game-intro .share-sns-list .btn-share.twitter {
  background: url(https://cdn.banggooso.com/assets/images/game267/share_new_common_x_white.png) no-repeat center /
    1.6044rem #413830;
}

.game-intro .share-sns-list .btn-share.facebook {
  background: url(https://cdn.banggooso.com/assets/images/game267/share_new_common_facebook_white.png) no-repeat center /
    24% #413830;
}

.game-intro .share-sns-list .btn-share.link-copy {
  background: url(https://cdn.banggooso.com/assets/images/game267/share_new_common_link_white.png) no-repeat center /
    47% #413830;
}

.game-intro .real-time-rank-wrapper {
  display: flex;
  width: 100%;
  padding: 3.125rem 1.875rem 1.5rem 1.875rem;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  background: #e0d9d2;
}

.game-intro .real-time-rank-wrapper + p {
  padding-bottom: 6.25rem;
  color: rgba(65, 56, 48, 0.6);
  text-align: center;
  font-feature-settings: 'hist' on;
  font-family: 'Pretendard';
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.0125rem;
  background: #e0d9d2;
}

.game-intro .real-time-rank-wrapper .real-time-rank-title {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.game-intro .real-time-rank-wrapper .real-time-rank-title h3 {
  width: 13.5rem;
  height: 2.125rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/realTime_ttl.png) no-repeat center / contain;
}

.game-intro .real-time-rank-wrapper .real-time-rank-title:before,
.game-intro .real-time-rank-wrapper .real-time-rank-title:after {
  content: '';
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  transform: rotate(-45deg);
  aspect-ratio: 1/1;
  background: #413830;
}

.game-intro .real-time-rank-wrapper .real-time-rank-list {
  width: 100%;
  padding: 2rem 1.875rem 2rem 1.875rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.5);
}

.game-intro .real-time-rank-wrapper .real-time-rank-list ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
}

.game-intro .real-time-rank-wrapper .real-time-rank-list ul li {
  padding-left: 0.375rem;
  display: flex;
  width: 100%;
  gap: 1rem;
  align-items: center;
}

.game-intro .real-time-rank-wrapper .real-time-rank-list ul li:nth-child(2) {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-top: 1px solid rgba(92, 65, 52, 0.2);
  border-bottom: 1px solid rgba(92, 65, 52, 0.2);
}

.game-intro .real-time-rank-wrapper .real-time-rank-list ul li span:first-child {
  display: flex;
  width: 1.75rem;
  height: 2.25rem;
  padding: 0.375rem 0.6875rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.625rem;
}

.game-intro .real-time-rank-wrapper .real-time-rank-list ul li span:nth-child(2) {
  flex: 1;
  text-align: left;
  color: #413830;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  /* 1.925rem */
  letter-spacing: -0.055rem;
}

.game-intro .real-time-rank-wrapper .real-time-rank-list ul li span:nth-child(3) {
  color: rgba(65, 56, 48, 0.7);
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  opacity: 0.6;
}

.game-intro .real-time-rank-wrapper .real-time-rank-list ul li:nth-child(1) span:nth-child(1) {
  background: url(https://cdn.banggooso.com/assets/images/game267/top_rank_1.png) no-repeat center / contain;
}

.game-intro .real-time-rank-wrapper .real-time-rank-list ul li:nth-child(2) span:nth-child(1) {
  background: url(https://cdn.banggooso.com/assets/images/game267/top_rank_2.png) no-repeat center / contain;
}

.game-intro .real-time-rank-wrapper .real-time-rank-list ul li:nth-child(3) span:nth-child(1) {
  background: url(https://cdn.banggooso.com/assets/images/game267/top_rank_3.png) no-repeat center / contain;
}

.school-search-modal-content-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: center;
  padding: 0 1.8rem;
  gap: 0.625rem;
}

.school-search-modal-content-wrapper > .close {
  position: static;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: url(https://cdn.banggooso.com/assets/images/game267/ico_close_btn.png) no-repeat center / 80% #fff;
}

.school-search-modal-content {
  position: static;
  width: calc(100%);
  max-width: 500px;
  font-size: 14px;
  text-align: left;
  overflow-y: scroll;
  max-height: 22rem;
}

.school-search-modal-content .input-top {
  background-color: #fff;
  width: 100%;
  height: 3.286em;
  border-bottom: 1px solid #363636;
  padding: 0 1.643em 0 1.071em;
  display: flex;
  border-radius: 0.5rem 0.5rem 0 0;
}

.school-search-modal-content .input-top input {
  width: 100%;
  height: 100%;
  color: #222;
  font-size: 1.286em;
  font-family: 'Pretendard';
  line-height: 1.571em;
}

.school-search-modal-content .input-top input::placeholder {
  color: #969696;
}

.school-search-modal-content .input-top button {
  width: 2.5rem;
  height: 100%;
  background: url(https://cdn.banggooso.com/assets/images/game267/ico_search_black.png) no-repeat center / 50%;
}

.school-search-modal-content .modal-body {
  width: 100%;
  height: 100%;
  font-size: 14px;
  transform: translateY(-1px);
}

.school-search-modal-content .modal-body .search-list {
  width: 100%;
  padding: 0.643em 0.643em;
  background: rgba(236, 236, 236, 1);
  display: none;
  border-radius: 0 0 0.5rem 0.5rem;
}

.school-search-modal-content .modal-body .search-list li {
  padding: 0.643em 0.643em 0;
  background: rgba(236, 236, 236, 1);
  position: relative;
  padding: 1.071em;
  background-color: #fff;
  border-top: 1px solid #d7d7d7;
  border-left: 1px solid #e0e0e0;
  border-right: 1px solid #e0e0e0;
  border-bottom: 0 none;
  cursor: pointer;
  font-size: 1.2em;
}

.school-search-modal-content .modal-body .search-list li .school-address {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.5);
}

.school-search-modal-content .modal-body .search-list li .keyword-mask {
  background: yellow;
}

.school-search-modal-content .modal-body .search-list.active {
  display: block;
}

.school-search-modal-content .modal-body .info-txt {
  padding: 2.786em 2.071em;
  box-shadow: 0 1px #dedede;
  background-color: #fff;
  display: none;
  border-radius: 0 0 0.5rem 0.5rem;
}

.school-search-modal-content .modal-body .info-txt.active {
  display: block;
}

.school-search-modal-content .modal-body .info-txt .info-txt-title {
  font-size: 14px;
}

.school-search-modal-content .modal-body .info-txt .info-txt-title p {
  display: block;
  width: 1.714em;
  height: 0.6029em;
  color: #000;
  font-family: 'Pretendard';
  font-size: 1.5em;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.school-search-modal-content .modal-body .info-txt .info-txt-title span {
  margin-top: 1em;
  line-height: 1.571em;
  display: block;
  font-size: 1em;
  font-family: 'Pretendard';
}

.school-search-modal-content .modal-body .info-txt .info-txt-desc {
  font-size: 14px;
}

.school-search-modal-content .modal-body .info-txt .info-txt-desc span {
  margin-top: 1em;
  line-height: 1.571em;
  display: block;
  font-size: 1em;
  font-family: 'Pretendard';
}

.school-search-modal-content .modal-body .info-txt .info-txt-desc p {
  display: block;
  margin-top: 0.214em;
  font-size: 0.929em;
  line-height: 1.357em;
  color: #008bd3;
}

/* main */

.game-wrapper .app-header {
  display: block !important;
  height: 4.0625rem !important;
  background: #000 !important;
  background-blend-mode: multiply;
}

.game-wrap .content {
  width: 100%;
  height: 100%;
  display: block;
}

.game-wrap .content .school-bg {
  width: 100%;
  height: 100%;
  background: url(https://cdn.banggooso.com/assets/images/game267/school_bg.png) no-repeat center / cover;
  background-position: 50% -7.5rem;
  overflow: hidden;
}

.content-add-info-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.content-add-info-modal .close-btn {
  display: flex;
  padding: 0.375rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: url(https://cdn.banggooso.com/assets/images/game267/ico_close_btn.png) no-repeat center / 80%
    rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  margin-left: auto;
  transform: translateX(-2.5rem);
}

.content-add-info-modal .content-add-info-modal-inner {
  display: flex;
  width: 26.25rem;
  padding: 2rem 1.875rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.125rem;
  border-radius: 1.25rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/intro_bg.png) no-repeat center / cover;
  background-color: #f2f1ef;
}

.content-add-info-modal .content-add-info-modal-title {
  display: flex;
  height: 4.0625rem;
  padding: 0rem 1.5rem;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  border-radius: 0.75rem;
  background: #fff;
}

.content-add-info-modal .content-add-info-modal-title .ttl-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.62rem;
}

.content-add-info-modal .content-add-info-modal-title .ttl-wrapper h3 {
  color: #413830;
  font-family: 'Pretendard';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.01625rem;
}

.content-add-info-modal .content-add-info-modal-title .ttl-wrapper img {
  width: 1.35rem;
  height: 1.35rem;
  aspect-ratio: 1/1;
}

.content-add-info-modal .content-info-txt {
  border-radius: 0.75rem;
  background: #fff;
  display: flex;
  padding: 1.125rem 0.875rem 1.125rem 1.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  text-align: left;
}

.content-add-info-modal .content-info-txt p {
  color: #413830;
  font-family: Pretendard;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.125rem;
  /* 170% */
  letter-spacing: -0.0125rem;
}

.content-add-info-modal .content-info-txt p b {
  font-weight: 700;
}

.last-step-info-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(159, 159, 159, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.last-step-info-modal .last-step-info-modal-wrapper {
  display: flex;
  width: 25rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.last-step-info-modal .last-step-info-modal-inner {
  display: flex;
  width: 100%;
  padding: 2.375rem 0rem 2rem 0rem;
  flex-direction: column;
  align-items: center;
  border-radius: 1rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/step/last_step_modal_bg.png) no-repeat center / cover;
  position: relative;
  filter: drop-shadow(0px 0px 14px rgba(0, 0, 0, 0.7));
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: filter;
  backface-visibility: hidden;
}

.last-step-info-modal .last-step-info-modal-inner .last-step-info-modal-title {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 1rem;
}

.last-step-info-modal .last-step-info-modal-inner .last-step-info-modal-title h4 {
  color: #413830;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.9375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.25rem;
  /* 116.129% */
  letter-spacing: -0.0775rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 0.75rem;
}

.last-step-info-modal .last-step-info-modal-inner .last-step-info-modal-title h4:before {
  content: '';
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/img_taegeuk.png) no-repeat center / cover;
}

.last-step-info-modal .last-step-info-modal-inner > p {
  padding: 1rem 0 0.75rem;
  color: rgba(65, 56, 48, 0.8);
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2.125rem;
  /* 141.667% */
  letter-spacing: -0.015rem;
  width: calc(100% - 5rem);
  border-bottom: 1.5px solid #413830;
  margin-bottom: 0.3rem;
}

.last-step-info-modal .last-step-info-modal-inner > span {
  color: rgba(65, 56, 48, 0.8);
  width: calc(100% - 5rem);
  display: block;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  /* 1.75rem */
  padding-top: 1.12rem;
  border-top: 2.5px solid #413830;
}

.last-step-info-modal .last-step-info-modal-wrapper button {
  display: flex;
  width: 23.125rem;
  height: 5rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/last_step_modal_button.png) no-repeat center / contain;
  filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.5));
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: filter;
  backface-visibility: hidden;
}

.game-rule-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(159, 159, 159, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-rule-modal .game-rule-modal-wrapper {
  display: flex;
  width: 26.25rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

.game-rule-modal .game-rule-modal-inner {
  display: flex;
  width: 100%;
  height: 30.625rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border-radius: 1.25rem;
  position: relative;
  background: url(https://cdn.banggooso.com/assets/images/game267/intro_bg.png) no-repeat center / cover;
  background-color: rgba(242, 241, 238, 1);
  filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.25));
}

.game-rule-modal .game-rule-modal-inner .rule-ttl {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 13.18113rem;
  height: 4.75556rem;
  flex-shrink: 0;
  padding: 0.97rem 0 1.67rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/result_capture_userName.png) no-repeat center / cover;
}

.game-rule-modal .game-rule-modal-inner .rule-ttl h4 {
  display: flex;
  justify-content: center;
  gap: 0.37rem;
  align-items: center;
  height: 100%;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  /* 2.1125rem */
  letter-spacing: -0.065rem;
}

.game-rule-modal .game-rule-modal-inner .rule-ttl h4:before,
.game-rule-modal .game-rule-modal-inner .rule-ttl h4:after {
  content: '';
  display: block;
  width: 0.51694rem;
  height: 0.51694rem;
  transform: rotate(-45deg);
  aspect-ratio: 8.27/8.27;
  background: rgba(255, 255, 255, 0.9);
}

.game-rule-modal .game-rule-modal-inner .swiper-container {
  width: 100%;
  height: 100%;
  padding: 6.12rem 1.87rem 3.13rem;
  overflow: hidden;
  position: relative;
}

.game-rule-modal .game-rule-modal-inner .swiper-container .swiper-slide {
  width: 100%;
}

.game-rule-modal .game-rule-modal-inner .swiper-container .swiper-slide p {
  color: #564134;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 1.75rem */
  letter-spacing: -0.05rem;
  margin-bottom: 1.13rem;
}

.game-rule-modal .game-rule-modal-inner .swiper-container .swiper-slide p b {
  font-weight: 700;
}

.game-rule-modal .game-rule-modal-inner .swiper-container .swiper-slide img {
  width: 100%;
  height: 15rem;
  flex-shrink: 0;
}

.game-rule-modal .swiper-pagination {
  bottom: 1.75rem !important;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.game-rule-modal .swiper-pagination .swiper-pagination-bullet {
  width: 0.625rem;
  height: 0.625rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: rgba(65, 56, 48, 0.2) !important;
  margin: 0 !important;
  opacity: 1;
}

.game-rule-modal .swiper-pagination .swiper-pagination-bullet-active {
  background: #413830 !important;
}

.game-rule-modal .game-rule-modal-wrapper .game-start {
  display: flex;
  width: 23.125rem;
  height: 5rem;
  justify-content: center;
  align-items: center;
  background: url(https://cdn.banggooso.com/assets/images/game267/step_4_gameStart_btn.png) no-repeat center / cover;
  filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.5));
}

.game-wrap .field-inner {
  margin-top: 4.0625rem;
}

#gameFinishModal,
#gameOverModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(159, 159, 159, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#gameFinishModal .game-finish-modal-inner,
#gameOverModal .game-over-modal-inner {
  display: flex;
  width: 26.25rem;
  padding: 1.75rem 1.25rem 2rem 1.25rem;
  flex-direction: column;
  align-items: center;
  border-radius: 1.25rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/intro_bg.png) no-repeat center / cover;
  background-color: #fff;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
}

#gameFinishModal .game-finish-modal-inner:before,
#gameOverModal .game-over-modal-inner:before {
  content: '';
  display: block;
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 0.75rem;
  height: 0.75rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  z-index: 1;
  background: #413830;
}

#gameFinishModal .game-finish-modal-inner:after,
#gameOverModal .game-over-modal-inner:after {
  content: '';
  display: block;
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 0.75rem;
  height: 0.75rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  z-index: 1;
  background: #413830;
}

#gameFinishModal .game-finish-modal-inner h4,
#gameOverModal .game-over-modal-inner h4 {
  width: 7.875rem;
  height: 2.3125rem;
  font-size: 0;
}

#gameFinishModal .game-finish-modal-inner h4 {
  background: url(https://cdn.banggooso.com/assets/images/game267/img_gameEnd_ttl.png) no-repeat center / cover;
}

#gameOverModal .game-over-modal-inner h4 {
  background: url(https://cdn.banggooso.com/assets/images/game267/img_gameOver_ttl.png) no-repeat center / cover;
}

#gameFinishModal .game-finish-modal-inner span,
#gameOverModal .game-over-modal-inner span {
  display: block;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  color: #564134;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

#gameFinishModal .game-finish-modal-inner p,
#gameOverModal .game-over-modal-inner p {
  color: #564134;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.1875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 1.6625rem */
  letter-spacing: -0.0475rem;
  margin-bottom: 1.63rem;
}

#gameFinishModal .game-finish-modal-inner button,
#gameOverModal .game-over-modal-inner button {
  border-radius: 1.25rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/img_oth_font_btn_brwon.png) no-repeat center / 100%;
  display: flex;
  width: 21.875rem;
  height: 4.5rem;
  padding: 0.75rem;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.5);
}

.game-wrap .content .top-fixed-timer {
  position: absolute;
  display: flex;
  width: 31.25rem;
  padding: 1.25rem 0.5rem 1.25rem 1.25rem;
  align-items: center;
  gap: 0.625rem;
  top: 0;
  background: rgba(0, 0, 0, 0.15);
}

.game-wrap .content .top-fixed-timer .timer-txt {
  color: #fff;
  text-align: center;
  -webkit-text-stroke-width: 0.25px;
  -webkit-text-stroke-color: #fff;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 5.125rem;
}

.game-wrap .content .top-fixed-timer .timer-txt span {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.game-wrap .content .top-fixed-timer .timer-txt span svg {
  width: 100%;
  height: 100%;
}

.game-wrap .content .top-fixed-timer .timer-bar {
  display: flex;
  width: 23.75rem;
  padding: 0.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  flex-shrink: 0;
  border-radius: 62.4375rem;
  border: 1.5px solid #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, #fff 100%);
}

.game-wrap .content .top-fixed-timer .timer-bar .timer-bar-inner {
  display: flex;
  width: 100%;
  height: 0.8rem;
  border-radius: 62.4375rem;
  background: linear-gradient(90deg, rgba(255, 65, 43, 0.5) 0%, rgba(50, 60, 255, 0.5) 100%),
    url(https://cdn.banggooso.com/assets/images/game267/bg_progress_inner_bar.png) no-repeat center / cover;
  background-blend-mode: overlay;
}

.game-wrap .content .top-fixed-timer .goal-count {
  display: inline-flex;
  height: 3rem;
  padding: 0rem 0.75rem;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  position: absolute;
  top: calc(100% + 0.84rem);
  left: 1.27rem;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  color: #fff;
  text-align: center;
  -webkit-text-stroke-width: 0.25px;
  -webkit-text-stroke-color: #fff;
  font-family: 'Pretendard';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.game-wrap .content .top-fixed-timer .goal-count span {
  width: 2.73719rem;
  height: 1.75rem;
  aspect-ratio: 43.79/28;
  background: url(https://cdn.banggooso.com/assets/images/game267/img_sml_taegeukgi.png) no-repeat center / contain;
}

.game-wrap .content .top-fixed-timer .goal-count p {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
}

.game-wrap .content .top-fixed-timer .goal-count p:before {
  content: '';
  display: block;
  width: 0.56438rem;
  height: 0.56469rem;
  aspect-ratio: 9.03/9.03;
  background: url(https://cdn.banggooso.com/assets/images/game267/ico_txt_close.png) no-repeat center / cover;
}

.game-wrap .school-bg .teacher {
  position: absolute;
  top: 7.84rem;
  right: 2.96rem;
  width: 14.70788rem;
  height: 28.125rem;
  flex-shrink: 0;
  aspect-ratio: 235.33/450;
}

.game-wrap .content .teacher img {
  width: 100%;
  height: 100%;
}

.game-wrap .content .bottom-fixed-player {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 31.25rem;
  height: 24.375rem;
  flex-shrink: 0;
  aspect-ratio: 50/39;
}

.game-wrap .content .bottom-fixed-player .desk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://cdn.banggooso.com/assets/images/game267/desk.png) no-repeat center / cover;
}

.game-wrap .content .bottom-fixed-player .get-score {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(2rem);
  display: inline-flex;
  padding: 1.125rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  color: #333;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  opacity: 0;
  z-index: 1;
}

.game-wrap .content .bottom-fixed-player .get-score.active {
  transform: translateX(-50%) translateY(1rem);
  opacity: 1;
}

.game-wrap .content .bottom-fixed-player .paper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* test */
  position: absolute;
  top: 0;
  left: auto;
  width: 100%;
  height: 100%;
  width: 31.25rem;
  height: 21.25rem;
  flex-shrink: 0;
  aspect-ratio: 25 / 17;
  right: -1.17rem;
  top: 0.19rem;
}

.game-wrap .content .bottom-fixed-player .player-hand-left {
  position: absolute;
  top: -1.2rem;
  width: 31.25rem;
  height: 44.15625rem;
  flex-shrink: 0;
  aspect-ratio: 500/706.5;
  background: url(https://cdn.banggooso.com/assets/images/game267/left_arm.png) no-repeat center / cover;
  z-index: 1;
  transition: all 0.2s ease-in-out;
  transform-origin: center;
  transform: rotate(-60deg);
  left: -15rem;
}

.game-wrap .content .bottom-fixed-player .player-hand-left.hide {
  left: -6.25rem;
  transform: rotate(0deg);
}

.game-wrap .content .bottom-fixed-player .player-hand-right {
  position: absolute;
  top: 2.5rem;
  right: -12.5rem;
  width: 31.25rem;
  height: 33.125rem;
  flex-shrink: 0;
  aspect-ratio: 50/53;
  background: url(https://cdn.banggooso.com/assets/images/game267/right_arm.png) no-repeat center / cover;
  transition: all 0.1s ease-in-out;
  transform-origin: bottom;
}

.game-wrap .content .bottom-fixed-player .player-hand-right.drawing-move1 {
  animation: drawing1 0.3s ease-in-out 0.1s;
  transform: rotate(-20deg);
  right: -23rem;
  top: -3.5rem;
}

@keyframes drawing1 {
  0% {
    transform: rotate(-20deg);
  }

  50% {
    transform: rotate(-25deg);
  }

  100% {
    transform: rotate(-20deg);
  }
}

.game-wrap .content .bottom-fixed-player .player-hand-right.drawing-move2 {
  animation: drawing2 0.3s ease-in-out 0.1s;
  transform: rotate(-20deg);
  right: -23rem;
  top: 1.5rem;
}

@keyframes drawing2 {
  0% {
    transform: rotate(-20deg);
  }

  50% {
    transform: rotate(-15deg);
  }

  100% {
    transform: rotate(-20deg);
  }
}

.game-wrap .content .bottom-fixed-player .player-hand-right.drawing-move3 {
  animation: drawing3 0.3s ease-in-out 0.1s forwards;
  transform: rotate(-20deg);
  right: -20rem;
  top: -1.5rem;
}

@keyframes drawing3 {
  0% {
    right: -20rem;
    transform: rotate(-20deg);
  }

  50% {
    right: -21rem;
    transform: rotate(-15deg);
  }

  100% {
    right: -21rem;
    transform: rotate(-20deg);
  }
}

.game-wrap .content .bottom-fixed-player .player-hand-right.drawing-move4 {
  animation: drawing4 0.3s ease-in-out 0.1s forwards;
  transform: rotate(-20deg);
  right: -21rem;
  top: 1.3rem;
}

@keyframes drawing4 {
  0% {
    right: -21rem;
    transform: rotate(-20deg);
  }

  50% {
    transform: rotate(-15deg);
  }

  100% {
    right: -24rem;
    transform: rotate(-18deg);
  }
}

.game-wrap .content .bottom-fixed-player .player-hand-right.drawing-move5 {
  /* animation: drawing5 0.3s ease-in-out 0.1s; */
  transform: rotate(-18deg);
  right: -15rem;
  top: -3.5rem;
}

@keyframes drawing5 {
  0% {
    transform: rotate(-18deg);
  }

  25% {
    transform: rotate(-22deg);
  }

  50% {
    transform: rotate(-35deg);
  }

  100% {
    transform: rotate(-20deg);
  }
}

.game-wrap .content .bottom-fixed-player .player-hand-right.drawing-move6 {
  animation: drawing6 0.3s ease-in-out 0.1s;
  transform: rotate(-20deg);
  right: -15rem;
  top: -3.5rem;
}

@keyframes drawing6 {
  0% {
    transform: rotate(-20deg);
  }

  25% {
    transform: rotate(-22deg);
  }

  50% {
    transform: rotate(-18deg);
  }

  100% {
    transform: rotate(-20deg);
  }
}

.game-wrap .content .bottom-fixed-player .player-hand-right.drawing-move7 {
  /* animation: drawing7 0.3s ease-in-out 0.1s; */
  transform: rotate(-20deg);
  right: -16.8rem;
  top: 4.2rem;
}

@keyframes drawing7 {
  0% {
    transform: rotate(-20deg);
  }

  50% {
    transform: rotate(-35deg);
  }

  100% {
    transform: rotate(-20deg);
  }
}

.game-wrap .content .bottom-fixed-player .player-hand-right.drawing-move8 {
  animation: drawing8 0.3s ease-in-out 0.1s;
  transform: rotate(-20deg);
  right: -16.8rem;
  top: 4.2rem;
}

@keyframes drawing8 {
  0% {
    transform: rotate(-20deg);
  }

  25% {
    transform: rotate(-22deg);
  }

  50% {
    transform: rotate(-18deg);
  }

  100% {
    transform: rotate(-20deg);
  }
}

.game-wrap .content .bottom-fixed-player .player-hand-right.drawing-move9 {
  transform: rotate(-20deg);
  right: -29.8rem;
  top: -5.8rem;
}

.game-wrap .content .bottom-fixed-player .player-hand-right.drawing-move10 {
  animation: drawing10 0.3s ease-in-out 0.1s;
  transform: rotate(-20deg);
  right: -29.8rem;
  top: -5.8rem;
}

@keyframes drawing10 {
  0% {
    transform: rotate(-20deg);
  }

  25% {
    transform: rotate(-22deg);
  }

  50% {
    transform: rotate(-18deg);
  }

  100% {
    transform: rotate(-20deg);
  }
}

.game-wrap .content .bottom-fixed-player .player-hand-right.drawing-move11 {
  transform: rotate(-20deg);
  right: -30.8rem;
  top: 2.2rem;
}

.game-wrap .content .bottom-fixed-player .player-hand-right.drawing-move12 {
  animation: drawing12 0.3s ease-in-out 0.1s;
  transform: rotate(-20deg);
  right: -30.8rem;
  top: 2.2rem;
}

@keyframes drawing12 {
  0% {
    transform: rotate(-20deg);
  }

  25% {
    transform: rotate(-22deg);
  }

  50% {
    transform: rotate(-18deg);
  }

  100% {
    transform: rotate(-20deg);
  }
}

.content-container {
  height: 100%;
}

.content-container.step {
  position: relative;
}

.content-container.step:before,
.content-container.step:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #000;
  z-index: 0;
}

.content-container.step:before {
  top: 0;
  height: 14.75806rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}

.content-container.step:after {
  bottom: 0;
  height: 18.75rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}

.content-container.step.step-3:after {
  height: 12.5rem;
}

.content-container.step .bg-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.content-container.step .skip-btn {
  position: absolute;
  bottom: 2.5rem;
  right: 1.5rem;
  width: 100%;
  display: flex;
  width: 6.625rem;
  height: 3rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%), #fff0e7;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
  color: #443933;
  text-align: right;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
  /* 140% */
  letter-spacing: -0.05rem;
  z-index: 1;
}

.content-container.step .content-txt {
  padding-top: 6.0625rem;
  display: flex;
  align-items: center;
  flex-flow: column;
  gap: 1rem;
}

.content-container.step .content-txt .p-1 {
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  /* 140% */
}

.content-container.step .content-txt .p-1 span {
  cursor: pointer;
  margin-right: 0.25rem;
  font-weight: 700;
  position: relative;
  display: inline-flex;
  align-items: center;
  border-bottom: 1.5px solid #fff;
  transform: translateY(0.3rem);
}

.content-container.step .content-txt .p-1 span:before {
  content: '';
  position: static;
  width: 1.5rem;
  height: 1.5rem;
  aspect-ratio: 1/1;
  background: url(https://cdn.banggooso.com/assets/images/game267/ico_search_white.png) no-repeat center / contain;
}

.content-container.step .content-txt .p-1 span:after {
  content: '';
  position: absolute;
  width: 3.17694rem;
  height: 1.69931rem;
  flex-shrink: 0;
  background: url(https://cdn.banggooso.com/assets/images/game267/img_under_bbl_click.png) no-repeat center / contain;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 0.5rem);
  color: #503333;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.0375rem;
  padding-top: 0.43rem;
}

.content-container.step-1 .content-txt .p-2 {
  width: 23.75rem;
  height: 4.5rem;
  object-fit: contain;
}

.content-container.step-1 .bg-wrapper:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://cdn.banggooso.com/assets/images/game267/step/step_1_bg.png) no-repeat top / cover;
}

.content-container.step-1 .bg-wrapper:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://cdn.banggooso.com/assets/images/game267/step/step_1_el.png) no-repeat 50% 4.06rem / cover;
}

.content-container.step-2 .bg-wrapper:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://cdn.banggooso.com/assets/images/game267/step/step_2_bg.png) no-repeat top / cover;
}

.content-container.step-2 .bg-wrapper:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://cdn.banggooso.com/assets/images/game267/step/step_2_el.png) no-repeat 50% 4.06rem / cover;
}

.content-container.step-2 .content-txt .p-2 {
  width: 16.25rem;
  height: 4.5rem;
  object-fit: contain;
}

.content-container.step-3 .bg-wrapper:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(https://cdn.banggooso.com/assets/images/game267/step/step_3_bg.png) no-repeat top / cover;
}

.content-container.step-3 .bg-wrapper .img-wrapper {
  content: '';
  position: absolute;
  top: calc(50% + 16rem);
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 15.9375rem;
}

.content-container.step-3 .bg-wrapper .img-wrapper .img-1 {
  width: 100%;
  height: 16rem;
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
}

.content-container.step-3 .bg-wrapper .img-wrapper .img-2 {
  width: 100%;
  height: 7.29581rem;
  z-index: 1;
  position: absolute;
  top: 0.2rem;
  left: 0;
}

.content-container.step-3 .bg-wrapper .img-wrapper .img-3 {
  width: 100%;
  height: 7.29581rem;
  z-index: 1;
  position: absolute;
  top: 0.3rem;
  left: 0;
  transition: transform 0.2s ease, z-index 0.4s;
  transform-origin: top;
}

.content-container.step-3 .writing-pad-wrapper {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 25.40481rem;
  height: 8rem;
  transition: bottom 0.8s ease, height 0.1s ease;
  z-index: 2;
  overflow: hidden;
}

.content-container.step-3 .writing-pad {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-container.step-3 .writing-pad-wrapper p {
  position: absolute;
  text-align: center;
  color: #413830;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.875rem;
  /* 136.364% */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.content-container.step-3 .writing-pad-wrapper p:nth-of-type(1) {
  padding: 2.45rem 1.81rem 1.3rem 1.84rem;
  top: 0;
}

.content-container.step-3 .writing-pad-wrapper p:nth-of-type(2) {
  padding: 1.37rem 1.84rem 1.76rem 1.81rem;
  top: 9.35rem;
}

.content-container.step-3 .writing-pad-wrapper p:nth-of-type(3) {
  padding: 1.35rem 1.84rem 3.03rem 1.81rem;
  top: 18.15rem;
}

.content-container.step-3.writing-pad-on .bg-wrapper .img-wrapper .img-2 {
  z-index: -1;
}

.content-container.step-3.writing-pad-on .bg-wrapper .img-wrapper .img-3 {
  transform: rotateX(180deg);
  z-index: -1;
}

.content-container.step-3.writing-pad-on .writing-pad-wrapper {
  z-index: 2;
  height: 28.125rem;
  bottom: 5rem;
  animation: upIndex 0.8s ease forwards;
}

@keyframes upIndex {
  0% {
    bottom: 5rem;
    z-index: 2;
  }

  50% {
    bottom: 10rem;
    z-index: 2;
  }

  100% {
    bottom: 6rem;
    z-index: 3;
  }
}

.game-wrap .step .prev-btn {
  top: 50%;
  left: 1.3rem;
  transform: translateY(-50%);
  position: absolute;
  display: flex;
  width: 3.75rem;
  height: 3.75rem;
  padding: 0.1875rem 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 62.4375rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/step/ico_slide_btn_left.png) no-repeat center /
    0.75rem 1.361rem rgba(0, 0, 0, 0.5);
}

.game-wrap .step .next-btn {
  top: 50%;
  right: 1.3rem;
  transform: translateY(-50%);
  position: absolute;
  display: flex;
  width: 3.75rem;
  height: 3.75rem;
  padding: 0.1875rem 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 62.4375rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/step/ico_slide_btn_right.png) no-repeat center /
    0.75rem 1.361rem rgba(0, 0, 0, 0.5);
}

.exit-modal,
.bgm-modal {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
}

.bgm-modal .bgm-modal-inner {
  display: flex;
  width: 26.25rem;
  padding: 1.875rem 1.875rem 2rem 1.875rem;
  flex-direction: column;
  align-items: center;
  border-radius: 1.25rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/intro_bg.png) no-repeat center / cover;
  background-color: rgba(242, 241, 238, 1);
}

.bgm-modal .bgm-modal-inner p {
  color: #573b3b;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.125rem;
  /* 141.667% */
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 0.88rem;
}

.bgm-modal .bgm-modal-inner p:before {
  content: '';
  display: block;
  width: 3.625rem;
  height: 3.625rem;
  aspect-ratio: 1/1;
  background: url(https://cdn.banggooso.com/assets/images/game267/bgm_modal_ico.png) no-repeat 50% 70% / contain;
}

.exit-modal .exit-modal-inner {
  display: flex;
  width: 26.25rem;
  padding: 1.75rem 1.875rem 2rem 1.875rem;
  flex-direction: column;
  align-items: center;
  border-radius: 1.25rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/intro_bg.png) no-repeat center / cover;
  background-color: rgba(242, 241, 238, 1);
}

.exit-modal .exit-modal-inner span {
  margin-top: 0.88rem;
  color: #564134;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.exit-modal .exit-modal-inner p {
  padding: 0.75rem 0rem 0rem 0rem;
  color: #564134;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.1875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 1.6625rem */
  letter-spacing: -0.0475rem;
  text-align: center;
}

.exit-modal .exit-modal-inner .btn-wrapper,
.bgm-modal .bgm-modal-inner .btn-wrapper {
  width: 100%;
  display: flex;
  gap: 0.75rem;
  margin-top: 1.625rem;
}

.exit-modal .exit-modal-inner .btn-wrapper button,
.bgm-modal .bgm-modal-inner .btn-wrapper button {
  display: flex;
  height: 4.5rem;
  padding: 0.75rem;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  border-radius: 1.25rem;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: right;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.75rem;
  /* 127.273% */
  letter-spacing: -0.055rem;
}

.exit-modal .exit-modal-inner .btn-wrapper button:nth-of-type(1),
.bgm-modal .bgm-modal-inner .btn-wrapper button:nth-of-type(1) {
  background: linear-gradient(0deg, #5e958d 0%, #5e958d 100%), #fff;
}

.exit-modal .exit-modal-inner .btn-wrapper button:nth-of-type(2),
.bgm-modal .bgm-modal-inner .btn-wrapper button:nth-of-type(2) {
  background: #413830;
}

/* result */
.game-wrapper .app-header.result {
  width: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.4) !important;
  background-blend-mode: multiply !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
}

.game-wrapper.basic .game-result {
  padding: 0;
  background-position: initial;
}

.result-content .content-inner {
  padding-top: 4.0625rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/result_top_bg.png) no-repeat center / cover;
}

.result-content .result-top-bg {
  background: url(https://cdn.banggooso.com/assets/images/game267/result_top_bg.png) no-repeat center / cover;
}

.result-content .result-bottom-bg {
  background: url(https://cdn.banggooso.com/assets/images/game267/result_bottom_bg.png) no-repeat center / cover;
}

.result-content .capture-img-wrapper {
  height: 47.5rem;
  margin: 0 1.25rem;
  margin-top: 2.5rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/result_capture_bg.png) no-repeat center / 100% 100%;
  position: relative;
  padding: 0 1.87rem;
}

.result-content .capture-img-wrapper .img-object {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

.result-content .capture-img-wrapper .user-name-wrapper {
  width: 15.9375rem;
  height: 5.75rem;
  flex-shrink: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.result-content .capture-img-wrapper .user-name-wrapper img {
  width: 100%;
  height: 100%;
}

.result-content .capture-img-wrapper .user-name {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  /* 2.275rem */
  letter-spacing: -0.07rem;
  padding: 1.17rem 0 2.33rem;
  z-index: 1s;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.result-content .capture-img-wrapper .user-name:before,
.result-content .capture-img-wrapper .user-name:after {
  content: '';
  width: 0.625rem;
  height: 0.625rem;
  transform: rotate(-45deg);
  aspect-ratio: 1/1;
  background: rgba(255, 255, 255, 0.9);
}

.result-content .capture-img-wrapper .capture-main {
  padding-top: 7rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.result-content .capture-img-wrapper .desc-txt-img {
  width: 23.4375rem;
  height: 100%;
  margin-bottom: 0.38rem;
}

.result-content .capture-img-wrapper .capture-ele .capture-background-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.result-content .capture-img-wrapper .capture-ele {
  position: relative;
  display: flex;
  width: 100%;
  height: 30.9375rem;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;

  padding: 0 1.87rem;
  background: #413830;
}

.result-content .capture-img-wrapper .capture-ele.select-school {
  padding-bottom: 2.29rem;
}

.result-content .capture-img-wrapper .capture-ele.default {
  padding-bottom: 2.39rem;
  padding: 0 2.5rem 2.39rem;
}

.result-content .capture-img-wrapper .capture-ele .txt-area {
  width: 100%;
  margin-top: 8.73rem;
  color: #413830;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.4375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  /* 2.0125rem */
  letter-spacing: -0.0575rem;
  padding-bottom: 1rem;
}

.result-content .capture-img-wrapper .capture-ele .my-score {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.88rem;
  padding-top: 1.25rem;
  border-top: 2px solid #413830;
}

.result-content .capture-img-wrapper .capture-ele .my-score li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.69rem;
  position: relative;
}

.result-content .capture-img-wrapper .capture-ele .my-score li p {
  color: #685648;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  /* 1.75rem */
  letter-spacing: -0.05rem;
  display: inline-flex;
  align-items: center;
}

.result-content .capture-img-wrapper .capture-ele .my-score li span {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 0.3125rem;
  height: 0.3125rem;
  transform: rotate(-45deg) translateY(-50%);
  aspect-ratio: 1/1;
  background: #685648;
}

.result-content .capture-img-wrapper .capture-ele .my-score li b {
  color: #4d453b;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 1.75rem */
  letter-spacing: -0.05rem;
}

.result-content .capture-img-wrapper .capture-ele .info-txt {
  color: #796c61;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 1.225rem */
  letter-spacing: -0.035rem;
  margin-bottom: 0.88rem;
  margin-top: auto;
}

.result-content .capture-img-wrapper .capture-ele .capture-logo {
  position: relative;
  width: 8.07rem;
  height: 1.37563rem;
  flex-shrink: 0;
  margin-bottom: 0.19rem;
}

.result-content .capture-img-wrapper .capture-ele .capture-date {
  color: #685245;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.03rem;
}

.result-content .capture-img-wrapper .save-desc {
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.02475rem;
  opacity: 0.8;
  margin-top: 0.62rem;
  display: block;
}

.result-content .capture-img-wrapper .capture-ele.default .txt-area {
  margin-top: 12.3rem;
  border-bottom: 0;
  padding-bottom: 0;
  color: #413830;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 2.45rem */
  letter-spacing: -0.07rem;
}

.result-content .capture-img-wrapper .capture-ele.select-school .only-capture-line {
  display: block;
  width: 20rem;
  height: 0.0625rem;
  background: #413830;
  margin-bottom: 0.29rem;
}

.result-content .capture-img-wrapper .capture-ele.select-school .my-score {
  width: calc(100% - 1.26rem);
  position: relative;
}

.result-content .capture-img-wrapper .capture-ele.default .my-score {
  margin-top: 0;
  margin-bottom: 2rem;
  border-top: 0;
  padding-top: 1.75rem;
}

.result-content .event-info-wrapper {
  width: 100%;
}

.result-content .event-info-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-content .real-time-rank-wrapper {
  padding-top: 4.44rem;
  position: relative;
  background: #fffaf5;
}

.result-content .real-time-rank-wrapper .real-time-rank-title {
  background: url(https://cdn.banggooso.com/assets/images/game267/realTime_ttl.png) no-repeat center / 42%;
  height: 2.3125rem;
}

.result-content .real-time-rank-wrapper .real-time-rank-title + p {
  color: rgba(65, 56, 48, 0.8);
  text-align: center;
  font-feature-settings: 'hist' on;
  font-family: 'Pretendard';
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.1875rem;
  /* 126.667% */
  letter-spacing: -0.0125rem;
  text-align: center;
  margin: 0.62rem 0 2rem;
}

.result-content .real-time-rank-wrapper .category-tab-list {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  padding: 0rem 1.25rem 0;
  gap: 1.5rem;
}

.result-content .real-time-rank-wrapper .category-tab-list li {
  cursor: pointer;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  /* 1.75rem */
  letter-spacing: -0.05rem;
  padding-bottom: 0.62rem;
  color: rgba(65, 56, 48, 0.5);
}

.result-content .real-time-rank-wrapper .category-tab-list li.active {
  border-bottom: 4px solid #413830;
  color: #413830;
}

.result-content .real-time-rank-wrapper .rank-list-view {
  overflow-y: scroll;
  height: 22.375rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(65, 56, 48, 0.5);
}

.result-content .real-time-rank-wrapper .rank-list-wrapper {
  padding-bottom: 7rem;
}

.result-content .real-time-rank-wrapper .rank-list-wrapper .rank-list {
  display: flex;
  padding: 0rem 1.875rem 1.5rem 1.875rem;
}

.result-content .real-time-rank-wrapper .rank-list-wrapper .rank-list:nth-of-type(1) {
  font-size: 0;
}

.result-content .real-time-rank-wrapper .rank-list-wrapper .rank-list:nth-of-type(2) {
  font-size: 0;
}

.result-content .real-time-rank-wrapper .rank-list-wrapper .rank-list:nth-of-type(3) {
  font-size: 0;
}

.result-content .real-time-rank-wrapper .rank-list-wrapper .rank-list .rank {
  flex: 0 4.375rem;
  color: #61a39b;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 1.75rem */
  letter-spacing: -0.05rem;
  text-align: left;
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.result-content .real-time-rank-wrapper .rank-list-wrapper .rank-list:nth-of-type(1) .rank {
  background: url(https://cdn.banggooso.com/assets/images/game267/top_rank_1.png) no-repeat left / 1.77375rem 2.0945rem;
}

.result-content .real-time-rank-wrapper .rank-list-wrapper .rank-list:nth-of-type(2) .rank {
  background: url(https://cdn.banggooso.com/assets/images/game267/top_rank_2.png) no-repeat left / 1.77375rem 2.0945rem;
}

.result-content .real-time-rank-wrapper .rank-list-wrapper .rank-list:nth-of-type(3) .rank {
  background: url(https://cdn.banggooso.com/assets/images/game267/top_rank_3.png) no-repeat left / 1.77375rem 2.0945rem;
}

.result-content .real-time-rank-wrapper .rank-list-wrapper .rank-list:nth-of-type(3) ~ .rank-list .rank {
  padding-left: calc(2.38rem - 1.875rem);
}

.result-content .real-time-rank-wrapper .rank-list-wrapper .rank-list p {
  flex: 1;
  color: #413830;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  /* 1.925rem */
  letter-spacing: -0.055rem;
  text-align: left;
}

.result-content .real-time-rank-wrapper .rank-list-wrapper .rank-list .score {
  flex: 1;
  margin-left: auto;
  color: rgba(65, 56, 48, 0.7);
  text-align: right;
  font-family: 'Pretendard';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.result-content .real-time-rank-wrapper .scroll-info-txt {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-flex;
  display: inline-flex;
  height: 8.125rem;
  padding: 4.0625rem 5.84375rem 2.4375rem 5.84375rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(255, 250, 245, 0) -25.71%, #fffaf5 50%);
  color: #413830;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.result-content .story-info-wrapper .only-bar {
  width: 100%;
  height: 0.9375rem;
  background: #a39486;
  display: block;
  margin-bottom: -1px;
}

.result-content .story-info-wrapper .content-top {
  width: 100%;
  height: 48.0625rem;
}

.result-content .story-info-wrapper .content-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-content .bg-wht {
  background: #fffaf5;
}

.result-content .bg-wht .content-bottom {
  width: 100%;
  padding-top: 3.75rem;
  padding-left: 1.87rem;
  padding-right: 1.87rem;
}

.result-content .bg-wht .content-bottom .swiper-wrapper {
  display: flex;
}

.result-content .bg-wht .content-bottom .swiper-slide {
  display: flex;
  width: 25rem;
  height: 28.75rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 1.375rem;
  border-radius: 1.25rem;
  background: initial;
  filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.3));
}

.result-content .bg-wht .content-bottom .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-content .bg-wht .content-bottom .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem 0rem 3.125rem 0rem;
}

.result-content .bg-wht .content-bottom .pagination .swiper-pagination-bullet {
  width: 0.75rem;
  height: 0.75rem;
  background: #413830;
  margin: 0;
}

.result-content .reset-btn {
  width: 26.25rem;
  height: 5rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/result_reset_btn_img.png) no-repeat center / contain;
}

.result-content .share-container {
  width: 100%;
  padding: 3.125rem 0rem 3.75rem 0rem;
  margin-top: -0.5rem;
  margin-bottom: -1px;
}

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

.result-content .share-container .list-title {
  color: #413830;
  text-align: center;
  font-family: Pretendard;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.625rem;
  /* 108.333% */
  letter-spacing: -0.015rem;
  margin-bottom: 0.75rem;
}

.result-content .share-container .list-title span {
  font-size: 1.25rem;
}

.result-content .share-container .list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.result-content .share-container li {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  overflow: hidden;
}

.result-content .share-sns-list .btn-share {
  width: 100%;
  height: 100%;
}

.result-content .share-container li + li {
  margin: 0;
}

.result-content .share-sns-list .btn-share.kakao {
  background: url(https://cdn.banggooso.com/assets/images/game267/share_new_common_kakao_white.png) no-repeat center /
    1.26044rem 1.15794rem #413830;
}

.result-content .share-sns-list .btn-share.instagram {
  background: url(https://cdn.banggooso.com/assets/images/game267/share_new_common_instagram_white.png) no-repeat center /
    1.7044rem #413830;
}

.result-content .share-sns-list .btn-share.twitter {
  background: url(https://cdn.banggooso.com/assets/images/game267/share_new_common_x_white.png) no-repeat center /
    1.6044rem #413830;
}

.result-content .share-sns-list .btn-share.facebook {
  background: url(https://cdn.banggooso.com/assets/images/game267/share_new_common_facebook_white.png) no-repeat center /
    24% #413830;
}

.result-content .share-sns-list .btn-share.link-copy {
  background: url(https://cdn.banggooso.com/assets/images/game267/share_new_common_link_white.png) no-repeat center /
    47% #413830;
}

.result-content .sec-content-wrapper {
  width: 100%;
  background: url(https://cdn.banggooso.com/assets/images/game267/result_bottom_bg.png) no-repeat center / 101.042% 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding-bottom: 8.75rem;
}

.result-content .sec-content-wrapper .inner-1 {
  width: 100%;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.result-content .sec-content-wrapper .ttl-1 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 20.1875rem;
  height: 8.375rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/result_sec_ttl_1.png) no-repeat center / contain;
  margin-bottom: 1.25rem;
}

.result-content .sec-content-wrapper .interactive-container {
  width: 31.25rem;
  height: 34.8125rem;
  flex-shrink: 0;
  background: url(https://cdn.banggooso.com/assets/images/game267/result_interactive_el.png) no-repeat center / contain;
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.25));
}

.result-content .sec-content-wrapper .interactive-container p {
  color: #413830;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.75rem;
  /* 140% */
  width: 25.40481rem;
  height: 8.37506rem;
}

.result-content .sec-content-wrapper .interactive-container p span {
  margin-bottom: 0.25rem;
}

.result-content .sec-content-wrapper .interactive-container p:nth-of-type(1) {
  margin-top: 2.21rem;
  padding-top: 1rem;
}

.result-content .sec-content-wrapper .interactive-container p:nth-of-type(2) {
  padding-top: 0.43rem;
}

.result-content .sec-content-wrapper .interactive-container p:nth-of-type(3) {
  padding-top: 0.12rem;
}

.result-content .sec-content-wrapper .interactive-container p b {
  color: #413830;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5625rem;
  /* 156.25% */
  margin-top: 0.35rem;
  display: block;
}

.result-content .sec-content-wrapper .inner-2 {
  margin: 0 1.87rem;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.result-content .sec-content-wrapper .ttl-2 {
  width: 14.9375rem;
  height: 10.60795rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/result_sec_ttl_2.png) no-repeat center / contain;
}

.result-content .sec-content-wrapper .other-content-wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.result-content .sec-content-wrapper .other-content-wrapper .intro {
  width: 27.5rem;
  height: 13.5rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/result_sec_othContent_1.png) no-repeat center /
    contain;
}

.result-content .sec-content-wrapper .other-content-wrapper span {
  margin-top: 1.5rem;
  color: #413830;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  /* 2.1rem */
}

.result-content .sec-content-wrapper .other-content-wrapper p {
  margin-top: 0.37rem;
  margin-bottom: 2rem;
  color: rgba(65, 56, 48, 0.8);
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 1.75rem */
}

.result-content .sec-content-wrapper .other-content-wrapper .btn-wrapper {
  position: relative;
}

.result-content .sec-content-wrapper .other-content-wrapper button {
  display: flex;
  width: 26.25rem;
  height: 5rem;
  padding: 1.75rem 0rem 1.5rem 0rem;
  justify-content: center;
  align-items: center;
  gap: 0.375rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/result_sec_othContent_link_btn.png) no-repeat center /
    contain;
  position: relative;
}

.result-content .sec-content-wrapper .other-content-wrapper .btn-wrapper span {
  position: absolute;
  display: block;
  bottom: -2.4rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2rem;
  /* 188.235% */
  letter-spacing: -0.01063rem;
  border-radius: 62.4375rem;
  display: flex;
  padding: 0.375rem 1.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  background: #61a39b;
  white-space: nowrap;
}

.result-content .sec-content-wrapper .other-content-wrapper .btn-wrapper span:before {
  content: '';
  display: block;
  width: 0.875rem;
  height: 0.625rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/result_bbl_top_fixed.png) no-repeat center / 100% 100%;
  position: absolute;
  bottom: calc(100% - 1px);
}

.game-result .contents-more {
  background: #413830;
  border-radius: 0;
  flex-flow: wrap;
  margin: 0;
  padding-bottom: 2.19rem;
  padding-top: 2.5rem;
  margin-top: -1px;
}

.game-result .contents-more .contents-main {
  flex: 1 100%;
  margin: 0;
  align-items: flex-start;
  padding: 0 2rem 1rem;
}

.game-result .contents-more .contents-main .contents-logo {
  width: 8.75rem;
  height: 1.875rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/logo_white.png) no-repeat center / contain;
}

.contents-more .contents-main .contents-logo img {
  display: none;
}

.game-result .contents-more .contents-main .sub-text {
  color: #fff;
  font-family: 'Pretendard';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.125rem;
  /* 141.667% */
}

.game-result .contents-more .contents-list {
  flex: 1 100%;
  padding: 0;
  border-left: 0;
  margin-top: 0;
}

.game-result .contents-more .contents-list .game-btn {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 1.66669rem 2rem;
  display: flex;
  justify-content: space-between;
  order: 1;
  border-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.game-result .contents-more .contents-list .game-btn a {
  color: #fff;
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  font-family: 'Pretendard';
  order: -1;
}

.game-result .contents-more .contents-list .game-btn:before {
  display: block;
  position: static;
  width: 2rem;
  height: 2rem;
  background: url(https://cdn.banggooso.com/assets/images/game267/ico_result_more_content_arrow_grey.png) no-repeat
    center / contain;
  transform-origin: center;
}

.game-result .recommend-list {
  margin: 0;
  background-color: #413830;
  border-top: 0;
  width: 100%;
}

.game-result .recommend-list .inner .title {
  color: #fff;
  font-family: 'Pretendard';
  font-size: 1.50013rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.033rem;
  padding: 0;
  margin: 0;
  padding-left: 1.46rem;
  margin-bottom: 0.48rem;
}

.game-result .recommend-list .swiper-container {
  padding: 0;
  padding-left: 2.17rem;
  margin-bottom: 3.25rem;
  width: 100%;
}

.game-result .recommend-list .slide-box .img-box {
  height: 10.83406rem;
}

.game-result .recommend-list .swiper-slide {
  width: 10.83406rem;
  height: 13.33425rem;
}

.game-result .recommend-list .slide-box {
  width: 10.83406rem;
  height: 13.33425rem;
  border: 0.3rem solid #685245;
}

.game-result .recommend-list .slide-box .slide-text {
  background-color: #fff;
  color: #000;
  font-size: 1.00006rem;
  font-family: 'Pretendard';
  font-weight: 500;
  letter-spacing: -0.022rem;
}

.game-result .recommend-list .btn-wrap {
  padding-bottom: 4rem;
  position: relative;
  z-index: 999;
}

.game-result .recommend-list .btn-wrap .btn-white-round {
  width: 15.25106rem;
  height: 4.00025rem;
  flex-shrink: 0;
  border-radius: 2.00013rem;
  background: #fff;
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25006rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.0275rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}