/* 스킵 네비게이션 */
#skip-navigation {
  position: relative;
  z-index: 9999;
}
#skip-navigation a {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  padding: 5px 0;
  background-color: #254476;
  font-size: 16px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  transition: all 0.4s;
}
#skip-navigation a:focus,
#skip-navigation a:hover,
#skip-navigation a:active {
  top: 0;
}
/* //스킵 네비게이션 */

html {
  overflow-x: hidden; /* layout 안 100% bg로 인한 스타일 */
}

.layout {
  width: 100%;
  max-width: 70rem; /* contents 영역 width rem 값 */
  margin: 0 auto;
  position: relative;
}

/* header */
.header-bg {
  background: url("/html/moim/images/layout/header-bg-v2.png") no-repeat center bottom/cover;
  height: 23.2rem;
  text-align: center;
  line-height: 2.2rem;
}
header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
  transition: all 0.3s 0.1s;
}
.sub header {
  position: relative;
  width: 100%;
  top: 0;
  z-index: 99;
  transition: all 0.3s 0.1s;
}
header.scrolled {
  position: fixed;
  top: 0;
  border-color: rgba(255, 255, 255, 0.3) !important;
  background-color: #fff !important;
  animation: slide-down 0.3s;
}
@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}
#header .top-bar {
  background: #142d5d ;
  height: 2.25rem;
  color: #fff;
}
#header .top-bar span {
  width: 11.55rem;
  display: inline-block;
  background: #3c60b1;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 2.27rem;
}
#header .logo {
  position: absolute;
  left: -60px;
  top: -5px;
  z-index: 12;
  line-height: 0;
  vertical-align: top;
}
#header .logo a {
  display: inline-block;
  overflow: hidden;
  width: 17.55rem;
  height: 2.9rem;
}
#header.scrolled .logo a:before {
  margin-top: -2.9rem;
}
#header .logo a:before {
  margin-top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: url(/html/moim/images/layout/logo-v2.png) no-repeat;
  background-size: 100% auto !important;
  content: "";
  transition: all 0.3s;
}
#header .logo span {
  position: relative;
  color: #96d6ff;
  font-size: 0.9rem;
  padding-left: 0.5rem;
  bottom: 0.75rem;
  font-weight: 700;
}
#header.scrolled .logo span {
  color: #142d5d;
}
/* 주메뉴 */
nav {
  height: 100%;
  vertical-align: top;
}
.navigation {
  position: relative;
  padding-left: 8.1rem;
  display: table;
  table-layout: fixed;
  margin: auto;
  height: 100%;
}
.navigation::before {
  position: absolute;
  left: 50%;
  top: 2.75rem;
  z-index: -2;
  width: 1000%;
  margin-left: -500%;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
  border-top: 1px solid #eee;
  background-color: #f5f8ff;
  content: "";
  opacity: 0;
}

.navigation li {
  width: 8.3rem;
  font-size: 1.14rem;
  color: #fff;
  font-weight: 500;
  text-align: center;
  /* vertical-align: top; */
}
.navigation > li {
  width: 8.3rem;
  font-size: 1.11rem;
  color: #fff;
  font-weight: 500;
  text-align: center;
  vertical-align: top;
  display: table-cell;
  height: 100%;
}
.navigation > li > a.active {
  position: relative;
}
.navigation > li > a.active:before {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.rem;
  height: 0.3rem;
  border-radius: 50%;
  background: #fff;
  content: "";
}
header.scrolled .navigation > li > a.active:before {
  background: #333;
}
.navigation.active > li {
  /* height: 100%; */
}
#header.scrolled .navigation li {
  color: #333;
}
.navigation li:first-child .depth2 {
  border-left: 1px solid #eee;
}
.navigation .depth2 {
  overflow: hidden;
  visibility: hidden;
  position: relative;
  padding: 0px;
  border-right: 1px solid #eee;
  line-height: 1.875;
  height: 0;
  /*width:9.5rem;*/
  /*text-align:center;
  margin: auto;*/
}
.navigation.active .depth2 {
  height: 100%;
}
.navigation .depth2::before {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0.15rem;
  background-color: #254476;
  content: "";
  text-align:center
  /* transition: all 0.2s; */
}
.navigation .depth2::after {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 120%;
  height: 100%;
  background-color: #fff;
  content: "";
  opacity: 0;
  /* transition: all 0.2s; */
}

.navigation .depth2 a {
  display: block;
  font-size: 0.8rem;
  color: #767676;
}
.navigation .depth2 a.none {
  text-decoration: none !important;
  color: #767676 !important;
  cursor: default;
}
.navigation .depth2 a:hover,
.navigation .depth2 a:focus,
.navigation .depth2 a:active {
  color: #254476;
 /* text-decoration: underline*/;
}
.navigation + .control {
  display: none;
}

