@charset "utf-8";
@import url('/share/css/font/Paperlogy.css');
@import url('/share/css/font/TtangsBudaeJjigae.css');
@import url('/share/css/font/Yeongwol.css');
: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;
  --ft-c-basic: #1E2124;
  --ft-c-sub: #464C53;
  --ft-c-point: #AA1A00;

	--ft-family-ttang: 'TtangsBudaeJjigae';
	--ft-family-yeong: 'Yeongwol';

  --krds-typo-font-weight-bold: 600;
  --krds-font-weight-bold: 600;
  
  --krds-color-light-primary-5: #F2F7F4;
  --krds-color-light-primary-10: #E4EEE8;
  --krds-color-light-primary-20: #C8DCCF;
  --krds-color-light-primary-30: #A8C2B0;
  --krds-color-light-primary-40: #7FA98C;
  --krds-color-light-primary-50: #4E7C64;
  --krds-color-light-primary-60: #456F59;
  --krds-color-light-primary-70: #3B604D;
  --krds-color-light-primary-80: #304F40;
  --krds-color-light-primary-90: #22372D;
  --krds-color-light-primary-95: #17251E;
    
  --krds-color-light-secondary-5: #F3F5F8;
  --krds-color-light-secondary-10: #E5EAF0;
  --krds-color-light-secondary-20: #C8D3E1;
  --krds-color-light-secondary-30: #A7B8CD;
  --krds-color-light-secondary-40: #5B7CA3;
  --krds-color-light-secondary-50: #2C3E5D;
  --krds-color-light-secondary-60: #263651;
  --krds-color-light-secondary-70: #212E45;
  --krds-color-light-secondary-80: #1A2436;
  --krds-color-light-secondary-90: #111825;
  --krds-color-light-secondary-95: #0A1018;
  
  --gra: linear-gradient(90deg, #4E7C64 0%, #2C3E5D 100%);
  --gra-v: linear-gradient(180deg, #4E7C64 0%, #2C3E5D 100%);
  --viewed-bg: var(--krds-color-light-primary-70);
  --point: var(--krds-color-light-primary-70); 
  --sub-point: #0F7774;
}

.masthead {
  background-color: #F3F5F8;
}

.util .util-list > li.util01,
.util .util-list > li.util21,
.util .util-list > li.util05 {
  display: flex !important;  
}

.krds-header .header-con .util .util-list .krds-btn.text.small {
  --krds-button--pc-font-size-small: 1.4rem;
}

.krds-header .header-con h1.logo {
  margin-top: -1rem;
}

.krds-header .header-con .logo a,
.krds-footer .logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #48494E;
  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%;
}

@media (max-width: 1023px) {
  .krds-header .header-con .logo {
    margin-top: 0 !important;
  }
}

@media (max-width: 420px) {
  .krds-header .header-con .logo a,
  .krds-footer .logo {
    font-size: 2rem;
  }

  .krds-header .header-con .logo a::before,
  .krds-footer .logo::before {
    width: 3rem;
    height: 3.5rem;
  }
}

.krds-header .header-con .btn-navi {
  font-size: 1.6rem;
  font-weight: 500;
}

.main-nav  {
  --krds-main-menu--color-border: #D8D8D8;
}

.main-nav .gnb-menu .gnb-main-trigger {
  font-size: 2rem;
  font-weight: 600;
}

.main-nav .gnb-wrap .gnb-sub-list .gnb-sub-con > ul a[target=_blank]::after, 
.side-nav .snv-list>.snv-li>.snv-li-btn[target=_blank]::after,
.main-nav-mobile .gnb-wrap .gnb-body .gnb-menu .submenu-wrap .gnb-sub-list .gnb-sub-trigger[target=_blank]::after {
  content: '';
  width: 1.6rem;
  height: 1.6rem;
  background-color: var(--ft-c-basic);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url(/share/images/icon/ico_go.svg);
  mask-image: url(/share/images/icon/ico_go.svg);
}

.main-nav .gnb-wrap .gnb-sub-list .gnb-sub-con > ul a[target=_blank]::after {
  margin-top: 0.4rem;
}

.main-nav-mobile .gnb-wrap .gnb-body .gnb-menu .submenu-wrap .gnb-sub-list .gnb-sub-trigger[target=_blank]::after {
  margin-left: 0.5rem;
}

.krds-footer {
  border-top: 1px solid #D8D8D8;
  background: #fff;
}

.krds-footer .f-con .f-info .cs li {
  gap: 0.8rem;
}

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

