/* =========================================================
   ABOUT
========================================================= */

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

#hchome-about {

    --about-bg:#f5f5f2;
    --about-text:#111;
    --about-muted:#666;
    --about-line:#d8d8d3;

    position:relative;

    width:100%;

    padding:
        clamp(90px, 9vw, 170px)
        5vw;

    background:var(--about-bg);

    overflow:hidden;

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

}


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

.hchome-about-inner {

    width:100%;
    max-width:1480px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    gap:clamp(50px, 7vw, 130px);

    align-items:center;

}


/* =========================================================
   SECTION LABEL
========================================================= */

.hchome-section-label {

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:42px;

    font-size:15px;

    font-weight:700;

    letter-spacing:.14em;

    color:#111;

}

.hchome-section-number {

    font-size:17px;

    font-weight:700;

}

.hchome-section-line {

    width:48px;

    height:1px;

    background:#111;

}


/* =========================================================
   TITLE
========================================================= */

.hchome-about-title {

    margin:0;

    font-size:
        clamp(36px, 4vw, 64px);

    line-height:1.25;

    letter-spacing:-.055em;

    font-weight:400;

    color:var(--about-text);

}

.hchome-about-title strong {

    font-weight:800;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.hchome-about-desc {

    max-width:590px;

    margin:

        38px

        0

        0;

    font-size:
        clamp(17px, 1.15vw, 20px);

    line-height:1.85;

    letter-spacing:-.025em;

    color:#555;

}

.hchome-about-desc + .hchome-about-desc {

    margin-top:18px;

}


/* =========================================================
   KEYWORDS
========================================================= */

.hchome-about-keywords {

    display:flex;

    gap:35px;

    margin-top:48px;

    padding-top:25px;

    border-top:1px solid var(--about-line);

}

.hchome-about-keyword {

    display:flex;

    flex-direction:column;

    gap:7px;

}

.hchome-about-keyword strong {

    font-size:14px;

    color:#999;

}

.hchome-about-keyword span {

    font-size:14px;

    font-weight:800;

    letter-spacing:.08em;

    color:#111;

}


/* =========================================================
   VIEW MORE
========================================================= */

.hchome-about-more {

    display:inline-flex;

    align-items:center;

    gap:18px;

    margin-top:45px;

    padding-bottom:9px;

    border-bottom:1px solid #111;

    color:#111;

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    letter-spacing:.08em;

    transition:.3s ease;

}

.hchome-about-more-arrow {

    font-size:21px;

    line-height:1;

    transition:.3s ease;

}

.hchome-about-more:hover {

    gap:25px;

}

.hchome-about-more:hover
.hchome-about-more-arrow {

    transform:translate(3px,-3px);

}


/* =========================================================
   VISUAL
========================================================= */

.hchome-about-visual {

    position:relative;

    min-width:0;

}


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

.hchome-about-slider {

    position:relative;

    width:100%;

    aspect-ratio:1.25 / 1;

    overflow:hidden;

    background:#ddd;

}

.hchome-about-slide {

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transform:scale(1.035);

    transition:

        opacity .7s ease,

        transform 1.1s ease,

        visibility .7s ease;

    cursor:pointer;

}

.hchome-about-slide.active {

    opacity:1;

    visibility:visible;

    transform:scale(1);

}

.hchome-about-slide img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/* =========================================================
   OVERLAY
========================================================= */

.hchome-about-slide-overlay {

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.48),
            transparent 45%
        );

    pointer-events:none;

}


/* =========================================================
   CAPTION
========================================================= */

.hchome-about-slide-caption {

    position:absolute;

    left:34px;

    bottom:32px;

    color:#fff;

    z-index:2;

}

.hchome-about-slide-caption span {

    display:block;

    margin-bottom:8px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.15em;

    opacity:.8;

}

.hchome-about-slide-caption strong {

    display:block;

    font-size:
        clamp(21px, 2vw, 30px);

    font-weight:700;

    letter-spacing:-.03em;

}


/* =========================================================
   CONTROLS
========================================================= */

.hchome-about-controls {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:25px;

    margin-top:22px;

}

.hchome-about-prev,
.hchome-about-next {

    width:48px;

    height:48px;

    border:1px solid #cfcfc9;

    background:transparent;

    color:#111;

    cursor:pointer;

    font-size:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.25s ease;

}

.hchome-about-prev:hover,
.hchome-about-next:hover {

    background:#111;

    color:#fff;

    border-color:#111;

}


.hchome-about-counter {

    display:flex;

    align-items:center;

    gap:12px;

    font-size:13px;

    color:#999;

    letter-spacing:.08em;

}

.hchome-about-counter strong {

    color:#111;

}

.hchome-about-counter-line {

    width:35px;

    height:1px;

    background:#bbb;

}


