@charset "utf-8"; @import url('font/exit_font.css'); body { overflow-x: hidden; } 

/********* 컨텐츠 넓이 *********/
.inner-padding { width:1200px; margin:0 auto; } 
.sub-inner-padding { max-width: 1200px; width: 100%; margin: 0 auto; } 

@media only screen and (max-width: 1720px) { /* .sub-inner-padding { padding: 0 30px; } */ } 
@media only screen and (max-width: 1250px){
 .inner-padding { width: 100%; padding: 0 30px; } 
 .sub-inner-padding { padding: 0 20px; } 
 }
@media only screen and (max-width: 767px){
 .inner-padding { padding: 0 20px; } 
 }
/* 레이어 팝업 */
/* .lay-popup-wrap { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; }  */
/* .lay-popup-wrap .lay-popup .lay-popup-img { position: relative; width: 550px; height: auto; }  */
/* .lay-popup-wrap .lay-popup .lay-popup-img img { width: 100%; height: 100%; object-fit: cover; }  */
/* .lay-popup-wrap .lay-popup .lay-popup-bottom { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #333; }  */
/* .lay-popup-wrap .lay-popup .lay-popup-bottom a { font-size: 13px; color: #fff; }  */
/* .lay-popup-wrap .lay-popup .lay-popup-bottom button { font-size: 13px; color: #fff; }  */
/* .ma-lay-popup {background: #fff; border: 1px solid var(--bd-color);} */
/* .lay-popup-bottom {display: flex; justify-content: space-between; padding: 3px 10px;} */
/* @media only screen and (max-width: 1023px){ */
/*  .ma-lay-popup { top: 40px; left: 0;}  */
/* .lay-popup-img img { max-width: calc(100vw - 60px) !important; height: unset !important; }  */
/*  } */
/**************** 팝업 ****************/
.mainPopupLayer {
    z-index: 101;
    max-width: 100%;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border: 1px solid #fff;
    min-width:300px;
}

.mainPopupLayer .lay-popup-img {
    height: auto !important;
    
}

.mainPopupLayer .lay-popup-img img {
    max-width: 100% !important;
    height: auto !important;
}

.mainPopupLayer .lay-popup-bottom {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: #333;
}

.mainPopupLayer .lay-popup-bottom a {
    font-size: 14px;
    color: #fff;
    opacity: .9;
}

.popuplayer-wrap {position: fixed; top: 50px; left: 50px; display: flex; flex-wrap: wrap; gap: 30px; z-index:99; max-width:90vw;}
@media only screen and (max-width: 1023px) {
	.popuplayer-wrap {display: block;}
	.popupLayerAutoPosition { position: absolute !important; top: 0 !important; left: 0 !important; }
	.ma-lay-popup-wrap { position: absolute !important; top: 0 !important; left: 0 !important; }
}
@media only screen and (max-width: 767px) {
/* 	.popuplayer-wrap {left:0 !important;  } */
	.mainPopupLayer .lay-popup-img { width: 100% !important; height: auto !important; }
}

