@charset "UTF-8";
/*-------------------------------------------------
title       :레이아웃 반응형
Create date :2023-01-11
-------------------------------------------------*/

@media (max-width:1908px) {
	#gnb2 > ul > li > a {font-size: 2rem;}
}

@media (max-width:1690px) {
	#gnb2.active > ul {flex-wrap:wrap}
	#gnb2 > ul > li {width:33.33%}
}


@media (max-width:1480px) {
	#gnb2 > ul > li {width:30%}
	#gnb1 > ul > li > a {font-size:1.62146rem}
	#gnb1 > ul > li .submenu > ul > li > a {font-size:1.7rem}
}

@media (max-width:1400px) {
	.btn-top {right:1rem}
}
	
@media (max-width:1280px) {
	#footer .fnb {height:auto; padding:1.5rem 0}
	#footer .fnb .fnb1 {width:100%; text-align:center}
	#footer .fnb .related {position:absolute; bottom:3rem; left:50%; transform:translateX(-50%); z-index:1}
	#footer .siteinfo {padding:9rem 0 10rem}
	#footer .siteinfo .address {width:100%; text-align:center}
	#footer .siteinfo .f-logo {right:50%; top:3rem; transform:translateX(50%); width:22rem}
}

@media (max-width:1200px) {
	
	#hnb .family .btn {display:inline-block; font-size:1.6rem; height:4rem; line-height:4rem}
	#hnb .family .list {width:18rem; display:none; visibility:hidden; opacity:0; height:0; background-color:#fff; position:absolute; left:0; top:4rem; z-index:12}
	#hnb .family .list li {border-bottom:1px dotted rgba(255,255,255,0.2); margin-right:0; width:100%; margin:0.8rem 0}
	#hnb .family .list a {color:#fff !important; height:auto; min-height:auto; line-height:1.4; padding:0 2rem .3rem 0; position:relative}
	#hnb .family .list a:after {content:''; font-family:'xeicon'; position:absolute; right:0} 
	#hnb .family .list li:last-child {border:none}
	#hnb .family.active .list {background-color:#2149a6; display:block; visibility:visible; opacity:1; height:auto; padding:1rem 1rem}
	#hnb .family.active .btn i {transform:rotate(-180deg)}
	
	#gnb1 {display:none}
	
	#gnb2 {display:block;position:absolute !important;right:0;top:0;width:100%;z-index:1}
	#gnb2:after {backdrop-filter:inherit}
		
	#gnb2 .control.close {display:none; overflow:hidden; position:absolute; right:1rem; top:7rem; width:5rem; height:5rem; line-height:5rem; text-align:center} 
	#gnb2 .control.close::before {content:''; color:#000; display:block; width:100%; height:100%; font-family:"xeicon"; font-size:2.5rem; text-align:center; line-height:inherit; transition:all 0.2s}
	#gnb2 .control.close:hover::before, #gnb2 .control.close:focus::before {transform:rotate(180deg) translateY(2px)}
	
	#gnb2 > ul {background-color:#fff; display:none; padding:15rem 0 0; visibility:hidden; overflow:hidden; width:100%; height:100%; opacity:0; position:fixed; left:0; top:0; color:#333; transition:opacity 0.2s; transform:inherit}
	#gnb2 > ul::before {content:''; top:15rem; width:100%; height:1px; background-color:#ddd}
	#gnb2 > ul::after {content:''; position:absolute; top:15rem; left:0; width:33.3%; height:100%; background-color:#f3f5f5; z-index:-1}
	#gnb2 > ul > li {width:100%}
	#gnb2 > ul > li > a {border-bottom:0; color:#434d66;display:block;font-size:2rem;font-weight:500;line-height:inherit;padding:2rem 3.5rem 2rem 1.5rem;position:relative;text-align:left;width:33.3%;word-break:keep-all}
	#gnb2 > ul > li > a::after {display:none; position:absolute; top:2rem; right:1.5rem; font-family:"xeicon"; color:#e5f0f8; content:''; transition:all 0.2s; transform:inherit; width:auto !important; height:auto; left:auto; bottom:auto; background-color:inherit}
	#gnb2 > ul > li > a.linkWindow::after {color:#434d66; display:block !important}
	#gnb2 > ul > li > a:before {display:none}
	
	#gnb2 > ul > li.active > a {background:linear-gradient(38deg, #2aaeb8, #1d7cda 89%); color:#fff}
	#gnb2 > ul > li.active > a::after {color:#fff}
	#gnb2 > ul > li.active .submenu {visibility:visible; opacity:1; overflow-y:scroll}

	#gnb2 > ul .submenu {visibility:hidden; overflow:hidden; opacity:0; padding:1.5rem 2rem; position:fixed; right:0; top:15rem; height:calc(100% - 15rem); width:calc(100% - 33.3%); transition:all 0.2s}
	#gnb2 > ul .submenu > ul > li {border-bottom:1px dashed #ddd; position:relative; width:100%}
	#gnb2 > ul .submenu > ul > li + li {margin-top:0}
	#gnb2 > ul .submenu > ul > li > a {color:#000; font-size:2rem; font-weight:400; display:block; padding:1.5rem 0; position:relative}
	#gnb2 > ul .submenu .linkWindow:after {content:''; font-family:'xeicon'; display:inline; margin-left:0.3rem; vertical-align:-0.1rem}
	#gnb2.active .open {display:none}
	#gnb2.active .close {display:block}
	#gnb2.active #head_menu_all {display:block}
	/*3depth*/
	#gnb2 > ul .submenu .lnb-detail {visibility:hidden; overflow:hidden; width:0; height:0; opacity:0;-webkit-transition:all 0.2s; transition:all 0.2s;  word-break: keep-all; padding-left:1rem}
	#gnb2 > ul .submenu .lnb-detail li {font-size:1.6rem; margin:0.5rem 0; position:relative; padding-left:1rem}
	#gnb2 > ul .submenu .lnb-detail li.active a {border-bottom:1px solid #555}
	#gnb2 > ul .submenu .lnb-detail li:last-child {margin-bottom:0}
	#gnb2 > ul .submenu .lnb-detail li:before {content:''; background-color:#666; border-radius:100%; width:0.3rem; height:0.3rem; position:absolute; left:0; top:1.2rem}
	#gnb2 > ul .submenu > ul > li.active .lnb-detail {visibility:visible; overflow:visible; width:auto; height:auto; opacity:1}
	#gnb2 > ul .submenu > ul > li.type1 > a:before {top:2rem}
	
	#gnb2 > ul .submenu > ul > li > div {display:none; background-color:#f7f7f7; border-radius:0.5rem; padding:1.5rem 2rem; margin-bottom:2rem}
	#gnb2 > ul .active > .submenu > ul > li.active > div {display:block}
	#gnb2 > ul .submenu > ul > li.active > a {font-weight:500}
	#gnb2 > ul .submenu > ul > li.type1 > a:hover:after {transform:rotate(180deg)}

	/*header가 head-on 일 때*/
	#wrap.sitemap #header {position:fixed}
	#wrap.sitemap #hnb {z-index:12}
	#wrap.sitemap #hnb:after {background:linear-gradient(38deg, #2aaeb8, #1d7cda 89%)}
	#wrap.sitemap #logo a {background:url('../img/layout/logo_on.png') no-repeat; background-size:contain}
	
	#header .family a {border:none; color:#fff !important; font-size:1.2rem; padding:0 .5rem 0 0}
	#footer .fnb .fnb1 li + li:before {margin:0 1rem}
}

@media (max-width:1024px) {
	.btn-top {visibility:visible; opacity:1; position:absolute}
}

@media (max-width:768px) {
	#header .header_wrap {height:13rem; padding:0 7rem 0 2rem}
	#headmn {width:auto; margin:0}
	
	#header .etc .search .btn {top:1rem}
	#logo {top:1rem}
	
	#header .search {right: 8rem}
    #gnb2 .open {right:2rem}
	
	#hnb .family .list {left:0; }
	#hnb li.login-name {display:none}
}