@charset "utf-8";

/* ==========================================
기본 스타일 & 모바일 (Mobile) - 기준 해상도: 360px
========================================== */

body:has(main.home) header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 0;
    opacity: 0;
    transition: opacity 0.6s ease, z-index 0.3s ease-in-out;
}

body:has(main.home) header.transparent {
    background-color: transparent;
}

/* home-sec1을 벗어나면 헤더 하단 보더 노출 (home.js에서 .is-past-hero 토글) */
body:has(main.home) header.is-past-hero {
    border-bottom: 1px solid #E1E7EE;
}

/* PC GNB 서브메뉴 열림 시 z-index 즉시 적용 (common.css header.gnb-open) */
body:has(main.home) header.gnb-open {
    transition: opacity 0.6s ease;
}

main.home {
    position: relative;
    padding-bottom: 0;
}

main.home>section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--header-height) 0 5rem;
}

/* 히어로 인트로: 좌상단 모서리를 기준으로 사각형이 커지며 열리는 clip-path 리빌 */
main.home>.home-sec1 {
    height: 100vh;
    overflow: hidden;
    clip-path: inset(0 100% 100% 0);
    transition: clip-path 1.18s cubic-bezier(0.83, 0, 0.17, 1);
    will-change: clip-path;
}

main.home>.home-sec1.is-intro-revealed {
    clip-path: inset(0 0 0 0);
}

main.home>section .inner-cont {
    padding: 4rem 2.4rem;
}

main.home>section .home-sec-title {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -0.056rem;
    text-align: center;
    line-height: 1.2;
}

main.home>section .home-sec-info {
    margin-top: 1rem;
    font-size: 1.6rem;
    font-weight: 400;
    text-align: center;
}

/* 모바일 전용: PC 구간은 아래 min-width 블록에서 각각 덮어쓴다 */
@media (max-width: 1024px) {
    main.home>section .home-sec-info {
        line-height: 1.4;
    }
}

/* home-visual
   롤링: 퇴장 슬라이드(is-leaving)는 불투명하게 아래에 깔아 두고 신규 슬라이드(is-active)만 위에서 페이드 인
   → 두 슬라이드가 동시에 반투명해지며 섹션 뒤 흰 배경이 비치는 현상 방지 */
.home-visual-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}

.home-visual-item.is-leaving {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.home-visual-item.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    transition: opacity 1s ease;
}

.home-visual-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 모바일: mo 영상 / 1025px 이상(태블릿·PC): pc 영상 */
.home-visual-video.pc {
    display: none;
}

/* 2번 슬라이드: 블랙 34% + 미세 도트 오버레이(샘플 hero-video-stack::before 동일 — 저화질·압축 아티팩트 마스킹)
   영상(auto) 위·카피(z-index 2) 아래에 두고, 슬라이드 자체 페이드와 함께 노출·숨김 */
.home-visual-item:nth-of-type(2)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.34);
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.22) 0.5px, transparent 0.62px);
    background-size: 3px 3px;
}

.home-visual-text {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.home-visual-text div {
    width: 100%;
}

.home-visual-text .txt1 {
    padding: 0 3rem;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -2%;
}

/* 히어로 카피: 샘플과 동일한 노출·히든
   - 등장(is-active): 제목 줄 단위 아래→위 마스크 리빌, 설명·버튼은 페이드 + 상승
   - 퇴장(is-leaving): 제목은 위로 빠지며 사라지고, 설명·버튼은 페이드 + 하강
   - 롤링 시에는 퇴장이 끝난 뒤(--copy-in-base) 신규 카피 등장 시작
   - 기본(대기) 상태는 transition 없이 즉시 아래 위치로 복귀 */
.home-sec1 {
    --copy-in-base: 0s;
    --copy-ease-in: cubic-bezier(0.16, 1, 0.3, 1);
    --copy-ease-out: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    /* 좌우 스와이프는 스크립트가 처리, 세로 스크롤은 브라우저에 맡김 */
    touch-action: pan-y;
}

.home-visual-text .txt1 .line-mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.1em;
}

.home-visual-text .txt1 .line-in {
    display: block;
    transform: translate3d(0, 105%, 0);
}

.home-visual-item.is-active .txt1 .line-in {
    transform: translate3d(0, 0, 0);
    transition: transform 0.85s var(--copy-ease-in);
    transition-delay: var(--copy-in-base);
}

.home-visual-item.is-active .txt1 .line-mask:nth-child(2) .line-in {
    transition-delay: calc(var(--copy-in-base) + 0.24s);
}

.home-visual-item.is-leaving .txt1 .line-in {
    transform: translate3d(0, -105%, 0);
    transition: transform 0.42s var(--copy-ease-out);
}

.home-visual-item.is-leaving .txt1 .line-mask:nth-child(2) .line-in {
    transition-delay: 0.15s;
}

.home-visual-text .txt2 {
    margin-top: 2rem;
    padding: 0 3rem;
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: -2%;
    line-height: 1.6;
    opacity: 0;
    transform: translate3d(0, 16px, 0);
}

.home-visual-item.is-active .txt2 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.4s var(--copy-ease-in), transform 0.4s var(--copy-ease-in);
    transition-delay: calc(var(--copy-in-base) + 0.38s);
}

.home-visual-text .btn {
    margin-top: 5rem;
    opacity: 0;
    transform: translate3d(0, 16px, 0);
}

.home-visual-item.is-active .btn {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.55s var(--copy-ease-in), transform 0.55s var(--copy-ease-in);
    transition-delay: calc(var(--copy-in-base) + 0.58s);
}

.home-visual-item.is-leaving .txt2,
.home-visual-item.is-leaving .btn {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition: opacity 0.28s cubic-bezier(0.55, 0, 0.675, 0.19), transform 0.28s cubic-bezier(0.55, 0, 0.675, 0.19);
}

/* 로드 인트로: 영상(is-active)은 보이게 두고, 카피만 등장 전까지 아래에 고정 */
.home-visual-item.is-copy-reset .txt1 .line-in,
.home-visual-item.is-active.is-copy-reset .txt1 .line-in {
    transform: translate3d(0, 105%, 0);
    transition: none;
}

.home-visual-item.is-copy-reset .txt2,
.home-visual-item.is-copy-reset .btn,
.home-visual-item.is-active.is-copy-reset .txt2,
.home-visual-item.is-active.is-copy-reset .btn {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: none;
}