/* 주메뉴 활성화 */

.navigation.active::before {
  visibility: visible;
  height: 100%;
  opacity: 1;
  /* transition: all 0.2s; */
}
.navigation.active .depth2 {
  visibility: visible;
  padding: 1rem 0;
  opacity: 1;
  top: 1rem;
  height: 100%;
  margin-bottom: -1.7rem;
  /* transition: all 0.2s; */
}
.navigation .active .depth2::before {
  left: 0;
  width: 100%;
}
.navigation .active .depth2::after {
  opacity: 1;
}
.nav-box {
  padding-top: 0.5rem;
  height: 100%;
}
.nav-box > .layout {
  height: 100%;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}
.right-service {
  position: absolute;
  right: 0;
  top: 0.5rem;
  z-index: 10;
}
.right-service ul li {
  display: inline-block;
}
.right-service ul li:first-child {
  margin-right: 0.25rem;
}
.right-service ul li a {
  display: block;
  background: #212d7a;
  border-radius: 1rem;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: normal;
  padding: 0.3rem 1rem 0.3rem 0.8rem;
}
.right-service ul li a i {
  position: relative;
  top: 0.1rem;
}
/* //주메뉴 */
/* //header */

/* footer */
footer {
  width: 100%;
  padding: 2.75rem 0;
  background: #282e3e;
  color: #bbbcbf;
  font-size: 0.7rem;
  font-weight: 700;
}
footer .logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
footer .link {
  display: block;
}
footer address {
  display: inline-block;
}
footer .center-wrap {
  padding-left: 13.4rem;
}
footer .center-wrap .link ul {
  padding-bottom: 0.4rem;
}
footer .center-wrap .link ul li {
  display: inline-block;
  padding-right: 2rem;
}
footer .center-wrap .link ul li:first-child {
  color: #4cc6f3;
}
footer .center-wrap .link ul li:last-child {
  padding-right: 0;
}
footer .center-wrap .con span {
  padding: 0 0.5rem;
}
footer .site {
  position: absolute;
  top: 70%;
  right: 0;
  transform: translateY(-50%);
  background: #181a26;
  line-height: 2.25rem;
  width: 12.5rem;
  z-index: 10;
}
footer .site a {
  display: block;
  color: #999a9e;
  padding-left: 1.5rem;
}
footer .site a i {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  vertical-align: middle;
  margin-left: 0.5rem;
  transition: all 0.2s;
}
footer .site.active i {
  top: 40%;
  transform: rotate(180deg);
}
footer .site ul {
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: 0;
  padding: 0;
  background-color: #181b26;
  line-height: 1.8;
  transition: all 0.2s;
}
/* footer .site .label:after {
  position: absolute;
  right: 0;
  top: 0;
  width: 2.5rem;
  font-size: 0.5rem;
  text-align: center;
  content: "▲";
  transition: all 0.2s;
} */
footer .site.active ul {
  visibility: visible;
  height: auto;
  padding-top: 0.7rem;
}
/* footer .site.active .label::after {
  top: 2px;
  transform: rotate(180deg);
} */
footer .top-btn {
  position: absolute;
  top: -4rem;
  right: 0;
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 50%;
  background: #377cfd;
  color: #fff;
  text-align: center;
  padding-top: 0.75rem;
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.6);
  letter-spacing: normal;
}
footer .top-btn i {
  display: block;
}
/* //footer */

/* sub-header */
.sub-header-bg {
  background: url("/html/moim/images/layout/sub-header-bg.png") no-repeat center center/cover;
  width: 100%;
  height: 3.8rem;
}
#header.scrolled .sub-header-bg {
  background: #fff;
  border-bottom: 1px solid #eaeaea;
}
/* //sub-header */

/* 퀵메뉴 */
.quick-wrap {
  position: fixed;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  background: #377cfd;
  width: 3.6rem;
  height: 13.3rem;
  text-align: center;
  z-index: 99;
  border-radius: 3rem;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.quick-wrap::before {
  position: absolute;
  width: 3.45rem;
  height: 2.5rem;
  top: -0.1rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #2f6ee4;
  content: "";
}
.quick-wrap button {
  display: block;
  width: 100%;
  height: 100%;
}
.quick-wrap button::after {
  content: "\e903";
  font-family: "xeicon";
  color: #fff;
  font-size: 1.5rem;
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.quick-wrap i {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.quick-wrap span {
  display: block;
  position: absolute;
  width: 100%;
  transform: rotate(90deg);
  font-size: 0.9rem;
  color: #fff;
  top: 5rem;
  right: 0;
  white-space: nowrap;
  font-weight: 700;
}
/* //퀵메뉴 */

select::-ms-expand {
  display: none;
}

.scroll-fixed {
  overflow-y: hidden;
}