@charset "utf-8";

.intro-box { }
.body_intro { animation:fadeIn 1.0s ease; overflow:hidden; height:100vh; }
.body_intro header { transition:all 0.5s }
.body_intro header h1 { position:relative; overflow:hidden; opacity:1; left:50%; transform:translateX(-50%); margin:calc(25% - 101px) 0 0 0; padding:0; animation:logoPos 1.5s 0.8s; animation-fill-mode:both; }
.body_intro header h1 svg { width:419px; height:auto; animation:logoH1 1.5s 0.8s; animation-fill-mode:both; }
.body_intro header h1 svg .bg1 { fill:#3E3A39; animation:logoColor 1.5s 2.5s; animation-fill-mode:both; }
.body_intro header .gnb-box { animation:ani_4 1.0s 1.4s; animation-fill-mode:both; }
.body_intro #visual { animation:ani_5 0.8s 0.5s; animation-fill-mode:both; }
.body_intro #visual .swiper-container { transform:translateY(30%); animation:containerPos 2s 0.6s; animation-fill-mode:both; }
.body_intro #visual .swiper-container .swiper-slide.swiper-slide-active { clip-path:inset(78% 8% 0 8% round 30px 30px 0 0); animation:ani_wbox 1.5s 1.8s; animation-fill-mode:both; }
.body_intro #visual .txtbox { animation:ani_5 0.8s 1.0s; animation-fill-mode:both; }
.body_intro #visual .txtbox .line { animation:lineWidth 1.5s 1.9s; animation-fill-mode:both; }
.body_intro #visual .txtbox .aniBox .box:last-child { animation:rightBox 1.5s 1.9s; animation-fill-mode:both; }
.body_intro #visual .txtbox .line span.p1 { animation:ani_w70 1.5s 3.3s; animation-fill-mode:both; }
.body_intro #visual .txtbox .line span.p2 { animation:ani_h 1.3s 3.6s; animation-fill-mode:both; }

.body_intro #visual .swiper-slide.swiper-slide-active .txtCont_n .txt-1 span { animation:ani_3 0.8s 3.0s; animation-fill-mode:both; }
.body_intro #visual .swiper-slide.swiper-slide-active .txtCont_n .txt-2 span { animation:ani_3 1.0s 3.2s; animation-fill-mode:both; }

@media screen and (max-width:1024px){
	.body_intro header h1 { margin:calc(50% - 101px) 0 0 0; }
	.body_intro header h1 svg { width:300px; }
}
@media screen and (max-width:640px){
	.body_intro header h1 svg { width:260px; }
}

@keyframes fadeIn {
	0% { opacity:0; }
	100% { opacity:1; }
}
@keyframes logoPos {
	0% { left:50%; margin:calc(25% - 101px) 0 0 0; transform:translateX(-50%); }
	100% { left:0; margin:15px 0 0; transform:translateX(0); }
}
@keyframes logoH1 {
	0% { width:419px; }
	100% { width:146px; }
}
@keyframes logoColor {
	0% { fill:#3E3A39; }
	100% { fill:#fff; }
}
@keyframes ani_wbox {
	0% { clip-path:inset(78% 8% 0 8% round 30px 30px 0 0); }
	100% { clip-path:inset(0 0 0 0 round 0 0 0 0); }
}
@keyframes containerPos {
	0% { transform:translateY(30%);  }
	100%  {transform:translateY(0);  }
}

@media screen and (max-width:1024px){
	@keyframes logoPos {
		0% { left:50%; margin:calc(50% - 101px) 0 0 0; transform:translateX(-50%); }
		100% { left:0; margin:15px 0 0; transform:translateX(0); }
	}
	@keyframes logoH1 {
		0% { width:300px; }
		100% { width:110px; }
	}
}
@media screen and (max-width:640px){
	@keyframes logoH1 {
		0% { width:260px; }
		100% { width:110px; }
	}
}