@font-face {
    font-family: Pretendard;
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-style: normal;
}

:root {

/*----colorgraphy*/
--cr-white :#fff;
--cr-black :#000;

--cr-primary01 :#F1F8FF;
--cr-primary02 :#D8F3FF;
--cr-primary03 :#6BD3FF;
--cr-primary04 :#26B0EB;
--cr-primary05 :#0099DB;
--cr-primary06 :#1677FF;
--cr-primary07 :#0958D9;

--cr-gray01 :#F1F4F6;
--cr-gray02 :#E7EDF0;
--cr-gray03 :#CFD6D9;
--cr-gray04 :#D9D9D9;
--cr-gray05 :#6E777C;
--cr-gray06 :#4A5256;
--cr-gray07 :#353C3F;
--cr-gray08 :#222729;

--cr-purple01 :#F5EBFF;
--cr-purple05 :#8556E3;

--cr-green01 :#EBFAEF;
--cr-green05 :#15BD66;

--cr-red01 :#FFF4F4;
--cr-red05 :#FF3636;



}


* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { color:  var(--cr-gray08); font-family: Pretendard; font-size: 14px; letter-spacing: -0.2px; overflow: hidden; }
pre { font-family: Pretendard; font-size: 14px; letter-spacing: -0.2px; word-break: break-all; white-space:  pre-wrap; }
button, input, textarea, select { color:  var(--cr-gray07); font-family: Pretendard; font-size: 14px; border: 1px solid transparent;  border-radius: 4px; padding: 0; background: none; }
li { list-style: none; }
a { color: inherit; display: inline-block; text-decoration: none; cursor: pointer;}
span,li { display: inline-block; }
select { height: 100%; cursor: pointer;background: #fff url(../images/icon/sel-arw.svg) right no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 16px 0 12px;}
select[disabled=""],select[disabled="disabled"] { cursor: default; opacity: 0.2; }
textarea { resize: none; }
input { background: transparent; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type=number] { -moz-appearance: textfield;}
::-webkit-scrollbar {width: 6px;background: transparent;border-radius: 50px; height: 6px; cursor: pointer; }
::-webkit-scrollbar-track { border-radius: 0; }
::-webkit-scrollbar-thumb {background: var(--cr-gray02); width: 6px; border-radius: 50px ;}
::-webkit-scrollbar-thumb:hover { background: #C6D0D9; }

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { box-shadow : 0 0 0px 1000px #fff inset; transition : background-color 5000s ease-in-out 0s; webkit-box-shadow : 0 0 0px 1000px #fff inset; webkit-text-fill-color : #000; }
input:autofill,input:autofill:hover,input:autofill:focus,input:autofill:active { box-shadow : 0 0 0px 1000px #fff inset; transition : background-color 5000s ease-in-out 0s; webkit-box-shadow : 0 0 0px 1000px #fff inset; webkit-text-fill-color : #000; }

/*-------------display*/
.flex { display: flex !important; }
.flexCoulmn { display: flex; flex-direction: column; }
.flexC {display: flex; align-items: center;}
.flexAlignEnd { display: flex; align-items: end; }
.flex1 { flex:1;  }
.flexEnd { display: flex; justify-content: end; }
.flexBetween { display: flex; align-items: center; justify-content: space-between; }
.flexCoulmn_n { flex-direction: initial !important; }
.flexWrap { display: flex; flex-wrap: wrap !important;}
.flexInit { flex: initial !important; }
.block  { display: block; }
.alignStart { align-items: start !important; }

.h100 { height:100% !important }

.visiHide { visibility: hidden; }

/*-------------scroll*/
.scroll { overflow: hidden; flex:1; overflow-y: auto; }
.scroll_n { overflow: hidden !important; }


/*-------------텍스트*/
.txt1 { color: var(--cr-gray06); font-size: 13px;  }
.txt2 { color:var(--cr-gray05); font-size: 13px; }
.txt3 { color:var(--cr-gray06); }

.ft_b { font-weight: bold; }
.ft16 { font-size: 16px; }
.ft18 { font-size: 18px; }
.cr_prim05 { color: var(--cr-primary05) }
.cr_red { color:var(--cr-red05) !important; }
.cr_gray03 { color:var(--cr-gray03) !important; }
.cr_gray05 { color:var(--cr-gray05) !important; }

.lineThrough { text-decoration: line-through; }

.cr_gray05.lineThrough {
    max-width: 70px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/*-------------여백*/
.m-t0 { margin-top: 0px !important; }
.m-t4 { margin-top: 4px; }
.m-t8 { margin-top: 8px; }
.m-t12 { margin-top: 12px; }
.m-t20 { margin-top: 20px; }

.m-r8 { margin-right:8px; }
.m-r12 { margin-right:12px; }
.m-r16 { margin-right:16px; }
.m-r20 { margin-right: 20px; }
.m-r24 { margin-right: 24px; }
.m-r48 { margin-right: 48px; }

.m-b0 { margin-bottom: 0 !important; }
.m-b4 { margin-bottom: 4px; }
.m-b12 { margin-bottom: 12px; }
.m-b16 { margin-bottom: 16px; }
.m-b20 { margin-bottom: 20px !important; }
.m-b24 { margin-bottom: 24px !important; }
.m-b32 { margin-bottom: 32px !important; }
.m-b40 { margin-bottom: 40px !important; }
.m-b48 { margin-bottom: 48px !important; }

.m-l8 { margin-left:8px; }
.m-l16 { margin-left:16px; }

.p-0 { padding: 0 !important }
.p-r40 { padding-right:40px; }

.gap0 { gap:0 !important;}
.gap4 { gap:4px;}
.gap8 { gap:8px; }
.gap12 { gap:12px;}
.gap20 { gap:20px;}

.wd100 { width: 100% !important; }

/*-------------icon*/
i { width: 24px; height: 24px; background-size: cover; display: inline-block; }
.close { width: 24px;height:24px; display: inline-flex;align-items: center; justify-content: center; position: relative ;}
.close::after, .close::before { content: ''; display: inline-block; width: 1px; height: 12px; background: var(--cr-black);transform: rotate(45deg); border-radius: 50px; }
.close::before { position: absolute; transform: rotate(-45deg); }
.close.circle { border-radius: 50px; background: var(--cr-gray04);}
.close.circle::after, .close.circle::before { background: var(--cr-white); }

.logo i { width: 89px; height:16px; background-image: url(../images/icon/logo.svg);}
.logo i.drak { background-image: url(../images/icon/logo_wh.svg); }

.nav-voc { background-image: url(../images/nav/nav-voc.svg);}
.nav-vocDstrb { background-image: url(../images/nav/nav-vocDstrb.svg);}
.nav-repair { background-image: url(../images/nav/nav-repair.svg);}
.nav-user { background-image: url(../images/nav/nav-user.svg);}
.nav-menual { background-image: url(../images/nav/nav-menual.svg);}
.nav-script { background-image: url(../images/nav/nav-script.svg);}
.nav-notice { background-image: url(../images/nav/nav-notice.svg);}

.i20 { width:20px !important; height:20px !important; }

.ico-customer { background-image: url(../images/icon/ico-customer.svg); }
.ico-request { background-image: url(../images/icon/ico-request.svg); }
.ico-electronic { background-image: url(../images/icon/ico-electronic.svg); }
.ico-result { background-image: url(../images/icon/ico-result.svg); }
.ico-lock { background-image: url(../images/icon/ico-lock.svg); }
.ico-account { background-image: url(../images/icon/ico-account.svg); }
.ico-customer { background-image: url(../images/icon/ico-customer.svg); }
.ico-edit { background-image: url(../images/icon/ico-edit.svg);  }
.ico-more { background-image: url(../images/icon/ico-more.svg);  }
.ico-shield { background-image: url(../images/icon/ico-shield.svg);  }
.ico-drag { background-image: url(../images/icon/ico-drag.svg);  }
.ico-location { background-image: url(../images/icon/ico-location.svg);  }
.ico-user { background-image: url(../images/icon/ico-user.svg);  }
.arw-sign { background-image: url(../images/icon/arw-sign.svg); }

/*-------------tab*/
.tab { align-items: center; background: var(--cr-gray02); border-radius: 4px; padding: 2px; height: 40px; display: inline-flex; }
.tab li { height:100%; }
.tab a { padding: 0 12px; height: 100%; display: flex; align-items: center; border-radius: 4px; color: var(--cr-gray05); }
.tab a.on { background: var(--cr-white); color: var(--cr-gray08)}

/*-------------button*/
button { padding: 0 12px; cursor: pointer; font-weight: 600;}
button[disabled=""], button[disabled="disabled"] { cursor:default; background: var(--cr-gray01)  !important; color:  var(--cr-gray04)  !important; }
button.h56 { height:56px; padding: 0 16px; font-size: 16px; }
.btn_p { background: var(--cr-primary05); color:var(--cr-white); }
.btn_s {  background: var(--cr-gray07); color:var(--cr-white);}
.btn_l {  border-color: var(--cr-gray06); background-color: var(--cr-white); }
.btn_l[disabled=""], .btn_l[disabled="disabled"] { background: var(--cr-white) !important; border-color: var(--cr-gray02) !important; color: var(--cr-gray02) !important;  }
.btn_l.prim { border-color: var(--cr-primary05); color:var(--cr-primary05); }
.btn_l.gray02 { border-color:var(--cr-gray02) }
.btn_l.red { border-color:var(--cr-red05); color:var(--cr-red05); }

.btn_txt { text-decoration: underline; }
.btn_circle { background: var(--cr-gray02); border-radius: 50px; padding:  6px 12px; }
.btn_circle.btn_p { background: var(--cr-primary05); color:var(--cr-white); }
.btn_circle.line.red { border-color:var(--cr-red05); color:var(--cr-red05); background: var(--cr-white); }
.btn_circle.line.primary05 { border-color:var(--cr-primary05); color:var(--cr-primary05); background: var(--cr-white); }

.btnArea button{ margin-right:12px; }
.btnArea button:last-child { margin-right:0; }
.btnIcon { padding: 0; width:32px;height:32px; }



/*-------------공통 레이아웃*/
.wrap{ width:100%; height:100%; display: flex; }
.nav {background: var(--cr-primary04);width: 200px;border-radius: 24px;padding: 44px 0 24px 20px;display: flex;flex-direction: column;margin: 20px 0 20px 20px; }
.nav>.menu {flex: 1;display: flex;flex-direction: column;gap: 12px;overflow: hidden;overflow-y: auto;margin-bottom: 32px;}
.nav>.menu a { color:var(--cr-white); display: flex; align-items: center; border-radius: 50px 0 0 50px; padding:16px 20px; }
.nav>.menu a.on { background: rgba(255,255,255,0.2); font-weight: 500; }
.nav>.menu a i { width: 20px;height: 20px; margin-right: 12px; }
.nav>.logo { margin: 0 0 48px 20px; }
.account { position: relative; margin-right: 20px; justify-content: center; background: var(--cr-white); border-radius: 12px; padding:  32px 0 24px; display: flex; flex-direction: column; align-items: center;}
.account .userImg { position: absolute; top: -24px; display: flex; align-items: center; justify-content: center; border-radius: 50px; border:4px solid var(--cr-white) ; width: 48px;height: 48px; background: var(--cr-gray06);}
.account .userImg i {  background-image: url(../images/icon/ico-user.svg); width: 14px;height: 14px; }

.contents { flex:1; padding:32px 48px 24px 48px; display: flex; flex-direction: column; transform:translateX(10%); opacity: 0.2; animation: content .4s forwards;}
@keyframes content { from { transition:.2s ease-in-out; } to { transform:translateX(0); opacity: 1; }}
.pageTitle { font-size: 24px; font-weight: 700; margin-bottom: 32px; }


/*-------------form*/
.ipt input::placeholder, .ipt textarea::placeholder { color:var(--cr-gray04); }
.ipt input:focus, .ipt select:focus, .ipt textarea:focus { outline: none; }
.ipt {  display: flex; align-items: center; border-radius: 4px; border: 1px solid var(--cr-gray02); padding: 0 12px; height: 40px;}
.ipt.noLine { border-color:transparent; padding: 0; }
.ipt input, .ipt select, .ipt textarea { border:none; }
.ipt>label { color: var(--cr-gray05); }
/*.ipt>label+* { padding-left:12px; }*/
.ipt>label+*>* { margin-right:4px; }
.ipt>label+*>*:last-child { margin-right:0; }
.ipt>select { padding-left:0; }
.ipt>div {height: 100%; }
.ipt textarea { width:100%;height:100%; padding: 8px 0; }
.ipt.ipt_date { width:250px; }
.ipt.ipt_date input { width: 100%; }
.ipt.ipt_date span { margin: 0 12px; }
.ipt.ipt_date img { width:14px;height:14px; }
.ipt.ipt_sch, .ipt.ipt_sch input  { cursor: pointer; }
.ipt.ipt_sch::before { margin-right: 8px; opacity: 0.24; content: ''; display: inline-block; width:16px; height:16px; background-image: url(../images/icon/ico-search.svg); background-size: contain; background-repeat: no-repeat }

/*검색영역 안에 있는 경우*/
.ipt_sch1 { display: flex; align-items: center; }
.ipt_sch1 button { margin-left: 8px; background: var(--cr-gray08); padding:0; width: 32px;height: 32px;}
.ipt_sch1 button::before { content: ''; display: inline-block;background-size: cover; background-image: url(../images/icon/ico-search-wh.svg); width: 16px;height: 16px; }

/*파일 업로드*/
.fileUpload input { display: none; }
.fileUpload label { cursor: pointer; align-items : center; border : 1px solid var(--cr-primary05); border-radius : 4px; color : var(--cr-primary05); display : inline-flex; font-weight : 500; height : 40px; justify-content : center; padding : 0 12px; }
.fileUpload.photo label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 2px dotted var(--cr-gray02); color:var(--cr-gray04); width:88px; height:88px; border-radius: 8px;  }
.fileUpload.photo label::before { content: ''; display: inline-block; width:32px;height:32px; background:url(../images/icon/app-ico-img.svg); background-size: cover; }


.form { display: flex; flex-direction: column; margin-bottom: 32px; }
.form:last-child { margin-bottom: 0; }
.formTitle { margin-bottom: 12px; display: flex; align-items: center; font-size: 16px; font-weight: 600;}
.formTitle i { margin-right: 8px; width: 16px; height:16px;  }
.form>li { display: flex;  margin-bottom: 12px; }
.form>li:last-child { margin-bottom: 0; }
.form>li>label { color: var(--cr-gray05); width:150px; margin-right:12px; height:40px; display: flex; align-items: center; }
.form>li>label+* {flex: 1; display: flex; }
.form>li>label.ness::after { content: '*';display: inline-block; color: var(--cr-red05); margin-left: 6px; font-size: 12px; vertical-align: middle;}
.form>li button { height:40px; }
.form>li.h48 button, .form>li.h48 .ipt { height: 48px; }
.cmt { color:var(--cr-gray05); display: none; align-items: center; margin-top: 8px; font-size: 13px;}
.cmt.open { display: flex; animation: cmt .2s forwards; transform: translateY(5px); opacity: 0;}
@keyframes cmt { from{ transition: .2s ease-in-out; } to { transform: translateY(0);  opacity: 1; } }
.cmt::before { background: var(--cr-gray01); content: '!'; width:20px; height: 20px; display: flex;align-items: center; justify-content: center; border-radius: 50px; margin-right: 8px; }
.cmt.err { color: var(--cr-red05); }
.cmt.err::before { color:var(--cr-red05); background: var(--cr-red01); }
.cmt.gray07::before{ content: 'M';background:var(--cr-gray07); color:var(--cr-white)}
.form>li .ipt input, .form>li .ipt select { width:100%; height: 100%; }
.form .iptChk>label { padding:0; }

.formView>li { margin-bottom: 0; }
.form>li .ipt.view { border-color:transparent; padding: 0; }
.form>li .ipt.viewBg { background: var(--cr-gray01); }
.form>li .ipt.viewBg pre { padding: 8px 0; height: auto; text-wrap: balance; line-height: 22px; }

.form>li.col { flex-direction : column; gap : 8px; }
.form>li.col .ipt { flex : inherit; }
.form>li.col>label { height : auto; width : 100%; margin-right:0; }
.form>li.col>label+* { flex: initial !important; }

.hAuto { height: auto !important }


/*-------------contorls*/
.chkArea {display: flex; align-items: center;}
.chkArea .chk { margin-right: 16px; }
.chkArea .chk:last-child { margin-right:0; }
.chkArea.row { flex-direction: column; align-items: flex-start;}
.chkArea.row .chk { margin-bottom: 12px; margin-right: 0; }
.chkArea.row .chk:last-child { margin-bottom: 0; }

.chk input { display: none; }
.chk .chkShape { background: var(--cr-white); width: 20px; height:20px; border-radius: 4px; border: 1px solid var(--cr-gray03); display: flex; align-items: center; justify-content: center;}
.chk .chkShape::after { transition: .2s ease-in-out; transform: scale(0); content: ''; display: inline-block; width: 12px; height:12px; background-size: cover;  }
.chk .chkTxt { margin-left:8px; color: var(--cr-gray05); }
.chk label { display: flex; align-items: center; cursor: pointer; }
.chk input:checked + label .chkShape { background: var(--cr-primary05); border-color: var(--cr-primary05); }
.chk input:checked + label .chkShape::after { transform: scale(1); background-image:url(../images/icon/chk-shape-wh.svg); width: 10px; height: 10px; }
.chk input:checked + label .chkTxt { color: var(--cr-gray07); }

.chk.onlyShape .chkShape { border-color: transparent; }
.chk.onlyShape .chkShape::after { background-image: url(../images/icon/chk-shape-gray04.svg); transform: scale(1);  width: 14px !important; height: 14px !important;} 
.chk.onlyShape input:checked + label .chkShape { background: transparent; border-color: transparent;}
.chk.onlyShape input:checked + label .chkShape::after {background-image: url(../images/icon/chk-shape-primary.svg); }

.chk input[type="radio"] + label .chkShape { border-radius: 50px; }
.chk input[type="radio"] + label .chkShape::after { border-radius: 50px; background: var(--cr-white);}
.chk input[type="radio"]:checked + label .chkShape { background: var(--cr-primary05); }

.chkTab { height: 40px; background: var(--cr-gray02); border-radius: 4px; padding: 2px; display: inline-flex; position: relative; }
.chkTab .chk { height:100%; }
.chkTab .chk label { position: relative; z-index: 1;height:100%; color: var(--cr-gray05); display: flex; align-items: center; padding: 0 12px; }
.chkTab .chk input:checked + label { color: var(--cr-gray08); }
.chkTab span { transition: .2s ease-in-out; display: inline-block; bottom: 2px; top: 2px; background: var(--cr-white); position: absolute; left: 2px; border-radius: 4px; }

/*-------------schArea*/
.schArea { display: flex; flex-direction: column; margin-bottom: 40px; }
.schArea .schCon { margin-bottom: 12px; display: flex; justify-content: space-between;}
.schArea .schCon .ipt { height: 32px; }
.schArea .schCon>div:nth-child(1) { flex-wrap: wrap; gap: 8px 12px; }
.schArea .schCon>div { display: flex; align-items: center; }
.schArea .schCon>div.btnArea { flex:none; }
.schArea .schCon:last-child { margin-bottom: 0; }
.schArea .chkTab { height:32px; }
.schArea button { height: 32px; }

/*-------------empty*/
.empty { align-items : center; flex : 1; flex-direction : column; gap : 12px; margin-top : 64px; display: none; }
.empty i { height : 40px; width : 40px; background-image: url(../images/icon/ico-empty.svg); margin-bottom: 12px; }
.empty ul { color : var(--cr-gray05); display : flex; flex-direction : column; font-size : 13px; gap : 8px; }
.empty strong { font-size : 16px; }
.empty ul li { align-items : center; display : flex; }
.empty ul li::before { background : var(--cr-gray05); border-radius : 50px; content : ''; display : inline-block; height : 4px; margin-right : 8px; width : 4px; }
.empty.open { display: flex; }
.empty.open+.tblBody {  display: none; }


/*-------------tbl*/
table { width:100%; border-collapse: collapse; }
.tbl table th, .tbl table td { text-align: left; padding: 16px 12px;  border-right: 1px solid var(--cr-gray02); border-bottom: 1px solid var(--cr-gray02); word-break: break-all;}
.tbl table th:last-child, .tbl table td:last-child  { border-right-color:transparent; }
.tbl table td { border-color: var(--cr-gray01) }
.tbl table th { padding: 20px 12px;  }
.tbl { flex:1; display: flex; flex-direction: column; overflow: hidden; overflow-y: auto; }
.tblTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tblTop>div { display: flex; align-items: center; }
.tblCount { font-size: 18px;  }
.tblCount>strong { margin-left:12px; }
.tblHd { background: var(--cr-gray01); border-top: 1px solid var(--cr-gray02); padding-right: 6px;}
.tblHd , .tblSort  {  font-weight: 600; }
.tblSort { padding: 0; display: flex; align-items: center; text-align: left; word-break: break-all;}
.tblSort i { width: 12px; height:12px; background-image: url(../images/icon/ico-sort.svg); margin-left: 12px; }
.tblSort.up i { background-image: url(../images/icon/ico-sort-up.svg); }
.tblSort.down i { background-image: url(../images/icon/ico-sort-down.svg); }
.tblBody { flex:1; overflow-y: scroll; }
.tblBody table { table-layout: fixed;}
.tblBody tr { cursor: pointer; }
.tblBody tr td.ellip { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.tblBody.noCursor td, .tblBody tr.noCursor td { cursor: default; }
.tblBody.noCursor tr:hover, .tblBody tr.noCursor:hover { background: transparent; }
.tblBody tr:hover { background: rgb(241 244 246 / 50%); }
.tblBody button { height: 24px; }

.tblBody .selected, .tblBody .selected:hover { background: var(--cr-primary01); }
.tblFooter { display: flex; align-items: center; justify-content: space-between; margin-top:12px; }
.paging { display: flex; align-items: center; }
.paging button { color: var(--cr-gray05); font-weight: normal; width:32px;height:32px; display: flex;align-items: center; justify-content: center; padding: 0; }
.paging button.on { color:var(--cr-primary05) }
.paging>button::before { content: ''; display: inline-block;background-size: cover; background-image: url(../images/icon/arw-line-gray03.svg); width:14px;height:14px; }
.paging>button.max::before { background-image: url(../images/icon/arw-line-max-gray03.svg); }
.paging>button.prev { transform: rotate(180deg); }
.paging>button[disabled="disabled"], .paging>button[disabled=""] { background:none; opacity: 0.5;}


/*-------------tag*/
.tag { font-size: 13px; padding:4px 6px; }
.tag.lightblue { background: var(--cr-primary01); color: var(--cr-primary05); }
.tag.lightgreen { background: var(--cr-green01); color: var(--cr-green05); }
.tag.gray01 { background: var(--cr-gray01); color: var(--cr-gray07); }
.tag.lightred { background: var(--cr-red01); color: var(--cr-red05); }
.tag.lightpurple {  background: var(--cr-purple01); color: var(--cr-purple05); }

.tag_citcle {  border-radius: 50px; padding: 12px 16px;  }
.tag_citcle.gray07 {  background: var(--cr-gray07);  color: var(--cr-white);}
.tag_citcle.gray02 {  background: var(--cr-gray02); }
.tag_citcle.green {  background: var(--cr-green05);  color: var(--cr-white);}
.tag_citcle.blue {  background: var(--cr-primary05);  color: var(--cr-white);}
.tag_citcle.red {  background: var(--cr-red05);  color: var(--cr-white);}
.tag_citcle.sizeS { height:24px; padding: 0 8px; line-height: 24px; }




/*-------------pop*/
.pop { z-index: 5; display: none; position: absolute; right: 0; top: 0; bottom: 0; left: 0; background: rgba(34,39,41,0.2);  justify-content: end; transition: .2s ease-in-out; }
.pop.open { display: flex; }
.popCon { animation: popCon .4s forwards; transform: translateX(50%); background: #fff; padding: 56px 64px 32px; display: flex; flex-direction: column;}
@keyframes popCon { from { transition:.2s ease-in-out  } to { transform:translateX(0); } }
.popHd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.popHd .close { width: 32px;height: 32px; display: flex; align-items: center; justify-content: center;}
.popHd .close::after, .popHd .close::before { height: 20px; width: 2px; }
.popTitle { font-size: 18px; font-weight: 600; }
.popBody { flex:1; overflow: hidden; overflow-y: auto; display: flex; flex-direction: column;}
.popFooter {margin-top: 40px; display: flex; align-items: center; justify-content: space-between; }
.popFooter button {height: 40px; }

/*--alert*/
.alert { align-items : center; justify-content : center; background: transparent; }
.alertCon { transform:translateY(-50%); animation: alerCon .4s forwards; background : var(--cr-white); border-radius : 12px; min-width : 320px; padding : 48px 40px 32px; box-shadow: 0 0 40px rgba(0,0,0,0.1); }
@keyframes alerCon { from { transition:.2s ease-in-out  } to { transform:translateY(0); } }
.alertFooter button { height : 40px;  }
.alertFooter { gap: 12px; align-items : center; display : flex; justify-content : center; margin-top : 32px; }
.alertBody { align-items : center; display : flex; flex-direction : column; gap : 20px; justify-content : center; text-align : center; }
.alertTitle { font-size : 15px; line-height: 22px; }
.alertSub { color : var(--cr-gray05); line-height : 22px; }
.alertIcon { width: 40px; height: 40px; }
.alertIcon.err { background-image: url(../images/icon/ico-alert-notice.svg); }

/*-------------toast*/
.toast { animation: toast .2s forwards; transform:translateY(100%); position: absolute; z-index: 5555; background: rgba(0,0,0,0.8); color: var(--cr-white); right: 24px; bottom:24px; padding: 12px 16px; border-radius: 8px; }
@keyframes toast { from { transition: .2s ease-in-out; } to { transform:translateY(0); } }

/*-------------카테고리tree*/
.categorySetting  { border : 1px solid var(--cr-gray02); overflow: hidden; }
/*depth1*/
.depth1 { width:200px; font-size: 15px; display: flex;flex-direction: column; border-right: 1px solid var(--cr-gray02);}
.depth1_ul { display: flex; flex-direction: column; flex: 1; overflow: hidden; overflow-y: auto; }
.depth1_ul li a {  border-bottom: 1px solid var(--cr-gray02); padding:20px; display: flex; align-items: center; gap: 8px ;}
.depth1_ul li a.on, .depth1_ul li a.on span { font-weight: bold; background: var(--cr-primary01); color:var(--cr-primary05);  }
.depth1_ul li:last-child a  { border-bottom: none; }
.depth1_ul li a span { color:var(--cr-gray04); }
/*depth2*/
.depth2 {  flex : 1; padding : 32px;  display: flex; flex-direction: column; overflow: hidden;}
.depth2_ul { display: flex; flex-direction: column; gap: 20px; flex: 1; overflow: hidden; overflow-y: auto; }
.depth2_ul li { display: flex; align-items: center; gap: 12px; padding-right: 12px; margin-bottom: 0;}
.depth2_ul li .ico-drag { width:16px;height:16px; }
.depth2_ul li .close { margin-left:40px; }

/*-------------datepicker*/
.ui-datepicker { overflow: hidden; background : var(--cr-white); border-radius : 12px; box-shadow : 0 0 20px rgba(0,0,0,0.1); margin-top : 8px; padding : 20px; }
.ui-datepicker-header { align-items : center; border : 1px solid var(--cr-gray02); display : flex; justify-content : center; padding : 12px; position : relative; }
.ui-datepicker-header a { border-radius: 4px; background: var(--cr-gray02); display: flex; align-items: center; justify-content: center; height : 24px; left : 12px; position : absolute; text-indent : -999px; width : 24px; }
.ui-datepicker-header a::before { margin-right: 4px; background-size: cover; content: ''; display: inline-block; background-image: url(../images/icon/arw-line-gray05.svg); width: 12px;height: 12px;}
.ui-datepicker-header a.ui-datepicker-next { left : auto; right : 12px; }
.ui-datepicker-header a.ui-datepicker-prev { transform: rotate(-180deg); }
.ui-datepicker-calendar td>* , .ui-datepicker-calendar th>* { border-radius: 8px; align-items : center; display : flex; height : 32px; justify-content : center; padding : 8px; width : 32px; }
.ui-datepicker-calendar { margin-top : 12px; }
.ui-datepicker-current-day>* { background: var(--cr-primary05); color:var(--cr-white); }
[title="Sunday"] { color:var(--cr-red05) }
[title="Saturday"] { color:var(--cr-primary06); }


/*-------------jstree*/
.jstree-icon { background-size: auto; }
.vakata-context {z-index: 5;box-shadow: 0 0 20px var(--cr-gray02);border: none;background: var(--cr-white);border-radius: 8px; padding: 0; }
.jstree-themeicon { display: none !important; }
.jstree-default .jstree-node {padding: 12px 0;  }
.jstree-default .jstree-closed>.jstree-ocl { background-image: url(../images/icon/arw-fill-gray07.svg); background-position: center center;}
.jstree-default .jstree-open>.jstree-ocl { background-image: url(../images/icon/arw-fill-gray07.svg);  transform: rotate(-90deg);  background-position: center center;}
.jstree-default .jstree-leaf>.jstree-ocl { background:none; }
.jstree-default .jstree-node { background: none; }
.jstree-default .jstree-anchor { width:100% }
.jstree-rename-input { height:  32px !important; }

.jstree-container-ul>li { border-bottom: 1px solid var(--cr-gray01); }

.jstree-default .jstree-clicked { box-shadow: none; background: transparent !important;}
[aria-selected="true"] {  color: var(--cr-primary05); background: var(--cr-primary01) !important;  }
.jstree-default .jstree-search { background: #fff1c8; font-style: normal; color: var(--cr-gray07); }
.vakata-context li>a>i, .vakata-context li>a .vakata-contextmenu-sep { display: none; }
.vakata-context li>a {padding: 8px 20px; border-bottom: 1px solid var(--cr-gray02);}
.vakata-context li:last-child a { border-bottom: none; }
.vakata-context-separator { display: none !important; }
.vakata-context li>a:hover { box-shadow: none; background: var(--cr-primary01); }
.jstree-children { margin-top: 12px; }

/*기본 레벨 3으로 설정*/
[aria-level="3"] { padding: 6px !important }
[aria-level="3"] a::before { margin-right: 16px; content: ''; background-size: cover; display: inline-block; width:12px;height:12px;background-image: url(../images/icon/ico-drag.svg); }
[aria-level="3"] i { display: none !important; }


/*-------------swiper*/
.swiper { height : 100%; width : 100%; }
.swiper-slide { align-items : center; background : #fff; display : flex; font-size : 18px; justify-content : center; text-align : center; }
.swiper-slide img { display : block; height : 100%; object-fit : contain; width : 100%; }

/*-------------loading*/
.loading { z-index: 55; align-items : center; background : rgba(0,0,0,0.1); bottom : 0; display : none; justify-content : center; left : 0; position : absolute; right : 0; top : 0; }
.loading.open { display: flex; }
.loadingCon { background : var(--cr-white);border-radius: 24px; padding: 60px;}
.loadingBody {position: relative; }
.loadingBody span { border-radius: 50px; }
.loadingInner { left : 50%; margin-left : -30px; margin-top : -32px; position : absolute; top : 50%; }
.loadingInner span { border : 30px solid transparent; position: absolute; left:0; top: 0; height: 0; width: 0; transform:rotate(45deg); }
.loadingTxt { margin-top: 16px; text-align: center; color: var(--cr-gray06); }

.loadingOuter{ margin: 0 auto; display: block; animation : rotation 0.8s linear infinite; background-color : transparent; border : 2px solid var(--cr-primary05); border-top-color : transparent;  height : 100px; width : 100px; }
.loadingInner span:nth-child(1) { border-color: var(--cr-primary06); border-right-color : var(--cr-primary03); border-top-color :  var(--cr-primary03);  }
.loadingInner span:nth-child(2), .loadingInner span:nth-child(3)  { border : 30px solid transparent; }
.loadingInner span:nth-child(2) { animation : showLeft 2s linear infinite; border-bottom-color : var(--cr-primary04); border-left-color :  var(--cr-primary04);; z-index : 6; }
.loadingInner span:nth-child(3) { animation : showRight 2s linear infinite; animation-delay : 0.50s; border-bottom-color : var(--cr-primary05); border-left-color : var(--cr-primary05); z-index : 5; }

@keyframes rotation { from { transform : rotate(0deg); } to { transform : rotate(-360deg); } }
@keyframes showLeft { from { transform : rotate(45deg); } 25% { transform : rotate(-135deg); }	50% { transform : rotate(-135deg); }75% { transform : rotate(-315deg); }to { transform : rotate(-315deg); }}
@keyframes showRight { from { transform : rotate(45deg); z-index : 6; }	25% { transform : rotate(-135deg); }50% { transform : rotate(-135deg); z-index : 6; }50.001% { transform : rotate(-135deg); z-index : 5; }75% { transform : rotate(-315deg); z-index : 5; }99.999% { transform : rotate(-315deg); z-index : 5; }	to { transform : rotate(-315deg); z-index : 6; } }


/*-------------bootstrap.css custom*/
.modal-header .close { text-indent: -99999px; margin: 0; padding: 0; width: 32px; height: 32px;}
.modal-header .close::after, .modal-header .close::before { height: 20px; width: 2px; }
.btn-primary,.btn-primary:hover { background:var(--cr-primary06) }
.btn.disabled,.btn[disabled],fieldset[disabled] .btn { cursor: default; background: var(--cr-gray01)  !important; color:  var(--cr-gray04)  !important;  }

.ui-sortable-handle { cursor: pointer; }