/* 공통 */
@font-face {
  font-family: 'ONE-Mobile';
  src: url('https://cdn.banggooso.com/assets/fonts/ONE-Mobile-Regular.woff2') format('woff2'),
    url('https://cdn.banggooso.com/assets/fonts/ONE-Mobile-Regular.otf') format('otf'),
    url('https://cdn.banggooso.com/assets/fonts/ONE-Mobile-Regular.ttf') format('ttf');
  font-weight: 500;
}
@font-face {
  font-family: 'ONE-Mobile';
  src: url('https://cdn.banggooso.com/assets/fonts/ONE-Mobile-Bold.woff2') format('woff2'),
    url('https://cdn.banggooso.com/assets/fonts/ONE-Mobile-Bold.otf') format('otf'),
    url('https://cdn.banggooso.com/assets/fonts/ONE-Mobile-Bold.ttf') format('ttf');
  font-weight: 700;
}

:root {
  --game-218-color: #c8c1b3;
  --game-218-sub-color: #c8c1b3;
  --game-218-text-box-color: #0e3642;
  --game-218-font: 'ONE-Mobile';
  --game-218-big-size: 1.2rem;
  --game-218-super-big-size: 1.7rem;
}

body {
  font-family: 'Pretendard', 'RixGulim';
  color: #383838;
}
img {
  image-rendering: -moz-crisp-edges; /* firefox */
  image-rendering: -o-crisp-edges; /* opera */
  image-rendering: -webkit-optimize-contrast; /* chrome(비표준) */
  image-rendering: crisp-edges;
}
.game-wrapper {
  letter-spacing: -0.05rem;
}

#step02 {
  background-color: #0e3642;
}
.btn-wrap {
  padding: 1.3rem;
}
#step02 .btn-wrap {
  position: fixed;
  width: 100%;
  bottom: 0;
}
#step05 .btn-wrap {
  margin-top: 0.5rem;
}
.btn-wrap .game-btn {
  padding: 1rem;
  border-radius: 4.5rem;
  color: #ffffff;
  font-size: 1.1rem;
  background: #20c4f4;
  font-weight: 600;
  cursor: pointer;
}
.btn-wrap .game-btn.inactive {
  cursor: default;
  background-color: #dfdfdf;
}
#step03 .btn-wrap {
  width: 100%;
  position: sticky;
  bottom: 0;
  padding: 1rem 1.3rem;
  background: #ffffff;
}
#step03 .btn-wrap .game-btn {
  cursor: default;
  background-color: #dfdfdf;
}
#step03 .btn-wrap .game-btn.active {
  cursor: pointer;
  background-color: #20c4f4;
}

.game-wrapper .game-wrap {
  font-size: 0.9rem;
}

/* 헤더 */
.game-wrapper .app-header,
.game-wrapper .app-header.page {
  background-color: #ffffff;
  border: none;
}

.game-wrapper .app-header .app-logo {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/header/logo.png');
  width: 20rem;
  background-size: auto 60%;
}

/* 인트로 */
.game-intro .intro-wrapper {
  background: url('https://cdn.banggooso.com/assets/images/game218/intro/bg.png') no-repeat top center / 100% auto;
}
.game-intro .intro-swiper-wrap {
  padding-top: 10.5rem;
  margin-bottom: 1.5rem;
}
.game-intro .intro-swiper-wrap .swiper-slide {
  width: 9.6rem;
  margin: 0 0.8rem;
  text-align: center;
}
.game-intro .intro-swiper-wrap .swiper-slide-active {
  transform: scale(1.12);
  transform-origin: bottom;
}
.game-intro .intro-swiper-wrap img {
  width: inherit;
  box-shadow: 0px 0.2rem 0.8rem 0px #0e5bc94d;
  border-radius: 0.5rem;
  transition: transform 0.3s;
}
.game-intro .intro-swiper-wrap .swiper-slide p {
  background-color: #0e36424d;
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  margin-top: 0.8rem;
  padding: 0.2rem 0.3rem;
  border-radius: 0.2rem;
  display: inline-block;
  letter-spacing: 0.002rem;
}
.game-intro .intro-swiper-wrap .swiper-slide:not(.swiper-slide-active) p {
  visibility: hidden;
}

