.home-page{
	background-color: #EDEDEB;
}

.title-box{
	color: $color-light;
	background-color: $color-primary;
	text-align: center;
	@include box-shadow(2px 2px 2px 5px rgba(0,0,0,0.3));
	@include border-radius(15px);
}

.main-slider .item .wrapper{
	height: 600px;
	width: 100%;
	display: table;
	background-color: $color-secondary;
}
.main-slider .item .wrapper .inner{display: table-cell; vertical-align: middle; text-align: center;}

.h-title{font-size: 48px; font-weight: 400;}

.item-center{
	.slider{
		.slick-track{
			margin: 0 auto;
		}
	}
}

.item-right{
	.slider{
		.slick-track{
			margin: 0 0 0 auto;
		}
	}
}

.wrapper-slide{
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	background-color: $color-light;
	transform: translateY(0);
	transition: all 200ms;
	&:hover{transform: translateY(-15px);}
	.favorite{
		position: absolute;
		width: 40px;
		height: 46px;
		top: 25px;
		right: 22px;
		z-index: 1;
		.b-fav{
			cursor: pointer;
			position: relative;
			.fa-heart-o{color: $color-light; font-size: 38px;}
			.fr-main{opacity: 1; transition: all 200ms;}
			.fr-hover{
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				object-fit: contain;
				opacity: 0;
				filter: brightness(0) invert(1);
				transition: all 200ms;
			}
			&.active{
				.fr-main{opacity: 0;}
				.fr-hover{opacity: 1; filter: brightness(1) invert(0);}
			}
			&:hover{
				.fr-main{opacity: 0;}
				.fr-hover{opacity: 1;}
			}
		}
		.feather{
			font-size: 40px;
			color: $color-light;
		}
	}
	.head{
		.cover{padding-bottom: 75%;}
	}
	.body{
		padding: 11px 20px 20px 20px;
		.title{
			font-weight: 300;
			font-size: 30px;
			display: flex;
			align-items: center;
			color: $color-darkgray;
			padding-bottom: 15px;
			&.text-limit{white-space: nowrap; text-overflow: ellipsis; max-width: 100%}
			.rate{
				font-family: 'DMSans';
				font-weight: 500;
				display: block;
				width: 60px;
				height: 60px;
				color: $color-light;
				font-size: 24px;
				background-color: $color-danger;
				border-radius: 30px;
				text-align: center;
				line-height: 60px;
				margin-right: 19px;
			}
		}
		.desc{
			font-size: 30px;
			font-weight: 400;
			color: $color-secondary;
			padding-top: 22px;
			padding-bottom: 15px;
			border-top: 1px solid rgba(112, 112, 112,0.2);
			&.text-limit{white-space: nowrap; text-overflow: ellipsis; max-width: 100%}
		}
	}
}

.box-content{
	.desc{
		font-family: 'DMSans';
		font-size: 20px;
		font-weight: 400;
		line-height: 1.2em;
		max-width: 250px;
		margin-top: 17px;
		margin-bottom: 20px;
		&.text-limit{
			height: 9.6em;
			-webkit-line-clamp: 8;
		}
	}
}

.slick-list{
	overflow: unset;
	.slick-slide{
		opacity: 0;
		pointer-events: none;
		transition: all 200ms;
		&.slick-active{opacity: 1; pointer-events: inherit;}
	}
}
.slick-prev,
.slick-next{
	color: $color-light;
	font-size: 55px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 5px solid $color-light;
	transition: all 200ms;
	&.slick-disabled{opacity: 0; pointer-events: none;}
	&:hover{
		color: rgba(112, 112, 112,1);
		border-color: rgba(112, 112, 112,1);
	}
}

