@font-face {
  font-family: 'Gowun Batang';
  src: url('https://cdn.banggooso.com/assets/fonts/GowunBatang-Bold.woff2') format('woff2'),
    url('https://cdn.banggooso.com/assets/fonts/GowunBatang-Bold.woff') format('woff');
}

@font-face {
  font-family: 'LeeSeoyun';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BMEULJIRO';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/BMEULJIRO.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  --game-102-color: #d5f3ff;
  --game-102-sub-color: #74a44e;
  --game-102-2nd-color: #d4f3ff;
  --game-102-3rd-color: #d4eac3;
  --game-102-right-background: #ffedae;
  --game-102-right-border: #ffba34;
  --game-102-wrong-background: #ffbeaf;
  --game-102-wrong-border: #ef6f53;
  --game-102-new-color: #377a26;
  --game-102-font: 'Gowun Batang', serif;
  --game-102-sub-font: 'GmarketSans';
}

.game-wrapper .game-title {
  font-family: var(--game-102-font) !important;
  color: var(--game-102-sub-color);
  background-color: var(--game-102-color);
}

/* intro */
.game-wrapper .game-intro {
  background-position: top;
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #30b767;
}

.game-intro .img-box {
  position: relative;
  width: 80%;
  margin: 0 auto 6.625rem;
  padding-top: 5rem;
}
.game-intro .img-box img {
  position: absolute;
  margin-top: 11rem;
  transform: scale(1.2);
}
.game-wrapper .intro-header {
  background-color: white !important;
}

.game-intro .btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 1rem auto;
  flex-wrap: wrap;
}

.game-intro .btn-game-start {
  width: 15rem;
  border-radius: 0.3rem;
  border: 0rem;
  font-size: 1.1rem;
  color: #30b767;
  line-height: 3.3rem;
  font-family: var(--game-102-sub-font);
  font-weight: 700;
  background: #fff797;
  box-shadow: none;
  padding-top: 0.25rem;
}

.game-intro .btn-move-result {
  background-color: var(--game-102-new-color);
  margin-top: 0.5rem;
}

.game-intro .user-nickname {
  display: flex;
  width: 100%;
  justify-content: center;
  position: relative;
}
.game-intro .user-nickname input::placeholder {
  color: #cccccc;
}

.game-intro .user-nickname > p {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%, -100%);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 2.62px;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  color: #fff;
}

span#grow-maker {
  color: var(--game-102-sub-color);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 7rem;
}
.insta-box span#grow-maker {
  max-width: 4.1rem;
}
.game-intro .intro-gif {
  position: absolute;
  transform: translate(-6%, -25%);
}
.game-intro .user-nickname input {
  width: 11rem;
  height: 2.5rem;
  border: 1px solid var(--game-102-sub-color);
  text-align: center;
  font-size: 0.8rem;
  color: #cccccc;
  box-sizing: border-box;
  padding: 0.5rem;
  font-weight: 400;
  box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 25%);
  margin-top: 17rem;
}

.game-intro .share-sns-list {
  position: relative;
  top: 3rem;
}

