@charset "utf-8";

/* ===== 기존 유지 ===== */

.csp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 3px 3px 3px #23468221 !important;
}

.csp-header__inner{ display:flex; align-items:center; gap:60px; padding:10px 16px; }

.csp-brand{ margin:0; flex:0 0 auto; }
.csp-brand__link{ display:flex; align-items:center; gap:10px; }
.csp-brand__mark{ height:50px; width:auto; display:block; object-fit:contain; }

.csp-gnb{ flex:1 1 auto; }
.csp-gnb__list{ display:flex; gap:50px; justify-content:center;font-size: 18px;}
.csp-gnb__link{ display:inline-block; padding:8px 0; color:#212121; }
.csp-gnb__link:hover, .csp-gnb__link:focus{ color:#0a66c2; text-decoration:none; }

.csp-utils{ display:flex; gap:22px; align-items:flex-end; flex:0 0 auto; }
.csp-util{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:52px; text-align:center; white-space:nowrap; color:#212121; }
.csp-util__icon{ width:18px; height:18px; display:block; object-fit:contain; }
.csp-util__label{ font-size:12px; }

.csp-header a:focus-visible{ outline:2px solid #2b8cff; outline-offset:2px; border-radius:4px }

/* ===== 새로 추가 ===== */

/* .respon: 고정폭→유동폭 */
.respon{ max-width:1200px; width:100%; margin:0 auto; }
/* 밝은 배경용 (검정 아이콘) */
.csp-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 어두운 배경용 (흰색 아이콘) */
.csp-header.dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 1205px 이하: 간격·패딩 축소 */
@media (max-width: 1205px){
  .csp-header__inner{ gap:32px; padding:8px 12px; }
  .csp-gnb__list{ gap:32px; }
}

/* 햄버거 버튼(부트 offcanvas 트리거) 기본은 숨김 */
.csp-ham{ display:none; border:0; background:transparent; padding:6px; line-height:0; }
.csp-ham img{ width:24px; height:24px; display:block; }

/* 980px 이하: GNB/유틸 숨기고 햄버거 표시 → 사이드메뉴 사용 */
@media (max-width: 980px){
  .csp-gnb{ display:none; }
  .csp-utils{ display:none; }
  .csp-ham{ display:inline-flex; align-items:center; justify-content:center; margin-left:auto; }

  /* 오프캔버스 내 리스트 스타일 */
  .csp-drawer__nav{ list-style:none; padding-left:0; margin:0; }
  .csp-drawer__nav li + li{ border-top:1px solid #eee; }
  .csp-drawer__nav a{ display:block; padding:14px 4px; color:#212121; text-decoration:none; }
  .csp-drawer__section-title{ font-weight:700; margin:12px 0 6px; }
  .csp-brand__mark {
    height: 43px;
}
}

/* 720px 이하: 더 촘촘하게 */
@media (max-width: 720px){
  .csp-header__inner{ gap:16px; }
}
.progrmCldrHero{
  position: relative;
  overflow: hidden;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #f3f5f7;
  background-image: url("/images/hmpg/common/background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  padding: 0 16px;
}

.progrmCldrHero .heroInner{
  width: 100%;
  max-width: 1200px;
  text-align: center;
}

.progrmCldrHero .heroTitle{
  margin: 0;
  font-size: 40px;
  font-weight: 600;
}

#location.progrmCldrHero .heroBreadcrumb{
  list-style: none;
  padding: 0;
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #7f8690;
}

#location.progrmCldrHero .heroBreadcrumb li + li::before{
  content: "›";
  opacity: .5;
  margin-right: 10px;
}


.progrmCldrHero .heroBreadcrumb a{
  color: inherit;
  text-decoration: none;
}

.progrmCldrHero .heroBreadcrumb .sep{ opacity: .5; }

.progrmCldrHero .bcHome{
  display: inline-flex;
  align-items: center;
  transform: translateY(1px);
}

@media (max-width: 980px){
  .progrmCldrHero{

    background-position:
      left 20px top 140px,
      left 50% top 24px;
    background-size:
      180px auto,
      140px auto;
    padding: 56px 0 42px;
  }
  .progrmCldrHero .heroTitle{ font-size: 32px; }
}