@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="overlayDown-concept"],
*[data-effect="overlayDown-light"],
*[data-effect="overlayLeft"],
*[data-effect="overlayLeft-concept"],
*[data-effect="overlayLeft-pink"],
[data-effect="overlayLeft-purple"],
*[data-effect="overlayRight"],
*[data-effect="overlayRight-pink"],
*[data-effect="overlayRight-purple"],
*[data-effect="overlayRight-turquoise"] {
	position: relative;
}

*[data-effect="maskImage"],
*[data-effect="maskImage-ao"],
*[data-effect="maskImage-pink"],
*[data-effect="maskImage-turquoise"],
*[data-effect="maskImage-purple"],
*[data-effect="maskImage-ver"] {
	position: relative;
	overflow: hidden;
}

*[data-effect="overlayUp"]:before,
*[data-effect="overlayDown"]:before,
*[data-effect="overlayDown-concept"]:before,
*[data-effect="overlayDown-light"]:before,
*[data-effect="overlayLeft"]:before,
*[data-effect="overlayLeft-concept"]:before,
*[data-effect="overlayLeft-pink"]:before,
*[data-effect="overlayLeft-purple"]:before,
*[data-effect="overlayRight"]:before,
*[data-effect="overlayRight-pink"]:before,
*[data-effect="overlayRight-turquoise"]:before,
*[data-effect="overlayRight-purple"]:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 110%;
	z-index: 50;
	background: #fff;
}

*[data-effect="overlayDown-concept"]:before,
*[data-effect="overlayLeft-concept"]:before {
	background: #A5CBDF;
}

*[data-effect="overlayDown-light"]:before {
	background: #F2A9A9;
}

*[data-effect="overlayRight-pink"]:before,
*[data-effect="overlayLeft-pink"]:before {
	background: #FC9DB8;
	height: 100%;
}

*[data-effect="overlayLeft-purple"]:before {
	background: #d580ff;
	height: 100%;
}

*[data-effect="overlayRight-purple"]:before {
	background: #d580ff;
	height: 100%;
}

*[data-effect="overlayRight-turquoise"]:before {
	background: #48D1CC;
	height: 100%;
}

*[data-effect="overlayUp"]:before {
	left: 0;
	top: -5%;
}

*[data-effect="overlayDown"]:before {
	left: 0;
	bottom: -5%;
}

*[data-effect="overlayDown-concept"]:before,
*[data-effect="overlayDown-light"]:before {
	left: 0;
	bottom: -5%;
}

*[data-effect="overlayLeft"]:before {
	left: 0;
	top: -5%;
}

*[data-effect="overlayLeft-concept"]:before {
	left: 0;
	top: -5%;
}

*[data-effect="overlayLeft-pink"]:before {
	left: 0;
	top: 0;
}

*[data-effect="overlayLeft-purple"]:before {
	left: 0;
	top: 0;
}

*[data-effect="overlayRight"]:before {
	right: 0;
	top: -5%;
}

*[data-effect="overlayRight-pink"]:before {
	right: 0;
	top: 0;
}

*[data-effect="overlayRight-turquoise"]:before {
	right: 0;
	top: 0;
}

*[data-effect="overlayRight-purple"]:before {
	right: 0;
	top: 0;
}

*[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-ao"] {
	overflow: hidden;
}

*[data-effect="maskImage-ao"] {
	overflow: hidden;
}

*[data-effect="maskImage"] img {
	opacity: 0;
}

*[data-effect="maskImage-ao"] img {
	opacity: 0;
}

*[data-effect="maskImage-pink"] img {
	opacity: 0;
}

*[data-effect="maskImage-purple"] img {
	opacity: 0;
}

*[data-effect="maskImage-turquoise"] img {
	opacity: 0;
}

*[data-effect="maskImage-ver"] span {
	opacity: 0;
}

*[data-effect="maskImage"]:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	z-index: 50;
	background: #333;
	right: 0;
	top: 0;
	transform: translateX(-101%);
}

*[data-effect="maskImage-ao"]:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	z-index: 50;
	background: #A5CBDF;
	right: 0;
	top: 0;
	transform: translateX(-101%);
}

*[data-effect="maskImage-pink"]:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	z-index: 50;
	background: #FC9DB8;
	right: 0;
	bottom: 0;
	transform: translateY(-101%);
}

*[data-effect="maskImage-purple"]:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	z-index: 50;
	background: #d580ff;
	right: 0;
	bottom: 0;
	transform: translateY(-101%);
}

*[data-effect="maskImage-turquoise"]:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	z-index: 50;
	background: #48D1CC;
	right: 0;
	bottom: 0;
	transform: translateY(-101%);
}

*[data-effect="maskImage-ver"]:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	z-index: 50;
	background: #333333;
	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-ao"] img {
	animation: fade-in 1.2s ease 1 0.5s both;
}

*[data-animation="true"][data-effect="maskImage-pink"] img {
	animation: fade-in 0s ease 1 0.5s both;
}

*[data-animation="true"][data-effect="maskImage-purple"] img {
	animation: fade-in 0s ease 1 0.5s both;
}

*[data-animation="true"][data-effect="maskImage-turquoise"] img {
	animation: fade-in 0s ease 1 0.5s both;
}

*[data-animation="true"][data-effect="maskImage-ver"] span {
	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-ao"]:before {
	animation: mask-right 1s ease 1 both;
}

*[data-animation="true"][data-effect="maskImage-pink"]:before {
	animation: mask-down 1s ease 1 both;
}

*[data-animation="true"][data-effect="maskImage-purple"]:before {
	animation: mask-down 1s ease 1 both;
}

*[data-animation="true"][data-effect="maskImage-turquoise"]:before {
	animation: mask-down 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,
*[data-animation="true"][data-effect="overlayDown-concept"]:before,
*[data-animation="true"][data-effect="overlayDown-light"]:before {
	height: 0;
}

*[data-animation="true"][data-effect="overlayLeft"]:before,
*[data-animation="true"][data-effect="overlayLeft-concept"]:before,
*[data-animation="true"][data-effect="overlayLeft-pink"]:before,
*[data-animation="true"][data-effect="overlayLeft-purple"]:before,
*[data-animation="true"][data-effect="overlayRight"]:before,
*[data-animation="true"][data-effect="overlayRight-pink"]:before,
*[data-animation="true"][data-effect="overlayRight-purple"]:before,
*[data-animation="true"][data-effect="overlayRight-turquoise"]: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);
}