@keyframes fade-up{
	0%{
		transform:translateY(60px);
		opacity:0;
	}
	100%{
		transform:translateY(0);
		opacity:1
	}
}
@keyframes fade-in{
	0%{
		opacity:0;
	}
	100%{
		opacity:1
	}
}
@keyframes fade-left{
	0%{
		opacity:0;
		transform: translateX(60px);
	}
	100%{
		opacity:1;
		transform: translateX(0);
	}
}
@keyframes width-extend{
	0%{
		width:0;
	}
	100%{
		width:100%;
	}
}
@keyframes width-shrink{
	0%{
		width:100%;
	}
	100%{
		width:0;
	}
}
@keyframes mask-right{
	0%{
		transform: translateX(-101%);
		width: 100%;
	}
	50%{
		transform: translateX(0);
		width: 100%;
	}
	100%{
		transform: translateX(0);
		width: 0%;
	}
}
@keyframes mask-right2{
	0%{
		transform: translateX(-101%);
		width: 100%;
	}
	48%{
		transform: translateX(0);
		width: 100%;
	}
	52%{
		transform: translateX(0);
		width: 100%;
	}
	100%{
		transform: translateX(0);
		width: 0%;
	}
}
@keyframes mask-down{
	0%{
		transform: translateY(-101%);
		height: 100%;
	}
	50%{
		transform: translateY(0);
		height: 100%;
	}
	100%{
		transform: translateY(0);
		height: 0%;
	}
}
@keyframes line-vertical{
	0%{
		height: 0;
		opacity: 1;
		transform: translateY(0);
	}
	30%{
		height: 74px;
		opacity: 1;
		transform: translateY(0);
	}
	35%{
		height: 74px;
		opacity: 1;
		transform: translateY(0);
	}
	55%{
		height: 74px;
		opacity: 1;
		transform: translateY(100%);
	}
	56%{
		height: 74px;
		opacity: 0;
		transform: translateY(100%);
	}
	100%{
		height: 74px;
		opacity: 0;
		transform: translateY(0);
	}
}

