@charset "utf-8";

/* 메인 공통 레이아웃 영역 */
.main-container {display: flex; flex-direction: column; gap: 120px;
    @media (width <= 1024px) {gap: 80px;}
    @media (width <= 860px) {gap: 60px;}
    @media (width <= 460px) {gap: 40px;}
}
.main-title {
    & span {font-size: 18px; line-height: 1; font-weight: 600; color: var(--point-color1);}
    & p {font-size: 3rem; line-height: 1; font-weight: 700; padding: 12px 0 0;}
    @media (width <= 1024px) {
        & span {font-size: 16px;}
        & p {font-size: 2.2rem; line-height: 1.2; padding: 6px 0 0;}
    }
    @media (width <= 1024px) {
        & span {font-size: 12px;}
        & p {font-size: 1.4rem;}
    }
    @media (width <= 640px) {
        & p {font-size: 1.2rem;}
    }
    @media (width <= 460px) {
        & p {font-size: 0.9rem;}
    }
}

/* 메인 비주얼 영역 - visual */
.visual {height: calc(var(--vh, 1vh) * 95);
    & .swiper {position: relative;
        & .swiper-slide {position: relative; display: flex; justify-content: center; align-items: center;
            &.v01 {background: url("/images/main/main-visual01.jpg") no-repeat center; background-size: cover;}
            &.v02 {background: url("/images/main/main-visual02.jpg") no-repeat center; background-size: cover;}
            &.v03 {background: url("/images/main/main-visual03.jpg") no-repeat center; background-size: cover;}
            & .visual-txt {display: flex; flex-direction: column; gap: 24px; text-align: center; color: #fff; text-shadow: 0px 0px 8px rgb(0 0 0 / 15%);
                & p {font-size: 3rem; font-weight: 700; line-height: 1.2; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
                & span {font-size: 24px; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);}
            }
        }
        & .swiper-slide-active {
            & .visual-txt {
                & p {animation: textClip 2s both; animation-delay: 400ms;}
                & span {animation: textClip 2s both; animation-delay: 900ms;}
            }
        }
        & .swiper-util {position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; justify-content: flex-end; z-index: 2;
            & .swiper-util-box {display: inline-flex; flex-direction: column; gap: 16px; background: #fff; border-radius: 10px 10px 0 0; padding: 20px 40px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.03);
                & .swiper-util-bar {display: flex; align-items: center; gap: 26px;
                    & .swiper-btn {display: flex; justify-content: center; align-items: center;}
                    & span {font-size: 16px; font-weight: 600; line-height: 1;
                        &.total-num {position: relative; color: #aea9a9;
                            &::before {content: ''; position: absolute; top: calc(50% + 2px); left: -13px; transform: translateY(-50%); width: 2px; height: 13px; background: #d9d9d9;}
                        }
                    }
                }
                & .swiper-util-pg {position: relative; height: 3px; background: #d9d9d9;
                    & span {background: #000;}
                }
            }
        }
    }
    @media (width <= 1024px) {height: calc(var(--vh, 1vh) * 80);
        & .swiper {
            & .swiper-slide {
                & .visual-txt {
                    & p {font-size: 2.4rem;}
                    & span {font-size: 20px;}
                }
            }
        }
    }
    @media (width <= 860px) {
        & .swiper {
            & .swiper-slide {
                & .visual-txt {
                    & p {font-size: 2rem;}
                    & span {font-size: 18px;}
                }
            }
            & .swiper-util {justify-content: center;
                & .swiper-util-box {padding: 16px 24px; gap: 12px;}
            }
        }
    }
    @media (width <= 640px) {
        & .swiper {
            & .swiper-slide {
                & .visual-txt {
                    & p {font-size: 1.6rem;}
                    & span {font-size: 16px;}
                }
            }
        }
    }
} 

/* 메인 소개 영역 - sec01 */
.sec01 {
    & .sec01-title {padding: 0 0 48px;}
    & .sec01-box {position: relative;
        & .sec01-list {
            > ul {position: relative; width: 100%; height: 480px;
                > li {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.3s ease;
                    &.on {opacity: 1;}
                    & .bg {position: relative; width: 100%; height: 100%; border-radius: 24px; overflow: hidden;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    }
                    & .txt {position: absolute; right: 0; bottom: 0; padding: 0 36px 36px 0; text-align: right;
                        & p {font-size: 30px; font-weight: 600; color: #fff;}
                    }
                }
            }
        }
        & .sec01-pg {position: absolute; top: 0; left: 0; padding: 24px 0 0 24px;
            > ul {display: flex; gap: 24px;
                > li {display: flex; flex-direction: column; gap: 8px; cursor: pointer; opacity: 0.5; transition: all 0.3s ease;
                    & span {width: 20px; height: 3px; background: #fff; transition: all 0.3s ease;}
                    & p {font-size: 20px; font-weight: 500; color: #fff;}
                    &.on {opacity: 1;
                        & span {width: 40px;}
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .sec01-title {padding: 0 0 36px;}
        & .sec01-box {
            & .sec01-pg {padding: 20px 0 0 20px;
                > ul > li {gap: 6px;
                    & p {font-size: 18px;}
                }
            }
            & .sec01-list {
                > ul {height: 360px;
                    > li .txt {padding: 0 24px 24px 0;
                        & p {font-size: 24px;}
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .sec01-title {padding: 0 0 24px;}
        & .sec01-box {
            & .sec01-pg {
                > ul > li {gap: 4px;
                    & span {height: 2px;}
                    & p {font-size: 15px;}
                    &.on {
                        & span {width: 30px;}
                    }
                }
            }
            & .sec01-list {
                > ul {height: 300px;
                    > li .txt {padding: 0 16px 16px 0;
                        & p {font-size: 18px;}
                    }
                }
            }
        }
    }
}

/* 메인 비전 영역 - sec02 */
.sec02 {padding: 120px 0; background: #f3f3f3;
    & .sec02-title {padding: 0 0 48px;}
    & .sec02-list {
        > ul {display: flex; justify-content: space-between; gap: 20px;
            > li {position: relative; display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 520px; border-radius: 24px; overflow: hidden; padding: 48px;
                &::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); transition: all 0.2s ease-in-out;}
                & .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.2s ease-in-out;}
                }
                & .txt {position: relative; text-align: center; z-index: 2;
                    & p {font-size: 24px; font-weight: 600; color: #fff; padding: 0 0 6px;}
                    & span {font-size: 18px; color: #fff;}
                }
                &:hover {
                    &::after {height: 60%;}
                    /* & .bg { */
                        /* & img {transform: translate(-50%, -50%) scale(1.1);} */
                    /* } */
                }
            }
        }
    }
    @media (width <= 1024px) {padding: 80px 0;
        & .sec02-title {padding: 0 0 36px;}
        & .sec02-list {
            & > ul {
                > li {height: 400px; padding: 36px;
                    & .txt {
                        & p {font-size: 20px;}
                        & span {font-size: 16px;}
                    }
                }
            }
        }
    }
    @media (width <= 860px) {padding: 60px 0;}
    @media (width <= 640px) {
        & .sec02-list {
            > ul {flex-direction: column;
                > li {height: 250px; padding: 24px;
                    & .txt {
                        & p {font-size: 18px;}
                        & span {font-size: 15px;}
                    }
                }
            }
        }
    }
}

/* 메인 유통 영역 - sec03 */
.sec03 {
    & .sec03-title {display: flex; justify-content: space-between; align-items: flex-end; gap: 140px; padding: 0 0 80px;
        & .main-title {
            & p {line-height: 1.2; white-space: nowrap;}
        }
        & .sec03-desc {
            & p {font-size: 20px;}
        }
    }
    & .sec03-process {display: flex; flex-direction: column; gap: 12px;
        & .deco {position: relative;
            &::before {content: ''; position: absolute; bottom: 0; left: 12px; background: url("/images/main/sec03-deco.svg") no-repeat center; background-size: cover; width: 120px; aspect-ratio: 163 / 100; z-index: 1;}
            > ul {position: relative; display: flex; justify-content: space-between; z-index: 2;
                > li {width: 100%; text-align: center;
                    & img {display: inline-block; width: 120px;}
                }
            }
            &.active {
                &::before {animation: carWork 2.5s cubic-bezier(0.45, 0, 0.55, 1) forwards;}
            }
        }
        & .bar {
            > ul {display: flex; border-radius: 999px; overflow: hidden;
                > li {position: relative; width: 100%; padding: 20px 0; text-align: center;
                    &:nth-child(1) {background: var(--point-color2);}
                    &:nth-child(2) {background: var(--point-color1);
                        &::before {content: ''; position: absolute; top: 0; left: -30px; width: auto; height: 100%; aspect-ratio: 1 / 1; background: var(--point-color1); border-radius: 50%;}
                        &::after {content: ''; position: absolute; top: 0; left: -30px; width: auto; height: 100%; aspect-ratio: 1 / 1; background-color: rgba(0, 0, 0, 0.1); background-image: url("/images/main/arrow-right02.svg"); background-repeat: no-repeat; background-position: center; background-size: 30px; border-radius: 50%;}
                    }
                    &:nth-child(3) {background: var(--point-color3);
                        &::before {content: ''; position: absolute; top: 0; left: -30px; width: auto; height: 100%; aspect-ratio: 1 / 1; background: var(--point-color3); border-radius: 50%;}
                        &::after {content: ''; position: absolute; top: 0; left: -30px; width: auto; height: 100%; aspect-ratio: 1 / 1; background-color: rgba(0, 0, 0, 0.1); background-image: url("/images/main/arrow-right02.svg"); background-repeat: no-repeat; background-position: center; background-size: 30px; border-radius: 50%;}
                    }
                    & p {font-size: 18px; font-weight: 600; color: #fff;}
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .sec03-title {flex-direction: column; align-items: flex-start; gap: 24px; padding: 0 0 60px;
            & .main-title p br {display: none;}
            & .sec03-desc p {font-size: 18px;}
        }
        & .sec03-process {
            & .deco {
                &::before {width: 90px;}
                & > ul {
                    & > li {
                        & img {width: 100px;}
                    }
                }
            }
            & .bar {
                & > ul {
                    > li {padding: 12px 0;
                        & p {font-size: 16px;}
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .sec03-title {padding: 0 0 48px; gap: 12px;
            & .main-title p {white-space: wrap;}
            & .sec03-desc p {font-size: 16px;}
        }
        & .sec03-process {
            & .deco {
                &::before {width: 70px;}
                & > ul {
                    & > li {
                        & img {width: 90px;}
                    }
                }
            }
            & .bar {
                & > ul {
                    > li {padding: 10px 0;
                        & p {font-size: 14px;}
                    }
                }
            }
        }
    }
}

/* 메인 상품 영역 - sec04 */
.sec04 {
    & .sec04-title {display: flex; justify-content: space-between; align-items: flex-end; padding: 0 0 48px;
        & .main-title {
            & p {line-height: 1.2; white-space: nowrap;}
        }
        & .sec04-more {
            & a {display: inline-flex; align-items: center; gap: 12px; padding: 8px 24px; border-radius: 999px; background: var(--point-color1);
                & span {font-size: 18px; color: #fff;}
                & img {width: 8px; transform: translateY(1px);}
            }
        }
    }
    & .sec04-list {
        > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
            > li {position: relative; border-radius: 12px; overflow: hidden;
                & a {position: relative; display: block; aspect-ratio: 1 / 1;
                    & .thumb {position: relative; width: 100%; height: 100%;
                        & img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease;}
                    }
                    & .overlay {position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); padding: 40px 40px 120px; opacity: 0; pointer-events: none; transition: all 0.3s ease;
                        & p {font-size: 24px; font-weight: 600; color: #fff; border-bottom: 1px solid #fff; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; padding: 0 0 6px;}
                        & span {display: block; font-size: 15px; font-weight: 500; color: #fff; padding: 6px 0 0;}
                        & i {position: absolute; bottom: 40px; right: 40px; width: 60px; height: 60px; background-color: var(--point-color1); background-image: url("/images/main/ico-cart.svg"); background-repeat: no-repeat; background-size: 30px; background-position: center; border-radius: 50%; transition: all 0.1s ease;
                            &:hover {background-size: 26px;}
                        }
                    }
                    &:hover {
                        & .thumb {
                            & img {filter: blur(6px);}
                        }
                        & .overlay {opacity: 1; pointer-events: visible;}
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .sec04-title {flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 0 36px;
            & .sec04-more a span {font-size: 16px;}
        }
        & .sec04-list {
            & > ul {
                & > li {
                    & a {
                        & .overlay {padding: 24px;
                            & p {font-size: 18px; line-height: 1.6;}
                            & i {display: none;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .sec04-title {
            & .sec04-more a span {font-size: 15px;}
            & .sec04-more a img {width: 6px;}
        }
        & .sec04-list {
            > ul {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
                > li {
                    &:nth-child(7) {display: none;}
                    &:nth-child(8) {display: none;}
                    & a .overlay {
                        & p {font-size: 16px; line-height: 1.8;}
                        & span {font-size: 14px;}
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .sec04-title {
            & .sec04-more a span {font-size: 14px;}
        }
        & .sec04-list {
            > ul {grid-template-columns: repeat(2, minmax(0, 1fr));
                > li:nth-child(5) {display: none;}
                > li:nth-child(6) {display: none;}
            }
        }
    }
    @media (width <= 460px) {
        & .sec04-list {
            > ul {grid-template-columns: repeat(1, minmax(0, 1fr));
                > li a {aspect-ratio: 2 / 1;}
            }
        }
    }
}

/* 메인 뉴스 영역 - sec05 */
.sec05 {
    & .sec05-box {display: flex; justify-content: space-between; gap: 140px;
        & .sec05-title {display: flex; flex-direction: column; gap: 60px;
            & .sec05-more {
                & a {display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; padding: 6px 24px; border: 1px solid #aaa;
                    & span {font-size: 18px; color: #aaa;}
                    & img {width: 8px; transform: translateY(1px); filter: invert(98%) sepia(2%) saturate(751%) hue-rotate(264deg) brightness(118%) contrast(87%); opacity: 0.3;}
                }
            }
        }
        & .sec05-list {flex: 1;
            > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
                > li {
                    & a {position: relative; display: flex; flex-direction: column; gap: 24px; background: #eee; padding: 60px 30px 30px; border-radius: 20px; transition: all 0.3s ease;
                        &::after {content: ''; position: absolute; top: 30px; left: 30px; width: 6px; height: 6px; background: var(--point-color1); border-radius: 50%;}
                        & .subject {
                            & span {display: none; font-size: 15px; font-weight: 500; color: #aaa; padding: 0 0 12px;}
                            & p {font-size: 20px; font-weight: 600; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
                        }
                        & .thumb {position: relative; aspect-ratio: 300 / 170; border-radius: 20px; overflow: hidden;
                            & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease;}
                        }
                        & .info {display: flex; justify-content: space-between; align-items: center;
                            & p {font-weight: 600; color: #4a4a4a; flex: 1;}
                            & img {width: 18px; transition: all 0.3s ease;}
                        }
                        &:hover {background: var(--point-color1); box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
                            &::after {background: #fff; }
                            & .subject {
                                & span {color: #fff;}
                                & p {color: #fff;}
                            }
                            & .thumb {
                                & img {transform: translate(-50%, -50%) scale(1.1);}
                            }
                            & .info {
                                & p {color: #fff;}
                                & img {transform: rotate(90deg); filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(95deg) brightness(105%) contrast(103%);}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .sec05-box {flex-direction: column; gap: 36px;
            & .sec05-title {flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 0;
                & .sec05-more a span {font-size: 16px;}
            }
            & .sec05-list {
                & > ul {
                    & > li {
                        & a {
                            & .subject p {font-size: 20px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .sec05-box {
            & .sec05-title {
                & .sec05-more a span {font-size: 15px;}
                & .sec05-more a img {width: 6px;}
            }
            & .sec05-list {
                & > ul {
                    & > li {
                        & a {padding: 24px;
                            &::after {content: none;}
                            & .subject span {font-size: 14px;}
                            & .subject p {font-size: 18px;}
                            & .info p {font-size: 14px;}
                            & .info img {width: 14px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .sec05-box {
            & .sec05-title {
                & .sec05-more a span {font-size: 14px;}
            }
            & .sec05-list {
                & > ul {grid-template-columns: repeat(1, minmax(0, 1fr));
                    > li a .thumb {aspect-ratio: 300 / 100;}
                }
            }
        }
    }
}

/* 메인 문의 영역 - sec06 */
.sec06 {height: calc(var(--vh, 1vh) * 85); background: url("/images/main/sec06-bg.jpg") no-repeat center; background-size: cover;
    & .inner {display: flex; justify-content: center; align-items: center; height: 100%;}
    & .sec06-con {display: flex; flex-direction: column; gap: 80px;
        & .txt {position: relative; display: flex; flex-direction: column; gap: 60px; text-align: center;
            & p {position: relative; display: inline-flex; flex-direction: column; font-size: 3rem; color: #fff; text-align: center;
                &::before {content: ''; display: block; height: 50px; border-top: 10px solid rgba(255, 255, 255, 0.3); border-left: 10px solid rgba(255, 255, 255, 0.3); border-right: 10px solid rgba(255, 255, 255, 0.3); margin: 0 0 12px; transform: translateY(70px); transition: all 1s ease;}
                &::after {content: ''; display: block; height: 50px; border-bottom: 10px solid rgba(255, 255, 255, 0.3); border-left: 10px solid rgba(255, 255, 255, 0.3); border-right: 10px solid rgba(255, 255, 255, 0.3); margin: 12px 0 0; transform: translateY(-70px); transition: all 1s ease;}
                & b {transform: scale(0.95); opacity: 0; transition: all 1s 0.5s ease;}
            }
            & span {display: block; font-size: 18px; color: #fff; text-align: center; opacity: 0; transform: translateY(48px); transition: all 1s 0.7s ease;}
        }
        & .btn {text-align: center; opacity: 0; transform: translateY(48px); transition: all 1s 1s ease;
            & a {display: inline-flex; align-items: center; gap: 36px; border: 1px solid #fff; padding: 8px 24px; border-radius: 12px;
                & p {white-space: nowrap; color: #fff;}
                & img {filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(95deg) brightness(105%) contrast(103%);}
            }
        }
    }
    &.active {
        & .sec06-con {
            & .txt {
                & p {
                    &::before {transform: translateY(0);}
                    &::after {transform: translateY(0);}
                    & b {transform: scale(1); opacity: 1;}
                }
                & span {opacity: 1; transform: translateY(0);}
            }
            & .btn {opacity: 1; transform: translateY(0);}
        }
    }
    @media (width <= 1024px) {height: calc(var(--vh, 1vh) * 80);
        & .sec06-con {
            & .txt {
                & p {font-size: 2rem;}
            }
        }
    }
    @media (width <= 640px) {height: calc(var(--vh, 1vh) * 60);
        & .sec06-con {gap: 30px;
            & .txt {gap: 30px;
                & p {font-size: 1.6rem;}
                & span {font-size: 14px;}
                & span br {display: none;}
            }
            & .btn {
                & a {
                    & p {font-size: 15px; white-space: nowrap;}
                }
            }
        }
    }
}

/* Reponsive Point */
@media (width <= 1280px) {}
@media (width <= 1024px) {}
@media (width <= 860px) {}
@media (width <= 640px) {}
@media (width <= 460px) {}
@media (width <= 340px) {}