@charset "utf-8";

/* 회사소개 - 회사개요 (compnay) */
.company {
    & .company-intro {padding: 100px 0 550px; background: url("/assets/site/img/contents/company-bg01.png") no-repeat center; background-size: cover;
        & .txt {width: 100%; max-width: 650px; margin: 0 0 0 auto;
            & p {font-size: 30px; font-weight: 600; margin: 0 0 30px;}
            & span {font-size: 20px; font-weight: 500; line-height: 2;}
        }
    }
    & .company-value {position: relative; background: #fff; padding: 50px 0 0;
        &::before {content: ''; position: absolute; top: -80px; left: 0; width: 100%; height: 80px; background: #fff; border-radius: 30px 30px 0 0;}
        & .tit {text-align: center;
            & span {font-size: 18px; font-weight: 500; /* color: #a5a5a5; */}
            & p {font-size: 45px; font-weight: 600; line-height: 1; margin: 20px 0 0;}
        }
        & .img {text-align: center; margin: 70px 0 0;
            & img {width: 100%; max-width: 1000px; margin: 0 auto;
                &:first-child {display: block;}
                &:last-child {display: none;}
            }
        }
        & .text {margin: 70px 0 130px;
            > ul {display: flex; justify-content: center; gap: 25px;
                > li {position: relative; display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; width: 300px; height: 300px; border-radius: 50%; background: #fff; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
                    &::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 50px); height: calc(100% + 50px); border-radius: 50%;}
                    &:nth-child(1) {border: 5px solid #C53843;
                        &::before {border: 1px dotted #C53843;}
                        & p {color: #C53843;}
                    }
                    &:nth-child(2) {border: 5px solid #4886CD;
                        &::before {border: 1px dotted #4886CD;}
                        & p {color: #4886CD;}
                    }
                    &:nth-child(3) {border: 5px solid var(--basic-blue);
                        &::before {border: 1px dotted var(--basic-blue);}
                        & p {color: var(--basic-blue);}
                    }
                    & p {width: 100%; font-size: 35px; font-weight: 700; font-style: italic; text-align: center;}
                    & span {font-size: 30px; font-weight: 600; border-top: 1px solid #22222230; margin: 15px 0 0; padding: 15px 0 0;}
                }
            }
        }
        & .list {
            > ul {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px;
                > li {display: flex; justify-content: center; align-items: center; width: calc(100% / 3 - 27px); aspect-ratio: 460 / 260; background: #f9f9f9; text-align: center; border-radius: 5px; padding: 30px;
                    & .item {
                        & img {}
                        & p {font-size: 20px; font-weight: 600; margin: 10px 0;}
                        & span {font-size: 18px;}
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .company-intro {padding: 0 0 450px; background-size: 120%; background-position: bottom;
            & .txt {margin: 0 auto; text-align: center;
                & p {font-size: 24px;}
                & span {font-size: 16px;}
            }
        }
        & .company-value {padding: 0;
            & .tit {
                & span {font-size: 15px;}
                & p {font-size: 30px; margin: 15px 0 0;}
            }
            & .text {margin: 50px 0 100px;
                > ul {
                    > li {width: 200px; height: 200px;
                        &::before {width: calc(100% + 40px); height: calc(100% + 40px);}
                        & p {font-size: 24px;}
                        & span {font-size: 20px;}
                    }
                }
            }
            & .list {
                > ul {gap: 20px;
                    > li {width: calc(100% / 3 - 14px); padding: 20px;
                        & .item {
                            & img {height: 70px;}
                            & p {font-size: 16px;}
                            & span {font-size: 14px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .company-intro {padding: 0 0 250px; background-size: 120%; background-position: bottom;}
        & .company-value {
            &::before {top: -60px; height: 60px;}
            & .tit {
                & span {font-size: 14px;}
                & p {font-size: 24px; margin: 10px 0 0;}
            }
            & .img {
                & img {
                    &:first-child {display: none;}
                    &:last-child {display: block;}
                }
            }
            & .text {
                > ul {gap: 30px; flex-wrap: wrap;
                    > li {width: 100%; height: unset; border-radius: 10px; padding: 20px 0;
                        &::before {width: calc(100% + 30px); height: calc(100% + 30px); border-radius: 10px;}
                        & p {font-size: 20px;}
                        & span {font-size: 16px; margin: 10px 0 0; padding: 10px 0 0;}
                    }
                }
            }
            & .list {
                > ul {gap: 20px;
                    > li {width: calc(100% / 2 - 10px); padding: 12px;}
                }
            }
        }
    }
    @media (width <= 460px) {
        & .company-intro {
            & .txt {
                & span {font-size: 15px;}
            }
        }
        & .company-value {
            &::before {top: -39px; height: 40px;}
            & .text {margin: 50px 0 80px;}
            & .list {
                > ul {
                    > li {width: 100%; aspect-ratio: unset; padding: 20px 0;
                        & .item {
                            & img {height: 60px;}
                        }
                    }
                }
            }
        }
    }
}

/* 회사소개 - 인사말 (greeting) */
.greeting {
    & .greeting-intro {
        & .con {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
            & .txt {width: 100%; margin: 0 0 60px;
                & p {display: flex; align-items: center; gap: 40px;
                    & strong {font-family: 'Pretendard'; font-size: 90px; line-height: 1; color: var(--basic-blue);}
                    :lang(cn) & strong{font-family: 'Noto Sans SC', sans-serif;}
                    & em {font-size: 26px; line-height: 40px; font-weight: 700;}
                }
            }
            & .desc {width: calc(100% - 800px);
                & span {display: block; line-height: 1.6; margin: 0 0 20px;
                    &:last-child {margin: 0;}
                }
            }
            & .img {position: relative; width: 730px; aspect-ratio: 730 / 410; overflow: hidden;
                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
            }
        }
    }
    @media (width <= 1460px) {
        & .greeting-intro {
            & .con {
                & .desc {width: calc(100% - 650px);}
                & .img {width: 600px;}
            }
        }
    }
    @media (width <= 1024px) {
        & .greeting-intro {
            & .con {justify-content: center; flex-wrap: wrap; gap: 40px;
                & .txt {width: 100%; order: 2; margin: 0;
                    & p {gap: 10px; flex-wrap: wrap;
                        & strong {width: 100%; font-size: 36px; line-height: 1;}
                        & em {width: 100%; font-size: 18px; line-height: 1.4;}
                    }
                }
                & .desc {width: 100%; order: 3;
                    & span {font-size: 15px; margin: 0 0 20px; line-height: 1.6;}
                }
                & .img {width: 100%; order: 1;}
            }
        }
    }
}

/* 회사소개 - 연혁 (history) */
.history {
    & .history-tab {margin: 0 0 80px;
        > ul {display: flex;
            > li {width: 100%;
                & button {width: 100%; font-size: 18px; line-height: 50px; color: #292E41; background: #f9f9f9; text-align: center;}
                &.on {
                    & button {background: #D5E4FF; color: var(--basic-blue); font-weight: 600;}
                }
            }
        }
    }
    & .history-con {
        & .con {
            & .list {display: flex; justify-content: space-between;
                > ul {width: calc(100% / 2 - 80px);
                    > li {position: relative; display: flex; justify-content: flex-end; align-items: flex-start; flex-wrap: wrap; gap: 20px 50px; padding: 0 0 50px;
                        &:last-child {padding: 0;
                            &::after {content: none;}
                        }
                        &::after {content: ''; position: absolute; top: 25px; bottom: -5px; left: 140px; width: 1px; background: #EBECFF; z-index: -1;}
                        & .year {width: 80px;
                            & p {font-size: 20px; font-weight: 600; line-height: 30px; color: #3a3a3a;}
                        }
                        & .circle {display: flex; justify-content: center; align-items: center; padding: 5px 0;
                            & span {width: 20px; height: 20px; background: #767AFF; border-radius: 50%; border: 5px solid #EBECFF;}
                        }
                        & .desc {width: calc(100% - 200px);
                            & p {display: flex; font-size: 20px; line-height: 1; margin: 0 0 10px;
                                &:last-child {margin: 0;}
                                & span {width: 90px; line-height: 30px; color: #858E9A;}
                                & em {width: calc(100% - 90px); line-height: 30px;}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1280px) {
        & .history-con {
            & .con {
                & .list {
                    > ul {
                        > li {gap: 20px;
                            &::after {left: 110px;}
                            & .desc {width: calc(100% - 140px);
                                & p {font-size: 18px;
                                    & span {width: 60px; font-size: 18px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .history-tab {margin: 0 0 50px;
            > ul {
                > li {
                    & button {font-size: 16px; line-height: 45px;}
                }
            }
        }
        & .history-con {
            & .con {
                & .list {flex-wrap: wrap; gap: 50px;
                    > ul {width: 100%;}
                }
            }
        }
    }
    @media (width <= 640px) {
        & .history-tab {
            > ul {
                > li {
                    & button {font-size: 15px; line-height: 40px;}
                }
            }
        }
        & .history-con {
            & .con {
                & .list {gap: 30px;
                    > ul {
                        > li {padding: 0 0 30px;
                            &::after {left: 96px; top: 19px;}
                            & .year {width: 70px;
                                & p {font-size: 18px; line-height: 26px;}
                            }
                            & .circle {
                                & span {width: 16px; height: 16px; border: 3px solid #EBECFF;}
                            }
                            & .desc {width: calc(100% - 126px);
                                & p {flex-wrap: wrap;
                                    & span {width: 100%; font-size: 15px; line-height: 26px;}
                                    & em {width: 100%; font-size: 15px; line-height: 26px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* 회사소개 - 조직도 (group) */
.group {
    & .group-list {margin: 0 0 120px;
        & .depth1 {position: relative; display: flex; justify-content: center; align-items: center; width: 130px; height: 130px; border: 3px solid transparent; border-radius: 50%; background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #ED1C24 0%,  var(--basic-blue) 100%); background-origin: border-box; background-clip: content-box, border-box; margin: 0 auto 6px;
            &::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 20px); height: calc(100% + 20px); background: #F3F3F3; border-radius: 50%; z-index: -1;}
            & p {font-size: 20px; font-weight: 500;}
        }
        & .depth2 {position: relative; display: flex; justify-content: center; padding: 20px 0;
            &::before {content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: #D1DAF3; z-index: -1;}
            & p {display: flex; justify-content: center; align-items: center; width: calc(100% / 5 - 24px); height: 50px; font-size: 18px; font-weight: 500; color: #fff; border-radius: 5px; background: #6A85C9;}
        }
        & .depth3 {padding: 20px 0 0;
            > ul {display: flex; justify-content: space-between;
                > li {position: relative; width: calc(100% / 5); padding: 0 15px;
                    &:first-child {
                        &::before {width: 50%; left: unset; right: 0; transform: translateX(0);}
                    }
                    &:last-child {
                        &::before {width: 50%; left: 0; transform: translateX(0);}
                    }
                    &::before {content: ''; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 100%; height: 1px; background: #D1DAF3;}
                    & p {position: relative; display: flex; justify-content: center; align-items: center; height: 50px; font-size: 18px; font-weight: 500; border-radius: 5px; background: #EDF2FF; border: 1px solid #D1DAF3; margin: 0 0 20px;
                        &::before {content: ''; position: absolute; top: -21px; left: 50%; transform: translateX(-50%); width: 1px; height: 20px; background: #D1DAF3;}
                    }
                    & span {position: relative; display: flex; justify-content: center; align-items: center; height: 50px; font-size: 18px; font-weight: 500; color: #5c5c5c; border-radius: 5px; background: #F9F9F9; border: 1px solid #E5E5E5; margin: 0 0 20px;
                        &:last-child {margin: 0;}
                        &::before {content: ''; position: absolute; top: -21px; left: 50%; transform: translateX(-50%); width: 1px; height: 20px; background: #D1DAF3;}
                    }
                }
            }
        }
    }
    & .group-info {
        > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 80px;
            > li {display: flex; padding: 20px 0; border-bottom: 1px solid #DCDCDC;
                & p {width: 140px; font-size: 18px; color: #6F7E97;}
                & span {width: calc(100% - 140px); font-size: 18px; font-weight: 600;}
            }
        }
    }
    @media (width <= 1024px) {
        & .group-list {
            & .depth1 {
                & p {font-size: 16px;}
            }
            & .depth2 {
                & p {font-size: 16px;}
            }
            & .depth3 {
                > ul {
                    > li {
                        & p {font-size: 16px;}
                        & span {font-size: 16px;}
                    }
                }
            }
        }
        & .group-info {
            > ul {gap: 0 40px;
                > li {
                    & p {font-size: 16px;}
                    & span {font-size: 16px;}
                }
            }
        }
    }
    @media (width <= 860px) {
        & .group-list {margin: 0 0 80px;}
        & .group-info {
            > ul {grid-template-columns: repeat(2, minmax(0, 1fr));}
        }
    }
    @media (width <= 640px) {
        & .group-list {margin: 0 0 60px;
            & .depth2 {
                & p {width: 100%; height: 45px; font-size: 14px;}
            }
            & .depth3 {
                > ul {
                    > li {padding: 0 5px;
                        & p {font-size: 14px; height: 45px;}
                        & span {font-size: 14px; height: 45px;}
                    }
                }
            }
        }
        & .group-info {
            > ul {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0;
                > li {padding: 12px 0;
                    & p {font-size: 14px;}
                    & span {font-size: 14px;}
                }
            }
        }
    }
    @media (width <= 460px) {
        & .group-list {
            & .depth3 {
                > ul {flex-wrap: wrap; gap: 20px 0;
                    > li {width: calc(100% / 3);
                        &:nth-child(3n) {
                            &::before {width: 50%; left: 0; transform: translateX(0);}
                        }
                        &:nth-child(n + 3) {
                            &::before {content: none;}
                            & p {
                                &::before {content: none;}
                            }
                        }
                    }
                }
            }
        }
    }
}

/* 회사소개 - 오시는 길 (location) */
.location {
    & .location-map {position: relative; width: 100%; height: 600px; border-radius: 5px; overflow: hidden; margin: 0 0 80px;
        & .root_daum_roughmap {width: 100%; height: 100%;}
        & .root_daum_roughmap .wrap_map {height: 100%;}
        & .root_daum_roughmap .wrap_map .map {height: 100%;}
        & .root_daum_roughmap .wrap_controllers,
        & .root_daum_roughmap .cont,
        & .root_daum_roughmap .wrap_map .map > div:nth-child(2),
        & .root_daum_roughmap .map_border {display: none;}
    }
    & .location-info {
        > ul {
            > li {display: flex; padding: 20px 0; border-bottom: 1px solid #DCDCDC;
                & p {width: 140px; font-size: 18px; color: #6F7E97;}
                & span {width: calc(100% - 140px); font-size: 18px; font-weight: 600;}
            }
        }
    }
    @media (width <= 1024px) {
        & .location-info {
            > ul {
                > li {
                    & p {font-size: 16px;}
                    & span {font-size: 16px;}
                }
            }
        }
    }
    @media (width <= 640px) {
        & .location-map {height: 300px; margin: 0 0 60px;}
        & .location-info {
            > ul {
                > li {padding: 12px 0;
                    & p {font-size: 14px;}
                    & span {font-size: 14px;}
                }
            }
        }
    }
}

/* 제품소개 - 리스트 (lists) */
.product {
    & .product-list {
        > ul {
            > li {display: flex; align-items: center; background: #F9F9F9; border: 1px solid #d4d4d4; margin: 0 0 25px;
                &:last-child {margin: 0;}
                > div {width: calc(100% / 2);}
                & .img {position: relative; aspect-ratio: 730 / 440; overflow: hidden;
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.2s;}
                }
                & .txt {padding: 0 90px;
                    & em {font-weight: 300; color: #b3b3b3;
                        & strong {font-weight: 600; color: var(--basic-blue);}
                    }
                    & p {display: flex; justify-content: space-between; align-items: center; font-size: 36px; font-weight: 700; margin: 10px 0 30px;
                        & a {display: flex; align-items: center; font-size: 16px; line-height: 1; font-weight: 500; padding: 10px 15px; gap: 8px; border-radius: 999px; border: 1px solid #22222210; background: #fff;
                            &:hover {background: var(--basic-blue); color: #fff;
                                & i {color: #fff;}
                            }
                            & i {color: var(--basic-blue);}
                        }
                    }
                    & span {font-size: 18px; font-weight: 500; line-height: 2;}
                }
                &:hover {
                    & .img {
                        & img {transform: translate(-50%, -50%) scale(1.1);}
                    }
                }
            }
        }
    }
    & .product-tab {
        > ul {display: flex;
            > li {width: 100%;
                & button {width: 100%; height: 50px; font-size: 18px; color: #292E41; text-align: center; border: 1px solid #E4E4E4; border-bottom: 1px solid var(--basic-blue); border-right: 0; background: #f9f9f9;}
                &.on {
                    & button {font-weight: 700; border: 1px solid var(--basic-blue); border-bottom: 0; background: #fff;}
                    &:last-child {
                        & button {border-right: 1px solid var(--basic-blue);}
                    }
                }
                &:last-child {
                    & button {border-right: 1px solid #E4E4E4;}
                }
            }
        }
    }
    & .product-con {
        & .con {padding: 150px 0;
            &.bg {background: #F9F9F9;}
            &:last-child {padding: 150px 0 0;}
            & .desc {display: flex; justify-content: space-between; align-items: flex-start; margin: 0 0 50px;
                & .txt {
                    & em {position: relative; line-height: 1; font-weight: 700; color: var(--basic-blue); padding: 0 0 0 18px;
                        &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 2px; background-image: linear-gradient(to bottom, #ED1C24 50%, var(--basic-blue) 50%);}
                    }
                    & p {font-family: 'Pretendard'; font-size: 24px; font-weight: 700; line-height: 1; margin: 40px 0 20px;}
                    :lang(cn) & p{font-family: 'Noto Sans SC', sans-serif;}
                    & span {font-size: 18px; color: #292E41;}
                }
                & .img {max-width: 400px;
                    & img {}
                }
            }
            & .type {
                > ul {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px;
                    > li {
                        & .type-con {
                            & .img {position: relative; aspect-ratio: 220 / 100; border-radius: 5px; overflow: hidden;
                                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                            }
                            & .txt {text-align: center;
                                & p {font-size: 18px; font-weight: 700; line-height: 1; margin: 12px 0 0;}
                            }
                        }
                        &:last-child {margin: 0;}
                    }
                }
            }
        }
    }
    & .product-detail {border: 1px solid #E5E5E5; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 15px 0px;
        & .info {display: flex; justify-content: space-between; align-items: flex-start; padding: 50px;
            & .img {position: relative; width: calc(100% - 800px); aspect-ratio: 520 / 330; border-radius: 5px; overflow: hidden;
                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
            }
            & .txt {width: 740px;
                & .name {margin: 0 0 40px;
                    & span {display: inline-block; font-size: 14px; font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: 999px; background: var(--basic-blue); color: #fff;}
                    & p {font-size: 60px; font-weight: 600; line-height: 1; margin: 15px 0 0;}
                }
                & .desc {
                    > ul {display: flex; flex-wrap: wrap;
                        > li {display: flex; justify-content: space-between; align-items: center; gap: 8px; width: calc(100% / 3); border-right: 1px solid #eee; padding: 10px 30px;
                            &:nth-child(3n) {border-right: 0; padding-right: 0;}
                            &:nth-child(3n + 1) {padding-left: 0;}
                            & p {font-family: 'Pretendard'; font-weight: 700; color: #6F7E97; font-size: 15px;}
                            :lang(cn) & p{font-family: 'Noto Sans SC', sans-serif;}
                            & span {font-family: 'Pretendard'; font-weight: 700; font-size: 15px; text-align: right;}
                            :lang(cn) & span{font-family: 'Noto Sans SC', sans-serif;}
                        }
                    }
                }
            }
        }
        & .other {padding: 50px; background: #F9F9F9;
            & .tit {margin: 0 0 35px;
                & p {font-size: 22px; font-weight: 700; line-height: 1;}
            }
            & .list {
                > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 50px;
                    > li {
                        & .img {position: relative; aspect-ratio: 280 / 140; border-radius: 5px; overflow: hidden;
                            & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                        }
                        & .name {text-align: center; margin: 12px 0 0;
                            & p {font-size: 18px; font-weight: 700;}
                        }
                    }
                }
            }
        }
    }
    & .bt {margin: 50px 0 0;
        & button {display: flex; justify-content: center; align-items: center; width: 150px; height: 50px; font-weight: 500; color: #fff; border-radius: 5px; background: var(--basic-blue); border: 1px solid var(--basic-blue); margin: 0 auto; transition: all 0.2s;
            &:hover {background: #F9F9F9; color: #4f4f4f; border: 1px solid #ECECEC;}
        }
    }
    @media (width <= 1280px) {
        & .product-list {
            > ul {
                > li {
                    & .txt {padding: 0 40px;
                        & p {font-size: 24px;
                            & a {font-size: 15px;}
                        }
                        & span {font-size: 16px; line-height: 1.8;}
                    }
                }
            }
        }
        & .product-detail {
            & .info {justify-content: center; flex-wrap: wrap; gap: 40px;
                & .img {width: 400px;}
                & .txt {width: 100%;
                    & .name {margin: 0 0 20px;
                        & p {font-size: 40px;}
                    }
                    & .desc {
                        > ul {
                            > li {width: calc(100% / 2); padding: 10px 20px;
                                &:nth-child(3n) {padding: 10px 20px; border-right: 1px solid #eee;}
                                &:nth-child(3n + 1) {padding: 10px 20px;}
                            }
                        }
                    }
                }
            }
            & .other {
                & .list {
                    > ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px;
                        > li {}
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .product-tab {
            > ul {
                > li {
                    & button {font-size: 15px; height: 45px;}
                }
            }
        }
        & .product-con {
            & .con {padding: 80px 0;
                &:last-child {padding: 80px 0 0;}
                & .desc {justify-content: center; flex-wrap: wrap; gap: 30px;
                    & .txt {width: 100%; order: 2;
                        & p {margin: 20px 0;}
                        & span {
                            & br {display: none;}
                        }
                    }
                    & .img {}
                }
                & .type {
                    > ul {grid-template-columns: repeat(4, minmax(0, 1fr));}
                }
            }
        }
    }
    @media (width <= 860px) {
        & .product-list {
            > ul {
                > li {flex-wrap: wrap;
                    > div {width: 100%;}
                    & .img {order: 1;}
                    & .txt {order: 2; padding: 30px;
                        & em {font-size: 14px;}
                        & p {font-size: 18px; margin: 10px 0 20px;
                            & a {font-size: 12px;}
                        }
                        & span {font-size: 15px; line-height: 1.6;}
                    }
                }
            }
        }
        & .product-tab {display: none;
            > ul {flex-wrap: wrap;
                > li {width: 100%;
                    & button {border: 1px solid #E4E4E4; border-bottom: 0;}
                    &:last-child {border-bottom: 1px solid #E4E4E4;}
                    &.on {
                        & button {border: 1px solid var(--basic-blue);}
                    }
                }
            }
        }
        & .product-con {
            & .con {
                & .desc {
                    & .txt {width: 100%; order: 2;
                        & em {font-size: 14px;
                            &::before {top: 5px; transform: translateY(0);}
                        }
                        & p {font-size: 20px;}
                        & span {font-size: 15px;}
                    }
                    & .img {}
                }
                & .type {
                    > ul {grid-template-columns: repeat(3, minmax(0, 1fr));
                        > li {
                            & .type-con {
                                & .txt {
                                    & p {font-size: 15px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .product-con {
            & .con {
                & .type {
                    > ul {gap: 20px;}
                }
            }
        }
        & .product-detail {
            & .info {padding: 20px; gap: 30px;
                & .img {width: 100%;}
                & .txt {
                    & .name {
                        & span {font-size: 12px;}
                        & p {font-size: 30px; margin: 10px 0 0;}
                    }
                    & .desc {
                        > ul {
                            > li {
                                &:nth-child(3n) {padding: unset;}
                                &:nth-child(3n + 1) {padding: unset;}
                                &:nth-child(2n - 1) {padding: 8px 15px 8px 0;}
                                &:nth-child(2n) {padding: 8px 0 8px 15px; border-right: 0;}
                                & p {font-size: 14px;}
                                & span {font-size: 14px;}
                            }
                        }
                    }
                }
            }
            & .other {padding: 20px;
                & .tit {margin: 0 0 20px;}
                & .list {
                    > ul {gap: 20px;
                        > li {
                            & .name {
                                & p {font-size: 15px;}
                            }
                        }
                    }
                }
            }
        }
        & .bt {
            & button {width: 120px; height: 40px; font-size: 15px;}
        }
    }
    @media (width <= 460px) {
        & .product-con {
            & .con {
                & .type {
                    > ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
                        > li {
                            & .type-con {
                                & .txt {
                                    & p {font-size: 15px;}
                                }
                            }
                        }
                    }
                }
                & .desc {
                    & .txt {
                        & em {font-size: 12px;
                            &::before {top: 4px; transform: translateY(0);}
                        }
                    }
                }
            }
        }
        & .product-detail {
            & .info {
                & .txt {
                    & .desc {
                        > ul {
                            > li {width: 100%; border-right: 0; padding: 8px 0;
                                &:nth-child(2n - 1) {padding: 8px 0;}
                                &:nth-child(2n) {padding: 8px 0;}
                                &:nth-child(3n) {border-right: 0;}
                                & p {font-size: 15px;}
                                & span {font-size: 15px;}
                            }
                        }
                    }
                }
            }
        }
    }
}

/* 제품소개 - 초고압 전력케이블 테이프 (product02) */
.tape {
    & .tape-con {margin: 0 0 100px;
        &:last-child {margin: 0;}
        & .con {margin: 0 0 120px;
            & img {display: block; width: 100%; max-width: 1280px; margin: 0 auto;}
        }
        & .info {
            & table {width: 100%; table-layout: fixed; border-radius: 5px; overflow: hidden;
                & tr {
                    & td {text-align: center; padding: 20px; width: calc(100% / 6);
                        & p {font-family: 'Pretendard'; font-size: 20px;}
                        :lang(cn) & p{font-family: 'Noto Sans SC', sans-serif;}
                    }
                }
                & thead {
                    & tr {background: var(--basic-blue);
                        & td {
                            & p {color: #fff;}
                        }
                    }
                }
                & tbody {
                    & tr {border-bottom: 1px solid #E2E8F0;
                        & td {border-right: 1px solid #E2E8F0;
                            &:last-child {border-right: 0;}
                            &:nth-child(2n - 1) {background: #F9F9F9;}
                        }
                    }
                }
            }
        }
        & .desc {display: none; margin: 10px 0 0;
            & p {font-size: 14px; color: #555;}
        }
        & .thumbs {margin: 120px 0 0;
            > ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;
                > li {
                    .img {position: relative; aspect-ratio: 710 / 450; border-radius: 5px; overflow: hidden; border: 1px solid #E5E5E5; box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    }
                }
            }
        }
    }
    @media (width <= 1280px) {
        & .tape-con {
            & .info {
                & table {
                    & tr {
                        & td {
                            & p {font-size: 16px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .tape-con {
            & .info {overflow-x: scroll;
                & table {width: 960px;
                    & tr {
                        & td {
                            & p {font-size: 14px;}
                        }
                    }
                    & thead {
                        & tr {
                            & td {
                                & p {font-size: 14px;}
                            }
                        }
                    }
                }
            }
            & .desc {display: block;}
        }
    }
    @media (width <= 640px) {
        & .tape-con {margin: 0 0 60px;
            & .con {margin: 0 0 60px;}
            & .thumbs {margin: 60px 0 0;
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 40px;
                    > li {
                    }
                }
            }
        }
    }
}

/* 제품소개 - 다이아프렘 (product03) */
.dia {
    & .dia-img {padding: 60px 0; text-align: center; border: 1px solid #E5E5E5; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 15px 0px; margin: 0 0 40px;
        & img {width: 100%; max-width: 860px;}
    }
    & .dia-box {margin: 0 0 100px;
        &:last-child {margin: 0;}
        & .tit {margin: 0 0 30px;
            & p {position: relative; font-size: 24px; font-weight: 600; padding: 0 0 0 18px;
                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 2px; background-image: linear-gradient(to bottom, #ED1C24 50%, var(--basic-blue) 50%);}
            }
        }
        & .desc {
            & p {font-size: 20px;}
        }
        & .point {
            > ul {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px;
                > li {text-align: center; background: #F6F6F6; border-radius: 10px; padding: 50px 20px;
                    & em {display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 18px; font-weight: 700; color: var(--basic-blue); background: #fff; border-radius: 50%;}
                    & p {font-size: 22px; font-weight: 600; line-height: 1; margin: 15px 0 25px;}
                    & span {font-size: 18px;}
                }
            }
        }
        & .cate {
            > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
                > li {position: relative; display: flex; justify-content: center; align-items: center; border-radius: 30px; padding: 40px 0; border: 5px solid rgba(126, 167, 255, 0.15); outline: 1px dashed #7EA7FF; text-align: center;
                    & p {font-size: 18px; font-weight: 600;}
                }
            }
        }
        & .list {padding: 30px 0; margin: 0 0 120px;
            > ul {display: flex; justify-content: center;
                > li {position: relative; display: flex; justify-content: center; align-items: center; width: 260px; height: 260px; border-radius: 50%; background: #fff; text-align: center; margin: 0 -10px;
                    &::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 60px); height: calc(100% + 60px); border-radius: 50%; z-index: -1;}
                    &::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 16px); height: calc(100% + 16px); background: rgba(255, 255, 255, 0.3); border-radius: 50%; z-index: 1;}
                    &:nth-child(1) {
                        &::before {background: linear-gradient(90deg,rgba(124, 224, 174, 1) 0%, rgba(162, 222, 236, 1) 100%);}
                    }
                    &:nth-child(2) {
                        &::before {background: linear-gradient(90deg,rgba(162, 222, 236, 1) 0%, rgba(139, 158, 248, 1) 100%);}
                    }
                    &:nth-child(3) {
                        &::before {background: linear-gradient(90deg,rgba(139, 158, 248, 1) 0%, rgba(190, 133, 229, 1) 100%);}
                    }
                    & p {font-size: 22px; font-weight: 600;}
                }
            }
        }
        & .pd {
            > ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;
                > li {
                    & .img  {position: relative; aspect-ratio: 710 / 500; border: 1px solid #E5E5E5; border-radius: 5px; overflow: hidden;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .dia-box {
            & .point {
                > ul {grid-template-columns: repeat(3, minmax(0, 1fr));}
            }
            & .cate {
                > ul {grid-template-columns: repeat(2, minmax(0, 1fr));}
            }
        }
    }
    @media (width <= 860px) {
        & .dia-img {
            & img {width: 90%;}
        }
        & .dia-box {
            & .desc {
                & p {
                    & br {display: none;}
                }
            }
            & .list {
                > ul {
                    > li {width: 200px; height: 200px;
                        &::before {width: calc(100% + 30px); height: calc(100% + 30px);}
                        & p {font-size: 18px;}
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .dia-box {margin: 0 0 60px;
            & .tit {margin: 0 0 15px;
                & p {font-size: 18px;}
            }
            & .point {
                > ul {grid-template-columns: repeat(2, minmax(0, 1fr));
                    > li {padding: 30px;
                        & em {font-size: 16px;}
                        & p {font-size: 16px; margin: 15px 0;}
                        & span {font-size: 14px;}
                    }
                }
            }
            & .cate {
                > ul {
                    > li {
                        & p {font-size: 16px;}
                    }
                }
            }
            & .list {margin: 0 0 60px;
                > ul {
                    > li {width: calc(100% / 3); height: unset; aspect-ratio: 1 / 1;}
                }
            }
            & .pd {
                > ul {gap: 20px;}
            }
            & .desc {
                & p {font-size: 16px;}
            }
        }
    }
    @media (width <= 460px) {
        & .dia-box {
            & .point {
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
            }
            & .cate {
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
            }
            & .list {
                > ul {
                    > li {margin: 0 -5px;
                        &::after {width: calc(100% + 8px); height: calc(100% + 8px);}
                        & p {font-size: 14px;}
                    }
                }
            }
            & .pd {
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
            }
        }
    }
}

/* 제품소개 - 실리콘 매트 (product04) */
.mat {
    & .mat-box {margin: 0 0 100px;
        &:last-child {margin: 0;}
        & .tit {margin: 0 0 30px;
            & p {position: relative; font-size: 24px; font-weight: 600; padding: 0 0 0 18px;
                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 2px; background-image: linear-gradient(to bottom, #ED1C24 50%, var(--basic-blue) 50%);}
            }
        }
        & .thumbs {
            > ul {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px;
                > li {position: relative; width: calc(100% / 2 - 20px); aspect-ratio: 710 / 500; border-radius: 5px; border: 1px solid #E2E8F0; overflow: hidden; box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
                    &:first-child {width: 100%;}
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                }
            }
        }
        & .info {
            & table {width: 100%; table-layout: fixed; border-radius: 5px; overflow: hidden;
                & tr {
                    & td {text-align: center; padding: 20px; width: calc(100% / 6);
                        & p {font-family: 'Pretendard';}
                        :lang(cn) & p{font-family: 'Noto Sans SC', sans-serif;}

                    }
                }
                & thead {
                    & tr {background: var(--basic-blue);
                        & td {
                            & p {font-size: 18px; color: #fff;}
                        }
                    }
                }
                & tbody {
                    & tr {border-bottom: 1px solid #E2E8F0;
                        & td {border-right: 1px solid #E2E8F0;
                            &:last-child {border-right: 0;}
                            &:nth-child(2n - 1) {background: #F9F9F9;}
                        }
                    }
                }
            }
        }
        & .desc {display: none; margin: 10px 0 0;
            & p {font-size: 14px; color: #555;}
        }
        & .wel {display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 1px solid #E2E8F0; border-radius: 5px; padding: 50px 60px;
            & .txt {width: calc(100% - 290px);
                & p {font-size: 24px; font-weight: 700; line-height: 1; color: var(--basic-blue); margin: 0 0 20px;}
                & span {position: relative; display: block; font-size: 18px; font-weight: 700; line-height: 26px; padding: 5px 0 5px 36px;
                    &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 26px; height: 26px; background: url("/assets/site/img/contents/product04-deco.svg") no-repeat center; background-size: contain;}
                }
                & em {display: block; font-size: 18px; padding: 20px 30px; background: #F9F9F9; border-radius: 10px; margin: 20px 0 0;}
            }
            & .img {display: flex; width: 270px;
                & img {width: 100%;}
            }
        }
        & .list {
            > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px;
                > li {border-radius: 10px; background: #F6F6F6; overflow: hidden;
                    &:nth-child(1) {
                        & .cate {background: #06A89A;}
                    }
                    &:nth-child(2) {
                        & .cate {background: #6A91F4;}
                    }
                    &:nth-child(3) {
                        & .cate {background: #9C81EB;}
                    }
                    & .cate {text-align: center;
                        & p {font-size: 20px; font-weight: 600; line-height: 1; padding: 20px; color: #fff;}
                    }
                    & .merit {padding: 20px 30px;
                        & p {position: relative; line-height: 24px; padding: 0 0 0 12px; margin: 0 0 20px;
                            &::before {content: ''; position: absolute; top: 9px; left: 0; width: 6px; height: 6px; background: #C0C0C0; border-radius: 50%;}
                            &:last-child {margin: 0;}
                        }
                    }
                }
            }
        }
        & .pd {
            > ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;
                > li {
                    & .img  {position: relative; aspect-ratio: 710 / 500; border: 1px solid #E5E5E5; border-radius: 5px; box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px; overflow: hidden;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    }
                }
            }
        }
    }
    @media (width <= 1280px) {
        & .mat-box {
            & .wel {padding: 30px;}
            & .list {
                > ul {gap: 20px;}
            }
        }
    }
    @media (width <= 1024px) {
        & .mat-box {
            & .wel {justify-content: center; flex-wrap: wrap;
                & .txt {width: 100%;}
            }
        }
    }
    @media (width <= 860px) {
        & .mat-box {
            & .info {overflow-x: scroll;
                & table {width: 900px;
                    & tr {
                        & td {
                            & p {font-size: 15px;}
                        }
                    }
                    & thead {
                        & tr {
                            & td {
                                & p {font-size: 15px;}
                            }
                        }
                    }
                }
            }
            & .desc {display: block;}
            & .wel {
                & .txt {
                    & p {font-size: 20px;}
                    & span {font-size: 16px; padding: 5px 0 5px 32px;
                        &::before {width: 22px; height: 22px;}
                    }
                    & em {font-size: 15px; padding: 20px;
                        & br {display: none;}
                    }
                }
            }
            & .list {
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
            }
        }
    }
    @media (width <= 640px) {
        & .mat-box {margin: 0 0 60px;
            & .tit {margin: 0 0 15px;
                & p {font-size: 18px;}
            }
            & .thumbs {
                > ul {gap: 20px;
                    > li {width: calc(100% / 2 - 10px);}
                }
            }
            & .list {
                > ul {
                    > li {
                        & .cate {
                            & p {font-size: 16px;}
                        }
                        & .merit {padding: 20px;
                            & p {font-size: 15px;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .mat-box {
            & .wel {padding: 20px;
                & .txt {
                    & p {font-size: 18px; margin: 0 0 12px;}
                    & span {padding: 5px 0 5px 22px;
                        &::before {top: 9px; transform: translateY(0); width: 16px; height: 16px;}
                    }
                }
            }
            & .pd {
                > ul {gap: 20px;}
            }
        }
    }
    @media (width <= 460px) {
        & .mat-box {
            & .pd {
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
            }
        }
    }
}

/* 제품소개 - 고무제품 (product05) */
.rubber {
    & .rubber-box {margin: 0 0 100px;
        &:last-child {margin: 0;}
        & .tit {margin: 0 0 30px;
            & p {position: relative; font-size: 24px; font-weight: 600; padding: 0 0 0 18px;
                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 2px; background-image: linear-gradient(to bottom, #ED1C24 50%, var(--basic-blue) 50%);}
            }
        }
        & .thumbs {
            > ul {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px;
                > li {position: relative; width: 100%; aspect-ratio: 1460 / 750; border-radius: 5px; overflow: hidden; box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px; border: 1px solid #E5E5E5;
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                }
            }
        }
        & .pd {
            > ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;
                > li {
                    & .img  {position: relative; aspect-ratio: 710 / 500; border: 1px solid #E5E5E5; border-radius: 5px; overflow: hidden;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .rubber-box {margin: 0 0 60px;
            & .tit {margin: 0 0 15px;
                & p {font-size: 18px;}
            }
        }
    }
    @media (width <= 640px) {
        & .rubber-box {
            & .pd {
                > ul {gap: 20px;}
            }
        }
    }
    @media (width <= 460px) {
        & .rubber-box {
            & .pd {
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
            }
        }
    }
}

/* 제품소개 - 특수고무시트 (product06) */
.special {
    & .special-box {margin: 0 0 100px;
        &:last-child {margin: 0;}
        & .tit {margin: 0 0 30px;
            & p {position: relative; font-size: 24px; font-weight: 600; padding: 0 0 0 18px;
                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 2px; background-image: linear-gradient(to bottom, #ED1C24 50%, var(--basic-blue) 50%);}
            }
        }
        & .thumbs {
            > ul {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px;
                > li {position: relative; width: 100%; aspect-ratio: 1460 / 750; border-radius: 5px; overflow: hidden; box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px; border: 1px solid #E5E5E5;
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                }
            }
        }
        & .img {
            & img {width: 100%;
                &:first-child {display: block;}
                &:last-child {display: none;}
            }
        }
        & .info {
            & table {width: 100%; table-layout: fixed; border-radius: 5px; overflow: hidden;
                & tr {
                    & td {text-align: center; padding: 15px 20px;
                        & p {font-family: 'Pretendard'; font-size: 18px;}
                        :lang(cn) & p{font-family: 'Noto Sans SC', sans-serif;}
                    }
                }
                & thead {
                    & tr {background: var(--basic-blue);
                        & td {
                            & p {font-size: 18px; color: #fff;}
                        }
                    }
                }
                & tbody {
                    & tr {border-bottom: 1px solid #E2E8F0;
                        &.bgc {background: #F9F9F9;}
                        & td {border-right: 1px solid #E2E8F0;
                            &:last-child {border-right: 0;}
                            &:nth-child(2) {text-align: left;}
                        }
                    }
                }
            }
        }
        & .desc {display: none; margin: 10px 0 0;
            & p {font-size: 14px; color: #555;}
        }
    }
    @media (width <= 860px) {
        & .special-box {
            & .info {overflow-x: scroll;
                & table {width: 1000px;
                    & tr {
                        & td {
                            & p {font-size: 16px;}
                        }
                    }
                    & thead {
                        & tr {
                            & td {
                                & p {font-size: 16px;}
                            }
                        }
                    }
                }
            }
            & .desc {display: block;}
        }
    }
    @media (width <= 640px) {
        & .special-box {margin: 0 0 60px;
            & .tit {margin: 0 0 15px;
                & p {font-size: 18px;}
            }
            & .thumbs {margin: 60px 0 0;
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 40px;
                    > li {
                        & .tit {margin: 0 0 15px;
                            & p {font-size: 18px;}
                        }
                    }
                }
            }
            & .img {
                & img {
                    &:first-child {display: none;}
                    &:last-child {display: block;}
                }
            }
        }
    }
}

/* 제품소개 - 커넥터 고무 & 분기관 연결구 (product07) */
.connect {
    & .connect-box {margin: 0 0 100px;
        &:last-child {margin: 0;}
        & .tit {margin: 0 0 30px;
            & p {position: relative; font-size: 24px; font-weight: 600; padding: 0 0 0 18px;
                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 2px; background-image: linear-gradient(to bottom, #ED1C24 50%, var(--basic-blue) 50%);}
            }
        }
        & .thumbs {
            > ul {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px;
                > li {position: relative; width: calc(100% / 2 - 20px); aspect-ratio: 710 / 500; border-radius: 5px; overflow: hidden; border: 1px solid #E5E5E5; box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
                    &:first-child {width: 100%; aspect-ratio: 1460 / 750;}
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                }
            }
        }
        & .con {padding: 100px 160px; background: #F9F9F9; border-radius: 5px;
            & .img {text-align: center;
                & img {width: 100%;}
            }
            & .txt {margin: 50px 0 40px;
                & p {font-size: 18px; font-weight: 700; line-height: 2;}
            }
            & .list {
                > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
                    > li {background: #fff; padding: 30px 50px; border-radius: 20px;
                        & p {display: inline-block; font-size: 18px; font-weight: 700; color: #7EA7FF; border-bottom: 1px solid #7EA7FF; padding: 0 0 6px; margin: 0 0 30px;}
                        & span {display: flex; font-weight: 700; margin: 0 0 10px;
                            &:last-child {margin: 0;}
                            & strong {width: 100px; color: #6F7E97; white-space: nowrap;}
                            & em {width: calc(100% - 100px);}
                        }
                    }
                }
            }
        }
        & .info {
            & table {width: 100%; table-layout: fixed; border-radius: 5px; overflow: hidden;
                & tr {
                    & td {text-align: center; width: 120px; padding: 20px;
                        &:nth-child(2n - 1) {width: calc((100% - 360px) / 3);}
                        & p {font-family: 'Pretendard';}
                        :lang(cn) & p{font-family: 'Noto Sans SC', sans-serif;}
                    }
                }
                & thead {
                    & tr {background: var(--basic-blue);
                        & td {
                            & p {font-size: 18px; color: #fff;}
                        }
                    }
                }
                & tbody {
                    & tr {border-bottom: 1px solid #E2E8F0;
                        & td {border-right: 1px solid #E2E8F0;
                            &:last-child {border-right: 0;}
                            &:nth-child(2n - 1) {background: #F9F9F9;}
                        }
                    }
                }
            }
        }
        & .desc {display: none; margin: 10px 0 0;
            & p {font-size: 14px; color: #555;}
        }
        & .pd {
            > ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;
                > li {
                    & .img  {position: relative; aspect-ratio: 710 / 500; border: 1px solid #E5E5E5; border-radius: 5px; overflow: hidden;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    }
                }
            }
        }
        & .ct {
            > ul {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px;
                > li {position: relative; width: calc(100% / 2 - 20px); aspect-ratio: 710 / 1025; border-radius: 5px; overflow: hidden; border: 1px solid #E5E5E5; box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                }
            }
        }
        & .pd2 {
            > ul {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 120px 40px;
                > li {
                    & .img  {position: relative; aspect-ratio: 710 / 1025; border: 1px solid #E5E5E5; border-radius: 5px; overflow: hidden; border: 1px solid #E5E5E5; box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
                        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                    }
                }
            }
        }
        & .cate {margin: 0 0 50px;
            &.p100 {padding: 100px 0 0; border-top: 1px dashed #000;}
            & p {font-size: 30px; font-weight: 600;}
            & span {display: block; font-size: 18px; margin: 30px 0 0;}
        }
    }
    @media (width <= 1280px) {
        & .connect-box {
            & .con {padding: 50px;
                & .list {
                    > ul {
                        > li {padding: 30px;
                            & span {flex-wrap: wrap; margin: 0 0 15px;
                                & strong {width: 100%;}
                                & em {width: 100%; margin: 4px 0 0;
                                    &:first-child {margin: 0;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .connect-box {
            & .cate {
                & p {font-size: 24px;}
            }
            & .info {overflow-x: scroll;
                & table {width: 900px;
                    & tr {
                        & td {padding: 20px 10px;
                            & p {font-size: 12px;}
                        }
                    }
                    & thead {
                        & tr {
                            & td {
                                & p {font-size: 14px;}
                            }
                        }
                    }
                }
            }
            & .desc {display: block;}
            & .con {
                & .list {
                    > ul {grid-template-columns: repeat(1, minmax(0, 1fr));
                        > li {padding: 30px;}
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .connect-box {margin: 0 0 60px;
            & .tit {margin: 0 0 15px;
                & p {font-size: 16px;}
            }
            & .thumbs {
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px;
                    > li {width: calc(100% / 2 - 10px);
                        & .tit {margin: 0 0 15px;
                            & p {font-size: 18px;}
                        }
                    }
                }
            }
            & .pd {
                > ul {gap: 20px;}
            }
            & .pd2 {
                > ul {gap: 60px 20px;}
            }
            & .ct {
                > ul {gap: 20px;
                    > li {width: calc(100% / 2 - 10px);}
                }
            }
            & .con {padding: 30px;
                & .txt {margin: 40px 0 20px;
                    & p {font-size: 16px; line-height: 1.6;}
                }
                & .list {
                    > ul {
                        > li {
                            & p {font-size: 16px;}
                            & span {
                                & strong {font-size: 14px;}
                                & em {font-size: 14px;}
                            }
                        }
                    }
                }
            }
            & .cate {margin: 0 0 30px;
                &.p100 {padding: 60px 0 0;}
                & p {font-size: 20px;}
                & span {font-size: 15px; margin: 15px 0 0;}
            }
        }
    }
    @media (width <= 460px) {
        & .connect-box {
            & .pd {
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
            }
        }
    }
}

/* R&D 센터 - R&D센터 (rnd) */
.rnd {
    & .rnd-list {margin: 0 0 180px;
        > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px;
            > li {
                & .con {text-align: center; background: linear-gradient(0deg,rgba(70, 86, 187, 1) 0%, rgba(37, 49, 121, 1) 100%); padding: 50px 0; border-radius: 10px 10px 0 0; overflow: hidden;
                    & p {font-size: 24px; font-weight: 700; color: #fff;}
                    & img {display: block; margin: 12px auto;}
                    & span {display: block; font-size: 18px; color: #fff;}
                }
                & .img {position: relative; width: 100%; height: 220px; border-radius: 0 0 10px 10px; overflow: hidden;
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                }
                &:last-child {
                    & .img {border: 1px solid #D5DBDE;}
                }
            }
        }
    }
    & .rnd-intro {
        & .txt {text-align: center;
            & p {font-size: 40px; font-weight: 700; margin: 0 0 20px;}
            & span {font-size: 24px; font-weight: 700;}
        }
        & .img {margin: 60px 0 0;
            & img {width: 100%;}
        }
    }
    @media (width <= 1024px) {
        & .rnd-list {margin: 0 0 80px;
            > ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;}
        }
        & .rnd-intro {
            & .txt {
                & p {font-size: 30px;}
                & span {font-size: 16px;}
            }
        }
    }
    @media (width <= 640px) {
        & .rnd-list {
            > ul {
                > li {
                    & .con {padding: 30px 20px;
                        & p {font-size: 20px;}
                        & span {font-size: 15px;
                            & br {display: none;}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 460px) {
        & .rnd-list {
            > ul {grid-template-columns: repeat(1, minmax(0, 1fr));
                > li {
                    & .con {padding: 30px 20px;
                        & p {font-size: 20px;}
                        & img {width: 40px; margin: 20px auto;}
                        & span {font-size: 15px;
                            & br {display: none;}
                        }
                    }
                }
            }
        }
        & .rnd-intro {
            & .txt {
                & p {font-size: 20px;}
                & span {font-size: 14px;}
            }
            & .img {margin: 30px 0 0;}
        }
    }
}

/* R&D 센터 - 시험설비현황 (test) */
.test {
    & .test-con {margin: 0 0 100px;
        &:last-child {margin: 0;}
        & .tit {margin: 0 0 30px;
            & p {position: relative; font-size: 20px; font-weight: 600; padding: 0 0 0 18px;
                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 2px; background-image: linear-gradient(to bottom, #ED1C24 50%, var(--basic-blue) 50%);}
            }
        }
        & .info { 
            & table {width: 100%; table-layout: fixed; border-radius: 5px; overflow: hidden;
                & tr {
                    & td {text-align: center; padding: 20px;
                        &.a {width: 100px;}
                        &.b {width: calc((100% - 200px) / 3);}
                        & p {font-family: 'Pretendard'; font-size: 16px; font-weight: 500; line-height: 1;}
                        :lang(cn) & p{font-family: 'Noto Sans SC', sans-serif;}
                    }
                }
                & thead {
                    & tr {background: var(--basic-blue);
                        & td {
                            & p {color: #fff;}
                        }
                    }
                }
                & tbody {
                    & tr {border-bottom: 1px solid #E2E8F0;
                        & td {border-right: 1px solid #E2E8F0;
                            &:last-child {border-right: 0;}
                            &:nth-child(2n - 1) {background: #F9F9F9;}
                        }
                    }
                }
            }
        }
        & .desc {display: none; margin: 10px 0 0;
            & p {font-size: 14px; color: #555;}
        }
        & .img {margin: 60px 0 0;
            > ul {display: flex; justify-content: center;
                > li {position: relative; width: calc(100% / 2 - 20px); aspect-ratio: 710 / 450; border-radius: 5px; overflow: hidden;
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                }
            }
        }
    }
    @media (width <= 860px) {
        & .test-con {
            & .info {overflow-x: scroll;
                & table {width: 860px;}
            }
            & .desc {display: block;}
            & .img {
                > ul {
                    > li {width: 100%;}
                }
            }
        }
    }
    @media (width <= 640px) {
        & .test-con {margin: 0 0 60px;
            & .tit {
                & p {font-size: 18px;}
            }
            & .img {margin: 40px 0 0;}
        }
    }
}

/* R&D 센터 - 인증서 보유 현황 (cert) */
.cert {
    & .cert-con {
        > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 100px 40px;
            > li {
                & .img {position: relative; aspect-ratio: 335 / 480; border: 1px solid #C3C3C3; overflow: hidden;
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                }
                & .subject {margin: 20px 0 0; text-align: center;
                    & p {font-size: 18px; font-weight: 600;}
                }
            }
        }
    }
    @media (width <= 860px) {
        & .cert-con {
            > ul {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 100px 40px;}
        }
    }
    @media (width <= 640px) {
        & .cert-con {
            > ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 20px;
                > li {
                    & .subject {margin: 15px 0 0;
                        & p {font-size: 15px;}
                    }
                }
            }
        }
    }
}

/* R&D 센터 - 보유설비현황 (facilities) */
.facility {
    & .facility-con {margin: 0 0 100px;
        &:last-child {margin: 0;}
        & .tit {margin: 0 0 30px;
            & p {position: relative; font-size: 20px; font-weight: 600; padding: 0 0 0 18px;
                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 2px; background-image: linear-gradient(to bottom, #ED1C24 50%, var(--basic-blue) 50%);}
            }
        }
        & .info { 
            & table {width: 100%; table-layout: fixed; border-radius: 5px; overflow: hidden;
                & tr {
                    & td {text-align: center; padding: 20px;
                        &.a {width: 100px;}
                        &.b {width: calc((100% - 200px) / 3);}
                        & p {font-family: 'Pretendard'; font-size: 18px; line-height: 1;}
                        :lang(cn) & p{font-family: 'Noto Sans SC', sans-serif;}
                    }
                }
                & thead {
                    & tr {background: var(--basic-blue);
                        & td {
                            & p {color: #fff;}
                        }
                    }
                }
                & tbody {
                    & tr {border-bottom: 1px solid #E2E8F0;
                        & td {border-right: 1px solid #E2E8F0;
                            &:last-child {border-right: 0;}
                            &:nth-child(2n - 1) {background: #F9F9F9;}
                        }
                    }
                }
            }
        }
        & .desc {display: none; margin: 10px 0 0;
            & p {font-size: 14px; color: #555;}
        }
    }
    @media (width <= 860px) {
        & .facility-con {
            & .info {overflow-x: scroll;
                & table {width: 860px;
                    & tr {
                        & td {
                            & p {font-size: 18px;}
                        }
                    }
                }
            }
            & .desc {display: block;}
        }
    }
    @media (width <= 640px) {
        & .facility-con {margin: 0 0 60px;
            & .tit {
                & p {font-size: 18px;}
            }
            & .info {
                & table {
                    & tr {
                        & td {
                            & p {font-size: 16px;}
                        }
                    }
                }
            }
        }
    }
}

/* 생산공정 - 제조공정도 (process) */
.process {
    & .process-con {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;
        & .con {width: 100%;
            &.wd2 {width: calc(100% / 2 - 50px);}
            & .tit {margin: 0 0 30px;
                & p {position: relative; font-size: 20px; font-weight: 600; padding: 0 0 0 18px;
                    &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 2px; background-image: linear-gradient(to bottom, #ED1C24 50%, var(--basic-blue) 50%);}
                }
            }
            & .step {
                &.type01 {margin: 0 0 150px;
                    > ul {
                        > li {display: flex; justify-content: space-between; align-items: center; margin: 0 0 30px;
                            &:first-child {
                                & .txt {
                                    & .num {
                                        &::before {content: none;}
                                    }
                                }
                            }
                            &:last-child {margin: 0;
                                & .txt {
                                    &::after {content: none;}
                                    & .num {
                                        &::after {content: none;}
                                    }
                                }
                            }
                            & .img {position: relative; width: 570px; aspect-ratio: 570 / 350; border-radius: 5px; overflow: hidden;
                                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                            }
                            & .txt {position: relative; display: flex; align-items: center; gap: 40px; width: calc(100% - 670px);
                                &::after {content: ''; position: absolute; top: calc(100% + 15px); left: 45px; width: 50px; height: 50px; background: url("/assets/site/img/contents/process-arrow.svg") no-repeat center; background-size: cover;}
                                & .num {position: relative; padding: 50px 0;
                                    &::before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 50px; border-right: 4px dotted #ED1C24;}
                                    &::after {content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 50px; border-right: 4px dotted #ED1C24;}
                                    & .item {display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; width: 140px; height: 140px; border-radius: 50%; background: #f9f9f9; color: var(--basic-blue); gap: 5px; margin: 30px 0;
                                        & span {line-height: 1; font-weight: 700;}
                                        & p {width: 100%; font-size: 20px; line-height: 1; font-weight: 300; text-align: center;}
                                    }
                                }
                                & .desc {
                                    & p {font-size: 24px; font-weight: 600;}
                                }
                            }
                        }
                    }
                }
                &.type02 {
                    > ul {
                        > li {position: relative; display: flex; align-items: center; gap: 40px; border: 1px solid #DFE7FF; border-radius: 5px; padding: 25px; margin: 0 0 20px; box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
                            &::after {content: ''; position: absolute; top: calc(100% - 20px); left: 50%; transform: translateX(-50%); width: 60px; height: 60px; background: url("/assets/site/img/contents/process-arrow.svg") no-repeat center; background-size: cover; z-index: 2;}
                            &:last-child {margin: 0;
                                &::after {content: none;}
                            }
                            & .num {display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; width: 85px; height: 85px; border-radius: 5px; background: #f9f9f9; color: var(--basic-blue); gap: 5px;
                                & span {line-height: 1; font-weight: 700;}
                                & p {width: 100%; font-size: 20px; line-height: 1; font-weight: 300; text-align: center;}
                            }
                            & .desc {
                                & p {font-size: 24px; font-weight: 600;}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1280px) {
        & .process-con {
            & .con {
                &.wd2 {width: calc(100% / 2 - 25px);}
                & .step {
                    &.type01 {
                        > ul {
                            > li {
                                & .img {width: 450px;}
                                & .txt {width: calc(100% - 490px);
                                    &::after {top: calc(100% + 20px); left: 37.5px; width: 45px; height: 45px;}
                                    & .num {padding: 30px 0;
                                        &::after {height: 30px;}
                                        &::before {height: 30px;}
                                        & .item {width: 120px; height: 120px; margin: 20px 0;}
                                    }
                                    & .desc {
                                        & p {font-size: 20px;}
                                    }
                                }
                            }
                        }
                    }
                    &.type02 {
                        > ul {
                            > li {gap: 30px;
                                & .desc {
                                    & p {font-size: 20px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px) {
        & .process-con {gap: 60px;
            & .con {
                &.wd2 {width: 100%;}
                & .step {
                    &.type01 {margin: 0;
                        > ul {
                            > li {margin: 0 0 60px;
                                & .img {width: 300px;}
                                & .txt {width: calc(100% - 320px); gap: 20px;
                                    &::after {top: calc(100% + 12.5px); left: 25px; width: 40px; height: 40px;}
                                    & .num {padding: 23px 0;
                                        &::before {height: 23px;}
                                        &::after {height: 23px;}
                                        & .item {width: 90px; height: 90px;
                                            & span {font-size: 14px;}
                                            & p {font-size: 18px;}
                                        }
                                    }
                                    & .desc {
                                        & p {font-size: 18px;}
                                    }
                                }
                            }
                        }
                    }
                    &.type02 {
                        > ul {
                            > li {gap: 25px;
                                & .num {width: 75px; height: 75px;
                                    & span {font-size: 14px;}
                                    & p {font-size: 18px;}
                                }
                                & .desc {
                                    & p {font-size: 18px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px) {
        & .process-con {
            & .con {
                & .tit {
                    & p {font-size: 18px;}
                }
                & .step {
                    &.type01 {
                        > ul {
                            > li {position: relative; flex-wrap: wrap; gap: 20px; padding: 20px; border: 1px solid #DFE7FF; margin: 0 0 24px; box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px; border-radius: 5px;
                                &:last-child {
                                    &::after {content: none;}
                                }
                                &::after {content: ''; position: absolute; top: calc(100% - 12px); left: 50%; transform: translateX(-50%); width: 50px; height: 50px; background: url("/assets/site/img/contents/process-arrow.svg") no-repeat center; background-size: cover; z-index: 2;}
                                & .img {width: 100%; order: 2; aspect-ratio: 360 / 220;}
                                & .txt {width: 100%; order: 1;
                                    &::after {content: none;}
                                    & .num {padding: 0;
                                        &::before {content: none;}
                                        &::after {content: none;}
                                        & .item {width: 60px; height: 60px; border-radius: 5px; margin: 0;
                                            & span {font-size: 12px;}
                                        }
                                    }
                                    & .desc {
                                        & p {font-size: 14px;}
                                    }
                                }
                            }
                        }
                    }
                    &.type02 {
                        > ul {
                            > li {padding: 20px; gap: 20px; margin: 0 0 24px;
                                &::after {top: calc(100% - 10px); width: 50px; height: 50px;}
                                & .num {width: 60px; height: 60px;
                                    & span {font-size: 12px;}
                                }
                                & .desc {
                                    & p {font-size: 14px;}
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* 고객지원 - 문의사항 (inquiry) */
.inquiry {
    & .inquiry-box {
        & .comment {background: #f5f5f5; padding: 30px; margin: 0 0 40px;
            & p {line-height: 1.6; color: #222;}
        }
        & .desc {display: flex; justify-content: flex-end;
            & p {position: relative; font-size: 15px; line-height: 1; padding: 0 0 0 10px;
                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 5px; height: 5px; background: #cc3232; border-radius: 50%;}
            }
        }
        & .tb {border-top: 2px solid #888; margin: 10px 0 50px;
            > ul {
                > li {display: flex; border-bottom: 1px solid #dbdbdb; padding: 15px 0;
                    & .cate {display: flex; align-items: center; width: 200px; padding: 0 30px;
                        & label {position: relative; height: 50px; line-height: 50px; font-weight: 600;
                            &.necessary {padding: 0 0 0 12px;
                                &::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 5px; height: 5px; background: #cc3232; border-radius: 50%;}
                            }
                        }
                    }
                    & .con {display: flex; align-items: center; flex-wrap: wrap; gap: 15px; width: calc(100% - 200px);
                        & input[type="text"] {width: 100%; max-width: 500px; height: 50px; background: #f5f5f5; border: 0;}
                        & select {width: 100%; max-width: 500px; height: 50px; background-color: #f5f5f5; border: 0;}
                        & label {height: unset;}
                        & .text {width: 100%; padding: 20px; background: #f5f5f5;
                            & p {font-weight: 600; margin: 0 0 10px;}
                            & span {font-size: 14px;}
                        }
                    }
                }
            }
        }
        & .bt {display: flex; justify-content: center; gap: 15px;
            & button {width: 120px; height: 50px; background: #222; color: #fff; text-align: center; transition: all 0.2s;
                &:hover {background: var(--basic-blue);}
            }
        }
    }
    @media (width <= 860px) {
        & .inquiry-box {
            & .comment {padding: 20px;
                & p {font-size: 15px;}
            }
            & .desc {
                & p {font-size: 14px;}
            }
            & .tb {
                > ul {
                    > li {flex-wrap: wrap; gap: 10px; padding: 20px 10px;
                        & .cate {width: 100%; padding: 0;
                            & label {height: unset; line-height: 1;}
                        }
                        & .con {width: 100%; gap: 5px 20px;
                            & input[type="text"] {max-width: 100%; height: 45px;}
                            & select {max-width: 100%; height: 45px;}
                        }
                    }
                }
            }
            & .bt {
                & button {height: 45px;}
            }
        }
    }
    @media (width <= 460px) {
        & .inquiry-box {
            & .comment {margin: 0 0 30px;}
            & .tb {margin: 10px 0 30px;
                > ul {
                    > li {
                        & .cate {
                            & label {font-size: 15px;}
                        }
                        & .con {
                            & input[type="text"] {font-size: 15px;}
                            & select {font-size: 15px;}
                            & .text {
                                & p {font-size: 16px;}
                                & span {font-size: 13px;}
                            }
                        }
                    }
                }
            }
            & .bt {gap: 10px;
                & button {width: calc(100% / 2 - 5px);}
            }
        }
    }
}

/* 고객지원 - 홍보영상 (video) */
.promotion {
    & .promotion-con {
        & iframe {width: 100%; height: 100%; aspect-ratio: 16 / 9;}
    }
}