@charset "UTF-8";
/*-------------------------------------------------
title       :레이아웃 반응형
Create date :2022-02-08
-------------------------------------------------*/

/* @media (max-width:1650px) {
	#gnb1 > ul > li {margin:0 3%}
}

@media (max-width:1520px) {

	#gnb1 > ul > li {margin:0 2%}
	.btn-top {right:2rem}
	.certi {right:4rem}
}

@media (max-width:1400px) {
	
	#header .header_wrap {background-color:#fff; padding:0; height:14rem}
	#wrap.sitemap #header .header_wrap {position:fixed; width:100%}
	#logo {left:2rem}
	.btn-sitemap {display:none}
	#header .family {right:10rem}
	#header .search {right:8.5rem}
	#gnb1::before {display:none}
*/

	/*전체메뉴 (사이트맵)*/
	/*
	#gnb2 {display:block; position:absolute; right:0; top:0; width:100%; z-index:1}
	#gnb2 .control.open {border-top:0.3rem solid #000; border-bottom:0.3rem solid #000; color:transparent; display:block; font-size:0; overflow:hidden; position:absolute; right:2.5rem; top:8rem; width:3rem; height:2rem} 
	#gnb2 .control.open:before {content:''; width:2rem; height:0.3rem; background:#000; position:absolute; top:0.5rem; right:0}
		
	#gnb2 .control.close {display:none; overflow:hidden; position:absolute; right:1.5rem; top:6.5rem; z-index:3; 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:10rem 0 0; visibility:hidden; overflow:hidden; width:100%; height:100%; opacity:0; position:fixed; left:0; top:4rem; color:#333; transition:opacity 0.2s; }
	#gnb2 > ul::before {content:''; position:absolute; top:10rem; left:0; width:100%; height:1px; background-color:#ddd}
	#gnb2 > ul::after {content:''; position:absolute; top:10rem; left:0; width:33.3%; height:100%; background-color:#e5f0f8; z-index:-1}
	#gnb2 > ul > li > a {color:#434d66; display:block; font-size:2rem; font-weight:500; padding:2rem 6rem 2rem 2rem; position:relative; width:33.3%; word-break:break-all}
	#gnb2 > ul > li > a::after {position:absolute; top:1.5rem; right:2rem; font-family:"xeicon"; color:#e5f0f8; content:''; -webkit-transition:all 0.2s; transition:all 0.2s}
	
	#gnb2 > ul > li.active > a {background-color:#434d66; color:#fff}
	#gnb2 > ul > li.active > a::after {color:#fff}
	#gnb2 > ul > li.active .submenu {visibility:visible; opacity:1}

	#gnb2 > ul .submenu {visibility:hidden; overflow:hidden; opacity:0; padding:1.5rem 3rem; position:absolute; right:0; top:10rem; 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 > 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 > ul {display:block; visibility:visible; opacity:1}
	*/
	/*3depth*/
		/*
	#gnb2 > ul .submenu li.type1 > a:after {content:''; color:#000; font-family: "xeicon"; position:absolute; right:0; transition:all .2s}
	#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;}
	#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 > 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 {color:#60bb46}
	#gnb2 > ul .submenu > ul > li.active > a:after {content:''; color:#60bb46 !important; transform:rotate(0)}
	#gnb2 > ul .submenu > ul > li.type1 > a:hover:after {transform:rotate(180deg)}*/

	/*header가 head-on 일 때*/
	/*
	#wrap.head-on {background-color:#fff}
	#wrap.head-on #logo a {background:url('/main/img/layout/logo-on.png') no-repeat 0 0; background-size:100%}
	#wrap.head-on .search .form button::before,
	#wrap.head-on .search .form input,
	#wrap.head-on .search .form input::placeholder {color:#fff}
	#wrap.head-on .search :-ms-input-placeholder {color:#fff}
	#wrap.head-on #gnb2 .control {border:1px solid rgba(0,0,0,0.3)}
	#wrap.head-on #gnb2 .control.close::before {color:rgba(0,0,0,0.7)}
	

	.footbanner {padding:1.5rem 4rem}
	
	#footer .related {top:inherit; bottom:-7rem; left:-1rem; z-index:2; width:calc(100% - 5rem)}
	#footer .related .group {width:100%}
	
	.fnb  {width: 100%; padding-bottom:1rem; margin-bottom:2rem}
}


@media (max-width:1280px) {

	.btn-top {bottom:15rem}
	.btn-top a {background-color:rgba(44,59,102,.8)}
}	
	
@media (max-width:1280px) {
	#gnb1 {display:none}
	#gnb2 .control.open:before {height:0.2rem; top:0.6rem}
}

@media (max-width:820px) {
	#header .search .form #searchForm2 {height:100%}
	
	.certi {position:relative; right:auto; bottom:auto; margin-top:4rem} 
	.certi li {margin-bottom:1rem}
}

@media (max-width:768px) {
	#header .header_wrap {height:13rem}
	
	#logo {top:6.5rem; width:25rem}
	
	#header .family {top:.5rem; right:auto; left:1rem}
	#header .family li {position:relative}
	#header .family li:after {content:''; width:1px; height:1rem; position:absolute; right:0; top:1.1rem; background-color:rgba(255,255,255,0.2)}
	#header .family li:last-child:after {display:none}
	#header .family a {border:none; color:#fff !important; font-size:1.2rem; padding:0 .5rem 0 0}
	#header .family a:hover {background:none !important}
	
	#hnb li.login-name {display:none}
	
	#gnb2 .control.open {top:7.6rem}
	
	.footer_wrap {padding:4rem 2rem; text-align:center}
	.fnb .fnb1 li:nth-child(2n+1):before {display:block; width:0; height:0; margin:0.3rem 0 0; vertical-align:inherit; background-color:transparent}
}

@media (max-width:640px) {
	#gnb2 > ul::after {width:40%}
	#gnb2 > ul > li > a {font-size:1.7rem; padding:1.5rem 5rem 1.5rem 2rem; width:40%}
	#gnb2 > ul .submenu {width:calc(100% - 40%); padding:1rem 2rem}
	#gnb2 > ul .submenu > ul > li > a {font-size:1.7rem}
	#gnb2 > ul .submenu .lnb-detail li {font-size:1.5rem}
	#gnb2 > ul .submenu .lnb-detail li:before {top:1rem}
}


@media (max-height:665px) {
	
	#gnb2 > ul > li.active .submenu {overflow-y:auto}
	#gnb2 > ul > li.active .submenu ul {max-height:58rem}
} */