/* 메인 헤더 */
.headerArea .navbar li a { opacity: 1; }
/* 메인 헤더 끝 */

/* 로딩 */
.loading {
    width: 100vw;
    height: 100vh;    
    z-index: 100;
    background-color: #000;   
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    transition: opacity .5s;
}
.loading .bg {  
    width: 0;
    background-color: #fff;
    height: 100%;
    position: absolute;
    animation-timing-function: ease-in;
}
.loading .main_title {  
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
.loading .main_title .title { text-align: center; overflow: hidden; }
.loading .main_title .title strong {  
    display: inline-block;
    color: #FFF;
    font-family: 'Outfit', sans-serif;
    font-size: 14.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1; /* 144px */
    mix-blend-mode: exclusion;
}
.loading .main_title.on .title strong { animation: fadeInUp .7s .2s both linear; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to { opacity: 1; transform: none; }
}
@-webkit-keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to { opacity: 1; transform: none; }
}
@-ms-keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to { opacity: 1; transform: none; }
}
/* 로딩 끝 */

.visual { 
    position: relative;
    height: 100vh;
    margin-bottom: 9rem;
}
.visual .scrolldown {  
    position: absolute;
    left: 50%;
    bottom: 4rem;
    color: #AAA;
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    transform: translate3d(-50%, 20px, 0);
    opacity: 0;
    transition: all .5s;
}
.main.on .visual .scrolldown {  
    transform: translate3d(-50%, 0, 0);
    opacity: 1;
    animation: blink 1s 1s infinite;
}
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
.visual .height {
    width:100vw;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.visual .title { width: 100vw; height: 160px; overflow: hidden; }
.visual .on { background: #fff; }

/* 트렌지션 */
.visual .height strong {  
    height: 100%;
    display: block;
    color: #000;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 14.4rem;
    font-weight: 700;
    line-height: 1; 
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    background: #fff;
    transition: all 0.7s;
}

.visual .height .swiper-wrapper { transform: translate3d(0, 0, 0)!important; height: 160px; }
.visual .height .swiper-wrapper .swiper-slide {      
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 160px;
    text-align: center;
    
}
.visual .height .swiper-wrapper .swiper-slide:first-child strong { opacity: 1; }
.visual .height .swiper-wrapper .swiper-slide strong { opacity: 0; }
.visual .height .swiper-wrapper .swiper-slide.swiper-slide-active strong { opacity: 1; }


.visual .inner { 
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 0; 
    height: 0; 
    overflow: hidden;    
    transition: all 1.4s;
    backface-visibility: hidden;
}
.visual .inner .img { 
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 494px;
    width: 1014px;
}
.visual .inner .img img { width: 100%; height: 100%; object-fit: cover; }
.visual .inner .img .deco {
    position: absolute;
    bottom: 2.8rem;
    left: 50%;
    transform: translateX(-50%); 
}
.visual .inner .img .deco .relative { position: relative; }
.visual .inner .img .deco .relative svg { width: 36.8rem; height: 36.4rem; }

.visual .inner .img .deco .relative svg { 
    animation-delay: 0s !important;
    /* stroke-dasharray: 6100;
    stroke-dashoffset: 6100;
    animation-duration: 20s; */
    
    
    /* stroke-dasharray: 900; */
    stroke-dashoffset: 900;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;    

    opacity: 0; /* 시작 시 완전히 투명 */
    /* animation: fadeIn 3s ease-in-out forwards;  */
        
}
/* .visual .inner .img .deco .relative svg {
    animation-delay: 0s !important;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    opacity: 0;
} */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; } /* 최종 상태를 불투명으로 설정 */
}
@keyframes dash {
    to { stroke-dashoffset: 0; }
}




