/** roulette slider **/

.roulette-slider {
	margin-top: 135px;
	margin-bottom: 50px;
}

.roulette-slider .container-1200 {
	display: grid;
}

.roulette-slider .title-container {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

.roulette-slider .title-container .roulette-slider-title {
	font-size: 3.45rem;
	font-weight: 700;
	color: #272726;
	text-align:center;
}

.roulette-slider .container-1200 > * {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}

.roulette-slider .swiper-container {
	margin: 0;
	width: 1200px;
}

.roulette-slider .swiper-container .swiper-slide {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

/*.roulette-slider .swiper-container .swiper-slide .right,
.roulette-slider .swiper-container .swiper-slide .left {
white-space: nowrap;
}*/

.roulette-slider .swiper-container .swiper-slide .right {
	grid-column: 1 / 2;
}

.roulette-slider .swiper-container .swiper-slide .image {
	grid-column: 2 / 3;
}

.roulette-slider .swiper-container .swiper-slide .left {
	grid-column: 3 / 4;
}

.contrast .roulette-slider .swiper-container .swiper-slide {
	background: transparent !important;
}

.roulette-slider .text-slider .swiper-container .swiper-slide .right {
	justify-self: end;
	margin-left: 25px;
}

.roulette-slider .text-slider {
	display: grid;
	align-self: center;
	padding-top:35px;
}

.roulette-slider .text-slider .swiper-container .swiper-slide .image {
	opacity: 0;
	height: 1px;
	overflow: hidden;
}

.roulette-slider .text-slider .swiper-container .swiper-slide .left {
	justify-self: start;
	margin-right: 25px;
	display: flex;
	align-items: center;
}

.roulette-slider .text-slider .swiper-container .swiper-slide .left img {
	max-height: 40px; 
}

.roulette-slider .bottom-line {
	grid-row: 2/3;
	height: 1px;
	width: 500px;
	justify-self: center;
	background: rgba(221,221,221,1);
	background: -moz-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%, rgba(255,255,255,0.75) 85%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(221,221,221,1)), color-stop(50%, rgba(255,255,255,0.75)), color-stop(100%, rgba(255,255,255,0)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%, rgba(255,255,255,0.75) 85%, rgba(255,255,255,0) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%, rgba(255,255,255,0.75) 85%, rgba(255,255,255,0) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%, rgba(255,255,255,0.75) 85%, rgba(255,255,255,0) 100%);
	background: radial-gradient(ellipse at center, rgba(221,221,221,1) 0%, rgba(255,255,255,0.75) 85%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#ffffff', GradientType=1 );
}

.roulette-slider .overlay {
	position: relative;
	z-index: 1;
}

.contrast .roulette-slider .overlay {
	display: none;
}

.contrast .roulette-slider .text-slider .swiper-container {
	background: transparent !important;
}

.roulette-slider .container-1200 .bottom-text {
	grid-row: 2 / 3;
	margin-top: 32px;
	position: relative;
}

.roulette-slider button.control-slider-btn {
	width: 40px;
	height: 40px;
	border-radius: 100%;
	background-color: white;
	position: absolute;
	bottom: 0;
	right: 20px;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #3D91DD;
	cursor: pointer;
}

@media (max-width: 1250px) {

	.roulette-slider .swiper-container {
		width: 1019px;
	}

	.roulette-slider .text-slider .swiper-container .swiper-slide .right {
		margin-left: 15px;
	}

	.roulette-slider .text-slider .swiper-container .swiper-slide .left {
		margin-right: 15px;
	}

}

@media (max-width: 1069px) {

	.roulette-slider .swiper-container {
		width: 960px;
	}

	.roulette-slider .swiper-container .swiper-slide .right,
	.roulette-slider .swiper-container .swiper-slide .left {
		font-size: 1.8em;
	}

}

@media (min-width: 1024px) {

	.roulette-slider-mobile {
		display: none;
	}

	.know-the-product .right-content .text {
		padding-left:10%;
	}
}

@media (max-width: 1023px) {

	.roulette-slider {
		display: none;
	}

	.roulette-slider-mobile {
		/* 		margin-top: 70px; */
		padding-top: 70px;
	}

	.roulette-slider-mobile .image {
		margin: 15px 0;
	}

	.roulette-slider-mobile .swiper-slide {
		display: flex;
		justify-content: center;
		font-size: 2.754em;
		font-weight: 700;
	}

	.roulette-slider-mobile .top-text .swiper-slide,
	.roulette-slider-mobile .bottom-text .swiper-slide {
		display: flex;
		align-items: center;
	}

	.roulette-slider-mobile .bottom-text{margin-top:50px;}
	.roulette-slider-mobile .bottom-text .swiper-slide img {
		max-height: 40px;
	}

	.roulette-slider-mobile .line-spacer {
		width: 66px;
		height: 2px;
		background-color: #898989;
		margin: 65px auto 27px;
	}

	.roulette-slider-mobile .bottom-desc {
		font-size: 1.625em;
	}



	/*.roulette-slider-mobile .image .swiper-container:after*/
	.bottom-line.bottom-line-cell{	grid-row: 2/3;
		height: 1px;
		width: 100%;
		justify-self: center;
		background: rgba(221,221,221,1);
		background: -moz-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%, rgba(255,255,255,0.75) 85%, rgba(255,255,255,0) 100%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(221,221,221,1)), color-stop(50%, rgba(255,255,255,0.75)), color-stop(100%, rgba(255,255,255,0)));
		background: -webkit-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%, rgba(255,255,255,0.75) 85%, rgba(255,255,255,0) 100%);
		background: -o-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%, rgba(255,255,255,0.75) 85%, rgba(255,255,255,0) 100%);
		background: -ms-radial-gradient(center, ellipse cover, rgba(221,221,221,1) 0%, rgba(255,255,255,0.75) 85%, rgba(255,255,255,0) 100%);
		background: radial-gradient(ellipse at center, rgba(221,221,221,1) 0%, rgba(255,255,255,0.75) 85%, rgba(255,255,255,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#ffffff', GradientType=1 );
	}

	.overlay.overlay-cell {
		position: relative;
		z-index: 1;
	}

	.roulette-slider-mobile .container:first-child .bottom-text {
		position: relative;
	}

	.roulette-slider-mobile .control-slider-btn {
		width: 40px;
		height: 40px;
		border-radius: 100%;
		background-color: white;
		position: absolute;
		bottom: 30px;
		right: 0;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid rgb(61, 145, 221);
	}
}

@media (max-width: 640px) {
	.roulette-slider-mobile .swiper-slide {
		font-size: 6.8vw;
	}

	.roulette-slider-mobile .bottom-desc {
		font-size: 4vw;
	}
}

/** roulette slider **/