@charset "utf-8";

/* 서브 공통 레이아웃 영역 */
.sub-container {
    & .sub-visual {position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 400px; background: #000;
        &.sv1 {background: url("/images/sub/sub-visual01.jpg") no-repeat center; background-size: cover;}
        &.sv2 {background: url("/images/sub/sub-visual02.jpg") no-repeat center; background-size: cover;}
        &.sv3 {background: url("/images/sub/sub-visual03.jpg") no-repeat center; background-size: cover;}
        &.sv4 {background: url("/images/sub/sub-visual04.jpg") no-repeat center; background-size: cover;}
        &.sv5 {background: url("/images/sub/sub-visual05.jpg") no-repeat center; background-size: cover;}
        & .txt {text-align: center;
            & span {display: none; font-weight: 500; color: rgba(255, 255, 255, 0.5);}
            & p {font-size: 3rem; font-weight: 700; color: #fff;}
        }
    }
    & .sub-depth {border-bottom: 1px solid #eee;
        & .con {display: flex; align-items: center; border-left: 1px solid #eee; border-right: 1px solid #eee;
            & .home {border-right: 1px solid #eee;
                & a {display: flex; justify-content: center; align-items: center; width: 48px; height: 48px;
                    & img {width: 24px;}
                }
            }
            & .menu {position: relative; cursor: pointer; border-right: 1px solid #eee;
                & .view {display: flex; justify-content: space-between; align-items: center; width: 220px; padding: 0 16px;
                    & p {font-size: 14px; line-height: 48px;}
                    & img {width: 14px;}
                }
                & .list {position: absolute; top: 100%; left: 0; width: 100%; padding: 8px; background: #fff; border: 1px solid #eee; z-index: 2;
                    & a {font-size: 15px; color: #636569; padding: 8px; border-radius: 4px;
                        &:hover {background: #f5f5f5;}
                    }
                }
            }
        }
    }
    & .sub-wrap {position: relative; padding: 80px 0;
        & .sub-grid {display: flex; flex-direction: column; gap: 120px;}
    }
    @media (width <= 1024px) {
        & .sub-visual {height: 300px;
            & .txt {
                & span {font-size: 14px;}
                & p {font-size: 2rem;}
            }
        }
        & .sub-depth {
            & .inner {width: 100%;}
        }
        & .sub-wrap {padding: 60px 0;
            & .sub-grid {gap: 80px;}
        }
    }
    @media (width <= 640px) {
        & .sub-visual {height: 240px;
            & .txt {
                & span {font-size: 12px;}
                & p {font-size: 1.8rem;}
            }
        }
        & .sub-depth {
            & .con {
                & .home {display: none;
                    & a {width: 40px; height: 40px;
                        & img {width: 20px;}
                    }
                }
                & .menu {flex: 1;
                    & .view {width: auto;
                        & p {font-size: 13px; line-height: 40px;}
                        & img {width: 12px;}
                    }
                    & .list {padding: 6px;
                        & a {font-size: 13px; padding: 6px;}
                    }
                }
            }
        }
        & .sub-wrap {padding: 48px 0;
            & .sub-grid {gap: 60px;}
        }
    }
    @media (width <= 460px) {
        & .sub-wrap {padding: 36px 0;
            & .sub-grid {gap: 48px;}
        }
    }
}

/* 브랜드 소개 (회사개요) - (01compnay / company.html) */
.company {
    & .company-box {
        & .company-ceo {display: flex; align-items: center; gap: 100px;
            & .img {position: relative; width: 630px; aspect-ratio: 630 / 530; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.03);
                & img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
            }
            & .txt {display: flex; flex-direction: column; gap: 60px; flex: 1;
                & h2 {font-size: 36px;}
                & p {font-size: 18px;}
                & span {font-size: 20px;}
            }
        }
        & .company-value {display: flex; flex-direction: column; gap: 60px;
            & .title {
                & p {font-size: 40px; font-weight: 700;}
            }
            & .list {
                > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px;
                    > li {position: relative; aspect-ratio: 350 / 470; border-radius: 12px; overflow: hidden;
                        & .thumb {position: relative; width: 100%; height: 100%; overflow: hidden; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.03);
                            & img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
                        }
                        & .txt {position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 24px;
                            & span {font-size: 17px; color: #fff;}
                            & p {font-size: 24px; font-weight: 700; color: #fff;}
                        }
                        &:nth-child(2n) {margin: 36px 0 0;
                            & .txt {
                                & p {text-align: right;}
                            }
                        }
                    }
                }
            }
        }
        & .company-intro {display: flex; align-items: flex-start;
            & .title {position: relative; display: flex; flex-direction: column; flex: 2; gap: 16px;
                & img {position: absolute; top: -40px; left: -20px; width: 200px; opacity: 0.25; z-index: -1;}
                & h2 {font-size: 30px;}
            }
            & .desc {flex: 3;
                & p {font-size: 18px;}
            }
        }
        & .company-cate {padding: 80px 0 0; margin: 80px 0 0; border-top: 1px solid #eee;
            > ul {display: flex; flex-direction: column; gap: 36px;
                > li {position: relative; display: flex; align-items: flex-end;
                    & .img {position: relative; width: calc(100% / 2); aspect-ratio: 570 / 310; border-radius: 8px; overflow: hidden;
                        & img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
                    }
                    & .txt {width: calc(100% / 2); padding: 0 36px;
                        & h2 {position: absolute; top: 0; right: 36px; font-size: 100px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3); pointer-events: none;}
                        & img {width: 30px;}
                        & p {font-size: 24px; font-weight: 700; margin: 12px 0;}
                        & span {font-size: 18px; color: #4b4b4b;}
                    }
                    &:nth-child(2n) {
                        & .txt {
                            & h2 {right: auto; left: 36px;}
                        }
                    }
                }
            }
        }
        & .company-map {border: 2px solid var(--point-color1); border-radius: 12px; overflow: hidden;
            & .root_daum_roughmap {width: 100%;
                & * {border: none !important;}
            }
            & .wrap_map {height: 460px;}
            & .wrap_controllers {display: none;}
            & .cont {display: none;}
        }
        & .company-info {padding: 36px 0 0;
            > ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 100px;
                > li {display: flex; align-items: center; padding: 24px 10px; border-bottom: 1px solid #ddd;
                    &:nth-child(1) {border-top: 1px solid #ddd;}
                    &:nth-child(2) {border-top: 1px solid #ddd;}
                    & .cate {display: flex; align-items: center; gap: 12px; flex: 2;
                        & img {width: 24px;}
                        & p {font-size: 16px; font-weight: 500;}
                    }
                    & .desc {flex: 3;
                        & p {font-size: 16px;}
                    }
                }
            }
        }
    }
    @media (width <= 1280px) {
        & .company-box {
            & .company-ceo {gap: 60px;
                & .img {width: 480px;}
                & .txt {gap: 36px;
                    & h2 {font-size: 30px;}
                }
            }
            & .company-value {gap: 48px;
                & .title {
                    & p {font-size: 30px;}
                }
                & .list {
                    > ul {gap: 24px;
                        > li .txt {
                            & span {font-size: 16px;}
                        }
                    }
                }
            }
            & .company-info {
                > ul {gap: 0 48px;
                    > li .cate {flex: 1.5;}
                    > li .desc {flex: 3;}
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .company-box {
            & .company-ceo {flex-direction: column; gap: 36px;
                & .img {width: 100%; aspect-ratio: 630 / 230; order: 1;}
                & .txt {gap: 24px; order: 2;
                    & h2 {font-size: 24px;}
                    & h2 br {display: none;}
                    & p {font-size: 16px;}
                    & span {font-size: 16px;}
                }
            }
            & .company-value {gap: 36px;
                & .title {
                    & p {font-size: 24px;}
                }
                & .list {
                    > ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
                        > li {aspect-ratio: 350 / 270;
                            &:nth-child(2n) {margin: 0;}
                        }
                    }
                }
            }
            & .company-intro {flex-direction: column; gap: 24px;
                & .title {
                    & h2 {font-size: 28px;}
                    & h2 br {display: none;}
                    & img {width: 180px;}
                }
                & .desc {
                    & p {font-size: 17px;}
                }
            }
            & .company-cate {padding: 36px 0 0; margin: 36px 0 0;
                & > ul {gap: 20px;
                    & > li {
                        & .txt {padding: 0 20px;
                            & h2 {right: 20px; font-size: 60px;}
                            & p {font-size: 20px;}
                            & span {font-size: 16px;}
                        }
                        &:nth-child(2n) .txt h2 {left: 20px;}
                    }
                }
            }
            & .company-info {
                > ul {gap: 0 36px;
                    > li {flex-direction: column; align-items: flex-start; padding: 16px; gap: 4px;
                        & .cate {gap: 8px; flex: 1;}
                        & .cate img {width: 20px;}
                        & .cate p {font-size: 15px;}
                        & .desc p {font-size: 15px;}
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .company-box {
            & .company-ceo {
                & .img {aspect-ratio: 630 / 300; order: 1;}
                & .txt {gap: 24px; order: 2;
                    & h2 {font-size: 20px;}
                    & p {font-size: 15px;}
                }
            }
            & .company-value {gap: 24px;
                & .title {
                    & p {font-size: 20px;}
                    & p br {display: none;}
                }
                & .list {
                    > ul {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px;
                        > li {aspect-ratio: 350 / 230;
                            &:nth-child(2n) {margin: 0;}
                            & .txt {padding: 16px;
                                & p {font-size: 20px;}
                                & span {font-size: 15px;}
                            }
                        }
                    }
                }
            }
            & .company-intro {
                & .title {
                    & h2 {font-size: 20px;}
                    & img {width: 120px;}
                }
                & .desc {
                    & p {font-size: 15px;}
                }
            }
            & .company-cate {
                & > ul {gap: 30px;}
                & > ul li {flex-direction: column;
                    & .img {width: 100%; order: 1;}
                    & .txt {width: 100%; order: 2; padding: 20px 0 0;
                        & img {width: 28px;}
                        & h2 {display: none;}
                        & p {font-size: 18px; margin: 12px 0 6px;}
                        & span {font-size: 15px;}
                    }
                }
            }
            & .company-map {
                & .wrap_map {height: 300px;}
            }
            & .company-info {
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr));
                    > li:first-child {border-bottom: 0; padding: 12px;}
                }
            }
        }
    }
}

/* 브랜드 소개 (연혁) - (01company / history.html) */
.history {
    & .history-box {
        & .history-title {text-align: center;
            & p {font-size: 36px;font-weight: 700;margin: 0 0 24px;
                & strong {font-weight: 700; color: var(--point-color1);}
                & br {display: none;}
            }
            & span {font-size: 18px; color: #999;}
        }
        & .history-list {padding: 80px 0 0;
            > ul {display: flex; flex-direction: column; gap: 120px;
                > li {position: relative; display: flex; gap: 120px;
                    &::before {content: ''; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 1px; height: calc(100% + 120px); background: #eee;}
                    & .img {position: relative; aspect-ratio: 500 / 280; border-radius: 12px; overflow: hidden; flex: 1;
                        & img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
                    }
                    & .txt {flex: 1;
                        & .year {padding: 0 0 20px;
                            & p {position: relative; font-size: 36px; line-height: 1; font-weight: 700; color: var(--point-color1);
                                &::before {content: ''; position: absolute; top: 50%; left: -68px; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; border: 4px solid var(--point-color1); background: #fff;}
                            }
                            & .hide {position: relative; display: none; aspect-ratio: 500 / 280; border-radius: 12px; overflow: hidden; margin: 20px 0 0;
                                & img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
                            }
                        }
                        & .con {display: flex; flex-direction: column;
                            > dl {display: flex; padding: 12px 20px; border-bottom: 1px solid #eee;
                                > dt {flex: 1;
                                    & p {font-size: 18px; font-weight: 500;}
                                }
                                > dd {flex: 7;
                                    & .cate {
                                        & p {font-size: 18px; color: #666;}
                                    }
                                    & .desc {}
                                }
                                &:first-child {border-top: 1px solid #eee;}
                            }
                        }
                    }
                    &:nth-child(2n) {
                        & .img {order: 2;}
                        & .txt {text-align: right; order: 1;
                            & .year {
                                & p::before {left: auto; right: -68px;}
                            }
                            & .con {
                                > dl {
                                    > dt {order: 2;}
                                    > dd {order: 1;}
                                }
                            }
                        }
                    }
                    &:last-child {
                        &::before {content: none;}
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .history-box {
            & .history-title {
                & p {font-size: 30px;}
                & span {font-size: 16px;}
            }
            & .history-list {
                > ul > li {gap: 60px;
                    & .txt .year p {font-size: 30px;}
                    & .txt .year p::before {left: -38px;}
                    & .txt .con > dl {padding: 12px;}
                    & .txt .con > dl > dt p {font-size: 16px;}
                    & .txt .con > dl > dd .cate p {font-size: 16px;}
                }
            }
        }
    }
    @media (width <= 860px) {
        & .history-box {
            & .history-title {
                & p {font-size: 24px;
                    & br {display: block;}
                }
                & span {font-size: 15px;}
            }
            & .history-list {
                > ul {gap: 60px;}
                > ul > li {padding: 0 0 0 24px;
                    &::before {left: 0;}
                    & .img {display: none;}
                    & .txt .year p {font-size: 24px;}
                    & .txt .year p::before {left: -32px;}
                    & .txt .year .hide {display: block;}
                    & .txt .con > dl > dt p {font-size: 15px;}
                    & .txt .con > dl > dd .cate p {font-size: 15px;}
                    &:nth-child(2n) {
                        & .txt {text-align: left;}
                        & .txt .year p::before {right: auto; left: -32px;}
                        & .txt .con > dl > dt {order: 1;}
                        & .txt .con > dl > dd {order: 2;}
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .history-box {
            & .history-title {
                & span br {display: none;}
            }
            & .history-list {
                > ul > li {
                    & .txt .year {padding: 0 0 8px;}
                    & .txt .con > dl > dt {flex: 1.5;}
                    & .txt .con > dl {padding: 8px 0;}
                }
            }
        }
    }
}

/* 브랜드 소개 (cibi) - (01company / ci.html) */
.ci {
    & .ci-box {
        & .ci-title {text-align: center;
            & p {font-size: 36px;font-weight: 700;margin: 0 0 24px;
                & strong {font-weight: 700; color: var(--point-color1);}
                & br {display: none;}
            }
            & span {font-size: 18px; color: #999;}
        }
        & .ci-logo {display: flex; gap: 60px; padding: 60px 0 0;
            & .con {flex: 1;
                & .img {text-align: center; background-image: linear-gradient(#ddd 1px, transparent 1px), linear-gradient(90deg, #ddd 1px, transparent 1px); background-size: 10px 10px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 40px; border-radius: 4px; overflow: hidden;
                    & img {width: auto; height: 160px;}
                }
                & .desc {display: flex; gap: 24px; margin: 24px 0 0;
                    & .color {position: relative; display: flex; flex-direction: column; justify-content: space-between; flex: 1; border-radius: 12px; height: 200px; padding: 24px;
                        &.green {background: var(--point-color1);}
                        &.red {background: #C8000A;}
                        & p {font-size: 18px; font-weight: 700; color: #fff;}
                        & span {display: block; font-size: 15px; font-weight: 500; color: #fff;}
                        & img {position: absolute; bottom: 24px; right: 24px; width: auto; height: 70px; filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(95deg) brightness(105%) contrast(103%); opacity: 0.5;}
                    }
                    & .txt {display: flex; flex-direction: column; justify-content: space-between; flex: 1;
                        & p {font-size: 15px;}
                        & a {display: block; text-align: center; font-size: 15px; line-height: 1; color: #aaa; border: 1px solid #ddd; border-radius: 4px; padding: 8px 0;}
                    }
                }
            }
        }
        & .ci-value {
            > ul {display: flex; justify-content: center; gap: 36px;
                > li {flex: 1; text-align: center; background: #f9f9f9; padding: 36px 12px; border: 4px solid #eee; border-radius: 12px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.03);
                    & img {width: 40px;}
                    & p {font-size: 30px; font-weight: 700; margin: 24px 0;}
                    & span {color: #999;}
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .ci-box {
            & .ci-title {
                & p {font-size: 30px;}
                & span {font-size: 16px;}
            }
            & .ci-logo {flex-direction: column;
                & .con {
                    & .img img {height: 120px;}
                }
            }
            & .ci-value {
                > ul {gap: 24px;
                    > li {padding: 24px;
                        & p {font-size: 20px; margin: 12px 0;}
                        & span {font-size: 14px;}
                        & span br {display: none;}
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .ci-box {
            & .ci-title {
                & p {font-size: 24px;
                    & br {display: block;}
                }
                & span {font-size: 15px;}
            }
            & .ci-logo {
                & .con {
                    & .img {padding: 24px;}
                    & .img img {height: 100px;}
                    & .desc {flex-direction: column;}
                    & .desc .color p {font-size: 16px; padding: 0 0 24px;}
                    & .desc .color span {font-size: 14px;}
                    & .desc .color img {height: 50px;}
                    & .desc .txt {gap: 24px;}
                    & .desc .txt a {font-size: 14px;}
                }
            }
            & .ci-value {
                > ul {flex-direction: column;
                    > li img {width: 30px;}
                }
            }
        }
    }
    @media (width <= 460px) {
        & .ci-box {
            & .ci-title {
                & span br {display: none;}
            }
            & .ci-value {
                > ul {flex-direction: column;
                    > li {padding: 24px 12px;}
                }
            }
        }
    }
}

/* 개인정보처리방침 (privacy) - (05cs / privacy.html) */
.privacy {
    & .privacy-txt {display: flex; flex-direction: column; gap: 24px; padding: 12px 24px; border: 1px dashed #eee; background: #f7f7f7; border-radius: 4px;
        & p {font-size: 14px; font-weight: 500; line-height: 1.8;}
        > dl {
            & dt {font-size: 14px; font-weight: 700; line-height: 1.8;}
            & dd {font-size: 14px; line-height: 1.8;}
        }
    }
}

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