/*BootStrap 5 column Layout*/
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 19.1%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-15 {
        width: 19.1%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-15 {
        width: 19.1%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-15 {
        width: 19.1%;
        float: left;
    }
}

.margin-top-1 {
    margin-top: 1px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-40 {
    margin-bottom: 40px;
}

.input-search {
    border-radius: 20px;
    font-size: 12px;
    height: 31px;
}

.btn-search {
    border-radius: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-left-style: none;
    font-size: 12px;
}

.keyword {
    color:#FF0000;
}

.row.vdivide [class*='col-']:not(:last-child):after {
    background: #e0e0e0;
    width: 1px;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    min-height: 70px;
}
/*End of BootStrap Hack*/

body {
    background-color: #F8F3EF;
    color: #86684e;
    font-family: Microsoft JhengHei;
}

img {
    max-width: 100%;
}

ul {
    padding: 0;
}

li {
    list-style: none;
}

.vertical-divider {
    border-right: 1px dashed gray;
}
/* HEADER*/

.header-img {
    /*background-image: url(/Themes/V2/Content/images/header/logo.png);*/
    background-image: url(../images/header/logo.png);
    background-position: center center;
    background-repeat: no-repeat;
    height: 129px;
    background-size: contain;
    margin-top: 10px;
    margin-bottom: 10px;
}


@media (max-width: 768px) {
    .header-img {
        /*background-image: url(/Themes/V2/Content/images/header/logo.png);*/
        background-image: url(../images/header/logo.png);
        background-position: center left;
        background-repeat: no-repeat;
        height: 80px;
        background-size: contain;
    }

    #searchBox {
        width: 140px;
    }
}

@media (max-width:480px) {
    #searchBox {
        width: 100%;
        float: right;
    }

    .nav .herbalhealth {
        background-color: #F5A7A3;
        color: #fff;
    }

    .nav .smartlife {
        background-color: #F9BB2A;
        color: #fff;
    }

    .nav .nutrition {
        background-color: #ACC70A;
        color: #fff;
    }

    .nav .playlet {
        background-color: #C9BC9C;
        color: #fff;
    }

    .nav .Charity {
        background-color: #01B2A9;
        color: #fff;
    }

    .nav .lifeplus {
        background-color: #92D2DE;
    }

        .nav .lifeplus .title {
            color: #fff;
        }

    .nav .playlet .title {
        color: #fff;
    }

    .nav .smartlife .title {
        color: #fff;
    }

    .nav .nutrition .title {
        color: #fff;
    }

    .nav .herbalhealth .title {
        color: #fff;
    }

    .nav .Charity .title {
        color: #fff;
    }
}

.nav li {
    margin-top: 5px;
    margin-bottom: 5px;
    min-height: 36px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    padding: 0 5px 0 5px;
}

.nav .title {
    font-size: 14px;
    color: #000;
    margin-top: 10px;
    margin-left:4px;
    /*float: left;*/
}



.nav .herbalhealth {
    border-bottom: 3px solid #F5A7A3;
    /*background-image: url( ../images/Header/herbalhealth_icon.png);*/
    background-position: right center;
    background-repeat: no-repeat;
}

.nav .smartlife {
    border-bottom: 3px solid #F9BB2A;
    /*background-image: url( ../images/Header/smartlife_icon.png);*/
    background-position: right center;
    background-repeat: no-repeat;
}

.nav .doctorroom {
    border-bottom: 3px solid #5d90cb;
    /*background-image: url( ../images/Header/doctorroom_icon.png);*/
    background-position: right center;
    background-repeat: no-repeat;
}

.nav .childhealth {
    border-bottom: 3px solid #d9aacd;
    /*background-image: url( ../images/Header/childhealth_icon.png);*/
    background-position: right center;
    background-repeat: no-repeat;
}

.nav .nutrition {
    border-bottom: 3px solid #ACC70A;
    /*background-image: url( ../images/Header/nutrition_icon.png);*/
    background-position: right center;
    background-repeat: no-repeat;
}

