<style>
:root{
  --navy:#163a70;
  --navy-dark:#10294d;
  --blue:#2458a6;
  --blue-soft:#edf3fb;
  --light:#f7f8fa;
  --line:#d8e3ef;
  --text:#1f2937;
  --sub:#5f6b7a;
  --white:#ffffff;
  --shadow:none;
  --shadow-lg:none;
  --radius:8px;
  --container:1280px;
  --primary:#2458a6;
  --primary-light:#edf3fb;
  --primary-dark:#113f74;
  --bg:#f6f9fc;
  --service:#318bdc;
  --service-dark:#2471b7;
  --top-h:48px;
  --nav-h:84px;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

body{
  min-height:100vh;
  font-family:'Noto Sans KR', sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.5;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}

ul{
  margin:0;
  padding:0;
  list-style:none;
}

.container{
  width:min(100% - 32px, var(--container));
  margin:0 auto;
}


/* ========================================
   서브 비주얼
======================================== */

.sub-hero{
  position:relative;
  padding:50px 0 30px;
  color:#fff;
  overflow:hidden;
  background:
    linear-gradient(
      120deg,
      rgba(22,58,112,.95),
      rgba(36,88,166,.85)
    ),
    url('https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?q=80&w=1600&auto=format&fit=crop')
    center / cover no-repeat;
}

.sub-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255,255,255,.15),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(255,255,255,.08),
      transparent 40%
    );
  pointer-events:none;
}

.sub-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:80px;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(0,0,0,.15)
  );
}

.sub-hero .container{
  position:relative;
  z-index:2;
  max-width:1200px;
  text-align:left;
}

.sub-hero h1{
  margin:0 0 14px;
  font-size:44px;
  font-weight:800;
  letter-spacing:-0.04em;
}

.sub-hero h1::after{
  content:"";
  display:block;
  width:40px;
  height:3px;
  margin-top:14px;
  background:#fff;
  opacity:.7;
}

.sub-hero p{
  margin:0 0 6px;
  font-size:17px;
  color:rgba(255,255,255,.85);
  letter-spacing:-0.01em;
}


/* ========================================
   브레드크럼
======================================== */

.breadcrumb-wrap{
  display:flex;
  justify-content:center;
  margin-top:30px;
}

.breadcrumb-box{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 20px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  color:#fff;
  font-size:14px;
}

.breadcrumb-box i{
  font-size:13px;
  opacity:.8;
}


/* ========================================
   본문 레이아웃
======================================== */

.sub-layout{
  padding:50px 0 80px;
}

.sub-grid{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  gap:30px;
  align-items:start;
}


/* ========================================
   왼쪽 메뉴
======================================== */

.lnb{
  position:sticky;
  top:30px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.lnb-head{
  padding:24px 24px 20px;
  background:linear-gradient(
    135deg,
    var(--primary),
    #2458a6
  );
  color:#fff;
}

.lnb-head h2{
  margin:0;
  font-size:24px;
  font-weight:800;
  letter-spacing:-0.02em;
}

.lnb-list{
  padding:14px;
}

.lnb-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px;
  border-radius:14px;
  color:#334155;
  font-size:16px;
  font-weight:600;
  transition:.22s ease;
}

.lnb-list a:hover{
  background:#f4f7fb;
  color:var(--primary);
}

.lnb-list a.active{
  background:#edf3fb;
  color:var(--primary);
  font-weight:800;
}

.lnb-list a i{
  font-size:13px;
  opacity:.8;
}


/* ========================================
   콘텐츠 영역
======================================== */

.content-area{
  min-width:0;
}

.page-card{
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}

.page-card-top{
  padding:34px 38px 20px;
  border-bottom:1px solid #eef2f7;
  background:linear-gradient(
    to bottom,
    #fbfcfe,
    #fff
  );
}

.page-title{
  margin:0;
  font-size:32px;
  font-weight:800;
  letter-spacing:-0.03em;
  color:#172554;
}

.page-desc{
  margin:10px 0 0;
  color:var(--sub);
  font-size:15px;
}

.page-card-body{
  padding:40px 38px 46px;
}


/* ========================================
   찾아오는 길 상단 안내
======================================== */

.location-intro{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:30px;
  padding:30px 32px;
  border:1px solid #e3ebf5;
  border-radius:24px;
  background:linear-gradient(
    135deg,
    #f7faff,
    #eef4fb
  );
}

.location-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 88px;
  width:88px;
  height:88px;
  border-radius:50%;
  background:#fff;
  color:var(--primary);
  font-size:34px;
  box-shadow:0 8px 20px rgba(22,58,112,.08);
}

.location-icon i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  line-height:1;
}

.location-icon i::before{
  display:block;
  line-height:1;
}

.location-copy{
  min-width:0;
}

.location-copy h3{
  margin:0 0 8px;
  color:#0f2b52;
  font-size:28px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:-0.03em;
}

.location-copy p{
  margin:0;
  color:#556070;
  font-size:16px;
}


/* ========================================
   지도
======================================== */