.game-intro .user-nickname {
  margin: 1rem;
}

.game-intro .user-nickname input {
  width: 13rem;
  height: 2.5rem;
  text-align: center;
  font-size: 1rem;
  font-family: 'Pretendard';
  display: block;
  margin: 0 auto;
  border-radius: 0.3rem;
}
.game-intro .user-nickname input::placeholder {
  color: #d0d0d0;
}

.game-intro .btn-wrap {
  width: inherit;
  text-align: center;
  margin-top: 0;
  padding: 0;
}

.game-intro .btn-wrap .btn-game-start {
  width: 17.5rem;
  height: 3.5rem;
  border-radius: 4rem;
  border: 0;
  box-shadow: none;
  font-family: 'ONE-Mobile';
  font-size: 1.2rem;
  padding: 0;
  line-height: 3.5rem;
  font-weight: 700;
}

.game-intro hr {
  height: 1.3px;
  background-color: #e8e8e8;
  width: 21rem;
  margin: 1.5rem auto;
}

.game-intro .game-count .count-label {
  font-family: 'Pretendard';
  color: #383838;
  font-weight: 700;
}
.game-intro .game-count .count-label:before {
  background-color: transparent;
}
.game-intro .game-count .count-num {
  font-family: Pretendard;
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
  color: #383838;
}
.share-sns-list .list-title {
  color: #383838;
  font-family: Pretendard;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.6rem;
}
.share-sns-list .list-title .countBox .countNumber {
  font-weight: 500;
}
.share-sns-list .btn-share.kakao {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/icon/btn-share-kakao.png');
}
.share-sns-list .btn-share.twitter {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/icon/btn-share-twitter.png');
}
.share-sns-list .btn-share.link-copy {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/icon/btn-share-linkcopy.png');
}

/* 문제 페이지 */
.game-wrapper .game-wrap {
  padding: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.game-wrapper .full-page {
  position: relative;
  padding-top: 2.48rem;
  text-align: center;
}
#step02.full-page {
  min-height: 100%;
}

.game-wrapper .full-page .text-box {
  font-family: var(--game-218-font);
  border-radius: 0.5rem;
  border: 2px;
  padding: 0.7rem 4rem;
  word-break: keep-all;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.05rem;
  color: #0e3642;
  display: inline-block;
  margin: 1rem auto 0;
}
.game-wrapper .full-page#step02 .text-box {
  font-weight: 600;
  font-size: 1.5rem;
  color: #ffffff;
  margin-top: 2.5rem;
}
.game-wrapper .full-page#step02 .text-box p {
  line-height: 2rem;
}
.colored-text {
  color: #20c4f4;
}
.question-wrapper .question-box {
  text-align: center;
  padding: calc(2rem + 1.3rem) 2rem 2.5rem;
}
.question-wrapper .question-box:first-child {
  padding-top: 1rem;
}

.question-wrapper .question-box:not(:first-child)::before {
  content: '';
  height: 0.9rem;
  background: #f3f3f3;
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;
}

.question-wrapper .question-title {
  font-size: 1.2rem;
  font-family: 'ONE-Mobile';
  font-weight: 700;
}

.question-wrapper .question-title .colored-text {
  margin-right: 0.5rem;
}

.question-wrapper .question-image {
  width: 4.2rem;
  height: 4.2rem;
  margin: 0.5rem auto;
  background-size: 100%;
}