.home-visual-text .btn button {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    min-width: 24rem;
    padding: 1.6rem 4rem;
    overflow: hidden;
    border: 1px solid;
    background-color: transparent;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: color 0.35s ease, border-color 0.35s ease;
}

.home-visual-text .btn button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}

.home-visual-text .btn button::after {
    content: "";
    position: relative;
    flex-shrink: 0;
    width: 0.8rem;
    height: 0.8rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.home-visual-text .btn button:hover::before {
    transform: scaleX(1);
}

/* home-visual-nav */
.home-visual-nav {
    position: absolute;
    left: 50%;
    bottom: 8%;
    z-index: 3;
    transform: translateX(-50%);
}

.home-visual-nav-list {
    display: flex;
    align-items: center;
    gap: 5px;
    width: min(28rem, 58vw);
}

.home-visual-nav-item {
    position: relative;
    flex: 1 1 0;
    height: 4px;
    padding: 0;
    border: 0;
    background-color: rgba(255, 255, 255, 0.25);
    overflow: hidden;
    cursor: pointer;
}

.home-visual-nav-fill {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 0%;
    height: 100%;
    background-color: #fff;
}

/* home section2 */
.home-sec2 {
    padding: var(--header-height) 0 5rem;
    background-color: var(--bg-surface);
}

.home-sec2 .inner-cont {
  padding: 4rem 2.4rem 0 !important;
}

.home-sec2 .home-sec-title {
    color: #0a0a0a
}

.home-sec2 .home-sec-info {
    /* color: #777; */
    color: var(--text-body);
}

.home-sec2 .business-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
}

.home-sec2 .business-item a {
    position: relative;
    display: block;
    min-height: 17rem;
    padding: 2.4rem 2.4rem;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right 2.4rem top 2.4rem;
    background-size: 3.4rem 3.4rem;
    background-image: url(../img/home/icon_home_sec2_01.svg);
}

.home-sec2 .business-item .txt1 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #000;
}

.home-sec2 .business-item .txt2 {
    margin-top: 1rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #000;
    line-height: 1.2;
}

/* 키워드 자동 줄바꿈: 항목 단위로 넘기고, 목록을 ·(1rem)만큼 왼쪽으로 당긴 뒤 그 1rem을 clip-path로 잘라
   각 줄 첫 항목의 ·만 가려짐 */
.home-sec2 .business-item .hover {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.4rem;
    margin-top: 1rem;
    margin-left: -1rem;
    clip-path: inset(0 0 0 1rem);
}

.home-sec2 .business-item .hover span {
    position: relative;
    padding-left: 1rem;
    font-size: 1.4rem;
    font-weight: 200;
    color: var(--text-body);
    line-height: 1.2;
    white-space: nowrap;
}

.home-sec2 .business-item .hover span::before {
    content: '·';
    position: absolute;
    left: 0;
    top: 0;
}

/* 이미지 커버 레이어: 데스크톱(1440+) 마우스 환경에서만 노출 */
.home-sec2 .business-item .cover {
    display: none;
}

.home-sec2 .business-item:nth-of-type(2) a {
    background-image: url(../img/home/icon_home_sec2_02.svg);
}

.home-sec2 .business-item:nth-of-type(3) a {
    background-image: url(../img/home/icon_home_sec2_03.svg);
}

.home-sec2 .business-item:nth-of-type(4) a {
    background-image: url(../img/home/icon_home_sec2_04.svg);
}

.home-sec2 .business-item:nth-of-type(5) a {
    background-image: url(../img/home/icon_home_sec2_05.svg);
}

.home-sec2 .business-item:nth-of-type(6) a {
    background-image: url(../img/home/icon_home_sec2_06.svg);
}

/* home-sec2: 스크롤 등장 — 타이틀 먼저, 카드 순차 (페이드 + 상승 + 블러) */
.home-sec2 .home-sec-title,
.home-sec2 .home-sec-info,
.home-sec2 .business-item {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    filter: blur(4px);
    transition:
        opacity 600ms cubic-bezier(0.33, 0, 0.22, 1),
        transform 680ms cubic-bezier(0.2, 1, 0.28, 1),
        filter 680ms cubic-bezier(0.33, 0, 0.22, 1);
    will-change: opacity, transform, filter;
}

.home-sec2 .home-sec-title.is-revealed,
.home-sec2 .home-sec-info.is-revealed,
.home-sec2 .business-item.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

/* @media (prefers-reduced-motion: reduce) {

    .home-sec2 .home-sec-title,
    .home-sec2 .home-sec-info,
    .home-sec2 .business-item {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        transition: none;
        will-change: auto;
    }
} */

.home-sec3 {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
    overflow: hidden;
}

.home-sec3-bg-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-sec3::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 30.96%, rgba(0, 0, 0, 0.00) 100%); */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0.45) 100%);
    opacity: 0.5;
    pointer-events: none;
}

.home-sec3 .home-sec-title,
.home-sec3 .home-sec-info {
    color: var(--white);
}

.home-sec3 .inner-cont {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: 0 !important;
}

.home-sec3 .news-list-wrap {
    position: relative;
    z-index: 2;
}

/* news-list (swiper) */
.news-list-wrap {
    width: 100%;
    min-width: 0;
}

.news-list {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.news-list .swiper {
    overflow: visible;
    /* padding: 1rem 0 3rem; */
}

.news-list .swiper-wrapper {
    transition-timing-function: linear !important;
}

.news-list .swiper-slide {
    width: 26rem;
}

.news-list .news-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    /* box-shadow: 0 1.8rem 5.5rem rgba(15, 23, 42, 0.12); */
    color: inherit;
    text-align: left;
}

.news-list .news-card .thumb {
    position: relative;
    width: 100%;
    height: 25rem;
    overflow: hidden;
    background-color: #e8e8e8;
}

.news-list .news-card .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-out;
}

/* 샘플 동일: 카드 오버 시 썸네일 확대 (마우스 환경만) */
@media (hover: hover) {
    .news-list .news-card:hover .thumb img {
        transform: scale(1.05);
    }
}

.news-list .news-card .info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
}

