/* 탭 */



/* 4. 탭 */
.tab-wrap {position:relative;}
.tab-wrap[data-tab="twin"] {z-index:0;}
.tab-wrap[data-tab="fraternal"] {z-index:1;}
.tab-wrap .first-depth {display:flex;align-items:stretch;justify-content:center;}
.tab-wrap .first-depth > li {flex:1;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color);}
.tab-wrap .first-depth > li > .tab-box {display:none;}
.tab-wrap .first-depth > li.active > .tab-box {display:block;}
.tab-box {min-height:500px;padding-top:40px;position:absolute;left:0;top:64px;width:100%;display: flow-root;}
.tab-box.pd-ver{}
.tab-wrap .first-depth > li > button {width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:16px;text-align:center;font-size:var(--txt-size04);font-weight:var(--fw-medium);color:var(--color-gray);}
/*.tab-wrap .first-depth > li + li {border-left:1px solid var(--border-color);}*/
.tab-wrap .first-depth > li:last-child {border-right:1px solid var(--border-color);border-radius:0 4px 4px 0;overflow:hidden;}
.tab-wrap .first-depth > li:first-child {border-left:1px solid var(--border-color);border-radius:4px 0 0 4px;overflow:hidden;}
.tab-wrap .first-depth > li:first-child:last-child {border-radius: 4px;}
.tab-wrap .first-depth > li.active {border-width:2px;border-color:var(--color-primary-dark);border-left:2px solid var(--color-primary-dark);}
.tab-wrap .first-depth > li:last-child.active {border-right-color:var(--color-primary-dark);}
.tab-wrap .first-depth > li:first-child.active {border-right-color:var(--color-primary-dark);border-left-color:var(--color-primary-dark);}
.tab-wrap .first-depth > li.active > button {font-weight:var(--fw-bold);color:var(--color-primary-dark);}

/* 탭 요소가 하나일 경우 */
.tab-wrap .first-depth.only > li > button {display:none;}
.tab-wrap .first-depth.only .tab-box {top:0;}
.tab-wrap .first-depth.only > li {height:0;border:0;}
.tab-wrap .first-depth.only > li.active> button {border:0;height:0;}
.tab-wrap .first-depth.only > li.active .tab-box{z-index: 1;}

@media (max-width:767px) {
    .tab-box.pd-ver{padding:20px;}
    .tab-wrap[data-tab="fraternal"] .first-depth {position: relative;display: block;;}
    .tab-wrap[data-tab="fraternal"] .first-depth > li {
        display: none;
        height: 48px; /* 모바일에서 높이 조정 */
        margin-bottom: -1px; /* border 겹침 방지 */
        border: none;
        border-radius:0;
        border:0
    }
    .tab-wrap[data-tab="fraternal"]  .first-depth > li:first-child {border-radius:0;}

    .tab-wrap[data-tab="fraternal"]  .first-depth > li > button {
        height: 100%;
        padding: 0 16px; /* 좌우 여백 추가 */
        justify-content: space-between; /* 텍스트와 화살표 정렬 */
        z-index: 1000;
        background-color:var(--color-white);
    }

    .tab-wrap[data-tab="fraternal"]  .first-depth > li.active {
        display: block;
        /*border: 1px solid var(--border-color);*/

    }
    .tab-wrap[data-tab="fraternal"] .first-depth > li.active > button {
        background-color:var(--color-primary);
        color:var(--color-white);
    }

    .tab-wrap[data-tab="fraternal"] .first-depth > li > button {
        color:var(--color-text);
    }
        /* 열린 상태 스타일 */
    .tab-wrap[data-tab="fraternal"]  .first-depth.opened > li {
        display: block;
        /*border: 1px solid var(--border-color);*/
    }

    .tab-wrap[data-tab="fraternal"]  .first-depth.opened > li.active {
        border-bottom: none;
        border-radius:  0;
    }

    .tab-wrap[data-tab="fraternal"]  .first-depth.opened > li:not(.active) {
        border-top: none;
    }

    .tab-wrap[data-tab="fraternal"]  .first-depth.opened > li:last-child {
        /*border-radius: 0 0 4px 4px;*/
        /*border-bottom: 1px solid var(--border-color);*/
        margin-bottom: 0;
    }
    .tab-wrap[data-tab="fraternal"]  .first-depth > li + li {border-left:0;}

    /* 화살표 아이콘 */
    .tab-wrap[data-tab="fraternal"]  .first-depth > li.active > button::after {
        content: '';
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid currentColor;
        transition: transform 0.2s ease;
    }

    /* 열린 상태의 화살표 회전 */
    .tab-wrap[data-tab="fraternal"]  .first-depth.opened > li.active > button::after {
        transform: rotate(180deg);
    }

    .tab-box {
        z-index: -1;
        top: 48px; /* 모바일에서 탭 박스 위치 조정 */
    }
}