#content {
    overflow: visible !important;
}

/* 팝업 */
/* 팝업 래퍼 & Dimm 처리 */
.main-popup-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    display: none;
    align-items: center;
    justify-content: center;
}

.popup-dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.popup-content {
    padding: 0 var(--space-40);
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 134rem;
}

/* Swiper 슬라이드 너비 제어 (간격 20px 기준) */
.popup-swiper .swiper-slide {
    box-sizing: border-box;
}

/* PC에서 슬라이드 3개 미만일 때 마지막 슬라이드 margin-right 제거 (Swiper inline style 덮어쓰기) */
.popup-swiper.popup-swiper-centered .swiper-slide:last-child {
    margin-right: 0 !important;
}

/* 1비율 슬라이드: (전체 100% - 여백 40px) / 3 */
.slide-basic {
    width: calc((100% - 48px) / 3) !important;
}

/* 2비율 슬라이드: 1비율 슬라이드 2개 넓이 + 사이 간격 20px */
.slide-wide {
    width: calc((((100% - 48px) / 3) * 2) + 24px) !important;
}

/* 임시 디자인 */
.popup-item {
    height: 48rem;
    display: flex;
    flex-direction: column;
    background:  #fff;
}

.popup-swiper .swiper-slide > a.popup-item {
    overflow: hidden;
}
.popup-swiper .swiper-slide > a.popup-item > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.popup-item .popup-img-area {
    flex: 1;  
    overflow: hidden;
}

.popup-item .popup-img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-btn-group {
    display: flex;
    gap: .8rem;
    padding: 0 2.4rem 2.4rem;
    flex-shrink: 0;
}

.popup-btn-group a {
    display: block;
    flex: 1;
    text-align: center;
    height: 4.8rem;
    line-height: 4.8rem;
    border-radius: .8rem;
    color: #fff;
    font-size: var(--font-18);
    font-weight: 600;
}

.popup-btn-group a.btn-download {
    background: #0065bd;
}

.popup-btn-group a.btn-link {
	background: #00a9e0;

}

.popup-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
    color: #fff;
}

.popup-controls .left .swiper-pagination {
    position: static !important;
}

.popup-controls .left .swiper-pagination-bullet {
    background: #FFFFFF;
    opacity: .6;
}

.popup-controls .left .swiper-pagination-bullet-active {
    width: 2.6rem;
    background: #0065BD;
    border-radius: 50px;
    opacity: 1;
}

.swiper-button-next svg,
.swiper-button-prev svg {
    display: none !important;
}

.swiper-button-next {
    width: 32px !important;
    height: 32px !important;
    background: url(/static/kor/images/icon/slide-next.png);
}

.swiper-button-prev {
    width: 32px !important;
    height: 32px !important;
    background: url(/static/kor/images/icon/slide-next.png);
    transform: rotate(180deg);
}

.popup-controls .right {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.popup-controls .right .check-today {
    display: flex;
    align-items: center;
    gap: 8px;
}

.popup-controls .right .check-today .text {
    font-size: 1.6rem;
    color: #fff;
    opacity: .8;
}

.popup-controls .right .check-today::after {
    margin-left: 8px;
    content: "";
    display: block;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .4);
}

#chkTodayHide {
    margin-right: .8rem;
}

.check-today .icon-chk {
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 2px;
}

#chkTodayHide:checked+.icon-chk {
    background: url(/static/kor/images/icon/checkBox-check.png) no-repeat center;
}

#btnClosePopup {
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
}

/* 팝업 */

/* ============= */
/* 상단 메인섹션 START */
/* ============= */
/* .m-mob-br 삭제 (common-sub.css로 이관) */

main {
    position: relative;
    margin: 0 auto;
    max-width: 192rem;
    width: 100%;
    height: 100dvh;
    clip-path: inset(1rem round 16px);
    transition: clip-path 0.5s cubic-bezier(0.0, 0.0, 0.2, 1);
}

main.scroll {
    clip-path: inset(0);
}

main .swiper.mySwiper {
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    transition: border-radius 0.5s cubic-bezier(0.0, 0.0, 0.2, 1);
}

main.scroll .swiper.mySwiper {
    border-radius: 0;
}

main .swiper.mySwiper .swiper-slide {
    width: 100% !important;
}

main .main-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    z-index: 1;
}

