/* 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:before , #NewsBox ul li:after {position: absolute;width: 1px;height: calc(100% - 2px);display: block;background: #eaeaea;top: 1px;left: 0;content: "";}
#NewsBox ul li:after { left: auto; right: 0; }
#NewsBox ul li .lineBox { margin: 0 5px; }
#NewsBox ul li .lineBox .date {margin-bottom: 15px;text-align: center;font-family: "Lustria", "Noto Sans TC", serif;letter-spacing: .04em;}
#NewsBox ul li .lineBox .date .top {font-size: 16px;text-align: center;}
#NewsBox ul li .lineBox .date .bottom {font-size: 28px;line-height: 1.2;text-align: center;}
#NewsBox ul li .lineBox .date {position: relative;margin-top: -26px;display: block;font-size: 32px;color: #eaeaea;}
#NewsBox ul li .lineBox a { margin-bottom: -13px; display: block; text-align: center; font-size: 18px; color: #eaeaea; }
#NewsBox ul li .lineBox a:before {position: absolute;top: -10px;left: calc((100% - 50px) / 2);width: 50px;height: 1px;background: #eaeaea;content: "";}
#NewsBox ul li .lineBox:before , #NewsBox ul li .lineBox:after {position: absolute;width: calc((100% - 200px) / 2);height: 1px;display: block;background: #eaeaea;left: 1px;top: calc((100% - 1px) / 2);content: "";}
#NewsBox ul li .lineBox:after { left: auto; right: 1px; }
#NewsBox ul li .news-block {position: relative;padding: 40px 50px 20px;height: 310px;margin-bottom: 15px;font-weight: 100;font-size: 18px;color: #333;letter-spacing: .12em;}
#NewsBox ul li .news-block a.photo {position: absolute;width: calc(100% - 80px);height: calc(100% - 70px);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 {position: relative;display: block;font-weight: 500;font-size: 14px;color: #333;text-align: center;letter-spacing: .12em;margin: 10px 0 30px;}
#NewsBox ul li .news-block p:before, #NewsBox ul li .news-block p:after {content: '';position: absolute;top: 50%;margin-top: -7px;width: 1px;height: 14px;background-color: #d1d1d1;}
#NewsBox ul li .news-block p:before {left: 10px;}
#NewsBox ul li .news-block p:after {right: 10px;}
#NewsBox ul li .news-block h3 {margin-bottom: 45px;line-height: 140%;font-size: 23px;color: #28282C;transition-duration: .6s;}
#NewsBox ul li .news-block article {height: 65px;line-height: 22px;color: #6D6D6D;height: 85px;font-weight: 100;font-size: 15px;letter-spacing: .12em;overflow: hidden;-webkit-line-clamp: 4;transition-duration: .8s;}
.contentMain #NewsBox ul { font-size: 0; }
.contentMain #NewsBox ul li {margin: 45px 0;width: calc(100% / 4);display: inline-block;}
#NewsBox ul li:nth-child(4n - 1):after , #NewsBox ul li:nth-child(4n - 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(-30px); opacity: 0}
	#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: #eaeaea;}
	#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: 22px 35px 45px;text-align: center;}
	#NewsBox ul li .news-block {padding: 5px 20px 25px 20px;height: 260px;}
	#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; }
#NewsBox ul li .news-block h3{
    font-size: 20px;
}
}
@media screen and (max-width: 680px) {
	.contentMain #NewsBox ul li{ width: 100%; }
	#NewsBox ul li:nth-child(2n - 1):after {background: #eaeaea;}
	#NewsBox ul li .news-block {padding: 5px 20px;}
	#NewsBox ul li .info {padding: 0px 0px 15px;text-align: center;}
}