body {
    background-color: dimgary;
    position: relative;
}

body,
html {
    height: 100%;
}

@media (min-width: 992px) {
    body {
        /*padding-top: 56px;*/
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0.1em;
}

@media (max-width: 575px) {
    .form-inline .form-control {
        display: inline-block !important;
        width: auto;
    }
}

.gray-10 {
    background-image:url(../images/gray_bk.png);
    background-repeat: repeat;
}

.gray-20 {
    background-color: #dfdfdf;
}

.gray-30 {
    background-color: #cfcfcf;
}

.gray-40 {
    background-color: #999;
}

.gray-50 {
    background-color: #777;
}

a {
    color: #be4f13;
}

a:hover {
    color: brown;
}


/** 導航條 **/

.navbar {
    /* background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../images/header-bk.jpg"); */
    background-size: contain;
    background-position: top center;
}

.navbar .navbar-brand img {
    height: 80px;
    text-align: center;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.navbar.main-nav {
    background-color: #5c230a;
    background-image: url('../images/header-bk.png');
    background-size: cover;
    background-position: center top;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.navbar.navbar-dark .nav-item,
.navbar.navbar-dark .nav-item>a {
    color: white;
    text-decoration: none;
}

.daily-topics {
    position: absolute;
    background-color: rgba(206, 0, 55, 0.5);
    z-index: 19;
    padding: 10px 20px;
    color: white;
    margin: 10px;
}

.hilight-topic {
    position: absolute;
    float: right;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px 20px;
    margin: 10px;
    z-index: 100;
}

.category-index {
    position: absolute;
}

nav .sub-nav {
    list-style: none;
}

nav .sub-nav>li {
    display: inline-block;
}

nav.sticky .sub-nav-container {
    display: none;
}


/* MEGAMENU STYLE
-------------------------------------------------- */


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.menu-mobile {
    display: none;
    padding: 20px;
}

.menu-mobile:after {
    content: "\f394";
    font-family: "Ionicons";
    font-size: 2.5rem;
    padding: 0;
    float: right;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-25%);
    -ms-transform: translateY(-25%);
    transform: translateY(-25%);
}

.menu-dropdown-icon:before {
    content: "\f489";
    font-family: "Ionicons";
    display: none;
    cursor: pointer;
    float: right;
    padding: 1.5em 2em;
    background: #fff;
    color: #333;
}

.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
    box-sizing: border-box;
}

.menu > ul:before,
.menu > ul:after {
    content: "";
    display: table;
}

.menu > ul:after {
    clear: both;
}

.menu > ul > li {
    float: left;
    padding: 0;
    margin: 0;
}

.menu > ul > li:hover,
.menu > ul > li.active {
    background: rgba(255, 255, 255, 0.2);
}

.menu > ul > li a {
    text-decoration: none;
    padding: 0.5em 1.5em;
    display: block;
    color: antiquewhite;
}

.menu > ul > li a:hover {
    color: white;
}

.menu > ul > li > ul {
    display: none;
    width: 100%;
    background: white;
    position: absolute;
    z-index: 99;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.25);
}

.menu > ul > li > ul:before,
.menu > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul:after {
    clear: both;
    content: '';
    background-image: url('../images/pattern-deco-06-24.png');
    background-repeat: repeat-x;
    height: 24px;
    width: 100%;
}

.menu > ul > li > ul > li {
    margin: 0;
    padding: 20px;
    list-style: none;
    width: 100%;
    background: none;
    float: left;
}

.menu > ul > li > ul > li a {
    padding: .2em 0;
    width: 95%;
    display: block;
    border-bottom: 1px solid #ccc;
}

.menu > ul > li > ul > li a:hover {
    color: brown;
    background-color: antiquewhite;
}