main .main-bg::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(/static/kor/images/main/Vignetting.png) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

main .main-bg:has(video)::before {
    display: none;
}

main .main-bg::after {
    content: "";
    display: block;
    width: 100%;
    height: 24rem;
    background: url(/static/kor/images/main/Dim.png) no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

main .main-bg img,
main .main-bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

main .common-wrap {
    position: relative;
    z-index: 3;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
}

main .swiper-slide .common-wrap>p {
    padding-bottom: 18rem;
    font-size: var(--font-72);
    font-family: var(--paybooc);
    font-weight: var(--weight-800);
    color: var(--color-white);
    word-break: keep-all;
    text-shadow: 0px 0px 120px #000000;
}

main .scroll-down {
    position: absolute;
    bottom: 2.4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

main .scroll-down .mouse {
    margin: 0 auto 1.6rem;
    position: relative;
    width: 4rem;
    height: 5.6rem;
    border-radius: 40px;
    border: 1px solid white;
    z-index: 1;
}

main .scroll-down .mouse::after {
    display: block;
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: .8rem;
    height: .8rem;
    background: var(--color-white);
    border-radius: 100%;
    -webkit-animation-name: scrollWheel;
    animation-name: scrollWheel;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    will-change: transform;
}

main .scroll-down span {
    font-size: var(--font-16);
    font-weight: var(--weight-800);
    font-family: var(--paybooc);
    color: var(--c-white);
}

@keyframes scrollWheel {
    0% {
        transform: translate3d(-50%, 0, 0);
        opacity: 1;
    }

    100% {
        transform: translate3d(-50%, 20px, 0);
        opacity: 0;
    }
}

/* ============= */
/* 상단 메인섹션 END */
/* ============= */

/* ====================== */
/* Business Areas 섹션 START */
/* ====================== */
.business-areas {
    margin: var(--mg-200) auto 0;
    width: 100%;
    max-width: 192rem;
}

.business-list {
    display: flex;
    gap: 1px;
    width: 100%;
    height: 56rem;
    overflow: hidden;
}

.business-list li {
    position: relative;
    flex: 1;
    height: 100%;
    cursor: pointer;
    transition: flex 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
}

.business-list li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.business-list li .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 100% !important;
    background-position-x: 50% !important;
    filter: grayscale(1);
    transition: transform 0.5s ease, filter 0.5s ease;
    z-index: 0;
    will-change: transform, filter;
}

.business-list li:nth-child(1) .bg-img {
    background: url(/static/kor/images/main/Business-img1.jpg);
}

.business-list li:nth-child(2) .bg-img {
    background: url(/static/kor/images/main/Business-img2.jpg);
}

.business-list li:nth-child(3) .bg-img {
    background: url(/static/kor/images/main/Business-img3.jpg);
}

.business-list li:nth-child(4) .bg-img {
    background: url(/static/kor/images/main/Business-img4.jpg);
}

.business-list li:nth-child(5) .bg-img {
    background: url(/static/kor/images/main/Business-img5.jpg);
}

.business-list li:nth-child(6) .bg-img {
    background: url(/static/kor/images/main/Business-img6.jpg);
}

.business-list li::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38.5%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 0;
}

.business-txt_box {
    padding: 2.4rem 4rem;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    transition: all 0.5s ease;
}
.business-list li.on .business-tit {
	justify-content: space-between;
}
.business-tit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.business-tit h3 {
    font-size: 3.2rem;
    font-weight: var(--weight-500);
    color: var(--c-white);
    white-space: nowrap;
}
.business-list li.on .business-tit dl {
	display: flex;
}
.business-tit dl {
    display: none;
    align-items: center;
    gap: 18px;
    font-size: var(--font-18);
    font-weight: var(--weight-800);
    color: var(--c-white);
    font-family: var(--paybooc);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.1s ease;
}

.business-txt {
    color: var(--c-white);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transition: all 0.5s ease;
}

.business-txt h4 {
    margin-bottom: 2.4rem;
    font-size: var(--font-20);
    font-weight: var(--weight-300);
    color: rgba(255, 255, 255, .8);
    text-align: left;
}

.business-txt p {
    font-size: var(--font-18);
    line-height: 1.5;
    text-align: left;
}

.business-list li.on {
    flex: 2.4;
}

.business-list li.on .bg-img {
    filter: grayscale(0);
}

