@charset "utf-8";

/* effect
---------------------------------------------*/
.ef{
	transition: all 0.4s ease;
}

@keyframes animation1 {
	100% { opacity: 1; transform: translate( 0, 0); }
}

/* fadeIn */
.ef-fadeIn{ opacity: 0; }
.ef-fadeIn.on{ animation: animation1 0.4s ease 0s 1 forwards; }

/* fadeIn top */
.ef-fadeInTop{ opacity: 0; transform: translate( 0, -20px); }
.ef-fadeInTop.on{ animation: animation1 0.4s ease 0s 1 forwards; }

/* fadeIn bottom */
.ef-fadeInBtm{ opacity: 0; transform: translate( 0, 20px); }
.ef-fadeInBtm.on{ animation: animation1 0.4s ease 0s 1 forwards; }

/* fadeIn right */
.ef-fadeInRgt{ opacity: 0; transform: translate( 20px, 0); }
.ef-fadeInRgt.on{ animation: animation1 0.4s ease 0s 1 forwards; }

/* fadeIn left */
.ef-fadeInLet{ opacity: 0; transform: translate( -20px, 0);  }
.ef-fadeInLet.on{ animation: animation1 0.4s ease 0s 1 forwards; }

/* Lined Up */
.ef-LinedUp{}
.ef-LinedUp .ef-item{ opacity: 0; }
.ef-LinedUpTop .ef-item{ transform: translate( 0, -20px); }
.ef-LinedUpBtm .ef-item{ transform: translate( 0, 20px);  }
.ef-LinedUpRgt .ef-item{ transform: translate( 20px, 0);  }
.ef-LinedUpLet .ef-item{ transform: translate( -20px, 0); }

.ef-LinedUp.on .ef-item{
	animation-name: animation1;
	animation-duration: 0.4s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
	.ef-LinedUp.on .ef-item:nth-of-type(1){ animation-delay: 0.0s; }
	.ef-LinedUp.on .ef-item:nth-of-type(2){ animation-delay: 0.2s; }
	.ef-LinedUp.on .ef-item:nth-of-type(3){ animation-delay: 0.4s; }
	.ef-LinedUp.on .ef-item:nth-of-type(4){ animation-delay: 0.6s; }
	.ef-LinedUp.on .ef-item:nth-of-type(5){ animation-delay: 0.8s; }
	.ef-LinedUp.on .ef-item:nth-of-type(6){ animation-delay: 1.0s; }
	.ef-LinedUp.on .ef-item:nth-of-type(7){ animation-delay: 1.2s; }
	.ef-LinedUp.on .ef-item:nth-of-type(8){ animation-delay: 1.4s; }
	.ef-LinedUp.on .ef-item:nth-of-type(9){ animation-delay: 1.6s; }
	.ef-LinedUp.on .ef-item:nth-of-type(10){ animation-delay: 1.8s; }
	.ef-LinedUp.on .ef-item:nth-of-type(11){ animation-delay: 2.0s; }
	.ef-LinedUp.on .ef-item:nth-of-type(12){ animation-delay: 2.2s; }
	.ef-LinedUp.on .ef-item:nth-of-type(13){ animation-delay: 2.4s; }
	.ef-LinedUp.on .ef-item:nth-of-type(14){ animation-delay: 2.6s; }
	.ef-LinedUp.on .ef-item:nth-of-type(15){ animation-delay: 2.8s; }

/* circle */
.ef-circle,
.ef-circle-LinedUp .ef-item{ opacity: 0; transform: scale(0,0); }

.ef-circle.on,
.ef-circle-LinedUp.on .ef-item{ animation: circle_animation 0.4s ease 0s 1 forwards; }
@keyframes circle_animation {
	100% { opacity: 1; transform: scale(1,1); }
}

/* ef-works */
.ef-works{}

.ef-works .works_newImg_box{
	position: relative;
}
	.ef-works .works_newImg_box:before{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: #ffffff;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 5;
	}

.ef-works .list_title,
.ef-works p{ opacity: 0; transform: translate( 0, 20px); }

.ef-works.on .list_title,
.ef-works.on p{ animation: animation1 0.4s ease 0s 1 forwards; }
.ef-works.on .works_newImg_box:before{ animation: works_img_animation 0.4s ease 0.5s 1 forwards; }
@keyframes works_img_animation {
	100% { width: 0; }
}





/* ie9
--------------------------------------------- */
body.ie9 .ef-fadeIn,
body.ie9 .ef-fadeInTop,
body.ie9 .ef-fadeInBtm,
body.ie9 .ef-fadeInRgt,
body.ie9 .ef-fadeInLet,
body.ie9 .ef-LinedUp .ef-item,
body.ie9 .ef-LinedUpTop .ef-item,
body.ie9 .ef-LinedUpBtm .ef-item,
body.ie9 .ef-LinedUpRgt .ef-item,
body.ie9 .ef-LinedUpLet .ef-item,
body.ie9 .ef-circle,
body.ie9 .ef-circle-LinedUp .ef-item{ opacity: 1; transform: translate( 0, 0); }