@charset "UTF-8";
/* CSS Document */

.anm{
	opacity:0;
}
.anm.anmStart{
	opacity:1;
}

/* fadeIn */
@keyframes anmFadeIn{
	0%  {opacity: 0;}
	100%{opacity: 1;}
}
.anmFadeIn.anmStart{
	opacity: 0;
	animation: anmFadeIn 1.5s ease 0.5s forwards;
}

/* topIn */
@keyframes anmTopIn{
	0%  {opacity: 0; transform: translateY(-50px);}
	100%{opacity: 1; transform: translateY(0);}
}
.anmTopIn.anmStart{
	opacity: 0;
	animation: anmTopIn 1.5s ease 0.5s forwards;
}

/* btmIn */
@keyframes anmBtmIn{
	0%  {opacity: 0; transform: translateY(50px);}
	100%{opacity: 1; transform: translateY(0);}
}
.anmBtmIn.anmStart{
	opacity: 0;
	animation: anmBtmIn 1.5s ease 0.5s forwards;
}

/* leftIn */
@keyframes anmLeftIn{
	0%  {opacity: 0; transform: translateX(-100px);}
	100%{opacity: 1; transform: translateX(0);}
}
.anmLeftIn.anmStart{
	opacity: 0;
	animation: anmLeftIn 1.5s ease 0.5s forwards;
}

/* rightIn */
@keyframes anmRightIn{
	0%  {opacity: 0; transform: translateX(100px);}
	100%{opacity: 1; transform: translateX(0);}
}
.anmRightIn.anmStart{
	opacity: 0;
	animation: anmRightIn 1.5s ease 0.5s forwards;
}

/* leftView */
@keyframes anmLeftView{
	0%  {width: 0;}
	100%{width: 100%;}
}
.anmLeftView.anmStart{
	opacity: 0;
	animation: anmLeftView 1.5s ease 0.5s forwards;
}

/* scrollBox */
@keyframes anmScrollBox{
	0%  {opacity: 0;}
	80% {opacity: 1;}
	100%{opacity: 0;}
}


/*
	common
-----------------------------------------------------------------------------------------------*/
#wrapper.anmStart{
	opacity: 0;
	animation: anmFadeIn 0.8s ease 0.3s forwards;
}