@media (min-width: 1181px){
    header { transform: translate3d(0, -100px, 0); opacity: 0; transition: all .5s; }
    header.on { transform: none; opacity: 1; }
}
@media (max-width: 1180px){
    .loading { display: none; }
    .visual { height: 100%; padding-top: calc(100vw * (80 / 1180)); margin: calc(100vw * (98 / 1180)) 0 calc(100vw * (40 / 1180)); }
    .visual .scrolldown { display: none; }
    .visual .height { width: 100vw; height: 100%; }
    .visual .title { height: calc(100vw * (130 / 1180)); }
    .visual .height strong { font-size: calc(100vw * (118 / 1180)); }
    .visual .inner { margin-top: calc(100vw * (52 / 1180)); height: calc(100vw * (494 / 1180)); width: calc(100vw * (924 / 1180)); }
    .visual .inner .img { 
        height: calc(100vw * (494 / 1180));
        width: calc(100vw * (924 / 1180));
    }
    .visual .inner .img .deco { bottom: calc(100vw * (28 / 1180)); }
    .visual .inner .img .deco .relative svg { opacity: 1; width: calc(100vw * (368 / 1180)); height: calc(100vw * (364 / 1180)); animation-name:dash; }

    /* 모바일 트렌지션 */
    .visual .title .swiper-wrapper { position: relative; height: calc(100vw*(130 / 1180)); }
    .visual .title .swiper-wrapper li { 
        transform: translate3d(0px, 0, 0px)!important; 
        opacity: 0!important; 
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        width: 100%;
    }
    .visual .title .swiper-wrapper li.swiper-slide-active { opacity: 1!important; }
}
@media (max-width: 767px){
    .visual { padding-top: calc(100vw * (140 / 767)); margin: calc(100vw * (120 / 767)) 0 calc(100vw * (40 / 767)); }
    .visual .title { height: calc(100vw * (120 / 767)); }
    .visual .height strong { font-size: calc(100vw * (94 / 767)); }
    .visual .inner { margin: calc(100vw * (44 / 767)) -2px 0; height: calc(100vw * (535 / 750)); width: calc(100vw + 4px); }
    .visual .inner .img { height: 100%; width: 100%; object-fit: cover; }
    .visual .inner .img .deco { top: calc(100vw * (132 / 767)); bottom: auto; }
    .visual .inner .img .deco .relative svg { width: calc(100vw * (292 / 750)); height: calc(100vw * (292 / 750)); }
}

.established { padding: 9rem 0 24rem }
.established p { text-align: center; margin-bottom: 9rem; }
.established p b {  
    position: relative;
    display: block;
    padding-top: 7.9rem;
    font-family: 'Outfit', sans-serif;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.24px;
    text-transform: uppercase;
}
.established p b::before {  
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 3.1rem;
    background: #111;
}
.established p span {  
    width: 100%;
    max-width: 1044px;
    display: block;
    margin: 2.5rem auto 0;
    font-family: 'Outfit', sans-serif;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.6; 
}
.established .flex {  
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}
.established .flex .item strong {  
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 14.4rem;
    font-weight: 600;
    line-height: 1; 
    letter-spacing: -1.44px;
}
.established .flex .line.off {  
    width: 1rem;
    margin: 0 -2rem;
}
.established .flex .line {
    margin: 0;  
    font-size: 0;
    width: 1rem;
    height: 10px;
    background: #000;
    transition: width 1.4s ease-out;
    transition-delay: 1s;
}
.established.on .flex .line { width: 55.2rem; }
.about .item1 .img:hover img {  
    -ms-transform: scale(1.15) rotate(0.002deg);
    -o-transform: scale(1.15) rotate(0.002deg);
    -moz-transform: scale(1.15) rotate(0.002deg);
    -webkit-transform: scale(1.15) rotate(0.002deg);
    transform: scale(1.15) rotate(0.002deg);
}
.about .item2 .img:hover img {  
    -ms-transform: scale(1.15) rotate(0.002deg);
    -o-transform: scale(1.15) rotate(0.002deg);
    -moz-transform: scale(1.15) rotate(0.002deg);
    -webkit-transform: scale(1.15) rotate(0.002deg);
    transform: scale(1.15) rotate(0.002deg);
}
/* .about .item1.on .img img {  
    -ms-transform: scale(1.15) rotate(0.002deg);
    -o-transform: scale(1.15) rotate(0.002deg);
    -moz-transform: scale(1.15) rotate(0.002deg);
    -webkit-transform: scale(1.15) rotate(0.002deg);
    transform: scale(1.15) rotate(0.002deg);
}
.about .item2.on .img img {  
    -ms-transform: scale(1.15) rotate(0.002deg);
    -o-transform: scale(1.15) rotate(0.002deg);
    -moz-transform: scale(1.15) rotate(0.002deg);
    -webkit-transform: scale(1.15) rotate(0.002deg);
    transform: scale(1.15) rotate(0.002deg);
} */
.about .item { position: relative; margin-bottom: 100px; }
.about .item:nth-child(2n) {  }
.about .item:nth-child(2n) .desc { margin: 0 0 0 auto; }
.about .item:nth-child(2n) .img { right: auto; left: 0; }
.about .item:nth-child(2n) .desc .title_box { display: none; }
.about .item:nth-child(2n) .desc { display: flex; flex-wrap: nowrap; align-items: flex-end; }
.about .item:nth-child(2n) .desc p { height: 100%; }
.about .item .img {  
    position: absolute;
    top: 0;
    right: 0;
    max-width: 50%;
    width: calc(100vw * (960 / 1920));
    height: 900px;
    overflow: hidden;
}
.about .item .img img { width:100%; height:100%; object-fit: cover; transition: all 1s; }
.about .item .desc { max-width: 773px; height: 900px; }
.about .item .desc .title_box { width: 100%; height: 17%; margin-bottom: 0; overflow: hidden; }
.about .item .desc .title_box h3 { font-family: 'Outfit', sans-serif; }
.about .item .desc p {  
    color: #111;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.6;
    width: 100%;
    height: 83%;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    word-break: keep-all;
}
.about .item .desc p span { display: block; opacity: 0; transform: translate3d(0, 20px, 0); word-break: keep-all; }
.portfolio { position: relative; margin: 24rem 0 18.5rem; }
.portfolio .title_box { overflow: hidden; }
.portfolio .title_box h3 { font-family: 'Outfit', sans-serif; }
.portfolio a {  
    color: #111;
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: capitalize;
    position: absolute;
    left: 60px;
    bottom: 40px;
} 

