/* CSS Document */
.newsInfoBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: justify;
     -ms-flex-pack: justify;
         justify-content: space-between;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 padding-bottom: 10px;
}
.newsInfoBox .dateBox, .newsInfoBox .classTitle {
 padding: 5px 0;
}
.newsInfoBox .dateBox .date {
 line-height: 1;
}
.newsInfoBox .classTitle {
 font-size: 14px;
 line-height: 1;
 letter-spacing: 0.5px;
 padding: 5px 10px;
}

.dateBox .year {
 font-size: 16px;
 font-weight: bold;
 font-family: "Cormorant", serif, "Noto Serif", serif;
 color: #515151;
 letter-spacing: 0px;
}
.dateBox .date {
 width: 50px;
 font-size: 26px;
 font-weight: 600;
 font-family: "Cormorant", serif, "Noto Serif", serif;
 color: #515151;
 letter-spacing: 0px;
}
.dateBox .date .day {
 text-align: right;
}
.dateBox .date::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
 width: 1px;
 height: 100%;
 background-color: #d9d9d9;
 -webkit-transform: translate(-50%, -50%) rotate(45deg);
         transform: translate(-50%, -50%) rotate(45deg);
}

.newsList {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 gap: 20px;
}
.newsList .item {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
}
.newsList .Img {
 width: 25%;
}
.newsList .Img a {
 display: block;
}
.newsList .Img img {
 width: 100%;
}
.newsList .Txt {
 -webkit-box-flex: 1;
     -ms-flex: 1;
         flex: 1;
 padding: 5px 0 5px 20px;
}
.newsList .Txt .newsInfoBox {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
     -ms-flex-direction: row;
         flex-direction: row;
 -webkit-box-pack: start;
     -ms-flex-pack: start;
         justify-content: flex-start;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 gap: 20px;
}
.newsList .Txt .classTitle {
 display: inline-block;
 padding: 5px;
 font-size: 15px;
 font-weight: 400;
 font-family: "Noto Serif TC", serif, "Source Han Serif", serif;
 color: #d80212;
 letter-spacing: 0.75px;
 border-bottom: 1px solid #d80212;
 margin-bottom: 12px;
}
.newsList .Txt .title {
 font-size: 18px;
 font-weight: bold;
 font-family: "Noto Serif TC", serif, "Source Han Serif", serif;
 color: #000;
 letter-spacing: 1.8px;
 height: 26px;
 overflow: hidden;
}
.newsList .Txt .text {
 font-size: 15px;
 font-weight: 400;
 font-family: "Noto Sans TC", sans-serif, "Microsoft JhengHei", sans-serif;
 color: #898989;
 letter-spacing: 0.75px;
 line-height: 1.66;
 height: 50px;
 overflow: hidden;
}
@media (max-width: 840px) {
 .newsList .item {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
 }
 .newsList .Txt {
  max-width: 400px;
  padding: 0;
  margin-bottom: 32px;
 }
 .newsList .Txt .newsInfoBox {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px;
 }
 .newsList .Img {
  width: 100%;
  max-width: 400px;
 }
}

.newsInfoBox .dateBox .year {
 font-size: 20px;
}

.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;
}
@media (min-width: 1201px) {
 .shareBox .back:hover {
  background: #398cb1;
 }
}