@charset "UTF-8";
/*********** 最新文章Blog ***********/
.blog_box {
    margin-bottom: 20px;
}
.blog_box:last-of-type {
    margin-bottom: 0;
}
.bar_inline {
    display: inline-block;
    width: calc(100% / 2 - 18px);
    vertical-align: top;
    cursor: pointer;
}
.bar_inline.bar_r {
    padding: 15px;
}
.bar_time {
    width: 100%;
    font: normal normal .8rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.bar_avatar,
.bar_name,
.post_name,
.post_date {
    display: inline-block;
    vertical-align: middle;
}
.bar_avatar {
    margin-right: 5px;
}
.bar_name .writer {
    font: normal bold .9rem/1.1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.bar_info {
    margin: 18px 0;
    font: normal normal .95rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.bar_info:hover {
    color: #17a398;
}
.bar_info .title {
    height: 45px;
    margin-bottom: 10px;
    font: normal bold 1.1rem/1.5rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.op_title,
.bar_info .title,
.bar_info .abstract {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.bar_info .abstract {
    -webkit-line-clamp: 3;
}
.bar_watchtag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 0 0;
    font: normal normal .9rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.op_look {
    padding: 10px 0 0 0;
    margin: 15px auto 0;
    font: normal normal .9rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.hashtag {
    width: 60%;
    text-align: right;
}
.bar_watch i.fa-eye,
.post_look i.fa-eye {
    cursor: unset;
}
.bd_all {
    border: 1px solid #ccc;
}
.bd_dashed_top {
    border-top: 1px dashed #ccc;
}
.bd_dashed_bottom {
    border-bottom: 1px dashed #ccc;
}
.bd_solid_top {
    border-top: 1px solid #ccc;
}
.bd_solid_bottom {
    border-bottom: 1px solid #ccc;
}
/*********** 最新文章Blog-內頁 ***********/
.post_box {
    padding: 1rem 0;
    text-align: justify;
    font: normal normal .85rem/1.5rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.post_time {
    width: 100%;
    padding: 0 0 10px 0;
    font: normal bold 1rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.post_name {
    width: 62%;
}
.post_date {
    width: 22%;
    text-align: center;
    font: normal normal .9rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.post_title {
    padding: 25px 10px;
    color: #5f7888;
    text-align: left;
    font: normal bold 1.7rem/2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.post_box dt {
    margin: 1rem 0;
    font: normal bold 1.3rem/1.5rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.post_box dd {
    text-indent: 2rem;
    margin: 0 auto 15px;
}
.post_sharebox {
    display: flex;
    justify-content: space-between;
    margin: 20px auto;
    padding: 15px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.share_icons {
    display: flex;
}
.post_sharebox i {
    font-size: 20px;
}
.share_icons i {
    padding: 0 10px;
}
.op_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px auto;
}
.op_header .title {
    font: normal bold 1.1rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
}
.op_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.op_item {
    width: calc(100% / 3 - 10px);
    border: 1px solid #ccc;
    cursor: pointer;
}
.op_text {
    padding: 20px;
}
.op_title {
    height: 45px;
    margin-bottom: 10px;
    text-align: justify;
    font: normal bold 1.2rem/1.4rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    overflow: hidden;
}

/*********  以下為 手機畫面_設定  *********/
/* 寬度大於 1024px (電腦)*/
@media screen and (min-width: 1024px) {
    /*最新文章Blog*/
    .blog_post_pic {
        width: 100%;
    }
    .blog_menu i.fa-eye {
        font-size: 1vw;
    }
    .bar_watchtag {
        font: normal normal 1.1rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_box {
        padding: 1rem 0;
        font: normal normal 1rem/1.6rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .op_header .title {
        font: normal bold 1.5rem/1.8rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
}

/* 寬度大於 1920px (電腦)*/
@media screen and (min-width: 1920px) {
    /*最新文章Blog*/
    .bar_time {
        font: normal normal 1rem/1.4rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .bar_name .writer {
        font: normal bold 1.3rem/1.3rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .bar_info {
        margin: 2rem 0;
        font: normal normal 1.5rem/1.8rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .bar_info .title {
        height: 75px;
        margin-bottom: 20px;
        font: normal bold 2rem/2.4rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .bar_avatar {
        width: 50px;
    }
    .post_name {
        width: 77%;
    }
    .post_time {
        font: normal bold 1.3rem/1.5rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_date {
        width: 12%;
        font: normal normal 1.1rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_title {
        padding: 2rem 0;
        font: normal bold 2.4rem/3rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_box {
        padding: 1.5rem 0;
        font: normal normal 1.3rem/1.8rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_box dt {
        margin: 1.5rem 0;
        font: normal bold 1.8rem/2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .blog_menu .btn_small {
        padding: 5px 10px;
        font: normal normal 1.2vw/1.2vw "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .op_header .title {
        font: normal bold 1.8rem/2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .op_title {
        height: 50px;
        margin-bottom: 15px;
        font: normal bold 1.4rem/1.6rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
}

/* 寬度介於 1301px - 1900px (ipad pro,舊電腦) */
@media screen and (min-width: 1301px) and (max-width: 1900px) {
    /*最新文章Blog*/
    .bar_inline.bar_l {
        width: 40%;
    }
    .bar_inline.bar_r {
        width: calc(100% - 40% - 35px);
    }
    .bar_time {
        font: normal normal .9rem/1.1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .bar_name .writer {
        font: normal bold 1.1rem/1.1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .bar_info {
        margin: 25px 0;
        font: normal normal 1rem/1.4rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .bar_info .title {
        height: 52px;
        margin-bottom: 15px;
        font: normal bold 1.5rem/1.8rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .bar_avatar {
        width: 40px;
    }
    .post_name {
        width: 70%;
    }
    .post_time {
        font: normal bold 1.3rem/1.5rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_date {
        width: 16%;
        font: normal normal 1.1rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_box dt {
        margin: 1.5rem 0;
        font: normal bold 1.8rem/2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .blog_menu .btn_small {
        padding: 5px 10px;
        font: normal normal 1.3vw/1.3vw "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
}

/* 寬度介於 1024px - 1300px (ipad) */
@media screen and (min-width: 1024px) and (max-width: 1300px) {
    /*最新文章Blog*/
    .blog_menu .btn_small {
        padding: 3px 10px;
    }
    .blog_menu i.fa-eye {
        font-size: 1.5vw;
    }
}

/* 寬度小於 1023px (平板+手機)*/
@media screen and (max-width: 1023px) {
    /*最新文章Blog*/
    .bar_inline.bar_r {
        padding: 10px;
    }
    .bar_info {
        margin: 10px 0;
        font: normal normal .9rem/1.1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .bar_info .title {
        height: 40px;
        margin-bottom: 5px;
        font: normal bold 1rem/1.3rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .bar_watchtag {
        padding: 5px 0 0 0;
        font: normal normal .9rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_name {
        width: 50%;
    }
    .post_date {
        width: 150px;
        font: normal normal .8rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_title {
        padding: 15px 0;
        font: normal bold 1.4rem/1.6rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_box {
        padding: 15px;
        font: normal normal 0.95rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_box dt {
        margin: 10px 0;
        font: normal bold 1.2rem/1.3rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .other_post,
    .op_text {
        padding: 10px;
    }
    .op_header {
        margin: 10px auto;
    }
    .op_title {
        height: 38px;
        margin-bottom: 5px;
        font: normal bold 1rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .blog_menu i.fa-eye {
        font-size: 2vw;
    }
    .blog_menu .btn_small {
        padding: 3px 10px;
    }
    .post_time {
        display: flex;
        align-items: center;
    }
}

/* 寬度介於 901px - 1023px (ipad) */
@media screen and (min-width: 901px) and (max-width: 1023px) {
    /*最新文章Blog*/
    .bar_inline.bar_r {
        padding: 15px;
    }
    .bar_info {
        margin: 13px 0;
        font: normal normal .95rem/1.2rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .bar_info .title {
        height: 45px;
        margin-bottom: 10px;
        font: normal bold 1.1rem/1.5rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_name {
        width: 62%;
    }
    .post_box dt {
        margin: 1rem 0;
        font: normal bold 1.3rem/1.5rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .other_post,
    .op_text {
        padding: 20px;
    }
    .op_header {
        margin: 20px auto;
    }
}

/* 寬度介於 751px - 900px (iPad, 手機橫放) */
@media screen and (min-width: 751px) and (max-width: 900px) {
    /*最新文章Blog*/
    .bar_inline.bar_l {
        width: 50%;
    }
    .bar_inline.bar_r {
        width: calc(100% - 50% - 25px);
    }
    .post_name {
        width: 55%;
    }
    .op_item .bar_watchtag {
        flex-direction: column;
        align-items: stretch;
    }
    .op_item .hashtag {
        width: 100%;
        text-align: left;
    }
}

/* 寬度介於 671px - 750px (iPad, 手機橫放) */
@media screen and (min-width: 671px) and (max-width: 750px) {
    /*最新文章Blog*/
    .bar_inline.bar_l {
        width: 50%;
    }
    .bar_inline.bar_r {
        width: calc(100% - 50% - 25px);
    }
    .blog_title_pic {
        height: 200px;
    }
    .op_item .bar_watchtag {
        flex-direction: column;
        align-items: stretch;
    }
    .op_item .hashtag {
        width: 100%;
        text-align: left;
    }
}

/* 寬度介於 551px - 670px (手機橫放) */
@media screen and (min-width: 551px) and (max-width: 670px) {
    /*最新文章Blog*/
    .bar_inline.bar_l {
        width: 100%;
    }
    .bar_inline.bar_r {
        width: calc(100% - 20px);
    }
    .op_info {
        flex-direction: column;
    }
    .op_item {
        width: 100%;
        margin-bottom: 10px;
    }
    .blog_menu i.fa-eye {
        font-size: 2.5vw;
    }
}

/* 寬度介於 401px - 550px (iPhone 6+) */
@media screen and (min-width: 401px) and (max-width: 550px) {
    /*最新文章Blog*/
    .bar_inline.bar_l {
        width: 100%;
    }
    .bar_inline.bar_r {
        width: calc(100% - 20px);
    }
    .post_name {
        width: 85%;
    }
    .post_date {
        text-align: left;
    }
    .op_info {
        flex-direction: column;
    }
    .op_item {
        width: 100%;
        margin-bottom: 10px;
    }
    .blog_menu {
        padding: 0;
    }
    .blog_menu i.fa-eye {
        font-size: 3vw;
    }
}

/* 寬度介於 401px - 414px (iPhone 5,iPhone 6,Galaxy S5) */
@media screen and (min-width: 401px) and (max-width: 414px) {
}

/* 寬度介於 321px - 400px (iPhone 5,iPhone 6,Galaxy S5) */
@media screen and (min-width: 321px) and (max-width: 400px) {
    /*最新文章Blog*/
    .bar_inline.bar_l {
        width: 100%;
    }
    .bar_inline.bar_r {
        width: calc(100% - 20px);
    }
    .post_name {
        width: 80%;
    }
    .post_date {
        text-align: left;
    }
    .op_info {
        flex-direction: column;
    }
    .op_item {
        width: 100%;
        margin-bottom: 10px;
    }
    .bar_watchtag {
        font: normal normal .85rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .blog_menu {
        padding: 0;
    }
    .post_header {
        padding: 5px;
    }
    .blog_menu i.fa-eye {
        font-size: 16px;
    }
    .blog_menu .btn_small {
        font: normal normal 14px/16px "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
}

/* 寬度小於 320px */
@media screen and (max-width: 320px) {
    /*最新文章Blog*/
    .bar_inline.bar_l {
        width: 100%;
    }
    .bar_inline.bar_r {
        width: calc(100% - 20px);
    }
    .bar_watchtag {
        flex-direction: column;
        align-items: stretch;
        font: normal normal .8rem/1rem "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .hashtag {
        width: 100%;
        text-align: left;
    }
    .post_name {
        width: 75%;
    }
    .post_date {
        width: 200px;
        text-align: left;
    }
    .op_info {
        flex-direction: column;
    }
    .op_item {
        width: 100%;
        margin-bottom: 10px;
    }
    .blog_menu {
        padding: 0;
    }
    .post_header {
        padding: 5px;
    }
    .blog_menu i.fa-eye {
        font-size: 16px;
    }
    .blog_menu .btn_small {
        font: normal normal 14px/16px "Century Gothic", Arial, "Microsoft JhengHei", "PMingLiU", sans-serif;
    }
    .post_time {
        flex-wrap: wrap;
    }
}
/* 寬度小於 280px */
@media screen and (max-width: 280px) {
    .post_date {
        width: 170px;
        text-align: left;
    }
}