/* listing article - Global css */
.listing-image-container{position:relative; width:110px; }
.listing-image-container img{width:100%; height:100%;}
.listing-image__icon-container{position:absolute; top:0; left:0; width:32px; height:30px; text-align:center; background:rgba(0,0,0,0.5);}
.listing-image-icon span{line-height:30px; color:#fff;}
.listing-title{min-height:20px; max-height:40px; margin-bottom:10px; overflow:hidden;}
.listing-title h4{margin:0; line-height:20px; font-size:16px;}
.listing-label:after{content:'-'; margin:0 5px;}
.listing-lead{max-height:44px; margin-bottom:15px; overflow:hidden; color:#333;}
.listing-lead p{margin:0; text-align:justify; font-size:1.11em; font-family:"微軟正黑體", Microsoft JhengHei, Helvetica Neue, Verdana, Arial, LiHei Pro Medium, Helvetica, sans-serif;}
.listing-relative-article{position:relative; padding-bottom:30px; z-index:3;}
.listing-relative-article a:before{content:'\2219'; position:absolute; top:7px; left:4px; font-size:38px; line-height:0;}
.listing-relative-article a{position:relative; min-height:18px; max-height:38px; margin-bottom:5px; padding-left:24px; color:#aa4455; overflow:hidden;}
.listing-relative-article a h5{margin:0px; line-height:18px; font-size:1.095em; color:#333;}
.listing-relative-article a:hover h5{color:#cc0022;}
.listing-author-container{line-height:1em;}
.listing-author-container:hover, .listing-author-container:focus{color:#555;}
.listing-channel-container, .listing-date-container{ display:inline-block; line-height:1em;}
.listing-channel-container{position:relative; z-index:3;}
.listing-channel-container:hover, .listing-channel-container:focus{display:inline-block; color:#555;}
.listing-channel-container span, .listing-date-container span{font-size:.86em; line-height:1em; margin-right:5px;}
.listing-channel-container span:first-child{font-size:.8em; line-height:1em; margin-left:1px; margin-right:2px;}
.listing-author-container span, .listing-channel-container span:last-child{font-family:"微軟正黑體", Microsoft JhengHei, Helvetica Neue, Verdana, Arial, LiHei Pro Medium, Helvetica, sans-serif;}
.listing-date-container span{color:#999;}
.listing-link-overlay{display:block; position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%; text-indent:-9999px; z-index:2;}
/* share widget */
.more-btn-container{position:absolute; bottom:-4px; right:-15px; padding-top:15px; padding-right:17px; padding-left:30px; border:0; background:none; z-index:3;}
.more-btn-container:hover, .more-btn-container:focus{outline:none; color:#999;}
.more-btn-container span{font-size:16px;}
.share-pop{visibility:hidden; position:absolute; top:0; bottom:0; right:0; width:0%; background:rgba(0, 0, 0, 0.8); opacity:0; -webkit-transition:visibility 0s 0.4s, opacity 0.35s, width 0.25s ease, color 0.3s ease; transition:visibility 0s 0.4s, opacity 0.35s, width 0.25s ease, color 0.3s ease; overflow:hidden; z-index:10;}
.share-pop-container{position:absolute; left:50%; top:50%; width:70%; height:40px; overflow:hidden; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); text-align: center;}
.popup-btn{display:inline-block; padding:0px; font-size:1.1em; color:#fff; clear:both; line-height:0.8em;}
.popup-btn:after{display:inline-block; content:'|'; vertical-align:middle; font-size:16px;}
.popup-btn:hover:after{color:#fff;}
.popup-btn:last-child:after{content:none;}
.popup-btn:hover, button.share-pop-close:hover{display:inline-block; color:#cc0022;}
.popup-btn .popup-btn-name{display:none;}
.popup-btn .popup-btn-name, .popup-btn .popup-icon{vertical-align:middle; line-height:28px;}
.popup-btn .popup-icon{display:inline-block; width:40px; margin-right:0px; font-size:20px; line-height:40px; text-align:center;}
.share-pop-open{visibility:visible; opacity:1; width:100%; z-index:4; transition-delay:0s;}
.share-pop-close{position:absolute; top:10px; right:10px; padding:0; line-height:20px; font-size:16px; border:none; outline:none; background:none; color:#fff;}
@media (min-width: 768px){
.listing-title{min-height:22px; max-height:44px;}
.listing-title h4{ line-height:22px; font-size:1.22em;}
}
@media (min-width: 992px){
.share-pop-container{width:0; height:auto; overflow:auto; text-align:left;}
.share-pop-open .share-pop-container{width:150px;}
.popup-btn, .popup-btn:hover{display:inherit;}
.popup-btn:after{content:none;}
.popup-btn .popup-btn-name{display:inline;}
.popup-btn .popup-icon{width:20px; margin-right:4px; font-size:16px; line-height:20px;}
}

/* article listing 10 widget */
.article-listing-10-widget{width:100%; position:relative; clear:both;}
.article-listing-10-widget:after{float:left; display:block; content:''; width:100%; margin:6px 0; border-bottom:1px solid #dfdfdf; clear:both;}
.article-listing-10-widget .listing-title{max-height:42px; padding-left:90px; padding-right:0; margin-bottom:6px;}
.article-listing-10-widget .listing-content-container{padding-top:3px; padding-bottom:3px;}
.article-listing-10-widget .listing-channel-container{position:relative; margin:0; padding-left:90px;}
.article-listing-10-widget .listing-date-container{float:left; display:block; position:absolute; top:6px;}
.article-listing-10-widget .listing-date-container span:last-child{display:none;}
.article-listing-10-widget .listing-date-container span{padding:6px 10px; margin-right:10px; font-size:12px; letter-spacing:0em; border-radius:50px; color:#fff; background:#b0b0b0;}
.article-listing-10-widget .share-pop-close{top:10px;}
.article-listing-10-widget .more-btn-container {bottom:-7px; padding-top:13px; padding-bottom:9px;}
.article-listing-10-widget a.listing-author-container:hover,.article-listing-10-widget a.listing-channel-container:hover,.article-listing-10-widget a.listing-author-container:focus,.article-listing-10-widget a.listing-channel-container:focus{margin:0px;}
@media (min-width: 768px){
.article-listing-10-widget .listing-title{max-height:45px;}
}
@media (min-width: 992px){
.article-listing-10-widget .share-pop-container{width:100%; text-align:center;}
.article-listing-10-widget .popup-btn{display:inline-block; padding-top:1px; padding-bottom:1px; padding-right:30px;}
}
@media (min-width: 1200px){
.article-listing-10-widget .listing-title{max-height:24px; padding-left:100px; padding-right:60px; margin-bottom:0px;}
.article-listing-10-widget .listing-channel-container{position:absolute; top:7px; left:88%; margin:0; padding-left:0; text-align:right!important;}
.article-listing-10-widget .listing-date-container{float:none; position:absolute; top:6px; left:0;}
.article-listing-10-widget .listing-date-container span{padding:3px 10px; margin-right:5px; border-radius:12px;}
.article-listing-10-widget .share-pop-close{top:6px;}
.article-listing-10-widget .share-pop-container{width:100%; text-align:center;}
}