main {
	flex-grow: 1;
    overflow: auto;
	.main {
		width: 98vw;
		margin-left: auto;
		margin-right: auto;
	}
	.page-intro {
		text-align: center;
		a { text-decoration: underline; }
		margin-top: 3rem;
		margin-bottom: 1rem;
		padding-right: 1.1rem;
		font-size: 150%;
	}
	.gen_list {
		.text {
		}
		.article_list {
			margin-bottom: 5rem;
		}
		a {
			text-decoration: none;
			&:hover {
				.img {
					height: 140px;
					background-size: 120% auto;
				}
				.img-only {
					height: 360px;
					background-size: 110% auto;
					background-position: top;
				}
			}
		}
		img {
			width: 100%;
		}
		h3 {
			margin-top: 0rem;
		}
		.img {
			width: 100%;
			height: 140px;
			transition: all .3s ease-in-out;
			background-position: center center;
			background-size: 100% auto;
			background-repeat: no-repeat;
		}
		.img-only {
			width: 100%;
			height: 360px;
			transition: all .2s ease-in-out;
			background-size: 100% auto;
			background-position: top center; 
			background-repeat: no-repeat;
		}
	}
}


@media (min-width: 600px) {

}
@media (min-width: 640px) {
	.main, .banner {
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media (min-width: 768px) {
	.main, .banner {
		max-width: 768px;
		margin-left: auto;
		margin-right: auto;
	}
	.two_lists {
		display: flex;
		justify-content: space-between;
		.gen_list {
			width: 45%;
		}
	}
}
@media (min-width: 1024px) {
	.main, .banner {
		max-width: 1024px;
		margin-left: auto;
		margin-right: auto;
	}

}
@media (min-width: 1280px) {
	.main, .banner {
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
	}

}
@media (min-width: 1920px) {
	.main, .banner {
		max-width: 1920px;
		margin-left: auto;
		margin-right: auto;
	}

}