@charset "utf-8";
/* CSS Document */

.thumb_out{
	position: relative;
}
.slider-thumbnail{
/*	margin: 0 70px;*/
	margin-top: 25px;
}
.slider-thumbnail .swiper-wrapper{
	flex-wrap: wrap;
	transform: none !important;
}
.slider-thumbnail .swiper-slide{
	width: 100px;
	opacity: 0.7;
	border: 3px solid #fff;
	width: calc(( 100% - 10px * 5 )/6);
	margin-right: 10px;
	margin-bottom: 10px;

}
.slider-thumbnail .swiper-slide:nth-of-type(6n){
	margin-right: 0;
}
.slider-thumbnail .swiper-slide-thumb-active{
	border: 3px solid #ffcc00;
	opacity: 1;
}
.swiper-button-next, 
.swiper-button-prev{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin-top: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffcc00;
}
.swiper-button-prev{
	left: 0;
}
.swiper-button-next{
	right: 0;
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{
	content: "";
}
.swiper-button-prev:after,
.swiper-button-next:after{
	width: 25px;
	height: 25px;
	border: 2px solid #fff;
	border-width: 5px 5px 0 0;
	transform: rotate(45deg);
	position: relative;
	left: -5px;
	
}
.swiper-button-prev:after{
	border-width: 5px 0 0 5px;	
	transform: rotate(-45deg);
	left: 5px;
}


@media screen and (max-width: 767px) {

	.slider-thumbnail .swiper-slide:nth-of-type(6n),	
	.slider-thumbnail .swiper-slide{
		width: calc(( 100% - 5px * 3 )/4);
		margin-right: 5px;
		margin-bottom: 5px;

	}	
	.slider-thumbnail .swiper-slide:nth-of-type(4n){
		margin-right: 0;
	}	
	
}


.slider .swiper-slide{
	position: relative;
}

.swiper-slide .cap{
	position: absolute;
	width: 100%;
	padding: 15px;
	background-color: rgba( 0,0,0,.3);
	left: 0;
	bottom: 0;
	color: #fff;
	font-size: 1.6rem;
	
	display: none !important;
}

.swiper-slide .cap a{
	text-decoration: underline;
}
.swiper-slide .cap a:hover{
	text-decoration: none;
}



@media screen and (max-width: 767px) {
	
.swiper-slide .cap{
	padding: 10px;
	font-size: 1.2rem;
	}
	
}




