@charset "utf-8"

.main { } 
.main .visual { position: relative; height: 100vh; overflow: hidden; position: relative; } 
.main .visual .mainSwiper { width:100%; } 
.main .visual .bg { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 0; z-index: 5; } 

.main .visual .mainText { width: 90%; position: absolute; z-index: 10; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 999; } 
.main .visual .mainText p {font-size: var(--fs70); font-weight: 100; line-height: 1;}
.main .visual .mainText p span {font-weight: 700;}
.main .visual .mainText a {display: inline-block; padding: 20px 40px; border: 2px solid #fff; border-radius: 100px; margin-top: 30px; font-size: var(--fs20); font-weight: 700; line-height: 1;}
.main .visual .mainText a:hover {background: var(--base2); color: #fff; border: 2px solid var(--base2);}

.main .mainBottom {position: absolute; padding:70px 100px; z-index: 10; bottom: 0; left: 0; color: #fff; width: 100%;}
.main .mainBottom>div {display: flex; justify-content: space-between; align-items: flex-end;}
.main .mainBottom p {text-align: center; padding-top: 58px; background: url(/images/main/trophy.svg) no-repeat center top; font-size: var(--fs14); line-height: 1.2;}
.main .swiper-pagination {position: static; display: flex; align-items: center; height: 30px;}

.main .swiper-pagination-clickable .swiper-pagination-bullet {width: 5px; height: 10px; background: #fff; border-radius: 100px; margin-left: 20px; opacity: 1; transition: all .6s ease;}
.main .swiper-pagination-bullet-active {height: 30px !important;}

.swiper-slide { display: flex; justify-content: center; align-items: center; background: #000;} 
.swiper-slide img { width: 100%; height: 100%; object-fit: cover; opacity: .7;}



/* ************************ 모바일 (~500) ************************ */
@media screen and (max-width:500px) {

    .main .mainBottom {padding: 40px 20px;}

}