#content .theme__latest.theme__latest__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12rem;
}

#content .theme__latest.theme__latest__list .theme__list__title {
  display: block;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2.4rem;
}

#content .theme__latest.theme__latest__list .theme__list__title a {
  font-size: inherit;
  font-weight: inherit;
}

#content .theme__latest.theme__latest__list .theme__list__desc {
  margin-bottom: 4rem;
}

#content .theme__latest.theme__latest__list img {
  width: 100%;
  height: auto;
  margin-bottom: 2.4rem;
  outline: 1px solid var(--line-color);
}

/* ==========================================================================
   Header - 헤더
   ------------------------------------------------------------------
   메인(.ov) : 히어로 사진 한가운데(상하좌우 가운데)에 얹힙니다.
               로고 아래 메뉴가 한 줄로 늘어서며 글자는 흰색입니다.
   스크롤(.scr) : 화면 맨 위로 올라가 흰 띠가 됩니다. (로고 왼쪽 · 메뉴 오른쪽)
   서브페이지 : 처음부터 흰 띠입니다.
   ========================================================================== */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;

  background: var(--white-color);
  border-bottom: 1px solid var(--line-color);
}

/* ── 메인 : 사진 한가운데 ─────────────────────────────────── */
#header.ov {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  /* 히어로 높이(첫 화면 전체)만큼 잡아 그 안에서 세로 가운데로 맞춘다.
     값은 css/layout.css 의 :root { --hero-h } 한 곳에서 관리합니다. */
  height: var(--hero-h, 100vh);

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border-bottom: 0;

  /* 사진 위 도트 등을 가리지 않도록 헤더 판 자체는 클릭을 통과시킨다 */
  pointer-events: none;
}

#header.ov .hd_wrap {
  pointer-events: auto;
}

/* ── 스크롤 후 : 위로 올라와 흰 띠 ────────────────────────── */
#header.ov.scr {
  position: fixed;
  top: 0;
  height: auto;

  display: block;
  background: var(--white-color);
  border-bottom: 1px solid var(--line-color);
  pointer-events: auto;

  animation: hd_down 0.45s ease both;
}

/* 위에서 미끄러져 내려오는 동작 */
@keyframes hd_down {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#header .hd_wrap {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  height: 9.6rem;
}

/* 가운데 상태 : 로고 → 메뉴 순서로 세로로 쌓는다 */
#header.ov:not(.scr) .hd_wrap {
  flex-direction: column;
  justify-content: center;
  gap: 3.6rem;
  height: auto;
  max-width: 100%;
}

/* ── 로고 ─────────────────────────────────────────────────── */
#header h1 {
  flex: 0 0 auto;
  white-space: nowrap;
  user-select: none;
}

/* 로고 상자는 원본 비율(180 x 56)에 맞춰 둡니다.
   비율이 어긋나면 contain 때문에 양옆에 빈 공간이 생깁니다. */
#header h1 a {
  display: block;
  width: 150px;
  height: 46px;

  background-image: url(../images/logo.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  transition: width 0.3s, height 0.3s;
}

/* 가운데 상태 : 로고를 살짝만 키우고 흰색으로 (원본 비율 180x56 유지) */
#header.ov:not(.scr) h1 a {
  width: 200px;
  height: 62px;

  background-image: url(../images/logo_w.svg);
  background-position: center center;
}

/* 스크롤 후(메인) : 메뉴는 가운데 그대로, 로고는 왼쪽 끝에 작게 둔다.
   왼쪽 2.4rem 는 오른쪽 위 로그인 아이콘(right: 2.4rem)과 대칭인 자리다.
   (1024px 이하의 로고는 아래 모바일 블록에서 따로 처리합니다) */
@media (min-width: 1025px) {
  #header.ov.scr h1 {
    position: absolute;
    left: 2.4rem;
    top: 50%;
    transform: translateY(-50%);
  }

  #header.ov.scr h1 a {
    width: 116px;
    height: 36px;
  }
}

#header.ov.scr .gnb_container {
  justify-content: center;
}

/* ── 메뉴 ─────────────────────────────────────────────────── */
#header .gnb_container {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

/* 가운데 상태 : 메뉴도 가운데로 */
#header.ov:not(.scr) .gnb_container {
  flex: 0 0 auto;
  justify-content: center;
}

#header .gnb {
  display: flex;
  align-items: center;
}

#header .gnb > ul {
  display: flex;
  align-items: center;
  gap: 3.2rem;
}

#header.ov:not(.scr) .gnb > ul {
  gap: 4.4rem;
}

