@charset "utf-8";

#header { position:absolute; left:0; top:0; width:100%; height:11rem; z-index:100; transition:all 0.5s; }
#header h1 {position:absolute; left:2rem; top:1.5rem; }
#header h1 a { display:block; width:16rem; height:7.5rem; background:url('../img/layout/logo.png') no-repeat 0 0/auto 200%; text-indent:-99999px; }
#header a.lang { position:absolute; right:3rem; top:3.5rem; width:4rem; height:4rem; background:url('../img/layout/lang.png') no-repeat 0 0/200% auto; text-indent:-99999px; }
#header a.lang+div { display:none; position:absolute; width:8rem; right:1rem; top:9rem; background:#fff; box-shadow:1px 1px 10px rgba(0,0,0,0.5); border-radius:1rem; padding:1rem; }
#header a.lang+div::before {content:''; position:absolute; left:50%; top:-0.3rem; margin:0 0 0 -0.5rem; width:1rem; height:1rem; background:#fff; transform:rotate(45deg); }
#header a.lang+div a { display:block; padding:0.2rem; color:#777; text-transform:uppercase; font-size:1.4rem; text-align:center; }
#header a.lang+div a:hover {font-weight:600; }

#navOpen { display:none; }
#nav {text-align:center;  border-bottom: 1px solid #ccc}
#nav a { color:#fff; }
#nav span { display:inline-block; }
#nav .depth1 {display:inline-block; vertical-align:top; margin:2rem 0 0; }
#nav .depth1 > li {float:left; }
#nav .depth1 > li > a {display:block; font-size:2rem; font-weight:600; padding:2rem 2.5rem; }
#nav .depth2 {display:none; padding:0 0 2rem; }
#nav .depth2 > li > a { display:block; }
#nav .depth2 > li > a span { position:relative; display:inline-block; padding:0.5rem 0; }
#nav .depth2 > li > a span::before {content:''; position:absolute; left:50%; bottom:0; width:0; height:0.4rem; background:#00d876; transition:all 0.4s; }
#nav .depth2 > li > a:hover span::before { left:0; width:100%; }
/*마우스오버시*/
#header.on {background:#fff; height:auto; }
#header.on h1 a { background-position:0 100%; }
#header.on a.lang { background-position:100% 0; }
#header.on #nav a { color:#333; }
#header.on #nav .depth2 {display:block;}

#mnav {display:none;}
.left {text-align:left}
@media all and (max-width:1023px){
  #nav {display:none;}
  #header a.lang {right:8rem;}
  #header a.lang+div {right:6rem; }
  #navOpen { display:block; }
  #navOpen { display:block; position:absolute; top:3.5rem; right:2rem; width:4rem; height:4rem; text-indent:-9999px; }
  #navOpen::before, #navOpen::after {content:''; position:absolute; left:0.5rem; top:1rem; width:3rem; height:2px; background:#fff; transition: all 0.5s ease 0.1s;}
  #navOpen::after {top:3rem;}
  /*네비클릭시*/
  html.noscroll #navOpen::before { transform:rotate(45deg); top:2rem; background:#222; }
  html.noscroll #navOpen::after { transform:rotate(-45deg); top:2rem; background:#222; }
  html.noscroll #header { height:100%; background:#fff;}
  html.noscroll #header h1 a { background-position:0 100%; }
  html.noscroll #header a.lang { background-position:100% 0; }
  html.noscroll #mnav { display:block; text-align:center; padding:10rem 0 0; }
  #mnav .depth1 > li > a {display:inline-block; font-size:3rem; font-weight:600; padding:1rem; }
  #mnav .depth1 > li > a > span {display:inline-block; position:relative; padding:0 0 0.8rem;}
  #mnav .depth1 > li > a > span::before {content:''; position:absolute; left:50%; bottom:0; width:0; height:0.8rem; background:#00d876; transition:all 0.5s; }
  #mnav .depth1 > li > a.on > span::before { left:0; width:100%;}
  #mnav .depth2 { display:none; }
  #mnav .depth2 > li > a { display:inline-block; font-size:2rem; padding:0.5rem 1rem; }
}

#footer .wrap { position:relative; padding:6rem 0 6rem 25rem; }
#footer a.f_logo { position:absolute; left:0; top:6rem; display:block; width:16rem; height:7.5rem; background:url('../img/layout/logo.png') no-repeat 0 100%/auto 200%; text-indent:-99999px; }
#footer .adress p { display:inline-block; margin:0 3rem 0.5rem 0; }
#footer .adress p strong {margin:0 1rem 0 0; }
#footer .copy {text-transform:uppercase; color:#999; font-size: 1.4rem; margin:1rem 0 0; }
@media all and (max-width:768px){
  #footer .wrap { padding:6rem 0; }
  #footer a.f_logo {display:none;}
}