@charset "utf-8";



body.no-scroll { overflow: hidden; position: fixed; width: 100%; }

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--white);
    transition: top var(--q_trans), box-shadow var(--q_trans);
}

#header .inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
}

#header a { text-decoration: none; }

/* --- [PC 레이아웃 (1101px 이상)] --- */
@media screen and (min-width: 1101px) {
    /* 1. 초기 숨김 처리 */
    #m_gnb_panel, .m_dim, .mobile_only {
        display: none !important;
    }
    /* 2. 스크롤 시 헤더 전체 제어 */
    body.header_fixed #header {
        top: -81px; /* 1단 높이만큼 위로 밀기 */
        box-shadow: var(--shadow_sm);
    }

    body.header_fixed {
        padding-top: 146px; /* 81px(1단) + 65px(2단) 본문 밀기 */
    }

    /* 3. 상단 정보 영역 (1단) */
    .header_top {
		border-bottom: 1px solid #31353f;
        padding: 15px 0;
        background: var(--white);
        height: 81px;
        box-sizing: border-box;
    }
    .header_top .inner { justify-content: space-between; }
    .logo img { height: 50px; display: block; }

    .top_msg {line-height: 1.3;}

    .top_tel { text-align: right; }
    .top_tel small { display: block; font-size: 12px; color: var(--gray_5); margin-bottom: 2px; }
    .top_tel strong { font-size: 20px; color: var(--gray_3);; font-weight: 800; }

    /* 4. 메뉴바 영역 (2단) */
    .pc_nav {
        height: 65px;
        border-bottom: 1px solid #31353f;
        background: var(--gray_1);
        position: relative;
    }

    .pc_nav .inner {
        display: flex;
        align-items: center;
        height: 100%;
        position: relative; /* 소메뉴의 기준점 역할을 할 수 있도록 추가 */
    }

    /* [핵심] 고정 로고 설정 */
    .fixed_logo {
        display: block !important;
        width: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateX(-20px);
        transition: var(--q_trans);
        white-space: nowrap;
    }
    .fixed_logo img { height: 32px; display: block; }

    /* [핵심] 메뉴 리스트 (중앙 -> 오른쪽 애니메이션) */
    .pc_gnb_list {
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0 auto;
        transition: var(--q_trans);
        white-space: nowrap;
    }

    /* 5. 스크롤 고정 시 (header_fixed) 변화 */
    body.header_fixed .fixed_logo {
        width: 160px; /* 로고 너비만큼 공간 확보 */
        opacity: 1;
        transform: translateX(0);
        margin-right: 20px;
    }

    body.header_fixed .pc_gnb_list {
        margin-left: auto; /* 로고가 생기면 자동으로 오른쪽으로 밀림 */
        margin-right: 0;
    }

    /* 6. GNB 세부 스타일 (소메뉴 위치 해결 버전) */
    .pc_gnb_list > li {
        position: relative; /* ★중요: 이 설정이 있어야 소메뉴가 대메뉴 아래에 붙습니다 */
        height: 100%;
        padding: 0 25px;
    }
        /* PC 레이아웃 내부에 추가하거나 아래에 별도로 배치 */
        @media screen and (min-width: 1101px) and (max-width: 1400px) {
            /* 1. 메뉴 간격 축소 */
            .pc_gnb_list > li {
                padding: 0 15px; /* 기존 25px -> 15px */
            }

            /* 2. 폰트 사이즈 축소 */
            .pc_gnb_list .d1 {
                font-size: 14px; /* 기존 16px -> 14px */
            }

            /* 3. 스크롤 시 로고 너비 축소 (공간 확보) */
            body.header_fixed .fixed_logo {
                width: 130px; /* 기존 160px -> 130px */
            }

            /* 4. 아이콘 간격 축소 */
            .pc_gnb_list .d1 i {
                margin-left: 4px;
            }
        }

        /* 더 좁은 화면 (1101px ~ 1250px) 대응 */
        @media screen and (min-width: 1101px) and (max-width: 1250px) {
            .pc_gnb_list > li {
                padding: 0 10px; /* 간격을 더 줄임 */
            }
            .pc_gnb_list .d1 {
                font-size: 13px; /* 폰트를 더 줄임 */
            }
}
    .pc_gnb_list .d1 {
        display: flex;
        align-items: center;
        height: 100%;
        font-weight: 600;
        color: var(--white);;
        font-size: 16px;
        cursor: pointer;
        transition: color var(--q_trans);
    }

    .pc_gnb_list .d1 i { color: inherit; margin-left: 6px; font-size: 11px; opacity: 0.3; transition: 0.3s; }
    .pc_gnb_list > li:hover .d1 { color: var(--point) !important;}
    .pc_gnb_list > li:hover .d1 i { transform: rotate(180deg); opacity: 1; }

    /* 소메뉴(드롭다운) 설정 */
    .pc_gnb_list .d2 {
        position: absolute;
        top: 100%; /* 대메뉴 바로 아래 */
        left: 50%;
        transform: translateX(-50%); /* 부모(li) 기준으로 정중앙 정렬 */
        background: var(--white);
        border: 1px solid var(--gray_e0);
        min-width: 170px;
        display: none;
        box-shadow: var(--shadow_md);
        padding: 10px 0;
        z-index: 100;
        border-radius: var(--br_m);
    }

    .pc_gnb_list > li:hover .d2 { display: block; }
    .pc_gnb_list .d2 a {
        display: block;
        padding: 10px 20px;
        font-size: 14px;
        text-align: center;
        color: var(--gray_4);
        transition: 0.2s;
    }
    .pc_gnb_list .d2 a:hover {color: var(--point) !important;
        background: var(--bg_light_gold) !important; }
}

