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

#header{position:fixed; top:0; left:0; width:100%; z-index:900; border-bottom:1px solid rgba(255,255,255,0.25); background: transparent;  transition:all .3s ease;}
#header:before{content: ''; position: absolute; inset:0; background:rgba(12,18,28,0.58); backdrop-filter:blur(12px); opacity:0; transition:all .3s ease; z-index:-1;}

#header .hd_inner{width:100%; max-width: 1658px; height:100px; margin:0 auto; padding:0 28px; box-sizing: border-box; display: flex; align-items:center; justify-content: space-between;}
#header .hd_inner > h1{width:242px; height:52px; text-indent:-99999em; flex-shrink:0;}
#header .hd_inner > h1 a{display:block; width: 100%; height:100%; background:url(../images/logo.png) no-repeat center center / contain; filter: brightness(0) invert(1);}

	@media screen and (max-width:768px) {
		#header .hd_inner{height: 70px;}
	}

/*gnb*/
#header .hd_inner .gnb{margin-left:auto; padding-left:70px;}
#header .hd_inner .gnb > ul{display: flex; align-items:center; gap:8px; padding:0; margin:0;}
#header .hd_inner .gnb > ul > li{ position:relative; width:180px; text-align:center;}
#header .hd_inner .gnb > ul > li > a{ line-height:100px; font-size:1.15rem; font-weight:600; letter-spacing:-0.03em; color:#fff; transition:.25s ease; position:relative;}
#header .hd_inner .gnb > ul > li > a:after{content:''; position:absolute; left:0; bottom:-38px; width: 100%; height:3px; border-radius:30px; background:#5dccff; transform:scaleX(0); transform-origin:center; transition:.25s ease;}
#header .hd_inner .gnb > ul > li > a.active, 
#header .hd_inner .gnb > ul > li > a:hover{color:#5dccff;}
#header .hd_inner .gnb > ul > li > a.active:after,
#header .hd_inner .gnb > ul > li > a:hover:after{transform:scaleX(1);}

#header .hd_inner .gnb .gnb_wrap{position:absolute; display:none; left:0; top:100px; width:100%; height:300px; z-index:4000; border-top: 1px solid rgba(0,0,0,0.1); background: #fff/*rgba(0,0,0,0.5)*/; box-shadow:0 8px 24px rgba(0,0,0,0.06);}
#header .hd_inner .gnb ul li .menu_inner{position:absolute; top:100px; left:0; display:none; z-index:4500;}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap .left_inner{}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap .left_inner .txt_big{display:none;}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul{width:180px; height:300px; padding-top:22px; list-style:none; border-left:1px solid rgba(0,0,0,0.06);}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul > li > a{display:block; padding:11px 0; font-size:0.98rem; color:#777; transition:.2s ease;}
#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul > li > a:hover{color:#111; font-weight:600;}

	@media screen and (max-width:1200px) {
		#header .hd_inner .gnb > ul > li{width:140px;}
		#header .hd_inner .gnb ul li .menu_inner .menu_wrap > ul {width:140px;}
	}

#header.defalut_bg_on,
#header.scrolled {background:#fff; border-bottom:1px solid rgba(0,0,0,0.06); box-shadow:0 8px 24px rgba(0,0,0,0.06);}
#header.defalut_bg_on:before,
#header.scrolled:before{ opacity:0;}
#header.defalut_bg_on .hd_inner > h1 a,
#header.scrolled .hd_inner > h1 a{ filter:none;}
#header.defalut_bg_on .hd_inner .gnb > ul > li > a,
#header.scrolled .hd_inner .gnb > ul > li > a{ color:#222;}

#header .hd_inner .right_link{display: flex; align-items:center; gap:16px; margin:0;  margin-left:auto; justify-content:flex-end;}
#header .hd_inner .right_link > div{ width:26px; height:26px; text-indent:-9999em;}
#header .hd_inner .right_link a{ display:block; width:100%; height:100%; transition:.25s ease;}
#header .hd_inner .right_link .sitemap a{background:url(../images/hd_sitemap.png) no-repeat center center / contain;}
#header .hd_inner .right_link .location a{background:url(../images/hd_location.png) no-repeat center center / contain;}
#header .hd_inner .right_link a:hover{ transform:translateY(-2px);}
#header.defalut_bg_on .right_link a,
#header.scrolled .right_link a{filter: brightness(0);}

#header .open_mn,
#header .open,
#mobileNavi{display:none;}

		@media all and (max-width:1024px){
			#header .hd_inner .gnb,
			#header .hd_inner .right_link{display:none;}
		  	#header .hd_inner > h1 {width:150px; height:32px; margin:0.75rem 0;}
		  	#header .hd_inner > h1 a {height:32px;}

			#header .open_mn {background: url(../images/hd_sitemap.png) no-repeat center center #0066b3; background-size: 1.5rem;}
			#header .open {display:block; position:absolute;  top:50%; right:28px; width:2.5rem; height:2.5rem; text-indent:-9999px; transform: translateY(-50%);}

			#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:90%; 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/hd_m_home.png') no-repeat 0 center;}
			#mobileNavi .top_wrap .home_link a{ display: block; color: #fff; font-size: 0.875rem; line-height: 140%;}

			#mobileNavi .close {position:absolute; top:1.5rem; right:1.5rem; line-height:0; text-indent: -9999em;}
			#mobileNavi .close::before,
			#mobileNavi .close::after {content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px; background: #fff; transform-origin: center;}
			#mobileNavi .close::before {transform: translate(-50%, -50%) rotate(45deg);}
			#mobileNavi .close::after {transform: translate(-50%, -50%) rotate(-45deg);}
			#mobileNavi .close:hover::before,
			#mobileNavi .close:hover::after {background:#0091fa;}

			#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; font-size:0.75rem; 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;}
						
			.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;}
		}

