@charset "utf-8"; /* LWD Basic 메뉴 스킨 스타일 */ .lwd-header-wrap { width: 100%; background: #fff; border-bottom: 1px solid #ddd; } .lwd-header-wrap .container { max-width: 1200px; margin: 0 auto; position: relative; } /* 1. 상단 유틸리티 바 */ .header-top { background: #f8f9fa; border-bottom: 1px solid #eee; height: 35px; line-height: 35px; } .header-top .top-util { display: flex; justify-content: flex-end; list-style: none; margin: 0; padding: 0; } .header-top .top-util li { margin-left: 15px; font-size: 12px; color: #666; } .header-top .top-util li a { color: #666; text-decoration: none; } /* 2. 메인 헤더 */ .header-main { padding: 25px 0; } .header-main .container { display: flex; justify-content: space-between; align-items: center; } .header-main .logo img { max-height: 50px; } .header-search { position: relative; width: 300px; } .header-search input[type="text"] { width: 100%; height: 40px; border: 2px solid #0056b3; padding: 0 40px 0 15px; font-size: 14px; border-radius: 20px; } .header-search button { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: none; border: none; color: #0056b3; font-size: 18px; cursor: pointer; } /* 3. GNB 네비게이션 */ .gnb-wrap { background: #0056b3; } .gnb { display: flex; list-style: none; margin: 0; padding: 0; } .gnb-item { position: relative; } .gnb-link { display: block; padding: 0 25px; height: 50px; line-height: 50px; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; transition: background-color 0.2s; } .gnb-item:hover .gnb-link { background-color: #004494; } /* 서브 메뉴 */ .gnb-sub { display: none; position: absolute; top: 50px; left: 0; min-width: 180px; background: #fff; border: 1px solid #ddd; box-shadow: 0 5px 10px rgba(0,0,0,0.1); z-index: 999; list-style: none; padding: 10px 0; } .gnb-item:hover .gnb-sub { display: block; } .gnb-sub li a { display: block; padding: 10px 20px; color: #333; font-size: 14px; text-decoration: none; transition: background-color 0.2s, color 0.2s; /* 💡 [추가] 부드러운 전환 효과 */ } /* 💡 [핵심] 하위 메뉴 호버 효과 추가 */ .gnb-sub li a:hover { background-color: #f0f2f5; /* 밝은 회색 배경 */ color: #0056b3; /* 메인 테마 색상 */ }