@charset "UTF-8";

.articleBox{
	box-sizing: border-box!important;
	height: 100%!important;
	background-color: #fff!important;
	color: #333!important;
	line-height: 1.7!important;
	font-size: 15px!important;
	-webkit-text-size-adjust: 100%!important;
	display: -webkit-box!important;
	display: -ms-flexbox!important;
	display: flex!important;
	-ms-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
	-webkit-box-pack: center!important;
	-ms-flex-pack: center!important;
	justify-content: center!important;
}

.articleBox div,
.articleBox p,
.articleBox a{
	margin: 0!important;
	padding: 0!important;
	border: 0!important;
	outline: 0!important;
	vertical-align: baseline!important;
	background: transparent!important;
	text-decoration: none!important;
}

.articleBox img{
	border: 0!important;
	max-width:100%!important;
	vertical-align:top!important;
}

.articleBox a {
    margin: 0!important;
    padding: 0!important;
    vertical-align: baseline!important;
    text-decoration: none!important;
}

.articleBox a:hover {
    text-decoration: none!important;
}
.articleBox .articleBoxCont {
    float: left!important;
    display: block!important;
    border-radius: 2px!important;
    box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 15%), 0px 0px 1px 0px rgb(0 0 0 / 10%)!important;
    color: #333!important;
    padding-bottom: 15px!important;
    cursor: pointer!important;
    background-color: #fff!important;
    position: relative!important;
    line-height: 1.3!important;
    -webkit-transition: all .3s!important;
    transition: all .3s!important;
	display:flex!important;
	flex-direction:column!important;
	margin: 2.5% 2.5% 0 0!important;
}

.articleBox.fourRow .articleBoxCont{
	width: 23%!important;
}
.articleBox.threeRow .articleBoxCont{
	width: 30%!important;
}
.articleBox .articleBoxCont:last-child{
	margin-right: 0!important;
}
.articleBox.fourRow .articleBoxCont:nth-child(1),
.articleBox.fourRow .articleBoxCont:nth-child(2),
.articleBox.fourRow .articleBoxCont:nth-child(3),
.articleBox.fourRow .articleBoxCont:nth-child(4),
.articleBox.threeRow .articleBoxCont:nth-child(1),
.articleBox.threeRow .articleBoxCont:nth-child(2),
.articleBox.threeRow .articleBoxCont:nth-child(3){
	margin-top: 0!important;
}
.articleBox.fourRow .articleBoxCont:nth-child(4n),
.articleBox.threeRow .articleBoxCont:nth-child(3n){
	margin-right: 0!important;
}
.articleBox.fourRow .articleBoxCont:nth-child(4n+1),
.articleBox.threeRow .articleBoxCont:nth-child(3n+1){
	clear: both!important;
}

.articleBox a.articleBoxCont:hover {
    box-shadow: 0px 4px 4px 0px rgb(0 0 0 / 30%), 0px 0px 3px 0px rgb(0 0 0 / 30%)!important;
}

.articleBox .articleBoxCont img{
	width: 100%!important;
	height: auto!important;
	padding-bottom:15px!important;
}
.articleBox .artTtlWrap{
	flex-grow:1!important;
}
.articleBox .artTxtWrap{
margin-top:15px!important;
}
.articleBox .articleBoxTtl{
	padding: 0 15px 0!important;
	margin-bottom:0!important;
    display: -webkit-box!important;
    -webkit-line-clamp: 4!important;
    -webkit-box-orient: vertical!important;
    overflow: hidden!important;
    max-height: 6em!important;
    font-weight: bold!important;
	font-size:15px!important;
}
.articleBox .articleDate {
    padding: 15px 15px 0!important;
    font-size: 11px!important;
    line-height: 1em!important;
    letter-spacing: 2px!important;
    color: #757575!important;
}

.articleBox .artSeriesPreWrap,
.articleBox .artCategoryPreWrap{
    box-sizing: border-box!important;
    overflow: hidden!important;
	padding:0 15px!important;
}
.articleBox .artSeriesPreWrap{
	max-height: 18px!important;
	margin-bottom:10px!important;
}
.articleBox .artCategoryPreWrap{
	max-height: 36px!important;
	margin-top:15px!important;
}
.articleBox .artSeriesList,
.articleBox .artCategoryList{
	display:flex!important;
	flex-wrap:wrap!important;
}
.articleBox .postNoneTxt{
	font-size: 22px!important;
}

.articleBox .artSeries,
.articleBox .artCategory{
	display: inline-block!important;
	font-size:14px!important;
	height: 1.5em!important;
    margin-right: 1em!important;
    padding: 0!important;
    font-size: 12px!important;
    line-height: 1.5em!important;
    color: #757575!important;
	overflow: hidden!important;
	display: -webkit-box!important;
	-webkit-box-orient: vertical!important;
	-webkit-line-clamp: 1!important;
}

.articleBox .articleBoxTxt {
	padding: 0 15px!important;
	font-size: 13px!important;
	overflow: hidden!important;
	display: -webkit-box!important;
	-webkit-box-orient: vertical!important;
	-webkit-line-clamp: 4!important;
	height: auto!important;
}

@media screen and (min-width: 768px){
	.articleBox.isAct{
		min-height: 221px!important;
	}
}

@media screen and (max-width: 767px){
	.articleBox .articleBoxCont{
		float: none!important;
		display: block!important;
		border-radius: 0!important;
		box-shadow: none!important;
		padding: 15px 4%!important;
		width: 100%!important;
		margin: 0!important;
		border-bottom: 1px solid #e6e6e6!important;
	}
	.articleBox .articleBoxCont:hover{
		box-shadow: none!important;
	}
	.articleBox.threeRow .articleBoxCont,
	.articleBox.fourRow .articleBoxCont{
		width: 100%!important;
	}
	.articleBox .articleBoxCont{
		margin-right: 0!important;
		border-bottom:1px solid #e6e6e6!important;
		overflow: hidden!important;
	}
	.articleBox .articleBoxCont:first-child{
		border-top:1px solid #e6e6e6!important;
	}

	.articleBox .articleBoxTxtCont{
		padding:0!important;
	}
	.articleBox .articleBoxCont img{
		display: block!important;
		float: left!important;
		width: 35%!important;
	}
	.articleBox .artSeriesPreWrap,
	.articleBox .artCategoryPreWrap,
	.articleBox .articleBoxTtl,
	.articleBox .articleDate,
	.articleBox .articleBoxTxt{
		width: 60%!important;
		float: right!important;	
		padding: 0!important;
	}
	.articleBox .spDisplay{
		display:none!important;
	}
	.articleBox .artTxtWrap,
	.articleBox .artCategoryPreWrap{
		height: auto!important;
	}
	.articleBox .articleBoxTxt{
		padding: 15px 0 0!important;
	}
	.articleBox .articleDate {
		padding: 10px 0 0!important;
	}
	.articleBox .postNoneTxt{
		font-size: 17px!important;
		width: 90%!important;
		text-align: center!important;
	}
}