@font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face {
    font-family: 'GmarketSansMediumBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Apple SD Gothic Neo';
    font-style: normal;
    font-weight: 300;
    src: local('Apple SD Gothic Neo Light'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/300_AppleSDGothicNeo-Light.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/300_AppleSDGothicNeo-Light.otf') format('opentype');
}

@font-face {
    font-family: 'Apple SD Gothic Neo Bold';
    font-style: normal;
    font-weight: 700;
    src: local('Apple SD Gothic Neo SemiBold'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/600_AppleSDGothicNeo-SemiBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/600_AppleSDGothicNeo-SemiBold.otf') format('opentype');
}

html {overflow-y:scroll}
body {margin:0;padding:0;line-height:1.267em;height:100%;font-family:"GmarketSansMedium", "Apple SD Gothic Neo", "Nanum Square", "Noto Sans KR", "Nanum Gothic", "dotum", "Poppins", sans-serif;background-color:#fff;color:#292929;min-width:320px; letter-spacing:-0.03em; }
html, h1, h2, h3, h4, h5, h6, form, fieldset {margin:0;padding:0;border:0}

.fa,.fab,.fad,.fal,.far,.fas{ font-weight: 900 !important;}

ul,li,dl,dt,dd {padding:0px;margin:0px}
ul {list-style:none}

.menu-hider {
    position: fixed;
    top: -100px;
    bottom: -100px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: all 300ms ease;
}

.menu-hider.menu-active {
    transition: all 300ms ease;
    opacity: 1;
    pointer-events: all;
}

#wrap { width: 100%; text-align: center;}

#wrap .form-check { word-break: break-word; }
#wrap .form-check-label {white-space:nowrap; }
.tablet #wrap, .mobile #wrap { font-size: 13px; }

#poll { display: inline-block; text-align: center; width: 600px; max-width: 600px; margin: 0px auto; position: relative; overflow: hidden; }
#poll.scroll {overflow-y: scroll;} 
/* .desktop #wrap { position: relative; height: 100vh; }
.desktop #poll { position: absolute; left:50%; top: 50%; transform: translate(-50%, -50%); } */
.tablet #poll, .mobile #poll { width: 100%; max-width: 100%; }

.bar { position: absolute; top: 0;left: 0; width: 0%; height: 3px; border-radius: 1.5px;background-color: #ff5100;}
.swiper-wrapper { padding-top: 10px; }

.swiper-slide { min-height: 620px; position: relative; }
.tablet .swiper-slide, .mobile .swiper-slide { width: 100% !important; max-width: 100% !important; height: 100vh; }

.swiper-slide > img { width: 100%; }
.swiper-slide.s1 { background-color: #F5EDEA; height: 100%; }


.swiper-slide h2.top_navi { color: #fff; padding: 10px 0px; font-size: 16px; position: relative;}
.swiper-slide h2 .top_title { line-height: 22px;}
.swiper-slide.s2 { background-color: #F0EAF5; position: relative; }
.swiper-slide.s2 h2 { background-color: #9974B9;}

.swiper-slide .back_button { position: absolute; left: 10px; }
.swiper-slide .page_wrap { position: absolute; top:10px; right: 10px; border-radius: 20px; border: 1px solid #fff; padding: 4px 6px; font-size: 10px; }

.swiper-slide.s3 { background-color: #FCFAEA; }
.swiper-slide.s3 h2 { background-color: #EBB959;}

.swiper-slide.s4 { background-color: #EFFCEA; }
.swiper-slide.s4 h2 { background-color: #6EA546;}

.swiper-slide.s5 { background-color: #EAF7FC; }
.swiper-slide.s5 h2 { background-color: #48A8CC;}

.swiper-slide.s6 { background-color: #F5EDEA; }
.swiper-slide.s6 h2 { background-image: url(./images/bg_title.png); background-repeat: no-repeat; background-size:contain; background-position: top center; color: #fff; padding: 18px 0px 20px 0px; margin: 20px auto 0px auto; width: 80%; text-align: center; font-size: 20px; }
.tablet .swiper-slide.s6 h2, .mobile .swiper-slide.s6 h2 { width: 100%; font-size: 16px; }

.swiper-slide.s6 .result1 { color:#707070; font-size: 18px; text-align: center; width: 90%; padding-top: 30px; margin: 0px auto; line-height: 23px;}
.tablet .swiper-slide.s6 .result1, .mobile .swiper-slide.s6 .result1 { font-size: 14px; }
.swiper-slide.s6 .result2 { color:#707070; font-size: 14px; text-align: center; width: 90%; padding-top: 20px; margin: 0px auto;}

.box { background-color: #fff; margin: 10px 20px; padding: 15px 10px; font-size: 16px; }
.tablet .box, .mobile .box { font-size: 13px; }

.box h2 { font-size: 20px; padding: 0px 0px 10px 0px; color:#EA775C }

.question { font-size: 30px; color: #707070; padding: 30px 0px 40px 0px; }
.tablet .question, .mobile .question { font-size: 20px; }

.rows { margin: 0px; padding: 0px; width: 100%; display: flex;}

.w49 { width: 48%; text-align: center;}
.w49 img { width: 80%;}
.w49 img.active { border: 8px solid #EA775C; border-radius: 100px;}

.w49 span { margin-top: 20px; display:inline-block; font-size: 16px; }
.tablet .w49 span, .mobile .w49 span { font-size: 13px; }

.w2 { width: 4%; text-align: left; color: #EA775C; font-size: 30px; line-height: 230px; }

.point { color:#EA775C; }

.swiper-slide .abs { position: absolute; bottom: 20px; left:50%; transform: translate(-50%, 0%);}
.tablet .swiper-slide .abs, .mobile .swiper-slide .abs { bottom: 50px; }
.swiper-slide .title { background-color: #EA775C; padding: 10px 0px; font-size: 20px; text-align: center; color: #fff; }

#mbti_img { margin-top: 15px;}


.shareBtn { position: absolute; top: 200px; right: 20px; }

.share { position: absolute; top: 30px; right: 25px; z-index: 101;}
.share li { margin-bottom: 10px; }
.share li img  { width: 50px;}

.box2 { background-color: #fff; width:400px; margin:20px auto; border-radius: 20px; padding: 10px 10px; font-size: 12px; color: #EA775C; }
.event { width: 100%; height: 7px; background-color: #EA775C; display: inline-block;}
.event div { width: 300px; padding: 15px 0px; margin: 0px auto; font-size: 16px; background-color: #EA775C; color: #fff; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}

.box3 .form-group label { width: 200px; font-family: 'GmarketSansMediumBold'; font-size: 18px; text-align: left; }
.box3 .form-group label span { color: #EA775C;}

.box4 { width: 96%; margin: 30px auto;  border-radius: 20px;  background-color: #fff; padding: 20px 20px; text-align: left; background-image: url('./images/coffee.png'); background-repeat: no-repeat; background-position: 400px 80px; }
.box4 ul li { margin-bottom: 15px; font-size: 12px; }
.box4 ul li span { width: 85px; display: inline-block; color: #fff; background-color: #707070; border-radius: 20px; font-family: 'GmarketSansMediumBold'; padding: 5px 0px; text-align: center; }
.box4 ul li span { margin-right: 5px;}


.txt2 { width: 100%; display: inline-block; margin: 10px 0px; padding: 10px 0px; text-align: center; color: #EA775C;}

.txtInfo{position:relative;color:#4c4c4c;line-height:1.6; width: 90%; margin: 0px auto 20px auto; text-align: left;}
.txtInfo:first-child{margin-top:0}
.txtInfo .side{position:absolute;right:0;top:0}
.imgInfo{margin:20px 0;text-align:center;vertical-align:top}
.imgInfo:first-child{margin-top:0}

.greyBox{padding:30px;background:#f7f7f7; font-size: 14px; width: 90%; margin: 0px auto 30px auto; text-align: left; }
.greyBox.type2{margin-bottom:0;padding:20px 30px}
.greyBox.type3{margin-bottom:0;padding:27px 30px 25px;border:1px solid #e6e6e6;border-top:0}
.greyBox.type3 .txtGuide02{margin-top:0}
.greyBox.titDep2{margin-bottom:20px;text-align:center}

.greyBox .titDep3 {
    font-size: 15px; font-family: 'GmarketSansMediumBold';
    margin: 0;
    color: #444;
    font-weight: 600;
}


.listDep1, .listDep2, .listDep3{margin-top:15px}
.listDep1:first-child, .listDep2:first-child, .listDep3:first-child{margin-top:0}
.listDep1 li, p.listDep1{position:relative;margin-top:9px;padding-left:13px;color:#4c4c4c;line-height:1.6}
.listDep1 li:first-child{margin-top:0}
.listDep1 > li:before, p.listDep1:before{content:'';display:inline-block;width:3px;height:3px;margin:10px 10px 0 -13px;vertical-align:top;border-radius:3px;background:#000}
.listDep1 > li.colPoint02:before{background:#d43b61}
.listDep2 > li,  p.listDep2{position:relative;margin-top:9px;padding-left:13px;color:#4c4c4c}
.listDep2 li:first-child{margin-top:0}
.listDep2 > li:before, p.listDep2:before{content:'-';display:block;position:absolute;top:-2px;left:0}
.listDep2.noBl > li{padding-left:0}
.listDep2.noBl > li:before{display:none}
.listDep3 > li, p.listDep3{position:relative;margin-top:5px;padding-left:12px;font-size:14px;line-height:1.4}
.listDep3 li:first-child{margin-top:0}
.listDep3 > li:before, p.listDep3:before{content:'';display:block;position:absolute;top:7px;left:0;width:2px;height:2px;border-radius:2px;background:#777}

.event_btn { background-color: #E0547A; color: #fff; font-size: 20px; font-family: 'GmarketSansMediumBold'; text-align: center; padding: 20px 0px; }
.event_btn a { color: #fff;}