안녕하세요!

전에 질문을 등록했었는데 정확한 답변을 찾지 못해 이렇게 재등록 합니다.

현재 스킨 제작중인데요.

적용이 잘 안되는 부분이 있어 이렇게 문의드립니다.

게시판설정 -> 가로갯수 4개로 설정

첨부한 이미지 처럼 출력이 되네요.

즉 첫줄 4개의 자료가 출력이 되어야 하는데  첨부한 이미지처럼 되네요

제작중인 소스를 봐도 어디에 문제가 있는건지 몇일째 제자리 걸음이네요

고수님들의 도움 부탁드립니다.

참고로 게시판 가로 : 749 이며 이미지 크기는 가로:159 입니다.

즐거운 주말 되세요

사용된 소스

<?
if (!defined("_GNUBOARD_")) exit;

/***************************/
$jy['bo_good'] = "10"; // 추천 강조 지수
$jy['bo_nogood'] = "10"; // 비추천 강조 지수
$jy['article_type'] = true; // 글종류 표기(true, false);
/***************************/

/***************************/
$thum_width = 159; // 썸네일 가로 길이
$thum_height = 159; // 썸네일 세로길이
$mod = $board[bo_gallery_cols];
$td_width = (int)(100 / $mod);
//$cols = 4;
/***************************/

if(!$wr_id) {
	echo "<link rel='stylesheet' type='text/css' href='$board_skin_path/style.css' />\n";
	echo "<script type='text/javascript' src='$board_skin_path/js/jquery-1.5.2.min.js'></script>\n";
}
echo "<script type='text/javascript' src='$board_skin_path/js/common.js'></script>\n";

// lib 파일
include_once("$board_skin_path/lib/common.lib.php");

// 페이징
$write_pages = get_new_paging($config[cf_write_pages], $page, $total_page, "./board.php?bo_table=$bo_table".$qstr."&page=");

// 리스트 갯수
$list_count = count($list);

// 목록에서 내용 사용
if($board['bo_use_list_content']) {
	echo "<script type='text/javascript'>";
	echo "var preview = {};";
	for($i=0; $i<$list_count; $i++) {

		$list[$i][preview] = strip_tags($list[$i][content]);
		$list[$i][preview] = nl2br($list[$i][preview]);
		$list[$i][preview] = preg_replace("/\s*<br\s?\/?>\s*/i", " ", $list[$i][preview]);
		$list[$i][preview] = str_replace("\"", "\\\"", $list[$i][preview]);
		$list[$i][preview] = str_replace("&nbsp;", "", $list[$i][preview]);
		$list[$i][preview] = str_replace("&gt;", "", $list[$i][preview]);
		$list[$i][preview] = conv_subject($list[$i][preview], 140, "...");

		if(!$list[$i][preview]) $list[$i][preview] = "내용없음";

		echo "preview['{$i}'] = \"".$list[$i][preview]."\";\n";
	}
	echo "</script>";
}

// 카테고리 셀렉트 박스
if($is_category) {

	$category_location = "./board.php?bo_table=$bo_table$sty&sca=";
    if($sca) $category_options = "<li><a href=\"$category_location\">전체</a></li>";
    $ctgr_arr = explode("|", $board[bo_category_list]);
    foreach($ctgr_arr as $value) {

        if(trim($value)) {

            $category_options .= "<li";
            if($sca == $value) $category_options .= " class='on' ";
			 $category_options .= "><a href=\"$category_location{$value}\">$value</a></li>";
        }
    }
}

?>
<style type="text/css">

