@charset "utf-8";
/*──────────────── Reset ────────────────*/
html{margin:0;padding:0;/*overflow-y:scroll*/}
body{margin:0;padding:0;font-size:0;font-family:var(--font-family);}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img, input, button{margin:0;padding:0;border:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
ul, dl, dt, dd{margin:0;padding:0;list-style:none}
legend{position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img{vertical-align:middle;}
label{cursor:pointer;}
button, input[type="submit"]{cursor:pointer;outline:0;}
textarea, select{font-size:1em}
select{margin:0}
p{margin:0;padding:0;word-break:break-all}
hr{width:100%;height:1px;background-color:rgba(0,0,0,0.12);border:none;}
pre{margin:0;padding:0;font-size:13px;font-family:inherit;display:inline-block;overflow:auto;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul,li{list-style:none;margin:0;padding:0}
img{max-width:100%;}

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*:before, *:after{display:inline-block;vertical-align:middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.fontAnti{-webkit-font-smoothing:none !important;-webkit-transform:none !important;transform:none !important;}
.fontAnti *{-webkit-font-smoothing:none !important;-webkit-transform:none !important;transform:none !important;}

a{text-decoration:none;outline:0;/*color:#404040;*/color:#3f4148;color:inherit;}
a:link, a:visited {text-decoration:none}
a:hover, a:focus, a:active {text-decoration:none;}

[class^="upImg"] img{height:auto;}

/* common */
b, .bold{font-weight:bold;}
i{font-style:normal;}
.normal{font-weight:normal;}
.clear{clear:both;display:block;}
.none{display:none !important;}
.hidden{visibility:hidden !important;}
.noborder{border:none !important;}
.tcenter{text-align:center !important;} .tleft{text-align:left !important;} .tright{text-align:right !important;} .fcenter{margin:0 auto;} .fleft{float:left !important;} .fright{float:right !important;}
.flexCenter{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.divCenter{display:flex;align-items:center;justify-content:center;}
.fixed{position:fixed;}
.bored{border:1px solid red;}

.help-block{color:#8da2a8;line-height:1.3em;display:inline-block;}
.help-block a{color:#8da2a8;text-decoration:underline !important;}
.help-block a:hover{color:#6d8288;}
p.help-block{display:block;}
div.help-block{display:block;}


/*──────────────── myTip ────────────────*/
body{
	--tip-bg-color:rgba(0,0,0,0.7);
}
.myTip{position:relative;cursor:pointer;display:inline-block;vertical-align:middle;font-size:0;}
.myTip:before{
	content:""attr(data-tip)"";
	font-size:12px;
	line-height:1.5em;
	color:#fff;
	display:inline-block;
	width:auto;
	padding:2px 10px;
	position:absolute;
	top:50%;
	right:100%;
	margin-top:-11px;
	margin-right:6px;
	background:var(--tip-bg-color);
	border-radius:4px;
	white-space:pre;
	transition:all .2s ease-in-out;
	opacity:0;
	visibility:hidden;
	z-index:39;	
	}
body[data-font-family='nanumSR'] .myTip:before{padding:3px 10px 2px 10px;}
.myTip:after{
	content:'';
	width:0;
	height:0;
	font-size:12px;
	border-width:3px;
	border-style:solid;
	border-color:transparent;
	border-left-color:var(--tip-bg-color);
	position:absolute;
	top:50%;
	right:100%;
	margin-top:-4px;
	transition:all .2s ease-in-out;
	opacity:0;
	visibility:hidden;
	z-index:39;
	}
.myTip:hover:before, .myTip:hover:after{opacity:1;visibility:visible;}

.myTip.right:before{right:auto;left:100%;margin-left:6px;}
.myTip.right:after{border-color:transparent;border-right-color:var(--tip-bg-color);right:auto;left:100%;}
.myTip.top:before{top:auto;bottom:100%;right:auto;left:0;margin-bottom:6px;margin-left:5px;}
.myTip.top:after{border-color:transparent;border-top-color:var(--tip-bg-color);top:auto;bottom:100%;left:0;right:auto;margin-left:12px;}
.myTip.bottom:before{top:100%;right:auto;left:0;margin-top:6px;margin-left:5px;}
.myTip.bottom:after{border-color:transparent;border-bottom-color:var(--tip-bg-color);top:100%;left:0;right:auto;margin-top:0;margin-left:12px;}

.myTip.mini:before{font-size:10px;border-radius:3px;padding:2px 6px;}
body[data-font-family='nanumSR'] .myTip.mini:before{padding:3px 6px 2px 6px;}

.myTip.useTag:before, .myTip.useTag:after{display:none !important;}
.myTip.useTag .tipCon{
			font-size:11px;
			font-weight:400;
			color:#fff;
			display:inline-flex;align-items:center;justify-content:center;
			width:auto;
			min-height:21px;
			padding:0 10px;
			position:absolute;
			position:absolute;
			top:50%;
			right:100%;
			margin-top:-11px;
			margin-right:6px;
			background:var(--tip-bg-color);
			border-radius:3px;
			white-space:pre;
			transition:all .2s ease-in-out;
			opacity:0;
			visibility:hidden;
			z-index:39;	
			}
.myTip.useTag .tipCon:after{
			content:'';
			width:0;
			height:0;
			border-width:3px;
			border-style:solid;
			border-color:transparent;
			border-left-color:var(--tip-bg-color);
			position:absolute;
			top:50%;
			left:100%;
			margin-top:-2px;
			transition:all .2s ease-in-out;
			opacity:0;
			visibility:hidden;
			z-index:39;
			}
.myTip.useTag:hover .tipCon, .myTip.useTag:hover .tipCon:after{opacity:1;visibility:visible;}	
.myTip.useTag .tipCon small{opacity:0.6;font-size:0.9em;}




.myTip.includeOn:before{color:#212121;background:rgba(255,231,71,0.9);font-weight:bold;}
.myTip.includeOn:after{border-left-color:rgba(255,231,71,0.9);}
.myTip.includeOn.top:after{border-color:transparent;border-top-color:rgba(255,231,71,0.9);}
.myTip.includeOn.right:after{border-color:transparent;border-right-color:rgba(255,231,71,0.9);}


/*─ myTag ─*/
.myTag{vertical-align:middle;display:inline-block;padding:0 8px;height:24px;line-height:24px;font-size:11px;font-weight:400;color:#fff;text-align:center;border-radius:2px;background:rgba(71,78,103,0.85);}
.myTag + .myTag{margin-left:5px;}
.myTag.bold, .myTag .bold{font-weight:600;}
.myTag.light, .myTag .light{color:#fff5bd;}

/*─ tagOn ─*/
.tagOn:after, .tagOff:after{content:'';display:inline-block;vertical-align:middle;margin-top:-2px;margin-left:8px;font-size:10px;font-weight:600;color:#fff;padding:0 5px;height:15px;line-height:16px;text-align:center;border-radius:9px;}
.tagOn:after{content:'ON';background:#1bc8a6;}
.tagOff:after{content:'OFF';background:rgba(71,78,103,0.3);}
.tagOff{color:#7a7a7a;}


/* toggle */
.toggle-btn{}
.toggle-btn.on{}
.toggle-container{display:none;}
.toggle-container.open{display:block;}



/*____________________________ input & btn Size ____________________________*/
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], .btn, input[type="submit"].btn{height:32px;font-size:13px;}
.btn, input[type="submit"].btn {padding-left:15px;padding-right:15px;font-weight:700;padding-top:0;padding-bottom:0;}
input[type="text"].mini, input[type="password"].mini, input[type="email"].mini, input[type="tel"].mini, input[type="number"].mini, input[type="url"].mini, .btn.mini, input[type="submit"].btn.mini{height:24px;font-size:11px;}
.btn.mini, input[type="submit"].btn.mini {padding-left:5px;padding-right:5px;}
body[data-font-family='nanumSR'] .btn.mini, input[type="submit"].btn.mini{padding-top:2px;}
input[type="text"].small, input[type="password"].small, input[type="email"].small, input[type="tel"].small, input[type="number"].small, input[type="url"].small, .btn.small, input[type="submit"].btn.small{height:28px;font-size:12px;padding:0px 6px;}
.btn.small, input[type="submit"].btn.small {padding-left:10px;padding-right:10px;}
input[type="text"].large, input[type="password"].large, input[type="email"].large, input[type="tel"].large, input[type="number"].large, input[type="url"].large, .btn.large, input[type="submit"].btn.large{height:42px;font-size:15px;font-weight:700;}
.btn.large, input[type="submit"].btn.large {padding-left:19px;padding-right:19px;}
.btn.short, input[type="submit"].btn.short {font-size:11px;padding:0 8px;}
/* select size */
.bootstrap-select:not(.select-img):not(.show-tick) .dropdown-toggle{height:32px;padding-left:12px;font-size:13px;line-height:1em;}
.bootstrap-select.mini .dropdown-toggle{height:25px;padding-left:6px;font-size:11px;line-height:1em;}
.bootstrap-select.small .dropdown-toggle{height:28px;padding-left:8px;font-size:12px;line-height:1em;}
.bootstrap-select.large .dropdown-toggle{height:42px;padding-left:12px;font-size:13px;line-height:1em;}



/*____________________________ btn ____________________________*/
.btn{vertical-align:middle;display:inline-block;cursor:pointer;text-align:center;font-size:13px;font-weight:700;line-height:1.2em;padding:0 8px;height:32px;color:#fff;
	background:rgba(53,57,69,0.85);border-radius:2px;transition:all .2s ease-in-out;outline:0;display:inline-flex;align-items:center;justify-content:center;padding-top:1px;box-sizing:border-box;}
.btn:hover{background:rgba(53,57,69,1);}

.btn.height20{height:20px;} .btn.height21{height:21px;} .btn.height22{height:22px;} .btn.height23{height:23px;} .btn.height24{height:24px;} .btn.height25{height:25px;} .btn.height26{height:26px;} .btn.height27{height:27px;}
.btn.height28{height:28px;} .btn.height29{height:29px;} .btn.height30{height:30px;} .btn.height31{height:31px;} .btn.height32{height:32px;} .btn.height33{height:33px;} .btn.height34{height:34px;} .btn.height35{height:35px;}
.btn.height36{height:36px;} .btn.height37{height:37px;} .btn.height38{height:38px;} .btn.height39{height:39px;} .btn.height40{height:40px;} .btn.height41{height:41px;} .btn.height42{height:42px;} .btn.height43{height:43px;}
.btn.height44{height:44px;} .btn.height45{height:45px;} .btn.height46{height:46px;} .btn.height47{height:47px;} .btn.height48{height:48px;} .btn.height49{height:49px;} .btn.height50{height:50px;} .btn.height51{height:51px;}
.btn.height52{height:52px;} .btn.height53{height:53px;} .btn.height54{height:54px;} .btn.height55{height:55px;} .btn.height56{height:56px;} .btn.height57{height:57px;} .btn.height58{height:58px;} .btn.height59{height:59px;}
.btn.height60{height:60px;} .btn.height61{height:61px;} .btn.height62{height:62px;} .btn.height63{height:63px;} .btn.height64{height:64px;} .btn.height65{height:65px;} .btn.height66{height:66px;} .btn.height67{height:67px;}
.btn.height68{height:68px;} .btn.height69{height:69px;} .btn.height70{height:70px;} .btn.height71{height:71px;} .btn.height72{height:72px;} .btn.height73{height:73px;} .btn.height74{height:74px;} .btn.height75{height:75px;}
.btn.height76{height:76px;} .btn.height77{height:77px;} .btn.height78{height:78px;} .btn.height79{height:79px;} .btn.height79{height:80px;}

.btn.round0{border-radius:0;} .btn.round1{border-radius:1px;} .btn.round2{border-radius:2px;} .btn.round3{border-radius:3px;} .btn.round4{border-radius:4px;} .btn.round5{border-radius:5px;}
.btn.round6{border-radius:6px;} .btn.round7{border-radius:7px;} .btn.round8{border-radius:8px;} .btn.round9{border-radius:9px;} .btn.round10{border-radius:10px;} .btn.round11{border-radius:11px;}
.btn.round12{border-radius:12px;} .btn.round13{border-radius:13px;} .btn.round14{border-radius:14px;} .btn.round15{border-radius:15px;} .btn.round16{border-radius:16px;} .btn.round17{border-radius:17px;}
.btn.round18{border-radius:18px;} .btn.round19{border-radius:19px;} .btn.round20{border-radius:20px;} .btn.round21{border-radius:21px;} .btn.round22{border-radius:22px;} .btn.round23{border-radius:23px;}
.btn.round24{border-radius:24px;} .btn.round25{border-radius:25px;} .btn.round26{border-radius:26px;} .btn.round27{border-radius:27px;} .btn.round28{border-radius:28px;} .btn.round29{border-radius:29px;}
.btn.round30{border-radius:30px;} .btn.round31{border-radius:31px;} .btn.round32{border-radius:32px;} .btn.round33{border-radius:33px;} .btn.round34{border-radius:34px;} .btn.round35{border-radius:35px;}
.btn.round36{border-radius:36px;} .btn.round37{border-radius:37px;} .btn.round38{border-radius:38px;} .btn.round39{border-radius:39px;} .btn.round40{border-radius:40px;} .btn.round41{border-radius:41px;}
.btn.round42{border-radius:42px;} .btn.round43{border-radius:43px;} .btn.round44{border-radius:44px;} .btn.round45{border-radius:45px;} .btn.round46{border-radius:46px;} .btn.round47{border-radius:47px;}
.btn.round48{border-radius:48px;} .btn.round49{border-radius:49px;} .btn.round50{border-radius:50%;}

.btn.reverse{background:transparent;color:#383838;border:2px solid rgba(53,57,69,0.9);} .btn.reverse:hover{color:#fff;background:rgba(53,57,69,1);border-color:rgba(53,57,69,1);}
.btn.light{background:#fff;color:#383838;} .btn.light:hover{background:#fff;color:#0d0d0d;}
.btn.light-reverse{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.85);} .btn.light-reverse:hover{background:#fff;color:rgba(0,0,0,0.9);border:2px solid #fff;}
.btn.black{background:rgba(0,0,0,0.85);color:#fff;} .btn.black:hover{background:#000;}
.btn.gray{background:rgba(53,57,69,0.3);color:#fff;} .btn.gray:hover{background:rgba(53,57,69,0.6);}
.btn.red{background:#ff4e4e;color:#fff;} .btn.red:hover{background:#e63232;}
.btn.blue{background:#4a86ff;color:#fff;} .btn.blue:hover{background:#1f5fe2;}
.btn.green{background:#1bc8a6;color:#fff;} .btn.green:hover{background:#0cb191;}
.btn.orange{background:#ff9921;color:#fff;} .btn.orange:hover{background:#eb740b;}
.btn.yellow{background:#ffdf31;color:#303030;} .btn.yellow:hover{background:#f7d100;}





/*____________________________ FORM ____________________________*/
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], .btn, textarea{font-family:inherit;border-radius:2px;}

input{vertical-align:middle;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], textarea {
	font-size:12px;font-weight:normal;padding:0 10px;color:#2d2d2d;background:#fff;border:1px solid rgba(0,0,0,0.2);position:relative;z-index:3;outline:none;
	}
textarea{width:100%;line-height:16px;padding:13px;display:block;overflow-y:auto !important;}
textarea.txtBox{background:#fff;}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="url"]:focus, textarea:focus{border-color:rgba(0,0,0,0.65);box-shadow:0 4px 4px rgba(0,0,0,0.05);}
input[type="url"] {color:#20366d;}

input:-moz-placeholder, textarea:-moz-placeholder {color:#999;font-weight:normal;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#999;font-weight:normal;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color:#999;font-weight:normal;}
input::-moz-focus-inner,
button::-moz-focus-inner{border:0;padding:0;}

.textarea-wrap{position:relative;}
.textarea-wrap textarea{position:relative;z-index:0;border-top-left-radius:0;}
.textarea-wrap .textarea-label{display:inline-block;position:absolute;top:0;left:-18px;z-index:5;width:22px;height:29px;line-height:29px;text-align:center;color:rgba(71,78,103,0.6);background:#fff;border:1px solid rgba(0,0,0,0.2);
	border-right:0;border-top-left-radius:2px;border-bottom-left-radius:2px;cursor:pointer;box-shadow:0 2px 0px rgba(0,0,0,0.04);}
.textarea-wrap .textarea-label .label-icon:before{content:'\e3cd';font-family:'newfont';font-size:12px;font-weight:normal;font-style:normal;}
.textarea-wrap .textarea-label:before{
	content:""attr(data-label)"";
	font-size:11px;
	line-height:1.5em;
	color:#fff;
	display:inline-block;
	width:auto;
	padding:3px 5px 2px 5px;
	position:absolute;
	top:-30px;
	left:-10px;
	background:rgba(0,0,0,0.65);
	border-radius:4px;
	white-space:pre;
	transition:all .2s ease-in-out;
	opacity:0;
	visibility:hidden;
	z-index:39;
	}
.textarea-wrap .textarea-label:after{
	content:'';
	width:0;
	height:0;
	font-size:12px;
	border-left:4px solid transparent;
	border-right:4px solid transparent;
	border-top:4px solid rgba(0,0,0,0.65);
	border-bottom:4px solid transparent;
	position:absolute;
	top:-9px;
	left:7px;
	transition:all .2s ease-in-out;
	opacity:0;
	visibility:hidden;
	z-index:39;
	}
.textarea-wrap .textarea-label:hover:before, .textarea-wrap .textarea-label:hover:after{opacity:1;visibility:visible;}
.textarea-wrap textarea:focus + .textarea-label{color:rgba(71,78,103,0.9);border-color:rgba(0,0,0,0.65);}


/*파일 만들기 & 삭제*/
.fileMake:not(.active){cursor:pointer;}
.fileMake:not(.active):before{content:"파일 만들기";font-size:10px;width:auto;padding:0 6px;height:17px;line-height:17px;color:#fff;display:inline-block;position:absolute;top:-19px;left:0.5em;margin:0;margin-right:8px;background:#567eff;
						border-radius:4px;white-space:nowrap;transition:all .2s ease-in-out;opacity:0;visibility:hidden;z-index:39;}
.fileMake:not(.active):after{content:'';width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #567eff;border-bottom:3px solid transparent;
						position:absolute;top:-2px;left:40%;margin-left:-6px;transition:all .2s ease-in-out;opacity:0;visibility:hidden;z-index:39;}
.fileMake:not(.active):hover:before, .fileMake:not(.active):hover:after{opacity:0.9;visibility:visible;}
.fileDelete{font-size:0;position:absolute;top:-7px;right:-6px;cursor:pointer;display:none;}
.fileDelete:before{content:'\e337';font-family:'newfont';font-size:8px;color:#fff;background:rgba(53,57,69,0.45);background:rgba(255,95,95,0.7);width:14px;height:14px;line-height:14px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;}
.fileDelete:hover:before{background:#ff5f5f;}
.fileMake.active + .fileDelete{display:inline-block}

/* structureBox */
.structureBox{position:relative;}
.structureBox .horizon{position:relative;font-size:0;}
.structureBox .horizon .text{display:block;margin:0;padding:0;color:#919191;position:absolute;top:-1px;left:80px;min-width:400px;height:100%;font-size:11px;line-height:1em;display:flex;align-items:center;}
.structureBox .horizon .active + .text{color:#287df1;font-weight:bold;}
.structureBox [class^='box']{margin-right:8px;margin-bottom:5px;display:inline-block;height:8px;border-radius:4px;}
.structureBox .horizon:last-child [class^='box']{margin-bottom:0;}
.structureBox [class^='box']:last-child{margin-right:0;}
.structureBox .box{width:100%;}
.structureBox .box2n{width:calc(50% - 3px);}
.structureBox .box3n{width:calc(33.33% - 4px);}
.structureBox [class^='box']{background:rgba(0,0,0,0.1);font-size:10px;display:flex;align-items:center;justify-content:center;color:#fff;}
.structureBox [class^='box'].bin{background:#fff;color:#919191;border:1px dashed rgba(0,0,0,0.15);}
.structureBox [class^='box'].active, .structureBox [class^='box'].bin.active{background:#6dabff;color:#fff;border:0;}
.structureBox.height3 [class^='box']{height:3px;} .structureBox.height4 [class^='box']{height:4px;} .structureBox.height5 [class^='box']{height:5px;} .structureBox.height6 [class^='box']{height:6px;}
.structureBox.height7 [class^='box']{height:7px;} .structureBox.height8 [class^='box']{height:8px;} .structureBox.height9 [class^='box']{height:9px;} .structureBox.height10 [class^='box']{height:10px;}
.structureBox.height11 [class^='box']{height:11px;} .structureBox.height12 [class^='box']{height:12px;} .structureBox.height13 [class^='box']{height:13px;} .structureBox.height14 [class^='box']{height:14px;}
.structureBox.height15 [class^='box']{height:15px;} .structureBox.height16 [class^='box']{height:16px;} .structureBox.height17 [class^='box']{height:17px;} .structureBox.height18 [class^='box']{height:18px;}
.structureBox.height19 [class^='box']{height:19px;} .structureBox.height20 [class^='box']{height:20px;} .structureBox.height21 [class^='box']{height:21px;} .structureBox.height22 [class^='box']{height:22px;}
.structureBox.height23 [class^='box']{height:23px;} .structureBox.height24 [class^='box']{height:24px;} .structureBox.height25 [class^='box']{height:25px;} .structureBox.height16 [class^='box']{height:26px;}
.structureBox.height27 [class^='box']{height:27px;} .structureBox.height28 [class^='box']{height:28px;} .structureBox.height29 [class^='box']{height:29px;} .structureBox.height30 [class^='box']{height:30px;}
.structureBox.height35 [class^='box']{height:35px;} .structureBox.height40 [class^='box']{height:40px;}
.structureBox [class^='box'].height3{height:3px;} .structureBox [class^='box'].height4{height:4px;} .structureBox [class^='box'].height5{height:5px;} .structureBox [class^='box'].height6{height:6px;}
.structureBox [class^='box'].height7{height:7px;} .structureBox [class^='box'].height8{height:8px;} .structureBox [class^='box'].height9{height:9px;} .structureBox [class^='box'].height10{height:10px;}
.structureBox [class^='box'].height11{height:11px;} .structureBox [class^='box'].height12{height:12px;} .structureBox [class^='box'].height13{height:13px;} .structureBox [class^='box'].height14{height:14px;}
.structureBox [class^='box'].height15{height:15px;} .structureBox [class^='box'].height16{height:16px;} .structureBox [class^='box'].height17{height:17px;} .structureBox [class^='box'].height18{height:18px;}
.structureBox [class^='box'].height19{height:19px;} .structureBox [class^='box'].height20{height:20px;} .structureBox [class^='box'].height21{height:21px;} .structureBox [class^='box'].height22{height:22px;}
.structureBox [class^='box'].height23{height:23px;} .structureBox [class^='box'].height24{height:24px;} .structureBox [class^='box'].height25{height:25px;} .structureBox [class^='box'].height16{height:26px;}
.structureBox [class^='box'].height27{height:27px;} .structureBox [class^='box'].height28{height:28px;} .structureBox [class^='box'].height29{height:29px;} .structureBox [class^='box'].height30{height:30px;}
.structureBox [class^='box'].height35{height:35px;} .structureBox [class^='box'].height40{height:40px;}