@charset "UTF-8";


/* ===== Tokens ===== */
:root{
  --max: 1608px;           /* 중앙 컨테이너 폭 (1920 가운데 놓임) */
  --pad: 24px;             /* 좌우 기본 패딩 */
  --gap: 20px;             /* 카드/패널 간격 */
  --radius: 12px;

  --bg: #fff;
  --bg-soft:#f7f7f9;
  --text:#40454F;         /* default text Color */
  --text-bold:#292C32;
  --muted:#575E6B;

  --brand-soft:#E8406A;    /* hover */
}
.ml12 {margin-left: 12px}
.mt16 {margin-top: 16px}
.mb16 {margin-bottom: 16px}

/* ===== layout ===== */
.container{ width: min(var(--max), 100%); margin-inline:auto;}
.row{ display:flex; align-items:center; justify-content: space-between; gap:16px; height: 100%;}
.form-column {display:flex;}
.form-column > div {flex: 1}

/* ===== Topbar ===== */
.topbar{ height: 72px; border-bottom:1px solid var(--line); background:#fff; color: var(--text-bold)}
.topbar .brand{ display:flex; align-items:center; gap:12px; }
.topbar .brand h1 {font-size: 22px;}
.topbar .logo{ width:40px; height:40px;}
.topbar .search{ margin-left:auto; display:flex; gap:8px; }
.topbar .opt-login { display: flex; align-items: center; z-index: 4;}
.topbar .opt-login .login::after,
.opt-login .logout::after {
	content: "";
	position: absolute;
	top: 50%;
	left:0;
  transform: translateY(-50%);
	width: 1px;
	height:28px;
	background: #C1C5CD;
}
.topbar .opt-login > div:first-child .login::after {display: none}
.topbar .logout {position:relative;}
.topbar .opt-login .login {position:relative; font-size: 16px; font-weight: 500; color:var(--text-bold);}
.topbar .opt-login .login.is-open button{background:#EBEDEF; border-radius:4px;}
.topbar .opt-login .login button {font-size: 16px; font-weight: 500; color:var(--text-bold); cursor: pointer; padding: 7px 12px; margin-right: 8px}
.topbar .opt-login div + div {margin-right:24px}
.topbar .opt-login div + div button{margin-left:8px}
.topbar .opt-login .login button img {display:inline-block; padding-right: 8px;}
.topbar .opt-login div + div .login button {padding-left: 15px;}
.topbar .opt-login .login .login-menu {
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:204px;
  background:#fff;
  border:1px solid #A5ABB6;
  border-radius:4px;
  box-shadow: 0 10px 30px rgba(87, 94, 107, 0.3);
  overflow:hidden;
  font-weight: 400;
  color: #40454F;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .12s, transform .12s, visibility 0s .12s;
}
.topbar .opt-login .login.is-open .login-menu{
  opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;
}

.topbar .opt-login .login .login-menu li {position:relative; padding: 12px 12px; cursor: pointer;}
.topbar .opt-login .login .login-menu li:hover{background:#FDEDF1; }
.topbar .opt-login .login .login-menu li:hover::after,
.topbar .opt-login .login .login-menu li.is-selected::after{
	content: "";
  position: absolute;
  top:50%;
  right:12px;
  transform: translateY(-50%);
  width: 24px;
  height:24px;
  background: url('../images/main/ic-login-ck.png') no-repeat 0 0;
}
.opt-login .logout {position:relative;}
.opt-login .myinfo-area, .opt-login .logout {font-size:16px; font-weight:500;}
.user-name {margin-right: 12px}
.opt-login .myinfo-area img, .opt-login .logout img { margin-right: 6px}




/* ===== Main Nav ===== */
:root{
  --active: #DA1A4A;
}

/* ===== GNB 레이아웃 ===== */
.gnb-wrap {width: 100%; border-bottom: 1px solid #C1C5CD ; background: #fff; min-height: 53px;}
.gnb { width: 1608px; margin: 0 auto; }
.gnb__viewport { overflow-x: hidden; overflow-y: hidden; position: relative;}
/* JS가 8개 이상일 때 추가 */
.gnb__viewport.is-scrollable { overflow-x: auto;}

/* 1뎁스 리스트 */
.gnb__list { display: flex; gap:0px;}
.gnb__list > li { flex: 0 0 203px; position: relative;}
.gnb__list > li > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  font-size:16px;
  font-weight: 700;
  color: var(--text-bold);
  padding:0  32px 0 12px;
  transition: color .2s ease;
}
.gnb__list > li:hover{}
.gnb__list > li > a:hover,
.gnb__list > li > a:focus-visible { color: var(--active); background: #FEF6F8;}
.gnb__list > li > a:hover::before,
.gnb__list > li > a:focus-visible::before {background: #F39BB1}
.gnb__list > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--active); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;}
.gnb__list > li > a::before { content: ""; position: absolute; left:0; width: 1px; height:28px; background: #C1C5CD}
.gnb__list > li > a:hover::after,
.gnb__list > li > a:focus-visible::after { transform: scaleX(1);}

/* 원본 2뎁스는 DOM 안에만 보관 (포털로 복사해서 띄움) */
.gnb__list .submenu { display: none; }

/* ===== 2뎁스 포털 레이어 ===== */
.submenu-portal {
  position: fixed;
  z-index: 9999;
  min-width: 198px;
  background: #fff;
  border: 1px solid #c1c5cd;
  border-radius: 5px;
  box-shadow: 0 8px 13px rgba(0, 0, 0, .18);
  font-size: 13px;
  color:var(--text-bold);

  /* 애니메이션 기본 상태(숨김) */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.submenu-portal.show { opacity: 1; transform: translateY(0); pointer-events: auto;}
.submenu-portal a { display: block; padding: 10px 12px; font-weight: 700; }
.submenu-portal a:hover {color:var(--active); background: #FDEDF1;}
.submenu-portal a:focus { color:var(--active); background: #FDEDF1;}

/* ===== 가로 스크롤바(있을 때만 슬림하게) ===== */
.gnb__viewport.is-scrollable {
  overflow-x: auto;
  scrollbar-width: thin;  /* Firefox */
  scrollbar-color: #c1c5cd transparent;
}
.gnb__viewport.is-scrollable::-webkit-scrollbar {
  height: 6px;   /* Chrome/Safari/Edge */
}
.gnb__viewport.is-scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.gnb__viewport.is-scrollable::-webkit-scrollbar-thumb {
  background: #c1c5cd;
  border-radius: 3px;
}
.gnb__viewport.is-scrollable::-webkit-scrollbar-thumb:hover {
  background: #9aa1ac;
}

/* ===== 접근성 보조 ===== */
.gnb__list > li > a:focus-visible,
.submenu-portal a:focus-visible {
  outline: 2px solid #7aa2ff;
  outline-offset: 2px;
}


/* ===== Hero ===== */
.hero{ position:relative; height:540px; overflow:hidden; }
.hero-img{ width:100%; height:100%; }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.31) 35%, transparent 100%);}
.hero-content{ position:absolute; inset: -8% 0 0 0; display:flex; flex-direction:column; justify-content:center; color:#fff;}
.hero h1{ font-family:'Inter'; font-size:40px; font-weight: 700; line-height:1.1; margin:0 0 6px 0; }
.hero p{ font-family:'Inter'; font-size:26px; font-weight: 500; margin:0; }


/* ===== Overlapped Services Card ===== */
.services-card{ position:relative; z-index:10; margin-top:-156px; margin-bottom:60px;}
.services-card .tab-wrap{  width: 784px; height: 48px; margin: 0 auto; font-size: 16px; margin-bottom: 20px}
.services-card .container{ background:var(--bg); border-radius:4px; box-shadow: 0px 10px 30px 0px rgba(87, 94, 107, 0.3);; padding:20px 0; }
.service-grid{ display:grid; grid-template-columns: repeat(7, 180px);justify-content: center; font-size: 16px;}
.service{display:flex; flex-direction:column; align-items:center; justify-content: center; gap:12px; border-radius:4px; text-align: center; color:var(--text); background:#fff; height:130px; position: relative; font-weight: 500;}
.service::before {content: ''; width:1px; height: 66px; background:#C1C5CD; border-radius:4px; position:absolute; top:50%; left:0; transform: translateY(-50%); }
.service:first-child::before {display: none}
.service.active{ outline:1.2px solid var(--brand-soft); box-shadow: 0 5px 10px #F8C8D4; z-index: 2;}


/* ===== Tab global design =====*/
.tab-wrap { display: flex; background-color: #EBEDEF; padding: 8px; border-radius: 4px; height: 52px; }
.tab-memu { flex-grow: 1; padding:8px 14px; cursor:pointer; color: #6E7687; font-size:16px; font-weight: 500;}
.tab-memu.is-active { outline:1.2px solid var(--brand-soft); box-shadow: 0 5px 10px #F8C8D4; background:#fff; font-weight:500; color: var(--active); border-radius: 2px; }
.panel { display:none; }
.panel.is-active { display:block; }

.tabs{ display:flex; gap:10px; justify-content:center; margin-bottom:10px; background:#40454F }
.tab{ background:#fff; color:var(--brand); border:1.5px solid var(--brand); height:36px; padding:0 18px; border-radius:4px; font-weight:800; cursor:pointer;}
.tab.active{box-shadow: 0 5px 10px #F8C8D4;}
.tabs.small .tab{ height:32px; padding:0 14px; font-weight:700; }
.blank {display:flex; flex-direction: column; height:240px; align-items: center;justify-content: center;}
.blank p {padding-top: 12px;font-size:24px; font-weight:500; color:var(--muted)}


/* ===== Main two-column ===== */
.main-grid{ display:grid; grid-template-columns: 1fr 1fr; margin-bottom: 60px;}
.main-grid .split-box { position: relative; max-height: 504px;}
.main-grid .split-box:first-child { padding-right:48px;}
.main-grid .split-box:nth-child(2) { padding-left:48px; border-left:1px solid #C1C5CD;}

.notice-head{ align-items:center; margin-bottom: 16px }
.notice-head h2 {font-size: 22px; font-weight: 700; }
.notice-head .tab-memu {font-size: 20px;}
.notice .tab-wrap{ height: 48px; font-size: 20px; font-weight: 500;}


.title-group {display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px;}
.more-link {width: 24px; height:24px; background: url('../images/main/bull-ic-r-arrow.png') no-repeat 0 0;}
.list{ margin:0; display:grid;}
.list li{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding: 18px 0;}
.list a{ color:var(--text); font-weight:500; font-size: 16px }
.list time{ color:var(--muted); font-size:16px; font-weight:400;}

.badge{display:inline-block; height:22px; line-height: 24px; padding:0 12px; border-radius:34px;font-weight:500; font-size:13px; margin-right: 12px}
.badge.info {color:#2563EB; border:1px solid #2563EB;}
.badge.warning {color:#EFA30B; border:1px solid #EFA30B;}
.badge.error  {color:#FA5A3A; border:1px solid #FA5A3A;}
.badge.success {color:#26B76E; border:1px solid #26B76E;}


/* ===== Survey ===== */
.survey{ background:#F2F2F2; overflow: hidden; height: 600px }
.survey .container.main-grid {padding-top: 48px;}
.survey h3 {font-size:22px; font-weight: 700; padding-bottom: 8px}
.survey .period {font-size:16px; font-weight: 500; color: #89909F;}
.survey .float-img {padding-top: 66px; float: right;}
.q-heading {display: inline-block; padding-top: 5px; font-size:20px; font-weight: 500;}
.progress-area {position:relative; padding: 9px 0 ; margin:16px 0}
.progress{ height:10px; border-radius:99px; background:#C1C5CD; overflow:hidden; margin:8px 0 12px; width: 689px;}
.progress__bar{height:100%; width:40%; background:#E8406A; border-radius:8px; transition:width .25s ease;}
.progress__count{ position:absolute; right:0; top:13px; font-size:16px; font-weight: 500; color:#89909F;}


.card{ background:#fff; border:1px solid #C1C5CD; border-radius:8px; padding:12px;}
.card-list{ }
.card-list li{ display:flex; align-items:center; gap:10px; padding:12px 8px; border-radius:2px; cursor:pointer; position:relative; font-size: 16px; line-height: 1.5;}
.card-list li + li{ border-top:1px solid #f1f3f6; }
.card-list li:hover{ background:#fff1f5; }
.card .btn-area { display: flex; justify-content: space-between; margin-top: 12px}
.survey .btn-submit {float:right; margin-top:12px}
.card-list li em {font-style: normal;}

/* ===== Partners Banner ===== */
.partners{ background:#fff; padding:48px 0;  }
.partners-inner{ height: 72px; display:grid; grid-template-columns: repeat(6, 1fr); gap:30px;}
.banner{display: flex; justify-content: center; align-items: center; border:1px solid #C1C5CD; border-radius:4px; background:#fff; }


/* ===== Footer ===== */
.footer{ background:#40454F; color:#C1C5CD; font-size: 16px; font-weight: 400;}
.footer h4 {font-size: 16px; font-weight: 600;}
.footer-grid:first-child {border-top: 0}
.footer-grid{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid #6E7687 }
.footer .links{ list-style:none; display:flex; margin:0; padding:0; }
.footer .links li {position: relative; width: 150px; padding: 22px 0 22px 30px; font-size: 15px;}
.footer .links li::after {content:''; width: 24px; height: 24px; background: url('../images/main/ic-arrow-link.png') no-repeat 0 0; border-radius:4px; position:absolute; top:50%; right:10px; transform: translateY(-50%);}
.footer .links li a{ display: block; color:#C1C5CD;}
.footer .meta {font-size: 14px; padding: 22px 0;}
.footer .meta div:nth-child(2) {padding-top: 2px}

/* ===== Legacy CSS Reset ===== */
a:link, a:visited, a:active {color: #40454F}

/* ===== Desktop-first fine-tuning for 1920 ===== */
/* @media (min-width: 1900px){
  :root{ --max: 1680px; }
  .hero{ height: 460px; }
}

@media (max-width: 1675px){
  :root{ --max:auto }

} */

/* ===== Optional responsiveness (태블릿↓ 간단 대응) ===== */
/* @media (max-width: 1440px){
  :root{ --max: 1680px; }
  .service-grid{ grid-template-columns: repeat(5, 1fr); }
  .main-grid{ grid-template-columns: 1fr; }
  .survey-inner{ flex-direction:column; align-items:flex-start; }
} */
/* @media (max-width: 960px){
  :root{ --max: 820px; --pad:16px; }
  .service-grid{ grid-template-columns: repeat(3, 1fr); }
  .logos{ grid-template-columns: repeat(4, 1fr); }
} */


/* BMS */
.bms { display:grid; grid-template-columns: 1fr minmax(0, 470px); column-gap: 48px; padding-top: 48px; margin-bottom: 48px}
.bms img.hero-img {display: block; max-width: 1089px; width: 100%; height: auto;}
.side {}
.side h1 {color: #AD153B; font-size: 32px; font-weight: 700;}
.side p.read { color:var(--muted); font-size: 20px; font-weight: 600; margin-top: 16px}
.side .label {font-size: 22px; font-weight: 700; margin-top: 80px; margin-bottom: 16px}
.quick-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; border:1px solid #A5ABB6;  border-radius: 4px; padding: 14px 16px; text-decoration: none; background: #fff; font-size: 20px; font-weight: 500;}
.quick-link + .quick-link {margin-top: 16px}
.quick-link:hover {border:1px solid #E8406A; box-shadow: 5px 5px 10px rgba(248, 203, 212, 0.5); }
.quick-link .more-link {width: 24px; height:24px; background: url('../images/new/ic-r-arrow.png') no-repeat 0 0;}
.quick-link.is-active .more-link{background: url('../images/new/ic-r-arrow-on.png') no-repeat 0 0;}

.notice > .notice-head {margin-bottom:0}
.side .left{display: flex; align-items: center; gap: 12px;}
.list.todo {display: flex; flex-direction: column; gap: 12px;}
.list.todo li {border:1px solid #C1C5CD; border-radius: 4px; padding:12px}
.list.todo .badge.late {background:#FEDADC; border:1px solid #FF6467; color:#A00E16}
.list.todo .badge.less {background:#FEF2F1; border:1px solid #FCBC6E; color:#CB3900}
.list.todo .badge.complete {background:#EEFCF5; border:1px solid #98D8B5; color:#008236}
.list.todo .badge.dday {background:#FEE4E8; border:1px solid #FFA3A4; color:#A00E16}
.list.todo .badge.more {background:#F1F7FE; border:1px solid #6EB7FC; color:#004ACB}
.list em { color:var(--muted); font-size:15px; font-weight:500; font-style: normal;padding-left: 10px}

.faq{ max-height: 340px; overflow-y: auto;}
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; gap:12px; padding:14px 12px; background:#fff; border:0; cursor:pointer; font-weight:500; text-align:left; position: relative}
.qmark {font-size:20px; color:var(--active)}
.faq-q .faq-arrow {width:20px; height:20px; position: absolute; right: 20px;}
.answer-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s ease; border-top: 1px solid #C1C5CD}
.faq-item.is-open .answer-wrap{ grid-template-rows:1fr; }
.answer{ overflow:hidden; background: #F5F5F5;}
.answer > .box{ margin:16px 20px; padding-left: 25px; position:relative; font-weight: 400; line-height: 28px; color: var(--text)}
.answer > .box::before{ content: ''; width:13px; height: 20px; background: url('../images/new/ic-reply.png') no-repeat 0 0; position:absolute; top:0; left:0;}


/* login */
.login-wrap {width: 300px; margin: 0 auto; height: 300px; margin: 20vh auto 0; }
.login-wrap h1 {font-size: 34px; font-weight: 700; margin-bottom: 16px; color:var(--active)}
.login-wrap span{font-size: 28px; font-weight: 700; color:var(--text-bold)}
.login-wrap label {display: block; font-weight: 500; font-size:16px; color:var(--text); margin-bottom: 10px}
.login-wrap button {margin-top: 30px; width: 100%}
.login-wrap .field + .field {margin-top: 16px;}