/* =========================================================
   HERO
========================================================= */

#hchomeHero,
#hchomeHero * {
    box-sizing:border-box;
}


#hchomeHero {

    position:relative;

    width:100%;

    height:100vh;

    min-height:650px;

    overflow:hidden;

    background:#111;

    color:#fff;

}


/* =========================================================
   SLIDES
========================================================= */

.hchome-slides {

    position:absolute;

    inset:0;

}


.hchome-slide {

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    z-index:1;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}


.hchome-slide.active {

    opacity:1;

    visibility:visible;

    z-index:2;

}

/* =========================================================
   YOUTUBE FULL COVER
========================================================= */

.hchome-slide-youtube {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}


/* 유튜브 영상 */

.hchome-slide-youtube iframe {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 177.78vh;
    height: 100vh;

    min-width: 100%;
    min-height: 100%;

    transform: translate(-50%, -50%);

    border: 0;

    pointer-events: none;
}


/* 오버레이 */

.hchome-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}


/* 콘텐츠 */

.hchome-slide-content {
    position: absolute;
    z-index: 2;
}

/* =========================================================
   BACKGROUND
========================================================= */

.hchome-slide-bg {

    position:absolute;

    inset:-20px;

    background-position:center;

    background-size:cover;

    background-repeat:no-repeat;

    transform:scale(1.08);

    transition:
        transform 5.8s ease;

}


.hchome-slide.active
.hchome-slide-bg {

    transform:scale(1);

}


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

.hchome-slide-overlay {

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(5,20,35,.82) 0%,
            rgba(5,20,35,.55) 40%,
            rgba(5,20,35,.18) 100%
        );

}


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

.hchome-slide-content {

    position:absolute;

    top:50%;

    left:8%;

    width:700px;

    max-width:80%;

    transform:
        translateY(-45%);

}


.hchome-slide-label {

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:24px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.2em;

}


.hchome-slide-label::before {

    content:"";

    width:35px;

    height:1px;

    background:#fff;

}


.hchome-slide-content h2 {

    margin:0;

    font-size:
        clamp(42px,5vw,76px);

    line-height:1.16;

    font-weight:300;

    letter-spacing:-.06em;

    word-break:keep-all;

}


.hchome-slide-content h2 strong {

    font-weight:750;

}


.hchome-slide-content p {

    margin:28px 0 34px;

    font-size:17px;

    line-height:1.8;

    color:rgba(255,255,255,.82);

    word-break:keep-all;

}


.hchome-slide-button {

    display:inline-flex;

    align-items:center;

    gap:35px;

    height:54px;

    padding:0 20px 0 24px;

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

    color:#fff;

    text-decoration:none;

    font-size:12px;

    font-weight:700;

    letter-spacing:.12em;

    transition:.3s;

}


.hchome-slide-button span {

    font-size:20px;

    transition:.3s;

}


.hchome-slide-button:hover {

    background:#123b63;

    border-color:#123b63;

}


.hchome-slide-button:hover span {

    transform:translateX(5px);

}


/* =========================================================
   LEFT / RIGHT BUTTON
========================================================= */

.hchome-slider-buttons {

    position:absolute;

    right:7%;

    top:50%;

    z-index:20;

    display:flex;

    flex-direction:column;

    gap:10px;

    transform:translateY(-50%);

}


.hchome-slider-buttons button {

    width:58px;

    height:58px;

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

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

    color:#fff;

    font-size:22px;

    cursor:pointer;

    backdrop-filter:blur(8px);

    transition:.3s;

}


.hchome-slider-buttons button:hover {

    background:#123b63;

    border-color:#123b63;

}


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

.hchome-slider-bottom {

    position:absolute;

    left:8%;

    right:8%;

    bottom:40px;

    z-index:20;

    display:flex;

    align-items:center;

}


/* =========================================================
   COUNT
========================================================= */

.hchome-slider-count {

    display:flex;

    align-items:center;

    gap:12px;

    min-width:90px;

}


.hchome-slider-count strong {

    font-size:18px;

}


.hchome-slider-count span {

    width:25px;

    height:1px;

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

}


.hchome-slider-count small {

    font-size:11px;

    color:rgba(255,255,255,.55);

}


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

.hchome-progress {

    display:flex;

    align-items:center;

    gap:25px;

    width:650px;

    max-width:100%;

}


.hchome-progress-item {

    display:flex;

    align-items:center;

    gap:12px;

    flex:1;

    padding:0;

    border:0;

    background:none;

    cursor:pointer;

}


.hchome-progress-item b {

    flex:0 0 auto;

    font-size:11px;

    color:#fff;

    opacity:.45;

}


.hchome-progress-item.active b {

    opacity:1;

}


.hchome-progress-item > span {

    position:relative;

    display:block;

    width:100%;

    height:2px;

    overflow:hidden;

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

}


.hchome-progress-item i {

    position:absolute;

    left:0;

    top:0;

    width:0%;

    height:100%;

    background:#fff;

}


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

@media(max-width:768px) {

    #hchomeHero {

        height:100svh;

        min-height:600px;

    }


    .hchome-slide-content {

        left:7%;

        width:86%;

        max-width:none;

    }


    .hchome-slide-label {

        font-size:10px;

        margin-bottom:18px;

    }


    .hchome-slide-content h2 {

        font-size:
            clamp(34px,9vw,48px);

        line-height:1.2;

    }


    .hchome-slide-content p {

        margin:20px 0 25px;

        font-size:14px;

    }


    .hchome-slide-button {

        height:50px;

        font-size:11px;

    }


    .hchome-slider-buttons {
        border:0px solid red;

        top:auto;

        left:7%;

        bottom:110px;

        flex-direction:row;

        transform:none;

    }


    .hchome-slider-buttons button {

        width:45px;

        height:45px;

        font-size:17px;

    }


    .hchome-slider-bottom {

        left:7%;

        right:7%;

        bottom:25px;

    }


    .hchome-slider-count {

        display:none;

    }


    .hchome-progress {

        gap:8px;

        width:100%;

    }


    .hchome-progress-item {

        gap:6px;

    }


    .hchome-progress-item b {

        font-size:9px;

    }

}