@charset "utf-8";

/*
 * checkBox
 * html
	<label for="qnaProduct" class="uiRadio">
		<input type="radio" name="qnaList" id="qnaProduct">
		<span class="check"></span>
		<span>제품</span>
	</label>
*/
.uiCheckbox { display:inline-block; font-size:18px; height:24px; margin:3px 0; line-height:26px; text-align:left; vertical-align:middle;}
.uiCheckbox > input { display:none; }
.uiCheckbox > span { display:inline-block; vertical-align:top; color:#000;}
.uiCheckbox > span.check { width:24px; height:24px; margin-right:4px; background:url("../images/bg_checkbox_off.png") no-repeat 0 0}
.uiCheckbox > input:checked + span.check { background-position:0 -24px;}

/*
 * checkBox
 * html
	<label for="qnaProduct" class="uiCheckbox">
		<input type="checkbox" name="qnaList" id="qnaProduct">
		<span class="check"></span>
		<span>제품</span>
	</label>
*/
.uiRadio { display:inline-block; font-size:18px; height:16px;  height:24px; margin:3px 0; line-height:26px; text-align:left; vertical-align:middle;}
.uiRadio > input { display:none; }
.uiRadio > span { display:inline-block; vertical-align:top; color:#000;}
.uiRadio > span.check { width:24px; height:24px; margin-right:4px; background:url("../images/bg_radio_off.png") no-repeat 0 0;}
.uiRadio > input:checked + span.check { background-position:0 -24px;}

/*
 * UI design Select
 * 크기 고정시킬 때는 .uiDesignSelect-text, .uiDesignSelect-ico 엘리먼트의 스타일을 조정
 * js
	AT.prettySelect({
		target : '.uiSelect'
		, scrollInit : true
		, addClass : ''
	});
*/
select { display:none;}
.uiOriginSelect { display:none;}
.uiDesignSelect-wrap { display:inline-block; position:relative; z-index:100;}
.uiDesignSelect-wrap .uiDesignSelect-selected { position:relative; display:block; height:32px; overflow:hidden; border:1px solid #d4d4d4; background-color:#fff;}
.uiDesignSelect-wrap .uiDesignSelect-trigger { display:block; position:relative; height:32px; line-height:32px; font-size:14px; color:#597a96; text-decoration:none;}
.uiDesignSelect-wrap .uiDesignSelect-text { display:block; margin:0 15px 0 0; text-indent:10px;}
.uiDesignSelect-wrap .uiDesignSelect-ico { position:absolute; right:0; top:0; bottom:0; width:32px; height:32px; background:url("../images/select_downarrow.png") no-repeat 0 50%;}
.uiDesignSelect-wrap .uiDesignSelect-optionList { overflow:hidden; display:none; position:absolute; left:0; top:32px; z-index:1010; overflow:hidden;}
.uiDesignSelect-wrap .uiDesignSelect-ul { border:1px solid #d4d4d4;}
.uiDesignSelect-wrap .uiDesignSelect-listTrigger { display:block; height:25px; line-height:25px; text-decoration:none; background-color:#fff; color:#597a96; text-indent:10px; text-align:left; font-size:15px;}
.uiDesignSelect-wrap .uiDesignSelect-listTrigger:hover,
.uiDesignSelect-wrap .uiDesignSelect-listTrigger.uiSelect-active { background-color:#597a96; color:#fff;}
.uiDesignSelect-wrap.upSlide .uiDesignSelect-optionList { bottom:28px; top:auto;}