/********************************************
 * Animation 
 * waypoints.js / gsap.js / ScrollToPlugin.js 필요
 * script.js에 
 ********************************************/
html [data-scroll] { transition: all 0.9s ease; } 
html [data-scroll="fade-up"] { transform: translate3d(0, 30px, 0); -webkit-transform: translate3d(0, 30px, 0); opacity: 0; } 
html [data-scroll="fade-down"] { transform: translate3d(0, -30px, 0); -webkit-transform: translate3d(0, -30px, 0); opacity: 0; }  
html [data-scroll^="fade"].animated { opacity: 1; transform: none; -webkit-transform: none; } 
html [data-delay="0.2s"] { transition-delay:0.2s}
html [data-delay="0.3s"] { transition-delay:0.3s}
html [data-delay="0.4s"] { transition-delay:0.4s}
html [data-delay="0.5s"] { transition-delay:0.5s}
html [data-delay="0.6s"] { transition-delay:0.6s}
html [data-speed="1s"] { transition-duration:1s}
html [data-speed="1.2"] { transition-duration:1.2s}
html [data-speed="1.4"] { transition-duration:1.4s}
/********************************************
  * 메인 비주얼 효과
********************************************/
.main-visual-txt-con .visual-txt-con h4 span,
.main-visual-txt-con .visual-txt-con h2 span,
.main-visual-txt-con .visual-txt-con b
{line-height:0.8;}
.main-visual-txt-con .visual-txt-con h4 .char{
	animation: text-fade-out 1s cubic-bezier(0.4, 0, 0.2, 1) both; display:inline-block;
}

.main-visual-txt-con .visual-txt-con h2 .char{
	animation: text-fade-out 1s cubic-bezier(0.4, 0, 0.2, 1) both; display:inline-block;
}
.slick-active .main-visual-txt-con .visual-txt-con h4 .char{
	animation: text-up-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1s both; display:inline-block;
}
.slick-active .main-visual-txt-con .visual-txt-con h2 .char{
	animation: text-down-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1s both; display:inline-block;
}
#breadcrumbs span
{animation: text-up-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both}
#subVisual #subTitle.animated h2
{animation: text-up-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0s both}

.sub-title-con 
{animation: text-up-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0s both}
@keyframes text-down-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(-50px); 
		transform: translateY(-50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}

@keyframes text-up-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}

@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}