@charset "utf-8";

:root {
	--border-radius-10:10rem;
}
@media all and (max-width:599px){
	:root {
		--border-radius-10:6rem;
	}
}

.no-scrolling {overflow: hidden;}

#skipBtn { overflow: hidden; position: relative; width: 100%; z-index: 1000; }
#skipBtn a { display: block; font-size: 0; width: 1px; height: 1px; line-height: 0; margin: 0 -1px -1px 0; overflow: hidden; text-align: center;}
#skipBtn a:focus, #skipBtn a:hover, #skipBtn a:active { width: auto; padding:20rem 0; background: #333; color: #fff; font-weight: 500; font-size:16rem; }
#skipBtn a:focus-visible {outline:none; border:2px dashed #ff0000;}


* {box-sizing:border-box;}
html {font-size:1px;}
body {font-family:'NanumSquareNeo', '맑은 고딕', sans-serif; font-weight:400; font-size:16rem; color:#323232; letter-spacing:-0.5px; line-height:1.7;}
input, button, textarea, select {font-family:'NanumSquareNeo', '맑은 고딕', sans-serif; font-weight:400; font-size:16rem; color:#1f1e1e; line-height:1.7;}
button, input[type="submit"] {cursor:pointer;}
h1, h2, h3, h4, h5 {font-size:16rem; font-weight:600; line-height:1.4;}
a {color:#323232;}
b {font-weight:600;}
em, address {font-style:normal;}
@media all and (max-width:1700px){
	html {font-size:0.95px;}
}
@media all and (max-width:768px) {
	html {font-size:0.9px;}
}
@media all and (max-width:360px) {
	html {font-size:0.85px;}
}

.wrap {width:100%; max-width:1600rem; margin:0 auto;}
@media all and (max-width:1700px){
	.wrap {max-width:100%; padding-left:30rem; padding-right:30rem;}
}
@media all and (max-width:768px) {
	.wrap {padding-left:20rem; padding-right:20rem;}
}

/* header */
#header .logo {display:flex; align-items:center; color:#4E4E4E; font-weight:800; font-size:24rem; line-height:1.6; padding-left:5rem;}
#header .logo::before {content:''; flex-shrink:0; flex-grow:0; width:58rem; height:48rem; margin-right:18rem; background:url('/design2025/ecios/img/layout/logo.svg') no-repeat 0 0/contain;}
#header .gnbwrap > .wrap {display:flex; align-items:center; justify-content:space-between;}
#header .icon_wrap {display:none;} 
@media all and (max-width:1440px){
	#header .logo {font-size:20rem;}
}
@media all and (max-width:1280px){
	#header {padding:25rem 0;}
	#header .icon_wrap {display:block;}
	#header .icon_wrap a {display:block; width:40rem; height:40rem; position:relative; text-indent:-9999rem;}
	#header .icon_wrap a::before {content:''; position:absolute; top:50%; left:50%; width:28rem; height:20rem; background:url('/design2025/ecios/img/layout/sitemap.svg') no-repeat 0 0/contain; transform:translate(-50%, -50%);}
}
@media all and (max-width:768px) {
	#header .logo {font-size:18rem; padding-right:10rem;}
	#header .logo::before {width:40rem; height:33rem; margin-right:10rem;}
}

/* pcnav */
.gnbPC .gnbArea {float:none; width:100%; text-align:left;}
.gnbPC .gnbArea > ul {display:flex; margin:0 -15rem 0 -30rem;}
.gnbPC .gnbArea > ul > li {position:relative; float:none;}
.gnbPC .gnbArea > ul > li > a {display:block; font-size:20rem; font-weight:700; line-height:1.6; padding:41rem 30rem;}
.gnbPC .subGnb {top:90rem; left:50%; width:180rem; margin-left:-90rem; border-top:0; background:none; text-align:center;}
.gnbPC .subGnb .wrap {width:100%; max-width:100%; padding:0;}
.gnbPC .subGnb .dept2 {float:none; position:relative; width:100%; background:#0a4595; overflow:hidden; border-radius:var(--border-radius-10);}
.gnbPC .subGnb .dept2 > li > a {border-bottom:0; padding:15rem 10rem; font-size:16rem;}
.gnbPC .subGnb .dept2 > li.on > a,
.gnbPC .subGnb .dept2 > li > a:hover {background:#10376b;}
@media all and (max-width:1440px){
	.gnbPC .gnbArea > ul {margin:0 -10rem 0 -20rem;}
	.gnbPC .gnbArea > ul > li > a {padding:30rem 20rem !important;}
}
@media all and (max-width:1280px){
	.gnbPC {display:none;}
}



/* mobile nav */
.gnbhead > div {margin-top:40rem; padding:20rem;}
.gnbhead > div a.Mclose {position:absolute; top:20rem; right:20rem; width:30rem; height:30rem; text-indent:-9999rem; transform:rotate(45deg)}
.gnbhead > div a.Mclose::before,
.gnbhead > div a.Mclose::after {content:''; position:absolute; top:50%; left:50%; background:#323232; transform:translate(-50%, -50%);}

.gnbhead > div a.Mclose::before {width:80%; height:2px;}
.gnbhead > div a.Mclose::after {width:2px; height:80%;}


.gnbMobile::before {content:''; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:100; visibility:hidden; opacity:0; transition:all 0.85s;}
.gnbMobile .gnbArea {visibility:hidden; overflow-y:auto; position:fixed; top:0; right:-80%; width:80%; max-width:300px; height:100%; background:#fff; z-index:300; transition:right 0.85s cubic-bezier(0.43, 0.03, 0.21, 1);}

.gnbMobile.open .gnbArea {visibility:visible; right:0;}
.gnbMobile.open::before {visibility:visible; opacity:1;}

.gnbMobile .subGnb .wrap {width:100%; max-width:100%; padding:0 !Important;}

.gnbMobile .dept1 > li {border-bottom:1px solid #ececec;}
.gnbMobile .dept1 > li > a {display:block; padding:15rem 20rem; font-weight:600; font-size:17rem;}
.gnbMobile .dept2 > li {border-top:1px dashed #cfcfcf;}
.gnbMobile .dept2 > li > a {display:block; position:relative; padding:15rem 20rem 15rem 40rem; text-align:left;}
.gnbMobile .dept2 > li > a::before {content:''; position:absolute; top:27rem; left:24rem; width:3px; height:3px; background:#b5b5b5;}

.gnbMobile .dept2,
.gnbMobile .dept3 {display:none;}

@media all and (max-width:1280px) {
	.gnbMobile {display:block;} 
	.gnbArea {display:block;}
	.gnbhead {display: block;}
	.gnbhead > div a {float:none; display:block;}
	.gnbhead > div a.Mclose {padding-top:0;}
}

@media all and (max-width:599px){
	.gnbMobile .gnbArea {width:100%; max-width:100%;}
}

/* footer */
#footer {padding:55rem 0 54rem; text-align:center; }
#footer address {}
#footer small {display:block; margin-top:12rem; color:#616161; letter-spacing:0.5px; font-size:13rem; line-height:1.7;}