@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;/*margin-right:8px;*/ 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(--mainColor);}
.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;}





/* input-label */
.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{width:100%;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:2px;border-bottom-left-radius:2px;border-top-right-radius:0;border-bottom-right-radius:0;}
.input-label .label:last-child{border-left:0;float:right;border-top-right-radius:2px;border-bottom-right-radius:2px;border-top-left-radius:0;border-bottom-left-radius:0;}
.input-label [data-label]{border-top-left-radius:0;border-bottom-left-radius:0;}
.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;border-bottom-right-radius:0;}

.input-label.mySelect .label{border-top-left-radius:3px;border-bottom-left-radius:3px;padding:0 8px;}

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



/* 컬러적용 */
.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:""}
.file-info{font-size:11px;color:rgba(71,78,103,0.8);}
.file-info + .label-del{margin-left:10px;}

.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 .upload-name{
	flex:1;
	height:26px;
	font-size:11px;
	color:#777;
	margin:0;
	padding:0 5px 0 10px;
	border:1px solid rgba(0,0,0,0.25);
	border-right:0;
	border-radius:0;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
	float:left;
	display:block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	cursor:default;
	position:relative;
	background:#fff;
	box-shadow:0 4px 4px rgba(0,0,0,0.03) inset;
	-webkit-appearance:none;/* 네이티브 외형 감추기 */ -moz-appearance:none;appearance:none;}
.filebox label.upload-btn{
	width:80px;
	height:26px;
	line-height:26px;
	font-size:12px;
	font-weight:600;
	text-align:center;
	float:left;
	display:block;
	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;
	}

.filebox .upImg{clear:both;display:block;max-width:260px;position:relative;overflow:none;}
.filebox .upImg img{max-width:260px;margin-top:5px;}

.filebox .upImg .file-info{position:absolute;bottom:0px;left:265px;font-size:11px;font-weight:200;color:#fff;display:inline-block;height:21px;line-height:22px;padding:0 8px;
	background:rgba(71,78,103,0.3);border-radius:2px;/*opacity:0;visibility:hidden;*/transition:all .2s ease-in-out;word-break:keep-all;}
.filebox .upImg .file-info:after{content:'';width:0;height:0;font-size:12px;border-left:4px solid transparent;border-right:4px solid rgba(71,78,103,0.3);border-top:4px solid transparent;border-bottom:4px solid transparent;
	position:absolute;top:50%;right:100%;margin-top:-5px;z-index:2;transition:all .2s ease-in-out;}
.filebox .upImg .file-info:hover{background:rgba(71,78,103,0.6);}
.filebox .upImg .file-info:hover:after{border-right-color:rgba(71,78,103,0.6);}

.filebox .upImg .label-del{position:absolute;top:5px;right:0px;}
.filebox .upImg .label-del input[type="checkbox"] + span{width:30px;height:30px;line-height:31px;margin:0;background:rgba(186,186,186,0.6);border-radius:2px;color:rgba(255,255,255,0.7);}
.filebox .upImg .label-del input[type="checkbox"] + span:before{content:'\e007';font-family:'newfont';font-size:16px;font-weight:normal;}
.filebox .upImg .label-del input[type="checkbox"]:hover + span{color:#fff;background:rgba(174,174,174,1);}
.filebox .upImg .label-del input[type="checkbox"]:checked + span{color:#fff;background:#ff5757;}


.filebox.btnCamera{}
.filebox.btnCamera .upload-name{display:none;}
.filebox.btnCamera label.upload-btn{display:inline-block;vertical-align:top;padding:0 12px;width:auto;height:34px;line-height:36px;font-weight:bold;text-align:center;color:#fff;
		border:0;border-radius:2px;background:rgba(71,78,103,0.5);transition:all .2s ease-in-out;margin:0;}
.filebox.btnCamera label.upload-btn:hover{background:#1bc8a6;}
.filebox.btnCamera label.upload-btn:before{content:'\e09d';font-family:'newfont';font-size:15px;vertical-align:middle;font-weight:normal;display:inline-block;margin-top:0;margin-right:8px;}
.filebox.btnCamera .upImg img{margin-top:10;}


.filebox.btnCamera.large label.upload-btn{display:inline-block;vertical-align:top;padding:0 12px;width:auto;height:46px;line-height:48px;padding:0 15px;font-weight:bold;text-align:center;color:#fff;
		border:0;border-radius:2px;background:rgba(71,78,103,0.5);transition:all .2s ease-in-out;margin:0;}
.filebox.btnCamera.large label.upload-btn:hover{background:#1bc8a6;}
.filebox.btnCamera.large label.upload-btn:before{content:'\e09d';font-family:'newfont';font-size:15px;vertical-align:middle;font-weight:normal;display:inline-block;margin-top:0;margin-right:8px;}
.filebox.btnCamera.large .upImg{display:inline-block;margin-left:10px;}
.filebox.btnCamera.large .upImg img{margin-top:0;}
.filebox.btnCamera.large .upImg .label-del{top:0;}



.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:#ff4242;}
.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;}