/* 
  수정하고 싶은 곳 검색으로 찾기: 
  1.인트로 스타일 2.문제 스타일 3.결과 스타일 
*/

/* font */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard-Bold';
  src: url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Bold.otf') format('opentype'),
    url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Bold.woff2')
      format('woff2'),
    url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Bold.woff') format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Medium';
  src: url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Medium.otf') format('opentype'),
    url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Medium.woff2')
      format('woff2'),
    url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Medium.woff') format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Regular.otf') format('opentype'),
    url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Regular.woff2')
      format('woff2'),
    url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-Regular') format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'Pretendard-SemiBold';
  src: url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-SemiBold.otf') format('opentype'),
    url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2https://cdn.banggooso.com/sr/assets/fonts/Pretendard-SemiBold.woff2')
      format('woff2'),
    url('https://cdn.banggooso.com/sr/assets/fonts/Pretendard-SemiBold') format('woff');
  font-style: normal;
}

@font-face {
  font-family: 'JejuDoldam';
  src: url(./font/EF_jejudoldam.ttf);
}

@font-face {
  font-family: 'meetme';
  src: url(./font/meetme.ttf);
}

/* reset.css */

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

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

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

.game-wrapper .game-intro {
  padding: 0;
  height: 100%;
  background-color: #fee;
}

.game-wrapper .game-intro .title {
  padding-bottom: 2.19rem;
  background-color: #fff;
}

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

/* 헤더 */

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

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

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

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

.game-wrapper.basic .app-header {
  height: 4rem;
  border: none;
  background-color: white;
}

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

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

/* 헤더 사운드 아이콘 */

.app-header .sound {
  background-image: url('');
  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 .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;
}

.app-header.page {
  display: block !important;
}

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

/* 인트로 스타일 */

.game-intro {
  text-align: center;
}

.game-intro .share-sns-list {
  margin: 2.62rem auto 6.25rem;
}

.game-intro .title .intro_background_top {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-intro .title .speech-bubble-wrap {
  display: flex;
  justify-content: center;
  width: 24.6875rem;
  height: 4.375rem;
  margin: 0 auto;
  background-image: url('https://cdn.banggooso.com/assets/images/game221/intro/intro_speech_bubble.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.game-intro .title .speech-bubble-wrap .name {
  position: relative;
  width: 22.23631rem;
  height: 1.75rem;
  margin-top: 0.82rem;
  display: flex;
  justify-content: center;
  overflow: auto;
  pointer-events: none;
}

.game-intro .title .speech-bubble-wrap .name span {
  height: 1.75rem;
  color: #000;
  font-family: 'meetme';
  font-size: 1.6875rem;
  font-weight: 400;
  line-height: 1.75rem; /* 103.704% */
  letter-spacing: -0.01688rem;
  top: 1.8rem;
  box-sizing: border-box;
  position: absolute;
  padding-bottom: var(--offset);
}

.game-intro .title .speech-bubble-wrap .name span::before,
.game-intro .title .speech-bubble-wrap .name span::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1.14rem;
  background-size: cover;
  background-image: url('https://cdn.banggooso.com/assets/images/game221/common/star.png');
}

.game-intro .title .speech-bubble-wrap .name span::before {
  left: -1.38rem;
}

.game-intro .title .speech-bubble-wrap .name span::after {
  right: -1.38rem;
}

.game-intro .title .speech-bubble-wrap .name span[data-show] {
  transform: translateY(-100%);
}

.game-intro .title .speech-bubble-wrap .name span[data-up] {
  transform: translateY(-200%);
}

.game-intro .title .text-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JejuDoldam';
  color: #000;
  text-align: center;
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 3.75rem; /* 136.364% */
  letter-spacing: -0.165rem;
}

