@charset "utf-8";
/*@import url(https://cdn.jsdelivr.net/korean-webfonts/1/corps/google/NotoSansKR/NotoSansKR.css);
 @import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);*/
@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css");

/* ******************* *
* 색상
* ******************* */
:root {
    --yellow: #f78f3b; 
    --yellow-2: #E5A62B;
    --light-yellow: #ffb872;
    --btn-yellow: #DF9043;
    --line: #e1e1e1;
    --white: #fff;
    --black-1: #111;
    --black-3: #333;
    --black-4: #444;
    --black-6: #666;
    --bg-gray: #f7f7f7;
    --bg-gray1: #f1f1f1;
    --bg-black: #000;
    --bg-black-4: #444;
    --brown: #675642;
    --dark-brown: #514332;
    --blue: #1248b5;
    --mint:#048587;
}

/* ******************* *
* 다크모드
* ******************* */
@media all and (min-width:0) and (max-width:767px){
    :root{
        color-scheme: light dark;
    }
    @media (prefers-color-scheme:dark){
        :root {
            --black-1: #fff;
            --black-3: #fff;
            --black-4: #fff;
            --black-6: #fff;
            --brown: #fff;
            --dark-brown: #fff;
            --white: #222;
            --bg-gray: #444;
            --bg-gray1: #444;
            --blue: #9cd8ff;
        }
        body {background-color:#222;}
        .header .search-btn {filter: brightness(0) invert(1);}
        .satisfaction .satisfaction-check {background-color:#444;}
        .select_tab > a {background-color:#444;}
        .sp-text-list li > p:first-child {background:var(--bg-gray);}
        .short-cut-btn {background-image:url(../images/new_common/blank_ico_w.png);}
        .white-but-sub2 {background-color:#444; background-image: url(../images/new_common/write_on_ico.png);}
        .sub-list3 > li {background: url(../images/new_common/sublist3_w.png) no-repeat 0px 12px;}
        .sub-list2 ul.dp-line > li {background: url(../images/new_common/sublist3_w.png) no-repeat 0px 12px;}
        .img-txt-box.gusangjing-box .txt {background-color:#444;}
        .parking-box .color1 {background-color:#444;}
        .parking-box .color2 {background-color:#444;}
        .sub-tabl2 li.on {border: 2px solid var(--yellow-2);}
        .history-box {background-color:#444;}
    }
}

*{margin:0; padding:0; list-style:none; color:var(--black-3); font-family: 'pretendard';}
html {font-size:20px; letter-spacing: -0.5px; -webkit-text-size-adjust: 100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5{margin:0;padding:0;word-wrap:break-word;word-break:break-all;}
li,p,span,strong,a{color:inherit;}
p{font-weight:inherit;}
body, html{width:100%;height:100%;}
input,select,img{vertical-align:middle;box-sizing: border-box;}
img{border:0;max-width:100%;}
table{border-collapse:collapse;width:100%;}
table caption{overflow: hidden;position: absolute;width: 0;height: 0;top: -9999px;left: -9999px;text-indent: -999em;}
a{display:inline-block;transition:all 0.3s ease-in-out;text-decoration:none;}
select{height: 34px; padding: 0 5px; font-size:1rem; border: 1px solid var(--line); box-sizing: border-box;}
input[type="text"], input[type="password"] {border: 1px solid var(--line); padding: 0 5px; font-size:1rem; box-sizing: border-box;}

.hidden {overflow: hidden;position: absolute;width: 0;height: 0;top: -9999px;left: -9999px;line-height: 0;text-indent: -999em;margin: 0;padding: 0;background: none;border: none;}
.hidden-popup {overflow: hidden;}
.ov-hidden {overflow: hidden;}
.blind {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px;}

.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}

#wrap{min-width:1269px;}
.wrap{position:relative;}
.inner {max-width: 1450px; padding: 0 15px; margin: 0 auto; box-sizing: border-box;}

/*focus*/
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline:2px dotted red; transition: none;}

input[type="radio"]:focus,
input[type="radio"]:focus:checked,
input[type="checkbox"]:focus,
input[type="checkbox"]:focus:checked {outline:2px dotted red;}


.visible-pc{display:block;}
.visible-mo{display:none;}
.visi-pc{display:block;}
.visi-mo{display:none;}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal;} /* 한줄 말줄임 */
.ellipsis{overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;	height:50px;} /* 두줄 말줄임 */

/* skip navigation 2020.06 추가*/
.skipnav {z-index:99999;display:block !important;position:absolute;top:0;left:0;width:100%;}
.skipnav a {display:block;width:100%;height:0;overflow:hidden;font-size:18px;text-align:center;background-color:#333;color:#fff;}
.skipnav a:focus {height:30px;line-height:30px;padding:10px 0;outline:2px dotted red;} /* 20221019 */
.skipnav a.skip_sub {display:none;}

#contents {width:100%;} /*2020.06*/
.btn-scroll {display: none;width: 50px;height: 50px;display: block;position: fixed;bottom: 50px;right: 30px;z-index: 8;border-radius: 30px;box-shadow: 4px 4px 17px 0px #71717145;}

/* ******************* *
* 레이아웃 공통 2024
* ******************* */

/*tnb*/
.tnb{height: 60px; display: flex; justify-content: space-between; align-items: center;}
.tnb li a {position:relative; display: block; padding: 10px; color:#5f5f5f; font-size:0.85rem; box-sizing: border-box;}
.tnb li + li > a::after {content: ''; width: 2px; height: 10px; background: #d7cecd; position: absolute; left: 0; top:50%; transform: translateY(-50%);}
.tnb li:last-child a {padding-right: 0;}
.tnb-menu {display: inline-flex;}
.tnb-menu li.home a {padding-left: 40px; background: url(../images/new_common/logo_tnb.png) left center no-repeat;}
.tnb-menu li.eng a {padding-left: 30px; background: url(../images/new_common/eng_logo.png) left 10px center no-repeat;}
.join-area {display: inline-flex;align-items: center;}

/*부서동*/
.department-local-area {top: 60px;z-index: 14;position: absolute;left: 0;width: 100%; min-height: 100vh; background: #fcf3f3;opacity: 0;visibility: hidden;transition: opacity 0.2s ease-in-out}
.department-local-area.active{opacity: 1;visibility: visible;}
.department-local-area .inner {position:relative; height:100%; padding:15px 15px 50px;}
.department-local-ctn{display: flex;justify-content: space-between;padding: 40px 0;}
.department-local-ctn + .department-local-ctn{padding: 0 0 55px 0;}
.department-local-ctn p{font-size: 30px;color: #171717;min-width: 150px;line-height: 1.2;}
.department-local-ctn p span{display: block;color: #6f6f6f;font-size: 15px;margin-top:5px;}
.ctn-list{margin-left: 20px;}
.ctn-list > li{background: #fff; width:calc(100% / 7 - 10px); height: 40px;text-align: center;border-radius: 10px;float: left;margin-right: 10px;margin-bottom: 10px;display: flex;align-items: center;justify-content: center;}
.ctn-list > li a{width:100%; color: #6f6f6f;}
.ctn-list li + li > a::after {content:none;}
.department-local-area .depart-close {position:absolute; bottom:5px; left:50%; padding: 12px 12px; border: unset; background-color: #fff; cursor: pointer; transform: translateX(-50%);border-radius: 10px;}
.department-local-area .depart-close img {filter: brightness(0) invert(0);}

/*header*/
.header-wrap {position: relative;}
.header {position: relative; width:100%; height: 115px; display: flex; justify-content: space-between; align-items: center;}
.main-wrap .header {width: calc(100% - 525px);} /*메인헤더에서만 적용*/
.header .logo {display: inline-flex;}
.header .logo img {/*width: 215px;*/}
.header .mo-search-btn {display: none; width: 35px; height: 35px; border-radius: 50%; background: #f9f9f9 url(../images/new_common/search_btn.png) center no-repeat; border:1px solid #bdbcbc;}

.header .search-box {position:relative; z-index:10;}
.header .search-box form {position:relative;display:flex;align-items:center;width: 440px;height:50px;padding-left: 15px;padding-right: 50px;border: 1px solid #434343;background-color:var(--white);border-radius: 30px;box-sizing: border-box;overflow: hidden;}
.header .search-txt {display:block; width:100%; height: 35px; color: var(--black-1); font-weight: 300; border:0; background-color: var(--white);}
.header .search-txt::placeholder {color: var(--black-1);}
.header .search-txt:focus-visible {outline:2px dashed #84735f;}
.header .search-btn {position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.header .all-btn {width:60px; height:60px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #84735f; border: 0; cursor: pointer;}
.header .all-btn span {display: inline-block; margin-top:7px;}
.header .all-btn .bar {width: 35px; height: 3px; background-color: #fff; border-radius: 5px;}
.header .all-btn .txt {font-size:13px; color:var(--white);}

/*인기검색어*/
.hot-search {display:none; position:absolute; top:55px; left:0; width:100%; padding:15px; border: 1px solid #434343; border-radius: 10px; background-color: var(--white); box-sizing: border-box;}
.hot-search p {margin-bottom:7px;}
.hot-search .num-list li {position:relative; padding-left:35px; padding-top:5px; padding-bottom:5px; counter-increment: number;}
.hot-search .num-list li.selected {background-color:var(--bg-gray1);}
.hot-search .num-list li::before {content:counter(number); position:absolute; left:0; top:5px; display:block; width:23px; height:23px; line-height:23px; font-size:18px; background-color:var(--brown); color:var(--white); text-align: center; border-radius:3px;}
.hot-search .btn-area {margin-top:15px; padding-top:5px; border-top:1px solid var(--line); text-align:right;}

/*gnb*/
.header nav {opacity: 0; visibility: hidden; position: fixed; top: 0; left: -515px; width: 515px; height: 100%; background-color: #5f5243; transition: .3s; z-index:15;}
.header nav::before {position: absolute; left: 0; top: 0; width: 100%; height: 108px; background: #504539 url(../images/new_common/gnb_patt.png); content: '';}
.header nav.open {opacity: 1; visibility: visible; left: 0; transition: .3s; z-index: 1000;}
.header .nav-top {padding: 35px 30px;}
.header .nav-top .join-area li {position: relative;}
.header .nav-top .join-area li + li::after {content: ''; width: 2px; height: 10px; background: #d7cecd; position: absolute; left: 0; top:50%; transform: translateY(-50%);}
.header .nav-top .join-area a {padding: 10px; color: #fff;}
.header .nav-inner {position: relative; max-width: 515px; height: 100%;}
.header .nav-inner .close-btn {position: absolute; right: 30px; top: 35px; background-color: transparent; border: 0; cursor: pointer;}
.header .gnb-wrap {display:flex; align-items:center; gap:15px;}
.gnb {height:calc(100% - 110px); padding: 30px; margin-right:10px; overflow-y:auto; box-sizing: border-box;}
.gnb::-webkit-scrollbar {width:15px;}
.gnb::-webkit-scrollbar-track {background-color: #5f5243;}
.gnb::-webkit-scrollbar-thumb {background-color: #fff;}
.gnb::-webkit-scrollbar-button {display: none;}
.gnb::-webkit-scrollbar-track, .gnb::-webkit-scrollbar-thumb {border-radius: 10px;}

.gnb > li + li {margin-top: 10px;}
.gnb a {display: block; width: 100%; height: 100%; color: #fff; box-sizing: border-box;}
.gnb .gnb-category {position: relative; padding: 20px 25px 15px; background-image: url(../images/new_common/cate_dw.png); background-position: right 30px center; background-repeat: no-repeat; font-size: 1.4rem; color: #fff; font-weight: bold; border: 1px solid #938b82; letter-spacing: -1.15px; font-family: 'GmarketSans';}
.gnb .gnb-category span {font-family: 'GmarketSans'!important;} 
.gnb .gnb-category.on {background-image: url(../images/new_common/cate_up.png); border: 1px solid var(--light-yellow); color:var(--light-yellow);}
.gnb .gnb-category:hover {border:1px solid var(--light-yellow); color:var(--light-yellow); }
.gnb .depth-02-area li {position: relative; padding: 0 12px;}
.gnb .depth-02-area li::before {position: absolute; left: 0; top: 10px; content: '';}
.gnb ul:not(.depth-02) .current {position: relative; padding: 5px 15px; background-color:var(--yellow); border-radius:20px;}
.gnb li > a:not(.current):hover {color:var(--light-yellow);}

.gnb .depth-02-area {display: none; border: 1px solid #938b82; border-top: 0;}
.gnb .depth-02 > li {padding: 0 25px;}
.gnb .depth-02 > li > a {padding: 15px 0 10px; color: #FFDBB8; font-size: 1.2rem; font-family: 'GmarketSans';}
.gnb .depth-02 > li + li > a {border-top:1px solid #938b82;}
.gnb .depth-02 > li > a.current {color:var(--light-yellow);}
.gnb .depth-02 > li > a > img {margin-right:12px;}

.gnb .depth-03 {padding: 10px 0; border-top: 1px solid #938b82;}
.gnb .depth-03 > li + li {margin-top:10px;}
.gnb .depth-03 > li::before {width: 5px; height: 5px; border-radius: 50%; background-color: #fff;}
.gnb .depth-03 > li:has(.current)::before {top:16px;}
.gnb .depth-03 > li > a {font-size: 1.1rem; font-weight: 300;} 

.gnb .depth-04 {padding-top: 10px;}
.gnb .depth-04 > li + li {margin-top:10px;}
.gnb .depth-04 > li::before {width: 5px; height: 2px; background-color: #fff;}
.gnb .depth-04 > li:has(.current)::before {top:16px;}

.gnb .depth-05 {padding-top:10px;}
.gnb .depth-05 > li + li {margin-top:7px;}
.gnb .depth-05 > li::before {top:5px; width:10px; height:10px; background: url(../images/new_common/depth5_ico.png) no-repeat;}
.gnb .depth-05 > li:has(.current)::before {top:12px;}
.gnb .depth-05 > li > a {color: #FFFFDE; font-size:0.95rem}

/*footer*/
.footer {background-color:var(--bg-gray);}
.footer .inner {padding: 35px 10px;}
.family-site-area {border-top: 1px solid #e9e9e9;}
.family-site-area .inner {padding: 25px 10px;}
.family-site-list {display: flex; gap: 20px;}
.family-site-list li {display: flex; flex:1;}
.family-site-list select {position: relative; width: calc(100% - 55px); height: 50px; margin-right: 5px; padding-left: 15px; padding-right: 40px; background: var(--white) url(../images/new_common/select_arr.png) right 15px center no-repeat; color: var(--black-1); border:  1px solid var(--line); border-radius: 5px; box-sizing: border-box; appearance: none;}
.family-site-list .go-btn {width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid var(--black-3); background-color:var(--white); border-radius: 7px; font-size: 0.9rem; font-weight: 500; color: var(--black-1); text-transform: uppercase; box-sizing: border-box;padding: 0;}

.copyright-area {border-top: 1px solid #e9e9e9;}
.copyright-area .inner {display: flex; justify-content: space-between; align-items: center;}
.copyright-area li {color: var(--black-1); word-break: keep-all;}
.copyright-area li + li {margin-top: 5px;}

.policy-area {background-color: #605d5c;}
.policy-area .inner {display: flex; justify-content: space-between; align-items: center;}
.policy-area a {color: #fff; font-weight: 500;}
.policy-area li:first-child > a { color: #ffcc54; font-weight: 500; }
.policy-area li:first-child > a:hover { color: #f78f3b; font-weight: 500; }
.policy-list {display: flex; flex-wrap: wrap; gap: 5px 20px;} 
.policy-list .point a {color: #ffcc54;}
.policy-list li a:hover {color: #f1a153;}
.policy-area .copyright {color: #fff; font-weight: 300; word-break: keep-all;}

.mark-list {display:flex; align-items: center; gap: 30px;}
.mark-list .wa img {width:90px;}

.depth-03 a.on {
  position: relative;
  padding: 5px 15px;
  background-color: var(--yellow);
  border-radius: 20px;
}

.depth-02 li a.on {
	color: var(--white);
}

@media all and (max-width:1200px){
	html {font-size:18px;} 
	.btn-scroll {right:15px;}
	
    /*header*/
	body, html{overflow-x:hidden;}
    .tnb {overflow-x: auto;-ms-overflow-style: none;scrollbar-width: none;height: auto;margin: 0 -15px;padding: 0 15px;}
	.tnb li a{white-space:nowrap;font-size: 1rem;}
	.tnb .join-area{display:none;}
	.department-local-area{top:40px;}

    .header {width:100%; height: 70px; justify-content: space-between;}
    .main-wrap .header {width:100%;}
    .header .all-btn {width: auto; height: auto; background-color: transparent;}
    .header .all-btn span {margin-top:5px;}
    .header .all-btn .bar {width: 25px; height:3px; background-color: var(--black-1);}
    
    .header .all-btn .txt {display:none;}
    .header .gnb-wrap {width:100%;}
    .header .logo {/*width: 135px;*/ position: absolute; left: 50%; transform: translateX(-50%);}
    .header .search-slide {display: none;}
    .header .mo-search-btn {display: block;}
    .header .search-box {display: none; position:absolute; right:0; top:70px;}

    /*footer*/
    .footer .inner {padding: 20px 15px;}  
    .family-site-area .inner {padding: 20px 15px;}  
    .policy-area .inner {flex-direction: column; gap: 15px;}
}

@media all and (max-width:1024px){
	.department-local-ctn{display:block;padding: 20px 0px;}
	.department-local-ctn p br{display:none;}
	.ctn-list{margin-left:0;margin-top: 10px;overflow: hidden;width: calc(100% + 10px);}
	.ctn-list > li{width: calc(100% / 5 - 10px);}
	.ctn-list > li a{white-space: normal;padding:10px 5px;}
	.department-local-ctn + .department-local-ctn{padding-bottom:20px;}

    /*footer*/
    .family-site-list {flex-wrap: wrap; gap: 10px;}
    .family-site-list li {width: 100%; flex:auto;}
    .family-site-list select {width: calc(100% - 45px); height: 40px;}
    .family-site-list .go-btn {width: 40px; height: 40px; line-height: 40px;}
    
    .copyright-area .inner {flex-direction: column; gap: 15px;}
    .copyright-area li {text-align: center;}
    .mark-list .wa img {width:80px;}
}

@media all and (max-width:768px){
    html {font-size:16px;} 

    /*header*/
    .header nav {width: 100%; right: -100%;}
    .header nav::before {height: 68px;}
    .header .nav-top {padding: 15px;}
    .header .nav-top .join-area a {padding:10px 7px; font-size: 15px;}
    .header .nav-top .join-area li:first-child a {padding-left:0;}
    .header .nav-inner {max-width: none;}
    .header .nav-inner .close-btn {right: 10px; top: 23px;}
    .header .nav-inner .close-btn img {width: 20px;}
    .gnb {height: calc(100% - 70px); padding: 15px; -ms-overflow-style: none; scrollbar-width: none;}
    .gnb .gnb-category {padding: 15px 15px 12px; background-position: right 15px center;}
    .gnb .depth-02 > li {padding:0 15px;}
    .gnb .depth-02-area li::before {top:9px;}
    
    .gnb .depth-05 > li::before {top:2px;}
    .gnb .depth-05 > li:has(.current)::before {top:7px;}
    .gnb .depth-05 > li > a {font-size:1rem;} 
    
    .header .search-box {width:100%; padding:15px; right:-15px; background-color:var(--white); box-shadow: 0px 5px 5px rgb(0 0 0 / 10%);}
    .header .search-box form {width:100%;}
    .hot-search {position:initial; padding:10px; margin-top:5px; border:0;}

    .ctn-list > li{width: calc(100% / 3 - 10px);}
}





.header .logo img {
    width: 215px;
  }
.header-logo{font-size: 35px;display:flex;align-items: center;flex-wrap: wrap;}

.header-logo span {
	flex: 0 0 auto;
	padding: 5px 0 5px 0;
	white-space: nowrap;
	display: inline-block;
	background: url(../images/new_common/main_logo3.png) no-repeat;
	width: 170px;
	height: 30px;
	font-size: 0;
	margin-left: 20px;
	box-sizing: border-box;
  }

@media screen and (max-width:1400px) {
	.header-logo {align-items: center;/* flex-direction: column; */}
}


@media screen and (max-width:1280px) {
	.header {width: 100%;}
	.header .logo {width: auto;justify-content: center;}
	.header .logo img {width: 200px;}
	.header-logo {/* display:block; */flex-wrap: nowrap;}
    .header-logo span {padding: 5px 0 5px 0;}
}


@media screen and (max-width:768px) {

	.header .logo{width: calc(100% - 100px);}
	.header .logo img {width: 135px;}
    .header-logo {font-size: 20px;}
	.header-logo span{background: url("../images/new_common/main_logo2.png") no-repeat -63px 0/auto 35px;height: 35px;width: 140px;margin-left: 5px;}

}


@media screen and (max-width:400px) {
    .header .logo {width: calc(100% - 90px);transform: translateX(-50%);}
	.header-logo {text-align: center; flex-direction: row;}
    .header .logo img { width: 115px;}
    .header-logo span {width: 120px; background-position: -55px; background-size: 180px;}
    .header .mo-search-btn {width: 30px; height: 30px;}
}

@media screen and (max-width:360px) {
    .header .logo img {width: 105px;}
    .header-logo span {width: 105px; background-position: -50px; background-size: 160px;}
}