@import url("//fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&family=Noto+Sans+TC:wght@300;400;500;700&family=Roboto:wght@400;700&display=swap");
.newsList {
		width: 100%;
}
.newsList .newsItem {
		padding: 25px 0;
}
.newsList .newsItem:not(:first-child) {
		border-top: 1px solid #e4e2e2;
}
.newsList .item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
}
.newsList .Img {
		width: 250px;
}
.newsList .Img img {
		display: block;
		width: 100%;
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
}
@media (max-width: 768px) {
		.newsList .Img {
				width: 180px;
		}
}
@media (max-width: 480px) {
		.newsList .Img {
				width: 100%;
		}
}
.newsList .Txt {
		width: calc(100% - 250px);
		overflow: hidden;
		padding-top: 15px;
		padding-left: 30px;
}
.newsList .Txt .title {
		font-size: 20px;
		font-weight: 400;
		line-height: 1.2;
		letter-spacing: 0.5px;
}
.newsList .Txt .title a {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
}
.newsList .Txt .text {
		color: rgba(37, 37, 37, 0.7);
		max-height: 100px;
		line-height: 1.7;
		margin-top: 20px;
}
@media (max-width: 768px) {
		.newsList .Txt {
				width: calc(100% - 180px);
		}
}
@media (max-width: 480px) {
		.newsList .Txt {
				width: 100%;
				padding-left: 0;
		}
}

.top {
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		color: rgba(37, 37, 37, 0.7);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		line-height: 1;
		letter-spacing: 1px;
		margin-bottom: 15px;
}
.top .class {
		margin-right: 10px;
}
.top .date {
		font-family: "Roboto", "Noto Sans TC", serif;
		text-transform: uppercase;
}
.top .period {
		width: 100%;
		padding-top: 10px;
}

.shareBox {
		float: right;
}
.shareBox .btn-fb {
		display: inline-block;
		vertical-align: middle;
		margin-right: 5px;
}
.shareBox .back {
		display: inline-block;
		vertical-align: middle;
		padding: 3px 5px;
		border-radius: 3px;
		font-size: 12px;
		color: #fff;
		background: rgb(174, 66, 51);
		/* Old browsers */
		/* FF3.6+ */
		/* Chrome,Safari4+ */
		/* Chrome10+,Safari5.1+ */
		/* Opera 11.10+ */
		/* IE10+ */
		background: -webkit-gradient(linear, left top, left bottom, from(rgb(174, 66, 51)), to(rgb(196, 76, 76)));
		background: linear-gradient(to bottom, rgb(174, 66, 51) 0%, rgb(196, 76, 76) 100%);
		/* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ae4233", endColorstr="#c44c4c", GradientType=0);
		/* IE6-9 */
		cursor: pointer;
}
.shareBox .back:hover {
		background: #398cb1;
}

.titleArea .top {
		margin-bottom: 10px;
}
.titleArea .top .period {
		width: auto;
		padding-top: 0;
		margin-left: 15px;
}
@media (max-width: 1024px) {
		.titleArea .top .period {
				width: 100%;
				padding-top: 10px;
				margin-left: 0;
		}
}
.titleArea h1 {
		font-size: 20px;
}