@charset "utf-8";

/*
 * checkBox
 * html
	<label class="uiCheckbox">
		<input type="checkbox">
		<span class="check"></span>
		<span>제품</span>
	</label>
*/
.uiCheckbox { display:inline-block; position:relative; font-size:16px; margin:3px 0; text-align:left; vertical-align:middle; cursor:pointer; overflow:hidden;}
.uiCheckbox > input { position:absolute; left:-20px; top:-20px;}
.uiCheckbox > span { display:inline-block; vertical-align:middle; color:#fff; font-size:16px;}
.uiCheckbox > span.check { width:42px; height:32px; border:1px solid transparent; margin-right:4px; background:url("/publish/_ui/images2/photo_community/ico/ico_radio_off.png") no-repeat 0 0;}
.uiCheckbox > input:checked + span.check { background-image:url("/publish/_ui/images2/photo_community/ico/ico_radio_on.png");}
.uiCheckbox > input:focus + span.check { border:1px dotted red;}

.uiCheckbox2 { display:inline-block; position:relative; font-size:16px; margin:3px 0; text-align:left; vertical-align:middle; cursor:pointer; overflow:hidden;}
.uiCheckbox2 > input { position:absolute; left:-20px; top:-20px;}
.uiCheckbox2 > span { display:inline-block; vertical-align:middle; color:#fff; font-size:16px;}
.uiCheckbox2 > span.check { width:42px; height:32px; border:1px solid transparent; margin-right:4px; background:url("/publish/_ui/images2/photo_community/ico/ico_radio2_off.png") no-repeat 0 0;}
.uiCheckbox2 > input:checked + span.check { background-image:url("/publish/_ui/images2/photo_community/ico/ico_radio2_on.png");}
.uiCheckbox2 > input:focus + span.check { border:1px dotted red;}


/*
 * checkBox
 * html
	<label class="uiRadio">
		<input type="radio">
		<span class="check"></span>
		<span>제품</span>
	</label>
*/
.uiRadio { display:inline-block; position:relative; overflow:hidden; font-size:16px; margin:3px 0; text-align:left; vertical-align:middle; cursor:pointer;}
.uiRadio > input { position:absolute; left:-20px; top:-20px;}
.uiRadio > span { display:inline-block; vertical-align:middle; color:#fff; font-size:18px;}
.uiRadio > span.check { width:32px; height:32px; border:1px solid transparent; margin-right:8px; background:url("/publish/_ui/images2/photo_community/common/ico_radio_off.png") no-repeat 0 0;}
.uiRadio > input:checked + span.check { background-image:url("/publish/_ui/images2/photo_community/common/ico_radio_on.png");}
.uiRadio > input:focus + span.check { border:1px dotted red;}

.uiRadio2 { display:inline-block; position:relative; font-size:16px; margin:3px 0; text-align:left; vertical-align:middle; cursor:pointer; overflow:hidden;}
.uiRadio2 > input { position:absolute; left:-20px; top:-20px;}
.uiRadio2 > span { display:inline-block; vertical-align:middle; color:#fff; font-size:16px;}
.uiRadio2 > span.check { width:32px; height:32px; margin-right:4px; background:url("/publish/_ui/images2/photo_community/ico/ico_input_off.png") no-repeat 0 0; border-radius:50%;}
.uiRadio2 > input:checked + span.check { background-image:url("/publish/_ui/images2/photo_community/ico/ico_input_on.png");}
.uiRadio2 > input:focus + span.check { border:1px dotted red;}

.uiRadio3 { display:inline-block; position:relative; font-size:16px; margin:3px 0; text-align:left; vertical-align:middle; cursor:pointer; overflow:hidden;}
.uiRadio3 > input { position:absolute; left:-20px; top:-20px;}
.uiRadio3 > span { display:inline-block; vertical-align:middle; color:#fff; font-size:16px;}
.uiRadio3 > span.check { width:23px; height:22px; margin-right:4px; background:url("/publish/_ui/images2/photo_community/ico/ico_radio3_off.png") no-repeat 0 0;}
.uiRadio3 > input:checked + span.check { background-image:url("/publish/_ui/images2/photo_community/ico/ico_radio3_on.png");}
.uiRadio3 > input:focus + span.check { border:1px dotted red;}


/*
.uiSelect { display:inline-block; position:relative; padding-right:20px; border-radius:2px; background:#fff url("/publish/_ui/images2/photo_community/common/ico_select.png") no-repeat right 50%; overflow:hidden; vertical-align:middle;}
.uiSelect select { width:140%; min-width:95px; height:50px; font-size:18px; color:#333; border:0 none; background:transparent; text-indent:10px;}
*/

.uiSelect { display:inline-block; vertical-align:middle;}
.uiSelect select { display:block; width:100%; height:50px; border-radius:2px; background:#fff; font-size:18px; color:#333; min-width:100px; font-family:"NanumBarunGothic", dotum, arial, sans-serif;}

.uiSelect.small select { height:40px;}

/*
.uiSelect2 { display:inline-block; position:relative; padding-right:20px; height:40px; line-height:38px; background:#1d1d1d url("/publish/_ui/images2/photo_community/ico/ico_select1.png") no-repeat right 50%; overflow:hidden; vertical-align:middle; border:1px solid #383838;}
.uiSelect2 select { width:140%; height:38px; font-size:16px; color:#fff; border:0 none; background:transparent; text-indent:10px;}
*/
.uiSelect2 { display:inline-block; vertical-align:middle;}
.uiSelect2 select { display:block; width:100%; height:40px; background:#333; border:1px solid #383838; border-radius:2px; font-size:16px; color:#fff; min-width:100px;}
.uiSelect2 select option { background:#333; color:#fff;}

.uiSelect3 { display:inline-block; vertical-align:middle;}
.uiSelect3 select { display:block; width:100%; height:40px; background:#1d1d1d; border:1px solid #383838; border-radius:2px; font-size:16px; color:#fff; min-width:100px;}
.uiSelect2 select option { background:#1d1d1d; color:#fff;}


/* btnWrap */
.btnWrap { text-align:center; padding:30px 0 15px;}
.btnWrap .btnType { margin:0 5px;}
.btnWrap.alignLeft .btnType { margin-right:5px;}
.btnWrap.alignRight .btnType { margin-left:5px;}

.upPos1 { margin:0 30px; margin-top:-80px;}

/* btnType */
.btnType { display:inline-block; vertical-align:middle; min-width:100px;}
.btnType:hover { text-decoration:none;}

.btnType.btnType1 { height:40px; padding:0 24px; border:1px solid #4d4d4d; line-height:40px; text-align:center; color:#fff; font-size:16px; min-width:100px;}
.btnType.btnType1 img { margin-top:-4px;}
.btnType.btnType1.imgLeft img { margin-right:9px;}
.btnType.btnType1.imgRight img { margin-left:9px;}
.btnType.btnType2 { height:40px; padding:0 24px; line-height:40px; text-align:center; color:#fff; font-size:16px; background:#107cc0; border:1px solid #107cc0;  min-width:100px;}
.btnType.btnType3 { height:40px; padding:0 24px; line-height:40px; text-align:center; color:#fff; font-size:16px; background:#565b5d;}
.btnType.btnType4 { height:40px; padding:0 24px; line-height:40px; text-align:center; color:#fff; font-size:16px; background:#717678;}
.btnType.btnType5 { height:60px; padding:0 24px; line-height:40px; text-align:center; color:#fff; font-size:22px; background:#222; font-weight:700; min-width:210px; border-radius:2px;}
.btnType.btnType51 { height:60px; padding:0 24px; line-height:40px; text-align:center; color:#fff; font-size:22px; background:#565b5d; font-weight:700; min-width:210px; border-radius:2px;}
.btnType.btnType6 { height:50px; padding:0 24px; line-height:50px; text-align:center; color:#fff; font-size:22px; border:1px solid #8db8f2; font-size:18px; border-radius:2px;}
.btnType.btnType6.small { height:40px; line-height:40px;}

/* misc */
.inputText { height:40px; line-height:38px; border:1px solid #383838; background:#1d1d1d; padding:0 10px; font-size:16px; color:#fff; width:213px;}
.inputText:read-only { background:#000;}

textarea.inputText { resize:none; padding:5px 10px; overflow-y:auto; line-height:1.5;}

.inputFile { position:relative; display:inline-block; overflow:hidden; cursor:pointer;}
.inputFile input[type=file] { position:absolute; right:0; top:0; z-index:0;}
.inputFile span { position:relative; display:block; z-index:1; height:40px; padding:0 24px; line-height:40px; text-align:center; color:#fff; font-size:16px; background:#565b5d;}
.inputFile input[type=file]:focus + span { border:1px dashed red;}

/* spacing */
.mTop5 { margin-top:5px !important;}
.mTop10 { margin-top:10px !important;}
.mTop15 { margin-top:15px !important;}
.mTop20 { margin-top:20px !important;}
.mTop25 { margin-top:25px !important;}
.mTop30 { margin-top:30px !important;}
.mTop35 { margin-top:35px !important;}
.mTop40 { margin-top:40px !important;}
.mTop45 { margin-top:45px !important;}
.mTop50 { margin-top:50px !important;}
.mTop55 { margin-top:55px !important;}
.mTop60 { margin-top:60px !important;}
.mTop65 { margin-top:65px !important;}
.mTop70 { margin-top:70px !important;}
.mTop75 { margin-top:75px !important;}
.mTop80 { margin-top:80px !important;}
.mTop85 { margin-top:85px !important;}
.mTop90 { margin-top:90px !important;}
.mTop95 { margin-top:95px !important;}
.mTop100 { margin-top:100px !important;}

.pTop5 { padding-top:5px !important;}
.pTop10 { padding-top:10px !important;}
.pTop15 { padding-top:15px !important;}
.pTop20 { padding-top:20px !important;}
.pTop25 { padding-top:25px !important;}
.pTop30 { padding-top:30px !important;}
.pTop35 { padding-top:35px !important;}
.pTop40 { padding-top:40px !important;}
.pTop45 { padding-top:45px !important;}
.pTop50 { padding-top:50px !important;}
.pTop55 { padding-top:55px !important;}
.pTop60 { padding-top:60px !important;}
.pTop65 { padding-top:65px !important;}
.pTop70 { padding-top:70px !important;}
.pTop75 { padding-top:75px !important;}
.pTop80 { padding-top:80px !important;}
.pTop85 { padding-top:85px !important;}
.pTop90 { padding-top:90px !important;}
.pTop95 { padding-top:95px !important;}
.pTop100 { padding-top:100px !important;}

.mRight15 { margin-right:15px !important;}
.mRight35 { margin-right:35px !important;}
.mRight36 { margin-right:35px ; margin-top: 5px; margin-bottom: 5px;!important;}

.mLeft15 { margin-left:15px !important;}
.mLeft25 { margin-left:25px !important;} /*6월21일*/


/* clearFix */
.clearFix:before,
.clearFix:after { content:" "; display:table; clear:both; height:0;}

/* align */
.alignLeft { text-align:left;}
.alignLeft > .btnType { margin-right:5px;}
.alignRight { text-align:right;}
.alignRight > .btnType { margin-left:5px;}
.alignCenter { text-align:center;}
.alignCenter > .btnType { margin:0 5px;}

/* float */
.floatL { float:left;}
.floatR { float:right;}

/* jQuery UI datapicker fix */
.ui-datepicker { width:auto; border:1px solid #d1dceb; padding:0;}
.ui-datepicker table { margin:0;}
.ui-datepicker td span,
.ui-datepicker td a { font-size:14px; width:40px; height:40px; border-color:#d1dceb !important;}
.ui-datepicker .ui-datepicker-title,
.ui-datepicker .ui-datepicker-title span { font-size:14px; color:#fff;}
.ui-datepicker td { padding:0;}
.ui-datepicker-calendar thead th span { font-size:14px;}
.ui-datepicker .ui-datepicker-header { padding:0; background:#343434;}
.ui-datepicker .ui-datepicker-title { line-height:40px;}
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-widget-content .ui-state-active,
.ui-datepicker .ui-widget-header .ui-state-active { background:#004199; color:#fff;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { width:37px; height:40px; top:0;}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span { display:none;}
.ui-datepicker .ui-datepicker-prev { background:url("/publish/_ui/images2/photo_community/common/ico_date_prev.png") no-repeat 50% 50%; left:0;}
.ui-datepicker .ui-datepicker-next { background:url("/publish/_ui/images2/photo_community/common/ico_date_next.png") no-repeat 50% 50%; right:0;}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover { border:0 none; margin:0; cursor:pointer;}