/* =========================================
   Main Video Section
========================================= */

.main_video_section {
    position: relative;

    width: 100%;

    height: clamp(
        1800px,
        220vh,
        2600px
    );
}


/* =========================================
   Intro
========================================= */

.main_video_intro {
    position: absolute;
    z-index: 1;

    top: 0;
    left: 0;

    width: 100%;
    height: 100svh;
    height:calc(100svh - 90px);

    padding: 0 8%;
    padding:0 8% 90px;


    display: flex;
    align-items: center;

    pointer-events: none;
}


.main_video_text {
    margin-top: 80px;
}


.main_video_text h2 {
    margin: 0;

    font-size: clamp(42px, 4vw, 76px);
    font-size:clamp(42px, 4.6vw, 86px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.04em;
}


.main_video_text p {
    margin: 40px 0 0;

    font-size: clamp(16px, 1.3vw, 24px);
    line-height: 1.5;
    font-weight: 500;

    color: #555;
}


.hero_bottom{display: flex;flex-flow: column nowrap;justify-content: center;align-items: center;gap: 100px;position:absolute;left:50%;bottom:40px;z-index: 3;transform:translate(-50%,0);}
.hero_bm_icon{position: relative;width:117px;height:117px;}
.scroll_down_circle{position:absolute;top:50%;left:50%;width:100px;height:100px;animation: circle-spin infinite forwards 10s linear;}
.scroll_down_arrow{position:absolute;top:30%;left:50%;width:10px;animation: arrow-up-down infinite forwards 2s ease-in-out;}

@keyframes circle-spin{
  0% {transform: translate(-50%,-50%) rotate(0);}
  100% {transform: translate(-50%,-50%) rotate(360deg);}
}

@keyframes arrow-up-down{
  0% {transform: translateX(-50%) translateY(-6px);}
  35% {transform:translateX(-50%)  translateY(6px);}
  75% {transform:translateX(-50%)  translateY(-6px);}
  100%{transform:translateX(-50%) translateY(-6px) ;}
}




/* =========================================
   Sticky
========================================= */

.main_video_sticky {
    position: sticky;

    top: 0;

    width: 100%;
    height: 100svh;

    overflow: hidden;

    z-index: 2;

    pointer-events: auto;
}


/* =========================================
   Video
========================================= */

.main_video_wrap {
    position: absolute;

    width: 550px;
    height: 330px;

    top: 50%;
    right: 8%;

    transform: translateY(-50%);

    overflow: hidden;

    will-change:
        width,
        height,
        top,
        right;
}


.main_video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;
}

.main_video_mp4 {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}


@media (max-width: 1260px) and (min-width: 769px) {

    .main_video_section {
        height: clamp(
            1700px,
            230vh,
            2300px
        );
    }

    .main_video_intro {
        align-items: flex-end;

        padding: 0 5% 8%;
    }


    .main_video_text {
        margin-top: 0;
    }


    .main_video_text h2 {
        font-size: clamp(38px, 4.5vw, 60px);
    }


    .main_video_text p {
        margin-top: 25px;

        font-size: 17px;
    }
    .main_video_text p .mo_show{
        display:block;
    }


    .hero_bottom{bottom:0;}

}


@media (max-width: 768px) {

    .main_video_section {
        height: clamp(
            1200px,
            180vh,
            1600px
        );
    }


    /* =====================================
       Intro
       글자 → 상단 / 가운데 정렬
    ===================================== */

    .main_video_intro {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 100svh;
        height:60svh;

        padding: 100px 20px 0;
        padding:20px;

        display: flex;
        flex-flow:column nowrap;
        align-items: center;
        justify-content: center;

        text-align: center;
    }


    .main_video_text {
        width: 100%;
        margin: 0;
    }


    .main_video_text h2 {
        font-size: clamp(32px, 8vw, 46px);
        line-height: 1.08;
        letter-spacing: -0.04em;
    }


    .main_video_text p {
        margin-top: 20px;

        font-size: 15px;
        line-height: 1.5;
    }

    .main_video_text p .mo_show{display:none;}

    .hero_bottom{position:static;margin-top:20px;transform:translate(0,0);}
    .hero_bm_icon{width:80px;height:80px;}
    .scroll_down_circle{width:60px;height:60px;}
    .scroll_down_arrow{width:6px;}


    /* =====================================
       Sticky
    ===================================== */

    .main_video_sticky {
        position: sticky;

        top: 0;

        width: 100%;
        height: 100svh;

        overflow: hidden;
    }


    /* =====================================
       Video
       → 화면 하단 / 가운데
    ===================================== */

    .main_video_wrap {

        width: 90vw;
        height: calc(90vw * 9 / 16);

        top: auto;
        right: auto;
        bottom: 90px;
        left: 50%;

        transform: translateX(-50%);
    }

}



@media (max-width: 767px) and (min-width: 540px) {
    .main_video_intro {
        height: 100svh;
        padding:20px;
        align-items: center;
        justify-content: flex-start;
    }
}

@media (max-width: 539px) {

    .main_video_intro {
        height:60svh;
        justify-content:center;
    }
    .main_video_text p .mo_show_tiny{display:inline-block;}
}


@media (max-width: 380px) {

    .main_video_intro {
        height:60svh;
        padding: 0 20px;
        justify-content:center;
    }

    .main_video_text h2{font-size:clamp(24px, 8vw, 46px);}
    .main_video_text p{margin-top:10px;}
    .main_video_text p .mo_show{display:inline-block;}
    .hero_bottom{margin-top:10px;}
}


