@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;
}

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);
}

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

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

.game-wrapper .app-header .app-header-btn.back {
  background-image: url('https://cdn.banggooso.com/assets/images/game223/intro/chevron_left.png');
  background-size: 80%;
  width: 3.5rem;
}

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

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

.game-wrapper .app-header {
  background: rgba(44, 43, 47, 0.6) !important;
  z-index: 999;
  position: absolute;
  width: 100%;
  height: 4rem;
  border: none;
}

.game-intro .game-count .count-label:before {
	display: none;
  background-color: #FFFEF7;
}

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

.game-wrapper .game-wrap {
  overflow: scroll;
}

.app-header .sound {
  background-image: url('https://cdn.banggooso.com/assets/bing/main/intro/on.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  top: 0.75rem;
  right: 1rem;
}

.app-header.result .sound {
  display: none;
}

.app-header .sound.off {
  background-image: url('https://cdn.banggooso.com/assets/bing/main/intro/off.png') !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.display-none {
  display: none;
}

/* 인트로 스타일 */

.game-intro {
  background-image: url("https://cdn.banggooso.com/assets/images/game226/intro/intro-background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.game-intro .container .intro {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 4.2rem;
}

.game-intro .container .intro .intro-title {
  width: 31.25rem;
  height: auto;
}

.game-intro .container .intro .intro-character {
  width: 31.25rem;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

.game-intro .container .swiper {
  position: relative;
  z-index: -1;
  margin-bottom: 9.8rem;
}

.swiper .swiper-slide {
  overflow: visible !important;
  width: 11.9375rem !important;
}

.game-intro .container .swiper .swiper-wrapper {
  padding-left: 3rem;
}

.game-intro .container .swiper .swiper-wrapper .swiper-slide img {
  width: 11.9375rem;
  height: auto;
}

.game-intro .container .name-input {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.75rem;
  margin-bottom: 1.25rem;
  position: relative;
}

.game-intro .container .name-input #userNickname,
.game-intro .container .name-input #xNickname {
  display: flex;
  width: 12.5rem;
  height: 6rem;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  color: #2C2B2F;
  text-align: center;
  font-family: 'Pretendard-500';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 1.7875rem */
  border-radius: 1.25rem;
  border: 1px solid #DCDCDC;
  background-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0px 4px 16px 0px rgba(190, 178, 102, 0.30);
}

.game-intro .container .name-input .input-container .container-text {
  width: 11.25rem;
  height: auto;
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
}

.game-intro .container .name-input .intro-heart {
  width: 5rem;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.game-intro .container .start-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.game-intro .container .start-btn-wrap .start-btn {
  display: flex;
  width: 27.5rem;
  height: 6rem;
  padding: 2.0625rem 4.1875rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  border-radius: 5.125rem;
  border: 2px solid #FFEA6B;
  background: linear-gradient(180deg, rgba(255, 249, 207, 0.96) 0%, rgba(255, 234, 107, 0.96) 52.67%);
  color: #2C2B2F;
  text-align: center;
  font-family: 'Pretendard-800';
  font-size: 2rem;
  font-style: normal;
  font-weight: 800;
  line-height: 2.6rem;
  margin-bottom: 3rem;
}

.game-intro .game-count {
  padding-bottom: 3.75rem;
  margin: 0 !important;
  background-color: #FFFEF7;
}

.game-intro .game-count .count-label {
  color: #2C2B2F;
  text-align: center;
  font-family: 'Pretendard-700';
  font-size: 1.5625rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.game-intro .game-count .count-num-container {
  display: flex;
  justify-content: center;
}

.game-intro .game-count .count-num {
  color: #2C2B2F;
  text-align: center;
  font-family: 'Pretendard-700';
  font-size: 2.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #E0DED9;
  width: 27.5rem;
}

.game-intro .share-sns-list {
  padding-bottom: 6.25rem;
  background-color: #FFFEF7;
}

.share-sns-list .btn-share {
  width: 3.375rem;
  height: 3.375rem;
}

.share-sns-list .list-title {
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.share-sns-list .list-title .countBox {
  display: flex;
  gap: 0.2rem;
}

.share-sns-list .list-title .countBox .countImg {
  background-image: url("https://cdn.banggooso.com/assets/images/game226/share/share.png");
  background-position: center;
  background-size: contain;
  width: 1.25rem;
  height: 1.25rem;
}

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

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

.share-sns-list .btn-share.kakao {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/share/kakao.png');
  background-size: contain;
}

.share-sns-list .btn-share.instagram {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/share/instagram.png');
  background-size: contain;
}

.share-sns-list .btn-share.twitter {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/share/twitter.png');
  background-size: contain;
}

.share-sns-list .btn-share.link-copy {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/share/link.png');
  background-size: contain;
}

.dim {
  width: 100%;
  height: 100%;
  background: #2C2B2F80;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.dim .container {
  position: relative;
  width: 25rem;
  height: 12.375rem;
  display: inline-flex;
  padding: 3.25rem 1.65625rem 1.25rem 1.65625rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  border: 2px solid #FFF;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 69.17%, rgba(255, 251, 237, 0.95) 100%);
}

.dim .container p {
  color: #2C2B2F;
  font-family: 'Pretendard-500';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  text-align: center;
}

.dim .container p span {
  color: #FFBE64;
  font-family: 'Pretendard-700';
  font-weight: 700;
}

.dim .container .btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.dim .container .btn-container .play,
.dim .container .btn-container .mute {
  display: flex;
  width: 9.75rem;
  height: 3.25rem;
  padding: 0.8125rem 2.6875rem;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
  background: linear-gradient(180deg, #2C2B2F 20%, rgba(44, 43, 47, 0.76) 100%);
  flex-shrink: 0;
  color: #FFF;
  text-align: center;
  font-family: 'Pretendard-700';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.625rem;
}

.dim .container .sound {
  width: 4rem;
  height: auto;
  position: absolute;
  top: -2rem;
}

/* 스텝 스타일 */

.step1,
.step2,
.step3,
.step4,
.step5,
.step6,
.step7,
.step8,
.step9,
.step10,
.step11,
.step12,
.step13,
.step14,
.step15,
.step16,
.step17,
.step18,
.step19,
.step20,
.step21,
.step22,
.step23,
.step24,
.step25,
.step26,
.step27,
.step28,
.step29,
.step30,
.step31,
.step32,
.step33,
.step34,
.step35,
.step36,
.step37,
.step38,
.step39,
.step40,
.step41,
.step42,
.step43,
.step44,
.step45,
.step46,
.step47,
.step48,
.step49,
.step50,
.step51,
.step52,
.step53,
.step54,
.step55,
.step56,
.step57,
.step58,
.step59,
.step60,
.step61,
.step62,
.step63,
.step64,
.step65,
.step66,
.step67,
.step68,
.step69,
.step70,
.step71,
.step72,
.step73,
.step74,
.step75,
.step76,
.step77,
.step78,
.step79,
.step80,
.step81,
.step82,
.step83,
.step84,
.step85,
.step86,
.step87,
.step88,
.step89,
.step90,
.step91,
.step92,
.step93,
.step94,
.step95 {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.step1,
.step2,
.step3,
.step4,
.step5 {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/1_stairs.png');
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  object-fit: contain;
}

.step5 .interaction-bg,
.step50 .interaction-bg,
.step61 .interaction-bg {
  width: 100%;
  height: 100%;
  background-color: #373c3f;
  position: absolute;
  top: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 9999;
}

.phrase {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/phrase-male.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 27.5rem;
  height: 8.75rem;
  margin-top: 6.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.phrase .xNickname,
.phrase .bossNickname,
.phrase .colleagueNickname {
  color: #2C2B2F;
  font-family: 'Pretendard-800';
  font-size: 1rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3rem;
  display: flex;
  width: 22rem;
  padding: 0.5rem 0rem;
  align-items: center;
}

.phrase .character-line {
  width: 100%;
  height: 100%;
  color: #2C2B2F;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Pretendard-500';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7875rem;
}

.character-area {
  width: 100%;
  height: 70%;
  position: absolute;
  bottom: 0;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}

.step1 .character-area,
.step4 .character-area,
.step5 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-front2.png');
}

.step2 .character-area,
.step3 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-front1.png');
}

.phrase-black {
  border-radius: 0.75rem;
  border: 2px solid #716F75;
  background: linear-gradient(180deg, rgba(44, 43, 47, 0.84) 0%, #2C2B2F 80%);
  display: flex;
  width: 27.5rem;
  height: 6rem;
  padding: 2.0625rem 4.1875rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  color: #FFF;
  font-family: 'Pretendard-500';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7875rem;
  position: absolute;
  bottom: 3.75rem;
  z-index: 99;
}

.step6,
.step7,
.step8 {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/2_yellow.png');
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.self-phrase {
  width: 27.5rem;
  height: 19.75rem;
  flex-shrink: 0;
  padding: 5.63rem 4.19rem;
  border-radius: 27.5rem;
  background-color: #FFF;
  filter: blur(25px);
}

.step6 p,
.step7 p,
.step8 p {
  width: 100%;
  color: #6B6543;
  text-align: center;
  font-family: 'Pretendard-500';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.step6 p span,
.step8 p span {
  display: inline;
  font-family: 'Pretendard-700';
  font-weight: 700;
}

.step8 .challenge-btn {
  display: flex;
  width: 27.5rem;
  height: 6rem;
  padding: 2.0625rem 4.1875rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  border-radius: 5.125rem;
  border: 2px solid #716F75;
  background: linear-gradient(180deg, rgba(44, 43, 47, 0.84) 0%, #2C2B2F 80%);
  box-shadow: 0px 0px 32px 0px rgba(255, 255, 255, 0.50);
  position: absolute;
  bottom: 3.75rem;
  color: #FFF;
  text-align: center;
  font-family: 'Pretendard-800';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.95rem;
}

.step9,
.step10 {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/3_room.png');
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  object-fit: contain;
}

.phone-wrap {
  width: fit-content;
  height: 70%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: -1;
  display: flex;
  justify-content: center;
}

@media (max-height: 549px) {
  .phone-wrap {
    height: 65%;
  }
}

.text1,
.text2 {
  display: flex;
  width: 27.5rem;
  height: 8.75rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/phrase-text.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.20);
  border-radius: 0.75rem;
  color: #6B6544;
  text-align: center;
  font-family: 'Pretendard-700';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7875rem;
}

.text1 {
  margin-top: 6.19rem;
}

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

.answer-container .answer-list .answer-box {
  display: flex;
  width: 27.5rem;
  height: 6rem;
  padding: 2.0625rem 4.1875rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  border: 2px solid #716F75;
  background: linear-gradient(180deg, rgba(44, 43, 47, 0.84) 0%, #2C2B2F 80%);
  color: #FFF;
  text-align: center;
  font-family: 'Pretendard-500';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7875rem;
}

.step11,
.step12,
.step15,
.step16,
.step17,
.step18,
.step21,
.step22,
.step23,
.step24,
.step25,
.step35,
.step36,
.step37,
.step38,
.step39,
.step40,
.step51,
.step52,
.step53,
.step54,
.step55,
.step74,
.step75,
.step76,
.step77,
.step78,
.step79,
.step80,
.step81,
.step82 {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/4_office.png');
}

.dark {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/0_dark.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 99;
}

.step13,
.step14 {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/4_office-coffee.png');
  display: flex;
  justify-content: center;
}

.step15,
.step16,
.step19,
.step20,
.step21,
.step22,
.step23,
.step25,
.step27,
.step28,
.step29,
.step30,
.step31,
.step32,
.step33,
.step37,
.step38,
.step39,
.step43,
.step45,
.step46,
.step47,
.step48,
.step49,
.step52,
.step53,
.step58,
.step59,
.step65,
.step68,
.step69,
.step70,
.step71,
.step72,
.step74,
.step77,
.step78,
.step79,
.step84,
.step87,
.step88,
.step89,
.step90,
.step91,
.step92,
.step93,
.step94 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step17,
.step18,
.step24,
.step34,
.step36,
.step40,
.step44,
.step50,
.step54,
.step66,
.step75,
.step86,
.step95 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.step76 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.step15 .character-area,
.step16 .character-area,
.step17 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-coffee.png');
}

.step18 .character-area,
.step68 .character-area,
.step69 .character-area,
.step70 .character-area,
.step71 .character-area,
.step72 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-front3.png');
}

.step19,
.step20 {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/4_office-coffee2.png');
}

.step21 .phrase,
.step27 .phrase,
.step28 .phrase,
.step29 .phrase,
.step32 .phrase,
.step36 .phrase,
.step37 .phrase,
.step38 .phrase,
.step39 .phrase,
.step65 .phrase,
.step66 .phrase {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/phrase-sub.png');
}

.step21 .character-area,
.step27 .character-area,
.step28 .character-area,
.step29 .character-area,
.step30 .character-area,
.step31 .character-area,
.step32 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/top-boss.png');
}

.step22 .character-area,
.step23 .character-area,
.step33 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-side1.png');
}

.step24 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-side3.png');
}

.step25 .character-area,
.step34 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-side2.png');
}

.step26,
.step27,
.step28,
.step29,
.step30,
.step31,
.step32,
.step33,
.step34,
.step56,
.step57,
.step58,
.step59,
.step60,
.step61 {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/5_meetingroom.png');
}

.step36 .character-area,
.step37 .character-area,
.step38 .character-area,
.step39 .character-area,
.step40 .character-area,
.step66 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/female-front1.png');
}

.step41,
.step42,
.step43,
.step44,
.step45,
.step46,
.step47,
.step48,
.step49,
.step50 {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/3_room.png');
}

.step46 .click-story,
.step85 .touch-x {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.step46 .phone-wrap .click-area {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 9999;
}

.step46 .phone-wrap .click-area .click {
  width: 7rem;
  height: 7rem;
  position: absolute;
  top: 14%;
  left: 14%;
  background-color: transparent;
}

.step48 .phone-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step48 .phone-wrap .instagram-heart {
  position: absolute;
  width: 25%;
  height: auto;
  opacity: 0;
  transform: scale(0);
  animation: like-heart-animation 1s ease-in-out;
}

@keyframes like-heart-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  15% {
    opacity: 0.9;
    transform: scale(1.2);
  }
  30% {
    transform: scale(0.95);
  }
  45%,
  80% {
    opacity: 0.9;
    transform: scale(1);
  }
}

.step49 .phone-wrap {
  display: flex;
}
.phone-profile,
.phone-instagram,
.phone-story {
  width: auto;
  height: 100%;
  object-fit: contain;
}

.profile-nickname {
  color: #FFF;
  text-align: center;
  font-family: 'Pretendard-700';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7875rem;
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-height: 801px) {
  .profile-nickname {
    font-size: 1.1rem;
    top: 56.5%;
  }
}

@media (max-height: 651px) {
  .profile-nickname {
    font-size: 1rem;
    top: 56%;
  }
}

.nickname {
  color: #000;
  font-family: 'Pretendard-700';
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3rem;
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  width: 67%;
}

.phone-DM {
  width: 72%;
  height: auto;
  position: absolute;
  top: 8.5%;
}

.step49 .phone-DM {
  animation: fadeInTranslate 0.5s ease-in-out;
}

@keyframes fadeInTranslate {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-height: 549px) {
  .phone-wrap {
    height: 65%;
  }
}

@media (max-width: 345px) and (min-height: 881px) {
  .phone-wrap {
    height: 62%;
  }
}

@media (max-width: 1025px) and (min-height: 1365px) {
  .phone-wrap {
    height: 58%;
  }
}

.step52 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-file1.png');
}

.step53 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-file2.png');
}

.step54 .character-area,
.step55 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-file3.png');
}

.step58 .character-area,
.step59 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-and-female.png');
}

