<?php
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}
$res_path = "../../resources";
$kr_path = "../";
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="<?= $res_path ?>/images/icon/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="<?= $res_path ?>/images/icon/favicon.png">

<!-- ★ [필수] jQuery Core 라이브러리 (가장 먼저 로드되어야 합니다) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<link rel="stylesheet" href="<?= $res_path ?>/css/bootstrap.min.css">
<!-- css -->
<link rel="stylesheet" href="<?= $res_path ?>/css/swiper.min.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/reset.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/font.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/common.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/common2.css">

<link rel="stylesheet" href="<?= $res_path ?>/css/style.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/bootstrap.min.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/popup.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/gnb-patch.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/program.css">
<link rel="stylesheet" href="<?= $res_path ?>/css/contents.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="<?= $res_path ?>/js/jquery-ui.min.js"></script>

    


<title>정원엔시스</title>
</head>
<body class="main-site pc">
<div class="wrap">
	<div class="wrap-btn-top ">
      <button type="button" class="btn-Inquiry">
        <img src="<?= $res_path ?>/images/ico-pen-mo.png" alt="제품 문의 하러 가기" onclick="location.href='inquiry.php'">
      </button>
      <button type="button" class="btn-top">
        <img src="<?= $res_path ?>/images/ico-top.png" alt="사이트 상단으로 이동" onclick="topButton()">
      </button>
    </div>

<style>
  .sub-visual {
    /* position: relative; */
    height: 400px;
    margin-bottom: 80px;
}

.nav-sub-visu {
    position: absolute;
    top: 323px;
    left: 0;
    bottom: 0;
    width: 100%;
}

.nav-sub-visu ul {
    display: flex;
    height: 77px;
}

.tit-sub-visu {
    position: absolute;
    top: 180px;
}

.layout_default {width:1450px !important; margin:0 auto}

/* [추가] 모바일 메뉴 스타일 */
.btn-m-menu { display: none; background: none; border: none; font-size: 24px; color: #333; cursor: pointer; padding: 10px; }
.m-gnb-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; }
.m-gnb-wrap { position: fixed; top: 0; right: -300px; width: 300px; height: 100%; background: #fff; z-index: 10001; transition: right 0.3s ease; box-shadow: -5px 0 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
.m-gnb-wrap.active { right: 0; }
.m-gnb-header { padding: 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.btn-m-close { background: none; border: none; font-size: 24px; color: #333; cursor: pointer; }
.m-gnb-body { flex: 1; overflow-y: auto; padding: 20px 0; }
.m-depth1 { list-style: none; padding: 0; margin: 0; }
.m-depth1 > li { border-bottom: 1px solid #f5f5f5; }
.m-link-d1 { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; font-size: 16px; font-weight: 600; color: #333; text-decoration: none; }
.m-depth2 { display: none; background: #f9f9f9; list-style: none; padding: 0; margin: 0; }
.m-depth2 li { border-bottom: 1px solid #eee; }
.m-link-d2 { display: flex; justify-content: space-between; align-items: center; padding: 10px 40px; font-size: 14px; color: #666; text-decoration: none; background: #f9f9f9; }
.m-depth3 { display: none; background: #fff; list-style: none; padding: 5px 0; margin: 0; }

@media (max-width: 1024px) {
    .main-gnb { display: none !important; }
    .btn-m-menu { display: block; }
}

/* [수정] 모바일 모드에서만 서브메뉴 숨김 */
@media (max-width: 1024px) {
    .nav-sub-visu, .smallTab { display: none !important; }
}
</style>

<script>
function toggleMobileMenu(isOpen) {
    if (isOpen) {
        $('.m-depth2, .m-depth3').hide();
        $('.m-gnb-body i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
        $('.m-gnb-wrap').addClass('active');
        $('.m-gnb-overlay').fadeIn(200);
        $('body').css('overflow', 'hidden');
    } else {
        $('.m-gnb-wrap').removeClass('active');
        $('.m-gnb-overlay').fadeOut(200);
        $('body').css('overflow', '');
    }
}

$(document).ready(function() {
    // 서브페이지 헤더 활성화
    $('.main-header').addClass('on');
    if (typeof logoOn === 'function') logoOn();

    // 초기 상태에서 모든 서브메뉴 숨김
    $('.m-depth2, .m-depth3').hide();
    
    $(document).on('click', '.m-link-d1', function(e) {
        var $depth2 = $(this).next('.m-depth2');
        if ($depth2.length > 0) {
            e.preventDefault();
            
            // 다른 열려있는 1depth 메뉴 닫기
            $('.m-depth2').not($depth2).slideUp(200);
            $('.m-link-d1').not(this).find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');

            $(this).find('i').toggleClass('fa-chevron-up fa-chevron-down');
            $depth2.slideToggle(200);
        }
    });

    $(document).on('click', '.m-link-d2', function(e) {
        var $depth3 = $(this).next('.m-depth3');
        if ($depth3.length > 0) {
            e.preventDefault();

            // 같은 부모 내의 다른 열려있는 2depth 메뉴 닫기
            var $parent = $(this).closest('.m-depth2');
            $parent.find('.m-depth3').not($depth3).slideUp(200);
            $parent.find('.m-link-d2').not(this).find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');

            $(this).find('i').toggleClass('fa-chevron-up fa-chevron-down');
            $depth3.slideToggle(200);
        }
    });
});
</script>

<?php include __DIR__ . "/navi.php"; ?> 

<section class="sub-visual visual-intro1"></section>