@charset "utf-8";


body {background:#f2f3f8;}
/*
.wrap {max-width:1440rem;}
.gnbPC .gnbArea > ul > li > a {padding:25rem 30rem;}
.gnbPC .subGnb {top:80rem;}
@media all and (max-width:1700px){
	.wrap {max-width:100%;}
}*/




.sub_top {position:relative; text-align:center; }
.sub_top .wrap {padding-top:20rem; padding-bottom:45rem;}
.sub_top h3 {font-size:36rem; font-weight:700; line-height:1.4; margin-top:7rem;}

.location {display:flex; align-items:center; justify-content:center;}
.location a {display:flex; align-items:center; line-height:1.5;}
.location a::after {content:""; display:block; flex-shrink:0; flex-grow:0; width:6rem; height:6rem; border-top:1px solid #555; border-right:1px solid #555; transform:rotate(45deg); margin:0 10rem;}
.location a:last-child {}
.location a:last-child::after {display:none;}

/* left */
#left > div {position:relative; height:54rem; line-height:54rem; background:#295199; border-radius:6rem;}
#left .left {position:absolute; left:0; top:0; z-index:10; display:flex; align-items:center;}
#left .left .home {width:60rem; text-indent:-99999px; border-right:1px solid rgba(255,255,255,0.5); position:relative;}
#left .left .home::before {content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:16rem; height:17rem; background:url('/design2025/ecios/img/layout/home.svg') no-repeat 0 0;}
#left .left .arrow {position:relative; display:flex; align-items:center; justify-content:space-between; width:300rem; padding:0 25px; font-weight:600; color:#fff; border-right:1px solid rgba(255,255,255,0.5);}
#left .left .arrow:after {content:""; display:block; flex-shrink:0; flex-grow:0; width:8rem; height:8rem; border-bottom:2px solid #fff; border-right:2px solid #fff; transform:rotate(45deg); margin-top:-4rem;}
#left .dept1 {display:none; position:absolute; right:0; top:54rem; width:300rem; padding:20rem 0; background:#fff; border:1px solid #e3e3e3; border-top:0; z-index:20;}
#left .dept1 a {display:block; padding:10rem 27rem; line-height:1.6; height:auto;}
#left .dept2 {overflow:hidden; margin:0 40rem 0 400rem;}
#left .dept2 li {float:left; width:auto !important;}
#left .dept2 li a {display:block; position:relative; margin:0 40rem 0 0; font-weight:500; color:#fff;}
#left .dept2 li.on a,
#left .dept2 li:hover a {color:#ffd12b; font-weight:700;}

@media all and (max-width:1700px){
	#left > div {padding:0; max-width:calc(100% - 60rem);}
}
@media all and (max-width:1280px){
	#left a.home {display:none;}
	#left .left .arrow {width:200rem;}
	#left .dept2 {margin:0 0 0 240rem;}
}
@media all and (max-width:1023px) {
	.sub_top h3 {font-size:34rem;}
	#left > div {height:auto;}
	#left .left {position:static;}
	#left .left > a.home {display:none;}
	#left .left > a.arrow {float:none; width:100%; border-right:0; border-bottom:1px solid rgba(255,255,255,0.5);}
	#left .dept1 {width:100%;}
	#left .dept2 {margin:0; padding:0 25rem;}
	#left .dept2 li a { margin:0 20rem 0 0;}
}
@media all and (max-width:768px) {
	#left > div {max-width:calc(100% - 40rem);}
}