header { position: fixed; top: 0; width: 100%; z-index: 10;}
.home-footer { background: rgba(0,0,0, .6); position: fixed; bottom: 0; width: 100%; padding: 10px 0;}
.home-footer .footer-bottom { padding: 0; }

.box-emptyspace.clearfix { height: 0 !important;}
.so-spotlight2 { padding-bottom: 0;}

.flex-container {position: absolute; height: 100vh; width: 100%; display: -webkit-flex; display: flex; overflow: hidden;}
.flex-slide {-webkit-flex: 1; -ms-flex: 1; flex: 1; cursor: pointer; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease;}
.flex-slide:hover { -webkit-flex-grow: 3; flex-grow: 3; }
.flex-title {color: #f1f1f1; position: relative; font-size: 4vw; margin: auto; text-align: center; transform: rotate(90deg); top: 50%; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease;}
.flex-about {opacity: 0; color: #f1f1f1; position: relative; width: 70%; font-size: 2vw; padding: 5%; top: 20%; border: 2px solid #f1f1f1; border-radius: 10px; line-height: 1.3; margin: auto; text-align: left; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease;}
.flex-about-offroad { opacity: 0; }
.casual {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/image/home_slider/casual.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.onroad {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/image/home_slider/on_road.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.offroad {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/image/home_slider/off_road.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}


@media screen and (max-width: 768px) {
    .home-footer { background: #000; position: relative}
  .flex-container { flex-direction: column; position: relative; display: block; height: auto;}
  .flex-title { transform: rotate(0deg) !important; animation: textZoom 6s infinite; }
    .onroad .flex-title { animation-delay: 2s; }
    .casual .flex-title { animation-delay: 4s; }
  .flex-about { padding: 0%; border: 0 solid #f1f1f1;}
  .flex-slide {overflow: auto; overflow-x: hidden; flex: initial; -webkit-flex: initial; -ms-flex: initial;}
  .flex-slide p { font-size: 2em; }
  .flex-slide ul li { font-size: 2em; }
  .offroad, .onroad, .casual {background-attachment: initial;}
    .flex-slide:hover { flex-grow: initial; -webkit-flex-grow: initial;}
}

@keyframes aboutFlexSlide {  
  0% { -webkit-flex-grow: 1; flex-grow: 1; }
  50% { -webkit-flex-grow: 3; flex-grow: 3; }
  100% { -webkit-flex-grow: 1; flex-grow: 1; }
}

@keyframes homeFlextitle {  
  0% {
    transform: rotate(90deg);
    top: 15%;
  }
  50% {
    transform: rotate(0deg);
    top: 15%;
  }
    100% {
        transform: rotate(90deg);
        top: 15%;
    }
}

@keyframes flexAboutHome {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


 @-webkit-keyframes 
sk-cubemove {  25% {
 -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
}
 50% {
 -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
}
 75% {
 -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
}
 100% {
 -webkit-transform: rotate(-360deg);
}
}
@keyframes 
sk-cubemove {  25% {
 transform: translateX(42px) rotate(-90deg) scale(0.5);
 -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
}
 50% {
 transform: translateX(42px) translateY(42px) rotate(-179deg);
 -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
}
 50.1% {
 transform: translateX(42px) translateY(42px) rotate(-180deg);
 -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
}
 75% {
 transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
 -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
}
 100% {
 transform: rotate(-360deg);
 -webkit-transform: rotate(-360deg);
}
}

@-webkit-keyframes textZoom {
    0% {
        font-size: 20px;
    }
    25% {
        font-size: 30px;
    }
    50% {
        font-size: 20px;
    }
    100% {
        font-size: 20px;
    }
}

@keyframes textZoom {
    0% {
        font-size: 20px;
    }
    25% {
        font-size: 30px;
    }
    50% {
         font-size: 20px;
     }
    100% {
        font-size: 20px;
    }
}