#header .gnb > ul > li {
  position: relative;
}

#header .gnb > ul > li > a {
  position: relative;
  display: block;
  line-height: 9.6rem;

  /* 메뉴는 한글이므로 명조 그대로, 자간은 살짝만 벌린다 */
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--strong-color);
  white-space: nowrap;
  transition: color 0.3s, opacity 0.3s;
}

/* 가운데 상태 : 사진 위이므로 흰 글씨. 크기는 흰 띠(1.7rem)보다 한 단계 작게 */
#header.ov:not(.scr) .gnb > ul > li > a {
  line-height: 1.6;
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  color: var(--white-color);

  /* 그림자를 두 겹으로 깐다.
     앞의 3px 은 글자 가장자리를 또렷하게 세우고,
     뒤의 24px 은 글자 뒤에 넓고 옅은 그늘을 만들어 밝은 사진과 떼어 놓는다.
     (사진 자체의 그늘은 main_hero.html 의 #main_hero::after 에 있습니다) */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 24px rgba(0, 0, 0, 0.45);
}

#header .gnb > ul > li > a:hover,
#header .gnb > ul > li > a.active {
  color: var(--point-dark);
}

/* 사진 위에서는 흐리게 하는 대신 밑줄로 표시한다.
   밝은 사진에서 opacity 를 낮추면 글자가 아예 사라집니다. */
#header.ov:not(.scr) .gnb > ul > li > a:hover,
#header.ov:not(.scr) .gnb > ul > li > a.active {
  color: var(--white-color);
  opacity: 1;
}

#header.ov:not(.scr) .gnb > ul > li > a:hover::after {
  transform: scaleX(1);
}

/* 현재 보고 있는 섹션 : 글자 아래 골드 1px */
#header .gnb > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.2rem;

  height: 1px;
  background: var(--point-color);

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s;
}

#header.ov:not(.scr) .gnb > ul > li > a::after {
  bottom: -0.6rem;
  background: var(--white-color);
}

#header .gnb > ul > li > a.active::after {
  transform: scaleX(1);
}

/* ── 첫 화면 헤더 : 사진 위에서 읽히게 만드는 장치 ──────────────
   흰 로고와 흰 메뉴가 사진에 묻히지 않도록,
   ① 로고에 옅은 그림자를 깔고
   ② 로고와 메뉴 사이에 가는 흰 선을 그어 메뉴 줄을 분명히 합니다.
   (사진 쪽 그늘은 main_html/main_hero.html 의 #main_hero::after 에 있습니다)

   ※ 반드시 1025px 이상에서만 적용합니다.
     좁은 화면의 메뉴는 흰 판이라 여기 규칙이 새어 들어가면
     .gnb 의 padding 이 덮여 모바일 메뉴가 깨집니다.
     (#header.ov:not(.scr) .gnb 가 #header .gnb 보다 점수가 높습니다) */
@media (min-width: 1025px) {
  #header.ov:not(.scr) h1 a {
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.45));
  }

  /* 선을 넣는 만큼 로고와 메뉴 사이 간격을 줄여 균형을 맞춘다 */
  #header.ov:not(.scr) .hd_wrap {
    gap: 1.6rem;
  }

  /* 로고와 메뉴 사이 전통 문양 구분 장식 (별도 이미지 파일 없이 CSS 안에 담았습니다)
     · 가운데 : 능문(마름모 겹) + 양옆 점 — 한복 옷감에 흔한 문양을 흰색으로 옅게
     · 양옆   : 끝으로 갈수록 옅어지는 1px 흰 선이 메뉴 폭보다 8rem 씩 길게 이어진다
     (max-width 는 좁은 PC 화면에서 화면 밖으로 나가지 않게 하는 안전장치) */
  #header.ov:not(.scr) .gnb {
    position: relative;
    padding-top: 2.8rem;
  }

  #header.ov:not(.scr) .gnb::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);

    width: calc(100% + 16rem);
    max-width: 92vw;
    height: 1.2rem;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M24 1.5 29 6 24 10.5 19 6Z' stroke-opacity='.55'/%3E%3Cpath d='M24 4 26 6 24 8 22 6Z' stroke-opacity='.35'/%3E%3C/g%3E%3Ccircle cx='10' cy='6' r='1.2' fill='%23fff' fill-opacity='.45'/%3E%3Ccircle cx='38' cy='6' r='1.2' fill='%23fff' fill-opacity='.45'/%3E%3C/svg%3E") center / auto 1.2rem no-repeat,
      linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)) left center / calc(50% - 3.2rem) 1px no-repeat,
      linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)) right center / calc(50% - 3.2rem) 1px no-repeat;
  }
}

