/* CSS Document */
/*---------------------------------------------
  General Settings  background: linen;
  ---------------------------------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.swiper-container {
  padding: 15px 0 50px;
  background: #eeeeee;
}
.swiper-slide {
  padding: 5px 0px;
  background: #eeeeee;
}

/*---------------------------------------------
  Swiper tips Sample01
  ---------------------------------------------*/
@keyframes slideTextFade {
  0%, 25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*---------------------------------------------
  Swiper tips Sample02
  ---------------------------------------------*/
@keyframes slideFromRight {
  0%, 25% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
/*---------------------------------------------
  Swiper tips Sample03
  ---------------------------------------------*/
@keyframes slideFromRightSub {
  0%, 45% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
/*---------------------------------------------
  Swiper tips Sample04
  ---------------------------------------------*/
@keyframes slideFromRightBtn {
  0%, 65% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
/*---------------------------------------------
  Swiper tips Sample05
  ---------------------------------------------*/
.s-four-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}
/*
.s-four-wrap img {
  padding-left: 10px;
}
*/

.s-four-text,
.s-four-sub,
.s-four-box {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  color: white;
}

.s-four-text {
  /*
  top: 20%;
  font-size: 5vw;
  font-size: 2vw;
  */
  padding: 10px 10px 10px 15px;
  bottom: 20%;
  height: 10%;
  width:100%;
  text-align: left;
  background: rgba(0, 0, 0, 0.4);
}

.s-four-sub {
  /*
  background: rgba(199, 21, 133, 0.5);
  height: 10%;
  transition-duration: 1s;
  font-size: 2vw;
.s-four-sub:hover { transform:s-four-sub(90deg); }
  */
  font-size: 22px;
  top: 0%;
  width:120px;
  height:35px;
  text-align: center;
  background: rgba(245, 17, 103, 0.9);
}

.s-four-box {
  bottom: 0;
  height: 20%;
  padding: 10px 10px 10px 15px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  text-align: left;
}

.swiper-slide-active .s-four-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;
}
.swiper-slide-active .s-four-sub {
  animation: slideFromRightSub 2.0s ease 0s 1 normal;
}
.swiper-slide-active .s-four-box {
  animation: slideFromRightBox 2.5s ease 0s 1 normal;
}

@keyframes slideFromRightBox {
  0%, 65% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0px);
  }
}
/*---------------------------------------------
  Style End
  ---------------------------------------------*/