.business-list li.on .business-txt_box {
    background: #0065BD;
}

.business-list li.on .business-tit h3 {
    font-size: 4rem;
    font-weight: var(--weight-700);
}

.business-list li.on .business-tit dl {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.4s ease 0.1s;
}

.business-list li.on .business-txt {
    max-height: 30rem;
    opacity: 1;
}

/* .business-list li:hover .bg-img {
    transform: scale(1.05);
} */
/* ====================== */
/* Business Areas 섹션 END */
/* ====================== */

/* ====================== */
/* Performance Highlight 섹션 START */
/* ====================== */
.performance-highlight {
    margin-top: var(--mg-200);
}

.performance-highlight .common-wrap {
    padding: unset;
}

.performance-highlight .result-card {
    padding: 0 var(--space-40);
    display: flex;
    gap: 40px;
}

.performance-highlight .result-card li {
    padding: 3.2rem 3.2rem 4.8rem;
    flex: 1;
    border: 1px solid #CBCCCA;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.performance-highlight .result-card li.spacer {
    display: none;
}

.performance-highlight .result-card li figure {
    margin-bottom: 3.2rem;
    border-radius: 4px;
    overflow: hidden;
}

.performance-highlight .result-card li figure img {
    width: 100%;
}

.performance-highlight .result-card li figcaption {
    text-align: center;
}

.performance-highlight .result-card li figcaption h3 {
    font-size: 3.2rem;
    font-weight: 700;
    word-break: keep-all;
    line-height: 1.3;
    margin-bottom: 1.6rem;
    transition: all 0.3s ease;
}

.performance-highlight .result-card li figcaption p {
    font-size: 2.0rem;
    font-weight: 300;
    word-break: keep-all;
    transition: all 0.3s ease;
    color: #46494D;
}

.performance-highlight .result-card li figcaption sub {
    display: block;
    margin-top: .4rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #17181A;
    transition: all 0.3s ease;
}

/* on 액션 */
.performance-highlight .result-card li.on {
    background: #0065BD;
    border: 1px solid white;
}

.performance-highlight .result-card li.on figcaption h3,
.performance-highlight .result-card li.on figcaption p,
.performance-highlight .result-card li.on figcaption sub {
    color: var(--color-white);
}

/* ====================== */
/* Performance Highlight 섹션 END */
/* ====================== */

/* ====================== */
/* Business Performance 섹션 START */
/* ====================== */
/* [오버라이드] 메인 전용 Business Performance 레이아웃 수치 정의 (나머지는 common-sub.css 상속) */
.business-performance {
    margin: 0 auto;
    background-image: url(/static/kor/images/main/businessPf-earth.svg);
    background-position: left top 12rem;
}

.business-performance .num-box {
    width: 61rem;
}

.business-performance .num-box dl {
    height: 16.8rem;
}

/* ====================== */
/* Business Performance 섹션 END */
/* ====================== */

/* ====================== */
/* brands 섹션 START */
/* ====================== */
.brands {
    margin: 0 auto;
    margin-top: var(--mg-200);
    width: 100%;
    max-width: 192rem;
}

.brands .brands-wrap {
    display: flex;
}

.brands .brands-wrap>li {
    flex: 1;
    width: 50%;
}

.brands ul .visual-col {
    background: url(/static/kor/images/main/brand-vivid-IMG.jpg) no-repeat center/cover;
    transition: all 0.3s ease;
}

.brands ul .text-col {
    background: #0065BD;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.brands ul .text-col .txt-wrap {
    width: 100%;
    max-width: 80rem;
    padding: 12rem 0;
    padding-left: 9.6rem;
    padding-right: 4rem;
}

.brands ul .text-col .txt-wrap .title-box-main {
    margin-bottom: 5.6rem;
    text-align: left;
}

.brands ul .title-box-main .section-main-title,
.brands ul .title-box-main .section-sub-title {
    color: var(--c-white);
}

.brands .brands-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.brands .brands-list li a {
    padding: 2rem 0 3.3rem;
    display: block;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 16px;
    transition: background 0.3s;
}

@media screen and (min-width: 1024px) {
    .brands .brands-list li a {
        height: 18rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        gap: 2.8rem;
    }

    .brands .brands-list .brand-logo {
        height: 6.5rem;
    }

    .brands .brands-list li:nth-child(8) .brand-logo img {
        scale: 1.5;
    }
}

