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

@media screen and (max-height:930px){
	#header .search {margin-bottom:20%}
}

@media screen and (max-height:800px){
	#gnb1 {margin-top:42%}
	#header .search {margin-bottom:10%}
}
	
@media screen and (max-width:1400px){
	#header {width:30rem}
	#main {width:calc(100% - 30rem)}
}

@media screen and (max-width:1260px){
	
	.layer-popup {left:0 !important; top:14rem !important}
	
	#header {position:relative; width:100%; max-width:100%}
	#header .header_wrap {padding:6rem 2rem 2.5rem 2rem}
	
	#logo {position:relative; max-width:31rem; padding:0}
	#logo a {width:100%}
	
	#hnb {left:0; bottom:auto; top:0; width:100%; max-width:100%; height:4rem; background:#22316a; padding:0 1.5rem}
	#hnb .hnb2 {float:right; margin-top:0.3rem}
	#hnb .hnb2 li {display:inline-block}
	#hnb .hnb2 li > a {color:#9197b4; padding:0.5rem}
	#hnb .copy {display:none}
	/*검색*/
	#header .search {float:right; padding:0.4rem 1rem 0; margin-bottom:0; max-width:initial}
	#header .search .form {border-color:#7f8ca9}
	#header .search .form input {font-weight:300 !important; padding:2px 0}
	#header .search .form input::placeholder {color:#9197b4}
	#header .search .form button::before {color:#9197b4}
	
	#gnb1 {display:none}
	
	#headmn {display:block}
	#gnb2 .control {font-size:3rem; overflow:hidden; position:absolute; right:2rem; bottom:5.5rem; z-index:3; width:3rem; height:3rem; color:#333; text-align:center; line-height:3rem}
	#gnb2 .control::before {content:''; display:block; width:100%; height:100%; font-family:"xeicon"; text-align:center; line-height:inherit}
	#gnb2 .control.close {display:none}
	#gnb2 .control.close::before {-webkit-transform:rotate(0); transform:rotate(0); -webkit-transition:all 0.2s; transition:all 0.2s}
	#gnb2 .control.close:hover::before, #gnb2 .control.close:focus::before {-webkit-transform:rotate(180deg) translateY(2px); transform:rotate(180deg) translateY(2px)}
	#gnb2 .control.close::before {content:''}
	#gnb2.active .open {display:none}
	#gnb2.active .close {display:block}
	#gnb2 > ul {top:100%; left:0; -webkit-transform:translateY(0); transform:translateY(0)}
	#gnb2 > ul::before {content:''; position:absolute; left:0; top:0; z-index:-1; width:1000%; height:10000%; background-color:#fff}
	#gnb2.active > ul {visibility:visible; overflow:visible; width:auto; height:auto; opacity:1; width:100%}
	#gnb2 > ul > li {border-top:1px solid #f6f7f9}
	#gnb2 > ul > li > a {color:#333; display:block; font-weight:400; font-size:20px; position:relative; width:100%; height:auto; padding:1.5rem 2rem; text-align:left; -webkit-transition:all 0.3s; transition:all 0.3s}
	#gnb2 > ul > li > a::after {content:''; color:#999; font-family:"xeicon"; position:absolute; right:2rem; -webkit-transition:all 0.3s; transition:all 0.3s}
	#gnb2 > ul > li.active > a {background-color:#22316a; color:#fff}
	#gnb2 > ul > li.active > a::after {color:#fff; -webkit-transform:rotate(180deg); transform:rotate(180deg)}
	#gnb2 > ul > li.active .submenu {visibility:visible; overflow:visible; width:auto; height:auto; opacity:1}
	#gnb2 > ul .submenu {visibility:hidden; overflow:hidden; width:0; height:0; opacity:0; -webkit-transition:all 0.3s; transition:all 0.3s}
	#gnb2 > ul .submenu > ul {padding:1rem 0; background-color:#f6f7f9}
	#gnb2 > ul .submenu > ul > li > a {color:#242424; display:block; font-size:16px; font-weight:400; position:relative; padding:1rem 2rem 1rem 3.2rem}
	#gnb2 > ul .submenu > ul > li > a::before {content:''; background-color:#d44932; position:absolute; left:2rem; top:2.4rem; width:0.5rem; height:0.5rem}
	#gnb2 > ul .submenu > ul > li > a::after {content:''; fcolor:#4f525f; font-family:"xeicon"; position:absolute; right:2rem; -webkit-transition:all 0.3s; transition:all 0.3s}
	#gnb2 > ul .submenu > ul > li.active > a {color:#22316a}
	#gnb2 > ul .submenu > ul > li.active > a::after {-webkit-transform:rotate(180deg); transform:rotate(180deg)}
	#gnb2 > ul .lnb-detail {visibility:hidden; overflow:hidden; width:0; height:0; opacity:0; padding-left:3rem; -webkit-transition:all 0.3s; transition:all 0.3s}
	#gnb2 > ul .lnb-detail > li > a {font-size:14px; position:relative; padding-left:1rem} 
	#gnb2 > ul .lnb-detail > li > a:before {content:''; position:absolute; left:0; top:50%; width:5px; height:1px; background:#999} 
	#gnb2 > ul .submenu > ul > li.active .lnb-detail {visibility:visible; overflow:visible; width:auto; height:auto; opacity:1}
	
	#main {width:100%}
	
	#footer {width:100%}
	#fnb  {width: 100%; overflow-x:scroll; padding-bottom:1rem; margin-bottom:2rem}
	#fnb .fnb1 {min-width:70rem}
	.footbanner li {margin:0 0.5rem}
	.footbanner .bx-wrapper img {max-width:80%}
	.copyright {display:block} 
	.btn-top {position:relative; top:0; right:0; margin:2rem auto 0; display:block}
}