/* 공통 */
:root {
  --game-167-color: #38c2fd;
  --game-167-sub-color: #61ff7a;
  --game-167-2nd-color: #fcff6a;
  --game-167-result-title-color: #3ac2ed;
  --game-167-font: 'Pretendard', sans-serif;
  --game-167-big-size: 1.3rem;
  --game-167-super-big-size: 2.5rem;
}
.game-btn {
  font-family: var(--game-167-font), sans-serif !important;
  background-color: var(--game-167-color);
  font-size: var(--game-167-big-size);
  color: #ffffff;
  border: 1px solid #000000;
  box-shadow: 0 5px #000000;
  border-radius: 35px;
  line-height: 3rem;
}
.game-wrapper .game-title {
  font-family: var(--game-167-font), sans-serif !important;
  background-color: var(--game-167-color) !important;
  color: #ffffff;
  font-weight: 700;
}
select {
  /*ios대응*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #000000;
}
select::-ms-expand {
  display: none; /* 화살표 없애기 for IE10, 11*/
}

/* 인트로 페이지 */
.game-intro {
  background-color: var(--game-167-color) !important;
}
.game-intro .img-box {
  position: absolute;
}
.game-intro .title-box {
  position: inherit;
  padding: 10rem 0 1.3rem;
  visibility: hidden;
}
.game-intro .game-intro-text {
  color: #000000;
}
.game-intro .game-intro-title {
  font-family: var(--game-167-font), sans-serif !important;
  font-weight: 700;
  color: #000000;
  font-size: 2.3rem;
}
.game-intro .btn-wrap {
  width: 21rem;
}
.game-intro .btn-game-start {
  background-color: var(--game-167-sub-color);
  line-height: 3rem;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  letter-spacing: -0.03em;
  color: #000000;
  box-shadow: 0 0.2rem 0 #222222 !important;
  border: 0.1rem solid #000000;
}
.game-intro .game-count {
  margin-bottom: 1.5rem;
}
.game-intro .game-count .count-label {
  color: #000000;
  font-weight: 600;
  padding: 0 2rem;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid #000000;
  border-radius: 46px;
  font-family: var(--game-167-font) !important;
}
.game-intro .game-count .count-label::before {
  display: none;
}
.game-intro .game-count .count-num {
  color: #000000;
}
.game-intro .share-sns-list {
  font-weight: 600;
}
/* 문제 페이지 */
.app .app-header.page {
  position: relative;
}
.game-wrapper .game-wrap {
  padding: 0;
  text-align: center;
}
.game-wrap .game-progress-wrapper {
  margin: 0 1.5rem;
}
.game-wrap .game-progress .game-progress-inner {
  background-color: var(--game-167-color);
}
.game-wrap .test-progress-header {
  padding: 0 1.625rem;
  height: auto;
  display: block;
  background-color: #38c2fd;
}
.game-wrap .question-title {
  font-weight: 700;
  margin: 1rem;
  font-size: 1.2rem;
}
.game-wrap .question-step .question-title {
  font-size: 1rem;
}
.game-wrap .question-step .select-box {
  margin-top: 4rem;
}
.game-wrap .question-step .background-pattern {
  top: 5rem;
}
.game-wrap .background-pattern {
  width: 6.5rem;
  height: 6.5rem;
  background: url('https://cdn.banggooso.com/assets/images/game167/background-pattern.png') center center / contain
    no-repeat;
  position: absolute;
  top: 3.5rem;
  right: 0.5rem;
}
.game-wrap .background-pattern#bg-pattern-1 {
  right: 0.5rem;
}
.game-wrap .background-pattern#bg-pattern-2 {
  top: 10.7rem;
  left: 0.5rem;
}
.game-wrap .background-pattern#bg-pattern-3 {
  top: 14.5rem;
  right: 0.3rem;
}
.game-wrap .select-box {
  margin: 3.5rem 1.5rem 1.5rem;
  border: 0.1rem solid #000000;
  border-radius: 5px;
  padding: 1.5rem 1rem 1rem 1rem;
  background-color: #ffffff;
}
.game-wrap .select-box:before {
  content: '';
  background: url('https://cdn.banggooso.com/assets/images/game167/box-top-g.png') left center / contain no-repeat;
  height: 3rem;
  width: calc(100% + 0.2rem);
  display: block;
  position: absolute;
  left: -0.1rem;
  top: -2.5rem;
}
.game-wrap #step01 .select-box:after {
  content: url('https://cdn.banggooso.com/assets/images/game167/q-mark-y.png');
  position: absolute;
  top: -1.3rem;
  right: -1rem;
  width: 3rem;
  transform: scale(0.7);
}
.game-wrap .select-box.select-sub:before {
  background: url('https://cdn.banggooso.com/assets/images/game167/box-top-y.png') left center / contain no-repeat;
}
.game-wrap #step01 .select-box.select-sub:after {
  content: url('https://cdn.banggooso.com/assets/images/game167/q-mark-g.png');
  position: absolute;
  top: -1rem;
  left: -1rem;
}
.game-wrap .select-box:after {
  content: url('https://cdn.banggooso.com/assets/images/game167/magnifying-glass-g.png');
  position: absolute;
  top: -4rem;
  right: -1.5rem;
  width: 7rem;
  transform: scale(0.7);
}
.game-wrap .select-box.select-sub:after {
  content: url('https://cdn.banggooso.com/assets/images/game167/magnifying-glass-y.png');
}
.game-wrap .select-title {
  font-size: 1.2rem;
  font-weight: 800;
}
.game-wrap .question-step .select-title {
  margin: 1rem 0 2rem;
}
.game-wrap .select-box select {
  border: 1px solid #000000;
  font-size: 1rem;
  width: 18rem;
  text-align: center;
  padding: 0.2rem;
  margin: 0.5rem;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none; /* 화살표 없애기 공통*/
  background: url('https://cdn.banggooso.com/assets/images/game167/select-arrow.png') no-repeat calc(100% + 0.1rem)
    center/2rem;
}
.game-wrap .select-box select::-ms-expand {
  /* IE10, IE11*/
  display: none; /*숨겨진 화살표의 영역유지 X */
}
.game-wrap .select-box select:invalid {
  color: #bfbfbf;
  background-color: red;
}
.game-wrap .select-box .select-btn {
  border-radius: 35px;
  border: 1px solid #000000;
  margin: 0.5rem 3rem;
  font-weight: 700;
  line-height: 1.5rem;
  background: var(--game-167-sub-color) url('https://cdn.banggooso.com/assets/images/game167/select-btn-arrow.png')
    no-repeat 95% center / 0.5rem;
  cursor: pointer;
  padding: 0 1.2rem;
  font-size: 0.9rem;
}
.game-wrap .select-box.select-sub .select-btn {
  background-color: var(--game-167-2nd-color);
}
.game-wrap .select-box .select-area > a {
  display: block;
  border-radius: 50px;
  border: 1px solid #000000;
  padding: 1rem;
  margin: 1rem;
}
.game-wrap .select-box .select-area > a:active {
  background-color: var(--game-167-sub-color);
}
.game-wrap .select-box.select-sub .select-area > a:active {
  background-color: var(--game-167-2nd-color);
}
.game-wrap .type-box {
  background: url('https://cdn.banggooso.com/assets/images/game167/type-box-g.png') center center / contain no-repeat;
  height: 16rem;
  padding-top: 6rem;
  margin: 1rem 0 2rem;
}
.game-wrap .select-sub .type-box {
  background: url('https://cdn.banggooso.com/assets/images/game167/type-box-y.png') center center / contain no-repeat;
}
.game-wrap .type-box .select-result {
  font-size: 3rem;
  font-weight: 900;
}
.game-wrap .get-type-btn {
  border-radius: 35px;
  border: 1px solid #000000;
  margin: 0.5rem 3rem;
  font-weight: 700;
  line-height: 1.5rem;
  background: var(--game-167-2nd-color);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.5rem;
}
.game-wrap .select-sub .get-type-btn {
  background-color: var(--game-167-sub-color);
}
.game-wrap .game-btn.submit-btn {
  margin: 0 3rem;
  height: 3rem;
  line-height: 3rem;
  border: none;
  box-shadow: none;
  background-color: #d8d8d8;
}
.game-wrap .game-btn.submit-btn.valid {
  background-color: var(--game-167-color);
  cursor: pointer;
}
/* 결과 페이지 */
.game-result #result-title {
  font-family: var(--game-167-font) !important;
  font-size: var(--game-167-big-size);
  letter-spacing: 0;
  margin: 0;
  padding: 6rem 0 4rem;
  background: url('https://cdn.banggooso.com/assets/images/game167/result-box.png') left center / 108% no-repeat;
}
.game-result #result-title h2 {
  color: var(--game-167-result-title-color) !important;
  font-size: inherit !important;
  font-family: inherit !important;
}
.game-result #result-title h1 {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: 900;
}
.game-result #result-title h1 p:nth-child(2) {
  font-size: var(--game-167-super-big-size);
}
.game-result #result-title .img-box {
  width: 14rem;
  margin: auto;
}
.game-result #result-title .img-box > img {
  border: 0.1rem solid #000000;
  border-radius: 5px;
}
.game-result #result-title .thumb-img-text {
  font-size: 0.85rem;
  color: #9b9b9b;
  margin-top: 0.5rem;
  letter-spacing: -0.022em;
}
.game-result #result-title .thumb-img-text.hidden-text {
  visibility: hidden;
}
.game-result .result-container .result-desc-title {
  text-align: center;
  font-weight: 600;
  position: relative;
  top: -1rem;
}
.game-result .result-container .result-desc-title p:nth-child(3) {
  font-weight: 700;
  font-size: 1.2rem;
  border: 1px solid #000000;
  border-radius: 35px;
  width: 9rem;
  margin: auto;
  background-color: #ff7e7e;
  line-height: 2.5rem;
  position: relative;
  top: -1rem;
}
.game-result .result-container .result-desc-title p:nth-child(3):before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid #000000;
  background: #ffffff;
  border-radius: 35px;
}
.game-result .result-container .test-result {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  position: relative;
  top: -1rem;
}
.game-result .result-container .test-result p {
  display: inline-block;
}
.game-result .result-container .test-result p::before {
  content: '';
  height: 0.5rem;
  bottom: 0.15rem;
  background-color: #e1efff;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
}

