@charset "utf-8";

#wrap { position: relative; width: 100%; min-height: 100%; margin: 0 auto;}
#wrap::before {content: ""; display: block; clear: both;}
#wrap::after {content: ""; display: block; clear: both;}

/*============ 서브메인별 클래스 ============*/
.all-events {} /* All Events */
.directory {} /* Directory */
.support {} /* support */ 
.event-info {} /* 행사정보 */
.export-info {} /* 수출정보 */
.business {} /* 비지니스 */
.mypage {} /* 마이페이지 */
.customer {} /* 고객지원 */ 
.member {} /* 회원 */

/*-----------------
     header
-------------------*/
#header { position: relative; height: 108px; background:#6b1e74; z-index: 11;}
@media (max-width: 1280px){
     #header { height: 108px;}
}

#header .inner { display: block; width: 100%; padding: 17px 20px 14px 20px; box-sizing: border-box;}
#header .logo { position: absolute; width: 108px; height: 37px; background: url(../../../../static/mbl/images/logo-small.png) no-repeat; background-size: contain;}

/* navi */
.top-btnbox { position: absolute; right: 0; margin-right: 20px;}
#header .btnNavi { position: relative; display: block; width: 32px; height: 32px; margin: auto; text-align: center; }

#header .btnNavi .bar { display: block; position: absolute; left:0; top: 15px; width: 100%; height: 4px; border-radius: 4px; background: #fff;  }

#header .btnNavi .bar:nth-child(2) { top: 5px;}
#header .btnNavi .bar:nth-child(3) { top: 15px; width: 90%;}
#header .btnNavi .bar:nth-child(4) { top: 25px;}

/* new window */
.new-win::after {display: inline-block;margin: 0px 3px 0px 5px; content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);}


/* 검색 */
#header .search-wrap { display: block; width: 100%; height: 33px; margin-top: 45px; background-color: #c7b5ca; box-sizing: border-box;}
#header .search-wrap fieldset { margin:0; padding:0;}
#header .search-wrap input[type='text'] { display: inline-block; width: 85%; height: 32px; padding: 3px 4px; font-size: 16px; line-height: 22px; border: 0; background-color: #c7b5ca; box-sizing: border-box;}
#header .search-wrap input[type='text']::placeholder { font-size: 16px; color: #333; line-height: 20px;}

#header .search-wrap .btn-top-search { position: relative; float: right; width: 35px; height: 31px; margin: 1px 0 0 0; cursor: pointer;}
#header .search-wrap .btn-top-search::before { position: absolute; display: block; content: '\f002'; top:0; margin: 5px 0 0 5px; font-family: "Font Awesome 5 Free", sans-serif; font-size: 23px; font-weight: 900; color: #6B1E74;}


/*-----------------
    footer
-------------------*/
#footer { position: relative; width: 100%; padding: 5px 0 10px 0; font-family: "Noto Sans KR",sans-serif; font-size: 0.875rem; border-top: 1px solid #d6d6d6; background-color: #f7f7f7; box-sizing: border-box;}
#footer .ft-links { display: inline-block; width: 100%; padding: 0 20px; border-bottom: 1px solid #d3d3d3; box-sizing: border-box;}
#footer .ft-links ul { width: 100%;}
#footer .ft-links ul li { display: inline-block;}
#footer .ft-links ul li a { display: inline-block; padding: 7px 10px 12px 10px; color: #666;}
#footer .ft-links ul li:first-child a { padding: 7px 15px 12px 0;}
#footer .ft-links ul li a:hover,#footer .ft-links ul li a:focus { text-decoration: underline;}
#footer .ft-links ul li a.em { font-weight: 700; color: #111;}

#footer .ft-links ul li a[class^=icbtn-] {display: inline-block;padding: 0;vertical-align: middle;background-repeat: no-repeat !important; background-size: contain !important;}

