@charset "UTF-8";
/*-------------------------------------------------
title       : 레이아웃
Author      : ㅈㅁㅈ
Create date : 2020-05-11
-------------------------------------------------*/
.go-top { display: none; }

#header { height: 9rem; padding: 2.5rem 4.5rem 0; border-bottom: 1px solid #c2c3cc; }

#header .logo { float: left; }

#header .logo a { display: block; width: 16.5rem; height: 5rem; background: url("../images/common/logo2020.png") no-repeat center 0; background-size: auto 100%; }

#header .bar, #header .all-menu-close, #header .all-menu { display: none; }

#nav { font-size: 1.8rem; float: right; font-weight: 700; line-height: 3.5rem; }

#nav li { display: inline-block; position: relative; margin-left: 5.5rem; vertical-align: top; }

#nav li.login a { float: right; height: 3.5rem !important; padding: 0 2rem; border-radius: 0.25rem; background-color: #e2e2e2; }

#nav li .sub { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; font-size: 1.4rem; position: absolute; left: -2.5rem; top: 100%; z-index: 30; width: calc(100% + 5rem) !important; background-color: #fff; text-align: center; }

#nav li .sub a { display: block; -webkit-transition: all 0.2s; transition: all 0.2s; }

#nav li .sub a:hover, #nav li .sub a:focus { background-color: #72f6f4; }

#nav li.on .sub { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; -webkit-transition: all 0.2s; transition: all 0.2s; }

#footer { font-size: 1.5rem; padding: 6rem 0 8rem; background-color: #484a59; color: #fff; }

#footer .container { width: 115rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; position: relative; }

#footer .top .info { float: left; }

#footer .top .info li { display: inline-block; margin-right: 2rem; vertical-align: top; }

#footer .top .info span { margin-right: 1rem; font-weight: bold; }

#footer .top .info img { height: 3.3rem; }

#footer .top .link { float: right; }

#footer .top .link:hover, #footer .top .link:focus { text-decoration: underline; }

#footer .bottom { display: inline-block; width: 100%; margin-top: 2.5rem; padding-top: 3rem; border-top: 1px solid #7f8193; }

.relate-site { font-size: 1.4rem; position: absolute; right: 0; top: 0; width: 26rem; height: 4.5rem; background-color: #797888; line-height: 4.5rem; }

.relate-site a { display: block; position: relative; padding-left: 3.5rem; -webkit-transition: all 0.2s; transition: all 0.2s; }

.relate-site a:hover, .relate-site a:focus { background-color: #22232f; }

.relate-site i { font-size: 1rem; position: absolute; right: 2.5rem; top: auto; line-height: inherit; opacity: 0.7; -webkit-transition: all 0.2s; transition: all 0.2s; }

.relate-site .link { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; left: 0; bottom: 100%; width: 100% !important; margin-bottom: -1rem; background-color: #797888; line-height: 3rem; }

.relate-site.active i { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.relate-site.active .link { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; margin-bottom: 0.1rem; padding: 1rem 0; -webkit-transition: all 0.2s; transition: all 0.2s; }

/*-------------------------------------------------
title       : 레이아웃 반응형
Author      : ㅈㅁㅈ
Create date : 2020-05-11
-------------------------------------------------*/
@media (max-width: 1280px) { #nav li { margin-left: 3rem; } }

@media (max-width: 1024px) { #header { position: relative; height: 6rem; padding-top: 1.5rem; }
  #header .logo { float: none; }
  #header .logo a { height: 3rem; margin: 0 auto; }
  #header .all-menu-close, #header .all-menu { font-size: 3rem; display: block; position: absolute; left: 1rem; top: 1rem; width: 3rem; height: 3rem; background-color: #fff; }
  #nav { position: absolute; left: 0; top: 100%; z-index: 5; float: none; width: 100%; margin-top: 0.1rem; background-color: #fff; }
  #nav li { display: block; margin: 0; }
  #nav li.login { position: absolute; right: 1rem; top: -4.75rem; }
  #nav li.login a { padding: 0; background: none; }
  #nav li .sub { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; position: static; width: 100% !important; -webkit-transition: all 0s; transition: all 0s; }
  #nav a { display: block; overflow: hidden; height: 0; }
  #nav .all-menu-close { display: none; top: -4.5rem; background-color: #fff; }
  #nav.active { padding: 1.5rem 0; -webkit-box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1); box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.1); }
  #nav.active .all-menu-close { display: block; }
  #nav.active a { height: 3.5rem; text-align: center; }
  #footer { padding: 3rem 0 4rem; }
  .relate-site { display: none; } }

@media (max-width: 560px) { #footer .top .link { display: none; } }