.step62,
.step63,
.step64,
.step65,
.step66,
.step67,
.step68,
.step69,
.step70,
.step71,
.step72,
.step73 {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/7_roof.png');
}

.step67,
.step83 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.step65 .character-area,
.step66 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/female-front2.png');
}

.step74 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-side1.png');
  animation: characterAnimation 3s forwards;
}

@keyframes characterAnimation {
  0% {
    background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-side1.png');
  }
  50% {
    background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-side3.png');
  }
  100% {
    background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-side1.png');
  }
}

.message-area .xNickname {
  position: absolute;
  top: 2%;
  width: 67%;
  height: 12%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #2C2B2F;
  font-family: 'Pretendard-800';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.625rem;
}

.message-area .xNickname .message-arrow-down {
  width: 0.7rem;
  height: auto;
}

.message-area {
  display: flex;
  justify-content: center;
  width: fit-content;
  position: absolute;
  top: 29%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.message-area img {
  width: 27.5rem;
  height: auto;
}

.step83,
.step87,
.step88,
.step89,
.step90,
.step91,
.step92,
.step93,
.step94,
.step95 {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/8_park.png');
}

.step84,
.step85 {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/8_park2.png');
}

.step86 {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/8_park2-2.png');
}

.step87 .character-area,
.step88 .character-area,
.step92 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-reunion1.png');
}

