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

.top-page ul li div ul.image {
list-style: none;
display: block;
width: 1100px;
height: 380px;
padding: 0 0;
}

.top-page ul li div ul.image li {
border: none;
}

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

/*-----ANIMATION absolute----*/

.top-page ul li div ul.image li div {
position: absolute;
top: 0;
left: 0;
width: 1100px;
height: 380px;
overflow:hidden;
border: 1px solid rgba(255,255,255,0.2);
z-index: 90;
}

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

.top-page ul li div ul.image li div p {
position: absolute;
bottom: 0;
left: 300px;
z-index: 91;
width:775px;
padding: 7px 5px 7px 20px;
background: rgba(255,255,255,0.58);
font-size: 18px;
font-weight: normal;
line-height: 28px;
color: #003333;
letter-spacing: 2px;
}

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


.fade1 {
animation: fadeIn1 25s ease 0s infinite normal;
}
@keyframes fadeIn1 {
    0%,100% { opacity:1;}
}
.fade2 {
animation: fadeIn2 25s ease 0s infinite normal;
}

@keyframes fadeIn2 {
0%,18% {opacity:0;}
33%,52% {opacity:1;}
67%,100% {opacity:0;}
}

.fade3 {
animation: fadeIn3 25s ease 0s infinite normal;
}
@keyframes fadeIn3 {
0%,52% {opacity:0;}
67%,85% {opacity:1;}
100%,100% {opacity:0;}
}

.fade4 {
}
.fade5 {
}
.fade6 {
}