@charset "utf-8";

/* main 공통 */
.main-container {position: relative; overflow: hidden;
    & .sec {position: relative;
        & .tit {margin: 0 0 50px;
            & p {font-size: 64px; font-weight: 700; line-height: 1; margin: 0 0 20px;}
            & span {font-size: 24px; font-weight: 600;}
        }
    }
    @media (width <= 1280px) {
        & .sec {
            & .tit {
                & p {font-size: 50px;}
                & span {font-size: 18px;}
            }
        }
    }
    @media (width <= 860px) {
        & .sec {
            & .tit {text-align: center;
                & p {font-size: 36px;}
                & span {font-size: 16px;}
            }
        }
    }
}

/* 메인 비주얼 */
.visual {display: flex; justify-content: flex-end; align-items: center; height: 100svh;
    & .main-video {position: absolute; left: 0; top: 0; width: 100%; height: 100%;
        &::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3);}
        & .videobg {position: relative; width: 100%; height: 100%; overflow: hidden; background: #111;
            & .videobg-width {position: absolute; width: 100%; height: 100%; left: -9999px; right: -9999px; margin: auto;
                & .videobg-aspect {position: absolute; width: 100%; height: 0; top: -9999px; bottom: -9999px; margin: auto; padding-bottom: 56.25%; overflow: hidden;
                    & .videobg-make-height {position: absolute; top: 0; right: 0; bottom: 0; left: 0;
                        & .videobg-hide-controls {box-sizing: content-box; position: relative; height: 100%; width: 100%; padding: 55px 97.7777px; top: -55px;  left: -97.7777px;
                            & iframe {position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 0 none;}
                        }
                    }
                }
            }
        }
    }
    & .visual-txt {position: relative; width: calc(100% / 2); color: #fff; z-index: 2; text-shadow: 0px 0px 8px rgb(0 0 0 / 30%);
        & p {font-size: 20px; font-weight: 700; opacity: 0; transform: translateY(30px);
            & br {display: none;}
        }
        & h2 {font-size: 64px; font-weight: 700; line-height: 1.2; margin: 20px 0 40px; opacity: 0; transform: translateY(30px);}
        & span {position: relative; display: inline-block; font-size: 20px; font-weight: 700; line-height: 1; opacity: 0; transform: translateY(30px);
            &::after {content: ''; position: absolute; top: 50%; left: 310px; transform: translateY(-50%); width: 100%; height: 7px; background: #fff;}
        }
    }
    &.active {
        & .visual-txt {
            & p {animation: fadeUp 1s both;}
            & h2 {animation: fadeUp 1s 0.5s both;}
            & span {animation: fadeUp 1s 1s both;}
        }
    }
    @media (width <= 1680px) {
        & .visual-txt {
            & p {font-size: 18px;}
            & h2 {font-size: 50px;}
            & span {font-size: 16px;}
        }
    }
    @media (width <= 1280px) {justify-content: center;
        & .visual-txt {width: 100%; text-align: center;
            & span {
                &::after {content: none;}
            }
        }
    }
    @media (width <= 640px) {
        & .visual-txt {padding: 0 20px;
            & p {font-size: 16px;
                & br {display: block;}
            }
            & h2 {font-size: 40px;}
        }
    }
    @media (width <= 460px) {
        & .visual-txt {
            & h2 {font-size: 30px;}
        }
    }
}

