<? if(SW_USE_SUB_MENU==1 && $g5[page_ary][use_leftmenu]=='y'){ ?>
<style>
/* tab */
.tab1 { display: table; width: 100%; overflow: hidden; margin: 3.5rem auto 3rem; }
.tab1 > li { display: table-cell; width: 1%; vertical-align: middle; text-align: center; }
.tab1 > li > a { position: relative; display: block; width: 100%; height: 70px; line-height: 70px; border: 1px solid #ddd; color: #555; font-weight: 500; font-size: 1rem; overflow: hidden; text-align: center; }
.tab1 > li > a:before { position: absolute; top: calc(150% + 2px); left: 50%; transform: translate(-50%, -50%); width: calc(100% + 2px); height: calc(100% + 2px); background: #4c665b; content: ''; transition: top .3s; }
.tab1 > li > a:focus:before { top: calc(150% + 2px); }
.tab1 > li + li > a { border-left: 0; }
.tab1 > li > a > span { position: relative; z-index: 1; }
.tab1 > li > a > span.hidden:focus { display: block; width: 0; height: 0; font-size: 0; text-indent: -9999px; }
.tab1 > li > a > span.hidden { display: none; }
.hidden:focus { display: block; width: 0; height: 0; font-size: 0; text-indent: -9999px; }
span.hidden { display: none; }
.tab1 > li.active > a, .tab1 > li > a:hover, .tab1 > li > a:focus { color: #fff; }
.tab1 > li.active > a:before, .tab1 > li > a:hover:before { top: calc(50% + 1px); }
.tab1 > li.active > a:before, .tab1 > li > a:focus:before { top: calc(50% + 1px); }
@media (max-width: 1024px) {
    /* tab */
    .tab1 { margin-top: 2.5rem; }
    .tab1 > li > a { height: 60px; font-size: .85rem; line-height: 60px; }
}
@media (max-width: 767px) {
    /* tab */
    .tab1 > li { float: left; display: block; width: 50%; }
    .tab1 > li > a { font-size: .8rem; height: 45px; line-height: 45px; }
    .tab1 > li + li > a { border: 1px solid #ddd; border-top: 0; }
    .tab1 { margin: 1.5rem auto 2rem; }
    .tab2 > li { display: block; width: 100%; }
}
</style>
<div class='container lm-wrap'>
    <div id="depth2_div">
        <ul id="left_menu_top" class="tab1">
            <?
                $stmenu=$g5[menu_list][submenu];
                $stmenu=str_replace("[item ","<li><a ",$stmenu);
                $stmenu=str_replace(" item]","><span>",$stmenu);
                
                $stmenu=str_replace("[item-arrow]","</a></li>",$stmenu);
                echo $stmenu;
            ?>
        </ul>
    </div>
</div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.tab1 > li > a');
            tabs.forEach(tab => {
                tab.addEventListener('click', function(event) {
                    // 모든 a 요소에서 active 클래스 제거
                    tabs.forEach(t => t.classList.remove('active'));
                    // 클릭된 a 요소에 active 클래스 추가
                    this.classList.add('active');
                });
            });
        });
    </script>