.game-intro .share-sns-list .list-title,
.game-intro .share-sns-list .list-title .countBox .countNumber {
  color: white;
}
.game-intro .share-sns-list .list-title .countBox .countImg {
  background-image: url(https://cdn.banggooso.com/assets/images/icons/icon-reply-w.png);
}
.share-sns-list .list-title {
  color: black;
  font-weight: 900;
}
.share-sns-list .list-title .countBox .countNumber {
  color: black;
  font-weight: 700;
}

.share-sns-list .list-title .countBox .countImg {
  background-image: url(https://cdn.banggooso.com/assets/images/icons/icon-reply.png);
}
.game-intro .volBox {
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 0.8rem;
  color: #ffffff;
  text-align: center;
}

.game-intro .game-count {
  margin-top: 3rem;
  margin-bottom: 0;
}

.game-intro .game-count .count-num {
  color: white;
}
.game-intro .game-count .count-label {
  color: white;
  font-family: 'Rix Gulim';
  font-weight: 900;
}
.game-intro .game-count .count-label:before {
  height: 0.7rem;
  background-color: #278e51;
}

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: linear;
}

.game-intro > .slider-section {
  width: 100%;
  left: 50%;
  text-align: center;
}
.game-intro > .slider-section > .intro-slide-wrapper > .swiper-container > .swiper-wrapper > .swiper-slide {
  width: 30%;
  margin: 0 5px;
}

.game-intro
  > .slider-section
  > .intro-slide-wrapper
  > .swiper-container
  > .swiper-wrapper
  > .swiper-slide
  > .slide-box
  > img {
  width: 100%;
}

.slider-section .subtitle {
  font-family: var(--game-102-font);
  margin-bottom: 1rem;
  font-size: 1.2rem;
  display: inline-block;
}

.slider-section .subtitle::before {
  content: '';
  height: 0.7rem;
  bottom: 0.15rem;
  background-color: var(--game-102-3rd-color);
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
}

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

.game-intro .grow-step-image {
  text-align: center;
  margin-bottom: 0.5rem;
}
.game-intro .grow-step-image img {
  margin-right: 0.4rem;
}

.game-intro .intro-notice {
  position: relative;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 0.7rem;
  border-radius: 5px;
  margin-top: -1rem;
  width: 68%;
}

.game-intro .intro-notice p {
  font-size: 0.8rem;
  color: #44401d;
  text-align: center;
}
.game-intro .intro-notice p:nth-of-type(1) {
  margin-bottom: 0.3rem;
}

/* progress */

.progress-bottom {
  background-color: var(--game-102-3rd-color);
  color: #a5a5a5;
  height: 2.52rem !important;
}

.progress-bottom .progress {
  top: 50%;
}

.progress-bottom .progress .progress-inner {
  background-color: var(--game-102-sub-color);
}

.progress-bottom .percen {
  font-weight: 700;
  font-size: 0.7rem;
  position: absolute;
  top: 30%;
  color: black;
  right: 2%;
}

.progress-bottom > p:last-child {
  font-size: 0.7rem;
  position: absolute;
  bottom: 0;
}

/* 문제페이지 - 공통 */

.game-wrapper .app-header.page {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 9999;
  width: 100%;
  transform: translateX(-50%);
  max-width: 500px;
  background: transparent;
  border: none;
}
.game-wrapper .game-wrap {
  padding: 0;
  width: 100%;
  height: 100%;
  max-height: 1030px;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.game-wrap .full-page {
  height: 100vh;
  position: relative;
}

.game-wrap .full-page video {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.game-wrapper .app-main {
  height: 100vh;
}
.app-main .game-intro {
  background-image: url('https://cdn.banggooso.com/assets/images/game102/intro.png');
}
.app-header.page .app-sound {
  background-image: url('https://cdn.banggooso.com/assets/images/game85/on.png');
  background-size: 70%;
  position: absolute;
  right: 2.5rem;
  z-index: 99;
  width: 2.3rem !important;
}

.app-header.page .app-sound.off {
  background-image: url('https://cdn.banggooso.com/assets/images/game85/off.png');
  background-size: 55%;
  position: absolute;
  right: 2.5rem;
  z-index: 99;
  width: 2.3rem !important;
}

.app-header.page .app-home {
  background-image: url('https://cdn.banggooso.com/assets/images/game85/home.png');
  background-size: 70%;
  position: absolute;
  right: 0.5rem;
  z-index: 99;
  width: 2.3rem !important;
}

.app-header.page .app-header-btn.back {
  background: transparent url(https://cdn.banggooso.com/assets/images/icons/back-arrow-w.png) no-repeat center center /
    auto 1rem;
}

.premium-bg {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}

.game-wrap .full-page .bottom-button,
.select-area {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 3rem;
  width: 100%;
  text-align: center;
}

.game-wrap .full-page .bottom-button,
.game-wrap .select-area a,
.game-wrap .select-area button {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.95);
  color: #000000;
  white-space: nowrap;
  font-weight: 800;
  margin: 0.5rem auto;
  width: 85%;
  font-size: 1rem;
}

.game-wrap .full-page .bottom-button:active,
.game-wrap .select-area a:active,
.game-wrap .select-area button:active {
  background-color: var(--game-102-sub-color);
  color: #fff;
}

.select-options-wrap {
  bottom: 20%;
  overflow: hidden;
  width: 92%;
}

.select-options {
  height: 15rem;
  overflow-y: scroll;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.select-options::-webkit-scrollbar-track {
  margin-top: 1px;
}
.select-options::-webkit-scrollbar {
  display: block !important;
  width: 8px;
}
.select-options::-webkit-scrollbar-thumb {
  background-color: #d4eac3;
  border-radius: 10px;
}

.select-options-wrap::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 15px;
  background: linear-gradient(0deg, rgba(100, 100, 100, 0.4) 11%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* 문제페이지*/
.game-wrap .pop-text {
  position: absolute;
  padding: 1rem;
  width: 70%;
  border-radius: 13px;
  color: black;
  font-weight: 800;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 5;
  min-width: 250px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background-color: white;
  top: 15%;
}
.pop-text.question-text {
  flex-direction: column;
}
.pop-text .grow-maker-wrapper {
  display: flex;
}
.gray-background {
  width: 100%;
  position: absolute;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

#step02 .pop-text,
#step04 .pop-text,
#step06 .pop-text,
.game-player #step02 .pop-text,
.game-player #step04 .pop-text,
.game-player #step06 .pop-text {
  top: 8%;
}
.press-notice {
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}

.press-notice span {
  width: 31%;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 0.8rem;
  text-align: center;
  border-radius: 1rem;
}
.select-area input[type='checkbox'] {
  display: none;
}

.select-area input[type='checkbox']:checked + label {
  background-color: var(--game-102-sub-color);
  color: white;
}

.select-area label {
  width: 23.5%;
  height: 5rem;
  margin: 0.1rem;
  background: white;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  font-family: var(--game-102-font) !important;
  border: 2px solid #fff;
  word-break: keep-all;
}

#step01bg {
  animation: bgSlide 4s forwards;
  width: 200%;
}

@keyframes bgSlide {
  0% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}

.grow-container {
  position: absolute;
  top: 40%;
  display: flex;
  justify-content: center;
}

.grow-container img {
  width: 50%;
}

.grow-container-small {
  position: absolute;
  top: 25%;
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}
.grow-container-small img {
  width: 25%;
}

/*my-ranking*/
.game-wrapper .test-lists-wrap {
  background-color: #e3f7ff;
}
.rankingBox .topRanking h3 {
  font-family: var(--game-102-font);
  margin-bottom: 0.5rem;
}
.rankingBox .topRanking h3 span {
  color: #74a44e;
}

.rankingBox .topRanking h3::before {
  background-color: #eff7e8;
}
.rankingBox .topRanking.keyword h3::before {
  opacity: 0;
}
.rankingBox .topRanking {
  border-radius: 0rem;
  border: 0rem;
  padding: 1rem;
  background-color: var(--game-102-2nd-color);
  margin: 0;
  min-height: 0;
}

.rankingBox .topRanking .notice {
  font-size: 0.7rem;
}

.list-content {
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-top: 1rem;
  max-height: 62vh;
}

.list-content .name {
  width: 100%;
  background-color: white;
  height: 2.5rem;
  border-radius: 5px;
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.list-content .name span {
  font-weight: 700;
}
.list-content .name span:nth-child(1) {
  width: 15%;
  font-family: var(--game-102-font);
  color: var(--game-102-sub-color);
}
.list-content .name span:nth-child(2) {
  width: 75%;
  text-align: start;
  font-size: 0.8rem;
}
.list-content .name span:nth-child(3) {
  color: var(--game-102-sub-color);
  background-color: #eff7e8;
  font-size: 0.7rem;
  border-radius: 1rem;
  width: 5.5rem;
  height: 1.6rem;
  padding-top: 0.3rem;
  padding-left: 0.2rem;
  margin-right: 0.5rem;
}

.selected-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  display: none;
  overflow: hidden;
  padding-bottom: 0.5rem;
}

.list-content .name.active + .selected-item,
.list-content.maker-keywords .selected-item {
  display: block;
}

.selected-item > li {
  width: 31%;
  background-color: #f2f2f2;
  margin: 0.15rem;
  height: 2.7rem;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1rem;
}

.selected-item > li.actived {
  background-color: var(--game-102-sub-color);
  color: #fff;
}

/*player 결과 페이지*/
.player-result .game-result {
  text-align: center;
}

.player-result .player-tree-result {
  margin-top: 4rem;
  font-weight: 500;
}
.player-result .player-tree-result span {
  color: var(--game-102-sub-color);
}

.current-fundraising p:nth-child(3) {
  font-size: 0.7rem;
  color: #909090;
}

/* insta box */
.insta-box {
  background-color: #fff;
  text-align: center;
  padding: 1.5rem 1rem 1.8rem;
  border-radius: 2.62px;
  margin-bottom: 2rem;
}

.insta-box img {
  width: 100%;
}

.insta-box h4 {
  font-size: 1.1rem;
  font-family: var(--game-102-font) !important;
  display: inline-block;
  padding: 0 0.2rem;
  position: relative;
  margin-bottom: 0.9rem;
}

.insta-box .insta-box-desc {
  margin-bottom: 2rem;
  font-weight: 600;
}

.insta-box .insta-box-desc .highlight-line::after,
.insta-box h4::after {
  content: '';
  background-color: var(--game-102-3rd-color);
  width: 100%;
  height: 50%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: -1;
}

.insta-box .insta-box-desc p {
  font-size: 0.8rem;
  line-height: 0.8rem;
}

.insta-box .insta-box-desc p + p {
  margin-top: 1rem;
}

.insta-box .insta-box-desc p span {
  color: var(--game-102-sub-color);
}

.insta-box .insta-box-desc .highlight-line {
  display: inline-block;
  position: relative;
  padding: 0 0.1rem 0.1rem;
}
.insta-box .insta-box-desc .highlight-line + .highlight-line {
  margin-top: 0px;
  top: -0.5rem;
}

.insta-box .insta-box-desc .max-price-limit {
  font-size: 0.6rem;
  margin: 0;
}

.insta-box .game-btn-wrapper {
  margin: 1.5rem auto 3rem;
}

.insta-box .game-btn-wrapper .insta-btn {
  border: none;
  box-shadow: none;
  background-color: var(--game-102-3rd-color);
  color: var(--game-102-new-color);
  border-radius: 2.62px !important;
  font-family: var(--game-102-font);
  font-size: 1.2rem;
}

.insta-box .current-fundraising {
  margin-top: 1.2rem;
}

.insta-box .current-fundraising > p:first-child {
  font-size: 1.2rem;
  font-family: var(--game-102-font) !important;
  margin-bottom: 0.2rem;
}

.insta-box .current-fundraising .fundraising-info {
  color: #909090;
}
.insta-box .current-fundraising > p:first-child span {
  color: #74a44e;
}

.insta-box .current-fundraising .fundraising-info {
  font-size: 0.7rem;
}

.insta-box .insta-btn-wrapper {
  margin: 1.5rem auto 1.5rem;
}
.insta-box .insta-box-desc .grow-maker-wrapper {
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  color: black;
}
.player-result .player-tree-result p {
  margin-bottom: 1.3rem;
}

.player-tree-result .game-btn-wrapper {
  margin: 0.5rem auto 2rem;
}

.tree-metavv-link {
  font-size: 0.8rem;
  font-weight: 900;
  text-align: center;
}
.tree-metavv-link > span {
  display: inline-block;
}
.tree-metavv-link > span::before {
  content: '';
  height: 0.5rem;
  bottom: 0.15rem;
  background-color: #eaffd9;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
}
.tree-metavv-link p:nth-of-type(2) {
  margin-bottom: 0.9rem;
  margin-top: 0.9rem;
}
/* 결과페이지 */
.game-result .btn_retest {
  margin: 0.5rem auto 4rem;
}

.tree-metavv-link .game-btn-wrapper {
  margin: 0.5rem auto 0.5rem;
}
.game-result #topKeywordList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.topKeyword {
  width: 30%;
  height: 2.5rem;
  background-color: white;
  border-radius: 5px;
  margin: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.game-result .bottom-comment {
  margin-top: 2rem;
  font-weight: 700;
  color: #74a44e;
  line-height: 1.3rem;
  font-size: 0.9rem;
}
/*공유말풍선*/
.sns-share-text-box-wrap {
  text-align: center;
  margin-top: 3rem;
}

.sns-share-text-box {
  display: inline-block;
  position: relative;
  padding: 0.5rem 2rem;
  border-radius: 3rem;
  background-color: var(--game-102-3rd-color);
}
.sns-share-text-box > span {
  display: block;
  width: 1rem;
  height: 5rem;
  background-color: var(--game-102-3rd-color);
  border-radius: 0.5rem;
  position: absolute;
  transform: translate(0%, 85%) rotate(90deg) scaleY(0.3);
  transform-origin: right top;
  left: 50%;
  bottom: 0;
}
.sns-share-text-box > span::after {
  content: '';
  top: 0.6rem;
  left: -1.2rem;
  width: 3.725rem;
  height: 3.725rem;
  background-color: var(--game-102-3rd-color);
  border-radius: 1rem;
  clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
  position: absolute;
  transform: rotate(45deg);
}

.sns-share-text-box > p {
  color: #395820;
  font-size: 0.8rem;
  position: relative;
  z-index: 1;
  line-height: 1rem;
}

.sns-share-bottom .sns-share-text-box-wrap {
  margin-top: 1rem;
}

.sns-share-bottom .sns-share-text-box,
.sns-share-bottom .sns-share-text-box > span,
.sns-share-bottom .sns-share-text-box > span::after {
  background-color: var(--game-102-new-color);
}
.sns-share-bottom .sns-share-text-box > p {
  color: white;
}

.game-result .result-input {
  border: solid 2px rgba(103, 167, 192, 1);
  border-radius: 5px;
  width: 70%;
  display: block;
  font-size: 0.85rem;
  text-align: center;
  color: #444444;
  padding: 0.2rem;
  text-overflow: ellipsis;
  background-color: white;
  margin-right: 1rem;
}

.share-input .btn-share.link-copy {
  background-image: url(https://cdn.banggooso.com/assets/images/icons/btn-share-linkcopy.png);
}
.share-input .btn-share.link-copy-green {
  background-image: url(https://cdn.banggooso.com/assets/images/game102/btn-share-linkcopy-green.png);
}

.share-input .btn-share {
  display: inline-block;
  background-position: center center;
  width: 2.5625rem;
  height: 2.5625rem;
  text-indent: -99999px;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: transparent;
}
.share-input {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.game-wrapper .app-header.test-header {
  background-color: #e3f7ff;
}

.game-wrapper .game-result .result-box {
  border: none;
  background-color: var(--game-102-color);
  padding: 1.2rem 1.6rem 1rem;
}
.game-result #result-title {
  margin-top: 1rem;
}
.game-result #result-title h1 {
  font-family: var(--game-102-font) !important;
  font-weight: 700;
}

.game-result #result-title .shorten-area {
  display: flex;
  justify-content: center;
  align-items: center;
}
.game-result #result-title .shorten-name {
  font-family: var(--game-102-font) !important;
  font-weight: 700;
  color: var(--game-102-sub-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.2rem;
  max-width: 6.6rem;
  display: inline-block;
}
.game-result #result-title .shorten-tree,
.game-result #result-title .shorten-area .shorten-tree {
  font-family: var(--game-102-font) !important;
  font-weight: 700;
  display: inline-block;
  font-size: 1.2rem;
}
.game-result #result-title .shorten-tree {
  font-size: 2rem;
}
.game-result #result-title .thumb-img-text {
  font-size: 1rem;
  color: #74a44e;
  padding-top: 1rem;
  font-weight: 600;
}

.game-result .detail .result-box .result-bot-text .subtitle {
  color: var(--game-102-sub-color);
  text-align: left;
  margin-top: 1rem;
}

.game-result .detail .result-box .result-bot-text .subtitle:first-child {
  margin-top: 0;
}

.game-result .detail .result-box .result-bot-text .subtitle > .mark {
  background-color: var(--game-102-sub-color) !important;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.4rem;
  margin-left: -0.05rem;
}

.game-result .detail .result-box .result-bot-text .mark {
  background-color: var(--game-102-sub-color) !important;
}

.game-wrapper .result-box .game-btn-wrapper {
  margin: 1rem auto 0;
}

.player-tree-result .game-btn-wrapper .game-btn,
.tree-metavv-link .game-btn-wrapper .game-btn,
.game-wrapper .result-box .friend-list-link,
.game-wrapper .game-result .btn_retest > a {
  border: none;
  border-width: 0 !important;
  box-shadow: none;
  border-radius: 2.62px !important;
  background-color: var(--game-102-new-color);
  font-family: var(--game-102-font) !important;
  background-position: 85% center;
  font-size: 1.15rem !important;
  color: #fff;
}

.player-tree-result .game-btn-wrapper .game-btn,
.tree-metavv-link .game-btn-wrapper .game-btn {
  background-color: var(--game-102-sub-color);
}

.game-wrapper .result-box .friend-list-link {
  background-color: var(--game-102-sub-color);
}

.game-result .recommend-list:before {
  background-color: var(--game-102-sub-color);
}

.tree-born-time {
  margin-top: 1rem;
  text-align: center;
}

.tree-born-time > div {
  padding: 6.5px 17px;
  display: inline-block;
  background-color: #ffffff;
  font-size: 0.85rem;
  font-family: var(--game-102-font) !important;
}

.tree-born-time > div .after-born-info {
  color: var(--game-102-sub-color);
  font-weight: 700;
}

.tree-born-info {
  text-align: center;
  font-size: 0.8rem;
  margin-top: 2rem;
}

.tree-born-info p span {
  color: var(--game-102-sub-color);
}

.tree-born-info p + p,
.tree-born-box p + p {
  margin-top: 1rem;
}

.tree-born-info p + p,
.tree-born-box p:nth-child(n + 3) {
  font-weight: 700;
}

.tree-born-box {
  background-color: var(--game-102-2nd-color);
  width: 70%;
  margin: 2rem auto 0;
  padding: 9px;
  text-align: center;
  font-size: 0.8rem;
}

.result-friend-list {
  margin-top: 2rem;
}

.result-friend-list > p:first-child {
  text-align: center;
  font-size: 1.15rem;
  font-family: var(--game-102-font) !important;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.result-friend-list > p:nth-child(2) {
  text-align: center;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  color: var(--game-102-new-color);
}

.result-friend-list > p span {
  color: var(--game-102-sub-color);
}

.result-friend-list > div {
  width: 86%;
  margin: 0 auto;
  background-color: var(--game-102-2nd-color);
  border-radius: 2.62px;
  padding: 5px;
  height: 303px;
}

.result-friend-list .no-friend-yet {
  font-size: 0.8rem;
  height: 100%;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.rankingBox .no-friend-yet {
  padding: 5rem 2rem;
  display: block;
  background-color: #e3f7ff;
  font-size: 0.8rem;
  margin-top: 1rem;
}

.result-friend-list > div ul {
  padding-bottom: 0.3rem;
}

.result-friend-list > div li {
  border-radius: 2.62px;
  background-color: #fff;
  display: flex;
  padding: 1rem;
  font-size: 0.9rem;
}

.result-friend-list > div li + li {
  margin-top: 0.3rem;
}

.result-friend-list > div li span:first-child {
  color: var(--game-102-sub-color);
  font-family: var(--game-102-font) !important;
  text-align: center;
  width: 1.8rem;
}

.result-friend-list > div li span:last-child {
  flex: 1 1;
}

.result-friend-list .os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  background-color: var(--game-102-sub-color);
}

/* 팝업 */
.new-popup.popup-module.pop_induce .popup .popup-message-box {
  font-size: 0.95rem;
  border: 0;
}
.new-popup.popup-module.pop_induce .popup .popup-message-box.image-type {
  font-size: 1rem;
  border: 0;
  margin: 0 auto;
  padding: 0rem;
}
.new-popup.popup-module.pop_induce .popup .popup-img-box {
  margin: 1rem;
}
.popup .popup_text_color_102 {
  color: var(--game-102-sub-color);
}

/* 답변 페이지 */

/*답변 페이지 - 사진 없는 글자 선택지*/

/*텍스트, 이미지 문제 공통 부분 */

/*텍스트 문제 체크 박스 */

/* loading spinner */
.content-102-loader,
.content-102-loader:before,
.content-102-loader:after {
  border-radius: 50%;
}
.content-102-loader {
  color: #ffffff;
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.content-102-loader:before,
.content-102-loader:after {
  position: absolute;
  content: '';
}
.content-102-loader:before {
  width: 5.2em;
  height: 10.2em;
  background: var(--game-102-color);
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.1em 5.1em;
  transform-origin: 5.1em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}
.content-102-loader:after {
  width: 5.2em;
  height: 10.2em;
  background: var(--game-102-color);
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 4.9em;
  -webkit-transform-origin: 0.1em 5.1em;
  transform-origin: 0.1em 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* 브랜드 소구 */
/* 슬라이드 */
.tree-metavv-link .brand-slide-wrapper {
  background-color: #cff1ff;
  padding: 0.7rem 0;
  margin: 0 -12px 1rem;
}
.brand-slide-wrapper .swiper-wrapper {
  padding: 0 1rem;
}
.brand-slide-wrapper .swiper-slide {
  width: 6rem;
  height: 8rem;
  margin-right: 0.8rem;
}
.brand-slide-wrapper p:first-child {
  color: var(--game-102-new-color);
  display: inline-block;
  font-size: 1rem;
  margin-bottom: 0.7rem;
}
.brand-slide-wrapper p:first-child::before {
  content: '';
  height: 0.5rem;
  bottom: 0.15rem;
  background-color: #e3f7ff;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
}
.brand-slide-wrapper .slide-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  align-items: stretch;
  box-shadow: 0px 0px 0.4rem rgba(0, 0, 0, 0.2);
  border-radius: 0.4rem;
  cursor: pointer;
}
.brand-slide-wrapper .img-box {
  margin: 0;
  height: 6rem;
  overflow: hidden;
}
.brand-slide-wrapper .slide-box p {
  background-color: #ffffff;
  height: 2rem;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 0.8rem;
}
.brand-slide-wrapper > p:last-child {
  color: #4c4d4c;
  margin: 0.7rem 0 0;
}
.ads-banner-wrap {
  background: none;
}

/* 팝업 */
/* .popup-container {
  font-family: 'LeeSeoyun';
  width: 19.3rem;
  border: 3px solid black;
  padding: 0.9rem;
  background: white;
  border-radius: 1rem;
  border-bottom: 10px solid black !important;
} */

.popup-main-text {
  font-size: 1.2rem;
  text-align: center;
  color: black;
  line-height: 0.5;
}

.colored-text:before {
  content: '';
  background-color: #ffe91f;
  height: 0.7rem;
  position: absolute;
  width: 50%;
  left: 0;
  z-index: -1;
  bottom: 0.3rem;
  margin: auto;
  right: 0;
}

.popup-btn-wrapper {
  text-align: center;
  margin: 0.5rem auto 1rem;
}

/* .popup-btn {
  display: inline-block;
  width: 100%;
  line-height: 3.5rem;
  border-radius: 3rem;
  color: black;
  background-color: #ffe91f;
  height: 3.5rem;
  font-family: 'BMEULJIRO';
  font-size: 1.4rem;
  border: 3px solid #000000;
  box-shadow: 0px 5px 0px #000000;
} */

.popup-image-box {
  width: 100%;
  margin-left: 2.5%;
}
.popup-image {
  width: 95%;
}

#dim-class {
  background-image: url(https://cdn.banggooso.com/assets/images/game102/coupang-modal-back.png);
  background-position-y: bottom;
  background-size: contain;
  background-repeat: no-repeat;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* #dim-class>div {
  transform: translate(-50%, 20%) !important;
} */

.app.game-wrapper.hide-contents {
  height: 36rem !important;
}