.brands .brands-list li a:hover,
.brands .brands-list li.on a {
    background: var(--c-white);
    border: 1px solid var(--c-white);
}

.brands-wrap:has(.brands-list li:nth-child(1):hover) .visual-col,
.brands-wrap:has(.brands-list li:nth-child(1).on) .visual-col {
    background: url('/static/kor/images/main/brand-vivid-IMG.jpg') no-repeat center / cover;
}

.brands-wrap:has(.brands-list li:nth-child(2):hover) .visual-col,
.brands-wrap:has(.brands-list li:nth-child(2).on) .visual-col {
    background: url('/static/kor/images/main/brand-bechef-IMG.jpg') no-repeat center / cover;
}

.brands-wrap:has(.brands-list li:nth-child(3):hover) .visual-col,
.brands-wrap:has(.brands-list li:nth-child(3).on) .visual-col {
    background: url('/static/kor/images/main/brand-crispyfresh-IMG.jpg') no-repeat center / cover;
}

.brands-wrap:has(.brands-list li:nth-child(4):hover) .visual-col,
.brands-wrap:has(.brands-list li:nth-child(4).on) .visual-col {
    background: url('/static/kor/images/main/brand-porto7-IMG.jpg') no-repeat center / cover;
}

.brands-wrap:has(.brands-list li:nth-child(5):hover) .visual-col,
.brands-wrap:has(.brands-list li:nth-child(5).on) .visual-col {
    background: url('/static/kor/images/main/brand-sandpresso-IMG.jpg') no-repeat center / cover;
}

.brands-wrap:has(.brands-list li:nth-child(6):hover) .visual-col,
.brands-wrap:has(.brands-list li:nth-child(6).on) .visual-col {
    background: url('/static/kor/images/main/ekcm-IMG.jpg') no-repeat center / cover;
}

.brands-wrap:has(.brands-list li:nth-child(7):hover) .visual-col,
.brands-wrap:has(.brands-list li:nth-child(7).on) .visual-col {
    background: url('/static/kor/images/main/yugbaeg-IMG.jpg') no-repeat center / cover;
}

.brands-wrap:has(.brands-list li:nth-child(8):hover) .visual-col,
.brands-wrap:has(.brands-list li:nth-child(8).on) .visual-col {
    background: url('/static/kor/images/main/freshmeat-IMG.jpg') no-repeat center / cover;
}

.brands .brands-list li a:hover .brand-logo .default,
.brands .brands-list li.on a .brand-logo .default {
    opacity: 0;
}

.brands .brands-list li a:hover .brand-logo .hover,
.brands .brands-list li.on a .brand-logo .hover {
    opacity: 1;
}

.brands .brands-list li a:hover .brand-name h3,
.brands .brands-list li.on a .brand-name h3 {
    opacity: 0;
}

.brands .brands-list li a:hover .brand-name p,
.brands .brands-list li.on a .brand-name p {
    opacity: 1;
}

.brands .brands-list .brand-logo {
    display: grid;
    place-items: center;
    grid-auto-columns: 7.8rem;
    justify-content: center;
}

.brands .brands-list .brand-logo img {
    grid-area: 1 / 1;
    transition: opacity 0.3s ease;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    scale: 1.8;
}

.brands .brands-list .brand-logo img.default {
    opacity: 1;
    z-index: 1;
}

.brands .brands-list .brand-logo img.hover {
    opacity: 0;
    z-index: 2;
}

.brands .brands-list .brand-name {
    display: grid;
    place-items: center;
    text-align: center;
}

.brands .brands-list .brand-name h3,
.brands .brands-list .brand-name p {
    grid-area: 1 / 1;
    transition: opacity 0.4s ease;
    margin: 0;
}

.brands .brands-list .brand-name h3 {
    opacity: 1;
    font-size: var(--font-18);
    font-weight: var(--weight-500);
    color: var(--c-white);
    word-break: keep-all;
}

.brands .brands-list .brand-name p {
    padding-right: 2rem;
    opacity: 0;
    font-size: var(--font-16);
    font-weight: var(--weight-800);
    background: url(/static/kor/images/icon/look-icon-black.png) right center no-repeat;
}

/* ====================== */
/* brands 섹션 END */
/* ====================== */

/* ====================== */
/* CS Center 섹션 START */
/* ====================== */
.cs-center {
    padding: 16rem 0;
}

