/* 탭 스타일 */
.tabs-container {
    display: flex;
    align-items: flex-end;
    height: 80px;
    padding-left: 40px;
    gap: 0; /* 탭 간 간격 0 */
}

.tab-button {
    width: 220px;
    height: 40px;
    border: none;
    border-radius: 15px 15px 0 0; /* 라운드 크기 증가 */
    font-family: 'NanumSquareNeo', sans-serif !important;
    font-weight: 700 !important; /* Bold */
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    position: relative;
}

/* 활성화된 탭 */
.tab-button.active {
    background-color: #ffffff;
    color: #00a0df;
    height: 48px; /* 활성화 시 높이 증가 */
    z-index: 10;
    clip-path: inset(-10px -10px 0px -10px); /* 하단 그림자 제거 */
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15), /* 상단 그림자 */
                -3px 0 6px rgba(0, 0, 0, 0.08), /* 왼쪽 그림자 */
                3px 0 6px rgba(0, 0, 0, 0.08); /* 오른쪽 그림자 */
    position: relative;
}

/* 활성화 탭에 border 효과 */
.tab-button.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px 15px 0 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: none;
    pointer-events: none;
}

/* 비활성화된 탭 */
.tab-button:not(.active) {
    background-color: #33b3e5;
    color: #ffffff;
    clip-path: inset(-10px -10px 0px -10px); /* 하단 그림자 제거 */
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.15), /* 상단 그림자 */
                -3px 0 6px rgba(0, 0, 0, 0.08), /* 왼쪽 그림자 */
                3px 0 6px rgba(0, 0, 0, 0.08); /* 오른쪽 그림자 */
    position: relative;
}

/* 비활성화 탭에 border 효과를 위한 가상 요소 */
.tab-button:not(.active)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px 15px 0 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: none;
    pointer-events: none;
}

.tab-button:not(.active):hover {
    background-color: #2ba3d5;
}

/* 탭 콘텐츠 영역 */
.tab-content-container {
    flex: 1;
    background-color: #ffffff;
    padding: 40px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative; /* 박스 위치 기준 */
    /* 스크롤바 숨기기 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.tab-content-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* 탭 콘텐츠 최대 너비 제한 */
.tab-content {
    max-width: 100%;
}

/* 탭 콘텐츠 이미지 */
.tab-content img:not(.mobile-image) {
    display: block;
    max-width: 100%;
    height: auto;
}

/* PC 이미지만 기본적으로 표시 */
.pc-image {
    display: block;
}

.mobile-image {
    display: none;
}

/* 탭 콘텐츠 내 클릭 박스 */
.tab-content {
    position: relative;
    overflow: hidden; /* 박스가 넘치지 않도록 */
}

.click-box {
    position: absolute;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 박스 A 스타일 */
.box-a {
    width: 100px;
    height: 80px;
    top: 253px;
    left: 80px;
    /* 
     */
}

.box-a:hover {
    /* 
     */
}

/* 박스 B 스타일 */
.box-b {
    width: 100px;
    height: 80px;
    top: 405px; /* 253 + 80 + 72 */
    left: 80px;
    /* 
     */
}

.box-b:hover {
    /* 
     */
}

/* 박스 C 스타일 */
.box-c {
    width: 100px;
    height: 80px;
    top: 557px; /* 405 + 80 + 72 */
    left: 80px;
    
    
}

.box-c:hover {
    
    
}

/* 박스 D 스타일 */
.box-d {
    width: 100px;
    height: 80px;
    top: 709px; /* 557 + 80 + 72 */
    left: 80px;
    
    
}

.box-d:hover {
    
    
}

/* 박스 E 스타일 */
.box-e {
    width: 100px;
    height: 80px;
    top: 861px; /* 709 + 80 + 72 */
    left: 80px;
    
    
}

.box-e:hover {
    
    
}

/* 박스 F 스타일 */
.box-f {
    width: 100px;
    height: 80px;
    top: 1013px; /* 861 + 80 + 72 */
    left: 80px;
    
    
}

.box-f:hover {
    
    
}

/* 박스 G 스타일 */
.box-g {
    width: 100px;
    height: 80px;
    top: 1165px; /* 1013 + 80 + 72 */
    left: 80px;
    
    
}

.box-g:hover {
    
    
}

/* 박스 H 스타일 */
.box-h {
    width: 100px;
    height: 80px;
    top: 1317px; /* 1165 + 80 + 72 */
    left: 80px;
    
    
}

.box-h:hover {
    
    
}

/* 탭3 박스 A 스타일 */
.tab3-box-a {
    width: 100px;
    height: 80px;
    top: 253px;
    left: 80px;
    
    
}

.tab3-box-a:hover {
    
    
}

/* 탭3 박스 B 스타일 */
.tab3-box-b {
    width: 100px;
    height: 80px;
    top: 405px; /* 253 + 80 + 72 */
    left: 80px;
    
    
}

.tab3-box-b:hover {
    
    
}

/* 탭3 박스 C 스타일 */
.tab3-box-c {
    width: 100px;
    height: 80px;
    top: 557px; /* 405 + 80 + 72 */
    left: 80px;
    
    
}

.tab3-box-c:hover {
    
    
}

/* 탭3 박스 D 스타일 */
.tab3-box-d {
    width: 100px;
    height: 80px;
    top: 709px; /* 557 + 80 + 72 */
    left: 80px;
    
    
}

.tab3-box-d:hover {
    
    
}