@charset "utf-8";

.animation,.animation02{
    display: block;
    justify-content: center;
	margin: 0;
	padding: 0;
}
.animation img{
	padding: 0;
    margin: 0;
	border: 0;
}

.animation02 img{
    width: 420px;
    margin: 0 auto;
}

.animation a{

    color: #ffffff;
}

.animation02 a{
    width: 420px;
    color: #ffffff;
    background-color: #5f9ea0;
}

.animation a:hover,.animation02 a:hover{

    cursor: pointer;
}
.animation .anm_mod,.animation02 .anm_mod{
    opacity: 0;
    transform: translate3d(0, 30%, 0);
    transition: all 1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
}


.animation. anm_mod.rote,.animation02 .anm_mod.rote{
    opacity: 0;
    transform: translate3d(0, -100%, 0) rotate(1080deg);
    transition:  all 2s ease 2S;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
}

.animation .anm_mod.full{

    font-size: 2em;
}

.animation02 .anm_mod.full{
    width: 420px;
    font-size: 2em;
}

.animation .anm_mod.left{
    transform: translate3d(-30%, 0, 0);
	transition: all 1s ease-out;
}
.animation .anm_mod.right{
    transform: translate3d(30%, 0, 0);
	
}
.animation .anm_mod.delay_1s{
    transition: all 0.5s ease-in-out 0.5s;
	float: left;
}
.animation .anm_mod.delay_2s{
	transition: all 1s ease-in-out 0.5s;
	float: left;
}
.animation .anm_mod.delay_3s{
    transition: all 0.5s ease 1s;
	float: left;
}
.animation .anm_mod.active{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media screen and (max-width: 760px){
.animation .anm_mod,.animation02 .anm_mod{
    opacity: 0;
    transform: translate3d(0, 10%, 0);
    transition: all 1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
}
}