.cs-center .title-box-main {
    margin-bottom: 7.4rem;
}

.cs-center .title-box-main h2 {
    text-align: left;
}

.cs-center .section-sub-title {
    text-align: left;
}

.cs-center dl {
    display: flex;
    justify-content: space-between;
}

.cs-center dl dt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cs-center dl dt .cs-list-mob {
    display: none;
}

.cs-center dl dt>ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    width: 22rem;
    height: 5.6rem;
    font-size: var(--font-18);
    font-weight: 500;
    color: #17181A;
    gap: 1.2rem;
    background: #F0F0F0;
    border-radius: 999px;
}

.cs-center dl dd {
    width: 100rem;
    padding-left: 4rem;
}

/* .cs-list 공통 컴포넌트는 common-sub.css로 이관됨 */

/* a 태그를 플렉스 컨테이너로 만듦 */
.cs-list li a {
    display: flex;
    flex-direction: column;
    /* 세로 정렬 */
    justify-content: center;
    /* [중요] 내부 컨텐츠를 수직 중앙에 배치 */
    height: 100%;
    padding: 0 2.4rem 0 2.8rem;
    color: #CBCCCA;
    border-radius: 8px;
    border: 1px solid rgba(0, 101, 189, .3);
    transition: all 0.3s;
    background: rgba(0, 101, 189, 0.03);
}

/* 우측 편지 아이콘 (가상요소) - 절대 위치라 Flex 흐름 영향 안 받음 */
.cs-list li a::after {
    content: '';
    position: absolute;
    right: 3rem;
    top: 50%;
    /* 정확히 50% 지점 */
    transform: translateY(-50%);
    /* 내 높이의 절반만큼 올려서 중앙 맞춤 */
    width: 2.4rem;
    height: 2.4rem;
    background: url(/static/kor/images/icon/mail_blue.png) no-repeat center/cover;
    transition: opacity 0.3s;
}

.cs-list li:nth-child(4) a::after {
    background: url(/static/kor/images/icon/vMore_blue.png) no-repeat center/cover;
}

/* 타이틀 텍스트 */
.cs-name {
    display: flex;
    align-items: baseline;
    color: #0065BD;
    transition: color 0.3s;
    text-align: left;
}

.cs-name.long {
    flex-direction: column;
}

.cs-name strong {
    font-size: var(--font-20);
    font-weight: 500;
    transition: all 0.3s;
    color: #0065BD;
}

.cs-name sub {
    font-size: var(--font-16);
    font-weight: var(--weight-500);
}

/* '문의하기' 텍스트 (기본 숨김) */
.cs-list li span {
    font-size: var(--font-16);
    font-weight: var(--weight-800);
    font-family: var(--paybooc);

    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    transition: all 0.3s;
}

.cs-list li span::after {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background: url(/static/kor/images/icon/arrow-deg-r-icon.png) no-repeat center/cover;
}

/* === [Active State: .on 클래스] === */
.cs-list li a:hover {
    background: #0065BD;
    color: #fff;
    border-color: #0065BD;
}

.cs-list li a:hover .cs-name {
    color: #fff;
}

.cs-list li a:hover .cs-name strong {
    font-size: var(--font-24);
    font-weight: var(--weight-700);
    color: #fff;
}

.cs-list li a:hover::after {
    opacity: 0;
}

/* 활성 시 '문의하기' 보이기 & 공간 확보 */
.cs-list li a:hover span {
    max-height: 3rem;
    /* 텍스트가 들어갈 충분한 높이 확보 */
    margin-top: .4rem;
    /* 제목과의 간격 */
    opacity: 1;
}