#footer .ft-links ul li a.icbtn-youtube {width: 32px;height: 25px;margin: -3px 0 0 5px;background: url(../../../../static/frt/images/icon-youtube.png);}
#footer .ft-links ul li a.icbtn-instagram {width: 22px;height: 22px;margin: -3px 0 0 7px;background: url(../../../../static/frt/images/instagram-logo.svg);}
#footer .ft-links ul li a.icbtn-facebook {width: 22px;height: 22px;margin: -3px 0 0 7px;background: url(../../../../static/frt/images/facebook-logo-square.svg);}
#footer .ft-links ul li a.icbtn-twitter {width: 22px;height: 22px;margin: -3px 0 0 7px;background: url(../../../../static/frt/images/twitter-icon-rounded-square.svg);}


#footer .ft-address { padding: 20px 20px; color: #666; box-sizing: border-box;}
#footer .ft-address .txt { line-height: 1.4rem;}
#footer .ft-address address { display: block; padding: 10px 0; line-height: 1.4rem;}
#footer .ft-address address span { padding: 0 15px 0 0;}
#footer .ft-address .ft-copyright { line-height: 1rem;}

/*-----------------
     content
-------------------*/
.container { display: block; width: 100%; margin: 0;}
.sub-container { display: block; min-height: calc( 100vh - 360px ); padding: 0 0 25px 0; vertical-align: top; box-sizing: border-box;}
@media (min-width: 1024px){
    .sub-container { min-height: calc( 100vh - 275px ); }
}

@media (min-width: 768px) and (max-width: 1023px){
    .sub-container { min-height: calc( 100vh - 300px ); }
}

.sub-cont-wrap { display: inline-block; width: 100%; padding: 16px 20px 0 20px; vertical-align: top; box-sizing: border-box;}

