@charset "utf-8";

/* 마진과 패딩의 초기화 */
a, abbr, acronym, address,
b, blockquote, big, body,
center, caption, cite, code, command,
dd, del, dfn, dl, div, dt,
em, embed,
fieldset, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img,
label, legend, li,
object, ol,
p, pre,
q,
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr,
u, ul,
var {margin:0; padding:0; list-style:none; text-decoration:none;}

/* 헤더 폰트 사이즈 초기화 */
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal}

/* 리스트의 스타일 제거 */
ol, ul {list-style:none}

/* 폰트 강조 특성 초기화 */
address, caption, cite, code, dfn, em,
strong, th, var {font-style :normal; font-weight:normal}

/* 테이블 스타일 초기화 */
table {border-collapse:collapse; border-spacing:0}

/* 이미지 및 필드셋에서 보더표시 초기화 */
fieldset, img {border:0}

img, input, button, select, textarea {vertical-align:middle; font-size:15px; font-family:'Lato', sans-serif; font-family:'Noto Sans KR', sans-serif; color:#b4b4b4; line-height:1; outline:0; -webkit-appearance:none; -webkit-border-radius:0;}

/* 캡션과 테이블헤더 텍스트 정렬 초기화 */
caption, th {text-align:left }

/* 인용구 표시 초기화 */
q:before, q:after {content :''}

/* hidden_class */
.hidden {width:0; height:0; margin:0; padding:0; overflow:hidden; line-height:0; font-size:0; visibility:hidden; position:absolute; left:0; top:0}

a:link, a:visited {color:#333333; text-decoration:none; outline:0;}
a:hover, a:active {color:#333333; text-decoration:none}

@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic Bold.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

html, body {width:100%; height:100%; background-color:#30c5ec;}

body{font-family:'NEXON Lv2 Gothic','GmarketSans', sans-serif; font-size:23px; font-weight:400; color:#fff;}

.GmarketSans{font-family:'GmarketSans', sans-serif;}

.mbti{width:100%; height:100%; background-color:#30c5ec; position:relative;}
.mbti .mbti_Q{width:100%; text-align:center; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:10;}
.mbti .mbti_Q .title{width:100%; font-size:53px; font-weight:500; word-break:keep-all; line-height:1.3; padding:0 15px; box-sizing:border-box; transition:0.2s all ease-out;}
.mbti .mbti_Q .title span{font-weight:600;}
.mbti .mbti_Q .title .poo_img{margin-top:-20px;}
.mbti .mbti_Q .sub_title{width:100%; font-weight:400; margin-top:15px; font-size:30px; word-break:keep-all; line-height:1.3; transition:0.2s all ease-out;}
.mbti .mbti_Q .title_poopourri{width:100%; font-weight:500; font-size:21px; line-height:1.3; color:#231815; margin-bottom:25px; transition:0.2s all ease-out;}
.mbti .mbti_Q .btn_start{display:inline-block; border:0; background-color:#fadf00; color:#333333; font-weight:600; font-size:16px; padding:18px 60px 18px 60px; margin-top:50px;}
.mbti .mbti_Q .answer_box{width:650px; margin:0 auto; margin-top:30px; transition:0.2s all ease-out;}
.mbti .mbti_Q .btn_a01{width:100%; display:inline-block; border:0; background-color:#30c5ec; border:2px solid #fff; color:#fff; font-weight:600; font-size:36px; padding:24px 0 18px 0; margin-top:20px; line-height: 1;
box-sizing:border-box; transition:0.2s all ease-out;}
.mbti .mbti_Q .btn_a01:hover{background-color:#fff; color:#30c5ec;}
.mbti .mbti_Q .btn_a01 span{display:block;}
.mbti .mbti_Q .btn_a01 span.btn_s_text{clear:both; font-size:16px; font-weight:500; margin-top:7px; text-transform:uppercase;}

.mbti .bg_lt{position:absolute; left:0; top:0;}
.mbti .bg_rt{position:absolute; right:0; top:0;}
.mbti .bg_lb{position:absolute; left:100px; bottom:0;}
.mbti .bg_rb{position:absolute; right:0; bottom:0;}

.mbti_result{width:100%; height:100%;}
.mbti_result .result_box{width:100%; text-align:center; position:absolute; left:50%; transform:translate(-50%, 0); z-index:10; background-color:#d0f6ff;}
.mbti_result .result_box .product_icon{margin-top:110px;}
.mbti_result .result_box .product_title{display:inline-block; font-weight:600; font-size:36px; color:#333333; padding:0 10px; line-height:0.2; border-bottom:14px solid #fee014; margin-top:50px;}
.mbti_result .result_box .product_title_en{font-weight:600; color:#333333; font-size:16px; margin-top:15px; text-transform:uppercase;}
.mbti_result .result_box .product_text{font-size:24px; font-weight:400; color:#444444; margin-top:45px; padding:0 25px; line-height:1.8; transition:0.2s all ease-out; word-break:keep-all;}
.mbti_result .result_box .product_img{margin-top:60px;}
.mbti_result .result_box .product_img img{transition:0.2s all ease-out;}
.mbti_result .result_box .product_name{margin-top:33px;}

.mbti_result .result_box .share_box{display:inline-block; width:635px; margin:0 auto; margin-top:108px; transition:0.2s all ease-out;}
.mbti_result .result_box .share_box li{position:relative; float:left; width:310px; height:60px; transition:0.2s all ease-out;}
.mbti_result .result_box .share_box li.facebook a{display:block; width:100%; height:100%; font-size:21px; color:#fff; font-weight:600; background-color:#334fa5; line-height:60px;}
.mbti_result .result_box .share_box li.facebook a img{position:absolute; left:12px; top:10px;}
.mbti_result .result_box .share_box li.kakao{margin-left:15px;}
.mbti_result .result_box .share_box li.kakao a{display:block; width:100%; height:100%; font-size:21px; color:#3b1e1d; font-weight:600; background-color:#ffe900; line-height:60px;}
.mbti_result .result_box .share_box li.kakao a img{position:absolute; left:12px; top:10px;}
.mbti_result .result_box .share_box li.sale{clear:both; width:100%; height:94px; background-color:#00b3dc; margin-top:15px; line-height:1.3;}
.mbti_result .result_box .share_box li.sale a{display:inline-block; width:100%; height:100%;}
.mbti_result .result_box .share_box li.sale p{margin-top:17px; font-weight:400; color:#fff;}
.mbti_result .result_box .share_box li.sale span{font-weight:500; font-size:28px;}
.mbti_result .result_box .share{float:left; width:100%; margin-bottom:100px;}

.mbti_result .result_box2{display:inline-block; width:100%; background-color:#d0f6ff; padding:30px; box-sizing:border-box;}
.mbti_result .result_box2 .mbti_prod_info{width:100%; background-color:#fff; }
.mbti_result .result_box2 .product_title{display:inline-block; font-weight:500; font-size:29px; color:#333333; padding:0 10px; border-bottom:14px solid #fee014; margin-top:65px;}
.mbti_result .result_box2 .product_title .t_line1{line-height:2.5;}
.mbti_result .result_box2 .product_title .t_line2{font-weight:600; font-size:33px; line-height:0.2;}

.mbti_result .result_box2 .product_text{font-size:24px; font-weight:400; color:#444444; margin-top:45px; padding: 0 25px; line-height:1.6; transition:0.2s all ease-out; word-break:keep-all;}
.mbti_result .result_box2 .point{display:inline-block; width:680px; margin-top:40px; padding:20px; box-sizing:border-box;}
.mbti_result .result_box2 .point li{display:inline-block; float:left; width:50%; text-align:left; font-size:17px; font-weight:500; color:#00b3dc; margin-bottom:10px; transition:0.2s all ease-out;}
.mbti_result .result_box2 .point li span.GmarketSans{font-weight:600; color:#444444; margin-left:15px;}

.mbti_result .result_box2 .step{display:inline-block; width:100%; margin-top:65px;}
.mbti_result .result_box2 .step .step_title{font-size:27px; color:#333333; font-weight:500; word-break:keep-all; padding:0 15px;}
.mbti_result .result_box2 .step ul{display:inline-block; margin:0 auto; margin-top:50px;}
.mbti_result .result_box2 .step ul li{float:left; text-align:center; margin:0 32.5px;}
.mbti_result .result_box2 .step ul li p{display:inline-block; font-size:25px; font-weight:600; color:#00b3dc; border-bottom:1px solid #00b3dc; margin-top:20px;}
.mbti_result .result_box2 .step ul li img{transition:0.2s all ease-out;}
.mbti_result .result_box2 .step .product_text{font-size:22px; transition:0.2s all ease-out;}

.mbti_result .result_box2 .real_review{display:inline-block; width:100%; margin-top:65px; margin-bottom:70px; padding:0 34px; box-sizing:border-box;}
.mbti_result .result_box2 .real_review .review_title .review_title_box{display:inline-block; background-color:#fff; padding:0 30px;}
.mbti_result .result_box2 .real_review .review_title{font-size:27px; color:#333333; font-weight:600; background:url("../images/line.jpg") 0 center repeat-x;}
.mbti_result .result_box2 .real_review .review_box{width:100%; border-bottom:1px solid #00b3dc;}
.mbti_result .result_box2 .real_review .review_text{width:690px; margin:0 auto; margin-top:40px; margin-bottom:40px;}
.mbti_result .result_box2 .real_review .review_text li{color:#444444; font-size:21px; margin-bottom:10px; text-align:left; transition:0.2s all ease-out; word-break:keep-all;}
.mbti_result .result_box2 .real_review .review_text li span{display:inline-block; background-color:#d0f6ff; padding:8px 20px 8px 20px; border-radius:42px; font-size:18px; margin-left:8px;}

.mbti_result .result_box2 .share_event{display:inline-block; width:100%; margin-top:65px; padding:0 34px; box-sizing:border-box;}
.mbti_result .result_box2 .share_event .event_title .event_title_box{display:inline-block; background-color:#fff; padding:0 30px;}
.mbti_result .result_box2 .share_event .event_title{font-size:27px; color:#333333; font-weight:600; background:url("../images/line.jpg") 0 center repeat-x;}
.mbti_result .result_box2 .share_event .event_box{width:100%; border-bottom:1px solid #00b3dc;}
.mbti_result .result_box2 .share_event .event_text{width:690px; margin:0 auto; margin-top:70px; margin-bottom:90px;}
.mbti_result .result_box2 .share_event .event_text li{color:#444444; font-size:21px; margin-bottom:15px; text-align:left; transition:0.2s all ease-out; word-break:keep-all;}
.mbti_result .result_box2 .share_event .event_text li span{width:100%; display:inline-block; background-color:#f9fafb; padding:8px 20px 8px 20px; border-radius:10px; font-size:18px; margin-top:10px; line-height:1.5; box-sizing: border-box;}

.mbti .f_logo{width:100%; text-align:center; position:absolute; bottom:25px;}
.mbti .f_logo img{width:170px;}

@media all and (max-width: 820px) {
.mbti .mbti_Q .title{font-size:45px;}
.mbti .mbti_Q .title .poo_img{width: 65px;}
.mbti .mbti_Q .sub_title{font-size:28px;}
.mbti .mbti_Q .title_poopourri{font-size:16px; margin-bottom:15px}
.mbti .mbti_Q .answer_box{width:500px;}
.mbti .mbti_Q .btn_a01{font-size:20px; padding:14px 0 14px 0; margin-top:30px; margin-top:10px;}
.mbti .mbti_Q .btn_a01:hover{background-color:#fff; color:#30c5ec;}
.mbti .mbti_Q .btn_a01 span.btn_s_text{font-size:10px;}
.mbti .bg_lt{position:absolute; left:0; top:0; width:17%;}
.mbti .bg_rt{position:absolute; right:0; top:0; width:12%;}
.mbti .bg_lb{position:absolute; left:30px; bottom:0; width:14%;}
.mbti .bg_rb{position:absolute; right:0; bottom:0; width:17%;}
.mbti_result .result_box .product_text{font-size:22px; line-height:1.5;}
.mbti_result .result_box .share_box{width:515px;}
.mbti_result .result_box .share_box li{width:250px}
.mbti_result .result_box2 .product_text{padding:0 20px; font-size:20px;}
.mbti_result .result_box2 .point li{font-size:15px;}
.mbti_result .result_box2 .point{width:100%;}
.mbti_result .result_box2 .real_review .review_text{width:100%;}
.mbti_result .result_box2 .step .product_text{font-size:20px;}
.mbti_result .result_box2 .real_review .review_text li{font-size:18px;}
.mbti_result .result_box2 .real_review .review_text li span{font-size:14px; padding:8px 15px 8px 15px;}
.mbti_result .result_box2 .share_event .event_text{width:100%;}
.mbti_result .result_box2 .share_event .event_text li{font-size:18px;}
.mbti_result .result_box2 .share_event .event_text li span{font-size:16px; padding:8px 15px 8px 15px;}
}

@media all and (max-width: 680px) {
.mbti .mbti_Q .title{font-size:37px;}
.mbti .mbti_Q .title .poo_img{width: 58px;}
.mbti .mbti_Q .sub_title{font-size:24px;}
.mbti .mbti_Q .title_poopourri{font-size:12px; margin-bottom:15px}
.mbti .mbti_Q .answer_box{width:350px;}
.mbti .mbti_Q .btn_a01{font-size:20px; padding:14px 0 14px 0; margin-top:30px; margin-top:10px;}
.mbti .mbti_Q .btn_a01:hover{background-color:#fff; color:#30c5ec;}
.mbti .mbti_Q .btn_a01 span.btn_s_text{font-size:10px;}
.mbti .bg_lt{position:absolute; left:0; top:0; width:17%;}
.mbti .bg_rt{position:absolute; right:0; top:0; width:12%;}
.mbti .bg_lb{position:absolute; left:30px; bottom:0; width:14%;}
.mbti .bg_rb{position:absolute; right:0; bottom:0; width:17%;}
.mbti_result .result_box .product_text{font-size:20px; line-height:1.5;}
.mbti_result .result_box .share_box{width:515px;}
.mbti_result .result_box .share_box li{width:250px}
.mbti_result .result_box2 .step ul li{margin: 0 20px;}
.mbti_result .result_box2 .step ul li img{width:120px;}
.mbti_result .result_box2 .product_text{font-size:18px;}
.mbti_result .result_box2 .point li{font-size:14px;}
.mbti_result .result_box2 .step .product_text{font-size:18px;}
.mbti_result .result_box2 .real_review .review_text li{font-size:16px; margin-bottom:5px;}
.mbti_result .result_box2 .real_review .review_text li span{font-size:12px; padding:8px 15px 8px 15px;}
.mbti_result .result_box2 .share_event .event_text li{font-size:16px; margin-bottom:10px;}
.mbti_result .result_box2 .share_event .event_text li span{font-size:14px; padding:8px 15px 8px 15px;}
}

@media all and (max-width: 620px) {
.mbti_result .result_box2 .point{padding: 20px 30px 20px 30px;}
.mbti_result .result_box2 .point li{clear:both; width:100%; font-size:15px;}
.mbti_result .result_box2 .point li span.GmarketSans{font-size:15px;}
.mbti_result .result_box2 .step ul li{margin: 0 15px;}
.mbti_result .result_box2 .step ul li img{width: 100px;}
.mbti_result .result_box2 .step ul li p{font-size:23px}
.mbti .f_logo img{width:150px;}
}


@media all and (max-width: 450px) {
.mbti .mbti_Q .title{font-size:27px;}
.mbti .mbti_Q .title .poo_img{width: 40px; margin-top: -16px;}
.mbti .mbti_Q .sub_title{font-size:18px;}
.mbti .mbti_Q .title_poopourri{font-size:12px; margin-bottom:15px}
.mbti .mbti_Q .btn_start{display:inline-block; border:0; background-color:#fadf00; color:#333333; font-weight:600; font-size:12px; padding:14px 40px 14px 40px; margin-top:30px;}
.mbti .mbti_Q .answer_box{width:240px; margin-top:15px;}
.mbti .mbti_Q .btn_a01{font-size:18px; padding:14px 0 14px 0; margin-top:30px; margin-top:10px;}
.mbti .mbti_Q .btn_a01:hover{background-color:#fff; color:#30c5ec;}
.mbti .mbti_Q .btn_a01 span.btn_s_text{font-size:10px;}
.mbti .bg_lt{position:absolute; left:0; top:0; width:32%;}
.mbti .bg_rt{position:absolute; right:0; top:0; width:20%;}
.mbti .bg_lb{position:absolute; left:30px; bottom:0; width:24%;}
.mbti .bg_rb{position:absolute; right:0; bottom:0; width:32%;}
.mbti .f_logo img{width:120px;}

.mbti_result .result_box .product_icon{margin-top:90px;}
.mbti_result .result_box .product_icon img{width:30%;}
.mbti_result .result_box .product_title{font-size: 28px;}
.mbti_result .result_box .product_title_en{font-size: 14px;}
.mbti_result .result_box .product_text{font-size: 18px; margin-top:35px; padding: 0 15px; box-sizing: border-box;}
.mbti_result .result_box .product_img{margin-top:45px;}
.mbti_result .result_box .product_img img{width:70%;}
.mbti_result .result_box .product_name{margin-top:20px;}
.mbti_result .result_box .product_name img{width:80%;}
.mbti_result .result_box .share{margin-bottom:60px;}
.mbti_result .result_box .share_box{width:300px; margin-top:60px;}
.mbti_result .result_box .share_box li{width:147px; height:45px;}
.mbti_result .result_box .share_box li.facebook a{font-size:14px; line-height:45px;}
.mbti_result .result_box .share_box li.facebook a img{left:10px; top:10px; width:24px;}
.mbti_result .result_box .share_box li.kakao{margin-left:6px;}
.mbti_result .result_box .share_box li.kakao a{font-size:14px; line-height:45px;}
.mbti_result .result_box .share_box li.kakao a img{left:10px; top:10px; width:28px;}
.mbti_result .result_box .share_box li.sale{height:80px; font-size:14px; line-height:45px; margin-top:6px; line-height: 1.3;}
.mbti_result .result_box .share_box li.sale p{margin-top: 17px; font-size:18px;}
.mbti_result .result_box .share_box li.sale p span{font-size:22px;}

.mbti_result .result_box2{padding: 15px;}
.mbti_result .result_box2 .product_title{margin-top:45px;}
.mbti_result .result_box2 .product_title .t_line1{font-size:20px;}
.mbti_result .result_box2 .product_title .t_line2{font-size:22px;}
.mbti_result .result_box2 .point{margin-top:25px; padding:20px;}
.mbti_result .result_box2 .point li{clear:both; width:100%; font-size:13px; text-align:center;}
.mbti_result .result_box2 .point li span.GmarketSans{margin-left:5px; font-size:13px;}
.mbti_result .result_box2 .step{margin-top:35px;}
.mbti_result .result_box2 .step .step_title{font-size:20px;}
.mbti_result .result_box2 .step ul{margin-top:35px;}
.mbti_result .result_box2 .step ul li{width:100%; text-align:center; padding:0 20px; margin:0; box-sizing:border-box; margin-bottom:25px;}
.mbti_result .result_box2 .step .product_text{margin-top:20px;}

.mbti_result .result_box2 .share_event{padding: 0 15px;}
.mbti_result .result_box2 .share_event .event_title{font-size:22px;}
.mbti_result .result_box2 .share_event .event_text{margin-top:40px; margin-bottom:40px;}

.mbti_result .result_box2 .real_review{padding: 0 15px;}
.mbti_result .result_box2 .real_review .review_title{font-size:22px;}
.mbti_result .result_box2 .real_review .review_text li{font-size:14px; line-height:1.5;}
.mbti_result .result_box2 .real_review .review_text li span{font-size:12px; padding: 6px 12px 6px 12px; margin-left: 5px;}
.mbti_result .result_box2 .real_review{margin-top:55px;} margin-bottom:55px;}
}


@keyframes blink {
 0% {background-color: #34cdf0;}
 50% {background-color: #00b3dc;}
}

/* for Chrome, Safari */
@-webkit-keyframes blink {
 0% {background-color: #34cdf0;}
 50% {background-color: #00b3dc;}
}

/* blink CSS 브라우저 별로 각각 애니메이션을 지정해 주어야 동작한다. */
.blinkcss {
 font-weight:bold;
 animation: blink 1s step-end infinite;
 -webkit-animation: blink 1s step-end infinite;
}