#article {
  background: #F9F9F9;
  margin-top: -20px;
  padding: 20px 0; }
  #article #article_content {
    background: #ffffff;
    margin-bottom: 20px;
    padding: 30px; }
    #article #article_content .article_title {
      color: #565656;
      font-size: 1.5rem; }
    #article #article_content .author_date {
      color: #A3A3A3;
      fill: #A3A3A3;
      margin: 10px 0; }
      #article #article_content .author_date > div {
        display: inline-block; }
      #article #article_content .author_date svg, #article #article_content .author_date span {
        vertical-align: middle; }
    #article #article_content .article_author:after {
      content: "";
      border-right: 1px solid #A3A3A3;
      display: inline-block;
      height: 16px;
      margin: 0 8px 0 10px;
      vertical-align: middle; }
    #article #article_content .article_content {
      margin: 30px 0; }
    #article #article_content .article_tags_group {
      border-top: 1px solid rgba(0, 0, 0, 0.2);
      padding: 30px 0 10px; }
      #article #article_content .article_tags_group .tag_title {
        margin-right: 20px; }
      #article #article_content .article_tags_group .article_tags a {
        border: 1px solid #A3A3A3;
        border-radius: 5px;
        color: #A3A3A3;
        transition: all ease-in-out .15s;
        text-align: center;
        border-radius: 15px;
        display: inline-block;
        font-size: 0.9rem;
        margin: 5px;
        padding: 5px 15px;
        text-decoration: none; }
        #article #article_content .article_tags_group .article_tags a:hover {
          background: #A3A3A3;
          color: #ffffff; }
  #article .blog_info .row {
    margin: -10px -15px; }
    #article .blog_info .row .col-12 {
      padding: 10px 15px; }
  #article #all_blogs_title, #article #blog_tags, #article #selected_blog, #article #recent_articles {
    background: #ffffff;
    padding: 15px; }
    #article #all_blogs_title .blog_title, #article #blog_tags .blog_title, #article #selected_blog .blog_title, #article #recent_articles .blog_title {
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      margin: 0 -15px 15px;
      padding: 0 15px 15px; }
      #article #all_blogs_title .blog_title > .div, #article #blog_tags .blog_title > .div, #article #selected_blog .blog_title > .div, #article #recent_articles .blog_title > .div {
        font-size: 1.1rem;
        line-height: 1.3rem; }
    #article #all_blogs_title .mobile_blogs_group, #article #blog_tags .mobile_blogs_group, #article #selected_blog .mobile_blogs_group, #article #recent_articles .mobile_blogs_group {
      display: none; }
  #article #all_blogs_title a {
    display: block;
    text-decoration: none;
    font-size: 16px;
    font-weight: 300;
    margin-top: 15px;
    color: #A3A3A3; }
  #article #blog_tags a {
    display: inline-block;
    border: 1px solid #A3A3A3;
    border-radius: 5px;
    color: #A3A3A3;
    transition: all ease-in-out .15s;
    text-align: center;
    border-radius: 13px;
    font-size: 0.9rem;
    margin: 3px 0;
    padding: 3px 8px;
    text-decoration: none; }
    #article #blog_tags a:hover {
      background: #A3A3A3;
      color: #ffffff; }
  #article #selected_blog .selected_article {
    grid-template-rows: auto 50px 25px;
    grid-template-areas: "image" "title" "date"; }
    #article #selected_blog .selected_article .article_image a {
      min-height: 150px;
      display: block;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
      #article #selected_blog .selected_article .article_image a img {
        width: 100%; }
    #article #selected_blog .selected_article .article_title a {
      color: #565656; }
    #article #selected_blog .selected_article .article_date {
      color: #808080;
      font-size: 14px; }
    #article #selected_blog .selected_article .article_tags {
      display: none; }
  #article #recent_articles .recent_articles_group a {
    display: block;
    text-decoration: none;
    color: #565656;
    font-size: 16px;
    font-weight: 400;
    margin: 15px 0 0; }
    #article #recent_articles .recent_articles_group a span.circle_number {
      background: #bce3df;
      border-radius: 50%;
      color: #565656;
      width: 26px;
      height: 26px;
      font-size: 16px;
      line-height: 26px;
      display: inline-block;
      text-align: center;
      margin-right: 3px; }
  @media (max-width: 991px) {
    #article #article #article_content .article_tags_group .article_tags a {
      margin: 3px 0px; } }
  @media (max-width: 768px) {
    #article #article h1 {
      font-size: 25px;
      line-height: 30px; }
    #article #article #article_content .article_content {
      margin: 20px 0; } }

<!-- All Univerity of Nebraska-Lincoln Web Framework code is the property of UComm/ITS Digital Experience Group 
and the UNL Web Developer Network. -->

