/* =========================================================
   BUSINESS SECTION
========================================================= */

#hchome-business,
#hchome-business * {
    box-sizing:border-box;
}

#hchome-business {

    --business-bg:#f7f7f4;
    --business-text:#111;
    --business-muted:#666;
    --business-line:#d7d7d2;

    position:relative;

    margin-top:-50px;

    width:100%;

    /*padding:
        clamp(100px, 10vw, 170px)
        5vw;*/

    background:var(--business-bg);

    overflow:hidden;

    font-family:
        Pretendard,
        "Noto Sans KR",
        Arial,
        sans-serif;

        

}


/* =========================================================
   INNER
========================================================= */

.hchome-business-inner {

    width:100%;

    max-width:1480px;

    margin:0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.hchome-business-head {

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.hchome-business-head
.hchome-section-label {

    justify-content:center;

    margin-bottom:35px;

}

.hchome-business-head
.hchome-about-title {

    margin:0;

    font-size:
        clamp(38px, 4.5vw, 68px);

    line-height:1.25;

    letter-spacing:-.06em;

    font-weight:400;

}

.hchome-business-head
.hchome-about-title strong {

    font-weight:800;

}

.hchome-business-head
.hchome-about-desc {

    max-width:700px;

    margin:32px auto 0;

    font-size:
        clamp(16px, 1.1vw, 19px);

    line-height:1.85;

    color:#555;

    letter-spacing:-.025em;

}

.hchome-business-head
.hchome-about-desc + .hchome-about-desc {

    margin-top:12px;

}


/* =========================================================
   TABS
========================================================= */

.hchome-business-tabs {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:70px;

    border-bottom:1px solid var(--business-line);

}

.hchome-business-tab {

    position:relative;

    min-width:110px;

    padding:17px 25px;

    border:0;

    background:transparent;

    color:#999;

    font-family:inherit;

    font-size:14px;

    font-weight:700;

    letter-spacing:.08em;

    cursor:pointer;

    transition:.3s ease;

}

.hchome-business-tab::after {

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:100%;

    height:2px;

    background:#111;

    transform:scaleX(0);

    transform-origin:center;

    transition:.3s ease;

}

.hchome-business-tab:hover {

    color:#111;

}

.hchome-business-tab.active {

    color:#111;

}

.hchome-business-tab.active::after {

    transform:scaleX(1);

}


/* =========================================================
   SLIDER
========================================================= */

.hchome-business-slider-wrap {

    position:relative;

    margin-top:42px;

    display:flex;

    align-items:center;

    gap:25px;

}

.hchome-business-viewport {

    width:100%;

    overflow:hidden;

    touch-action:pan-y;

    cursor:grab;

}

.hchome-business-viewport.dragging {

    cursor:grabbing;

}

.hchome-business-track {

    display:flex;

    gap:24px;

    will-change:transform;

    transition:
        transform .65s cubic-bezier(.22,.61,.36,1);

}


/* =========================================================
   CARD
========================================================= */

.hchome-business-card {

    flex:
        0 0 calc(
            (100% - 48px) / 3
        );

    min-width:0;

    cursor:pointer;

}

.hchome-business-image {

    position:relative;

    width:100%;

    aspect-ratio:1.12 / 1;

    overflow:hidden;

    background:#ddd;

}

.hchome-business-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);

}

.hchome-business-card:hover
.hchome-business-image img {

    transform:scale(1.06);

}


/* NUMBER */

.hchome-business-number {

    position:absolute;

    left:20px;

    top:20px;

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.9);

    color:#111;

    font-size:12px;

    font-weight:800;

}


/* OPEN */

.hchome-business-open {

    position:absolute;

    right:20px;

    top:20px;

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.6);

    background:rgba(0,0,0,.3);

    color:#fff;

    font-size:19px;

    backdrop-filter:blur(6px);

    transition:.3s ease;

}

.hchome-business-card:hover
.hchome-business-open {

    background:#fff;

    color:#111;

}


/* =========================================================
   CARD CONTENT
========================================================= */

.hchome-business-card-content {

    padding:
        24px
        3px
        15px;

}

.hchome-business-category {

    display:block;

    margin-bottom:10px;

    color:#999;

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

}

.hchome-business-card-content h3 {

    margin:0;

    color:#111;

    font-size:
        clamp(21px, 1.5vw, 26px);

    line-height:1.4;

    letter-spacing:-.045em;

}

.hchome-business-card-content p {

    margin:12px 0 0;

    color:#666;

    font-size:
        clamp(14px, .95vw, 16px);

    line-height:1.7;

    letter-spacing:-.02em;

}


/* =========================================================
   ARROWS
========================================================= */

.hchome-business-arrow {

    flex:0 0 auto;

    width:54px;

    height:54px;

    border:1px solid #d0d0ca;

    background:transparent;

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:inherit;

    font-size:21px;

    cursor:pointer;

    transition:.3s ease;

}

.hchome-business-arrow:hover {

    background:#111;

    color:#fff;

    border-color:#111;

}

.hchome-business-arrow:disabled {

    opacity:.3;

    cursor:default;

}

.hchome-business-arrow:disabled:hover {

    background:transparent;

    color:#111;

    border-color:#d0d0ca;

}


/* =========================================================
   BOTTOM
========================================================= */

.hchome-business-bottom {

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:35px;

}

