/* responsive.css */
@charset "utf-8";

/*
  반응형 브레이크포인트 (style.css 참조)
  1. Desktop : 1280px~ (기본 - index.css)
  2. Tablet  : 800px ~ 1279px
  3. Mobile  : ~799px
*/


/***********************************************************/
/* ========== TABLET (800px ~ 1279px) ========== */
/***********************************************************/
@media all and (max-width: 1279px) {

    /* --- style.css 변수 재할당 (타이포그래피 + 컨테이너) --- */
    :root {
        h2 {
            font-size: var(--tablet-size-h2);
            line-height: var(--tablet-line-height-h2);
        }

        h3 {
            font-size: var(--tablet-size-h3);
            line-height: var(--tablet-line-height-h3);
        }

        h4 {
            font-size: var(--tablet-size-h4);
            line-height: var(--tablet-line-height-h4);
        }

        p.large {
            font-size: var(--tablet-size-p_large);
            line-height: var(--tablet-line-height-p_large);
        }

        p.large.bold {
            font-size: var(--tablet-size-p_large_700);
            line-height: var(--tablet-line-height-p_large_700);
        }

        p,
        li {
            font-size: var(--tablet-size-p_standard);
            line-height: var(--tablet-line-height-p_standard);
        }

        p.small {
            font-size: var(--tablet-size-p_small);
            line-height: var(--tablet-line-height-p_small);
        }

        .inner {
            width: var(--tablet-width);
            max-width: var(--tablet-max-width);
            padding: var(--tablet-padding);
        }
    }

    /* --- HEADER --- */
    header {
        height: 60px;
    }



    .header-wrapper .site-map-btn i {
        width: 44px;
        height: 44px;
    }

    .header-wrapper .logo a {
        height: 46px;
    }

    header .site-map {
        padding-top: 60px;
    }

    header .site-map .inner .top {
        height: 60px;
    }

    header .site-map .inner .top i {
        width: 44px;
        height: 44px;
    }

    /* --- MAIN HERO --- */
    main {
        height: 730px;
    }

    main .wrapper {
        padding: 50px 20px;
    }

    main .wrapper .btn-main {
        margin-right: 16px;
        padding: 14px 24px;
        column-gap: 10px;
        font-size: 16px;
    }

    main .wrapper .btn-main i {
        width: 18px;
        height: 18px;
    }

    /* --- WHOLE CONTENTS --- */
    .whole-contents .top-wrapper {
        row-gap: 100px;
    }

    .property {
        height: 60px;
    }

    .property .cycle-wrap,
    .property .cycle p {
        column-gap: 20px;
        font-size: 16px;
    }

    .whole-contents .container {
        row-gap: 150px;
        margin: 100px 0;
    }

    .key-solution {
        height: 300px;
    }

    /* --- BUSINESS --- */
    article.business {
        padding: 0 20px;
    }

    .business .box-v1 {
        height: 500px;
        padding: 30px;
    }

    /* --- TRADE --- */
    article.trade {
        padding: 80px 20px;
    }

    .trade .img-box {
        height: 350px;
    }

    /* --- MSG --- */
    article.msg {
        flex-direction: column;
    }

    .msg .img-area {
        height: 350px;
    }

    .msg .txt-area {
        padding: 50px 20px;
    }

    /* --- PLATFORM --- */
    .platform ul.content {
        flex-direction: column;
        row-gap: 20px;
    }

    /* --- PROJECT --- */
    article.project {
        padding: 0 20px;
    }

    .box-v4 {
        height: 450px;
    }

    .box-v4 .wrapper .title-area {
        padding: 16px 30px;
    }

    .box-v4 .wrapper .txt-area.active {
        padding: 30px;
    }

    .project .title-wrap .btn {
        padding: 18px 32px;
    }

    .project .title-wrap .btn p {
        font-size: 22px;
        line-height: 22px;
    }

    /* --- INVEST --- */
    article.invest {
        flex-direction: column;
        padding: 0 20px;
    }

    .invest .title-v2 {
        flex: unset;
        margin-bottom: 50px;
    }

    .invest .contents {
        flex: unset;
    }

    .invest ul.box-wrap .box-v5 {
        aspect-ratio: auto;
        height: 260px;
    }

    .box-v5 {
        padding: 40px 20px;
        align-items: center;
        /* row-gap이 있으므로 세로 중앙 정렬 위함 */
        justify-content: center;
    }

    .box-v5 .contents-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 요소 정가운데 */
        text-align: center;
        row-gap: 20px;
        width: 100%;
    }

    .box-v5 .contents-wrap .img-wrap i {
        width: 120px;
        height: 120px;
    }

    .box-v5 .contents-wrap .img-wrap i svg {
        width: 64px;
        height: 64px;
        stroke-width: 4px;
        /* somewhat thinner than PC 6px */
    }

    .box-v5 .contents-wrap .txt-wrap {
        position: static;
        transform: none;
        opacity: 1;
        padding: 0;
    }

    .box-v5 .contents-wrap .txt-wrap h4 {
        color: var(--main-heavy-03);
    }

    .box-v5 .contents-wrap .txt-wrap p {
        color: var(--main-heavy-01);
    }

    .box-v5 .contents-wrap:hover .img-wrap i {
        background-color: var(--main-heavy-01);
        opacity: 1;
    }

    .box-v5 .contents-wrap:hover .txt-wrap {
        opacity: 1;
    }

    /* --- NEWS --- */
    article.news {
        padding: 80px 20px;
    }

    .news .contents {
        padding: 50px 20px;
    }

    .box-v6 {
        width: 100%;
    }

    /* --- PARTNERS --- */
    .partners ul.contents {
        flex-direction: column;
        row-gap: 20px;
    }

    /* --- CONTACT --- */
    article.contact {
        flex-direction: column;
    }

    .contact .contents-area {
        padding: 60px 20px;
    }

    .contact .img-area {
        height: 350px;
    }

    /* --- FOOTER --- */
    footer {
        padding: 60px 0;
    }

    footer .logo a {
        width: 200px;
    }

    footer ul {
        column-gap: 16px;
    }

    /* --- SCROLL ANIMATION (태블릿에서 애니메이션 거리 축소) --- */
    .scroll-ani {
        transform: translateY(20px);
    }
}


