@charset "utf-8";

/* ==========================================================================
    기존 코드
   ========================================================================== */

/* 스킵 네비게이션 */
#skip-nav {position: absolute; left: 0; right: 0; top: 0; z-index: 9999;
    & * {list-style: none; margin: 0; padding: 0;}
    a {display: block; width: 1px; height: 1px; overflow: hidden; color: #fff; white-space: nowrap; text-align: center;}
    a:focus,
    a:active{width: 100%; height: auto; padding: 0.5rem; background: #000;}
}

/* 공통 layout */
.wrap {position: relative; width: 100%; max-width: 1660px; margin: 0 auto;
    @media (width <= 1680px) {width: calc(100% - 40px)}
}

.inner {position: relative; width: 100%; max-width: 1460px; margin: 0 auto;
    @media (width <= 1680px) {width: calc(100% - 40px)}
}

.sub-visual {position: relative; width: 100%; height: 400px;
    &::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6);}
    & .text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;
        & p {font-size: 60px; font-weight: 700; color: #fff; animation: fadeUp 1s both}
    }
    & .depth {position: absolute; bottom: 0; left: 0; width: 100%;
        & .pc {
            & .wrap {display: flex;
                & a {width: 100%; font-size: 16px; font-weight: 600; line-height: 74px; color: #fff; text-align: center; background: rgba(0, 0, 0, 0.5); text-transform: uppercase;
                    &.on {background: var(--basic-blue);}
                }
            }
        }
        & .mb {display: none; background: #fff; border-bottom: 1px solid #eee;
            & .home {display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-right: 1px solid #eee;
                & a {display: block;
                    & i {font-size: 20px; color: #aaa;}
                }
            }
            & .con {position: relative; border-right: 1px solid #eee; cursor: pointer;
                &.bg {background: var(--basic-blue);
                    & .view {
                        & p {color: #fff;}
                        & i {color: #fff; border: 1px solid #fff;}
                    }
                }
                & .view {display: flex; justify-content: space-between; align-items: center; width: 250px; height: 50px; padding: 0 15px;
                    & p {}
                    & i {display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; font-size: 14px; line-height: 1; border-radius: 50%; border: 1px solid #aaa; color: #aaa;}
                }
                & .list {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: calc(100% + 2px); background: #fff; border: 1px solid #eee; z-index: 2; display: none;
                    & a {display: block; line-height: 50px; padding: 0 15px;
                        &:hover {background: #f9f9f9;}
                        &.on {font-weight: 700; color: var(--basic-blue);}
                    }
                }
            }
        }
    }
    &.sv4, &.sv276, &.sv326 {background: url("/assets/site/img/sub/sub-company.jpg") no-repeat center; background-size: cover;}
    &.sv183, &.sv282, &.sv332 {background: url("/assets/site/img/sub/sub-products.jpg") no-repeat center; background-size: cover;}
    &.sv189, &.sv292, &.sv342 {background: url("/assets/site/img/sub/sub-center.jpg") no-repeat center; background-size: cover;}
    &.sv195, &.sv297, &.sv347 {background: url("/assets/site/img/sub/sub-process.jpg") no-repeat center; background-size: cover;
        & .text {top: calc(50% + 30px);}
        & .depth {
            & .pc {display: none;}
        }
    }
    &.sv2, &.sv299, &.sv349 {background: url("/assets/site/img/sub/sub-cs.jpg") no-repeat center; background-size: cover;}
    &.sv3, &.sv306, &.sv356 {background: url("/assets/site/img/sub/sub-guide.jpg") no-repeat center; background-size: cover;
        & .depth {
            & .pc {display: none;}
        }
    }
    @media (width <= 1680px) {
        & .depth {
            & .pc {
                & .wrap {width: 100%; max-width: unset;
                    & a {font-size: 14px; line-height: 60px;}
                }
            }
        }
    }
    @media (width <= 1280px) {height: 300px;
        & .text {
            & p {font-size: 36px;}
        }
        & .depth {
            & .pc {display: none;}
            & .mb {display: flex;}
        }
    }
    @media (width <= 640px) {
        & .depth {
            & .mb {
                & .con {width: calc((100% - 50px) / 2); border-right: 0;
                    & .view {width: 100%;}
                }
            }
        }
    }
    @media (width <= 460px) {height: 250px;
        & .depth {
            & .mb {
                & .home {width: 40px; height: 40px;
                    & a {
                        & i {font-size: 16px;}
                    }
                }
                & .con {width: calc((100% - 40px) / 2 - 70px);
                    &:last-child {width: calc((100% - 40px) / 2 + 70px);}
                    & .view {height: 40px; padding: 0 10px;
                        & p {font-size: 13px;}
                        & i {width: 14px; height: 14px; font-size: 12px;}
                    }
                    & .list {
                        & a {font-size: 14px; line-height: 40px;}
                    }
                }
            }
        }
    }
}

.sub-container {position: relative; overflow: hidden; padding: 140px 0 160px; min-height: 400px;
    @media (width <= 1280px) {padding: 100px 0 140px;}
    @media (width <= 860px) {padding: 80px 0 120px;}
    @media (width <= 640px) {padding: 60px 0 90px;}
}

.sub-title {margin: 0 0 80px;
    & .inner {position: relative; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 0 20px; border-bottom: 1px solid #DFDFDF;
        /*&::after {content: ''; position: absolute; bottom: -1px; left: 0; width: 45%; height: 1px; background: var(--basic-blue);}*/
        & .tit {display: flex; align-items: flex-end; gap: 15px;
            & p {font-size: 40px; font-weight: 600; line-height: 1; text-transform: uppercase}
            & span {font-size: 18px; font-weight: 700; color: var(--basic-blue);}
        }
        & .depth {
            > ul {display: flex; align-items: center; gap: 15px;
                > li {display: flex; align-items: center; text-transform: uppercase;
                    & a {display: block;}
                    & i {line-height: 1;}
                    & span {font-size: 14px; line-height: 1; color: #888;}
                    & p {font-size: 14px; line-height: 1; font-weight: 700;}
                }
            }
        }
        & .desc {width: 100%;}
    }
    &.m40 {margin: 0 0 40px;}
    @media (width <= 1280px) {
        & .inner {
            & .tit {
                & p {font-size: 36px;}
                & span {display: none;}
            }
        }
    }
    @media (width <= 860px) {margin: 0 0 60px;
        & .inner {
            & .tit {
                & p {font-size: 24px;}
            }
            & .depth {display: none}
        }
    }
    @media (width <= 640px) {margin-bottom: 30px;
        & .inner {align-items: center; padding: 0 0 12px;
            & .tit {
                & p {font-size: 20px;}
            }
            & .depth {
                > ul {gap: 6px;
                    > li {display: none;
                        &:first-child {display: block;
                            & img {height: 14px;}
                        }
                        &:nth-last-child(2) {display: block;
                            & img {height: 12px;}
                        }
                        &:last-child {display: block;}
                        & p {font-size: 12px;}
                        & span {font-size: 12px;}
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .inner {
            & .tit {
                & p {font-size: 16px;}
            }
        }
    }
}

.sub-desc {margin: 0 0 80px;
    & p {font-size: 22px; font-weight: 700; line-height: 2; color: #292E41;}
    @media (width <= 860px) {margin: 0 0 40px;}
    @media (width <= 640px) {
        & p {font-size: 16px; line-height: 1.6;}
    }
    @media (width <= 460px) {
        & p {font-size: 14px;}
    }
}

.sub-contents {
    &.m300 {margin: 0 0 300px;}
    @media (width <= 860px) {
        &.m300 {margin: 0 0 150px;}
    }
}

/* header */
header {position: fixed; top: 0; left: 0; display: flex; align-items: center; width: 100%; height: var(--header-height); z-index: 9; transition: all 0.2s; border-bottom: 1px solid #eeeeee00;
    & .wrap {display: flex; justify-content: space-between; align-items: center;
        & .h-left {display: flex; align-items: center; gap: 75px;
            & .logo {
                & a {display: block;
                    & img {filter: brightness(0) invert(1);}
                }
            }
            & .lang {display: none; align-items: center;
                & a {display: block; color: #666; padding: 0 10px; line-height: 1; letter-spacing: -0.02em; font-weight: 500; border-right: 1px solid #ddd;
                    &.on {color: #D71719;}
                    &:last-child {border-right: 0;}
                }
            }
        }
        & .h-center {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            & .gnb {
                > ul {display: flex;
                    > li {position: relative; width: 180px; text-align: center; transition: width 0.2s;
                        > a {display: block; font-size: 20px; font-weight: 700; line-height: var(--header-height); color: #fff;}
                        > .depth2 {position: absolute; top: calc(100% - 15px); left: 0; width: 100%; background: var(--basic-blue); padding: 10px 0; display: none;
                            &::after {content: ""; display: block; position: absolute; top: -6px; left: 50%; margin-left: -3px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid var(--basic-blue);}
                            > a {display: block; font-size: 14px; font-weight: 500; line-height: 40px; color: rgba(255, 255, 255, 0.7);
                                &:hover {color: #fff;}
                            }
                        }
                    }
                }
            }
        }
        & .h-right {display: flex; align-items: center; gap: 40px;
            & .snb {display: flex; align-items: center; gap: 80px;
                & .lang {position: relative;
                    & .view {display: flex; align-items: center; gap: 10px; color: #fff; cursor: pointer;
                        & p {font-weight: 700; line-height: 30px;}
                        & i {}
                    }
                    & .list {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: none; width: calc(100% + 30px); padding: 15px; background: rgba(255, 255, 255, 0.3); border-radius: 5px;
                        & a {display: block; font-weight: 700; line-height: 1; color: #fff; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4);
                            &:first-child {padding: 0 0 10px;}
                            &:last-child {padding: 10px 0 0; border-bottom: 0;}
                        }
                    }
                }
                & .hm {
                    & .hm-bt {position: relative; width: 30px; height: 25px; cursor: pointer;
                        & span {position: absolute; height: 3px; border-radius: 999px; background: #fff; transition: all 0.2s;
                            &:nth-child(1) {top: 0; right: 0; width: 100%;}
                            &:nth-child(2) {top: 50%; right: 0; width: 80%; transform: translateY(-50%);}
                            &:nth-child(3) {bottom: 0; right: 0; width: 100%;}
                        }
                    }
                }
            }
        }
    }
    &.active {background: #fff; border-bottom: 1px solid #eee;
        & .wrap {
            & .h-left {
                & .logo {
                    & a {
                        & img {filter: none;}
                    }
                }
            }
            & .h-center {
                & .gnb {
                    > ul {
                        > li {
                            > a {color: #222;}
                        }
                    }
                }
            }
            & .h-right {
                & .snb {
                    & .lang {
                        & .view {color: #222;}
                        & .list {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; background: #fff;
                            & a {color: #aaa; border-bottom: 1px solid #ebebeb;
                                &:last-child {border-bottom: 0;}
                                &:hover {color: #222;}
                            }
                        }
                    }
                    & .hm {
                        & .hm-bt {
                            & span {background: #222;}
                        }
                    }
                }
            }
        }
    }
    &.open {border-bottom: 1px solid #eeeeee00;
        & .wrap {
            & .h-left {
                & .logo {
                    & a {
                        & img {filter: none;}
                    }
                }
                & .lang {display: flex;}
            }
            & .h-center {
                & .gnb {display: none;}
            }
            & .h-right {
                & .snb {
                    & .lang {display: none;}
                    & .hm {
                        & .hm-bt {
                            & span {background: #222;
                                &:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(45deg);}
                                &:nth-child(2) {width: 0;}
                                &:nth-child(3) {bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg);}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1280px) {
        & .wrap {
            & .h-left {gap: 20px;}
            & .h-center {
                & .gnb {display: none;}
            }
            & .h-right {
                & .snb {gap: 30px;}
            }
        }
        &.open {
            & .wrap {
                & .h-center {
                    & .gnb {display: none;}
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .wrap {
            & .h-left {
                & .logo {
                    & a {
                        & img {height: 40px;}
                    }
                }
            }
            & .h-right {
                & .snb {
                    & .lang {
                        & .view {
                            & p {font-size: 14px;}
                            & i {font-size: 12px;}
                        }
                    }
                    & .hm {
                        & .hm-bt {width: 25px; height: 20px;}
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .wrap {
            & .h-left {
                & .logo {
                    & a {
                        & img {height: 35px;}
                    }
                }
            }
            & .h-right {
                & .snb {
                    & .lang {display: none !important;}
                    & .hm {
                        & .hm-bt {width: 23px; height: 18px;
                            & span {height: 2px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .wrap {
            & .h-left {
                & .lang {
                    & a {font-size: 14px;}
                }
            }
        }
    }
}

.nav {
    & .pc {position: fixed; top: 0; left: 0; width: 100%; height: var(--view-height100); background: #fff; z-index: 8; opacity: 0; pointer-events: none; visibility: hidden; transition: all 0.2s;
        & .wrap {width: 100%; height: 100%; padding: 0 0 70px;
            & .list {height: calc(100% - var(--header-height)); padding-top: var(--header-height);
                > ul {height: 100%; padding: 0 0 70px;
                    > li {display: flex; align-items: center; width: 100%; height: calc(100% / 5); gap: 30px;
                        &:first-child {border-top: 1px solid #e6e6e6;}
                        &:last-child {border-bottom: 1px solid #e6e6e6;}
                        > a {display: block; width: 150px; font-size: 28px; font-weight: 600;}
                        > .depth2 {display: flex; width: calc(100% - 200px);
                            > a {display: block; font-size: 20px; font-weight: 500; padding: 0 25px;
                                &:hover {color: var(--basic-blue); font-weight: 700;}
                                &:first-child {padding-left: 0;}
                                &:last-child {padding-right: 0;}
                            }
                        }
                    }
                }
            }
            & .desc {display: flex; align-items: center; height: var(--header-height);
                & p {font-size: 18px; font-weight: 500;}
            }
        }
        @media (width <= 1680px) {
            & .wrap {width: 95%;}
        }
    }
    & .mb {position: fixed; top: var(--header-height); left: 0; display: none; width: 100%; height: calc(var(--view-height100) - var(--header-height)); z-index: 3; opacity: 0; pointer-events: none; visibility: hidden; transition: all 0.2s;
        & .bg {position: fixed; top: 0; left: 0; width: 100%; height: var(--view-height100); background: #fff; z-index: -1;}
        & .list {position: relative; width: 100%; height: 100%; overflow-y: scroll; -ms-overflow-style: none; z-index: 9;
            > ul {
                > li {
                    & .depth1 {display: flex; justify-content: space-between; align-items: center; padding: 20px;
                        & a {font-size: 20px; font-weight: 600;}
                        & p {font-size: 20px; font-weight: 600;}
                        & i {font-size: 20px;}
                        &.on {
                            & p {color: #D71719;}
                        }
                    }
                    & .depth2 {padding: 15px 0; background: #f9f9f9;
                        & a {display: block; font-weight: 600; line-height: 40px; color: #444; padding: 0 20px;}
                    }
                }
            }
            &::-webkit-scrollbar {display: none;}
        }
    }
    &.on {
        & .pc {opacity: 1; pointer-events: auto; visibility: visible;}
        & .mb {opacity: 1; pointer-events: auto; visibility: visible;}
    }
    @media (width <= 1280px) {
        & .pc {display: none;}
        & .mb {display: block;}
    }
    @media (width <= 460px) {
        & .mb {
            & .list {
                > ul {
                    > li {
                        & .depth1 {padding: 16px 20px;
                            & p {font-size: 18px;}
                            & i {font-size: 18px;}
                        }
                    }
                }
            }
        }
    }
}

/* footer */
footer {position: relative; padding: 50px 0;
    & .footer-con {display: flex; justify-content: space-between; align-items: flex-end;
        & .left {
            & .logo {margin: 0 0 15px;
                & img {}
            }
            & .desc {
                > ul {
                    > li {display: flex; gap: 10px; margin: 0 0 10px;
                        & p {font-size: 12px; line-height: 1; color: #6a6a6a;}
                        & span {}
                        &:last-child {margin: 0;}
                    }
                }
            }
        }
        & .right {
            & .link {
                > ul {display: flex; gap: 40px;
                    > li {
                        & a {display: block; font-size: 14px; color: #6a6a6a;}
                    }
                }
            }
        }
    }
    @media (width <= 860px) {padding: 30px 0;
        & .footer-con {flex-wrap: wrap; gap: 20px;
            & .left {width: 100%;
                & .logo {
                    & img {height: 35px;}
                }
                & .desc {
                    > ul {
                        > li {gap: 10px; flex-wrap: wrap;}
                    }
                }
            }
            & .right {width: 100%;
                & .link {
                    > ul {}
                }
            }
        }
    }
}

.sub footer {background: #f9f9f9;}