.question-wrapper .question-1 .question-image {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question01/rock-scissors-paper.gif');
}
.question-wrapper .question-1 .question-image.rock {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question01/rock.png');
}
.question-wrapper .question-1 .question-image.scissors {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question01/scissors.png');
}
.question-wrapper .question-1 .question-image.paper {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question01/paper.png');
}
.question-wrapper .question-2 .question-image {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question02/filp-coin.gif');
}
.question-wrapper .question-2 .question-image.head {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question02/head.png');
}
.question-wrapper .question-2 .question-image.tail {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question02/tail.png');
}
.question-wrapper .question-3 .question-image {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question03/odd-even.gif');
}
.question-wrapper .question-3 .question-image.odd {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question03/odd.png');
}
.question-wrapper .question-3 .question-image.even {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question03/even.png');
}
.question-wrapper .question-4 .question-image {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question04/roll-dice.gif');
}
.question-wrapper .question-4 .question-image.one {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question04/one.png');
}
.question-wrapper .question-4 .question-image.two {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question04/two.png');
}
.question-wrapper .question-4 .question-image.three {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question04/three.png');
}
.question-wrapper .question-4 .question-image.four {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question04/four.png');
}
.question-wrapper .question-4 .question-image.five {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question04/five.png');
}
.question-wrapper .question-4 .question-image.six {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question04/six.png');
}
.question-wrapper .question-5 .question-image {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question05/cham-cham-cham.gif');
}
.question-wrapper .question-5 .question-image.left {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question05/left.png');
}
.question-wrapper .question-5 .question-image.center {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question05/center.png');
}
.question-wrapper .question-5 .question-image.right {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/questions/question05/right.png');
}
.question-wrapper .result-text {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  bottom: 1.5rem;
  font-family: 'ONE-Mobile';
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  color: #cbcbcb;
}
.question-wrapper .result-text.active {
  color: #20c4f4;
}

.selector-container .category-selector-wrapper,
.question-wrapper .answer-list {
  display: flex;
  justify-content: center;
  align-items: center;
}
.selector-container .category-selector-wrapper {
  justify-content: space-between;
  margin: 0 1.3rem 0.4rem;
}

.question-wrapper .answer-list .answer-box {
  flex-basis: 6rem;
  background: #f3f3f3;
  border-radius: 3rem;
  margin: 0.3rem;
  padding: 0.4rem;
  font-size: 1rem;
}
.selector-container .category-selector-wrapper .category-selector {
  background: #f3f3f3;
  border-radius: 3rem;
  margin: 0.3rem 0;
  padding: 0.3rem;
  font-size: 1rem;
  width: 10.2rem;
}

.selector-container .category-selector-wrapper .category-selector.active,
.question-wrapper .answer-list .answer-box.active,
.question-wrapper .answer-list .answer-box:active,
.question-wrapper .answer-list .answer-box:focus {
  background: #20c4f4;
  color: #ffffff;
}

.keyword-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 1.1rem 0rem 1rem;
}

.keyword-wrapper .keyword-box {
  padding: 0.9rem 0.7rem;
  border-radius: 2.3rem;
  border: 2.5px solid #383838;
  width: 6.9rem;
  font-weight: 600;
  margin: 0.3rem;
  box-shadow: 0 0.15rem #383838;
  cursor: pointer;
}
.keyword-wrapper .keyword-box.active {
  background: #383838;
  color: #ffffff;
}
.keyword-wrapper .keyword-box:nth-child(1)::after {
  content: '❤️';
  margin-left: 0.2rem;
}
.keyword-wrapper .keyword-box:nth-child(2)::after {
  content: '💰';
  margin-left: 0.2rem;
}
.keyword-wrapper .keyword-box:nth-child(3)::after {
  content: '🛏️';
  margin-left: 0.2rem;
}
.keyword-wrapper .keyword-box:nth-child(4)::after {
  content: '✏️';
  margin-left: 0.2rem;
}
.keyword-wrapper .keyword-box:nth-child(5)::after {
  content: '💼';
  margin-left: 0.2rem;
}
.keyword-wrapper .keyword-box:nth-child(6)::after {
  content: '💌';
  margin-left: 0.2rem;
}

.phrase-wrapper {
  margin-top: 1.2rem;
  padding-bottom: 6rem;
}