.portfolio ul { 
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    height: 832px;
    overflow: hidden;
}
.portfolio ul li { width: 450px; overflow: hidden; }
.portfolio ul li:nth-child(2n) { width: 752px; }
.portfolio ul li .img { width: 100%; height: 0; transition: height .5s ease-out; }
.portfolio ul li .img img { width: 100%; object-fit: cover; transition: transform .5s 5s ease-out; }

.portfolio.on ul li:nth-child(1) .img { height: 518px; }
.portfolio.on ul li:nth-child(2) .img { height: 410px; }
.portfolio.on ul li:nth-child(2) .img { height: 832px; transition-delay: .5s; }
.portfolio.on ul li:nth-child(2) .img img { transition-delay: .5s; }
.portfolio.on ul li:nth-child(3) .img { height: 296px; transition-delay: 1s; }
.portfolio.on ul li:nth-child(3) .img img { transition-delay: 1s;}

.fadeup { opacity: 0; transform: translate3d(0, 20px, 0); }
.established.on .fadeup {  
    animation: textUp 1s both cubic-bezier(0.25, 0.79, 0.58, 1);
    -webkit-animation: textUp 1s both cubic-bezier(0.25, 0.79, 0.58, 1);    
}
.item.on .fadeup {  
    animation: textUp 1s both cubic-bezier(0.25, 0.79, 0.58, 1);
    -webkit-animation: textUp 1s both cubic-bezier(0.25, 0.79, 0.58, 1);    
}
.portfolio.on .fadeup {  
    animation: textUp 1s both cubic-bezier(0.25, 0.79, 0.58, 1);
    -webkit-animation: textUp 1s both cubic-bezier(0.25, 0.79, 0.58, 1);    
}
@keyframes textUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 4rem, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@-webkit-keyframes textUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 4rem, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1800px){
    .established .flex .item strong { font-size: calc(100vw * (144 / 1800)); }
    .established.on .flex .line { width: calc(100vw * (552 / 1800)); }
    .about .item .img { width: calc(100vw * (960 / 1800)); height: calc(100vw * (900 / 1800)); }
    .about .item .desc { max-width: calc(100vw * (773 / 1800)); height: calc(100vw * (900 / 1800)); padding-right: 30px; }
    .about .item .desc p { font-size: calc(100vw * (24 / 1800)); }
    .about .item:nth-child(2n) .desc p { padding-right: 0; padding-left: 30px; }
}

