@charset "utf-8";


/*──────────────── Radio & Checkbox ────────────────*/
input[type="checkbox"] {margin-right:10px;display:none;}
input[type="radio"] {margin-right:10px;display:none;}

/**:not(.span) + .checkbox-wrap:not(.labelCheck), *:not(.span) + .radio-wrap{margin-left:20px;}*/

.checkbox-wrap{display:inline-flex;align-items:center;gap:10px}
.checkbox-wrap span{display:inline-block;vertical-align:middle;width:18px;height:18px;line-height:19px;background:#cacaca;border-radius:4px;cursor:pointer;text-align:center;color:rgba(255,255,255,0);}
.checkbox-wrap span:before{content:'\e306';font-family:'newfont';font-size:15px;font-weight:bold;}
.checkbox-wrap:hover span{color:rgba(255,255,255,1);}
.checkbox-wrap input[type="checkbox"]:checked + span{color:rgba(255,255,255,1);background:#1abc9c;}

.checkbox-wrap:not(.btnChkall) span{position:relative;}
.checkbox-wrap:not(.btnChkall) span:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#1abc9c;border-radius:4px;opacity:0;transform:scale(1.4)}
.checkbox-wrap:not(.btnChkall) input[type="checkbox"]:checked + span:after{animation:click-ani-checkbox 0.3s 0s 1 alternate;}
@keyframes click-ani-checkbox {
	0% {transform:scale(1);opacity:0;}
	30% {opacity:0.4;}
	100% {transform:scale(1.6);opacity:0;}
}

.radio-wrap{display:inline-flex;align-items:center;gap:10px}
.radio-wrap span{position:relative;display:inline-block;vertical-align:middle;width:18px;height:18px;/*margin-right:6px;*/background:#cacaca;border-radius:50%;cursor:pointer;text-align:center;}
.radio-wrap span:before{content:'';display:inline-block;position:absolute;top:50%;left:50%;margin-top:-3px;margin-left:-3px;width:6px;height:6px;background:rgba(255,255,255,0);border-radius:50%;}
.radio-wrap:hover span{background:#c2c2c2;}
.radio-wrap:hover span:before{background:rgba(255,255,255,0.75);}
.radio-wrap input[type="radio"]:checked + span, .radio-wrap:hover input[type="radio"]:checked + span{background:var(--green);}
.radio-wrap input[type="radio"]:checked + span:before, .radio-wrap:hover input[type="radio"]:checked + span:before{background:rgba(255,255,255,0.9);}

.radio-btn{position:relative;float:left;}
.radio-btn input[type="radio"] + span{position:relative;margin-right:0 !important;display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:76px;height:32px;line-height:1em;padding:0 15px;color:#fff;
	font-size:13px;background:rgba(55,71,79,0.2);border-radius:0;transition:all .2s ease-in-out;}
.radio-btn:first-child input[type="radio"] + span{border-top-left-radius:4px;border-bottom-left-radius:4px;}
.radio-btn:last-child input[type="radio"] + span{border-top-right-radius:4px;border-bottom-right-radius:4px;}
.radio-btn:hover input[type="radio"] + span{background:rgba(55,71,79,0.3);}
.radio-btn input[type="radio"]:checked + span{background:#1abc9c;}
.radio-btn:not(:last-child) input[type="radio"] + span:after{content:'';position:absolute;top:10px;right:0;display:inline-block;width:1px;height:12px;background:rgba(55,71,79,0.1);}
.radio-btn:hover input[type="radio"] + span:after, label.radio-btn input[type="radio"]:checked + span:after{}
.radio-btn.gray input[type="radio"]:checked + span{background:#79909c;}
.radio-btn.blue input[type="radio"]:checked + span{background:#4075fb;}
.radio-btn.red input[type="radio"]:checked + span{background:#ff5050;}


@media screen and (max-width:720px) { /*모바일*/
	
}




/* input-label */
@media screen and (min-width:721px) {
	.input-label{position:relative;display:inline-flex;align-items:center;align-items:stretch;}
	.input-label input{flex:1;}
	.input-label.span{display:flex;}
	.input-label[class*="span"] input{flex:1;}
	.input-label .label{position:relative;display:inline-flex;align-items:center;padding:0 8px;font-size:11px;font-weight:bold;color:rgba(53,57,69,0.8);background:rgba(53,57,69,0.02);border:1px solid rgba(0,0,0,0.15);z-index:2;word-break:keep-all;}
	body[data-font-family='nanumSR'] .input-label .label{font-size:12px;font-weight:700;}
	.input-label.focus .label:not(.label-inline){color:#fff;background:rgba(71,78,103,0.85);}
	.input-label .label:first-child{border-right:0;border-top-left-radius:var(--form-radius);border-bottom-left-radius:var(--form-radius);border-top-right-radius:0;border-bottom-right-radius:0;}
	.input-label .label:last-child{border-left:0;float:right;border-top-right-radius:var(--form-radius);border-bottom-right-radius:var(--form-radius);border-top-left-radius:0;border-bottom-left-radius:0;}
	.input-label [data-label]{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important;}
	.input-label.left-label .bootstrap-select .btn{border-top-left-radius:0;border-bottom-left-radius:0;}
	.input-label [data-label-right], .input-label.right-label .bootstrap-select .btn{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;}
	.input-label.focus span:not(.label-inline){background:rgba(53,57,69,0.4);color:#fff;}
	.input-label.mini span, .input-label .label.mini{height:24px;line-height:25px;padding:0 4px;}
	.input-label.small span, .input-label .label.small{height:28px;line-height:28px;padding:0 5px;}
	.input-label.large span, .input-label .label.large{height:42px;line-height:42px;padding:0 10px;font-size:14px;font-weight:600;}
	.input-label .label-inline{font-size:10px;color:rgba(55,71,79,0.55);background:transparent !important;position:absolute;height:100%;top:0;right:0;z-index:13;padding-right:7px;display:inline-flex;align-items:center;}
}
@media screen and (max-width:720px) { /*모바일*/
	
}



/* 컬러적용 */
.input-label[class*='labelColor-'] .label{color:#fff !important;border:0;position:relative;}
.input-label[class*='labelColor-'] .label:before{content:'';position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background:rgba(0,0,0,0.1);}
.input-label.labelColor-blue .label{background:#349af4 !important;}
.input-label.labelColor-green .label{background:#1bc8a6 !important;}
.input-label.labelColor-gray .label{background:#81869a !important;}
.input-label.labelColor-lightGray .label{background:#abaeba !important;}
.input-label.labelColor-black .label{background:rgba(71,78,103,1) !important;}
.input-label.labelColor-red .label{background:#eb5b5b; !important;}
.input-label.labelColor-yellow .label{background:#ffbe22 !important;}
.input-label.labelColor-pink .label{background:#fc55a4 !important;}
















/*──────────────── input file ────────────────*/
.filebox{font-size:0;cursor:pointer;position:relative;/*overflow:hidden;*/cursor:default;}
.filebox:after{display:block;visibility:hidden;clear:both;content:""}


.filebox .uploadSet{width:100%;max-width:360px;display:inline-flex;align-items:center;}
.filebox input[type="file"]{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;}

.filebox .uploadSet .upload-name{flex:1;height:28px !important;font-size:12px;color:#777 !important;margin:0;padding:0 5px 0 10px;border:1px solid rgba(0,0,0,0.25);border-right:0 !important;border-radius:0 !important;
	border-top-left-radius:4px !important;border-bottom-left-radius:4px !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;position:relative;background:#fff;opacity:1;
	box-shadow:0 4px 4px rgba(0,0,0,0.03) inset;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.filebox .uploadSet .upload-btn{width:80px;height:28px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0.25);background:rgba(71,78,103,0.03);
	border-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px;overflow:hidden;cursor:pointer;}
@media screen and (min-width:721px) {
	.filebox .uploadSet .upload-name{height:28px !important;font-size:12px;border-top-left-radius:4px !important;border-bottom-left-radius:4px !important;}
	.filebox .uploadSet .upload-btn{width:80px;height:28px;font-size:12px;}
}
@media screen and (max-width:720px) { /*모바일*/
	
}
.filebox .label-del{gap:0;font-size:0;}
.filebox .label-del input[type="checkbox"] + span{width:17px;height:17px;margin:0;background:#b9bfc2;border-radius:2px;color:rgba(255,255,255,0.7);display:inline-flex;align-items:center;justify-content:center;}
.filebox .label-del input[type="checkbox"] + span:before{content:'\e935';font-family:'intaefont';font-size:10px;font-weight:normal;margin-top:1px;transform:scale(0.8);}
.filebox .label-del input[type="checkbox"]:hover + span{color:#fff;background:#84888a;}
.filebox .label-del input[type="checkbox"]:checked + span{color:#fff;background:#ff5757;}

.filebox .upFile{display:flex;align-items:center;gap:10px;font-size:11px;}
.filebox .upFile > *{margin-top:10px;}
.filebox .upFile .info{font-size:12px;font-family:'Montserrat', 'NanumSquareRound', sans-serif;font-weight:normal;}

.filebox .upImg{clear:both;display:block;max-width:260px;position:relative;overflow:none;}
.filebox .upImg img{max-width:260px;margin-top:8px;}
.filebox .upImg .label-del{position:absolute;top:4px;right:-4px;gap:0;}

.filebox.btnFile .uploadSet{width:auto;max-width:auto;}
.filebox.btnFile label.upload-btn{font-size:14px;height:48px;width:160px;gap:6px;border-radius:3px;background:transparent;border:1px solid var(--blue);color:var(--blue);transition:all .2s ease-in-out;}
.filebox.btnFile label.upload-btn:hover{background:var(--blue);color:#fff;}
.filebox.btnFile label.upload-btn:before{content:'\e969';font-family:'intaefont';font-size:13px;font-weight:normal;}

.filebox.btnImg .uploadSet{width:auto;max-width:auto;}
.filebox.btnImg label.upload-btn{font-size:14px;height:48px;width:160px;gap:6px;border-radius:3px;background:transparent;border:1px solid var(--blue);color:var(--blue);transition:all .2s ease-in-out;}
.filebox.btnImg label.upload-btn:hover{background:var(--blue);color:#fff;}
.filebox.btnImg label.upload-btn:before{content:'\e974';font-family:'intaefont';font-size:15px;font-weight:normal;}

/*
.filebox .upImg.icon{display:inline-block;width:auto;margin-left:10px;}
.filebox .upImg.icon img{width:auto;margin:0;display:inline-block;vertical-align:top;}
.filebox .upImg.icon .label-del{position:relative;top:-8px;left:2px;}
.filebox .upImg.icon .label-del input[type="checkbox"] + span{width:16px;height:16px;line-height:16px;margin:0;background:rgba(186,186,186,0.6);border-radius:2px;color:rgba(255,255,255,0.7);}
.filebox .upImg.icon .label-del input[type="checkbox"] + span:before{content:'\e007';font-family:'newfont';font-size:12px;font-weight:normal;}
.filebox .upImg.icon .label-del input[type="checkbox"]:hover + span{color:#fff;background:rgba(174,174,174,1);}
.filebox .upImg.icon .label-del input[type="checkbox"]:checked + span{color:#fff;background:#ff5757;}
.filebox .upImg.icon .file-info{left:65px;vertical-align:bottom;}
*/


/* Checkbox 토글버튼 디자인 __________________________________________________ */

[class^="toggle-"] input{display:none;}
[class^="toggle-"] input::-moz-selection,
[class^="toggle-"] input:after::-moz-selection,
[class^="toggle-"] input:before::-moz-selection,
[class^="toggle-"] input *::-moz-selection,
[class^="toggle-"] input *:after::-moz-selection,
[class^="toggle-"] input *:before::-moz-selection,
[class^="toggle-"] input + span::-moz-selection,
[class^="toggle-"] input::selection,
[class^="toggle-"] input:after::selection,
[class^="toggle-"] input:before::selection,
[class^="toggle-"] input *::selection,
[class^="toggle-"] input *:after::selection,
[class^="toggle-"] input *:before::selection,
[class^="toggle-"] input + span::selection{background: none;}

[class^="toggle-"]{display:inline-flex;align-items:center;position:relative;}
[class^="toggle-"] input + span{outline:0;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select: none;-ms-user-select:none;user-select:none;}
[class^="toggle-"] input + span:after, [class^="toggle-"] input + span:before{content:"";position:relative;display:inline-block;z-index:4;}
[class^="toggle-"] input + span:after{left:0;}
[class^="toggle-"] input + span:before{display:none;}


body{
	--toggle-light-width:80px;
	--toggle-light-height:30px;
	--toggle-light-circle-size:26px;
}
/* toggle-light */
.toggle-light{font-size:13px;width:var(--toggle-light-width);height:var(--toggle-light-height);position:relative;overflow:hidden;}
.toggle-light .bg-circle{display:flex;align-items:center;width:100%;height:100%;padding:2px;background:#f0f0f0;border-radius:30px;transition: all .3s ease;}
.toggle-light .bg-circle:before{content:'';position:relative;display:inline-flex;width:var(--toggle-light-circle-size);height:var(--toggle-light-circle-size);background:#fff;border-radius:50%;transition:all .2s ease-in-out;}
.toggle-light input:checked + .bg-circle{background:var(--green);}
.toggle-light input:checked + .bg-circle:before{margin-left:calc(100% - var(--toggle-light-circle-size));}
.toggle-light .labelOn, .toggle-light .labelOff{position:absolute;top:0;width:calc(100% - var(--toggle-light-circle-size));height:100%;line-height:var(--toggle-light-height);font-size:inherit;font-weight:normal;
	display:flex;align-items:center;justify-content:center;z-index:2;transition:all .2s ease-in-out;}
body[data-font-family='nanumSR'] .toggle-light .labelOn, body[data-font-family='nanumSR'] .toggle-light .labelOff{padding-top:2px;}
.toggle-light .labelOn{right:var(--toggle-light-width);;opacity:0;color:#fff;padding-left:1px;}
.toggle-light .labelOff{left:var(--toggle-light-circle-size);color:#a4a5a9;padding-right:3px;}
.toggle-light input:checked + span + .labelOn{right:var(--toggle-light-circle-size);opacity:1;}
.toggle-light input:checked + span + span + .labelOff{left:var(--toggle-light-width);opacity:0;}





/* 범위지정 */
.rangeContainer{position:relative;z-index:2;}
.rangeContainer label{margin-right:15px;}
.rangeContainer input[type='range']{position:relative;vertical-align:top;-webkit-appearance:none;width:100%;height:12px;appearance:none;background:transparent;outline:none;z-index:2;}
.rangeContainer input[type='range']:focus{outline:none;}
.rangeContainer input[type=range]::-webkit-slider-runnable-track{width:100%;cursor:pointer;background:transparent;}
.rangeContainer input[type='range']::-webkit-slider-thumb{-webkit-appearance:none;position:relative;top:0;z-index:15;appearance:none;width:22px;height:22px;background:#fff;border:1px solid rgba(0,0,0,0.1);
	box-shadow:0 3px 5px rgba(0,0,0,0.07);border-radius:50%;cursor:pointer;z-index:3;}
.rangeContainer input[type='range']::-ms-track{width:100%;height:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent;}
.rangeContainer .range-track{position:absolute;top:0;left:0;z-index:0;width:100%;height:12px;border-radius:10px;background:#D6D6D6;}
.rangeContainer .range-track-fill{position:absolute;left:0;top:0;z-index:1;width:0;height:12px;border-radius:10px;background:var(--green);}
.rangeContainer .range-label{display:flex;align-items:center;justify-content:center;justify-content:space-between;margin-top:10px;}
.rangeContainer .range-label span{text-align:center;width:30px;font-size:0.9em;font-weight:var(--bold);color:rgba(71,78,103,0.7);white-space:nowrap;}
.rangeContainer .range-label span:first-child{text-align:left;}
.rangeContainer .range-label span:last-child{text-align:right;}


/* 입력필드 텍스트 카운트 */
.textCount-wrap{position:absolute;bottom:10px;right:10px;z-index:3;font-size:13px;color:#6E6E6E;}
@media screen and (max-width:720px) { /*모바일*/
	
}