스타일
.message_count { 
	position: absolute;
    right: 14px;
    top: 37px;
	box-sizing: border-box;
}
.notickbox {
  background-color: #7b7b7b;
  color: #ffffff;
  text-decoration: none;
  padding: 1px 15px 1px 5px;
  position: relative;
  display: inline-block;
  border-radius: 2px;font-size: 11px;font-family: dotum,"돋움",tahoma;
}

.notickbox:hover {
  background: red;
}

.notickbox .badge {
  position: absolute;
  top: -12px;
  right: -12px;
  padding: 3px 8px;
  border-radius: 50%;
  background-color: red;
  color: #ffffff;
}		
.badge {
    -webkit-animation: blink 2.5s linear infinite;
} 
@-webkit-keyframes blink {
    0% { background-color: red; }
    33% { background-color: #000; }
    66% { background-color: #54a3f7; }
    100% { background-color: green; }
/*    from { background-color: red;}
    to {background-color: green;}  */
}


HTML
<div class="message_count">
	<a href="{getUrl('act','dispMemberMessages')}" class="notickbox">
		<span cond="$output->page_navigation->total_count">쪽지왔어요</span>
		<span cond="!$output->page_navigation->total_count">쪽지없어요</span>
		<span class="badge" cond="$output->page_navigation->total_count">{$output->page_navigation->total_count}</span>
	</a>
</div>