/*  DEFAULT SETTING  */
*[data-animation],
*[data-animation]:before,
*[data-animation]:after{
	transition:.8s;
	transition-timing-function: ease-in-out;
}
/*  ANIMATE DELAY  */
*[data-delay="0"],
*[data-delay="0"]:before,
*[data-delay="0"]:after{
  transition-delay:0s;
}
*[data-delay="100"],
*[data-delay="100"]:before,
*[data-delay="100"]:after{
  transition-delay:.1s;
}
*[data-delay="200"],
*[data-delay="200"]:before,
*[data-delay="200"]:after{
  transition-delay:.2s;
}
*[data-delay="300"],
*[data-delay="300"]:before,
*[data-delay="300"]:after{
  transition-delay:.3s;
}
*[data-delay="400"],
*[data-delay="400"]:before,
*[data-delay="400"]:after{
  transition-delay:.4s;
}
*[data-delay="500"],
*[data-delay="500"]:before,
*[data-delay="500"]:after{
  transition-delay:.5s;
}
*[data-delay="600"],
*[data-delay="600"]:before,
*[data-delay="600"]:after{
  transition-delay:.6s;
}
*[data-delay="700"],
*[data-delay="700"]:before,
*[data-delay="700"]:after{
  transition-delay:.7s;
}
*[data-delay="800"],
*[data-delay="800"]:before,
*[data-delay="800"]:after{
  transition-delay:.8s;
}
*[data-delay="900"],
*[data-delay="900"]:before,
*[data-delay="900"]:after{
  transition-delay:.9s;
}
*[data-delay="1000"],
*[data-delay="1000"]:before,
*[data-delay="1000"]:after{
  transition-delay:1s;
}
*[data-delay="1100"],
*[data-delay="1100"]:before,
*[data-delay="1100"]:after{
  transition-delay:1.1s;
}
*[data-delay="1200"],
*[data-delay="1200"]:before,
*[data-delay="1200"]:after{
  transition-delay:1.2s;
}
*[data-delay="1300"],
*[data-delay="1300"]:before,
*[data-delay="1300"]:after{
  transition-delay:1.3s;
}
*[data-delay="1400"],
*[data-delay="1400"]:before,
*[data-delay="1400"]:after{
  transition-delay:1.4s;
}
*[data-delay="1500"],
*[data-delay="1500"]:before,
*[data-delay="1500"]:after{
  transition-delay:1.5s;
}
*[data-delay="1600"],
*[data-delay="1600"]:before,
*[data-delay="1600"]:after{
  transition-delay:1.6s;
}
*[data-delay="1700"],
*[data-delay="1700"]:before,
*[data-delay="1700"]:after{
  transition-delay:1.7s;
}
*[data-delay="1800"],
*[data-delay="1800"]:before,
*[data-delay="1800"]:after{
  transition-delay:1.8s;
}
*[data-delay="1900"],
*[data-delay="1900"]:before,
*[data-delay="1900"]:after{
  transition-delay:1.9s;
}
*[data-delay="2000"],
*[data-delay="2000"]:before,
*[data-delay="2000"]:after{
  transition-delay:2s;
}
*[data-delay="2100"],
*[data-delay="2100"]:before,
*[data-delay="2100"]:after{
  transition-delay:2.1s;
}
*[data-delay="2200"],
*[data-delay="2200"]:before,
*[data-delay="2200"]:after{
  transition-delay:2.2s;
}
*[data-delay="2300"],
*[data-delay="2300"]:before,
*[data-delay="2300"]:after{
  transition-delay:2.3s;
}
*[data-delay="2400"],
*[data-delay="2400"]:before,
*[data-delay="2400"]:after{
  transition-delay:2.4s;
}
*[data-delay="2500"],
*[data-delay="2500"]:before,
*[data-delay="2500"]:after{
  transition-delay:2.5s;
}
*[data-delay="2600"],
*[data-delay="2600"]:before,
*[data-delay="2600"]:after{
  transition-delay:2.6s;
}
*[data-delay="2700"],
*[data-delay="2700"]:before,
*[data-delay="2700"]:after{
  transition-delay:2.7s;
}
*[data-delay="2800"],
*[data-delay="2800"]:before,
*[data-delay="2800"]:after{
  transition-delay:2.8s;
}
*[data-delay="2900"],
*[data-delay="2900"]:before,
*[data-delay="2900"]:after{
  transition-delay:2.9s;
}
*[data-delay="3000"],
*[data-delay="3000"]:before,
*[data-delay="3000"]:after{
  transition-delay:3s;
}
/*  Animate Effect  */
*[data-effect="overlayUp"],
*[data-effect="overlayDown"],
*[data-effect="overlayLeft"],
*[data-effect="overlayRight"]{
  position:relative;
}
*[data-effect="maskImage"],
*[data-effect="maskImage-ver"]{
	position: relative;
	overflow: hidden;
}
*[data-effect="overlayUp"]:before,
*[data-effect="overlayDown"]:before,
*[data-effect="overlayLeft"]:before,
*[data-effect="overlayRight"]:before{
	position:absolute;
	content:"";
	width:100%;
	height:110%;
	z-index:50;
	background: #fff;
}
*[data-effect="overlayUp"]:before{
  left:0;
  top:-5%;
}
*[data-effect="overlayDown"]:before{
  left:0;
  bottom:-5%;
}
*[data-effect="overlayLeft"]:before{
  left:0;
  top:-5%;
}
*[data-effect="overlayRight"]:before{
  right:0;
  top:-5%;
}
*[data-effect="fadeUp"],
*[data-effect="fadeDown"],
*[data-effect="fadeLeft"],
*[data-effect="fadeRight"],
*[data-effect="fadeIn"]{
  opacity:0;
}
*[data-effect="fadeUp"]{
  transform:translateY(60px);
}
*[data-effect="fadeDown"]{
  transform:translateY(-60px);
}
*[data-effect="fadeLeft"]{
  transform:translateX(60px);
}
*[data-effect="fadeRight"]{
	transform:translateX(-60px);
}
*[data-effect="maskImage"]{
	overflow: hidden;
}
*[data-effect="maskImage"] img{
	opacity: 0;
}
*[data-effect="maskImage"]:before{
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	z-index:50;
	background: #000;
	right: 0;
	top: 0;
	transform: translateX(-101%);
}
*[data-effect="maskImage-ver"]:before{
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	z-index:50;
	background: #000;
	right: 0;
	bottom: 0;
	transform: translateY(-101%);
}
*[data-animation="true"][data-effect="maskImage"] img{
	animation: fade-in 0s ease 1 0.5s both;
}
*[data-animation="true"][data-effect="maskImage"]:before{
	animation: mask-right 1s ease 1 both;
}
*[data-animation="true"][data-effect="maskImage-ver"]:before{
	animation: mask-down 1s ease 1 both;
}
/*  Animate Finished  */
*[data-animation="true"][data-effect="overlayUp"]:before,
*[data-animation="true"][data-effect="overlayDown"]:before{
	height:0;
}
*[data-animation="true"][data-effect="overlayLeft"]:before,
*[data-animation="true"][data-effect="overlayRight"]:before{
	width:0;
}
*[data-animation="true"][data-effect="fadeUp"],
*[data-animation="true"][data-effect="fadeDown"],
*[data-animation="true"][data-effect="fadeLeft"],
*[data-animation="true"][data-effect="fadeRight"],
*[data-animation="true"][data-effect="fadeIn"]{
	opacity:1;
}
*[data-animation="true"][data-effect="fadeUp"],
*[data-animation="true"][data-effect="fadeDown"]{
	transform:translateY(0);
}
*[data-animation="true"][data-effect="fadeLeft"],
*[data-animation="true"][data-effect="fadeRight"]{
	transform:translateX(0);
}