@charset "utf-8";
:focus {outline: 0 none !important; box-shadow: initial !important;}
body {word-break: keep-all;}

body.on {
  height: 100% !important;
  overflow: hidden !important;
}
.layout {
  position: relative;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
#sub .layout{
  max-width: 1300px;
}
.blind-bg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: #000;
  transition: 0.3s;
}
body.on .blind-bg {
  display: block;
  opacity: 0.6;
}
body.active .blind-bg {
  display: block;
  opacity: 0.6;
}

/* header */
.header {
  /* 배경 패널 */
  --gnb-bg-duration: 0.42s;
  /* 열림: 배경 먼저 → 메뉴는 살짝 뒤에서 페이드인 */
  --gnb-menu-fade-in-delay: 0.14s;
  --gnb-menu-fade-in-duration: 0.32s;
  /* 닫힘: 메뉴 먼저 사라짐(짧게) → 배경 축소는 JS 지연 후 동일 --gnb-bg-duration */
  --gnb-menu-fade-out-duration: 0.22s;
  --gnb-panel-ease: cubic-bezier(0.4, 0, 0.2, 1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  padding: 0 6rem;
  border-bottom: 1px solid #d7dded;
  box-shadow: 0 4px 16px 0 rgba(21, 63, 140, 0.05);
  background: #fff;
}
.header .header-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 29.9rem;
  height: 100%;
}
.header .header-logo a {
  display: flex;
}
.header .header-container {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
  height: 9.6rem;
}
.header .header-menu .header-menu-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.header .header-menu .header-menu-container > ul {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 88rem;
  max-width: 100%;
  box-sizing: border-box;
  transition: width 0.2s linear;
}
body.active .header.on .header-menu .header-menu-container > ul {
  width: 100rem;
  max-width: 100%;
  justify-content: space-between;
}
body.active .header.on .header-menu .header-menu-container > ul li {
  flex: 1;
}
.header .header-menu .header-menu-container > ul > li {
  position: relative;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header .header-menu .header-menu-container > ul > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 3.2rem;
}
.header .header-menu .header-menu-container > ul > li > a::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: #17479d;
  content: "";
  transition: width 0.3s ease;
}
.header .header-menu .header-menu-container > ul > li > a.on::before {
  width: 100%;
}
.header .header-menu .header-menu-container > ul > li > a.on + ul {
  background: #f5f7fa;
}
.header .header-menu .header-menu-container > ul > li > a > span {
  display: block;
  position: relative;
  font-size: 2rem;
  font-weight: 600;
  color: #222;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.header .header-util {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  height: 100%;
}
.header .header-util .header-util-personal {
  height: 100%;
}
.header .header-util .header-util-personal > div {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 0.8rem;
}
.header .header-util .header-util-personal > div a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.6rem;
  height: 4rem;
  background: #e1e5eb;
  border-radius: 2rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: #5b677d;
}
.header .header-util .header-util-personal > div a i {
  font-size: 1.8rem;
}
/* 로그인 전(.login-off): 로그인만 표시 / 로그인 후: 마이페이지만 표시 */
.header .header-util .header-util-personal > div:not(.login-off) a.login {
  display: none;
}
.header .header-util .header-util-personal > div.login-off a.mypage {
  display: none;
}
.header .header-util .header-util-personal > div.login-off a.login {
  display: inline-flex;
}
/* 마이페이지: 로그아웃 표시 */
.header .header-util .header-util-personal > div.on-mypage a.mypage {
  display: none;
}
.header .header-util .header-util-personal > div.on-mypage a.login {
  display: inline-flex;
}
@keyframes gnb-menu-text-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.header .header-menu .header-menu-container > ul > li:first-child > ul {border-left: 1px solid #d7dded;}
.header .header-menu .header-menu-container > ul > li > ul {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  opacity: 0;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
  padding: 4rem 1.2rem 7.2rem 1.2rem;
  border-right: 1px solid #d7dded;
  box-sizing: border-box;
  /* 닫힘: 메뉴를 배경보다 먼저·빠르게 숨김 */
  transition:
    opacity var(--gnb-menu-fade-out-duration) var(--gnb-panel-ease),
    visibility 0s linear var(--gnb-menu-fade-out-duration);
}
.header .header-menu .header-menu-container > ul > li:last-child > ul {
  border-right: 1px solid #d7dded;
}
.header .header-menu .header-menu-container > ul > li > ul.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 100%);
  /* 열림: 배경(.header-bg) 펼친 뒤 메뉴가 이어서 나타남 */
  transition:
    opacity var(--gnb-menu-fade-in-duration) var(--gnb-panel-ease)
      var(--gnb-menu-fade-in-delay),
    visibility 0s linear var(--gnb-menu-fade-in-delay);
}
.header .header-menu .header-menu-container > ul > li > ul > li {
  margin-top: 1.2rem;
}
.header .header-menu .header-menu-container > ul > li > ul > li:first-of-type {
  margin-top: 0;
}
.header .header-menu .header-menu-container > ul > li > ul > li > a {
  display: block;
  text-align: center;
}
.header .header-menu .header-menu-container > ul > li > ul > li > a > span {
  display: inline-block;
  color: #222;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.4;
}
/* 열릴 때 텍스트: 패널 페이드와 비슷한 리듬(짧은 구간 + 패널 이징) */
.header .header-menu .header-menu-container > ul > li > ul.on > li > a > span {
  animation: gnb-menu-text-in 0.26s var(--gnb-panel-ease) both;
}
.header
  .header-menu
  .header-menu-container
  > ul
  > li
  > ul.on
  > li:nth-child(1)
  > a
  > span {
  animation-delay: calc(var(--gnb-menu-fade-in-delay) + 0.03s);
}
.header
  .header-menu
  .header-menu-container
  > ul
  > li
  > ul.on
  > li:nth-child(2)
  > a
  > span {
  animation-delay: calc(var(--gnb-menu-fade-in-delay) + 0.05s);
}
.header
  .header-menu
  .header-menu-container
  > ul
  > li
  > ul.on
  > li:nth-child(3)
  > a
  > span {
  animation-delay: calc(var(--gnb-menu-fade-in-delay) + 0.07s);
}
.header
  .header-menu
  .header-menu-container
  > ul
  > li
  > ul.on
  > li:nth-child(4)
  > a
  > span {
  animation-delay: calc(var(--gnb-menu-fade-in-delay) + 0.09s);
}
.header
  .header-menu
  .header-menu-container
  > ul
  > li
  > ul.on
  > li:nth-child(5)
  > a
  > span {
  animation-delay: calc(var(--gnb-menu-fade-in-delay) + 0.11s);
}
.header
  .header-menu
  .header-menu-container
  > ul
  > li
  > ul.on
  > li:nth-child(n + 6)
  > a
  > span {
  animation-delay: calc(var(--gnb-menu-fade-in-delay) + 0.13s);
}
.header
  .header-menu
  .header-menu-container
  > ul
  > li
  > ul
  > li
  > a:hover
  > span {
  color: #17479d;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.header .header-bg {
  position: absolute;
  top: 9.6rem;
  left: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  width: 100vw;
  height: 0;
  overflow: hidden;
  background: #fff;
  transition:
    height 0.3s var(--gnb-panel-ease),
    box-shadow var(--gnb-bg-duration) var(--gnb-panel-ease);
  will-change: height;
}
/* 흰 패널이 헤더 하단(border-bottom·box-shadow)과 같은 높이에서 겹치며 가리는 현상 보완 */
.header .header-bg.on {
  border-top: 1px solid #d7dded;
  box-shadow: 0 4px 16px 0 rgba(21, 63, 140, 0.05);
}
@media (prefers-reduced-motion: reduce) {
  .header {
    --gnb-bg-duration: 0.01s;
    --gnb-menu-fade-in-delay: 0s;
    --gnb-menu-fade-in-duration: 0.01s;
    --gnb-menu-fade-out-duration: 0.01s;
  }
}

