@charset "utf-8";
#news_all header.desktop_hdr::before {
		background: rgba(255, 255, 255, 0.8);
}
.news_body {
		background: #F5F8FC;
		padding: 120px 30px 350px;
}
@media(max-width: 767px) {
		.news_body {
				padding: 120px 30px 180px;
		}
}


/* ========== */
.news_item_gr {
		max-width: 980px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 25px;
}
@media (max-width: 960px) {
		.news_item_gr {
				margin: 0 auto;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 25px 25px;
		}
}
@media (max-width: 600px) {
		.news_item_gr {
				margin: 0 auto;
				display: block;
				gap: 0 0;
		}
}
/* ========== */
.categories {
		max-width: 980px;
		margin: 0 auto 10px;
}
.categories {
		list-style: none;
		display: flex;
		flex-wrap: wrap;
}
.categories li {
		letter-spacing: 0;
		margin: 0 4px 8px 0;
		font-size: 12px;
}
.categories li label {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20px;
		border: 1px solid #000;
		border-radius: 60px;
		padding: 0 12px;
		box-sizing: border-box;
		transition: background 0.1s;
		text-decoration: none;
		cursor: pointer;
		position: relative;
}
.categories li label.isCurrent {
		background: #3A9362;
		border: 1px solid #3A9362;
		color: #fff;
}
@media (hover: hover) {
		.categories li label:hover {
				background: #3A9362;
				border: 1px solid #3A9362;
				color: #fff;
		}
}
.categories li label input[type="radio"] {
		position: absolute;
		top: 0;
		left: 0;
		width: 18px;
		height: 18px;
		opacity: 0;
		z-index: -1
}
#news_all section {
		max-width: 980px;
		margin: 60px auto 0;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 25px;
		opacity: 1;
		transition: opacity 0.4s;
}
#news_all section.isChanging {
		opacity: 0;
}
article {
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		cursor: pointer;
		transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#news_all section.isChanging article {
		transform: scale(0.9);
}
article.isHide {
		display: none;
}
article figure {
		overflow: hidden;
}
article figure img {
		width: 100%;
		height: auto;
		aspect-ratio: 10 / 6.45;
		object-fit: cover;
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
		article:hover figure img {
				transform: scale(1.2);
		}
}
article header {
		padding: 10px 20px 25px;
		position: static;
		top: inherit;
		left: inherit;
		width: auto;
}
article header::before {
		display: none;
}
article header p {
		font-size: 16px;
		font-weight: 500;
		margin: 0;
		line-height: 1.8;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;
}
time {
		font-weight: 300;
		font-size: 14px;
		color: #aaa;
		margin-bottom: 10px;
		display: block
}
article ul {
		padding: 0 20px 22px;
		display: flex;
		flex-wrap: wrap;
		list-style: none;
}
article ul li {
		margin: 0 4px 8px 0;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20px;
		border: 1px solid #000;
		border-radius: 60px;
		padding: 0 12px;
		box-sizing: border-box;
		letter-spacing: 0;
}
@media (max-width: 960px) {
		#news_all section {
				margin: 0 auto;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 25px 25px;
		}
		time {
				font-size: 11px;
		}
}
@media (max-width: 600px) {
		#news_all section {
				margin: 0 auto;
				display: block;
				gap: 0 0;
		}
		article {
				margin-bottom: 40px;
		}
		article header p {
				margin-bottom: 0;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
		}
		time {
				font-size: 12px;
		}
}
/* ========== */
.pagnation_wrap {
		display: flex;
		justify-content: center;
		margin-top: 60px;
}
.pagnation_wrap ul {
		display: flex;
		justify-content: center;
		align-items: center;
		list-style: none
}
.pagnation_wrap li {
		height: 45px;
		margin: 0 6px;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0;
		display: flex;
		justify-content: center;
		align-items: center;
}
.pagnation_wrap li.toFirst {
		margin-right: 20px;
}
.pagnation_wrap li.toEnd {
		margin-left: 20px;
}
.pagnation_wrap li.toFirst span, .pagnation_wrap li.toEnd span {
		text-indent: -9999px;
}
.pagnation_wrap li a {
		text-decoration: none;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 38px;
		height: 38px;
		box-sizing: border-box;
		color: #000;
		border: 1px solid #000;
		border-radius: 50%;
		transition: background 0.2s;
}
.pagnation_wrap li a.isCurrent {
		background-color: #3A9362;
		border: 1px solid #3A9362;
		color: #fff;
}
.pagnation_wrap li a span {
		transform: translateY(1px)
}
.pagnation_wrap li a.prevLink, .pagnation_wrap li a.nextLink {
		width: 45px;
		height: 45px;
		position: relative;
}
.pagnation_wrap li a.prevLink::after, .pagnation_wrap li a.nextLink::after {
		content: '';
		display: block;
		position: absolute;
		top: -1px;
		left: 0;
		width: 45px;
		height: 45px;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 45px;
		pointer-events: none
}
.pagnation_wrap li a.prevLink::after {
		background-image: url("../images/toFirst_arw_blk.png")
}
.pagnation_wrap li a.nextLink::after {
		background-image: url("../images/toEnd_arw_blk.png")
}
.andmore {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 38px;
		height: 38px;
}
@media (hover: hover) {
		.pagnation_wrap li a:hover {
				background-color: #3A9362;
				border: 1px solid #3A9362;
				color: #fff;
		}
		.pagnation_wrap li a.prevLink:hover::after {
				background-image: url("../images/toFirst_arw_wht.png")
		}
		.pagnation_wrap li a.nextLink:hover::after {
				background-image: url("../images/toEnd_arw_wht.png")
		}
}
@media(max-width: 767px) {
		.pagnation_wrap {
				margin-top: 60px;
		}
		.pagnation_wrap li {
				height: 33px;
				margin: 0 3px;
				font-size: 11px;
		}
		.pagnation_wrap li.toFirst {
				margin-right: 15px;
		}
		.pagnation_wrap li.toEnd {
				margin-left: 15px;
		}
		.pagnation_wrap li a {
				width: 28px;
				height: 28px;
		}
		.pagnation_wrap li a span {
				transform: translateY(1px)
		}
		.pagnation_wrap li a.prevLink, .pagnation_wrap li a.nextLink {
				width: 33px;
				height: 33px;
		}
		.pagnation_wrap li a.prevLink::after, .pagnation_wrap li a.nextLink::after {
				top: -1px;
				width: 33px;
				height: 33px;
				background-size: 33px;
		}
		.pagnation_wrap li a.prevLink::after {
				background-image: url("../images/toFirst_arw_blk.png")
		}
		.pagnation_wrap li a.nextLink::after {
				background-image: url("../images/toEnd_arw_blk.png")
		}
		.andmore {
				width: 28px;
				height: 28px;
		}
}