@charset "utf-8";
@import url('/share/css/font/Paperlogy.css');
@import url('/share/css/font/TtangsBudaeJjigae.css');
@import url('/share/css/font/Yeongwol.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
:root {
  --krds-contents-wrap-size: 1400px;
  --krds-typo-font-type: "Paperlogy", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

  --tt-typo-font-type: "TtangsBudaeJjigae", sans-serif;
  --ye-typo-font-type: "Yeongwol", sans-serif;
  --noto-typo-font-type: "Noto Sans KR", sans-serif;
  
  --gra: linear-gradient(91deg, #C90003 0%, #69008C 100%);
  --shadow: 0.4rem 0.4rem 1.6rem 0 rgba(0, 0, 0, 0.07);
  
  --krds-color-light-primary-5: #ecf2fe;
  --krds-color-light-primary-10: #d8e5fd;
  --krds-color-light-primary-20: #b1cefb;
  --krds-color-light-primary-30: #86aff9;
  --krds-color-light-primary-40: #4c87f6;
  --krds-color-light-primary-50: #256ef4;
  --krds-color-light-primary-60: #0b50d0;
  --krds-color-light-primary-70: #083891;
  --krds-color-light-primary-80: #052561;
  --krds-color-light-primary-90: #03163a;
  --krds-color-light-primary-95: #020f27;
  
  --krds-color-light-secondary-5: #d6e0eb;
  --krds-color-light-secondary-10: #d6e0eb;
  --krds-color-light-secondary-20: #bacbde;
  --krds-color-light-secondary-30: #90b0d5;
  --krds-color-light-secondary-40: #6b96c7;
  --krds-color-light-secondary-50: #346fb2;
  --krds-color-light-secondary-60: #1c589c;
  --krds-color-light-secondary-70: #063a74;
  --krds-color-light-secondary-80: #052b57;
  --krds-color-light-secondary-90: #031f3f;
  --krds-color-light-secondary-95: #02162c;
}

.masthead {
  background: #F5F5F5 ;
}

.krds-header .header-con .inner {
  flex-direction: row-reverse;
  justify-content: space-between;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  align-items: center;
}

.krds-header .header-con .util .util-list > li.util01 {
  display: flex;
}

.krds-header .header-con .util .util-list > li.util01 .krds-btn {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  color: #1D1D1D;
  font-size: 1.6rem;
  font-weight: 500;
}

.krds-header .header-con .util .util-list > li.util01 .krds-btn .svg-icon {
  margin-top: -0.2rem;
  width: 2rem;
  height: 2rem;
}

.krds-header .header-con .logo {
  width: 24.5rem;
  height: auto;
}

.krds-header .header-con .logo a,
.krds-footer .logo {
  display: flex;
  align-items: center;
  padding-top: 0.9rem;
  gap: 1rem;
  color: #2C302C;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: normal;
}

.krds-header .header-con .logo a::before,
.krds-footer .logo::before {
  flex: 0 0 auto;
  content: '';
  margin-top: -0.9rem;
  width: 4.6rem;
  height: 5.3rem;
  background: url(/share/images/logo-ic.svg) no-repeat 0 0 / 100%;
}

.krds-header .header-con .hd-btns {
  display: none;
}

.main-nav-mobile {
  --krds-main-menu-mobile--menu-left-width: 18rem;
}

.main-nav .gnb-wrap .gnb-sub-list .gnb-sub-con > ul a,
.main-nav .gnb-wrap .gnb-sub-list .gnb-sub-con > ul button {
  font-size: 1.8rem;
}

.main-nav-mobile .gnb-wrap .gnb-body .gnb-menu .submenu-wrap .gnb-sub-list .gnb-sub-trigger.active {
  color: var(--krds-main-menu-mobile--sub-menu-trigger-color-text);
  font-weight: 700;
  background: var(--krds-main-menu-mobile--sub-menu-trigger-color-action-active);
}

.krds-footer {
  background: #fff;
}

.krds-footer .f-btm {
  border-color: #D8D8D8;
}

.krds-btn.icon.border {
  border-color: var(--krds-light-color-border-gray-light);
}

.krds-footer .f-con .f-info .cs li {
  gap: var(--krds-gap-3);
}

.krds-footer .f-con .f-link {
  align-items: flex-end;
}

/* pc */
@media (min-width: 1024px) {
  #contents { /*skipnav 사용시 하단으로 내려가는 것 방지용 header 높이만큼*/
    scroll-margin-top: 17.5rem;
  }
   
  .hasScrollY #contents {
    padding-right: 17px;
  }
}

/* mob */
@media (max-width: 1023px) {
  .is-gnb-mobile #contents {    
    margin-right: 17px;
  }

  .krds-header .header-con .inner {
    flex-direction: row;
  }

  .krds-header .header-con .hd-main {
    justify-content: space-between;
    width: 100%;
  }

  .krds-header .header-con .hd-btns {
    display: inline-flex;
  }

  .krds-header .header-con .btn-navi:not(.all) {
    display: none;
  }

  .krds-footer .f-con .f-link {
    align-items: flex-start;
  }
}