.lines.two:after {left: 22%;width: 56%;}
.swiper-wrapper, .skill-item{ padding: 0 !important;}

@media screen and (max-width: 767px) {
    .lines.two:after {left: 22%;width: 56%;}
    .fz-150 {font-size: 60px;}

/* 한 영역씩 끊어지는 효과를 위해 강제했던 높이 해제 */
    section[data-scroll-index], 
    .sub-bg-fixed.right .cont {
        height: auto !important;
        min-height: auto !important;
        padding: 0 12px !important; /* 적절한 상하 여백 */
        display: block;
        width: 100% !important;
    }

    /* 모바일에서는 왼쪽 고정 이미지를 상단에 배치하거나 숨김 처리 */
    .portfolio-fixed .left {
        position: relative !important;
        height: 300px !important; /* 이미지 영역 높이 축소 */
    }

    .rotate-text{
        margin-top:10px;
    }

    /* 텍스트 크기 조절 */
    .catalog-title { font-size: 28px !important; }
    .catalog-desc { font-size: 15px !important; }    
}
@media screen and (max-width: 639px) {
    .lines.two:after {left: 20%;width: 60%;}
    .fz-150 {font-size: 50px;}
}
@media screen and (max-width: 479px) {
    .slider .lines{display:none;}
    .fz-150 {font-size: 40px;}
}
@media screen and (max-width: 379px) {
}

/* 인덱스 2번 섹션은 내부 컨텐츠 양에 따라 높이가 늘어나도록 설정 */
section[data-scroll-index="2"] {
    height: auto !important; 
    min-height: 100vh;
    overflow: visible !important;
}

/* 왼쪽 이미지 영역이 스크롤 시 따라오게 하려면 sticky 처리 */
section[data-scroll-index="2"] .left {
    position: sticky;
    top: 0;
    height: 100vh;
}

/* 섹션 2 내부의 오른쪽 개별 컨텐츠 설정 */
.sub-bg-fixed.right .cont {
    
    display: flex;
    flex-direction: column;
    justify-content: center; /* 내용 중앙 정렬 */
    padding: 80px; /* 여백 조절 */
    box-sizing: border-box;
}

/* 왼쪽 고정 이미지 영역 레이어 순서 확인 */
#sticky_item {
    position: sticky;
    top: 0;
    z-index: 10;
}