@charset "utf-8";
/* ========================================================
 * DAEKUN MS — layout.css (header / gnb / footer)
======================================================== */
#wrap{position:relative; width:100%; min-width:320px; overflow:hidden}

/* ========================================================
 * HEADER
======================================================== */
#header{position:absolute; top:var(--header-top); left:0; width:100%; height:var(--header-height); z-index:9999}
#headerInnerWrap{
	position:fixed; top:var(--header-top); left:0; width:100%; height:var(--header-height); z-index:9999;
	transition:var(--transition-custom); transition-property:background-color,top,height,box-shadow;
}
#headerInner{
	position:relative; display:flex; align-items:center; justify-content:space-between;
	height:100%; max-width:var(--area-box-width); margin:0 auto; padding:0 var(--area-padding); box-sizing:border-box;
}
#header .logo{position:relative; z-index:100; line-height:0}
#header .logo a{display:block}
#header .logo img{display:block; width:19.2rem; height:auto; transition:var(--transition-custom)}
#header .logo .logo-navy{display:none}

/* header : 스크롤 고정 상태 */
#headerInnerWrap.fixed{
	top:0; height:8rem; background-color:rgba(255,255,255,0.96);
	box-shadow:0 2px 20px rgba(19,28,59,0.09);
	backdrop-filter:blur(1rem);
}
#headerInnerWrap.fixed #headerInner{height:8rem}
#headerInnerWrap.fixed .logo .logo-white{display:none}
#headerInnerWrap.fixed .logo .logo-navy{display:block}
#headerInnerWrap.fixed .logo img{width:17.4rem}
#headerInnerWrap.fixed #gnb > ul > li > a{color:var(--text); line-height:8rem}
#headerInnerWrap.fixed #gnb > ul > li > a:after{background-color:var(--steel)}
#headerInnerWrap.fixed .header-contact-btn{border-color:var(--line); color:var(--navy)}
#headerInnerWrap.fixed .header-contact-btn:hover{border-color:var(--navy); background-color:var(--navy); color:#fff}
#headerInnerWrap.fixed .sitemap-btn .line{background-color:var(--navy)}
#headerInnerWrap.fixed .gnb-2dep{background-color:rgba(255,255,255,0.97); border-color:var(--line)}
#headerInnerWrap.fixed .gnb-2dep li a{color:var(--text-sub)}
#headerInnerWrap.fixed .gnb-2dep li a:hover{color:var(--steel)}

/* ========================================================
 * GNB
======================================================== */
#gnb{position:absolute; top:0; left:0; width:100%; text-align:center; z-index:99}
#gnb > ul{display:inline-flex}
#gnb > ul > li{position:relative}
#gnb > ul > li > a{
	position:relative; z-index:100; display:block; padding:0 4rem;
	line-height:var(--header-height); color:#fff;
	font-family:var(--font-en); font-size:1.75rem; font-weight:500; letter-spacing:0.01em;
	transition:var(--transition-custom); transition-property:color,line-height;
}
#gnb > ul > li > a:after{
	position:absolute; content:''; bottom:2.6rem; left:50%; width:0; height:2px;
	background-color:#fff; transform:translateX(-50%); transition:width 0.4s ease-in-out;
}
#gnb > ul > li:hover > a:after,
#gnb > ul > li.on > a:after{width:calc(100% - 8rem)}

