<div class="w-annc  widget-announcement-18">
  <div class="w-annc__more-wrap clearfix">
    <h2 class="w-annc__widget-title">
      <span>{{widget-title}}</span>
    </h2>
    <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
  </div>
  <ul class="w-annc__list  row" data-level="0" data-list="custom_announcements">
    <li class="w-annc__item  col-md-4">
	    <div class="w-annc__img-wrap">
	    	<a href="{{link_to_show}}" title="{{title}}">
	      		<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
	      	</a>
	    </div>
	    <div class="w-annc__content-wrap">
	      <h4 class="w-annc__entry-title">
	        <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
	      </h4>
	      <div class="w-annc__subtitle">{{subtitle}}</div>
	      <div class="w-annc_read_more"><a href="{{link_to_show}}" title="{{title}}">{{read_more_text}}</a></div>
	    </div>
    </li>
  </ul>
</div>
<style type="text/css">
  .widget-announcement-18 [data-list="custom_announcements"] li > *{
  	background: #ffffff;
  	width: 100%;
  	float: left;
  }
  .widget-announcement-18 [data-list="custom_announcements"] .w-annc__img{
  	width: 100%;
  }
  .widget-announcement-18 [data-list="custom_announcements"] .w-annc__content-wrap{
  	padding: 0 1em;
  }
  .widget-announcement-18 .w-annc__title {
    line-height: 1.3;
    font-size: 1.2rem;
  }
  .widget-announcement-18 .w-annc__widget-title { 
  	float: left; 
  }
  .widget-announcement-18 .w-annc__more { 
  	margin-top: 1.5em; 
  }
  .widget-announcement-18 .w-annc__list > .w-annc__item:nth-child(3n+1) {
    clear: both;
  }
  .widget-announcement-18 li.w-annc__item{
	float: left;
  }

  .widget-announcement-18 .w-annc__img-wrap {
    padding: 0 0 1em 0;
  }
  .w-annc_read_more{	
  	display: inline-block;
  	padding: 1em;
  }
  .w-annc_read_more a{
  	float: left;
  	background: #4a97c2;
  	color: #ffffff;
  	padding: 0 0.5em;
  	border-radius: 0.3em;
  	border: 0.5em solid #4a97c2;
  }
  .w-annc__subtitle {
  	padding-bottom: 0.3em;
  }
  .w-annc_read_more a:hover{
  	background: #327397;
  	border: 0.5em solid #327397;
  }
</style>
<script type="text/javascript">
	$(document).ready(function(){
		$("[data-subpart-id=\"{{subpart-id}}\"] .w-annc__subtitle").each(function(i,v){
			var subtitle = $(v).text();
			if(subtitle.length > 15){
				$(v).text(subtitle.slice(0,15) + "...");
			}
		})
	})
</script>