/* 텍스트 유틸 */
.fw_500 { font-weight: 500; }
.fw_700 { font-weight: 700; }

/* 공통 타이틀 */
.common_tit {
    font-size: 32px;
}

/* 가운데 정렬 */
.text_center {
    text-align: center;
}

/* 공통 영역폭 */
.center,
.inner {
    max-width: 1200px;
    margin: 0 auto;
}
/* ===== FOOTER ===== */
#footer {
    background: #262626;
    color: #ffffff;
    padding: 40px 0;
    font-size: 13px;
}

.ft_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* 로고 */
.ft_logo img {
    display: block;
    max-width: 220px;
}

/* 회사 정보 */
.ft_info {
    flex: 1;
    line-height: 1.6;
}

.ft_info .ft_company {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.ft_info p {
    margin: 0 0 3px;
    color: #dddddd;
}

.ft_info .ft_copy {
    margin-top: 8px;
    font-size: 12px;
    color: #999999;
}

/* 연락처 강조 */
.ft_contact {
    text-align: right;
    white-space: nowrap;
}

.ft_contact_label {
    display: block;
    font-size: 16px;
    margin-bottom: 6px;
}

.ft_contact_tel {
    display: block;
    font-size: 30px;
    font-weight: 700;
}

/* 반응형 */
@media (max-width: 1024px) {
    .ft_inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .ft_contact {
        text-align: left;
    }
}


/* 헤더 전체 높이도 약간 슬림하게 (옵션) */
#header,
#header_wrap {
    height: 80px;
}

/* 메뉴 줄어들 때 로고 이미지 높이 조정 (있으면) */
#logo img {
    max-height: 40px;
}
/* ===========================
   GNB 2뎁스 드롭다운 전체 리셋/재정의
   =========================== */

/* 하위메뉴가 밖으로 튀어나와도 보이게 */
#menu,
#menu .dropdown {
    position: relative;
    overflow: visible;
}

/* ★ 각 1뎁스 li를 기준점으로 사용 */
#menu .dropdown > li {
    position: relative;
}

/* 2차 메뉴(드롭다운) 기본 숨김 + 위치 */
#menu .dropdown > li > ul {
    position: absolute;
    top: 100%;
    left: 50%;                 /* 부모 li의 가운데 기준 */
    transform: translateX(-50%);
    display: none;
    min-width: 160px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
    padding: 6px 0;
    z-index: 999;
}

/* 1뎁스 li에 마우스 올리면 2뎁스 표시 */
#menu .dropdown > li:hover > ul {
    display: block;
}

/* 2뎁스 li 기본 */
#menu .dropdown li ul li {
    width: 100%;
}

/* 2뎁스 a 스타일 */
#menu .dropdown li ul li a {
    display: block;
    height: auto;                   /* 세로 잘림 방지 */
    padding: 7px 16px;
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;            /* 한 줄로 */
    color: #333;
    background: #fff;
    writing-mode: horizontal-tb;    /* 혹시 세로쓰기 강제된 게 있으면 덮어쓰기 */
    transform: none;                /* 회전 같은 거 초기화 */
}

/* 2뎁스 hover */
#menu .dropdown li ul li a:hover {
    background: #f5f5f5;
    color: #0072ce;
}
/* 하위 메뉴의 세로 라인 제거 */
#menu .dropdown li ul li,
#menu .dropdown li ul li a {
    border: none !important;
}

/* ::before / ::after 로 세로선 넣는 스타일 제거 */
#menu .dropdown li ul li::before,
#menu .dropdown li ul li::after,
#menu .dropdown li ul li a::before,
#menu .dropdown li ul li a::after {
    content: none !important;
    border: none !important;
}
/* ==================================
   화면 맨 위 #0b7285 컬러 라인
   ================================== */
html, body {
    position: relative;
}

