@charset "utf-8";

/* default */
body, td, p, input, button, textarea, select, .c1 { 
	font-family:'NF'; font-size:14pt; 
}

*, html {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin:0;
	padding:0;
	/* user-select: none; */
}

BODY {
	height:100% !Important;
	font-size: 14px;
	line-height:1.5;
	scrollbar-face-color:#999999;
	scrollbar-highlight-color:#999999;
	scrollbar-shadow-color:#555555;
	scrollbar-3dlight-color:#8e7c4b;
	scrollbar-arrow-color:#8e7c4b;
	scrollbar-track-color:#FFFFFF;
	scrollbar-darkshadow-color:#8e7c4b;
}

html {
	height:100%;
}

/* scroll bar */
html {scrollbar-Face-Color:#cde2f1; scrollbar-Track-Color:#efefef; scrollbar-Shadow-Color:#efefef;}
::-webkit-scrollbar {width:12px;}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {display:block; height:10px; background:#efefef}
::-webkit-scrollbar-track {background:#efefef; -webkit-border-radius:10px; border-radius:10px; -webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {background:rgba(68,175,251,.2); -webkit-border-radius:8px; border-radius:8px; -webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.1)}



button:focus, input:focus, select:focus, option:focus, textarea:focus, span:focus {outline: none;}

ul,li,ol,dl,menu { list-style: none; }

a:link, a:visited, a:active { text-decoration:none; color:#000000;}
a:hover { text-decoration:none; }

a.menu:link, a.menu:visited, a.menu:active { text-decoration:none; }
a.menu:hover { text-decoration:none; }

/* 페이징 */

.pg_wrap {
	clear: both;
	margin: 0 0 20px;
	padding: 20px 0 0;
	text-align: center
}

.pg {}

.pg_page, .pg_current {
	font-family:'NF';
	display: inline-block;
	padding: 0 8px;
	min-height: 25px;
	color: #000;
	letter-spacing: 0;
	line-height: 1.6em;
	font-size:0.8em;
	vertical-align: middle
}

.pg a:focus, .pg a:hover {
	text-decoration: none
}

.pg_page {
	background: #e4eaec;
	text-decoration: none
}

.pg_start, .pg_prev {
	/* 이전 */
}

.pg_end, .pg_next {
	/* 다음 */
}

.pg_current {
	display: inline-block;
	margin: 0 4px 0 0;
	background: #333;
	color: #fff;
	font-weight: normal
}

/* Common */
.Vm { vertical-align:middle; }
.Pd1 { padding:1px !important; } .Pd2 { padding:2px !important; } .Pd3 { padding:3px !important; } .Pd4 { padding:4px !important; } .Pd5 { padding:5px !important; } .Pd6 { padding:6px !important; } .Pd7 { padding:7px !important; } .Pd8 { padding:8px !important; } .Pd9 { padding:9px !important; } .Pd10 { padding:10px !important; }
.Mg1 { margin:1px !important; } .Mg2 { margin:2px !important; } .Mg3 { margin:3px !important; } .Mg4 { margin:4px !important; } .Mg5 { margin:5px !important; } .Mg6 { margin:6px !important; } .Mg7 { margin:7px !important; } .Mg8 { margin:8px !important; } .Mg9 { margin:9px !important; } .Mg10 { margin:10px !important; }
.TaC { Text-align:Center !important; } .TaR { Text-align:Right !important; } .TaL { Text-align:Left !important; }
.Cp { cursor:pointer !important; }.Ch { cursor:help !important; }.Cd { cursor:default !important; }
.None{ display:none; }.Hidden{ visibility: hidden;overflow: hidden;width: 0 !important;height: 0 !important;margin: 0 !important;padding: 0 !important;font-size: 0;line-height: 0; }
.Fl{ float:left; }.Fr{ float:right; }

/* width, height */
.Wh15 { width:15px; height:15px; }
.W05{ width:05% !important; }
.W10{ width:10% !important; }
.W15{ width:15% !important; }
.W20{ width:20% !important; }
.W25{ width:25% !important; }
.W30{ width:30% !important; }
.W35{ width:35% !important; }
.W40{ width:40% !important; }
.W45{ width:45% !important; }
.W50{ width:50% !important; }
.W55{ width:55% !important; }
.W60{ width:60% !important; }
.W65{ width:65% !important; }
.W70{ width:70% !important; }
.W75{ width:75% !important; }
.W80{ width:80% !important; }
.W85{ width:85% !important; }
.W85{ width:85% !important; }
.W90{ width:90% !important; }

/* font-weight */
.Fw100 { font-weight:100; }.Fw200 { font-weight:200; }.Fw300 { font-weight:300; }.Fw400 { font-weight:400; }.Fw500 { font-weight:500; }.Fw600 { font-weight:600; }.Fw700 { font-weight:700; }.Fw800 { font-weight:800; }.Fw900 { font-weight:900; }

/* font-size : em */
.Fs07 { font-size:0.7em !important; }.Fs08 { font-size:0.8em !important; }.Fs09 { font-size:0.9em !important; }.Fs10 { font-size:1.0em !important; }.Fs11 { font-size:1.1em !important; }.Fs12 { font-size:1.2em !important; }.Fs13 { font-size:1.3em !important; }.Fs14 { font-size:1.4em !important; }.Fs15 { font-size:1.5em !important; }.Fs16 { font-size:1.6em !important; }.Fs17 { font-size:1.7em !important; }.Fs18 { font-size:1.8em !important; }.Fs19 { font-size:1.9em !important; }.Fs20 { font-size:2.0em !important; }

/* border */
.Bt1 {border-top:1px solid #d9d9d9 !important;}
.Br1 {border-right:1px solid #d9d9d9 !important;}
.Bb1 {border-bottom:1px solid #d9d9d9 !important;}
.Bl1 {border-left:1px solid #d9d9d9 !important;}
.Btnone{border-top:none !important;}
.Brnone{border-right:none !important;}
.Bbnone{border-bottom:none !important;}
.Blnone{border-left:none !important;}


/* color */
.white { color:white !important; }.black { color:black !important; }
.red { color:red !important; }

/* text-decoration */
.uL {
	text-decoration:underline;
}

/* INPUT */
.InputText {
	width:60%;
	padding:3px;
	vertical-align:middle;
	font-family:NF;
	font-size:1.0em;
	border: 1px solid #ccc;
	box-shadow: inset 0.1em 0.1em 0.15em rgba(0,0,0,.1);
}
input[type=text], input[type=password], textarea{
	border: 1px solid #ccc;
	box-shadow: inset 0.1em 0.1em 0.15em rgba(0,0,0,.1);
}

/* Shop CSS Sync */
.Wrap{position:relative;min-width:1200px}
.Blind{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden}

/* custom[radio&checkbox] ################################################################################# */
/* radio&checkbox wrap */
.CustomInputBox{position:relative;vertical-align:middle;padding-left:22px;cursor:pointer}

/* radio #################################################################################*/
.CustomInputBox input[type=radio]{display:none}
.CustomInputBox input[type=radio] + .CustomCheckIcon{position:absolute;top:0;bottom:0;left:3px;margin:auto 0;width:15px;height:15px;background-color:#eaeaea;border-radius:30px;box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8)}
.CustomInputBox input[type=radio]:checked + .CustomCheckIcon{/*background-color:#5cc8da*/}

/* radio:checked #################################################################################*/
.CustomInputBox input[type=radio]:checked ~ .CustomCheckIcon:before {content:" ";display:block;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:7px;height:7px;background-color:#333;border-radius:50%;display:block}

/* checkbox #################################################################################*/
.CustomInputBox input[type=checkbox]{display:none}
.CustomInputBox input[type=checkbox] + .CustomCheckIcon{position:absolute;top:0;bottom:0;left:3px;margin:auto 0;width:15px;height:15px;background-color:#eaeaea;border-radius:3px;box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);}
.CustomInputBox input[type=checkbox]:checked + .CustomCheckIcon{/*background-color:#0099ff*/}

/* checkbox:checked #################################################################################*/
.CustomInputBox input[type=checkbox]:checked ~ .CustomCheckIcon:before {content:" ";display:block;position:absolute;left:5px;top:-5px;width:5px;height:15px;border:solid #333;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);display:block;}

/*On & Off button #################################################################################*/
.CustomOnOffBox{position:relative;width:60px;height:30px;border-radius:20px;overflow:hidden}
.CustomOnOffBox label{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#a9a9a9;cursor:pointer; padding:0 !important;}
.CustomOnOffBox label:before, .CustomOnOffBox label:after{position:absolute;line-height:30px;font-size:11px;color:#fff;letter-spacing:0.5px}
.CustomOnOffBox label:before{left:8px;content: 'On'}
.CustomOnOffBox label:after{right:8px;content:'Off'}
.CustomOnOffBox label > span{position:absolute;left:2px;top:2px;width:26px;height:26px;border-radius:50%;background-color:#fff;z-index:1;transition-duration:0.2s}
.CustomOnOffBox > input:checked + label > span{transform:translateX(30px)}
.CustomOnOffBox > input:checked + label{background-color:#25d822}

/* PH:PlaceHolder ################################################################################# */
.PHWrap{position:relative}
.PHWrap input + .PHtext{position:absolute;display:block;left:5px;top:50%;transform:translateY(-50%);color:#aaa;font-size:12px;transition: all 100ms;padding:0 5px}
.PHWrap input:focus + .PHtext, .PHWrap input:valid + .PHtext{top:0;margin:0;font-size:12px;background-color:#fff;color:#16b1ca;}
.PHWrap input:focus{border:1px solid #16b1ca}

/* Loading ################################################################################# */
.SpinnerLoading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;bottom:0;left:0;right:0; opacity:0;z-index:999;}
.SpinnerLoading:before{content:""; position:fixed; background:rgba(0,0,0,1); opacity:0.4;background-size:cover;top:0;left:0; height:100%;width:100%;background-repeat:no-repeat;z-index:998;}
.SpinnerLoading:after{content:"";display:block;background-image:url("../Img/SpinnerLoading.svg");background-size:50px 50px;height:50px;width:50px;background-repeat:no-repeat;animation:SlSpin 1s infinite linear; z-index:999;}
@keyframes SlSpin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

/* ToolTip (by HJ) ################################################################################# */
[tooltipUp]:hover {position:relative}
[tooltipUp]:hover:after {content:attr(tooltipUp);position:absolute;white-space:nowrap;top:-30px;left:105%;background-color:#f8f8f8;border:1px solid #888;border-radius:5px;color:#000;font-size:12px;z-index:10;padding:10px 5px !important;}
[tooltipDown]:hover {position:relative}
[tooltipDown]:hover:after {content:attr(tooltipDown);position:absolute;white-space:nowrap;top:100%;left:105%;background-color:#f8f8f8;border:1px solid #888;border-radius:5px;color:#000;font-size:12px;z-index:10;padding:10px 5px !important;}

/* Modal ################################################################################# */
.Modal{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;background-color:#fff;z-index:910;display:none;width:350px;height:350px;}
.ModalBack{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;opacity:0.7;z-index:900}
.CloseX{position:fixed;width:19px;height:19px;cursor:pointer;margin:auto;left:0;right:0;top:0;bottom:0;z-index:911}
.CloseX > i{position:absolute;width:100%;top:47%;border:1px solid #BBB;transform:rotate(225deg)}
.CloseX > i:nth-child(2){transform:rotate(135deg)}

/* Button ################################################################################# */
.Clr0{background-color:#f00;border:1px solid #f00;color:#fff}
.Btn.Clr0:hover{background-color:#ed0000}
.BtnB.Clr0:hover{box-shadow: inset 0 0 0px 1px #ed0000}
.BtnB.Clr0{color:#ed0000}

.Clr1{background-color:#e04754;border:1px solid #e04754;color:#fff}
.Btn.Clr1:hover{background-color:#cc4551}
.BtnB.Clr1:hover{box-shadow: inset 0 0 0px 1px #cc4551}
.BtnB.Clr1{color:#e82424}

.Clr2{background-color:#40aaff;border:1px solid #40aaff;color:#fff}
.Btn.Clr2:hover{background-color:#1697ff}
.BtnB.Clr2:hover{box-shadow: inset 0 0 0px 1px #1697ff}
.BtnB.Clr2{color:#00aaf7}

.Clr3{background-color:#16b1ca;border:1px solid #16b1ca;color:#fff}
.Btn.Clr3:hover{background-color:#1592a7}
.BtnB.Clr3:hover{box-shadow: inset 0 0 0px 1px #1592a7}
.BtnB.Clr3{color:#239fb3}

.Clr4{background-color:#3268bb;border:1px solid #3268bb;color:#fff}
.Btn.Clr4:hover{background-color:#385e98}
.BtnB.Clr4:hover{box-shadow: inset 0 0 0px 1px #385e98}
.BtnB.Clr4{color:#1b6ce8}

.Clr5{background-color:#6962d2;border:1px solid #6962d2;color:#fff}
.Btn.Clr5:hover{background-color:#534e9a}
.BtnB.Clr5:hover{box-shadow: inset 0 0 0px 1px #534e9a}
.BtnB.Clr5{color:#746bff}

.Clr6{background-color:#323b5d;border:1px solid #323b5d;color:#fff}
.Btn.Clr6:hover{background-color:#21263a}
.BtnB.Clr6:hover{box-shadow: inset 0 0 0px 1px #21263a}
.BtnB.Clr6{color:#4e5f9e}

.Clr7{background-color:#ffcc33;border:1px solid #ffcc33;color:#fff}
.Btn.Clr7:hover{background-color:#efc136}
.BtnB.Clr7:hover{box-shadow: inset 0 0 0px 1px #efc136}
.BtnB.Clr7{color:#f5bf1e}

.Clr8{background-color:#fafafa;border:1px solid #888;color:#888}
.Btn.Clr8:hover{background-color:#f7f3f3}
.BtnB.Clr8:hover{box-shadow: inset 0 0 0px 1px #f7f3f3}

.Clr9{background-color:#828282;border:1px solid #828282;color:#fff}
.Btn.Clr9:hover{background-color:#656565}
.BtnB.Clr9:hover{box-shadow: inset 0 0 0px 1px #656565}
.BtnB.Clr9{color:#929292}

.Btn{display:inline-block;vertical-align:middle;padding:5px 18px;cursor:pointer;box-sizing:border-box}
.BtnB{display:inline-block;vertical-align:middle;padding:5px 18px;cursor:pointer;box-sizing:border-box;background-color:transparent}

.Br{border-radius:3px}