.map-wrap{
  margin-bottom:26px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e5ebf2;
  border-radius:24px;
}

.map-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:18px 22px;
  border-bottom:1px solid #edf2f7;
  background:#f8fbff;
}

.map-head h4{
  margin:0;
  color:#111827;
  font-size:20px;
  font-weight:800;
}

.map-head span{
  color:#64748b;
  font-size:14px;
}

.map-box iframe{
  display:block;
  width:100%;
  height:460px;
  border:0;
}


/* ========================================
   기본 정보 / 교통 안내 배치
======================================== */

.location-info-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:22px;
  margin-top:8px;
}

.info-card{
  min-width:0;
  padding:28px 26px;
  background:#fff;
  border:1px solid #e5ebf2;
  border-radius:22px;
}

.info-card h4{
  margin:0 0 20px;
  color:#111827;
  font-size:22px;
  font-weight:800;
  letter-spacing:-0.02em;
}


/* ========================================
   기본 정보 목록
======================================== */

.info-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

.info-item{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-width:0;
  padding:16px 0;
  border-bottom:1px dashed #dde5ee;
}

.info-item:first-child{
  padding-top:0;
}

.info-item:last-child{
  padding-bottom:0;
  border-bottom:0;
}


/* 아이콘 배경 박스 */
.info-badge{
  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 42px;
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;

  margin:0;
  padding:0;

  border-radius:12px;
  background:#edf3fb;
  color:var(--primary);

  font-size:18px;
  line-height:1;

  box-sizing:border-box;
}


/* Bootstrap 아이콘 중앙 정렬 */
.info-badge i{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  height:100%;

  margin:0;
  padding:0;

  font-size:18px;
  line-height:1;
  text-align:center;
  vertical-align:middle;
}

.info-badge i::before{
  display:block;
  margin:0;
  padding:0;
  line-height:1;
  vertical-align:middle;
}


/* 글자 영역 */
.info-text{
  flex:1;
  min-width:0;
}

.info-text .label{
  display:block;
  margin:0 0 4px;
  color:#64748b;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
}

.info-text .value{
  margin:0;
  color:#111827;
  font-size:17px;
  font-weight:800;
  line-height:1.6;
  word-break:keep-all;
  overflow-wrap:break-word;
}

.info-text .value a{
  color:inherit;
  text-decoration:none;
}


/* ========================================
   교통 안내
======================================== */

.traffic-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.traffic-item{
  padding:18px;
  border:1px solid #e7edf4;
  border-radius:18px;
  background:#f8fafc;
}

.traffic-item h5{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  color:#0f2b52;
  font-size:17px;
  font-weight:800;
}

.traffic-item h5 i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.traffic-item h5 i::before{
  display:block;
  line-height:1;
}

.traffic-item p{
  margin:0;
  color:#475569;
  font-size:15px;
  line-height:1.8;
  word-break:keep-all;
}


/* ========================================
   PC
======================================== */

@media (min-width:992px){
  .breadcrumb-wrap{
    justify-content:flex-end;
  }
}


/* ========================================
   태블릿 및 모바일
======================================== */

@media (max-width:991px){
  .sub-hero{
    padding:20px 0 28px;
  }

  .sub-hero h1{
    font-size:32px;
  }

  .sub-hero p{
    font-size:16px;
  }

  .breadcrumb-wrap{
    margin-top:45px;
  }

  .breadcrumb-box{
    padding:9px 16px;
    font-size:14px;
  }

  .sub-grid{
    grid-template-columns:1fr;
    gap:20px;
  }

  .lnb{
    position:static;
    overflow:hidden;
  }

  .lnb-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    border-radius:16px;
    background:#163a70;
    color:#fff;
    cursor:pointer;
  }

  .lnb-head i{
    transition:.3s;
  }

  .lnb.open .lnb-head i{
    transform:rotate(180deg);
  }

  .lnb-list{
    display:none;
    padding:10px;
  }

  .lnb.open .lnb-list{
    display:block;
  }

  .page-card-top{
    padding:26px 22px 18px;
  }

  .page-title{
    font-size:28px;
  }

  .page-card-body{
    padding:24px 22px 30px;
  }

  .location-intro{
    flex-direction:column;
    align-items:flex-start;
    padding:24px;
  }

  .location-copy h3{
    font-size:24px;
  }

  .map-box iframe{
    height:320px;
  }

  .location-info-grid{
    grid-template-columns:1fr;
  }

  .info-item{
    align-items:center;
  }

  .info-badge{
    flex:0 0 42px;
    width:42px;
    height:42px;
    min-width:42px;
    min-height:42px;
  }
}


/* ========================================
   작은 모바일
======================================== */

