#wrap{width:100%; height:100%; min-width:320px;}

#header{position:fixed; width:100%; background-color: transparent; color: #000;  -webkit-transition: 0.2s all; transition: 0.2s all; z-index:900; }
#header .hd_inner{width:100%; padding:1.6875rem 3.25rem; box-sizing: border-box; display: flex; justify-content: space-between;}
#header .hd_inner > h1{text-indent:-99999em; margin: 0.5625rem 0; width:144px; height:22px;}
#header .hd_inner > h1 a{display:block; width: 100%; background:url(../images/hd_logo.png) no-repeat 0 0;}

/*gnb*/
#header .hd_inner .gnb{display: flex; justify-content: flex-end; width: auto; height: 41px; margin-left: auto; padding: 0;}
#header .hd_inner .gnb > ul{display: flex; justify-content: flex-end; margin: 0; padding: 0;}
#header .hd_inner .gnb > ul > li{}
#header .hd_inner .gnb > ul > li > a{display:inline-block; padding:0.625rem 0 0 5rem; font-weight:500; font-size:1.0625rem; letter-spacing:-1px; color:#fff; text-align:center;}
#header .hd_inner .gnb > ul > li > a:after{display:block; content: ""; margin:0.1875rem 0 0 -0.5rem; width:100%; padding:0 0.5rem; height:0.1875rem; background:#5692f4; transform:scale(0, 1); transition:all 0.3s ease;}
#header .hd_inner .gnb > ul > li > a.active, 
#header .hd_inner .gnb > ul > li > a:hover{color:#5692f4;}
#header .hd_inner .gnb > ul > li > a.active:after, 
#header .hd_inner .gnb > ul > li > a:hover:after{transform: scale(1, 1);}

#header .hd_inner .gnb ul li .menu_inner{position:absolute; right:0; top:85px; width:100%; height:60px; z-index:4000; display:none; background:#F2F2F2; border-bottom:1px solid #CCC;}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap{position:relative; width:100%; height:100%; z-index:4000;}