.nav .celebrity {
    border-bottom: 3px solid #C9BC9C;
    /*background-image: url( ../images/Header/celebrity_icon.png);*/
    background-position: right center;
    background-repeat: no-repeat;
}

.nav .Charity {
    border-bottom: 3px solid #01B2A9;
    background-position: right center;
    background-repeat: no-repeat;
}

/*.nav .playlet {
    border-bottom: 3px solid #C9BC9C;
    background-image: url( ../images/Header/playlet_icon.png);
    background-position: right center;
    background-repeat: no-repeat;
}*/

.nav .lifeplus {
    border-bottom: 3px solid #92D2DE;
    /*background-image: url( ../images/Header/lifeplus_icon.png);*/
    background-position: right center;
    background-repeat: no-repeat;
}

.row .smart {
    font-size:x-small;
    color:#9d9d9d;
    margin-top:30px;
    /*background-position: right center;*/
    background-repeat: no-repeat;
}

.row .category {
    font-size:small;
    color:#e38336;
    text-align:center;
    background-position: right center;
    background-repeat: no-repeat;
}


/*INDEX*/
.index .content-block {
    margin-left: 90px;
    padding-left: 90px;
    cursor: pointer;
    padding-bottom: 20px;
}

    .index .content-block ul {
        padding: 0px;
        margin-right: 30px;
    }

        .index .content-block ul li {
            list-style: none;
        }

            .index .content-block ul li:first-child {
                margin-left: 0px;
            }

    .index .content-block img {
        width: 160px;
        height: auto;
        border: 1px solid lightgray;
    }

.index .content-block-title {
    font-size: 24px;
    font-weight: bold;
    color: #ed6d00;
    float: left;
}

.index .content-block-desc {
    margin-left: 20px;
    font-size: 16px;
    color: #808080;
    float: left;
    line-height: 36px;
    vertical-align: bottom;
}


.index-herbalhealth img {
    float: left;
    z-index: 99999;
}

.index-herbalhealth .content-block {
    z-index: 1;
    margin-left: 90px;
    background-color: #fff;
    border-left: 5px solid #F5A7A3;
}

.index-smartlife img {
    float: left;
    z-index: 99999;
}

.index-smartlife .content-block {
    z-index: 1;
    margin-left: 90px;
    background-color: #fff;
    border-left: 5px solid #F9BB2A;
}

.index-doctorroom img {
    float: left;
    z-index: 99999;
}

.index-doctorroom .content-block {
    z-index: 1;
    margin-left: 90px;
    background-color: #fff;
    border-left: 5px solid #5d90cb;
}

.index-nutrition .content-block {
    z-index: 1;
    margin-left: 90px;
    background-color: #fff;
    border-left: 5px solid #ACC70A;
}

.index-nutrition img {
    float: left;
    z-index: 99999;
}

.index-childhealth .content-block {
    z-index: 1;
    margin-left: 90px;
    background-color: #fff;
    border-left: 5px solid #d9aacd;
}

.index-childhealth img {
    float: left;
    z-index: 99999;
}

.index-playlet .content-block {
    z-index: 1;
    margin-left: 90px;
    background-color: #fff;
    border-left: 5px solid #C9BC9C;
}

.index-playlet img {
    float: left;
    z-index: 99999;
}

.index-Charity img {
    float: left;
    z-index: 99999;
}

.index-Charity .content-block {
    z-index: 1;
    margin-left: 90px;
    background-color: #fff;
    border-left: 5px solid #01B2A9;
}

.index-lifeplus .content-block {
    z-index: 1;
    margin-left: 90px;
    background-color: #fff;
    border-left: 5px solid #92D2DE;
}

.index-lifeplus img {
    float: left;
    z-index: 99999;
}


