/* NewsBox */
#NewsBox ul {padding-top: 2vw}
#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 {margin: 0 5px;color: #afafaf;text-transform: uppercase;font-size: 13px;padding: 5px;}
#NewsBox ul li:hover .lineBox{letter-spacing:1px;}
#NewsBox ul li .lineBox font { position: relative; margin-top: -26px; display: block; text-align: center; font-size: 32px; color: #d7a297; }
#NewsBox ul li .lineBox a { margin-bottom: -13px; display: block; text-align: center; font-size: 18px; color: #d7a297; }
#NewsBox ul li .lineBox a:before {position: absolute;top: -10px;left: calc((100% - 50px) / 2);width: 50px;height: 1px;background: #d7a297;content: "";}
#NewsBox ul li .lineBox:after {position: absolute;width: calc((100% - 200px) / 2);height: 1px;display: block;background: #917ab9;right: 1px;top: calc((100% - 1px) / 2);content: "";}
#NewsBox ul li:hover .lineBox:after {
    width: calc((100% - 250px) / 2);
}
#NewsBox ul li .news-block {position: relative;padding: 50px;}
#NewsBox ul li .news-block .photY{
    width: 90%;
    margin: 0 auto;
    background-size: cover;
}
#NewsBox ul li .news-block .photY img{width: 100%;}
#NewsBox ul li .news-block .info{
    position: relative;
}
#NewsBox ul li .news-block .info a{
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
    background-position: 50%;
    opacity: 0;
}
#NewsBox ul li .news-block a.photo { position: absolute; width: calc(100% - 80px); height: calc(100% - 50px); top: 25px; left: 40px; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; z-index: 10; }
#NewsBox ul li .news-block p {color: #9c269c;padding: 10px;text-align: right;}
#NewsBox ul li .news-block h3 {margin-bottom: 5px;height: 29px;line-height: 28px;font-size: 24px;color: #28282C;-webkit-line-clamp: 1;transition-duration: .6s;padding: 10px;}
#NewsBox ul li .news-block article {height: 45px;line-height: 22px;color: #6D6D6D;-webkit-line-clamp: 2;transition-duration: .8s;font-size: 14px;text-align: justify;padding: 10px;margin-bottom: 0px;font-weight: 500;}
.contentMain #NewsBox ul { font-size: 0; }
.contentMain #NewsBox ul li {margin: 0;width: calc(100% / 3);display: inline-block;box-shadow: 0 0 10px rgba(54, 53, 53, 0.1);background-color: #fff;}
#NewsBox ul li:nth-child(3n - 1):after , #NewsBox ul li:nth-child(3n - 2):after { background: transparent; }
.contentMain #NewsBox ul li:hover .photY{
	transform:scale(1.03);
}
@media screen and (min-width: 981px) {
	#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: 1280px) {
	.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 {}
	#NewsBox ul li .news-block {}
	#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; }
}