/* 메인 비젼 */
.vision {display: flex;
    & .vision-txt {width: 680px; padding: 70px; flex: 0 0 auto;
        & .desc {text-align: center;
            & p {font-size: 60px; font-weight: 700; line-height: 1.2; text-shadow: 0px 0px 10px #00000020; opacity: 0; transform: translateY(30px);}
            & span {display: block; font-size: 18px; line-height: 2; margin: 60px 0 40px; opacity: 0; transform: translateY(30px);}
        }
        & .play {margin: 28px 0 34px;
            & iframe {width: 100%; height: 100%; aspect-ratio: 16 / 9;}
        }
        & .bt {opacity: 0; transform: translateY(30px); text-align: center;
            & a {display: inline-flex; justify-content: center; align-items: center; gap: 5px; margin: 0 auto; border-bottom: 1px solid #222; padding: 0 0 2px;
                & p {font-size: 18px; font-weight: 500; line-height: 1; text-align: center;}
                & i {}
            }
        }
    }
    & .vision-img {position: relative; flex: 1; width: calc(100% - 680px); height: auto; overflow: hidden;
        & img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
    }
    &.active {
        & .vision-txt {
            & .desc {
                & p {animation: fadeUp 1s both;}
                & span {animation: fadeUp 1s 0.5s both;}
            }
            & .bt {animation: fadeUp 1s 1s both;}
        }
        & .vision-img {
            & img {animation: zoomIn 2s both;}
        }
    }
    @media (width <= 1024px) {flex-wrap: wrap;
        & .vision-txt {width: 100%; padding: 50px;
            & .desc {
                & p {font-size: 40px;
                    & br {display: none;}
                }
            }
            & .bt {
                & a {
                    & p {font-size: 16px;}
                }
            }
        }
        & .vision-img {flex: auto; width: 100%; height: 400px;}
    }
    @media (width <= 460px) {
        & .vision-txt {
            & .desc {padding: 0 20px;
                & p {font-size: 24px;}
            }
        }
        & .vision-img {height: 200px;}
    }
}

/* 메인 모토 */
.motto {display: flex; justify-content: flex-end; align-items: center; height: var(--view-height100); background: url("/assets/site/img/main/sec03-bg.jpg") no-repeat center; background-size: cover;
    & .wrap {display: flex; justify-content: space-between; align-items: center;
        & .left {width: 600px; color: #fff;
            & h2 {font-size: 200px; font-weight: 600; line-height: 1; opacity: 0; transform: translateY(30px);}
            & p {font-size: 20px; font-weight: 500; margin: 40px 0 20px; opacity: 0; transform: translateY(30px);
                & strong {font-size: 40px; font-weight: 500;}
            }
            & span {font-size: 20px; opacity: 0; transform: translateY(30px);}
        }
        & .right {width: calc(100% - 600px);
            > ul {display: flex;
                > li {position: relative; width: calc(100% / 3); text-align: center; border-left: 1px solid rgba(255, 255, 255, 0.2);
                    &:first-child {border-left: 0;}
                    & .front {transition: all 0.2s;
                        & p {font-size: 50px; font-weight: 700; line-height: 400px; color: #fff; opacity: 0; transform: scale(1.2);}
                    }
                    & .overlay {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; opacity: 0; pointer-events: none; transition: all 0.2s;
                        & h2 {font-size: 50px; font-weight: 700; line-height: 1; color: #fff;}
                        & p {font-size: 16px; letter-spacing: 0.5rem; color: rgba(255, 255, 255, 0.5); margin: 20px 0;}
                        & span {display: block; font-size: 20px; color: #fff;}
                    }
                    &:hover {
                        & .front {opacity: 0; pointer-events: none;}
                        & .overlay {opacity: 1; pointer-events: visible;}
                    }
                }
            }
        }
    }
    &.active {
        & .wrap {
            & .left {
                & h2 {animation: fadeUp 1s both;}
                & p {animation: fadeUp 1s 0.5s both;}
                & span {animation: fadeUp 1s 1s both;}
            }
            & .right {
                > ul {
                    > li {
                        &:nth-child(1) {
                            & .front {
                                & p {animation: zoomIn2 1s 1s both;}
                            }
                        }
                        &:nth-child(2) {
                            & .front {
                                & p {animation: zoomIn2 1s 1.5s both;}
                            }
                        }
                        &:nth-child(3) {
                            & .front {
                                & p {animation: zoomIn2 1s 2s both;}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1680px) {
        & .wrap {
            & .left {width: 500px;
                & h2 {font-size: 150px;}
                & p {}
                & span {font-size: 18px;}
            }
            & .right {width: calc(100% - 500px);
                > ul {
                    > li {
                        & .front {
                            & p {font-size: 40px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1280px) {
        & .wrap {
            & .left {width: 420px;
                & h2 {font-size: 120px;}
                & p {}
                & span {font-size: 16px;}
            }
            & .right {width: calc(100% - 420px);
                > ul {
                    > li {
                        & .front {
                            & p {font-size: 30px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {height: unset; padding: 100px 0;
        & .wrap {flex-wrap: wrap; gap: 80px;
            & .left {width: 100%; padding: 0 10px;
                & h2 {font-size: 100px;}
                & p {margin: 0;}
                & span {}
            }
            & .right {width: 100%;
                > ul {
                    > li {
                        &:first-child {border: 0;}
                        & .front {display: none;}
                        & .overlay {position: relative; top: unset; left: unset; transform: translate(0); opacity: 1;
                            & h2 {font-size: 36px;}
                            & p {font-size: 14px;}
                            & span {font-size: 18px;}
                        }
                    }
                }
            }
        }
        &.active {
            & .wrap {
                & .right {
                    > ul {
                        > li {
                            &:nth-child(1) {animation: zoomIn2 1s 1.5s both;}
                            &:nth-child(2) {animation: zoomIn2 1s 2s both;}
                            &:nth-child(3) {animation: zoomIn2 1s 2.5s both;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {padding: 80px 0;
        & .wrap {
            & .left {
                & p {font-size: 18px;}
                & span {font-size: 14px;}
            }
            & .right {
                > ul {
                    > li {
                        & .overlay {padding: 0 10px;
                            & h2 {font-size: 30px;}
                            & p {font-size: 10px; letter-spacing: 0.2rem;}
                            & span {font-size: 14px;
                                & br {display: none;}
                            }
                        }
                    }
                }
            }
        }
    }
}

/* 메인 상품 */
.product {padding: 170px 0;
    & .tit {opacity: 0; transform: translateY(30px);}
    & .list {opacity: 0; transform: translateY(30px);
        > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px;
            > li {border-radius: 25px; background: #f2f2f2; overflow: hidden;
                & .name {text-align: center; padding: 40px 0;
                    & span {font-size: 13px; color: #9f9f9f;}
                    & p {font-size: 24px; font-weight: 600;}
                }
                & .img {
                    img {width: 100%;}
                }
            }
        }
    }
    &.active {
        & .tit {animation: fadeUp 1s both;}
        & .list {animation: fadeUp 1s 0.5s both;}
    }
    @media (width <= 1280px) {padding: 120px 0;
        & .list {
            > ul {grid-template-columns: repeat(3, minmax(0, 1fr));
                > li {
                    & .img {text-align: center;
                        & img {width: 60%;}
                    }
                }
            }
        }
    }
    @media (width <= 860px) {padding: 80px 0;
        & .list {
            > ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
                > li {
                    & .name {padding: 20px;
                        & p {font-size: 20px;}
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .list {
            > ul {
                > li {
                    & .name {
                        & span {font-size: 12px;}
                        & p {font-size: 16px;}
                    }
                }
            }
        }
    }
}

/* 메인 기술 */
.facility {padding: 170px 0;
    & .tit {opacity: 0; transform: translateY(30px);}
    & .list {opacity: 0; transform: translateY(30px);
        > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 200px 35px;
            > li {
                & .img {position: relative; aspect-ratio: 530 / 350; border-radius: 10px; overflow: hidden;
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                }
                & .subject {display: flex; justify-content: space-between; align-items: center; margin: 40px 0 15px;
                    & p {font-size: 30px; font-weight: 600; line-height: 1;}
                }
                & .desc {
                    & p {font-size: 18px; font-weight: 600;}
                }
            }
        }
    }
    &.active {
        & .tit {animation: fadeUp 1s both;}
        & .list {animation: fadeUp 1s 0.5s both;}
    }
    @media (width <= 1280px) {padding: 120px 0;
        & .list {
            > ul {
                > li {
                    & .subject {
                        & p {font-size: 24px;}
                    }
                    & .desc {
                        & p {font-size: 17px;
                            & br {display: none;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px) {padding: 80px 0;
        & .list {
            > ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px;
                > li {
                    & .subject {
                        & p {font-size: 20px;}
                    }
                    & .desc {
                        & p {font-size: 16px;}
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .list {
            > ul {
                > li {
                    & .subject {margin: 25px 0 15px;
                        & p {font-size: 18px;}
                    }
                    & .desc {
                        & p {font-size: 14px;}
                    }
                }
            }
        }
    }
}

/* 메인 배너 */
.banner {padding: 100px 0; background: url("/assets/site/img/main/sec06-bg.jpg") no-repeat center; background-size: cover;
    & .desc {margin: 0 0 240px; opacity: 0; transform: translateX(30px);
        & p {font-size: 24px; font-weight: 600; color: #fff;}
    }
    & .text {position: relative; display: inline-block; opacity: 0; transform: translateX(30px);
        & span {position: relative; display: flex; align-items: center;
            & em {font-size: 20px; font-weight: 700; color: #fff; white-space: nowrap;}
            &::after {content: ''; display: block; height: 8px; background: #D71719; flex: 1; margin: 0 0 0 20px;}
        }
        & p {font-size: 48px; font-weight: 700; color: #fff; margin: 1px 0 0;
            & em {
                &::before {content: ''; position: absolute; top: 100%; width: 100%; height: 8px; background: #1E2A75;}
            }
        }
    }
    &.active {
        & .desc {animation: fadeLeft 1s both;}
        & .text {animation: fadeLeft 1s 0.5s both;}
    }
    @media (width <= 1280px) {
        & .text {
            & span {font-size: 16px;}
            & p {font-size: 36px;}
        }
    }
    @media (width <= 860px) {
        & .text {
            & p {font-size: 30px;}
        }
    }
    @media (width <= 640px) {padding: 60px 20px; background: url("/assets/site/img/main/sec06-bg-m.jpg") no-repeat center; background-size: cover;
        & .desc {margin: 0 0 420px;
            & p {font-size: 16px;}
        }
        & .text {
            & span {
                &::after {height: 4px; margin: 0 0 0 10px;}
            }
            & p {position: relative; font-size: 20px;
                & br {display: none;}
                & em {
                    &::before {top: unset; bottom: -10px; left: 0; height: 5px;}
                }
            }
        }
    }
    @media (width <= 640px) {padding: 60px 0;
        & .text {
            & span {
                &::before {width: 100px;}
            }
        }
    }
}