.sub-cont.full { display: inline-block; width: 100%; margin: 0; padding: 15px 0 0 0;box-sizing: border-box;}
.sub-cont.full.line { border-top: 1px solid #d5d5d5;}

.sub-cont-inner { display: inline-block; width:100%; padding: 15px 20px 15px 20px; box-sizing: border-box;}

.sub-text-cont { display: inline-block; width: 100%; padding-bottom: 20px; line-height: 22px;}
@media (max-width: 767px) { 
    .sub-text-cont { padding-bottom: 15px; }
}
.sub-text-cont p { padding: 3px 0;}
.sub-text-cont img { max-width:100%; height: auto !important;}
.sub-text-cont iframe { max-width:100%; border: 0; margin: 10px 0 0 0;}

.sub-text-ltop { border-top: 1px solid #ccc; margin-top:20px}

/*----------------------
    전체메뉴
------------------------*/
.allnav-bg { position: absolute; width:100%; min-height: 100vh; top: 0; background-color: rgba(0,0,0,0.8) ; z-index: 700;} /* 모달배경 */

#allNav { position: fixed; display: none; top:0; right: 0; left: auto; width: 100%; height: 100vh; margin: 0; padding: 0; font-family: "Noto Sans KR", sans-serif; background-color: #f5f5f5;}
#allNav.active { display: block; z-index: 10000;} 
#allNav .nav-subtitle { display: inline-block; width: 100%; padding: 20px 10px 20px 20px; font-size: 1.6rem; color: #fff; font-weight: 400; background-color: #666; box-sizing: border-box;}

#allNav .lang-area { display: inline-block; width: 100%; padding: 15px 10px 7px 20px; font-size: 1.6rem; color: #fff; font-weight: 400; background-color: #666; box-sizing: border-box;}

#allNav .lang-area a { display: inline-block; margin: 0 5px 0 0; padding: 7px 10px 8px 10px; font-size: 16px; font-weight: 400; color: #fff; line-height: 18px; border: 1px solid #666; border-radius: 4px; vertical-align: top;}
#allNav .lang-area a:first-child::after { position: absolute; display: inline-block; content: ''; width: 1px; height: 20px; margin-left: 25px; background-color: #ccc; }
#allNav .lang-area a.active,#allNav .lang-area a:hover,#allNav .lang-area a:focus { border:1px solid #b5b5b5; background-color: #585858}
#allNav .lang-area a.active { margin: 0 3px 0 10px;}
@media(max-width:320px){
    #allNav .lang-area a {margin: 0 3px 0 0; padding: 7px 5px 8px 5px; font-size: 15px;}
    #allNav .lang-area a.active{ margin: 0 3px;}
}

#allNav .lang-area a.nv-logo { display: inline-block; width: 108px; height: 34px; margin: 0; padding:0; background: url(../../../../static/mbl/images/logo-small.png) no-repeat; background-size: contain;}
#allNav .lang-area a.nv-logo::after { display:none;}

#allNav .member-area { display: inline-block; width: 100%; padding: 0; font-size: 1.6rem; color: #fff; font-weight: 400; background-color: #6b1e74; box-sizing: border-box;}
#allNav .member-area > ul { display: inline-block; width: 100%; margin: 0; padding: 0;}
#allNav .member-area > ul > li { display: inline-block; width: 48%; margin: 0; padding: 0; font-size: 16px; font-weight: 400; color: #fff;}
#allNav .member-area > ul > li.line { border-right: 1px solid #C490AB;}
#allNav .member-area > ul > li:first-child { width: 49%; border-right: 1px solid #af94b4;}
#allNav .member-area > ul > li > a { display: inline-block; width: 100%; height: 40px; color: #fff; line-height: 40px; text-align: center; box-sizing: border-box;}
#allNav .member-area > ul > li > a:hover, #allNav .member-area > ul > li > a:focus { text-decoration: underline; font-size: 17px; font-weight:700;}  

#allNav .member-area p { display: inline-block; width: 100%; padding: 5px 5px 5px 20px; font-size: 16px; line-height: 20px; font-weight: 400;box-sizing: border-box;}
#allNav .member-area p strong { font-size: 18px; font-weight: 600; letter-spacing: -0.2px;}


#allNav #gnb { display: inline-block; width: 100%; max-height: 80%; font-family: "Open Sans",sans-serif; overflow-y: scroll; padding: 0; box-sizing: border-box;}
@media (min-width: 768px) {
    #allNav #gnb { max-height: 60%;}
}
@media (max-width: 320px) {
    #allNav #gnb { max-height: 70%;}
}

@media (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    #allNav #gnb { max-height: 52%;}
}

#allNav #gnb > ul { display: inline-block; width: 100%; box-sizing: border-box;}
#allNav #gnb > ul > li { display: inline-block; width: 100%; color: #111; border-bottom: 1px solid #aaa;  background-color: #efefef; box-sizing: border-box;}
#allNav #gnb > ul > li > a { display: inline-block; width: 40%; padding: 12px 10px 5px 20px; font-size: 17px; color: #000; font-weight: 600;  box-sizing: border-box;}
/*
@media (min-width: 768px) { 
    #allNav #gnb > ul > li > a { width: 20%;}
}
*/

#allNav #gnb > ul > li > a:hover,#allNav #gnb > ul > li > a:focus { text-decoration: underline; color: #6b1e74; font-weight: 600; }


#allNav #gnb .snb { float: right; width: 60%; margin: 0; padding: 3px 0; background-color: #fff; vertical-align: top; box-sizing: border-box;}
/*
@media (min-width: 768px) { 
    #allNav #gnb .snb { width: 80%;}
}
*/

#allNav #gnb .snb > li { display: inline-block; width: 100%; box-sizing: border-box;}
#allNav #gnb .snb > li:last-child { border-bottom: 0;}
#allNav #gnb .snb > li a { display: block; width: 100%; font-size: 15px; color: #454545; padding: 6px 10px 6px 33px; box-sizing: border-box;}

#allNav #gnb .snb > li a::before { display: inline-block; content: ''; width: 3px; height: 3px; margin: 8px 5px 0 -12px; background-color: #9a9a9a; vertical-align: top;} 

#allNav #gnb .snb > li a:hover,#allNav #gnb .snb > li a:focus { text-decoration: underline; color: #000;}

#allNav #gnb .snb > li.sml-hg { min-height: 45px;} 
#allNav #gnb .snb > li.sml-hg2 { min-height: 30px;} 
@media (min-width: 768px) {
    #allNav #gnb .snb > li.sml-hg { min-height: 35px;}
    #allNav #gnb .snb > li.sml-hg2 { min-height: 30px;}
}
@media (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    #allNav #gnb .snb > li.sml-hg { min-height: 35px;} 
    #allNav #gnb .snb > li.sml-hg2 { min-height: 30px;} 
}

#allNav #gnb .snb > li.sml-hg a { padding: 8px 10px 6px 33px;}
#allNav #gnb .snb > li.sml-hg2 a { padding: 8px 10px 6px 33px;}


/* 메뉴닫기버튼 */
#allNav .btnNaviClose { position: absolute; display: block; width: 32px; height: 32px; top: 0; right:0; margin: 15px 5px 0 0; text-align: center; z-index: 15000;}
#allNav .btnNaviClose .bar { display: block; position: absolute; left:0; top: 15px; width: 100%; height: 3px; background: #fff;}
#allNav .btnNaviClose .bar:nth-child(2) { top: 15px;transform: rotate(-45deg);}
#allNav .btnNaviClose .bar:nth-child(3) { transform: rotate(45deg);}

/*  로그아웃 버튼 */
.menubtn-box-bt { float: right; margin: 10px 10px 0 0;}
.menubtn-box-bt .btn-logout { display: inline-block; padding: 9px 10px; font-size: 15px; color: #fff; text-align: center; border-radius: 2px; background: #333;}


/*----------------------
    Submenu
------------------------*/
.wd-submenu { position: relative; display: block; height: 49px; margin: 0; background-color: #390140;}
.wd-submenu ul { display:block; overflow-x: auto; width: 100%; margin: 0; padding: 0 5px 0 18px; box-sizing: border-box;white-space: nowrap}
@media (max-width: 320px) {
    .wd-submenu ul { padding: 0 5px 0 12px;}
}
@media (max-width: 280px) {
    .wd-submenu ul { padding: 0 5px 0 10px;}
}


.wd-submenu ul li { display: inline-block; margin: 0 13px 0 0; text-align: center;}
@media (max-width: 320px) {
    .wd-submenu ul li { margin: 0 10px 0 0;}
}
@media (max-width: 280px) {
    .wd-submenu ul li { margin: 0 5px 0 0;}
}

.wd-submenu ul li a { display: block; padding: 16px 0 8px 0; font-size: 15px; color: #fff; font-weight: 400;}
@media (max-width: 320px) {
    .wd-submenu ul li a { font-size: 14px;}
}

.wd-submenu ul li a.active { border-bottom: 2px solid #fff;}
.wd-submenu ul li a:hover,.wd-submenu ul li a:focus { border-bottom: 2px solid #fff;}
.wd-submenu ul li:last-child { margin: 0;}

.wd-submenu.mypage { position: relative; display: block; height: 65px; margin: 0; background-color: #655f7b;}
.wd-submenu.mypage ul { display:block; width: 100%; margin: 0; padding: 8px 20px 0 20px; box-sizing: border-box;}
.wd-submenu.mypage ul li { display: inline-block; width: 24%; margin: 0; padding: 0 ; border-right: 1px dotted #948ea8; text-align: center; vertical-align: top;}
@media (max-width: 320px) { 
    .wd-submenu.mypage ul li { width: 23.5%;}
}


.wd-submenu.mypage ul li:first-child { padding: 0 ;}
.wd-submenu.mypage ul li:last-child { margin: 0; padding: 0; border-right: 0;}
.wd-submenu.mypage ul li a { display: inline-block; padding: 0 0 5px 0; font-size: 16px; color: #fff; font-weight: 400; line-height: 20px; word-break: keep-all; word-wrap: break-word; box-sizing: border-box;}
.wd-submenu.mypage ul li:last-child::after { display: none;}
.wd-submenu.mypage ul li a.active { border-bottom: 2px solid #fff;}
.wd-submenu.mypage ul li a:hover,.wd-submenu.mypage ul li a:focus {}

/*----------------------
    Mypage
------------------------*/
.hd-menu-tit { display: block; width: 100%; height: 48px; font-size: 20px; color: #fff; font-weight: 500; line-height: 48px; text-align: center; box-sizing: border-box; background-color: #07135b;}

.hd-menubox { display: block; width: 100%;  box-sizing: border-box; background-color: #07135b;}

.hd-menubox > ul { display: inline-block; width: 100%; color:#fff; box-sizing: border-box; }
.hd-menubox > ul > li { box-sizing: border-box; }

.hd-menubox .hd-tit { float: left; width: 36%; padding: 5px 2px 5px 18px; font-size: 18px; font-weight:500; line-height: 35px;}

.hd-menubox .hd-sbmenu { float: right; width: 64%; font-size: 16px; padding: 5px 10px; background: #655f7b}
.hd-menubox .hd-sbmenu select { font-size: 14px; color:#fff; background: #655f7b}

/*----------------------
    Title
------------------------*/
.md-top { padding-top: 25px !important;} /* 2번째 부터 위치한 타이틀에 사용 */
/* h1 */
.page-title { width: 100%; margin:0 0 5px 0; font-size: 1.34rem; font-weight:700; color: #6b1e74;line-height: 2rem;}
.page-title.detail { width: 100%; padding: 0 0 5px 0; font-size: 1.375rem; font-weight: 400; line-height: 2rem; color: #333; letter-spacing: -1px; word-break: keep-all;}
.page-title.wd-auto { float: left; width: auto;}


.page-title-box { display: inline-block; width: 100%; margin: 0 0 5px 0;}
.page-title-box .sub-country { padding: 10px 0 0 11px; font-size: 16px; color: #666; font-weight: 400;}
.page-title-box .sub-country::before { position: absolute; display: inline-block; content: ''; width: 3px; height: 16px; margin:0 0 0 -11px; background-color: #c1c1c1;}
.page-title-box .sub-text { display: inline-block; width: 100%; padding: 5px 0 0 0; font-size: 16px; color: #666; font-weight: 400; box-sizing: border-box;}
.page-title-box .sub-text .date { padding: 0 25px 0 0; color: #888; }
.page-title-box .sub-text .date::after { position: absolute; display: inline-block; content: ''; width: 3px; height: 16px; margin:0 0 0 12px; background-color: #c1c1c1;}

.page-title-box .sub-text2 { padding: 12px 0 0 10px; font-size: 18px; color: #333; font-weight: 400; word-break: break-all; word-wrap: break-word; box-sizing: border-box;}

.page-title-box .num { display: inline-block; padding: 10px 0 0 3px; font-size: 16px; font-weight: 400;}

.page-title-box .sub-text .content-date { padding: 0 25px 0 0; color: #888; }
.page-title-box .sub-text .content-date::after { position: absolute; display: inline-block; content: ''; width: 3px; height: 16px; margin:0 0 0 12px; background-color: #fff;}

.page-title-box .selec-box {float:right;}

@media (max-width: 430px) {
.page-title-box .selec-box { float:left; width:100%;}
}

/* h2 */
.subm-title { width: 100%; margin:0 0 16px 0; font-size: 1.25rem; font-weight:700; color: #6b1e74;line-height: 2rem;}

.subm-export-subtitle { width: 100%; margin:0 0 16px 0; font-size: 1.25rem; font-weight:700; color: #6b1e74; line-height: 2rem;}
.subm-export-subtitle.clr-white { color: #fff; text-shadow: 3px 2px 5px rgba(0,0,0,.8);} 

.sub-txt-title { display: inline-block; width: 100%; margin: 15px 0 0 0; font-size: 1.2rem; font-weight:600; color: #6b1e74;line-height: 2rem;}
.sub-txt-title span { padding: 0 0 0 10px; font-size:16px; color:#444; font-weight:400; }
@media (max-width: 320px){ 
    .sub-txt-title { letter-spacing: -0.9px}
    .sub-txt-title span { padding: 0 0 0 4px; font-size: 13px; letter-spacing: -0.7px}
}


.sub-title { float:left; font-size: 20px; font-weight: 700; color: #6b1e74; line-height: 24px; word-break: keep-all; word-wrap: break-word; box-sizing: border-box;} /* 아이콘 있는 타이틀*/
.sub-title::before { position: absolute; content: ''; display: inline-block; width: 8px; height: 15px; background-image: url(../../../../static/frt/images/icon-set.png); background-position: 0 -17px; box-sizing: border-box;}
.sub-title.nobg { width: 100%; margin: 15px 0 15px 0; padding: 0 0 11px 15px; border-bottom: 2px solid #e1e1e1;}

@media (max-width: 767px) { 
    .sub-title.nobg { margin: 15px 0 5px 0; }
}

.sub-title.nobg::before { margin: 7px 0 0 -15px;}
.sub-title.nobg.topline { padding: 13px 0 11px 15px; border-top: 1px solid #eee;} /* 글 중간에 사용*/
.sub-title.nobg.tline-sb { margin: 15px 0 0 0; padding: 13px 0 11px 15px; border-top: 1px solid #eee; border-bottom: 1px solid #e1e1e1;}
.sub-title.nobg.top {margin-top: 0 !important;}

.subtitle-bgbox { float:left; width: 100%; margin: 15px 0 0 0; padding: 10px 0 10px 30px; background-color: #f7f7f7; box-sizing: border-box;}
.subtitle-bgbox.md-h { margin: 20px 0 0 0 !important;} /* 내용 중간에 있는 서브타이틀 */
.subtitle-bgbox .sub-title::before { margin: 7px 0 0 -15px;}
.subtitle-bgbox.btline { border-bottom: 2px solid #bdbdbd;}
.h2-sfont{margin:0 0 0 10px; font-size:14px; color:#555; font-weight:600}/* H2옆에 작은 글씨 */
.h2-sfont2 {margin:0 0 0 10px; font-size:16px; color:#444; font-weight:400}/* H2옆에 작은 글씨 */


/* 통합검색 타이틀 */
.tsearch-subtitle { float: left ; padding: 15px 0; font-size: 20px; color: #333; font-weight: 700;}
.tsearch-subtitle::after { display: block; content: ''; clear: both;}
.tsearch-subtitle .num { font-size: 16px; font-weight: 400;}

/* 진단 타이틀 */
.diagnosis-subtitle {  float: left ; padding: 20px 0; font-size: 20px; color: #333; font-weight: 700;}

/* 행사신청 타이틀 */
.event-title { float: left;  width: 100%; padding: 0 0 10px 0; font-size: 1.375rem; font-weight: 400; color: #6b1e74; line-height: 2rem; letter-spacing: -1px; word-break: keep-all; box-sizing: border-box;}
.event-title-box { display: inline-block; width: 100%; margin:0;}
.event-title-box .sub-country { padding: 19px 0 0 11px; font-size: 16px; color: #666; font-weight: 400;}
.event-title-box .sub-country::before { position: absolute; display: inline-block; content: ''; width: 3px; height: 16px; margin:0 0 0 -11px; background-color: #c1c1c1;}


/* subject title */
.subject-title { display:inline-block; width: 100%; margin: 15px 0; font-size: 1.37rem; line-height: 1.8rem; color: #333; font-weight: 600;}

/* h3 */
.subtitle-3depth { padding: 10px 0 3px 0; font-size: 17px; color: #111; font-weight: 400; letter-spacing: -1px}

/* Top button */
.top-button { display: block; position: fixed; overflow: visible; z-index: 999; width: 40px; height: 40px; bottom: 10px; border: none;
    border-radius:50px; right: 6px; background: rgba(255,255,255,0.9); cursor: pointer; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.30);}

.top-button::before { display:block; position: absolute; padding: 10px 0 0 11px; font-family:"Font Awesome 5 Free", sans-serif; font-weight: 900; font-size:20px; color: #666; content:'\f077';}