.game-intro .title .text-wrap .name {
  position: relative;
  display: flex;
  justify-content: center;
  width: 8.75rem;
  height: 3.98948rem;
  margin-right: 0.75rem;
  overflow: auto;
  background-image: url('https://cdn.banggooso.com/assets/images/game221/intro/intro_bottom_border.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  pointer-events: none;
}

.game-intro .title .text-wrap .name span {
  display: flex;
  flex-direction: column;
  height: 3.75rem;
  align-items: center;
  top: 3.75rem;
  box-sizing: border-box;
  position: absolute;
  padding-bottom: var(--offset);
}

.game-intro .title .text-wrap .name span[data-show] {
  transform: translateY(-100%);
  transition: 0.5s transform ease-in-out;
}

.game-intro .title .text-wrap .name span[data-up] {
  transform: translateY(-200%);
  transition: 0.5s transform ease-in-out;
}

.game-intro .title .text-wrap .though {
  width: 8.875rem;
  height: 3.75rem;
}

.content {
  display: flex;
  width: 31.25rem;
  padding: 0rem 1.875rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fee;
}

.content .name-input-wrap {
  width: 23.75rem;
  height: 4.0625rem;
  margin: 1.75rem auto 1.25rem;
}

.content .name-input-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content .name-input-wrap input {
  width: 23.75rem;
  height: 4.0625rem;
  outline: none;
  background-color: transparent;
  padding: 10px;
  position: relative;
  z-index: 2;
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.25rem; /* 95.238% */
  letter-spacing: -0.01313rem;
  border-radius: 0.3rem;
}

.content .start {
  width: 27.5rem;
  cursor: pointer;
  border-radius: 0.9375rem;
  background: #000;
  display: flex;
  height: 5rem;
  padding: 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.625rem; /* 100% */
}

.content .game-count {
  width: 100%;
  margin: 2.5rem auto 0;
}

.content .game-count .count-num-container {
  width: 100%;
}

.content .game-count .count-num {
  margin: 0.25rem auto 0;
  padding-bottom: 1rem;
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 2.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.0275rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

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

.content .bottom-logo {
  width: 14.5rem;
  padding-bottom: 2.5rem;
}

/* 인트로 공유하기 */

.share-sns-list .list-title span {
  color: #000;
  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;
}

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

.share-sns-list .list li .btn-share {
  width: 3.375rem;
  height: 3.375rem;
  background-size: contain;
}

.share-sns-list .list li .btn-share.kakao {
  background-image: url('https://cdn.banggooso.com/assets/images/game220/intro/intro_kakao.png');
}

.share-sns-list .list li .btn-share.instagram {
  background-image: url('https://cdn.banggooso.com/assets/images/game220/intro/intro_instagram.png');
}

.share-sns-list .list li .btn-share.facebook {
  background-image: url('https://cdn.banggooso.com/assets/images/game220/intro/intro_facebook.png');
}

.share-sns-list .list li .btn-share.twitter {
  background-image: url('https://cdn.banggooso.com/assets/images/game220/intro/intro_twitter.png');
}

.share-sns-list .list li .btn-share.link-copy {
  background-image: url('https://cdn.banggooso.com/assets/images/game220/intro/intro_link.png');
}

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

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

.share-sns-list .list-title .countBox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: 0.125rem;
}

.share-sns-list .list-title .countBox .shareImg {
  background-image: url('https://cdn.banggooso.com/assets/images/common/share-b.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 1.375rem;
  height: 1.375rem;
  margin-right: 0.25rem;
  opacity: 0.6;
}

.share-sns-list .list-title .countBox .countNumber {
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 100% */
  letter-spacing: -0.0125rem;
  opacity: 0.6;
  transform: translateY(0.0625rem);
}

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

/* 문제 스타일 */

.progress_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.progress_container .title {
  height: 4.0625rem;
  display: flex;
  align-items: center;
}

.progress_container .title img {
  width: 7.625rem;
  margin: 0.875rem 0.75rem;
}

.progress_container .progress_bar .progress {
  width: 31.25rem;
  background: #e8e8e8;
}

.progress_container .progress_bar .progress .progress_inner {
  height: 0.25rem;
  background-color: #000;
}

.question-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.question-box img {
  width: 25rem;
  height: 15.25975rem;
  margin: 2.5rem 0 1.5rem;
}

.question-box p {
  color: #000;
  text-align: center;
  font-family: 'meetme';
  font-size: 2.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.375rem; /* 111.765% */
  letter-spacing: -0.02125rem;
  margin-bottom: 1rem;
}

.answer-container {
  position: relative;
}

.answer-container ul button {
  background-image: url('https://cdn.banggooso.com/assets/images/game221/common/input_border.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 27.5rem;
  height: 6.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.3125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.9375rem; /* 147.619% */
  letter-spacing: -0.01313rem;
}

.answer-container ul button:active {
  color: #fff;
  background-image: url('https://cdn.banggooso.com/assets/images/game221/common/input_border_active.png');
}

.answer-container ul button:target {
  color: #fff;
  background-image: url('https://cdn.banggooso.com/assets/images/game221/common/input_border_active.png');
}

.answer-container ul button:nth-child(1) {
  margin-bottom: 0.75rem;
}

.answer-container ul button:active {
  color: #fff;
}

/* 결과 스타일 */

.game-wrapper .game-title {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: #fff;
  border-bottom: 0.75px solid rgba(0, 0, 0, 0.1);
  height: 4.0625rem;
}

.game-wrapper .game-title img {
  width: 7.625rem;
  margin: 0.78rem 0;
}

.game-result .result-container .result-title {
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.0175rem;
  margin: 1.75rem 0 0.75rem;
}

.game-result .result-container .result-title::before,
.game-result .result-container .result-title::after {
  content: '';
  display: inline-block;
  position: relative;
  width: 1rem;
  height: 1.14rem;
  background-size: cover;
  background-image: url('https://cdn.banggooso.com/assets/images/game221/common/star.png');
}

.game-result .result-container .result-title::before {
  left: -0.38rem;
}

.game-result .result-container .result-title::after {
  right: -0.38rem;
}

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

.game-result .result-container .result-image .result-image-border {
  background-image: url('https://cdn.banggooso.com/assets/images/game221/result/result_image_border.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #ffffff;
  padding: 0.62rem 0.78rem 0.73rem;
}

.game-result .result-container .result-image .result-image-border .capture-wrap {
  width: 23.4375rem;
  height: 36.32813rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.capture-wrap .name {
  color: #000;
  text-align: center;
  font-family: 'JejuDoldam';
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.165rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1.9rem;
  width: 100%;
}

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

.game-result .result-container .result-image img {
  width: 23.4375rem;
  height: 36.32813rem;
  border-radius: 0.75rem;
}

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

.game-result .result-container .result-image .download-text-box img {
  width: 0.50006rem;
  height: 0.62119rem;
}

.game-result .result-container .result-image .download-text-box .download-text {
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-family: 'Pretendard';
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 1.3125rem */
  margin: 0 0.25rem;
}

.game-result .result-container .tendency-box {
  width: 100%;
  margin-top: 2.75rem;
  padding: 0 1.88rem;
  text-align: center;
}

.game-result .result-container .tendency-box .clover {
  width: 3.26844rem;
  height: 3.4375rem;
}

.game-result .result-container .tendency-box .tendency-title {
  color: #000;
  text-align: center;
  font-family: 'meetme';
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.375rem; /* 118.75% */
  letter-spacing: -0.02rem;
  margin-top: 0.75rem;
}

.game-result .result-container .tendency-box .result-desc {
  display: flex;
  padding: 1.5rem;
  flex-direction: column;
  gap: 1.25rem;
  align-self: stretch;
  border-radius: 0.75rem;
  background: #dbffdd;
  margin-top: 1rem;
}

.game-result .result-container .tendency-box .result-desc .desc {
  color: #000;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.875rem;
  letter-spacing: -0.0125rem;
  text-align: left;
  padding-left: 1.62rem;
}

.game-result .result-container .tendency-box .result-desc .desc::before {
  content: '';
  display: flex;
  position: absolute;
  top: 0.38rem;
  left: 0;
  width: 1rem;
  height: 1.14rem;
  align-items: center;
  background-size: cover;
  background-image: url('https://cdn.banggooso.com/assets/images/game221/common/star.png');
}

.game-result .result-container .result-tendency-product {
  width: 100%;
  margin-bottom: 2rem;
}

/* 이벤트 */

.game-result .event-wrap {
  display: none;
  padding-top: 1rem;
}

.game-result .event-wrap .ribbon {
  width: 100%;
}

.game-result .event-wrap .event-container {
  background-color: #fee;
  text-align: center;
  padding-bottom: 2rem;
}

.game-result .event-wrap .event-container .event-phrase-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-result .event-wrap .event-container .event-phrase-box .star {
  width: 1.5625rem;
  height: 1.75rem;
}

.game-result .event-wrap .event-container .event-phrase-box .event-phrase {
  width: 10.0625rem;
  margin: 1.5rem 0.38rem 1.25rem;
  padding: 0 0.5rem;
}

.game-result .event-wrap .event-container .event-title {
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2.375rem; /* 135.714% */
  letter-spacing: -0.0175rem;
  margin-bottom: 0.38rem;
}

.game-result .event-wrap .event-container .event-title span {
  font-family: 'Pretendard';
  font-weight: 700;
}

.game-result .event-wrap .event-container .event-desc {
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.875rem;
  letter-spacing: -0.0125rem;
}

.starbucks {
  width: 27.5rem;
  margin: 0.63rem auto;
}

.game-result .event-wrap .event-container .event-desc span {
  color: #000;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem;
  letter-spacing: -0.0125rem;
}

.game-result .event-wrap .event-container .event-arrow {
  width: 3.69394rem;
  height: 1.625rem;
  margin: 1.25rem 0;
}

.game-result .event-wrap .event-container .input-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  gap: 0.88rem;
}

.game-result .event-wrap .event-container .agree-wrap .all-agree-wrap {
  display: flex;
  align-items: center;
  padding-bottom: 0.88rem;
  width: 27.5rem;
  margin: 1.75rem auto 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
}

.game-result .event-wrap .event-container .agree-wrap .all-agree-wrap p {
  color: #000;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem; /* 109.091% */
  letter-spacing: -0.01375rem;
}

.game-result .event-wrap .event-container .privacy-agree,
.game-result .event-wrap .event-container .marketing-agree-1,
.game-result .event-wrap .event-container .marketing-agree-2,
.game-result .event-wrap .event-container .event-agree-1,
.game-result .event-wrap .event-container .event-agree-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-result .event-wrap .event-container .privacy-agree-view,
.game-result .event-wrap .event-container .marketing-agree-1-view,
.game-result .event-wrap .event-container .marketing-agree-2-view,
.game-result .event-wrap .event-container .event-agree-1-view,
.game-result .event-wrap .event-container .event-agree-2-view {
  display: flex;
  height: 1.625rem;
  padding: 0rem 0.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.375rem;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-family: 'Pretendard';
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem; /* 125% */
  letter-spacing: -0.01rem;
  cursor: pointer;
}

.game-result .event-wrap .event-container .privacy-agree p,
.game-result .event-wrap .event-container .marketing-agree-1 p,
.game-result .event-wrap .event-container .marketing-agree-2 p,
.game-result .event-wrap .event-container .event-agree-1 p,
.game-result .event-wrap .event-container .event-agree-2 p {
  color: rgba(0, 0, 0, 0.7);
  font-family: 'Pretendard';
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.625rem;
  letter-spacing: -0.01125rem;
}

.game-result .event-wrap .event-container .privacy-agree img,
.game-result .event-wrap .event-container .marketing-agree-1 img,
.game-result .event-wrap .event-container .marketing-agree-2 img,
.game-result .event-wrap .event-container .event-agree-1 img,
.game-result .event-wrap .event-container .event-agree-2 img,
.game-result .event-wrap .event-container .agree-wrap .all-agree-wrap img {
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  margin-right: 0.5rem;
}

.game-result .event-wrap .event-container .agree-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.88rem;
  margin-top: 1.5rem;
}

.game-result .event-wrap .event-container .agree-box-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1.5rem auto 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.7);
  width: 27.5rem;
  padding-bottom: 1rem;
}

.game-result .event-wrap .event-container input {
  width: 25rem;
  height: 4.0625rem;
  padding: 0rem 0.75rem;
  margin: 0 auto;
  gap: 0.625rem;
  border-radius: 0.75rem;
  background: #fff;
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.0125rem;
}

.game-result .event-wrap .event-container input::placeholder {
  color: rgba(0, 0, 0, 0.3);
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.0125rem;
}

.game-result .event-wrap .event-container input::-webkit-outer-spin-button,
.game-result .event-wrap .event-container input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.game-result .event-wrap .event-container .event-submit,
.game-result .event-wrap .event-container .event-hash,
.game-result .event-wrap .event-container .event-share {
  display: flex;
  width: 27.5rem;
  height: 5rem;
  padding: 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.625rem; /* 100% */
  border-radius: 0.9375rem;
  background: #000;
  cursor: pointer;
  margin: 0 auto;
}

.game-result .event-wrap .event-container .event-share {
  margin-top: 0.88rem;
}

.game-result .event-wrap .event-container .event-hash {
  margin-top: 1.25rem;
}

.game-result .event-wrap .event-container .event-phrase-1,
.game-result .event-wrap .event-container .event-phrase-2 {
  width: 100%;
  padding: 0 1.875rem;
  margin-top: 1.25rem;
}

.game-result .event-wrap .event-container .event-page-2 {
  width: 100%;
  margin-top: 2rem;
}

.game-result .event-wrap .event-container .event-submit {
  margin-top: 1.75rem;
}

.game-result .event-wrap .event-container .event-participation-title {
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.015rem;
  margin-bottom: 0.75rem;
}

.game-result .event-wrap .event-container .event-copy-help-text-1 {
  color: rgba(0, 0, 0, 0.7);
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.875rem; /* 150% */
  letter-spacing: -0.0125rem;
  margin-bottom: 0.25rem;
}

.game-result .event-wrap .event-container .event-copy-help-text-2 {
  color: rgba(0, 0, 0, 0.7);
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: -0.01375rem;
}

.game-result .event-wrap .event-container .event-copy-help-text-2 span {
  color: #000;
  font-family: 'Pretendard';
  font-weight: 700;
}

.game-result .event-wrap .event-container .event-date {
  border-radius: 62.4375rem;
  border: 1.5px solid #000;
  background: rgba(255, 255, 255, 0.6);
  margin: 1rem auto 0;
  width: 21.3125rem;
  height: 2.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.625rem; /* 162.5% */
  letter-spacing: -0.01rem;
}

.game-result .event-wrap .event-container .event-date span {
  font-family: 'Pretendard';
  font-weight: 700;
}

/* 궁합, 가장 많은 유형 */

.game-result .compatibility-wrap,
.game-result .most-type-wrap {
  margin-top: 2rem;
  text-align: center;
  padding: 0 1.88rem;
}

.game-result .most-type-wrap .most-type-icon {
  width: 3.625rem;
}

.game-result .compatibility-wrap .heart {
  width: 3.75rem;
}

.game-result .compatibility-wrap .title,
.game-result .most-type-wrap .title {
  color: #000;
  text-align: center;
  font-family: 'meetme';
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.02rem;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.game-result .most-type-wrap .desc {
  color: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-family: 'meetme';
  font-size: 1.125rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

.game-result .compatibility-wrap .compatibility-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.game-result .most-type-wrap .most-type-box {
  width: 27.5rem;
  padding: 2rem 1.875rem 2.5rem 1.875rem;
  border-radius: 0.75rem;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: #e3fcff;
}

.game-result .most-type-wrap .most-type-box .entity-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.game-result .compatibility-wrap .compatibility-box .entity {
  display: flex;
  width: 100%;
  padding: 1.5rem 1.875rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.75rem;
  background: #fbeeff;
}

.game-result .compatibility-wrap .compatibility-box .entity .image-box,
.game-result .most-type-wrap .most-type-box .entity-box .entity .image-box {
  position: relative;
}

.game-result .compatibility-wrap .compatibility-box .entity .image-box p,
.game-result .most-type-wrap .most-type-box .entity-box .entity .image-box p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JejuDoldam';
  color: #000;
  font-size: 0.9rem;
  width: 100%;
  letter-spacing: 0.0009rem;
  top: 3%;
}

.game-result .compatibility-wrap .compatibility-box .entity img {
  width: 100%;
  border-radius: 0.25rem;
}

.game-result .most-type-wrap .most-type-box .entity img {
  width: 9.6875rem;
  border-radius: 0.25rem;
}

.game-result .compatibility-wrap .compatibility-box .entity .extremes {
  display: flex;
  padding: 0rem 0.5rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.375rem;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: 'meetme';
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.01375rem;
}

.game-result .compatibility-wrap .compatibility-box .entity .title {
  color: #000;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01375rem;
  margin: 0.62rem 0 0.75rem 0;
}

.game-result .most-type-wrap .most-type-box .entity .rank,
.game-result .most-type-wrap .most-type-box .entity .title {
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.51356rem;
  font-weight: 700;
  margin: 0;
}

.game-result .most-type-wrap .most-type-box .entity .percent {
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0.25rem 0 1rem;
}

.game-result .most-type-wrap .most-type-box a button {
  display: flex;
  width: 100%;
  height: 4.6875rem;
  padding: 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  border-radius: 0.9375rem;
  border: 2px solid #000;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.625rem; /* 108.333% */
  margin-top: 1.5rem;
  cursor: pointer;
}

/* 유형 순위 */
.total-type-rank {
  color: #000;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.0175rem;
  margin: 1.75rem 0 1.5rem;
}

.test-lists {
  padding: 0 1.88rem 6.25rem;
}

.total-type-rank::before,
.total-type-rank::after {
  content: '';
  display: inline-block;
  position: relative;
  width: 1rem;
  height: 1.14rem;
  background-size: cover;
  background-image: url('https://cdn.banggooso.com/assets/images/game221/common/star.png');
}

.total-type-rank::before {
  left: -0.38rem;
}

.total-type-rank::after {
  right: -0.38rem;
}

/* 다시하기 버튼 */

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

.game-result .btn_retest > .restart-btn {
  display: flex;
  width: 27.5rem;
  padding: 1.5rem 0rem;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.9375rem;
  background: #000;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard' !important;
  font-size: 1.5rem !important;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875rem; /* 125% */
  box-shadow: none !important;
  background-image: none;
}

.game-result .btn_retest > .restart-btn img {
  width: 1.625rem;
  height: 1.625rem;
}

/* 콘텐츠 더보기 */

.contents-more {
  background: #fff;
  border: none;
  flex-direction: column;
  width: 100%;
  border-radius: 0;
  padding-bottom: 2.19rem;
  margin: 0;
}

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

.contents-more .contents-list .game-btn {
  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 #333 !important;
  cursor: pointer;
  color: #333;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

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

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

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

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

.contents-more .contents-main .sub-text {
  color: #333;
  font-family: 'Pretendard';
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.16669rem; /* 144.444% */
  margin-top: 0.33rem;
}

/* 추천 콘텐츠 */

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

.game-result .recommend-list:before {
  background: #000000;
  height: 16.11331rem;
}

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

.game-result .recommend-list .swiper-container {
  padding-left: 2.17rem;
  padding-bottom: 0rem;
}

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

.game-result .recommend-list .slide-box {
  width: 10.831rem;
  height: 13.33044rem;
  overflow: hidden;
  border: 0.3rem solid #000;
}

.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.3rem;
  left: 51%;
  transform: translateX(-50%);
  color: #373c3f;
  font-family: 'Pretendard';
  font-size: 0.99981rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.022rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

.game-result .recommend-list .btn-wrap .btn-white-round {
  color: #000;
  text-align: center;
  font-family: 'RixGulimEB', sans-serif;
  font-size: 1.25006rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.0275rem;
}

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

/* 전체 유형 순위 */

.list-item .item-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.88rem 0 1.25rem;
}

.list-item .item-wrap .content {
  width: 100%;
  height: 9.76563rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0;
  background-color: #fff;
}

.list-item .item-wrap .content .rank {
  color: #000;
  text-align: center;
  font-family: 'meetme';
  font-size: 2.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.23375rem;
  margin-top: 0.88rem;
}

.list-item .item-wrap .content .item-info .subject {
  color: #000;
  font-family: 'Pretendard';
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.list-item .item-wrap .content .item-info .item-title {
  color: #000;
  font-family: 'Pretendard';
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2.375rem;
}

.list-item .item-wrap .image-box {
  width: 6.25rem;
  position: relative;
}

.list-item .item-wrap .image-box p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JejuDoldam';
  color: #000;
  font-size: 0.6rem;
  width: 100%;
  text-align: center;
  letter-spacing: 0.0009rem;
  top: 3%;
}

.list-item .item-wrap .image-box img {
  width: 6.25rem;
  height: 9.76563rem;
  border-radius: 0.25rem;
}

.list-item .bottom-line {
  width: 100%;
  display: block;
  margin: 1rem 0;
}

/* 이용 약관 모달 */
.privacy-modal,
.marketing1-modal,
.marketing2-modal,
.event1-modal,
.event2-modal {
  display: none;
  position: fixed;
  align-items: center;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.privacy-modal .modal-container,
.marketing1-modal .modal-container,
.marketing2-modal .modal-container,
.event1-modal .modal-container,
.event2-modal .modal-container {
  position: relative;
  border-radius: 0.9375rem;
  overflow: hidden;
}

.privacy-modal .modal,
.marketing1-modal .modal,
.marketing2-modal .modal,
.event1-modal .modal,
.event2-modal .modal {
  width: 26.25rem;
  height: 23.4375rem;
  background-color: #ffffff;
  overflow: auto;
  padding: 1.5rem 1.88rem 5.6rem;
}

.event1-modal .modal,
.event2-modal .modal {
  padding: 1.5rem 0 5.6rem;
}

.marketing1-modal .modal {
  height: 21.1875rem;
}

.marketing2-modal .modal {
  height: 15.3125rem;
}

.event1-modal .modal img,
.event2-modal .modal img {
  width: 100%;
}

.event1-modal .modal {
  height: 30rem;
}

.privacy-modal .modal .title,
.marketing1-modal .modal .title,
.marketing2-modal .modal .title,
.event1-modal .modal .title,
.event2-modal .modal .title {
  color: #0c0c0c;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.625rem;
  letter-spacing: -0.01375rem;
  margin-bottom: 1.25rem;
}

.privacy-modal .modal .sub-title {
  color: rgba(51, 51, 51, 0.7);
  font-family: 'Pretendard';
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.625rem; /* 162.5% */
  letter-spacing: -0.01rem;
  margin-bottom: 0.38rem;
}

.privacy-modal .modal .text-1,
.marketing1-modal .modal .text-1 {
  color: rgba(51, 51, 51, 0.7);
  font-family: 'Pretendard';
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5625rem; /* 166.667% */
  letter-spacing: -0.00938rem;
  margin-bottom: 0.38rem;
}

.privacy-modal .modal .text-2,
.marketing1-modal .modal .text-2 {
  color: rgba(51, 51, 51, 0.7);
  font-family: 'Pretendard';
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.625rem; /* 162.5% */
  letter-spacing: -0.01rem;
}

.marketing2-modal .modal .marketing2-text-1 {
  color: rgba(51, 51, 51, 0.7);
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.75rem;
  letter-spacing: -0.01063rem;
  margin-bottom: 0.38rem;
}

.marketing2-modal .modal .marketing2-text-2 {
  color: rgba(51, 51, 51, 0.7);
  text-align: center;
  font-family: 'Pretendard';
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5625rem;
  letter-spacing: -0.00938rem;
}

.privacy-modal .modal-container button,
.marketing1-modal .modal-container button,
.marketing2-modal .modal-container button,
.event1-modal .modal-container button,
.event2-modal .modal-container button {
  height: 4.0625rem;
  background: #000;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  font-family: 'Pretendard';
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.625rem;
  letter-spacing: -0.01375rem;
  cursor: pointer;
}