/* --------------------------------------------------------------
for animation
-------------------------------------------------------------- */

/* base -------------------------------------------*/

.effect {
	opacity: 0;
}

.effect02{
	transition: .5s;
	transform: translate(0,20px);
	opacity: 0;
    z-index:51;
}

.effect03{
    transition: 1.5s;
    transform: scale(1.2,1.2);
    opacity: 0;
}

.effect04{
    transition: 2s;
    transform: translate(0,20px);
    opacity: 0;
}

.effect05{
    transition: 2s;
    transform: translate(-100px,0);
    opacity: 0;
    position: relative;
    z-index:50;
}

.effect06{
    transition: 2s;
    transform: translate(100px,0);
    opacity: 0;
    position: relative;
    z-index:50;
}

/* animation -------------------------------------------*/

.fadein {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}



.slideIn,
.slideIn02,
.slideIn03,
.slideIn04{
    transform: translate(0,0)!important;
    opacity: 1.0!important;
    position: relative;
    z-index:50;
}

.slideIn{
    position: relative;
    z-index:51;
}

.fadeIn02{
    transform: scale(1,1);
    opacity: 1.0;
}

/* keyframes -------------------------------------------*/

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn02 {
    0% {opacity: 0}
    100% {opacity: 1}
}


@-webkit-keyframes fadeOut {
    0% {opacity: 1}
    100% {opacity: 0}
}