.menu > ul > li > ul > li > ul {
    display: block;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

.menu > ul > li > ul > li > ul:before,
.menu > ul > li > ul > li > ul:after {
    content: "";
    display: table;
}

.menu > ul > li > ul > li > ul:after {
    clear: both;
}

.menu > ul > li > ul > li > ul > li {
    vertical-align: top;
    display: inline-block;
    margin: 0;
}

@media (min-width: 993px) {
    .menu > ul > li > ul > li > ul > li {
        width: calc(25% - 5px);
    }
}

@media (max-width: 992px) {
    .menu > ul > li > ul > li > ul > li {
        width: calc(33.3% - 5px);
    }
}

@media (max-width: 767px) {
    .menu > ul > li > ul > li > ul > li {
        width: calc(50% - 5px);
    }
}

.menu > ul > li > ul > li > ul > li a {
    padding-left: 0.4em;
    border: 0;
    color: #be4f13;
}

.menu > ul > li > ul.normal-sub {
    width: 300px;
    left: auto;
    padding: 10px 20px;
}

.menu > ul > li > ul.normal-sub > li {
    width: 100%;
}

.menu > ul > li > ul.normal-sub > li a {
    border: 0;
    padding: 1em 0;
}

/*
.main-nav .search-box {
    width: 100%;
    background-image: url('../images/search-bk.png');
    background-position: left top;
    background-repeat: repeat-x;
    padding: 0.2em;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
}
*/

.carousel-inner h2.title {
    position: absolute;
    margin-left: 10px;
    margin-top: 10px;
    z-index: 10;
}

.carousel-indicators {
    margin-bottom: 0;
}

.carousel-indicators li {
    display: block;
    background-color: white;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid darkgray;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.carousel-indicators li.active {
    background-color: #be4f13;
    border-color: #be4f13;
}


/* 首頁輪播看板 */

.carousel-inner .card img {
    object-fit: cover;
    object-position: top;
}

.carousel {
    height: 450px;
}

.carousel-inner .card {
    min-height: 400px;
}


/* 首頁輪播看板 播放按鈕 */

.carousel-control-next-icon {
    background-image: url(../images/carousel-arrow-rs.svg);
    position: relative;
    left: 50px;
    top: -25px;
        opacity: 1;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}



.carousel-control-prev-icon {
    background-image: url(../images/carousel-arrow-ls.svg);
    position: relative;
    right: 50px;
    top: -25px;
        opacity: 1;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}


.carousel-control-next-icon,
.carousel-control-prev-icon {
    width: 80px;
    height: 80px;
}


/* 首頁輪播看板 */

.banner-card-img {
    position: absolute;
    width: 60%;
    height: 400px;
}

.carousel-inner {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
}

.carousel-inner .card-body {
    margin-left: 60%;
    height: 400px;
}

.main-nav .logo-area {
    display: inline-block;
}

.main-nav .dashboard {
    display: inline-block;
    float: right;
    margin-top: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 0.8em;
    padding: 0.8em 1.2em;
    border-radius: 0.5em;
}

.main-nav.sticky .logo-area {
    display: inline-block;
    width: 50%;
}

.main-nav.sticky .dashboard {
    display: none;
}

.main-nav.sticky .search-box {
    display: inline-block;
    width: 40%;
    float: right;
    margin-top: 1.25em;
}

.main-nav.sticky {
    position: fixed;
    z-index: 90;
    width: 100%;
}

.main-nav.sticky .navbar-brand img {
    width: auto;
    height: 60px;
}


/* MEGAMENU STYLE
-------------------------------------------------- */

@media (min-width: 1200px) {
    /* 首頁輪播看板 播放按鈕 */
    .carousel-control-prev-icon {
        right: 82px;
    }
    .carousel-control-next-icon {
        left: 82px;
    }
    .main-nav.sticky .search-box {
        display: inline-block;
        width: 40%;
        float: right;
        margin-top: 1.5em;
    }
}

@media (min-width: 993px) and (max-width: 1199px) {
    /* 首頁輪播看板 播放按鈕 */
    .carousel-control-prev-icon {
        right: 70px;
    }
    .carousel-control-next-icon {
        left: 70px;
    }
}

@media (min-width:768px) and (max-width: 992px) {
    .main-nav.sticky .navbar-brand img {
        width: auto;
        height: 60px;
    }
    .main-nav .dashboard {
        display: none;
    }
    .main-nav.sticky .search-box {
        margin-top: 0;
        margin-bottom: 15px;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    .main-nav.sticky .search-box {
        width: 100%;
        float: none;
        margin-top: 0;
    }
    /* 首頁輪播看板 */
    .banner-card-img {
        position: relative;
        width: 100%;
        height: 240px;
    }
    .carousel-inner {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    }
    .carousel-inner .card-body {
        margin-left: 0;
        height: auto;
    }
}

@media (max-width: 767px) {
    .main-nav .container {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .main-nav .navbar-brand img,
    .main-nav.sticky .navbar-brand img {
        width: 100%;
        height: auto;
    }
    .main-nav.sticky .search-box {
        margin-top: 0;
        margin-bottom: 12px;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    #float-menu {
        display: none;
    }
    .main-nav .dashboard {
        display: none;
    }
    .main-nav.sticky .logo-area {
        width: 100%;
    }
    .main-nav.sticky .search-box {
        margin-top: 0;
        margin-bottom: 15px;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }
    .main-nav.sticky .search-box {
        width: 100%;
        float: none;
        margin-top: 0;
    }
    /* 首頁輪播看板 */
    .banner-card-img {
        position: relative;
        width: 100%;
        height: 240px;
    }
    .carousel-inner {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    }
    .carousel-inner .card-body {
        margin-left: 0;
        height: auto;
    }
    /* 限制顯示內容範圍 */
    .carousel-inner .card-body {
        display: block;
        text-overflow: ellipsis;
        word-wrap: break-word;
        overflow: hidden;
        height: 150px;
        line-height: 1.8em;
        margin-bottom: 15px;
    }
    /* 首頁輪播看板 播放按鈕 */
    .carousel-control-next-icon {
        background-image: none;
        left: 0;
        top: -25px;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
    }
    .carousel-control-next:hover .carousel-control-next-icon {
        background-image: none;
    }
    .carousel-control-prev-icon {
        background-image: none;
        right: 0;
        top: -25px;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
    }
    .carousel-control-prev:hover .carousel-control-prev-icon {
        background-image: none;
    }
    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        width: 40px;
        height: 40px;
    }
}

.navbar-expand .navbar-nav .dropdown-menu {
    left: -0.1rem;
}

.dropdown-menu.show {
    padding: 4px 0;
}

.dropdown-menu.show li {
    padding: 2px 10px;
}

.dropdown-menu.show li:hover {
    background-color: #eee;
}


/* 頁面元件 標題 */

section h2.title:before,
section h2.title:after,
footer h2.title:before,
footer h2.title:after {
    display: inline-block;
    content: '';
    width: 17px;
    height: 40px;
}

section h2.title:before,
footer h2.title:before {
    background: url(../images/title-deco-l.png) no-repeat;
    margin-right: 20px;
}

section h2.title:after,
footer h2.title:after {
    background: url(../images/title-deco-r.png) no-repeat;
    margin-left: 20px;
}

section h2.title,
footer h2.title {
    background-color: black;
    color: #ffc107;
    display: inline-flex;
    width: auto;
    font-size: 1.8em;
    align-items: center;
    padding-left: 0px;
    padding-right: 0px;
}

@media (max-width: 767px) {
    section h2.title,
    footer h2.title {
        text-align: center;
    }
}


/* 頁面元件 標題 */


/* 頁面元件 卡片 */


/* 頁面元件 卡片 */


/* 頁面元件 背景 */


/* 
.section-bk-01 {
    background: url(../images/section-bk-01.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-bk-02 {
    background: url(../images/section-bk-02.png);
    background-size: cover;
}

.section-bk-03 {
    background: url(../images/section-bk-03.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-bk-04 {
    background: url(../images/section-bk-04.png);
    background-size: cover;
}

.member-comment:after {
    display: inline-block;
    content: '';
    width: 100%;
    height: 22px;
    background: url(../images/pattern-deco-05.png) repeat-x;
}
 */

.section-bk-03 {
    background-color: #eee;
}


/* 頁面元件 背景 */


/* 首頁 跑馬燈 */


/* 首頁 跑馬燈 */


/* 卡片 Layout */

.card.box-shadow:after {
    display: inline-block;
    content: '';
    width: 100%;
    height: 24px;
    background: url(../images/pattern-deco-06-24.png) repeat-x;
}

.card h3.card-title {
    font-size: 1.5em;
    color: #be4f13;
}

.hot-topics a img.center-cropped {
    object-fit: cover;
    /* Do not scale the image */
    object-position: top;
    /* Center the image within the element */
    height: 240px;
}

.related-topics img.center-cropped {
    object-fit: cover;
    /* Do not scale the image */
    object-position: top;
    /* Center the image within the element */
    height: 160px;
}

.card-img-wrap {
    overflow: hidden;
    position: relative;
}

.card-img-wrap:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transition: opacity .25s;
}

.card-img-wrap img {
    transition: transform .25s;
    width: 100%;
}

a:hover .card-img-wrap img {
    transform: scale(1.05);
}

a:hover .card-img-wrap:after {
    opacity: 1;
}

.hot-topics .card {
    height: 480px;
}

.related-topics .card {
    height: 400px;
}

.hot-topics .card-body,
.related-topics .card-body {
    display: block;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    height: 220px;
    line-height: 1.8em;
    margin-bottom: 15px;
}

.card a .card-body>p,
.hot-topics a .card-body>p,
.related-topics a .card-body>p {
    color: dimgray;
}

.card a:hover,
.hot-topics a:hover,
.related-topics a:hover {
    text-decoration: none;
}

.card a:hover .card-body>p {
    color: black;
}


/* 卡片 Layout */


/* 首頁 右側浮動長條 **/

.float-right-menu {
    position: fixed;
    top: 50%;
    z-index: 100;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #c71b0a;
    right: 16px;
}

.float-right-menu a {
    padding: 4px 8px;
    width: 40px;
    font-size: 14px;
    letter-spacing 0em;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 4px
}


/* 首頁 右側浮動長條 **/

.keyword-list .btn {
    margin-bottom: 10px;
}

.section-top-margin {
    margin-top: 40px;
}

.popular-search-keywords {
    padding: 10px;
}

.search-by-keywords {
    line-height: 2;
}

.keyword-list>a {
    padding-right: 10px;
}

.keyword-group {
    display: table;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

@media only screen and (min-width: 768px) {
    .keyword-title,
    keyword-list {
        display: table-cell;
    }
    .keyword-title {
        white-space: nowrap;
        padding-right: 20px;
    }
}

.box-shadow:hover {
    box-shadow: 0 0 40px rgba(0,0,0,0.25);
}


/* 搜尋 結果頁 */

.nav-tabs .nav-link {
    color: gray;
    border-radius: 0;
    border-width: .25rem 0 .25rem 0;
    border-color: rgba(217, 175, 124, 0.5);
}

.nav-tabs .nav-link.active {
    background-color: antiquewhite;
    border-radius: 0;
    border-width: .25rem 0 .25rem 0;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #be4f13 rgba(0, 0, 0, 0);
    color: #be4f13;
}

.nav-tabs .nav-link:hover {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #be4f13 rgba(0, 0, 0, 0);
    background-color: rgba(217, 175, 124, 0.5);
    color: #be4f13;
}

.search-result-summary {
    background-color: antiquewhite;
}

.search-result-list .container {
    position: relative;
}

.ethnic.pagination .page-number a {
    display: inline-flex;
    border-radius: 50%;
    padding: 0;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    margin: 0 5px;
    color: #be4f13;
}

.ethnic.pagination .page-number.active a {
    color: white;
    background-color: #be4f13;
    border-color: #be4f13;
}

.ethnic.pagination .arrow-left,
.ethnic.pagination .arrow-right {
    position: absolute;
}

.ethnic.pagination .arrow-left {
    left: 15px;
}

.ethnic.pagination .arrow-right {
    right: 15px;
}

.ethnic.pagination .arrow-left a,
.ethnic.pagination .arrow-right a {
    border: 0;
    color: #be4f13;
}

.search-result .related-ethnic,
.search-result .related-category {
    margin-right: .5rem;
    margin-top: .25rem;
    margin-bottom: .05rem;
    border: 1px solid #bfbfbf;
    padding: 2px 8px;
    color: #9f9f9f;
    border-radius: 5px;
    display: inline-block;
    bottom: 5px;
    position: relative;
    font-size: 0.9rem;
}

.search-result .related-ethnic:hover,
.search-result .related-category:hover {
    text-decoration: none;
    color: orange;
    border-color: orange;
    background-color: white;
}

.search-result-list mark,
.detail-article mark {
    padding: 0;
    background-color: transparent;
}


/* 搜尋 結果頁 */


/* detail article */

#wording-abstract {
    border: 2px solid lightgray;
    padding: 20px;
    width: 100%;
    background-color: white;
}

@media (max-width: 767px) {
    .detail-article {
        margin-top: 2rem;
    }
}

.hilight-color {
    color: #be4f13;
}

.detail-article img.float-left {
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 5px;
    max-width: 380px;
    max-height: 380px;
}

.detail-article img.float-right {
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top: 5px;
    max-width: 380px;
    max-height: 380px;
}

.jssocials-shares {
    display: inline-block;
    vertical-align: middle;
}

.jssocials-share {
    display: inline-block;
    vertical-align: top;
    margin: 0.3em;
}

.jssocials-share-link {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    border-radius: 50%;
}

.jssocials-share-link {
    padding: .5em .6em;
    /* border-radius: 0.3em; */
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.15);
    color: #fff;
    -webkit-transition: background 200ms ease-in-out;
    transition: background 200ms ease-in-out;
}

.jssocials-share-logo {
    width: 1em;
    vertical-align: middle;
    font-size: 1.5em;
    color: #FFF;
}

.jssocials-share-facebook .jssocials-share-link {
    background: #3b5998;
    border: 1px solid #344e86;
}

.jssocials-share-googleplus .jssocials-share-link {
    background: #dd4b39;
    border: 1px solid #d73925;
}

.jssocials-share-twitter .jssocials-share-link {
    background: #00aced;
    border: 1px solid #0099d3;
}

.jssocials-share-linkedin .jssocials-share-link {
    background: #007bb6;
    border: 1px solid #006a9d;
}

.wording-cat-title {
    font-weight: 600;
}

.card.wording-abstract {
    border: 2px solid rgba(0, 0, 0, .25);
}

.wording-abstract>.card-body {
    padding-top: .25rem;
}

.wording-abstract>.card-body>ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.wording-abstract>.card-body>ul>li {
    margin-top: 4px;
    margin-bottom: 4px;
}

.wording-abstract>.card-body>ul>li>.lang-mark {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #be4f13;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    margin: .5rem .25rem .25rem 0;
}

.wording-abstract>.card-body>ul>li>div {
    display: inline-block;
    color: #be4f13;
    width: calc(100% - 36px);
    vertical-align: middle;
}


/* detail article */


/* 回應詞條 */

.chat-box {
    max-width: 640px;
    margin: 0 auto;
}

.chat ul {
    list-style: none;
    padding: 0 15px;
    margin: 0;
}

.chat ul li {
    margin: 60px 0 15px 0;
    font-weight: 300;
}

.chat ul li a.user {
    margin: -30px 0 0 0;
    display: block;
    color: #333;
}

@media only screen and (min-width: 768px) {
    .chat ul li.other {
        margin-left: 90px;
    }
    .chat ul li.you {
        margin-right: 90px;
    }
    .chat ul li.reply {
        margin-left: 90px;
        margin-right: 90px;
    }
}

.chat ul li.reply {
    margin-top: 40px;
}

.chat ul li.reply textarea {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.chat ul li.other a.user {
    float: right;
}

.chat ul li a.user img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #f3f3f3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.chat ul li.other .date {
    float: right;
    margin: -30px 10px 0 0;
}

.chat ul li.you .date {
    float: left;
    margin: -30px 0 0 10px;
}

.chat ul li.you a.user {
    float: left;
}

.chat ul li .message {
    display: block;
    padding: 10px;
    position: relative;
    color: black;
    font-size: 15px;
    background-color: white;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.chat ul li .message p {
    margin: 0;
    padding: 0;
    transition: all 0.1s;
}

.chat ul li.you .message {
    margin: 0 0 0 90px;
}

.chat ul li.other .message {
    margin: 0 90px 0 0;
}

.chat ul li .message:before {
    content: '';
    position: absolute;
    border-top: 16px solid rgba(0, 0, 0, 0.15);
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
}

.chat ul li .message:before {
    content: '';
    position: absolute;
    border-top: 16px solid rgba(0, 0, 0, 0.15);
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
}

.chat ul li .message:after {
    content: '';
    position: absolute;
    top: 0;
    border-top: 17px solid white;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
}

.chat ul li.you .message:before {
    margin: -9px 0 0 -16px;
    left: 0;
}

.chat ul li.you .message:after {
    content: '';
    left: 0;
    margin: 0 0 0 -15px;
}

.chat ul li.other .message:before {
    margin: -9px -16px 0 0;
    right: 0;
}

chat ul li.other .message:before {
    margin: -9px -16px 0 0;
    right: 0;
}

.chat ul li.other .message:after {
    content: '';
    right: 0;
    margin: 0 -15px 0 0;
}


/* 回應詞條 */


/** member comment **/

.member-comment {
    background: white;
    border: 1px solid lightgray;
    border-radius: 5px;
}

.news-list,
.member-comment-block {
    border-top: 1px solid lightgray;
}

.news-list:last-child {
    border-bottom: 1px solid lightgray;
}


/** member comment **/


/** Dialog Bubble **/

.dlalog-bubble.left {
    margin-left: 30px;
}

.dlalog-bubble.right {
    margin-right: 30px;
}

.dlalog-bubble {
    position: relative;
    left: 30px;
    right: 30px;
    padding: 10px 20px;
    border: 5px solid #5a8f00;
    color: #333;
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.dlalog-bubble.right:before {
    top: 10px;
    bottom: auto;
    left: auto;
    right: -30px;
    border-width: 15px 0 15px 30px;
    border-color: transparent #5a8f00;
}

.dlalog-bubble:before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 40px;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: #5a8f00 transparent;
    display: block;
    width: 0;
}

.dlalog-bubble.right:after {
    top: 16px;
    bottom: auto;
    left: auto;
    right: -21px;
    border-width: 9px 0 9px 21px;
    border-color: transparent #fff;
}

.dlalog-bubble:after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 47px;
    border-width: 13px 13px 0;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
}

.dlalog-bubble.left:before {
    top: 10px;
    bottom: auto;
    left: -30px;
    border-width: 15px 30px 15px 0;
    border-color: transparent #5a8f00;
}

.dlalog-bubble:before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 40px;
    border-width: 20px 20px 0;
    border-style: solid;
    border-color: #5a8f00 transparent;
    display: block;
    width: 0;
}

