@charset "utf-8";
/* 메가메뉴 스타일 - main_2025.php 스타일 기반 */

/* 기본 리셋 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Malgun Gothic', '맑은 고딕', Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, li {
    list-style: none;
}

/* 메인 헤더 */
.main-header {
    background-color: white !important;
    padding: 15px 0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

/* 헤더 위쪽 공간도 흰색으로 덮기 */
.main-header::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 50px;
    background: white !important;
    z-index: -1;
}

/* body와 html 배경도 흰색으로 강제 */
body, html {
    background-color: white !important;
}

/* 모든 상위 컨테이너 배경 흰색 고정 */
#wrap, #wrap.sub_wrap, #wrap.main_wrap {
    background-color: white !important;
}

.main-header .container {
    max-width: 1320px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 20px !important;
}

.main-header .logo img {
    height: 45px !important;
}

.main-nav {
    display: flex !important;
    gap: 45px !important;
    align-items: center !important;
}

.main-nav a {
    color: #333 !important;
    display: block !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    transition: color 0.3s !important;
    text-decoration: none !important;
}

.main-nav a:hover {
    color: #7cb342 !important;
}

.main-header .login-btn {
    background-color: #7cb342 !important;
    color: white !important;
    padding: 6px 15px !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
}

/* 메가메뉴 스타일 */
.mega-menu {
    position: absolute !important;
    top: 75px !important; /* 고정값으로 변경 */
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    border-top: 3px solid #7cb342 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    z-index: 1000 !important;
    width: 100% !important;
}

.main-header:hover .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition-delay: 0.1s !important;
}

.mega-menu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.mega-menu-container {
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 40px !important;
}

.mega-menu-column {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important; /* 기본값을 1로 변경 */
    transform: translateY(0) !important; /* 기본 위치 */
    transition: all 0.3s ease !important; /* 애니메이션 대신 트랜지션 사용 */
}

/* 호버시 애니메이션 효과는 JavaScript에서 처리 */
.mega-menu-column.animate {
    animation: fadeInUp 0.6s ease forwards !important;
}

.mega-menu-column.animate:nth-child(1) { animation-delay: 0.1s !important; }
.mega-menu-column.animate:nth-child(2) { animation-delay: 0.2s !important; }
.mega-menu-column.animate:nth-child(3) { animation-delay: 0.3s !important; }
.mega-menu-column.animate:nth-child(4) { animation-delay: 0.4s !important; }
.mega-menu-column.animate:nth-child(5) { animation-delay: 0.5s !important; }

@keyframes fadeInUp {
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

.mega-menu-column h3 {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #2c3e50 !important;
    margin-bottom: 15px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #7cb342 !important;
}

.mega-menu-column ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mega-menu-column li {
    margin-bottom: 8px !important;
}

.mega-menu-column li a {
    color: #666 !important;
    font-size: 14px !important;
    padding: 5px 0 !important;
    display: block !important;
    transition: color 0.3s ease !important;
    text-decoration: none !important;
}

.mega-menu-column li a:hover {
    color: #7cb342 !important;
    padding-left: 8px !important;
}

/* 모바일 메뉴 버튼 */
.m_gnbW {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: none !important; /* 데스크톱에서는 숨김 */
}

/* 반응형 메가메뉴 */
@media (max-width: 1200px) {
    .mega-menu-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
    }
}

@media (max-width: 768px) {
    .mega-menu {
        display: none !important; /* 모바일에서는 숨김 */
    }
    
    .main-nav {
        display: none !important; /* 모바일에서는 메뉴 숨김 */
    }
    
    .m_gnbW {
        display: block !important; /* 모바일에서는 햄버거 메뉴 표시 */
    }
    
    .main-header .container {
        justify-content: space-between !important;
    }
}

/* 페이지 컨텐츠 조정 - 헤더 높이만큼 */
#wrap,
#wrap.sub_wrap,
#wrap.main_wrap {
    padding-top: 75px !important; /* 헤더 높이 75px에 맞게 조정 */
}

/* 기존 헤더 스타일 덮어쓰기 */
/*#header {
    all: unset !important;
}*/

.in_header {
    display: none !important;
}

.w_gnb {
    display: none !important;
}

/* top_menu 위치 조정 */
.top_btns {
    position: absolute !important;
    top: -40px !important;
    right: 0 !important;
}