/* =========================================================
   HCHOME SIMPLE GALLERY
========================================================= */

#hchome-gallery,
#hchome-gallery * {

    box-sizing:border-box;

}


#hchome-gallery {

    position:relative;

    width:100%;

    padding:

        clamp(90px, 9vw, 150px)

        0;

    background:#fff;

    color:#151515;

    font-family:

        Pretendard,
        "Noto Sans KR",
        Arial,
        sans-serif;

    overflow:hidden;

}


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

.hchome-gallery-inner {

    width:100%;

}


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

.hchome-gallery-header {

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    padding:

        0

        5vw;

    margin-bottom:55px;

}


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

.hchome-gallery
.hchome-section-label {

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:25px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.14em;

    color:#777;

}


.hchome-gallery
.hchome-section-number {

    color:#111;

    font-size:13px;

}


.hchome-gallery
.hchome-section-line {

    width:42px;

    height:1px;

    background:#222;

}


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

.hchome-gallery-title {

    margin:0;

    font-size:

        clamp(38px, 4.5vw, 72px);

    line-height:1.15;

    font-weight:300;

    letter-spacing:-.065em;

}


.hchome-gallery-title strong {

    font-weight:800;

}


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

.hchome-gallery-more {

    display:flex;

    align-items:center;

    gap:14px;

    padding-bottom:8px;

    border-bottom:

        1px solid #111;

    color:#111;

    text-decoration:none;

    font-size:11px;

    font-weight:700;

    letter-spacing:.1em;

    transition:.25s ease;

}


.hchome-gallery-more strong {

    font-size:20px;

    font-weight:300;

    transition:.25s ease;

}


.hchome-gallery-more:hover {

    gap:20px;

}


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

.hchome-gallery-slider-wrap {

    position:relative;

    width:100%;

}


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

.hchome-gallery-slider {

    display:flex;

    gap:22px;

    padding:

        0

        5vw;

    overflow-x:auto;

    scroll-behavior:smooth;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

}


.hchome-gallery-slider::-webkit-scrollbar {

    display:none;

}


/* =========================================================
   ITEM
========================================================= */

.hchome-gallery-item {

    flex:

        0 0

        calc(
            (100vw - 10vw - 66px)
            / 4
        );

    min-width:250px;

    scroll-snap-align:start;

}


/* =========================================================
   LINK
========================================================= */

.hchome-gallery-link {

    display:block;

    color:#111;

    text-decoration:none;

}


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

.hchome-gallery-image {

    position:relative;

    width:100%;

    aspect-ratio:

        4 / 3;

    overflow:hidden;

    background:#f1f1f1;

}


.hchome-gallery-image img {

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform .6s ease;

}


.hchome-gallery-item:hover
.hchome-gallery-image img {

    transform:

        scale(1.04);

}


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

.hchome-gallery-info {
    text-align:center;
    padding-top:18px;

}


.hchome-gallery-info h3 {

    margin:0;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-size:

        clamp(17px, 1.25vw, 21px);

    line-height:1.4;

    font-weight:700;

    letter-spacing:-.04em;

}


/* =========================================================
   META
========================================================= */

.hchome-gallery-meta {
    
    
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-top: 10px;

    color: #999;

    font-size: 11px;

    font-weight: 400;

}


.hchome-gallery-meta i {

    display:block;

    width:2px;

    height:2px;

    border-radius:50%;

    background:#bbb;

}


/* =========================================================
   NAV BUTTON
========================================================= */

.hchome-gallery-nav {

    position:absolute;

    top:

        calc(
            (
                (100vw - 10vw - 66px)
                / 4
            )
            * .375
        );

    z-index:10;

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:

        1px solid rgba(0,0,0,.12);

    background:

        rgba(255,255,255,.95);

    color:#111;

    cursor:pointer;

    font-size:21px;

    transition:.25s ease;

}


.hchome-gallery-nav:hover {

    background:#111;

    border-color:#111;

    color:#fff;

}


.hchome-gallery-prev {

    left:2vw;

}


.hchome-gallery-next {

    right:2vw;

}


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

.hchome-gallery-bottom {

    display:flex;

    align-items:center;

    gap:25px;

    padding:

        45px

        5vw

        0;

}


.hchome-gallery-bottom > span {

    flex:0 0 auto;

    color:#999;

    font-size:9px;

    font-weight:700;

    letter-spacing:.15em;

}


/* =========================================================
   PROGRESS
========================================================= */

.hchome-gallery-progress {

    position:relative;

    flex:1;

    height:1px;

    background:#e5e5e5;

    overflow:hidden;

}


.hchome-gallery-progress span {

    position:absolute;

    top:0;

    left:0;

    width:20%;

    height:100%;

    background:#111;

    transition:

        width .3s ease;

}


/* =========================================================
   EMPTY
========================================================= */

.hchome-gallery-empty {

    width:100%;

    min-height:400px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:#f7f7f7;

    text-align:center;

}


.hchome-gallery-empty span {

    color:#aaa;

    font-size:10px;

    font-weight:700;

    letter-spacing:.15em;

}


.hchome-gallery-empty p {

    margin:10px 0 0;

    color:#777;

    font-size:14px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px) {


    .hchome-gallery-item {

        flex:

            0 0

            calc(
                (100vw - 10vw - 22px)
                / 2
            );

    }


    .hchome-gallery-nav {

        top:

            calc(
                (
                    (100vw - 10vw - 22px)
                    / 2
                )
                * .375
            );

    }

}


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

@media (max-width:650px) {


    #hchome-gallery {

        padding:

            80px

            0;

    }


    .hchome-gallery-header {

        padding:

            0

            20px;

        margin-bottom:35px;

    }


    .hchome-gallery
    .hchome-section-label {

        margin-bottom:18px;

    }


    .hchome-gallery-title {

        font-size:

            clamp(34px, 10vw, 48px);

    }


    .hchome-gallery-more {

        flex:0 0 auto;

        gap:8px;

        font-size:9px;

    }


    .hchome-gallery-more strong {

        font-size:17px;

    }


    .hchome-gallery-slider {

        gap:14px;

        padding:

            0

            20px;

    }


    .hchome-gallery-item {

        flex:

            0 0

            78vw;

        min-width:0;

    }


    .hchome-gallery-image {

        aspect-ratio:

            4 / 3;

    }


    .hchome-gallery-info {

        padding-top:15px;

    }


    .hchome-gallery-info h3 {

        font-size:18px;

    }


    .hchome-gallery-meta {

        margin-top:8px;

        font-size:10px;

    }


    .hchome-gallery-nav {

        top:

            calc(
                78vw * .375
            );

        width:44px;

        height:44px;

        font-size:17px;

    }


    .hchome-gallery-prev {

        left:5px;

    }


    .hchome-gallery-next {

        right:5px;

    }


    .hchome-gallery-bottom {

        gap:15px;

        padding:

            30px

            20px

            0;

    }


    .hchome-gallery-bottom > span {

        font-size:8px;

    }

}