@charset "UTF-8";

.top-slider {
	width: 100%;
	position: relative;
	margin-top: 70px;
	height: calc(100vh - 70px);
	max-height: 1000px;
	z-index: 3;
}
.main-copy {
	position: absolute;
	left: calc(50% - 500px);
	width: 450px;
	top: 60%;
	z-index: 3;
}
.swiper-container {
	height: 590px;
	width: 100%;
}
.swiper-slide {
	width: 100%;
	height: 100%;
	background: #FFF;
}
.sfw01 {
	width: 100%;
	height: 100%;
	background: url("../img/2022/slide01.jpg") no-repeat center center;
	background-size: auto 100%;
}
.sfw02 {
	width: 100%;
	height: 100%;
	background: url("../img/2022/slide02.jpg") no-repeat center center;
	background-size: auto 100%;
}
.sfw03 {
	width: 100%;
	height: 100%;
	background: url("../img/2022/slide03.jpg") no-repeat center center;
	background-size: auto 100%;
}
.sfw04 {
	width: 100%;
	height: 100%;
	background: url("../img/2022/slide04.jpg") no-repeat center center;
	background-size: auto 100%;
}
.sfw05 {
	width: 100%;
	height: 100%;
	background: url("../img/2022/slide05.jpg") no-repeat center center;
	background-size: auto 100%;
}
.sfw06 {
	width: 100%;
	height: 100%;
	background: url("../img/2022/slide06.jpg") no-repeat center center;
	background-size: auto 100%;
}
.s-cloud {
 	position: absolute;
	width: 1400px;
	height: 590px;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	z-index: 2;
	bottom: 0;
	transform: translateX(-49%);
	left: 50%;
	opacity: 1;
}
.sft01 {
	background-image: url("../img/2022/clouds01.png");
}
.sft02 {
	background-image: url("../img/2022/clouds02.png");
}
.sft03 {
	background-image: url("../img/2022/clouds03.png");
}
.sft04 {
	background-image: url("../img/2022/clouds04.png");
}
.sft05 {
	background-image: url("../img/2022/clouds05.png");
}
.sft06 {
	background-image: url("../img/2022/clouds06.png");
}
.swiper-slide-active .s-cloud  {
  animation: moveCloud 8s 0s normal;
}
@keyframes moveCloud {
  0% {
    transform: translateX(-51%);
  }
	30% {

	}
	95% {
		transform: translateX(-49%);
	}
  100% {
    transform: translateX(-49%);
  }
}


@media screen and (max-width: 1023px) {
.top-slider {
	width: 100%;
	margin-top: 70px;
	height: 400px;
	z-index: 3;
}
.main-copy {
	position: absolute;
	left: calc(50% - 300px);
	width: 400px;
	top: 60%;
	z-index: 3;
}
.swiper-container {
	height: 400px;
	width: 100%;
}
.s-cloud {
 	position: absolute;
	width: 1000px;
	height: 400px;
}
}

@media screen and (max-width: 600px) {
.top-slider {
	width: 100%;
	margin-top: 70px;
	height: 300px;
	z-index: 3;
}
.main-copy {
	position: absolute;
	left: 0;
	width: 300px;
	top: 60%;
	z-index: 3;
}
.swiper-container {
	height: 300px;
	width: 100%;
}
.s-cloud {
 	position: absolute;
	width: 800px;
	height: 300px;
}
}