.Slider {
	width: 100%;
	aspect-ratio: 4.43;
	position: relative;
	display: flex;
	.Slide{
		position: absolute;
		width:100%;
		height: 100%;
		top:0;
		left:0;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		.description{
			display:flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: baseline;
			position: absolute;
			bottom: 7.3%;
			left:10%;
			width: 600px;
			gap: 40px;
			.label{
				font-family: var(--primary-font);
				font-size: 80px;
				font-weight: bold;
				color: #fff;
				text-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
				line-height: 63px;
			}
			.action{
				text-decoration: none;
				font-size: var(--large-font-size);
				font-weight: bold;				
				line-height: 60px;
				border-radius: 24px;
				background-color: var(--body-color);
				width:initial;
				color: var(--style-color);
				padding: 0 50px;
			}
		}
	}
	.slidesPan{
		position: absolute;
		bottom: 4%;
		left: 50%;
		transform: translate(-50%,0);
		display:flex;
		flex-direction: row;
		gap:44px;
		span{
			width:20px;
			height:20px;
			border-radius: 20px;
			background-color: #FFF;
			opacity: 0.5;
			cursor: pointer;
		}
		span.On{
			opacity: 1;
		}
	}
	>.Icon{
		position: absolute;
		width:38px;
		height:38px;
		top: 50%;
		transform: translate(0,-50%);
		background-color: #FFF;
	}
	>.Icon.Right{
		right: 3.1%;
	}
	>.Icon.Left{
		left: 3.1%;
	}	
}
@media screen and (max-width: 900px) {
	.Slider{
		.Slide {
			.description{
				width: 50%;
				.label{
					font-size: 42px;
				}
				.action{
					padding: 0;
					width: 100%;
					text-align: center;
				}
			}			
		}
		.slidesPan{
			display: none;
		}
	}	
}
@media screen and (max-width: 768px) {
	.Slider{
		aspect-ratio: 0.81;
		.Slide {
			.description{
				width: 70%;
				left:15%;
				.label{
					font-size: 42px;
				}
				.action{
					padding: 0;
					width: 100%;
					text-align: center;
				}
			}			
		}
		.slidesPan{
			display: none;
		}
	}
}