@charset "UTF-8";
/*-------------------------------------------------
title       :레이아웃
Create date :2022-05-16
-------------------------------------------------*/

#wrap {outline:0; overflow:hidden}
#header {background-color:rgba(0,0,0,0.45); position:absolute; top:0; z-index:10; width:100%; height:12.5rem}
#header .header_wrap {width:calc(100% - 4rem); max-width:140rem; margin:0 auto; position:relative; padding-left:20%; padding-right:10rem}

#logo {width:22.5rem; height:5rem; position:absolute; left:0; top:3.8rem; transition:all .5s; z-index:2}
#logo a {background:url('../img/layout/logo-w.png') no-repeat; background-size:cover; display:block; width:100%; height:100%}

/*상단메뉴*/
#gnb1 > ul {display:flex; width:100%; max-width:78rem; justify-content:space-around}
#gnb1 > ul > li {display:inline-block; vertical-align:top; text-align:center}
#gnb1 > ul > li > a {color:#fff; display:block; font-size:2rem; font-weight:500; position:relative; line-height:6.25; transition:all .3s}
#gnb1 > ul > li > a:after {content:''; width:0; height:3px; background-color:#fff; position:absolute; bottom:0; left:50%; transform:translateX(-50%); transition:all .3s; z-index:1}
#gnb1 > ul > li.active > a,
#gnb1 > ul > li:hover > a:after,
#gnb1 > ul > li > a.active:after {width:100%}
#gnb1 .submenu {visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; width: 100% !important}
#gnb1 .submenu .linkWindow:after {content:''; font-family:'xeicon'; display:inline; margin-left:0.3rem; vertical-align:-0.1rem}

#wrap.active #header {background-color:#fff; height:auto}
#wrap.active #header:after {content:''; width:100%; height:1px; background-color:#eee; position:absolute; left:0; top:12.4rem; z-index:-1}
#wrap.active #logo a {background-image:url('../img/layout/logo.png')}
#wrap.active #gnb1 > ul > li > a {color:#333}
#wrap.active #gnb1 > ul > li > a:after {background-color:#0285ea}
#wrap.active #gnb1 .submenu {margin:2rem 0 3rem}
#wrap.active #gnb1 .submenu {visibility:visible; height:auto; opacity:1}
#wrap.active #gnb1 .submenu a {color:#333; display:block; margin:0.5rem 0; transition:all .3s}
#wrap.active #gnb2 .control.open {border-color:#333}
#wrap.active #gnb2 .control.open:before {border-color:#333}
#wrap.active #gnb2 .control.open:after {background-color:#333}

/*전체메뉴*/
#gnb2 .control.open {border:1px solid #fff; color:transparent; font-size:0; overflow:hidden; position:absolute; right:0; top:4rem; width:4.5rem; height:4.5rem; line-height:4.5rem} 
#gnb2 .control.open:before {content:''; width:1.8rem; height:1.5rem; border-top:1px solid #fff; border-bottom:1px solid #fff; display:block; margin:0 auto; position:relative; top:1.4rem}
#gnb2 .control.open:after {content:''; width:1.8rem; height:1px; background-color:#fff; position:absolute; top:2.1rem; left:1.2rem}

#gnb2 .control.close {color:#333; display:none; font-size:3rem; width:3rem; height:3rem; line-height:3rem; text-align:center; overflow:hidden; position:absolute; right:5rem; top:4rem; z-index:3}
#gnb2 .control.close::before { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: all 0.2s; transition: all 0.2s; }
#gnb2 .control.close:hover::before, #gnb2 .control.close:focus::before { -webkit-transform: rotate(180deg) translateY(2px); transform: rotate(180deg) translateY(2px); }
#gnb2 .control.close::before {content:''; display:block; font-family:"xeicon"; width:100%; height:100%; text-align:center; line-height:inherit}

#gnb2:after {content:''; visibility:hidden; overflow:hidden; opacity:0; position:absolute; top:0; right:0; width:50%; height:100%; background-color:rgba(0,0,0,0.75); transition:all .5s; z-index:-1}
#gnb2 > ul {visibility:hidden; overflow:hidden; width:0; height:100%; opacity:0; background-color:#fff; display:flex; flex-direction:column; justify-content:center; padding:18.5rem 8%; position:absolute; top:0; right:0; transition:all .5s; z-index:2}
#gnb2 > ul > li {display:flex; justify-content:space-between; width:100%}
#gnb2 > ul > li + li {margin-top:6rem}
#gnb2 > ul > li > a {color:#333; font-weight:normal; font-size:3rem; position:relative}
#gnb2 > ul > li > a:after {content:''; background-color:#609ced; width:0; height:3px; position:absolute; left:0; top:5rem; transition:all .3s}
#gnb2 .submenu {width:40%}
#gnb2 .submenu a {color:#333; display:block; font-size:2rem; line-height:4rem; position:relative; opacity:0.7; transition:all .3s}
#gnb2 .submenu a:after {content:''; background:#13d7d0; width:0; height:1px; position:absolute; left:0; bottom:-2px; transition:all .3s}
#gnb2 .submenu div {display:none}

#gnb2.active {position:fixed; top:0; left:0; width:100%; height:100%; z-index:2}
#gnb2.active:after {visibility:visible; overflow:visible; width:100%; opacity:1}
#gnb2.active .open {display:none}
#gnb2.active .close {display:block}
#gnb2.active > ul {visibility:visible; overflow:visible; width:50%; opacity:1}

@media screen and (min-width:1024px) {
	#gnb2 > ul > li:hover > a:after {width:100%}
	#gnb2 .submenu a:hover {color:#609ced; opacity:1}
	#wrap.active #gnb1 > ul > li:hover > a {color:#0285ea}
	#wrap.active #gnb1 > ul > li:hover > a:after {background-color:#0285ea}
	#wrap.active #gnb1 .submenu a:hover {color:#0285ea}
	#wrap.active #gnb2 .control.open:hover {border-color:#0285ea}
	#wrap.active #gnb2 .control.open:hover:before {border-color:#0285ea}
	#wrap.active #gnb2 .control.open:hover:after {background-color:#0285ea}
}

/*FOOT*/
#footer {background-color:#000}
.footer_wrap {display:flex; justify-content:space-between; width:calc(100% - 4rem); max-width:140rem; margin:0 auto; padding:7rem 0; word-break:keep-all}
.footer_wrap > div > .title {color:#9d9d9d; font-size:1.4rem; font-weight:normal}
.footer_wrap > div > .desc {color:#777; font-size:1.4rem; font-weight:300}
.footer_wrap > div > .desc li {margin-top:0.5rem}