/***********************************************************/
/* ========== MOBILE (~799px) ========== */
/***********************************************************/
@media all and (max-width: 799px) {

    /* --- style.css 변수 재할당 (타이포그래피 + 컨테이너) --- */
    :root {
        h2 {
            font-size: var(--mobile-size-h2);
            line-height: var(--mobile-line-height-h2);
        }

        h3 {
            font-size: var(--mobile-size-h3);
            line-height: var(--mobile-line-height-h3);
        }

        h4 {
            font-size: var(--mobile-size-h4);
            line-height: var(--mobile-line-height-h4);
        }

        p.large {
            font-size: var(--mobile-size-p_large);
            line-height: var(--mobile-line-height-p_large);
        }

        p.large.bold {
            font-size: var(--mobile-size-p_large_700);
            line-height: var(--mobile-line-height-p_large_700);
        }

        p,
        li {
            font-size: var(--mobile-size-p_standard);
            line-height: var(--mobile-line-height-p_standard);
        }

        p.small {
            font-size: var(--mobile-size-p_small);
            line-height: var(--mobile-line-height-p_small);
        }

        .inner {
            width: var(--mobile-width);
            max-width: var(--mobile-max-width);
            padding: var(--mobile-padding);
        }
    }

    /* --- HEADER --- */
    header {
        height: 60px;
    }

    .header-wrapper .logo a {
        height: 40px;
    }

    .header-wrapper .site-map-btn i {
        width: 40px;
        height: 40px;
        padding: 6px;
    }

    header .site-map {
        padding-top: 60px;
    }

    header .site-map .inner .top {
        height: 60px;
    }

    header .site-map .inner .top i {
        width: 40px;
        height: 40px;
        padding: 6px;
    }

    /* 사이트맵 리스트 - 모바일: 세로 배치 */
    .site-map .list-wrap {
        flex-direction: column;
        row-gap: 0;
        padding: 10px 0 20px;
    }

    .site-map .list-wrap li~li::before {
        display: none;
    }

    .site-map .list-wrap li.line {
        width: 100%;
        justify-content: center;
        padding: 14px 0;
    }

    .site-map .list-wrap li.line~li.line {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }







    /* --- MAIN HERO --- */
    main {
        height: 650px;
    }

    main .wrapper {
        padding: 40px 16px;
    }

    main .wrapper .txt-wrap {
        margin-bottom: 20px;
    }

    main .wrapper .btn-wrap {
        flex-direction: column;
        row-gap: 12px;
        align-items: flex-start;
        /* 버튼이 너비 전체를 차지하지 않도록 함 */
    }

    main .wrapper .btn-wrap .btn-main {
        margin-right: 0;
        padding: 12px 20px;
        column-gap: 8px;
        justify-content: center;
        width: fit-content;
        font-size: 14px;
    }

    main .wrapper .btn-wrap .btn-main i {
        width: 16px;
        height: 16px;
    }

    /* --- WHOLE CONTENTS --- */
    .whole-contents .top-wrapper {
        row-gap: 80px;
    }

    .property {
        height: 50px;
    }

    .property .cycle-wrap,
    .property .cycle p {
        column-gap: 14px;
        font-size: 14px;
    }

    .container {
        row-gap: 100px;
        margin: 80px 0;
    }

    .key-solution {
        height: 200px;
        padding: 0 16px;
    }

    /* --- BUSINESS --- */
    article.business {
        padding: 0 16px;
    }

    .business .box-wrap {
        flex-direction: column;
        row-gap: 16px;
    }

    .box-v1 {
        height: 300px;
        padding: 24px;
    }

    .title-v1 {
        margin-bottom: 30px;
    }

    .title-v2 {
        margin-bottom: 30px;
    }

    /* --- TRADE --- */
    article.trade {
        padding: 40px 16px;
    }

    .trade .img-box {
        height: 250px;
        margin-bottom: 30px;
    }

    .trade ul {
        flex-direction: column;
        row-gap: 30px;
    }

    .box-v2 {
        row-gap: 14px;
    }

    .box-v2 i {
        width: 56px;
        height: 56px;
        border-radius: 28px;
        padding: 10px;
    }

    /* --- MSG --- */
    article.msg {
        flex-direction: column;
    }

    .msg .img-area {
        height: 250px;
    }

    .msg .txt-area {
        padding: 40px 16px;
    }

    .msg .txt-area h4 {
        margin-bottom: 20px;
    }

    .msg .txt-area .btn {
        padding: 14px 22px;
        column-gap: 10px;
    }

    /* --- PLATFORM --- */
    .platform ul.content {
        flex-direction: column;
        row-gap: 16px;
    }

    .box-v3 .img-area {
        height: 200px;
    }

    /* --- PROJECT --- */
    article.project {
        padding: 0 16px;
    }

    .project .title-wrap {
        margin-bottom: 30px;
    }

    .project .title-wrap h2 {
        margin-bottom: 20px;
    }

    .project .title-wrap .btn {
        padding: 14px 28px;
    }

    .project .title-wrap .btn p {
        font-size: 18px;
        line-height: 18px;
    }

    .project ul.contents {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .box-v4 {
        height: 350px;
    }

    .box-v4 .wrapper .title-area {
        padding: 14px 24px;
    }

    .box-v4 .wrapper .title-area i {
        width: 36px;
        height: 36px;
    }

    .box-v4 .wrapper .txt-area.active {
        padding: 24px;
    }

    .project ul.contents .box-v4::after {
        top: 70px;
    }

    /* --- INVEST --- */
    article.invest {
        flex-direction: column;
        padding: 0 16px;
    }

    .invest .title-v2 {
        flex: unset;
        margin-bottom: 30px;
    }

    .invest .contents {
        flex: unset;
    }

    .invest ul.box-wrap .box-v5 {
        aspect-ratio: auto;
        /* height: 176px; */
        padding: 10px;
    }

    .box-v5 {
        padding: 30px 10px;
        align-items: center;
        justify-content: center;
    }

    .box-v5 .contents-wrap {
        justify-content: center;
        row-gap: 16px;
    }

    .box-v5 .contents-wrap .img-wrap i {
        width: 60px;
        height: 60px;
    }

    .box-v5 .contents-wrap .img-wrap i svg {
        width: 44px;
        height: 44px;
        stroke-width: 2px;
    }

    .box-v5 .contents-wrap .txt-wrap {
        padding: 0;
    }

    .box-v5 .contents-wrap .txt-wrap p {
        font-size: var(--mobile-size-p_small);
        line-height: var(--mobile-line-height-p_small);
    }

    /* --- NEWS --- */
    article.news {
        padding: 40px 16px;
    }

    .news .contents {
        padding: 40px 16px;
    }

    .news .contents .title-wrap {
        margin-bottom: 20px;
    }

    .news .contents .title-wrap h3 {
        margin-bottom: 20px;
    }

    .news .contents .btn {
        padding: 14px 24px;
    }

    .news .contents .btn p {
        font-size: 16px;
        line-height: 20px;
    }

    .box-v6 {
        width: 100%;
        padding: 20px;
    }

    .box-v6 .img-wrap {
        padding: 12px 18px;
        height: 56px;
        margin-bottom: 24px;
    }

    /* --- PARTNERS --- */
    .partners ul.contents {
        flex-direction: column;
        row-gap: 16px;
    }

    .box-v7 .img-area {
        height: 200px;
    }

    /* --- CONTACT --- */
    article.contact {
        flex-direction: column-reverse;
    }

    .contact .contents-area {
        padding: 40px 16px;
    }

    .contact .contents-area h3 {
        margin-bottom: 20px;
    }

    .contact .img-area {
        height: 250px;
    }

    /* --- FOOTER --- */
    footer {
        padding: 50px 0;
    }

    footer .inner {
        flex-direction: column;
        align-items: center;
        row-gap: 30px;
    }

    footer .logo-area {
        padding-top: 0;
        text-align: center;
    }

    footer .logo a {
        width: 180px;
    }

    footer .txt-area {
        text-align: center;
    }

    footer ul {
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 16px;
        row-gap: 8px;
    }

    /* --- SCROLL ANIMATION (모바일에서 애니메이션 거리 축소) --- */
    .scroll-ani {
        transform: translateY(15px);
    }
}