/* =========================================================
   CLICK IMAGE
========================================================= */

.hchome-about-click {

    position:absolute;

    right:25px;

    top:25px;

    display:flex;

    align-items:center;

    gap:9px;

    padding:10px 14px;

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

    color:#fff;

    backdrop-filter:blur(8px);

    font-size:10px;

    font-weight:700;

    letter-spacing:.12em;

    pointer-events:none;

}


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

.hchome-about-modal {

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

}

.hchome-about-modal.active {

    opacity:1;

    visibility:visible;

}

.hchome-about-modal-bg {

    position:absolute;

    inset:0;

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

    backdrop-filter:blur(8px);

}

.hchome-about-modal-inner {

    position:relative;

    width:min(1200px, 92vw);

    height:min(800px, 86vh);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:2;

}

.hchome-about-modal-image-wrap {

    position:relative;

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}

.hchome-about-modal-image-wrap img {

    max-width:100%;

    max-height:100%;

    width:auto;

    height:auto;

    object-fit:contain;

    box-shadow:
        0 25px 80px rgba(0,0,0,.4);

}


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

.hchome-about-modal-info {

    position:absolute;

    left:20px;

    bottom:20px;

    display:flex;

    flex-direction:column;

    gap:6px;

    color:#fff;

    text-shadow:0 2px 10px rgba(0,0,0,.5);

}

.hchome-about-modal-info span {

    font-size:11px;

    letter-spacing:.15em;

    opacity:.7;

}

.hchome-about-modal-info strong {

    font-size:23px;

}


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

.hchome-about-modal-close {

    position:absolute;

    top:-25px;

    right:-25px;

    width:52px;

    height:52px;

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

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

    color:#fff;

    font-size:34px;

    font-weight:200;

    cursor:pointer;

    z-index:10;

    transition:.25s ease;

}

.hchome-about-modal-close:hover {

    background:#fff;

    color:#111;

}

.hchome-about-modal-prev,
.hchome-about-modal-next {

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

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

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

    color:#fff;

    font-size:24px;

    cursor:pointer;

    z-index:5;

    transition:.25s ease;

}

.hchome-about-modal-prev {

    left:-80px;

}

.hchome-about-modal-next {

    right:-80px;

}

.hchome-about-modal-prev:hover,
.hchome-about-modal-next:hover {

    background:#fff;

    color:#111;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1000px) {

    #hchome-about {

        padding:
            90px
            30px;

    }

    .hchome-about-inner {

        grid-template-columns:1fr;

        gap:60px;

    }

    .hchome-about-content {
        max-width:750px;

    }

    .hchome-about-visual {

        width:100%;

    }

    .hchome-about-slider {

        aspect-ratio:1.35 / 1;

    }

    .hchome-about-modal-prev {

        left:10px;

    }

    .hchome-about-modal-next {

        right:10px;

    }

    .hchome-about-modal-close {

        top:10px;

        right:10px;

    }

}


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

@media (max-width:600px) {
    .hchome-about-visual{
        border:0px solid red;
        margin-top:-90px;
    }
    #hchome-about {

        padding:
            75px
            20px;

    }

    .hchome-section-label {

        margin-bottom:28px;

        font-size:13px;

    }

    .hchome-about-title {

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

        line-height:1.3;

    }

    .hchome-about-desc {

        margin-top:27px;

        font-size:16px;

        line-height:1.8;

    }

    .hchome-about-keywords {

        gap:20px;

        margin-top:35px;

    }

    .hchome-about-keyword span {

        font-size:12px;

    }

    .hchome-about-more {

        margin-top:35px;

    }

    .hchome-about-slider {

        aspect-ratio:1 / 1.08;

    }

    .hchome-about-slide-caption {

        left:22px;

        bottom:23px;

    }

    .hchome-about-slide-caption strong {

        font-size:22px;

    }

    .hchome-about-click {

        right:15px;

        top:15px;

        padding:8px 10px;

        font-size:9px;

    }

    .hchome-about-controls {

        justify-content:space-between;

        margin-top:16px;

    }

    .hchome-about-prev,
    .hchome-about-next {

        width:44px;

        height:44px;

    }

    .hchome-about-modal {

        padding:15px;

    }

    .hchome-about-modal-inner {

        width:100%;

        height:80vh;

    }

    .hchome-about-modal-prev,
    .hchome-about-modal-next {

        width:44px;

        height:44px;

        font-size:18px;

    }

    .hchome-about-modal-info {

        left:10px;

        bottom:10px;

    }

    .hchome-about-modal-info strong {

        font-size:18px;

    }

}


/* =========================================================
   PREVENT BODY SCROLL WHEN MODAL OPEN
========================================================= */

body.hchome-about-modal-open {

    overflow:hidden;

}