.hchome-business-progress {

    display:flex;

    align-items:center;

    gap:13px;

    font-size:12px;

    color:#aaa;

    letter-spacing:.1em;

}

.hchome-business-progress-current {

    color:#111;

    font-weight:800;

}

.hchome-business-progress-line {

    position:relative;

    width:100px;

    height:1px;

    background:#d0d0ca;

    overflow:hidden;

}

.hchome-business-progress-line i {

    position:absolute;

    left:0;

    top:0;

    height:100%;

    width:16.666%;

    background:#111;

    transition:.4s ease;

}

.hchome-business-guide {

    color:#aaa;

    font-size:10px;

    font-weight:700;

    letter-spacing:.14em;

}


/* =========================================================
   MODAL
========================================================= */

.hchome-business-modal {

    position:fixed;

    inset:0;

    z-index:100000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

}

.hchome-business-modal.active {

    opacity:1;

    visibility:visible;

}

.hchome-business-modal-bg {

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.86);

    backdrop-filter:blur(10px);

}

.hchome-business-modal-inner {

    position:relative;

    z-index:2;

    width:min(1100px,94vw);

    display:grid;

    grid-template-columns:1.15fr .85fr;

    background:#fff;

    transform:translateY(30px);

    transition:.45s ease;

}

.hchome-business-modal.active
.hchome-business-modal-inner {

    transform:translateY(0);

}

.hchome-business-modal-image {

    aspect-ratio:1.15 / 1;

    overflow:hidden;

    background:#ddd;

}

.hchome-business-modal-image img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.hchome-business-modal-content {

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:clamp(35px,5vw,75px);

}

.hchome-business-modal-content > span {

    color:#999;

    font-size:11px;

    font-weight:800;

    letter-spacing:.14em;

}

.hchome-business-modal-content h3 {

    margin:18px 0 0;

    color:#111;

    font-size:
        clamp(28px,3vw,46px);

    line-height:1.3;

    letter-spacing:-.05em;

}

.hchome-business-modal-content p {

    margin:25px 0 0;

    color:#666;

    font-size:16px;

    line-height:1.8;

}

.hchome-business-modal-number {

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:45px;

    padding-top:20px;

    border-top:1px solid #ddd;

}

.hchome-business-modal-number span {

    font-size:10px;

    color:#999;

}

.hchome-business-modal-number strong {

    font-size:18px;

    color:#111;

}

.hchome-business-modal-close {

    position:absolute;

    right:0;

    top:-58px;

    width:48px;

    height:48px;

    border:1px solid rgba(255,255,255,.35);

    background:rgba(0,0,0,.2);

    color:#fff;

    font-size:31px;

    font-weight:200;

    cursor:pointer;

    z-index:5;

}

.hchome-business-modal-close:hover {

    background:#fff;

    color:#111;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:900px) {

    #hchome-business {

        padding:
            90px
            25px;

    }

    .hchome-business-card {

        flex-basis:
            calc(
                (100% - 24px) / 2
            );

    }

    .hchome-business-slider-wrap {

        gap:12px;

    }

    .hchome-business-arrow {

        width:45px;

        height:45px;

        font-size:18px;

    }

    .hchome-business-modal-inner {

        grid-template-columns:1fr;

        max-height:90vh;

        overflow:auto;

    }

    .hchome-business-modal-image {

        aspect-ratio:1.5 / 1;

    }

    .hchome-business-modal-content {

        padding:30px;

    }

}


@media (max-width:600px) {

    #hchome-business {

        padding:
            80px
            18px;

    }

    .hchome-business-head
    .hchome-about-title {

        font-size:
            clamp(31px,8.5vw,42px);

        line-height:1.3;

    }

    .hchome-business-head
    .hchome-about-desc {

        font-size:16px;

        line-height:1.8;

    }

    .hchome-business-tabs {

        margin-top:45px;

        justify-content:flex-start;

        overflow-x:auto;

        scrollbar-width:none;

    }

    .hchome-business-tabs::-webkit-scrollbar {

        display:none;

    }

    .hchome-business-tab {

        min-width:auto;

        padding:
            15px
            17px;

        white-space:nowrap;

        font-size:12px;

    }

    .hchome-business-slider-wrap {

        margin-top:25px;

    }

    .hchome-business-card {

        flex-basis:100%;

    }

    .hchome-business-image {

        aspect-ratio:1.05 / 1;

    }

    .hchome-business-card-content {

        padding-top:20px;

    }

    .hchome-business-card-content h3 {

        font-size:21px;

    }

    .hchome-business-card-content p {

        font-size:15px;

    }

    .hchome-business-arrow {

        position:absolute;

        top:
            calc(
                50% - 40px
            );

        z-index:5;

        width:42px;

        height:42px;

        background:rgba(255,255,255,.9);

    }

    .hchome-business-prev {

        left:10px;

    }

    .hchome-business-next {

        right:10px;

    }

    .hchome-business-bottom {

        margin-top:20px;

    }

    .hchome-business-guide {

        display:none;

    }

    .hchome-business-progress-line {

        width:70px;

    }

    .hchome-business-modal {

        padding:15px;

    }

    .hchome-business-modal-inner {

        width:100%;

    }

    .hchome-business-modal-close {

        right:0;

        top:-52px;

    }

    .hchome-business-modal-content h3 {

        font-size:27px;

    }

    .hchome-business-modal-content p {

        font-size:15px;

    }

}