.phrase-wrapper .phrase-box {
  background-color: #f3f3f3;
  border-radius: 3rem;
  margin: 0.6rem 1rem;
  cursor: pointer;
  font-weight: 500;
  height: 2.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phrase-wrapper .phrase-box.active {
  background-color: #20c4f4;
  color: #ffffff;
}
.phrase-wrapper .phrase-box.input-box {
  border: 2px solid #d3d3d3;
  background-color: #ffffff;
  border-radius: 3rem;
  padding: 0.7rem;
  margin: 0.6rem 1rem;
}
.phrase-wrapper .phrase-box.input-box.active {
  border-color: #20c4f4;
}
.phrase-wrapper .phrase-box.input-box input {
  background-color: transparent;
  border-width: 0;
  outline: none;
  text-align: center;
  font-size: inherit;
  padding: 0;
  margin: 0;
  height: 1.2rem;
}

.img-wrap {
  margin: 2rem;
}

.img-wrap img {
  width: 100%;
  justify-content: center;
  align-items: center;
}
.img-wrap.letter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0;
}

.game-wrap .capture-wrap {
  margin: 2rem 0;
  width: 14.5rem;
}
#step05 .capture-wrap {
  margin: 1.5rem auto 1.5rem;
}

.capture-wrap .swiper-container {
  overflow: visible;
}

.capture-wrap .swiper-container .swiper-slide {
  width: min-content;
}
.capture-wrap .swiper-container .swiper-slide .img-wrapper {
  width: 14rem;
  /* overflow: hidden; */
  display: inline-block;
  box-sizing: content-box;
  transition: transform 0.3s, opacity 0.3s;
  transform: scale(0.8);
  opacity: 0.3;
}
.capture-wrap .swiper-container .swiper-slide-active .img-wrapper {
  opacity: 1;
  transform: scale(1);
}
.capture-wrap .swiper-container .swiper-slide .img-wrapper img {
  border-radius: 1rem;
  padding: 3px;
}
.capture-wrap .swiper-container .swiper-slide .img-wrapper .border {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  border: 4px solid #20c4f4;
  border-radius: 1rem;
}

.below-arrow {
  width: 0.5rem;
  height: 0.5rem;
  border-width: 0 2px 2px 0;
  border-color: #383838;
  margin: 0 auto;
  rotate: 45deg;
  border-style: solid;
}
#step01 .below-arrow {
  border-color: #d8d8d8;
  width: 0.65rem;
  height: 0.65rem;
  position: relative;
  top: -0.1rem;
}

#step04 .capture-wrap .swiper-container .swiper-slide-active .img-wrapper::after {
  content: '';
  background-image: url('https://cdn.banggooso.com/assets/images/game218/icon/check.png');
  background-position: center;
  background-color: #20c4f4;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  display: block;
  top: 1rem;
  left: 1rem;
  border-radius: 1rem;
}

.capture-wrap .swiper-container .img-wrapper img {
  width: inherit;
}
#step05 .capture-wrap .swiper-container .img-wrapper img:first-child,
.game-result .capture-wrap .swiper-container .img-wrapper img:first-child {
  position: absolute;
}

p.input-text {
  position: absolute;
  font-family: Pretendard;
  color: #383838;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9rem;
  font-weight: 700;
  font-size: 1.2rem;
  display: inline-block;
  white-space: nowrap;
}
#input-text-270 {
  color: #ffffff;
  padding-left: 12%;
  top: 3%;
}
#input-text-271 {
  top: 68%;
  font-size: 0.9rem;
  font-weight: 500;
}
#input-text-272 {
  top: 47.6%;
  font-size: 0.8rem;
  font-weight: 600;
}
#input-text-273 {
  top: 42.5%;
  font-weight: 500;
}
#input-text-274 {
  top: 87.5%;
  color: #b15447;
  font-size: 0.8rem;
}
#input-text-275 {
  top: 30.5%;
  font-size: 0.65rem;
  font-weight: 500;
  left: 67%;
}
#modal .input-text {
  font-size: 1.5rem;
}
#modal #input-text-271 {
  font-size: 1.2rem;
}
#modal #input-text-272,
#modal #input-text-274 {
  font-size: 1.15rem;
}
#modal #input-text-275 {
  font-size: 0.95rem;
}
.game-result #input-text-270 {
  top: 0.5rem;
}
.game-result #input-text-271 {
  top: 13.8rem;
}
.game-result #input-text-272 {
  top: 9.72rem;
}
.game-result #input-text-273 {
  top: 8.7rem;
}
.game-result #input-text-274 {
  top: 17.85rem;
}
.game-result #input-text-275 {
  top: 6.2rem;
}

