* {
	margin: 0;
	padding: 0;
}
.home{
	.main {
		display: flex;
		flex-grow: 1;
		flex-basis: auto;
		flex-direction: column;
		margin-top: 0px;
		.feed {
			display: flex;
			max-width: 100%;
			padding: 0 calc((100% - 1200px)/2) 40px;
			flex-wrap: wrap;
			justify-content: center;
			align-items: stretch;
			&-display {
				display: flex;
				flex-grow: 1;
				flex-shrink: 1;
				position: relative;
				min-height: 420px;
				margin: 20px;
				background-color: #FFF;
				border-radius: 10px;
				overflow: hidden;
				box-shadow: 0 20px 40px 0 rgba(50,50,50,0.08);
				flex-direction: column;
				top: 0px;
				transition: ease-in-out;
				-moz-transition: top .5s;
				-webkit-transition: top .5s;
				-o-transition: top .5s;
				&:hover {
					cursor: pointer;
					top: -15px;
				}
				a {
					text-decoration: none;
					display: flex;
					flex-direction: column;
					flex-grow: 1;
					flex-shrink: 1;
					.feed-title {
						padding: 30px 24px;
						display: flex;
						flex-grow: 1;
						font-size: 20px;
						font-weight: 500;
						line-height: 36px;
						color: @textColorTheme;
					}
					img {
						width: 100%;
						height: 200px;
						margin-bottom: 30px;
						background: @headerBackgroundColor;
						object-fit: cover;
					}
				}
			}
			&-meat {
				display: flex;
				padding: 8px 24px 24px 16px;
				justify-content: space-between;
				.meat-info {
					display: flex;
					flex-direction: column;
					.info-auth {
						display: flex;
						z-index: 3;
						align-content: flex-start;
						align-items: center;
						a {
							left: -8px;
							padding: 2px 8px;
							font-size: 14px;
							line-height: 20px;
							color: #898FA0;
							background: transparent;
							border-radius: 12px;
							text-decoration: none;
							outline: 0;
							cursor: pointer;
						}
					}
					.info-data {
						margin: 8px 0 0 8px;
						font-size: 12px;
						line-height: 18px;
						color: @textColorTheme;
					}
				}
				.meat-type {
					width: 32px;
					height: 32px;
					margin-top: 10px;
					background: url('https://cdn.jsdelivr.net/gh/duogongneng/MyBlogImg/imgicon-article.svg') no-repeat;
				}
			}
		}
	
	}
	
	.change-page {
		height: 40px;
		display: flex;
		padding: 0 calc((100% - 1160px)/2);
		margin-bottom: 20px;
		color: @textColorTheme;
		.p-page {
			display: flex;
			flex-basis: 0;
			justify-content: flex-start;
			align-items: center;
			flex-grow: 1;
			a {
				color: @textColorTheme;
				text-decoration: none;
				.previous {
					width: 120px;
					height: 40px;
					text-align: center;
					line-height: 40px;
					border-radius: 10px;
					color: #898FA0;
					margin-left: 18px;
					box-shadow: 0 20px 40px 0 rgba(50,50,50,0.1);
					transition: ease-in-out;
					-moz-transition: margin-top .5s;
					-webkit-transition: margin-top .5s;
					-o-transition: margin-top .5s;
				}
				.previous:hover {
					margin-top: -15px;
					cursor: pointer;
				}
			}
		}
		.n-page {
			display: flex;
			flex-basis: 0;
			justify-content: flex-end;
			align-items: center;
			flex-grow: 1;
			a {
				color: @textColorTheme;
				text-decoration: none;
				.next {
					width: 120px;
					height: 40px;
					text-align: center;
					line-height: 40px;
					border-radius: 10px;
					margin-right: 18px;
					color: #898FA0;
					box-shadow: 0 20px 40px 0 rgba(50,50,50,0.1);
					transition: ease-in-out;
					-moz-transition: margin-top .5s;
					-webkit-transition: margin-top .5s;
					-o-transition: margin-top .5s;
					&:hover {
						margin-top: -15px;
						cursor: pointer;
					}
				}
				
			}
		}
	}
}


@media screen and (min-width:600px) {
	.home{
		.main {
			.feed {
				&-display {
					flex-basis: 360px;
				}	
			} 
		}
	}
}