.wrapper {  }

.page-404 { background-color:var(--bg-color-main, #333); }
.page-404 .text-box { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.page-404 .text-box .desc { margin:20px 0 0; color:var(--color-white, #fff); font-size:5vw; line-height:1.5; text-align:center; }

/*opening*/
#opening { position:fixed; top:0; left:0; width:100%; height:100%; z-index:100; background-color:var(--bg-color-main, #333); }
#opening .opening-svg { position:absolute; top:50%; left:50%; width:30%; transform:translate(-50%,-50%); z-index:10; }
#opening .opening-image { position:absolute; top:0; left:0; width:100%; height:100%; opacity:.5; }
#opening .opening-image img { width:100%; height:100%; object-fit:cover; }
#logo {
    fill: transparent; /* 배경색 투명 */
    stroke: white; /* 스트로크 색상 */
    stroke-width: 2; /* 스트로크 두께 */
    stroke-dasharray: 5000; /* 스트로크 길이 */
    stroke-dashoffset: 5000; /* 처음에 안 보이도록 */
    animation: draw 5s ease-in-out forwards, fillBg 1s ease-in-out forwards 1s;
}

/* 1️⃣ 선이 그려지는 애니메이션 */
@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* 2️⃣ 배경색이 서서히 채워지는 애니메이션 */
@keyframes fillBg {
    from {
        fill: transparent;
    }
    to {
        fill: white;
    }
}
/*main*/
.main-cover { position:relative; padding:105px 0 0; }
.main-text-scale { z-index:10; width:100%; text-align:center;}
/*.main-text-scale .main-text { transform:scale(2) }*/
.main-text-scale {
    height: 300vh;
    position: relative;
}
.main-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2);
    font-size: 4rem;
    z-index: 10;
    will-change: transform;
    transition: transform-scale 0.5s ease;
}

.main-text.unfixed {
    position: absolute;
    top: 100% !important; /* 스크롤 애니메이션이 끝나는 시점 위치 고정 */
    left: 50%;
    transform: translateX(-50%) scale(0.6);
    transition: none !important;
}
    /*.main-text-scale .scale-cover { position:sticky; top:0; left:0; height:80vh; text-align:center; transition: transform 0.3s ease-out; }*/
/*.main-text-scale .scale-cover .main-text { position:absolute; top:55%; left:50%; transform:translate(-50%,-50%) scale(3); transition: transform 0.3s ease-out; }*/
.main-text .desc { font-size:35px; }
.main-text .title img { max-width:350px; margin:25px auto 0; }
.main-img-container { position:relative; margin:300px 0 80px; height:120vh; }
.main-img-container .main-img-cover { margin:200px 0 0; }
/*.main-img-container .main-img-cover { position:sticky; top:100px; height:100vh; overflow:hidden; }*/
/*.main-img-container .main-img-cover .main-img { position:absolute; top:0; left:50%; width: 100%; height:100%; transform:translate(-50%, 0) scale(.2); transform-origin:top center; transition: transform 0.3s ease-out; pointer-events:none; }*/
/*.main-img-container .main-img-cover .main-img img { object-position:center 0vh; }*/
.main-foot-text .side-left { font-size:45px; font-weight:700; }
.main-foot-text .side-right { text-align:right; margin:120px 0 55px;  font-size:20px; }
.main-foot-text .side-right .desc { margin:0 0 55px; }
.main-foot-text .side-right .about-button a { position:relative; display:block; margin-left:auto; padding:6px 40px 6px 24px; }
.main-foot-text .side-right .about-button a span { position:absolute; top:50%; right:25px; transform:translateY(-50%); transition:all .3s; }
.main-foot-text .side-right .about-button a:hover span { right:15px; }

/*our-project*/
.our-project { display:none; margin:200px auto 0; }
.our-project .common-title { display:flex; gap:0 30px; }
.our-project .common-title > div { display:flex; gap:0 5px; }
.our-project .main-project-cover { position:relative; display:flex; align-items: center; gap:160px 110px; overflow:hidden; margin:190px 0 0;  height:200vh; }
.our-project .main-project-cover .common-item-cover { position:relative; height:100%; overflow:hidden; width:33.33%; }
.our-project .main-project-cover .common-item-cover:not(:nth-child(2)) { position:relative; height:150vh; }
.our-project .main-project-cover .common-item-cover > div,
.our-project .main-project-cover .common-item-cover .even { position:absolute; top:0; left:0; width:100%; height:auto; display:flex; align-items: flex-start; overflow:hidden; }
.our-project .main-project-cover .common-item-cover:not(.second):before { content:''; position:absolute; top:0; left:0; display:block; width:100%; height:160px; background: linear-gradient(180deg, var(--bg-color-main, #040C12) 0%, rgba(0, 0, 0, 0) 100%); z-index: 10; }
.our-project .main-project-cover .common-item-cover:not(.second):after { content:''; position:absolute; bottom:0; left:0; display:block; width:100%; height:160px; background: linear-gradient(0, var(--bg-color-main, #040C12) 0%, rgba(0, 0, 0, 0) 100%); z-index: 10; }
.our-project .main-project-cover .item-cover { display:flex; flex-direction: column; gap:130px; width:100%; height:100%; }
.our-project .main-project-cover .item-cover.first.active { animation:ani1 60s infinite linear; }
.our-project .main-project-cover .item-cover.second.active { animation:ani2 60s infinite linear; }
.our-project .main-project-cover .item-cover.third.active { animation:ani3 60s infinite linear; }
.our-project .main-project-cover .item-cover:not(.second) {  }
.our-project .main-project-cover .item-cover:not(.second) .item-slides { display:flex; flex-direction: column; height:50%; }
.our-project .main-project-cover .item-cover .item-slides { display:flex; flex-direction: column; gap:130px;  }
.our-project .main-project-cover .item-cover .item { flex:1; }
.our-project .main-project-cover .item-cover .item img {  aspect-ratio: 9 / 13; object-fit: cover; }
.our-project .main-project-cover .item-cover .item .item-title { margin:16px 0 0; font-size:20px; font-weight:700; }
.our-project .main-project-cover.mobile { display:none; }
.our-project .main-project-cover.mobile .item-cover.mo1.active { animation:ani4 60s infinite linear; }
.our-project .main-project-cover.mobile .item-cover.mo2.active { animation:ani5 60s infinite linear; }

@keyframes ani1 {
    0% { transform: translateY(0); }
    100% { transform: translateY(calc(-50% - 65px)); }
}
@keyframes ani2 {
    0% { transform: translateY(calc(-50% - 65px)); }
    100% { transform: translateY(0); }
}
@keyframes ani3 {
    0% { transform: translateY(0); }
    100% { transform: translateY(calc(-50% - 65px)); }
}
@keyframes ani4 {
    0% { transform: translateY(0); }
    100% { transform: translateY(calc(-50% - 65px)); }
}
@keyframes ani5 {
    0% { transform: translateY(calc(-50% - 65px)); }
    100% { transform: translateY(0); }
}



/*What-we-do*/
.we-do-container { margin:380px auto 0; }
.we-do-text-cover { max-width:1600px; margin:0 auto; }
.we-do-text-cover .common-title { display:flex; gap:0 30px; }
.we-do-text-cover .common-title > div { display:flex; gap:0 5px; }
.we-do-desc { margin:20px 0 0; font-weight:700; font-size:55px; }
.we-do-cover { position:relative; margin:50px 0 0; color: #fff; overflow: hidden; padding:0; transition: background-color .6s ease-out, color .6s ease-out; z-index: 2; }
.carousel-container { padding:150px 0; }
.carousel { display: flex; justify-content: center; -webkit-perspective: 1150px; perspective: 1150px; position: relative; -webkit-transform: rotate(-6deg); transform: rotate(-6deg); width: 100%; z-index: 1; }
.carousel-cover { flex-grow: 0; height: 30vw; width: 30vw; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; }
.carousel-slide { height: 100%; padding: 10px; position: absolute; width: 100%; }
.carousel-slide:hover { cursor: url('/images/point-cursor.svg') 40 40, pointer; }
.carousel-slide .slide-cover { position: relative; border:5px solid #fff; border-radius:5px; height: 100%; -webkit-transform: scaleX(-1); transform: scaleX(-1); width: 100%; }
.carousel-slide .slide-cover .slide-img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 70%; pointer-events: none; }
.carousel-slide .slide-cover .hover-desc { display:none; }
.carousel-slide .slide-cover:hover .hover-desc { position:absolute; display:block; z-index:80; }
.carousel img { user-select: none; -webkit-user-drag: none; }

/*반응형*/
@media (max-width: 1640px) {

}

@media (max-width: 1084px) {
    .main-text .desc { font-size:20px; }
    .main-text .title img { width:180px; }

    .main-cover { padding:50px 0 0; }
    .main-text-scale { *height:100vh; }
    .main-img-container { height:40vh; margin:150px 0 0; }
    .main-img-container .main-img-cover { height:60vh }
    .main-text-scale { height:2500px }
    .main-text-scale .scale-cover .main-text.unfixed { top:100% !important; *transform: translate(-50%, -50%) scale(1.5); }
    .main-foot-text .side-left { font-size:25px; }
    .main-foot-text .side-right { margin:40px 0 0; font-size:14px; }
    .main-foot-text .side-right .about-button a { font-size:12px; }
    .main-foot-text .side-right .desc:not(.etc-mo) { display:none; }

    .our-project { margin:140px 0 0; }
    .our-project .main-project-cover { display:none; }
    .our-project .main-project-cover.mobile { display:flex; height:220vh; gap:0 30px; }
    .our-project .main-project-cover.mobile .common-item-cover { height:180vh; width:50%; }
    .our-project .main-project-cover.mobile .common-item-cover:nth-child(1) { align-self:flex-end }
    .our-project .main-project-cover.mobile .common-item-cover:nth-child(2) { align-self:flex-start }
    .our-project .main-project-cover .item-cover,
    .our-project .main-project-cover .item-cover .item-slides { gap:34px; }
    .our-project .main-project-cover .item-cover .item .item-title { font-size:14px; }
    /*.our-project .main-project-cover { gap:34px 30px; }*/
    /*.our-project .main-project-cover .item-cover.first { height:1700px; }*/
    /*.our-project .main-project-cover .item-cover.second { height:1700px; }*/
    /*.our-project .main-project-cover .item-cover:not(.third) { height:1700px; margin:140px 0; }*/
    /*.our-project .main-project-cover .item-cover.third { display:none; !*임시*! }*/
    /*.our-project .main-project-cover .item-cover .item { max-height:100% !important; }*/
    /*.our-project .main-project-cover .item-cover .item .item-title { font-size:14px; }*/
    /*.our-project .main-project-cover .item-cover .item img { max-width:100%; max-height:100%; height:auto; }*/

    .we-do-container { margin:140px auto 0; }
    .we-do-desc { font-size:20px; font-weight:500; }
    .border-act.top-line svg,
    .border-act.bottom-line svg { width:100%; height:100%; }
    .carousel-container { padding:70px 0 150px; pointer-events: none; }
    .carousel-slide .slide-cover .hover-desc { display:block; position:absolute; transform:translate(-50%, 0) scale(1) !important; top:110%; left:50%; width:100%; }
}

@media (max-width: 684px) {
    .our-project .main-project-cover.mobile { height:150vh; }
    .our-project .main-project-cover.mobile .common-item-cover { height:120vh; }
}