/* 전체메뉴 */
#krds-header .header-container .btn-navi.all::before {display: none;}
.header .header-util .header-util-sitemap button {width: 4rem; padding: 0.2rem 0 0 !important; background: none !important;}
.header .header-util .header-util-sitemap button i {
  display: block;
  position: relative;
  z-index: 2;
  font-size: 2.8rem;
  color: #222;
}
.header .header-util .header-util-sitemap button.on i::before{
  content: '\eb98';
  font-size: 2.4rem;
}
.header .header-util .header-util-sitemap button .ri-close-fill {
  display: none;
}
.header .header-util .header-util-sitemap {
  display: none;
}

/* none */
.header-menu.none {
  display: none;
}
.header-util-search.none {
  display: none;
}
.header .header-logo.none {
  display: none;
}

/* gnb호버 */
body.active .header:before {
  display: none;
}
@media (max-width: 1600px) {
  .header {
    padding: 0 2rem;
  }
  .header .header-logo {
    width: 25rem;
  }
  .header .header-menu {
    width: 100%;
  }
  .header .header-menu .header-menu-container {
    padding: 0 20rem 0 27rem;
  }
  .header .header-menu .header-menu-container > ul {
    width: 100%;
  }
  body.active .header.on .header-menu .header-menu-container > ul {
    width: 100%;
  }
  .header .header-menu .header-menu-container > ul > li > a {
    padding: 0 2rem;
  }
  .header .header-menu .header-menu-container > ul > li > a > span {
    font-size: 1.8rem;
  }
}
@media (max-width: 1280px) {
  body.on .header {
    background: #fff;
  }
  .header .header-container{
    height: 9rem;
  }
  .header-menu {
    display: none !important;
  }
  .header .header-util {
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }
  .header .header-util .header-util-sitemap {
    display: block;
  }
  .header .header-util .header-util-sitemap button i {
    font-size: 2.4rem;
  }
}
@media (max-width: 768px) {
  .header .header-container{
    height: 64px;
  }
}
@media (max-width: 640px) {
  .header .header-util .header-util-personal{
    display: none;
  }
  .header:has(.sitemap-list.on) .header-logo{
    display: none;
  }
  .header:has(.sitemap-list.on) .header-util .header-util-personal{
    display: block;
  }
  .header .header-util .header-util-personal > div a{
    height: 3rem;
  }
  .header .header-util .header-util-personal > div a i{
    font-size: 1.6rem;
  }
}
/* 전체메뉴 */
.sitemap-list {
  position: fixed;
  top: -50rem;
  left: 0;
  opacity: 0;
  z-index: -1;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: hidden;
  background-color: #fff;
  transition: all 0.3s;
}
.sitemap-list:before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
  height: 0;
  content: "";
}
.sitemap-list .layout {
  display: flex;
  flex-direction: column;
  opacity: 0;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  gap: 14.5rem;
}
.sitemap-list.on .layout {
  opacity: 1;
  padding-left: 48rem;
  transition: all 0.8s 0.4s;
}
.sitemap-list .layout::-webkit-scrollbar {
  width: 8px;
}
.sitemap-list .layout::-webkit-scrollbar-thumb {
  height: 30%;
  background: #4c5964;
}
.sitemap-list .layout::-webkit-scrollbar-track {
  border-radius: 50px;
  background: #fff;
}
.sitemap-list .layout ul li a {
  display: flex;
  position: relative;
}
.sitemap-list .layout ul li ul.on {
  display: flex;
}
.sitemap-list .layout > ul {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 3.2rem 0;
  margin: auto;
}
.sitemap-list .layout > ul:after {
  display: block;
  position: absolute;
  z-index: -1;
  width: 1px;
  height: 100%;
  background: #e0e0e0;
  content: "";
}
.sitemap-list .layout > ul > li {
  display: block;
}
.sitemap-list .layout > ul > li > a {
  position: relative;
  padding-left: 5rem;
}
.sitemap-list .layout > ul > li > a {
  display: block;
  width: 25rem;
}
.sitemap-list .layout > ul > li > a > span {
  display: block;
  font-size: 2.8rem;
  font-weight: 700;
  color: #222;
  line-height: 1;
}
.sitemap-list .layout > ul > li > ul {
  display: flex;
  display: none;
  flex-direction: column;
  position: absolute;
  top: 3.2rem;
  left: 25rem;
  width: calc(100% - 25rem);
  padding-left: 12rem;
  gap: 3.2rem;
}
.sitemap-list .layout > ul > li > ul > li {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.sitemap-list .layout > ul > li > ul > li > a {
  gap: 0.5rem;
}
.sitemap-list .layout > ul > li > ul > li > a.on > span {
  color: #0083e1;
  text-decoration: underline;
}
.sitemap-list .layout > ul > li > ul > li > a.on + ul {
  display: flex;
}
.sitemap-list .layout > ul > li > ul > li > a.is:after {
  display: block;
  font-family: "remixicon";
  font-size: 2rem;
  color: #9e9e9e;
  transition: all 0.3s;
  content: "\ea13";
}
.sitemap-list .layout > ul > li > ul > li > a.is.on:after {
  content: "\f1af";
}
.sitemap-list .layout > ul > li > ul > li > a > span {
  font-size: 2rem;
  font-weight: 500;
  color: #222;
}
.sitemap-list .layout > ul > li > ul > li > a > span > em {
  display: block;
  font-weight: 700;
}
.sitemap-list .layout > ul > li > ul > li > a:after {
  font-size: 1.8rem;
}
.sitemap-list .layout > ul > li > ul > li > ul {
  display: flex;
  display: none;
  flex-direction: column;
  width: 100%;
  gap: 1.2rem 0;
}
.sitemap-list .layout > ul > li > ul > li > ul > li > a > span {
  font-size: 1.6rem;
  font-weight: 400;
  color: #616161;
}
.sitemap-list .layout > ul > li > ul > li > ul > li > a.on > span {
  font-weight: 500;
  color: #222;
  text-decoration: underline;
}
.sitemap-list .layout > ul > li > ul > li > ul > li > a:after {
  font-size: 1.6rem;
}
.sitemap-list .layout > p {
  width: calc(100% - 32rem);
  margin: 0 auto;
  font-size: 1.6rem;
  font-weight: 400;
  color: #9e9e9e;
}
.sitemap-list.on {
  top: 0;
  opacity: 1;
  visibility: visible;
}

/* 전체메뉴: 1280 이하에서만 노출되므로, 기존 1024 이하 레이아웃을 동일 적용 */
@media (max-width: 1280px) {
  .sitemap-list {
    top: 9rem;
    left: auto;
    right: -100%;
    max-width: 70rem;
    width: 100%;
    height: calc(100% - 9rem);
    padding: 0;
    border-top: 1px solid #ddd;
  }
  .sitemap-list.on {
    top: 9rem;
    right: 0;
  }
  .sitemap-list:before {
    display: none;
  }
  .sitemap-list .layout {
    flex-direction: inherit;
    padding-left: 0;
  }
  .sitemap-list.on .layout {
    padding: 0;
    transition: none;
  }
  .sitemap-list .layout > ul {
    transform: none;
    width: 100%;
    padding: 0;
    margin: 0;
    gap: 0;
    background: #17479d;
  }
  .sitemap-list .layout > ul:after {
    display: none;
  }
  .sitemap-list:after {
    display: block;
    position: absolute;
    top: 50%;
    left: 29rem;
    transform: translateY(-50%);
    z-index: -1;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
    content: "";
  }
  .sitemap-list .layout > ul:before {
    height: 100%;
  }
  .sitemap-list .layout > p {
    display: none;
  }
  .sitemap-list .layout > ul > li > a {
    width: 156px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #17479d;
    font-size: 17px;
    font-weight: 600;
    position: relative;
  }
  .sitemap-list .layout > ul > li > a::after {
    content: "\ea6e";
    font-family: "remixicon";
    font-size: 18px;
    font-weight: 400;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    color: #fff;
  }
  .sitemap-list .layout > ul > li > a.on {
    background: #fff;
  }
  .sitemap-list .layout > ul > li > a.on::after {
    color: #222;
  }
  .sitemap-list .layout > ul > li > a.on span {
    color: #222;
  }
  .sitemap-list .layout > ul > li > a span {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
  }
  .sitemap-list .layout ul li ul {
    width: calc(100% - 156px);
    min-height: auto;
    height: 100%;
    position: absolute;
    left: 156px;
    top: 0;
    background: #fff;
    padding: 0 20px;
    overflow-y: auto;
    z-index: 1;
    gap: 0;
  }
  .sitemap-list .layout ul li ul > li {
    border-bottom: 1px solid #ddd;
  }
  .sitemap-list .layout ul li ul > li a {
    display: block;
    padding: 20px 0;
  }
  .sitemap-list .layout ul li ul > li.active a span {color: #17479D;}
  .sitemap-list .layout ul li ul > li a span{
    font-size: 17px;
    font-weight: 600;
  }
}
@media (max-width: 768px) {
  .sitemap-list{
    top: 64px;
    height: calc(100% - 64px);
  }
  .sitemap-list.on{
    top: 64px;
  }
}
/* 컨테이너 */
#main {
  position: relative;
}

/* 스크롤바 커스텀 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 50px;
  background-color: #17479d;
}
::-webkit-scrollbar-track {
  background-color: transparent;
  margin-top: 9.6rem; /* fixed header 높이만큼 트랙을 아래에서 시작 */
}
@media (max-width: 1280px) {
  ::-webkit-scrollbar-track {
    margin-top: 9rem;
  }
}
@media (max-width: 768px) {
  ::-webkit-scrollbar-track {
    margin-top: 64px;
  }
}