.medal_rc_top_wrap {margin-bottom:10px; width:749px; border:1px solid #bbb; background-color:#d5d5d5;}
.medal_rc_top_wrap .title_area {height:34px; border-bottom:1px solid #bbb;}
.medal_rc_top_wrap .title_area h2 {float:left; margin:10px 15px 0 14px; width:108px; height:14px; background:url('/img/skin/sp_medalrace_top_v2.gif') no-repeat; text-indent:-9999px;}
.medal_rc_top_wrap .title_area p {float:left; margin-top:10px; height:14px; line-height:14px; font-family:'돋움',dotum; font-size:11px; color:#777;}
.medal_rc_top_wrap .title_area p strong { font-weight:normal; letter-spacing:-1px;}
.medal_rc_top_wrap .title_area a {float:right; margin:10px 14px 0 0; height:14px; line-height:14px; font-family:'돋움',dotum; font-size:11px; color:#555; font-weight:bold; letter-spacing:-1px;}
.medal_rc_top_wrap .list_area {height:153px; background-color:#eee;}
.medal_rc_top_wrap .list_area ul {padding:10px 0 0 15px; float:left; width:359px; height:143px;}
.medal_rc_top_wrap .list_area ul.first {border-right:1px solid #bbb;}
.medal_rc_top_wrap .list_area ul li {margin-bottom:7px; width:344px; height:21px;}
.medal_rc_top_wrap .list_area ul li span {float:left;}
.medal_rc_top_wrap .list_area ul li .rank {margin:2px 8px 0 0; width:17px; height:18px; background:url('/img/skin/sp_medalrace_top_v2.gif') no-repeat; text-indent:-9999px;}
.medal_rc_top_wrap .list_area ul li.rank_1 .rank,
.medal_rc_top_wrap .list_area ul li.rank_2 .rank,
.medal_rc_top_wrap .list_area ul li.rank_3 .rank {background:none;}
.medal_rc_top_wrap .list_area ul li.rank_4 .rank {background-position:0 -20px;}
.medal_rc_top_wrap .list_area ul li.rank_5 .rank {background-position:-20px -20px;}
.medal_rc_top_wrap .list_area ul li.rank_6 .rank {background-position:-40px -20px;}
.medal_rc_top_wrap .list_area ul li.rank_7 .rank {background-position:-60px -20px;}
.medal_rc_top_wrap .list_area ul li.rank_8 .rank {background-position:-80px -20px;}
.medal_rc_top_wrap .list_area ul li.rank_9 .rank {background-position:-100px -20px;}
.medal_rc_top_wrap .list_area ul li.rank_10 .rank {background-position:-120px -20px;}
.medal_rc_top_wrap .list_area ul li img {float:left; margin-right:6px;}
.medal_rc_top_wrap .list_area ul li .uname {margin-top:3px; float:left; height:15px; line-height:15px; color:#666;}
.medal_rc_top_wrap .list_area ul li .uname span {float:none; color:#666;}
.medal_rc_top_wrap .list_area ul li .ujail {text-decoration:line-through; color:#ff0000;}
.medal_rc_top_wrap .list_area ul li .medal {float:right; margin-top:2px; height:17px;}
.medal_rc_top_wrap .list_area ul li .medal .ico {margin-right:3px; width:17px; height:17px; background:url('/img/skin/sp_medalrace_top_v2.gif') no-repeat 0 -50px;}
.medal_rc_top_wrap .list_area ul li .medal .num {float:left; width:22px; height:17px; line-height:16px; font-size:9px; font-weight:bold; font-family:tahoma; color:#ba6d00; text-align:center;}
.medal_rc_top_wrap .list_area ul li .detail {float:right; margin:5px 10px 0 0; width:55px; height:11px; line-height:11px; text-align:right; font-size:9px; font-family:tahoma; color:#aaa;}
.medal_rc_top_wrap .list_area ul li .detail span { color:#666; font-weight:bold;}
.medal_rc_top_wrap .list_area ul li .btn_view {float:right; margin:2px 0 0 10px; width:42px; height:17px; text-indent:-9000px; overflow:hidden; background:url('/img/skin/sp_medalrace_top_v2.gif?20130302') no-repeat -30px -50px;}
.medal_rc_top_wrap .list_area ul li .btn_view:hover {background-position:-90px -50px;}

/* 페이징_v2 */
.paging_zone_v2 {position:relative; height:64px; text-align:center; z-index:4;}
.numberic_paging_v2 {display:inline-block; margin-top:20px; height:27px;}
.numberic_paging_v2 a {font-size:9px; font-family:tahoma; color:#aaa;}
.numberic_paging_v2 .prev,
.numberic_paging_v2 .next {float:left; margin-left:-1px; width:27px; height:27px; text-indent:-9000px; overflow:hidden; background:url('/img/skin/sprites_board_paging.gif') no-repeat;}
.numberic_paging_v2 .prev {margin:0; background-position:-20px 0;}
.numberic_paging_v2 .next {background-position:-50px 0;}
.numberic_paging_v2 .prev em,
.numberic_paging_v2 .next em {margin:9px 0 0 11px; display:block; width:5px; height:9px; background:url('/img/skin/sprites_board_paging.gif') no-repeat;}
.numberic_paging_v2 .prev em {background-position:0 0;}
.numberic_paging_v2 .next em {background-position:-10px 0;}
.numberic_paging_v2 a.prev em {background-position:0 -10px;}
.numberic_paging_v2 a.next em {background-position:-10px -10px;}
.numberic_paging_v2 a.prev:hover em {background-position:0 -20px;}
.numberic_paging_v2 a.next:hover em {background-position:-10px -20px;}
.numberic_paging_v2 .numb {float:left; margin-left:-1px; padding-left:10px; height:27px; line-height:27px; font-size:9px; font-family:tahoma; background:url('/img/skin/sprites_board_paging.gif') no-repeat -20px -30px;}
.numberic_paging_v2 .numb strong {display:block; padding-right:10px; height:27px; background:url('/img/skin/sprites_board_paging.gif') no-repeat right -30px;}
.numberic_paging_v2 a.numb:hover {position:relative; background-position:-20px -60px; z-index:4;}
.numberic_paging_v2 a.numb:hover strong {background-position:right -60px;}
.numberic_paging_v2 span.on {position:relative; background-position:-20px -90px; color:#fff; z-index:5;}
.numberic_paging_v2 span.on strong {background-position:right -90px;}
.numberic_paging_v2 a:hover {color:#797979;}

.bbsList_v2 {/*border-bottom:2px solid #dddddd;*/}
.bbsList_v2 .top {margin-bottom:5px; position:relative;}

.bbsList_v2 .top .cate_area {margin-bottom:5px; height:26px; border:1px solid #aaa; background-color:#bbb;}
.bbsList_v2 .top .cate_area ul {margin-top:-1px; height:28px;}
.bbsList_v2 .top .cate_area ul li {float:left; margin-left:-1px; border-top:1px solid #aaa; border-bottom:1px solid #aaa; background-color:#bbb;}
.bbsList_v2 .top .cate_area ul li a {display:block; height:26px; border-right:1px solid #aaa; border-left:1px solid #aaa; overflow:hidden;}
.bbsList_v2 .top .cate_area ul li a span {padding:0 10px; display:block; line-height:26px; background-color:#bbb; color:#444; font-family:'돋움', dotum; font-size:11px;}
.bbsList_v2 .top .cate_area ul li a:hover span {background-color:#b5b5b5;}
.bbsList_v2 .top .cate_area ul li.on {position:relative; border-top:1px solid #484d5c; border-bottom:1px solid #484d5c; z-index:100;}
.bbsList_v2 .top .cate_area ul li.on a {border-right:1px solid #484d5c; border-left:1px solid #484d5c; background-color:#6d707d;}
.bbsList_v2 .top .cate_area ul li.on a span {font-weight:bold; letter-spacing:-1px; background-color:#6d707d; color:#fff;}

.bbsList_v2 .top .list_sty_btn_area { margin-bottom:5px; height:22px;}
.bbsList_v2 .top .sty_btn_area {float:left; height:22px;}
.bbsList_v2 .top .sty_btn_area a {float:left; margin-right:-1px; height:22px; text-indent:-9999px; overflow:hidden;}
.bbsList_v2 .top .sty_btn_area a span {display:block; height:22px; background:url('/img/skin/sprites_new2.gif?130314') no-repeat;}
.bbsList_v2 .top .sty_btn_area a span.btn_view {width:83px; background-position:0 -240px;}
.bbsList_v2 .top .sty_btn_area a span.btn_zine {width:73px; background-position:-100px -240px;}
.bbsList_v2 .top .sty_btn_area a span.btn_gall {margin-right:5px; width:82px; background-position:-190px -240px;}
.bbsList_v2 .top .sty_btn_area a span.btn_all {width:60px; background-position:0 -300px;}
.bbsList_v2 .top .sty_btn_area a span.btn_photo_txt {width:95px; background-position:-70px -300px;}
.bbsList_v2 .top .sty_btn_area a.on span {position:relative; z-index:100;}
.bbsList_v2 .top .sty_btn_area a.on span.btn_view {background-position:0 -270px;}
.bbsList_v2 .top .sty_btn_area a.on span.btn_zine {background-position:-100px -270px;}
.bbsList_v2 .top .sty_btn_area a.on span.btn_gall {background-position:-190px -270px;}

.bbsList_v2 .top .list_count {float:right;}
.bbsList_v2 .top .list_count span {display:block; height:20px; line-height:20px; font-size:11px; font-family:'돋움',dotum; color:#757575; letter-spacing:-1px;}
.bbsList_v2 .top .list_count span strong {padding-left:2px; display:inline-block; color:#419300; font-size:11px; letter-spacing:0;}
.bbsList_v2 .find_btn_area {float:right; margin:9px 9px 0 0;}
.bbsList_v2 .find_btn_area a {float:left; height:24px; text-indent:-9000px; overflow:hidden; background:url('/img/skin/sprites_new.gif') no-repeat;}
.bbsList_v2 .find_btn_area .btn_article {margin-right:1px; width:37px; background-position:0 -230px;}
.bbsList_v2 .find_btn_area .btn_comment {width:46px; background-position: -40px -230px;}

.bbstbl {width:100%; border:none; border-bottom:1px solid #ccc; border-collapse:collapse; background:url('/img/skin/bg_bbstbl_th_v2.gif') repeat-x;}
.bbstbl caption {display:none;}

.bbstbl tr:hover td {background-color:#efefef;}

.bbstbl th {height:31px; letter-spacing:-1px; border:none;}
.bbstbl th span {display:block; height:32px; line-height:32px; color:#555; font-weight:normal; background:url('/img/skin/bg_bbstbl_inn_th.gif') no-repeat left 50%; font-size:11px; font-family:'돋움', dotum;}
.bbstbl th.th_no span {font-size:11px; font-family:'돋움', dotum; background:none;}
.bbstbl th.th_check {text-align:right;}
.bbstbl th.th_hit span {background:none;}
.bbstbl th.th_writer span {float:left;}
.bbstbl th.th_title span {text-align:left; font-size:11px; font-family:'돋움', dotum;}
.bbstbl th.th_title span.ico {margin:9px 7px 0 10px; float:left; width:13px; height:12px; background:url('/img/skin/sprites_new2.gif') no-repeat -30px -90px;}

.bbstbl td {border:none; border-bottom:1px solid #eee; background-color:#fff;}
.bbstbl tr.item_notice td {border-bottom:1px solid #ddd;}

.bbstbl td.td_check {text-align:right;}
.bbstbl td.td_thumb {background:#fff url('/img/skin/bg_bbstbl_inn_th.gif') no-repeat left 50%; }

.bbstbl .first td {border-top:none; background:#fff url('/img/skin/sh_first_td.png') repeat-x;}
.bbstbl .last td {border-bottom:1px solid #ccc;}
.bbstbl .last td .inn {border-bottom:none;}
.bbstbl .bg td {background:#fafafa;}

.bbstbl td .inn {/*border-bottom:1px solid #eee;*/ height:31px; background:url('/img/skin/bg_bbstbl_inn_td.gif') no-repeat left 50%;}
.bbstbl td.td_title .inn {height:31px; background:none;}

.bbstbl td.td_no .inn {line-height:31px; text-align:center; font-size:9px; font-family:tahoma; color:#7c7c7c; background:none;}

.bbstbl td.td_title .inn {padding-left:10px; background:url('/img/skin/bg_bbstbl_inn_td.gif') no-repeat left 50%;}
.bbstbl td.td_date .inn {line-height:31px; text-align:center; font-size:9px; font-family:tahoma; color:#7c7c7c;}
.bbstbl td.td_hit .inn {line-height:31px; text-align:center; font-size:9px; font-family:tahoma; color:#7c7c7c; background:url('/img/skin/bg_bbstbl_inn_th.gif') no-repeat left 50%;}
.bbstbl td.td_good .inn {line-height:31px; text-align:center; font-size:9px; font-family:tahoma; color:#bbb; /*border-right:1px solid #d1d1d1;*/ background:url('/img/skin/bg_bbstbl_inn_th.gif') no-repeat left 50%;}

#sty-list .bbstbl td.td_check .inn,
#sty-zine .bbstbl td.td_check .inn {background:none;}

#sty-list .bbstbl td.td_check .inn input,
#sty-zine .bbstbl .item_notice td.td_check .inn input {margin:10px 5px 0 0;}

#sty-zine .bbstbl td.td_check .inn input {margin:30px 5px 0 0;}


#sty-list,
#sty-zine {padding:0 1px; background:url('/img/skin/bg_table.gif') repeat-x;}
#sty-list .bbstbl td .inn,
#sty-zine .bbstbl .item_notice td .inn {height:31px;}

#sty-list .bbstbl td.td_no .inn,
#sty-zine .bbstbl .item_notice td.td_no .inn {line-height:31px;}

#sty-list .bbstbl td.td_no .inn span,
#sty-zine .bbstbl td.td_no .inn span {display:inline-block; margin-top:7px; width:17px; height:17px; background:url('/img/skin/sp_medalrace_top_v2.gif') no-repeat 0 -50px; text-indent:-9999px;}




#sty-zine .bbstbl td.td_no .inn span {margin-top:28px;}

#sty-list .bbstbl td.td_title .inn,
#sty-zine .bbstbl .item_notice td.td_title .inn {padding-left:10px;}

#sty-list .bbstbl td.td_writer .inn,
#sty-zine .bbstbl .item_notice td.td_writer .inn {}
#sty-list .bbstbl td.td_date .inn,
#sty-zine .bbstbl .item_notice td.td_date .inn {line-height:31px;}
#sty-list .bbstbl td.td_hit .inn,
#sty-zine .bbstbl .item_notice td.td_hit .inn {line-height:31px;}
#sty-list .bbstbl td.td_good .inn,
#sty-zine .bbstbl .item_notice td.td_good .inn {line-height:31px;}
#sty-zine .bbstbl td .inn {height:75px;}
#sty-zine .bbstbl td.td_no .inn {line-height:75px;}
#sty-zine .bbstbl td.td_title .inn {padding:0 10px;}
#sty-zine .bbstbl td.td_writer .inn {}
#sty-zine .bbstbl td.td_date .inn {line-height:75px;}
#sty-zine .bbstbl td.td_hit .inn {line-height:75px;}
#sty-zine .bbstbl td.td_good .inn {line-height:75px;}
.bbstbl .bg td.td_no .inn {border-right:1px solid #ededed;}
.bbstbl .bg td.td_title .inn {border-right:1px solid #ededed;}
.bbstbl .bg td.td_writer .inn {border-right:1px solid #ededed;}
.bbstbl .bg td.td_date .inn {border-right:1px solid #ededed;}
.bbstbl .bg td.td_good .inn {border-left:1px solid #ededed;}

/* td_no */
.bbstbl td.td_no .ico_notice {display:inline-block; margin-top:13px; width:25px; height:5px; text-indent:-9000px; background:url('/img/skin/sprites_new2.gif') no-repeat 0 -90px;}
#sty-list .bbstbl td.td_no .ico_notice {margin-top:13px;}
#sty-zine .bbstbl .item_notice td.td_no .ico_notice {margin-top:13px;}
#sty-zine .bbstbl td.td_no .ico_notice {margin-top:44px;}

/* td_thumb */
.bbstbl td.td_thumb .inn {overflow:hidden;}

.bbstbl td.td_thumb .thumb {position:relative; margin:10px 10px 0 10px; display:block; width:73px; height:55px;}
.bbstbl td.td_thumb .thumb img {width:73px; height:55px;}
.bbstbl td.td_thumb .thumb .frame {position:absolute; left:0; top:0; width:71px; height:53px; border:1px solid #000; opacity:0.1;}

/* td_title */
#sty-list .bbstbl .tit_area {float:left;}

#sty-list .bbstbl .tit_area .in_ctgr {float:left; padding-right:4px; margin:8px 4px 0 0; height:15px; line-height:15px; font-weight:bold; letter-spacing:-1px; color:#acacac;}
#sty-list .bbstbl .tit_area .in_tit,
#sty-zine .bbstbl .item_notice .tit_area .in_tit,
#sty-list .bbstbl .tit_area .current,
#sty-zine .bbstbl .item_notice .tit_area .current {float:left; margin-top:8px; height:15px; line-height:15px; overflow:hidden; max-width:300px; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-family:'굴림',gulim; color:#333;}

#sty-list .bbstbl .td_title .inn {width:450px;}
#sty-list .bbstbl .tit_area .current {color:#f05f10;}
#sty-list .bbstbl .co_cnt {float:left; margin:9px 0 0 3px; height:11px; line-height:11px; font-weight:bold; font-family:tahoma; font-size:9px; color:#ff6c00;}
#sty-list .bbstbl .ico_new {float:left; margin:10px 0 0 4px; width:12px; height:11px; text-indent:-9000px; background:url('/img/skin/sprites_new2.gif') no-repeat -90px -90px;}

#sty-zine .bbstbl .td_title .inn {width:350px;}
#sty-zine .bbstbl .td_title .article_info {padding-top:10px; height:21px;}
#sty-zine .bbstbl .td_title .article_icon {float:left; margin-right:5px;}
#sty-zine .bbstbl .td_title .article_content {display:block; margin-top:3px; max-width:367px; height:28px; overflow:hidden; letter-spacing:-1px; color:#666; font-size:11px; font-family:'돋움', dotum;}
#sty-zine .bbstbl .tit_area {float:left;}
#sty-zine .bbstbl .tit_area .in_tit,
#sty-zine .bbstbl .tit_area .current {float:left; margin-top:3px; height:15px; line-height:15px; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-family:'굴림',gulim; color:#333;}
#sty-zine .bbstbl .tit_area .in_ctgr {float:left; padding-right:7px; margin:3px 9px 0 0; height:15px; line-height:15px; font-size:11px; font-family:'돋움',dotum; color:#acacac; background:url('/img/skin/bg_bbstbl_inn_th.gif') no-repeat right 50%;}
#sty-zine .bbstbl .tit_area .current {color:#f05f10;}
#sty-zine .bbstbl .co_cnt {float:left; margin:4px 0 0 3px; height:11px; line-height:11px; font-family:tahoma; font-size:9px; font-weight:bold; color:#ff6c00;}
#sty-zine .bbstbl .ico3_pack {float:left; margin-left:5px; margin-top:11px; width:9px; height:9px; text-indent:-9000px; overflow:hidden; background:url('/img/skin/li_ico.gif') no-repeat;}
#sty-zine .bbstbl .ico_link {background-position:-60px 0;}
#sty-zine .bbstbl .ico_new {float:left; margin:5px 0 0 4px; width:12px; height:11px; text-indent:-9000px; background:url('/img/skin/sprites_new2.gif') no-repeat -90px -90px;}


/* 제목앞 아이콘 공통 */
#sty-list .bbstbl .item_notice .tit_area .in_tit,
#sty-zine .bbstbl .item_notice .tit_area .in_tit {font-weight:bold;}
#sty-list .bbstbl .tit_area span.ico,
#sty-zine .bbstbl .tit_area span.ico {margin:10px 7px 0 0; float:left; width:11px; height:11px; background:url('/img/skin/sprites_new2.gif') no-repeat -70px -90px;}
#sty-zine .bbstbl .tit_area span.ico {margin:5px 7px 0 0;}
#sty-list .bbstbl .item_notice .tit_area span.ico,
#sty-zine .bbstbl .item_notice .tit_area span.ico {margin:10px 7px 0 0; float:left; width:11px; height:11px; background:url('/img/skin/sprites_new2.gif') no-repeat -50px -90px;}

/* td_writer */
.bbstbl .ico_lv {float:left; margin:5px 4px 0 10px;}
.bbstbl .uname {float:left; margin-top:8px; width:70px; height:15px; line-height:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#333;}
.bbstbl .uname span {font-size:12px; font-family:'굴림',gulim; color:#4c4c4c; letter-spacing:-1px;}
.bbstbl .ujail {text-decoration:line-through; color:#ff0000;}

#sty-list .bbstbl .ico_lu,
#sty-zine .bbstbl .ico_lu {float:left; margin:5px 4px 0 10px;}
#sty-list .bbstbl .ico_lv,
#sty-zine .bbstbl .item_notice .ico_lv {margin:5px 4px 0 10px;}
#sty-list .bbstbl .uname,
#sty-zine .bbstbl .item_notice .uname {margin-top:8px;}
#sty-zine .bbstbl .ico_lv {margin:27px 4px 0 10px;}
#sty-zine .bbstbl .uname {margin-top:30px;}

/* td_hit */
.bbstbl .td_hit em {color:#f05f10;}
.bbstbl .td_hit span {color:#7c7c7c;}

/* nocontents */
.bbstbl .nocontents {height:200px; text-align:center; font-size:12px; font-family:'굴림',gulim; color:#999;}

#sty-gall {position:relative; margin-top:1px;}
#sty-gall {position:relative; margin-top:1px;}
#sty-gall .topline {position:absolute; left:-1px; top:-1px; width:100%; height:1px; background:#d5d5d5; z-index:10;}
#sty-gall .rightline {position:absolute; right:-1px; bottom:0; width:1px; height:100%; background:red; z-index:10;}
#sty-gall .bottomline {position:absolute; left:-1px; bottom:0; width:100%; height:1px; background:#d5d5d5; z-index:10;}
#sty-gall ul {margin:-1px 0px -1px 0; *zoom:1;}
#sty-gall ul:after {display:block; clear:both; content:'';}
#sty-gall li {position:relative; float:left; margin:-1px -1px 0 0px; width:187px; height:278px; border:1px solid #eee; background-color:#fff;}
#sty-gall li.bg_1 {border-left:1px solid #ccc; width:186px;}
#sty-gall li.bg_2 {border-right:1px solid #ccc; width:186px;}
#sty-gall li:hover {position:relative; background-color:#efefef; border:1px solid #999; z-index:100;}
#sty-gall li.on {border:1px solid #7f7f7f; z-index:15;}
#sty-gall li.bg {/*background:#fafafa;*/}
#sty-gall li.over {background-color:#fff;}
#sty-gall li.nocontents {width:749px;}
#sty-gall li.nocontents p {margin-top:131px; height:15px; line-height:15px; text-align:center; font-size:12px; font-family:'굴림',gulim; color:#999;}
#sty-gall li .info {position:relative; margin-top:10px; padding:0 10px; height:21px;}
#sty-gall li .article_icon {float:left; margin-right:4px; width:21px; height:21px;}
#sty-gall li .in_ctgr {float:left; margin-top:3px; height:15px; line-height:15px; letter-spacing:-1px; font-size:11px; font-family:'돋움',dotum; color:#acacac;}
#sty-gall li .hit_no,
#sty-gall li .good_no {float:right; margin-top:5px; height:11px; line-height:11px; font-size:9px; font-family:tahoma; color:#bbb;}
#sty-gall li .good_no em {float:left;}
#sty-gall li .good_no em.ico {float:left; margin:0 4px 0 10px; width:11px; height:10px; background:url('/img/skin/sprites_new2.gif') no-repeat -130px -90px;}
#sty-gall li .thumb {position:relative; display:block; margin:10px 0 0 14px; width:155px; height:159px;}
#sty-gall li .thumb img {display:block; width:159px; height:159px;}

#sty-gall li .thumb .frame {position:absolute; left:0; top:0; width:157px; height:157px; border:1px solid #d8d8d8; /*border:1px solid #000; opacity:0.1;*/}

#sty-gall li .tit_area {height:32px; margin-top:8px; padding:0 13px 0 13px; overflow:hidden;}
#sty-gall li .tit_area .co_cnt {display:inline-block; margin:0 0 0 4px; height:13px; line-height:13px; color:#ff6c00; font-family:tahoma; font-size:11px; font-weight:bold; vertical-align:top;}
#sty-gall li .tit_area .ico_new {display:inline-block; margin:2px 0 0 4px; width:12px; height:11px; text-indent:-9000px; background:url('/img/skin/sprites_new2.gif') no-repeat -90px -90px; vertical-align:top;}
#sty-gall li .tit_area .in_tit,
#sty-gall li .tit_area .current {line-height:16px; letter-spacing:-1px; font-size:12px; font-family:'굴림',gulim;}
#sty-gall li .tit_area .current {color:#f05f10;}
#sty-gall li .tit_area .in_tit {float:left; height:32px;}
#sty-gall li .article_info {margin-top:7px; padding:0 14px; height:21px;}
#sty-gall li .article_info img {float:left; margin-right:4px;}
#sty-gall li .article_info .uname {float:left; margin-top:3px; height:15px; line-height:15px; font-size:12px; font-family:'굴림',gulim; color:#333;}
#sty-gall li .article_info .uname span {color:#333;}
#sty-gall li .article_info .ujail {text-decoration:line-through; color:#ff0000;}
#sty-gall li .article_info .date {float:right; margin-top:5px; height:11px; line-height:11px; font-size:9px; font-family:tahoma; color:#bbb;}

.item_notice td {background-color:#efefef !important;}

#li-btm {margin-top:16px; height:25px;}
#li-btm .fleft {float:left;}
#li-btm .fright {float:right;}
#li-btm .input {float:left; margin-left:1px; padding:4px; height:14px; line-height:14px; font-size:11px; font-family:dotum, '돋움'; color:#666;}
#li-btm .input {border:1px solid #b5b5b5; border-color:#b5b5b5 #ddd #ddd #b5b5b5;}
#li-btm .input:focus {border-color:#ff4200;}
#li-btm .btn {float:left; height:24px; text-indent:-9000px; overflow:hidden; background:url('/img/skin/btn_list.gif') no-repeat 0 0;}
#li-btm .btn_submit {margin-left:1px; width:37px; background-position:0 0;}
#li-btm .btn_adm {margin-left:3px; width:85px; background:url('/img/skin/sprites_new2.gif') no-repeat -310px -90px;}
#li-btm .btn_write {width:68px; height:25px; margin-left:10px; background:url('/img/skin/sprites_new2.gif') no-repeat -160px -60px;}

</style>


<div class="bbsList_v2">
	<div class="top">	
		
		<div class="list_sty_btn_area">	
			<div class="list_count">
				<span>전체글<strong><?=number_format($total_count)?></strong>개</span>
			</div>
		</div>
			</div>

<div id="sty-list">
</div>

	<form name="fboardlist" action="#boardlist" method="post">
	<input type='hidden' name='bo_table'	value='<?=$bo_table?>' />
	<input type='hidden' name='sfl'		value='<?=$sfl?>' />
	<input type='hidden' name='stx'		value='<?=$stx?>' />
	<input type='hidden' name='spt'		value='<?=$spt?>' />
	<input type='hidden' name='page'	value='<?=$page?>' />
	<input type='hidden' name='sw'		value='' />

<div id="sty-gall">
	<ul>
	<?
		for($i=0; $i<$list_count; $i++) {

			$list[$i][jy_subj] = "";
			$list[$i][icon_pack] = "";
			// 공지사항
			if ($list[$i][is_notice]) {

				$list[$i][jy_subj] .= "<a class='in_tit' href='{$list[$i][href]}'><strong>{$list[$i][subject]}</strong></a>";
				//$list[$i][name] = "<strong>{$list[$i][name]}</strong>";

				//if($jy['article_type'])
				//	$list[$i][article_type] = "<span class='ico_pack2 ico_notice2'>공지</span>";

				$list[$i][num] = "<em class='ico_notice'>NOTICE</em>";
				$list[$i][good] = "-";
				$list[$i][nogood] = "-";
				$list[$i][hit] = "-";

			} else { 

				$list[$i][num] = $list[$i][num];

				// 코멘트
				if($list[$i][wr_comment]) $list[$i][comment] = "<span class='co_cnt'>[".$list[$i][wr_comment]."]</span>";

				if($is_category && $list[$i][ca_name]) $list[$i][jy_subj] .= "<a class='in_ctgr' href='".$list[$i][ca_name_href]."'>[{$list[$i][ca_name]}]</a>";

				// 선택된글
				if($wr_id == $list[$i][wr_id]) $list[$i][jy_subj] .= "{$list[$i][subject]}";
				else $list[$i][jy_subj] .= "<a class='in_tit' href='{$list[$i][href]}'>{$list[$i][subject]}</a>";

				// 조회수
				if($list[$i][icon_hot]) $list[$i][hit] .= "<em>{$list[$i][wr_hit]}</em>";
				else $list[$i][hit] .= "{$list[$i][wr_hit]}";

				// 추천
				if($list[$i]['wr_good'] >= $jy['bo_good']) $list[$i][good] .= "<em>{$list[$i][wr_good]}</em>";
				else $list[$i][good] .= "{$list[$i][wr_good]}";

				// 비추천
				if($list[$i]['wr_nogood'] >= $jy['bo_nogood']) $list[$i][nogood] .= "<em>{$list[$i][wr_nogood]}</em>";
				else $list[$i][nogood] .= "{$list[$i][wr_nogood]}";
			}

			$list[$i][jy_subj] .= "";

			if($jy['article_type']) {
				if($list[$i][icon_secret]) $list[$i][article_type] = "<span class='ico_pack2 ico_secret2'>비밀글</span>";
				else if($list[$i][icon_file]) $list[$i][article_type] = "<span class='ico_pack2 ico_file2'>파일첨부</span>";
				else $list[$i][article_type] = "<span class='ico_pack2 ico_txt2'>텍스트</span>";
			} else {
				if($list[$i][icon_secret]) $list[$i][icon_pack] .= "<span class='ico_pack ico_secret'>비밀글</span>";
				if($list[$i][icon_file]) $list[$i][icon_pack] .= "<span class='ico_pack ico_file'>파일첨부</span>";
			}
			if($list[$i][icon_link]) $list[$i][icon_pack] .= "<span class='ico_pack ico_link'>링크</span>";
			if($list[$i][icon_new]) $list[$i][icon_pack] .= "<em class='ico_new'>새글</em>";
			if($list[$i][wr_reply]) $list[$i][icon_reply] = "<span class='ico_pack2 ico_reply re".strlen($list[$i][wr_reply])."'>답변</span>";


			// 썸네일 처리
			// 고정시킨 썸네일이 출력
			if ($list[$i][file][0][file])
			{
				$file = $list[$i][file][0][path] .'/'. $list[$i][file][0][file];
				$img = "<a class='thumb' href=\"{$list[$i][href]}\"><img src='" .$file. "' width=$thum_width height=$thum_height></a>";
			}
			else
			{
				$img = "<a class='thumb' href=\"{$list[$i][href]}\"><img src='$g4_path/img/skin/noimg_159x159.gif' width=$thum_width height=$thum_height></a>";
			}
?>
				<li class="">
			<div class="info">
			<? if($is_checkbox) { ?><td class="td_check"><input type="checkbox" name="chk_wr_id[]" value="<?=$list[$i][wr_id]?>"></td><? } ?>
								<? if ($is_good) { ?><em class="good_no"><em class="ico"></em><em><?=$list[$i][good]?></em></em><? } ?>
				<em class="hit_no">hit <em><?=$list[$i][hit]?></em></em>
			</div>
			<?=$img?>
				<em class="frame"></em>
			</a>
			<p class='tit_area'><?=$list[$i][jy_subj]?><?=$list[$i][comment]?></p>			<div class="article_info">
				<?=level_icon($list[$i][mb_id])?><a class='uname' href="javascript:;" onclick="showSideView(this, '<?=$list[$i][mb_id]?>', '<?=$list[$i][wr_name]?>');" title="[<?=$list[$i][mb_id]?>]<?=$list[$i][wr_name]?>"><span><?=$list[$i][wr_name]?></span></a>				<span class="date"><?=$list[$i][datetime]?></span>
			</div>
		</li>
<? } ?>

			</ul>
	<div class="topline"></div>
	<!--
	<div class="rightline"></div>
	-->
	<div class="bottomline"></div>
	<div class="leftline"></div>
</div>
	</form>
	<? if($total_page > 1) { ?><div class="paging_area"><?=$write_pages?></div><? } ?>
	<div class="list_btm">
		<div class="fleft">
		<a class="btn_search" href="javascript:layer_search();" title="관리자">관리자</a>
		<div id="se_sector" class="fleft" style="display:none;">
		<form name="fsearch" method="get">
		<input type="hidden" name="bo_table" value="<?=$bo_table?>">
		<input type="hidden" name="sca" value="<?=$sca?>">
		<input type="hidden" name="sfl" value="<?=$sfl?$sfl:"wr_subject"?>">
		<input type="hidden" name="sop" value="<?=$sop?$sop:"and"?>">
			<div id="se-sfl" class="jyselect se_sfl">
				<a class="selected selected_sfl" href="javascript:;" title="검색항목">제목</a>
				<ul>
					<li><a href="javascript:;" onclick="click_select(this, 'wr_subject');" title="제목">제목</a></li>
					<li><a href="javascript:;" onclick="click_select(this, 'wr_content');" title="내용">내용</a></li>
					<li><a href="javascript:;" onclick="click_select(this, 'wr_subject||wr_content');" title="제목+내용">제목+내용</a></li>
					<li><a href="javascript:;" onclick="click_select(this, 'mb_id,1');" title="회원아이디">회원아이디</a></li>
					<li><a href="javascript:;" onclick="click_select(this, 'mb_id,0');" title="회원아이디(코)">회원아이디(코)</a></li>
					<li><a href="javascript:;" onclick="click_select(this, 'wr_name,1');" title="글쓴이">글쓴이</a></li>
					<li><a href="javascript:;" onclick="click_select(this, 'wr_name,0');" title="글쓴이(코)">글쓴이(코)</a></li>
				</ul>
			</div>
			<div class="input_stx_wrap">
			<input id="stx" name="stx" class="inputbox" maxlength="15" itemname="검색어" required value='<?=stripslashes($stx)?>' style="width:104px;">
			<label for="stx">검색어입력</label>
			</div>
			<div id="se-sop" class="jyselect se_sop">
				<a class="selected selected_sop" href="javascript:;" title="검색조건">AND</a>
				<ul>
					<li><a href="javascript:;" onclick="click_select(this, 'and');" title="AND">AND</a></li>
					<li><a href="javascript:;" onclick="click_select(this, 'or');" title="OR">OR</a></li>
				</ul>
			</div>
			<input type="image" src="<?=$board_skin_path?>/img/btn_search.gif" class="btn_submit" alt="검색" />
		</form>
		</div>
		</div>
		<div class="fright">
			<? if ($is_checkbox) { ?>
			<div id="se-func" class="jyselect se_func">
				<a class="selected selected_func" href="javascript:;" title="선택명령">선택명령</a>
				<ul>
					<li><a href="javascript:select_copy('copy');" title="선택복사">선택복사</a></li>
					<li><a href="javascript:select_copy('move');" title="선택이동">선택이동</a></li>
					<li><a href="javascript:select_delete();" title="선택삭제">선택삭제</a></li>
				</ul>
			</div>
			<? } ?>
			<? if($admin_href) { ?>
			<a class="btn_adm" href="<?=$admin_href?>" title="관리자">관리자</a>
			<? } ?>
			<a class="btn_write" href="<?=$write_href?>" title="글쓰기">글쓰기</a>
		</div>
	</div>
</div>
<script type="text/javascript">
// 검색 레이어
var layer_search = function() {
	if(jQuery("#se_sector").is(":hidden")) {
		jQuery("#se_sector").show();
		jQuery("#stx").focus();
	} else {
		jQuery("#se_sector").hide();
	}
}

/* 안내 열기,닫기 */
var layer_point = function() {

	$handle = jQuery("#btn_anno_point");
	$target = jQuery("#point_layer");

	if($handle.hasClass("on")) {
		$handle.removeClass("on");
		$target.hide();
		jQuery("#point_layer_arrow").remove();
	} else {
		var $offset = $handle.offset();
		var $offset = $handle.offset();
		var $top = $offset.top+29;
		var $left = $offset.left+16;
		jQuery("#fixed-top-layer").append("<div id='point_layer_arrow' class='ico_arrow' style='top:"+$top+"px; left:"+$left+"px'><span class='ico_up_dgray'></span></div>");
		$handle.addClass("on");
		$target.show();
		
	}
}

var click_select = function(el, value) {
	event_select(jQuery(el), value);
}

var load_select = function(sfl) {
	$this = jQuery("a[onclick*="+sfl+"]:first");
	event_select($this, sfl);
};

var event_select = function($this, value) {

	$li = $this.parent();
	$a = $li.parent().prev();
	$input = jQuery("input[name="+$a.parent().attr("id").split("-")[1]+"]");

	$a.html($this.html());
	$input.val(value);
	$li.parent().children(".on").removeClass("on");
	$li.addClass("on");
}

<?
if($sfl) echo "load_select('{$sfl}');";
if($sop) echo "load_select('{$sop}');";
?>

jQuery(function() {

	// 목록에서 내용 사용
	jQuery("body").prepend("<div id='fixed-top-layer' class='fixed_top_layer'><div class='box_content_view'></div></div>");

	// tr hover 효과
	jQuery(".list_body2 tbody").hover(
		function() {
			var $tbody = jQuery(this);
			$tbody.addClass("over");

			// 목록에서 내용 사용
			<? if($board['bo_use_list_content']) { ?>
			var $td = $tr.children(".item_subject");
			var $index = $tr.index();
			var $subject = $td.children(".subject_area").children("a");
			var $offset = $td.offset();

			$subject.hover(
				function() {
					jQuery("#fixed-top-layer").children(".box_content_view").css({display:"block", top:$offset.top+31, left:$offset.left+0}).html(preview[$index]);
				},
				function() {
					jQuery("#fixed-top-layer").children(".box_content_view").css({display:"none"});
				}
			);
			<? } ?>
		},
		function() {
			var $tbody = jQuery(this);
			$tbody.removeClass("over");
		}
	);

	// 박스 활성화
	jQuery('.inputbox').focus(function() {
		jQuery(this).addClass('focusbox');
		jQuery("label[for="+jQuery(this).attr("id")+"]").hide();
	}).blur(function() {
		jQuery(this).removeClass('focusbox');
		if(!jQuery.trim(jQuery(this).val())) jQuery("label[for="+jQuery(this).attr("id")+"]").show();
		else jQuery("label[for="+jQuery(this).attr("id")+"]").hide();
	});

	// 검색창 blur
	jQuery("#stx").blur()

	// 셀렉트박스
	selectbox("#se-ctgr");
	selectbox("#se-func");
	selectbox("#se-sfl");
	selectbox("#se-sop");
});
</script>
<? if ($is_checkbox) { ?>
<script type="text/javascript" language="javascript">
function all_checked(sw) {
	var f = document.fboardlist;

	//<![CDATA[
	for (var i=0; i<f.length; i++) {
		if (f.elements[i].name == "chk_wr_id[]")
		f.elements[i].checked = sw;
	}
	//]]>
}

function check_confirm(str)
{
	var f = document.fboardlist;
	var chk_count = 0;

	//<![CDATA[
	for (var i=0; i<f.length; i++) {
		if (f.elements[i].name == "chk_wr_id[]" && f.elements[i].checked)
		chk_count++;
	}
	//]]>

	if (!chk_count) {
		alert(str + "할 게시물을 하나 이상 선택하세요.");
		return false;
	}

	return true;
}

// 선택한 게시물 삭제
function select_delete()
{
	var f = document.fboardlist;

	str = "삭제";
	if (!check_confirm(str))
	return;

	if (!confirm("선택한 게시물을 정말 "+str+" 하시겠습니까?\n\n한번 "+str+"한 자료는 복구할 수 없습니다"))
	return;

	f.action = "./delete_all.php";
	f.submit();
}

// 선택한 게시물 복사 및 이동
function select_copy(sw)
{
	var f = document.fboardlist;

	if (sw == "copy") str = "복사";
	else str = "이동";
 
	if (!check_confirm(str))
	return;

	var sub_win = window.open("", "move", "left=50, top=50, width=500, height=550, scrollbars=1");

	f.sw.value = sw;
	f.target = "move";
	f.action = "./move.php";
	f.submit();
}
</script>
<? } ?>