/*------------ news ------------*/

.site-main{

    background: url(../../images/common/art/bg.jpg);  

}

.news-sect{

    width: 100%;

    position: relative;

}

.news-sect .row{

    margin-bottom: 20px;

    padding:0;

}

.news-sect .container{

    width: 1000px;

    background: #fff;

    z-index: 2;

    position: relative;

    padding:0;

}

.news-sect .col{

    padding:0;

}

.news-sect .col img{

    display: block;

    width: 100%;

}

.news-sect .col:nth-child(2) *{

    padding:5px 50px;

    box-sizing: border-box;

}

.news-sect .container a:nth-child(even) .col:nth-child(1){

    order: 2;

}

.news-sect .container a:nth-child(even) .col:nth-child(2){

    order: 1;

}



.news-sect .date{

    font-size:18px;

    letter-spacing:2pt;

    line-height:1.3;

    color:#a40000;

    text-align:left;

    display: inline-block;

    font-family: 'Playfair Display','Microsoft JhengHei';

}



.news-sect .name{

    clear: both;

    font-size:28px;

    letter-spacing:5pt;

    line-height:160%;

    color: #212121;

    margin-top: 30px;

    margin-bottom: 0;

    text-align:left;

    font-family: 'cwTeXFangSong','Microsoft JhengHei';



    overflow : hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

}

.news-sect .text{

    font-size:15px;

    letter-spacing:2pt;

    line-height:180%;

    color:#666666;

    text-align:left;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 4;

    -webkit-box-orient: vertical;

}

.news-sect .detail{

    position: absolute;

    bottom: 120px;

    left: calc(50% - 19px);

    z-index: 1010;

    width: 38px;

    height: 38px;

    line-height: 38px;

    border:solid 1px #221815; 

    border-radius: 50%;

    text-align: center;

    display: inline-block;

    font-style: normal;

    color: #221815;

    background: #fff;

    font-size:19px;

   font-family: 'cwTeXFangSong','Microsoft JhengHei';

    transition: all .3s ease;

}

.news-sect .detail:hover{

   border:solid 1px #a40000; 

   background: #a40000; 

   color: #fff;

}

.news-sect .col img.hover_block{

    width: auto;

    opacity: 0;

    transition: all .3s ease;

}

.news-sect a:hover .hover_block{

    opacity: 1

}

.news-sect a:hover .row{

    transition: all .3s ease;

    -moz-box-shadow:2px 4px 20px 0px rgba(0,0,0,0.3);

    /* Safari v3.0+ and by Chrome v0.2+ */

    -webkit-box-shadow:2px 4px 20px 0px rgba(0,0,0,0.3);

    /* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */

    box-shadow:2px 4px 20px 0px rgba(0,0,0,0.3);

    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 2,OffY = 4,Color = #4d000000,Positive = true)";

    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX = 2,OffY = 4,Color = #4d000000,Positive = true);

}

.news-sect a:hover .name{



    color: #a40000;

    transition: all .3s ease;

}

.news-sect a{

    position: relative;

    display: block;

}

.news-sect .new{

    width: 33px;

    background: #B69A7A;

    color: #fff;

    display: inline-block;

    padding: 15px 9px;

    line-height: 1.4;

    position: absolute;

    left: calc(50% - 16.5px);

    box-sizing: border-box;

    z-index: 5;

}



/*------------ /news ------------*/

/*------------ side ------------*/



.side-nav {

    position: relative;

    margin: 0 0 80px 0;

    text-align: center;

    border-top: solid 1px #ddd;

}



.side-nav li {

    display: inline-block;

    margin: 0 5px;

    font-family: 微軟正黑體;

}



.side-nav li a {

    position: relative;

    display: block;

    line-height: 1.2;

}



.side-nav li a {

    display: block;

}



.side-nav > li > a {

    position: relative;

    font-size: 15px;

    color: #1F1F1F;

    padding: 8px 10px;

    font-weight: bold;

    line-height: 28px;

}



.side-nav > li > a:hover,

.side-nav > li.active > a {

    border-bottom: solid 2px #a40000;

}



.side-nav ul {

    display: none;

}





/*------------ / side ------------*/



/*detail*/

.art_detail .border_bottom{

    height: auto;

    overflow: hidden;

    border-bottom: #212121 1px solid;

    padding:15px 0;

}

.art_detail .new{

    float: left;

    background: #B69A7A;

    color: #fff;

    display: inline-block;

    padding: 5px 15px;

    line-height: 1.4;

}

.art_detail{

    padding:80px 0;

}

.art_detail_title{

    font-size:30px;

    letter-spacing:9pt;

    line-height:120%;

    text-align:left;

    color: #000000;

    position: relative;





}

.art_detail_title:before{

    content: '';

    display: block;

    width: 260px;

    height: 2px;

    background: #010101;

    position: absolute;

    left: 0;

    top: -20px;

}

.art_detail time{

    font-family: 'Playfair Display','Microsoft JhengHei';

    float: right;

    font-size:18px;

    letter-spacing:2pt;

    line-height:130%;

    

}

.art-editor{

    padding-top: 60px;

}

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

    .news-sect .col:nth-child(2) *{

        padding:5px 10px;

    }

    .news_detail_title{

        font-size: 24px;

    }

}