<style>
nav.fixed{

    position:fixed;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(12px);

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    animation:navDown .3s ease;

}

nav.fixed .logo{

    color:#17407b;

}

nav.fixed li{

    color:#17407b;

}

@keyframes navDown{

    from{

        transform:translateY(-80px);

    }

    to{

        transform:translateY(0);

    }

}
/* ===========================================================
   STORY
=========================================================== */

#story{

    background:#ffffff;

    overflow:hidden;

}

#story .container{

    text-align:center;

}

.storyDesc{

    margin:0 auto 80px auto;

    max-width:900px;

}

/* ===========================================================
   TIMELINE
=========================================================== */
.timeline {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap; /* [수정] 데스크톱에서 절대 아래로 떨어지지 않도록 강제 고정 */
    gap: 0;
    margin-top: 80px;
    width: 100%;
    max-width: 1200px; /* 타임라인 전체 최대 너비 제한 */
    margin-left: auto;
    margin-right: auto;
}

.step {
    /* [수정] 고정폭(170px) 대신 유연하게 줄어들 수 있도록 설정 */
    flex: 1 1 0%; 
    min-width: 120px; /* 글자가 깨지지 않는 최소 너비 */
    text-align: center;
    position: relative;
    opacity: .35;
    transition: .6s;
}

.step.active {
    opacity: 1;
}

.step:hover {
    opacity: 1;
    transform: translateY(-8px);
}

.circle {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #d9e8fb;
    color: #1d63c8;
    font-size: 28px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    transition: .4s;
}

.step.active .circle {
    background: #0077ff;
    color: #fff;
    box-shadow: 0 0 25px rgba(0,119,255,.35);
}

.step:hover .circle {
    transform: scale(1.1);
}

.step h3 {
    margin-top: 25px;
    font-size: 19px; /* [조정] 22px에서 19px로 살짝 줄여 한 줄 유지력 강화 */
    color: #17407b;
    word-break: keep-all; /* 단어 단위 줄바꿈 방지 */
}

.step p {
    margin-top: 12px;
    font-size: 14px; /* [조정] 15px -> 14px */
    color: #666;
    line-height: 1.4;
    word-break: keep-all;
}

/* ===========================================================
   TIMELINE LINE
=========================================================== */
.line {
    /* [수정] 고정폭(90px) 대신 남는 공간을 유연하게 채우도록 flex-grow 지정 */
    flex: 1 0 auto;
    max-width: 60px; /* [조정] 선이 너무 길어지지 않도록 최대치 제한 */
    height: 4px;
    margin-top: 40px;
    background: #d7dce4;
    position: relative;
    overflow: hidden;
}

.line::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #0077ff;
    transition: 1s;
}

.line.active::after {
    width: 100%;
}


/* ===========================================================
   [신규 추가] 태블릿 & 모바일 반응형 대응 (화면 폭 1024px 이하)
=========================================================== */
@media (max-width: 1024px) {
    .timeline {
        flex-wrap: wrap; /* 모바일 계열에서는 세로 혹은 격자로 떨어지도록 허용 */
        justify-content: space-around;
        gap: 30px 10px;
    }
    
    .step {
        flex: none;
        width: 45%; /* 태블릿에서는 2열 배치가 되도록 설정 */
    }
    
    .line {
        display: none; /* 화면이 좁아져 줄이 끊기면 어색하므로 중간 선은 숨김 처리 */
    }
}

@media (max-width: 480px) {
    .step {
        width: 100%; /* 모바일 스마트폰에서는 한 줄에 하나씩 정렬 */
    }
}


/* ===========================================================
   PARALLAX
=========================================================== */

.parallax{

    position:relative;

    height:520px;

    background-image:url("../images/parallax.jpg");

    background-position:center;

    background-repeat:no-repeat;

    background-size:cover;

    background-attachment:fixed;

    overflow:hidden;

}

.parallax .overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

.parallax .content{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:90%;

    max-width:1000px;

    text-align:center;

    color:white;

}

.parallax h2{

    font-size:56px;

    line-height:1.3;

    margin-bottom:30px;

}

.parallax p{

    color:#ffffff;

    font-size:22px;

}



/* ===========================================================
   BUSINESS
=========================================================== */

#business{

    background:#f7f9fc;

}

#business .container{

    text-align:center;

}

.businessGrid{

    margin-top:70px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}



/* ===========================================================
   BUSINESS BOX
=========================================================== */

.businessBox{

    background:#fff;

    border-radius:18px;

    padding:45px;

    transition:.35s;

    position:relative;

    overflow:hidden;

    box-shadow:

        0 10px 30px rgba(0,0,0,.08);

}

.businessBox:hover{

    transform:translateY(-10px);

    box-shadow:

        0 18px 45px rgba(0,0,0,.14);

}



/* ===========================================================
   NUMBER
=========================================================== */

.number{

    font-size:54px;

    font-weight:900;

    color:#d7e5f7;

    line-height:1;

    margin-bottom:25px;

    transition:.35s;

}

.businessBox:hover .number{

    color:#0077ff;

}



/* ===========================================================
   BUSINESS TITLE
=========================================================== */

.businessBox h3{

    font-size:28px;

    color:#17407b;

    margin-bottom:20px;

    transition:.3s;

}

.businessBox:hover h3{

    color:#0077ff;

}



/* ===========================================================
   BUSINESS TEXT
=========================================================== */

.businessBox p{

    font-size:17px;

    color:#666;

    line-height:1.8;

}



/* ===========================================================
   BUSINESS ANIMATION
=========================================================== */

.businessBox{

    opacity:0;

    transform:translateY(40px);

}

.businessBox.show{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.businessBox:nth-child(1){transition-delay:.05s;}
.businessBox:nth-child(2){transition-delay:.10s;}
.businessBox:nth-child(3){transition-delay:.15s;}
.businessBox:nth-child(4){transition-delay:.20s;}
.businessBox:nth-child(5){transition-delay:.25s;}
.businessBox:nth-child(6){transition-delay:.30s;}
</style>