/*애니메이션 효과 - 스크롤버튼 라인*/
.lineTop.move{left:-76px;animation-name:lineT; animation-duration:0.5s; animation-iteration-count:1; animation-timing-function:ease-out;animation-fill-mode:forwards;animation-delay: 1s;}
.lineBtm.move{right:-76px;animation-name:lineB; animation-duration:0.5s; animation-iteration-count:1; animation-timing-function:ease-out;animation-fill-mode:forwards;animation-delay: 2s;}
.lineRigth.move{top:-76px;animation-name:lineR; animation-duration:0.5s; animation-iteration-count:1; animation-timing-function:ease-out;animation-fill-mode:forwards;animation-delay: 1.5s;}
.lineLeft.move{bottom:-76px;animation-name:lineL; animation-duration:0.5s; animation-iteration-count:1; animation-timing-function:ease-out;animation-fill-mode:forwards;animation-delay: 2.5s;}
@keyframes lineT{
	from {left:-76px}
	to {left:0}
}
@keyframes lineB{
	from {right:-76px}
	to {right:0}
}
@keyframes lineL{
	from {bottom:-76px;}
	to {bottom:0;}
}
@keyframes lineR{
	from {top:-76px;}
	to {top:0;}
}

@keyframes bounce{
	0% {transform:translateX(0);}
	50% {transform:translateX(10px);}
	100% {transform:translateX(0);}
}
@-webkit-keyframes bounce{
	0% {transform:translateX(0);}
	50% {transform:translateX(10px);}
	100% {transform:translateX(0);}
}
@-moz-keyframes bounce{
	0% {transform:translateX(0);}
	50% {transform:translateX(10px);}
	100% {transform:translateX(0);}
}
@-ms-keyframes bounce{
	0% {transform:translateX(0);}
	50% {transform:translateX(10px);}
	100% {transform:translateX(0);}
}
@-o-keyframes bounce{
	0% {transform:translateX(0);}
	50% {transform:translateX(10px);}
	100% {transform:translateX(0);}
}

@keyframes wide{
	from {width:0;}
	to {width:100%;}
}
@-webkit-keyframes wide{
	from {width:0;}
	to {width:100%;}
}
@-moz-keyframes wide{
	from {width:0;}
	to {width:100%;}
}
@-ms-keyframes wide{
	from {width:0;}
	to {width:100%;}
}
@-o-keyframes wide{
	from {width:0;}
	to {width:100%;}
}

@keyframes moveLeft{
	from {left:100%;}
	to {left:0}
}
@-webkit-keyframes moveLeft{
	from {left:100%;}
	to {left:0}
}
@-moz-keyframes moveLeft{
	from {left:100%;}
	to {left:0}
}
@-ms-keyframes moveLeft{
	from {left:100%;}
	to {left:0}
}
@-o-keyframes moveLeft{
	from {left:100%;}
	to {left:0}
}

/*애니메이션 효과 - 메인비주얼텍스트*/
.titleInner.on p{transform: scale3d(1, 1, 1);transition: 1.2s;opacity: 1;}
.titleInner.on h2{transform: scale3d(1, 1, 1);transition: 1.5s;opacity: 1;transition-delay: 0.5s;}

.titleInner.on p{transition-delay: 0.5s;}
.titleInner.on h2{transition-delay: 0s;}

/*애니메이션 - fadeIn*/
.animated{transition:opacity 1s ease;-webkit-transition:opacity 1s ease;transition:all 1s ease;}

.fadeIn{opacity: 0;}
.fadeIn.active{opacity: 1;}

.fadeInRight{transform:translateX(80px); opacity:0;position: relative; /* for IE */}
.fadeInRight.active{transform:translateX(0px); opacity:1;}
.fadeInLeft{transform:translateX(-80px); opacity:0;position: relative; /* for IE */}
.fadeInLeft.active{transform:translateX(0px); opacity:1;}

.fadeInUp{transform:translateY(40px); opacity:0;position: relative; /* for IE */}
.fadeInUp.active{transform:translateY(0); opacity:1}
.fadeInDown{transform:translateY(-40px);-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);-o-transform:translateY(-40px); opacity:0;position: relative; /* for IE */}
.fadeInDown.active{transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0); opacity:1}
/*애니메이션 - bounce*/
.bounce.active{animation:bounce 1s .7s 1 ease-out forwards;-webkit-animation:bounce 1s .7s 1 ease-out forwards;-moz-animation:bounce 1s .7s 1 ease-out forwards;-ms-animation:bounce 1s .7s 1 ease-out forwards;-o-animation:bounce 1s .7s 1 ease-out forwards;}

/*애니메이션 - wide*/
.wide.active{animation:wide 1s 1 ease-out forwards;-webkit-animation:wide 1s 1 ease-out forwards;-moz-animation:wide 1s 1 ease-out forwards;-ms-animation:wide 1s 1 ease-out forwards;-o-animation:wide 1s 1 ease-out forwards;width:100%;}
.moveLeft.active{animation:moveLeft 1s .5s 1 ease-out forwards;-webkit-animation:moveLeft 1s .5s 1 ease-out forwards;-moz-animation:moveLeft 1s .5s 1 ease-out forwards;-ms-animation:moveLeft 1s .5s 1 ease-out forwards;-o-animation:moveLeft 1s .5s 1 ease-out forwards;	}

/*애니메이션 - height*/
.height.active{height:100%;transition: 1s;}

/*애니메이션 - scale*/
.scaleSmall{transform:scale3d(0.95, 0.95, 1);-webkit-transform:scale3d(0.95, 0.95, 1);-moz-transform:scale3d(0.95, 0.95, 1);-ms-transform:scale3d(0.95, 0.95, 1);-o-transform:scale3d(0.95, 0.95, 1); opacity:0;position: relative; /* for IE */}
.scaleSmall.active{transform:scale3d(1, 1, 1); opacity:1}
.scaleBig{transform:scale3d(1.05, 1.05, 1.05);-webkit-transform:scale3d(1.05, 1.05, 1.05);-moz-transform:scale3d(1.05, 1.05, 1.05);-ms-transform:scale3d(1.05, 1.05, 1.05);-o-transform:scale3d(1.05, 1.05, 1.05); transition:transform 1.8s ease;opacity:0;position: absolute;}
.scaleBig.active{transform:scale3d(1, 1, 1); opacity:1;}