first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,221 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
/**
|
||||
* skin/nav/lwd_basic/nav.skin.php
|
||||
* LWD 미디어 스타일 메뉴 스킨 (PC 전용)
|
||||
*/
|
||||
|
||||
// 💡 [추가] 스킨의 CSS 파일 로드
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/skin/nav/lwd_laser/style.css?ver='.G5_SERVER_TIME.'">', 0);
|
||||
?>
|
||||
<style>
|
||||
/* 메뉴 가로폭 연동 (설정값이 없으면 기본 1600px 적용) */
|
||||
.lwd-header-wrap .container {
|
||||
max-width: <?php echo (isset($rb_core['tb_width']) && $rb_core['tb_width'] ? $rb_core['tb_width'] : '1600') ?>px !important;
|
||||
width: 100% !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
/* 메뉴 폰트 연동 (설정값이 있을 때만 작동) */
|
||||
<?php if(isset($rb_core['font']) && $rb_core['font']) { ?>
|
||||
.lwd-header-wrap,
|
||||
.lwd-header-wrap *,
|
||||
.gnb-txt-ko,
|
||||
.gnb-txt-en,
|
||||
.sub-txt-ko,
|
||||
.sub-txt-en {
|
||||
font-family: 'font-R', '<?php echo $rb_core['font'] ?>', sans-serif !important;
|
||||
}
|
||||
|
||||
/* 굵은 글씨가 필요한 부분 별도 지정 */
|
||||
.gnb-txt-ko,
|
||||
.sub-txt-ko,
|
||||
.header-top .top-util li a {
|
||||
font-family: 'font-B', '<?php echo $rb_core['font'] ?>', sans-serif !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
<?php } ?>
|
||||
</style>
|
||||
|
||||
|
||||
<?php
|
||||
|
||||
// 메뉴 데이터 가져오기 (그누보드 공통 함수 사용)
|
||||
$menu_datas = get_menu_db(0, false);
|
||||
|
||||
// 배너 데이터 가져오기 (최신 1개)
|
||||
$bn_left = sql_fetch(" select * from rb_banner where '".G5_TIME_YMDHIS."' between bn_begin_time and bn_end_time and bn_position = 'topbanner_left' and bn_device IN ('pc', 'both') order by bn_id desc limit 1 ");
|
||||
$bn_right = sql_fetch(" select * from rb_banner where '".G5_TIME_YMDHIS."' between bn_begin_time and bn_end_time and bn_position = 'topbanner_rite' and bn_device IN ('pc', 'both') order by bn_id desc limit 1 ");
|
||||
|
||||
// 💡 [추가] 한글/영문 분리 함수
|
||||
function split_menu_name($name) {
|
||||
$ko = '';
|
||||
$en = '';
|
||||
|
||||
// 1. 한글과 영문의 시작 위치 찾기
|
||||
$pos_ko = -1;
|
||||
$pos_en = -1;
|
||||
|
||||
if (preg_match('/[가-힣]/u', $name, $matches, PREG_OFFSET_CAPTURE)) {
|
||||
$pos_ko = $matches[0][1];
|
||||
}
|
||||
if (preg_match('/[a-zA-Z]/', $name, $matches, PREG_OFFSET_CAPTURE)) {
|
||||
$pos_en = $matches[0][1];
|
||||
}
|
||||
|
||||
// 2. 위치에 따라 분리
|
||||
if ($pos_ko !== -1 && $pos_en !== -1) {
|
||||
if ($pos_ko < $pos_en) {
|
||||
// 한글이 먼저 나오는 경우: 영문 시작 위치 기준으로 분리
|
||||
// 예: "한글 12 English" -> ko="한글 12", en="English"
|
||||
$ko = substr($name, 0, $pos_en);
|
||||
$en = substr($name, $pos_en);
|
||||
} else {
|
||||
// 영문이 먼저 나오는 경우: 한글 시작 위치 기준으로 분리
|
||||
// 예: "English 12 한글" -> en="English 12", ko="한글"
|
||||
$en = substr($name, 0, $pos_ko);
|
||||
$ko = substr($name, $pos_ko);
|
||||
}
|
||||
} elseif ($pos_ko !== -1) {
|
||||
// 한글만 있는 경우
|
||||
$ko = $name;
|
||||
} elseif ($pos_en !== -1) {
|
||||
// 영문만 있는 경우
|
||||
$en = $name;
|
||||
} else {
|
||||
// 둘 다 없는 경우 (숫자 등) -> 한글 변수에 담음
|
||||
$ko = $name;
|
||||
}
|
||||
|
||||
return array(trim($ko), trim($en));
|
||||
}
|
||||
|
||||
// 💡 [추가] URL에서 bo_table 파라미터 추출 함수
|
||||
function get_bo_table_from_url($url) {
|
||||
$query_str = parse_url($url, PHP_URL_QUERY);
|
||||
parse_str($query_str, $query_params);
|
||||
return isset($query_params['bo_table']) ? $query_params['bo_table'] : '';
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="lwd-header-wrap">
|
||||
<!-- 1. 상단 유틸리티 바 (로그인, 회원가입 등) -->
|
||||
<div class="header-top">
|
||||
<div class="container" style="display:flex; justify-content:space-between; align-items:center;">
|
||||
|
||||
|
||||
<ul class="top-util">
|
||||
<?php if ($is_member) { ?>
|
||||
<li><a href="<?php echo G5_BBS_URL ?>/logout.php">로그아웃</a></li>
|
||||
<li><a href="<?php echo G5_BBS_URL ?>/member_confirm.php?url=<?php echo G5_BBS_URL ?>/register_form.php">정보수정</a></li>
|
||||
<?php } else { ?>
|
||||
<li><a href="<?php echo G5_BBS_URL ?>/login.php">로그인</a></li>
|
||||
<li><a href="<?php echo G5_BBS_URL ?>/register.php">회원가입</a></li>
|
||||
<?php } ?>
|
||||
<li><a href="<?php echo G5_BBS_URL ?>/faq.php">고객센터</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 메인 헤더 (로고, 검색창) -->
|
||||
<div class="header-main">
|
||||
<div class="container" style="display:flex; align-items:center;">
|
||||
<!-- 왼쪽 배너 -->
|
||||
<div class="banner-left">
|
||||
<?php if ($bn_left) {
|
||||
$bimg = G5_DATA_PATH.'/banners/'.$bn_left['bn_id'];
|
||||
if (file_exists($bimg)) {
|
||||
echo '<a href="'.$bn_left['bn_url'].'" target="'.($bn_left['bn_new_win']?'_blank':'_self').'">';
|
||||
echo '<img src="'.G5_DATA_URL.'/banners/'.$bn_left['bn_id'].'" alt="'.get_text($bn_left['bn_alt']).'" style="max-width:100%;">';
|
||||
echo '</a>';
|
||||
}
|
||||
} ?>
|
||||
</div>
|
||||
|
||||
<!-- 💡 [수정] 인라인 스타일 제거하고 CSS로 제어 -->
|
||||
<h1 class="logo">
|
||||
<a href="<?php echo G5_URL ?>" alt="<?php echo $config['cf_title']; ?>">
|
||||
<picture id="logo_img">
|
||||
<?php if (!empty($rb_builder['bu_logo_mo']) && !empty($rb_builder['bu_logo_mo_w'])) { ?>
|
||||
<source id="sourceSmall" srcset="<?php echo G5_URL ?>/data/logos/mo?ver=<?php echo G5_SERVER_TIME ?>" media="(max-width: 1024px)">
|
||||
<?php } else { ?>
|
||||
<source id="sourceSmall" srcset="<?php echo G5_THEME_URL ?>/rb.img/logos/mo.png?ver=<?php echo G5_SERVER_TIME ?>" media="(max-width: 1024px)">
|
||||
<?php } ?>
|
||||
|
||||
<?php if (!empty($rb_builder['bu_logo_pc']) && !empty($rb_builder['bu_logo_pc_w'])) { ?>
|
||||
<source id="sourceLarge" srcset="<?php echo G5_URL ?>/data/logos/pc?ver=<?php echo G5_SERVER_TIME ?>" media="(min-width: 1025px)">
|
||||
<?php } else { ?>
|
||||
<source id="sourceLarge" srcset="<?php echo G5_THEME_URL ?>/rb.img/logos/pc.png?ver=<?php echo G5_SERVER_TIME ?>" media="(max-width: 1024px)">
|
||||
<?php } ?>
|
||||
|
||||
<?php if (!empty($rb_builder['bu_logo_pc']) && !empty($rb_builder['bu_logo_pc_w'])) { ?>
|
||||
<img id="fallbackImage" src="<?php echo G5_URL ?>/data/logos/pc?ver=<?php echo G5_SERVER_TIME ?>" alt="<?php echo $config['cf_title']; ?>" class="responsive-image">
|
||||
<?php } else { ?>
|
||||
<img id="fallbackImage" src="<?php echo G5_THEME_URL ?>/rb.img/logos/pc.png?ver=<?php echo G5_SERVER_TIME ?>" alt="<?php echo $config['cf_title']; ?>" class="responsive-image">
|
||||
<?php } ?>
|
||||
</picture>
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<!-- 오른쪽 배너 -->
|
||||
<div class="banner-right">
|
||||
<?php if ($bn_right) {
|
||||
$bimg = G5_DATA_PATH.'/banners/'.$bn_right['bn_id'];
|
||||
if (file_exists($bimg)) {
|
||||
echo '<a href="'.$bn_right['bn_url'].'" target="'.($bn_right['bn_new_win']?'_blank':'_self').'">';
|
||||
echo '<img src="'.G5_DATA_URL.'/banners/'.$bn_right['bn_id'].'" alt="'.get_text($bn_right['bn_alt']).'" style="max-width:100%;">';
|
||||
echo '</a>';
|
||||
}
|
||||
} ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. GNB 네비게이션 -->
|
||||
<nav class="gnb-wrap">
|
||||
<div class="container">
|
||||
<ul class="gnb">
|
||||
<?php foreach ($menu_datas as $row) {
|
||||
// 💡 [수정] 함수 사용하여 분리
|
||||
list($name_ko, $name_en) = split_menu_name($row['me_name']);
|
||||
?>
|
||||
<li class="gnb-item <?php echo isset($row['sub']) && count($row['sub']) > 0 ? 'has-sub' : ''; ?>">
|
||||
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb-link">
|
||||
<span class="gnb-txt-ko"><?php echo $name_ko ?></span>
|
||||
<?php if($name_en) { ?><span class="gnb-txt-en"><?php echo $name_en ?></span><?php } ?>
|
||||
</a>
|
||||
<?php if (isset($row['sub']) && count($row['sub']) > 0) { ?>
|
||||
<ul class="gnb-sub">
|
||||
<?php foreach ($row['sub'] as $sub) {
|
||||
// 💡 [수정] 함수 사용하여 분리
|
||||
list($sub_ko, $sub_en) = split_menu_name($sub['me_name']);
|
||||
?>
|
||||
<li>
|
||||
<a href="<?php echo $sub['me_link']; ?>" target="_<?php echo $sub['me_target']; ?>">
|
||||
<span class="sub-txt-ko"><?php echo $sub_ko ?></span>
|
||||
<?php if($sub_en) { ?><span class="sub-txt-en"><?php echo $sub_en ?></span><?php } ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
<?php } ?>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function fsearchbox_submit(f)
|
||||
{
|
||||
if (f.stx.value.length < 2) {
|
||||
alert("검색어는 두글자 이상 입력하십시오.");
|
||||
f.stx.select();
|
||||
f.stx.focus();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,585 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/* LWD Basic 메뉴 스킨 스타일 (nobeltimes.com 참고) */
|
||||
|
||||
.lwd-header-wrap {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.lwd-header-wrap .container {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
/* 1. 상단 헤더 (로고, 검색, 유틸) */
|
||||
.header-top {
|
||||
border-bottom: 1px solid #eee;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header-top .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.header-top .logo {
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-top .logo img {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
flex-grow: 1;
|
||||
max-width: 400px;
|
||||
margin: 0 30px; /* 간격 조정 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-search input[type="text"] {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 2px solid #0056b3; /* 포인트 컬러 적용 */
|
||||
padding: 0 45px 0 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-search button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0056b3;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-top .top-util {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.header-top .top-util li {
|
||||
margin-left: 20px;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-top .top-util li a {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.header-top .top-util li a:hover {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* 2. 메인 헤더 (로고, 배너) */
|
||||
.header-main {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.header-main .container {
|
||||
display: flex;
|
||||
justify-content: center; /* 💡 [수정] 중앙 정렬 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-main .logo {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 100px; /* 💡 [수정] 로고 좌우 여백 확대 */
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header-main .logo img {
|
||||
height: 120px;
|
||||
width: auto;
|
||||
max-width: none; /* 이미지 너비 제한 해제 */
|
||||
}
|
||||
|
||||
/* 배너 영역 */
|
||||
.header-main .banner-left,
|
||||
.header-main .banner-right {
|
||||
/* 💡 [수정] 고정 크기 420x120px */
|
||||
flex: 0 0 300px;
|
||||
width: 300px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
margin: 0; /* 기존 여백 제거 */
|
||||
}
|
||||
|
||||
.header-main .banner-left {
|
||||
justify-content: flex-start; /* 로고 쪽으로 붙임 */
|
||||
/* margin-right: 80px; */
|
||||
}
|
||||
|
||||
.header-main .banner-right {
|
||||
justify-content: flex-start; /* 로고 쪽으로 붙임 */
|
||||
/* margin-left: 80px; */
|
||||
}
|
||||
|
||||
.header-main .banner-left a,
|
||||
.header-main .banner-right a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-main .banner-left img,
|
||||
.header-main .banner-right img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill; /* 💡 [수정] 420x120에 꽉 차게 (비율 무시) */
|
||||
/* object-fit: cover; 비율 유지하며 꽉 채우려면 이걸 사용 */
|
||||
}
|
||||
|
||||
|
||||
/* 3. GNB 네비게이션 */
|
||||
.gnb-wrap {
|
||||
background: #0056b3;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.gnb {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gnb-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* GNB 링크 스타일 (2줄 표시) */
|
||||
.gnb-link {
|
||||
display: flex;
|
||||
flex-direction: column; /* 세로 정렬 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 25px;
|
||||
height: 60px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s;
|
||||
text-align: center;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.gnb-txt-ko {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.gnb-txt-en {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
margin-top: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-link {
|
||||
background-color: #004494;
|
||||
text-decoration: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-link::before,
|
||||
.gnb-item:hover .gnb-link::after,
|
||||
.gnb-link::before,
|
||||
.gnb-link::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
opacity: 0 !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* 서브 메뉴 스타일 */
|
||||
.gnb-sub {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 300px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(5px);
|
||||
border: none;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
|
||||
z-index: 999;
|
||||
list-style: none;
|
||||
padding: 15px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-sub {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gnb-sub li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gnb-sub li a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.sub-txt-ko {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.sub-txt-en {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gnb-sub li a:hover {
|
||||
background-color: #f0f2f5;
|
||||
color: #0056b3;
|
||||
text-decoration: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
.gnb-sub li a:hover .sub-txt-en {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* 모바일 햄버거 버튼 */
|
||||
#m_gnb_open_btn {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
#m_gnb_open_btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 반응형 이미지 클래스 */
|
||||
.responsive-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
.pc-only { display: block; }
|
||||
.mobile-only { display: none; }
|
||||
|
||||
/* 💡 [수정] 모바일 브레이크포인트를 1024px로 조정하여 로고와 일치시킴 */
|
||||
@media (max-width: 1024px) {
|
||||
.pc-only { display: none !important; }
|
||||
.mobile-only { display: block !important; }
|
||||
|
||||
.header-top .container {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-top .logo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0 0 15px 0;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.header-top .top-util {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
order: 1;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.gnb-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* mobile-menu-btn은 .header-main .container 내부에 있으므로,
|
||||
.header-main .container의 position: relative에 따라 위치합니다.
|
||||
기본값은 .mobile-menu-btn에 설정되어 있습니다.
|
||||
TYPE 1과 TYPE 2에서 필요에 따라 재정의합니다.
|
||||
*/
|
||||
|
||||
.header-main {
|
||||
padding: 5px 0; /* 💡 [수정] 모바일 헤더 여백 대폭 축소 */
|
||||
}
|
||||
|
||||
.header-main .container {
|
||||
position: relative;
|
||||
min-height: 50px; /* 최소 높이 확보 */
|
||||
flex-wrap: wrap;
|
||||
/* 💡 [수정] TYPE 2를 위해 align-items를 flex-start로 변경 */
|
||||
align-items: flex-start;
|
||||
padding-top: 10px; /* 💡 [추가] 컨테이너 상단 패딩 */
|
||||
padding-bottom: 10px; /* 💡 [추가] 컨테이너 하단 패딩 */
|
||||
}
|
||||
|
||||
/* 💡 [수정] 모바일 헤더 레이아웃 설정에 따른 스타일 */
|
||||
|
||||
/* 공통: 로고 스타일 */
|
||||
.header-main .logo {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
order: 1;
|
||||
}
|
||||
.header-main .logo img {
|
||||
height: 80px;
|
||||
width: 300px;
|
||||
}
|
||||
.header-main .banner-left img,
|
||||
.header-main .banner-right img {
|
||||
width: 320px;
|
||||
height: 80px;
|
||||
object-fit: fill; /* 💡 [수정] 420x120에 꽉 차게 (비율 무시) */
|
||||
/* object-fit: cover; 비율 유지하며 꽉 채우려면 이걸 사용 */
|
||||
}
|
||||
/* TYPE 1: 로고만 표시 (배너 숨김) */
|
||||
.mobile-header-type-1 .banner-left,
|
||||
.mobile-header-type-1 .banner-right {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile-header-type-1 .logo {
|
||||
flex: 1; /* Type 1에서는 로고가 공간을 차지하도록 유지 */
|
||||
text-align: center; /* 로고 중앙 정렬 */
|
||||
}
|
||||
.mobile-header-type-1 .mobile-menu-btn {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1001; /* 햄버거 메뉴 z-index 유지 */
|
||||
}
|
||||
|
||||
|
||||
/* TYPE 2: 로고 + 배너 세로 나열 (로고 -> 좌측배너 -> 우측배너) */
|
||||
.mobile-header-type-2 .logo {
|
||||
width: 100%; /* 💡 [수정] 로고가 전체 너비를 차지하도록 */
|
||||
text-align: center; /* 💡 [수정] 로고 중앙 정렬 */
|
||||
flex: none; /* 💡 [수정] flex 속성 제거하여 크기 고정 */
|
||||
order: 1;
|
||||
margin-bottom: 10px; /* 💡 [추가] 로고 아래 여백 */
|
||||
}
|
||||
|
||||
.mobile-header-type-2 .banner-left,
|
||||
.mobile-header-type-2 .banner-right {
|
||||
display: flex !important;
|
||||
flex: 0 0 100%; /* 한 줄 전체 차지 */
|
||||
max-width: 100%;
|
||||
width: 100%; /* 💡 [수정] 모바일에서는 너비 100% */
|
||||
height: auto; /* 💡 [수정] 모바일에서는 높이 자동 */
|
||||
justify-content: center;
|
||||
margin: 5px 0; /* 💡 [수정] 세로 여백 조정 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile-header-type-2 .banner-left { order: 2; }
|
||||
.mobile-header-type-2 .banner-right { order: 3; }
|
||||
|
||||
.mobile-header-type-2 .mobile-menu-btn {
|
||||
z-index: 1001; /* 💡 [수정] 햄버거 메뉴가 항상 위에 오도록 */
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px; /* 💡 [수정] 헤더 상단에 고정 */
|
||||
transform: none; /* 💡 [수정] 세로 중앙 정렬 해제 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 모바일 메뉴 패널 스타일 */
|
||||
#mobile-nav-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: auto !important; /* 💡 [수정] 너비 자동 (강제 적용) */
|
||||
min-width: 250px; /* 최소 너비 */
|
||||
max-width: 85%; /* 최대 너비 */
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.85); /* 💡 [수정] 배경 투명도 적용 */
|
||||
z-index: 1003;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.4s ease;
|
||||
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#mobile-nav-panel.is-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#mobile-nav-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.01); /* 💡 [수정] 배경 투명도 0.01 */
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
#mobile-nav-overlay.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-nav-header {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-mobile-login, .btn-mobile-join {
|
||||
padding: 8px 15px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-mobile-login {
|
||||
border: 1px solid #ddd;
|
||||
color: #333;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn-mobile-join {
|
||||
background: #0056b3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mobile-menu-close-btn {
|
||||
font-size: 1.8rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mobile-gnb {
|
||||
padding: 0;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-gnb ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* 💡 [수정] 내용에 따라 너비가 늘어나도록 설정 */
|
||||
white-space: nowrap; /* 다시 복원 */
|
||||
}
|
||||
|
||||
.mobile-gnb ul li {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.mobile-gnb ul li a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px; /* 💡 [수정] 메뉴 항목 여백 축소 */
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu {
|
||||
display: none;
|
||||
background: #f9f9f9;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu li {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu li a {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
padding: 8px 25px; /* 💡 [수정] 서브메뉴 여백 축소 */
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.sub-menu-indicator {
|
||||
transition: transform 0.3s;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.mobile-gnb li.submenu-open .sub-menu-indicator {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.mobile-gnb li.submenu-open > .sub-menu {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,565 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/* LWD Basic 메뉴 스킨 스타일 (nobeltimes.com 참고) */
|
||||
|
||||
.lwd-header-wrap {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.lwd-header-wrap .container {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
/* 1. 상단 헤더 (로고, 검색, 유틸) */
|
||||
.header-top {
|
||||
border-bottom: 1px solid #eee;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header-top .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.header-top .logo {
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-top .logo img {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
flex-grow: 1;
|
||||
max-width: 400px;
|
||||
margin: 0 30px; /* 간격 조정 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-search input[type="text"] {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 2px solid #0056b3; /* 포인트 컬러 적용 */
|
||||
padding: 0 45px 0 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-search button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0056b3;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-top .top-util {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.header-top .top-util li {
|
||||
margin-left: 20px;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-top .top-util li a {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.header-top .top-util li a:hover {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* 2. 메인 헤더 (로고, 배너) */
|
||||
.header-main {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.header-main .container {
|
||||
display: flex;
|
||||
justify-content: center; /* 💡 [수정] 중앙 정렬 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-main .logo {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 60px; /* 💡 [수정] 로고 좌우 여백 확대 */
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header-main .logo img {
|
||||
height: 120px;
|
||||
width: auto;
|
||||
max-width: none; /* 이미지 너비 제한 해제 */
|
||||
}
|
||||
|
||||
/* 배너 영역 */
|
||||
.header-main .banner-left,
|
||||
.header-main .banner-right {
|
||||
/* 💡 [수정] 고정 크기 420x120px */
|
||||
flex: 0 0 420px;
|
||||
width: 420px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
margin: 0; /* 기존 여백 제거 */
|
||||
}
|
||||
|
||||
.header-main .banner-left {
|
||||
/*justify-content: flex-end; !* 로고 쪽으로 붙임 *!*/
|
||||
}
|
||||
|
||||
.header-main .banner-right {
|
||||
/*justify-content: flex-start; !* 로고 쪽으로 붙임 *!*/
|
||||
}
|
||||
|
||||
.header-main .banner-left a,
|
||||
.header-main .banner-right a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-main .banner-left img,
|
||||
.header-main .banner-right img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill; /* 💡 [수정] 420x120에 꽉 차게 (비율 무시) */
|
||||
/* object-fit: cover; 비율 유지하며 꽉 채우려면 이걸 사용 */
|
||||
}
|
||||
|
||||
|
||||
/* 3. GNB 네비게이션 */
|
||||
.gnb-wrap {
|
||||
background: #0056b3;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.gnb {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gnb-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* GNB 링크 스타일 (2줄 표시) */
|
||||
.gnb-link {
|
||||
display: flex;
|
||||
flex-direction: column; /* 세로 정렬 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 25px;
|
||||
height: 60px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s;
|
||||
text-align: center;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.gnb-txt-ko {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.gnb-txt-en {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
margin-top: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-link {
|
||||
background-color: #004494;
|
||||
text-decoration: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-link::before,
|
||||
.gnb-item:hover .gnb-link::after,
|
||||
.gnb-link::before,
|
||||
.gnb-link::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
opacity: 0 !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* 서브 메뉴 스타일 */
|
||||
.gnb-sub {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 300px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(5px);
|
||||
border: none;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
|
||||
z-index: 999;
|
||||
list-style: none;
|
||||
padding: 15px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-sub {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gnb-sub li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gnb-sub li a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.sub-txt-ko {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.sub-txt-en {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gnb-sub li a:hover {
|
||||
background-color: #f0f2f5;
|
||||
color: #0056b3;
|
||||
text-decoration: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
.gnb-sub li a:hover .sub-txt-en {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* 모바일 햄버거 버튼 */
|
||||
.mobile-menu-btn {
|
||||
display: block; /* Default to block for mobile */
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100; /* Ensure it's on top */
|
||||
}
|
||||
|
||||
/* 반응형 이미지 클래스 */
|
||||
.responsive-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
.pc-only { display: block; }
|
||||
.mobile-only { display: none; }
|
||||
|
||||
/* 💡 [수정] 모바일 브레이크포인트를 1024px로 조정하여 로고와 일치시킴 */
|
||||
@media (max-width: 1024px) {
|
||||
.pc-only { display: none !important; }
|
||||
.mobile-only { display: block !important; }
|
||||
|
||||
.header-top .container {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-top .logo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0 0 15px 0;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.header-top .top-util {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
order: 1;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.gnb-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* mobile-menu-btn은 .header-main .container 내부에 있으므로,
|
||||
.header-main .container의 position: relative에 따라 위치합니다.
|
||||
기본값은 .mobile-menu-btn에 설정되어 있습니다.
|
||||
TYPE 1과 TYPE 2에서 필요에 따라 재정의합니다.
|
||||
*/
|
||||
|
||||
.header-main {
|
||||
padding: 5px 0; /* 💡 [수정] 모바일 헤더 여백 대폭 축소 */
|
||||
}
|
||||
|
||||
.header-main .container {
|
||||
position: relative;
|
||||
min-height: 50px; /* 최소 높이 확보 */
|
||||
flex-wrap: wrap;
|
||||
/* 💡 [수정] TYPE 2를 위해 align-items를 flex-start로 변경 */
|
||||
align-items: flex-start;
|
||||
padding-top: 10px; /* 💡 [추가] 컨테이너 상단 패딩 */
|
||||
padding-bottom: 10px; /* 💡 [추가] 컨테이너 하단 패딩 */
|
||||
}
|
||||
|
||||
/* 💡 [수정] 모바일 헤더 레이아웃 설정에 따른 스타일 */
|
||||
|
||||
/* 공통: 로고 스타일 */
|
||||
.header-main .logo {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
order: 1;
|
||||
}
|
||||
.header-main .logo img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* TYPE 1: 로고만 표시 (배너 숨김) */
|
||||
.mobile-header-type-1 .banner-left,
|
||||
.mobile-header-type-1 .banner-right {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile-header-type-1 .logo {
|
||||
flex: 1; /* Type 1에서는 로고가 공간을 차지하도록 유지 */
|
||||
text-align: center; /* 로고 중앙 정렬 */
|
||||
}
|
||||
.mobile-header-type-1 .mobile-menu-btn {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1001; /* 햄버거 메뉴 z-index 유지 */
|
||||
}
|
||||
|
||||
|
||||
/* TYPE 2: 로고 + 배너 세로 나열 (로고 -> 좌측배너 -> 우측배너) */
|
||||
.mobile-header-type-2 .logo {
|
||||
width: 100%; /* 💡 [수정] 로고가 전체 너비를 차지하도록 */
|
||||
text-align: center; /* 💡 [수정] 로고 중앙 정렬 */
|
||||
flex: none; /* 💡 [수정] flex 속성 제거하여 크기 고정 */
|
||||
order: 1;
|
||||
margin-bottom: 10px; /* 💡 [추가] 로고 아래 여백 */
|
||||
}
|
||||
|
||||
.mobile-header-type-2 .banner-left,
|
||||
.mobile-header-type-2 .banner-right {
|
||||
display: flex !important;
|
||||
flex: 0 0 100%; /* 한 줄 전체 차지 */
|
||||
max-width: 100%;
|
||||
width: 100%; /* 💡 [수정] 모바일에서는 너비 100% */
|
||||
height: auto; /* 💡 [수정] 모바일에서는 높이 자동 */
|
||||
justify-content: center;
|
||||
margin: 5px 0; /* 💡 [수정] 세로 여백 조정 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile-header-type-2 .banner-left { order: 2; }
|
||||
.mobile-header-type-2 .banner-right { order: 3; }
|
||||
|
||||
.mobile-header-type-2 .mobile-menu-btn {
|
||||
z-index: 1001; /* 💡 [수정] 햄버거 메뉴가 항상 위에 오도록 */
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px; /* 💡 [수정] 헤더 상단에 고정 */
|
||||
transform: none; /* 💡 [수정] 세로 중앙 정렬 해제 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 모바일 메뉴 패널 스타일 */
|
||||
#mobile-nav-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: auto !important; /* 💡 [수정] 너비 자동 (강제 적용) */
|
||||
min-width: 250px; /* 최소 너비 */
|
||||
max-width: 85%; /* 최대 너비 */
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.85); /* 💡 [수정] 배경 투명도 적용 */
|
||||
z-index: 1003;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.4s ease;
|
||||
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#mobile-nav-panel.is-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#mobile-nav-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.01); /* 💡 [수정] 배경 투명도 0.01 */
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
#mobile-nav-overlay.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-nav-header {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-mobile-login, .btn-mobile-join {
|
||||
padding: 8px 15px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-mobile-login {
|
||||
border: 1px solid #ddd;
|
||||
color: #333;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn-mobile-join {
|
||||
background: #0056b3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mobile-menu-close-btn {
|
||||
font-size: 1.8rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mobile-gnb {
|
||||
padding: 0;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-gnb ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* 💡 [수정] 내용에 따라 너비가 늘어나도록 설정 */
|
||||
white-space: nowrap; /* 다시 복원 */
|
||||
}
|
||||
|
||||
.mobile-gnb ul li {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.mobile-gnb ul li a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px; /* 💡 [수정] 메뉴 항목 여백 축소 */
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu {
|
||||
display: none;
|
||||
background: #f9f9f9;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu li {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu li a {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
padding: 8px 25px; /* 💡 [수정] 서브메뉴 여백 축소 */
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.sub-menu-indicator {
|
||||
transition: transform 0.3s;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.mobile-gnb li.submenu-open .sub-menu-indicator {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.mobile-gnb li.submenu-open > .sub-menu {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,567 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/* LWD Basic 메뉴 스킨 스타일 (nobeltimes.com 참고) */
|
||||
|
||||
.lwd-header-wrap {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.lwd-header-wrap .container {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
/* 1. 상단 헤더 (로고, 검색, 유틸) */
|
||||
.header-top {
|
||||
border-bottom: 1px solid #eee;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header-top .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.header-top .logo {
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-top .logo img {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
flex-grow: 1;
|
||||
max-width: 400px;
|
||||
margin: 0 30px; /* 간격 조정 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-search input[type="text"] {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 2px solid #0056b3; /* 포인트 컬러 적용 */
|
||||
padding: 0 45px 0 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-search button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0056b3;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-top .top-util {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.header-top .top-util li {
|
||||
margin-left: 20px;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-top .top-util li a {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.header-top .top-util li a:hover {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* 2. 메인 헤더 (로고, 배너) */
|
||||
.header-main {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.header-main .container {
|
||||
display: flex;
|
||||
justify-content: center; /* 💡 [수정] 중앙 정렬 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-main .logo {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 100px; /* 💡 [수정] 로고 좌우 여백 확대 */
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header-main .logo img {
|
||||
height: 120px;
|
||||
width: auto;
|
||||
max-width: none; /* 이미지 너비 제한 해제 */
|
||||
}
|
||||
|
||||
/* 배너 영역 */
|
||||
.header-main .banner-left,
|
||||
.header-main .banner-right {
|
||||
/* 💡 [수정] 고정 크기 420x120px */
|
||||
flex: 0 0 300px;
|
||||
width: 300px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
margin: 0; /* 기존 여백 제거 */
|
||||
}
|
||||
|
||||
.header-main .banner-left {
|
||||
justify-content: flex-start; /* 로고 쪽으로 붙임 */
|
||||
/* margin-right: 80px; */
|
||||
}
|
||||
|
||||
.header-main .banner-right {
|
||||
justify-content: flex-start; /* 로고 쪽으로 붙임 */
|
||||
/* margin-left: 80px; */
|
||||
}
|
||||
|
||||
.header-main .banner-left a,
|
||||
.header-main .banner-right a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-main .banner-left img,
|
||||
.header-main .banner-right img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill; /* 💡 [수정] 420x120에 꽉 차게 (비율 무시) */
|
||||
/* object-fit: cover; 비율 유지하며 꽉 채우려면 이걸 사용 */
|
||||
}
|
||||
|
||||
|
||||
/* 3. GNB 네비게이션 */
|
||||
.gnb-wrap {
|
||||
background: #0056b3;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.gnb {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gnb-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* GNB 링크 스타일 (2줄 표시) */
|
||||
.gnb-link {
|
||||
display: flex;
|
||||
flex-direction: column; /* 세로 정렬 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 25px;
|
||||
height: 60px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s;
|
||||
text-align: center;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.gnb-txt-ko {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.gnb-txt-en {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
margin-top: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-link {
|
||||
background-color: #004494;
|
||||
text-decoration: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-link::before,
|
||||
.gnb-item:hover .gnb-link::after,
|
||||
.gnb-link::before,
|
||||
.gnb-link::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
opacity: 0 !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* 서브 메뉴 스타일 */
|
||||
.gnb-sub {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 300px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(5px);
|
||||
border: none;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
|
||||
z-index: 999;
|
||||
list-style: none;
|
||||
padding: 15px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-sub {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gnb-sub li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gnb-sub li a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.sub-txt-ko {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.sub-txt-en {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gnb-sub li a:hover {
|
||||
background-color: #f0f2f5;
|
||||
color: #0056b3;
|
||||
text-decoration: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
.gnb-sub li a:hover .sub-txt-en {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* 모바일 햄버거 버튼 */
|
||||
.mobile-menu-btn {
|
||||
display: block; /* Default to block for mobile */
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100; /* Ensure it's on top */
|
||||
}
|
||||
|
||||
/* 반응형 이미지 클래스 */
|
||||
.responsive-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
.pc-only { display: block; }
|
||||
.mobile-only { display: none; }
|
||||
|
||||
/* 💡 [수정] 모바일 브레이크포인트를 1024px로 조정하여 로고와 일치시킴 */
|
||||
@media (max-width: 1024px) {
|
||||
.pc-only { display: none !important; }
|
||||
.mobile-only { display: block !important; }
|
||||
|
||||
.header-top .container {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-top .logo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0 0 15px 0;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.header-top .top-util {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
order: 1;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.gnb-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* mobile-menu-btn은 .header-main .container 내부에 있으므로,
|
||||
.header-main .container의 position: relative에 따라 위치합니다.
|
||||
기본값은 .mobile-menu-btn에 설정되어 있습니다.
|
||||
TYPE 1과 TYPE 2에서 필요에 따라 재정의합니다.
|
||||
*/
|
||||
|
||||
.header-main {
|
||||
padding: 5px 0; /* 💡 [수정] 모바일 헤더 여백 대폭 축소 */
|
||||
}
|
||||
|
||||
.header-main .container {
|
||||
position: relative;
|
||||
min-height: 50px; /* 최소 높이 확보 */
|
||||
flex-wrap: wrap;
|
||||
/* 💡 [수정] TYPE 2를 위해 align-items를 flex-start로 변경 */
|
||||
align-items: flex-start;
|
||||
padding-top: 10px; /* 💡 [추가] 컨테이너 상단 패딩 */
|
||||
padding-bottom: 10px; /* 💡 [추가] 컨테이너 하단 패딩 */
|
||||
}
|
||||
|
||||
/* 💡 [수정] 모바일 헤더 레이아웃 설정에 따른 스타일 */
|
||||
|
||||
/* 공통: 로고 스타일 */
|
||||
.header-main .logo {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
order: 1;
|
||||
}
|
||||
.header-main .logo img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* TYPE 1: 로고만 표시 (배너 숨김) */
|
||||
.mobile-header-type-1 .banner-left,
|
||||
.mobile-header-type-1 .banner-right {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile-header-type-1 .logo {
|
||||
flex: 1; /* Type 1에서는 로고가 공간을 차지하도록 유지 */
|
||||
text-align: center; /* 로고 중앙 정렬 */
|
||||
}
|
||||
.mobile-header-type-1 .mobile-menu-btn {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1001; /* 햄버거 메뉴 z-index 유지 */
|
||||
}
|
||||
|
||||
|
||||
/* TYPE 2: 로고 + 배너 세로 나열 (로고 -> 좌측배너 -> 우측배너) */
|
||||
.mobile-header-type-2 .logo {
|
||||
width: 100%; /* 💡 [수정] 로고가 전체 너비를 차지하도록 */
|
||||
text-align: center; /* 💡 [수정] 로고 중앙 정렬 */
|
||||
flex: none; /* 💡 [수정] flex 속성 제거하여 크기 고정 */
|
||||
order: 1;
|
||||
margin-bottom: 10px; /* 💡 [추가] 로고 아래 여백 */
|
||||
}
|
||||
|
||||
.mobile-header-type-2 .banner-left,
|
||||
.mobile-header-type-2 .banner-right {
|
||||
display: flex !important;
|
||||
flex: 0 0 100%; /* 한 줄 전체 차지 */
|
||||
max-width: 100%;
|
||||
width: 100%; /* 💡 [수정] 모바일에서는 너비 100% */
|
||||
height: auto; /* 💡 [수정] 모바일에서는 높이 자동 */
|
||||
justify-content: center;
|
||||
margin: 5px 0; /* 💡 [수정] 세로 여백 조정 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile-header-type-2 .banner-left { order: 2; }
|
||||
.mobile-header-type-2 .banner-right { order: 3; }
|
||||
|
||||
.mobile-header-type-2 .mobile-menu-btn {
|
||||
z-index: 1001; /* 💡 [수정] 햄버거 메뉴가 항상 위에 오도록 */
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px; /* 💡 [수정] 헤더 상단에 고정 */
|
||||
transform: none; /* 💡 [수정] 세로 중앙 정렬 해제 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 모바일 메뉴 패널 스타일 */
|
||||
#mobile-nav-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: auto !important; /* 💡 [수정] 너비 자동 (강제 적용) */
|
||||
min-width: 250px; /* 최소 너비 */
|
||||
max-width: 85%; /* 최대 너비 */
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.85); /* 💡 [수정] 배경 투명도 적용 */
|
||||
z-index: 1003;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.4s ease;
|
||||
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#mobile-nav-panel.is-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#mobile-nav-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.01); /* 💡 [수정] 배경 투명도 0.01 */
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
#mobile-nav-overlay.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-nav-header {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-mobile-login, .btn-mobile-join {
|
||||
padding: 8px 15px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-mobile-login {
|
||||
border: 1px solid #ddd;
|
||||
color: #333;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn-mobile-join {
|
||||
background: #0056b3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mobile-menu-close-btn {
|
||||
font-size: 1.8rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mobile-gnb {
|
||||
padding: 0;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-gnb ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* 💡 [수정] 내용에 따라 너비가 늘어나도록 설정 */
|
||||
white-space: nowrap; /* 다시 복원 */
|
||||
}
|
||||
|
||||
.mobile-gnb ul li {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.mobile-gnb ul li a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px; /* 💡 [수정] 메뉴 항목 여백 축소 */
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu {
|
||||
display: none;
|
||||
background: #f9f9f9;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu li {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu li a {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
padding: 8px 25px; /* 💡 [수정] 서브메뉴 여백 축소 */
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.sub-menu-indicator {
|
||||
transition: transform 0.3s;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.mobile-gnb li.submenu-open .sub-menu-indicator {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.mobile-gnb li.submenu-open > .sub-menu {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,566 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/* LWD Basic 메뉴 스킨 스타일 (nobeltimes.com 참고) */
|
||||
|
||||
.lwd-header-wrap {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.lwd-header-wrap .container {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
/* 1. 상단 헤더 (로고, 검색, 유틸) */
|
||||
.header-top {
|
||||
border-bottom: 1px solid #eee;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header-top .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.header-top .logo {
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-top .logo img {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
flex-grow: 1;
|
||||
max-width: 400px;
|
||||
margin: 0 30px; /* 간격 조정 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-search input[type="text"] {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 2px solid #0056b3; /* 포인트 컬러 적용 */
|
||||
padding: 0 45px 0 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-search button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0056b3;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-top .top-util {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.header-top .top-util li {
|
||||
margin-left: 20px;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-top .top-util li a {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.header-top .top-util li a:hover {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* 2. 메인 헤더 (로고, 배너) */
|
||||
.header-main {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.header-main .container {
|
||||
display: flex;
|
||||
justify-content: center; /* 💡 [유지] 중앙 정렬 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-main .logo {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 40px; /* 💡 [수정] 로고 좌우 여백 조정 (필요 시 조절) */
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header-main .logo img {
|
||||
height: 120px;
|
||||
width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* 배너 영역 */
|
||||
.header-main .banner-left,
|
||||
.header-main .banner-right {
|
||||
/* 💡 [수정] 고정 크기 210x120px */
|
||||
flex: 0 0 210px;
|
||||
width: 210px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
overflow: hidden; /* 영역을 벗어나는 이미지 숨김 */
|
||||
}
|
||||
|
||||
/* 💡 [핵심] 왼쪽 배너: 오른쪽 정렬 (로고 쪽으로 붙임) */
|
||||
.header-main .banner-left {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* 💡 [핵심] 오른쪽 배너: 왼쪽 정렬 (로고 쪽으로 붙임) */
|
||||
.header-main .banner-right {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.header-main .banner-left a,
|
||||
.header-main .banner-right a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-main .banner-left img,
|
||||
.header-main .banner-right img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 💡 [수정] 이미지를 영역에 꽉 채움 (비율 무시) */
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
|
||||
/* 3. GNB 네비게이션 */
|
||||
.gnb-wrap {
|
||||
background: #0056b3;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.gnb {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gnb-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* GNB 링크 스타일 (2줄 표시) */
|
||||
.gnb-link {
|
||||
display: flex;
|
||||
flex-direction: column; /* 세로 정렬 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 25px;
|
||||
height: 60px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s;
|
||||
text-align: center;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.gnb-txt-ko {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.gnb-txt-en {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
margin-top: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-link {
|
||||
background-color: #004494;
|
||||
text-decoration: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-link::before,
|
||||
.gnb-item:hover .gnb-link::after,
|
||||
.gnb-link::before,
|
||||
.gnb-link::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
opacity: 0 !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* 서브 메뉴 스타일 */
|
||||
.gnb-sub {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 300px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(5px);
|
||||
border: none;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
|
||||
z-index: 999;
|
||||
list-style: none;
|
||||
padding: 15px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-sub {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gnb-sub li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gnb-sub li a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.sub-txt-ko {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.sub-txt-en {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gnb-sub li a:hover {
|
||||
background-color: #f0f2f5;
|
||||
color: #0056b3;
|
||||
text-decoration: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
.gnb-sub li a:hover .sub-txt-en {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* 모바일 햄버거 버튼 */
|
||||
.mobile-menu-btn {
|
||||
display: block; /* Default to block for mobile */
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100; /* Ensure it's on top */
|
||||
}
|
||||
|
||||
/* 반응형 이미지 클래스 */
|
||||
.responsive-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
.pc-only { display: block; }
|
||||
.mobile-only { display: none; }
|
||||
|
||||
/* 💡 [수정] 모바일 브레이크포인트를 1024px로 조정하여 로고와 일치시킴 */
|
||||
@media (max-width: 1024px) {
|
||||
.pc-only { display: none !important; }
|
||||
.mobile-only { display: block !important; }
|
||||
|
||||
.header-top .container {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-top .logo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0 0 15px 0;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.header-top .top-util {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
order: 1;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.gnb-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* mobile-menu-btn은 .header-main .container 내부에 있으므로,
|
||||
.header-main .container의 position: relative에 따라 위치합니다.
|
||||
기본값은 .mobile-menu-btn에 설정되어 있습니다.
|
||||
TYPE 1과 TYPE 2에서 필요에 따라 재정의합니다.
|
||||
*/
|
||||
|
||||
.header-main {
|
||||
padding: 5px 0; /* 💡 [수정] 모바일 헤더 여백 대폭 축소 */
|
||||
}
|
||||
|
||||
.header-main .container {
|
||||
position: relative;
|
||||
min-height: 50px; /* 최소 높이 확보 */
|
||||
flex-wrap: wrap;
|
||||
/* 💡 [수정] TYPE 2를 위해 align-items를 flex-start로 변경 */
|
||||
align-items: flex-start;
|
||||
padding-top: 10px; /* 💡 [추가] 컨테이너 상단 패딩 */
|
||||
padding-bottom: 10px; /* 💡 [추가] 컨테이너 하단 패딩 */
|
||||
}
|
||||
|
||||
/* 💡 [수정] 모바일 헤더 레이아웃 설정에 따른 스타일 */
|
||||
|
||||
/* 공통: 로고 스타일 */
|
||||
.header-main .logo {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
order: 1;
|
||||
}
|
||||
.header-main .logo img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* TYPE 1: 로고만 표시 (배너 숨김) */
|
||||
.mobile-header-type-1 .banner-left,
|
||||
.mobile-header-type-1 .banner-right {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile-header-type-1 .logo {
|
||||
flex: 1; /* Type 1에서는 로고가 공간을 차지하도록 유지 */
|
||||
text-align: center; /* 로고 중앙 정렬 */
|
||||
}
|
||||
.mobile-header-type-1 .mobile-menu-btn {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1001; /* 햄버거 메뉴 z-index 유지 */
|
||||
}
|
||||
|
||||
|
||||
/* TYPE 2: 로고 + 배너 세로 나열 (로고 -> 좌측배너 -> 우측배너) */
|
||||
.mobile-header-type-2 .logo {
|
||||
width: 100%; /* 💡 [수정] 로고가 전체 너비를 차지하도록 */
|
||||
text-align: center; /* 💡 [수정] 로고 중앙 정렬 */
|
||||
flex: none; /* 💡 [수정] flex 속성 제거하여 크기 고정 */
|
||||
order: 1;
|
||||
margin-bottom: 10px; /* 💡 [추가] 로고 아래 여백 */
|
||||
}
|
||||
|
||||
.mobile-header-type-2 .banner-left,
|
||||
.mobile-header-type-2 .banner-right {
|
||||
display: flex !important;
|
||||
flex: 0 0 100%; /* 한 줄 전체 차지 */
|
||||
max-width: 100%;
|
||||
width: 100%; /* 💡 [수정] 모바일에서는 너비 100% */
|
||||
height: auto; /* 💡 [수정] 모바일에서는 높이 자동 */
|
||||
justify-content: center;
|
||||
margin: 5px 0; /* 💡 [수정] 세로 여백 조정 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile-header-type-2 .banner-left { order: 2; }
|
||||
.mobile-header-type-2 .banner-right { order: 3; }
|
||||
|
||||
.mobile-header-type-2 .mobile-menu-btn {
|
||||
z-index: 1001; /* 💡 [수정] 햄버거 메뉴가 항상 위에 오도록 */
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px; /* 💡 [수정] 헤더 상단에 고정 */
|
||||
transform: none; /* 💡 [수정] 세로 중앙 정렬 해제 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 모바일 메뉴 패널 스타일 */
|
||||
#mobile-nav-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: auto !important; /* 💡 [수정] 너비 자동 (강제 적용) */
|
||||
min-width: 250px; /* 최소 너비 */
|
||||
max-width: 85%; /* 최대 너비 */
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.85); /* 💡 [수정] 배경 투명도 적용 */
|
||||
z-index: 1003;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.4s ease;
|
||||
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#mobile-nav-panel.is-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#mobile-nav-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.01); /* 💡 [수정] 배경 투명도 0.01 */
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
#mobile-nav-overlay.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-nav-header {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-mobile-login, .btn-mobile-join {
|
||||
padding: 8px 15px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-mobile-login {
|
||||
border: 1px solid #ddd;
|
||||
color: #333;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn-mobile-join {
|
||||
background: #0056b3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mobile-menu-close-btn {
|
||||
font-size: 1.8rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mobile-gnb {
|
||||
padding: 0;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-gnb ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* 💡 [수정] 내용에 따라 너비가 늘어나도록 설정 */
|
||||
white-space: nowrap; /* 다시 복원 */
|
||||
}
|
||||
|
||||
.mobile-gnb ul li {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.mobile-gnb ul li a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px; /* 💡 [수정] 메뉴 항목 여백 축소 */
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu {
|
||||
display: none;
|
||||
background: #f9f9f9;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu li {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu li a {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
padding: 8px 25px; /* 💡 [수정] 서브메뉴 여백 축소 */
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.sub-menu-indicator {
|
||||
transition: transform 0.3s;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.mobile-gnb li.submenu-open .sub-menu-indicator {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.mobile-gnb li.submenu-open > .sub-menu {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,550 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/* LWD Basic 메뉴 스킨 스타일 (nobeltimes.com 참고) */
|
||||
|
||||
.lwd-header-wrap {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.lwd-header-wrap .container {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
/* 1. 상단 헤더 (로고, 검색, 유틸) */
|
||||
.header-top {
|
||||
border-bottom: 1px solid #eee;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.header-top .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.header-top .logo {
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-top .logo img {
|
||||
max-height: 40px;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
flex-grow: 1;
|
||||
max-width: 400px;
|
||||
margin: 0 30px; /* 간격 조정 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-search input[type="text"] {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
border: 2px solid #0056b3; /* 포인트 컬러 적용 */
|
||||
padding: 0 45px 0 15px;
|
||||
font-size: 14px;
|
||||
border-radius: 20px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-search button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0056b3;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-top .top-util {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.header-top .top-util li {
|
||||
margin-left: 20px;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-top .top-util li a {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.header-top .top-util li a:hover {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* 2. 메인 헤더 (로고, 배너) */
|
||||
.header-main {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.header-main .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-main .logo {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-main .logo img {
|
||||
height: 120px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* 배너 영역 */
|
||||
.header-main .banner-left,
|
||||
.header-main .banner-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-main .banner-left {
|
||||
justify-content: flex-start;
|
||||
margin-right: 80px;
|
||||
}
|
||||
|
||||
.header-main .banner-right {
|
||||
justify-content: flex-end;
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.header-main .banner-left img,
|
||||
.header-main .banner-right img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
||||
/* 3. GNB 네비게이션 */
|
||||
.gnb-wrap {
|
||||
background: #0056b3;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.gnb {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gnb-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* GNB 링크 스타일 (2줄 표시) */
|
||||
.gnb-link {
|
||||
display: flex;
|
||||
flex-direction: column; /* 세로 정렬 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 25px;
|
||||
height: 60px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s;
|
||||
text-align: center;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.gnb-txt-ko {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.gnb-txt-en {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
opacity: 0.8;
|
||||
margin-top: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-link {
|
||||
background-color: #004494;
|
||||
text-decoration: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-link::before,
|
||||
.gnb-item:hover .gnb-link::after,
|
||||
.gnb-link::before,
|
||||
.gnb-link::after {
|
||||
display: none !important;
|
||||
content: none !important;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
opacity: 0 !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
/* 서브 메뉴 스타일 */
|
||||
.gnb-sub {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
min-width: 300px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(5px);
|
||||
border: none;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
|
||||
z-index: 999;
|
||||
list-style: none;
|
||||
padding: 15px 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gnb-item:hover .gnb-sub {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gnb-sub li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gnb-sub li a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.sub-txt-ko {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.sub-txt-en {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.gnb-sub li a:hover {
|
||||
background-color: #f0f2f5;
|
||||
color: #0056b3;
|
||||
text-decoration: none !important;
|
||||
border: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
.gnb-sub li a:hover .sub-txt-en {
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
/* 모바일 햄버거 버튼 */
|
||||
.mobile-menu-btn {
|
||||
display: block; /* Default to block for mobile */
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 100; /* Ensure it's on top */
|
||||
}
|
||||
|
||||
/* 반응형 이미지 클래스 */
|
||||
.responsive-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
.pc-only { display: block; }
|
||||
.mobile-only { display: none; }
|
||||
|
||||
/* 💡 [수정] 모바일 브레이크포인트를 1024px로 조정하여 로고와 일치시킴 */
|
||||
@media (max-width: 1024px) {
|
||||
.pc-only { display: none !important; }
|
||||
.mobile-only { display: block !important; }
|
||||
|
||||
.header-top .container {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-top .logo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.header-search {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0 0 15px 0;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.header-top .top-util {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
order: 1;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.gnb-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* mobile-menu-btn은 .header-main .container 내부에 있으므로,
|
||||
.header-main .container의 position: relative에 따라 위치합니다.
|
||||
기본값은 .mobile-menu-btn에 설정되어 있습니다.
|
||||
TYPE 1과 TYPE 2에서 필요에 따라 재정의합니다.
|
||||
*/
|
||||
|
||||
.header-main {
|
||||
padding: 5px 0; /* 💡 [수정] 모바일 헤더 여백 대폭 축소 */
|
||||
}
|
||||
|
||||
.header-main .container {
|
||||
position: relative;
|
||||
min-height: 50px; /* 최소 높이 확보 */
|
||||
flex-wrap: wrap;
|
||||
/* 💡 [수정] TYPE 2를 위해 align-items를 flex-start로 변경 */
|
||||
align-items: flex-start;
|
||||
padding-top: 10px; /* 💡 [추가] 컨테이너 상단 패딩 */
|
||||
padding-bottom: 10px; /* 💡 [추가] 컨테이너 하단 패딩 */
|
||||
}
|
||||
|
||||
/* 💡 [수정] 모바일 헤더 레이아웃 설정에 따른 스타일 */
|
||||
|
||||
/* 공통: 로고 스타일 */
|
||||
.header-main .logo {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
order: 1;
|
||||
}
|
||||
.header-main .logo img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* TYPE 1: 로고만 표시 (배너 숨김) */
|
||||
.mobile-header-type-1 .banner-left,
|
||||
.mobile-header-type-1 .banner-right {
|
||||
display: none !important;
|
||||
}
|
||||
.mobile-header-type-1 .logo {
|
||||
flex: 1; /* Type 1에서는 로고가 공간을 차지하도록 유지 */
|
||||
text-align: center; /* 로고 중앙 정렬 */
|
||||
}
|
||||
.mobile-header-type-1 .mobile-menu-btn {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1001; /* 햄버거 메뉴 z-index 유지 */
|
||||
}
|
||||
|
||||
|
||||
/* TYPE 2: 로고 + 배너 세로 나열 (로고 -> 좌측배너 -> 우측배너) */
|
||||
.mobile-header-type-2 .logo {
|
||||
width: 100%; /* 💡 [수정] 로고가 전체 너비를 차지하도록 */
|
||||
text-align: center; /* 💡 [수정] 로고 중앙 정렬 */
|
||||
flex: none; /* 💡 [수정] flex 속성 제거하여 크기 고정 */
|
||||
order: 1;
|
||||
margin-bottom: 10px; /* 💡 [추가] 로고 아래 여백 */
|
||||
}
|
||||
|
||||
.mobile-header-type-2 .banner-left,
|
||||
.mobile-header-type-2 .banner-right {
|
||||
display: flex !important;
|
||||
flex: 0 0 100%; /* 한 줄 전체 차지 */
|
||||
max-width: 100%;
|
||||
justify-content: center;
|
||||
margin: 5px 0; /* 💡 [수정] 세로 여백 조정 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile-header-type-2 .banner-left { order: 2; }
|
||||
.mobile-header-type-2 .banner-right { order: 3; }
|
||||
|
||||
.mobile-header-type-2 .mobile-menu-btn {
|
||||
z-index: 1001; /* 💡 [수정] 햄버거 메뉴가 항상 위에 오도록 */
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px; /* 💡 [수정] 헤더 상단에 고정 */
|
||||
transform: none; /* 💡 [수정] 세로 중앙 정렬 해제 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 모바일 메뉴 패널 스타일 */
|
||||
#mobile-nav-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: auto !important; /* 💡 [수정] 너비 자동 (강제 적용) */
|
||||
min-width: 250px; /* 최소 너비 */
|
||||
max-width: 85%; /* 최대 너비 */
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.85); /* 💡 [수정] 배경 투명도 적용 */
|
||||
z-index: 1003;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.4s ease;
|
||||
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#mobile-nav-panel.is-active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#mobile-nav-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.01); /* 💡 [수정] 배경 투명도 0.01 */
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
#mobile-nav-overlay.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-nav-header {
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-mobile-login, .btn-mobile-join {
|
||||
padding: 8px 15px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-mobile-login {
|
||||
border: 1px solid #ddd;
|
||||
color: #333;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn-mobile-join {
|
||||
background: #0056b3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mobile-menu-close-btn {
|
||||
font-size: 1.8rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mobile-gnb {
|
||||
padding: 0;
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mobile-gnb ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* 💡 [수정] 내용에 따라 너비가 늘어나도록 설정 */
|
||||
white-space: nowrap; /* 다시 복원 */
|
||||
}
|
||||
|
||||
.mobile-gnb ul li {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.mobile-gnb ul li a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px; /* 💡 [수정] 메뉴 항목 여백 축소 */
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu {
|
||||
display: none;
|
||||
background: #f9f9f9;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu li {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.mobile-gnb .sub-menu li a {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
padding: 8px 25px; /* 💡 [수정] 서브메뉴 여백 축소 */
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.sub-menu-indicator {
|
||||
transition: transform 0.3s;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.mobile-gnb li.submenu-open .sub-menu-indicator {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.mobile-gnb li.submenu-open > .sub-menu {
|
||||
display: block;
|
||||
}
|
||||
Reference in New Issue
Block a user