.step89 .character-area,
.step90 .character-area,
.step91 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-reunion2.png');
}

.step93 .character-area,
.step94 .character-area,
.step95 .character-area {
  background-image: url('https://cdn.banggooso.com/assets/images/game226/step/male-reunion3.png');
}

.step95 .end {
  display: flex;
  width: 27.5rem;
  height: 6rem;
  padding: 2.0625rem 4.1875rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  border-radius: 5.125rem;
  border: 2px solid #FFEA6B;
  background: linear-gradient(180deg, rgba(255, 249, 207, 0.96) 0%, rgba(255, 234, 107, 0.96) 52.67%);
  color: #2C2B2F;
  text-align: center;
  font-family: 'Pretendard-800';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.95rem;
  margin-bottom: 3.75rem;
}

/* 결과 스타일 */

.game-wrapper .app-header.result {
  background-color: #FFF !important;
}

.game-wrapper .app-header.result .app-logo {
  background-image: url('https://cdn.banggooso.com/assets/images/common/logo_2024.png') !important;
}

.game-wrapper .app-header.result .app-header-btn.back {
  background-image: url('https://cdn.banggooso.com/assets/images/icons/back-arrow-b.png') !important;
  background-size: 25% !important;
}

.game-result .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #FFFEF7;
  position: relative;
}