/* 대표전화 · 주소는 푸터에 있으므로 PC 에서는 감춘다 (모바일 메뉴용) */
#header .adm {
  display: none;
}

/* ── 2뎁스 ────────────────────────────────────────────────── */
#header .gnb > ul > li ul {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 3;

  transform: translate(-50%, 12px);
  background: var(--white-color);
  border: 1px solid var(--line-color);

  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
}

#header .gnb > ul > li:hover ul,
#header .gnb > ul > li:focus-within ul {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
}

#header .gnb > ul > li ul li a {
  display: block;
  padding: 0 2.8rem;
  line-height: 4.2rem;
  white-space: nowrap;
  color: var(--text-color);
  min-width: 16rem;

  font-size: 1.6rem;
  letter-spacing: 0.04em;
}

#header .gnb > ul > li ul li a:hover {
  background: var(--secondary-color);
  color: var(--point-dark);
}

#header .gnb > ul > li ul li ~ li a {
  border-top: 1px solid var(--line-color);
}

/* ==========================================================================
   Mobile Menu Button - 햄버거 (PC 에서는 감춥니다)
   ========================================================================== */
/* PC 에서는 메뉴가 항상 보이므로 감추고, 1024px 이하에서만 노출한다 */
.mbtn {
  display: none;
  position: fixed;
  top: 2.6rem;
  right: 1.6rem;
  z-index: 1002;

  align-items: center;

  width: 26px;
  height: 20px;

  background: none;
  border: 0;
  font-size: 0;
  cursor: pointer;
}

.mbtn::before,
.mbtn::after,
.mbtn span::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;

  height: 1px;
  background: var(--text-color);
  transition: 0.3s;
}

.mbtn::before {
  top: 0;
}

.mbtn span::before {
  top: 9px;
}

.mbtn::after {
  bottom: 0;
}

.mbtn.on::before {
  top: 9px;
  transform: rotate(45deg);
}

.mbtn.on span::before {
  opacity: 0;
}

.mbtn.on::after {
  bottom: 10px;
  transform: rotate(-45deg);
}

@media (max-width: 1024px) {

  /* 좁은 화면에서는 메인도 위쪽 고정 띠로 통일한다 */
  #header.ov,
  #header.ov:not(.scr),
  #header.ov.scr {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: auto;

    display: block;
    background: var(--white-color);
    border-bottom: 1px solid var(--line-color);
    pointer-events: auto;

    /* 스크롤할 때마다 다시 재생되면 깜빡여 보이므로 끈다 */
    animation: none;
  }

  /* 가운데 정렬을 되돌린다 */
  #header.ov:not(.scr) .hd_wrap {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0;
  }

  #header.ov:not(.scr) h1 a {
    background-image: url(../images/logo.svg);
    background-position: left center;
  }

  #header {
    right: 0;
  }

  #header .hd_wrap,
  #header.ov:not(.scr) .hd_wrap {
    height: 7.2rem;
  }

  #header h1 a,
  #header.ov:not(.scr) h1 a {
    width: 116px;
    height: 36px;
  }

  /* 좁은 화면에서는 로고를 계속 보여 준다 (홈으로 가는 유일한 길) */
  #header.ov.scr h1 {
    display: block;
  }

  /* 좁은 화면에서만 햄버거를 노출한다 */
  .mbtn {
    display: flex;
  }

  /* 모바일에서는 메뉴가 화면 전체를 덮는다 */
  #header .gnb_container,
  #header.ov:not(.scr) .gnb_container {
    position: fixed;
    top: 0;
    left: -200%;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    width: 100%;
    height: 100%;
    padding: 0;

    background: var(--background-color);
  }

  /* 중요 : 위 규칙(#header.ov:not(.scr) .gnb_container)이 선택자 점수가 높아
     그냥 .on 만 쓰면 left:-200% 를 이기지 못한다. 같은 형태로 맞춰 준다. */
  #header .gnb_container.on,
  #header.ov:not(.scr) .gnb_container.on,
  #header.ov.scr .gnb_container.on {
    left: 0;
  }

  #header .gnb {
    flex: 1 1 auto;

    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: 0;

    width: 100%;
    height: 100%;
    padding: 10.4rem 3.2rem 4rem 3.2rem;
    overflow-y: auto;
  }

  /* 중요 : 메인 첫 화면(.ov:not(.scr))의 gap 4.4rem 이 선택자 점수가 높아
     그냥 쓰면 최상단에서 메뉴를 열었을 때 항목 사이가 벌어진다. 같은 형태로 맞춰 준다. */
  #header .gnb > ul,
  #header.ov:not(.scr) .gnb > ul {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  #header .gnb > ul > li ~ li {
    border-top: 1px solid var(--line-color);
  }

  #header .gnb > ul > li > a,
  #header.ov:not(.scr) .gnb > ul > li > a {
    line-height: 6.4rem;
    font-size: 2rem;
    letter-spacing: 0.06em;
    color: var(--text-color);
    text-shadow: none;
  }

  #header .gnb > ul > li > a::after {
    display: none;
  }

  #header .gnb > ul > li ul {
    position: static;
    transform: none;
    border: 0;
    opacity: 1;
    visibility: visible;
    transition: none;
    display: none;
  }

  #header .gnb > ul > li:hover ul,
  #header .gnb > ul > li:focus-within ul {
    transform: none;
    display: none;
  }

  #header .gnb > ul > li ul li a {
    padding: 0 0 0 1.6rem;
    line-height: 4.4rem;
    color: var(--text-color-sub);
    background: none;
    border-top: 1px solid var(--line-color);
  }

  /* 대표 전화 · 주소 : 모바일 메뉴 맨 아래 */
  #header .adm {
    order: 1;
    display: block;
    margin-top: 4.8rem;
    padding-top: 2.8rem;
    border-top: 1px solid var(--line-color);
  }

  #header .hd_tel {
    display: block;
    font-family: var(--font-en);
    font-size: 2.4rem;
    letter-spacing: 0.06em;
    color: var(--text-color);
  }

  #header .hd_addr {
    margin-top: 1rem;
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--text-color-sub);
  }
}

