body #header{background: transparent;transition: background 0.3s;}
body #header .header-logo{filter: brightness(0) invert(1);transition: filter 0.3s;}
body #header .mo-icon-button,
body #header .menu-items,
body #header .header-social{color: #fff;transition: color 0.3s;}
body #header.active{background: #fff;}
body #header.active .header-logo{filter: none;}
body #header.active .mo-icon-button,
body #header.active .menu-items,
body #header.active .header-social{color: #000;}

body #wrap{padding-top: 0 !important;}
body #footer{margin-top: 0 !important;}

.ani-logo{position: fixed;}

@media all and (max-width:1023px) {
    .ani-logo{display: none;}
}

/* 메인 비쥬얼 */
.main-visual{font-size: 0;height: 100vh;}
.main-visual > div{height: 100%;}
.main-visual > div figure{height: 100%;}
.main-visual > div figure img{display: block;width: 100%;height: 100%;object-fit: cover;}


/* 메인 프로젝트 */
.main-project{padding: 150rem 0;}
.main-project .project-list{position: relative;display: flex;flex-direction: column;gap: 24rem;}
.main-project .project-list h3{font-weight: 500;font-size: 24rem;position: absolute;top: 0;left: 0;}
.main-project .project-item{display: flex;align-items: flex-end;gap: 20rem;}
.main-project .project-item .info{width: calc(100% * (1/6));}
.main-project .project-item .info p{font-size: 14rem;font-weight: 500;margin-bottom: 7rem;text-align: right;color: var(--color-neutral-5);}
.main-project .project-item .info div{display: flex;align-items: center;justify-content: flex-end; gap: 16rem;font-weight: 300;}
.main-project .project-item .info div span{display: inline-block;font-size: 12rem;color: var(--color-neutral-5);position: relative;}
.main-project .project-item .info div span:first-child::after{content: "";width: 1px;height: 10rem;display: block;background: var(--color-neutral-2);position: absolute;top: 50%;right: -8rem;transform: translateY(-50%);}
.main-project .project-item .info a{display: inline-flex;align-items: center;gap: 5rem; font-size: 14rem;line-height: 1.4;color: var(--color-neutral-4);display: none;}
.main-project .project-item .info a svg{width: 14rem;height: 14rem;}
.main-project .project-item .image-content{width: calc(100% * (5/6));display: flex;gap: 16rem;}
.main-project .project-item .image-content > a{display: block;position: relative;}
.main-project .project-item .image-content > a::after{content: "";background: #00000080 url(../images/main/plus.svg) no-repeat center center / 50rem 50rem; width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;transition: .3s;}
.main-project .project-item .image-content > a:hover::after{opacity: 1;visibility: visible;}
.main-project .project-item .image-content > a img{display: block;width: 100%;}
.main-project .project-more{text-align: right;margin-top: 30rem;}
.main-project .project-more a{display: flex;align-items: center;justify-content: flex-end;font-size: 20rem;font-weight: 500;gap: 5rem;}
.main-project .project-more a svg{width: 22rem;height: 22rem;}

@media all and (max-width:1440px) {
    .main-project .project-list{gap: 15rem;}
    .main-project .project-item .info div{gap: 12rem;}
    .main-project .project-item .image-content{gap: 8rem;}
    .main-project .project-more{margin-top: 20rem;}
}

@media all and (max-width:1023px) {
    .main-project{padding: 70rem 0;}
    .main-project .project-list{gap: 25rem;}
    .main-project .project-list h3{position: static;margin-bottom: 5rem;}
    .main-project .project-item{flex-direction: column-reverse;gap: 12rem;}
    .main-project .project-item .info{width: 100%;display: flex;align-items: center;justify-content: space-between;}
    .main-project .project-item .info p{margin-bottom: 0;}
    .main-project .project-item .info div{display: none;}
    .main-project .project-item .info a{display: flex;}
    .main-project .project-item .image-content{width: 100%;}
    .main-project .project-item .image-content > a::after{display: none;}
    .main-project .project-more{margin-top: 30rem;}
}

@media all and (max-width:767px) {
    .main-project .project-list h3{font-size: 20rem;}
    .main-project .project-item{margin-right: -16rem;}
    .main-project .project-item .info{padding-right: 16rem;}
    .main-project .project-item .info p{font-size: 14rem;}
    .main-project .project-item .info a{font-size: 13rem;}
    .main-project .project-item .info a svg{width: 12rem;height: 12rem;}
    .main-project .project-item .image-content{height: 218rem;flex-wrap: nowrap;overflow-x: auto;overflow-y: hidden;scrollbar-width: none;-ms-overflow-style: none;cursor: grab;padding-right: 16rem;}
    .main-project .project-item .image-content::-webkit-scrollbar{width: 0;height: 0;display: none;}
    .main-project .project-item .image-content.dragging{cursor: grabbing;user-select: none;}
    .main-project .project-item .image-content > a{flex-shrink: 0;height: 100%;}
    .main-project .project-item .image-content > a img{height: 100%;width: auto;object-fit: cover;}
    .main-project .project-more a{font-size: 16rem;}
    .main-project .project-more a svg{width: 16rem;height: 16rem;}
}



/* 메인 어바웃 */
.main-about{background: var(--color-primary);padding: 95rem 0 75rem;color: var(--color-neutral-1);text-align: right;}
.main-about .brand-info{display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 150rem;}
.main-about .brand-info h3{font-size: 0;}
.main-about .brand-info h3 img{display: block;width: 365rem;filter: invert(1);}
.main-about .brand-info p{font-size: 18rem;line-height: 1.4;}
.main-about a{display: inline-flex;align-items: center;justify-content: flex-end;font-size: 20rem;font-weight: 500;gap: 5rem;}
.main-about a svg{width: 22rem;height: 22rem;}

@media all and (max-width:1023px) {
    .main-about{padding: 55rem 0 50rem;}
    .main-about .brand-info{flex-direction: column;gap: 125rem;margin-bottom: 30rem;}
    .main-about .brand-info p{text-align: left;}
}

@media all and (max-width:767px) {
    .main-about .brand-info h3 img{width: 198rem;}
    .main-about .brand-info p{font-size: 14rem;}
    .main-about a{font-size: 16rem;}
    .main-about a svg{width: 16rem;height: 16rem;}
}


/* 메인 컨택트 */
.main-contact{position: relative;}
.main-contact figure img{display: block;width: 100%;}
.main-contact .wrap-max{position: absolute;bottom: 50rem;left: 0;display: flex;justify-content: space-between;align-items: flex-end;}
.main-contact .wrap-max p{font-size: 18rem;line-height: 1.4;}
.main-contact .wrap-max a{display: inline-flex;align-items: center;justify-content: flex-end;font-size: 20rem;font-weight: 500;gap: 5rem;}
.main-contact .wrap-max a svg{width: 22rem;height: 22rem;}

@media all and (max-width:767px) {
    .main-contact .wrap-max{flex-direction: column;align-items: stretch;gap: 30rem;}
    .main-contact .wrap-max p{font-size: 14rem;}
    .main-contact .wrap-max a{font-size: 16rem;}
    .main-contact .wrap-max a svg{width: 16rem;height: 16rem;}
}