<style type="text/css" media="all">
/* Box start */
.box .hd,
.box .rc-tp, .box .rc-tp span,
.box .rc-bt, .box .rc-bt span {background: url('http://poshopzil.com/bbs/member_imgBox/1/box_bg.png') no-repeat; overflow:hidden;}
.box .rc-tp, .box .rc-bt {position: relative; /* raise z-index, hover .hd */ display: block; height: 4px;}
.box .rc-tp span, .box .rc-bt span {float: right; width: 4px; height: 4px;}
.box .rc-tp {margin-bottom: -4px; background-position: -3px 0;}
.box .rc-bt {margin-top: -4px;  background-position: -3px -3px;}
.box .rc-bt span {background-position: 0 -3px;}
.box {position: relative; /* for .act list */ margin-bottom: 10px; /* default gutter */}
.box .hd {
    height: 21px;
    border: 1px solid #cccccc;
    border-bottom: none;
    background-color: #fbfbfb;
    background-position: 0 -7px;
    background-repeat: repeat-x;
}
.box .hd h3 {
    font-size: 12px;
    color: #404040;
 line-height: 21px;
 text-indent:5px;
 margin:0;
 padding:0;
 overflow:hidden;
}
.box .bd {padding: 10px; border: 1px solid #cccccc; background-color: #f7f7f7;}
 .box .bd p {padding:0; margin:0; font-size:12px; line-height:160%;}

.box .ft .act {
 list-style-type:none;
    position: absolute;
    top: 1px;
    right: 1px;
    line-height: 20px;
 margin:0;
 padding:0;
}
/* Box end */

a.more:link,a.more:visited,a.more:active {background:url('http://poshopzil.com/bbs/member_imgBox/1/more_bg.png') 100% 1px no-repeat; font-family:"돋움"; font-size:11px; color:#777; text-decoration:none; padding-right:12px; letter-spacing:-1px;}
a.more:hover {color:#000; text-decoration:underline;}

/* skin-orange */
.skin-orange .box .rc-tp { background-position: -3px -60px; }
.skin-orange .box .rc-tp span { background-position: 0 -60px; }
.skin-orange .box .rc-bt { background-position: -3px -63px; }
.skin-orange .box .rc-bt span { background-position: 0 -63px; }
.skin-orange .box .hd { border-color: #ffcc80; background-color: #fbfbfb; background-position: 0 -67px; }
.skin-orange .box-h14 .hd { background-position: 0 -88px; }
.skin-orange .box .hd h3,
.skin-orange .box .ft .act li a { color: #bf4c00; background-position:100% -19px;}
.skin-orange .box .bd { border-color: #ffcc80; background-color: #fffaf2; }

/* skin-blue */
.skin-blue .box .rc-tp { background-position: -3px -120px; }
.skin-blue .box .rc-tp span { background-position: 0 -120px; }
.skin-blue .box .rc-bt { background-position: -3px -123px; }
.skin-blue .box .rc-bt span { background-position: 0 -123px; }
.skin-blue .box .hd { border-color: #80ccff; background-color: #bde5ff; background-position: 0 -127px; }
.skin-blue .box-h14 .hd { background-position: 0 -148px; }
.skin-blue .box .hd h3,
.skin-blue .box .ft .act li a { color: #004d80; background-position:100% -39px;}
.skin-blue .box .bd { border-color: #80ccff; background-color: #f2faff; }

/* skin-naked */
.skin-naked .box .rc-tp,
.skin-naked .box .rc-tp span,
.skin-naked .box .rc-bt,
.skin-naked .box .rc-bt span,
.skin-naked .box .hd,
.skin-naked .box-h14 .hd,
.skin-naked .box .bd,
.skin-naked .box .hd { background: none; border: none; }
.skin-naked .box .hd h3 { color: #404040; }
</style>

<div style="width:150px; margin:20px;">
 <div class="box">
  <span class="rc-tp"><span></span></span>
  <div class="hd">
   <h3>기본 그레이</h3>
  </div>
  <div class="bd">
   <p>내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, </p>
  </div>
  <div class="ft">
   <ul class="act">
    <li><a class="more" href="#">더 보기</a></li>
   </ul>
  </div>
  <span class="rc-bt"><span></span></span>
 </div>
</div>

<div class="skin-orange" style="width:500px; margin:20px;">
 <div class="box">
  <span class="rc-tp"><span></span></span>
  <div class="hd">
   <h3>오렌지 스타일</h3>
  </div>
  <div class="bd">
   <p>내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, </p>
  </div>
  <div class="ft">
   <ul class="act">
    <li><a class="more" href="#">더 보기</a></li>
   </ul>
  </div>
  <span class="rc-bt"><span></span></span>
 </div>
</div>

<div class="skin-blue" style="width:500px; margin:20px;">
 <div class="box">
  <span class="rc-tp"><span></span></span>
  <div class="hd">
   <h3>블루 스카이</h3>
  </div>
  <div class="bd">
   <p>내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, </p>
  </div>
  <div class="ft">
   <ul class="act">
    <li><a class="more" href="#">더 보기</a></li>
   </ul>
  </div>
  <span class="rc-bt"><span></span></span>
 </div>
</div>

<div class="skin-naked" style="width:500px; margin:20px;">
 <div class="box">
  <span class="rc-tp"><span></span></span>
  <div class="hd">
   <h3>배경 없이</h3>
  </div>
  <div class="bd">
   <p>내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, </p>
  </div>
  <div class="ft">
   <ul class="act">
    <li><a class="more" href="#">더 보기</a></li>
   </ul>
  </div>
  <span class="rc-bt"><span></span></span>
 </div>
</div>

<div style="width:3000px; margin:20px;">
 <div class="box">
  <span class="rc-tp"><span></span></span>
  <div class="hd">
   <h3>가로 3000px로 가로 3000px로 가로 3000px로 가로 3000px로 가로 3000px로 가로 3000px로 가로 3000px로 가로 3000px로</h3>
  </div>
  <div class="bd">
   <p>내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, 내부내용, </p>
  </div>
  <div class="ft">
   <ul class="act">
    <li><a class="more" href="#">더 보기</a></li>
   </ul>
  </div>
  <span class="rc-bt"><span></span></span>
 </div>
</div>