@charset "utf-8";


/* Mainslide */
#mainVisual {
    position: relative
}

#mainVisual .main_slide {
    position: relative;
    width: 100%;
    height: 100vh
}

#mainVisual .swiper-wrapper {
    height: 100%
}

/* 포스터 이미지 기본 설정 */
.video-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: 2;
	/* iframe보다 위에 위치 */
	transition: opacity 0.5s ease;
	/* 부드럽게 사라지는 효과 */
}

/* 영상 준비완료 후 포스터 숨김 클래스 */
.video-poster.is-hidden {
	opacity: 0;
	pointer-events: none;
}

/* 기본 video-container (부모 .main-visual 높이를 100% 추종) */
.swiper-slide .video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}

/* iframe 요소: 슬라이드 영역을 빈틈없이 채우도록 처리 (object-fit: cover 효과) */
.swiper-slide .video-container iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	/* 16:9 비율 (100 * 9 / 16) */
	min-width: 177.77vh;
	/* 16:9 비율 (100 * 16 / 9) */
	min-height: 100vh;
	transform: translate(-50%, -50%);
	pointer-events: none;
	/* 사용자 클릭 방지 */
}

.swiper-slide .video-container video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* CSS background-size: cover와 동일하게 작동 */
	object-position: center;
}

/* 비디오가 너무 밝아 글씨가 안 보일 경우를 방지하기 위한 반투명 딤레이어 */
.swiper-slide .video-container::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1);
	/* 필요에 따라 투명도 조절 (0.4 = 40% 투명 블랙) */
	z-index: 2;
}


/*
#mainVisual .swiper-slide.bg01 {
    position: relative;
    background: url(./main_img1.jpg) no-repeat center / cover
}

#mainVisual .swiper-slide.bg02 {
    position: relative;
    background: url(./main_img2.jpg) no-repeat center / cover
}

#mainVisual .swiper-slide.bg03 {
    position: relative;
    background: url(./main_img3.jpg) no-repeat center / cover
}
*/

#mainVisual .main_txt {
    position: absolute;
    top: 40vh;
    left: 47.1%;
    z-index: 101;
    width: 100%;
    line-height: 1.15;
    color: #fff
}

#mainVisual .main_txt span {
    display: block;
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.1px;
}

#mainVisual .main_txt p {
    margin-top: 30px;
    font-size: 67px;
    font-weight: 800;
    white-space: pre-line;
    font-family: var(--e-font);
    line-height: 1.0;
}

/* Pager */
#mainVisual .pager {
    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 15px;
    position: absolute;
    right: 5%;
    top: 50%;
    z-index: 101;
    transform: translateY(-50%)
}

#mainVisual .pager button {
    opacity: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    background: transparent;
    transition: .2s
}

#mainVisual .pager button:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #fff;
    content: "";
    transition: all .2s
}

#mainVisual .pager button.on:after {
    opacity: 0
}

#mainVisual .pager .progress {
    transform: rotate(-90deg)
}

#mainVisual .pager .circle-origin {
    fill: transparent;
    stroke: rgb(255, 255, 255);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: all .2s
}

#mainVisual .pager button.on .circle-origin {
    animation: progress 4.5s ease
}

@keyframes progress {
    from {
        stroke-dashoffset: -52
    }

    to {
        stroke-dashoffset: 0
    }
}

/* 반응형 [s] */
@media (max-width:1380px) {
    #mainVisual .main_txt {
        left: 46%
    }

    #mainVisual .pager {
        right: 3%
    }
}

@media (max-width:1280px) {
    #mainVisual .main_txt {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 93%
    }

    #mainVisual .main_txt p {
        margin-top: 30px;
        padding-left: 0px
    }
}

@media (max-width:1024px) {
    #mainVisual .main_slide {
        height: 600px
    }

    #mainVisual .main_txt span {
        font-size: 17px
    }

    #mainVisual .main_txt p {
        margin-top: 25px;
        padding-left: 0px;
        font-size: 48px
    }
}

@media (max-width:768px) {
    #mainVisual .main_slide {
        height: 580px
    }

    #mainVisual .main_txt {
        text-align: center;
        width: 95%
    }

    #mainVisual .main_txt span {
        font-size: 12px
    }

    #mainVisual .main_txt p {
        margin-top: 10px;
        font-size: 20px;
    }

    #mainVisual .pager {
        flex-direction: row;
        top: 86%;
        right: 50%;
        transform: translateX(50%);
        gap: 12px
    }
	.swiper-slide.bg02 .video-container iframe,
	.swiper-slide.bg03 .video-container iframe,
	.swiper-slide.bg04 .video-container iframe {
		left: 70%;
	}
}


@media (max-width: 540px) {
	.swiper-slide.bg02 .video-container iframe,
	.swiper-slide.bg03 .video-container iframe,
	.swiper-slide.bg04 .video-container iframe {
		left: 90%;
	}	
}

/* 반응형 [e] */