.news-list .news-card .tit {
    display: -webkit-box;
    overflow: hidden;
    height: 4.4rem;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.4;
    color: #111a33;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-list .news-card .desc {
    display: -webkit-box;
    overflow: hidden;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(17, 26, 51, 0.55);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-list-prev,
.news-list-next {
    display: none;
}

.home-sec4 {
    flex-direction: column;
    justify-content: center;
    gap: 4rem;
    overflow-x: hidden;
    background-color: #fff;
}

.home-sec4 .inner-cont {
    width: 100%;
    padding-bottom: 0;
}

.home-sec4 .home-sec-info {
    /* color: var(--text-secondary); */
    color: var(--text-body);
}

/* case-list (swiper) */
.case-list {
    position: relative;
    width: 100%;
    /* padding: 0 2.4rem; */
    margin-top: 3rem;
}

.case-list .swiper {
    overflow: hidden;
}

.case-slide {
    display: flex;
    flex-direction: column;
}

.case-banner {
    position: relative;
    display: block;
    width: 100%;
    height: 20rem;
    overflow: hidden;
    color: var(--white);
}

/* 고객성공사례 배너 인트로: 좌상단 기준 clip-path 마스크 리빌 + 이미지 살짝 줌아웃 */
.case-banner-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 100% 100% 0);
    transition: clip-path 0.97s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: clip-path;
}

/* 모바일 스와이프 영역: 세로 스크롤은 브라우저, 가로 스와이프는 스크립트가 처리 */
.case-list .case-banner,
.case-items-static {
    touch-action: pan-y;
}

.case-list .case-banner {
    cursor: grab;
}

.case-list.is-dragging,
.case-list.is-dragging .case-banner {
    cursor: grabbing;
    user-select: none;
}

@media (min-width: 1025px) {
    .case-list .case-banner {
        cursor: auto;
        touch-action: auto;
    }

    /* 전환 중 이전 배너 이미지·문구가 새 마스크 뒤로 비치지 않게 */
    .case-list .swiper-slide:not(.swiper-slide-active) .case-banner-clip,
    .case-list .swiper-slide:not(.swiper-slide-active) .case-banner .info {
        visibility: hidden;
    }
}

.case-banner.is-revealed .case-banner-clip {
    clip-path: inset(0 0 0 0);
}

.case-banner .thumb {
    position: absolute;
    inset: 0;
    transform: scale(1.12);
    transform-origin: top left;
    transition: transform 0.97s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-banner.is-revealed .thumb {
    transform: scale(1);
}

.case-banner .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease-out;
}

/* 배너 오버 시 이미지 확대 (마우스 환경만)
   .thumb은 인트로 줌아웃 transform을 쓰므로 img에 적용, 위에 겹친 .info 오버 시에도 유지되도록 .case-banner 기준 */
@media (hover: hover) {
    .case-banner:hover .thumb img {
        transform: scale(1.08);
    }
}

.case-banner .thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.18) 49.89%, rgba(0, 0, 0, 0) 85.612%);
}

