@charset "UTF-8";
.mediaList, .mainArea .textEditor, .titleArea .articleTitle, .titleArea .newIcon, .titleArea .txtSource {
  -webkit-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  transition: all .5s ease-out; }

.mediaList, .mainArea .textEditor, .titleArea .articleTitle, .titleArea .newIcon, .titleArea .txtSource {
  opacity: 0; }

.mediaList, .mainArea .textEditor, .titleArea .articleTitle, .titleArea .newIcon, .titleArea .txtSource {
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px); }

.mediaList.show, .mainArea.show .titleArea .articleTitle, .mainArea.show .titleArea .newIcon, .mainArea.show .titleArea .txtSource, .mainArea.show .textEditor {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
  opacity: 1; }

/*
	Authors: Alvin, Randy, Rex
    Version: 2.0
	Latest Update: 2020/03/13
*/
.mediaList {
  margin-top: 50px; }
  @media (min-width: 501px) {
    .mediaList li {
      padding: 0 23px 55px; } }
  @media (max-width: 500px) {
    .mediaList li {
      padding: 0 0 50px; } }
  .mediaList .item.hasVideo {
    position: relative; }
    .mediaList .item.hasVideo::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      z-index: 5;
      width: 50px;
      height: 50px;
      background: url("../images/icon_play.png") no-repeat center, #464646; }
  .mediaList .Img {
    position: relative; }
    .mediaList .Img img {
      display: block;
      width: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden; }
  .mediaList .Txt {
    padding-top: 10px; }
    @media (max-width: 500px) {
      .mediaList .Txt {
        text-align: center; } }
  .mediaList h3 {
    margin-top: 3px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 18px;
    font-weight: 400; }
    @media (max-width: 500px) {
      .mediaList h3 {
        border-bottom-color: #1dcad3; } }
    .mediaList h3 a {
      display: block; }
  .mediaList .txtSource {
    margin-top: 10px; }

.newIcon {
  display: block;
  font-weight: 300;
  color: #a9a9a9; }

.txtSource {
  font-weight: 300;
  color: #808080; }
  .txtSource span {
    color: #1dcad3; }
    .txtSource span::after {
      content: '';
      position: relative;
      top: 2px;
      display: inline-block;
      margin: 0 5px;
      width: 1px;
      height: 14px;
      background-color: #dcdcdc; }

/*****內頁*****/
.mainArea.show .titleArea .articleTitle {
  -webkit-transition-delay: .3s;
  -o-transition-delay: .3s;
  transition-delay: .3s; }

.mainArea.show .titleArea .txtSource {
  -webkit-transition-delay: .5s;
  -o-transition-delay: .5s;
  transition-delay: .5s; }

.mainArea.show .textEditor {
  -webkit-transition-delay: .7s;
  -o-transition-delay: .7s;
  transition-delay: .7s; }

.titleArea {
  padding-top: 30px;
  margin-bottom: 40px; }
  @media (min-width: 641px) {
    .titleArea {
      padding-bottom: 40px;
      border-bottom: 1px solid #e5e5e5; } }
  @media (max-width: 1180px) {
    .titleArea {
      margin-bottom: 20px;
      text-align: center; } }
  .titleArea .articleTitle {
    margin-top: 15px;
    font-size: 18px; }
  .titleArea .newIcon {
    font-size: 13px; }
  .titleArea .txtSource {
    margin-top: 10px;
    max-height: 150px; }