@charset "utf-8";
/* ===========================================
  landing-mbti
============================================*/
.mbti_wrapper #ld_header ,
.mbti_wrapper #ld_footer {display: none; }

.landing-mbti {margin: 8.571rem auto 3.571rem; }
.landing-mbti .form-data {text-align: center; }


.landing-mbti .visibility {display: none;} 


/* ------------------------------------------
	intro 
--------------------------------------------*/
.landing-mbti.intro {margin: 60px auto; }

.landing-mbti.intro .subtitle {font-size: 1.428rem; color: #000; text-align: center; font-weight: 900; }
.landing-mbti.intro .tit {color:#ffab60; font-size: 3.571rem; text-align: center; font-weight: 900; } 
.landing-mbti.intro .assistant {position: relative;padding-top: 3.571rem; font-size: 1.214rem; color: #232323; text-align: center; font-weight: 400; }
.landing-mbti.intro .assistant:after {content: ''; position: absolute; top: 0; left: 50%; widtH: 1px; height: 30px; background-color: #000; transform: translateX(-50%); }

.landing-mbti.intro .intro-thumbs {margin-top: 2.142rem; padding-top: 56.25%; background: url("/landing/images/mbti/mbti_intro.png") no-repeat center center; background-size: contain;  }
.landing-mbti .btn-main {display: block; width: calc(100% - 80px); margin: 0 auto; min-width: 300px; height: 80px; box-sizing: border-box; border: 1px solid #ff9536; border-radius: 40px; background-color: #ff9536; color: #fff; font-weight: 900; font-size: 2.857rem; line-height: 78px;}





/* ------------------------------------------
	mbti quiz  
--------------------------------------------*/

/* section-asking */
.section-asking .qusetion-index {margin-bottom: 10px; color: #2c2c2c; text-align: center; font-size: 18px; font-weight: 700; }

.section-asking .asking-q {font-size: 2.142rem; color: #232323; text-align: center; font-weight: 500; }
.section-asking .asking-q > strong {display: inline-block; font-weight: 700; }

/* section-answer */
.section-answer {margin-top: 1.428rem; padding: 0 10px; }
.section-answer .answer-figure {padding-top: 56.25%; background-repeat: no-repeat; background-position: top center; background-size: contain; }
.answer-figure img {max-width: 100%; vertical-align: middle;}

/* .section-answer .btn-answer-group {margin-top: -3.571rem; }*/
.btn-answer-group li {margin-top: 15px; }
.btn-answer-group li:first-child {margin-top: 0; }

.btn-answer-group .btn-answer {display: block; width: 100%; padding: 20px 40px; box-sizing: border-box; border-radius: 100px; background-color: #ff9536; font-size: 1.428rem; vertical-align: middle; color: #fff; text-align: center; font-weight: 400; }

/* 개인정보 */
.btn-defalut-group {margin: 2.142rem auto 0;}
.btn-defalut-group li {max-width: 100px; max-height: 100px; }


/* flex answer */
.btn-defalut-group.flex {
  display: -webkit-box; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
  display: -webkit-flex; /* Chrome */
  display: flex;
  margin: 0 auto;
  -webkit-flex-direction: row; /* Chrome */
  flex-direction: row; 
  -webkit-box-lines: single; /* ios 6-, safari 3.1-6 */
  -webkit-flex-wrap: wrap; /* Chrome */
  flex-wrap: wrap; 
  -webkit-box-pack: justify; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
  justify-content: center;
  -webkit-box-align: stretch; /* Android 2.1 ~ 4.3, ios 6-, safari 3.1-6 */
  align-items: stretch; /* Chrome */
  gap: 15px 0; /* 여백 */
}
.flex .btn-answer02 {display: table; margin: 0 auto; width: 100%; height: 100%; box-sizing: border-box; border-radius: 5px; background-color: #ff9536; text-align: center; color: #fff; transition: .3s; }
.flex .btn-answer02 > span {display: table-cell; color: #fff; vertical-align: middle; font-size: 1.714rem; font-weight: 500; line-height: normal;}

.btn-defalut-group.flex li {margin: 0 15px; flex-grow: 1; }

/* flex answer 한줄에 노출되는 갯수  */
.flex.flex-2 {max-width: 280px;  }
.flex.flex-2 li {width: 100px; height: 100px; }

.flex.flex-3 {max-width: 400px;}
.flex.flex-3 li {flex-basis: calc(33.333% - 15px); height: calc(33.333vw - 15px); }

.flex.flex-4 {max-width: 500px; }
.flex.flex-4 li {margin: 0 10px 0 0; flex-basis: calc(25% - 10px); height: calc(25vw - 10px); }
.flex.flex-4 li:nth-child(4n) {margin-right: 0;}

.flex.flex-5 li {margin: 0 10px; }
.flex.flex-5 li {margin: 0 10px 0 0; flex-basis: calc(20% - 10px); height: calc(20vw - 10px); }
.flex.flex-5 li:nth-child(5n) {margin-right: 0;}

/* 기타 갯수*/
/* .flex.flex-etc {max-width: 400px;}
.flex.flex-etc li {margin: 0 15px; width: 100px;  height: 100px; } */

/* 다음 버튼 */
.landing-mbti .btn-bottom-group .btn-next {display: table; margin: 0 auto; width: 100px; height: 100px; box-sizing: border-box; border-radius: 5px; background-color: #ff9536; text-align: center; color: #fff; transition: .3s; }
.landing-mbti .btn-bottom-group .btn-next > span {display: table-cell; color: #fff; vertical-align: middle; font-size: 1.714rem; font-weight: 500; line-height: normal;}

/* ------------------------------------------
	result
--------------------------------------------*/
.landing-mbti.result {margin: 60px auto;}
.landing-mbti.result .subtitle {margin-bottom: 5px; font-size: 1.428rem; color: #000; text-align: center; font-weight: 900; }
.landing-mbti.result .tit {color:#ffab60; font-size: 2.714rem; text-align: center; font-weight: 900; word-break: keep-all;} 
.landing-mbti.result .type-txt {font-size: 1.428rem; color: #ffab60; text-align: center; font-weight: 400; }
.landing-mbti.result .assistant {position: relative; margin-bottom: 2.142rem; padding-top: 2.142rem; font-size: 1rem; color: #232323; text-align: center; font-weight: 400; }
.landing-mbti.result .assistant > em {color: #ff7254; font-weight: 700; font-size: 1.428rem; }

.landing-mbti.result .btn-bottom-group {max-width: 400px; padding: 0 10px; box-sizing: border-box; text-align: center; }
.landing-mbti .btn-receive {height: 60px; border-radius: 40px; border: 1px solid #ff9536; background-color: #ff9536; font-size: 1.571rem; color: #fff; font-weight: 900; line-height: 58px; }

.landing-mbti .btn-bottom-group .my-mbti {height: 60px; border-radius: 40px; border: 1px solid #ff9536; background-color: #fff; font-size: 1.571rem; color: #ff9536; font-weight: 900; line-height: 58px; }
.landing-mbti .btn-bottom-group .btn-return {height: 60px; border-radius: 40px; border: 1px solid #e1e1e1; background-color: #ececec; font-size: 1.571rem; color: #5c5c5c; font-weight: 900; line-height: 58px;}
/* 
	result profile
----------------------------------------------*/
.landing-mbti .section-product {padding: 0 10px; }
.section-product .mbti-type {display: none; transition: .3s; }
.section-product .mbti-type.current {display: block; }

/* area-display ::유형별 결과 */

.display-thumbs {padding-top: 50%; background-repeat: no-repeat; background-size: contain; background-position: center;}

.display-range {margin-top: 1.428rem; padding: 1.714rem 0; box-sizing: border-box; border: 1px solid #c0c0c0; text-align: center; }
.display-range > li + li {margin-top: 10px; }
.display-range .range-tit {display: inline-block; font-size: 1.857rem; color: #000; font-weight: 500; text-align: right; vertical-align: middle; }

.display-range .range-score {display: inline-block; vertical-align: middle; }
.display-range .range-score:after {content: ''; display:  block; clear: both; visibility: hidden;}

.range-score li {float: left; width: 16px; height: 29px; margin-left: 7px; box-sizing: border-box; border-radius: 8px; background-color: #d1d1d1;}
.range-score li.on:nth-child(1) {background-color: #a080e1; }
.range-score li.on:nth-child(2) {background-color: #997de2; }
.range-score li.on:nth-child(3) {background-color: #917ae3; }
.range-score li.on:nth-child(4) {background-color: #8977e3; }
.range-score li.on:nth-child(5) {background-color: #8375e4; }
.range-score li.on:nth-child(6) {background-color: #7c7be4; }
.range-score li.on:nth-child(7) {background-color: #7780e4; }
.range-score li.on:nth-child(8) {background-color: #7187e4; }
.range-score li.on:nth-child(9) {background-color: #698de4; }
.range-score li.on:nth-child(10) {background-color: #6293e3; }

/* area-summary ::유형별 결과 멘트 */
.area-summary section {padding: 0 30px; }
.area-summary .summary-tit {padding-bottom: 1.857rem; color: #f99740; font-size: 1.857rem; font-weight: 700; text-align: center;}
.area-summary > section {margin-top: 2.857rem;  }
.area-summary > section + section {padding-top: 2.857rem; box-sizing: border-box; border-top: 2px solid #ddd;}


.area-summary .area-txt > strong {display: block; margin-bottom: 10px; font-weight: 700; color: #232323; font-size: 2rem; }
.area-summary .list-dash li {color: #232323; font-size: 1.142rem; font-weight: 300; line-height: 1.4; }
.area-summary .list-dash li:before {font-size: 1rem; color: #232323;}
.area-summary .list-dash li + li {margin-top: 10px; }

/* area-pair ::유형별 궁합 */
.area-pair {margin-top: 4.285rem; padding: 1.714rem 0; box-sizing: border-box; border: 2px solid #d1d1d1; }
.area-pair .result-tit {display: block; margin-bottom: 2.142rem; text-align: center; color: #000; font-size: 1.857rem; font-weight: 700; }
.area-pair .pair-group li {float: left; width: 50%; }
.area-pair .pair-group:after {content: ''; display:  block; clear: both; visibility: hidden;}

.area-pair .pair-tit {display: block; margin-bottom: 1rem; text-align: center; color: #e377cb; font-weight: 700; font-size: 1.857rem; }
.area-pair .pair-thumbs {}
.area-pair .pair-name {display: block; margin-top: 8px; text-align: center; color: #000; font-size: 1.142rem; font-weight: 400; }

.area-pair .bad .pair-tit {color: #8977e3;}
.pair-thumbs {margin: 0 auto; padding-top: 50%; background-repeat: no-repeat; background-size: contain; background-position: center;  }

.pair-thumbs img {max-width: 100%; }

.btn-view {}

/* 
	section-profile
----------------------------------------------*/
.landing-mbti .section-profile {margin-top: 5.571rem; padding: 0 10px; }
.section-profile .result-tit {color: #000; font-size: 1.857rem; font-weight: 700; text-align: center; }
.section-profile .now {display: block; margin-top: 8px; text-align: center; font-size: 1rem; color: #5c5c5c; font-weight: 400; }

.landing-mbti .profile {margin-top: 1.428rem; }
.landing-mbti .profile:after {content: ''; display:  block; clear: both; visibility: hidden;}
.landing-mbti .profile > li {float: left; width: calc((100% - 5px) / 2); box-sizing: border-box; border: 1px solid #ededed; }
.landing-mbti .profile > li:nth-child(odd) {margin-right: 5px; }
.landing-mbti .profile-thumbs img {width: 100%; height: 100%; vertical-align: middle; }
.landing-mbti .profile-info {padding: 10px 1.428rem 1.428rem; }
.landing-mbti .profile .list-dot li:before {top: 7px; background-color: #000; }

.landing-mbti .notify-guide {margin-top: 20px; text-align: center; font-size: 1rem; color: #5c5c5c; font-weight: 400;  }