서브메뉴 관련 질문 드립니다. 채택완료

</strong></p>

<p><? 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);</p>

<p>                echo $stmenu;

            ?>

        </ul>

    </div>

</div></p>

<p>

    <script>

        document.addEventListener('DOMContentLoaded', function() {

            const tabs = document.querySelectorAll('.tab1 > li > a');</p>

<p>            tabs.forEach(tab => {

                tab.addEventListener('click', function(event) {

                    // 모든 a 요소에서 active 클래스 제거

                    tabs.forEach(t => t.classList.remove('active'));</p>

<p>                    // 클릭된 a 요소에 active 클래스 추가

                    this.classList.add('active');

                });

            });

        });

    </script></p>

<p><strong>