#footer{ position:relative; width:100%; padding: 5.25rem 0 3.5rem; background:#000; box-sizing:border-box;}
#footer .ft_wrap{ display:flex; align-items:flex-start; width:100%; max-width:1658px; padding:0 28px; margin:0 auto; box-sizing:border-box;}
#footer .ft_wrap .ft_wrap_box{ display:flex; gap:8rem;}
#footer .ft_logo img{ filter: brightness(0) invert(1);}
#footer .ft_copy .ft_link{ display:flex; gap:2.25rem;}
#footer .ft_copy .ft_link li{ position:relative;}

#footer .ft_copy .ft_link li::before{ content:""; position:absolute; left:-1.125rem; top:50%; transform:translateY(-50%); width:1px; height:10px; background:#c7c7c7;}
#footer .ft_copy .ft_link li:first-child::before{ display:none;}
#footer .ft_copy .ft_link a{ font-size:1rem; color:#b7b7b7;}

#footer .address_wrap{ margin-top:1.5rem;}
#footer address{ font-size:1.125rem; color:#fff; font-style:normal;}
#footer address br{display: none;}

#footer .address_wrap p{ margin-top:0.25rem; font-size:0.875rem; color:#bebebe;}

#footer .ft_customer{ margin-left:auto; display:flex; flex-direction:column;}

#footer .ft_customer_btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:232px; padding:0.5rem 1.5rem; border:1px solid #fff;  color:#fff; font-size:1.25rem; text-decoration:none; transition:all 0.3s ease;}
#footer .ft_customer_btn::after{ content:""; width:14px; height:14px; background:url('../images/btn_arrow.png') no-repeat center; background-size:contain; filter:brightness(0) invert(1);}
#footer .ft_customer_btn:hover{ background:#fff; color:#000;}

#footer .ft_customer_btn:hover::after{ filter:brightness(0);}
#footer .ft_customer_text{ margin-top:2rem; font-size:1.25rem; color:#fff;}
#footer .ft_customer_textbig{ display:block; font-size:2.25rem; margin-top:0.5rem; font-weight:600;}

#footer .top_btn{ display:none; position:fixed; right:2rem; top:2rem;}
#footer .top_btn a{display:block; width:60px; height:60px; background:url('../images/btn_top.png') no-repeat center;}

@media (max-width: 1400px) {
	#footer .ft_wrap .ft_wrap_box{ gap:3rem;}
}
@media (max-width: 1024px) {
  #footer { padding: 4rem 20px 3rem; }
  #footer .ft_wrap { flex-direction:column; gap: 3rem; }
  #footer .ft_wrap .ft_wrap_box{ gap:3rem; flex-wrap:wrap;}
  #footer .ft_customer{ margin-left:0; width:100%; gap:0; }
  #footer .ft_customer_btn{ width:100%; max-width:300px; }
  #footer .ft_copy .ft_link a,
  #footer address{font-size: 0.875rem;}
  #footer .ft_customer_text{    margin-top: 1rem;}
  #footer .ft_customer_textbig{display: inline-block; margin-left: 0.75rem;}
}
@media (max-width: 768px) {
  #footer { padding: 3.5rem 16px 2.5rem; }
  #footer .ft_wrap{ padding:0 20px; }
  #footer .ft_wrap .ft_wrap_box{ flex-direction:column; gap:2rem; }
  #footer .ft_copy .ft_link{ flex-wrap:wrap; gap:1rem 1.5rem; }
  #footer .ft_copy .ft_link li::before{ display:none; /* 구분선 제거 */}
  #footer address{ font-size:1rem; }
  #footer address br{ display:block; /* 줄바꿈 살리기 */ }
  #footer .address_wrap p{ font-size:0.8125rem;}
  #footer .ft_customer_btn{ font-size:1rem; padding:0.75rem 1rem; }
  #footer .ft_customer_text{ font-size:1rem; margin-top:1.5rem; }
  #footer .ft_customer_textbig{  font-size:1.5rem; }
}

@media (max-width: 480px) {
  #footer {padding: 3rem 12px 2rem; }
  #footer .ft_wrap { gap: 1.5rem; }
  #footer .ft_wrap .ft_copy .ft_link { column-gap: 1rem; }
  #footer .ft_wrap .ft_copy .address_wrap address { font-size: 0.95rem; line-height: 1.5; }
  #footer .ft_wrap .ft_customer .ft_customer_textbig { font-size: 1.4rem;}
}