@charset "utf-8";

#mainVisual{position:relative}
#mainVisual .main_bnr{position:relative;margin:auto;width:100%;height:100vh;background:#111}
#mainVisual .main_bnr:after{position:absolute;z-index:10;content:'';top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.5)}
#mainVisual .main_bnr .bg01{background-image:url(../images/main_banner01.webp)}
#mainVisual .main_bnr .bg02{background-image:url(../images/main_banner02.webp)}
#mainVisual .main_bnr .bg03{background-image:url(../images/main_banner03.webp)}
#mainVisual .main_bnr .bg{width:100%;height:100vh;transform:skewX(3deg);transition:all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1);background-size:cover}
#mainVisual .main_bnr li.on .bg{opacity:1;transform:skewX(0)}

#mainVisual .txt{position:absolute;z-index:10;bottom:17%;left:0;right:0;color:#fff}
#mainVisual .txt h2{font-size:var(--font-size-65);font-weight:700;line-height:1;white-space:pre-line;font-family:var(--e-font)}
#mainVisual .txt p{margin-top:30px;font-size:var(--font-size-xl);font-weight:700}
#mainVisual .inner{position:relative}
#mainVisual .pager{margin-top:50px}
#mainVisual .pager span{opacity:.3;position:relative;width:40px;height:40px;margin:0 5px;background-color:transparent;transition:all .3s}
#mainVisual .pager span.on{opacity:1}
#mainVisual .pager span:before{opacity:0;display:block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:45px;height:45px;border:1px solid rgba(255,255,255,.3);border-radius:50%;transition:all .3s}
#mainVisual .pager span.on:before{opacity:1;width:100%;height:100%}
#mainVisual .pager span:after{display:block;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border-radius:50%;background:#fff}

#mainVisual .mouse{position:absolute;bottom:0;right:0;display:flex;align-items:center;gap:10px}
#mainVisual .mouse .icon{position:relative;width:22px;height:36px;border:2px solid #fff;border-radius:19px}
#mainVisual .mouse .icon:after{content:"";position:absolute;top:10%;left:50%;transform:translateX(-50%);width:2px;height:6px;border-radius:3px;background-color:#fff;animation:mouse_scroll 1.5s infinite linear}
@keyframes mouse_scroll{0% {top:10%}99% {top:50%}100% {top:10%}}
#mainVisual .mouse span{font-size:var(--font-size-13);font-weight:700;text-transform:uppercase;font-family:var(--e-font)}

/* Hero Text Slides */
#mainVisual .slide-text{display:none;opacity:0;transition:all 0.5s ease-in-out}
#mainVisual .slide-text.active{display:block;opacity:1}

/* 모바일 반응형 */
@media (max-width: 768px) {
    /* 메인 비주얼 높이 조정 - 실제 디바이스 뷰포트에 맞춤 */
    #mainVisual .main_bnr {
        height: 70vh; /* 100vh -> 70vh로 줄임 */
        height: 70svh; /* 작은 뷰포트 높이 (Small Viewport Height) - 모바일 브라우저 UI 고려 */
    }

    #mainVisual .main_bnr:after {
        height: 70vh;
        height: 70svh;
    }

    #mainVisual .main_bnr .bg {
        height: 70vh;
        height: 70svh;
    }

    #mainVisual .txt h2 {
        font-size: var(--font-size-36);
        line-height: 1.1;
    }

    #mainVisual .txt p {
        font-size: var(--font-size-base);
        margin-top: 20px;
    }

    #mainVisual .txt {
        bottom: 10%;
        padding: 0 20px;
    }

    #mainVisual .inner {
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    /* 작은 모바일 화면에서 더 줄임 */
    #mainVisual .main_bnr {
        height: 60vh;
        height: 60svh;
    }

    #mainVisual .main_bnr:after {
        height: 60vh;
        height: 60svh;
    }

    #mainVisual .main_bnr .bg {
        height: 60vh;
        height: 60svh;
    }

    #mainVisual .txt h2 {
        font-size: var(--font-size-28);
        line-height: 1.1;
    }

    #mainVisual .txt p {
        font-size: var(--font-size-sm);
        margin-top: 15px;
    }

    #mainVisual .txt {
        bottom: 8%;
        padding: 0 15px;
    }

    #mainVisual .inner {
        padding: 0 15px;
    }

    #mainVisual .pager {
        margin-top: 30px;
    }

    #mainVisual .mouse {
        display: none;
    }
}