@font-face {
    font-family: 'S-CoreDream-4Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-8Heavy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:lang(ko) { font-family: "S-CoreDream-4Regular", "Noto Sans KR"; }

*{padding: 0; margin: 0; font-family: "S-CoreDream-4Regular";}
li {list-style: none; outline: none;}
a {text-decoration: none; color: inherit; outline: none;}
body * {box-sizing: border-box;}
img:focus {outline: none;}
button{border: none; outline: none;}
button:focus{outline:none;}
input:focus{outline:none;}
div:focus{outline:none;}
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.fl{float: left;}
.fr{float: right;}
button:disabled{background: #eee; box-shadow: 0 2px 4px 0 #8a8a8a; color: #b3b3b3;}
.pink_btn{width: 80vw; height: 12vw; background: #f049c1; color: #fff; border-radius: 50px; font-size: 5vw; font-weight: bold; cursor: pointer; box-shadow: 0 4px 4px 0 #c5349c; margin-bottom: 5vw;}
.pink_btn a{display: block; width: 100%; height: 100%; line-height: 12vw;}
/* ======================================= main ======================================= */
.wrap{position: relative; display: -webkit-box; display: -ms-flexbox; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; width: 100%; background: #fff;}
/* notice */
.wrap .notice.on{background: #f049c1; color: #fff; width: 100%; height: 10vw; line-height: 10vw; text-align: center; font-size: 4vw; font-weight: bold; display: block;}
.wrap .notice span{font-weight: normal; font-size: 3vw; letter-spacing: -0.09em;}
/* cont */
.main_cont{width: 100%; height: 100%;}
.main_cont .main_box{position: relative; width: 100%; height: 100%; text-align: center;}
.main_cont .main_box h1.main_logo{padding: 10vw 0 7vw;}
.main_cont .main_box h3.sub_title{font-size: 4vw; font-weight: 300; letter-spacing: -0.09em;}
.main_cont .main_box h1.main_title{font-family: 'S-CoreDream-8Heavy'; font-size: 10vw; margin-bottom: 10vw;}
.main_cont .main_box .img_box{width: 100%; height: auto;}
.main_cont .main_box .img_box img{width: 65%;}
.main_cont .main_box .txt_box{position: absolute; bottom: 0; left: 0; width: 100%; height: 48vw; line-height: 1.6; font-size: 4vw; background: #1c3361; color: #fff; padding-top: 8vw; font-weight: 400;}
.main_cont .main_box .txt_box > button{position: absolute; bottom: 8vw; left: 50%; transform: translateX(-50%); margin-bottom: 0;}
.main_cont .main_box .txt_box > button a{display: block; width: 100%; height: 100%; line-height: 12vw;}

/* ======================================= 질문 ======================================= */
.wrap.question{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; min-height: 150vw; background: #fff;}
.wrap.question .question_cont{width: 100%; height: 100%;}
.question_cont .nav_wrap{position: relative; width: 100%; height: 14vw; line-height: 14vw; padding: 0 4vw; font-size: 5vw; font-weight: bold;}
.question_cont .nav_wrap .progress_bar{position: absolute; left: 0; bottom: 0; width: 100%; height: 1vw; background: #e5e5e5;}
.question_cont .nav_wrap .progress_bar p{position: absolute; left: 0; bottom: 0; width: 10%; height: 1vw; background: #f049c1; transition: width 0.6s;}
.question_cont .q_slide_list{width: 100%; height: calc(100% - 14vw);}
.question_cont .q_slide_list .slick-list,
.question_cont .q_slide_list .slick-list .slick-track{height: 100%;}
.question_cont .q_slide_list .q_slideCont{height: 100%;}
.question_cont .q_slide_list .q_slideCont .q_txt{width: 100%; height: 25%; font-size: 5.5vw; padding: 7vw 5vw; line-height: 1.4;}
.question_cont .q_slide_list .q_slideCont .q_txt .question > span{display: block; color: #858585; font-size: 4vw; line-height: 1; margin-top: 1vw;}
.question_cont .q_slide_list .q_slideCont .q_answers_wrap{position: relative; width: 100%; height: 75%;}
/* 이미지 없는 라디오 형 */
.q_answers_wrap ul.q_answers.not_img_radio{width: 90%; height: 55%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 2vw;}
.q_answers_wrap ul.q_answers.not_img_radio li{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 5vw; margin-bottom: 2vw;}
.q_answers_wrap .q_answers li input{display: none;}
.q_answers_wrap .q_answers li input[type="radio"] + label,
.q_answers_wrap .q_answers li input[type="checkbox"] + label{width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 30px; background: #f9f9f9;}
.q_answers_wrap .q_answers li input[type="radio"] + label > span,
.q_answers_wrap .q_answers li input[type="checkbox"] + label > span{position: relative; width: 8vw; height: 8vw; background: #fff; border-radius: 50%; display: inline-block; vertical-align: middle; margin: 0 2vw;}
.q_answers_wrap .q_answers li input[type="radio"] + label span > span,
.q_answers_wrap .q_answers li input[type="checkbox"] + label span > span{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 5vw; height: 5vw; background: #eee; display: inline-block; border-radius: 50%;}
.q_answers_wrap .q_answers li input[type="radio"]:checked + label,
.q_answers_wrap .q_answers li input[type="checkbox"]:checked + label{background: #c777ee;}
.q_answers_wrap .q_answers li input[type="radio"]:checked + label span > span,
.q_answers_wrap .q_answers li input[type="checkbox"]:checked + label span > span{background: #b954eb;}
.q_answers_wrap ul.hori_img_wrap{width: 90%; height: 20%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}
.q_answers_wrap ul.hori_img_wrap li{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.q_answers_wrap ul.hori_img_wrap li img{width: auto; height: auto; max-width: 60%; max-height: 60%;}
.q_answers_wrap ul.hori_img_wrap.q3 li img{max-width: 90%; max-height: 90%;}
.q_answers_wrap .next_btn,
.q_answers_wrap .finish_btn{position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); margin-bottom: 0;}
/* 이미지 있는 라디오형 */
.q_answers_wrap ul.q_answers.img_radio{width: 90%; height: 55%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around;}
.q_answers_wrap ul.q_answers.img_radio li{flex: 0 1 auto; width: 45%; height: 50%; margin: 2vw 0;}
.q_answers_wrap ul.q_answers.img_radio li input[type="radio"] + label{width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.q_answers_wrap ul.q_answers.img_radio li input[type="radio"] + label .answer_img{width: 100%; height: 60%;}
.q_answers_wrap ul.q_answers.img_radio li input[type="radio"] + label .answer_img img{margin: 0 auto; height: 90%;}
.q_answers_wrap ul.q_answers.img_radio li input[type="radio"] + label .answer_txt{font-size: 4.5vw; font-weight: bold;}
/* 이미지 2개 라디오 */
.q_answers_wrap ul.q_answers.img_radio2{width: 90%; height: 65%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around;}
.q_answers_wrap ul.q_answers.img_radio2 li{flex: 0 1 auto; width: 45%; height: 100%; margin: 0 2vw;}
.q_answers_wrap ul.q_answers.img_radio2 li input[type="radio"] + label{width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.q_answers_wrap ul.q_answers.img_radio2 li input[type="radio"] + label .answer_img{width: 100%; height: 60%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.q_answers_wrap ul.q_answers.img_radio2 li input[type="radio"] + label .answer_img img{width: 70%;}
.q_answers_wrap ul.q_answers.img_radio2 li input[type="radio"] + label .answer_txt{text-align: center; word-break: keep-all; padding: 0 1vw; font-size: 4vw; font-weight: bold; width: 100%;}
/* 체크박스 */
.q_answers_wrap ul.q_answers.list_checkbox{width: 90%; height: 65%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around;}
.q_answers_wrap ul.q_answers.list_checkbox li{flex: 0 1 auto; width: 45%; height: 28%; margin: 2vw 0; }
.q_answers_wrap ul.q_answers.list_checkbox li input[type="checkbox"] + label{width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #f9f9f9;}
.q_answers_wrap ul.q_answers.list_checkbox li input[type="checkbox"]:checked + label{background: #c777ee;}
.q_answers_wrap ul.q_answers.list_checkbox li input[type="checkbox"] + label .answer_txt{font-size: 5vw; text-align: center; font-weight: bold;}
.q_answers_wrap ul.q_answers.list_checkbox li input[type="checkbox"] + label .answer_txt > p{font-size: 3.5vw;}
/* 팝업 */
.mentor_popup_m{display: block;}
.mentor_popup_m.close{display: none;}
.mentor_popup_m .popup_box{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 888; text-align: center;}
.mentor_popup_m .popup_box .close_btn{position: absolute; width: 6vw; height: 6vw; top: 3vw; right: 3vw; cursor: pointer; z-index: 999;}
.mentor_popup_m .popup_box .close_btn a{display: block; width: 100%; height: 100%;}
.mentor_popup_m .popup_box .close_btn img{width: 100%;}
.mentor_popup_m .popup_box .result_img{position: relative; width: 100%; height: 65vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.mentor_popup_m .popup_box .result_img img{width: 80%;}
.mentor_popup_m .popup_box .result_pop_txt{font-family: 'S-CoreDream-8Heavy'; position: relative; background: #f9f9f9; width: 90%; height: 56vw; font-size: 5.5vw; color: #3d3a3a; line-height: 1.4; padding: 7vw 5vw; margin: 0 auto 10vw; border-radius: 20px; text-align: center;}
.mentor_popup_m .popup_box .result_pop_txt .pink_cr{color: #f049c1; font-family: inherit;}
.mentor_popup_m .popup_box .result_pop_txt .pink_cr.padding_l40{position: relative; padding-left: 8vw; display: inline-block; margin: 2vw 0;}
.mentor_popup_m .popup_box .result_pop_txt .gift_img{position: absolute; left: 0; width: 8vw; height: 8vw; background: url(//img.x1.co.kr/x1/images/mentor/gift.png) center no-repeat; background-size: contain;}
.mentor_popup_m .popup_box .result_pop_txt p{font-size: 3.4vw;}

/* ======================================= 결과 ======================================= */
.wrap.result .notice{background: #f049c1; color: #fff; width: 100%; height: 10vw; line-height: 10vw; text-align: center; font-size: 4vw; font-weight: bold; display: block;}
/* 비로그인 화면 */
.m_not_login.on{position: relative; width: 100%; height: 40vw; background: #32334f; display: block;}
.m_not_login.off{display: none;}
.m_not_login > img{position: absolute; bottom: 0; right: 0;}
.m_not_login .inner{position: relative; width: 90%; height: 100%; margin: 0 auto; padding: 4vw 0;}
.m_not_login .inner > .txt_wrap{text-align: left; color: #fff; font-size: 4.5vw; font-weight: bold; line-height: 1.5;}
.m_not_login .inner > .txt_wrap span.color_y{color: #ffd03e;font-size: 4.5vw; font-weight: bold;}
.m_not_login .inner > .txt_wrap p{font-size: 3vw; font-weight: normal; line-height: 1; padding-top: 2vw;}
.m_not_login .inner > .btn_wrap{position: absolute; left: 0; bottom: -6vw; width: 100%; height: 9vw;}
.m_not_login .inner > .btn_wrap ul{width: 80%; height: 100%; margin: 0 auto;}
.m_not_login .inner > .btn_wrap ul li{float: left; width: 49%; height: 100%;}
.m_not_login .inner > .btn_wrap ul li:first-child{margin-right: 1%;}
.m_not_login .inner > .btn_wrap ul li:last-child{margin-left: 1%;}
.m_not_login .inner > .btn_wrap ul li button{width: 100%; height: 100%; background: #f049c1; border-radius: 5px; color: #fff; font-size: 4vw; font-weight: bold; cursor: pointer;}
.m_not_login .inner > .btn_wrap ul li button a{display: block; width: 100%; height: 100%; line-height: 9vw;}

/* 결과화면 */
.wrap.result .notice{position: relative; font-size: 5vw; text-align: left; padding: 0 5vw; height: 12vw; line-height: 12vw;}
.wrap.result .notice .close_btn{position: absolute; width: 5vw; height: 5vw; top: 3.5vw; right: 3vw; cursor: pointer;}
.wrap.result .notice .close_btn img{width: 100%; display: block;}
.result{width: 100%; height: auto; background: transparent;}
.result .m_result_cont{position: relative; width: 100%; height: 100%; margin-top: 10vw;}
.result .m_result_cont > .txt_wrap{font-size: 6vw; padding: 4vw; margin-bottom: 10vw;}
.result .m_result_cont > .txt_wrap b{position: relative; margin-top: 3vw; display: inline-block;}
.result .m_result_cont > .txt_wrap b::after{content: ''; width: 100%; height: 20%; background: #f049c1; position: absolute; left: 0; bottom: .5vw; z-index: -1; border-radius: 10px;}
.result .m_result_cont > .m_result_list{position: relative; margin: 5vw 0;}
.m_result_list li.back{height: auto; border-radius: 20px; margin: 1.5vw;}
.m_result_list li.back:first-child{background: #fff0c9;}
.m_result_list li.back:nth-child(2){background: #ededed;}
.m_result_list li.back:nth-child(3){background: #f3e5e5;}
.m_result_list li .img_wrap{position: relative; width: 100%; height: 90vw;}
.m_result_list li .img_wrap .expert_img{position: relative; width: 100%; height: 100%; overflow: hidden;}
.m_result_list li .img_wrap .expert_img a{display: block; width: 100%; height: 100%;}
.m_result_list li .img_wrap .expert_img img{margin: 0 auto; height: 100%;}
.m_result_list li .img_wrap .expert_img > h1{position: absolute; bottom: 2.5vw;  width: 100%; text-align: center; font-size: 6vw; font-weight: bold; padding: 1.3vw 0;}
.m_result_list li:first-child .img_wrap .expert_img > h1{background: #fff0c9;}
.m_result_list li:nth-child(2) .img_wrap .expert_img > h1{background: #ededed;}
.m_result_list li:nth-child(3) .img_wrap .expert_img > h1{background: #f3e5e5;}
.m_result_list li .img_wrap .grade_img{position: absolute; top: 3vw; left: 3vw; width: 12vw; height: 12vw;}
.m_result_list li .img_wrap .grade_img img{width: 100%;}
.m_result_list li .info_wrap{padding: 8vw 4vw;}
.m_result_list li .info_wrap .cont{padding: 4vw 0; min-height: 62vw;}
.m_result_list li .info_wrap .cont + .cont{border-top: 1px dotted #000;}
.m_result_list li .info_wrap .cont h3{font-size: 5vw; margin-bottom: 2vw;}
.m_result_list li .info_wrap .cont ul{width: 92%; height: auto; margin-left: auto;}
.m_result_list li .info_wrap .cont ul li{list-style: disc; font-size: 4vw;}
.m_result_list li .info_wrap .btn_wrap{width: 90%; height: 13vw; margin: 0 auto; margin-top: 5vw;}
.m_result_list li .info_wrap .btn_wrap .join_btn{width: 100%; margin: 0 auto; height: 100%; background: #f049c1; color: #fff; font-size: 5vw; border-radius: 50px; font-weight: bold; cursor: pointer;}
.m_result_list li .info_wrap .btn_wrap .join_btn a{display: block; width: 100%; height: 100%; line-height: 13vw;}
.m_result_list .slick-dots{width: 50%; margin: 8vw auto; text-align: center;}
.m_result_list .slick-dots li{display: inline-block;}
.m_result_list .slick-dots li + li{margin-left: 5vw;}
.m_result_list .slick-dots li button{display: inline-block; width: 4vw; height: 4vw; background: #c4c4c4; text-indent: -9999px; border-radius: 50px;}
.m_result_list .slick-dots li.slick-active button{background: #f049c1;}
.recomend_cont{background: #1c3361; padding: 4vw;}
.recomend_cont h1{color: #fff; font-size: 5.5vw; margin-bottom: 4vw; padding: 0 2vw;}
.recomend_cont .m_recomend_list{width: 100%; height: auto;}
.m_recomend_list li{position: relative; width: auto; height: 60vw; background: #fff; border-radius: 20px; overflow: hidden; margin: 0 2vw;}
.m_recomend_list li a{ display: block; width: 100%; height: 100%;}
.m_recomend_list li a .txt_wrap{width: 70%; padding: 5vw 0 5vw 5vw; word-break: keep-all;}
.m_recomend_list li a .txt_wrap .type{color: #f049c1; font-size: 3.2vw; margin-bottom: 3vw;}
.m_recomend_list li a .proName{font-size: 6vw; font-weight: bold; margin-bottom: 4vw;}
.m_recomend_list li a .explain{color: #7e7e7e; font-size: 3.8vw; margin-bottom: 4vw;}
.m_recomend_list li a .hashtag{position: absolute; left: 5vw; bottom: 5vw; font-size: 3.5vw;}
.m_recomend_list li a .img_wrap{width: 30%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;}
.m_recomend_list li a .img_wrap img{position: relative; bottom: 0; left: -5vw; width: 140%;}
.m_recomend_list .slick-dots{width: 50%; margin: 5vw auto 0; text-align: center;}
.m_recomend_list .slick-dots li{display: inline-block; height: auto; background: transparent;}
.m_recomend_list .slick-dots li + li{margin-left: 5vw;}
.m_recomend_list .slick-dots li button{display: inline-block; width: 4vw; height: 4vw; background: #c4c4c4; text-indent: -9999px; border-radius: 50px;}
.m_recomend_list .slick-dots li.slick-active button{background: #f049c1;}

/* ======================================= 공유하기 ======================================= */
.result_share_wrap{width: 100%; height: auto; padding: 4vw 6vw;}
.result_share_wrap h1{font-size: 5.5vw; margin-bottom: 4vw;}
.result_share_wrap ul{width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 8vw 0;}
.result_share_wrap ul li{flex: auto; width: 33.3333%; text-align: center; margin-bottom: 6vw;}
.result_share_wrap ul li button{background: transparent; width: 15vw;}
.result_share_wrap ul li button img{width: 100%;}
/* 버튼 영역 */
.finish_btn_wrap{width: 100%; height: auto; margin-bottom: 10vw;}
.finish_btn_wrap ul{width: 90%; height: auto; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.finish_btn_wrap ul li{width: 100%; margin-bottom: 4vw;}
.finish_btn_wrap ul li button{width: 100%; height: 14vw; border-radius: 50px; font-size: 5vw; background: #f049c1; color: #fff; font-weight: bold; box-shadow: 0 4px 4px 0 #c5349c;}
.finish_btn_wrap ul li button a{display: block; width: 100%; height: 100%; line-height: 14vw;}