*{
	margin: 0;
	padding: 0
	border: 0;
}

#warp{
	width: 100%;
	height: 2000px;
}

.animate{
	width: 500px;
	height: 700px;
	margin: 200px auto;
	position: relative;
	background: #ddd;
	overflow: hidden;
	/* 박스 선의 작업을 보려면 위 overflow:hidden; 지우거나 숨기면 볼 수 있다. */ 
}

.top_line{
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 5px;
	background: #000;
	/*상단 우측에서 좌측으로 들어오는 라인 */
}

.bottom_line{
	position: absolute;
	bottom: 0;
	left: 100%;
	width: 100%;
	height: 5px;
	background: #000;
	/*하단 좌측에서 우측으로 들어오는 라인 */
}

.right_line{
	position: absolute;
	top: -100%;
	right: 0;
	width: 5px;
	height: 100%;
	background: #000;
	/*상단 우측에서 아래로 내려오게 */
}

.left_line{
	position: absolute;
	top: 100%;
	left: 0;
	width: 5px;
	height: 100%;
	background: #000;
	/*좌측 하단에서 위로 올로가게 */
}