/********* thead *********/
#exit-header { position: relative; } 
#seoul-gnb-plugin a:focus {outline-offset: -2px; outline: 2px solid #111;}
#seoul-gnb-plugin.white { border-bottom: 1px solid var(--bd-color); } 
.fixed-wrap { position: fixed; top: 0; left: 0; z-index: 3; width: 100%; transition: top 0.3s ease; } 
.thead { display: flex; width: 100%; margin: 0 auto; padding: 10px 60px; justify-content: space-between; align-items: center; height: var(--header-height); background: #fff; border-bottom: 1px solid var(--bd-color); } 
.thead .logo { position: relative; z-index: 6; } 
.thead .logo a { display: block; width: 203px; height: 50px; background: url(../img/layout/logo.svg)no-repeat center center / contain; font-size: 0; } 
@media only screen and (max-width: 1200px){
 .thead { padding: 10px 30px; } 
.thead .logo a { width: 153px; height: 38px; } 
 }
@media only screen and (max-width: 767px){
 .thead { padding: 0 20px; } 
.thead .logo a { width: 120px; height: 29px; } 
 }

/* .new > a { position: relative; } */
.new > a::after { content: "N"; color: var(--point-color); font-size: 11px; padding-left: 3px;} 

/********* gnb *********/
.gnb-box { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 1; transition: all 0.5s; z-index: 5; } 
.gnb-box .gnb { position: relative; display: flex; justify-content: center; gap: 50px; background: #fff; border-bottom: 1px solid var(--bd-color); } 
/* .gnb-box .gnb > li { width: 100px; } */
.gnb-box .gnb > li a.gnb-title { position: relative; z-index: 10; display: block; line-height: var(--header-height); font-weight: 600; font-size: 2.2rem; color: var(--main-color); text-align: center; } 
.gnb-box .gnb > li a.gnb-title.active::before { width: 100%; } 
.gnb-box .gnb > li:hover a.gnb-title, .gnb-box .gnb > li:active a.gnb-title, .gnb-box .gnb > li:focus a.gnb-title { color: var(--main-color); } 
@media only screen and (max-width: 1200px){
 .gnb-box .gnb > li a.gnb-title { font-size: 1.8rem; } 
 }

/* lnb-list1 */
.gnb-box .gnb > li .lnb-wrap { display: none; } 
.gnb-box .gnb > li .lnb-wrap { position: absolute; top: var(--header-height); left: 0; z-index: 2; width: 100%; opacity: 1; } 
.gnb-box .gnb > li .lnb-wrap .lnb-inner { position: relative; display: flex; width: 1200px; margin: 0 auto; min-height: 300px; } 
.gnb-box .gnb > li .lnb-wrap .lnb-inner::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1000%; height: 100%; background: #fff; border-bottom: 1px solid var(--bd-color); border-top: 1px solid var(--bd-color); } 
/* .gnb-box .gnb > li .lnb-wrap { position: absolute; top: var(--header-height); left: 0; z-index: 2; width: 100%; opacity: 1; background-color: #fff; border-bottom: 1px solid var(--bd-color); } 
.gnb-box .gnb > li .lnb-wrap .lnb-inner { display: flex; width: 1200px; margin: 0 auto; min-height: 200px; } */
.gnb-box .gnb > li .lnb-wrap .lnb-inner .lf { position: relative; width: 303px; padding: 30px; border-right: 1px solid var(--bd-color); } 
.gnb-box .gnb > li .lnb-wrap .lf::after { content: ""; position: absolute; bottom: 40px; right: 32px; width: 271px; height: 24px; background: url(../img/layout/lnb-left-deco.svg); } 
.gnb-box .gnb > li .lnb-wrap .lf strong { position: relative; display: inline-block; line-height: normal; font-weight: 600; font-size: 3.0rem; color: var(--main-color); word-break: break-all; word-wrap: break-word; } 
.gnb-box .gnb > li .lnb-wrap .lf strong::after { content: ""; position: absolute; top: -5px; right: -20px; width: 9px; height: 9px; border-radius: 3px; background: var(--point-color); } 
.gnb-box .gnb > li .lnb-list1 { display: flex; flex-wrap: wrap; width: calc(100% - 303px); height: 100%; padding: 40px 25px; background-color: #fff; gap: 30px 0; border-left: 1px solid var(--bd-color); } 
.gnb-box .gnb > li .lnb-list1 > li { width: 25%; padding: 0 15px; } 
.gnb-box .gnb > li .lnb-list1 > li > a { position: relative; display: flex; align-items: center; padding: 14px; line-height: 1.2; font-weight: 500; font-size: 1.7rem; color: #444; word-break: keep-all; border: 1px solid var(--bd-color); transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; }
.gnb-box .gnb > li .lnb-list1 > li > a.arr { background-repeat: no-repeat; background-size: auto 6px; background-position: right 20px center; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.56 5.3'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23999; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px; %7D %3C/style%3E%3C/defs%3E%3Cg id='icon'%3E%3Cpolyline class='cls-1' points='8.81 .75 4.78 4.55 .75 .75'/%3E%3C/g%3E%3C/svg%3E"); } 
.gnb-box .gnb > li .lnb-list1 > li > a > .link { display: inline-block; width: 16px; height: 16px; background: url(../img/layout/icn-open-new-window.svg); background-repeat: no-repeat; background-size: contain; margin-left: 7px; } 


.gnb-box .gnb > li .lnb-list1 > li > a:hover,
.gnb-box .gnb > li .lnb-list1 > li > a:focus { border: 1px solid var(--point-color); } 
/* .gnb-box .gnb > li .lnb-list1 > li a:hover, .gnb-box .gnb > li .lnb-list1 > li a:focus, .gnb-box .gnb > li .lnb-list1 > li a:active { font-weight: 500; }  */
@media only screen and (max-width: 1200px){
 .gnb-box .gnb > li .lnb-wrap .lnb-inner { width: 100%; } 
 .gnb-box .gnb > li .lnb-wrap .lnb-inner .lf { width: 20%; } 
.gnb-box .gnb > li .lnb-list1 { width: calc(100% - 20%); } 
.gnb-box .gnb > li .lnb-list1 > li { width: 33.3%; max-width: 250px; } 
 }
@media only screen and (max-width: 1023px){
 .gnb-box { display: none; } 
 }

/* lnb-list2 */
.gnb-box .gnb > li .lnb-list2 { padding: 20px 0; } 
.gnb-box .gnb > li .lnb-list2 li + li { margin-top: 5px; } 
.gnb-box .gnb > li .lnb-list2 li a { position: relative; padding-left: 10px; line-height: 1.5; font-size: 15px; color: #666; font-weight: 400; } 
.gnb-box .gnb > li .lnb-list2 li a::before { content: ""; position: absolute; top: 7px; left: 0; width: 4px; height: 4px; background: var(--point-color); } 
/* [동향] 펼침 메뉴: wide(서울 도시기본계획 모니터링) 항목은 순서와 관계없이 1행 3열에 넓게 두고, 나머지는 빈 칸에 차례로 채움(5개면 3+2). 하위 목록은 둘째 줄을 밀지 않도록 아래로 겹쳐 펼침 */
.gnb-box .gnb > li.trend .lnb-list1 { display: grid; grid-template-columns: repeat(4, 1fr); }
.gnb-box .gnb > li.trend .lnb-list1 > li { width: auto; }
.gnb-box .gnb > li.trend .lnb-list1 > li.wide { grid-column: 3 / 5; grid-row: 1; position: relative; align-self: start; }
.gnb-box .gnb > li.trend .lnb-list1 > li.wide > .lnb-list2 { position: absolute; top: 100%; left: 15px; right: 15px; }
.gnb-box .gnb > li.trend .lnb-list2 li a > .link { display: inline-block; width: 14px; height: 14px; vertical-align: -1px; margin-left: 5px; background: url(../img/layout/icn-open-new-window.svg) no-repeat; background-size: contain; }
@media only screen and (min-width: 1201px){
 /* 3~4열(목록 폭 50%) 중 77% = 목록 폭 38.5% */
 .gnb-box .gnb > li.trend .lnb-list1 > li.wide { width: 77%; }
 }
@media only screen and (max-width: 1200px){
 .gnb-box .gnb > li.trend .lnb-list1 { grid-template-columns: repeat(3, 1fr); }
 .gnb-box .gnb > li.trend .lnb-list1 > li.wide { grid-column: 3 / 4; }
 }
/********* gnb *********/
.thead.active { position: relative; z-index: 2; } 
.thead.active .gnb-box .gnb > li a.gnb-title { color: var(--gray-44); } 
.thead.active .gnb-box .gnb > li:hover a.gnb-title { color: var(--main-color); } 
.gnb-box .gnb > li .lnb-wrap.active { display: flex; opacity: 1; } 
.sub .thead .gnb-box .gnb > li { color: #fff; } 
/******** util ********/
.thead .right { display: flex; align-items: center; justify-content: center; gap: 30px; position: relative; z-index: 6; } 
.thead .right .info > a { color: #717171; font-size: 1.6rem; font-weight: 500; } 
.thead .right .lang > a { color: #717171; font-size: 1.6rem; font-weight: 500; } 
.thead .right .search a { display: inline-block; width: 22px; height: 22px; font-size: 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg width='22' height='23' viewBox='0 0 22 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.79709 19.1782C14.6556 19.1782 18.5942 15.2396 18.5942 10.3811C18.5942 5.52262 14.6556 1.58403 9.79709 1.58403C4.93859 1.58403 1 5.52262 1 10.3811C1 15.2396 4.93859 19.1782 9.79709 19.1782Z' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.0068 16.6129L20.9998 21.6059' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } 
/* .thead .right .search .search-box-pc { display: none; justify-content: center; align-items: center; flex-flow: column wrap; width: 100%; height: auto; padding: 100px 0; background-color: #fff; position: fixed; left: 0; top: 0; z-index: 10; transform: translateY(-600px); transition: transform 0.3s; border: 1px solid var(--bd-color); } 
.thead .right .search .search-box-pc strong { display: block; margin-bottom: 30px; font-size: 3.0rem; color: var(--main-color); word-break: keep-all; text-align: center; } 
.thead .right .search .search-box { width: 100%; max-width: 750px; display: flex; } 
.thead .right .search .search-box input { width: 100%; border: 0; padding: 0 30px; font-size: 1.8rem; line-height: 5rem; border: 2px solid var(--main-color); } 
.thead .right .search .search-box input:focus { outline: none; } 
.thead .right .search .search-box button { font-size: 1.8rem; white-space: nowrap; color: #fff; display: inline-block; padding: 0 25px; background: var(--main-color); border: 1px solid var(--main-color); } */
.thead .right .search .search-box-pc { display: none; justify-content: center; align-items: center; flex-flow: column wrap; width: 100%; height: auto; padding: 100px 0; background-color: #fff; position: fixed; left: 0; top: 0; z-index: 10; transform: translateY(-600px); transition: transform 0.3s; border: 1px solid var(--bd-color); } 
.thead .right .search .search-box-pc strong { display: block; margin-bottom: 30px; font-size: 3.0rem; color: var(--main-color); word-break: keep-all; text-align: center; } 
.thead .right .search .search-box { width: 100%; max-width: 750px; border: 1px solid var(--bd-color); position: relative; } 
.thead .right .search .search-box input { width: 100%; border: 0; padding: 0 30px; font-size: 1.8rem; line-height: 5rem; } 
.thead .right .search .search-box input:focus { outline: none; } 
.thead .right .search .search-box button { font-size: 0; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); } 
.thead .right .search .search-box button i { display: inline-block; width: 24px; height: 24px; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg width='22' height='23' viewBox='0 0 22 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.79709 19.1782C14.6556 19.1782 18.5942 15.2396 18.5942 10.3811C18.5942 5.52262 14.6556 1.58403 9.79709 1.58403C4.93859 1.58403 1 5.52262 1 10.3811C1 15.2396 4.93859 19.1782 9.79709 19.1782Z' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.0068 16.6129L20.9998 21.6059' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } 
.thead .right .search .search-box-pc .search-close { width: 24px; height: 24px; position: absolute; right: 60px; top: 40px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.06 42.06'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23777; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; %7D %3C/style%3E%3C/defs%3E%3Cg id='icon'%3E%3Cline class='cls-1' x1='3' y1='3' x2='39.06' y2='39.06'/%3E%3Cline class='cls-1' x1='39.06' y1='3' x2='3' y2='39.06'/%3E%3C/g%3E%3C/svg%3E"); } 
.thead .right .search .search-box-pc.open { display: flex; transform: translateY(0); } 


.thead .right .search .search-box-pc .search-close { width: 24px; height: 24px; position: absolute; right: 60px; top: 40px; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.06 42.06'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23777; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4px; %7D %3C/style%3E%3C/defs%3E%3Cg id='icon'%3E%3Cline class='cls-1' x1='3' y1='3' x2='39.06' y2='39.06'/%3E%3Cline class='cls-1' x1='39.06' y1='3' x2='3' y2='39.06'/%3E%3C/g%3E%3C/svg%3E"); } 
.thead .right .search .search-box-pc.open { display: flex; transform: translateY(0); } 
.thead .right .right-menu { display: flex; align-items: center; gap: 20px; } 
.thead .right .right-menu li a { white-space: nowrap; color: #fff; } 
.thead.active .right .smo-btn::after { background-color: #444; } 
.thead.active .right .smo-btn i::before { background-color: #444; } 
.thead.active .right .smo-btn i::after { background-color: #444; } 
 @media only screen and (max-width: 1023px){
 .thead .right .search .search-box { max-width: unset; width: calc(100% - 40px); height: 50px; } 
 .thead .right .search .search-box-pc .search-close { right: 40px; } 
 .thead .right .search .search-box-pc { padding: 80px 0; } 
 .thead .right .search .search-box-pc strong { font-size: 2.5rem; } 
 .thead .right .search .search-box button { right: 20px; } 
 .thead .right .search .search-box input { padding: 0 20px; } 
 }
 @media only screen and (max-width: 767px){
 .thead .right { gap: 20px; } 
 .thead .right .info { display: none; } 
 .thead .right .search .search-box-pc .search-close { right: 30px; } 
 .thead .right .search .search-box-pc strong { font-size: 2.3rem; margin-bottom: 20px; } 
 .thead .right .search .search-box button { right: 10px; } 
 .thead .right .search .search-box input { padding: 0 10px; } 
 }
/******** sitemap ********/
.smo-btn { display: block; width: 22px; height: 22px; position: relative; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='9' height='9' fill='%23222222'/%3E%3Crect x='13' width='9' height='9' fill='%23222222'/%3E%3Crect x='13' y='13' width='9' height='9' fill='%23222222'/%3E%3Crect y='13' width='9' height='9' fill='%23222222'/%3E%3C/svg%3E%0A"); } 
.stm-wrap .stm-con { width: 0; height: 100%; position: fixed; left: 0; top: 0; z-index: 10; opacity: 0; visibility: hidden; } 
.smo-wrap.open .stm-con { width: 100%; height: 100%; opacity: 1; visibility: visible; } 
/******** mbtn-box ********/
.mbtn-box { display: none; } 
.mbtn-box .gnb .lnb-wrap .lf { display: none; } 
/******** mgtop-box ********/
.mgtop-box { display: none; } 
@media only screen and (max-width: 1023px) { /********* mbtn-box *********/
.thead .right .header-stm { display: none; } 
.mbtn-box { display: block; } 
.mbtn-box .open { position: relative; display: block; width: 20px; height: 20px; background: url(../img/layout/sitemap.svg)no-repeat center center / contain; } 
/******** mgnb-con ********/
.mgnb-con { display: none; } 
.mgnb-con.on { display: block; } 
.mgnb-con:before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -100; opacity: 0; background: rgba(0,0,0,0.5); transition: opacity 0.2s linear 0.2s, z-index 0.2s linear 0.2s; } 
.mgnb-con .mgnb-box { position: fixed; top: 0; right: -320px; z-index: 999; width: 320px; height: 100vh; opacity: 0; background: #fff; transition: right 0.4s ease, opacity 0.4s ease; } 
/******** mgnb ********/
.mgnb-box .top { display: flex; align-items: center; justify-content: space-between; padding: 20px; background: #fff; border-bottom: 1px solid var(--bd-color); } 
.mgnb-box .top .logo a { background-image: url(../img/layout/logo.svg) !important; } 
.mgnb-box .top .close { position: relative; display: block; width: 21px; height: 21px; font-size: 0; } 
.mgnb-box .top .close:before { content: ""; position: absolute; top: 10px; left: 0; width: 100%; height: 2px; background: #222; transform: rotate(45deg); border-radius: 50px; } 
.mgnb-box .top .close:after { content: ""; position: absolute; top: 10px; left: 0; width: 100%; height: 2px; background: #222; transform: rotate(-45deg); border-radius: 50px; } 
.mgnb { position: relative; height: calc(100vh - 63px); padding: 20px 15px; background: #f9f9f9; } 
.mgnb .gnb > li { width: fit-content; } 
.mgnb .gnb > li + li { margin-top: 10px; } 
.mgnb .gnb > li a.gnb-title { display: inline-block; width: 115px; padding: 12px 10px; font-weight: 500; font-size: 1.8rem; color: #555; } 
.mgnb .gnb > li a.gnb-title.on { position: relative; z-index: 1; font-weight: 600; color: var(--point-color); background: #FFF; border-radius: 5px; border: 1px solid var(--point-color); } 
.mgnb .gnb > li .lnb-wrap { display: none; position: absolute; top: 0; left: 120px; width: calc(100% - 120px); height: 100%; padding: 20px; background: #fff; border-left: 1px solid var(--bd-color); overflow-y: auto; } 
.mgnb .gnb > li .lnb-wrap.on { display: block; } 
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > a { display: flex; align-items: center; justify-content: space-between; padding: 15px 12px; font-size: 1.7rem; color: #555; word-break: keep-all; border-bottom: 1px solid var(--gray-e5); } 
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > a.on { position: relative; font-weight: 600; color: var(--point-color); border-bottom: 1px solid var(--bd-color); } 
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > a.arr::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 15px; width: 8px; height: 5px; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='9' height='5' viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1_22)'%3E%3Cpath d='M4.2 4.89L8.41 0.5H0L4.2 4.89Z' fill='%23666666'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1_22'%3E%3Crect width='8.41' height='4.39' fill='white' transform='translate(0 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); } 
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > a .btn-arrow { transform: rotate(90deg); } 
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > a .btn-arrow::before,
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > a .btn-arrow::after { height: 1px; background: #999; } 
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > a.on .btn-arrow { transform: rotate(-90deg); } 
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > a.on .btn-arrow::before,
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > a.on .btn-arrow::after { background: var(--main-color); } 
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > .lnb-list2 { display: none; padding: 15px; background: #fff; border-bottom: 1px solid var(--bd-color); } 
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > .lnb-list2 li { position: relative; padding-left: 8px; } 
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > .lnb-list2 li + li { margin-top: 15px; } 
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > .lnb-list2 li::before { content:""; position: absolute; top: 7px; left: 0; width: 3px; height: 3px; background: var(--point-color); } 
.mgnb .gnb > li .lnb-wrap .lnb-list1 > li > .lnb-list2 li > a { position: relative; font-size: 1.5rem; color: #757575; } 
/*** mGNB Over ***/
.mgnb-con.on:before { opacity: 1; z-index: 999; transition: opacity 0.2s linear 0.2s; } 
.mgnb-con.on .mgnb-box { right: 0; opacity: 1; transition: right 0.4s ease, opacity 0.4s ease; } 
 }
@media only screen and (max-width: 767px){
 .mbtn_box { right: 20px; } 
 }
.footer { width: 100%; background: #222; } 
.footer .top { width: 100%; display: flex; border-bottom: 1px solid #333; padding: 15px 0; } 
.footer .top .inner-padding { width: 1200px; margin: 0 auto; } 
.footer .top .top-cont { width: 100%; display: flex; justify-content: space-between; } 
.footer .top .top-cont .f-nav { display: flex; gap: 41px; } 
.footer .top .top-cont .f-nav > li > a { position: relative; color: rgba(255, 255, 255, 0.60); font-size: 14px; font-weight: 400; } 
.footer .top .top-cont .f-nav > li:nth-child(3) > a {font-weight: 600; color: #fff;}
.footer .top .top-cont .f-nav > li {position: relative;}
.footer .top .top-cont .f-nav > li::after { content: ""; position: absolute; top: 4px; right: -20px; width: 1px; height: 9px; background: #333; } 
.footer .top .top-cont .f-nav > li:last-child::after { display: none; } 
.footer .top .top-cont .f-nav > li > a > em { color: #fff; font-weight: 600; } 
.footer .top .top-cont .sns { display: flex; gap: 30px; align-items: center; } 
.footer .top .top-cont .sns > li > a.youtube { display: block; width: 24px; height: 17px; background: url(../img/layout/icn-youtube.svg); background-repeat: no-repeat; background-size: 24px; } 
.footer .top .top-cont .sns > li > a.insta { display: block; width: 20px; height: 20px; background: url(../img/layout/icn-insta.svg)no-repeat center center / contain; } 
.footer .top .top-cont .sns > li > a.facebook { display: block; width: 11px; height: 20px; background: url(../img/layout/icn-facebook.svg)no-repeat center center / contain; } 
.footer .top .top-cont .sns > li > a.nblog { display: block; width: 25px; height: 20px; background: url(../img/layout/icn-nblog.svg)no-repeat center center / contain; } .footer .bottom { padding: 30px 0; } 

.footer .bottom { display: flex; width: 100%; padding: 30px 0; } 
.footer .bottom .inner-padding { width: 1200px; margin: 0 auto; } 
.footer .bottom .bottom-cont { width: 100%; display: flex; justify-content: space-between; } 
.footer .bottom .bottom-cont .left { display: flex; flex-direction: column; gap: 20px; } 
.footer .bottom .bottom-cont .left .f-info { display: flex; gap: 40px; } 
.footer .bottom .bottom-cont .left .f-info .f-logo a { display: block; width: 164px; height: 77px; background: url(../img/layout/f-logo.svg)no-repeat center center / contain; } 
.footer .bottom .bottom-cont .left .f-info .f-txt { display: flex; flex-direction: column; justify-content: space-between; } 
.footer .bottom .bottom-cont .left .f-info .f-txt > div > p { font-size: 14px; color: #fff; font-weight: 400; } 
.footer .bottom .bottom-cont .left .f-info .f-txt > div > .call { display: flex; gap: 21px; margin-top: 4px; } 
.footer .bottom .bottom-cont .left .f-info .f-txt > div > .call > li { position: relative; display: flex; align-items: center; } 
.footer .bottom .bottom-cont .left .f-info .f-txt > div > .call > li::after { content: ""; position: absolute; top: 7px; right: -11px; width: 1px; height: 9px; background-color: #e5e5e5; } 
.footer .bottom .bottom-cont .left .f-info .f-txt > div > .call > li:last-child:after { display: none; } 
.footer .bottom .bottom-cont .left .f-info .f-txt > div > .call > li > span { margin-right: 6px; color: #fff; font-size: 14px; font-weight: 400; } 
.footer .bottom .bottom-cont .left .f-info .f-txt > div > .call > li > a { font-size: 14px; color: #fff; font-weight: 600; } 
.footer .bottom .bottom-cont .left .f-info .f-txt > .copyright { color: rgba(255, 255, 255, 0.50); font-size: 14px; font-weight: 400; } 
.footer .bottom .bottom-cont .left .email .email-box { width: 100%; background: #fff; position: relative; } 
.footer .bottom .bottom-cont .left .email .email-box > input { width: 70%; height: 40px; border: none; background: none; line-height: 4rem; padding: 0 20px; color: var(--main-color); } 
.footer .bottom .bottom-cont .left .email .email-box > input:focus { outline: none; } 
.footer .bottom .bottom-cont .left .email .email-box > input::placeholder { color: #a1a1a1; } 
.footer .bottom .bottom-cont .left .email .email-box > input::-webkit-input-placeholder { color: #a1a1a1; }
.footer .bottom .bottom-cont .left .email .email-box > input:-ms-input-placeholder { color: #a1a1a1; }
.footer .bottom .bottom-cont .left .email .email-box > input::-ms-input-placeholder { color: #a1a1a1; }
.footer .bottom .bottom-cont .left .email .email-box > button { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--main-color); font-weight: 600; }
.footer .bottom .bottom-cont .left .email .email-box > button > i { display: inline-block; width: 17px; height: 10px; margin-right: 10px; background: url(../img/layout/icn-email.svg)no-repeat center center; background-size: 17px; } 
.footer .bottom .bottom-cont .right { display: flex; flex-direction: column; justify-content: space-between; align-items: end; } 
.footer .bottom .bottom-cont .right .family-site { position: relative; } 
.footer .bottom .bottom-cont .right .family-site > a { display: flex; align-items: center; justify-content: space-between; min-width: 160px; height: 40px; line-height: 40px; padding: 8px 20px; font-weight: 400; font-size: 1.6rem; color: #fff; border: 1px solid #fff; } 
.footer .bottom .bottom-cont .right .family-site > a::after { content:""; display: block; width: 10px; height: 8px; background: url(../img/layout/arrow-down.svg) no-repeat center / contain; border-radius: 100%; } 
.footer .bottom .bottom-cont .right .family-site .family-site-list { display: none; position: absolute; bottom: 40px; left: 0; z-index: 2; width: 100%; font-weight: 500; font-size: 15px; color: #666; background: #fff; border: 1px solid var(--gray-66); } 
.footer .bottom .bottom-cont .right .family-site .family-site-list > li { position: relative; } 
.footer .bottom .bottom-cont .right .family-site .family-site-list > li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #ccc; } 
.footer .bottom .bottom-cont .right .family-site .family-site-list > li:last-child:after { display: none; } 
.footer .bottom .bottom-cont .right .family-site .family-site-list > li > a { display: block; width: 100%; height: 100%; padding: 15px; }
.footer .bottom .bottom-cont .right .wa { margin-top: 20px;} 
@media only screen and (max-width: 1100px){
 .footer .top .top-cont { flex-direction: column; align-items: center; gap: 20px; } 
.footer .top .top-cont .f-nav { flex-wrap: wrap; gap: 10px 30px; justify-content: center; } 
 }
 @media only screen and (max-width: 767px){
 .footer .bottom .bottom-cont .left { width: 100%; } 
.footer .bottom .bottom-cont { flex-direction: column; align-items: center; gap: 30px; } 
.footer .bottom .bottom-cont .left .f-info { justify-content: center; } 
.footer .bottom .bottom-cont .left .f-info .f-logo a { width: 124px; height: 62px; } 
.footer .bottom .bottom-cont .right { width: 100%; flex-direction: row; align-items: center; } 
.footer .bottom .bottom-cont .right .wa { margin-top: 0;} 
 }
 @media only screen and (max-width: 500px){
 .footer .bottom .bottom-cont .left .f-info { flex-wrap: wrap; gap: 20px; } 
 }


.sub-content { position: relative; overflow: hidden; } 
/********* sub-visual *********/
.sub-visual-wrap { width: 100%; height: 100%; border-bottom: 1px solid var(--bd-color); background-repeat: no-repeat; background-image: url(../img/layout/sub-vi-img.png); background-position: left -170px top -230px; padding-top: 129px; } 
.sub-visual-wrap .sub-inner-padding { display: flex; flex-direction: column; justify-content: center; height: 100%; } 
.sub-visual-wrap .sub-inner-padding .tit { padding: 30px 0; } 
.sub-visual-wrap .sub-inner-padding .tit h1 { color: var(--theme-color); font-size: 3.7rem; font-weight: 700; margin-bottom: 20px; color: var(--main-color); } 
.sub-visual-wrap .sub-inner-padding .tit p { color: rgba(85, 85, 85, 0.80); font-family: Pretendard; font-size: 1.7rem; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.68px; } 
@media only screen and (max-width: 1023px){
 .sub-visual-wrap .sub-inner-padding .tit h3 { font-size: 3.0rem; margin-bottom: 15px; } 
 }
@media only screen and (max-width: 767px){
 .sub-visual-wrap { height: 100%; padding: 130px 0 30px; background-size: 767px; background-position: left -129px top 80px; } 
 .sub-visual-wrap .sub-inner-padding .tit { padding:0; } 
 }
/********* location *********/
.breadcrumb { display: none; align-items: center; justify-content: right; gap: 28px; } 
.breadcrumb li { position: relative; display: block; font-size: 15px; color: #666; white-space: nowrap; font-weight: 500; } 
.breadcrumb li a br { display: none; } 
.breadcrumb li.home a { display: block; width:16px; height: 2.0rem; font-size: 0; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0001 19V14H14.0001V19C14.0001 19.55 14.4501 20 15.0001 20H18.0001C18.5501 20 19.0001 19.55 19.0001 19V12H20.7001C21.1601 12 21.3801 11.43 21.0301 11.13L12.6701 3.59997C12.2901 3.25997 11.7101 3.25997 11.3301 3.59997L2.9701 11.13C2.6301 11.43 2.8401 12 3.3001 12H5.0001V19C5.0001 19.55 5.4501 20 6.0001 20H9.0001C9.5501 20 10.0001 19.55 10.0001 19Z' fill='%23222222'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: left center; background-size: 18px; } 
.breadcrumb li:after { content: ""; position: absolute; top: 50%; right: -18px; transform: translateY(-50%); width: 6px; height: 10px; background-image: url("data:image/svg+xml,%3Csvg width='6' height='12' viewBox='0 0 6 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.66663L5 5.99996L1 10.3333' stroke='%23DDDDDD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: 6px; } 
.breadcrumb li:last-child { font-weight: 700; color: #444; } 
.breadcrumb li:last-child::after { display: none; } 
@media only screen and (max-width: 767px){
 .breadcrumb { display: flex; } 
 }
/********* snb-wrap *********/
.snb-wrap { border-bottom: 1px solid var(--bd-color); } 
.snb-wrap .snb { display: flex; height: 55px; border-left: 1px solid var(--bd-color); } 
.snb-wrap .snb > li { position: relative; height: 100%; border-right: 1px solid var(--bd-color); } 
.snb-wrap .snb > .home { width: 56px; height: 55px; background-position: center center; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0001 19V14H14.0001V19C14.0001 19.55 14.4501 20 15.0001 20H18.0001C18.5501 20 19.0001 19.55 19.0001 19V12H20.7001C21.1601 12 21.3801 11.43 21.0301 11.13L12.6701 3.59997C12.2901 3.25997 11.7101 3.25997 11.3301 3.59997L2.9701 11.13C2.6301 11.43 2.8401 12 3.3001 12H5.0001V19C5.0001 19.55 5.4501 20 6.0001 20H9.0001C9.5501 20 10.0001 19.55 10.0001 19Z' fill='%23222222'/%3E%3C/svg%3E%0A"); } 
.snb-wrap .snb > .home a { display: block; width: 100%; height: 100%; } 
.snb-wrap .snb > .dep1 > button { display: flex; height: 100%; align-items: center; min-width: 230px; padding: 0 15px; line-height: 2.3rem; font-weight: 500; font-size: 1.7rem; color: #333; justify-content: space-between; gap: 10px; } 
.snb-wrap .snb > .dep1 > button .arr { width:8.6px; height: 6px; background-repeat: no-repeat; background-size: 8.6px; background-image: url("data:image/svg+xml,%3Csvg width='9' height='6' viewBox='0 0 9 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.67 6L0.34 -3.78541e-07L9 0L4.67 6Z' fill='%23333333'/%3E%3C/svg%3E%0A"); transition: all .4s; } 
.snb-wrap .snb > .dep1.on > button .arr { transform: rotate(-180deg); } 
.snb-wrap .snb > .dep1 > .dep2 { display: none; position: absolute; top: 55px; left: 0; width: 100%; border-top: 1px solid #e5e5e5; z-index: 1; height: 500px; overflow-y: auto; } 
.snb-wrap .snb > .dep1 > .dep2 > li { background: #ffffff; border-bottom: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; } 
.snb-wrap .snb > .dep1 > .dep2 > li > a { display: block; width: 100%; padding: 18px 15px; font-size: 1.7rem; color: #444; font-weight: 400; word-break: keep-all; } 
@media only screen and (max-width: 1023px){
 .snb-wrap .snb { height: 45px; } 
.snb-wrap .snb > .home { width: 50px; height: 45px; } 
.snb-wrap .snb > .dep1 > .dep2 { top: 45px; } 
 }
@media only screen and (max-width: 767px){
 .sub-visual-wrap .sub-inner-padding .tit p { line-height: 20px; } 
.snb-wrap { display: none; } 
 }
/********* sub-content *********/
.sub-content { padding: 80px 0 70px; } 
@media only screen and (max-width: 1023px){
 .sub-content { padding: 50px 0 50px; } 
 }
/********* no-content *********/
.no-content { margin: 0 auto; padding: 100px 0; } 
.no-content .txt-wrap { display: flex; flex-direction: column; align-items: center; } 
.no-content .txt-wrap img { margin-bottom: 30px; } 
.no-content .txt-wrap > strong { display: block; font-weight: 600; font-size: 2.6rem; color: #333; text-align: center; } 
.no-content .txt-wrap em { display: block; margin-top: 20px; line-height: 1.3; font-weight: 400; font-size: 1.8rem; color: #757575; text-align: center; }