@charset "UTF-8";
/*-------------------------------------------------
Author : ksi
Create date : 2019-01-28
-------------------------------------------------*/
/* header */
#header { background: #000; color: #fff; height: 5rem; font-family: 'Nanum Square', sans-serif; }
#header .container { width: 80rem; position: relative; }
#header .logo { display: inline-block; width: 20.1rem; height: 2.6rem; margin: 1rem 0; }
#header .logo a { display: block; width: inherit; height: inherit; background: url("../images/common/logo.png") 0 center/contain no-repeat; }
#header #nav { float: right; }
#header #nav #gnb::after { display: block; content: ""; clear: both; }
#header #nav #gnb > li { float: left; margin: 0 .5rem; }
#header #nav #gnb > li > a { display: inline-block; font-size: 1.05rem; color: #fff; font-weight: 700; padding: 0 1rem; line-height: 5rem; position: relative; }
#header #nav #gnb > li.active > a { color: #fed247; }
#header #nav #gnb > li.login a { color: #000; z-index: 1; }
#header #nav #gnb > li.login a::before { content: ''; width: 4.6rem; height: 1.7rem; background: #fed247; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; }
#header #nav #gnb > li.login a span { display: inline-block; position: relative; z-index: 2; }
#header #nav .bar { position: absolute; bottom: 0; left: 0; width: 11rem; height: .2rem; background: #fed247; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; }
#header .all-menu { display: none; }
#header .all-menu-close { display: none; }

/* footer */
#footer { background: #140337; color: #a8a8ab; font-size: .75rem; }
#footer .top { border-bottom: 1px solid #363441; padding: 2.5rem 0 1.2rem; }
#footer .top .container { position: relative; }
#footer .top .info::after { display: block; content: ""; clear: both; }
#footer .top .info li { float: left; margin-left: 1.2rem; }
#footer .top .info li:first-child { margin-left: 0; }
#footer .top .info li span { vertical-align: middle; margin-right: .8rem; }
#footer .top .info li img { vertical-align: middle; display: inline-block; }
#footer .top .link { position: absolute; top: 0; right: 0; display: block; line-height: 1.5rem; padding: 0 1.5rem; }
#footer .bottom { padding: 1.6rem 0 4rem; }
#footer .bottom .container { position: relative; }
#footer .bottom .txt { padding-right: 12rem; }
#footer .bottom address { margin-bottom: .5rem; }
#footer .bottom .copyright { opacity: .8; }
#footer .bottom .relate-site { position: absolute; top: 0; right: 0; width: 13rem; font-size: .75rem; }
#footer .bottom .relate-site .title { display: block; width: inherit; height: 2.5rem; padding: .7rem 1rem; color: #bfbfbf; position: relative; background: #3e2968; }
#footer .bottom .relate-site .title i { position: absolute; top: .9rem; right: 1rem; font-size: .7rem; }
#footer .bottom .relate-site .link { position: absolute; bottom: 2.5rem; left: 0; width: inherit; max-height: 0; overflow: hidden; visibility: hidden; z-index: -1; opacity: 0; -webkit-transition: all .3s; transition: all .3s; border-bottom: 1px solid #140337; background: #3e2968; }
#footer .bottom .relate-site .link li a { display: block; color: #b4b4c3; padding: .5rem 1rem; -webkit-transition: all .3s; transition: all .3s; }
#footer .bottom .relate-site .link li a:hover { color: #fff; }
#footer .bottom .relate-site.active .link { max-height: 500rem; opacity: 1; z-index: 3; visibility: visible; }

.go-top { position: fixed; display: block; right: 3.2rem; bottom: 1rem; width: 3.5rem; height: 3.5rem; background: #fed247; color: #333; font-size: 1.5rem; text-align: center; line-height: 3.5rem; z-index: 5; }

.go-top.sticky { bottom: 12rem; }

/* ===================================================== ======================= 반응형 =========================== ========================================================*/
@media (max-width: 1600px) { #header .container { width: 100%; } }
@media (max-width: 1300px) { .go-top { display: none; }
  #header #nav { position: fixed; top: 0; right: -100%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: -1; -webkit-transition: all .3s; transition: all .3s; padding-top: 5rem; }
  #header #nav::before { content: ''; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.3); position: absolute; top: 5rem; left: 0; }
  #header #gnb { padding-top: 1rem; }
  #header #nav.active { right: 0; z-index: 9; }
  #header #nav #gnb > li { width: 100%; margin: 0; }
  #header #nav #gnb > li > a { width: 100%; display: block; text-align: center; line-height: 3rem; }
  #header #nav #gnb > li.active > a::before { content: ''; width: 5rem; height: .2rem; background: #fed247; position: absolute; bottom: 0; left: 50%; margin-left: -2.5rem; }
  #header .all-menu { display: block; position: absolute; top: 0; right: .75rem; font-size: 1.7rem; line-height: 5rem; padding: 0 1rem; }
  #header #nav.active .all-menu-close { display: block; position: absolute; top: 0; right: .75rem; font-size: 1.7rem; line-height: 5rem; padding: 0 1rem; z-index: 10; } }
@media (max-width: 768px) { #header .logo { width: 15.3rem; }
  #footer .top { padding: 1.2rem 0; }
  #footer .top .info li img { width: 8rem; }
  #footer .bottom .txt { padding-right: 0; }
  #footer .bottom .relate-site { position: relative; margin-top: 1rem; top: 0; left: 0; right: auto; } }
@media (max-width: 500px) { #footer .top .info li { display: block; float: inherit; margin-left: 0; margin-bottom: .5rem; } }
/*# sourceMappingURL=layout.css.map */