/* ==========================================================================
   Side Rail - 오른쪽 세로 버튼 (_access.tail.side.php)
   ------------------------------------------------------------------
   화면을 가로지르는 긴 띠가 아니라, 오른쪽 아래에 조용히 떠 있는
   작은 세로 묶음입니다. 배경도 테두리도 없습니다.
     위에서부터 : 상담문의 · 카카오톡 → PAGE TOP
   좁은 화면(1024px 이하)에서는 동그란 버튼 묶음으로 오른쪽 아래에 둡니다.
   (맨 위로 버튼도 함께 남습니다)
   ========================================================================== */
#side_rail {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 998;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}

/* ── 상담문의 · 카카오톡 ──────────────────────────────────── */
#side_rail .rail_cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

#side_rail .rail_cta a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 1px solid var(--point-color);
  background: var(--white-color);

  transition: background 0.3s, border-color 0.3s;
}

#side_rail .rail_cta .icon {
  width: 1.7rem;
  height: 1.7rem;
  stroke: var(--point-color);
  stroke-width: 1.2;
  transition: stroke 0.3s;
}

#side_rail .rail_cta a:hover {
  background: var(--point-color);
}

#side_rail .rail_cta a:hover .icon {
  stroke: var(--white-color);
}

/* 카카오톡만 노란 바탕 */
#side_rail .rail_cta a.kakao {
  background: #fee500;
  border-color: #fee500;
}

#side_rail .rail_cta a.kakao .icon {
  stroke: #3c1e1e;
}

#side_rail .rail_cta a.kakao:hover {
  filter: brightness(0.94);
}

/* ── 맨 위로 (화살표 아이콘) ──────────────────────────────── */
#side_rail .rail_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;

  padding: 0;
  color: var(--text-color-sub);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.3s;
}

/* 아이콘 위에 붙는 짧은 세로선 (위쪽을 가리키는 안내) */
#side_rail .rail_top::before {
  content: "";
  display: block;
  width: 1px;
  height: 3.2rem;
  background: var(--line-color);
}

#side_rail .rail_top .icon {
  width: 2rem;
  height: 2rem;
  stroke: currentColor;
  stroke-width: 1.2;
}

#side_rail .rail_top:hover {
  color: var(--point-dark);
}