/* 브라우저 최상단 고정 라인 */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;              /* 라인 두께 */
    background: #0b7285;       /* 요청하신 컬러 */
    z-index: 9999;
    pointer-events: none;      /* 클릭 막지 않게 */
}
/* ==================================
   네비게이션과 메인 비주얼 사이 간격 줄이기
   ================================== */

/* 헤더 아래쪽 여백 제거 */
header,
#header,
#hd,
#hd_wrap,
#menu {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}



/* 혹시 메인 전체 래퍼에 여백이 있을 수도 있으니 같이 컷 */
#index,      /* 인덱스 래퍼 id를 이렇게 쓰는 경우 많아서 같이 처리 */
#container,
#wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 1. 예전에 만든 body::before 탑바 제거 */
body::before {
    content: none !important;
}



/* 3. 헤더 래퍼 + 상단 컬러바 + GNB 최종 정렬 */

/* 상단 컬러 바 */
#hd {
    position: relative;
    padding-top: 11px; /* 컬러바 두께 + 여유 (8~14px 사이로 취향대로 조절 가능) */
}

#hd::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;         /* 컬러바 두께 */
    background: #0b7285;
    z-index: 0;
}

/* 헤더 래퍼: 전체 높이 + 중앙 정렬 기준 */
#header_wrap {
    max-width: 1200px;
    margin: 0 auto;
    height: 80px;
    position: relative;   /* SNS absolute 기준점 */
    display: flex;
    align-items: center;  /* 세로 중앙 정렬 */
}

/* 로고 + 메뉴 래퍼 */
.nav_wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

/* GNB 전체: 가운데 정렬 + 줄바꿈 방지 */
#menu.menu_center .dropdown {
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

/* 1뎁스 li : 인라인 블록으로 한 줄 배치 */
#menu.menu_center .dropdown > li {
    display: inline-block;
    margin: 0;
    padding: 0 6px;       /* 메뉴 간격 (4~10px 사이 조절 가능) */
    line-height: 80px;    /* 헤더 높이와 맞춰서 세로 중앙 */
    vertical-align: middle;
}

/* 왼쪽 메인 로고 */
#menu.menu_center .dropdown > li.main_logo {
    padding-left: 0;
    margin-right: 36px;   /* 로고와 첫 메뉴 사이 간격 */
}

#menu.menu_center .dropdown > li.main_logo img {
    display: inline-block;
    height: 40px;
    width: auto;
    vertical-align: middle;
}

/* 메뉴 텍스트 a – 여기 하나만 사용 (중복 제거) */
#menu.menu_center .dropdown > li > a {
    display: inline-block;
    font-size: 12px;      /* ← PC 메뉴 글씨 크기 (더 줄이려면 12px) */
    font-weight: 500;
    line-height: 1;
    padding: 0 8px;       /* 좌우 여백 */
    color: #333;
    transition: color .2s ease;
}

#menu.menu_center .dropdown > li > a:hover {
    color: #0072ce;
}

/* SNS 박스: 헤더 오른쪽 끝에 고정 */
#tnb_sns {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* SNS 아이콘 크기 */
#tnb_sns img {
    display: block;
    height: 20px !important;
    width: auto !important;
    margin: 0;
}


/* =========================
   QUICK CONTACT 고정 박스
   ========================= */

/* 고정 위치 */
.quick_menu_wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;   /* ⭐ 추가 : 모든 항목 가로 중앙 정렬 */
}

/* ========================
   투명도 5% 카드 박스
   ======================== */
.quick_contact_box {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    border-radius: 22px;
    padding: 18px 22px;
    min-width: 220px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);

    /* 🔥 컨텐츠 전체 가운데 정렬 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 제목 ─ 중앙 정렬 */
.qc_title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;

    display: flex;
    justify-content: center;  /* 중앙 */
    align-items: center;       /* 중앙 */
    gap: 6px;
    text-align: center;
    width: 100%;
}