.case-banner .info {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2.2rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* 배너 텍스트 순차 등장: 카테고리 → 제목 → 설명 */
.case-banner .cate,
.case-banner .tit,
.case-banner .desc {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-banner.is-revealed .cate,
.case-banner.is-revealed .tit,
.case-banner.is-revealed .desc {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 마스크가 열린 뒤에 카테고리 → 제목 → 설명 */
.case-banner.is-revealed .cate {
    transition-delay: 0.76s;
}

.case-banner.is-revealed .tit {
    transition-delay: 0.86s;
}

.case-banner.is-revealed .desc {
    transition-delay: 0.96s;
}

.case-banner .cate {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.case-banner .tit {
    overflow: hidden;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.case-banner .desc {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.case-items {
    margin-top: 1rem;
}

/* 모바일: 슬라이드 안 리스트는 숨기고 고정 리스트(.case-items-static)만 노출 */
.case-list .swiper .case-items {
    display: none;
}

@media (min-width: 1025px) {
    .case-list .swiper .case-items {
        display: block;
    }

    .case-items-static {
        display: none;
    }
}

.case-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.7rem 0;
    border-bottom: 1px solid #eee;
    color: inherit;
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

.case-items li:last-child .case-item {
    border-bottom: 0;
}

/* 리스트는 배너 마스크·문구 뒤에 위에서부터 80ms 간격 */
.case-items.is-revealed li:nth-child(1) .case-item {
    transition-delay: 1.2s;
}

.case-items.is-revealed li:nth-child(2) .case-item {
    transition-delay: 1.28s;
}

.case-items.is-revealed li:nth-child(3) .case-item {
    transition-delay: 1.36s;
}

.case-items.is-revealed li:nth-child(4) .case-item {
    transition-delay: 1.44s;
}

.case-items.is-revealed .case-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 모바일 스와이프·리사이즈처럼 재생 없이 바로 보여줄 때 */
.case-banner.is-instant .case-banner-clip,
.case-banner.is-instant .thumb,
.case-banner.is-instant .cate,
.case-banner.is-instant .tit,
.case-banner.is-instant .desc,
.case-items.is-instant .case-item {
    transition: none !important;
}

.case-item .txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.case-item .tit {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-body);
}

.case-item .desc {
    overflow: hidden;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-body);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.case-item .more {
    position: relative;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
}

.case-item .more img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.case-item .more .on,
.case-item .more .pc {
    display: none;
}

.case-list-pagination {
    display: none;
    cursor: grab;
    touch-action: none;
}

.case-list-pagination.is-dragging {
    cursor: grabbing;
}

.home-sec5 {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 4rem;
    background-color: #fff;
    overflow: hidden;
}

/* 성장스토리: 화이트 배경 → 좌→우 clip-path 마스크 리빌(히어로와 동일 패턴) */
.home-sec5-bg-clip {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.18s cubic-bezier(0.83, 0, 0.17, 1);
    will-change: clip-path;
}

.home-sec5.is-growth-bg-open .home-sec5-bg-clip {
    clip-path: inset(0 0 0 0);
}

.home-sec5-bg-inner {
    position: absolute;
    inset: 0;
    background: url(../img/home/bg_home_sec5.jpg) no-repeat center top;
    background-size: cover;
    transform: scale(1.12);
    transform-origin: left center;
    transition: transform 1.18s cubic-bezier(0.83, 0, 0.17, 1);
    will-change: transform;
}

.home-sec5.is-growth-bg-open .home-sec5-bg-inner {
    transform: scale(1);
}

.home-sec5 .inner-cont {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-bottom: 0;
}

.home-sec5 .home-sec-title,
.home-sec5 .home-sec-info {
    color: var(--white);
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.home-sec5.is-content-ready .home-sec-title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.home-sec5.is-content-ready .home-sec-info {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0.12s;
}

.home-growth-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    /* padding: 0 2.4rem; */
    margin-top: 3rem;
}

.home-growth-card {
    display: flex;
    flex-direction: row-reverse;
    /* justify-content: flex-end; */
    justify-content: space-between;
    align-items: center;
    gap: 4.1rem;
    padding: 1.8rem 3.8rem 2rem 3rem;
    background-color: #fff;
    box-shadow: 0 1.8rem 5.5rem rgba(15, 23, 42, 0.12);
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    filter: blur(4px);
    transition: opacity 0.78s cubic-bezier(0.33, 0, 0.22, 1),
        transform 0.96s cubic-bezier(0.2, 1, 0.28, 1),
        filter 0.78s cubic-bezier(0.33, 0, 0.22, 1);
}

.home-growth-card.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.home-growth-card .info {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 13.9rem;
    width: auto;
    max-width: calc(100% - 10rem);
}

.home-growth-card .tit {
    color: var(--primary);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.home-growth-card .num {
    font-family: "GmarketSans", "Pretendard", sans-serif;
    font-weight: 500;
    font-size: 2.8rem;
    line-height: 1;
    color: var(--text-body);
    white-space: nowrap;
}

.home-growth-card .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 5.6rem;
    height: 5.8rem;
}

.home-growth-card .icon img {
    display: block;
    max-width: 100%;
    height: auto;
}

.home-growth-list .pc {
    display: none;
}

.home-history-list {
    display: none;
}

/* home-quick-nav */
.home-quick-nav {
    position: fixed;
    top: 50%;
    right: 1.8rem;
    z-index: 90;
    transform: translateY(-50%);
    display: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.home-quick-nav ul {
    display: flex;
    flex-direction: column;
}

.home-quick-nav li {
    position: relative;
    height: 4.8rem;
}

/* 각 li의 dot 하단 보더에서 다음 li의 dot 상단까지 라인 (마지막 li 제외)
   dot 9px(border-box). 라인은 1px 보더와 겹쳐 간격이 생기지 않고, 투명한 점 안쪽으로는 들어가지 않음 */
.home-quick-nav li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(50% + 3.5px);
    height: calc(100% - 8px);
    right: 4px;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.home-quick-nav a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    height: 100%;
}

.home-quick-nav .dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.5);
    /* background-color: #fff; */
    background-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.home-quick-nav .label {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.5);
    text-align: right;
    white-space: nowrap;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

.home-quick-nav a:hover .label {
    color: rgba(0, 0, 0, 0.8);
}

.home-quick-nav a:hover .dot {
    border-color: rgba(0, 0, 0, 0.8);
}

.home-quick-nav a.is-active .label {
    color: var(--text-body);
    font-weight: 700;
    line-height: 1;
}

.home-quick-nav a.is-active .dot {
    background-color: var(--primary);
    border-color: #fff;
}

/* home-quick-nav: 어두운 배경 섹션(고객사례, 성장스토리 등) 위에서의 톤 전환 */
.home-quick-nav.is-dark li:not(:last-child)::before {
    background-color: rgba(255, 255, 255, 0.2);
}

.home-quick-nav.is-dark .dot {
    border-color: #fff;
    background-color: transparent;
}

.home-quick-nav.is-dark .label {
    color: rgba(255, 255, 255, 0.5);
}

.home-quick-nav.is-dark a:hover .label {
    color: rgba(255, 255, 255, 0.8);
}

.home-quick-nav.is-dark a:hover .dot {
    border-color: #fff;
}

.home-quick-nav.is-dark a.is-active .label {
    color: #fff;
}

.home-quick-nav.is-dark a.is-active .dot {
    background-color: var(--primary);
    border-color: #fff;
}

/* home 우측 하단 스크롤 버튼
   모바일: 히어로를 지난 뒤에만 top 노출 / PC: 히어로=아래, 중간=위+아래, 푸터=위 */
.scroll-action-home {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 8.2rem;
    right: 2.4rem;
    z-index: 10000;
    gap: 0.8rem;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.scroll-action-home button {
    width: 5.2rem;
    height: 5.2rem;
    background-repeat: no-repeat;
    background-size: 100%;
}

.scroll-action-home .scroll-top {
    background-image: url(../img/common/float_top_off.png);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease;
}

.scroll-action-home.is-mobile-top-visible .scroll-top {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-action-home .scroll-top:hover {
    background-image: url(../img/common/float_top_on.png);
}

.scroll-action-home .scroll-btm {
    display: none;
    background-image: url(../img/common/float_btm_off.png);
}

.scroll-action-home .scroll-btm:hover {
    background-image: url(../img/common/float_btm_on.png);
}

@media (min-width: 1025px) {
    .home-visual-video.mo {
        display: none;
    }

    .home-visual-video.pc {
        display: block;
    }

    .scroll-action-home {
        bottom: 1.5rem;
        right: 1rem;
    }

    .scroll-action-home button {
        width: 6rem;
        height: 6rem;
    }

    .scroll-action-home .scroll-top {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    .scroll-action-home .scroll-btm {
        display: block;
    }

    .scroll-action-home.is-at-hero .scroll-top {
        display: none;
    }

    .scroll-action-home.is-at-end .scroll-btm {
        display: none;
    }
}

/* 영문 */
:lang(en) main.home>section .home-sec-title {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.048rem;
}

:lang(en) main.home>section .home-sec-info {
    line-height: 1.4;
}

:lang(en) .home-visual-text .txt1 {
    font-size: 2.6rem;
}

:lang(en) .home-visual-text .txt2 {
    line-height: 1.4;
    letter-spacing: 0;
}

:lang(en) .home-sec2 .business-item .txt2 {
    font-size: 1.4rem;
}

:lang(en) .home-sec2 .business-item .hover span {
    line-height: 1.4;
}

/* 모바일 전용: PC 규칙이 덮지 않는 속성(굵기 등)과 PC보다 우선하는 :lang(en)이 PC로 새지 않게 구간 제한 */
@media (max-width: 1024px) {
    main.home .home-visual-text {
        margin-top: 4rem;
    }

    main.home>section:not(.home-sec1) {
        min-height: 0;
        justify-content: flex-start;
        padding-top: 16.6666vw;
        padding-bottom: 22.2222vw;
    }

    main.home>section:not(.home-sec1) .inner-cont {
        padding-top: 0;
        padding-bottom: 0;
    }

    .home-visual-nav {
        bottom: 10rem;
    }

    .news-list .swiper-wrapper {
        align-items: stretch;
    }

    .news-list .swiper-slide {
        display: flex;
        height: auto;
    }

    .news-list .news-card {
        flex: 1 1 auto;
        height: auto;
    }

    .news-list .news-card .desc {
        min-height: 3.92rem;
    }

    .news-list .news-card .info {
        padding: 4rem 2rem;
    }

    .home-visual-text .txt1 {
        font-size: 2.8rem;
        font-weight: 700;
    }

    :lang(en) .home-visual-text .txt1 {
        font-size: 2.6rem;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: 0;
    }

    :lang(en) main.home>section .home-sec-info {
        margin-top: 0.8rem;
    }

    :lang(en) .home-sec2 .business-item .txt2 {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1.4;
    }

    :lang(en) .home-sec2 .business-item .hover span {
        font-size: 1.4rem;
        font-weight: 200;
        line-height: 1.4;
    }
}

/* ==========================================
PC / 데스크톱 구간 (PC) - 1440px 이상
========================================== */
@media (min-width: 1440px) {

    main.home>section {
        padding: var(--header-height) 0 0 0;
    }

    main.home>section .home-sec-title {
        font-size: 5rem;
        letter-spacing: -2%;
        line-height: 1;
    }

    main.home>section .home-sec-info {
        margin-top: 2rem;
        font-size: 2rem;
        font-weight: 400;
        letter-spacing: -2%;
        line-height: 1;
    }

    .home-visual-text .txt1 {
        font-size: 9rem;
    }

    .home-visual-text .txt2 {
        margin-top: 4rem;
        font-size: 2.4rem;
    }

    .home-visual-text .btn {
        margin-top: 6rem;
    }

    .home-visual-text .btn button {
        width: 32rem;
        height: 7rem;
        padding: 0;
        gap: 1.2rem;
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .home-visual-text .btn button::after {
        width: 1.2rem;
        height: 1.2rem;
    }

    .home-sec2 {
        background-color: var(--white);
    }

    .home-sec2 .inner-cont {
        padding: 0 !important;
    }

    .home-sec2 .business-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2.4rem;
        margin-top: 5rem;
    }

    .home-sec2 .business-item {
        flex: 0 0 calc((100% - 4.8rem) / 3);
    }

    /* 카드 호버(샘플 동일): 기본은 이미지 커버(.cover)가 카드를 덮고 있고,
       마우스 오버 시 커버가 우→좌로 걷히며(clip-path) 아래의 밝은 카드(키워드·아이콘)가 드러남 */
    .home-sec2 .business-item a {
        height: 28rem;
        padding: 4.8rem 4rem 0 4rem;
        overflow: hidden;
        background-color: var(--bg-surface);
        background-position: right 4rem top 5rem;
        background-size: 3.4rem 3.4rem;
        isolation: isolate;
    }

    .home-sec2 .business-item .cover {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        padding: 4.8rem 4rem 0 4rem;
        background-color: #0f172a;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: cover;
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../img/home/bg_home_sec2_01.svg);
        clip-path: inset(0 0 0 0);
        transition: clip-path 0.4s cubic-bezier(0.45, 0, 0.55, 1);
        will-change: clip-path;
        pointer-events: none;
    }

    .home-sec2 .business-item a:hover .cover {
        clip-path: inset(0 100% 0 0);
    }

    /* 터치 기기: 샘플과 동일하게 커버 없이 밝은 카드만 표시 */
    @media (hover: none) {
        .home-sec2 .business-item .cover {
            display: none;
        }
    }

    .home-sec2 .business-item .txt1 {
        font-size: 3.4rem;
    }

    .home-sec2 .business-item .txt2 {
        font-size: 2rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: -2%;
    }

    .home-sec2 .business-item .cover .txt1,
    .home-sec2 .business-item .cover .txt2 {
        color: var(--white);
    }

    .home-sec2 .business-item .hover {
        margin-top: 1.6rem;
    }

    .home-sec2 .business-item .hover span {
        position: relative;
        font-size: 1.8rem;
        font-weight: 200;
        color: #000;
        line-height: 1.6;
        letter-spacing: 0;
    }

    .home-sec2 .business-item:nth-of-type(2) .cover {
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../img/home/bg_home_sec2_02.svg);
    }

    .home-sec2 .business-item:nth-of-type(3) .cover {
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../img/home/bg_home_sec2_03.svg);
    }

    .home-sec2 .business-item:nth-of-type(4) .cover {
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../img/home/bg_home_sec2_04.svg);
    }

    .home-sec2 .business-item:nth-of-type(5) .cover {
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../img/home/bg_home_sec2_05.svg);
    }

    .home-sec2 .business-item:nth-of-type(6) .cover {
        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../img/home/bg_home_sec2_06.svg);
    }

    /*@media (prefers-reduced-motion: reduce) {*/
    /*    .home-sec2 .business-item .cover {*/
    /*        transition: none;*/
    /*    }*/
    /*}*/

    /* 데스크톱 카드: opacity/translate 대신 좌→우 clip-path 마스크 오픈 */
    .home-sec2 .business-item {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 0.62s cubic-bezier(0.22, 1, 0.33, 1);
        will-change: clip-path;
    }

    .home-sec2 .business-item.is-revealed {
        clip-path: inset(0 0 0 0);
    }

    /* @media (prefers-reduced-motion: reduce) {
        .home-sec2 .business-item {
            clip-path: inset(0 0 0 0) !important;
            transition: none !important;
            will-change: auto;
        }
    } */

    .home-quick-nav {
        display: block;
    }

    .home-sec3 {
        gap: 5rem;
    }

    .home-sec3 .inner-cont {
        padding-bottom: 0 !important;
    }

    .news-list-wrap {
        position: relative;
        width: auto;
    }

    .news-list {
        position: relative;
        width: 144rem;
        margin: 0 auto;
        overflow: hidden;
    }

    .news-list .swiper {
        width: 123.6rem;
        /* padding: 2rem 0 5rem; */
    }

    .news-list .swiper-slide {
        width: 38rem;
        height: 43.6rem;
    }

    .news-list .news-card {
        /* box-shadow: 0 -5rem 5.5rem rgba(15, 23, 42, 0.12); */
    }

    .news-list .news-card .thumb {
        height: 23rem;
    }

    .news-list .news-card .info {
        gap: 1rem;
        padding: 4rem 3.4rem;
    }

    .news-list .news-card .tit {
        height: 6.8rem;
        font-size: 2.4rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: #1a1a1a;
    }

    .news-list .news-card .desc {
        font-size: 1.6rem;
        line-height: 1.5;
        letter-spacing: -0.02em;
        color: #777;
        -webkit-line-clamp: 2;
    }

    .news-list-prev,
    .news-list-next {
        position: absolute;
        top: 50%;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 9rem;
        height: 9rem;
        padding: 0;
        border: 0;
        background: transparent;
        opacity: 0.5;
        transform: translateY(-70%);
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .news-list-prev {
        left: -9rem;
    }

    .news-list-next {
        right: -9rem;
    }

    .news-list-prev:hover,
    .news-list-next:hover {
        opacity: 0.88;
    }

    .news-list-prev img,
    .news-list-next img {
        display: block;
        width: 2.6rem;
        height: 4.8rem;
    }

    .news-list-prev.swiper-button-disabled,
    .news-list-next.swiper-button-disabled {
        opacity: 0.25;
        cursor: default;
    }

    .home-sec4 {
        gap: 6rem;
    }

    .case-list {
        width: 144rem;
        margin: 5rem auto 0;
        padding: 0;
        overflow: hidden;
    }

    .case-list .swiper {
        overflow: hidden;
    }

    .case-slide {
        flex-direction: row;
        align-items: flex-start;
        gap: 4rem;
    }

    .case-banner {
        flex-shrink: 0;
        width: 54rem;
        height: 45rem;
    }

    .case-banner .thumb::after {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 23.444%, rgba(0, 0, 0, 0.7) 100%);
    }

    .case-banner .info {
        left: 4rem;
        right: 4rem;
        bottom: 5rem;
        gap: 0.6rem;
    }

    .case-banner .cate {
        font-size: 1.8rem;
        line-height: 1.4;
        letter-spacing: -0.02em;
    }

    .case-banner .tit {
        font-size: 3.6rem;
        line-height: 1.6;
        letter-spacing: -0.02em;
        white-space: normal;
    }

    .case-banner .desc {
        font-size: 1.8rem;
        line-height: 1.4;
        letter-spacing: 0;
    }

    .case-items {
        flex: 1;
        width: 86rem;
        margin-top: 0;
        border-top: 1px solid #e1e7ee;
    }

    .case-item {
        align-items: flex-end;
        padding: 2.5rem 0 3rem;
        border-bottom-color: #e1e7ee;
    }

    .case-items li:last-child .case-item {
        border-bottom: 1px solid #e1e7ee;
    }

    .case-item .txt {
        gap: 0;
    }

    .case-item .tit {
        min-height: 5.8rem;
        font-size: 2.8rem;
        line-height: 1.6;
        letter-spacing: -0.02em;
    }

    .case-item .desc {
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: -0.02em;
        color: var(--text-body);
        white-space: normal;
    }

    .case-item .more {
        align-self: center;
        width: 3rem;
        height: 3rem;
    }

    .case-item .more .mo {
        display: none;
    }

    .case-item .more .pc.off {
        display: block;
    }

    .case-item:hover .tit {
        color: var(--primary);
    }

    .case-item:hover .more .pc.off {
        display: none;
    }

    .case-item:hover .more .pc.on {
        display: block;
    }

    .case-list-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        left: auto;
        bottom: auto;
        width: 28rem !important;
        margin: 4rem auto 0;
        padding: 1rem 0;
    }

    .case-list-pagination .swiper-pagination-bullet {
        width: 9rem;
        height: 0.4rem;
        margin: 0;
        border-radius: 0;
        background: #e1e7ee;
        opacity: 1;
        transition: background-color 0.2s ease;
    }

    .case-list-pagination .swiper-pagination-bullet-active {
        background: var(--primary);
    }

    .home-sec5 {
        gap: 6rem;
    }

    /* .home-sec5-bg-inner {
        background-size: auto 100%;
    } */

    .home-growth-list {
        flex-direction: row;
        gap: 2rem;
        width: 144rem;
        margin: 5rem auto 0;
        padding: 0;
    }

    .home-growth-list .mo {
        display: none;
    }

    .home-growth-list .pc {
        display: inline;
    }

    .home-growth-card {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        flex: 0 0 34.5rem;
        width: 34.5rem;
        height: 34.5rem;
        gap: 0;
        padding: 6rem 2rem 0;
    }

    .home-growth-card .icon {
        width: 11rem;
        height: 11rem;
    }

    .home-growth-card .info {
        align-items: center;
        width: auto;
        margin-top: 1.6rem;
        gap: 2.4rem;
        text-align: center;
    }

    .home-growth-card .tit {
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 1;
    }

    .home-growth-card .num {
        font-size: 4.8rem;
    }

    /* 영문 */
    :lang(en) main.home>section .home-sec-title {
        font-size: 4.8rem;
        line-height: 1;
        letter-spacing: 0;
    }

    :lang(en) main.home>section .home-sec-info {
        line-height: 1;
    }

    :lang(en) .home-visual-text .txt1 {
        font-size: 7rem;
        line-height: 1.2;
        letter-spacing: -2%;
    }

    :lang(en) .home-visual-text .txt2 {
        line-height: 1.4;
        letter-spacing: 0;
    }

    :lang(en) .home-sec2 .business-item .txt2 {
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0;
    }

    :lang(en) .home-sec2 .business-item .hover span {
        font-size: 1.6rem;
        line-height: 1.6;
    }

    :lang(en) .news-list .news-card .tit {
        font-size: 2.2rem;
        letter-spacing: 0;
        line-height: 1.4;
    }

}

