.wrapper { overflow: hidden; }

/* 전체 영역 */
.intro-about { padding:150px 0 300px; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
/* 컨테이너 */
.intro-cover { display: flex; width: 100%; height: 100%; position: relative; gap:0 85px; }
/* 왼쪽 영역 (초기: 웹페이지 정중앙) */
.intro-left { padding:90px 0 0 36px; flex:1; }
.intro-left img { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); text-align: center; z-index: 2; }
/* 로고 */
.intro-title img { width: 80%; /* 🚀 초기 크기 (큰 상태) */ }
.intro-desc { position:relative; display:flex; align-items:center; gap:0 10px; }
.intro-desc .intro-desc-cover { display:flex; align-items:center; font-size:45px; }
.intro-desc .intro-desc-cover > div { opacity:0; transform:translateY(-20px); }
.intro-desc .intro-line { display:block; width:0; height:1px; background-color:#fff;  }
/* 오른쪽 영역 (초기: 보이지 않음) */
.intro-right { flex: 1; display: flex; justify-content: center; align-items: center; opacity: 0; transform: translateX(50px); }
/* 오른쪽 이미지 */
.intro-right img { width: 100%; max-width: 600px; height: auto; }

/*process*/
.process { margin:180px auto 0; }
.process-cover { position:relative; display:flex; align-items:flex-start; justify-content: space-between; gap:0 500px; }
.process-left .left-title { font-size:45px; font-weight:700; }
.process-left .left-desc { font-size:25px; margin:14px 0 0; }
.process-right .process-item + .process-item { margin:100px 0 0; }
.process-right .item-title { font-size:25px; font-weight:700; }
.process-right .item-desc { font-size:25px; margin:10px 0 0; }
.process.active .process-cover,
.process.over .process-cover { justify-content:flex-end; }
.process.active .process-left { position:fixed; top:180px; left:50%; transform:translateX(-50%); max-width:1600px; width:100%; }
.process.over .process-left { position:absolute; left:0; bottom:0; top:auto; }

/*service*/
.service { margin:160px auto 0; }
.service .common-title { font-size:40px; text-align:center; }
.service-cover { margin:275px 0 0; }
.service-cover > [class^="item-"] { display:flex; gap:0 50px; }
.service-cover > [class^="item-"].item-right { justify-content: flex-end; }
.service-cover > [class^="item-"] + [class^="item-"] { margin:100px 0 0; }
.service-cover > [class^="item-"] .item-image { position:relative; min-width:500px; width:500px; height:500px; transform:scaleY(0); transform-origin:0 100%; transition:all .3s; border-radius:10px; overflow:hidden; }
.service-cover > [class^="item-"] .item-image img { position:absolute; bottom:0; left:0; width:100%; height:100%; object-fit: cover; overflow:hidden; }
.service-cover > [class^="item-"] .item-text { opacity:0; transform:translateY(40px); transition:all .3s .2s; word-break:break-word; }
.service-cover > [class^="item-"] .item-title { position:relative; font-size:130px; font-weight:700; overflow:hidden; }
.service-cover > [class^="item-"] .item-desc { font-size:18px; margin:18px 0 0; }
.service-cover > [class^="item-"].active .item-text { opacity:1; transform:translateY(0); }
.service-cover > [class^="item-"].active .item-image { transform:scaleY(1); }


    /*marquee*/
.marquee.logos { margin:180px 0 0; }
.marquee.logos .marquee-content { gap:0 60px; }
.marquee.logos .marquee-content img { max-width: 200px; width:200px; height:70px; object-fit:cover; }

    /*value*/
.value { margin:205px auto 0; }
.value .common-title { font-size:40px; text-align:center; }
.value .value-desc { margin:26px 0 0; font-size:20px; text-align:center; }
.value-cover { margin:120px 0 0; overflow:hidden; }
.value-cover #current-map { max-width:1600px; width:100%; height:500px; margin:0 auto; }

/*반응형*/
@media (max-width: 1640px) {
    .process.active .process-left { transform:translateX(calc(-50% + 24px));  }
}

@media (max-width: 1084px) {
    .intro-about { padding:400px 0 0; height:130vh; }
    .intro-cover { flex-direction: column; gap:0; }
    .intro-left { padding:90px 36px 0; flex:none;  }
    .intro-right img { max-width:100%; object-fit:cover; }
    .intro-desc .intro-desc-cover { font-size:22px; }

    .process { margin:100px auto 0; }
    .process.active .process-left,
    .process.over .process-left { position:static; transform:none; }
    .process-cover { flex-direction:column; gap:35px 0; }
    .process .process-right { text-align:right; margin-left:auto; }
    .process-left .left-title { font-size:28px; }
    .process-left .left-desc { font-size:14px; margin:10px 0 0; }
    .process-right .item-title { font-size:16px; }
    .process-right .item-desc { font-size:15px; }
    .process-right .process-item + .process-item { margin:60px 0 0; }

    .service-cover { margin:80px 0 0; }
    .service-cover > [class^="item-"] { flex-direction:column; }
    .service-cover > [class^="item-"] .item-image { min-width:auto; width:calc(100% - 20%); height:auto; aspect-ratio: 1 / 1; }
    .service-cover > [class^="item-"].active .item-text { transform: translateY(-36px); }
    .service-cover > [class^="item-"] .item-title { font-size:45px; }
    .service-cover > [class^="item-"] .item-desc { font-size:14px; margin:7px 0 0; }
    .service-cover > [class^="item-"].item-right { align-items:flex-end; }
    .service-cover > [class^="item-"].item-right .item-image { order:1; }
    .service-cover > [class^="item-"].item-right .item-text { order:2; text-align:right; }

    .marquee.logos { margin:60px 0 0; }

    .value { margin:116px auto 0; }
    .value .value-desc { font-size:14px; }
}