/* 기초 세팅 */
@import url("//fonts.googleapis.com/earlyaccess/notosanskr.css");
:lang(ko) { font-family: "Noto Sans KR", sans-serif; }

@font-face {
    font-family: 'KCCChassam';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCCChassam.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

*{padding: 0; margin: 0; font-family: "Noto Sans KR";}
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;}

body{width: 100%; height: 100%; max-width: 500px; margin: 0 auto; background: #fff; overflow: hidden; letter-spacing: -0.5px;}


/* intro */
.root{background: #fff; user-select: none; display: flex; flex-direction: column; justify-content: flex-start; position: fixed; max-width: 500px; width: 100%; height: 100%; overflow: hidden;}
#wrapper{flex: 1; overflow-y: auto; z-index: 0;}
.intro_cont{display: block; text-align: center;}
.intro_cont .logo_img{position: relative; width: 100px;}
.intro_cont .intro_img{width: 100%; max-width: 400px; margin: 30px auto 0; }
.intro_cont .intro_main_img {margin-bottom: min(60px,6vw);}
.intro_cont .intro_main_img img{width: 100%;}
.intro_cont .intro_main_title,
.intro_cont .intro_sub_title{font-stretch: normal; font-style: normal; text-align: center; color: #222; padding: 0 10px;}
.intro_cont .intro_main_title{font-family: 'KCCChassam'; font-size: min(16px,5vw); font-weight: 500; line-height: 1.5; letter-spacing: -1px; margin: 2.5vw auto 1.5vw;}
.intro_cont .intro_main_title span{color: #AA87FF; font-family: 'KCCChassam'; font-size: min(44px,9vw);}
.intro_cont .intro_sub_title{font-size: 1em;font-weight: 500;line-height: normal;letter-spacing: -0.5px;margin-bottom: 0.5em;color: #222;margin-top: 1.2em;}
.intro_cont .intro_startBtn{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 335px; height: 60px; border-radius: 50px; background: #AA87FF; margin: auto auto 40px; padding: 0 30px; cursor: pointer;}
.intro_cont .intro_startBtn_txt{font-size: 1.3em; font-weight: 700; color: #fff;}
.intro_cont .intro_count_wrap{font-weight: 400; font-size: 15px; color: #000; text-align: center; margin-bottom: 60px;}

/* 질문 */
.question_cont{display: block; width: 100%; text-align: center;}
.question_cont .q_indi{position: relative; width: calc(100% - 60px); height: 36px; margin: 12% auto 20px; color: #878787; line-height: 36px;}
.question_cont .q_indi .little_title{float: left;}
.question_cont .q_indi .q_num_wrap{float: right;}
.question_cont .slideList{width: 100%; margin-bottom: 6rem;}
/* .question_cont .slideList .slick-arrow{display: none;} */
.q_text{width: 100%; min-height: 176px; word-break: keep-all; display: table; justify-content: center; align-items: center; font-size: 1.4em; font-weight: bold; line-height: 1.4; text-align: center; color: #222; padding: 0 40px; margin-bottom: 35px;}
.q_text .question{display: table-cell; vertical-align: middle;}
.q_text .me_point{color: #e84646;}
.q_answers .q_answers_item{display: flex; justify-content: center; align-items: center; flex-direction: column; width: calc(100% - 60px); min-height: 92px; border-radius: 50px; font-size: 16px; line-height: 1.63; letter-spacing: -1px; font-weight: 600; text-align: center; padding: 20px 25px; margin: 0 30px 36px 30px; cursor: pointer; word-break: keep-all;}
.q_answers .q_answers_item{background-color: #F5F5F5; color: #585858;}
.q_answers .q_answers_item:hover{background-color: #AA87FF; color: #fff;}
.q_answers .q_answers_item.on{background-color: #AA87FF; color: #fff;}
.question_cont .logo_img{position: relative; width: 100px;}
/* 로딩 */
.loading{display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 15%;}
.loading h2{color: #ffffff;}
.loading_layer{position:absolute;left:0;top:0;width:100%;height:100%;z-index:100;display: none;}
.loading_layer .dim{position:absolute;left:0;top:0;width:100%;height:100%;background: url(//img.x1.co.kr/x1/images/common/bg_dim2.png) repeat 0 0; }

.loading .spinner{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 10%;
    background: radial-gradient(farthest-side,#AA87FF 94%,#0000) top/9px 9px no-repeat,
    conic-gradient(#0000 30%,#AA87FF);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 0);
    animation: spinner-c7wet2 1s infinite linear;
}

@keyframes spinner-c7wet2 {
    100% {
        transform: rotate(1turn);
    }
}

/* 결과화면 */
.result_cont{width: 100%; height: 100%; overflow-y: auto; padding: 15% 20px 0; text-align: center;}
.result_sub_title,
.result_main_title{text-align: center; color: #222;}
.result_sub_title{word-break: keep-all; font-size: 1.3em; font-weight: 500; line-height: 1.59; letter-spacing: -0.5px; font-family: KCCChassam;}
.result_main_title{font-size: 40px; font-weight: bold; line-height: 1.28; letter-spacing: -0.63px; margin-bottom: 36px;}
.result_main_title .main_title_back{padding: 0 .3em; line-height: 1; font-family: KCCChassam;}
/*.result_img_wrap{position: relative; width: 200px; height: 200px; margin: 0 auto 30px;}*/
/*.result_img_wrap img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%;}*/
.result_img_wrap{position: relative; margin: 0 auto 30px;}
.result_img_wrap img{max-width: 100%; max-height: 100%;}
.result_txt{word-break: keep-all; font-size: 1.5em; font-weight: 700; line-height: normal; margin-bottom: 5px; font-family: KCCChassam;}
.result_detail_wrap{text-align: left; border-radius: 10px; background-color: #fff; padding: 28px 28px 36px; margin:40px 0 15px; border: 1px solid #eee;}
.result_detail_wrap .recomend_wrap{margin-top: 1em; text-align: center; color: #000; font-weight: bold; font-size: 1.2em; font-family: KCCChassam;}
.result_detail_wrap .recomend_wrap span {font-family: KCCChassam; color: #AA87FF;}
.result_wrap_list{display: flex; flex-direction: column;}
.result_wrap_list li{display: inline-block; word-break: keep-all; font-size: 16px; line-height: 1.7; letter-spacing: -1px; text-indent: -9px; margin-bottom: 11px;}
.result_wrap_list li::before{content: "\2022"; color: #000; font-size: 1em; font-weight: 500; display: inline-block; width: 1em; margin-left: -0.7em; margin-right: 4px; text-align: right; line-height: 1;}
.result_percent{display: flex; flex-direction: column; justify-content: center; align-items: center; height: 180px; border-radius: 10px; border: 1px solid #eee; background-color: #fff; padding: 30px 20px; margin-bottom: 15px;}
.result_percent .result_title_txt{font-weight: 700; font-size: 20px; margin-bottom: 24px;}
.result_percent .result_percent_num{font-size: 45px; color: #AA87FF; font-weight: 700;}
.result_chemistry{display: flex; margin-bottom: 15px;}
.result_chemistry .result_cm_inner{width: calc(50% - 5px); height: fit-content; min-height: 270px; padding:10px 0; border-radius: 10px; overflow: hidden; border: 1px solid #eee; background: #ffffff;}
.result_chemistry .result_cm_inner:first-child{margin-right: 10px;}
.result_chemistry .result_cm_title{font-size: 20px; font-weight: 700; margin-bottom: 10px; height: 3em; line-height: 3em;}
.result_chemistry .result_cm_img{position: relative; width: 126px; height: 126px; margin: 0 auto; }
.result_chemistry .result_cm_img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%;}
.result_chemistry .result_cm_cont{display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 72px; word-break: keep-all; font-size: 16px; font-weight: 400; line-height: 1.56; padding: 0 1em; display: none;}
.result_chemistry .result_cm_name{font-weight: 600; font-size: 1.1em; margin-top: 1em; color: #AA87FF}
.result_banner_tit{display: block;width: 100%;margin-top: 60px;}
.result_banner_tit img {max-width: 100%; height: auto;}
.result_banner{display: block; width: 100%; overflow: hidden; border-radius: 10px; margin-bottom: 80px; /*border: 1px solid #eee;*/}
.result_banner a{display: block; font-size: 0;}
.result_banner img{max-width: 100%; height: auto;}
.result_share_title{font-size: 20px; font-weight: 500; margin-bottom: 45px; color: #6b6b6b;}
.result_share_btns{display: flex; align-items: center; justify-content: center; flex-flow: wrap; margin-bottom: 50px;}
.result_share_btns .result_share_btn{height: 60px; margin:0 10px 30px;}
.result_share_btns .result_share_btn img{object-fit: contain; width: 60px; height: 60px; cursor: pointer;}

.result_reBtn{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 50px; border-radius: 50px; background: #AA87FF; margin: 25px auto; padding: 0 30px; cursor: pointer;}
.result_reBtn .result_reBtn_txt{font-size: 1.1em; font-weight: 700; color: #fff;}
.result_reBtn ~ .result_reBtn {margin-bottom: 80px;}
.result_cont > img{position: relative; width: 100px; margin-bottom: 60px;}

::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track{background:#f1f1f1;}
::-webkit-scrollbar-thumb{background:#ccc;}
::-webkit-scrollbar-thumb:hover{background:#aaa;}


@media all and (max-width:767px){
  .intro_cont .intro_img{margin-top: 2vw;}
    .intro_cont .intro_main_img {width: 100%;}
  .intro_cont .intro_sub_title{margin-bottom: 0.5rem; font-size: 4vw;font-weight:400}
  .intro_cont .intro_main_title{line-height:1.2; margin:5vw auto 4vw}
  .intro_cont .intro_startBtn{margin: auto auto 2rem; width: 87%;}
  .intro_cont .intro_count_wrap{margin-bottom: 3rem;}
  .question_cont .q_indi{font-size: 3.5vw; margin: 5% auto 0;}
  .question_cont .slideList{margin-bottom: 30vw;}
  .q_text{font-size: 5.5vw; min-height: 110px; margin: 20px 0 35px;}
  .q_answers .q_answers_item{font-size: 4vw; font-weight: 500;}
  /* 로딩 */
  .loading{width: 40%;}
  .loading iframe {border:none;}
  /* 결과 */
  .result_img_wrap {margin:0 auto 3vw;}
  .result_cont{padding: 7% 20px 0;}
  .result_sub_title{font-size: min(20px,4.8vw);}
  .result_main_title{font-size: min(40px,9vw); margin-bottom: 3vw;}
  .result_txt{font-size: min(24px,5vw);}
  .result_banner_tit{margin-top: 40px;}
  .result_wrap_list li{font-size: 1rem;}
  .result_chemistry .result_cm_title{margin-bottom: 2.5vw;}
  .result_chemistry .result_cm_inner{min-height: 285px;}
  .result_chemistry .result_cm_img{width: 94%;margin: 0 auto;}
  .result_share_btns{margin-bottom: 30px;}
  .result_share_btns .result_share_btn{margin-bottom: 5vw;}
  .result_share_btns .result_share_btn img{}
  .result_percent .result_title_txt{font-size: min(20px,4.2vw);}
  .result_percent .result_percent_num{font-size: min(45px,11vw);}
  .result_detail_wrap .recomend_wrap{font-size: min(21px,6vw);}
  .result_banner{margin-bottom: 60px;}
}
/* 익스플로러 */
@media screen and(-ms-high-contrast: active),
(-ms-high-contrast: none){
		/* style 작성 */
    .intro_cont .intro_img{background: url(//img.x1.co.kr/x1/images/mbti/ie_main_img.png) center center no-repeat; background-size: contain;}
    .q_answers .q_answers_item{align-items: stretch;}
    .q_answers .q_answers_item{display: -ms-flexbox; -ms-flex-pack: center;}
    
    .loading{background: url(http://img.x1.co.kr/x1/images/mbti/loading_ie.png) center center no-repeat; background-size: contain; height: 170px;}
    .loading h2{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; color: #fff;}
    
}