@charset "utf-8";

/* ---------------------------
 Slider
------------------------------ */
.swiper {
	width: 100%;
    height: 100%;
	position: relative;
}

.swiper-wrapper {
    display: flex;
	align-items: stretch!important;
    justify-content: space-between;
}

.swiper-slide {
    width: 25%;
	height: auto;
}
@media screen and (max-width: 994px) {
	.swiper-slide {
		width: 33.3%;
	}
}

/* ----- Pagenation ----- */
.swiper_set {
	display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 30px;
    align-items: center;
}
.swiper-pagination {
	position: inherit;
}

horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    width: auto;
}
.swiper-pagination-bullet {
	width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    background: #f4f4f4;
	opacity: 1;
}
.swiper-pagination-bullet-active {
	background-color: #a9001c;
}

/* ----- pause ----- */
.swiper_pause {
	position: relative;
    color: transparent;
    background-color: #515156;
    border: none;
    width: 35px;
    height: 30px;
    z-index: 50;
    margin-left: 15px;
    border-radius: 0;
}
.swiper_pause::after {
	width: 5px;
    height: 15px;
    content: "";
    border: solid #f4f4f4;
    border-width: 0 4px 0 4px;
    position: absolute;
    top: 23%;
    left: 34%;
}
.paused::after {
	width: 0;
    height: 0;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #f4f4f4;
    border-right: 0;
    margin-left: 4px;
    top: 23%;
    left: 28%;
}

/* ----- next/prev ----- */
.swiper-button-next {
	height: 60px;
    width: 60px;
    border-radius: 50%;
    top: 43%;
    right: 25px;
    background-color: #fefefe;
    box-shadow: 1px 1px 2px rgba(225, 225, 225, 0.8);
}
@media screen and (max-width: 994px) {
	.swiper-button-next {
		height: 50px;
    	width: 50px;
		top: 40%;
		right: 10px;
	}
}
@media screen and (max-width: 579px) {
	.swiper-button-next {
		height: 40px;
    	width: 40px;
		top: 39%;
		right: 5px;
	}
}

.swiper-button-prev {
	height: 60px;
    width: 60px;
    border-radius: 50%;
    top: 43%;
    left: 25px;
    background-color: #fefefe;
    box-shadow: 1px 1px 2px rgba(225, 225, 225, 0.8);
}
@media screen and (max-width: 994px) {
	.swiper-button-prev {
		height: 50px;
    	width: 50px;
		top: 40%;
		left: 10px;
	}
}
@media screen and (max-width: 579px) {
	.swiper-button-prev {
		height: 40px;
    	width: 40px;
		top: 39%;
		left: 5px;
	}
}

.swiper-button-next::after,
.swiper-button-prev::after {
	font-size: 130%;
	font-weight: bold;
    color: #222;
}

/* --- ControllerSet --- */
.ControllerSet .swiper-button-next {
	height: 60px;
    width: 60px;
    border-radius: 50%;
    top: 46%;
    right: 25px;
    background-color: #fefefe;
    box-shadow: 1px 1px 2px rgba(225, 225, 225, 0.8);
}
@media screen and (max-width: 994px) {
	.ControllerSet .swiper-button-next {
		height: 50px;
    	width: 50px;
		top: 44%;
    	right: 10px;
	}
}
@media screen and (max-width: 579px) {
	.ControllerSet .swiper-button-next {
		height: 40px;
    	width: 40px;
		top: 40%;
    	right: 5px;
	}
}
@media screen and (max-width: 399px) {
	.ControllerSet .swiper-button-next {
		top: 43%;
	}
}

.ControllerSet .swiper-button-prev {
	height: 60px;
    width: 60px;
    border-radius: 50%;
    top: 46%;
    left: 25px;
    background-color: #fefefe;
    box-shadow: 1px 1px 2px rgba(225, 225, 225, 0.8);
}
@media screen and (max-width: 994px) {
	.ControllerSet .swiper-button-prev {
		height: 50px;
    	width: 50px;
		top: 44%;
    	left: 10px;
	}
}
@media screen and (max-width: 579px) {
	.ControllerSet .swiper-button-prev {
		height: 40px;
    	width: 40px;
		top: 40%;
    	left: 5px;
	}
}
@media screen and (max-width: 399px) {
	.ControllerSet .swiper-button-prev {
		top: 43%;
	}
}