.image_mouseover_4 {
overflow: hidden;
width: 100%;
height: 100%;
background: #fff;
}
.image_mouseover_4 img {
display: block;
transition-duration: 0.5s;
}
.image_mouseover_4 img:hover {
transform: scale(1.05);
transition-duration: 0.5s;
opacity: 0.6;
}

.slide-container {
  width: 250px;
  display: flex;
  align-items: center;
  height: 600px;
  overflow: hidden;
  flex-direction: column;
}
.slide-wrapper {
  display: flex;
  flex-direction: column;
  animation: slide-flow 30s infinite linear 1s both;
}
.slide{
  width: 245px;
  object-fit: cover;
  border: 1px solid #ddd;
}
@keyframes slide-flow {
     0% {transform: translateY(0);}
 100% {transform: translateY(-100%);}
}
.imgs-frame{
   position: relative;
   width: 800px;
   height: 300px;
   overflow: hidden;
   margin: 0 auto;
}
@media screen and (max-width: 767px){
.imgs-frame{
   width: 100%;
   height: 200px;
}
}
.msg{
   font-size: 20px;
   color: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
}

.imgs-01,
.imgs-02,
.imgs-03,
.imgs-04,
.imgs-05{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
   text-shadow: 2px 2px 3px #000, -1px -1px 3px #000;
}

.imgs-01{
   background-image: url('../images/hp001.jpg');
   animation: slide-animation-01 30s infinite;
}
.imgs-02{
   background-image: url('../images/002.jpg');
   animation: slide-animation-02 30s infinite;
}
.imgs-03{
   background-image: url('../images/hp003.jpg');
   animation: slide-animation-03 30s infinite;
}
.imgs-04{
   background-image: url('../images/004.jpg');
   animation: slide-animation-04 30s infinite;
}
.imgs-05{
   background-image: url('../images/hp005.jpg');
   animation: slide-animation-05 30s infinite;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
   10% {opacity: 1;}
  20% {opacity: 1; transform: scale(1.05);}
  17% {opacity: 0}
  95% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
   10% {opacity: 0; transform: scale(1.1);}
  15% {opacity: 1;}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  30% {opacity: 0;  transform: scale(1.0);}
  40% {opacity: 1;}
  70% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}
@keyframes slide-animation-04 {
    0% {opacity: 0;}
  50% {opacity: 0; transform: scale(1.1);}
  65% {opacity: 1;}
  75% {opacity: 1;}
  80% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-05 {
    0% {opacity: 0;}
  70% {opacity: 0;  transform: scale(1.0);}
  75% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.05;}
}