.capture-wrap .swiper-pagination {
  position: relative;
  bottom: var(--swiper-pagination-bottom, -2rem) !important;
}

.capture-wrap .swiper-slide > p {
  color: #20c4f4;
  font-family: 'ONE-Mobile';
  font-weight: 700;
  font-size: 1rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1.8rem;
}
.capture-wrap .swiper-slide:not(.swiper-slide-active) > p {
  display: none;
}

.swiper-container .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #20c4f4;
}

i.clover {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/icon/clover-white.png');
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: 0.1rem;
  margin: 0 0.5rem;
}

.game-wrap .capture-wrap {
  margin: 2rem auto;
}
#step04 .capture-wrap {
  margin: 1.5rem auto;
}

#step05 .capture-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #7f7f7f;
  width: 17rem;
  height: 0.4rem;
  border-radius: 0px 0px 0.3rem 0.3rem;
}
#step05 .capture-wrap::after {
  content: '';
  position: absolute;
  top: -0.4rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #9a9a9a;
  width: 17rem;
  height: 0.4rem;
  border-radius: 0.3rem 0.3rem 0 0;
}
#step05 .text-box {
  font-family: Pretendard;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 0.8rem;
  letter-spacing: -0.005%;
  text-align: center;
  width: 212.59px;
  height: 33.84px;
  top: 77.34px;
  left: 143.71px;
  gap: 0px;
  border-radius: 2.5rem;
  opacity: 0px;
  background-color: #f3f3f3;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#step01 .text-box p {
  line-height: 1.8rem;
}
#step03 .text-box p,
#step04 .text-box p {
  line-height: 1.3rem;
}

.capture-wrap .avatar-wrap {
  margin: auto;
  width: 14rem;
}

.full-page .capture-wrap .avatar-wrap::before {
  content: '';
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 64.8%, rgba(0, 0, 0, 0.7) 198.97%);
  rotate: 180deg;
  position: absolute;
  height: 2rem;
  width: 100%;
}

.capture-wrap .avatar-wrap .img-object:nth-child(n + 2) {
  position: absolute;
  top: 0;
  left: 0;
}

.selector-container .item-selector-wrapper .item-selector {
  width: 7rem;
  height: 7rem;
  margin: 0.25rem;
}
.selector-container .item-selector-wrapper .item-selector:first-child {
  margin-left: 1.3rem;
}
.selector-container .item-selector-wrapper .item-selector > p {
  font-weight: 500;
}

.selector-container .item-selector-wrapper .item-selector > .img-wrap {
  margin: 0 0 0.15rem;
}
.selector-container .item-selector-wrapper .item-selector > .img-wrap img {
  border: 2.5px solid #0e3642;
  border-radius: 0.7rem;
}

.selector-container .item-selector-wrapper .item-selector.active {
  color: #20c4f4;
}
.selector-container .item-selector-wrapper .item-selector.active > .img-wrap img {
  border-color: #20c4f4;
}

.selector-container .item-selector-wrapper .item-selector.active > .img-wrap::after {
  content: '';
  background-image: url('https://cdn.banggooso.com/assets/images/game218/icon/check.png');
  background-position: center;
  background-color: #20c4f4;
  width: 1rem;
  height: 1rem;
  position: absolute;
  display: block;
  top: 0.4rem;
  left: 0.4rem;
  border-radius: 1rem;
  background-size: 1rem;
}