@media screen and (max-width: 1023px) {
    .slide-basic {
        width: calc((100% - 24px) / 2) !important;
    }

    .slide-wide {
        width: 100% !important;
    }

    #header {
        top: 0;
    }

    /* 상단 메인섹션 START */
    main {
        width: 100%;
        height: 100dvh;
        margin: unset;
        padding: unset;
        clip-path: inset(0);
        /* 모바일 터치 가로 드래그 시 레이아웃 이탈 방지 */
        touch-action: pan-y;
        overflow: hidden;
    }

    main .swiper.mySwiper {
        border-radius: unset;
        /* Swiper 터치 시 포함 요소가 가로로 밀리는 현상 방지 */
        touch-action: pan-y;
    }

    main .swiper-slide .common-wrap>p {
        padding-bottom: 12rem;
    }

    main .scroll-down .mouse {
        width: 3.2rem;
        height: 4.8rem;
        margin: 0 auto .8rem;
        border-radius: 8px;
    }

    main .scroll-down span {
        font-size: 1.2rem;
    }

    /* 상단 메인섹션 END */

    /* Business Areas START */
    .business-list {
        flex-wrap: wrap;
        height: unset;
        gap: 1px;
    }

    .business-list li {
        flex: unset;
        width: calc(50% - .5px);
        aspect-ratio: 1 / .9;
    }

    .business-list li.on {
        flex: unset;
    }

    .business-txt_box {
        padding: 1.8rem 4rem;
    }

    .business-txt h4 {
        margin-bottom: 1rem;
    }

    .business-tit h3 {
        font-size: 2rem;
    }

    .business-list li.on .business-tit h3 {
        font-size: 2.4rem;
    }

    /* Business Areas END */

    /* Performance Highlight START */
    .performance-highlight .scrollX {
        padding-bottom: 2.5rem;
        width: 100%;
        overflow-x: auto;
    }

    .performance-highlight .scrollX .spacer {
        flex-shrink: 0;
        width: 4rem;
        /* padding-right 대신 사용함 */
        height: 1px;
        /* 높이는 상관없음 */
        background: transparent;
    }

    .performance-highlight .scrollX::-webkit-scrollbar {
        height: 4px;
    }

    .performance-highlight .scrollX::-webkit-scrollbar-track {
        background-color: #e5e5e5;
        border-left: 4rem solid #fff;
        border-right: 4rem solid #fff;
        background-clip: content-box;
    }

    .performance-highlight .scrollX::-webkit-scrollbar-thumb {
        background-color: #2F3133;
        border-radius: 10px;
        border-left: 4rem solid transparent;
        border-right: 4rem solid transparent;
        background-clip: content-box;
    }

    .performance-highlight .result-card {
        display: flex;
        gap: unset;
    }

    .performance-highlight .result-card li {
        flex: 0 0 65%;
        margin-right: 1.6rem;
    }

    .performance-highlight .result-card li:nth-child(3) {
        margin-right: 0;
    }

    .performance-highlight .result-card li.spacer {
        display: block;
        flex: unset;
        flex-shrink: 0;
        width: var(--space-40);
        padding: unset;
        border: unset;
    }

    .performance-highlight .result-card li figcaption h3 {
        font-size: 2.4rem;
    }

    /* Performance Highlight END */

    /* Business Performance (common-sub.css 상속) */

    /* Brands START */
    .brands {
        padding-top: 15rem;
        background: #0065BD;
    }

    .brands>.title-box-main .section-main-title,
    .brands>.title-box-main .section-sub-title {
        color: var(--c-white);
    }

    .brands .brands-wrap {
        flex-direction: column;
    }

    .brands .brands-wrap>li {
        flex: unset;
        width: 100%;
    }

    .brands ul .visual-col {
        aspect-ratio: 1 / .5;
    }

    .brands ul .text-col .txt-wrap {
        max-width: 100%;
        padding: 4rem 4rem 15rem;
    }

    /* Brands END */

    /* CS Center START */
    .cs-center {
        padding: 15rem 0;
    }

    .cs-center dl {
        flex-direction: column;
    }

    .cs-center dl dt {
        display: flex;
        justify-content: space-between;
    }

    .cs-center dl dd {
        width: 100%;
        padding-left: unset;
    }

    /* cs-list 1023px styles 이관됨 */

    /* CS Center END */
}

