<style>
.tab_list{height:180px; }
.tab_list ul{position:relative;margin:0;padding:0;border-bottom:1px solid #ccc;font-family:Tahoma, Sans-serif;font-size:12px;list-style:none;*zoom:1}
.tab_list ul:after{display:block;clear:both;content:""}
.tab_list li{float:left;margin-bottom:-1px}
.tab_list li a{float:left;position:relative;border:1px solid #eee;border-bottom-color:#ccc;background:#fafafa;color:#666;text-decoration:none}
.tab_list li a span{display:inline-block;padding:6px 25px 6px 25px;letter-spacing:-1px;cursor:pointer}
.tab_list li ul{display:none;position:absolute;top:40px;left:0;width:100%;margin:0;padding:0;border:0;list-style:none;*zoom:1}
.tab_list li ul:after{display:block;clear:both;content:""}
.tab_list li li{float:none;position:relative;margin:0 0 8px 8px;color:#999}
.tab_list li li a{float:none;margin:0;padding:0;border:0 !important;background:transparent;font-weight:normal;color:#333 !important;letter-spacing:normal;}
.tab_list li li a:hover,
.tab_list li li a:active,
.tab_list li li a:focus{color:#000 !important;text-decoration:none;}
.tab_list li li a.board{float:none;margin:0;padding:0;border:0 !important;background:transparent;font-size:11px;font-weight:normal;color:#999 !important;letter-spacing:normal;}
.tab_list li li a.board:hover,
.tab_list li li a.board:active,
.tab_list li li a.board:focus{color:#666 !important;text-decoration:none}
.tab_list li li a.commnet{float:none;margin:0;padding:0;border:0 !important;background:transparent;font-size:10px;font-weight:normal;color:#666 !important;letter-spacing:normal}
.tab_list li li a.commnet:hover,
.tab_list li li a.commnet:active,
.tab_list li li a.commnet:focus{color:#666 !important;text-decoration:underline}
.tab_list li li.more{font-family:돋움;font-size:11px;position:absolute;top:-50px;right:15px;border:0 !important;background:transparent}
.tab_list li li span.datetime{font-family:돋움;font-size:11px;position:absolute;top:0px;right:0;border:0 !important;background:transparent}
.tab_list.m1 .m1 a,
.tab_list.m2 .m2 a,
.tab_list.m3 .m3 a,
.tab_list.m4 .m4 a,
.tab_list.m5 .m5 a, 
.tab_list.m6 .m6 a,
.tab_list.m7 .m7 a, 
.tab_list.m8 .m8 a {margin-top:-1px;border:1px solid #ccc;border-bottom:1px solid #fff;background:transparent;color:#333}
.tab_list.m1 .m1 a span,
.tab_list.m2 .m2 a span,
.tab_list.m3 .m3 a span,
.tab_list.m4 .m4 a span,
.tab_list.m5 .m5 a span,
.tab_list.m6 .m6 a span,
.tab_list.m7 .m7 a span,
.tab_list.m8 .m8 a span{padding-top:7px;font-weight:bold}
.tab_list.m1 .m1 ul,
.tab_list.m2 .m2 ul,
.tab_list.m3 .m3 ul,
.tab_list.m4 .m4 ul,
.tab_list.m5 .m5 ul,
.tab_list.m6 .m6 ul,
.tab_list.m7 .m7 ul,
.tab_list.m8 .m8 ul{display:block}
.tab_list.js_off{height:auto}
.tab_list.js_off ul{border:0}
.tab_list.js_off li{float:none;position:relative}
.tab_list.js_off li a{display:block;float:none;border:1px solid #eee !important;border-bottom-color:#ccc !important;background:#fafafa !important;font-weight:bold;color:#333}
.tab_list.js_off li ul{position:static;display:block;left:0;top:0;padding:5px 0}
.tab_list.js_off li li a{display:inline;border:0 !important;background:none !important;font-weight:normal}
.tab_list.js_off li li .more{top:5px;right:15px;}
</style>


<div style="height:106px;" class="tab_list m1" >
<ul>
<? 
for($m=0; $m<count($gr_id); $m++) { 
$num = $m+1;  
?>
<li class="m<?=$num?>">
<a href="#" jquery16408452460570924265="<?=$num?>">
<span ><?=$gr[$m][gr_subject]?></span>
</a> 
<ul style="margin:15px 0 0 15px;" >
<?
$empty_row = $rows - count($list[$m]);
for($n=0; $n<count($list[$m]); $n++) {
  echo "<li>";
  echo "<a class=\"board\" href=\"{$g4[bbs_path]}/board.php?bo_table={$list[$m][$n][bo_table]}\">[{$list[$m][$n][bo_subject]}] </a>";
  echo "<a href=\"{$list[$m][$n]['href']}\">{$list[$m][$n][subject]}</a>";
  if ($list[$m][$n]['comment_cnt']) 
  echo " <a class=\"commnet\" href=\"{$list[$m][$n]['comment_href']}\">{$list[$m][$n]['comment_cnt']}</a>";
  echo "<span style='margin-right:10px;' class=\"datetime\">{$list[$m][$n][datetime2]}</span>";
  /* 아이콘 사용시 본 주석을 삭제하고, 활성화 시켜주세요.
  echo " " . $list[$m][$n]['icon_new'];
  echo " " . $list[$m][$n]['icon_file'];
  echo " " . $list[$m][$n]['icon_link'];
  echo " " . $list[$m][$n]['icon_hot'];
  echo " " . $list[$m][$n]['icon_secret'];  
  */
  echo "</li>";  
}
for($l=0; $l<$empty_row; $l++) {
  echo "<li> <a href='#'>".$gr[$m][gr_subject]."탭의 최신글이 더 없습니다.</a></li>";
}
?>
<li class="more"> <a href="#">more</a>
</li>
</ul>
</li>
<? } ?>
</ul>
</div>


<script type="text/javascript">
jQuery(function($){
	var tab = $('.tab_list');
	tab.removeClass('js_off');
	tab.css('height', tab.find('>ul>li>ul:visible').height()+40);
	function onSelectTab(){
		var t = $(this);
		var myClass = t.parent('li').attr('class');
		t.parents('.tab_list:first').attr('class', 'tab_list '+myClass);
		tab.css('height', t.next('ul').height()+40);
	}
	tab.find('>ul>li>a').click(onSelectTab).focus(onSelectTab);
});
</script>