#header.news{
    margin-top: 100px;
    /* padding-top: 100px; */
    min-height: 318px;
    /* background: url(../images/img_products_main_header_bg1.png)center top no-repeat,url(../images/img_products_main_header_bg2.png)center top no-repeat; */
    background: url(../images/img_news_header.png)center top no-repeat;
    background-color: #f3f4ec;
    border-bottom: #bebebe 1px solid;
}

#header.news h1{
    font-size: 2rem;
    font-weight: bolder;
    color: #068158;
    margin-top: 12vw;
    padding-left: 2vw;
}

#header.news.news-detail h1{
    margin-top: 9vw;

}

#header.news.news-detail h1 small{
    font-size: 1.25rem;
    color: #808080;
    font-weight: 400;
}

.news.main-block{
    background-color: #f3f4ec;
    padding-top: 116px;
    padding-bottom: 116px;
}

.news-menu{
    padding-left: 2vw;
}

.news-menu .news-menu-btn{
    margin-bottom: 3rem;
}

.news-menu .row a{
    font-size: 1.25rem;
    min-width: 81px;
    padding: 0.5rem 0;
    transition: color .15s ease-in-out, border .15s ease-in-out;
}

.news-menu a:hover,
.news-menu a:active,
.news-menu a.active{
    color: #068158;
    border-bottom: #068158 1px solid;
}

.news-list{
    padding-left: 3vw;
    padding-right: 3vw;
    box-sizing: border-box;
}

.news-list .row{
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: #bebebe 1px solid;
}

.news-list .news-list-innerblock{
    padding-left: 1.5rem;
}

.news-list img{
    width: 100%;
}

.news-list .tag,
.news-date .tag{
    font-weight: bolder;
    border-radius: 2rem;
    padding: 0.4rem 1rem;
}

.news-list .tag1,
.news-date .tag1{
    background: #608e51;
    color: #FFF;
}

.news-list .tag2,
.news-date .tag2{
    background: #e9e080;
    color: #808080;
}

.news-list .date,
.news-date .date{
    color: #808080;
    margin: 0 0.5rem;
    /* font-size: 0.8rem; */
}

.news-list .hot,
.news-date .hot{
    color: #ff1d25;
    /* font-size: 0.8rem; */
}

.news-list .news-title{
    color: #808080;
    font-weight: bolder;
    padding: 1rem 0;
    font-size: 1.5rem;
}

.news-list .new-info{
    width: 80%;
    height: 4.25rem;
    white-space: break-all;
    text-overflow: ellipsis;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;/*指定行數...取代*/
    -webkit-box-orient: vertical;
}

.morebtn{
    display: flex;
    justify-content: right;
    align-items: flex-end;
    /* padding-left: 0; */
}

.morebtn a{
    border-bottom: #808080 3px solid;
    padding-right: 0.25rem;
    box-sizing: border-box;
}

.morebtn a:hover{
    border-bottom: #068158 3px solid;
}

/* .pagination{
    justify-content: center;
    align-items: center;
    margin-top: 50px;
} */

.page-link{
    /* border: none;
    font-weight: bolder;
    color: #808080;
    background-color: transparent; */
    /* padding-left: 0; */
}

/* .page-item span{
    border-right: 1px #808080 solid;
    padding-right: 24px;
}

.page-item:nth-child(1) span,
.page-item:nth-last-child(1) span,
.page-item:nth-last-child(2) span{
    border-right: none;
    padding-right: 0;
}

.page-link:hover {
    color: #016119;
    background-color: transparent;
    border-color: transparent;
}
.page-link:focus {
    color: #016119;
    background-color: transparent;
    box-shadow: none;
} */



/* --------------------------------------
            news_detail.php 
-------------------------------------- */
.news-content-block .news-title{
    color: #016119;
    font-size: 2rem;
}

.news-date{
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    border-bottom: #bebebe 1px solid;
}

.news-content-block{
    padding-bottom: 3rem;
}

.news-content-block .news-content-inner{
}

.news-content-block img{
    width: 100%;
}

.newnav{
    padding-top: 2rem;
    border-top: #bebebe 1px solid;
    text-align: center;
}

.newnav .newnavbtn:first-child{
    text-align: left;
}

.newnav .newnavbtn:last-child{
    text-align: right;
}

@media only screen and (max-width: 1366px) {
    #header.news{
        margin-top: 100px;
    }
}

@media only screen and (max-width: 1024px) {
    #header.news{
        margin-top: 60px;
        min-height: 268px;
    } 

    .breadcrumb{
        height: 8vw;
    }

    #header.news h1{
        margin-top: 14vw;
        padding-left: 0;
        text-align: center;
    }

    #header.news{
        margin-top: 77px;
    }
    
    .news-list .row{
        padding-right: 1vw;
    }
}

@media only screen and (max-width: 812px) and (orientation: landscape){
    #header.news{
        margin-top: 56px;
    }
    
    .news-menu-btn{
        text-align: center;
    }

    .morebtn{
        display: block;
        text-align: right;
    }
}

@media only screen and (max-width: 768px) {
    #header.news{
        margin-top: 60px;
        min-height: 200px;
    } 

    .news-list .row{
        /* padding-right: 0; */
    }

    .news.main-block{
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .news-menu-btn{
        text-align: center;
    }

    .news-list .news-list-innerblock{
        padding-left: 0;
    }

    .morebtn{
        display: block;
        text-align: right;
    }
}

@media only screen and (max-width: 767px) {
    #header.news{
        margin-top: 60px;
    } 

    .breadcrumb{
        height: 16vw;
    }

    #header.news h1{
        margin-top: 24vw;
    }
    
    .news-list-img img{
        width: 88%;
    }

    .news-list-img{
        text-align: center;
        margin-bottom: 30px;
    }

    .news-list-meg{
        padding: 0 50px;
    }

    .pagination{
        margin-top: 0;
    }

    .news-list .new-info{
        width: 100%;
        text-align: justify;
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 690px) {
    #header.news{
        margin-top: 56px;
    } 

    .news-content-block .news-title{
        font-size: 1.5rem;
    }

    #header.news.news-detail h1{
        margin-top: 20vw;
    }
}

@media only screen and (max-width: 374px) {
    .newnav .newnavbtn:first-child span{
        display: none;
    }
    
    .newnav .newnavbtn:last-child span{
        display: none;
    }
}

@media only screen and (max-width: 320px) {
    .news-list-meg{
        padding: 0 32px;
    }
}