@media screen and (max-width: 767px) {
    .popup-item {
        height: auto;
        min-height: 38.9rem;
    }

    .slide-basic,
    .slide-wide {
        /* 화면에 1개씩만 노출되므로 두 타입 모두 100%로 통일 */
        width: 100% !important;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none !important;
    }

    main .main-bg::after {
        height: 6.4rem;
        background: url(/static/kor/images/main/Dim.png) no-repeat center / cover;
    }

    /* Business Areas */
    .business-txt_box {
        padding: 0 1.6rem 1.6rem;
    }

    .business-list li .bg-img {
        filter: grayscale(0);
    }

    .business-tit h3 {
        font-size: 1.8rem;
    }

    .business-tit dl {
        opacity: 1;
        transform: translateY(0);
    }

    .business-tit dl dt {
        display: none;
    }

    /* Business Areas */

    /* Performance Highlight */
    .performance-highlight .result-card li figcaption h3 {
        font-size: 1.8rem;
    }

    .performance-highlight .result-card li figcaption p {
        font-size: 1.2rem;
    }

    .performance-highlight .result-card li figcaption sub {
        font-size: 1rem;
    }

    .performance-highlight .scrollX::-webkit-scrollbar-track,
    .performance-highlight .scrollX::-webkit-scrollbar-thumb {
        border-left: 1.6rem solid transparent;
        border-right: 1.6rem solid transparent;
    }

    /* Performance Highlight */

    /* Business Performance (common-sub.css 상속) */
    .business-performance .num-box {
        width: 75%;
    }

    .business-performance .num-box dl {
        height: auto;
    }

    /* Brands */
    .brands {
        padding-top: 8rem;
    }

    .brands ul .text-col .txt-wrap {
        padding: 1.6rem 1.6rem 8rem;
    }

    .brands .brands-list {
        gap: 4px;
    }

    .brands .brands-list li a {
        padding: 1.45rem 0;
        border-radius: 8px;
    }

    .brands .brands-list .brand-logo {
        margin-bottom: .6rem;
        padding: unset;
        grid-auto-columns: unset;
        grid-auto-rows: 4.8rem;
    }

    .brands .brands-list .brand-logo img {
        height: 100%;
        min-height: 0;
        object-fit: contain;
    }

    .brands .brands-list .brand-name h3,
    .brands .brands-list .brand-name p {
        font-size: 1.2rem;
    }

    /* Brands */

    /* CS Center */
    /* cs-list 767px styles 이관됨 */

    .cs-center {
        padding: 8rem 0;
    }

    .cs-center dl dt {
        flex-direction: column;
        align-items: center;
    }

    .cs-center .section-sub-title {
        text-align: center;
    }

    .cs-center .title-box-main {
        margin-bottom: 4rem;
    }

    .cs-center dl dt .cs-list-mob {
        margin-bottom: 2.4rem;
        display: flex;
        align-items: stretch;
        width: 100%;
        max-width: 35rem;
        background: #0065BD;
        border-radius: 8px;
    }


    /* 모바일 custom-select 컴포넌트 스타일은 common-sub.css에 통합됨 */
}

@media screen and (max-width: 580px) {
	.popup-btn-group {
		padding: 0 2rem 2rem;
	}
	.popup-btn-group a {
		height: 4.4rem;
    	line-height: 4.4rem;
	}
	
    .m-mob-br {
        display: block !important;
    }

    .popup-controls .right .check-today .text,
    #btnClosePopup {
        font-size: 1.2rem;
    }

    main .scroll-down {
        bottom: 1.6rem;
    }

    /* Performance Highlight */
    .performance-highlight .result-card li {
        padding: 1.6rem;
        padding-bottom: 2.4rem;
        flex: 0 0 28rem;
    }

    .performance-highlight .result-card li figure {
        margin-bottom: 1.6rem;
    }

    .performance-highlight .result-card li figcaption h3 {
        margin-bottom: 0.8rem;
    }

    /* Performance Highlight */

    .brands .brands-list li:last-child .brand-logo {
        grid-auto-rows: 3rem;
    }

    .brands .brands-list li:last-child .brand-name {
        transform: translateY(.8rem);
    }

    .brands .brands-list li:not(.on) a:hover {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .2);
    }

    .brands .brands-list li:not(.on) a:hover .brand-logo .default {
        opacity: 1;
    }

    .brands .brands-list li:not(.on) a:hover .brand-logo .hover {
        opacity: 0;
    }

    .brands .brands-list li:not(.on) a:hover .brand-name h3 {
        opacity: 1;
    }

    .brands .brands-list li:not(.on) a:hover .brand-name p {
        opacity: 0;
    }

    /* Business Performance (common-sub.css 상속) */

    /* CS Center */
    .cs-center dl dt .cs-list-mob {
        max-width: 100%;
    }

    .cs-center dl dt>ul {
        width: 100%;
    }

    .cs-center dl dt>ul li a {
        font-size: 1.4rem;
        width: 100%;
    }

    /* CS Center */
}