/* guide */
#app {display: flex; justify-content: center; align-items: center; position: relative; width: 100%; min-height: 100vh; background-color: #000;}
#container {overflow: hidden; position: relative; width: 100%; max-width: 100vw; margin: 0 auto; background: url('/source/img/img_bg_whitepaper.jpg') no-repeat top center/cover, #fff;}
#contents {position: relative; min-height: 100vh;}

.wrapper {padding-left: 4.444vw; padding-right: 4.444vw;}

.w100 {width: 100% !important;}
.w50 {width: 50% !important;}

.flexRow {display: flex !important; flex-flow: row wrap !important; align-items: flex-start !important; justify-content:  flex-start !important;}
.v-align_center,
[v-align_center="true"] {display: flex !important; flex-flow: column wrap; align-items: center !important; justify-content: center !important;}

.v-align_center2 {display: flex !important; flex-flow: column wrap; align-items: center !important; justify-content: center !important; height: calc(100vh - 40vw);}

.f_nm {font-family: 'NanumMyeongjo', serif !important;}
.f_hr {font-family: 'HeirofLight', serif !important;}
.f_pt {font-family: 'Pretendard', serif !important;}

.fc_white {color: #fff !important;}
.fc_black {color: #020416 !important;}
.fc_gray {color: #9a9a9a !important;}
.fc_gray2 {color: #959595 !important;}
.fc_gray3 {color: #7a7a7a !important;}
.fc_blue {color: #1140e3 !important;}

.text1 {font-size: 12.222vw; font-weight: 400; color: #020416;}
b.text1,
.text1 b {font-weight: 700;}
.text2 {font-size: 11.111vw; font-weight: 400; color: #020416;}
b.text2,
.text2 b {font-weight: 700;}
.text3 {font-size: 10vw; font-weight: 400; color: #020416;}
b.text3,
.text3 b {font-weight: 700;}
.text4 {font-size: 6.667vw; font-weight: 400; color: #020416;}
b.text4,
.text4 b {font-weight: 700;}
.text5 {font-size: 6.111vw; font-weight: 400; color: #020416;}
b.text5,
.text5 b {font-weight: 700;}
.text6 {font-size: 5.556vw; font-weight: 400; color: #020416;}
b.text6,
.text6 b {font-weight: 700;}
.text7 {font-size: 5vw; font-weight: 400; color: #020416;}
b.text7,
.text7 b {font-weight: 700;}
.text8 {font-size: 3.889vw; font-weight: 400; color: #020416;}
b.text8,
.text8 b {font-weight: 700;}

.fw100 {font-weight: 100 !important;}
.fw200 {font-weight: 200 !important;}
.fw300 {font-weight: 300 !important;}
.fw400 {font-weight: 400 !important;}
.fw500 {font-weight: 500 !important;}
.fw600 {font-weight: 600 !important;}
.fw700 {font-weight: 700 !important;}
.fw800 {font-weight: 800 !important;}
.fw900 {font-weight: 900 !important;}

.mt8 {margin-top: 2.222vw !important;}
.mt10 {margin-top: 2.778vw !important;}
.mt16 {margin-top: 4.444vw !important;}
.mt20 {margin-top: 5.556vw !important;}
.mt24 {margin-top: 6.667vw !important;}
.mt30 {margin-top: 8.333vw !important;}
.mt32 {margin-top: 8.889vw !important;}
.mt40 {margin-top: 11.111vw !important;}

.ta_l {text-align: left !important;}
.ta_c {text-align: center !important;}
.ta_r {text-align: right !important;}

.btn {display: block; height: 17.778vw; line-height: 17.778vw; max-width: 100%; padding: 0; border: 0; background: none; font-size: 5.556vw; font-weight: 600; text-align: center;}
.btn1 {color: #9A9A9A; background-color: #DBDBDB;}
.btn2 {color: #FFFFFF; background-color: #1140E3;}
.btn3 {color: #1140E3; background-color: #FFFFFF;}
.btn4 {color: #FFFFFF; background-color: #020416;}
.btn5 {color: #FF5E5E; background-color: rgba(255, 161, 161, 0.4);}

.hintBtn {display: block; width: 26.667vw; height: 8.889vw; line-height: 8.889vw; padding: 0; border: 0; background: url('/source/img/hint_btn_bg.png') no-repeat center/contain; font-size: 0; line-height: 1; cursor: pointer;}
.hintBtn .txt {display: inline-block; font-size: 4.444vw; font-weight: 700; color: #020416; letter-spacing: -0.5px; vertical-align: middle;}
.hintBtn .num {display: inline-block; margin: -2px 0 0 0.556vw; font-size: 5vw; font-weight: 700; color: #020416; vertical-align: middle;}
.hintBtn.none {display: none;}

.itemBtn {display: block; width: 26.667vw; height: 8.889vw; line-height: 8.889vw; padding: 0; border: 0; background: url('/source/img/hint_btn_bg.png') no-repeat center/contain; font-size: 0; line-height: 1; cursor: pointer;}
.itemBtn .txt {display: inline-block; font-size: 4.444vw; font-weight: 700; color: #020416; letter-spacing: -0.5px; vertical-align: middle;}
.itemBtn.none {display: none;}

.pHintBtn {display: block; width: 26.667vw; height: 8.889vw; line-height: 8.889vw; padding: 0; border: 0; background: url('/source/img/hint_btn_bg.png') no-repeat center/contain; font-size: 0; line-height: 1; cursor: pointer;}
.pHintBtn .txt {display: inline-block; font-size: 4.444vw; font-weight: 700; color: #020416; letter-spacing: -0.5px; vertical-align: middle;}
.pHintBtn.none {display: none;}

.btn.active {color: #1140E3 !important; background-color: #FFFFFF !important;}
.btn.active2 {color: #fff !important; background-color: #1140E3 !important;}
.btn.active3 {color: #fff !important; background-color: #020416 !important;}

.fLabel {display: block; font-size: 3.889vw; font-weight: 600; color: #7a7a7a; line-height: 1;}
.fInput-wr {position: relative; height: 15.556vw; max-width: 100%; padding: 0.556vw; background-color: #f7f7f7; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25); outline: none;}
.fInput {display: block; height: 100%; padding: 0 3.889vw; border: 1px solid #DCDCDC; border-radius: 0; background-color: #f7f7f7;}
.fInput::placeholder {color: #959595;}

.fSelect {display: block; height: 100%; padding: 0 8.333vw 0 3.889vw; border: 0.278vw solid #DCDCDC; border-radius: 0; background: url('/source/img/ic_arrow_dropdown.png') no-repeat center right 3.889vw/3.333vw auto, #f7f7f7;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.fSelect::-ms-expand { display: none; }

.fCheck {display: none;}
.fCheck + label {display: flex; align-items: center; justify-content: center; border-radius: 2.222vw; text-align: center; width: 100%; height: 17.778vw; font-family: 'Pretendard', serif !important; font-size: 5.833vw; font-weight: 500; color: #777; line-height: 1.333; background: #fff; cursor: pointer;}

.fCheck:checked + label {color: #1140E3; background: rgba(185, 201, 255, 0.6);}

.fLabel + .fInput-wr {margin-top: 1.111vw;}
.fInput-wr + .btn {margin-top: 4.444vw;}
.fInput-wr + .fBtn-wr {margin-top: 4.444vw;}

.check-li ~ .check-li {margin-top: 4.444vw;}

.quiz_ifr {overflow: hidden; position: relative; height: 0; margin-bottom: 4.444vw; padding-bottom: 56.25%;}
.quiz_ifr iframe {position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%;}

.header {display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: space-between; position: relative; width: 100%; height: 17.778vw; padding: 0 1.111vw 0 4.444vw; background: url('/source/img/header_bg.png') no-repeat top left/contain;}
.header.inven {background: url('/source/img/header_inven_bg.png') no-repeat top left/contain;}
.header .stageNum {display: flex; margin-top: 4.444vw; line-height: 1;}
.header .pageTitle {position: absolute; top: 4.444vw; left: 50%; z-index: 1; transform: translateX(-50%); line-height: 1;}
.header .hintBtn {margin-top: 2.778vw;}
.header .itemBtn {margin-top: 2.778vw;}
.header .pHintBtn {margin-top: 2.778vw;}

.sticker_text.white {width: 52.222vw; height: 28.056vw; line-height: 28.056vw; text-align: center; margin: 0 auto; background: url('/source/img/sticker_white.png') no-repeat center/contain;}

.bottom {padding-bottom: 4.444vw;}
.bottom.pos {position: absolute; bottom: 0; left: 0; z-index: 50; width: 100%;}

#btnArea.hide {display: none;}

.login #contents {height: 0; padding-bottom: 222.223%; background: url('/source/img/img_bg_main.jpg') no-repeat top center/100% auto;}

.user #contents {height: 0; padding-bottom: 222.223%; background: url('/source/img/img_bg_main.jpg') no-repeat top center/100% auto;}
.user_grid {gap: 0 4.444vw;}
.user_grid > li {width: calc(50% - 2.222vw);}
.user_grid + .btn {margin-top: 4.444vw;}

.intro1-top {padding-top: 22.222vw;}
.intro1-top .t1 {line-height: normal;}
.intro1-top .t2 {margin: 2.222vw 0 11.111vw; line-height: normal;}
.intro1-top .t3 {line-height: 1.727;}

.intro1-bot {margin-top: 5.556vw; padding-top: 27.778vw;  background: url('/source/img/intro1_bot_bg.jpg') no-repeat top center/cover;}
.img_glasses {width: 54.444vw; margin: 3.611vw auto 6.667vw;}
.intro1-bot .t2 {line-height: 1.727;}
.intro1-bot .bottom {margin-top: 22.222vw;}

.agree-sec {background: url('/source/img/paper_rip2.png') no-repeat bottom center/100% auto}
.agree-sec.sec1 {padding: 22.222vw 0 21.667vw;}
.agree-sec.sec2 {padding: 18.333vw 0 21.111vw;}
.agree_text {margin-bottom: 5.556vw; line-height: 1.727;}
.agree_chk {display: none;}
.agree-con .bottom {margin-top: 17.222vw;}

.ready-con {width: 100%; padding-top: 22.222vw; padding-bottom: 44.444vw;}
.ready-con .t1 {line-height: normal;}
.ready-con .t2 {margin-top: 4.444vw; line-height: 1.727;}

.start-con {width: 100%; padding-top: 22.222vw; padding-bottom: 44.444vw;}
.start-con .t1 {line-height: normal;}
.start-con .t2 {margin-top: 4.444vw; line-height: 1.727;}

.quiz-sec {padding: 26.111vw 0;}
.quiz-sec .quiz_txt {line-height: 1.727;}
.quiz-sec .quiz_txt1 {line-height: normal;}
.quiz-sec .quiz_img {}
.quiz-sec .quiz_txt + .quiz_img {margin-top: 4.444vw;}
.quiz-sec .quiz_img + .quiz_txt {margin-top: 4.444vw;}
.quiz-sec .map_s_img + .txt {margin-top: 4.444vw;}

#quizResult {display: none;}
.quiz-rst_sec {padding: 26.111vw 0;}
.quiz-rst_sec .quiz_rst_txt {padding: 2.222vw 0;}
.quiz-rst_sec .quiz_rst_txt1 {line-height: normal;}
.quiz-rst_sec .quiz_rst_txt2 {line-height: 1.727;}
.quiz-rst_sec .quiz_rst_img {padding: 2.222vw 0;}
.quiz-rst_sec .quiz_rst_img1 {margin-bottom: 2.222vw;}

.stage3 .s-quiz_result .step2 .quiz_rst_img {margin-left: -4.444vw; margin-right: -4.444vw;}
.stage3 .s-quiz_result .step2 .quiz_rst_txt2 {margin: 4.444vw auto;}

#movePlace {display: none;}
.move-sec {padding: 26.111vw 0;}
.move-sec .move_txt1 {line-height: normal;}
.move-sec .move_txt2 {line-height: 1.727;}
.move-sec .move_img {}
.move-sec .move_txt + .move_img {margin-top: 4.444vw;}
.move-sec .move_img + .move_txt {margin-top: 4.444vw;}

.detective .move-sec .move_img1,
.subdetective .move-sec .move_img1,
.clue .move-sec .move_img1 {width: 68.333vw; max-width: 100%; margin: 0 auto;}
.detective .move-sec .move_txt1,
.subdetective .move-sec .move_txt1,
.clue .move-sec .move_txt1 {margin-top: 6.667vw; margin-bottom: 4.444vw;}

#movePlace {display: none;}
.map-sec {padding: 26.111vw 0;}
.map-sec .map_txt1 {/*margin-top: 6.667vw;*/ line-height: normal;}
.map-sec .map_txt2 {margin-top: 4.444vw; line-height: 1.727;}
.map-sec .map_txt3 {margin-top: 13.333vw; line-height: normal;}
.map-sec .map_img2 {margin-top: 6.667vw;}
.map-sec .map_img3 {margin-top: 4.444vw;}
.map_caoution {display: block; margin-bottom: 4.444vw; color: #FF5E5E;}

#hintArea {display: none;}
.hint-sec {padding: 26.111vw 0;}
.hint-sec .hint_txt {padding: 2.222vw 0;}
.hint-sec .hint_txt1 {padding: 0 0 2.222vw; line-height: normal;}
.hint-sec .hint_txt2 {line-height: 1.727;}
.hint-sec .hint_img {padding: 4.444vw 0 2.222vw;}
.hint-con .next-hint_btn {margin-bottom: 4.444vw;}

.step {display: none;}
.step:first-child {display: block;}

#wrongArea {display: none;}
.wrong-con {width: 100%; padding-top: 22.222vw; padding-bottom: 44.444vw;}
.wrong-con .wrong_txt2 {margin: 4.444vw 0;}

.quiz-style_c .quiz-inner {display: none;}
.quiz-style_c .quiz-inner:first-child {display: block;}

.ch_txt_box {margin-top: 11.111vw;}
.ch_txt_box0 {margin-top: 0;}
.ch_txt_box .ch_txt1 {margin-bottom: 6.667vw; line-height: normal;}
.ch_txt_box .ch_txt2 {display: block; padding: 6.111vw 2.222vw; border-radius: 2.222vw; font-size: 5.833vw; font-weight: 500; line-height: 1.333;}
.ch_txt_box .ch_txt2 ~ .ch_txt2 {margin-top: 2.222vw;}
.ch_txt_box0 .ch_txt2 {color: #9B5BA4; background-color: rgba(242,213,246,0.6);}
.ch_txt_box1 .ch_txt2 {color: #005DAA; background-color: rgba(188,219,245,0.6);}
.ch_txt_box2 .ch_txt2 {color: #E50C62; background-color: rgba(247,205,222,0.6);}
.ch_txt_box3 .ch_txt2 {color: #49A942; background-color: rgba(215,232,214,0.6);}
.ch_txt_box4 .ch_txt2 {color: #F7941C; background-color: rgba(247,234,218,0.6);}

.quiz-style_d .quiz-sec {padding-bottom: 0;}
.quiz-style_d .quiz_txt_box {margin-top: 22.222vw;}
.quiz-style_d .quiz_txt_box .quiz_txt2 {margin-top: 4.444vw;}
.quiz-style_d .ipt_txt {margin-top: 13.333vw; margin-bottom: 4.444vw;}
.quiz-style_d .fBtn-wr {margin-top: 22.222vw;}
.quiz-style_d .wait-wr {margin-top: 3.333vw;}

.ending-con {width: 100%;}

.wait_alert {display: none; margin-bottom: 2.222vw; font-size: 5.278vw; font-weight: 700; color: #ff1c1c; line-height: 1.555; background-color: rgba(255, 161, 161, 0.4);}

#itemArea {display: none;}
.item-sec {padding: 26.111vw 0;}
.item-sec .item_txt1 {margin-top: 6.667vw; line-height: normal;}
.item-sec .item_txt2 {margin-top: 4.444vw; line-height: 1.727;}

#itemInven {display: none;}
.inven-sec {padding: 4.444vw 0 26.111vw;}
.invenItem ~ .invenItem {margin-top: 4.444vw;}
.inven_img {overflow: hidden; position: relative; height: 44.444vw; border-radius: 2.222vw;}
.inven_img:after {content: ""; display: block; position: absolute; bottom: 0; left: 0; z-index: 5; width: 100%; height: 15.556vw; background: rgb(23,2,2); background: linear-gradient(180deg, rgba(23,2,2,0) 0%, rgba(23,2,2,1) 100%);}
.inven_img img {position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%);}
.inven_txt1 {position: absolute; bottom: 2.222vw; left: 2.222vw; z-index: 10; font-size: 4.444vw; color: #fff; line-height: normal;}

#dataElement {display: none !important;}

#rankingArea {display: none;}
.ranking_sec {padding: 26.111vw 0;}
.ranking_ul {text-align: center;}
.ranking_ul > li {font-family: 'NanumMyeongjo', serif !important; font-size: 8.889vw; font-weight: 700; color: #020416; line-height: 1.75;}

#lastMsg {}
.lastMsg-sec {padding: 26.111vw 0;}
.lastMsg_txt1 {}
.lastMsg_txt2 {letter-spacing: -1px;}
.lastMsg_txt3 {margin-top: 13.333vw;}
.lastMsg_img1 {margin: 4.444vw auto;}

.pg_pquiz .stage22 #dataArea {display: none;}

.loading {display: none; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100vh; background: rgba(255,255,255,0.7);}