@charset "UTF-8";

:root {
	--colorBk: #000;
	--colorWh: #fff;
	--colorNv: #343399;
}

#news {
	padding: 110px 0 120px;
	#tab {
		display: flex;
		justify-content: center;
		li {
			width: 12em;
			text-align: center;
			margin: 0 .25em;
			a, span {
				color: var(--colorNv);
				text-decoration: none;
				background: #fff;
				border: solid 1px var(--colorNv);
				border-radius: 50vh;
				padding: .25em 0;
				display: block;
			}
			span {
				color: var(--colorWh);
				background: var(--colorNv);
			}
		}
	}
	#nlist {
		border-top: solid 1px #ededf6;
		padding-top: 50px;
		li {
			border-bottom: solid 1px #ededf6;
			margin-bottom: 50px;
			padding-bottom: 50px;
			display: flex;
			.cat {
				width: 6em;
				margin-right: 50px;
				span {
					width: 100%;
					color: var(--colorNv);
					text-align: center;
					line-height: 1;
					background: #edf3f6;
					border-radius: 50vh;
					padding: .8em 0;
					display: inline-block;
				}
			}
			.date {
				width: 7em;
				color: #7e7e7e;
				line-height: 2.2;
			}
			.title {
				width: calc(100% - 13em - 50px);
			}
		}
	}
}

@media screen and (max-width:799px) {

	#news {
		padding: 13vw 0;
		#tab {
			justify-content: flex-start;
			flex-wrap: wrap;
			li {
				width: 11em;
				margin: 0 .5em 1em;
			}
		}
		#nlist {
			padding-top: 6vw;
			li {
				margin-bottom: 6vw;
				padding-bottom: 6vw;
				flex-wrap: wrap;
				align-items: center;
				.cat {
					width: 6em;
					margin-right: 5vw;
				}
				.date {
					width: 7em;
				}
				.title {
					width: 100%;
					margin-top: 3vw;
				}
			}
		}
	}
}