@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap');

/* [통합 CSS] 헤더 중앙 정렬 + 메뉴 + 서브메뉴 완벽 수정본 */

/* 1. 전체 헤더 컨테이너 (화면 정중앙 고정) */
#header2 {
    width: 1300px;           /* 헤더 전체 폭 */
    height: 80px;
    
    /* ★ 핵심: 화면 정중앙 고정 (구형 margin-left 방식 대체) */
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 무조건 화면 정가운데로 이동 */
    
    margin-top: 130px;
    margin-left: 0 !important;   /* 기존 -600px 제거 (충돌 방지) */
    z-index: 999999;
    font-family: 'Noto Sans KR', sans-serif;
}

/* 2. GNB (메뉴 영역) */
#gnb2 {
    position: relative;
    z-index: 1000;
    width: 100%;
    height: 50px;
}

/* 3. 1차 메뉴 (메인) - 가로 나열 */
#gnb2 .gnb_list2 {
    display: flex !important;       /* Flex 모드 사용 */
    justify-content: space-between; /* 메뉴를 양쪽 끝에 맞춰 균등 배치 */
    align-items: center;            /* 세로 중앙 정렬 */
    
    width: 100%;
    padding: 0 !important;          /* HTML에 적힌 padding 무시 */
    margin: 0 !important;
    list-style: none;
}

/* 1차 메뉴 아이템 (서브메뉴의 기준점) */
#gnb2 .gnb_list2 > li {
    position: relative !important;  /* ★핵심: 서브메뉴가 '나'를 기준으로 뜸 */
    float: none !important;         /* float 해제 */
    display: block;
    margin: 0 10px;                 /* 메뉴 사이 간격 */
}

/* 1차 메뉴 링크 스타일 */
#gnb2 .gnb_list2 > li > a {
    display: block;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    padding: 0 10px;                /* 클릭 영역 확보 */
    border-bottom: 3px solid transparent;
}

/* 마우스 오버 효과 */
#gnb2 .gnb_list2 > li:hover > a,
#gnb2 .gnb_list2 > li.on > a {
    color: #02fffa;
    border-bottom: 3px solid #0caaf1;
}

/* 4. 2차 메뉴 (서브) - 부모 바로 아래 & 중앙 정렬 */
#gnb2 .gnb_list2 > li > div {
    display: none;                  /* 평소엔 숨김 */
    position: absolute !important;  /* 부모(li) 기준으로 배치 */
    
    /* 위치: 부모 바로 밑 */
    top: 100% !important;
    margin-top: 15px !important;    /* ★ 메인메뉴와 시각적으로 15px 띄움 */
    
    /* ★ 핵심: 부모 기준 정가운데 정렬 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* 박스 스타일 */
    width: auto !important;         /* 내용물만큼만 너비 차지 */
    min-width: 120px;               /* 너무 작아지지 않게 */
    background: rgba(0,0,0,0.8);    /* 반투명 검정 배경 */
    padding: 10px 20px !important;
    border-radius: 5px;
    z-index: 2000;
    white-space: nowrap;            /* 줄바꿈 방지 (한 줄로) */
    text-align: center;
}

/* ★ 핵심 해결책: 투명한 다리 놓기 (마우스 끊김 방지) */
#gnb2 .gnb_list2 > li > div::before {
    content: "";
    display: block;
    position: absolute;
    
    /* 박스 위쪽으로 영역 확장 */
    top: -20px;      /* margin-top(15px)보다 조금 더 크게 */
    left: 0;
    width: 100%;
    height: 20px;    /* 빈 공간을 메꿔줄 높이 */
    
    background: transparent; /* 눈에는 안 보임 */
    z-index: 1;
}

/* 마우스 올리면 보이기 */
#gnb2 .gnb_list2 > li:hover > div {
    display: block !important;
}

/* 2차 메뉴 리스트 (가로 나열) */
#gnb2 .gnb_list2 > li > div > ul {
    display: flex !important;       /* 가로 정렬 */
    justify-content: center;
    align-items: center;
    gap: 20px;                      /* 서브메뉴 간격 */
    
    margin: 0 !important;
    padding: 0 !important;          /* HTML의 padding-left 무시 */
    list-style: none;
}

/* 2차 메뉴 아이템 */
#gnb2 .gnb_list2 > li > div > ul > li {
    float: none !important;
    display: block;
    margin: 0 !important;
}

/* 2차 메뉴 링크 */
#gnb2 .gnb_list2 > li > div > ul > li > a {
    display: block;
    color: #02fffa;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}

#gnb2 .gnb_list2 > li > div > ul > li > a:hover {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}