@media (max-width: 1180px){
    .established { padding: calc(100vw * (120 / 1180)) 0 calc(100vw * (200 / 1180)); }
    .established p { margin-bottom: calc(100vw * (90 / 1180)); }
    .established p b { padding-top: calc(100vw * (79 / 1180)); font-size: calc(100vw * (24 / 1180)); }
    .established p b::before { width: 1px; height: calc(100vw * (31 / 1180)); }
    .established p span { max-width: 1044px; margin: calc(100vw * (25 / 1180)) auto 0; font-size: calc(100vw * (24 / 1180)); }
    .established .flex { gap: calc(100vw * (40 / 1180)); }
    .established .flex .item strong { font-size: calc(100vw * (144 / 1180)); letter-spacing: calc(100vw * (-1.44 / 1180)); }
    .established .flex .line.off { margin: 0 calc(100vw * (-20 / 1180)); }
    .established .flex .line { height: 10px; }
    .established.on .flex .line { width: calc(100vw * (228 / 1180)); }

    .about .item { margin-bottom: calc(100vw * (100 / 1180)); }
    .about .item .img { 
        opacity: 0;
        transform: translate3d(0, 20px, 0);
        position: relative; 
        max-width:100%; 
        width: calc(100vw * (845 / 1180)); 
        height: calc(100vw * (792 / 1180)); 
        animation-delay: 1s;
    }
    .about .item .desc { max-width: calc(100vw * (785 / 1180)); height: auto; margin-bottom: calc(100vw * (64 / 1180)); padding: 0; }
    .about .item .desc .title_box { margin-bottom: calc(100vw * (64 / 1180)); }
    .about .item .desc p { font-size: calc(100vw * (24 / 1180)); }    
    .about .item:nth-child(2n) .desc { margin: 0 0 calc(100vw * (64 / 1180)) auto; } 
    .about .item:nth-child(2n) .desc p { padding-left: 0; }
    .about .item:nth-child(2n) .img { margin: 0 0 0 auto; }

    .about .item1 .desc p span { animation-delay: .5s; }

    .portfolio { margin: calc(100vw * (240 / 1180)) 0 calc(100vw * (100 / 1180)); }
    .portfolio a { font-size: calc(100vw * (24 / 1180)); left: 0; bottom: calc(100vw * (40 / 1180)); } 
    .portfolio ul { gap: calc(100vw * (9 / 1180)); height: calc(100vw * (524 / 1180)); }
    .portfolio ul li { width: calc(100vw * (284 / 1180)); }
    .portfolio ul li:nth-child(2n) { width: calc(100vw * (474 / 1180)); }
    .portfolio.on ul li:nth-child(1) .img { height: calc(100vw * (326 / 1180)); }
    .portfolio.on ul li:nth-child(2) .img { height: calc(100vw * (524 / 1180)); }
    .portfolio.on ul li:nth-child(3) .img { height: calc(100vw * (186 / 1180)); }

}
@media (max-width: 767px){
    .established { padding: calc(100vw * (80 / 767)) 0 calc(100vw * (170 / 767)); }
    .established p { margin-bottom: calc(100vw * (60 / 767)); }
    .established p b { padding-top: calc(100vw * (94 / 767)); font-size: calc(100vw * (24 / 767)); }
    .established p b::before { width: 1px; height: calc(100vw * (31 / 767)); }
    .established p span { margin: calc(100vw * (16 / 767)) auto 0; font-size: calc(100vw * (24 / 767)); }
    .established .flex { gap: calc(100vw * (40 / 767)); }
    .established .flex .item strong { font-size: calc(100vw * (80 / 767)); letter-spacing: calc(100vw * (-0.8 / 767)); }
    .established .flex .line.off { margin: 0 calc(100vw * (-20 / 767)); }
    .established .flex .line { height: 4px; }
    .established.on .flex .line { width: calc(100vw * (141 / 767)); }

    .about .item { margin-bottom: calc(100vw * (80 / 767)); }
    .about .item .img { margin: 0 auto; width: calc(100% - calc(100vw * (80/ 767))); height: calc(100vw * (627 / 750)); }
    .about .item .desc { max-width: 100%; margin-bottom: calc(100vw * (54 / 767)); }
    .about .item .desc .title_box { margin-bottom: calc(100vw * (54 / 767)); }
    .about .item .desc p { font-size: calc(100vw * (26 / 767)); }
    .about .item:nth-child(2n) .desc { margin: 0 0 calc(100vw * (54 / 767)) auto; } 
    .about .item:nth-child(2n) .img { margin: 0 auto; }

    .portfolio { margin: calc(100vw * (200 / 767)) 0 calc(100vw * (40 / 767)); }
    .portfolio a { font-size: calc(100vw * (24 / 767)); left: 0; bottom: calc(100vw * (42 / 767)); } 
    .portfolio ul { justify-content: space-around; gap: calc(100vw * (8 / 767)); height: calc(100vw * (524 / 767)); }
    .portfolio ul li { width: calc(100vw * (248 / 750)); }
    .portfolio ul li:nth-child(2n) { width: calc(100vw * (414 / 750)); }
    .portfolio.on ul li:nth-child(1) .img { height: calc(100vw * (326 / 750)); }
    .portfolio.on ul li:nth-child(2) .img { height: calc(100vw * (524 / 750)); }
    .portfolio ul li:nth-child(3) { display: none; }

}

/* :lang(en) .about .item .desc p span { word-break: break-all; } */