@media (max-width:768px) {
    .index-childhealth img {
        width: 100px;
        height: auto;
    }

    .index-herbalhealth img {
        width: 100px;
        height: auto;
    }

    .index-smartlife img {
        width: 100px;
        height: auto;
    }

    .index-nutrition img {
        width: 100px;
        height: auto;
    }

    .index-playlet img {
        width: 100px;
        height: auto;
    }

    .index-Charity img {
        width: 100px;
        height: auto;
    }

    .index-lifeplus img {
        width: 100px;
        height: auto;
    }

    .index .content-block {
        z-index: 1;
        margin-left: 50px;
        background-color: #fff;
    }

    .index-doctorroom img {
        width: 100px;
        height: auto;
    }
}

/*各主題內容設定*/
.subject {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 10px;
}

    .subject a {
        text-decoration: none;
    }

    .subject .item {
        border-bottom: 1px solid lightgray;
        padding: 10px;
    }

        .subject .item:last-child {
            border-bottom: none;
        }

.panel {
    border-radius: 0px;
}

/*.panel-banner {
    border-radius: 0px;
    width: 100%;
    height: 42px;
}*/

.panel-heading {
    border-radius: 0px;
    width: 100%;
    height: 42px;
}

.panel .article-title {
    padding: 20px 0 10px 0;
    font-size: 24px;
    font-weight: bold;
}

.panel .article-content {
    margin-top: 10px;
}

.panel .fb-like {
    padding: 0 0 10px 0;
    border-bottom: 1px solid lightgray;
}

.panel .fb-comments {
    margin-top: 10px;
}

.panel-heading > img {
    margin-top: -30px;
    float: left;
}

.panel-heading > .title {
    float: left;
    color: #fff;
    margin-left: 10px;
    margin-top: -12px;
    font-size: 28px;
}

.panel-contenttype {
    border: 5px solid #eb6e02;
}

    .panel-contenttype > .panel-heading {
        background-color: #eb6e02;
    }

.panel-herbalhealth {
    border: 5px solid #F5A7A3;
}

    .panel-herbalhealth > .panel-heading {
        background-color: #F5A7A3;
    }

.panel-smartlife {
    border: 5px solid #F9BB2A;
}

    .panel-smartlife > .panel-heading {
        background-color: #F9BB2A;
    }

.panel-nutrition {
    border: 5px solid #ACC70A;
}

.panel-doctorroom {
    border: 5px solid #5d90cb;
}

    .panel-nutrition > .panel-heading {
        background-color: #ACC70A;
    }

.panel-childhealth {
    border: 5px solid #d9aacd;
}

    .panel-childhealth > .panel-heading {
        background-color: #d9aacd;
    }

/*.panel-banner {
    border: 5px solid #d9aacd;
}*/

    .panel-banner > .panel-heading {
         width: 100%;
         height: 100%;
       
    }


.panel-lifeplus {
    border: 5px solid #92D2DE;
}

    .panel-lifeplus > .panel-heading {
        background-color: #92D2DE;
    }

.panel-doctorroom {
    border: 5px solid #5d90cb;
}

    .panel-doctorroom > .panel-heading {
        background-color: #5d90cb;
    }

.panel-playlet {
    border: 5px solid #C9BC9C;
}

    .panel-playlet > .panel-heading {
        background-color: #C9BC9C;
    }

.panel-Charity {
    border: 5px solid #01B2A9;
}

    .panel-Charity > .panel-heading {
        background-color: #01B2A9;
    }

.panel-search {
    border: 5px solid #ed6d00;
}

    .panel-search > .panel-heading {
        background-color: #ed6d00;
    }

.rightPane-title {
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    border: none;
    text-align: center;
    vertical-align: middle;
    color: #ea5504;
    font-size: 20px;
    font-weight: bold;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(210,210,210,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,231,103,1)), color-stop(100%, rgba(210,210,210,1)));
    background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(210,210,210,1) 100%);
    background: -o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(210,210,210,1) 100%);
    background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(210,210,210,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(210,210,210,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#d2d2d2', GradientType=0 );
}

/*後台編輯文章的工具，插入圖片會自動將寬高設定為該圖片的尺寸，如此一來無法適應於不同尺寸的裝置*/
p img {
    width: auto;
    height: auto;
}