tab이 제대로 작동하지 않아 문의드립니다 채택완료

<section class="ptr">

      <div class="upper">

        <span>Pattern Details</span>

        <h2></h2>

        <h5></h5>

      </div>

      <div class="tab3 pattern">

        <div class="tab-inner">

            <!-- 탭 영역 -->

            <ul class="round btn">

                <!-- 클릭하는 버튼영역 -->

                <li data-alt="tab1" class="active">큐빅</li>

                <li data-alt="tab2">젠</li>

                <li data-alt="tab3">그래픽</li>

            </ul>

            <div class="mt50 tabs">

                <!-- 탭내용이 들어가는 영역 -->

                <div id="tab1" class="active">

                  <div class="c-flex">

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/c1.jpg" alt="">

                      <p>KL BROWN + CHAMPAGNE</p>

                    </div>

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/c2.jpg" alt="">

                      <p>254 + CB BRONZE</p>

                    </div>

                  </div>

                  <div class="c-flex">

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/c3.jpg" alt="">

                      <p>903 + CB BRONZE</p>

                    </div>

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/c4.jpg" alt="">

                      <p>922 + DW SILVER</p>

                    </div>

                    </div>

                  </div>

                </div>

                <div id="tab2">

                  <div class="c-flex">

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/z1.jpg" alt="">

                      <p>229 + 매직골드</p>

                    </div>

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/z2.jpg" alt="">

                      <p>MD-BLUE + 매직 그레이</p>

                    </div>

                  </div>

                  <div class="c-flex">

                      <div class="c-line">

                        <img src="<?php echo G5_THEME_URL?>/img/z3.jpg" alt="">

                        <p>922 + 매직골드</p>

                      </div>

                    </div>

                  </div>

                </div>

                <div id="tab3">

                  <div class="c-flex">

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/g1.jpg" alt="">

                      <p>213 + LH 표준2안E</p>

                    </div>

                    <div class="c-line">

                      <img src="<?php echo G5_THEME_URL?>/img/g2.jpg" alt="">

                      <p>922 + 701 GOLD</p>

                    </div>

                  </div>

                  <div class="c-flex">

                      <div class="c-line">

                        <img src="<?php echo G5_THEME_URL?>/img/g3.jpg" alt="">

                        <p>2254 + 야자수</p>

                      </div>

                    </div>

                  </div>

                </div>

            </div>  

        </div>

      </div>    

    </section>

아래 는 css 입니다

.tab3.pattern {background: #fff; padding: 0;}

.mt50.tabs {margin-top: 50px;}

.mt50.tabs div {height: auto;}

.mt50.tabs div img {width: 590px; height: 230px;}

.round.btn li {font-size: 1.5rem; font-weight: 500; color: #fff; width: 140px; height: 45px; background: #000; border-radius: 30px; line-height: 1.7; margin-right: 20px;}

.round.btn li.active, .round.btn li:hover {color: #000; background: #fff; border: 2px solid #000; }

.c-flex {display: flex; gap: 60px;}

.c-line {margin-bottom: 50px;}

.c-line p {font-size: 1.25rem; font-weight: 500; letter-spacing: -1px; line-height: 2.5;}

.tabs {margin-top: 85px;}

.tabs div{display: none; background-color: #fff; height: 310px; box-sizing: border-box; overflow: hidden;}

.tabs div.active{display: block;}

이부분 js입니다

$(document).ready(function(){

    // 버튼 active 추가 제거 해보기

    $('.round.btn li').click(function(){

        $(this).addClass('active');

        $(this).siblings().removeClass('active');

        // 탭메뉴 연결하기

        const result = $(this).attr('data-alt');

        // li에 있는 data-alt 값을 변수에 저장시킴

        $('.mt50.tabs div').removeClass('active');

        $(`#${result}`).addClass('active');

    });

    });

두번째 탭만 잘작동하고 첫번째와 세번째 탭은 심어둔 내용이 보이지 않고

아래로 빠져나오고 작동이 제대로 안되서 코드 어디에 문제가 있는지 봐주실수 있을까요 ㅜㅜㅜㅜ