@charset "utf-8";

/* Noto Sans KR / Nanum Square */
@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);


/* 초기화 */
 * {outline:0 !important;}
 html, body, h1, h2, h3, h4, h5, h6, div, p, blockquote, pre, code, address, ul, ol, li, menu, nav, section, article, aside, dl, dt, dd, table, thead, tbody, tfoot, label, caption, th, td, form, fieldset, legend, hr, input, button, textarea, object, figure, figcaption, img {margin: 0; padding: 0;}
 html, h1, h2, h3, h4, h5, h6, form, fieldset, img {border: 0;}

/* 폰트 초기화 */
body, input, textarea, select, button, table {font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', '돋움', dotum, sans-serif; letter-spacing: -0.04em; color: #222; font-size: 1em;}
h1, h2, h3, h4, h5, h6 {font-size: 1em; font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', '돋움', dotum, sans-serif; letter-spacing: -0.04em;}

html, body {width: 100%;}
html {-webkit-touch-callout: none; /*-webkit-user-select:none;*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow-y:scroll; height:100%; font-size: 14px;}
body {min-width: 300px; background:#fff; font-size: 1rem; font-weight: 400; -webkit-text-size-adjust:none; word-wrap:break-word; word-break:break-all;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display: block}

ul, ol, li, dl, dt, dd {list-style: none;}
table {width: 100%; border-spacing: 0; border-collapse: collapse;}
legend {position: absolute; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden}
address, cite, code, em {font-style: normal; font-weight: normal;}

input, select, textarea, button {border: none; border-radius: 0;/*  -webkit-appearance: none; -moz-appearance: none; */ font-size:1em; font-weight: 300; color: #222;}
label, img, input, select, textarea, button {vertical-align:middle; border-radius: 0;}
select {margin: 0; background: none;}
input[type="submit"] {cursor: pointer;}
button {cursor: pointer;}

hr {display: none;}
pre {overflow-x: scroll; font-size: 1.1em}

a {color: #222; text-decoration: none;}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* margin */
.mbt10 {margin-bottom: 0.67rem;}
.mbt20 {margin-bottom: 1.34rem;}
.mbt30 {margin-bottom: 2rem;}
.mbt40 {margin-bottom: 2.67rem;}


/* Form */
textarea { border:1px solid #dbdbdb;}
select { height:36px; font-size:13px; color:#222; border:1px solid #e9e9e9; background:#fff;border-radius: 0;}
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=file],
input[type=url],
input[type=number],
input[type=date],textarea {width:100%; height: 34px; color:#222; border:1px solid #e9e9e9; background:#fff; border-radius: 0; transition: all 0.5s; vertical-align:middle; padding: 5px;}
input::-webkit-input-placeholder{color:#b5b5b5; font-size: 0.928em; line-height:100%;}
textarea { padding:5px;}
select:focus,
textarea:focus,
input:focus { border: 1px solid #727272;}


.blue, a.blue {color: #2c7fe5;}
.navy, a.navy {color: #223464;}

.light {font-weight: 300;}
.regular {font-weight: 400;}
.medium {font-weight: 500;}
.bold {font-weight: 700;}
.etbold {font-weight: 900;}

.nanumSq {font-family: 나눔스퀘어, NanumSquare, sans-serif; font-weight: 400;}

.hidden {position: absolute; font-size: 0; line-height: 0; overflow: hidden;}
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

.clear {clear:both;}
.clear:after { content:""; display:block; clear:both;}


/*== 레이아웃 크기 지정 ==*/
.main_section .inner,
#snb .inner,
#container,
#partnership .inner {/* width: 100%; */ max-width: 1024px;}


/*== 상단 ==*/
#header {position: relative; padding: 16px 1rem; margin: 0 auto; background: #fff;}
#header .logo {display: inline-block;}
#header .logo img {width: 75%;}


/*== 전체메뉴 ==*/
/* Button */
.btn_allmenu {
    position: absolute; right: 0; top: 0; z-index: 100;
    width: 16px; height: 14px; padding: 8px 7px; cursor: pointer;
    border: 1px solid #222; background: transparent;
    box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;
}
.btn_allmenu .bar {
    position: absolute;
    display: block; width: 16px; height: 2px;
    background: #222; transition: all 0.3s;
}
.btn_allmenu span:nth-child(1) {top: 8px;}
.btn_allmenu span:nth-child(2) {top: 50%; transform: translateY(-50%); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); width:12px;}
.btn_allmenu span:nth-child(3) {bottom: 8px;}

.btn_mopen {right: 1rem; top: 50%; transform: translateY(-50%); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%);}

.btn_mclose {right: 6px; top: 16px;  border: transparent;}
.btn_mclose .bar {}
.btn_mclose span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
}
.btn_mclose span:nth-child(2) {opacity: 0;}
.btn_mclose span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
    -webkit-transform: translateY(50%) rotate(-45deg);
    -ms-transform: translateY(50%) rotate(-45deg);
}

/* GNB */
#all_menu_wrap {
    position: fixed; top: 0; right: -300px; z-index: 9999; overflow-y: scroll;
    width: 300px; height:100vh; background: #fff;
}
#all_menu_wrap .inner {height: 100%;}
#gnb ul {overflow-y: scroll;}
.gnb_1dul {}
.gnb_1dul li a {display: block; border-bottom: 1px solid #ebebeb;}
.gnb_1dli {font-size: 1.071rem;}
.gnb_1dli > a {position: relative; padding: 12px 15px;}
.gnb_1dli > a:after {position: absolute; top: 19px; right: 15px; overflow: hidden; width: 12px; height: 7px; background: url(../img/icon_menu.png) no-repeat right 0; content:"";}
.gnb_1dli.on > a:after { background-position: right -7px;}
.gnb_2d {display: none;}
.gnb_2dul {background: #f8f8f8;}
.gnb_2dli {font-size: 0.9375em;}
.gnb_2dli > a {padding: 12px 25px;}

.gnb_1dli.on {}
.gnb_1dli.on .gnb_2d {display: block;}

#tnb {height: 62px; padding: 16px 15px; border-bottom: 1px solid #ebebeb;}
#tnb a {display: inline-block; line-height: 28px; padding: 0 10px; font-size: 13px;}
#tnb a.login {border: 1px solid #555; background: #01B0B5; color: #fff;}
#tnb a.join {border: 1px solid #223464; color: #223464;}

.menu_bg {display: none; position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100vh; background: #000; opacity: 0.5; filter:alpha(opacity=50);}


/*== 컨테이너 ==*/
#container_wrap {margin: 0 auto;}

/* 비주얼 이미지 공통 */
.visual_img {position: relative; width: 100%;}
.visual_img .inner {position: relative; height: 100%; display: table; margin: 0 auto; padding: 0 3%;}
.visual_box {display: table-cell; vertical-align: middle; width: 100%; font-size: 1rem; text-align: center; color: #fff;}
.visual_box * {word-break: keep-all;}
.visual_box .vt_txt {display: block; margin-bottom: 0.357rem; font-size: 0.964em; font-weight: 100; letter-spacing: 2; opacity: 0.7; text-transform: uppercase;}
.visual_box .vt_tit {font-size: 2.1em; font-weight: 700; line-height: 1.3em; color:#fff;}
.visual_box .vt_p {font-weight: 300;}

/*= 서브 =*/
/* 서브 네비 */
#snb {position: relative; z-index: 100; margin: 0 auto; border-bottom: 1px solid #e1e1e1; font-size: 1rem;}
#snb .inner {margin: 0 auto;}
#snb .inner:after {display:block;visibility:hidden;clear:both;content:""}
#snb .home {float: left; width: 54px; line-height: 54px; text-align: center; border-right: 1px solid #e1e1e1; background: #fff; font-size: 1.2em;}
#snb .snb_depth {float: left; width: calc(50% - 27px); height: 54px; background: #fff; border-right: 1px solid #e1e1e1;}
#snb .snb_depth .tit {position: relative; padding: 0 2rem; height: 54px; line-height: 54px; cursor: pointer; font-size: 1.072em; overflow: hidden;}
#snb .snb_depth .tit:after {
    position: absolute; top: 50%; right: 1rem; 
    transform: translateY(-50%); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%);
    content: "\f0d7"; font: normal normal normal 16px/1 FontAwesome;
}
#snb .snb_depth .tit span {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#snb .snb_depth .menu_list {display: none; width: calc(100% + 2px); margin-left: -1px;  border: 1px solid #e1e1e1; background: #fff;}
#snb .snb_depth .menu_list li {border-bottom: 1px dotted #e1e1e1;}
#snb .snb_depth .menu_list li:last-child {border-bottom: 0;}
#snb .snb_depth .menu_list a {display: block; padding: 10px 2rem; font-size: 1rem;}


/* 컨테이너 */
#container {margin: 3rem auto 5rem; padding: 0 1rem; min-height: 300px; height:auto !important;}
#container:after {display:block;visibility:hidden;clear:both;content:""}

#contents_title {position: relative; margin-bottom: 2rem; padding-bottom: 0.85rem; border-bottom: 1px solid #ebebeb;}
#contents_title h2 {font-size: 1.857rem; line-height: 1em; text-transform: uppercase;}

/* 3차 메뉴 
#sub_menu {margin-bottom: 2.5rem;}
#sub_menu ul:after {display:block;visibility:hidden;clear:both;content:""}
#sub_menu ul li {float: left;}
#sub_menu ul li a {display: block; margin-left: -1px; padding: 0.65em 0; font-size: 1.072rem; text-align: center; border: 1px solid #aebacd; background: #fff; cursor: pointer;}
#sub_menu ul li.on a {border-color: #223464; background: #223464; color: #fff; font-weight: 700;}
#sub_menu .sm_2ul li {width: 50%;}
#sub_menu .sm_3ul li {width: 33.3333%;}
*/

/* 3차 메뉴 */
.mo_sub_dep3 {margin:2.5rem 3%;}
.mo_sub_dep3:after {display:block;visibility:hidden;clear:both;content:""}
.mo_sub_dep3 li {float: left; width:50%;}
.mo_sub_dep3 li a {display: block; margin-left: -1px; padding: 0.65em 0; font-size: 1.072rem; text-align: center; border: 1px solid #aebacd; background: #fff; cursor: pointer; display:block; min-height:44px;}
.mo_sub_dep3 li.current3 a {border-color: #223464; background: #223464; color: #fff; font-weight: 700;}

.mo_sub_dep3.tab_1 li{width:100%;}
.mo_sub_dep3.tab_2 li{width:50%;}
.mo_sub_dep3.tab_3 li{width:33.3333%;}
.mo_sub_dep3.tab_4 li{width:25%;}

/* 파트너사 */
#partnership { padding: 12px 0; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;}
#partnership .inner {margin: 0 auto;}
#partnership .bx-wrapper {padding: 0 40px; text-align: center;}
#partnership .bx-wrapper .bx-controls-direction a {width: 12px; height: 22px; margin-top: -11px;}
#partnership .bx-wrapper .bx-prev {left: 0; background: url(../img/btn_prev.png) no-repeat left top;}
#partnership .bx-wrapper .bx-next {right: 0; background: url(../img/btn_next.png) no-repeat left top;}
.partner_slider li {padding: 0 5px; text-align: center;}
.partner_slider li img {display: inline-block;}


/*== 하단 ==*/
#footer {clear: both; padding: 0 0 1.7rem; font-size: 0.928rem; color: #222; text-align: center; background: #fff;}
#footer .inner { padding: 0 3%;}
.ft_logo {margin-bottom: 0.7rem;}
.ft_logo img {width: 249px; height: 30px;}
.ft_txt * {word-break: keep-all;}
.ft_txt address {line-height: 1.44em; opacity: 0.8;}
.ft_txt span {display: inline-block; padding: 0 5px; }
.ft_txt small {display: block; font-size: inherit; text-transform: uppercase; opacity: 0.8;}
#footer .q_link{ border-bottom:1px solid rgba(0, 0, 0, 0.2);  border-top:1px solid rgba(0, 0, 0, 0.2); text-align:center; padding:12px 0 7px 0; margin-bottom:20px;}
#footer .q_link ul{display:inline-block;}
#footer .q_link li{float:left;}
#footer .q_link .privacy a{font-size:13px; color:rgba(0, 0, 0, 0.5); line-height:20px;}
#footer .q_link .privacy li:nth-child(2){margin:0 10px; padding: 0 10px; position:relative;}
#footer .q_link .privacy li:nth-child(2)::before{content:""; display:block; position:absolute; left:0; top:50%; width:2px; height:2px; background:#888;}
#footer .q_link .privacy li:nth-child(2)::after {content:""; display:block; position:absolute; right:0; top:50%; width:2px; height:2px; background:#888;}
.sns_link {margin-top: 1rem;}
.sns_link li {display: inline-block; vertical-align: middle; margin: 0 2px; width: 30px; height: 30px;}
.sns_link li img {width: 100%;}
.ft_link {text-align:center; margin:20px 0 0;}
.ft_link a {display:inline-block; width:180px; height:40px; color:#222; padding:0 20px; text-align:left; border:1px solid #888;  background:rgba(0, 0, 0, 0.05);}
.ft_link p {font-size:14px; line-height:38px;  background: url('/html/img/link_btn.png')  center right no-repeat; background-size:15px;}
.btn_pc {display:inline-block; margin:0 auto; padding:7px 20px; border:1px solid rgba(0, 0, 0, 0.2); border-radius:50px; color:#555; text-align:center; margin-top:20px;}


/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}


/* 기본테이블 */
.tbl_wrap table {width:100%; border-collapse: collapse; background:#fff;}
.tbl_wrap .left {text-align: left !important;}
.tbl_wrap .center {text-align: center !important;}

.tbl_type01 {}
.tbl_type01 caption {padding:0; font-size:0; line-height:0; overflow:hidden}
.tbl_type01 thead th {padding: 10px 12px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; background: #018850; color: #fff; font-weight: 700; text-align: center;}
.tbl_type01 thead tr:last-child th {border-left: 0;}
.tbl_type01 tbody th, .tbl_type01 tfoot th {padding: 10px 1rem; border-right: 1px solid #e2e6ed; border-bottom: 1px solid #e2e6ed; background: #f7fbfa; color: #018850; font-weight: 700; text-align: center;}
.tbl_type01 td {padding: 12px; border-right: 1px solid #e2e6ed; border-bottom: 1px solid #e2e6ed; color:#222; }
.tbl_type01 td:last-child {border-right: 0;}

.tbl_type02 {}
.tbl_type02 table { border-top: 2px solid #018850;}
.tbl_type02 caption {padding:0; font-size:0; line-height:0; overflow:hidden}
.tbl_type02 tbody th {padding: 12px; border-right: 1px solid #e2e6ed; border-bottom: 1px solid #e2e6ed; background: #f7fbfa; color: #018850; text-align: center; font-size:1.072rem; font-weight:700;}
.tbl_type02 td {padding: 12px; border-right: 1px solid #e2e6ed; border-bottom: 1px solid #e2e6ed; color:#222; }
.tbl_type02 td:last-child {border-right: 0;}

/*팝업*/
.xe_popup_border{top:70px !important; left:3% !important; width:94% !important;}
.xe_popup_border .popupbody{height:auto !important;}
.xe_popup_border img{width:100%;}

/*== 769px 이상 ==*/
@media all and (min-width: 769px) {
    /*== 서브 ==*/
    /* 서브 네비 */
    #snb .inner {border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1;}
    #snb .snb_depth {width: 240px;}
}


/*== 768px 이하 ==*/
@media all and (max-width: 768px) {
    /* 기본테이블 */
    .tbl_type01 {overflow-x: scroll;}

    /*== 서브 ==*/
    /* 서브 네비 */
    #snb .home {width: 46px; height: 46px; line-height: 46px;}
    #snb .snb_depth {width: calc(50% - 23px); height: 46px;}
    #snb .snb_depth .tit {height: 46px; line-height: 46px;}
    #snb .depth02 {border-right: 0;}
}


/*== 499px 이하 ==*/
@media all and (max-width: 499px) {
    /*== 서브 ==*/
    .col4_nav li {width: 50%;}

    /* 서브 네비 */
    #snb .snb_depth .tit {padding: 0 1rem;}
    #snb .snb_depth .tit:after {right: 0.5rem;}
    #snb .snb_depth .menu_list a {display: block; padding: 10px 1rem;}
}


/*== 374px 이하 ==*/
@media all and (max-width: 374px) {
    html {font-size: 13px;}

    /* 3차 메뉴 */
    #sub_menu .sm_3ul li {width: 50%;}
}