/* NewsBox */
#NewsBox ul {}
#NewsBox ul li { margin: 30px 1px 30px 0; }
#NewsBox ul li , #NewsBox ul li .lineBox { position: relative; }
#NewsBox ul li:after { left: auto; right: 0; }
#NewsBox ul li .lineBox {}
#NewsBox ul li .lineBox font {position: relative;display: block;font-size: 14px;color: #1f1f1f;margin: 10px 0 4px;}
#NewsBox ul li .lineBox a {display: block;text-align: center;font-size: 14px;color: #ffffff;background-color: #801a1e;padding: 10px 0;}
#NewsBox ul li .lineBox:after { left: auto; right: 1px; }
#NewsBox ul li .news-block {position: relative;padding: 30px;}
#NewsBox ul li .news-block a.photo {}
#NewsBox ul li .news-block p { color: #d7a297}
#NewsBox ul li .news-block h3 {margin-bottom: 15px;height: 50px;line-height: 28px;-webkit-line-clamp: 2;transition-duration: .6s;}
#NewsBox ul li .news-block h3 a{
    font-size: 20px;
    color: #28282C;
    line-height: 120%;
}
#NewsBox ul li .news-block article {height: 25px;line-height: 22px;color: #6D6D6D;-webkit-line-clamp: 1;transition-duration: .8s;font-size: 14px;text-align: justify;}
.contentMain #NewsBox ul { font-size: 0; }
.contentMain #NewsBox ul li {margin: 0;width: calc(100% / 4);display: inline-block;background-color: #fff;box-shadow: 0px 0px 10px rgb(0 0 0 / 0.1);}
#NewsBox ul li:nth-child(3n - 1):after , #NewsBox ul li:nth-child(3n - 2):after { background: transparent; }

@media screen and (min-width: 981px) {	
	#NewsBox ul li .news-block:hover a.photo { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1 }
	#NewsBox ul li .news-block:hover .info >* {transform: translateY(15px);}
	#NewsBox ul li .lineBox a:hover{ letter-spacing: .3em;}
	#NewsBox ul li .lineBox a:hover:before { top: -2px; transition-duration: .3s;}
}
@media screen and (max-width: 1024px) {
	.contentMain #NewsBox ul li{ width: calc(100% / 2)}
	#NewsBox ul li:nth-child(3n - 1):after , #NewsBox ul li:nth-child(3n - 2):after { background: #f0d8d3; }
	#NewsBox ul li:nth-child(2n - 1):after { background: transparent; }
}
@media screen and (max-width: 980px) {
	#NewsBox .btn { left: auto; right: 0; }
	#NewsBox ul li .date {font-size: 28px;}
	#NewsBox ul li .info {display: inline-block;padding: 0;text-align: center;}
	#NewsBox ul li .news-block {padding: 25px 20px;}
	#NewsBox ul li .news-block a.photo {width: 100%; height: 100%;top: 0;left: 0;position: relative;display: inline-block;opacity: 1;transform: translateX(0);}
	#NewsBox ul li .slick-slide:after  { background: #d7a297; }
}
@media screen and (max-width: 680px) {
	.contentMain #NewsBox ul li{ width: 100%; }
	#NewsBox ul li:nth-child(2n - 1):after { background: #f0d8d3; }
}