/* --- [모바일 레이아웃 (1100px 이하)] --- */
@media screen and (max-width: 1100px) {
    .pc_only { display: none !important; }

    #header { position: fixed; top: 0 !important; } /* 모바일은 항상 상단 고정 */

    .header_top { height: 60px; border-bottom: 1px solid var(--gray_e0); }
    .header_top .inner { justify-content: space-between; height: 100%; }
    .logo img { height: 32px; }

    .m_action_group { display: flex; align-items: center; gap: 12px; }
    .m_tel_btn { width: 34px; height: 34px; border: 1px solid var(--point); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--point); font-size: 16px; }

    .m_menu_btn { width: 28px; height: 18px; display: flex; flex-direction: column; justify-content: space-between; background: none; border: none; padding: 0; position: relative; z-index: 10001; cursor: pointer; }
    .m_menu_btn span { display: block; width: 100%; height: 2px; background: var(--gray_3);; transition: 0.3s; }
    .m_menu_btn.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .m_menu_btn.active span:nth-child(2) { opacity: 0; }
    .m_menu_btn.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    #m_gnb_panel {
        position: fixed; top: 0; right: -280px; width: 280px; height: 100%;
        background: var(--white); z-index: 10000; transition: 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
        padding-top: 60px; overflow-y: auto; box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }
    #m_gnb_panel.open { right: 0; }

    .m_gnb_top { padding: 20px; font-weight: 800; font-size: 18px; color: #111; border-bottom: 2px solid var(--point);; }
    .m_menu_list .m_d1 { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; color: var(--gray_3);; font-weight: 600; border-bottom: 1px solid var(--gray_f2);; font-size: 15px; }
    .m_menu_list .m_d2 { background: var(--gray_f9); display: none; }
    .m_menu_list .m_d2 a { display: block; padding: 12px 30px; color: var(--gray_4); font-size: 14px; border-top: 1px solid var(--gray_e0); }

    .m_dim { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9999; display: none; }
}


/* ============================================================
   [PC GNB] 단일 링크 메뉴 통합 (무료체험 신청, 리셀러 센터 등)
   ============================================================ */

/* 1. 기본 상태: 은은한 포인트 컬러 */
.pc_gnb_list > li.single_menu > a.d1 {
    color: var(--white);
    /* opacity: 0.75; 평소에는 힘을 빼서 조화롭게 */
    font-weight: 700;
    transition: all var(--q_trans);
}

/* 2. 아이콘 기본 설정 */
.pc_gnb_list > li.single_menu .d1 i {
    display: inline-block; /* scale 애니메이션을 위해 필수 */
    margin-left: 6px;
    transition: transform 0.3s ease; /* 커지는 속도 조절 */
}

/* 3. 마우스 오버 시 효과 (글자 진해짐 + 아이콘 확대) */
.pc_gnb_list > li.single_menu:hover > a.d1 {
    color: var(--point) !important;
    /* opacity: 1; 선명해짐 */
}

.pc_gnb_list > li.single_menu:hover > a.d1 i {
    transform: scale(1.3); /* 리셀러 버튼처럼 슥 커지는 효과 */
}


/* ============================================================
   [모바일 GNB] 단일 메뉴 시각적 구분
   ============================================================ */
@media screen and (max-width: 1100px) {
    /* [모바일 싱글 메뉴] 기존 m_d1과 레이아웃 완전 일치화 */
    .m_menu_list > li.single_menu > a.m_d1 {
        display: flex !important;
        justify-content: space-between; /* 텍스트는 왼쪽, 아이콘은 오른쪽 끝 */
        align-items: center;
        /* 기존 패딩 유지 (기존 소스에 맞춰 16px 20px 등 동일하게 확인 필요) */
        padding: 16px 20px;
       color: var(--point) !important;
        background: var(--bg_light_gold) !important;
        opacity: 0.85;
        font-weight: 700;
        border-bottom: 1px solid var(--gray_f2); /* 기존 메뉴와 하단선 맞춤 */
    }

    /* 아이콘 위치 고정 (드롭다운 아이콘과 동일한 위치) */
    .m_menu_list > li.single_menu > a.m_d1 i {
        font-size: 14px; /* 기존 플러스 아이콘과 비슷한 크기 */
        width: 18px;    /* 아이콘 너비 고정으로 텍스트 밀림 방지 */
        text-align: center;
        transition: transform 0.3s ease; /* 확대 애니메이션 */
        margin-left: auto; /* 무조건 오른쪽 끝으로 */
    }

    /* 터치(클릭) 시 효과: 아이콘 확대 및 선명도 조절 */
    .m_menu_list > li.single_menu:active > a.m_d1 {
        opacity: 1;
        background: rgba(var(--point_rgb), 0.1) !important; /* 터치 시 미세한 피드백 */
    }

    .m_menu_list > li.single_menu:active > a.m_d1 i {
        transform: scale(1.3); /* 리셀러 버튼처럼 슥 커짐 */
    }
}