*{margin: 0; padding: 0;}
#brandVisual{
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden; 
	height: 500px;
	background: #ccc;
}
#brandVisual ul{
	position: relative;
	float: left;
	width: 100%;
	height: 500px;
}
#brandVisual ul li{
	float: left;
	position: absolute;
	width: 100%;
	height: 500px;
}
#brandVisual ul li a{display: block; text-indent: -9999px;  /* 텍스트를 좌측 -9999로 밀어넣어서 안보이게 한다. */}
#brandVisual .visual_0{left: 0; background: url(../images/0.png) 50% 0 no-repeat;}
#brandVisual .visual_1{left: 100%; background: url(../images/1.png) 50% 0 no-repeat; /* left 100% 밀어 놓았다 */}
#brandVisual .visual_2{left: 200%; background: url(../images/2.png) 50% 0 no-repeat; /* left 200% 밀어 놓았다 */}

.btnImg{position: relative; top: -250px; /* - 값을 줘서 화살표를 위로 올려 놓는다. */ width: 100%;}
.btnImg .prev{position: absolute; left: 100px;}
.btnImg .next{position: absolute; right: 100px;}

#buttonList:after{content:""; display: block; clear: both;}
#buttonList li{background: url(../images/btnVisual.png) 0 -16px no-repeat;
/* background: -16 세로 값을 줘서 아래링을 위로 올려 놓았다. */ width: 14px; height: 15px; float: left; position: relative; top: -135px; left: 50%; overflow: hidden; margin: 0 5px; cursor: pointer;}
#buttonList li a{display: block; text-indent: -9999px; /* 텍스트를 좌측 -9999로 밀어넣어서 안보이게 한다. */}
#buttonList li.on{background-position: 0 0; /* background: 0 0 값을 줘서 원래 링이 보이게 해놨다. */}