@charset "utf-8";

/* 반응형 스타일 (max-width: 768px) */

@media (max-width: 768px) {
  .pc-show {
    display: none !important;
  }

  .pc-f-show {
    display: none !important;
  }

  .m-show {
    display: block !important;
  }

  .m-f-show {
    display: flex !important;
  }

  /* hd_pop 팝업레이어 */
  #hd_pop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    z-index: 99998;
    pointer-events: none;
  }

  #hd_pop.is-active {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.6);
  }

  #hd_pop .hd_pops_pc {
    display: none !important;
  }

  .hd_pops {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px) !important;
    max-width: 400px;
    margin: 0;
    box-sizing: border-box;
    border: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  }

  .hd_pops_con {
    width: 100% !important;
    height: auto !important;
    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hd_pops img {
    display: block;
    width: 100%;
    height: auto;
  }

  .hd_pops_footer {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .hd_pops_footer button {
    width: 100%;
    margin: 0;
    padding: 12px 10px;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
  }

  .hd_pops_footer .hd_pops_reject {
    text-align: center;
  }

  .hd_pops_footer .hd_pops_close {
    position: static;
    top: auto;
    right: auto;
  }

  body.pch_pop_open {
    overflow: hidden;
  }

  /* mobile header */
  #hd.pch_hd {
    background: var(--pch-navy-dark);
  }

  #hd.pch_hd #hd_wrapper {
    height: 80px;
    padding: 0 20px;
  }

  #hd.pch_hd #logo .pch_logo_pc {
    display: none;
  }

  #hd.pch_hd #logo .pch_logo_m {
    display: block;
    height: 34px;
    max-height: 34px;
    width: auto;
  }

  #hd.pch_hd #gnb {
    display: none;
  }

  #hd.pch_hd .hd_login {
    display: none;
  }

  #hd.pch_hd .pch_hd_utils {
    gap: 0;
  }

  #hd.pch_hd .pch_hd_mobile_btns {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  #hd.pch_hd .pch_hd_mobile_btns .pch_m_user_btn,
  #hd.pch_hd .pch_hd_mobile_btns .pch_m_gnb_btn {
    width: 24px;
    height: 24px;
    color: transparent;
    font-size: 0;
  }

  #hd.pch_hd .pch_hd_mobile_btns .pch_m_user_btn img {
    max-height: 22px;
  }

  #hd.pch_hd .pch_hd_mobile_btns .pch_m_gnb_btn img {
    max-height: 20px;
  }


  /* footer */
  @media (max-width: 768px) {

    #ft {
      padding: 40px 0;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      min-width: 100%;
    }

    /* 2. 본문 박스 .ft_inner */
    #ft .ft_inner {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 15px;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      order: 2 !important;
      /* SNS 박스 다음 순서 */
    }

    /* 3. ★ 핵심: 기존 덩어리 구조(ft_left, ft_right)의 태그 한계를 없애고 알맹이만 꺼내기 */
    #ft .ft_left,
    #ft .ft_right {
      display: contents !important;
      /* 박스 레이아웃을 없애고 자식 요소들이 ft_inner의 직속 자식처럼 작동하게 함 */
    }

    /* 4. SNS 박스 (맨 위: 1번) */
    #sns_fixed {
      position: static !important;
      transform: none !important;
      display: flex !important;
      flex-direction: row !important;
      justify-content: center !important;
      width: 100% !important;
      margin: 0 auto 25px auto !important;
      order: 1 !important;
    }

    #sns_fixed a {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 6px !important;
      margin-bottom: 0 !important;
      width: 46px !important;
      height: 46px !important;
      background: #fff !important;
      border-radius: 50% !important;
    }

    #sns_fixed #top_btn {
      display: none !important;
      /* 모바일 탑버튼 숨김 */
    }

    /* 5. 이용약관 (2번) */
    #ft .ft_link {
      order: 2 !important;
      margin-bottom: 25px !important;
    }

    #ft .ft_link a {
      font-size: 14px;
      margin: 0 10px !important;
    }

    /* 6. 로고 (3번) */
    #ft .ft_logo {
      order: 3 !important;
      margin-bottom: 25px !important;
    }

    #ft .ft_logo img {
      margin: 0 auto !important;
      max-height: 48px;
    }

    /* 7. 주소 및 대표자 정보 (4번) */
    #ft .ft_info {
      order: 4 !important;
      margin-bottom: 20px !important;
    }

    #ft .ft_info p {
      font-size: 12px;
      line-height: 1.7;
      margin-bottom: 5px;
      color: #979797;
      word-break: keep-all;
      text-align: center !important;
      /* 한 번 더 중앙 정렬 강제 */
    }

    /* ★ 미세하게 오른쪽으로 쏠리던 원인 해결 */
    #ft .ft_info .ft_label {
      margin: 0 !important;
      /* 라벨 자체에 걸린 마진을 완전히 제거 */
      padding-right: 4px !important;
      /* 글자와 데이터 사이만 살짝 띄움 */
    }

    /* 세로 구분선(|) 텍스트에만 좌우 마진을 주어 정중앙 정렬 유지 */
    #ft .ft_info p>span:not(.ft_label) {
      margin: 0 6px !important;
      color: #666 !important;
    }

    /* 8. 카피라이트 (맨 아래: 5번) */
    #ft .ft_copy {
      order: 5 !important;
      margin-top: 0 !important;
      font-size: 11px;
    }
  }

  /* visual */
  .visual .visual-pagination {
    bottom: 16px;
  }

  .visual .visual-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 7px !important;
    border-width: 1.5px;
  }

  .visual .swiper-container-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    bottom: 30px !important;
  }

  /* sec05 */
  .sec05 {
    flex-direction: column;
    padding: 0 20px 48px;
    box-sizing: border-box;
  }

  .sec05-left-wrap,
  .sec05-left,
  .sec05-bottom {
    display: contents;
  }

  .sec05-tit {
    order: 1;
    padding: 48px 0 24px;
    text-align: center;
  }

  .sec05-tit img {
    margin: 0 auto;
    max-width: 280px;
  }

  .sec05-right {
    order: 2;
    flex: none;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    margin-bottom: 20px;
  }

  .sec05-main .swiper-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 220;
    object-fit: cover;
  }

  .sec05-thumbs {
    order: 3;
    width: 100%;
    padding: 16px 0 0;
    margin-top: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  .sec05-thumbs .swiper-slide img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .sec05-control {
    order: 4;
    justify-content: center;
    width: 100%;
    margin: 20px 0 0;
    padding: 0;
    box-sizing: border-box;
    gap: 10px;
  }

  .sec05-pagination {
    justify-content: center !important;
  }

  .sec05-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
  }

  /* sec07 */
  .sec07 {
    flex-direction: column;
    padding: 0 20px 48px;
    box-sizing: border-box;
  }

  .sec07-left-wrap,
  .sec07-left,
  .sec07-right {
    display: contents;
  }

  .sec07-m-logo {
    order: 1;
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
    padding: 40px 0 24px;
  }

  .sec07-map {
    order: 2;
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 335 / 208;
    overflow: hidden;
  }

  .sec07-m-info {
    order: 3;
    display: block;
    width: 100%;
    height: auto;
    padding-top: 24px;
  }

  #location:before {
    display: none;
  }

  #location .depth {
    float: none;
    width: auto;
    text-align: center;
  }

  #location .depth>a {
    display: block;
    margin: 0 auto;
  }

  #contentsWrap {
    padding: 40px 20px;
  }
}