/* =========================================
   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: none;
}


/* =========================================
   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;
}