.mainbanner_btn_mod{position: absolute;bottom: 10px;right: 10px;z-index:2;}
.mainbanner_btn_mod a{display: inline-block;padding: 8px 16px;background: #e8e8e8;}


/* =========================================
   Vimeo Main Video
========================================= */
.main_video_vimeo {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;

    pointer-events: none;

    container-type: size;
}


.main_video_vimeo iframe {
    position: absolute;

    top: 50%;
    left: 50%;

    width: max(
        100cqw,
        calc(100cqh * 16 / 9)
    );

    height: max(
        100cqh,
        calc(100cqw * 9 / 16)
    );

    border: 0;

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

    pointer-events: none;
}


/* =========================================
   Main Video Audio Control
========================================= */

.main_video_audio {
    position: absolute;

    z-index: 20;

    left: 24px;
    bottom: 24px;

    display: flex;

    flex-direction: row;
    align-items: center;

    gap: 10px;

    pointer-events: auto;
}



/* =========================================
   Sound Button
========================================= */

.main_video_sound {
    position: relative;

    display: flex;

    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin: 0;
    padding: 0;

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

    border-radius: 50%;

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

    color: #fff;

    cursor: pointer;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    appearance: none;
    -webkit-appearance: none;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.main_video_sound:hover {
    background:
        rgba(0,0,0,.6);

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

    transform:
        scale(1.05);
}


.main_video_sound_icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 21px;
    height: 21px;
}


.main_video_sound_icon svg {
    display: block;

    width: 100%;
    height: 100%;
}



/* 기본 : 음소거 */

.main_video_sound_muted {
    display: flex;
}


.main_video_sound_on {
    display: none;
}



/* SOUND ON */

.main_video_sound.is_sound_on
.main_video_sound_muted {
    display: none;
}


.main_video_sound.is_sound_on
.main_video_sound_on {
    display: flex;
}



/* =========================================
   Volume
========================================= */

.main_video_volume {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 0;
    height: 40px;

    padding: 0;

    overflow: hidden;

    border-radius: 30px;

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

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    opacity: 0;

    visibility: hidden;

    transform:
        translateX(10px);

    transition:
        width .3s ease,
        padding .3s ease,
        opacity .25s ease,
        visibility .25s ease,
        transform .3s ease;
}



/* 소리가 켜지면 슬라이더 펼침 */

.main_video_audio.is_sound_on
.main_video_volume {
    width: 130px;

    padding:
        0 16px;

    opacity: 1;

    visibility: visible;

    transform:
        translateX(0);
}



/* =========================================
   Volume Range
========================================= */

.main_video_volume_range {
    --volume-percent: 50%;

    width: 100%;
    height: 20px;

    margin: 0;
    padding: 0;

    background: transparent;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}



/* Chrome / Safari / Edge */

.main_video_volume_range::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;

    border-radius: 10px;

    background:
        linear-gradient(
            to right,
            #fff 0%,
            #fff var(--volume-percent),
            rgba(255,255,255,.35)
                var(--volume-percent),
            rgba(255,255,255,.35) 100%
        );
}


.main_video_volume_range::-webkit-slider-thumb {
    width: 14px;
    height: 14px;

    margin-top: -5.5px;

    border: 0;
    border-radius: 50%;

    background: #fff;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}



/* Firefox */

.main_video_volume_range::-moz-range-track {
    width: 100%;
    height: 3px;

    border: 0;
    border-radius: 10px;

    background:
        rgba(255,255,255,.35);
}


.main_video_volume_range::-moz-range-progress {
    height: 3px;

    border-radius: 10px;

    background: #fff;
}


.main_video_volume_range::-moz-range-thumb {
    width: 14px;
    height: 14px;

    border: 0;
    border-radius: 50%;

    background: #fff;

    cursor: pointer;
}



/* =========================================
   Tooltip
========================================= */

.main_video_sound_tooltip {
    position: absolute;

    right: 58px;
    top: 50%;

    width: max-content;

    padding:
        7px 10px;

    border-radius: 5px;

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

    color: #fff;

    font-size: 13px;
    font-weight: 500;

    line-height: 1;

    white-space: nowrap;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-50%)
        translateX(5px);

    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}


.main_video_sound:hover
.main_video_sound_tooltip {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}


/*
 * 볼륨바가 열려 있을 때는
 * 툴팁이 겹치므로 숨김
 */

.main_video_audio.is_sound_on
.main_video_sound_tooltip {
    display: none;
}



/* =========================================
   Tablet
========================================= */

@media (max-width: 1260px) {

    .main_video_audio {
        right: 18px;
        bottom: 18px;
    }


    .main_video_sound {
        width: 44px;
        height: 44px;
    }


    .main_video_sound_icon {
        width: 19px;
        height: 19px;
    }


    .main_video_audio.is_sound_on
    .main_video_volume {
        width: 115px;

        padding:
            0 14px;
    }

}



/* =========================================
   Mobile
========================================= */

@media (max-width: 768px) {

    .main_video_audio {
        right: 14px;
        bottom: 14px;

        gap: 7px;
    }


    .main_video_sound {
        width: 42px;
        height: 42px;
    }


    .main_video_sound_icon {
        width: 18px;
        height: 18px;
    }


    .main_video_audio.is_sound_on
    .main_video_volume {
        width: 105px;

        padding:
            0 12px;
    }


    .main_video_sound_tooltip {
        display: none;
    }

}