css 문의 드립니다. 채택완료

사이트 주소 입니다.

https://jdcompany.iwinv.net/

<div class="tab_content">

              <div class="main flex">

                    <input type="radio" name="tabmenu" id="tab01" checked>

                    <label for="tab01">디자인패키지 (기획+디자인)</label>

                    <input type="radio" name="tabmenu" id="tab02">

                    <label for="tab02">올인원패키지<br>(기획+촬영+디자인)</label>

                </div>

                <div class="conbox con1">

                    <img src="../img/sec06main1.png" alt="">

                </div>

                <div class="conbox con2">

                    <img src="../img/sec06visu2.png" alt="">

                </div>

            </div>

탭 구분 html 입니다.

탭 정렬을 위해 main 이라는 div를 추가하면 탭 작동이 안되고

저걸 빼면 작동이 됩니다.

아래는 css 입니다.

.sec06 .conbox{display:none;margin-top:50px;}

.sec06 .main input[id="tab01"]:checked ~ .con1{display:block;}

.sec06 .main input[id="tab02"]:checked ~ .con2{display:block;}

이렇게 해도 작동이 안되는데 왜 이런걸까요 ㅠㅠ