button.zoom-in,
button.zoom-out {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 100%;
  border: 2px solid #e5e5e5;
  background: url('https://cdn.banggooso.com/assets/images/game218/icon/zoom-in.png') no-repeat 52% center #ffffff;
  position: absolute;
  right: 0.5rem;
  transform: translateY(-135%);
  cursor: pointer;
  background-size: 52% 52%;
}
button.zoom-in {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/icon/zoom-in.png');
  top: 0;
}
button.zoom-out {
  background-image: url('https://cdn.banggooso.com/assets/images/game218/icon/zoom-out.png');
  bottom: 0rem;
  right: 1.15rem;
}

#modal .modal-bg {
  background-color: #ffffff;
  cursor: default;
}
#modal .capture-wrap {
  width: 20rem;
  overflow: hidden;
  border-radius: 1.2rem;
  margin: 0;
}
#modal .img-wrap {
  margin: 0;
  width: 100%;
}
#modal .img-wrap > img:nth-child(n + 2) {
  position: absolute;
  top: 0;
  left: 0;
}

/* 결과 페이지 */
.game-result {
  color: #383838;
  background: url('https://cdn.banggooso.com/assets/images/game218/result/bg.png') no-repeat 100%;
  background-size: 100%;
  background-position: 0 -2rem;
}

.game-result #result-title {
  padding: 1.8rem 0 0.8rem;
}

.game-result #result-title h2 {
  font-family: var(--game-218-font);
  font-weight: 700;
  font-size: 1rem;
  color: #20c4f4;
}
.game-result #result-title h1 {
  font-family: var(--game-218-font);
  font-weight: 700;
  font-size: 1.5rem;
  color: #383838;
  margin-bottom: 1.2rem;
}

.game-result .img-box {
  width: 13.2rem;
  margin: 0 auto;
}

.game-result .thumb-img-text {
  font-family: 'Pretendard';
  color: #8d8d8d;
  font-size: 0.85rem;
  margin-top: 0.7rem;
}

.game-result .result-box {
  border: 0;
  padding: 0;
  margin-top: 1rem;
}

.game-result .text-box {
  margin: 0 auto;
  background: url('https://cdn.banggooso.com/assets/images/game218/result/box.png') no-repeat 100%;
  display: flex;
  padding: 1.5rem 1rem 0;
  justify-content: center;
  height: 7rem;
  background-size: 83%;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 12px;
  background-position: center center;
}

.game-result .text-box > p:nth-child(2) {
  font-family: var(--game-218-font);
  font-size: 1.3rem;
  font-weight: 700;
}
.game-result .text-box > p.colored-text {
  font-size: 1.9rem;
}

.game-result .lucky-item-wrap {
  margin: 2rem 0 3rem;
  font-family: Pretendard;
  font-weight: 500;
  font-size: 0.9rem;
  color: #383838;
}

.game-result .lucky-item-wrap h3 {
  font-family: var(--game-218-font);
  color: 1.1rem;
  font-weight: 700;
  font-size: 1.1rem;
}

.game-result .lucky-item-wrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0.5rem 0;
}

.game-result .lucky-item-wrap ul > li {
  width: 6.8rem;
  margin: 0.7rem 0;
}
.game-result .lucky-item-wrap li > p:nth-child(1) {
  font-weight: 700;
}
.game-result .lucky-item-wrap li > p:nth-child(2) {
  background-color: #f3f3f3;
  border-radius: 1.6rem;
  padding: 0.3rem;
  margin-top: 0.2rem;
}

