:root {
  --stroke: 0.278vw rgba(0, 18, 80, 0.2);
}

/* .app {display: flex; justify-content: center; align-items: center; position: relative;} */
.app {display: flex; justify-content: center; align-items: center; position: relative; width: 500px; max-width: 100%; margin: 0 auto;}

.screen {position: relative; width: 100%; min-height: 100vh; margin: 0 auto; padding-top: 72px; padding-bottom: 40px;}

.wrapper {padding: 0 16px;}

/* .inner {position: relative;}
.screen .inner {min-height: calc(100vh - 40px);} */

.c1_txt {color: #44BAD1 !important;}

.fz14 {font-size: 14px !important;}
.fz16 {font-size: 16px !important;}

.fix-bot {position: absolute; bottom: 40px; left: 0; z-index: 10; width: 100%;}

.bg-blur {position: relative; z-index: 5;}
.bg-blur::after {content: ""; position: absolute; top: 0; left: 0; z-index: 5; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: saturate(100%) blur(40px);}
.bg-blur-ct {position: relative; z-index: 10;}

.ui-pop_dim {display: none; position: fixed; top: 0; left: 0; z-index: 150; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.7);}
.ui-pop {overflow-y: auto; position: fixed; top: 50%; left: 50%; z-index: 160; transform: translate(-50%, -50%); width: 420px; max-width: calc(100% - 80px); max-height: 90%; padding: 40px 24px 24px; border-radius: 12px; text-align: center; background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(100%) blur(16px);}
.alert_expl {margin-top: 12px; font-size: 20px; font-weight: 600; color: #122A34; line-height: 1.4;}
.alert-btn_close {margin-top: 24px;}

.ui-title {font-size: 26px; font-weight: 700; color: #122A34; line-height: 1.2;}

.ui-stroke {-webkit-text-stroke: var(--stroke);}

.ui-input {display: block; width: 100%; height: 48px; padding: 0 10px; border: 0; border-radius: 10px; font-family: 'BM HANNA Pro', sans-serif; font-size: 20px; color: #101010; text-align: center; background: #ffffff;}
.ui-input::placeholder {font-family: 'BM HANNA Air', sans-serif; color: #aaaaaa;}

.ui-btn {display: block; width: 100%; height: 56px; line-height: 56px; border: 0; border-radius: 10px; font-family: 'BM HANNA Pro', sans-serif; font-size: 20px; color: #ffffff; text-align: center; background: #9F70CB;}
.ui-btn:disabled {color: #A992BE; background-color: #D7CDE0;}

.ui-btn.type2 {font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 700; color: #0A1629; background: #ffffff;}


.ui-btn.active {background-color: #D0FFDE !important; color: #253322 !important;}
.ui-btn.line.active {border-color: #253322 !important;}

.ui-radio {display: none;}
.ui-radio + label {display: block; width: 100%; height: 48px; line-height: 48px; border: 0; border-radius: 8px; text-align: center; font-size: 16px; font-weight: 300; color: #fff; background-color: #A7B3C2; cursor: pointer;}
.ui-radio:checked + label {background-color: #022C5D;}

.ui-check {display: none;}
.ui-check + label {display: block; width: 100%; height: 40px; line-height: 38px; border: 1px solid #eee; border-radius: 8px; text-align: center; font-size: 16px; font-weight: 300; color: #000; background-color: #fff; cursor: pointer;}
.ui-check:checked + label {border: 2px solid #FFCE1F;}

.bottom_pad {padding-bottom: 35%;}
.bottom_lay {position: fixed; bottom: 40px; left: 0; z-index: 100; width: 100%;}

/* 알럿(Alert) 팝업 */
.ui-alert {display: none; position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);}
.ui-alert_cont {overflow: hidden; position: relative; top: 50%; left: 50%; width: calc(100% - 48px); height: auto; z-index: 210; padding: 40px 10px; transform: translate(-50%, -50%); border-radius: 20px; text-align: center; background-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}

.ui-alert_close {display: block; position: absolute; top: 12px; right: 12px; z-index: 10; width: 48px; height: 48px; border: 0; background: url('/duimi2/src/img/icon_close.png') no-repeat center/contain;}

.ui-alert_img {margin: 0 auto; font-size: 0;}
.ui-alert_img.key {width: 39px;}
.ui-alert_img.lock {width: 36px;}
.ui-alert_img.back {width: 40px;}
.ui-alert_img.wrong {width: 66px;}
.ui-alert_img.locker {width: 38px;}
.ui-alert_img.airplane {width: 70px;}
.ui-alert_img.flower {width: 100%;}

#alert_flower .ui-alert_cont {padding: 0 0 40px;}
#alert_flower .ui-alert_btn {margin: 0 auto;}

.ui-alert_txt {margin-top: 24px; font-size: 20px; font-weight: 300; color: #000; line-height: 160%;}

.ui-alert .ui-alert_btn {width: 232px; max-width: 100%; margin: 44px auto 0; font-size: 16px; font-weight: 300; color: #000;}

.ui-alert .ui-alert_btn::after {border-color: #333 !important;}

#alert_backGuide {display: block;}
#alert_backGuide .backGuide_img {display: block; position: absolute; top: 20px; left: 16px; z-index: 10; width: 40px; height: auto; font-size: 0;}

/* 화면 공통 요소 모음 */
.screen_top {position: absolute; top: 0; left: 0; z-index: 100; width: 100%; background-color: #DEDBE6;}
.screen_top .inner {display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; height: 48px;}
.screen_top .inner .lt {display: flex; flex-flow: row wrap; align-items: center; gap: 0 16px;}

.screen_top #timer {position: relative; padding-left: 28px; font-size: 0;}
.screen_top #timer::before {content: ""; display: block; position: absolute; top: 50%; left: 0; z-index: 1; width: 24px; height: 32px; margin-top: -16px; background: url('../img/ic_timer.png') no-repeat center left/contain;}
.screen_top #timer .num {display: inline-block; min-width: 40px; font-size: 16px; color: #101010; line-height: normal;}

.screen_top #clearStage {position: relative; padding-left: 36px; font-size: 0;}
.screen_top #clearStage::before {content: ""; display: block; position: absolute; top: 50%; left: 0; z-index: 1; width: 32px; height: 32px; margin-top: -16px; background: url('../img/ic_book.png') no-repeat center left/contain;}
.screen_top #clearStage .num {font-size: 16px; color: #101010; line-height: normal; vertical-align: middle;}
.screen_top #clearStage .bar {font-size: 16px; color: #101010; line-height: normal; vertical-align: middle;}
.screen_top #clearStage .tot {font-size: 16px; color: #101010; line-height: normal; vertical-align: middle;}

.screen_top #lastHint {display: flex; flex-flow: row wrap; align-items: center; gap: 0 4px;  position: relative; padding-left: 36px; font-size: 0;}
.screen_top #lastHint::before {content: ""; display: block; position: absolute; top: 50%; left: 0; z-index: 1; width: 32px; height: 32px; margin-top: -16px; background: url('../img/ic_lock.png') no-repeat center left/contain;}
.screen_top #lastHint .char {display: block; width: 24px; height: 24px; line-height: 24px; border-radius: 4px; font-size: 16px; color: #101010; text-align: center; background-color: #ffffff;}

/* > 스테이지 장소 */
.game .screen {background: #F4F4F4;}

.game_top {position: relative; width: 100%;}
.game_top .inner {position: relative;}

.placeName {display: block; position: relative; z-index: 10; width: 100%; padding: 13.5px 0; line-height: 1.156; margin-top: 46px; border-radius: 10px; font-size: 32px; color: #ffffff; text-align: center; background-color: #8258A2;}
.placeName::before {content: ""; display: block; position: absolute; top: -46px; left: 50%; z-index: -1; width: 76px; height: 92px; margin-left:-38px; border-radius: 60px; background: url('../img/ic_jelly.png') no-repeat top 8px center/52px auto, #8258A2;}
.placeName.type2 {background-color: #A690E7;}
.placeName.type2::before {background-color: #A690E7;}
.placeName.type3 {background-color: #D7CDE0; color: #8258A2;}
.placeName.type3::before {background-color: #D7CDE0;}

#qzHintView {position: absolute; top: -46px; right: 0; z-index: 10; height: 32px; line-height: 32px; padding-left: 36px; padding-right: 0; border: 0; font-size: 16px; color: #2E2827; background: url('../img/ic_hint.png') no-repeat center left/32px auto, transparent; cursor: pointer;}

.backBtn {position: absolute; top: -46px; left: 0; z-index: 10; height: 32px; line-height: 32px; padding-left: 36px; padding-right: 0; border: 0; font-size: 16px; color: #2E2827; background: url('../img/ic_arrow.png') no-repeat center left/32px auto, transparent; cursor: pointer;}

.game_ct {margin-top: 24px;}

.placeImage {overflow: hidden; display: block; width: 100%; height: 0; border-radius: 20px; padding-bottom: 73.166%;}

#stage1-screen .placeImage {background: url('../img/locaion_s1.jpg') no-repeat center/contain;}
#stage2-screen .placeImage {background: url('../img/locaion_s2.jpg') no-repeat center/contain;}
#stage3-screen .placeImage {background: url('../img/locaion_s3.jpg') no-repeat center/contain;}
#stage4-screen .placeImage {background: url('../img/locaion_s4.jpg') no-repeat center/contain;}
#stage5-screen .placeImage {background: url('../img/locaion_s5.jpg') no-repeat center/contain;}
#stage6-screen .placeImage {background: url('../img/locaion_s6.jpg') no-repeat center/contain;}

.placeExpl {margin-top: 24px; font-size: 24px; color: #2F2D3E; line-height: 1.25; text-align: center; letter-spacing: -0.48px;}

.game_bot {display: flex; flex-flow: column wrap; justify-content: flex-end; min-height: 200px; margin-top: 24px;}

.game_answer {}
.game_answer .btn:not(:first-child) {margin-top: 16px;}

/* 채팅 화면 */
.chat .screen {height: 100vh; min-height: auto; background: #F4F4F4;}
.chat .inner {position: relative;}

.chat .chat_ct {height: calc(100vh - 192px);}
.chat .chat_bot {padding-right: 10px;}

.game_hint .chatArea {margin-top: 24px;}
.game_hint .chat_ct {height: calc(100vh - 326px);}

.game_quiz .chatArea {margin-top: 24px;}
.game_quiz .chat_ct {height: calc(100vh - 390px);}

.game_quiz_correct .chatArea {margin-top: 24px;}
.game_quiz_correct .chat_ct {height: calc(100vh - 326px);}

.stage_clear_msg .chatArea {margin-top: 24px;}
.stage_clear_msg .chat_ct {height: calc(100vh - 326px);}

.chat_ct {overflow-y: auto; height: calc(100vh - 176px); -ms-overflow-style: none; scrollbar-width: none;}
.chat_box {display: flex; flex-flow: row wrap; gap: 0 8px;}
.chat_sub_box {margin-top: 8px !important;}
.chat_box:not(:first-child) {margin-top: 40px;}
.chat_img {overflow: hidden; width: 40px; height: 40px; border-radius: 50%;}
.chat_img img {width: 100%; height: 100%; object-fit: cover;}
.chat_txt {width: calc(100% - 48px);}
.chat_name {margin-bottom: 4px; font-family: 'BM HANNA Air', sans-serif; font-size: 16px; font-weight: 400; color: #000000; line-height: normal;}
.chat_sub_box .chat_img {opacity: 0; visibility: hidden;}
.chat_sub_box .chat_name {display: none;}
.chat_msgBox {display: flex; flex-direction: column; align-items: flex-start; max-width: 85%;}/*max-width: 82%;*/
.chat_tit {display: block; font-size: 16px; font-weight: 700; color: #9F70CB; line-height: 1.5;}
.chat_msg {display: inline-block; padding: 8px 12px; font-size: 16px; font-weight: 400; color: #222222; line-height: 1.5; background-color: #ffffff; border-radius: 10px; word-break: keep-all;}
.chat_noti_txt {display: block; margin-bottom: 20px; font-size: 16px; font-weight: 500; color: #2F2D3E; line-height: 1.5; text-align: center;}
.chat_noti_txt b {font-weight: 700;}
.chat_noti_box {}
.chat_noti_img {overflow: hidden; width: 100%; border-radius: 20px; font-size: 0;}
.chat_noti_img img {width: 100%; height: 100%; object-fit: cover;}

.chat_msg.chat_item_img {padding: 8px 12px;}
.chat_msg.chat_item_img img {width: 80px;}

.chat_box.left .chat_msg {border-top-left-radius: 0;}

.chat_box.right {flex-direction: row-reverse;}
.chat_box.right .chat_txt {text-align: right;}
.chat_box.right .chat_txt::after {content: ""; display: table; clear: both;}
.chat_box.right .chat_msgBox {align-items: flex-end; float: right; text-align: left;}
.chat_box.right .chat_msgBox::after {content: ""; display: table; clear: both;}
.chat_box.right .chat_msg {float: right; border-top-right-radius: 0;}

.chat_bot {margin-top: 24px;}

.chat_ct .mCSB_inside>.mCSB_container {margin-right: 10px;}
.chat_ct .mCSB_scrollTools {width: 4px;}
.chat_ct .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width: 100%; background-color: #999;}
.chat_ct .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {background-color: transparent;}

.chat_event_text {margin: 16px 0; padding: 11px 0; font-size: 14px; font-weight: 400; color: #000; line-height: 160%; text-align: center; background-color: #DDDDDD;}

.quiz_submit {margin-top: 16px;}

.wrongArea {display: none; position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 100vh; background-color: #F4F4F4; text-align: center;}
.wrongTbox {display: flex; height: calc(100vh - 97px); justify-content: center; align-items: center; padding-top: 48px;}
.wrongTbox .t1 {font-size: 28px; color: #2F2D3E; line-height: 1.3214; letter-spacing: -0.56px;}

.qzHintArea {display: none; position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 100vh; background-color: #F4F4F4; text-align: center;}
.qzHintTbox {display: flex; flex-flow: column wrap; height: calc(100vh - 97px); justify-content: center; align-items: center; padding-top: 48px;}
.qzHintTbox .t1 {margin-top: 16px; font-size: 28px; color: #2F2D3E; line-height: 1.3214; letter-spacing: -0.56px;}

.game_hint .chat_msg {color: #101010;}

#hint2_1 .chat_msgBox {max-width: 97.145%;}
#hint2_1 .chat_msg {padding: 8px;}

#hint2_2 .chat_msgBox {max-width: 97.145%;}
#hint2_2 .chat_msg {padding: 8px;}

#hint3_2 .chat_msgBox {max-width: 97.145%;}
#hint3_2 .chat_msg {padding: 8px;}

#hint4_2 .chat_msgBox {max-width: 97.145%;}
#hint4_2 .chat_msg {padding: 8px;}

#hint4_3 .chat_msgBox {max-width: 97.145%;}
#hint4_3 .chat_msg {padding: 8px;}

.s_item {font-size: 0;}


/* 스테이지 클리어 */
.stage_clear .screen {padding-top: 48px; background: #F4F4F4;}
.stage_clear .clearArea .inner {display: flex; flex-flow: column wrap; height: calc(100vh - 144px); justify-content: center; align-items: center;}
.clearArea {text-align: center;}
.clearTbox {width: 100%;}
.clearTbox .t1 {margin-top: 16px; font-size: 28px; color: #2F2D3E; line-height: 1.3214; letter-spacing: -0.56px;}

.stage_clear_msg_hint .screen {padding-top: 48px; background: #F4F4F4;}
.stage_clear_msg_hint .clearArea .inner {display: flex; flex-flow: column wrap; height: calc(100vh - 220px); justify-content: center; align-items: center;}

.ui-finalHint_char {display: block; width: 88px; height: 88px; line-height: 88px; margin: 24px auto 0; border-radius: 14px; font-size: 56px; color: #8258A2; text-align: center; background-color: #D7CDE0;}
.ui-finalHint_txt {margin-bottom: 24px; font-size: 18px; font-weight: 400; color: #2F2D3E; text-align: center; line-height: 1.444; letter-spacing: -0.36px;}

/* 로딩화면 */
.loading .screen {display: flex; flex-flow: column wrap; align-items: center; justify-content: center; width: 100%; padding-bottom: 0; background-color: rgba(93, 66, 113, 1); transition: background-color 3s ease;}
.loading .screen.fade {background-color: rgba(93, 66, 113, 0.6);}
.loading_ct {text-align: center;}
.loading_ct .ic1 {width: 56px; margin: 0 auto; font-size: 0;}
.loading_ct .t1 {font-size: 32px; color: #ffffff; line-height: 1.156;}
.loading_ct .t2 {margin: 13px 0; font-size: 28px; color: #ffffff; line-height: 1.321; letter-spacing: -0.56px;}
.loading_ct .t3 {font-size: 20px; color: #ffffff; line-height: 1.2; letter-spacing: -0.4px;}

/* 개별 스타일 */
/* > 랜딩페이지 */
#start .screen {padding-top: 0; padding-bottom: 0; background: url('../img/img_bg_landing.jpg') no-repeat center/cover, #0E0B26;}
.start_top {padding: 64px 0 0;}
.start_top .inner {font-size: 0; text-align: center;}
.start_ct {margin-top: 50px;}
.start_bot {margin-top: 40px; font-size: 0;}
.start_bot img {width: 100%;}

/* > 정보입력 */
#sign .screen {padding-top: 0; background: url('../img/img_bg_signin.jpg') no-repeat center/cover, #0E0B26;}
#sign .start_expl {margin-bottom: 16px;}
.sign_top {padding-top: 347px; text-align: center;}
.sign_ct {margin-top: 36px;}
.sign_stitle {font-size: 18px; font-weight: 600; color: #ffffff; line-height: 1.444; letter-spacing: 0.36px;}
.sign_title {width: 244px; max-width: 100%; margin: 6px auto 20px;}
.sign_expl {font-size: 18px; font-weight: 400; color: #ffffff; line-height: 1.444; letter-spacing: 0.36px;}

.sign_field {}
.sign_field > li ~ li {margin-top: 16px;}
.sign_field > li .ui-select {float: none}

.sign_ct .ui-btn {margin-top: 16px;}

/* > 게임스토리 */
#story1 .screen {background: url('../img/img_bg_secret_document-2.jpg') no-repeat top center/cover;}
.story1_expl {margin-top: 12px; font-size: 20px; font-weight: 600; color: #122A34; line-height: 1.4;}
.story1_ct .ui-btn {margin-top: 24px;}

.chat_story_img {font-size: 0;}
.chat_story_img img {width: 61px;}

.item_story_hint1 {font-size: 0;}
.item_story_hint1 img {width: 144px;}

.item_story_hint2 {font-size: 0;}
.item_story_hint2 img {width: 144px;}

.item_story_cone {font-size: 0;}
.item_story_cone img {width: 49px;}


/* > 미정 */
.chat_quiz .examList > li:not(:first-child) {margin-top: 16px;}

.chat_quiz_score .screen {padding: 80px 0 40px; background-color: #eee;}
.chat_quiz_score_top {margin-bottom: 24px;}
.chat_quiz_scoreTitle {display: block; position: relative; font-size: 14px; font-weight: 300; color: #333; text-align: center; line-height: 130%;}
.chat_quiz_score_ct {padding: 60px 24px 146px; border-radius: 8px; background-color: #fff; text-align: center;}
.chat_quiz_score_ct .t1 {font-size: 24px; font-weight: 300; color: #000; line-height: 130%;}
.chat_quiz_score_ct .t2 {font-size: 18px; font-weight: 300; color: #000; line-height: 160%;}
.chat_quiz_score_ct .score_txt {margin: 8px auto 16px; padding: 9px 5px; border-radius: 8px; font-size: 24px; font-weight: 500; color: #000; line-height: 130%; background-color: #FFE9BA;}
.chat_quiz_score_ct .score_txt em {font-style: normal;}
.chat_quiz_score_ct .icon {margin: 48px auto 24px;}
.chat_quiz_score_ct .icon img {width: 70px;}
.chat_quiz_score_bot {margin-top: 24px;}

.chat_quiz_answer .screen {padding: 80px 0 40px; background-color: #eee;}
.chat_quiz_answer_top {margin-bottom: 16px;}
.chat_quiz_answerTitle {display: block; position: relative; font-size: 14px; font-weight: 300; color: #333; text-align: center; line-height: 130%;}
.chat_quiz_answerExpl {margin-top: 16px; font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, 0.4); text-align: center;}
.chat_quiz_answer_ct {text-align: center;}
.finalAnswerList {}
.finalAnswerList > li {padding: 24px 8px 8px; border-radius: 8px; background-color: #fff;}
.finalAnswerList > li ~ li {margin-top: 16px;}
.finalAnswerList .t1 {margin: 24px auto 16px; font-size: 16px; font-weight: 300; line-height: 130%; color: #000;}
.finalAnswerList .answer_txt {padding: 14px 5px; border-radius: 8px; font-size: 16px; font-weight: 300; color: #000; line-height: 130%; background-color: #FFE9BA;}
.finalAnswerList .icon {display: block; width: 28px; height: 40px; margin: 0 auto; font-size: 16px; font-weight: 300; line-height: 130%; padding-top: 6px; text-align: center; background: url('/duimi2/src/img/img_icon_lightbulb.png') no-repeat center/contain;}
.chat_quiz_answer_bot {margin-top: 24px;}

.emotion_quiz .screen {padding: 80px 0 40px; background: #FFE484; background: linear-gradient(180deg, #FFE484 0%, #FFEEB1 100%);}
.emotion_quiz_top {margin-bottom: 16px;}
.emotion_quizTitle {display: block; position: relative; font-size: 14px; font-weight: 300; color: #333; text-align: center; line-height: 130%;}
.emotion_quizExpl {margin-top: 16px; font-size: 14px; font-weight: 400; color: #333; line-height: 160%; text-align: center;}
.emotion_quiz_ct {padding: 24px 24px 16px; border-radius: 8px; background-color: #fff; text-align: center;}
.emotion_quiz_ct .t1 {margin: 16px auto 24px; font-size: 20px; font-weight: 300; color: #000; line-height: 160%;}
.emotion_quiz_ct .icon {width: 36px; margin: 0 auto; font-size: 0;}
.emotion_quiz_bot {margin-top: 24px;}

.emotion_quiz_ct .examList {display: flex; flex-flow: row wrap; gap: 8px;}
.emotion_quiz_ct .examList > li {width: calc(50% - 4px);}
.emotion_quiz_ct .step {display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 36px;}
.emotion_quiz_ct .step span {font-size: 14px; font-weight: 300; color: #F0B33C; line-height: 160%;}

.letter_quiz .screen {padding: 80px 0 40px; background:  #FFC4C0; background: linear-gradient(180deg, #FFC4C0 0%, #FFD8DD 100%);}
.letter_quiz_top {margin-bottom: 16px;}
.letter_quizTitle {display: block; position: relative; font-size: 14px; font-weight: 300; color: #333; text-align: center; line-height: 130%;}
.letter_quizExpl {margin-top: 16px; font-size: 14px; font-weight: 400; color: #333; line-height: 160%; text-align: center;}
.letter_quiz_ct {padding: 24px 24px 16px; border-radius: 8px; background-color: #fff; text-align: center;}
.letter_quiz_ct .t1 {margin: 16px auto 0; font-size: 18px; font-weight: 300; color: #000; line-height: 160%;}
.letter_quiz_ct .t2 {margin: 8px auto 40px; font-size: 18px; font-weight: 300; color: #000; line-height: 160%;}
.letter_quiz_ct .icon {width: 52px; margin: 0 auto; font-size: 0;}
.letter_quiz_ct .txtarWrap .ui-txtar {width: 100%; height: 210px; border: 0; font-size: 16px; font-weight: 400; color: #000; line-height: 160%; text-align: center;}
.letter_quiz_ct .txtarWrap .ui-txtar::placeholder {color: rgba(0, 0, 0, 0.3);}
.letter_quiz_bot {margin-top: 24px;}

.letter_quiz_ct .step {display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 36px;}
.letter_quiz_ct .step span {font-size: 14px; font-weight: 300; color: #D95A82; line-height: 160%;}

.letter_quiz_answer .screen {padding: 80px 0 40px; background:  #FFC4C0; background: linear-gradient(180deg, #FFC4C0 0%, #FFD8DD 100%);}
.letter_quiz_answer_top {margin-bottom: 16px;}
.letter_quiz_answerTitle {display: block; position: relative; font-size: 14px; font-weight: 300; color: #333; text-align: center; line-height: 130%;}
.letter_quiz_answerExpl {margin-top: 16px; font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, 0.4); text-align: center;}
.letter_quiz_answer_ct {text-align: center;}
.letterAnswerList {}
.letterAnswerList > li {padding: 24px 8px 32px; border-radius: 8px; background-color: #fff;}
.letterAnswerList > li ~ li {margin-top: 16px;}
.letterAnswerList .t1 {margin: 16px auto 40px; font-size: 18px; font-weight: 300; line-height: 160%; color: #000;}
.letterAnswerList .answer_txt {font-size: 16px; font-weight: 400; color: #000; line-height: 160%;}
.letterAnswerList .icon {position: relative; width: 52px; height: 38px; margin: 0 auto; padding-top: 5px; text-align: center;}
.letterAnswerList .icon::after {content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: url('/duimi2/src/img/img_icon_item_test_2.png') no-repeat center/contain; opacity: 0.6;}
.letterAnswerList .icon span {position: relative; z-index: 2; font-size: 16px; font-weight: 300; color: #000; line-height: 160%; opacity: 1;}
.letter_quiz_answer_bot {margin-top: 24px;}

#ending .screen {background: url('../img/bg_gamemain.jpg') no-repeat top 56px center/cover, #000912;}
#ending .start_top {padding-top: 95px;}
.ending_title {width: 248px; margin: 0 auto; text-align: center;}
.ending_ct {position: absolute; bottom: 40px; left: 0; z-index: 100; width: 100%;}
.ending_ct .ending_text {width: 288px; margin: 0 auto; font-size: 0; text-align: center;}
.ending_padlet_qr {width: 127px; margin: 10px auto 15px; font-size: 0; text-align: center;}
.ending_ct .ui-btn {color: #037706;}

.hidden {display: none;}

.emotion_quiz_bot .ui-btn:disabled {opacity: 0.8;}
.letter_quiz_bot .ui-btn:disabled {opacity: 0.8;}

#storageGuide {display: none; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: -1; background: rgba(0, 0, 0, 0.7);}
#storageGuide .pointer {display: block; width: 56px; position: absolute; top: 60px; right: 10px; z-index: 1; animation : pointer 1s infinite ;}
#storageGuide .pointer img {width: 100%;}
.screen_top.non-click #storageGuide {display: block;}
.screen_top.non-click #timer {position: relative; z-index: -1;}
.screen_top.non-click #btn-back {position: relative; z-index: -1;}

#stage7_clear .chat_noti_txt.clear_noti_t2 {margin-top: 4px;}

#notcomp {display: none;}

@keyframes pointer {
	0% {
		top: 60px;
	}
	50% {
    top: 65px;
	}
  100% {
		top: 60px;
	}
}

@media screen and (max-width:500px) {
  .app {display: flex; justify-content: center; align-items: center; position: relative;}

  .screen {position: relative; width: 100%; min-height: 100dvh; margin: 0 auto; padding-top: 20vw; padding-bottom: 11.111vw;}

  .wrapper {padding: 0 4.444vw;}

  /* .inner {position: relative;}
  .screen .inner {min-height: calc(100vh - 11.111vw);} */

  .c1_txt {color: #44BAD1 !important;}

  .fz14 {font-size: 3.889vw !important;}
  .fz16 {font-size: 4.444vw !important;}

  .fix-bot {position: absolute; bottom: 11.111vw; left: 0; z-index: 10; width: 100%;}

  .bg-blur {position: relative; z-index: 5;}
  .bg-blur::after {content: ""; position: absolute; top: 0; left: 0; z-index: 5; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: saturate(100%) blur(11.111vw);}
  .bg-blur-ct {position: relative; z-index: 10;}

  .ui-pop_dim {display: none; position: fixed; top: 0; left: 0; z-index: 150; width: 100%; height: 100dvh; background: rgba(0, 0, 0, 0.7);}
  .ui-pop {overflow-y: auto; position: fixed; top: 50%; left: 50%; z-index: 160; transform: translate(-50%, -50%); width: 116.667vw; max-width: calc(100% - 22.222vw); max-height: 90%; padding: 11.111vw 6.667vw 6.667vw; border-radius: 3.333vw; text-align: center; background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(100%) blur(4.444vw);}
  .alert_expl {margin-top: 3.333vw; font-size: 5.556vw; font-weight: 600; color: #122A34; line-height: 1.4;}
  .alert-btn_close {margin-top: 6.667vw;}

  .ui-title {font-size: 7.222vw; font-weight: 700; color: #122A34; line-height: 1.2;}

  .ui-stroke {-webkit-text-stroke: var(--stroke);}

  .ui-input {display: block; width: 100%; height: 13.333vw; padding: 0 2.778vw; border: 0; border-radius: 2.778vw; font-family: 'BM HANNA Pro', sans-serif; font-size: 5.556vw; color: #101010; text-align: center; background: #ffffff;}
  .ui-input::placeholder {font-family: 'BM HANNA Air', sans-serif; color: #aaaaaa;}

  .ui-btn {display: block; width: 100%; height: 15.556vw; line-height: 15.556vw; border: 0; border-radius: 2.778vw; font-family: 'BM HANNA Pro', sans-serif; font-size: 5.556vw; color: #ffffff; text-align: center; background: #9F70CB;}
  .ui-btn:disabled {color: #A992BE; background-color: #D7CDE0;}

  .ui-btn.type2 {font-family: 'Pretendard', sans-serif; font-size: 5.556vw; font-weight: 700; color: #0A1629; background: #ffffff;}


  .ui-btn.active {background-color: #D0FFDE !important; color: #253322 !important;}
  .ui-btn.line.active {border-color: #253322 !important;}

  .ui-radio {display: none;}
  .ui-radio + label {display: block; width: 100%; height: 13.333vw; line-height: 13.333vw; border: 0; border-radius: 2.222vw; text-align: center; font-size: 4.444vw; font-weight: 300; color: #fff; background-color: #A7B3C2; cursor: pointer;}
  .ui-radio:checked + label {background-color: #022C5D;}

  .ui-check {display: none;}
  .ui-check + label {display: block; width: 100%; height: 11.111vw; line-height: 10.556vw; border: 0.278vw solid #eee; border-radius: 2.222vw; text-align: center; font-size: 4.444vw; font-weight: 300; color: #000; background-color: #fff; cursor: pointer;}
  .ui-check:checked + label {border: 0.556vw solid #FFCE1F;}

  .bottom_pad {padding-bottom: 35%;}
  .bottom_lay {position: fixed; bottom: 11.111vw; left: 0; z-index: 100; width: 100%;}

  /* 알럿(Alert) 팝업 */
  .ui-alert {display: none; position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);}
  .ui-alert_cont {overflow: hidden; position: relative; top: 50%; left: 50%; width: calc(100% - 13.333vw); height: auto; z-index: 210; padding: 11.111vw 2.778vw; transform: translate(-50%, -50%); border-radius: 5.556vw; text-align: center; background-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(2.778vw); backdrop-filter: blur(2.778vw);}

  .ui-alert_close {display: block; position: absolute; top: 3.333vw; right: 3.333vw; z-index: 10; width: 13.333vw; height: 13.333vw; border: 0; background: url('/duimi2/src/img/icon_close.png') no-repeat center/contain;}

  .ui-alert_img {margin: 0 auto; font-size: 0;}
  .ui-alert_img.key {width: 10.833vw;}
  .ui-alert_img.lock {width: 10vw;}
  .ui-alert_img.back {width: 11.111vw;}
  .ui-alert_img.wrong {width: 18.333vw;}
  .ui-alert_img.locker {width: 10.556vw;}
  .ui-alert_img.airplane {width: 19.444vw;}
  .ui-alert_img.flower {width: 100%;}

  #alert_flower .ui-alert_cont {padding: 0 0 11.111vw;}
  #alert_flower .ui-alert_btn {margin: 0 auto;}

  .ui-alert_txt {margin-top: 6.667vw; font-size: 5.556vw; font-weight: 300; color: #000; line-height: 160%;}

  .ui-alert .ui-alert_btn {width: 64.444vw; max-width: 100%; margin: 12.222vw auto 0; font-size: 4.444vw; font-weight: 300; color: #000;}

  .ui-alert .ui-alert_btn::after {border-color: #333 !important;}

  #alert_backGuide {display: block;}
  #alert_backGuide .backGuide_img {display: block; position: absolute; top: 5.556vw; left: 4.444vw; z-index: 10; width: 11.111vw; height: auto; font-size: 0;}

  /* 화면 공통 요소 모음 */
  .screen_top {position: absolute; top: 0; left: 0; z-index: 100; width: 100%; background-color: #DEDBE6;}
  .screen_top .inner {display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; height: 13.333vw;}
  .screen_top .inner .lt {display: flex; flex-flow: row wrap; align-items: center; gap: 0 4.444vw;}

  .screen_top #timer {position: relative; padding-left: 7.778vw; font-size: 0;}
  .screen_top #timer::before {content: ""; display: block; position: absolute; top: 50%; left: 0; z-index: 1; width: 6.667vw; height: 8.889vw; margin-top: -4.444vw; background: url('../img/ic_timer.png') no-repeat center left/contain;}
  .screen_top #timer .num {display: inline-block; min-width: 11.111vw; font-size: 4.444vw; color: #101010; line-height: normal;}

  .screen_top #clearStage {position: relative; padding-left: 10vw; font-size: 0;}
  .screen_top #clearStage::before {content: ""; display: block; position: absolute; top: 50%; left: 0; z-index: 1; width: 8.889vw; height: 8.889vw; margin-top: -4.444vw; background: url('../img/ic_book.png') no-repeat center left/contain;}
  .screen_top #clearStage .num {font-size: 4.444vw; color: #101010; line-height: normal; vertical-align: middle;}
  .screen_top #clearStage .bar {font-size: 4.444vw; color: #101010; line-height: normal; vertical-align: middle;}
  .screen_top #clearStage .tot {font-size: 4.444vw; color: #101010; line-height: normal; vertical-align: middle;}

  .screen_top #lastHint {display: flex; flex-flow: row wrap; align-items: center; gap: 0 1.111vw;  position: relative; padding-left: 10vw; font-size: 0;}
  .screen_top #lastHint::before {content: ""; display: block; position: absolute; top: 50%; left: 0; z-index: 1; width: 8.889vw; height: 8.889vw; margin-top: -4.444vw; background: url('../img/ic_lock.png') no-repeat center left/contain;}
  .screen_top #lastHint .char {display: block; width: 6.667vw; height: 6.667vw; line-height: 6.667vw; border-radius: 1.111vw; font-size: 4.444vw; color: #101010; text-align: center; background-color: #ffffff;}

  /* > 스테이지 장소 */
  .game .screen {background: #F4F4F4;}

  .game_top {position: relative; width: 100%;}
  .game_top .inner {position: relative;}

  .placeName {display: block; position: relative; z-index: 10; width: 100%; padding: 3.75vw 0; line-height: 1.156; margin-top: 12.778vw; border-radius: 2.778vw; font-size: 8.889vw; color: #ffffff; text-align: center; background-color: #8258A2;}
  .placeName::before {content: ""; display: block; position: absolute; top: -12.778vw; left: 50%; z-index: -1; width: 21.111vw; height: 25.556vw; margin-left:-10.556vw; border-radius: 16.667vw; background: url('../img/ic_jelly.png') no-repeat top 2.222vw center/14.444vw auto, #8258A2;}
  .placeName.type2 {background-color: #A690E7;}
  .placeName.type2::before {background-color: #A690E7;}
  .placeName.type3 {background-color: #D7CDE0; color: #8258A2;}
  .placeName.type3::before {background-color: #D7CDE0;}

  #qzHintView {position: absolute; top: -12.778vw; right: 0; z-index: 10; height: 8.889vw; line-height: 8.889vw; padding-left: 10vw; padding-right: 0; border: 0; font-size: 4.444vw; color: #2E2827; background: url('../img/ic_hint.png') no-repeat center left/8.889vw auto, transparent; cursor: pointer;}

  .backBtn {position: absolute; top: -12.778vw; left: 0; z-index: 10; height: 8.889vw; line-height: 8.889vw; padding-left: 10vw; padding-right: 0; border: 0; font-size: 4.444vw; color: #2E2827; background: url('../img/ic_arrow.png') no-repeat center left/8.889vw auto, transparent; cursor: pointer;}

  .game_ct {margin-top: 6.667vw;}

  .placeImage {overflow: hidden; display: block; width: 100%; height: 0; border-radius: 5.556vw; padding-bottom: 73.166%;}

  #stage1-screen .placeImage {background: url('../img/locaion_s1.jpg') no-repeat center/contain;}
  #stage2-screen .placeImage {background: url('../img/locaion_s2.jpg') no-repeat center/contain;}
  #stage3-screen .placeImage {background: url('../img/locaion_s3.jpg') no-repeat center/contain;}
  #stage4-screen .placeImage {background: url('../img/locaion_s4.jpg') no-repeat center/contain;}
  #stage5-screen .placeImage {background: url('../img/locaion_s5.jpg') no-repeat center/contain;}
  #stage6-screen .placeImage {background: url('../img/locaion_s6.jpg') no-repeat center/contain;}

  .placeExpl {margin-top: 6.667vw; font-size: 6.667vw; color: #2F2D3E; line-height: 1.25; text-align: center; letter-spacing: -0.133vw;}

  .game_bot {display: flex; flex-flow: column wrap; justify-content: flex-end; min-height: 55.556vw; margin-top: 6.667vw;}

  .game_answer {}
  .game_answer .btn:not(:first-child) {margin-top: 4.444vw;}

  /* 채팅 화면 */
  .chat .screen {height: 100dvh; min-height: auto; background: #F4F4F4;}
  .chat .inner {position: relative;}

  .chat .chat_ct {height: calc(100dvh - 53.333vw);}
  .chat .chat_bot {padding-right: 2.778vw;}

  .game_hint .chatArea {margin-top: 6.667vw;}
  .game_hint .chat_ct {height: calc(100dvh - 90.556vw);}

  .game_quiz .chatArea {margin-top: 6.667vw;}
  .game_quiz .chat_ct {height: calc(100dvh - 108.333vw);}

  .game_quiz_correct .chatArea {margin-top: 6.667vw;}
  .game_quiz_correct .chat_ct {height: calc(100dvh - 90.556vw);}

  .stage_clear_msg .chatArea {margin-top: 6.667vw;}
  .stage_clear_msg .chat_ct {height: calc(100dvh - 90.556vw);}

  .chat_ct {overflow-y: auto; height: calc(100dvh - 48.889vw); -ms-overflow-style: none; scrollbar-width: none;}
  .chat_box {display: flex; flex-flow: row wrap; gap: 0 2.222vw;}
  .chat_sub_box {margin-top: 2.222vw !important;}
  .chat_box:not(:first-child) {margin-top: 11.111vw;}
  .chat_img {overflow: hidden; width: 11.111vw; height: 11.111vw; border-radius: 50%;}
  .chat_img img {width: 100%; height: 100%; object-fit: cover;}
  .chat_txt {width: calc(100% - 13.333vw);}
  .chat_name {margin-bottom: 1.111vw; font-family: 'BM HANNA Air', sans-serif; font-size: 4.444vw; font-weight: 400; color: #000000; line-height: normal;}
  .chat_sub_box .chat_img {opacity: 0; visibility: hidden;}
  .chat_sub_box .chat_name {display: none;}
  .chat_msgBox {display: flex; flex-direction: column; align-items: flex-start; max-width: 85%;}/*max-width: 82%;*/
  .chat_tit {display: block; font-size: 4.444vw; font-weight: 700; color: #9F70CB; line-height: 1.5;}
  .chat_msg {display: inline-block; padding: 2.222vw 3.333vw; font-size: 4.444vw; font-weight: 400; color: #222222; line-height: 1.5; background-color: #ffffff; border-radius: 2.778vw; word-break: keep-all;}
  .chat_noti_txt {display: block; margin-bottom: 5.556vw; font-size: 4.444vw; font-weight: 500; color: #2F2D3E; line-height: 1.5; text-align: center;}
  .chat_noti_txt b {font-weight: 700;}
  .chat_noti_box {}
  .chat_noti_img {overflow: hidden; width: 100%; border-radius: 5.556vw; font-size: 0;}
  .chat_noti_img img {width: 100%; height: 100%; object-fit: cover;}

  .chat_msg.chat_item_img {padding: 2.222vw 3.333vw;}
  .chat_msg.chat_item_img img {width: 22.222vw;}

  .chat_box.left .chat_msg {border-top-left-radius: 0;}

  .chat_box.right {flex-direction: row-reverse;}
  .chat_box.right .chat_txt {text-align: right;}
  .chat_box.right .chat_txt::after {content: ""; display: table; clear: both;}
  .chat_box.right .chat_msgBox {align-items: flex-end; float: right; text-align: left;}
  .chat_box.right .chat_msgBox::after {content: ""; display: table; clear: both;}
  .chat_box.right .chat_msg {float: right; border-top-right-radius: 0;}

  .chat_bot {margin-top: 6.667vw;}

  .chat_ct .mCSB_inside>.mCSB_container {margin-right: 2.778vw;}
  .chat_ct .mCSB_scrollTools {width: 1.111vw;}
  .chat_ct .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width: 100%; background-color: #999;}
  .chat_ct .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {background-color: transparent;}

  .chat_event_text {margin: 4.444vw 0; padding: 3.056vw 0; font-size: 3.889vw; font-weight: 400; color: #000; line-height: 160%; text-align: center; background-color: #DDDDDD;}

  .quiz_submit {margin-top: 4.444vw;}

  .wrongArea {display: none; position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 100dvh; background-color: #F4F4F4; text-align: center;}
  .wrongTbox {display: flex; height: calc(100dvh - 26.944vw); justify-content: center; align-items: center; padding-top: 13.333vw;}
  .wrongTbox .t1 {font-size: 7.778vw; color: #2F2D3E; line-height: 1.3214; letter-spacing: -0.156vw;}

  .qzHintArea {display: none; position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 100dvh; background-color: #F4F4F4; text-align: center;}
  .qzHintTbox {display: flex; flex-flow: column wrap; height: calc(100dvh - 26.944vw); justify-content: center; align-items: center; padding-top: 13.333vw;}
  .qzHintTbox .t1 {margin-top: 4.444vw; font-size: 7.778vw; color: #2F2D3E; line-height: 1.3214; letter-spacing: -0.156vw;}

  .game_hint .chat_msg {color: #101010;}

  #hint2_1 .chat_msgBox {max-width: 97.145%;}
  #hint2_1 .chat_msg {padding: 2.222vw;}

  #hint2_2 .chat_msgBox {max-width: 97.145%;}
  #hint2_2 .chat_msg {padding: 2.222vw;}

  #hint3_2 .chat_msgBox {max-width: 97.145%;}
  #hint3_2 .chat_msg {padding: 2.222vw;}

  #hint4_2 .chat_msgBox {max-width: 97.145%;}
  #hint4_2 .chat_msg {padding: 2.222vw;}

  #hint4_3 .chat_msgBox {max-width: 97.145%;}
  #hint4_3 .chat_msg {padding: 2.222vw;}

  .s_item {font-size: 0;}


  /* 스테이지 클리어 */
  .stage_clear .screen {padding-top: 13.333vw; background: #F4F4F4;}
  .stage_clear .clearArea .inner {display: flex; flex-flow: column wrap; height: calc(100dvh - 40vw); justify-content: center; align-items: center;}
  .clearArea {text-align: center;}
  .clearTbox {width: 100%;}
  .clearTbox .t1 {margin-top: 4.444vw; font-size: 7.778vw; color: #2F2D3E; line-height: 1.3214; letter-spacing: -0.156vw;}

  .stage_clear_msg_hint .screen {padding-top: 13.333vw; background: #F4F4F4;}
  .stage_clear_msg_hint .clearArea .inner {display: flex; flex-flow: column wrap; height: calc(100dvh - 61.111vw); justify-content: center; align-items: center;}

  .ui-finalHint_char {display: block; width: 24.444vw; height: 24.444vw; line-height: 24.444vw; margin: 6.667vw auto 0; border-radius: 3.889vw; font-size: 15.556vw; color: #8258A2; text-align: center; background-color: #D7CDE0;}
  .ui-finalHint_txt {margin-bottom: 6.667vw; font-size: 5vw; font-weight: 400; color: #2F2D3E; text-align: center; line-height: 1.444; letter-spacing: -0.1vw;}

  /* 로딩화면 */
  .loading .screen {display: flex; flex-flow: column wrap; align-items: center; justify-content: center; width: 100%; padding-bottom: 0; background-color: rgba(93, 66, 113, 1); transition: background-color 3s ease;}
  .loading .screen.fade {background-color: rgba(93, 66, 113, 0.6);}
  .loading_ct {text-align: center;}
  .loading_ct .ic1 {width: 15.556vw; margin: 0 auto; font-size: 0;}
  .loading_ct .t1 {font-size: 8.889vw; color: #ffffff; line-height: 1.156;}
  .loading_ct .t2 {margin: 3.611vw 0; font-size: 7.778vw; color: #ffffff; line-height: 1.321; letter-spacing: -0.156vw;}
  .loading_ct .t3 {font-size: 5.556vw; color: #ffffff; line-height: 1.2; letter-spacing: -0.111vw;}

  /* 개별 스타일 */
  /* > 랜딩페이지 */
  #start .screen {padding-top: 0; padding-bottom: 0; background: url('../img/img_bg_landing.jpg') no-repeat center/cover, #0E0B26;}
  .start_top {padding: 17.778vw 0 0;}
  .start_top .inner {font-size: 0; text-align: center;}
  .start_ct {margin-top: 13.889vw;}
  .start_bot {margin-top: 11.111vw; font-size: 0;}
  .start_bot img {width: 100%;}

  /* > 정보입력 */
  #sign .screen {padding-top: 0; background: url('../img/img_bg_signin.jpg') no-repeat center/cover, #0E0B26;}
  #sign .start_expl {margin-bottom: 4.444vw;}
  .sign_top {padding-top: 96.389vw; text-align: center;}
  .sign_ct {margin-top: 10vw;}
  .sign_stitle {font-size: 5vw; font-weight: 600; color: #ffffff; line-height: 1.444; letter-spacing: 0.1vw;}
  .sign_title {width: 67.778vw; max-width: 100%; margin: 1.667vw auto 5.556vw;}
  .sign_expl {font-size: 5vw; font-weight: 400; color: #ffffff; line-height: 1.444; letter-spacing: 0.1vw;}

  .sign_field {}
  .sign_field > li ~ li {margin-top: 4.444vw;}
  .sign_field > li .ui-select {float: none}

  .sign_ct .ui-btn {margin-top: 4.444vw;}

  /* > 게임스토리 */
  #story1 .screen {background: url('../img/img_bg_secret_document-2.jpg') no-repeat top center/cover;}
  .story1_expl {margin-top: 3.333vw; font-size: 5.556vw; font-weight: 600; color: #122A34; line-height: 1.4;}
  .story1_ct .ui-btn {margin-top: 6.667vw;}

  .chat_story_img {font-size: 0;}
  .chat_story_img img {width: 16.944vw;}

  .item_story_hint1 {font-size: 0;}
  .item_story_hint1 img {width: 40vw;}

  .item_story_hint2 {font-size: 0;}
  .item_story_hint2 img {width: 40vw;}

  .item_story_cone {font-size: 0;}
  .item_story_cone img {width: 13.611vw;}


  /* > 미정 */
  .chat_quiz .examList > li:not(:first-child) {margin-top: 4.444vw;}

  .chat_quiz_score .screen {padding: 22.222vw 0 11.111vw; background-color: #eee;}
  .chat_quiz_score_top {margin-bottom: 6.667vw;}
  .chat_quiz_scoreTitle {display: block; position: relative; font-size: 3.889vw; font-weight: 300; color: #333; text-align: center; line-height: 130%;}
  .chat_quiz_score_ct {padding: 16.667vw 6.667vw 40.556vw; border-radius: 2.222vw; background-color: #fff; text-align: center;}
  .chat_quiz_score_ct .t1 {font-size: 6.667vw; font-weight: 300; color: #000; line-height: 130%;}
  .chat_quiz_score_ct .t2 {font-size: 5vw; font-weight: 300; color: #000; line-height: 160%;}
  .chat_quiz_score_ct .score_txt {margin: 2.222vw auto 4.444vw; padding: 2.5vw 1.389vw; border-radius: 2.222vw; font-size: 6.667vw; font-weight: 500; color: #000; line-height: 130%; background-color: #FFE9BA;}
  .chat_quiz_score_ct .score_txt em {font-style: normal;}
  .chat_quiz_score_ct .icon {margin: 13.333vw auto 6.667vw;}
  .chat_quiz_score_ct .icon img {width: 19.444vw;}
  .chat_quiz_score_bot {margin-top: 6.667vw;}

  .chat_quiz_answer .screen {padding: 22.222vw 0 11.111vw; background-color: #eee;}
  .chat_quiz_answer_top {margin-bottom: 4.444vw;}
  .chat_quiz_answerTitle {display: block; position: relative; font-size: 3.889vw; font-weight: 300; color: #333; text-align: center; line-height: 130%;}
  .chat_quiz_answerExpl {margin-top: 4.444vw; font-size: 3.889vw; font-weight: 600; color: rgba(0, 0, 0, 0.4); text-align: center;}
  .chat_quiz_answer_ct {text-align: center;}
  .finalAnswerList {}
  .finalAnswerList > li {padding: 6.667vw 2.222vw 2.222vw; border-radius: 2.222vw; background-color: #fff;}
  .finalAnswerList > li ~ li {margin-top: 4.444vw;}
  .finalAnswerList .t1 {margin: 6.667vw auto 4.444vw; font-size: 4.444vw; font-weight: 300; line-height: 130%; color: #000;}
  .finalAnswerList .answer_txt {padding: 3.889vw 1.389vw; border-radius: 2.222vw; font-size: 4.444vw; font-weight: 300; color: #000; line-height: 130%; background-color: #FFE9BA;}
  .finalAnswerList .icon {display: block; width: 7.778vw; height: 11.111vw; margin: 0 auto; font-size: 4.444vw; font-weight: 300; line-height: 130%; padding-top: 1.667vw; text-align: center; background: url('/duimi2/src/img/img_icon_lightbulb.png') no-repeat center/contain;}
  .chat_quiz_answer_bot {margin-top: 6.667vw;}

  .emotion_quiz .screen {padding: 22.222vw 0 11.111vw; background: #FFE484; background: linear-gradient(180deg, #FFE484 0%, #FFEEB1 100%);}
  .emotion_quiz_top {margin-bottom: 4.444vw;}
  .emotion_quizTitle {display: block; position: relative; font-size: 3.889vw; font-weight: 300; color: #333; text-align: center; line-height: 130%;}
  .emotion_quizExpl {margin-top: 4.444vw; font-size: 3.889vw; font-weight: 400; color: #333; line-height: 160%; text-align: center;}
  .emotion_quiz_ct {padding: 6.667vw 6.667vw 4.444vw; border-radius: 2.222vw; background-color: #fff; text-align: center;}
  .emotion_quiz_ct .t1 {margin: 4.444vw auto 6.667vw; font-size: 5.556vw; font-weight: 300; color: #000; line-height: 160%;}
  .emotion_quiz_ct .icon {width: 10vw; margin: 0 auto; font-size: 0;}
  .emotion_quiz_bot {margin-top: 6.667vw;}

  .emotion_quiz_ct .examList {display: flex; flex-flow: row wrap; gap: 2.222vw;}
  .emotion_quiz_ct .examList > li {width: calc(50% - 1.111vw);}
  .emotion_quiz_ct .step {display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 10vw;}
  .emotion_quiz_ct .step span {font-size: 3.889vw; font-weight: 300; color: #F0B33C; line-height: 160%;}

  .letter_quiz .screen {padding: 22.222vw 0 11.111vw; background:  #FFC4C0; background: linear-gradient(180deg, #FFC4C0 0%, #FFD8DD 100%);}
  .letter_quiz_top {margin-bottom: 4.444vw;}
  .letter_quizTitle {display: block; position: relative; font-size: 3.889vw; font-weight: 300; color: #333; text-align: center; line-height: 130%;}
  .letter_quizExpl {margin-top: 4.444vw; font-size: 3.889vw; font-weight: 400; color: #333; line-height: 160%; text-align: center;}
  .letter_quiz_ct {padding: 6.667vw 6.667vw 4.444vw; border-radius: 2.222vw; background-color: #fff; text-align: center;}
  .letter_quiz_ct .t1 {margin: 4.444vw auto 0; font-size: 5vw; font-weight: 300; color: #000; line-height: 160%;}
  .letter_quiz_ct .t2 {margin: 2.222vw auto 11.111vw; font-size: 5vw; font-weight: 300; color: #000; line-height: 160%;}
  .letter_quiz_ct .icon {width: 14.444vw; margin: 0 auto; font-size: 0;}
  .letter_quiz_ct .txtarWrap .ui-txtar {width: 100%; height: 58.333vw; border: 0; font-size: 4.444vw; font-weight: 400; color: #000; line-height: 160%; text-align: center;}
  .letter_quiz_ct .txtarWrap .ui-txtar::placeholder {color: rgba(0, 0, 0, 0.3);}
  .letter_quiz_bot {margin-top: 6.667vw;}

  .letter_quiz_ct .step {display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 10vw;}
  .letter_quiz_ct .step span {font-size: 3.889vw; font-weight: 300; color: #D95A82; line-height: 160%;}

  .letter_quiz_answer .screen {padding: 22.222vw 0 11.111vw; background:  #FFC4C0; background: linear-gradient(180deg, #FFC4C0 0%, #FFD8DD 100%);}
  .letter_quiz_answer_top {margin-bottom: 4.444vw;}
  .letter_quiz_answerTitle {display: block; position: relative; font-size: 3.889vw; font-weight: 300; color: #333; text-align: center; line-height: 130%;}
  .letter_quiz_answerExpl {margin-top: 4.444vw; font-size: 3.889vw; font-weight: 600; color: rgba(0, 0, 0, 0.4); text-align: center;}
  .letter_quiz_answer_ct {text-align: center;}
  .letterAnswerList {}
  .letterAnswerList > li {padding: 6.667vw 2.222vw 8.889vw; border-radius: 2.222vw; background-color: #fff;}
  .letterAnswerList > li ~ li {margin-top: 4.444vw;}
  .letterAnswerList .t1 {margin: 4.444vw auto 11.111vw; font-size: 5vw; font-weight: 300; line-height: 160%; color: #000;}
  .letterAnswerList .answer_txt {font-size: 4.444vw; font-weight: 400; color: #000; line-height: 160%;}
  .letterAnswerList .icon {position: relative; width: 14.444vw; height: 10.556vw; margin: 0 auto; padding-top: 1.389vw; text-align: center;}
  .letterAnswerList .icon::after {content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: url('/duimi2/src/img/img_icon_item_test_2.png') no-repeat center/contain; opacity: 0.6;}
  .letterAnswerList .icon span {position: relative; z-index: 2; font-size: 4.444vw; font-weight: 300; color: #000; line-height: 160%; opacity: 1;}
  .letter_quiz_answer_bot {margin-top: 6.667vw;}

  #ending .screen {background: url('../img/bg_gamemain.jpg') no-repeat top 15.556vw center/cover, #000912;}
  #ending .start_top {padding-top: 26.389vw;}
  .ending_title {width: 68.889vw; margin: 0 auto; text-align: center;}
  .ending_ct {position: absolute; bottom: 11.111vw; left: 0; z-index: 100; width: 100%;}
  .ending_ct .ending_text {width: 80vw; margin: 0 auto; font-size: 0; text-align: center;}
  .ending_padlet_qr {width: 35.278vw; margin: 2.778vw auto 4.167vw; font-size: 0; text-align: center;}
  .ending_ct .ui-btn {color: #037706;}

  .hidden {display: none;}

  .emotion_quiz_bot .ui-btn:disabled {opacity: 0.8;}
  .letter_quiz_bot .ui-btn:disabled {opacity: 0.8;}

  #storageGuide {display: none; width: 100%; height: 100dvh; position: fixed; top: 0; left: 0; z-index: -1; background: rgba(0, 0, 0, 0.7);}
  #storageGuide .pointer {display: block; width: 15.556vw; position: absolute; top: 16.667vw; right: 2.778vw; z-index: 1; animation : pointer 1s infinite ;}
  #storageGuide .pointer img {width: 100%;}
  .screen_top.non-click #storageGuide {display: block;}
  .screen_top.non-click #timer {position: relative; z-index: -1;}
  .screen_top.non-click #btn-back {position: relative; z-index: -1;}

  #stage7_clear .chat_noti_txt.clear_noti_t2 {margin-top: 1.111vw;}

  #notcomp {display: none;}

  @keyframes pointer {
    0% {
      top: 16.667vw;
    }
    50% {
      top: 18.056vw;
    }
    100% {
      top: 16.667vw;
    }
  }
}