<!-- place the contents of this css file, in the <head></head> of your html page when using 
the responsive table generator code on sites not in UNLcms or the UNL.edu framework -->

<style>


:root {
    --bg-table-stripe: #f6f6f5;
    --b-table: #e3e3e2;
    --caption: #242423;
}

table {
    background-color: transparent;
    border-collapse:collapse;
  	font-family: Arial, Helvetica, sans-serif
}

th {
    text-align:left
}

.dcf-txt-center {
      text-align: center!important
    }

    .dcf-txt-left {
      text-align: left!important
    }

    .dcf-txt-right {
      text-align: right!important
    }
    
.dcf-table caption {
      color: var(--caption);
      font-size: 1.13em;
      font-weight: 700;
      padding-bottom: .56rem
    }

    .dcf-table thead {
      font-size: .84em
    }

    .dcf-table tbody {
      border-bottom: 1px solid var(--b-table);
      border-top: 1px solid var(--b-table);
      font-size: .84em
    }

    .dcf-table tfoot {
      font-size: .84em
    }

    .dcf-table td, .dcf-table th {
      padding-right: 1.78em
    }

    .dcf-table-bordered, .dcf-table-bordered td, .dcf-table-bordered th {
      border: 1px solid var(--b-table)
    }

    .dcf-table-bordered td, .dcf-table-bordered th, .dcf-table-striped td, .dcf-table-striped th {
      padding-left: 1em;
      padding-right: 1em
    }

    .dcf-table-bordered tr:not(:last-child), .dcf-table-striped tr:not(:last-child) {
      border-bottom: 1px solid var(--b-table)
    }

    .dcf-table-striped tbody tr:nth-of-type(2n) {
      background-color: var(--bg-table-stripe)
    }

    .dcf-table thead td, .dcf-table thead th {
      padding-bottom: .75em;
      vertical-align: bottom
    }

    .dcf-table tbody td, .dcf-table tbody th, .dcf-table tfoot td, .dcf-table tfoot th {
      padding-top: .75em;
      vertical-align: top
    }

    .dcf-table tbody td, .dcf-table tbody th {
      padding-bottom: .75em
    }

    .dcf-table-bordered thead th {
      padding-top: 1.33em
    }

    .dcf-wrapper-table-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      left: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      padding-bottom: 1em;
      position: relative;
      right: 50%;
      width: 100vw
    }

    @media only screen and (max-width:42.09em) {
      .dcf-table-responsive thead {
        clip: rect(0 0 0 0);
        -webkit-clip-path: inset(50%);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        width: 1px;
        white-space: nowrap
      }
      .dcf-table-responsive tr {
        display: block
      }
      .dcf-table-responsive td {
        -webkit-column-gap: 3.16vw;
        -moz-column-gap: 3.16vw;
        column-gap: 3.16vw;
        display: grid;
        grid-template-columns: 1fr 2fr;
        text-align: left!important
      }
      .dcf-table-responsive.dcf-table-bordered, .dcf-table-responsive.dcf-table-bordered thead th {
        border-width: 0
      }
      .dcf-table-responsive.dcf-table-bordered tbody td {
        border-top-width: 0
      }
      .dcf-table-responsive:not(.dcf-table-bordered) tbody tr {
        padding-bottom: .75em
      }
      .dcf-table-responsive:not(.dcf-table-bordered) tbody td {
        padding-bottom: 0
      }
      .dcf-table-responsive:not(.dcf-table-bordered):not(.dcf-table-striped) tbody td {
        padding-right: 0
      }
      .dcf-table-responsive.dcf-table-bordered tbody tr:last-child td:last-child {
        border-bottom-width: 0
      }
      .dcf-table-responsive tbody td:before {
        content: attr(data-label);
        float: left;
        font-weight: 700;
        padding-right: 1.78em
      }
    }

.dcf-overflow-x-auto {
      overflow-x: auto!important;
      -webkit-overflow-scrolling: touch
    }
    
.dcf-w-100\% {
  width: 100%!important;
		}



/* ========================================
   植寵艾尼｜部落格文章手機版優化
   適用於螢幕寬度 768px 以下
======================================== */

@media screen and (max-width: 768px) {

  /* 1. 文章 H1 標題 */
  #article #article_content .article_title h1.section-heading {
    font-size: 2.0rem;
    line-height: 1.4;
  }

  /* 2. 文章內容四周留白 */
  #article #article_content {
    padding: 28px;
  }

  /* 3. 好評分享推薦圖片 */
  #article #selected_blog .selected_article .article_image a {
    min-height: 200px;
  }

  /* 4. 好評分享推薦文章 H3 標題 */
  #article #selected_blog .selected_article .article_title h3 {
    font-size: 1.2rem;
    line-height: 1.4;
    padding-top: 10px;
    color: #444444;
  }

}


    
</style>