.game-result .lucky-item-list li:nth-child(1) > p:first-child::before,
.game-result .lucky-item-list li:nth-child(1) > p:first-child::after {
  content: '🎨';
  margin: 0 0.2rem;
}
.game-result .lucky-item-list li:nth-child(2) > p:first-child::before,
.game-result .lucky-item-list li:nth-child(2) > p:first-child::after {
  content: '🍴';
  margin: 0 0.2rem;
}
.game-result .lucky-item-list li:nth-child(3) > p:first-child::before,
.game-result .lucky-item-list li:nth-child(3) > p:first-child::after {
  content: '🗺️';
  margin: 0 0.2rem;
}
.game-result .lucky-item-list li:nth-child(4) > p:first-child::before,
.game-result .lucky-item-list li:nth-child(4) > p:first-child::after {
  content: '🔢';
  margin: 0 0.2rem;
}
.game-result .lucky-item-list li:nth-child(5) > p:first-child::before,
.game-result .lucky-item-list li:nth-child(5) > p:first-child::after {
  content: '🎁';
  margin: 0 0.2rem;
}
.game-result .lucky-item-list li:nth-child(6) > p:first-child::before,
.game-result .lucky-item-list li:nth-child(6) > p:first-child::after {
  content: '👤';
  margin: 0 0.2rem;
}
.game-result .lucky-item-list li:nth-child(7) > p:first-child::before,
.game-result .lucky-item-list li:nth-child(7) > p:first-child::after {
  content: '🧭';
  margin: 0 0.2rem;
}
.game-result .lucky-item-list li:nth-child(8) > p:first-child::before,
.game-result .lucky-item-list li:nth-child(8) > p:first-child::after {
  content: '🏃';
  margin: 0 0.2rem;
}
.game-result .lucky-item-list li:nth-child(9) > p:first-child::before,
.game-result .lucky-item-list li:nth-child(9) > p:first-child::after {
  content: '👕';
  margin: 0 0.2rem;
}

.game-result .bonus-box-before {
  display: flex;
  justify-content: space-between;
}
.game-result .bonus-box-before > .img-wrap {
  margin: 0;
  width: 8rem;
  position: relative;
  top: 1rem;
  left: -1rem;
}

.game-result .bonus-luck-wrap {
  margin: 3rem 0 1.5rem;
}

.game-result .bonus-luck-wrap .bubble {
  text-align: left;
  font-weight: 500;
  background: url('https://cdn.banggooso.com/assets/images/game218/result/bubble.png') no-repeat 100%;
  width: 13rem;
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 2.2rem;
  background-size: 100%;
}
.game-result .bonus-luck-wrap .bubble > p:first-child {
  font-size: 0.8rem;
  color: #8d8d8d;
}
.game-result .bonus-luck-wrap .bubble > p:nth-child(n + 2) {
  line-height: 1.3rem;
}

.game-result .bonus-box {
  background-color: #20c4f4;
  border-radius: 1.2rem;
  padding: 0.5rem 0;
}

.game-result .bonus-box li {
  background-color: #ffffff;
  border-radius: 0.5rem;
  text-align: left;
  padding: 0.15rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0.8rem 0.8rem 0.5rem;
}
.game-result .bonus-box li::before {
  content: '';
  background-color: #383838;
  width: 0.2rem;
  height: 0.2rem;
  display: block;
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 100%;
}
.game-result .bonus-box > p {
  color: #ffffff;
  font-size: 0.8rem;
}