/* GNB 2depth */
.gnb-2dep{
	position:absolute; top:calc(var(--header-height) - 1rem); left:50%; transform:translateX(-50%);
	min-width:20rem; padding:1.4rem 0; box-sizing:border-box;
	background-color:rgba(19,28,59,0.92); border:1px solid var(--navy-line); border-radius:1.6rem;
	backdrop-filter:blur(1.2rem);
	opacity:0; visibility:hidden; transform:translate(-50%,1rem);
	transition:all 0.35s ease-in-out;
}
#headerInnerWrap.fixed .gnb-2dep{top:7rem}
#gnb > ul > li:hover .gnb-2dep,
#gnb > ul > li:focus-within .gnb-2dep{opacity:1; visibility:visible; transform:translate(-50%,0)}
.gnb-2dep li a{
	display:block; padding:0.9rem 2.4rem; white-space:nowrap;
	font-size:1.55rem; font-weight:400; line-height:1.4; color:rgba(255,255,255,0.72);
	transition:var(--transition-custom);
}
.gnb-2dep li a:hover{color:#fff}

/* ========================================================
 * HEADER UTIL
======================================================== */
.header-util-box{position:relative; z-index:100; display:flex; align-items:center; gap:1.6rem}
.header-contact-btn{
	display:inline-flex; align-items:center; height:4.4rem; padding:0 2.2rem;
	border:1px solid rgba(255,255,255,0.4); border-radius:3rem; box-sizing:border-box;
	font-size:1.5rem; font-weight:500; letter-spacing:-0.02em; color:#fff;
	transition:var(--transition-custom);
}
.header-contact-btn:hover{background-color:#fff; border-color:#fff; color:var(--navy)}
.sitemap-btn{
	display:none; position:relative; width:4.4rem; height:4.4rem;
}
.sitemap-btn .line{position:absolute; left:1rem; width:2.4rem; height:2px; background-color:#fff; transition:var(--transition-custom)}
.sitemap-btn .line1{top:1.5rem}
.sitemap-btn .line2{top:2.1rem}
.sitemap-btn .line3{top:2.7rem}

/* ========================================================
 * FOOTER
======================================================== */
#footer{position:relative; background-color:var(--navy-deep); padding:8rem 0 5rem}
.footer-inner{max-width:var(--area-box-width); margin:0 auto; padding:0 var(--area-padding); box-sizing:border-box}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:6rem; padding-bottom:5.5rem; border-bottom:1px solid rgba(255,255,255,0.1)}
.foot-logo img{width:20.6rem; height:auto}
.foot-tagline{margin-top:2.2rem; font-size:1.6rem; font-weight:400; line-height:1.6; color:rgba(255,255,255,0.5)}

.footer-info-list{display:flex; flex-wrap:wrap; gap:1rem 5rem; margin-top:1rem}
.footer-info-list dl{display:flex; align-items:baseline; gap:1.2rem}
.footer-info-list dt{
	flex:none; min-width:5.6rem; font-family:var(--font-en);
	font-size:1.4rem; font-weight:500; letter-spacing:0.04em; text-transform:uppercase;
	color:rgba(255,255,255,0.45);
}
.footer-info-list dd{font-size:1.6rem; font-weight:400; color:rgba(255,255,255,0.82); line-height:1.5}
.footer-info-list dd a:hover{color:#fff; text-decoration:underline}

/* 오른쪽 여백 : 고정형 Top 버튼과 겹치지 않도록 */
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:3rem; padding-top:3rem; padding-right:8rem}
.foot-menu{display:flex; gap:2.6rem}
.foot-menu a{font-size:1.5rem; font-weight:400; color:rgba(255,255,255,0.6); transition:var(--transition-custom)}
.foot-menu a:hover{color:#fff}
.foot-menu a b{font-weight:600; color:rgba(255,255,255,0.82)}
.footer-copyright{
	font-family:var(--font-en); font-size:1.4rem; font-weight:400; letter-spacing:0.02em;
	color:rgba(255,255,255,0.38);
}

/* Top 버튼 */
.go-top-btn{
	position:fixed; right:3rem; bottom:3rem; z-index:900;
	display:flex; align-items:center; justify-content:center;
	width:5.4rem; height:5.4rem; border-radius:50%;
	background-color:var(--navy); border:1px solid rgba(255,255,255,0.16);
	opacity:0; visibility:hidden; transform:translateY(1rem);
	transition:var(--transition-custom);
}
.go-top-btn:before{
	content:''; width:1rem; height:1rem; margin-top:0.3rem;
	border-left:2px solid #fff; border-top:2px solid #fff; transform:rotate(45deg);
}
.go-top-btn.on{opacity:1; visibility:visible; transform:translateY(0)}
.go-top-btn:hover{background-color:var(--steel)}