/* 버튼 기본 */
.qc_btn {
    display: block;
    width: 100%;
    padding: 12px 14px;
    text-align: center;
    font-size: 14px;
    border-radius: 25px;
    margin-bottom: 10px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

/* 청록 버튼 */
.qc_btn.teal {
    background: #017c8a;
}
.qc_btn.teal:hover {
    background: #016a75;
}

/* 노랑 카카오 버튼 */
.qc_btn.yellow {
    background: #ffcf32;
    color: #000;
}
.qc_btn.yellow:hover {
    background: #f5c423;
}

/* 카카오톡 아이콘 */
.qc_kakao_icon {
    height: 18px;
    vertical-align: middle;
    margin-left: 5px;
}

/* TOP 버튼 */
.qc_top_btn {
    width: 70px;
    height: 34px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    color: #7e7e7e;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;

    display: flex;
    justify-content: center;  /* 중앙 */
    align-items: center;       /* 중앙 */
}

/* TOP 버튼 호버 */
.qc_top_btn:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

/* 불필요한 중괄호 삭제해서 CSS 오류 제거 */

/* =========================
   지도 섹션
   ========================= */
/* 위 배너랑 간격 띄우기 + 전체 폭 */
#map_section {
    width: 100%;
    margin: 60px 0 0;   /* 위로 60px 정도 띄움 (원하면 40~80px 사이로 조절) */
}

/* 지도 랩퍼/지도/하단 바는 화면 가로 전체 사용 */
.map_wrap,
#map,
.map_info_bar {
    width: 100%;
}

/* 지도 높이 */
#map {
    height: 360px;
}

/* 하단 안내 바는 전체 폭 + 안쪽 내용만 가운데 정렬 */
.map_info_bar {
    background: #333;
    color: #fff;
}

.map_info_inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 14px 0 18px;
}

/* 상호명 (노랑) */
.map_shop_name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #ffd53b;
}

/* 주소 */
.map_addr {
    margin: 4px 0 0;
    font-size: 14px;
}

/* 전화 안내 */
.map_tel {
    margin: 4px 0 0;
    font-size: 14px;
}

/* 전화번호만 포인트 컬러 */
.map_tel_num {
    color: #ff7043;
    font-weight: 700;
}





/* 딤 배경 */
    .m_gnb_dim {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1100;
    }

    /* body에 .m_gnb_open 클래스가 붙었을 때 (메뉴 열림 상태) */
    body.m_gnb_open #m_gnb {
        right: 0;
    }

    body.m_gnb_open .m_gnb_dim {
        display: block;
    }




/* 공통 헤더 상단 컬러바 */
#header_wrap {
    border-top: 4px solid #007a86;   /* 원래 상단 컬러바 색감 */
    background:#ffffff;
    position: relative;
    z-index: 1000;
}



/* PC GNB 기본 (원래 inline / flex 레이아웃 유지) */
#gnb {
    display: block;
}



    /* 헤더 높이 조금 줄이기 */
    #header_wrap {
        padding: 10px 0;
    }

    /* 모바일 gnb 오버레이 기본 상태(숨김) */
    #m_gnb {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 80%;
        max-width: 360px;
        background: #111;
        color: #fff;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 1500;
        overflow-y: auto;
    }

    #m_gnb_dim {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1400;
    }

    /* body에 클래스 붙었을 때 열림 상태 */
    body.m-menu-open #m_gnb {
        transform: translateX(0);
    }

    body.m-menu-open #m_gnb_dim {
        opacity: 1;
        pointer-events: auto;
    }

    .m_gnb_header {
        display:flex;
        align-items:center;
        justify-content: space-between;
        padding:14px 18px;
        border-bottom:1px solid rgba(255,255,255,0.15);
    }

    .m_logo {
        font-size:16px;
        font-weight:700;
    }

    .m_gnb_close {
        background:transparent;
        border:0;
        color:#fff;
        font-size:22px;
        cursor:pointer;
    }

    /* 1뎁스 리스트 */
    .m_depth1 {
        list-style:none;
        margin:0;
        padding:0;
    }

    .m_depth1_li {
        border-bottom:1px solid rgba(255,255,255,0.12);
    }

    .m_depth1_btn {
        width:100%;
        text-align:left;
        padding:14px 18px;
        background:transparent;
        border:0;
        color:#fff;
        font-size:15px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        cursor:pointer;
    }

    .m_depth1_li.has-sub .ico_plus {
        font-size:18px;
        transition: transform 0.2s ease;
    }

    .m_depth1_li.open .ico_plus {
        transform: rotate(45deg);  /* + → × 느낌 */
    }

    /* 2뎁스(소분류)는 기본 숨김 */
    .m_depth2 {
        display:none;
        list-style:none;
        margin:0;
        padding:0 0 10px 0;
        background:#181818;
    }

    .m_depth2 li a {
        display:block;
        padding:8px 24px;
        font-size:14px;
        color:#ddd;
        text-decoration:none;
    }

    .m_depth2 li a:hover {
        color:#fff;
        background:#222;
    }

    



    /* 메인 슬라이드와 헤더 사이 간격 줄이기 */
    #main_visual {
        margin-top: 50px;     /* 너무 넓으면 50 / 45 로 줄여봐도 됨 */
        height: 260px;        /* 기존 모바일 높이 유지 */
    }




