@charset "UTF-8";
/*--------------------------------------------------------------------- LAYOUT --------------------------*/
.inner {max-width: calc(1440px + 80px); width: 100%; padding: 0 40px; margin: 0 auto; } 
#skip {position: absolute; z-index: 999999; width: 100%; left: 0; top: 0; text-align: center; } 
#skip a {display:block; position:absolute; left:0; top:-9999px; z-index:1; width:100%; height:40px; line-height:40px; background-color:#333; color:#fff; font-size:20px; font-weight:700;}
#skip a:hover, #skip a:focus {top:0;}

body{overflow-y: auto;}
body.overflow{overflow: hidden;}


/*--------------------------------------------------------------------- TITLE ------------------------*/
.sub-menu__tit h2{font-size: 20px;}

/*--------------------------------------------------------------------- TABLE ------------------------*/


/*--------------------------------------------------------------------- COMPONENT ------------------------*/




/*--------------------------------------------------------------------- HEADER --------------------------*/
header {position: fixed;z-index: 11;width: 100%;top: 0;background: transparent;} 
header.on{background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.05)}
header .inner{max-width: 100%;}
.hd-cont{height: 100px;position: relative;}
.hd-cont_wrap { gap: 80px; }
.hd-logo a { position: relative; z-index: 9; } 
/* .gnb-btn{width: 40px;height: 40px;background: linear-gradient(120deg, #B60081 25%, #36318F, #36318F);position: relative;border-radius: 10px;z-index: 9;}
.gnb-btn span{display: block;height: 2px;width: 18px;background: #fff;position: absolute;top: 50%;left: 50%;margin-left: -9px; transition: all 0.5s;}
.gnb-btn span:before,
.gnb-btn span:after{content:'';display: block;height: 100%;width: 100%;background: #fff;position: absolute;top: -7px;transform: rotate(0deg); transition: all 0.5s;}
.gnb-btn span:after{top: 7px;}
.gnb-btn.on span { background: transparent; } 
.gnb-btn.on span:before { transform: rotate(135deg); top: 0; } 
.gnb-btn.on span:after { transform: rotate(-135deg); top: 0; }  */
.hd-right .gnb-cont > li{position: relative;}
.hd-right .depth2 {position: absolute;display: none;top: calc(100% + 35px);left: 50%;transform: translateX(-50%);text-align: center;padding: 20px 25px;background: #fff;border: 1px solid #F7F7F7;box-shadow: 0 6px 12px rgba(0,0,0,0.16);border-radius: 20px;white-space: nowrap;width: 200px;} 
.hd-right .depth2:after { content: ''; position: absolute; width: 30px; height: 26px; top: -25px; left: 50%; transform: translateX(-50%); background: no-repeat 50% / cover; background-image: url("../../images/cmn/ico-triangle.svg"); } 
.hd-right .depth2 > li {padding: 12px 0;} 
.hd-right .depth1 > li.on > a { text-decoration: underline; font-weight: 700; } 
.hd-right .depth2 > li > a { font-size: 18px; font-weight: 400; color: #000; } 
header .depth2 > li > a:hover{color: #B60081; text-decoration: underline; font-weight: 700;}

.gnb-cont > li:not(:last-child){margin-right: 86px;}
.gnb-cont > li > a{font-size: 18px;font-weight: 500;display: flex;align-items: center;}
.gnb-cont > li > a.tit{white-space: nowrap;}

/* GNB 7개 대분류(KBRI 대학원 프로그램 / Korea Brain Academy 포함) 대응.
   시안(PC 사이트맵) 실측: 글자 22px / 항목 간격 53px / 헤더 좌우 여백 100px.
   기존 고정 margin(86px)은 7개에서 넘치므로 gap으로 교체하고,
   1535px 이하에서만 24px까지 선형 축소해 1줄을 유지합니다. */
.type03 .hd-cont > .gnb,
.type04 .hd-cont > .gnb { flex: 1 1 auto; min-width: 0; }
.type03 .gnb-wrap,
.type04 .gnb-wrap { width: 100%; }
.type03 .gnb-cont,
.type04 .gnb-cont { width: 100%; justify-content: center; gap: clamp(24px, calc(24px + (100vw - 1400px) * 0.215), 53px); }
.type03 .gnb-cont > li:not(:last-child),
.type04 .gnb-cont > li:not(:last-child) { margin-right: 0; }
/* 헤더만 풀와이드 + 좌우 100px (시안 기준). 1640px 이하는 기존(여백 40px)과 동일. */
.type03 header .hd-wrap.inner { max-width: 100%; padding: 0 clamp(40px, calc(50vw - 780px), 100px); }
.type03 .gnb-cont > li { position: relative; }
.type03 .gnb .depth-box { display: none; position: absolute; top: calc(100% + 30px); left: 50%; z-index: 20; min-width: 220px; padding: 20px 24px; border: 1px solid #e4e4e4; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.12); transform: translateX(-50%); }
.type03:not(.page-former-director) .gnb-cont > li:hover > .depth-box,
.type03:not(.page-former-director) .gnb-cont > li:focus-within > .depth-box { display: block; }
.type03 .gnb .depth-left { display: none; }
.type03 .gnb .depth2 > li + li { margin-top: 12px; }
.type03 .gnb .depth2 a { color: #000; font-size: 16px; font-weight: 500; white-space: nowrap; }
/*--------------------------------------------------------------------- siteMap (전체 메뉴) --------------------------*/
.siteMap { display: none; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1100; background: #fff; overflow-y: auto; }
.siteMap.on { display: block; }
body.siteMap-open { overflow: hidden; }
body.siteMap-open header.main { background: #fff !important; box-shadow: none !important; }
body.siteMap-open header.main .hd-logo a img { content: url("../../images/cmn/hd-logo.svg"); }
body.siteMap-open header.main .search-btn { display: none !important; }
body.siteMap-open header.main .gnb-cont > li > a { color: #000 !important; }
body.siteMap-open header.main .lang-btn,
body.siteMap-open header.main .lang-btn p { color: #002F63 !important; }
body.siteMap-open header.main .lang-btn i,
body.siteMap-open header.main .ico-gnb { filter: brightness(0) saturate(100%) invert(14%) sepia(56%) saturate(2917%) hue-rotate(202deg) brightness(97%) contrast(101%) !important; }
body.siteMap-open .siteMap { top: 100px; height: calc(100vh - 100px); border-top: 1px solid #E4E4E4; box-shadow: inset 0 6px 12px -6px rgba(0, 0, 0, 0.08); }
body.siteMap-open .siteMap::before { content: ''; position: absolute; top: 246px; left: 140px; right: 140px; height: 1px; background: #E4E4E4; z-index: 1; }
body.siteMap-open .siteMap-wrap { padding-top: 0; }
body.siteMap-open .siteMap-cont { padding-top: 176px; }
body.siteMap-open .aside,
body.siteMap-open #fp-nav { display: none !important; }

/* 사이트맵 열린 동안 푸터의 관련사이트 버튼이 사이트맵 위로 떠오르는 문제 차단.
   main04.css 의 .main-footer .ft-info .ft-site__family { z-index: 100 } 가
   header(z-index:11) 의 stacking context 를 넘어 위로 올라오기 때문. */
body.siteMap-open .ft-site__family { display: none !important; }
body.siteMap-open .siteMap-footer .ft-site__family { display: block !important; }
body:has(header .gnb-cont > li.on) .ft-site__family { z-index: 1; }

/* 사이트맵 fixed 가 viewport 기준으로 정확히 잡히도록, 부모 header 에 stacking
   context/containing block 을 만드는 속성(backdrop-filter, transform, filter)을
   사이트맵 열림 동안 강제 제거. 그렇지 않으면 .siteMap 의 top:100px 이 header
   기준 100px(=viewport 200px)이 되어 헤더 아래 빈 공간이 발생. */
body.siteMap-open header,
body.siteMap-open header.on,
body.siteMap-open header.main {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
}

/* 사이트맵 내부 콘텐츠 시작 위치를 layout.css 기본 그대로 강제. */
body.siteMap-open .siteMap { top: 100px !important; height: calc(100vh - 100px) !important; }
body.siteMap-open .siteMap-wrap { padding-top: 0 !important; }

/* 헤더 높이가 반응형에서 줄어들 때(1200px↓ 80px, 767px↓ 60px) 사이트맵의
   top: 100px 과 어긋나 헤더-사이트맵 사이에 빈 공간이 생기는 문제 보정. */
@media (max-width: 1200px) {
    body.siteMap-open .siteMap { top: 80px !important; height: calc(100vh - 80px) !important; }
}
@media (max-width: 767px) {
    body.siteMap-open .siteMap { top: 60px !important; height: calc(100vh - 60px) !important; }
}

.siteMap-wrap { width: 100%; min-height: 100%; padding-top: 100px; box-sizing: border-box; }
.siteMap-head { padding: 40px 0 30px; }
.siteMap-title { position: absolute; top: 80px; left: 140px; font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 40px; line-height: 56px; color: #111; margin: 0; }
.siteMap-desc { position: absolute; top: 152px; left: 140px; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 20px; color: #292929; margin: 0; }
.siteMap-close { position: absolute; top: 0; right: 0; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.siteMap-close img { width: 100%; height: 100%; display: block; filter: brightness(0); }

.siteMap-cont { position: relative; overflow: hidden; padding: 20px 0 80px; }
.siteMap-cont .inner { position: relative; }
/* 하단 뇌 그래픽 (시안 기준): 800x800 원본 비율, 화면 우측 끝에 붙이고 하단 168px은 푸터 뒤로 잘림 */
.siteMap-cont::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -168px;
    z-index: 0;
    width: 800px;
    height: 800px;
    background: url("../../images/user/sub/siteMap-bg.svg") no-repeat 50% / contain;
    pointer-events: none;
}
.siteMap-nav { position: relative; z-index: 1; display: flex; flex-direction: column; }

.siteMap-row { display: flex; gap: 80px; padding: 32px 0; border-bottom: 1px solid #EFEFEF; }
.siteMap-row:last-child { border-bottom: 0; }
.siteMap-row__tit { flex: 0 0 180px; font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 30px; line-height: 1.3; color: #5381B7; padding-top: 10px; }
.siteMap-row__tit a { color: inherit; font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 30px; }
.siteMap-row__note { display: block; margin-top: 8px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 13px; color: #D9534F; }

.siteMap-row__list { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.siteMap-row__list:has(> .siteMap-cell:nth-child(6)) { grid-template-columns: repeat(6, 1fr); }
.siteMap-row__list:has(> .siteMap-cell:nth-child(7)) { grid-template-columns: repeat(4, 1fr); }
.siteMap-row__list:has(> .siteMap-cell:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
.siteMap-row__list:has(> .siteMap-cell:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.siteMap-row__list:has(> .siteMap-cell:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.siteMap-row__list:has(> .siteMap-cell:only-child) { grid-template-columns: 1fr; }

.siteMap-cell { display: flex; flex-direction: column; gap: 16px; }
.siteMap-cell__tit { position: relative; display: block; padding: 12px 36px 12px 18px; background: #F4F6F9; border-radius: 8px; font-family: 'Pretendard', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3; color: #222; transition: background .15s; }
.siteMap-cell__tit:hover { background: #E8EDF3; }
.siteMap-cell--link .siteMap-cell__tit::after { content: ''; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 24px; height: 24px; background: url("../../images/user/main/new/Group 11587.svg") no-repeat 50% / contain; }

.siteMap-cell__sub { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.siteMap-cell__sub li { position: relative; padding-left: 10px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; color: #555; }
.siteMap-cell__sub li::before { content: '·'; position: absolute; left: 0; top: 0; color: #999; }
.siteMap-cell__sub li a { color: inherit; }
.siteMap-cell__sub li a:hover { color: #5381B7; text-decoration: underline; }
.siteMap-cell__sub li.to-remove { color: #D9534F; }
.siteMap-cell__sub .siteMap-note { margin-left: 4px; color: #D9534F; font-weight: 700; }

/* 1차 배포 제외 구간 (연구분야) */
.siteMap-row.excluded { background: rgba(253, 215, 217, 0.35); margin: 0 -40px; padding-left: 40px; padding-right: 40px; }
.siteMap-row.excluded .siteMap-row__list { grid-template-columns: repeat(5, 1fr); }

.gnb-control{display: flex; align-items: center; gap: 16px;}
.gnb-control .btn{width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;}
.gnb-control .search-btn img, .gnb-control .gnb-btn i{width: 48px; height: 48px;}
.gnb-control .lang-btn i{width: 30px; height: 30px;}
.lang-btn{color: #304F9E; font-size: 18px; font-weight: 700;}
.lang-btn i{width: 30px; height: 30px;}


/* type */
.type02 header .inner{max-width: calc(1600px + 80px);}

.type03 .inner { max-width: calc(1560px + 80px)}
.type03 header { background: rgba(0, 0, 0, 0.36); box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10); backdrop-filter: blur(10px); } 
.type03 .gnb-cont > li > a { font-family: var(--f-nanum); color: #fff; text-align: center; font-size: 22px; font-style: normal; font-weight: 600; line-height: normal; } 
.type03 .lang-btn i { filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(108deg) brightness(105%) contrast(101%); margin: 0; } 
.type03 .lang-btn { flex-direction: column; color: #fff; } 
.type03 .lang-btn p { color: inherit; font-size: 14px; font-weight: 700; } 
.type03 .gnb-control { gap: 12px; }
.type03 .gnb-control i { filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(108deg) brightness(105%) contrast(101%); }
.type03 .hd-cont { height: 100px; }
/* search-btn / lang-btn icons & text — 검은색 통일 */
.type03 .gnb-control .search-btn img,
.type03 .gnb-control .lang-btn i { filter: brightness(0); }
.type03 .gnb-control .lang-btn,
.type03 .gnb-control .lang-btn p { color: #000; }

.type04 .gnb-cont > li > a { font-family: var(--f-nanum); font-size: 22px; font-weight: 400; color: #fff; }
.type04 .gnb-control { gap: 16px; }
.type04 .lang-btn i { filter: var(--filter-white); margin: 0; }
.type04 .lang-btn { color: #fff; flex-direction: column; }
.type04 .lang-btn p { color: inherit; font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; letter-spacing: 0; }
.type04 .ico-gnb { filter: var(--filter-white); }
.type04 .inner{max-width: 100%;padding: 0 140px;}

/*--------------------------------------------------------------------- GNB mega-menu (type04 hover) --------------------------*/
/* 활성/hover GNB 항목 언더라인 (기존 li 박스는 건드리지 않고 a.tit에만 추가) */
.type03 .gnb-cont > li > a.tit,
.type04 .gnb-cont > li > a.tit { position: relative; }
.type03 .gnb-cont > li > a.tit::after,
.type04 .gnb-cont > li > a.tit::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -8px;
  height: 3px; background: #5381B7; transform: scaleX(0);
  transform-origin: center; transition: transform .25s ease;
}
.type03 .gnb-cont > li.on > a.tit::after,
.type04 .gnb-cont > li.on > a.tit::after { transform: scaleX(1); }

/* 현재 페이지 카테고리(JS 자동 부여) 강조 — 호버와 분리된 .is-current.
   파란 글자 + 파란 밑줄을 항상 표시. */
.type03 .gnb-cont > li.is-current > a.tit,
.type04 .gnb-cont > li.is-current > a.tit { color: #5381B7; font-weight: 700; }
.type03 .gnb-cont > li.is-current > a.tit::after,
.type04 .gnb-cont > li.is-current > a.tit::after { transform: scaleX(1); }

/* 메가 메뉴 패널 — 풀-와이드, 헤더(fixed, z-index:11) 안의 자식이라 header stacking 위에 위치 */
.type03 .gnb-cont > li > .mega-menu,
.type04 .gnb-cont > li > .mega-menu {
  position: fixed; top: 100px; left: 0; right: 0;
  background: #fff; border-top: 1px solid #E4E4E4;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* 좌측 480px 컬러 블록 — 카테고리 제목 영역 배경 */
.type03 .gnb-cont > li > .mega-menu::before,
.type04 .gnb-cont > li > .mega-menu::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 480px;
  background: url("../../images/cmn/gnb_bg.png") no-repeat 50% / cover;
  pointer-events: none;
}
.type03 .gnb-cont > li.on > .mega-menu,
.type04 .gnb-cont > li.on > .mega-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.mega-menu__inner {
  display: flex; gap: 100px;
  padding: 32px 180px 64px 180px;
  max-width: 100%;
  position: relative;
}
.mega-menu__title { flex: 0 0 240px; }
.mega-menu__title a {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700; font-size: 30px; line-height: 1.3; color: #5381B7;
}

.mega-menu__list {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 16px 12px;
}
.mega-menu__list:has(> .mega-menu__cell:nth-child(6)) { grid-template-columns: repeat(6, 1fr); }
.mega-menu__list:has(> .mega-menu__cell:nth-child(7)) { grid-template-columns: repeat(4, 1fr); }
.mega-menu__list:has(> .mega-menu__cell:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
.mega-menu__list:has(> .mega-menu__cell:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.mega-menu__list:has(> .mega-menu__cell:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.mega-menu__list:has(> .mega-menu__cell:only-child) { grid-template-columns: 1fr; }

.mega-menu__cell { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mega-menu__cell-tit {
  position: relative; display: block;
  padding: 12px 36px 12px 18px;
  background: #F4F6F9; border-radius: 8px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600; font-size: 18px; line-height: 1.3; color: #000;
  transition: background .15s;
}
.mega-menu__cell-tit:hover { background: #E8EDF3; }
.mega-menu__cell--link .mega-menu__cell-tit::after {
  content: ''; position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  width: 20px; height: 20px;
  background: url("../../images/user/main/new/Group 11587.svg") no-repeat 50% / contain;
}

.mega-menu__cell-sub { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-direction: column; gap: 8px; }
.mega-menu__cell-sub li {
  position: relative; padding-left: 10px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400; font-size: 16px; line-height: 1.5; color: #5B5B5B;
}
.mega-menu__cell-sub li::before { content: '·'; position: absolute; left: 0; top: 0; color: #999; }
.mega-menu__cell-sub li a { color: inherit; }
.mega-menu__cell-sub li a:hover { color: #5381B7; text-decoration: underline; }
/* 현재 페이지(선택된 항목) — .on 클래스로 표시 */
.mega-menu__cell-sub li.on { font-weight: 600; color: #292929; }
.mega-menu__cell-sub li.on a { color: inherit; }

/* 메가 메뉴 외 영역 디밍 백드롭 — 헤더(z-index:11) 아래에 위치해 mega-menu를 가리지 않음 */
.mega-backdrop {
  position: fixed; top: 100px; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
  z-index: 10;
  pointer-events: none;
}
.type04 header.main:has(.gnb-cont > li.on) ~ .mega-backdrop,
.type03 header:has(.gnb-cont > li.on) ~ .mega-backdrop {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* 헤더 hover 상태 (mega-menu 열림) — 흰 배경 + 다크 톤 전환 (siteMap-open과 동일 룩) */
/* JS가 mouseenter/focusin에서 .on을 토글하므로 .on 단일 트리거로 통일 (ESC가 명확히 닫을 수 있도록) */
.type04 header.main:has(.gnb-cont > li.on) {
  background: #fff;
}
.type04 header.main:has(.gnb-cont > li.on) .hd-logo a img {
  content: url("../../images/cmn/hd-logo.svg");
}
.type04 header.main:has(.gnb-cont > li.on) .gnb-cont > li > a {
  color: #111;
}
.type04 header.main:has(.gnb-cont > li.on) .lang-btn,
.type04 header.main:has(.gnb-cont > li.on) .lang-btn p { color: #002F63; }
.type04 header.main:has(.gnb-cont > li.on) .lang-btn i,
.type04 header.main:has(.gnb-cont > li.on) .ico-gnb {
  filter: brightness(0) saturate(100%) invert(14%) sepia(56%) saturate(2917%) hue-rotate(202deg) brightness(97%) contrast(101%);
}

/* 모바일/태블릿에서는 mega-menu 비활성화 (햄버거 sitemap 사용) */
@media (max-width: 1024px) {
  .type03 .gnb-cont > li > .mega-menu,
  .type04 .gnb-cont > li > .mega-menu,
  .mega-backdrop { display: none !important; }
  .type03 .gnb-cont > li > a.tit::after,
  .type04 .gnb-cont > li > a.tit::after { display: none; }
}

/*--------------------------------------------------------------------- CONTAINER --------------------------*/
.container{overflow-y: hidden;overflow-x: hidden;}



/*--------------------------------------------------------------------- FOOTER --------------------------*/
footer {position: relative;}
.ft-banner{padding: 15px 0; background-color: #fff; border-top: 1px solid #E4E4E4;}
.ft-banner__wrap {position: relative;padding: 0 40px;}
.ft-banner__wrap .swiper-btn{position: absolute;z-index: 1;top: 50%;transform: translateY(-50%);width: 31px;height: 31px;background: no-repeat 50% / cover;background-image: url("../../images/cmn/ico-slide_btn.svg")}
.ft-banner__wrap .swiper-btn.swiper-prev{left: 0;}
.ft-banner__wrap .swiper-btn.swiper-next{transform:  translateY(-50%) rotate(180deg);right: 0;}
.ft-slide{padding: 2px 0;}
.ft-slide > ul > li{width: 20%; padding: 0 8px}
.ft-slide > ul > li > a{width: 100%; height: 70px; display: flex; align-items: center; justify-content: center; background-color: #fff;}
.ft-slide > ul > li > a img{transition: .4s; height: auto;}
.ft-slide > ul > li > a:hover img{transform: scale(1.08); }

.ft-site{background-color: var(--g-black);}
.ft-site__nav{display: flex;}
.ft-site__nav li:not(:last-child){padding-right: 25px; margin-right: 25px; position: relative;}
.ft-site__nav li:not(:last-child)::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%);right: 0; width: 1px; height: 10px; background: var(--g-black8);}
.ft-site__nav a{font-size: 14px; color: var(--g-black4);}
.ft-site__nav a:hover{text-decoration: underline;}
.ft-site__family{position: relative;}
.family-btn{width: 213px;height: 50px;background-color: #141414;text-align: left;padding: 0 20px;position: relative;font-size: 14px;font-weight: 500;color: #fff;}
.family-btn::before,
.family-btn::after {content: '';position: absolute;height: 2px;width: 9px;background: #fff;display: block;transition: all .3s;cursor: pointer;right: 20px;top: 50%;} 
.family-btn::before { transform: rotate(-45deg); margin-right: 6px; } 
.family-btn::after { transform: rotate(45deg); } 
.family-btn.active::before{transform: rotate(45deg);}
.family-btn.active::after{transform: rotate(-45deg);}
.family-list {position: absolute;bottom: 51px;width: 100%;text-align: center;display: none;z-index: 1;} 
.family-list ul { font-size: 0; border: 1px solid #e4e4e4; background: #fff; max-height: 340px; overflow: auto; } 
.family-list li {font-size: 16px;font-weight: 400;display: block;padding: 13px 0; margin: 0 10px; border-bottom: 1px solid #e4e4e4;text-align: left;} 
.family-list a {font-size: 14px;} 
.family-list a:hover {text-decoration: underline;}

.ft-info{padding: 60px 0; background: url("../../images/cmn/ft-bg.png") no-repeat 50% / cover;}
.ft-info address{margin-top: 20px;}
.ft-info address b{display: block; font-weight: 500; line-height: 1.7; margin-bottom: 15px;}
.ft-info address ul li{
  color: rgba(255, 255, 255, 0.90);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  display: inline-block;padding-right: 10px;margin-right: 10px;position: relative;color: rgba(255, 255, 255, 0.90);}
.ft-info address ul li:last-child{margin-right: 0;}
.ft-info address ul li:not(:last-child)::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 10px; background: rgba(255, 255, 255, 0.30); opacity: 0.5;}
.ft-info__right{text-align: right;}
.ft-info__right a{display: inline-block;}
.copyright{font-size: 12px;color: #BABABA;line-height: 1.6;margin-top: 8px;color: rgba(255, 255, 255, 0.40);font-size: 14px;font-weight: 500;line-height: 18px; /* 128.571% */}
.copyright a{font-size: inherit; color: inherit;}
.ft-sns{display: flex; align-items: center; gap: 12px;}
.ft-sns i{width: 50px; height: 50px;}
.ico-youtube_w{background-image: url("../../images/cmn/ico-youtube_w.svg");}
.ico-facebook_w{background-image: url("../../images/cmn/ico-facebook_w.svg");}
.ico-youtube{background-image: url("../../images/cmn/ico-youtube.svg");}
.ico-facebook{background-image: url("../../images/cmn/ico-facebook.svg");}



.type02 .ft-info { background: var(--g-black1); } 
.type02 .ft-info .inner{max-width: calc(1560px + 80px)}
.type02 .top-btn { background: linear-gradient(136deg, #376BAE 0.81%, #7A98CC 99.19%); box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.25); } 
.type02 .ft-info address ul li { color: var(--g-black6);font-family: Pretendard;font-size: 16px;font-style: normal;font-weight: 500;line-height: 20px; /* 125% */}
.type02 .ft-info address ul li:not(:last-child)::after { background: var(--g-black3); } 
.type02 .ft-info address ul + ul { margin-top: 6px; } 
.type02 .family-btn {border-radius: 5px;background: #fff;box-shadow: 0 0 24px 0 rgba(0, 47, 99, 0.16);color: #00A59F;font-size: 18px;font-weight: 600;width: 256px;height: 46px;} 
.type02 .family-btn::before, 
.type02 .family-btn::after { background: #00A59F; width: 16px; } 
.type02 .family-btn::before { transform: rotate(90deg); } 
.type02 .family-btn::before { transform: rotate(-90deg); margin-right: 0; } 
.type02 .family-btn::after { transform: rotate(0deg); } 
.type02 .family-btn.active::before {transform: rotate(0deg);}
.type02 .ft-sns {margin-top: 20px; justify-content: right;}
.type02 .ft-site { background-color: var(--g-main); padding: 20px 0; } 
.type02 .copyright { color: rgba(255, 255, 255, 0.48); font-size: 14px; font-weight: 500; line-height: 18px; } 
.type02 .ft-site__nav li:not(:last-child) { padding-right: 20px; margin-right: 20px; } 
.type02 .ft-site__nav a { color: rgba(255, 255, 255, 0.80); font-family: Pretendard; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal; } 
.type02 .ft-site__nav li:not(:last-child)::after { background: rgba(255, 255, 255, 0.26); height: 12px; } 
.type03 .ft-site{background-color: #303B48;}
.type03 .ft-info{background: radial-gradient(195.25% 231.23% at 67.16% 140.21%, #314C6A 0%, #1C2937 100%);}
.type03 .family-btn {background: #242D37;height: 60px;width: 260px;color: #fff;font-family: Pretendard;font-size: 18px;font-style: normal;font-weight: 600;line-height: normal;}
.type03 .ft-site__nav > li > a{
  color: var(--g-black4);
  font-family: var(--f-nanum);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.type03 .ft-site__nav > li:first-child > a{
  color: var(--g-black2);
  font-weight: 600;
}
.type04 .ft-site {background: #303B48;}

.type04 .ft-info {
    background: radial-gradient(195.25% 231.23% at 67.16% 140.21%, #314C6A 0%, #1C2937 100%);
}

.type04 .ft-site__nav a {
    color: rgba(255, 255, 255, 0.50);
    font-family: var(--f-nanum);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.type04 .ft-site__nav li:first-child a {
    color: var(--g-black2);
    font-weight: 700;
}

.type04 .ft-site__nav li:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.16);
    SVG;
}

.type04 .family-btn {
    background: #242D37;
    font-size: 18px;
    font-family: var(--f-nanum);
    width: 240px;
    height: 62px;
}
.type04 .ft-site {background: #303B48;}

.type04 .ft-info {
    background: radial-gradient(195.25% 231.23% at 67.16% 140.21%, #314C6A 0%, #1C2937 100%);
}

.type04 .ft-site__nav a {
    color: rgba(255, 255, 255, 0.50);
    font-family: var(--f-nanum);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.type04 .ft-site__nav li:first-child a {
    color: var(--g-black2);
    font-weight: 700;
}

.type04 .ft-site__nav li:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.16);
    SVG;
}

.type04 .family-btn {
    background: #242D37;
    font-size: 18px;
    font-family: var(--f-nanum);
    width: 240px;
    height: 62px;
}

.type04 .ft-info address ul li {
    color: rgba(255, 255, 255, 0.90);
    font-family: "NanumHuman TTF";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
}

.type04 .ft-info address ul li:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.30);
    opacity: 0.5;
}

.type04 .copyright {
    color: rgba(255, 255, 255, 0.22);
    font-family: var(--f-nanum);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 128.571% */
}



/*--------------------------------------------------------------------- modal --------------------------*/
.modal.modal-common,
.modal.modal-common .alert__cont { width:100%; max-width:920px; background:#fff; padding: 40px; border-radius:3px; box-shadow:0 0 3px #000; position: relative; } 
.modal.modal-common .modal-txt { margin-bottom:32px; } 
.modal.modal-common .modal-txt__tit,
.modal.modal-common .alert-txt__tit { font-size:22px; font-weight:700; margin-bottom:10px; text-align: left; border-bottom: 1px solid #e4e4e4; padding-bottom: 15px; } 
.modal.modal-common .modal-txt__cont,
.modal.modal-common .alert-txt__cont { color:#535353; word-break:keep-all; line-height: 24px; } 
.modal.modal-common .modal__btn .btn { width:100%; height:55px; line-height:55px; color: #fff; font-size: 18px; font-weight: 500; border-radius:3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; } 


/*-- modal-alert --*/
.modal.modal-alert { max-width: 400px; padding: 0; box-shadow: none; border-radius: 14px; -webkit-border-radius: 14px; -moz-border-radius: 14px; -ms-border-radius: 14px; -o-border-radius: 14px; } 
.modal-alert .modal-txt { margin-bottom: 0; padding: 83px 0; text-align: center; } 
.modal-alert .modal-txt__tit { border-bottom: 0; padding: 0; margin-bottom: 0; } 
.modal.modal-alert .modal-txt__cont { font-size: 16px; font-weight: 500; color: #333; } 
.modal.modal-alert .modal__btn .btn { background: #FF9D00; width:100%; height:60px; line-height:60px; color: #fff; font-size: 16px; font-weight: 500; border-radius: 0 0 14px 14px; -webkit-border-radius: 0 0 14px 14px; -moz-border-radius: 0 0 14px 14px; -ms-border-radius: 0 0 14px 14px; -o-border-radius: 0 0 14px 14px; } 



/*--------------------------------------------------------------------- checkbox --------------------------*/
.checkbox {font-size: 0;}
.checkbox input[type="checkbox"] + label{display: inline-flex;}
.checkbox input[type="checkbox"] + label span{font-size: 16px; font-weight: 500;}
.checkbox input[type="checkbox"] + label:before { width: 25px; height: 25px; border-radius: 5px; margin-right: 9px; background: no-repeat 50% / cover; background-image: url(../../images/cmn/ico_checkbox_w.svg); border: 0; flex: none;} 
.checkbox input[type="checkbox"]:checked + label:before{background-image: url(../../images/cmn/ico_check.svg);}
.checkbox input:focus:not([type=text])+label { outline: none; box-shadow: 0 0 0 2px #000; } 


/*--------------------------------------------------------------------- radio --------------------------*/


/*--------------------------------------------------------------------- input 안에 button --------------------------*/
.input-wrap { position: relative; } 
.input-wrap .btn-inner { color: #fff; width: 90px; height: 40px; font-size: 12px; border-radius: 3px; position: absolute; right: 5px; top: 5px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; } 



/* chatbot */
.makechat_wg_btn_show{
    width: 6rem;
    height: 6rem;
    z-index:1000;
    border: none;
    background: transparent;
    margin-left: -1rem;
}

.makechat_wg_btn_show img{
    width: 6rem;
    height: 6rem;
    cursor:pointer;
    border-radius:50%;
    z-index:1000;
}

.makechat_wg_btn_newintent{
    width:20px;
    height:20px;
    line-height:20px;
    border-radius:20px;
    background:#CCC;
    font-size: 12px;
    text-align:center;
    font-weight:bold;
    color:#FFF;
    position:absolute;
    right:-10px;
    top:-10px;
}

.makechat_wg_btn_ani{
    -webkit-animation: makechat_btn_jump 2s ease 0s 2 normal ;
    animation: makechat_btn_jump 2s ease 0s 2 normal ;
}

@-webkit-keyframes makechat_btn_jump {
  0%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40%{
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  60%{
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
  80%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes makechat_btn_jump {
  0%{
    transform: translateY(0);
  }
  20%{
    transform: translateY(0);
  }
  40%{
    transform: translateY(-30px);
  }
  50%{
    transform: translateY(0);
  }
  60%{
    transform: translateY(-15px);
  }
  80%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(0);
  }
}

.makechat_wg_area_chat{
    position: fixed;
    bottom:30px;
    right:30px;

    width:320px;
    height:750px;
    min-width: 340px !important;
    max-height: 750px !important;
    border-radius:10px;
    box-shadow: 0 6px 60px 0 rgba(81,99,120,0.3) !important;
    display:none;
    z-index:10000;
}

.makechat_wg_area_chat iframe{
    width:100%;
    height:750px;
    min-width: 340px !important;
    max-height: 750px !important;
    border:none !important;
    border-radius:10px;
    overflow:hidden !important;
}

.makechat_wg_msg{
    font-size: 0.8rem;
    color:#FFF;
    background: #0e3674;
    border-radius: 15px;
    box-sizing: border-box;
    padding:10px;
    
    position: fixed;
    bottom:110px;
    right:30px;
    display:none;
    z-index:1000;
}


/* top-btn */
.aside{position: fixed;bottom: 30px;right: 30px;z-index: 99;display: none;}
.aside .ico-center i{margin-bottom: 0;}
.top-btn{width: 50px;height: 50px;border-radius: 5px;background: rgba(0, 0, 0, 0.40);}
.top-btn .btn {width: 100%; height: 100%; font-size: 18px; font-weight: 700; color: #757575;}
.ico-top{width: 16px;height: 20px;background: no-repeat 50% / cover;background-image: url(../../images/cmn/ico-top.svg);}
.aside.on {bottom: calc(100% + 50px);}
.aside.show{display: block}
.type03 .top-btn { border-radius: 5px; border: 1px solid var(--400, #BABABA); background: rgba(255, 255, 255, 0.20); } 
.type03 .top-btn i { filter: brightness(0) saturate(100%) invert(49%) sepia(0%) saturate(0%) hue-rotate(231deg) brightness(92%) contrast(89%); } 
.type04 .top-btn{background: rgba(255, 255, 255, 0.60);border: 1px solid #D0D0D0;border-radius: 10px;}
.type04 .ico-top{filter: brightness(0);}

@media screen and (min-width: 1201px) {
    .siteMap .depth2 {
        display: block !important;
    }
}



/*--------------------------------------------------------------------- 반응형 --------------------------*/
/* 헤더 GNB 1400↓ 숨김 */
@media screen and (max-width: 1400px){
    header.main .hd-cont > .gnb{display: none;}
}

@media screen and (max-width: 1200px){
    /*--------------------------------------------------------------------- LAYOUT --------------------------*/
    .inner{max-width: 100%;}



    /*--------------------------------------------------------------------- HEADER --------------------------*/
    header.main .hd-cont > .gnb{display: none;}

    /* siteMap 태블릿: 5열 → 3열 */
    .siteMap-row { flex-direction: column; gap: 20px; padding: 32px 0; }
    .siteMap-row__tit { flex: none; padding-top: 0; }
    .siteMap-row__list,
    .siteMap-row__list:has(> .siteMap-cell:nth-child(6)) { grid-template-columns: repeat(3, 1fr); gap: 20px 16px; }
    .siteMap-row.excluded { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }


    /*--------------------------------------------------------------------- FOOTER --------------------------*/
    .ft-slide > ul > li{width: 33.333%;}
    .ft-info .inner{display: block;}
    .ft-info *{text-align: center;}
    .ft-info__right{margin-top: 30px;}
    .aside{bottom: 20px; right: 20px;}
    .aside.on{bottom: calc(100% + 20px);}
}

@media screen and (max-width: 1200px) and (min-width: 768px){
    /*--------------------------------------------------------------------- HEADER --------------------------*/
    .gnb-btn{width: 50px; height: 50px;}
    .gnb-btn span{width: 23px; margin-left: -11px;}
    .gnb-btn span:before{top: -10px;}
    .gnb-btn span:after{top: 10px;}

    /* type03 서브 페이지: main 페이지(header.main)와 동일한 반응형 헤더 */
    .type03 .hd-cont { height: 80px; }
    .type03 .hd-cont > .gnb { display: none; }
    body.type03 .hd-logo a { width: 160px; }
    .type03 .gnb-control { gap: 0; }
    .type03 .gnb-control .btn { width: 42px; height: 48px; }
    .type03 .gnb-control .search-btn { display: none; }
    .type03 .gnb-control .lang-btn p { display: none; }
    .type03 .gnb-control .ico-gnb,
    .type03 .gnb-control .lang-btn i { width: 22px; height: 22px; }

    /*--------------------------------------------------------------------- siteMap --------------------------*/
    body.siteMap-open .siteMap { top: 80px; height: calc(100vh - 100px); border-top: 1px solid #E4E4E4; box-shadow: inset 0 6px 12px -6px rgba(0, 0, 0, 0.08); }
    .siteMap-title { left: 40px; }
    .siteMap-desc { left: 40px; }
}


@media screen and (max-width: 767px){
    /*--------------------------------------------------------------------- LAYOUT --------------------------*/
    .inner{padding: 0 20px;}


    /*--------------------------------------------------------------------- HEADER --------------------------*/
    .hd-cont{height: 70px;}
    .hd-logo a{width: 148px;}
    .hd-logo a img{width: 100%;}

    /* type03 서브 페이지: main 페이지(header.main)와 동일한 반응형 헤더 */
    .type03 .hd-cont { height: 60px; }
    .type03 .hd-cont > .gnb { display: none; }
    body.type03 .hd-logo a { width: 130px; }
    .type03 .gnb-control { gap: 0; }
    .type03 .gnb-control .search-btn { display: none; }
    .type03 .gnb-control .lang-btn p { display: none; }
    .type03 .gnb-control .ico-gnb,
    .type03 .gnb-control .lang-btn i { width: 22px; height: 22px; }
    .type03 .gnb-control .lang-btn { font-size: 11px; }

    /* siteMap 모바일: 1열 */
    .siteMap-wrap { padding-top: 60px; }
    body.siteMap-open .siteMap { top: 70px; height: calc(100vh - 70px); }
    body.type04.siteMap-open .siteMap { top: 60px; height: calc(100vh - 60px); }
    body.siteMap-open .siteMap-wrap { padding-top: 0; }
    body.siteMap-open .siteMap::before { top: 164px; left: 20px; right: 20px; }
    body.siteMap-open .siteMap-cont { padding-top: 120px; }
    .siteMap-head { padding: 24px 0 20px; }
    .siteMap-title { top: 40px; left: 20px; font-size: 28px; line-height: 40px; }
    .siteMap-desc { top: 92px; left: 20px; font-size: 14px; }
    .siteMap-cont { padding: 10px 0 40px; }
    .siteMap-cont::after { display: none; }
    .siteMap-row { flex-direction: column; gap: 12px; padding: 20px 0; }
    .siteMap-row__tit { font-size: 22px; }
    .siteMap-row__tit a { font-size: 22px; }
    .siteMap-row__list,
    .siteMap-row__list:has(> .siteMap-cell:nth-child(6)),
    .siteMap-row__list:has(> .siteMap-cell:nth-child(4):last-child),
    .siteMap-row__list:has(> .siteMap-cell:nth-child(3):last-child),
    .siteMap-row__list:has(> .siteMap-cell:nth-child(2):last-child),
    .siteMap-row__list:has(> .siteMap-cell:only-child) { grid-template-columns: 1fr; gap: 12px; }
    .siteMap-row.excluded { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
    .siteMap-cell { gap: 12px; }
    .siteMap-cell__tit { font-size: 16px; padding: 10px 32px 10px 16px; }
    .siteMap-cell__sub { gap: 8px; }
    .siteMap-cell__sub li { font-size: 14px; }
    /* siteMap 모바일 아코디언 (design03.js / design04.js 에서 is-open 토글) */
    .siteMap .siteMap-row { gap: 0; padding: 0; border-bottom: 1px solid #E4E4E4; }
    .siteMap .siteMap-row__tit { position: relative; }
    .siteMap .siteMap-row__tit a { display: flex; align-items: center; min-height: 72px; padding-right: 52px; font-size: 18px; line-height: 1.4; }
    .siteMap .siteMap-row__tit a::after { content: ''; position: absolute; top: 50%; right: 10px; width: 32px; height: 32px; margin-top: -16px; background: url("../../images/user/sub/ico-sitemap-arrow.svg") no-repeat 50% / contain; transition: transform .2s ease; }
    .siteMap .siteMap-row.is-open .siteMap-row__tit a::after { transform: rotate(180deg); }
    .siteMap .siteMap-row:not(.is-open) .siteMap-row__list { display: none; }
    .siteMap .siteMap-row__list,
    .siteMap .siteMap-row__list:has(> .siteMap-cell:nth-child(6)),
    .siteMap .siteMap-row__list:has(> .siteMap-cell:nth-child(4):last-child),
    .siteMap .siteMap-row__list:has(> .siteMap-cell:nth-child(3):last-child),
    .siteMap .siteMap-row__list:has(> .siteMap-cell:nth-child(2):last-child),
    .siteMap .siteMap-row__list:has(> .siteMap-cell:only-child) { gap: 0; padding: 12px 0 16px; border-top: 1px solid #E4E4E4; }
    .siteMap .siteMap-cell { gap: 0; }
    .siteMap .siteMap-cell__tit { padding: 14px 52px 14px 20px; border-radius: 0; background: transparent; font-size: 18px; font-weight: 700; color: #000; }
    .siteMap .siteMap-cell__tit:hover { background: transparent; }
    .siteMap .siteMap-cell--link .siteMap-cell__tit::after { display: none; }
    .siteMap .siteMap-cell.has-sub > .siteMap-cell__tit::after { content: ''; position: absolute; top: 50%; right: 20px; width: 24px; height: 24px; margin-top: -12px; border: 1px solid #E4E4E4; box-sizing: border-box; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23A3A3A3' stroke-width='1.6'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") no-repeat 50% / 10px auto; transition: transform .2s ease; }
    .siteMap .siteMap-cell.has-sub.is-open > .siteMap-cell__tit::after { transform: rotate(180deg); }
    .siteMap .siteMap-cell.has-sub:not(.is-open) > .siteMap-cell__sub { display: none; }
    .siteMap .siteMap-cell__sub { gap: 10px; padding: 0 20px 14px; }
    .siteMap .siteMap-cell__sub li { color: #757575; }


    /*--------------------------------------------------------------------- FOOTER --------------------------*/
    .ft-slide > ul > li{width: 100%;}
    .ft-site .inner {display: block; padding: 0; } 
    .ft-site__nav {height: 50px; background: #5381B7; align-items: center; }
    .family-btn {width: 100%; } 
    .copyright {margin-top: 30px; } 
    .aside {bottom: 10px;right: 10px;}
    .aside.on { bottom: calc(100% + 10px); }
    .makechat_wg_btn_show {width: 5.5rem;height: 5.5rem;margin-left: -1rem;}
    .makechat_wg_btn_show img {width: 100%; height: 100%;}
}

/* search overlay */
.search-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1000; align-items: center; justify-content: center;}
.search-overlay.active {display: flex;}
.search-content {position: relative;}
.search-close {position: absolute; top: 40px; right: 40px; width: 64px; height: 64px; padding: 0; border: 0; background: transparent; cursor: pointer;}
.search-close img {width: 100%; height: 100%; display: block;}
.search-title {font-family: 'GmarketSans', sans-serif; font-weight: 700; font-size: 48px; line-height: 110%; color: #fff; text-align: center;}
.search-character {position: absolute; right: -80px; bottom: -20px; width: 140px; height: 147px; pointer-events: none;}
.search-bar {position: relative; width: 600px; height: 76px; margin: 40px 0; background: rgba(255, 255, 255, 0.05); border: 1px solid #fff; border-radius: 8px; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);}
.search-bar__input {width: 100%; height: 100%; border: 0; outline: 0; background: transparent; padding: 0 112px 0 32px; font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 20px; color: #fff;}
.search-bar__input::placeholder {font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 20px; color: #fff; opacity: 1;}
.search-bar__input::-webkit-search-cancel-button,
.search-bar__input::-webkit-search-decoration {-webkit-appearance: none; appearance: none; display: none;}
.search-bar__submit {position: absolute; top: 50%; right: 56px; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer;}
.search-bar__submit img {width: 100%; height: 100%; display: block;}
body.search-open {overflow: hidden;}

/* 검색 오버레이 모바일 */
@media screen and (max-width: 767px) {
    .search-close {top: 20px; right: 20px; width: 44px; height: 44px;}
    .search-title {font-size: 28px;}
    .search-bar {width: min(600px, calc(100vw - 40px)); height: 60px; margin: 28px 0;}
    .search-bar__input {font-size: 15px; padding: 0 72px 0 20px;}
    .search-bar__input::placeholder {font-size: 15px;}
    .search-bar__submit {width: 32px; height: 32px; right: 28px;}
    .search-character {display: none;}
}