.dlalog-bubble.left:after {
    top: 16px;
    bottom: auto;
    left: -21px;
    border-width: 9px 21px 9px 0;
    border-color: transparent #fff;
}

.dlalog-bubble:after {
    content: "";
    position: absolute;
    bottom: -13px;
    left: 47px;
    border-width: 13px 13px 0;
    border-style: solid;
    border-color: #fff transparent;
    display: block;
    width: 0;
}


/**Membership**/

#membership-form {
    display: none;
}

#membership-form.display {
    display: block;
}

#membership-form .close-box a {
    position: absolute;
    top: 2px;
    right: 10px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

#membership-form .close-box a:hover {
    color: blue;
}

#membership-form.display .darken-overlay {
    display: block;
    position: fixed;
    z-index: 2001;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

#membership-form.display #membership {
    display: block;
    z-index: 2002;
    min-width: 360px;
    max-width: 500px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    margin: 0 auto;
}

#membership-form.display #membership .card-body {
    margin: 0 auto;
}

.divider-text {
    position: relative;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.divider-text span {
    padding: 7px;
    font-size: 12px;
    position: relative;
    z-index: 2;
}

.divider-text:after {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #ddd;
    top: 55%;
    left: 0;
    z-index: 1;
}

.btn-facebook {
    background-color: #405D9D;
    color: #fff;
}

.btn-google {
    background-color: #b72f0f;
    color: #fff;
}


/**Membership**/


/**lightbox**/


/**lightbox**/


/*Footer Deco*/

footer {
    background-color: antiquewhite;
}

footer .footer-title {
    text-align: center;
    font-size: 1.2em;
    border: 1px solid gray;
    width: auto;
    display: inline-block;
    padding: 5px 20px;
}

@media only screen and (min-width: 768px) {
    footer>div>ul {
        display: table;
        width: 100%;
    }
    footer>div>ul>li {
        display: table-cell;
    }
}

@media only screen and (max-width: 767px) {}

.copyright-text {
    font-size: 0.8em;
    color: #6c757d;
}

footer:after {
    display: inline-block;
    content: '';
    width: 100%;
    height: 50px;
    background: url(../images/pattern-deco-01-50.png) repeat-x;
}


/*Footer Deco*/