@charset "utf-8";

.dim {position:fixed; content:""; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:0}

.ui-autocomplete {z-index: 9999 !important;}

#nice_layer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    margin-left: 50vw !important;
    margin-top: 50vh !important;
    transform: translate(-50%, -50%) !important;
}

header .inner {margin:0 auto; padding:0 20px; width:1320px; max-width:100%}

/* CONTAINER */
.outerWrapper .inner {margin:0 auto; padding:0 20px; width:1320px; max-width:100%}
.subTitle {margin:0 auto; padding:0 20px; width:1320px; max-width:100%}
.subPage {background:url("/images/common-new/bg_page.png") no-repeat top center / 100% auto}

.breadCrumb {padding:24px 0}
.breadCrumb ul li,
.breadCrumb ul li a{display:inline-block}
.breadCrumb ul li a span {display:inline-block; line-height:1; border-bottom:1px solid #2d2d2d; font-size:15px; color:#2D2D2D}
.breadCrumb ul li.home a {display:inline-block; padding-left:24px; background:url("/images/common-new/icon_home.png") no-repeat center left / 16px auto}
.breadCrumb ul li:not(.home) {padding-left:24px; background:url("/images/common-new/icon_depth.png") no-repeat 3px 4px / 16px auto}

.pageTit {margin:30px 0}
.pageTit h2 {font-weight:700; font-size:40px}
@media (max-width:1160px) {
    .pageTit {margin:0 0 24px}
    .pageTit h2 {font-size:32px}
}
/* HEADER */
#header {position:fixed; top:0; width:100%; background:#fff; z-index:100}
#header > .inner {position:relative; margin:32px auto 0; height:84px}
#header > .inner > h1 {position:absolute; top:25px; left:20px; width:136px; height:34px; background:url("/images/common-new/logo.png")no-repeat center / 100% auto}
#header > .inner > h1 a {display:block; color:transparent}
@media (max-width:940px) {
    #header > .inner {height:50px; margin:50px 0 0; border-bottom:1px solid #D8D8D8}
    #header > .inner > h1 {top:15px; width:88px; height:22px}
}

/* skip nav */
#skipNav {height:0}
#skipNav dt {position:absolute !important; overflow:hidden; width:1px; height:1px}
#skipNav dd a {display:block; position:absolute; top:-10000px; left:0; z-index:999999; overflow:hidden; width:100%; text-align:center; font-size:16px}
#skipNav dd a.on {position:absolute; top:0; left:0; overflow:hidden; padding:15px 0; font-weight:bold; color:#fff; background:#272727}
@media (min-width:1161px) {
	html,body {/*overflow-y:auto !important*/}
}

/* 누리집 배너 */
.noriBanner {position:fixed; top:0; z-index:1000; padding:4px 0; width:100%; background-color:#EDF1F5}
.noriBanner .inner {margin-right:auto; margin-left:auto; width:100%; max-width:1300px; padding:4px 0; line-height:32px}
.noriBanner .inner p {padding-left:32px; line-height:17px; background:url('/images/common-new/icon_nuri.png') no-repeat top left / auto 16px; word-break:keep-all; font-size:15px}

/* 통합검색 */
.totalSrch {position:absolute; top:11px; left:50%; transform:translateX(-50%)}
.totalSrch > div {display:flex; height: 60px; align-items:center; border:2px solid #228738; border-radius:999px}
.totalSrch input {padding:0 20px; width:320px; height:56px; line-height:56px; font-size:18px; border:none; border-radius:999px}
.totalSrch input:focus {outline:2px auto #000}
.totalSrch .btnWrap {margin-right:10px; white-space:nowrap}

/* 버튼 */
.iconBtn {display:inline-block; width:32px; height:32px; text-indent:-9999px; border:none; background-color:transparent; background-repeat:no-repeat; background-size:100% auto}
.iconBtn.srch {background-image:url("/images/common-new/icon_srch.png")}
.iconBtn.mic {background-image:url("/images/common-new/icon_mic.png")}
.iconBtn.map {background-image:url("/images/common-new/icon_location.png")}
@media (max-width:1280px) {
 .iconBtn {width:24px; height:24px}
}

/* util */
.util {position:absolute; top:30px; right:20px}
.util,
.util ul {display:flex; align-items:center; font-size:15px}
.util ul li {padding:0 12px}
.util ul li + li {position:relative}
.util ul li + li:before {position:absolute; content:""; top:1px; left:0; width:1px; height:16px; background:#C6C6C6}
.util ul li a {color:#1D1D1D}
.util p {padding:4px 8px 4px 28px; border-radius:4px; background:#228738 url("/images/common-new/icon_headphone.png") no-repeat center left 8px / 14px auto; color:#fff;}
#header .m_menuOpen,
#header .m_menuClose {display:none}
@media (max-width:1280px) {
    #header .m_menuOpen {position:absolute; right:0; width:100px; height:100%; background:url("/images/common-new/btn_open_m.png") no-repeat center / 20px auto; border:none; font-size:0}
    .totalSrch {max-width:340px; margin-left:-120px;}
    .totalSrch input {width:240px;}
}
@media (max-width:940px) {
    #header .util,
    #header .m_menuOpen,
    #header .m_menuClose {display:none}
    #header .m_menuOpen {position:absolute; top:0; right:0; width:50px; height:48px; background:url("/images/common-new/btn_open_m.png") no-repeat center / 20px auto; border:none; font-size:0}

    .totalSrch {top:inherit; left:0; bottom:11px; margin:0; padding:0 18px; width:100%; transform:none}
    .totalSrch input[type=text] {width:100%}
    #header > .inner > .totalSrch {display:none}

    #header .m_menuClose {position:absolute; top:0; right:0; width:50px; height:50px; background:url("/images/common-new/btn_close_m.png") no-repeat center / 24px auto; border:none; font-size:0}
}

/* GNB */
#gnb {--detail-open-height: calc(100vh - 158px); position:relative; overflow:hidden; transition:height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); height:55px; background:#fff; border-top:1px solid #c6c6c6; border-bottom:1px solid #c6c6c6}
#gnb.primaryOpen {height:498px}
#gnb.detailOpen {height:/*calc(100vh - 180px)*/var(--detail-open-height)}
#gnb .loginBtn {display:none}
#gnb .util {display:none}
#gnb:before {position:absolute; content:""; top:54px; left:0; width:100%; height:1px; background:#c6c6c6}
#gnb .primaryMenu .inner > ul {display:flex}
#gnb .primaryMenu .inner > ul > li {flex:1; position:relative}
#gnb .primaryMenu .inner > ul > li.shareMap > a span {background:url("/images/common-new/icon_link_m.png") no-repeat center right / 20px auto}
#gnb .primaryMenu .inner > ul > li.shareMap > div {background:rgb(238, 242, 247, 0.25) /*url(/images/common-new/gnb_bg_map.png)*/ no-repeat center top / 100% auto}
#gnb .primaryMenu .inner > ul > li > a {display:block; width:100%; line-height:54px; font-weight:600; font-size:19px; color:#333; text-align:center; letter-spacing:0.5px}
#gnb.primaryOpen .primaryMenu .inner > ul > li:not(.shareMap) > a span,
#gnb.detailOpen .primaryMenu .inner > ul > li:not(.shareMap) > a span {background:url("/images/common-new/icon_arrow_up.png") no-repeat center right / 20px auto}
#gnb .primaryMenu .inner > ul > li > a span {padding-right:28px; background:url("/images/common-new/icon_arrow_down.png") no-repeat center right / 20px auto}
#gnb .primaryMenu .inner > ul > li > div {position:absolute; top:55px; padding:16px 0; width:100%; height:442px; border-left:1px solid #c6c6c6}
#gnb.primaryOpen .primaryMenu .inner > ul > li > div {display:block !important}
#gnb .primaryMenu .inner > ul > li:last-child > div {border-right:1px solid #c6c6c6}
#gnb .primaryMenu .inner > ul > li > div ul li {text-align:left}
#gnb .primaryMenu .inner > ul > li > div ul li a {position:relative; display:inline-block; padding-left:28px; line-height:46px; font-weight:500; font-size:17px; color:#1d1d1d; text-align:left; cursor:pointer}
#gnb .primaryMenu .inner > ul > li > div ul li a:before {position:absolute; content:""; top:20px; left:15px; width:4px; height:4px; background:#333; border-radius:9999px}
#gnb .primaryMenu .inner > ul > li > div ul li a:hover,
#gnb .primaryMenu .inner > ul > li > div ul li a:focus {font-weight:600; color:#1D56BC; text-decoration:underline}
#gnb .primaryMenu .inner > ul > li > div ul li a:hover:before,
#gnb .primaryMenu .inner > ul > li > div ul li a:focus:before {background:#1D56BC}
#gnb .primaryMenu .inner > ul > li.on {background:#01B200}
#gnb .primaryMenu .inner > ul > li.on > a {color:#fff}
#gnb .primaryMenu .inner > ul > li.on:not(.shareMap) > a span,
#gnb.primaryOpen .primaryMenu .inner > ul > li.on:not(.shareMap) > a span,
#gnb.detailOpen .primaryMenu .inner > ul > li.on:not(.shareMap) > a span {background-image:url("/images/common-new/icon_arrow_up_white.png")}
#gnb .primaryMenu .inner > ul > li.shareMap.on > a span {background-image:url("/images/common-new/icon_link.png")}
/* ===== 대메뉴 호버 ===== */
@media (min-width:941px) {
    #gnb .primaryMenu .inner > ul > li:hover {background:#01B200}
    #gnb .primaryMenu .inner > ul > li:hover > a {color:#fff}
    #gnb .primaryMenu .inner > ul > li:not(.shareMap):hover > a span,
    #gnb.primaryOpen .primaryMenu .inner > ul > li:not(.shareMap):hover > a span,
    #gnb.detailOpen .primaryMenu .inner > ul > li:not(.shareMap):hover > a span {background-image:url("/images/common-new/icon_arrow_up_white.png")}
    #gnb .primaryMenu .inner > ul > li.shareMap:hover > a span {background-image:url("/images/common-new/icon_link.png")}
}
#gnb .m_topArea {display:none}
@media (max-width:940px) {
    #gnb .util,
    #header .m_menuOpen,
    #header .m_menuClose {display:block}

    #gnb {position:fixed; top:0; left:105%; right:0; bottom:0; padding-top:165px; width:100%; height:100%; border-top:none; z-index:9999; transition:left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);}
    #gnb:before {top:165px}

    #gnb .m_topArea {display:block; position:absolute; top:0; left:0; width:100%; padding:16px}
    #gnb .m_topArea .loginBtn {display:block; margin-top:16px; padding-left:32px; background:url("/images/common-new/icon_login.png") no-repeat top 4px left / 19px auto; font-weight:600; font-size:22px; color:#1d1d1d}
    #gnb .m_topArea .util {position:static}
    #gnb .m_topArea .util ul li:first-child {padding-left:0}
    #gnb .m_topArea .util ul li + li:before {left:1px}
    #gnb .m_topArea .util ul li a  {font-size:17px}
    #gnb .m_topArea .totalSrch.mobile {position:static; margin:16px 0 0; padding:0}
    #gnb .m_topArea .totalSrch.mobile input[type=text] {line-height:48px; font-size:17px}

    #gnb .primaryMenu {height:calc(100vh - 165px); background:#EEF2F7}
    #gnb .primaryMenu .inner {padding:0; height:100%}
    #gnb .primaryMenu .inner > ul {display:block; position:relative; height:100%; margin-top:1px}
    #gnb .primaryMenu .inner > ul > li {position:static; width:140px}
    #gnb .primaryMenu .inner > ul > li.active {background:#fff}
    #gnb .primaryMenu .inner > ul > li.on {background:transparent}
    #gnb .primaryMenu .inner > ul > li.on > a {color:#333}
    #gnb .primaryMenu .inner > ul > li > a {padding-left:24px; font-size:15px; text-align:left}
    #gnb .primaryMenu .inner > ul > li > a span,
    #gnb .primaryMenu .inner > ul > li.shareMap > a span{padding-right:0; background:none}
    #gnb .primaryMenu .inner > ul > li.shareMap > div {background:#fff no-repeat center top / 100% auto}
    #gnb .primaryMenu .inner > ul > li:first-child > div {display:block !important; height:100%}
    #gnb .primaryMenu .inner > ul > li:last-child > div {border:none}
    #gnb .primaryMenu .inner > ul > li > div {display:none; top:0; left:140px; padding:0; width:calc(100vw - 140px); height:calc(100vh - 165px); background-color:#fff; border:none}
    #gnb .primaryMenu .inner > ul > li > div ul li {padding:0 16px; width:100%}
    #gnb .primaryMenu .inner > ul > li > div ul li a {padding:0 8px; width:100%; line-height:60px; border-bottom:1px solid #888}
    #gnb .primaryMenu .inner > ul > li > div ul li a:before {display:none}
}

#gnb.detailOpen {height:614px;}
#gnb .detailMenu {display:none; position:absolute; width:100%; background:#fff; border-bottom:1px solid #C6C6C6}
#gnb.detailOpen .detailMenu {display:block}
#gnb .detailMenu .menuTop {background:#EEF2F7; border-top:1px solid #C6C6C6; border-bottom:1px solid #C6C6C6}
#gnb .detailMenu .menuTop .inner {display:flex; align-items:center; justify-content:space-between; height:84px}
#gnb .detailMenu .menuTop strong {font-weight:500; font-size:24px}
#gnb .detailMenu .menuTop a {padding-right:24px; background:url("/images/common-new/icon_gnb_arrow_right.png") no-repeat center right / 20px auto; font-size:17px; color:#1d1d1d}

#gnb .detailMenu > .inner {padding:0; width:1280px; height:calc(100vh - 299px); overflow-y:auto; border-right:1px solid #C6C6C6; border-left:1px solid #C6C6C6}
#gnb .detailMenu .inner  div {display:flex; align-items:center; min-height:46px}
#gnb .detailMenu .inner  div + div {border-top:1px solid #C6C6C6}
#gnb .detailMenu .inner  div strong {display:block; padding:0 0 0 16px; min-width:256px; line-height:34px; color:#2d2d2d}
#gnb .detailMenu .inner  div strong span {display:block; padding-left:40px; height:100%; background-repeat:no-repeat; background-size:32px auto; background-position:center left; font-size:18px; font-weight:700;}
#gnb .detailMenu .inner  div#menu010000 strong span {background-image:url("/images/common-new/icon_gnb_menu01.png")}
/* #gnb .detailMenu .inner  div#menu010100 strong span {background-image:url("/images/common-new/icon_gnb_menu04.png")} */
/* #gnb .detailMenu .inner  div#menu010200 strong span {background-image:url("/images/common-new/icon_gnb_menu01.png")} */
/* #gnb .detailMenu .inner  div#menu010500 strong span {background-image:url("/images/common-new/icon_gnb_menu01.png")} */
/* #gnb .detailMenu .inner  div#menu010700 strong span {background-image:url("/images/common-new/icon_gnb_menu02.png")} */
#gnb .detailMenu .inner  div#menu020000 strong span {background-image:url("/images/common-new/icon_gnb_menu02.png")}
#gnb .detailMenu .inner  div#menu030000 strong span {background-image:url("/images/common-new/icon_gnb_menu05.png")}
#gnb .detailMenu .inner  div#menu040000 strong span {background-image:url("/images/common-new/icon_gnb_menu03.png")}
#gnb .detailMenu .inner  div#menu050000 strong span {background-image:url("/images/common-new/icon_gnb_menu04.png")}
#gnb .detailMenu .inner  div.shareMapNav strong span {background-image:url("/images/common-new/icon_gnb_menu06.png")}
#gnb .detailMenu .inner  div.shareMapNav {background:#01B100}
#gnb .detailMenu .inner  div.shareMapNav > strong {color:#fff}
#gnb .detailMenu .inner  div.shareMapNav > div {background:#fff}
#gnb .detailMenu .inner  div strong + div {border-left:1px solid #C6C6C6; width:100%}
#gnb .detailMenu .inner  div > div {padding:10px 16px}
#gnb .detailMenu .inner  div > ul {display:grid; grid-template-columns:repeat(6, 1fr); width:100%}
#gnb .detailMenu .inner  div > ul > li {position:relative; padding-left:10px; height:23px; font-size:15px}
#gnb .detailMenu .inner  div > ul > li:before {position:absolute; content:""; top:8px; left:0; width:4px; height:4px; background:#444; border-radius:50%}
#gnb .detailMenu .inner  div > ul > li:hover:before {background:#1D56BC}
#gnb .detailMenu .inner  div > ul > li a {font-size:15px; color:#444; letter-spacing:0.2px}
#gnb .detailMenu .inner  div > ul > li:hover a {text-decoration:underline; font-weight:600; color:#1D56BC}
#gnb .detailMenu .inner  div > ul > li a span {padding-right:24px; background:url("/images/common-new/icon_gnb_link.png") no-repeat center right / 20px auto}

/* ========================================
   OACX 간편인증 CSS 충돌 보정 (v1.5.25M)
   로그인 페이지에서 간편인증 팝업 열릴 때만 적용됨
   (html.oacx-active, #oacxEmbededContents 선택자 스코핑)
   ======================================== */
html.oacx-active { font-size: 62.5% !important; }
html.oacx-active body { font-size: 16px !important; }
#oacxEmbededContents .w30 { width: 30% !important; }
#oacxEmbededContents .w70 { width: 70% !important; }
#oacxEmbededContents .white { color: inherit !important; background: #fff !important; }
#oacxEmbededContents *:focus { outline: none !important; }
#oacxEmbededContents .select { margin-bottom: 0 !important; }
#oacxEmbededContents .mr15 { margin-right: 0 !important; }