/* PC에서는 오버레이 숨김 */
@media (min-width: 1025px) {
    .mobile_nav_overlay {
        display: none;
    }
}



/* =========================
   공통 헤더 (PC + 모바일)
   ========================= */
#header_wrap {
    border-top: 4px solid #007a86;   /* 상단 컬러바 */
    background:#ffffff;
    position: relative;
    z-index: 1000;
}

/* =========================
   GNB / 헤더 공통 (PC + 모바일)
   ========================= */

/* PC GNB 기본 표시 */
#gnb {
    display: block;
}

/* 모바일 햄버거 버튼은 기본 숨김 (PC) */
.mobile_menu_btn {
    display: none;
}

/* =========================
   모바일 헤더 & GNB
   ========================= */
@media (max-width: 1024px) {

    /* PC gnb는 모바일에서 숨김 */
    #gnb {
        display: none;
    }

    /* 헤더: 로고 중앙 정렬 + 상하 여백 확보 */
    #header_wrap {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;   /* 로고 기준 중앙 */
        padding: 8px 16px;        /* 상단 컬러바와 슬라이드 사이 적당한 간격 */
        height: auto;
        background: #ffffff;
        box-sizing: border-box;
    }

    /* 로고를 가운데로 고정 */
    #header_wrap #logo {
        margin: 0;
        float: none;
        text-align: center;
    }

    

    /* 모바일 햄버거 버튼 */
    .mobile_menu_btn {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;     /* ← 버튼 전체 가로 크기 */
        height: 26px;    /* ← 버튼 전체 세로 크기 */
        padding: 0;
        background: none;
        border: none;
        cursor: pointer;
        display: block;
        z-index: 2000;
    }

    .mobile_menu_btn span {
        display: block;
        width: 100%;
        height: 3px;      /* ← 두께 */
        margin: 6px 0;    /* ← 각 라인 간격 */
        background: #000; /* ← 라인 색상 */
        border-radius: 2px;
        transition: 0.25s;
    }


      /* ↓ 헤더와 슬라이드 사이 간격은 이걸로 조절 */
    #main_visual {
        margin-top: 0px;   /* 0 ~ 20px 사이에서 취향대로 조절 */
    }
}

/* =========================
   모바일 전체 메뉴 오버레이
   ========================= */

/* 오버레이 배경 */
.mobile_nav_overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);    /* 뒷배경 어둡게 */
    display: none;                   /* 기본 숨김 */
    z-index: 9998;
}

/* 열렸을 때 */
.mobile_nav_overlay.is-open {
    display: block;
}

