@charset "utf-8";

#inc03 .cross{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;font-size:var(--font-size-90);font-weight:700;color:var(--primary);text-align:center;transition:all .3s;overflow:hidden}
#inc03 .cross p{line-height:1;text-transform:uppercase}
#inc03 .cross .l_txt{transform:translateX(-200px)}
#inc03 .cross .r_txt{transform:translateX(+200px)}
#inc03.on .cross{color:#fff;background:var(--primary)}

#inc03 .cont{transition:all .3s}
#inc03.on .cont{background:var(--primary)}
#inc03 .img_inner{position:sticky;top:0;z-index:0}
#inc03 .img_box{overflow:hidden;position:relative;width:60%;height:500px;;margin:0 auto}
#inc03 .img_box li{opacity:.7;position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%, -50%) scale(1.1);transition:all 2s cubic-bezier(0.165, 0.840, 0.440, 1)}
#inc03 .img_box li.on{opacity:1;z-index:10;transform:translate(-50%, -50%) scale(1)}
#inc03 .img_box li img{width:100%;height:100vh}
#inc03 .img_box li:after{position:absolute;content:'';left:0;top:0;width:100%;height:100%;background:linear-gradient(95deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .9))}
#inc03 .txt_box{position:relative;z-index:10;color:#fff}
#inc03 .txt_box h2{color:#fff}
#inc03 .txt_box li{display:flex;flex-direction:column;justify-content:center;width:50%;height:100vh;margin-left:auto}
#inc03 .txt_box li div{margin:10px 0 20px;font-size:var(--font-size-xl);font-weight:500}
#inc03 .cm_btn:hover{color:var(--primary);background:#fff}

/* ========================================
   모바일 반응형 - 서비스 카드 레이아웃
   ======================================== */
@media (max-width: 768px) {
    /* 섹션 전체 재구성 */
    #inc03 {
        display: block;
        padding: 60px 0;
        background: #f8f9fa;
    }

    /* 스크롤 애니메이션 클래스 비활성화 */
    #inc03.on {
        background: #f8f9fa;
    }

    /* 상단 타이틀 모바일 최적화 */
    #inc03 .cross {
        display: block;
        height: auto;
        padding: 30px 20px;
        margin-bottom: 30px;
        font-size: var(--font-size-24);
        font-weight: 700;
        color: #333;
        text-align: center;
        background: transparent;
        transition: none;
    }

    #inc03.on .cross {
        color: #333;
        background: transparent;
    }

    #inc03 .cross p {
        display: block;
        transform: none !important;
        font-size: var(--font-size-xl);
        line-height: 1.4;
        margin: 5px 0;
        color: #333;
    }

    #inc03 .cross .l_txt,
    #inc03 .cross .r_txt {
        transform: translateX(0) !important;
    }

    /* 데스크톱 이미지 갤러리 완전 숨김 */
    #inc03 .img_inner {
        display: none !important;
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }

    #inc03 .img_box {
        display: none !important;
    }

    /* 컨테이너 배경 리셋 */
    #inc03 .cont {
        background: transparent !important;
        transition: none;
    }

    #inc03.on .cont {
        background: transparent !important;
    }

    /* 서비스 카드 컨테이너 */
    #inc03 .txt_box {
        position: static;
        z-index: 1;
        padding: 0 15px;
        background: transparent;
        color: #333;
    }

    /* 서비스 카드 스타일 */
    #inc03 .txt_box li {
        display: block !important;
        width: 100%;
        height: auto !important;
        min-height: auto !important;
        margin: 0 0 20px 0;
        margin-left: 0 !important;
        padding: 25px 20px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        flex-direction: column;
        justify-content: flex-start;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        opacity: 1 !important;
    }

    #inc03 .txt_box li:last-child {
        margin-bottom: 0;
    }

    /* 카드 호버/터치 효과 */
    #inc03 .txt_box li:active {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    }

    /* 카드 제목 */
    #inc03 .txt_box h2 {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: #333 !important;
        margin: 0 0 12px 0;
        line-height: 1.4;
    }

    /* 카드 설명 */
    #inc03 .txt_box li div,
    #inc03 .txt_box li .pl {
        font-size: var(--font-size-sm);
        font-weight: 400;
        line-height: 1.6;
        color: #666 !important;
        margin: 0 0 20px 0;
        white-space: normal;
    }

    /* CTA 버튼 */
    #inc03 .txt_box .cm_btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        padding: 12px 24px;
        background: #3AD2FF;
        color: #ffffff !important;
        border: 2px solid #3AD2FF;
        border-radius: 25px;
        font-size: var(--font-size-sm);
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    #inc03 .txt_box .cm_btn:hover,
    #inc03 .txt_box .cm_btn:active {
        background: transparent;
        color: #3AD2FF !important;
    }

    /* 아이콘 스타일 */
    #inc03 .txt_box .cm_btn i,
    #inc03 .txt_box .cm_btn svg {
        width: 16px;
        height: 16px;
        margin-left: 6px;
        vertical-align: middle;
    }
}