/* ==========================================
고해상도 (pc) - 2560px 이상
========================================== */
@media screen and (min-width: 2560px) {
    main.home>section .home-sec-title {
        font-size: 7rem;
    }

    main.home>section .home-sec-info {
        margin-top: 2.4rem;
        font-size: 2.4rem;
    }

    .home-sec2 .business-list {
        margin-top: 7rem;
    }

    .home-sec3 {
        gap: 7rem;
    }

    .case-list {
        margin: 7rem auto 0;
    }

    .case-list .case-banner {
        height: 60rem;
    }

    .case-list .case-items .hide {
        display: block !important;
    }

    .home-growth-list {
        margin: 7rem auto 0;
    }

    .home-history-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 144rem;
        margin: 4rem auto 0;
        opacity: 0;
        transform: translate3d(0, 20px, 0);
        filter: blur(4px);
        transition: opacity 0.78s cubic-bezier(0.33, 0, 0.22, 1),
            transform 0.96s cubic-bezier(0.2, 1, 0.28, 1),
            filter 0.78s cubic-bezier(0.33, 0, 0.22, 1);
    }

    /* 성장 리포트 카드 등장이 끝난 뒤에만 노출 (home.js에서 is-revealed 부여) */
    .home-history-list.is-revealed {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }

    .home-history-list .tit {
        height: 7rem;
        border-bottom: 0.2rem solid #fff;
        color: #fff;
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: -0.02em;
        text-shadow: 0 0.2rem 1.1rem rgba(0, 0, 0, 0.2);
    }

    .home-history-list ul {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .home-history-list a {
        display: flex;
        align-items: center;
        height: 6rem;
        border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .home-history-list .year {
        flex-shrink: 0;
        width: 14rem;
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.4;
        letter-spacing: -0.02em;
        white-space: nowrap;
        color: rgba(255, 255, 255, 0.78);
        transition: color 0.2s ease;
    }

    .home-history-list .desc {
        margin-left: 4rem;
        margin-right: auto;
        font-size: 2rem;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: -0.02em;
        color: rgba(255, 255, 255, 0.62);
        transition: color 0.2s ease;
    }

    .home-history-list .more {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 4.6rem;
        height: 5rem;
        transition: transform 0.22s ease;
    }

    .home-history-list .more img {
        display: block;
    }

    /* 연혁 리스트: 호버 시 텍스트 밝아지고 화살표가 오른쪽으로 슬라이드 (예시 사이트 growth-history와 동일) */
    .home-history-list a:hover .year,
    .home-history-list a:hover .desc {
        color: #fff;
    }

    .home-history-list a:hover .more {
        transform: translateX(3px);
    }
}

/* ==========================================
태블릿 구간 (Tablet) - 768px 이상 - 기준 해상도: 768px
========================================== */
@media (min-width: 1025px) and (max-width: 1439px) {

    main.home>section {
        padding: var(--header-height) 0 0 0;
    }

    main.home>section .home-sec-title {
        font-size: 5rem;
        letter-spacing: -2%;
        line-height: 1;
    }

    main.home>section .home-sec-info {
        margin-top: 2rem;
        font-size: 2rem;
        font-weight: 400;
        letter-spacing: -2%;
        line-height: 1;
    }

    .home-visual-text .txt1 {
        font-size: 9rem;
    }

    .home-visual-text .txt2 {
        margin-top: 4rem;
        font-size: 2.4rem;
    }

    .home-visual-text .btn {
        margin-top: 6rem;
    }

    .home-visual-text .btn button {
        width: 32rem;
        height: 7rem;
        padding: 0;
        gap: 1.2rem;
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .home-visual-text .btn button::after {
        width: 1.2rem;
        height: 1.2rem;
    }

    .home-quick-nav {
        display: block;
    }

    .home-quick-nav .label {
        font-size: 1.3rem;
    }

    .home-sec2 {
        background-color: var(--white);
    }

    .home-sec2 .inner-cont {
        /* max-width: 128rem; */
        padding: 0 8.5rem !important;
    }

    .home-sec2 .business-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
        margin-top: 5rem;
    }

    .home-sec2 .business-item {
        flex: 0 0 calc((100% - 4rem) / 3);
    }

    .home-sec2 .business-item a {
        height: 28rem;
        padding: 4.8rem 4rem 0 4rem;
        background-color: var(--bg-surface);
        background-position: right 4rem top 5rem;
        /* background-repeat: no-repeat; */
        /* background-position: 0 0; */
        /* background-size: cover; */
        /* background-image: url(../img/home/bg_home_sec2_01.svg); */
        /* isolation: isolate; */
    }

    .home-sec2 .business-item a::after {
        /* content: "";
        position: absolute;
        background: #000;
        z-index: -1;
        inset: 0;
        opacity: 0.2; */
        display: none;
    }

    .home-sec2 .business-item .txt1 {
        font-size: 2.6rem;
        color: #000;
    }

    .home-sec2 .business-item .txt2 {
        color: #000;
        font-size: 2rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: -2%;
    }

    .home-sec2 .business-item .hover {
        margin-top: 1.6rem;
    }

    .home-sec2 .business-item .hover span {
        position: relative;
        font-size: 1.8rem;
        font-weight: 200;
        color: #000;
        line-height: 1.6;
        letter-spacing: 0;
    }

    /* .home-sec2 .business-item:nth-of-type(2) a {
        background-image: url(../img/home/bg_home_sec2_02.svg);
    }
    .home-sec2 .business-item:nth-of-type(3) a {
        background-image: url(../img/home/bg_home_sec2_03.svg);
    }
    .home-sec2 .business-item:nth-of-type(4) a {
        background-image: url(../img/home/bg_home_sec2_04.svg);
    }
    .home-sec2 .business-item:nth-of-type(5) a {
        background-image: url(../img/home/bg_home_sec2_05.svg);
    }
    .home-sec2 .business-item:nth-of-type(6) a {
        background-image: url(../img/home/bg_home_sec2_06.svg);
    } */

    .home-sec2 .business-item a:hover {
        background-color: var(--bg-surface);
        background-position: right 4rem top 5rem;
        background-size: 3.4rem 3.4rem;
        background-image: url(../img/home/icon_home_sec2_01.svg);
    }

    .home-sec2 .business-item:nth-of-type(2) a:hover {
        background-image: url(../img/home/icon_home_sec2_02.svg);
    }

    .home-sec2 .business-item:nth-of-type(3) a:hover {
        background-image: url(../img/home/icon_home_sec2_03.svg);
    }

    .home-sec2 .business-item:nth-of-type(4) a:hover {
        background-image: url(../img/home/icon_home_sec2_04.svg);
    }

    .home-sec2 .business-item:nth-of-type(5) a:hover {
        background-image: url(../img/home/icon_home_sec2_05.svg);
    }

    .home-sec2 .business-item:nth-of-type(6) a:hover {
        background-image: url(../img/home/icon_home_sec2_06.svg);
    }

    .home-sec2 .business-item a:hover .txt1 {
        color: #000;
    }

    .home-sec2 .business-item a:hover .txt2 {
        color: #000;
    }

    .home-sec2 .business-item a:hover .hover {
        display: flex;
    }

    /* 데스크톱 카드: opacity/translate 대신 좌→우 clip-path 마스크 오픈 */
    .home-sec2 .business-item {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 0.62s cubic-bezier(0.22, 1, 0.33, 1);
        will-change: clip-path;
    }

    .home-sec2 .business-item.is-revealed {
        clip-path: inset(0 0 0 0);
    }

    /* @media (prefers-reduced-motion: reduce) {
        .home-sec2 .business-item {
            clip-path: inset(0 0 0 0) !important;
            transition: none !important;
            will-change: auto;
        }
    } */

    .home-sec3 {
        gap: 5rem;
    }

    .news-list-wrap {
        position: relative;
    }

    .news-list {
        padding: 0 12rem;
    }

    .news-list .swiper {
        overflow: hidden;
    }

    .news-list .swiper-slide {
        /* width: 38rem; */
        width: 32rem;
        height: 43.6rem
    }

    /* .news-list .news-card {
        box-shadow: 0 -5rem 5.5rem rgba(15, 23, 42, 0.12);
    } */

    .news-list .news-card .thumb {
        height: 23rem;
    }

    .news-list .news-card .info {
        gap: 1rem;
        padding: 4rem 3.4rem;
    }

    .news-list .news-card .tit {
        height: 6.8rem;
        font-size: 2.4rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: #1a1a1a;
    }

    .news-list .news-card .desc {
        font-size: 1.6rem;
        line-height: 1.5;
        letter-spacing: -0.02em;
        color: #777;
        -webkit-line-clamp: 2;
    }

    .news-list-prev,
    .news-list-next {
        position: absolute;
        top: 50%;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 6rem;
        height: 9rem;
        padding: 0;
        border: 0;
        background: transparent;
        opacity: 0.5;
        transform: translateY(-70%);
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    .news-list-prev {
        left: 4rem;
    }

    .news-list-next {
        right: 4rem;
    }

    .news-list-prev:hover,
    .news-list-next:hover {
        opacity: 0.88;
    }

    .news-list-prev img,
    .news-list-next img {
        display: block;
        width: 2.2rem;
        height: 4rem;
    }

    .home-sec4 {
        gap: 6rem;
    }

    .home-sec4 .inner-cont {
        padding: 0 6rem !important;
    }

    .case-list {
        padding: 0 4rem;
        margin-top: 5rem;
        overflow: hidden;
    }

    .case-list .swiper {
        overflow: hidden;
    }

    .case-slide {
        flex-direction: row;
        align-items: flex-start;
        gap: 3rem;
    }

    .case-banner {
        flex-shrink: 0;
        width: 38%;
        height: auto;
        aspect-ratio: 540 / 450;
    }

    .case-banner .thumb::after {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 23.444%, rgba(0, 0, 0, 0.7) 100%);
    }

    .case-banner .info {
        left: 3rem;
        right: 3rem;
        bottom: 3.2rem;
        gap: 0.6rem;
    }

    .case-banner .cate {
        font-size: 1.6rem;
        line-height: 1.4;
        letter-spacing: -0.02em;
    }

    .case-banner .tit {
        font-size: 2.8rem;
        line-height: 1.6;
        letter-spacing: -0.02em;
        white-space: normal;
    }

    .case-banner .desc {
        font-size: 1.6rem;
        line-height: 1.4;
    }

    .case-items {
        flex: 1;
        min-width: 0;
        margin-top: 0;
        border-top: 1px solid #e1e7ee;
    }

    .case-item {
        align-items: flex-end;
        padding: 2rem 0 2.4rem;
        border-bottom-color: #e1e7ee;
    }

    .case-items li:last-child .case-item {
        border-bottom: 1px solid #e1e7ee;
    }

    .case-item .txt {
        gap: 0;
    }

    .case-item .tit {
        min-height: 4.6rem;
        font-size: 2.4rem;
        line-height: 1.6;
        letter-spacing: -0.02em;
    }

    .case-item .desc {
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 1.8;
        letter-spacing: -0.02em;
        color: var(--text-body);
        white-space: normal;
    }

    .case-item .more {
        align-self: center;
        width: 3rem;
        height: 3rem;
    }

    .case-item .more .mo {
        display: none;
    }

    .case-item .more .pc.off {
        display: block;
    }

    .case-item:hover .tit {
        color: var(--primary);
    }

    .case-item:hover .more .pc.off {
        display: none;
    }

    .case-item:hover .more .pc.on {
        display: block;
    }

    .case-list-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        left: auto;
        bottom: auto;
        width: 28rem !important;
        margin: 3rem auto 0;
        padding: 1rem 0;
    }

    .case-list-pagination .swiper-pagination-bullet {
        width: 9rem;
        height: 0.4rem;
        margin: 0;
        border-radius: 0;
        background: #e1e7ee;
        opacity: 1;
        transition: background-color 0.2s ease;
    }

    .case-list-pagination .swiper-pagination-bullet-active {
        background: var(--primary);
    }

    .home-sec5 {
        gap: 6rem;
    }

    .home-growth-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 1.6rem;
        padding: 0 8rem;
        margin-top: 5rem;
    }

    .home-growth-list .mo {
        display: none;
    }

    .home-growth-list .pc {
        display: inline;
    }

    .home-growth-card {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        padding: 4rem 2rem 3.2rem;
    }

    .home-growth-card .icon {
        width: 8.8rem;
        height: 8.8rem;
    }

    .home-growth-card .info {
        align-items: center;
        width: auto;
        margin-top: 1.6rem;
        gap: 1.6rem;
        text-align: center;
    }

    .home-growth-card .tit {
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1;
    }

    .home-growth-card .num {
        font-size: 3.6rem;
    }

    /* 영문 */
    :lang(en) main.home>section .home-sec-title {
        font-size: 4.8rem;
        line-height: 1;
        letter-spacing: 0;
    }

    :lang(en) main.home>section .home-sec-info {
        line-height: 1;
    }

    :lang(en) .home-visual-text .txt1 {
        font-size: 7rem;
        line-height: 1.2;
        letter-spacing: -2%;
    }

    :lang(en) .home-visual-text .txt2 {
        line-height: 1.4;
        letter-spacing: 0;
    }

    :lang(en) .home-sec2 .business-item .txt2 {
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0;
    }

    :lang(en) .home-sec2 .business-item .hover span {
        font-size: 1.6rem;
        line-height: 1.6;
    }

    :lang(en) .news-list .news-card .tit {
        font-size: 2.2rem;
        letter-spacing: 0;
        line-height: 1.4;
    }

}