/* 반응형 */
@media (max-width: 1440px) {
  .layout {
    padding: 0 2rem;
  }
}

.quick-menu {
  position: fixed;
  right: 2.5rem;
  top: 50%;
  z-index: 5;
  width: 8.1rem;
  transform: translateY(-50%);
}
.quick-menu-open {
  background: linear-gradient(
    100deg,
    #17479d 2.45%,
    #159cde 89.51%,
    #00b6cd 178.26%
  );
  border-radius: 1rem;
  width: 100%;
  color: #fff;
  font-family: "Geologica";
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  padding: 1.75rem 1rem;
}
.quick-menu ul {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 4px 4px 16px 0 rgba(21, 63, 140, 0.05);
  padding: 0.8rem 0.4rem;
}
.quick-menu ul li + li {
  margin-top: 0.4rem;
}
.quick-menu ul li a {
  display: inline-flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem;
  color: #616161;
  font-size: 1.4rem;
  line-height: 1.45;
  font-weight: 500;
  width: 100%;
  border-radius: 1rem;
  transform: all 0.2s linear;
}
.quick-menu ul li a i {
  display: inline-block;
  width: 2.4rem;
  height: 2.4rem;
}
.quick-menu ul li a i.chat {
  background: url(/resources/mps/public/images/layout/quick-icon01.svg) no-repeat center
    center;
}
.quick-menu ul li a i.speaker {
  background: url(/resources/mps/public/images/layout/quick-icon02.svg) no-repeat center
    center;
}
.quick-menu ul li a i.cube {
  background: url(/resources/mps/public/images/layout/quick-icon03.svg) no-repeat center
    center;
}
.quick-menu ul li a:hover {
  background: #edf4ff;
  color: #17479d;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.quick-menu-close {
  border-radius: 1rem;
  background: #3c3f46;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  width: 100%;
  padding: 1.2rem;
}
.quick-menu-close i {
  font-size: 1.6rem;
}
@media (max-width: 1024px) {
  .quick-menu{
    right: 0;
  }
}
.footer {
  background: #323946;
  padding: 6rem 0;
}
.footer .footer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #fff;
  row-gap: 4rem;
  padding-bottom: 4rem;
}
.footer .footer-info ul {
  display: flex;
  align-items: center;
}
.footer .footer-info .info-list {
  gap: 4rem;
}
.footer .footer-info .info-list li a {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 400;
}
.footer .footer-info .info-list li.blue a {
  color: #00b6cd;
  font-weight: 600;
}
.footer .footer-info address {
  width: 100%;
}
.footer .footer-info .info-external {
  gap: 2.4rem;
}
.footer address dl {
  display: flex;
  flex-wrap: wrap;
  column-gap: 6rem;
  row-gap: 1.2rem;
}
.footer address dl div {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.6rem;
  line-height: 1.2;
}
.footer address dl .address {
  width: 100%;
}
.footer address dl dt {
  font-weight: 600;
}
.footer address dl dd {
  opacity: 0.6;
  font-weight: 400;
}
.footer address dl dd a {
  color: #fff;
}
.footer .copyright {
  padding-top: 2.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 1.6rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 1280px) {
  .footer .footer-info .info-external li a img {
    width: 20rem;
  }
}
@media (max-width: 1000px) {
  .footer .footer-info {
    row-gap: 2rem;
  }
  .footer address dl {
    flex-direction: column;
  }
  .footer address dl div {
    align-items: flex-start;
  }
}
@media (max-width: 768px) {
  .footer .footer-info .info-list{
    gap: 2rem;
    flex-wrap: wrap;
  } 
}

@media (max-width: 350px) {
  .header .header-logo {width: 20rem;}
}