*{
	margin: 0;
	padding: 0;
}

cf:after{
	content:"";
	display: block;
	clear: both;
}

.fl{
	float:left;
}

.box2{
	width: 100%;
	height: 450px;
}

.banner01{
	width: 30%;
	height: 100%; /* .box2 height 값을 상속받아서 450px 이다. */
	background: url(../img/bn-tx4.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
}

.banner02{
	width: 70%;
	height: 100%; /* .box2 height 값을 상속받아서 450px 이다. */
	background: url(../img/bn-tx7.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
}

.hover_x1{
	width: 100%;
	height: 50%; /* 닫히는 값을 height 조절을 한다 */
	position: absolute;
	top: 50%; /* top에서 아래로 50% 내려간 곳에 위치해라 */
	left: 0; /* left 값은 0으로 고정한다 */
	background: #ececfb;
	/* background: url(../img/1.jpg) no-repeat; */
	/* background: #ececfb; 지우고 위에 css를 넣고 script에서 값을 수정하면 이미지 무빙이 선언 된다. */
}

.hover_x2{
	width: 100%;
	height: 50%; /* 닫히는 값을 height 조절을 한다 */
	position: absolute;
	bottom: 50%; /* bottom에서 위로 50% 올라간 곳에 위치해라 */
	left: 0; /* left 값은 0으로 고정한다 */
	background: #cacad9;
	/* background: url(../img/1.jpg) no-repeat; */
	/* background: #cacad9; 지우고 위에 css를 넣고 script에서 값을 수정하면 이미지 무빙이 선언 된다. */
}

.hover_y1{
	width: 500%; /* 닫히는 값을 width 조절을 한다 */
	height: 100%; 
	position: absolute;
	top: 0; /* top 값은 0으로 고정한다 */
	left: 50%; /* left 위로 50% 움직인 곳에 위치해라 */
	background: #a8a8b7;
	/* background: url(../img/1.jpg) no-repeat; */
	/* background: #a8a8b7; 지우고 위에 css를 넣고 script에서 값을 수정하면 이미지 무빙이 선언 된다. */
}

.hover_y2{
	width: 500%; /* 닫히는 값을 width 조절을 한다 */
	height: 100%; 
	position: absolute;
	top: 0; /* top 값은 0으로 고정한다 */
	right: 50%; /* right 위로 50% 움직인 곳에 위치해라 */
	background: #868695;
	/* background: url(../img/1.jpg) no-repeat; */
	/* background: #868695; 지우고 위에 css를 넣고 script에서 값을 수정하면 이미지 무빙이 선언 된다. */
}