#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul{float:right; width:47%; list-style:none; margin-top:10px;}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul:after{content:""; display:block; clear:both;}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul > li{float:left; margin:0 7px;}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul > li > a{display:block; font-size:15px; font-weight:500; color:#202020; padding:10px 10px 10px 15px; text-align:left;}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul > li > a:hover,
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul > li > a.Ov{display:block;padding:10px 10px 10px 15px; font-size:15px; font-weight:bold; text-align:left;}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul > li > ul{list-style:none; background:#FFF; padding-top:8px;}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul > li > ul > li{width:100%; clear:both; background:#FFF;}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul > li > ul > li > a{display:block; padding:4px 4px 4px 14px; color:#202020; font-size:14px; font-weight:400; text-align:left; background:url(../images/mn_gnb_3depth_bg.jpg) no-repeat 7px 13px; border:1px solid #fff;}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul > li > ul > li > a:hover,
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul > li > ul > li > a.Ov{display:block; padding:4px 4px 4px 14px; background:url(../images/mn_gnb_3depth_bg.jpg) no-repeat 7px 13px; color:#8c756a; font-size:14px; font-weight:400; text-align:left; border:1px solid #8c756a;}

#header .hd_inner .gnb .sitemap{width:41px; height:41px; border-radius:0.375rem; background:#5692f4;}
#header .hd_inner .gnb .sitemap a{display:block; width:41px; height:41px; background:url(../images/hd_menu.png) no-repeat center 0.775rem;}

#header.scrolled {background-color: #fff; color: #000; filter: drop-shadow(2px 2px 5px rgba(50, 50, 50, 0.1));}
#header.scrolled .hd_inner h1 a {background:url(../images/hd_logo_on.png) no-repeat 0 0;}
#header.scrolled  .hd_inner .gnb > ul > li > a{ color:#424242;}

		@media all and (max-width:1280px){
			#header .hd_inner{padding:1rem 1rem;}
		}

		@media all and (min-width:1024px){
			#mobileNavi {display:none;}			
			#mask_mn {display:none !important;}
			#header .hd_inner .open_mn {display:none;}
			#header .hd_inner .open{display: none;}
		}
		
		@media all and (max-width:1024px){
			#header .hd_inner{width:100%; box-sizing: border-box;}
			#header .hd_inner .gnb{display:none; height:0;}
			#header .hd_inner .gnb > ul{display:none;}
			#header .hd_inner .open_mn {width:41px; height:41px; border-radius:0.375rem; background:url('../images/hd_menu.png') no-repeat center 0.775rem #5692f4; box-sizing: border-box; transform: scale(0.8);}
			#header .hd_inner .open {display:block; position:absolute; right:1rem; color:#FFF; text-align:center;}
			#header .hd_inner > h1 a{transform: scale(0.8); background-position: left;}
			#header .hd_inner .sitemap{display:none;}
			#header .hd_inner .etc {display:none;}
		
			#mobileNavi {display:none; position:fixed; top:0; right:0; width:100%; height:100vh; padding:0; z-index:9999999; /*overflow-x:hidden;*/}
			#mobileNavi > div {position: relative; float:right; display:block; width:60%; height:100%; min-height:100%; background:#fff;}
			#mobileNavi .top_wrap{ position: relative; width:100%; height: 50px; padding: 1rem; background:#253579;}
			#mobileNavi .top_wrap .home_link{ width: 50px; padding-left: 1.5rem; background:url('../images/sb_location_home.png') no-repeat 0 0;}
			#mobileNavi .top_wrap .home_link a{ display: block; color: #fff; font-size: 0.875rem; line-height: 140%;}

			#mobileNavi .close {position:absolute; top:1rem; right:1rem; line-height:0;}

			#mobileNavi .mobilelnb{padding: 1rem; margin: 0 auto; color:#FFF; cursor:pointer;}
			#mobileNavi .mobilelnb a {display:block; color:#FFF; cursor:pointer;}
			#mobileNavi .depth_01{}
			#mobileNavi .depth_01 > li {border-bottom:1px solid #dedede;}
			#mobileNavi .depth_01 > li > a {color:#000; padding:10px 0; padding-left:15px; font-weight:700; font-size:14px;}
			#mobileNavi .depth_01 > li > a:after{position: absolute; right:15px; line-height:26px; color:rgba(0,0,0,.5); width:26px; z-index:2; cursor:pointer; top:16px;}
				
			#mobileNavi .depth_02 {display:none; padding:10px 5%; background:#f7f7f7;}
			#mobileNavi .depth_02 > li > a {height:28px; font-weight:500; line-height:28px; padding-left:10px; font-size:14px; color:#424242;}
			#mobileNavi .depth_02 > li > a:hover,
			#mobileNavi .depth_02 > li > a:focus,
			#mobileNavi .depth_02 > li.on > a {font-weight:400; font-weight:500; color:#8d756b; background-position:0 -18px;}

			#mobileNavi .depth_03 {display:none; padding:10px 0; background:#f7f7f7;}
			#mobileNavi .depth_03 > li > a {height:28px; font-weight:400; line-height:28px; font-size:13px; color:#424242;}
			#mobileNavi .depth_03 > li > a:hover,
			#mobileNavi .depth_03 > li > a:focus,
			#mobileNavi .depth_03 > li.on > a {font-weight:400; color:#424242; background-position:0 -18px;}
						
			/* mobile mask */
			.stop_scrolling {height:100%; overflow:hidden !important;}
			#mask_mn {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.7); z-index:9995;}
		}
		
		@media all and (max-width:767px){
			#header .hd_inner{padding:1rem 0.1875rem;}
		}

#footer{clear:both; position:relative; width:100%; background:#2d373d; padding: 3.875rem 0 1.5rem 0; box-sizing: border-box;}
#footer .ft_wrap {width:100%; padding: 0 3.25rem; height:100%; margin:0 auto; box-sizing: border-box; display: flex;}
#footer .ft_wrap:after {content:""; display:block; clear:both;}
#footer .ft_wrap .ft_logo { font-size: 1rem; color: #fff;}
#footer .ft_wrap .ft_logo > img{vertical-align: middle; padding-right: 0.75rem;}

#footer .ft_wrap .btn_top{float:right; width:50px; height:40px; background:#0dabc3; color:#fff; margin-right:0; margin-top:15px; padding-top:10px; font-size:11px; text-align:center;  z-index:10; line-height:140%;}
#footer .ft_wrap .btn_top a{color:#fff; text-decoration:none;}

#footer .address_wrap { margin-left: 5rem;}
#footer .address_wrap address {width:100%; font-size:14px; color:#f9f9f9; word-break:break-all;}
#footer .address_wrap address > br {display: none;}
#footer .address_wrap > p{color:#b0b0b0; font-size:13px; padding:5px 0; font-weight:500;}
		
	@media all and (max-width:1280px){
		#footer .ft_wrap{padding: 0 1rem;}
	}
	@media all and (max-width:1024px){
		#footer{padding-top: 2rem;}
		#footer .ft_wrap{flex-direction: column;}
		#footer .address_wrap{margin: 0.75rem 0 0 0;}
		#footer .address_wrap address { font-size:0.8125rem; line-height: 150%;}
		#footer .address_wrap address > br {display:inline-block;}
		#footer .address_wrap > p{font-size:0.75rem;}
		#footer .ft_wrap .ft_logo > img{padding-bottom: 0.25rem;}
}