@charset "UTF-8";
/* CSS Document */

/*---------------------------------------------
  General Settings
  ---------------------------------------------
 
img {width: 100%;  height: auto;  vertical-align: bottom;}
.swiper-container {  padding: 0px;  }*/
/*---------------------------------------------
  Swiper tips Sample01
  ---------------------------------------------*/
/*.s-fade-wrap {  position: relative;  max-width: 640px; margin: 0 auto;}
.s-fade-text {  position: absolute;  top: 20%;  left: 0;  width: 100%;  text-align: center;  color: white;  font-size: 5vw;}*/

.swiper-slide-active .s-fade-text {
  animation: slideTextFade 1.75s ease 0s 1 normal;}

@keyframes slideTextFade {
  0%, 25% {    opacity: 0;  }
  100% {    opacity: 1;  }
}
/*---------------------------------------------
  Swiper tips Sample02
  ---------------------------------------------*/
/*.s-right-wrap {  position: relative;  max-width: 640px;  margin: 0 auto;}
.s-right-text {  position: absolute;  top: 20%;  left: 0;  width: 100%;  text-align: center;  color: white;  font-size: 5vw;}*/

.swiper-slide-active .s-right-text {
  animation: slideFromRight 1.5s ease 0s 1 normal;}

@keyframes slideFromRight {
  0%, 25% {    transform: translateX(50px);    opacity: 0;  }
  100% {    transform: translateX(0px);    opacity: 1;  }
}
/*---------------------------------------------
  Swiper tips Sample03
  ---------------------------------------------*/
.s-1-wrap {  position: relative; width:950px; height:300px;  margin: 0 auto; background:url(../img/image5.jpg) no-repeat; background-position:100% 10%; background-size:80% auto}

.s-1-text{position:absolute;width: 80%;left:10%;   top:50%;color:#FFFFFF; text-shadow:2px 2px 2px #4C4C4C;font-size:36px; letter-spacing:1px; line-height:none; font-weight:bold; z-index:1}
.s-1-sub { position: absolute;  width: 100%;  left:-100%; top: 55%; }
.s-1-sub_color{ width:200%; height:500px; background:#009372; margin:0 auto; text-align:center; transform:skew(65deg,65deg);}

.swiper-slide-active .s-1-text {
  animation: slideFromRight 2.0s ease 0s 1 normal;}

.swiper-slide-active .s-1-sub {
  animation: slideFromRightSub 0.7s ease 0s 1 normal;}

@keyframes slideFromRightSub {
  0%, 45% {    transform: translateX(-1000px);    opacity: 0;  }  100% {    transform: translateX(-950px);    opacity: 1;  }
}

/*---------------------------------------------
  Swiper tips Sample03-2
  ---------------------------------------------*/
.s-2-wrap {  position: relative; width:950px;  height:300px;  margin: 0 auto;background:url(../img/image6.jpg) no-repeat; background-position:00% 10%; background-size:100% auto}

.s-2-text{position: absolute;  top:50%; width:40%;  left:60%;color:#FFFFFF; text-shadow:2px 2px 2px #4C4C4C;font-size:36px; letter-spacing:1px; line-height:none; font-weight:bold; z-index:1}
.s-2-sub {  position: absolute;top: 55%;   width: 100%;  left: 0;}
.s-2-sub_color{ width:200%; height:500px; background:#009372; margin:0 auto; text-align:center; transform:skew(-65deg,-65deg);}

.swiper-slide-active .s-2-text {
  animation: slideFromRight 2.0s ease 0s 1 normal;}

.swiper-slide-active .s-2-sub {
  animation: slideFromRightSub 0.7s ease 0s 1 normal;}

@keyframes slideFromRightSub {
  0%, 45% {    transform: translateX(50px);    opacity: 0;  }
  100% {    transform: translateX(0px);    opacity: 1;  }
}
/*---------------------------------------------
  Swiper tips Sample03-3
  ---------------------------------------------*/
.s-3-wrap {  position: relative; width:950px;  height:300px;  margin: 0 auto;background:url(../img/image7.jpg) no-repeat; background-position:50% 45%; background-size:100% auto}

.s-3-text{ position: absolute;  top:50%; width: 100%;  left: 0;  text-align: center;  color:#FFFFFF; text-shadow:2px 2px 2px #4C4C4C;font-size:24px; letter-spacing:1px; line-height:none; font-weight:bold; z-index:1}
.s-3-sub {  position: absolute; top:75%;  width: 100%;  left: 0;  text-align: center; color:#FFFFFF; text-shadow:2px 2px 2px #4C4C4C;font-size:20px; letter-spacing:1px; line-height:none; font-weight:bold; z-index:1}

.swiper-slide-active .s-3-text {
  animation: slideTextFade 1.0s ease 0s 1 normal;}

.swiper-slide-active .s-3-sub {
  animation: slideTextFade 2.0s ease 0s 1 normal;}

@keyframes slideTextFade {
  0%, 25% {    opacity: 0;  }
  100% {    opacity: 1;  }
}