@charset "UTF-8";
/*
.main-visual-wrap {background: url(../img/main/bg-main-visual.jpg) no-repeat center center;position: relative;background-size: cover;}
*/
.main-visual-outer{position:relative; margin:0 auto; width:100%; max-width:1900px; border-radius:20px; overflow: hidden;}

.main-visual .vi-txt-box .txt01{font-weight: 400;font-size: 72px;line-height: 120%;letter-spacing: 0;color: #fff;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.main-visual .vi-txt-box .txt02{font-weight: 400;font-size: 36px;line-height: 140%;letter-spacing: 0;color: #FFFFFFB2;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.main-visual .vi-txt-box .txt03{font-family: Pretendard GOV;font-weight: 400;font-size: 22px;line-height: 140%;letter-spacing: 0;color: #FFFFFFB2;margin: 0 0 48px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.main-visual .vi-txt-box .btn-vi {max-width: 201px;width: 100%;box-sizing: border-box;border-radius: 40px;background: linear-gradient(85.65deg, #F261FF 0%, #0077C0 79.71%);display: block;padding: 14px 20px 14px 28px;overflow: hidden;position: relative;}
.main-visual .vi-txt-box .btn-vi::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		120deg,
		rgba(255,255,255,0) 30%,
		rgba(255,255,255,0.35) 50%,
		rgba(255,255,255,0) 70%
	);
	transform: translateX(-100%);
	transition: transform 0.6s ease;
}
.main-visual .vi-txt-box .btn-vi:hover::before { transform: translateX(100%);}
.main-visual .vi-txt-box .btn-vi span {position: relative;font-weight: 600;font-size: 16px;line-height: 20px;letter-spacing: 0.3px;text-align: center;color: #fff;display: flex;align-items: center;justify-content: space-between;}
.main-visual .vi-txt-box .btn-vi span:after {content: "";width: 24px;height: 24px;background: url(../img/common/ico-arrow.png)no-repeat center;background-size: cover;display: inline-block;}

.main-visual .swiper-pagination .swiper-pagination-bullet{margin: 0 12px 0 0;width: 14px;height: 14px;background: #fff; opacity: 1;}
.main-visual .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{width: 36px;height: 14px;border-radius: 10px;background-color: #6CAEFF;}
.main-visual .swiper-navigation .swiper-button-next{width: 96px;height: 96px;background-color: rgba(0,0,0,0.5);border-radius: 10px;}
.main-visual .swiper-navigation .swiper-button-next:after{font-size: 0;background: url(../img/main/btn-vi-next.png);width: 30px;height: 50px;}

.swiper-button-next:after, .swiper-button-prev:after { color: #fff;}
.main-visual .swiper-slide .vi-img-box {position: relative;height: 1080px}
.main-visual .swiper-slide .vi-img-box > img { width: 100%; height: 100%; object-fit: cover;}
.main-visual .swiper-slide .vi-txt-box { position: absolute;top: 50%;left: 50%;width: 100%;max-width: 1560px;transform: translate(-50%, -50%);box-sizing: border-box;text-align: start;padding: 0 16px;}

.main-visual .control-wrap {position: absolute;bottom: 260px;left: 50%;width: 100%;max-width: 1560px;box-sizing: border-box;z-index: 99;display: flex;justify-content: start;gap: 40px;align-items: center;transform: translateX(-50%);padding: 0 16px;}
.main-visual .control-wrap .swiper-button-prev,
.main-visual .control-wrap .swiper-button-next {position: relative;width: 40px;height: 40px;border: 0;margin: 0;font-size: 0;cursor: pointer;left: unset;right: unset;top: unset;}
.main-visual .control-wrap .swiper-button-prev {background: url(../img/common/ico-vi-right.png) no-repeat center;transition: all .3s ease-in-out;background-size: cover;}
.main-visual .control-wrap .swiper-button-next {background: url(../img/common/ico-vi-left.png) no-repeat center;transition: all .3s ease-in-out;background-size: cover;}
.main-visual .control-wrap .swiper-button-prev:after, 
.main-visual .control-wrap .swiper-button-next:after {display: none;}
.main-visual .control-wrap .main-vi-navigation {display: flex;gap: 12px;}
.main-visual .control-wrap .swiper-button-lock {display: block;}

.main-visual .control-wrap .swiper-pagination {position: relative;top: unset;left: unset;right: unset;bottom: unset;text-align: start;width: 480px;display: flex;align-items: center;}
.main-visual .control-wrap .swiper-pagination .swiper-pagination-current,
.main-visual .control-wrap .swiper-pagination .swiper-pagination-total {display: none;}

.main-visual .control-wrap .vi-progress {display: inline-block;width: 100%;height: 2px;background: #FFFFFF4D;transition: all;position: relative;overflow: hidden;box-sizing: border-box;}
.main-visual .control-wrap .vi-progress span {display: block;height: 100%;width: 0;background: #fff;animation: visualPasin 5s forwards;}

@keyframes visualPasin {
	0 {width: 0}
	100% {width: 100%}
}

@media screen and (max-width: 1024px) { 
	.main-visual .vi-txt-box .txt01 {font-size: 50px;}
	.main-visual .vi-txt-box .txt02 {font-size: 28px;}
	.main-visual .vi-txt-box .txt03 {font-size: 18px;}
	.main-visual .swiper-slide .vi-img-box {height: 900px;}
	.main-visual .control-wrap {bottom: 220px;}
}

@media screen and (max-width: 768px) { 
	.main-visual .swiper-slide .vi-img-box {height: 650px;}
	.main-visual .control-wrap .swiper-pagination {width: 100%;}

	.main-visual .vi-txt-box .txt01 {font-size: 35px;margin: 0 0 10px;}
	.main-visual .vi-txt-box .txt02 {font-size: 22px;margin: 0 0 10px;}
	.main-visual .vi-txt-box .txt03 {font-size: 16px;margin: 0 0 25px;}
	.main-visual .swiper-slide .vi-txt-box {top: 45%;}

	.main-visual .control-wrap {bottom: 70px;gap: 30px;}

}