/* 상단에서 내려오는 메뉴 패널 */
.mobile_nav_inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;                     /* 화면 전체 가로 */
    max-width: 100%;
    height: 60vh;                    /* 상단 60%만 덮기 */
    background: #111;
    box-sizing: border-box;
    padding-top: 8px;
    overflow-y: auto;
}

/* 상단 로고/타이틀 + 닫기 버튼 */
.mobile_nav_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #333;
}

.mobile_nav_title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.mobile_nav_close {
    background: none;
    border: 0;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

/* 메뉴 리스트 기본 */
.mobile_nav_menu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile_nav_menu > ul > li {
    border-bottom: 1px solid #222;
}

/* 1뎁스(대분류) */
.mobile_nav_menu > ul > li > a {
    display: block;
    padding: 12px 18px;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    position: relative;
}

.mobile_nav_menu > ul > li > a:hover {
    background: rgba(255,255,255,0.06);
}

/* 2뎁스(소분류) */
.mobile_nav_menu ul ul {
    display: none;          /* 기본은 숨김 */
    background: #151515;
}

.mobile_nav_menu ul ul li a {
    display: block;
    padding: 10px 28px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}

/* + / - 토글 아이콘 */
.mobile_nav_menu > ul > li.has-sub > a::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

.mobile_nav_menu > ul > li.has-sub.open > a::after {
    content: "-";
}

/* 열린 상태일 때 소분류 노출 */
.mobile_nav_menu > ul > li.open > ul {
    display: block;
}

/* 전체메뉴 열렸을 때 바디 스크롤 방지 */
body.m_nav_open {
    overflow: hidden;
}

/* 가로 스크롤 방지 (우측으로 밀리는 문제 해결) */
.mobile_nav_inner,
.mobile_nav_menu {
    overflow-x: hidden;
}

/* PC 에서는 모바일 오버레이/버튼 숨김 */
@media (min-width: 1025px) {
    .mobile_nav_overlay {
        display: none !important;
    }

    .mobile_menu_btn {
        display: none !important;
    }
}


/* =========================
   최종 오버라이드 – 모바일 메인 비주얼 간격
   ========================= */
@media (max-width: 1024px) {
    #main_visual {
        margin-top: 0 !important;   /* 0이 너무 붙으면 4, 8 이런 식으로 올려 */
    }
}

/* =========================
   PC GNB 최종 오버라이드
   ========================= */
@media (min-width: 1025px) {

    /* 1뎁스 li 세로 높이(헤더 전체 높이) */
    #header_wrap {
        height: 65px;              /* 80 → 70으로 줄임 (더 슬림하게 하고 싶으면 65까지) */
    }

    .menu.menu_center .dropdown > li {
        line-height: 65px;         /* 위 height와 꼭 맞춰야 텍스트가 중앙에 옴 */
    }

    /* 메뉴 글씨 크기 & 좌우 여백 */
    .menu.menu_center .dropdown > li > a {
        font-size: 13px;           /* 글씨 크기: 12~13px 사이에서 취향대로 */
        padding: 0 6px;
    }

    /* 로고도 같이 살짝 줄이면 더 균형 잘 맞음 */
    #menu.menu_center .dropdown > li.main_logo img,
    #gnb.menu_center .dropdown > li.main_logo img,
    .menu.menu_center .dropdown > li.main_logo img {
        height: 36px;
    }
}

/* =========================
   PC – 메뉴 아래 간격 제거
   ========================= */
@media (min-width: 1025px) {
    #main_visual {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =========================
   최종 오버라이드 – 햄버거 아이콘 크기
   ========================= */
@media (max-width: 1024px) {

    /* 버튼 전체 크기(터치 영역) */
    .mobile_menu_btn {
        width: 36px;    /* 필요하면 32~40 왔다갔다 해봐 */
        height: 28px;
    }

    /* 폰트 아이콘(3선) 크기 */
    .mobile_menu_btn i {
        display: inline-block;
        font-size: 24px;   /* 여기 숫자 키우면 3선 전체가 커짐 */
        line-height: 1;
    }
}