<html>
<head>
<title>sub_content02</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language=javascript>
<!--
var downLayerId;
var dropDegree = 30; //스크롤 속도
var doDirect;
var DirectTerm = 9000; //스크롤 지연시간
var curDropIdx = 0;
     
function DirectDown()
{
        clearInterval(doDirect);
        clearInterval(downLayerId);
     
        for(i = curDropIdx ;i < document.all["DropHit"].length + curDropIdx;i++){
                document.all["DropHit"][i%document.all["DropHit"].length].style.posLeft = document.all["DropHit"][i%document.all["DropHit"].length].style.posWidth * (-1*((i-curDropIdx)%document.all["DropHit"].length));
        }
        var temp = 'setInterval("DownLayer()",20)';
        downLayerId = eval(temp);
        direction = "down";
}
function DownLayer()
{
        if(document.all["DropHit"][curDropIdx].style.posLeft < document.all["DropHit"][curDropIdx].style.posWidth){
                for(j = curDropIdx ;j < document.all["DropHit"].length + curDropIdx;j++){
                        document.all["DropHit"][j%document.all["DropHit"].length].style.posLeft += dropDegree;
                }
        }else{
                clearInterval(downLayerId);
                for(j = curDropIdx ;j < document.all["DropHit"].length + curDropIdx;j++){
                        document.all["DropHit"][j%document.all["DropHit"].length].style.posLeft = document.all["DropHit"][j%document.all["DropHit"].length].style.posWidth *((-1*((j-curDropIdx)%document.all["DropHit"].length))+1);
                }
                curDropIdx = (curDropIdx + 1) ;
                curDropIdx = curDropIdx > document.all["DropHit"].length-1 ? curDropIdx%document.all["DropHit"].length:curDropIdx;
                var temp = 'setInterval("DirectDown()",DirectTerm)';
                doDirect = eval(temp);
        }
}
function DirectUp()
{
        clearInterval(doDirect);
        clearInterval(downLayerId);
        var tempIdx = 0;
        for(i = 0;i<document.all["DropHit"].length;i++){
                tempIdx = (document.all["DropHit"].length + curDropIdx - i) %document.all["DropHit"].length;
                document.all["DropHit"][tempIdx].style.posLeft = i*document.all["DropHit"][tempIdx].style.posWidth;
        }
        var temp = 'setInterval("UpLayer()",20)';
        downLayerId = eval(temp);
        direction = "up";
}
function UpLayer()
{
        var tempIdx = 0;
        if(document.all["DropHit"][curDropIdx].style.posLeft < document.all["DropHit"][curDropIdx].style.posWidth && document.all["DropHit"][curDropIdx].style.posLeft > document.all["DropHit"][curDropIdx].style.posWidth * (-1)){
                for(j = 0 ;j < document.all["DropHit"].length;j++){
                        tempIdx = (document.all["DropHit"].length + curDropIdx - j) %document.all["DropHit"].length;
                        document.all["DropHit"][tempIdx].style.posLeft -= dropDegree;
                }
        }else{
                clearInterval(downLayerId);
                for(j = 0;j<document.all["DropHit"].length;j++){
                        tempIdx = (document.all["DropHit"].length + curDropIdx - j) % document.all["DropHit"].length;
                        document.all["DropHit"][tempIdx].style.posLeft = (j-1)*(document.all["DropHit"][tempIdx].style.posWidth);
                }
                curDropIdx = (curDropIdx - 1) ;
                curDropIdx = curDropIdx < 0 ? document.all["DropHit"].length-1:curDropIdx;
                var temp = 'setInterval("DirectUp()",DirectTerm)';
                doDirect = eval(temp);
        }
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="634" height="300" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td width="605" height="300" colspan="3">
          <div style="left:0px; overflow:hidden; width:605px; position:relative; top:0px; height:300px">
        <div id=DropHit style="width:605px; height:300px; position:absolute; left:0px; top:0px; z-index:1; visibility:visible;">
          <table border=0 cellpadding=0 cellspacing=0 width=375>
            <tr>
              <td>이미지1</td>
            </tr>
          </table>
        </div>
        <div id=DropHit style="width:605px; height:300px; position:absolute; left:605px; top:0px; z-index:1; visibility:visible;">
          <table border=0 cellpadding=0 cellspacing=0 width=375>
            <tr>
              <td>이미지2</td>
            </tr>
          </table>
        </div>
        <div id=DropHit style="width:605px; height:300px; position:absolute; left:1210px; top:0px; z-index:1; visibility:visible;">
          <table border=0 cellpadding=0 cellspacing=0 width=375>
            <tr>
              <td>이미지3</td>
            </tr>
          </table>
        </div>
        <div id=DropHit style="width:605px; height:300px; position:absolute; left:1815px; top:0px; z-index:1; visibility:visible;">
          <table border=0 cellpadding=0 cellspacing=0 width=375>
            <tr>
              <td>이미지4</td>
            </tr>
          </table>
        </div>
        <div id=DropHit style="width:605px; height:300px; position:absolute; left:2420px; top:0px; z-index:1; visibility:visible;">
          <table border=0 cellpadding=0 cellspacing=0 width=375>
            <tr>
              <td>이미지5</td>
            </tr>
          </table>
        </div>
        <script language=javascript>DirectDown();</script>
      </div>
   </td>
 </tr>
 <tr>
    <td> <a href="javascript:DirectUp()">◀</a></td>
 <td>---------</td>
 <td> <a href="javascript:DirectDown()">▶</a></td>
 </tr>

</table>
<!-- End ImageReady Slices -->
</body>
</html>