.krds-btn.text .svg-icon {
  margin-bottom: -0.3rem;
}

.krds-footer .f-con .f-link .link-go .krds-btn.text {
  font-size: 1.6rem;
  font-weight: 600 !important;
}

.krds-footer .personal {
  font-weight: 600 !important;
}

.krds-footer .f-btm .f-btm-text .f-menu {
  gap: 2.4rem;
}

@media (max-width: 767px) {
  .krds-footer .f-con .f-link {
    align-items: flex-start;
  }

  .krds-footer .f-btm .f-btm-text .f-menu {
    gap: 0.4rem 0.8rem ;
  }
}

#quick-menu {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;

  --bg: url(../img/quick.svg) no-repeat 0 0 / 38.4rem;
}

#quick-menu .list {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  width: 10rem;
  border-radius: 2rem 0 0 2rem;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0.4rem 0.4rem 1rem 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

#quick-menu .list a,
#quick-menu .list span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  width: 10rem;
  height: 9.7rem;
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: 0;
  background: none;
}

#quick-menu .list a:hover,
#quick-menu:has(#viewed:hover) .list span,
#quick-menu:has(.modal-opened) .list span {
  background: #fff;
}

#quick-menu .list a::before,
#quick-menu .list span::before {
  content: '';
  width: 7rem;
  height: 4rem;
  background: var(--bg);
}

#quick-menu .list :nth-child(2) a::before {
  background-position: -7rem 0;
}

#quick-menu .list :nth-child(3) a::before {
  background-position: -14rem 0;
}

#quick-menu .list :nth-child(4) span::before {
  background-position: -21rem 0;
}

#quick-menu .quick-chat {
  position: absolute;
  right: 0;
  top: calc(9.7rem * 3);
  bottom: auto;
  width: 10rem;
  z-index: 0;
}

#quick-menu #viewed {
  width: 10rem;
  height: 9.7rem;
}

#quick-menu #viewed .open-modal {
  padding: 1.8rem 0 1.2rem 0;
  width: 10rem;
  height: 9.7rem;
  opacity: 0;
}

#quick-menu #viewed .krds-modal.shown {
  top: auto;
  bottom: 0;
  right: 11.3rem;
  transform: none;
}

#quick-menu #viewed .krds-modal .modal-dialog .modal-content {
  border-radius: 2rem;
  border: 1px solid rgba(44, 62, 93, 0.20);
  background: #FFF;
  box-shadow: 0.4rem 0.4rem 1rem 0 rgba(0, 0, 0, 0.25);
}

#quick-menu .talk {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  margin-left: 1rem;
  width: 8rem;
  height: 8rem;
  color: #fff;
  font-size: 1.4rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #4E7C64 0%, #304F40 100%);
  box-shadow: 0.4rem 0.4rem 1rem 0 rgba(0, 0, 0, 0.25);
  z-index: 1;
}

#quick-menu .talk::before {
  content: '';
  width: 3.2rem;
  height: 2.5rem;
  background: var(--bg);
  background-position: -28rem 0;
}

#quick-menu  #ai-chatbot {
  margin-top: 11rem;
  margin-left: 1rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #5B7CA3 0%, #2C3E5D 100%);
  box-shadow: 0.4rem 0.4rem 1rem 0 rgba(0, 0, 0, 0.25);
}

#quick-menu #ai-chatbot::before {
  display: none;
}

#quick-menu #ai-chatbot .ai-open {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  padding: 0;
  width: 8rem;
  height: 8rem;
  color: #fff;
  font-size: 1.4rem;
}

#quick-menu #ai-chatbot .ai-open::before {
  content: '';
  width: 3.2rem;
  height: 2.5rem;
  background: var(--bg);
  background-position: -31.7rem 0;
}

@media (max-width: 767px) {
  #quick-menu {
    right: 1rem;
    top: auto;
    bottom: 5rem;
    transform: none;
  }

  #quick-menu .list {
    display: none;
  }

  #quick-menu .talk {
    margin-left: 0;
    margin-bottom: 9rem;
  }

  #quick-menu .quick-chat {
    top: auto;
    bottom: 0;
    width: 8rem;
  }
  
  #quick-menu #ai-chatbot {
    margin: 0;
  }

  body:not(.main) #ai-chatbot .ai-open strong {
    display: inline-block;
  }
}

@media print { 
  #sub-search,
  #container::before,
  #quick-menu {
    display: none;
  }
}