.img_wrap{
 
  margin: 20px auto 0;
  transition-duration: 0.5s;
}
.img_wrap img{
  width: 100%;
  cursor: pointer;
}
.img_wrap:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}
header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10000;
}

.font-1 {
font-family:"Blagak","High Junps","Kings";
letter-spacing: 11px;
}
.font-2 {
font-family:"Suifak","High Junps","Beadly";
letter-spacing: 5px;
}
.slideshow-fade{
    position: relative;
    width: 280px;
    height: 200px;
    li{
        list-style: none;
        width: 100%;
        height: 100%;
        img{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
        }
    }
}

.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{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
   background-image: url('IMG_1775.jpg');
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url('IMG_1774.jpg');
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url('IMG_1772.jpg');
   animation: slide-animation-03 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);}
}