@media (max-width: 1024px) {

  /* 좁은 화면에서는 엄지가 닿는 오른쪽 아래에 둔다 */
  #side_rail {
    right: 1.6rem;
    top: auto;
    bottom: 2rem;
    transform: none;
    gap: 1rem;
  }

  /* 맨 위로 버튼도 남긴다.
     세로 안내선만 걷어내고 상담 버튼과 같은 동그란 모양으로 맞춘다 */
  #side_rail .rail_top {
    justify-content: center;
    gap: 0;

    width: 4.8rem;
    height: 4.8rem;
    border: 1px solid var(--line-color);
    border-radius: 50%;
    background: var(--white-color);
    box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.12);
  }

  #side_rail .rail_top::before {
    display: none;
  }

  #side_rail .rail_cta a {
    width: 4.8rem;
    height: 4.8rem;
    box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.12);
  }

  #side_rail .rail_cta .icon {
    width: 1.8rem;
    height: 1.8rem;
  }
}

/* ==========================================================================
   Sub Content - 서브 콘텐츠 영역
   ========================================================================== */
.sub_content {
  min-height: 60rem;
  margin-top: 18rem;
  margin-bottom: 14rem;
}

.sub_content .page_title {
  margin-bottom: 4.8rem;
  text-align: center;
}

.sub_content .page_title h3 strong {
  font-size: 2.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.sub_content .content p {
  font-size: 1.5rem;
  line-height: 2.1;
  color: var(--text-color-sub);
}

/* ==========================================================================
   Footer - 푸터
   ------------------------------------------------------------------
   가운데 정렬. 로고 → 연락처 한 줄 → 저작권 순서로 조용하게 놓습니다.
   ========================================================================== */
#footer {
  padding: 8rem 0 6.4rem;
  background: var(--footerbg-color);
  border-top: 1px solid var(--line-color);
  color: var(--text-color-sub);
  font-size: 1.3rem;
  line-height: 2;
  text-align: center;
}

/* 푸터만 본문(1200px)보다 넓게 씁니다.
   주소부터 이메일까지가 한 줄에 들어가도록 여유를 준 것입니다.
   좁아지면 max-width 가 자동으로 화면 폭에 맞춰집니다. */
#footer .ft_wrap {
  max-width: 1600px;
}

/* ── 로고 ─────────────────────────────────────────────────── */
#footer .ft_logo {
  margin-bottom: 3.2rem;
}

#footer .ft_logo img {
  display: inline-block;
  width: 168px;
  max-width: 100%;
  height: auto;
}

#footer .ft_logo .ft_sub {
  display: block;
  margin-top: 1rem;

  /* 한글이라 자간을 0.34em → 0.2em 으로 좁혔습니다.
     너무 벌리면 낱글자로 흩어져 읽히지 않습니다. */
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: var(--point-dark);
}

/* ── 연락처 ───────────────────────────────────────────────── */
#footer .ft_info {
  font-style: normal;
  letter-spacing: 0.02em;
}

#footer .ft_info span {
  position: relative;
  display: inline-block;
  padding: 0 1.2rem;

  /* 주소 ~ 이메일을 한 줄로. 항목 중간에서 꺾이지 않게 한다
     (좁은 화면에서는 아래 768px 규칙이 한 줄씩 쌓아 줍니다) */
  white-space: nowrap;
}

#footer .ft_info span ~ span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);

  width: 1px;
  height: 1rem;
  background: var(--line-color);
}

/* 줄을 새로 시작하는 항목 */
#footer .ft_info .line_break {
  display: block;
  padding: 0;
}

#footer .ft_info .line_break::before {
  display: none;
}

#footer .ft_info a {
  color: inherit;
  transition: color 0.25s;
}

#footer .ft_info a:hover {
  color: var(--point-dark);
}

#footer .ft_copy {
  display: block;
  margin-top: 2.8rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line-color);

  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-color-sub);
}

/* (계정 링크는 오른쪽 위 로그인 팝업(head.php #hd_login)으로 옮겼고,
   접속자집계 · 푸터 이메일 아이콘은 쓰지 않습니다) */

/* ── 반응형 ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  #footer {
    padding: 6.4rem 0 5.6rem;
  }

  #footer .ft_logo img {
    width: 140px;
  }

  /* 좁은 화면에서는 구분선을 없애고 한 줄씩 쌓는다 */
  #footer .ft_info span {
    display: block;
    padding: 0;
  }

  #footer .ft_info span ~ span::before {
    display: none;
  }
}

/* ==========================================================================
   Kakao Map - 카카오 지도
   ========================================================================== */
.root_daum_roughmap {
  width: 100% !important;
}

.root_daum_roughmap .cont,
.root_daum_roughmap .wrap_controllers {
  display: none;
}

.root_daum_roughmap .border2 {
  display: block !important;
}

@media (max-width: 768px) {
  .root_daum_roughmap .wrap_map {
    height: 240px !important;
  }
}