@CHARSET "UTF-8";

/* 
	img 추가시 label 링크가 되지 않음 span으로 대체하여 left를 여백을 추가한다
	
	mouse in, out 처리	
	<div class="btn btn_checkout" 
	onmouseover="this.style.backgroundColor='#f2e4f3'"
	onmouseout="this.style.backgroundColor='#002c85'">

ex1 :	
<div class="btn24 btn_addtocart" onmouseover="this.style.backgroundColor='#f2e4f3'" onmouseout="this.style.backgroundColor='#002c85'" >
	<a href="#" ><img src="ico_pen.png">
	<span class="btn24_link">Add Cart span</span>
	</a>
	<span class="btn24_right"></span>
</div>
<div class="clear"></div>

ex2 :
<div class="btn24 btn_addtocart" onmouseover="this.style.backgroundColor='#f2e4f3'" onmouseout="this.style.backgroundColor='#002c85'" >
	<a href="#" ><img src="ico_pen.png">
	<span class="btn24_link">Add Cart span</span>
	</a>
	<span class="btn24_right"></span>
</div>
<div class="clear"></div>
	
*/
.clear {	clear: both;}

 /* ie 6 png fix 2 */

 

/* button height 40 width auto */
.btn40 { position:relative; float: left; background: url(../images/btn/btn40_left.png) no-repeat; padding: 0 0 0 10px; margin: 5px 0; height: 40px; widht:auto;}
.btn40 a{ position:relative; float: left; height: 40px; background: url(../images/btn/btn40_stretch.png) repeat-x left top;
		  line-height: 40px; padding: 0 10px; color: #fff; font-size: 1.8em;  text-decoration: none; }
.btn40 img, .btn a img{position:relative; float: left; padding-right:10; margin-top: 8px; margin-left: -8px; border:none; width:25x;height:25px;}
.btn40_link { position:relative; float: left; height:25px; margin-left: 5px; font-weight:bold; cursor:hand;} 
.btn40_right { background: url(../images/btn/btn40_right.png) no-repeat; float: left; width: 10px; height: 40px; }


.ico40_check {position:relative; float: left; background: url(../images/ico/ico40_check.png) no-repeat;
 padding-right:10; margin-top: 10px; margin-left: -8px; border:none; width:20px;height:20px;}

.ico40_cancel {position:relative; float: left; background: url(../images/ico/ico40_cancel.png) repeat-x left top;
 padding-right:10; margin-top: 10px; margin-left: -8px; border:none; width:20px;height:20px;}

.ico40_home {position:relative; float: left; background: url(../images/ico/ico40_home.png) repeat-x left top;
 padding-right:10; margin-top: 10px; margin-left: -8px; border:none; width:20px;height:20px;}


/* button height 24 width auto */
.btn24 { position:relative; float: left; background: url(../images/btn/btn24_left.png) no-repeat; padding: 0 0 0 6px; margin: 5px 0; height: 24px;}

.btn24 a{ position:relative; float: left; height: 24px; background: url(../images/btn/btn24_stretch.png) repeat-x left top;
		  line-height: 24px; padding-top:0px; padding-bottom:0px; padding-left:10px; padding-right:0px; color: #fff; font-size: 1em; text-decoration: none; }
			
.btn24 img, .btn24 a img{position:relative; float: left; padding-right:10; margin-top: 5px; margin-left: -8px; border:none; width:16x;height:16px;}

.btn24_link { position:relative; float: left; display:inline; line-height:22px; margin-left: 5px;
margin-top:2px; /* IE8 FF */
*margin-top:2px; /* IE 6 */
  padding-right:5px; cursor:hand;} /* img  추가시 label 링크가 되지 않음 span으로 대체하여 left를 여백을 추가*/
.btn24_right { background: url(../images/btn/btn24_right.png) no-repeat; float: left;  width: 6px; height: 24px; }

.ico24_check {position:relative; float: left; background: url(../images/ico/ico24_check.png) no-repeat;
 padding-right:5; margin-top:7px; margin-left: -8px; border:none; width:10px;height:10px;}



/* button height 30 width auto */
.btn30 { position:relative; float: left; background: url(../images/btn/btn30_left.png) no-repeat; padding: 0 0 0 8px; margin: 5px 0; height: 30px;}

.btn30 a{ position:relative; float: left; height: 30px; background: url(../images/btn/btn30_stretch.png) repeat-x left top;
		  line-height: 30px; padding-top:0px; padding-bottom:0px; padding-left:10px; padding-right:0px; color: #fff; font-size: 1.4em; text-decoration: none; }
			
.btn30_link { position:relative; float: left; display:inline; line-height:30px; margin-left: 5px; font-weight:bold; 

  padding-right:5px; cursor:hand;} /* img  추가시 label 링크가 되지 않음 span으로 대체하여 left를 여백을 추가*/
.btn30_right { background: url(../images/btn/btn30_right.png) no-repeat; float: left;  width: 8px; height: 30px; }


.ico30_check {position:relative; float: left; background: url(../images/ico/ico30_check.png) no-repeat;
 padding-right:5; margin-top:8px; margin-left: -8px; border:none; width:15px;height:15px;}
 

/* standard [기본 요소 - 목록, 선택] */
.btn_standard {  position:relative; float: left;  background-color: #C0C0C0;}

/* positive [확신 요소 - 글쓰기, 확인, 제출] */
.btn_positive {  position:relative; float: left;  background-color: #85B3FF;}

/* negative [부정 요소: 취소, 삭제] */
.btn_negative {  position:relative; float: left;  background-color: #FFE69D;}


/* button box */

.btnBox{
	position:relative;
	float:left;
	width: auto; /*Width of main container*/
	/*margin: 0 auto; /*Center container on page*/
	padding-top:20px;
	padding-bottom:40px;
}

.btnBox2{
	position:absolute;	
	float:left;
	width: auto;
	margin-top:-4px;
}