@charset "UTF-8";

.mainContainer {position:relative;padding:1.875rem;height:100vh}
.mainVisual {position:relative;height: 100vh;width: 50vw;max-width:50%;animation:opacity 2s linear alternate;padding-bottom:1.875rem}
.swiper-container {width:100%;height:100%;padding-bottom:1.875rem}
.slideBox {width: 100%;height: 100%;background-repeat: no-repeat;background-position: top center;background-size: cover;}
.mainVisual .tit {position:absolute;width:fit-content;top:50%;left:1.3125rem;z-index:1;transform:translateY(-50%);}
.mainVisual .tit img {width:150px}
.swiper-pagination-bullet {width: 11px;height: 11px;background: #d7d7d7;opacity: 1;}
.swiper-pagination-bullet-active {background: #fff;}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {bottom:20px}

body {overflow: hidden;height: 100vh;}
.container {position: relative;width: 100%;height: 100vh;}
.section {position: absolute;width: 100%;height: 100vh;transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.section1 {z-index: 1;transform: translateY(0);}
.section2 {background:#000;z-index: 2;transform: translateY(100vh);}

/* 스크롤 상태 클래스 */
.scrolled .section2 {transform: translateY(0);}

/* 스크롤바 숨기기 */
.scroll-container {height: 200vh;opacity: 0;pointer-events: none;}

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


@keyframes float {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-20px) rotate(180deg);
	}
}


#headerMobile h1 {position:fixed;top:37px;left:40px;z-index:10;opacity:0;transition:all .5s ease 0s;filter: invert(96%) sepia(100%) saturate(12%) hue-rotate(237deg) brightness(103%) contrast(103%);}
footer {position: fixed;}

/************************************************************************************
                                    Media Query
*************************************************************************************/
@media (max-width: 1560px) {
}

@media (max-width: 1200px) {
}

@media (max-width: 1024px) {

	.slideBox {background-position:center center}

	}
@media (max-width: 1023px) {
	.mainContainer {padding:0;padding-top:0;height: calc(var(--vh, 1vh) * 100);}
	.swiper-container {padding-bottom:0}
	.mainVisual {width:100%;max-width:100%;padding-bottom:0}
	.slideBox {background-size:cover;background-image:url(../img/main/bg_m1.jpg) !important}
	.slideBox.second {background-image:url(../img/main/bg_m2.jpg) !important}
	.slideBox.third {background-image:url(../img/main/bg_m3.jpg) !important}
	.slideBox.fourth {background-image:url(../img/main/bg_m4.jpg) !important}
	.slideBox.fivth {background-image:url(../img/main/bg_m5.jpg) !important}
	.maintxt {position:absolute;width:100%;height:66px;padding:0 30px;left:0;bottom:0;right:auto;top:auto;transform:none}
	.maintxt span {font-size:22px;letter-spacing:1px;font-weight:500;line-height:60px}
	.maintxt .instai {position:absolute;margin:0;top:50%;right:30px;width:20px;height:20px;transform:translateY(-50%)}

#headerMobile h1 {top:5.14vw;left:5.56vw;}
.section {height:calc(var(--vh, 1vh) * 100)}
.section2 {transform: translateY(calc(var(--vh, 1vh) * 100));}



}

@media (max-width: 767px) {

.slideBox {background-position:top center}

}
@media (max-width: 500px) {

}

body.scrolled .mHeader {z-index: 10}
body.scrolled #mobileBtn p {color:#fff}
body.scrolled #mobileBtn span {background-color: #fff}
body.scrolled #mobileBtn.active p {color:#000}
body.scrolled #mobileBtn.active span {background-color: #000}
body.scrolled footer .linkBox li a {filter: invert(96%) sepia(100%) saturate(12%) hue-rotate(237deg) brightness(103%) contrast(103%);}
body.scrolled footer .linkBox li.kakao a {filter: invert(96%) sepia(100%) saturate(12%) hue-rotate(237deg) brightness(103%) contrast(103%);}
body.scrolled footer .copyright {color:#fff}
body.scrolled #headerMobile h1 {opacity:1;transition:all .5s ease 1s;}
body.scrolled footer.active .linkBox li a {filter:none}
body.scrolled footer.active .linkBox li.kakao a {filter:none}
body.scrolled footer.active .copyright {color:#000}