@charset "UTF-8";

/* -------------------------------------------------
	File name : animation.css
---------------------------------------------------- */

.jack {
	transform: scale(0);
}

/* =============================
	animation
=============================== */
.eden {
	position: relative;
	opacity: 0;
	transition: all 1s ease;
	transform: translateY(30px);
}
.isAnimate {
	opacity: 1;
	transform: translateY(0px);
}
.garden {
	-webkit-clip-path: inset(0 100% 0 0);
	clip-path: inset(0 100% 0 0);
	transition: all 1s ease;
}
.isAnimater {
	webkit-clip-path: inset(0);
	clip-path: inset(0);
}
.barden {
	transform: scale(1);
	transition: all 1s ease;
}
.isAnimaters {
	transform: scale(1.5);
	transition: all 180s ease;
}



/* =============================
	keyframes
=============================== */
@-webkit-keyframes scroll-border{
	0%{
	-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}
	to{-webkit-transform:translate3d(0,200%,0); transform:translate3d(0,200%,0)}
	}
@keyframes scroll-border{
	0%{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}
	to{-webkit-transform:translate3d(0,200%,0); transform:translate3d(0,200%,0)}
	}

@-webkit-keyframes scroll-top{
	0%{
	-webkit-transform:translate3d(0,200%,0); transform:translate3d(0,200%,0)}
	to{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}
	}
@keyframes scroll-top{
	0%{-webkit-transform:translate3d(0,200%,0); transform:translate3d(0,200%,0)}
	to{-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}
	}

@-webkit-keyframes letterFloatLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}
@keyframes letterFloatLeft {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fadeIn {
	0% {
		opacity: 1;
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes slideIn {
  from {
  transform: translateX(100%);
        opacity: 0;
  }
  to {
  transform: translateX(0);
    opacity: 1;
  }
}

@keyframes skewR {
	0% {
		opacity: 1;
		transform: skewY(0);
	}
	100% {
		opacity: 1;
		transform: skewY(-10deg);
	}
}
@keyframes skewL {
	0% {
		opacity: 1;
		transform: skewY(0);
	}
	100% {
		opacity: 1;
		transform: skewY(10deg);
	}
}

@keyframes skewIn {
  0% {
  transform: skewX(10deg);
        opacity: 0;
  }
  100% {
  transform: skewX(0);
    opacity: 1;
  }
}




@-webkit-keyframes next-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes next-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@-webkit-keyframes back-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes back-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}


@keyframes anim {
    0% {background-position: 0 0;}
    100% {background-position: 100% 100%;}
}