.game-result .container .capture-wrapper {
  margin-top: 4.31rem;
}

.img-object {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

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

.game-result .container .notice p {
  color: #000;
  text-align: center;
  font-family: 'Pretendard-400';
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1rem;
  letter-spacing: -0.02rem;
}

.game-result .container .notice span {
  color: #000;
  text-align: center;
  font-family: 'Pretendard-700';
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: -0.02rem;
  margin: 0.5rem 0 2.5rem 0;
}

.game-result .container .result-image-container {
  display: flex;
  width: 27.5rem;
  height: auto;
  padding: 0.5rem 0.75rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.7rem;
  background-color: #fff;
}

.game-result .container .result-background {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  z-index: -1;
}

.game-result .container .result-image-container .text-content {
  width: 12rem;
  background-color: transparent;
  position: absolute;
  z-index: 99;
  top: 7.85rem;
  right: 2rem;
  color: #2C2B2F;
  font-family: 'Pretendard-700';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.8425rem;
}

.game-result .container .result-image-container .result-image {
  width: 26rem;
  height: auto;
}

.game-result .container .result-image-container .bingo {
  width: 26rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.game-result .container .result-image-container .bingo .title {
  color: #2C2B2F;
  font-family: 'Pretendard-700';
  font-size: 1.27313rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.78244rem;
  margin: 0;
  text-align: unset;
}

.game-result .container .result-image-container .bingo .title {
  width: fit-content;
  padding: 0.3rem 1rem 1rem;
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  border: 1px #FFF;
  margin-left: 0.65rem;
  position: absolute;
  top: -2.5rem;
  z-index: -1;
}

.game-result .container .result-image-container .bingo .title.EAD {
  background: linear-gradient(180deg, #FFEA6B 47.33%, #FFF9CF 100%);
}

.game-result .container .result-image-container .bingo .title.EAC {
  background: linear-gradient(180deg, #FCDAB8 47.33%, #FFF1E3 100%);
}

.game-result .container .result-image-container .bingo .title.EBD {
  background: linear-gradient(180deg, #97E1AB 0%, #C5F4D1 100%);
}

.game-result .container .result-image-container .bingo .title.EBC {
  background: linear-gradient(180deg, rgba(200, 219, 255, 0.96) 47.33%, rgba(233, 240, 255, 0.96) 100%);
}

.game-result .container .result-image-container .bingo .title.IAD {
  background: linear-gradient(180deg, #FFBE64 0%, #FFEDBB 100%);
}

.game-result .container .result-image-container .bingo .title.IAC {
  background: linear-gradient(180deg, #B4F5EB 47.33%, #EBFFFF 100%);
}

.game-result .container .result-image-container .bingo .title.IBD {
  background: linear-gradient(180deg, rgba(205, 200, 221, 0.96) 47.33%, rgba(226, 224, 233, 0.96) 100%);
}

.game-result .container .result-image-container .bingo .title.IBC {
  background: linear-gradient(180deg, #FCC 0%, #FFF1F1 100%);
}

.game-result .container .result-image-container .bingo .result-bingo {
  width: 100%;
  height: auto;
}

.game-result .container .result-message {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#image-overlay {
  display: none;
}

.game-result .container .result-message .result-message-image {
  width: 27.5rem;
  height: auto;
  flex-shrink: 0;
  box-shadow: 0px 4px 16px 0px rgba(190, 178, 102, 0.30);
  border-radius: 1rem;
}

.game-result .container .movie-back {
  width: 27.5rem;
  height: 84.1875rem;
  flex-shrink: 0;
  border-radius: 1rem;
  border: 1px solid #FFE964;
  background: linear-gradient(180deg, rgba(255, 234, 107, 0.96) 0%, rgba(255, 249, 207, 0.48) 5%, rgba(255, 249, 207, 0.00) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.80) 33%, rgba(255, 255, 255, 0.30) 100%);
  box-shadow: 0px 4px 16px 0px rgba(190, 178, 102, 0.30);
  position: relative;
  margin-top: 3.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.game-result .container .movie-back .icons {
  position: absolute;
  top: 0.75rem;
  right: 0.87rem;
  width: 4.5rem;
  height: auto;
  flex-shrink: 0;
}

.game-result .container .movie-back .movie-front {
  width: 27.3rem;
  height: 82rem;
  flex-shrink: 0;
  border-radius: 1rem;
  border: 1px solid #FFF;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 33%, rgba(255, 255, 255, 0.30) 100%);
  padding: 2rem 1.25rem 2.5rem;
}

.game-result .container .movie-back .movie-front .video-title {
  display: flex;
  flex-direction: column;
  border-left: 2px solid #DFDFDB;
  width: auto;
  padding-left: 1rem;
  gap: 0.75rem;
}

.game-result .container .movie-back .movie-front .video-title .video-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-result .container .movie-back .movie-front .video-title .video-container .video {
  color: #2C2B2F;
  font-family: 'Pretendard-500';
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.game-result .container .movie-back .movie-front .video-title .video-container .video .video-icon {
  width: 2.3125rem;
  height: auto;
  flex-shrink: 0;
}

.game-result .container .movie-back .movie-front .video-title .video-container .dots {
  width: auto;
  height: 0.25rem;
  flex-shrink: 0;
}

.game-result .container .movie-back .movie-front .video-title p {
  color: #2C2B2F;
  font-family: 'Pretendard-500';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7875rem;
}

.game-result .container .movie-back .movie-front .video-title p span {
  color: #2C2B2F;
  font-family: 'Pretendard-700';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.game-result .container .movie-back .movie-front .video-area {
  width: 25rem;
  height: 14rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  border: 2px solid #FFF;
  background: #BDBDBD;
  box-shadow: 0px 4px 16px 0px rgba(190, 178, 102, 0.30);
  margin: 0.75rem 0 2.5rem;
}

.game-result .container .movie-back .movie-front .line {
  width: 25rem;
  height: 0.0625rem;
  background: #DFDFDB;
  margin-bottom: 2.5rem;
}

.game-result .container .movie-back .movie-front .movie {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-result .container .movie-back .movie-front .movie .result-heart {
  width: 2.75rem;
  height: 2.375rem;
  flex-shrink: 0;
}

.game-result .container .movie-back .movie-front .movie p {
  color: #2C2B2F;
  text-align: center;
  font-family: 'Pretendard-500';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7875rem;
  margin: 0.75rem 0 2.88rem;
  letter-spacing: normal;
}

.game-result .container .movie-back .movie-front .movie p span {
  color: #2C2B2F;
  font-family: 'Pretendard-700';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.game-result .container .movie-back .movie-front .movie .genieTV-black {
  width: 8.75rem;
  height: auto;
}

.game-result .container .movie-back .movie-front .movie .drama_LOGO {
  width: 17.5rem;
  height: auto;
}

.game-result .container .movie-back .movie-front .movie .date {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

.game-result .container .movie-back .movie-front .movie .date .genieTV-yellow {
  width: 11.25rem;
  height: 1.75rem;
}

.game-result .container .movie-back .movie-front .movie .date span {
  color: #2C2B2F;
  text-align: center;
  font-family: 'Pretendard-500';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.625rem;
}

.game-result .container .movie-back .movie-front .movie .poster {
  width: 21rem;
  height: auto;
  margin: 1.25rem 0 2rem;
  box-shadow: 0px 4px 16px 0px rgba(190, 178, 102, 0.30);
  border-radius: 0.75rem;
}

.game-result .container .movie-back .movie-front .movie .text-message {
  width: 19.25rem;
  height: auto;
}

.game-result .container .movie-back .movie-front .movie .talk-btn {
  display: flex;
  width: 25rem;
  height: 5rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  border-radius: 5.75rem;
  border: 1px solid #FFE964;
  background: linear-gradient(180deg, rgba(255, 249, 207, 0.96) 0%, rgba(255, 234, 107, 0.96) 52.67%);
  color: #2C2B2F;
  text-align: center;
  font-family: 'Pretendard-700';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.95rem;
  cursor: pointer;
}

.game-result .container .random-ending {
  width: 27.5rem;
  height: 23.4375rem;
  flex-shrink: 0;
  border-radius: 1rem;
  border: 1px solid #FFF;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 33%, rgba(255, 255, 255, 0.30) 100%);
  box-shadow: 0px 4px 16px 0px rgba(190, 178, 102, 0.30);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin: 3.75rem 0 1.25rem 0;
}

.game-result .container .random-ending .alert {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.game-result .container .random-ending p {
  color: #2C2B2F;
  text-align: center;
  font-family: 'Pretendard-500';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.7875rem;
}

.game-result .container .random-ending p span {
  color: #2C2B2F;
  text-align: center;
  font-family: 'Pretendard-700';
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.6rem;
}

.game-result .container .random-ending .ending {
  width: 25rem;
  height: 5.25rem;
  flex-shrink: 0;
}

.game-result .container .restart {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-result .container .restart a {
  display: flex;
  width: 27.5rem;
  height: 5rem;
  padding: 2.0625rem 4.1875rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  border-radius: 5.75rem;
  border: 1px solid #FFE964;
  background: linear-gradient(180deg, rgba(255, 249, 207, 0.96) 0%, rgba(255, 234, 107, 0.96) 52.67%);
  color: #2C2B2F;
  text-align: center;
  font-family: 'Pretendard-700';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.95rem;
}

/* 결과 공유하기 */

.game-result .share-sns-list {
  margin: 3.75rem 0 4.25rem 0;
}

/* 콘텐츠 더보기 */

.contents-more {
  background-color: #FFFEF7;
  border: none;
  flex-direction: column;
  width: 100%;
  border-radius: 0;
  margin: 0;
  padding: 2rem 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 #2C2B2F !important;
  cursor: pointer;
  font-family: 'Pretendard-500';
  font-weight: 500;
  font-size: 1.3125rem !important;
  line-height: normal;
}

.contents-more .contents-list .game-btn a {
  color: #2C2B2F;
}

.contents-more .contents-list .game-btn:before {
  left: 90%;
  width: 2rem;
  height: 2rem;
  background-size: 27%;
  background-position: center;
}

.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 #2C2B2F;
  border-left: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.contents-more .contents-main .sub-text {
  color: #2C2B2F;
  opacity: 0.7;
  font-family: 'Pretendard-700';
  font-weight: 700;
  font-size: 1.50013rem;
  font-style: normal;
  line-height: 2.16681rem;
  letter-spacing: normal;
}

/* 추천 콘텐츠 */

.game-result .recommend-list .inner .title {
  color: #000;
  font-family: 'Pretendard-500';
  font-size: 1.49969rem;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.033rem;
  margin-bottom: 0.5rem;
  padding-left: 2.5rem;
}

.game-result .recommend-list {
  background-color: #FFFEF7;
}

.game-result .recommend-list:before {
  background: linear-gradient(180deg, rgba(255, 249, 207, 0.96) 0%, rgba(255, 234, 107, 0.96) 52.67%);
  height: 14rem;
}

.btn-white-round {
  width: 15.26381rem;
  height: 4.00363rem;
  font-size: 1.25113rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.game-result .recommend-list .swiper-container {
  padding-left: 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.3rem solid #FFF;
}

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

.game-result .recommend-list .slide-box .slide-text {
  width: 10.164rem;
  padding: 0;
  position: absolute;
  bottom: 0.2rem;
  left: 51%;
  transform: translateX(-50%);
  color: #000;
  font-family: 'Pretendard-700';
  font-weight: 700;
  font-size: 0.99981rem;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  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: 1.5rem 0 4rem 0;
}

.game-result .container .background-pattern {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: -1;
}