@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/encyclopedia/ico/ico_radio_off.png") no-repeat 0 0;}
.uiCheckbox > input:checked + span.check { background-image:url("/publish/_ui/images2/encyclopedia/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:#000; font-size:21px; margin-left:4px; }
.uiCheckbox2 > span.check { width:42px; height:32px; margin-left:0; border:1px solid transparent; background:url("/publish/_ui/images2/encyclopedia/ico/ico_radio2_off.png") no-repeat 0 0;}
.uiCheckbox2 > input:checked + span.check { background-image:url("/publish/_ui/images2/encyclopedia/ico/ico_radio2_on.png");}
.uiCheckbox2 > input:focus + span.check { border:1px dotted red;}
.uiCheckbox2.normal > span { font-size:18px;}

/*
 * 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:#000; font-size:18px;}
.uiRadio > span.check { width:32px; height:32px; border:1px solid transparent; margin-right:4px; background:#fff url("/publish/_ui/images2/encyclopedia/common/ico_radio_off.png") no-repeat 0 0; border-radius:50%;}
.uiRadio > input:checked + span.check { background-image:url("/publish/_ui/images2/encyclopedia/common/ico_radio_on.png");}
.uiRadio > input:focus + span.check { border:1px dotted #111;}

.uiRadio.big > span { font-size:21px; font-weight:700;}

/*
.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: url(/resources/images/ico-arrow-down.png) #fff no-repeat center right 10px / 10px; font-size:18px; color:#333; min-width:100px; line-height: 1; border: 1px solid #ddd;}

.uiSelect.narrow 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;}


/* 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;}

/* btnType */
.btnType { display:inline-block; vertical-align:middle; min-width:100px; border:0 none; border-radius:2px;}
.btnType img { margin-top:-3px; vertical-align:middle;}
.btnType:hover { text-decoration:none;}

.btnType.btnType1 { height:40px; padding:0 24px; border:1px solid #ddd; line-height:40px; text-align:center; color:#000; 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.btnType7 { height:40px; padding:0 24px; line-height:40px; text-align:center; color:#fff; font-size:16px; background:#004199; min-width:100px; border-radius:2px;}
.btnType.btnType8 { height:40px; padding:0 24px; line-height:40px; text-align:center; color:#fff; font-size:16px; background:#004199; min-width:100px; border-radius:2px;}
.btnType2.btnType5 { height:60px; padding:0 24px; line-height:40px; text-align:center; color:#fff; font-size:16px; background:#222; min-width:210px; border-radius:2px;}

.btnType.long { height:50px; line-height:50px; font-size:18px;}
.btnType.short { height:40px; line-height:40px; font-size:16px; font-weight:400;}
.btnType.narrow { padding-left:10px; padding-right:10px; min-width:0;}
.btnType.narrow2 { padding-left:25px; padding-right:25px; min-width:0;}

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

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

.inputFile { position:relative; display:inline-block; overflow:hidden; cursor:pointer; width:144px;}
.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;}

.inputFileWrap { overflow:hidden;}
.inputFileWrap > input[type=text] { float:left;}
.inputFileWrap > label { float:left; height:40px; margin-left:5px; overflow:hidden; position:relative; cursor:pointer;}
.inputFileWrap > label input[type=file] { position:absolute; right:0; top:0; z-index:2; height:100%; cursor:pointer; opacity:0;}
.inputFileWrap > label .btnType { position:relative; z-index:1;}

.inlineBlock { display:inline-block; vertical-align:middle;}

/* spacing */
.mTop0 { margin-top:0 !important;}
.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;}

.mLeft5 { margin-left:5px !important;}
.mLeft10 { margin-left:10px !important;}
.mLeft15 { margin-left:15px !important;}
.mLeft20 { margin-left:20px !important;}
.mLeft25 { margin-left:25px !important;}
.mLeft30 { margin-left:30px !important;}
.mLeft35 { margin-left:35px !important;}
.mLeft40 { margin-left:40px !important;}

.w135 { min-width:135px !important;}

/* 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;}



/* 소백과 슬라이드 */
.slider {
    width:100%;
    min-width:980px;
    height:452px;
    position:relative;
    overflow:hidden;
    background:#fff;
    text-align:center;
}
.slider .bd {
    width:980px;
    position:absolute;
    left:50%;
    margin-left:-490px
}
.slider .bd li {
    width:980px;
    overflow:hidden;
}
.slider .bd li img {
    display:block;
    width:980px;
    height:452px;
}
.slider .tempWrap {
    overflow:visible !important
}
.slider .tempWrap ul {
    margin-left:-980px !important;
}
.slider .hd {
    position:absolute;
    width:100%;
    left:0;
    z-index:1;
    height:8px;
    bottom:20px;
    text-align:center;
}
.slider .hd li {
    display:inline-block;
    *display:inline;
    zoom:1;
    width:10px;
    height:10px;
    line-height:99px;
    overflow:hidden;
    background:url("/publish/_ui/images2/encyclopedia/ico/slider-btn.png") -39px 0px no-repeat;
    margin:0 5px;
    cursor:pointer;
    filter:alpha(opacity=60);
    opacity:0.6;
}
.slider .hd li.on {
    width:29px;
    height:10px;
    background-position:0 0;
    filter:alpha(opacity=100);
    opacity:1;
}
.slider .pnBtn {
    position:absolute;
    z-index:1;
    top:0;
    width:100%;
    height:452px;
    cursor:pointer;
}
.slider .prev {
    left:-50%;
    margin-left:-490px;
}
.slider .next {
    left:50%;
    margin-left:490px;
}
.slider .pnBtn .blackBg {
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:452px;
    background:#000;
    filter:alpha(opacity=50);
    opacity:0.5;
}
.slider .pnBtn .arrow {

    position:absolute;
    top:0;
    z-index:1;
    width:72px;
    height:452px;
}
.slider .pnBtn .arrow:hover {
    filter:alpha(opacity=60);
    opacity:0.6;
}
.slider .prev .arrow {
    right:0;
    background:url("/publish/_ui/images2/encyclopedia/ico/slider-arrow.png") -79px 0 no-repeat;
}
.slider .next .arrow {
    left:0;
    background:url("/publish/_ui/images2/encyclopedia/ico/slider-arrow.png") 0 0 no-repeat;
}

/*  */

.als-container {
    position: relative;
    width: 100%;
    margin: 0px auto;
    z-index: 0;
    overflow:hidden;
}

.als-viewport {
    position: relative;
    overflow: hidden;
    margin:0 88px;
}

.als-wrapper {
    position: relative;
    list-style: none;
}

.als-item {
    position: relative;
    display: block;
    text-align: center;
    cursor: pointer;
    float: left;
    padding-top:10px;
}

.als-item span{
    display:block;
    font-size:18px;
    margin-top:5px;
}

.als-prev, .als-next {
    position: absolute;
    cursor: pointer;
    clear: both;
}

#demo2 {
    width:auto;
    max-width:1825px;
    margin:0 auto;
}

#demo2 .als-item {
    height: 150px;
    width: 207px;
    text-align: center;
    border:1px solid #9ca2a7;
    margin-left:-1px;
}

#demo2 .als-item img {
    display: block;
    margin: 0 auto;
    vertical-align: bottom;
}

#demo2 .als-prev, #demo2 .als-next {
    top: 0;
    border:1px solid #9ca2a7;
}

#demo2 .als-prev {
    left: 0;
}

#demo2 .als-next {
    right: 0;
}

@media all and (max-width:768px) {
    .uiSelect.narrow select{font-size: 16px;}
    .uiSelect.narrow select + .inputText{ width:calc(100% - 105px);}
    .uiSelect.narrow .btnType.btnType3{width: 100%;}

    .btnType.btnType1,
    .btnType.btnType2,
    .btnType.btnType7,
    .btnType.btnType8{padding:0 14px; min-width:auto !important;}
    .optionsWrap .rArea .write img{width:16px;}
    .optionsWrap .rArea .guide img{width: 20px;}
}