@media (max-width:576px){
  .container{
    width:min(100% - 20px, var(--container));
  }

  .sub-hero h1{
    font-size:28px;
  }

  .page-card{
    border-radius:18px;
  }

  .page-card-top{
    padding:22px 18px 16px;
  }

  .page-title{
    font-size:25px;
  }

  .page-desc{
    font-size:14px;
    line-height:1.7;
  }

  .page-card-body{
    padding:20px 18px 24px;
  }

  .location-intro{
    gap:18px;
    padding:20px;
    border-radius:18px;
  }

  .location-icon{
    flex-basis:70px;
    width:70px;
    height:70px;
    font-size:28px;
  }

  .location-copy h3{
    font-size:21px;
  }

  .location-copy p{
    font-size:14px;
    line-height:1.7;
  }

  .map-wrap{
    border-radius:18px;
  }

  .map-head{
    align-items:flex-start;
    flex-direction:column;
    padding:16px 18px;
  }

  .map-head h4{
    font-size:18px;
  }

  .map-box iframe{
    height:280px;
  }

  .info-card{
    padding:22px 18px;
    border-radius:18px;
  }

  .info-card h4{
    margin-bottom:16px;
    font-size:20px;
  }

  .info-item{
    align-items:center;
    gap:12px;
    padding:14px 0;
  }

  .info-badge{
    flex:0 0 40px;
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    border-radius:11px;
  }

  .info-badge i{
    font-size:17px;
  }

  .info-text .label{
    font-size:13px;
  }

  .info-text .value{
    font-size:15px;
    line-height:1.6;
    word-break:break-word;
  }

  .traffic-item{
    padding:16px;
    border-radius:15px;
  }

  .traffic-item h5{
    font-size:16px;
  }

  .traffic-item p{
    font-size:14px;
    line-height:1.7;
  }
}


.info-badge{
  display:flex;
  align-items:center;
  justify-content:center;
}

.info-badge i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  line-height:1;
}

.info-badge i::before{
  display:block;
  line-height:1;
}


/* ========================================
   기본 정보 최종 수정
   반드시 CSS 가장 아래에 배치
======================================== */

.info-card .info-list{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  width:100% !important;
  height:auto !important;
  overflow:visible !important;
}

/* 정보 한 줄 */
.info-card .info-item{
  position:relative !important;

  display:grid !important;
  grid-template-columns:64px minmax(0, 1fr) !important;
  align-items:center !important;
  column-gap:20px !important;

  width:100% !important;
  min-height:104px !important;
  height:auto !important;

  margin:0 !important;
  padding:20px 24px !important;

  background:#f7f9fc !important;
  border:1px solid #e1e8f0 !important;
  border-radius:24px !important;

  box-sizing:border-box !important;
  overflow:visible !important;
}

/* 첫 번째와 마지막 항목에 적용된 기존 여백 제거 */
.info-card .info-item:first-child,
.info-card .info-item:last-child{
  padding:20px 24px !important;
  border:1px solid #e1e8f0 !important;
}

/* 아이콘 배경 */
.info-card .info-badge{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  align-self:center !important;
  justify-self:center !important;

  width:64px !important;
  height:64px !important;
  min-width:64px !important;
  min-height:64px !important;

  margin:0 !important;
  padding:0 !important;

  background:#edf4fd !important;
  color:#0054a6 !important;
  border:0 !important;
  border-radius:18px !important;

  font-size:27px !important;
  line-height:1 !important;

  box-sizing:border-box !important;
  transform:none !important;
}

/* Bootstrap 아이콘 */
.info-card .info-badge i{
  position:static !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  height:100% !important;

  margin:0 !important;
  padding:0 !important;

  font-size:27px !important;
  line-height:1 !important;
  text-align:center !important;
  vertical-align:middle !important;

  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
}

/* 실제 Bootstrap 아이콘 문자 */
.info-card .info-badge i::before{
  display:block !important;
  width:auto !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  font-size:inherit !important;
  line-height:1 !important;
  vertical-align:middle !important;

  transform:none !important;
}

/* 글자 영역 */
.info-card .info-text{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* 항목 제목 */
.info-card .info-text .label{
  display:block !important;

  margin:0 0 7px !important;
  padding:0 !important;

  color:#64748b !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.3 !important;
}

/* 항목 내용 */
.info-card .info-text .value{
  display:block !important;

  margin:0 !important;
  padding:0 !important;

  color:#07172f !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.5 !important;

  word-break:keep-all !important;
  overflow-wrap:break-word !important;
}

/* 전화번호 및 이메일 링크 */
.info-card .info-text .value a{
  color:inherit !important;
  text-decoration:none !important;
}



@media (max-width:576px){

  .info-card .info-list{
    gap:10px !important;
  }

  .info-card .info-item{
    grid-template-columns:48px minmax(0, 1fr) !important;
    column-gap:14px !important;

    min-height:86px !important;
    padding:15px 16px !important;

    border-radius:18px !important;
  }

  .info-card .info-item:first-child,
  .info-card .info-item:last-child{
    padding:15px 16px !important;
  }

  .info-card .info-badge{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;

    border-radius:14px !important;
  }

  .info-card .info-badge i{
    font-size:21px !important;
  }

  .info-card .info-text .label{
    margin-bottom:4px !important;
    font-size:14px !important;
  }

  .info-card .info-text .value{
    font-size:16px !important;
    line-height:1.5 !important;
    word-break:break-word !important;
  }
}
</style>