.img-frame{
   position: relative;
   width: 70%;
   height: 300px;
   overflow: hidden;
   margin: 0 auto;
}
@media screen and (max-width: 767px){
.img-frame{
   width: 100%;
   height: 200px;
}
.img-01, .img-02, .img-03, .img-04, .img-05{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}


.img-01{
   background-image: url('Image/photo_land/Photo_land_101.jpg');
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url('Image/photo_land/Photo_land_102.jpg');
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url('Image/photo_land/Photo_land_103.jpg');
   animation: slide-animation-03 24s infinite;
}
.img-04{
   background-image: url('Image/photo_land/Photo_land_104.jpg');
   animation: slide-animation-04 24s infinite;
}
.img-05{
   background-image: url('Image/photo_land/Photo_land_105.jpg');
   animation: slide-animation-05 24s infinite;
}


@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}

@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}

@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}

@keyframes slide-animation-04 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}
@keyframes slide-animation-05 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}