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

/*.swiper-container {
  height: calc(100vh - 100px);
  margin: 50px;
}

.swiper-slide {
  overflow: hidden;
}

.slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}

.swiper-button-next {
  right: 30px;
}

.swiper-button-prev {
  left: 30px;
}*/

#collection_area{
	position:relative;
	width:95%;
	height:calc(100vh - 130px);
	
	margin:0 auto;
	padding:150px 0 0 0;
	
	animation-name: collection;
	animation-duration: 1s;
}
@keyframes collection {
  0% {
	  transform: translateY(70px);
	  opacity: 0;
  }
  100% {
	  transform: translateY(0px);
	  opacity: 1;
  }
}
#collection_area  h2{
	position:absolute;
	top:25%;
	left:5%;
	
	display:block;
	
	font-size:18px;
	font-weight:500;
	color:#FFF;
	letter-spacing:0.2rem;
	
	background:#e60012;
	
	z-index:10;
	
	padding:5px 24px;
	text-align:center;
}
.swiper-container {
  height: 100%;
  width: 80%;
  margin: 30px;
}

.swiper-slide {
  overflow: hidden;
}

.slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: contain!important;
  background-position: center center;
  background-repeat:no-repeat;
}

.swiper-button-next {
  right: 25px;
}

.swiper-button-prev {
  left: -25px;
}

@media screen and (max-width:767px) {
	#collection_area{
	position:relative;
	width:100%;
	height:calc(100vh - 80px);
	
	margin:0 auto;
	padding:40px 0 0 0;
	
	animation-name: collection;
	animation-duration: 1s;
	}
	@keyframes collection {
  	0% {
	  transform: translateY(70px);
	  opacity: 0;
  	}
  	100% {
	  transform: translateY(0px);
	  opacity: 1;
  	}
	}
	#collection_area  h2{
	position:absolute;
	top:13%;
	left:0;
	
	display:block;
	
	font-size:15px;
	font-weight:500;
	color:#FFF;
	letter-spacing:0.1rem;
	
	background:#e60012;
	
	z-index:10;
	
	padding:5px 10px 5px 5%;
	text-align:center;
	}
	.swiper-container {
  	height: 100%;
  	width: 100%;
  	margin: 0 5%;
	}

	.swiper-slide {
  	overflow: hidden;
	}

	.slide-inner {
  	position: absolute;
  	width: 100%;
  	height: 100%;
  	top: 0;
  	left: 0;
  	background-size: contain!important;
	  background-position: center center;
	  background-repeat:no-repeat;
	}

	.swiper-button-next {
  	right: 25px;
	}

	.swiper-button-prev {
  	left: -25px;
	}
}