.game-result .result-text-container h5 {
  position: absolute;
  top: -1.7rem;
  left: 2rem;
  width: 12rem;
  font-weight: 900;
  font-size: 1.1rem;
  text-align: center;
}
.game-result .result-text-container {
  padding: 1rem 0;
}
.game-result .result-text-container.colored-background {
  padding: 1rem 0 3rem;
}
.game-result .result-text-container:before {
  content: '';
  position: absolute;
  top: -2rem;
  background: url('https://cdn.banggooso.com/assets/images/game167/result-top-w.png') left top / contain no-repeat;
  height: 3rem;
  width: 100%;
}
.game-result .result-text-container.colored-background {
  background-color: #e1efff;
  margin-top: 3rem;
}
.game-result .result-text-container.colored-background:before {
  background: url('https://cdn.banggooso.com/assets/images/game167/result-top-b.png') left top / contain no-repeat;
}
.game-result .result-box,
.game-result .event-box {
  border: 0.1rem solid #000000;
  box-shadow: 0 5px #000000;
  margin: 4rem 1.15rem 2rem !important;
  padding: 1rem;
  text-align: left;
  font-size: 0.85rem;
  background-color: #ffffff;
}
.game-result .result-box .result-box-sub {
  position: absolute;
  top: -1.8rem;
  font-weight: 900;
  font-size: 1.1rem;
  width: 9rem;
  text-align: center;
  left: 0.5rem;
}
.game-result .result-box .result-box-sub.right-align {
  right: 0.5rem;
  left: auto;
}
.game-result .result-box:after {
  content: '';
  background: url('https://cdn.banggooso.com/assets/images/game167/bulb-y.png') center center / contain no-repeat;
  position: absolute;
  top: -3.5rem;
  right: 8.3rem;
  width: 4rem;
  transform: scale(0.7);
  height: 4rem;
}
.game-result .result-box.select-sub:after {
  background: url('https://cdn.banggooso.com/assets/images/game167/bulb-g.png') center center / contain no-repeat;
}
.game-result .colored-background .result-box:after {
  content: '';
  background: url('https://cdn.banggooso.com/assets/images/game167/sun.png') center center / contain no-repeat;
  top: -3.5rem;
  right: 0rem;
  width: 5rem;
  height: 5rem;
}
.game-result .colored-background .result-box.select-sub:after {
  background: url('https://cdn.banggooso.com/assets/images/game167/cursor.png') center center / contain no-repeat;
  width: 2.5rem;
  left: 9.5rem;
  top: -4rem;
}
.game-result .result-box:before {
  content: '';
  background: url('https://cdn.banggooso.com/assets/images/game167/box-top-gwr.png') left center / contain no-repeat;
  height: 3rem;
  width: calc(100% + 0.2rem);
  display: block;
  position: absolute;
  left: -0.1rem;
  top: -2.5rem;
}
.game-result .result-box.select-sub:before {
  background: url('https://cdn.banggooso.com/assets/images/game167/box-top-ywr.png') left center / contain no-repeat;
}
.game-result .colored-background .result-box:before {
  background: url('https://cdn.banggooso.com/assets/images/game167/box-top-gw.png') left center / contain no-repeat;
}
.game-result .colored-background .result-box.select-sub:before {
  background: url('https://cdn.banggooso.com/assets/images/game167/box-top-yw.png') left center / contain no-repeat;
}
.game-result .result-box .result-bot-text .mark {
  background-color: #000000;
}
.game-result .result-box .result-bot-text .result-box-title {
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 900;
}
.game-result .result-box .result-bot-text .result-box-title:not(:first-child) {
  margin-top: 1rem;
}
.game-result .result-text-container:not(.colored-background) .result-bot-text.blur-effect {
  filter: blur(8px);
  -webkit-filter: blur(8px);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.game-result .result-text-container .result-box .blur-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  text-align: center;
  width: 100%;
}
.game-result .result-text-container .result-box .blur-message .brand-btn {
  background-color: var(--game-167-2nd-color);
  border: 1px solid #000000;
  box-shadow: 0 5px #000000;
  border-radius: 35px;
  margin: 1rem auto 0;
  padding: 0.6rem;
  font-size: 0.95rem;
  cursor: pointer;
  width: 10rem;
}
.game-result .result-text-container .result-box.select-sub .blur-message .brand-btn {
  background-color: var(--game-167-sub-color);
}
.game-result .result-container .share-sns-list {
  margin: 0;
  padding: 1rem 0 2rem;
}
.game-result .result-container .share-sns-list .list-title {
  margin-bottom: 0.5rem;
}
.game-result .share-sns-list .list-title span {
  font-weight: 900;
}
.share-sns-list .btn-share.kakao {
  background-image: url('https://cdn.banggooso.com/assets/images/game167/btn-share-kakao.png');
}
.share-sns-list .btn-share.instagram {
  background-image: url('https://cdn.banggooso.com/assets/images/game167/btn-share-instagram.png');
}
.share-sns-list .btn-share.facebook {
  background-image: url('https://cdn.banggooso.com/assets/images/game167/btn-share-facebook.png');
}
.share-sns-list .btn-share.twitter {
  background-image: url('https://cdn.banggooso.com/assets/images/game167/btn-share-twitter.png');
}
.share-sns-list .btn-share.link-copy {
  background-image: url('https://cdn.banggooso.com/assets/images/game167/btn-share-link.png');
}
.game-result .game-btn-wrapper {
  width: 21rem;
  margin: 0 auto;
  padding-bottom: 5rem;
}
.game-result .btn_retest a {
  background-color: var(--game-167-2nd-color);
  background-image: url('https://cdn.banggooso.com/assets/images/common/re-test-b.png');
  background-position: 69% center;
  background-size: 1rem;
  color: #000000;
  font-weight: 900;
  line-height: 2.5rem;
  border: 0.1rem solid #000000;
  box-shadow: 0 5px #000000;
}
.game-result .brand-event-wrap {
  padding-bottom: 5rem;
}
.game-result .event-box {
  text-align: center;
  padding: 2rem 1rem;
  border-radius: 0.3125rem;
}
.game-result .event-box:before {
  content: '[EVENT]';
  background: url('https://cdn.banggooso.com/assets/images/game167/event-box-top.png') left center / contain no-repeat;
  height: 3rem;
  width: calc(100% + 0.2rem);
  display: block;
  position: absolute;
  left: -0.1rem;
  top: -2.5rem;
  text-align: center;
  line-height: 3rem;
  font-size: 1.2rem;
  font-weight: 900;
}
.game-result .event-box.event-prev {
  font-size: 1rem;
}
.game-result .event-box .event-notice {
  font-size: 1.5rem;
  font-weight: 900;
}
.game-result .event-box .brand-title {
  font-size: 1.1rem;
}
.game-result .event-box .brand-title .underline-y {
  font-weight: 900;
}
.game-result .event-box .underline-y {
  display: inline-block;
}
.game-result .event-box .underline-y:before {
  content: '';
  height: 0.5rem;
  bottom: 0.15rem;
  background-color: var(--game-167-2nd-color);
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
}
.game-result .event-box .brand-sub {
  border: 1px solid #000000;
  border-radius: 35px;
  width: 8rem;
  margin: auto;
  font-weight: 900;
}
.game-result .event-box .brand-context {
  margin: 3rem 0 2rem;
}
.game-result .event-box .brand-context:before {
  content: '';
  width: 100%;
  height: 0.1rem;
  background-color: #000000;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -1.5rem;
}
.game-result .event-box .brand-context > li:not(:first-child) {
  margin-top: 2rem;
}
.game-result .event-box .brand-context > li .brand-gift {
  margin: 1rem 0 2rem;
}
.game-result .event-box .brand-context > li .brand-gift:before {
  content: '';
  width: 5%;
  height: 0.1rem;
  background-color: #000000;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -0.5rem;
}
.game-result .event-box .brand-context > li .brand-gift .bold {
  font-weight: 900;
  font-size: 1.1rem;
}
.game-result .event-box .brand-context .brand-sub {
  margin: 0.2rem auto;
}
.game-result .event-box .game-btn {
  background-color: var(--game-167-2nd-color);
  color: #000000;
  font-weight: 900;
  width: 100%;
  cursor: pointer;
}

.game-result .recommend-list:before {
  background-color: #38c2fd !important;
}