/*-------ANIMATION IMAGE-------*/

.top-page div ul.image {
list-style: none;
display: block;
width: 70%;
height: 340px;
padding: 0;
margin: 0;
position: absolute;
right: 0;
top: 0;
z-index: 96;
}

.top-page div ul.image li {
display: block;
}

.top-page div ul.image li div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 340px;
overflow:hidden;
z-index: 90;
}

.top-page div ul.image li div p {
position: absolute;
top: 20px;
left: 20px;
z-index: 91;
font-size: 22px;
color: #0033CC;
letter-spacing: 2px;
text-shadow: 1px 1px 5px #555;
}

.top-page div ul.image li div p span {
display: inline-block; position:relative; left: 0; font-size: 22px; line-height:18px; letter-spacing: 0; padding:0;margin: 0; margin-left: 20px;
margin-top:-30px;
}

.top-page div ul.image li div img {
width: 100%;
display: none;
}

.fade1 {
background-image: url('../images/animation/11l.jpg');
background-position: 0 50%;
background-size: 100%;
animation: fadeIn1 25s ease 0s infinite normal;
}
@keyframes fadeIn1 {
    0%,100% { opacity:1;}
}
.fade2 {
background-image: url('../images/animation/13l.jpg');
background-position: top center;
background-position: 0 50%;
background-size: 100%;
animation: fadeIn2 25s ease 0s infinite normal;
}

@keyframes fadeIn2 {
    0%,20% { opacity:0;}
    35%,51% { opacity:1;} 
    70%,100% { opacity:0;}
}

.fade3 {
background-image: url('../images/animation/14l.jpg');
background-position: 0 50%;
background-size: 100%;
animation: fadeIn3 25s ease 0s infinite normal;
}
@keyframes fadeIn3 {
    0%,45% { opacity:0;}
    60%,85% { opacity:1;}
    100% { opacity:0;}
}