@charset "utf-8";

/* @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); */
/* --------------------------------------------------------
Reset
----------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:''; content:none;}
table {border-collapse:separate; border-spacing:0;}

legend{overflow:hidden;position:absolute;width:0;height:0;font-size:0;line-height:0;text-indent:-9999px;}
caption{overflow:hidden;position:absolute;width:0;height:0;font-size:0;line-height:0;text-indent:-9999px;}
label{cursor:pointer;}

/* ---- Setting ---- */ 
body > * :disabled {cursor:not-allowed !important;}

/* ------------------------------------------------------------------
SCROLL , SELECTION
------------------------------------------------------------------ */
/* ---- Scroll bar - webkit ----*/
::-webkit-scrollbar {height:6px; width:6px}
::-webkit-scrollbar-thumb {border:0px solid transparent; background-color:rgba(95, 104, 156, 0.2); background-clip:padding-box;}

/* selection */
::selection {background:#96ffd6; color:#333; text-shadow:none;}
::-webkit-selection {background:#96ffd6; color:#333; text-shadow:none;}

/* --------------------------------------------------------
GLOBAL class
----------------------------------------------------------*/
.fb_x {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center;-webkit-justify-content:center; -ms-flex-pack:center;}
.fb_y {display:flex; display:-webkit-flex; display:-ms-flexbox; align-items:center;-webkit-align-items:center; -ms-flex-align:center;}
.fb_xy {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center;}
.fb_e {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-start;-webkit-justify-content:flex-start; -ms-flex-pack:start;}
.fb_w {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-end;-webkit-justify-content:flex-end; -ms-flex-pack:end;}
.fb_ey {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-start;align-items:center; -webkit-justify-content:flex-start; -webkit-align-items:center; -ms-flex-pack:start; -ms-flex-align:center;}
.fb_wy {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-end;align-items:center; -webkit-justify-content:flex-end; -webkit-align-items:center; -ms-flex-pack:end; -ms-flex-align:center;}
.fb_ew {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:space-between;-webkit-justify-content:space-between; -ms-flex-pack:justify;}
.fb_ewy {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:space-between;align-items:center; -webkit-justify-content:space-between; -webkit-align-items:center; -ms-flex-pack:justify; -ms-flex-align:center;}
.fb_dir_x {flex-direction:row;-ms-flex-direction:row;}
.fb_dir_y {flex-direction:column;-ms-flex-direction:column;}
.fi_start {align-self:flex-start;}
.fi_end {align-self:flex-end;}
.fi_xy {align-self:center;}
.p0 {padding: 0 !important;}
.p10 {padding: 10px !important;}
.p15 {padding: 15px !important;}
.mr5 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mt10 {margin-top: 10px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.w100 {width: 100% !important;}
.w50 {width: 50% !important;}

.animate {transition:all .2s cubic-bezier(.7,0,.3,1);transform:all .2s cubic-bezier(.7,0,.3,1);-webkit-transition:all .2s cubic-bezier(.7,0,.3,1);}
.ellipsis {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.required {display:block; color:#f4781f; font-size:16px; vertical-align:middle;}
.ui-tooltip {display:block; position:absolute; z-index:400; padding:0 16px; border-radius:20px; background:rgba(0,0,0,0.6); color:#FFF; font-size:14px; line-height:26px;}
.filter_blur6 {filter:blur(6px); -webkit-filter:blur(6px);}
.hide {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0,0,0,0);}
.bold {font-weight: 600 !important;}

/* selectList */
.selectBox.active {}
.selectBox.active .selectNum {border-radius:0 0 20px 20px;}
.selectBox.active .selectList {display:block;}
.selectBox.active .selectNum:after {transform:rotate(0deg);}
.selectBox {position:relative;}
.selectBox .selectNum {display:block; position:relative; width:100%; height:36px; border-radius:20px; color:#fff; font-size:16px; text-indent:20px; text-overflow:ellipsis; line-height:36px; white-space:nowrap; overflow:hidden; border:1px solid #eee;}
.selectBox .selectNum:after{content:"";position:absolute;top: 14px;right: 18px;border-bottom: 5px solid #fff;border-left: 5px solid transparent;border-right: 5px solid transparent; transform:rotate(180deg);}
.selectBox .selectNum:focus,
.selectBox .selectNum:hover {color:#fff;}
.selectBox .selectList {display:none; position:absolute; z-index:1; left:0; bottom:36px; width:100%; border-radius:20px 20px 0 0; background:#424242; border:1px solid #eee; border-bottom:0;}
.selectBox .selectList ul {margin: 20px 20px 0 20px; border-bottom:1px solid #999999; box-sizing:border-box; position:relative; z-index:2;}
.selectBox .selectList li {display:block;}
.selectBox .selectList li a {display:block; width:100%; height:35px; overflow:hidden; color:#FFF; font-size:14px; font-weight:300; text-overflow:ellipsis; line-height:35px; white-space:nowrap;}
.selectBox .selectList li a:hover {}
.selectBox .selectList .selectDim { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0); z-index:1;}

/* ------------------------------------------------------------------
FORM Font
------------------------------------------------------------------ */
input, textarea, select, button ,table tr td {font-family:'Roboto', sans-serif;}

/* ------------------------------------------------------------------
FORM INPUT
------------------------------------------------------------------ */
input {width:100%; height:40px; line-height:40px; padding:0 20px; border:0; background:#eef0f4; border-radius:20px; color:#4a4e62; font-size:16px; box-sizing:border-box;}
input:hover {box-shadow:0 0 0 3px rgb(82 98 188 / 30%), inset 0px 0px 0px 1px rgb(82 98 188 / 80%);}
input:focus {border-color:#3f51b5;}
input:disabled {background:#f8f8f8; color:rgba(0,0,0,0.3); text-shadow:1px 1px 0px rgba(255,255,255,1);}
label {display:none; font-size:0;}

/* ms-clear */
input::-ms-clear {display:none;}

/* placeholder */
input:-ms-input-placeholder {color:#a9a9a9 !important;}
input::-webkit-input-placeholder {color:#a9a9a9 !important;}

/* addon
-------------------------------------*/
.inputWrap {display:flex; width:100%; position:relative;}
.inputWrap .addon {position:absolute; z-index:1; right:0px;}
.inputWrap .addon span.hding {display:flex; align-items:center; justify-content:center; width:20px; height:20px; color:#6e768f; margin:10px;}
.inputWrap .addon span.hding label,
.inputWrap .addon span.hding label:before {}
.inputWrap input {}

/* addon function */
.inputWrap input:focus ~ .addon span.hding,
.inputWrap input:focus ~ .addon button {border-color:#3f51b5; outline:0;}
.inputWrap input:disabled ~ .addon {background:#f8f8f8;}

/* addon last */
.inputWrap input:first-child {width:calc(100% - 0px);}
.inputWrap .addon:last-child {}
.inputWrap .addon:last-child .hding {}
.inputWrap .addon span.i:before {font-size:20px; }
.inputWrap .addon button {margin:0; padding:0 12px; border:1px solid rgba(0,0,0,0.08); font-size:12px; font-weight:600; color:#777ea5;}

.textRemove {width:22px; height:22px; font-size:0; display:none; position:absolute;}
.textRemove::before {content:''; display:block; background:url(../img/icon/icon_close.svg)no-repeat; width:22px; height:22px;}


.textRemove {width:22px; height:22px; font-size:0; display:none; position:absolute;}
.textRemove::before {content:''; display:block; background:url(../img/icon/icon_close.svg)no-repeat; width:22px; height:22px;}


/* inputFile
-------------------------------------*/
.inputFile {}
.inputFile input {position:absolute; z-index:-1; width:0px; height:0px; overflow:hidden; opacity:0;}
.inputFile input:focus + label, .inputFile input + label:hover {background:#fbfcff;}
.inputFile input + label {display:inline-block; position:relative; width:100%; padding:0; border:1px solid #e0e4ef; border-radius:4px; background:#fff; color:#333; cursor:pointer;}
.inputFile input + label span {display:block; width:80%; padding:0 10px; overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap;}
.inputFile input + label strong {display:block; position:absolute; top:0; right:0; padding:0 14px; border-left:1px solid #e0e4ef; border-radius:0 4px 4px 0; background:#f5f6f9; color:#333;}
.inputFile input + label span,
.inputFile input + label strong {height:36px; font-size:13px; line-height:36px; font-weight:100;}


/* radio , checkbox
-------------------------------------*/
.opt {position:relative; display:inline-block;}

.opt input[type=radio],
.opt input[type=checkbox] {position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; margin:0; opacity:0;}
.opt input[type=radio]+label,
.opt input[type=checkbox]+label {display:flex; justify-content:flex-start; align-items:center; font-size:15px; cursor:pointer; visibility:visible; word-break:break-all;     position: relative;}
.opt input[type=radio]+label span.text,
.opt input[type=checkbox]+label span.text {display:flex; align-items:center; margin:0 6px; overflow:hidden; color:#333; font-weight:500; line-height:18px;}
.opt input[type=radio]+label:before,
.opt input[type=checkbox]+label:before {display:inline-block; width:19px; min-width:19px; height:19px; color:#c7c9d1; font-size:30px; vertical-align:middle; border-radius:50%; box-sizing:border-box;}

.opt input[type=radio]:disabled+label,
.opt input[type=checkbox]:disabled+label {cursor:default; opacity:0.4;}
.opt input[type=radio]:disabled+label:before,
.opt input[type=checkbox]:disabled+label:before {color:#ddd;}

.opt input[type=radio]+label:before {content:''; box-shadow:inset 0 0 0 2px #929292; background:#fff;}
.opt input[type=radio]:checked+label:before {content:''; box-shadow:inset 0 0 0 6px var(--main-color);}
.opt input[type=checkbox]+label:before {content:''; box-shadow:inset 0 0 0 2px #929292;}
.opt input[type=checkbox]:checked+label:before {background:var(--main-color); box-shadow:none;}
.opt input[type=checkbox]:checked+label:after {content:'\f12c'; width:19px; height:19px; line-height:17px !important; position:absolute; top:50%; left:0; transform:translate(0, -50%); font: normal normal normal 24px/1 "Material-Design-Icons"; color:#fff; font-size:14px; text-align:center;}

.opt input[type=checkbox]:indeterminate+label:before {background:var(--main-color); box-shadow:none;}
.opt input[type=checkbox]:indeterminate+label:after {content:''; width:19px; height:19px; background:url(../img/icon/icon_checkbox_partial.svg)no-repeat; position:absolute; top:50%; left:0; transform:translate(0, -50%); filter:grayscale(1) brightness(10);}

.opt.dark {display:block; margin:10px 0;}
.opt.dark input[type=radio]+label span.text,
.opt.dark input[type=checkbox]+label span.text {color:#fff; font-size:16px; font-weight:300;}
.opt.dark input[type=checkbox]:checked+label:before {background:#fff;}
.opt.dark input[type=checkbox]:checked+label:after {filter:none;}


.opt input[type=radio]:focus ~ label,
.opt input[type=checkbox]:focus ~ label {outline:-webkit-focus-ring-color auto 1px;}

/* --------------------------------------------------------
SWITCH
----------------------------------------------------------*/
.switch {display:inline-block; position:relative; width:64px; height:30px; border-radius:20px; vertical-align:middle;}
.switch input {display:none;}
.switch .switch_input:checked ~ .switch_label {background:var(--main-color);}
.switch .switch_input:checked ~ .switch_label:before {opacity:0;}
.switch .switch_input:checked ~ .switch_label:after {opacity:1;}
.switch .switch_input:checked ~ .switch_handle {left:38px;}
.switch .switch_label {display:block; position:relative; height:inherit; border-radius:inherit; background:#4f5661; font-size:10px; cursor:pointer; transition:0.15s ease-out;-webkit-transition:0.15s ease-out;}
.switch .switch_label:before, .switch_label:after {position:absolute; top:10px; line-height:10px; transition:inherit;-webkit-transition:inherit;}
.switch .switch_label:before {right:10px; content:attr(data-off); color:rgba(255,255,255,0.5); font-weight:bold;}
.switch .switch_label:after {left:10px; opacity:0; content:attr(data-on); color:#fff; font-weight:bold;}
.switch .switch_handle {position:absolute; top:5px; left:5px; width:20px; height:20px; border-radius:10px; background:#fff; cursor:pointer; transition:left 0.15s ease-out;-webkit-transition:left 0.15s ease-out;}
.switch .switch_handle:before {display:none; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; background:#bd0635; content:'';}
.switch .switch_input:disabled ~ .switch_label,
.switch .switch_input:disabled ~ .switch_handle {cursor:default;}

/* --------------------------------------------------------
SEARCHBAR
----------------------------------------------------------*/


/* --------------------------------------------------------
FORM TEXTAREA
----------------------------------------------------------*/
textarea {width:100%; padding:8px; border-radius:12px; border:1px solid #dedede; color:#2e2e2e; font-size:14px; line-height:20px; box-sizing:border-box; resize:none;}
textarea:focus {}
textarea:disabled {background:#f8f8f8; color:rgba(0,0,0,0.3); text-shadow:1px 1px 0px rgba(255,255,255,1);}

/* --------------------------------------------------------
FORM SELECT
----------------------------------------------------------*/
select {width:100%; height:40px; padding:0 0 0 4px; border:1px solid #d9d9d9; box-sizing:border-box; border-radius:5px;}
select:hover {}
select option:hover,
select option[selected] {background:#000; color:#FFF;}
select:disabled {background:#f8f8f8; color:rgba(0,0,0,0.3); text-shadow:1px 1px 0px rgba(255,255,255,1);}

/* --------------------------------------------------------
MODAL
----------------------------------------------------------*/

@keyframes ShowPop {
	0% {opacity:0; transform:translate3d(0, -100px, 0);}
	100% {opacity:1; transform:translate3d(0, 0, 0);}
}

@keyframes HidePop {
	0% {opacity:1; transform:translate3d(0, 0, 0);}
	100% {opacity:0; transform:translate3d(0, -100px, 0);}
}

@keyframes dimShowPop {0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes dimHidePop {0% {opacity:1;}
	100% {opacity:0;}
}

.multiModal.hide {}
.multiModal.hide .modalBox {animation:HidePop 0.3s;}
.multiModal.hide .multiModal:after {animation:dimHidePop 0.3s;}
.multiModal.active {display:flex; flex-wrap:wrap; overflow:auto;}
.multiModal {display:none; position:fixed; z-index:99; top:0px; left:0px; right:0px; bottom:0px; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center;}
.multiModal:after {position:fixed; z-index:1; top:0px; left:0px; right:0px; bottom:0px; background:rgba(0,0,0,0.8); content:''; animation:dimShowPop 0.1s;}
.modalBox {position:relative; z-index:2; width:400px; border-radius:16px; background:#fff; box-shadow:0 10px 10px rgba(0, 0, 0, 0.2); box-sizing:border-box; animation:ShowPop 0.1s;}
.modalBox.responseHeight {height:100%;}
.modalBox.w440 {width:440px;}
.modalBox.w480 {width:480px;}
.modalBox.w500 {width:500px;}
.modalBox.w560 {width:560px;}
.modalBox.w600 {width:600px;}
.modalBox.w640 {width:640px;}
.modalBox.w700 {width:700px;}
.modalBox.w920 {width:920px;}

.modalBox .mbHeader {display:flex; justify-content:space-between; align-items:center; height:50px; padding:0 20px; border-bottom:1px solid #e5e5e5;}
.modalBox .mbHeader .backBtn {display:none;}
.modalBox .mbHeader .title {display:flex; flex-direction:row; align-items:center;}
.modalBox .mbHeader .title h2 {color:var(--main-color); font-size:20px;}

.modalBox .mbHeader .tools {display:flex;}
.modalBox .mbHeader .tools button {margin:0 3px;}
.modalBox .mbHeader ~ .mbBody {}
.modalBox .mbBody {padding:10px;}
.modalBox .mbBody::-webkit-scrollbar {height:4px; width:4px}
.modalBox .mbBodyt::-webkit-scrollbar-thumb {border:0px solid transparent; background-color:rgba(0,0,0,0.2); background-clip:padding-box;}
.modalBox .mbBody .mbBodyContents {width:calc(100% - 0px); height:100%; max-height:540px; overflow:auto;}
.modalBox .mbBody .mbBodyContents .article {color:#555; font-size:15px; line-height:20px; height:100%; margin:20px;}

.modalBox .buttonWrap {display:flex; align-items:center; justify-content:center; padding:0 10px 20px;}
.modalBox .buttonWrap span {}
.modalBox .buttonWrap button {margin:0 5px; min-width:140px;}

/* dlBox */
.modalBox .mbBody .mbBodyContents .dlBox {margin:20px;}
.modalBox .mbBody .mbBodyContents .dlBox dl {display:flex; align-items:flex-start; flex-direction: column; margin:20px 0;}
.modalBox .mbBody .mbBodyContents .dlBox dl:first-child {margin-top:0;}
.modalBox .mbBody .mbBodyContents .dlBox dl dt {display:flex; line-height:23px; font-size:16px; color:#333; width:100%; text-align:left; box-sizing:border-box;}
.modalBox .mbBody .mbBodyContents .dlBox dl dt .required {font-size:20px; margin-right:6px;}
.modalBox .mbBody .mbBodyContents .dlBox dl dd {display:block; width:calc(100% - 0px);}
.modalBox .mbBody .mbBodyContents .dlBox dl dd .selectWrap {width:100%;}

/* assignMember */
.modalBox .mbBody .assignMember {display:flex; flex-flow:row wrap; margin:10px;}
.modalBox .mbBody .assignMember .opt {width:calc(50% - 10px); margin:5px;}
.modalBox .mbBody .assignMember .opt label {padding:10px; box-sizing:border-box; background:#f9fbff; box-shadow:inset 0px 0px 0px 1px rgb(0 0 0 / 10%); border-radius:20px;}
.modalBox .mbBody .assignMember .opt input[type=checkbox]:checked+label {background:var(--main-color);}
.modalBox .mbBody .assignMember .opt input[type=checkbox]:checked+label .text {color:#fff;}
.modalBox .mbBody .assignMember .opt input[type=checkbox]:checked+label::before {background:#fff;}
.modalBox .mbBody .assignMember .opt input[type=checkbox]:checked+label::after {color:var(--main-color); left:10px;}

.modalBox .mbBody .assignMember .opt input[type=radio]:checked+label {background:var(--main-color);}
.modalBox .mbBody .assignMember .opt input[type=radio]:checked+label .text {color:#fff;}
.modalBox .mbBody .assignMember .opt input[type=radio]:checked+label::before {background:var(--main-color); box-shadow:inset 0 0 0 6px #ffffff;}
.modalBox .mbBody .assignMember .opt input[type=radio]:checked+label::after {color:var(--main-color); left:10px;}

.modalBox .mbBody .assignMember ~ .textArea {margin:0 16px;}
.modalBox .mbBody .assignMember ~ .textArea textarea {background:#eef0f4;}
/* --------------------------------------------------------
TOAST
----------------------------------------------------------*/

@keyframes ToastShow {0% {opacity:0; transform:translate3d(0, 100px, 0);}
  100% {opacity:1; transform:translate3d(0, 0, 0);}
}
@keyframes ToastHide {0% {opacity:1; transform:translate3d(0, 0, 0);}
 100% {opacity:0; transform:translate3d(-100px, 0, 0);}
}

.toastModal {display:flex; display:-webkit-flex; display:-ms-flexbox; position:fixed; z-index:99; left:0px; right:0px; bottom:0px; justify-content:center;-webkit-justify-content:center; -ms-flex-pack:center;}
.toastModal .toastBox {position:relative; z-index:2; width:500px;}
.toastModal .toastBox.w600 {width:600px;}
.toastModal .toastBox .toast {display:flex; display:-webkit-flex; display:-ms-flexbox; margin:4px; padding:10px 20px; border-radius:4px; background:#333; box-shadow:0 10px 10px rgba(0, 0, 0, 0.2); box-sizing:border-box;animation:ToastShow 0.3s;justify-content:space-between;align-items:center; -webkit-justify-content:space-between; -webkit-align-items:center; -ms-flex-pack:justify; -ms-flex-align:center;}
.toastModal .toastBox .toast.hide {animation:ToastHide 0.3s;}
.toastModal .toastBox .toast .text {color:#FFF;}
.toastModal .toastBox .toast .tools {}
.toastModal .toastBox .toast .tools button {color:#FFF;}


/* --------------------------------------------------------
BUTTON
----------------------------------------------------------*/
button {margin:0; padding:0; border:none; background:none; font-size:16px; cursor:pointer; appearance:none; color:#000; font-weight:300;}
.button span {position:relative; z-index:1;}
.button {display:flex; align-items:center; justify-content:center; position:relative; height:36px; line-height:36px; white-space: nowrap; padding:0 16px; overflow:hidden; border:none; background:#fff; color:#2e2e2e; cursor:pointer; border-radius:20px; transition:all 0.1s ease 0s;}
.button:hover {box-shadow:inset 0 0 0 3px rgba(0,0,0,0.1);}
.button:active {box-shadow:inset 0 0 10px 30px rgba(0,0,0,0.1);}
.button:disabled {border:1px solid rgba(0,0,0,0); background:rgba(0,0,0,0.08) !important; color:rgba(67, 74, 84, 0.3) !important; cursor:default; pointer-events:none;}
.button:disabled:hover {color:rgba(0,0,0,0.2);}
.button:disabled:hover:after {display:none; content:"";}

/* button color
----------------------------------*/
button.prime {background:var(--main-color); color:#fff; font-weight:500;}
button.gray {background:#eef0f4; color:var(--main-color); font-weight:500;}
button.white {background:#fff; color:var(--main-color); font-weight:500;}
button.yellow {background:#cec047; color:#fff; font-weight:500;}
button.dark {background:#2a2a2e; color:#fff; font-weight:500;}
button.success {background:#a0d468; color:#FFF;}
button.info {background:#4fc1e9; color:#FFF;}
button.warning {background:#fc6e51; color:#FFF;}
button.danger {background:#ed5565; color:#FFF;}
button.info {background:#4fc1e9; color:#FFF;}
button.mustard {position: absolute; top: 10px; right: 10px; background:#f1ca68; color:#563e00;}

button.default {background:#fff; font-size:14px; height:40px; padding:0 24px; color:var(--main-color); box-shadow:inset 0 0 0 2px var(--main-color); font-weight:600;}
button.default:hover {box-shadow:inset 0 0 0 2px var(--main-color); background:#f1f1f1;}

button.btnNote {background:rgba(0,0,0,0.1); font-size:24px !important; color:#fff; width:30px !important; min-width:30px !important; height:30px !important;}
button.btnNote {background:rgba(0,0,0,0.1); font-size:24px !important; color:#fff; width:30px !important; min-width:30px !important; height:30px !important;}
button.btnNoteColor {width:20px !important; min-width:20px !important; height:20px !important; border: 1px solid rgba(0, 0, 0, 0.2);}

/* button icon */
.button.i:before, .button.ir:before {width:24px;}

/* fullWidth */
.button.fw {width:calc(100% - 0px);}

/* button mini */
.button.mini {height:26px; line-height:26px; padding:0 10px; font-size:12px; }
.button.mini:before {width:18px; font-size:14px;}

/* button midium */
.button.midium {height:30px; line-height:30px; padding:0 10px; font-size:14px; }
.button.midium:before {width:18px; font-size:14px;}

/* button big */
.button.big {height:48px; padding:0 24px; font-size:20px; line-height:48px;}
.button.big:before {width:38px; font-size:28px;}


/* button 3d(solid) */
.button.mini.solid {box-shadow:inset 0 -2px 0 rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.03);}
.button.mini.solid:active {box-shadow:inset 0 0 0 rgba(0,0,0,.2), 0 0 0 rgba(0,0,0,.03); margin-top:2px; height:24px; line-height:24px;}
.button.solid {box-shadow:inset 0 -2px 0 rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.03);}
.button.solid:active {box-shadow:inset 0 0 0 rgba(0,0,0,.2), 0 0 0 rgba(0,0,0,.03); margin-top:2px; height:34px; line-height:34px;}
.button.big.solid {box-shadow:inset 0 -4px 0 rgba(0,0,0,.2), 0 4px 4px rgba(0,0,0,.03);}
.button.big.solid:active {box-shadow:inset 0 0 0 rgba(0,0,0,.2), 0 0 0 rgba(0,0,0,.03); margin-top:4px; height:44px; line-height:44px;}

/* buttonGroup */
.buttonGroup {font-size:0;}
.buttonGroup button {margin:0; border-radius:0;}
.buttonGroup button:first-child {border-bottom-left-radius:4px; border-top-left-radius:4px;}
.buttonGroup button:last-child {border-top-right-radius:4px; border-bottom-right-radius:4px;}

/* button progress */
.button .progress {position:absolute; z-index:1; top:0px; left:0px; bottom:0px; background:rgba(0,0,0,0.14); pointer-events:none;}

/* button circle */
button.circle {width:40px; min-width:40px; height:40px; font-size:24px; border-radius:50%; transition:all 0.1s ease 0s;}

button.circle:hover {box-shadow:inset 0 0 0 3px rgba(0,0,0,0.1);}
button.circle:active {box-shadow:inset 0 0 10px 30px rgba(0,0,0,0.1);}

button.circle:hover:before {filter:grayscale(0); opacity:1;}
button.circle:active:before {filter:grayscale(0); opacity:1;}
button.circle:disabled:hover {filter:grayscale(1);}
button.circle:disabled:hover::before {opacity:0.6;}

/* button - circle - mapping
button.circle.btn_l_setting {width:44px; height:44px; background:url(../img/btn/btn_l_setting.png) no-repeat;}
*/

/* ------------------------------------------------------------------
title
------------------------------------------------------------------ */
.title h2 {font-size: 24px; font-weight: 500;}
.title p {font-size: 16px;}

/* --------------------------------------------------------
PROGRESS
----------------------------------------------------------*/
.progressBox {}
.progressBox .progress {position:relative; height:4px; margin:8px 0;}
.progressBox .progress:after {display:block; width:100%; height:4px; background:#eee; content:'';}
.progressBox .progress .progressbar {display:block; position:absolute; height:4px; background:#3f51b5; transition:all 0.08s ease 0s;}
.progressBox .tools {font-size:12px;}

/* --------------------------------------------------------
TABLE
----------------------------------------------------------*/


.tableWrap {overflow:auto;}
.tableWrap table {width:100%; color:#464646; font-size:14px; border-top: 1px solid #e5e5e5;}
.tableWrap table .bg-danger{background: #ffeeee;}
.tableWrap table .bg-danger5{background: #ffcccc;}
.tableWrap table .bg-danger10{background: #ffaaaa;}
.tableWrap table caption {position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0,0,0,0);}
.tableWrap table tbody {}
.tableWrap table tbody tr:hover {background:#efefef;}
.tableWrap table tr th,
.tableWrap table tr td {position:relative; height:30px; padding:6px; overflow:hidden; border:0; text-align:center; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; font-size:14px;}
/* thead */
.tableWrap table thead {border-bottom:1px solid #e5e5e5;}
.tableWrap table thead tr th {border-bottom:1px solid #e5e5e5; background:#f5f6f9; text-align:center; font-size:15px; font-weight:400; line-height:14px; word-break:break-word; white-space:normal;}
.tableWrap table.type01 thead tr th {word-break: keep-all;}
.tableWrap table.type01 thead tr th {border-right: 1px solid #e5e5e5;}
.tableWrap table.type01 thead tr th:last-child {border-right: 0;}
.tableWrap table thead tr th[aria-sort] {}
.tableWrap table thead tr th[aria-sort]:hover {background:#fff;}
.tableWrap table thead tr th[aria-sort] button {font-size:13px; font-weight:400; line-height:14px; padding:6px; font-family:'Noto Sans KR', sans-serif; width:100%; height:100%;}
.tableWrap table thead tr th[aria-sort] button:hover {text-decoration:underline;}
.tableWrap table thead tr th[aria-sort] button:active {box-shadow:inset 0 0 0 2px rgb(165 0 52); text-decoration:none;}
.tableWrap table thead tr th[aria-sort] button[aria-pressed="true"] {color:#cf0652;}
.tableWrap table thead tr th[aria-sort] button[aria-pressed="true"]:after  {color:#cf0652;}
.tableWrap table thead tr th[aria-sort] button:after {color:#68696e; font-size:10px; margin:0 4px;}
.tableWrap table thead tr th[aria-sort="ascending"] button:after {content:"▲";}
.tableWrap table thead tr th[aria-sort="descending"] button:after {content:"▼";}

/* tbody */
.tableWrap table tbody tr td {border-bottom:1px solid #e5e5e5;  word-break:break-word; white-space:normal;}
.tableWrap table.type01 tbody tr th {border-bottom:1px solid #e5e5e5; font-weight: 400;}
.tableWrap table.type01 tbody tr th, .tableWrap table.type01 tbody tr td {border-right: 1px solid #e5e5e5;}
.tableWrap table.type01 tbody tr td:last-child {border-right: 0;}
.tableWrap table tbody tr td a {font-weight:bold; color:#fc6e51; display:block; text-decoration:underline;}
.tableWrap table tbody tr.active td a {background:#fff; padding:4px; border-radius:20px;}
.tableWrap table tbody tr td .title,
.tableWrap table tbody tr td .description {display:block; text-align:left; white-space:normal; word-break:break-all;}
.tableWrap table tbody tr td .title {padding-top:4px;}
.tableWrap table tbody tr td .description {padding-bottom:6px; line-height:18px;}
.tableWrap table tbody tr td .jsmartable-collapse {display:block; width:28px; height:28px; border-radius:50%; padding:0; filter:grayscale(1); opacity:0.6; margin:0 auto;}
.tableWrap table tbody tr td .jsmartable-collapse:hover {filter:grayscale(0); opacity:1;}
.tableWrap table tbody tr td .jsmartable-collapse:active {filter:grayscale(0.5); opacity:1;}

/* table item */
.tableWrap table tbody tr td .thumb {width:100px; height:60px; background:#e7e7e7; border:1px solid #ccc; display:flex; align-items:center; justify-content:center; position:relative;}
.tableWrap table tbody tr td .thumb img,
.tableWrap table tbody tr td .thumb video {max-width:100px; max-height:60px;}
.tableWrap table tbody tr td .thumb .time {background:#454545; color:#fff; font-size:11px; padding:0 8px; position:absolute; right:0; bottom:0; z-index:1; border-radius:4px 0 0 0;}
.tableWrap table tbody tr td .status {display:flex; justify-content:center; align-items:center;}
.tableWrap table tbody tr td .status.loading:before {position:unset; width:10px; height:10px; margin:0 4px; border:2px solid transparent; border-color:#a50034 #a50034 #a50034 rgba(255,255,255,0); z-index:1;}
.tableWrap table tbody tr td .status.loading:after {display:none;}
.tableWrap table tbody tr td .status.complate {color:#cbcbcb;}
.tableWrap table tbody tr td .status.complate:before {content:''; display:block; width:16px; height:16px; margin:0 4px; background:url(../img/icon/icon_complete.svg)no-repeat; background-size: contain;}
.tableWrap table tbody tr td .labelBox {display:flex; justify-content:center;}

/* table option */
.tableWrap table tr th.left, .tableWrap table tr td.left {text-align:left;}
.tableWrap table tr th.center, .tableWrap table tr td.center {text-align:center;}
.tableWrap table tr th.right, .tableWrap table tr td.right {text-align:right;}
.tableWrap.fixed table {table-layout:fixed;}
.tableWrap.even table tbody tr:nth-child(even) {background:#fafafa;}
.tableWrap.odd  table tbody tr:nth-child(odd) {background:#fafafa;}

/* sticky */
.tableWrap.sticky table {border-top:0;}
.tableWrap.sticky table tr th {position:sticky; top:0; z-index:9; border-top:1px solid #e5e5e5;}

/* line */
.tableWrap.line table thead tr th,
.tableWrap.line table tbody tr td {border-left:1px solid #e5e5e5;}
.tableWrap.line table thead tr th:first-child,
.tableWrap.line table tbody tr td:first-child {border-left:0px;}


/* --------------------------------------------------------
pagination
----------------------------------------------------------*/
.pagination {display:flex; align-items:center; justify-content:center; text-align:center; line-height:normal;}
.pagination a {display:inline-block; vertical-align:middle; position:relative; z-index:2; height:30px; line-height:30px; padding:0 12px; margin:0 2px; color:#7b8796; font-size:12px; text-decoration:none; text-align:center; border-radius:20px;}
.pagination a:first-child,
.pagination a:last-child {padding:0; width:30px;}
.pagination a:hover {background:#eef0f4; color:#767676;}
.pagination a.active {z-index:3; background:var(--main-color); color:#fff;}
.pagination .direction {font-size:24px;}
.pagination .prev:before {content:'\f141';}
.pagination .next:before {content:'\f142';}


/* --------------------------------------------------------
loading
----------------------------------------------------------*/
.loading {position:relative;}
.loading:before {position:absolute; z-index:9999; top:50%; left:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border:4px solid transparent; border-color:rgba(255,255,255,0) var(--main-color) rgba(255,255,255,0) var(--main-color); border-radius:50%; content:""; animation:rotate-loading 0.5s linear 0s infinite normal;transform-origin:50% 50%;-webkit-animation:rotate-loading 0.5s linear 0s infinite normal; -webkit-transform-origin:50% 50%;}
.loading:after {content:""; position:absolute; z-index:9998; top:1px; left:1px; right:1px; bottom:1px; background:rgb(255 255 255 / 80%);}


@keyframes rotate-loading {
	0% {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}



/* ----------------------------------------------
JQUERY UI
------------------------------------------------*/
.ui-helper-hidden-accessible {display:none;}

/* selectMenu */
.ui-state-disabled {background:none; opacity:.35; cursor:default !important;}
.ui-state-disabled:active {border:1px solid #ddd !important; background:none !important;}
.ui-state-disabled:active span {color:#333 !important;}

.ui-selectmenu-button {display:inline-block; position:relative; padding:0 8px 0 16px; overflow:visible; border:1px solid #ddd; border-radius:20px; line-height:40px; vertical-align:middle; box-sizing:border-box;}
.ui-selectmenu-button.ui-button {width:100%; min-width:200px; outline:none; background:#FFF; color:#333; font-size:14px; text-align:left; white-space:nowrap; cursor:pointer;}
.ui-selectmenu-button span.ui-selectmenu-text {display:block; width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ui-selectmenu-button .ui-selectmenu-icon.ui-icon {float:right; margin-top:0;}
.ui-selectmenu-button .ui-selectmenu-icon.ui-icon:before {display:inline-block; content:"\f54f"; font-size:20px; font-family:'Material-Design-Icons'; vertical-align:top; -webkit-font-smoothing:antialiased;}
.ui-selectmenu-button:active ,
.ui-selectmenu-button.ui-selectmenu-button-open {border:1px solid var(--main-color); background:var(--main-color); color:#fff;}
.ui-selectmenu-button.ui-selectmenu-button-open span {color:#FFF;}


.ui-selectmenu-disabled.ui-selectmenu-button:hover {background:#FFF; color:#333;}
.ui-selectmenu-disabled.ui-selectmenu-button:hover .ui-selectmenu-icon.ui-icon:before {background-position:0 -15px;}
.ui-selectmenu-disabled.ui-selectmenu-button:active:after,
.ui-selectmenu-disabled.ui-selectmenu-button.ui-selectmenu-button-open:after {border:0;}


.ui-selectmenu-menu.ui-selectmenu-open {display:block; z-index:9999;}
.ui-selectmenu-menu {display:none; position:absolute; top:0; left:0; margin:0; padding:0;}
.ui-selectmenu-menu .ui-menu {max-height:500px; padding-bottom:1px; overflow:auto; border:1px solid #c5c5c5; outline:none; background:#fff; color:#333; overflow-x:hidden;}
.ui-selectmenu-menu .ui-menu.h260 {height:260px;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item {display:block;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper {display:block; padding:8px; outline:none; color:#666; font-size:14px; cursor:pointer;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper:hover {background:#eee;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-active {background:#4d546c; color:#fff;}
.ui-selectmenu-menu .ui-menu li.ui-selectmenu-optgroup {display:block; padding:8px; color:#444; font-size:14px; font-weight:bold;}
.ui-selectmenu-menu .ui-menu li.ui-state-disabled {border:0 !important;}
.ui-selectmenu-menu .ui-menu li.ui-state-disabled .ui-menu-item-wrapper {cursor:default;}

@keyframes selectShow {
0% {opacity:0; transform:scale(1);-webkit-transform:scale(1);}
10% {opacity:0.6; transform:scale(1.06);-webkit-transform:scale(1.06);}
100% {opacity:1; transform:scale(1);-webkit-transform:scale(1);}
}
/*
@-webkit-keyframes selectShow {
0% {opacity:0; transform:scale(1);-webkit-transform:scale(1);}
80% {opacity:0.6; transform:scale(1.2);-webkit-transform:scale(1.2);}
100% {opacity:1; transform:scale(1);-webkit-transform:scale(1);}
}
*/

/* datepicker */
.ui-datepicker {z-index:200 !important; width:280px; height:auto; margin:5px auto 0; border-radius:4px; background:#333; box-shadow:0 1px 3px rgba(53, 57, 74, 0.4);}
.ui-datepicker a {text-decoration:none;}
.ui-datepicker table {width:100%;}
.ui-datepicker-header {color:#fff; line-height:60px;}
.ui-datepicker-title {font-size:20px; font-weight:bold; text-align:center; color:#fff;}
.ui-datepicker-prev, .ui-datepicker-next {display:inline-block; height:60px; padding:0 10px; overflow:hidden; color:#fff; font-size:12px; text-align:center; cursor:pointer;}
.ui-datepicker-prev:hover, .ui-datepicker-next:hover {color:#FFF;}
.ui-datepicker-prev {float:left;}
.ui-datepicker-next {float:right;}
.ui-datepicker thead {}
.ui-datepicker thead th {padding:5px 0; color:#fff; font-size:6pt; text-transform:uppercase;}
.ui-datepicker tbody td {padding:0;}
.ui-datepicker tbody td.ui-datepicker-today a {background:var(--main-color); color:#FFF;}
.ui-datepicker td span, .ui-datepicker td a {display:inline-block; width:calc(100% - 4px); height:36px; margin:2px; border-radius:50%; color:rgba(255,255,255,0.6); font-size:12px; text-align:center; line-height:36px;}

.ui-datepicker-calendar .ui-state-default {background:rgba(0,0,0,0);}
.ui-datepicker-calendar .ui-state-hover {background:#fff; color:var(--main-color);}
.ui-datepicker-calendar .ui-state-active {position:relative; background:#fff !important; color:var(--main-color) !important;}
.ui-datepicker-unselectable .ui-state-default {background:#f4f4f4; color:#b4b3b3;}
.ui-datepicker-calendar td:first-child .ui-state-active {width:100%; margin-left:0;}
.ui-datepicker-calendar td:last-child .ui-state-active {width:100%; margin-right:0;}
.ui-datepicker-calendar tr:last-child .ui-state-active {height:100%; margin-bottom:0;}
.ui-datepicker-buttonpane {padding:14px 0; overflow:hidden; text-align:center;}
.ui-datepicker-buttonpane button {display:inline-block; margin:0 4px; padding:8px 20px; border:0px; border-radius:20px; background:#444; color:#eee; font-size:12px;}
.ui-datepicker-buttonpane button.ui-datepicker-current {}
.ui-datepicker-buttonpane button.ui-datepicker-close {}

.ui-autocomplete {z-index:300; outline:none; background:#FFF; box-shadow:0 1px 3px rgba(53, 57, 74, 0.4);}
.ui-autocomplete .ui-menu-item {display:block; padding:10px; outline:none; color:#666; font-size:14px; cursor:pointer;}
.ui-autocomplete .ui-menu-item:hover {background:#eee;}


/* tooltip
-------------------------------------*/
.tooltip{padding:5px; background:url(../plugin/tooltip/img/tooltip.gif) no-repeat; opacity:0.85; font-size:11px; filter:alpha(opacity=85);}
.tooltip-inner{max-width:200px;padding:5px 10px;border-radius:3px;background-color:black;box-shadow:0 0 3px rgba(0, 0, 0, 0.25);color:white;text-align:center;pointer-events:none; white-space:nowrap;}
.tooltip-bottom{background-position:top center;}
.tooltip-top{background-position:bottom center;}
.tooltip-left{background-position:right center;}
.tooltip-right{background-position:left center;}


/* --------------------------------------------------------
pdfViwer
----------------------------------------------------------*/
.pdfViwer {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999; background:#2a2a2e; animation:showPop 0.12s;}
.pdfViwer.active {display:block;}
.pdfViwer .pvHeader {display:flex; align-items:center; justify-content:space-between; height:30px;}
.pdfViwer .pvHeader h3 {color:#fff; margin:0 10px;}
.pdfViwer .pvBody {height:calc(100% - 30px);}

@keyframes showPop {
	0% {transform:scale(0.7) translate3d(0, -200px, 0);-webkit-transform:scale(0.7)  translate3d(0, -200px, 0); opacity:0;}
	100% {transform:scale(1) translate3d(0, 0, 0);-webkit-transform:scale(1)  translate3d(0, 0, 0); opacity:1;}
}
@media (max-height:416px) {
	body::before {content:'가로모드는 지원하지 않습니다.'; display:flex; justify-content:center; align-items:center; position:fixed; z-index:999; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); color:#fff; font-size:20px;}
}

@media (orientation: landscape) {
	
}