.insta-event-wrap {
  margin-top: 2rem;
}
.insta-event-wrap .bubble {
  background: url('https://cdn.banggooso.com/assets/images/game218/result/bubble2.png') no-repeat center 100%;
  width: 100%;
  height: 9rem;
  padding-bottom: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-size: 100% 100%;
}
.insta-event-wrap .bubble > p:first-child {
  font-size: 0.85rem;
  color: #383838;
  margin-bottom: 0.2rem;
}
.insta-event-wrap .bubble > p:nth-child(n + 2) {
  font-family: 'ONE-Mobile';
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.9rem;
  letter-spacing: -0.5%;
  display: inline-block;
  width: max-content;
}
.insta-event-wrap .bubble > p:nth-child(n + 2)::before {
  content: '';
  background: #abecff80;
  width: 100%;
  height: 0.6rem;
  position: absolute;
  display: inline-block;
  bottom: 0.2rem;
  z-index: -1;
  padding: 0 0.5rem;
  box-sizing: content-box;
  left: 50%;
  transform: translateX(-50%);
}
.insta-event-wrap > .img-wrap {
  width: 16rem;
  text-align: center;
  margin: 0 auto;
  position: relative;
  height: 4.5rem;
  overflow: hidden;
}
.insta-event-wrap .event-box-before p:first-child {
  font-size: 0.9rem;
  letter-spacing: -3%;
}
.insta-event-wrap .event-box-before p:nth-child(2) {
  font-family: 'ONE-Mobile';
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -3%;
  font-family: 'ONE-Mobile';
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -3%;
  margin-top: 0.6rem;
  color: #20c4f4;
}
.insta-event-wrap .event-box {
  border: #f3f3f3 solid 2px;
  border-radius: 1.2rem;
  padding: 1.7rem 1rem 1.5rem;
  background: #ffffff;
  margin-bottom: 1.5rem;
}
.insta-event-wrap .event-box p {
  font-size: 0.85rem;
  line-height: 1.2rem;
  letter-spacing: -2%;
  font-weight: 500;
}
.insta-event-wrap .event-box p:nth-child(3) {
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.25rem;
  margin-bottom: 1rem;
}
.insta-event-wrap .event-box p:nth-child(4) {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6rem;
}
.insta-event-wrap .event-box .img-wrap {
  width: 12rem;
  margin: 1.5rem auto;
  border-radius: 0.5rem;
  overflow: hidden;
}
.btn-event.game-btn-wrapper {
  margin: 1.5rem auto 0;
  width: 21rem;
}
.btn-event.game-btn-wrapper.pre-btn {
  margin: 0 auto 1rem;
}
.btn-event.game-btn-wrapper .game-btn {
  background-color: #20c4f4;
  height: 3.3rem;
  border-radius: 2rem;
  box-shadow: none;
  border: none;
  background-position: 72% 52%;
  background-size: 0.9rem;
  line-height: inherit;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 1.1rem;
  color: #ffffff;
  font-weight: 600;
}

.game-result .btn_retest {
  width: auto;
  margin: 0 auto 6rem;
}
.game-result .btn_retest > a {
  background-color: #0e3642;
  width: 21rem;
  height: 3.3rem;
  border-radius: 2rem;
  box-shadow: none;
  border: none;
  background-position: 69% 51.5%;
  background-size: 0.9rem;
  line-height: inherit;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 1.1rem;
  font-weight: 700;
  padding-right: 0.9rem;
}
.game-result .recommend-list:before {
  background-color: #0e3642;
}

.game-result .result-box .right-arrow {
  width: 1.5rem;
  margin: 0 0.6rem 0 0.8rem;
}

.contents-more {
  flex-direction: column;
  background-color: transparent;
}
.contents-more .contents-main {
  display: block;
  text-align: left;
  display: block;
  margin: 1rem;
}
.contents-more .contents-logo {
  width: 6.5rem;
}
.contents-more .contents-main .sub-text {
  color: #373c3f;
  font-family: Pretendard;
  font-weight: 700;
  font-size: 1.2rem;
  text-align: left;
  margin-top: 0.3rem;
}
.contents-more .contents-list {
  padding: 0;
  border: none;
  margin: 0;
}
.contents-more .contents-list .game-btn {
  border-radius: 0;
  border: 1.33px solid #dadada;
  border-width: 1.33px 0 0 0;
  font-size: 1rem;
  padding: 1.3rem 2rem;
  margin: 0;
}
.contents-more .contents-list .game-btn::before {
  top: 50%;
  transform: translateY(-50%);
}
.game-result .recommend-list .slide-box {
  border-color: #0e3642;
}
.game-result .event-box-before > p:first-child {
  background-color: #f3f3f3;
  display: inline-block;
  width: 14rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.1rem;
  padding: 0.2rem;
  border-radius: 1.6rem;
}
.game-result .download-img-wrapper {
  box-shadow: 0px 2px 16.32px 0px #00000033;
}
.game-result #capture {
  width: 13.2rem;
  height: 20.4rem;
  overflow: hidden;
  transform: none;
}

.game-result .capture-wrap img.img-object {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

.share-sns-list .btn-share {
  background-size: contain;
}