@charset "utf-8";
/* CSS Document */

/*****************
	Main - Visual 영역
*****************/
/* 1400px 이상에서만 적용 */
        @media screen and (min-width: 1400px) {
            .section1 .scroll {
                overflow: hidden;
                position: absolute;
                left: 50%;
                bottom: 60px;
                z-index: 100;
                width: 6px;
                height: 100px;
                border-radius: 30px;
                background: rgba(255, 255, 255, 0.3);
                transform: translateX(-50%);
            }

            .section1 .scroll:after {
                display: block;
                content: "";
                width: 6px;
                height: 100px;
                background: #fff;
                position: absolute;
                left: 0;
                top: 0;
                animation: scroll 1.2s infinite ease-in-out;
            }
        }

        /* 애니메이션 */
        @keyframes scroll {
            0% {
                top: 0;
                opacity: 1;
            }

            50% {
                top: 20px;
                opacity: 0.5;
            }

            100% {
                top: 40px;
                opacity: 0;
            }
        }
        
.swiper {
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            background-size: cover;
            background-position: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .mySwiper {
            height: 100vh;
            width: 100%;
        }

        .btn-border-white {
            background: none;
            border: 1px solid #fff;
            color: #fff;
            padding: 14px 28px 13px 28px;
            font-size: 13px;
            margin-top: 50px;
        }

        .btn-border-white:hover {
            background: #FFF;
            border-color: #fff;
            color: #000;
            -moz-transition: all 200ms ease-in;
            -o-transition: all 200ms ease-in;
            -webkit-transition: all 200ms ease-in;
            transition: all 200ms ease-in;
        }

        .swiper-textbox {
            position: absolute;
            left: 5%;
            right: 5%;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            z-index: 10;
        }

        /* 애니메이션 기본 상태 */
        /* 기본 애니메이션 */
        .ani {
            opacity: 0;
            transition: all .9s ease;
        }

        /* 위 → 아래 */
        .ani-down {
            transform: translateY(-80px);
        }

        /* 아래 → 위 (기존 텍스트용) */
        .ani:not(.ani-down) {
            transform: translateY(40px);
        }

        /* 활성화 */
        .ani.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* 딜레이 */
        .delay-1 {
            transition-delay: .2s;
        }

        .delay-2 {
            transition-delay: .5s;
        }

        .delay-3 {
            transition-delay: .8s;
        }

        /* 모바일 대응 */
        @media (max-width: 768px) {
            .swiper-textbox {
                left: 5%;
                right: 5%;
            }
        }

        .swiper-wrapper .swiper-slide .stext0 {
            font-size: 22px;
            font-weight: 500;
            color: #fff;
            margin-bottom: 20px;
            text-shadow: 0 0 8px rgba(0, 0, 0, 0.0);
        }

        .swiper-wrapper .swiper-slide .stext1 p {
            font-size: 70px;
            font-weight: 800;
            line-height: 1.25;
            white-space: pre-line;
            text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
        }

        .swiper-wrapper .swiper-slide .stext2 .title_small {
            font-size: 24px;
            font-weight: 300;
            text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
        }

        .swiper-pagination {
            bottom: 0px
        }

        .swiper-slide {
            text-align: center;
            align-items: center;
            /* 위아래 기준 중앙정렬 */
            justify-content: center;
            /* 좌우 기준 중앙정렬 */
        }

        .swiper-button-next,
        .swiper-button-prev {
            width: 50px !important;
            z-index: 999999999999
        }

        .swiper-button-next {
            background: url(/images/btn_arrow_right.png) no-repeat !important;
            background-position: center;
        }

        .swiper-button-prev {
            background: url(/images/btn_arrow_left.png) no-repeat right !important;
        }

        .swiper-button-next::after,
        .swiper-button-prev::after {
            display: none;
        }

        .swiper-pagination-bullet {
            width: 60px !important;
            height: 6px !important;
            display: inline-block !important;
            border-radius: 0 !important;
            background: #000 !important;
            opacity: 1.0 !important;
        }

        .swiper-pagination-bullet-active {
            opacity: 1;
            background: #fff !important;
        }

        .swiper-slide img {
            width: 100%;
        }

        .swiper-textbox h1 {
            font-family: "Poppins", "Noto Sans KR", 'sans-serif';
            font-size: 28px !important;
            margin-top: 5px;
        }

        .swiper-textbox .delay-2 {
            margin-top: 10px;
        }

        .information-mt {
            margin-top: 100px
        }

        .down_btn {
            position: absolute;
            bottom: 50px;
            font-size: 29px;
            width: 100%;
            text-align: center;
            z-index: 999;
        }

        .down_btn span {
            font-size: 14px;
            color: #fff;
            text-align: center;
            display: block;
            margin-top: -8px;
        }

        @media (min-width: 767.98px) and (max-width: 991.98px) {
            .swiper-textbox {
                top: 35%;
                padding: 0 100px;
            }
        }

        @media (max-width: 767px) {
            .swiper-textbox {
                top: 35%;
                padding: 0 50px;
            }

            .swiper-wrapper .swiper-slide .stext1 p {
                font-size: 35px;
                font-weight: 800;
                line-height: 130%;
            }

            .swiper-wrapper .swiper-slide .stext2 .title_small {
                font-size: 20px;
                font-weight: 300;
                line-height: 140%;
                margin-top: 30px;
            }

            .swiper-button-next,
            .swiper-button-prev {
                display: none !important;
            }

            .swiper-pagination-bullet-active {
                opacity: 1;
                background: #e34f26 !important;
            }
        }

        #video_area {
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }


        .slide-video {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translate(-50%, -50%);
        }





        .scroll-indicator {
            position: absolute;
            left: 50%;
            /* 부모 요소의 50% 지점으로 이동 */
            bottom: 80px;
            /* 바닥에서의 이격 거리 (조절 가능) */
            transform: translateX(-50%);
            /* 자신의 너비 절반만큼 왼쪽으로 밀어 정확히 중앙 정렬 */
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 내부 요소(화살표, 텍스트)들을 수직 중앙 정렬 */
            z-index: 10;
            /* 슬라이드 이미지보다 위에 보이도록 설정 */
            pointer-events: none;
            /* 클릭 방해 금지 */
        }

        .scroll-indicator .text {
            margin-top: 60px;
            margin-left: auto;
            font-size: 12px;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-family: 'eng_font', sans-serif;
            /* 프로젝트에서 사용하는 영문 폰트 적용 */
        }

        .chevron {
            position: absolute;
            width: 12px;
            height: 4px;
            opacity: 0;
            transform: scale3d(0.5, 0.5, 0.5);
            animation: move 3s ease-out infinite;
        }

        .chevron:first-child {
            animation: move 3s ease-out 1s infinite;
        }

        .chevron:nth-child(2) {
            animation: move 3s ease-out 2s infinite;
        }

        .chevron:nth-child(3) {
            animation: move 3s ease-out 3s infinite;
        }

        .chevron:nth-child(4) {
            animation: move 3s ease-out 4s infinite;
        }

        .chevron:before,
        .chevron:after {
            content: ' ';
            position: absolute;
            top: 0;
            height: 100%;
            width: 51%;
            background: #fff;
        }

        .chevron:before {
            left: 0;
            transform: skew(0deg, 30deg);
        }

        .chevron:after {
            right: 0;
            width: 50%;
            transform: skew(0deg, -30deg);
        }

        @keyframes move {
            25% {
                opacity: 1;

            }

            33% {
                opacity: 1;
                transform: translateY(30px);
            }

            67% {
                opacity: 1;
                transform: translateY(40px);
            }

            100% {
                opacity: 0;
                transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
            }
        }