/*------ 810 385 -------*/

/*-------ANIMATION IMAGE-------*/
.top-page ul li div ul.image {
list-style: none;
display: block;
width: 780px;
height: 371px;
position: absolute; top: 35px; right: 0px; 
margin: 0;
padding:0;
}

.top-page ul li div ul.image li {
border: none;
background-image: linear-gradient(90deg, #CCCCCA 0%, #eeeeec 51%, #efeeec 75%, #C7C8C4 100%);;
}

.top-page ul li div ul.image li div {
position: absolute;
top: 25px;
left: 0;
width: 780px;
height: 371px;
overflow:hidden;
border: none;
z-index: 90;
}


.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 img {
width: 100%;
height: 100%;
}

.top-page ul li div ul.image li div p {
position: absolute;
bottom: 0;
left: 0;
z-index: 91;
font-size: 17px;
line-height: 20px;
color: #43676b;
letter-spacing: 2px;
width: 740px;
padding: 7px 10px 4px 30px;
font-weight: bold;
background:rgba(235,235,235,0.82);
}

.top-page ul li div ul.image li div p span {
display: block; position:relative; font-size: 14px; line-height:18px; letter-spacing: 0; padding:0 24px 5px 0;margin: 0;font-weight: normal;color:#2c4f54;
}


.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 {
}