/*---------로그인*/
.login { display : flex; height : 100%; width : 100%; }
.loginRight { display : flex; flex-direction : column; padding : 56px 72px; width : 580px; }
.loginLeft { animation: .8s loginBg .2s forwards; background-image: url(../images/img/login_bg.png); flex : 1; position: relative; transform: translateX(-100%); }
@keyframes loginBg { from { transition:.2s ease-in-out; }  to { transform: translateX(0%); } }
.loginLeft .logo i { height:28px; width:158px; position: absolute; top: 72px; left: 72px; animation: .4s loginLogo .9s forwards; transform: translateY(-100%); opacity: 0;}
@keyframes loginLogo { from { transition:.2s ease-in-out; }  to { transform: translateY(0%); opacity: 1;} }
.loginForm { display : flex; flex : 1; flex-direction : column; justify-content : center; }
.loginForm ul { display : flex; flex-direction : column; gap : 20px; }
.loginTxt { margin-bottom : 56px; }
.loginTxt strong { font-size : 24px; }
.loginTxt p { font-size : 18px; margin-top : 8px; }
.btn_login { width:100px; }
.loginPassInfo {text-align: center;}

/*---------voc관리*/
.vocCatGroup { display: flex;flex-direction: column; gap:8px; }
.vocCat { display: flex; align-items: center; flex-wrap: wrap;gap: 4px 0; }
.vocCat li { display: flex; align-items: center; }
.vocCat li::after { content: ''; display: inline-block; width:10px;height:10px; background-image: url(../images/icon/arw-line-gray05.svg); background-size: cover; margin: 0 8px; }
.vocCat li:last-child::after { display: none; }
.vocTbl_status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.vocTbl_status>div { width: 60px; }
.vocTbl_status p { margin-left: 4px; font-size: 12px ; color:var(--cr-gray05);  }


/*--직접등록*/
.editRating {background: var(--cr-primary01);padding: 20px;border-radius: 8px;}
.result_charger dl {  display : flex; }
.result_charger dl dt { color : var(--cr-gray05); width : 80px; line-height: 20px; }
.result_charger dl dd { flex:1; line-height: 20px; }
.result_charger { background : var(--cr-primary01); border-radius : 8px; display : flex; gap : 12px; margin-top : 12px; padding : 16px; }
.result_charger_dl { display : flex; flex : 1; flex-direction : column; gap : 10px; }
.result_charger .close { background : var(--cr-white); border-radius : 50px; }

/*--상세*/
.vocDetail_timeline {background: var(--cr-gray01);padding: 20px 24px;border-radius: 12px;}
.vocDetail_timeline>ul {  margin-top: 16px; }
.timeline_count { position: relative; align-items : center; background : var(--cr-gray08); border-radius : 50px; color : var(--cr-white); display : flex; font-size : 13px; height : 20px; justify-content : center; margin-right : 16px; margin-top : 17px; width : 20px; }
.timeline_con { background : var(--cr-white); border-radius : 12px; box-shadow : 0 0 64px var(--cr-gray02); flex : 1; padding : 16px 24px; }
.vocDetail_timeline>ul>li { padding-bottom: 12px; display : flex; position: relative ;}
.timeline_hd { gap:12px; align-items : center; display : flex; justify-content : space-between;}
.timeline_hd>div { align-items : center; display : flex; }
.timeline_hd h2 { font-size : 15px; font-weight : bold; margin-right : 8px; }
.timeline_date { color : var(--cr-gray05); font-size : 14px; }
.timeline_date button { height : 20px; margin-left : 8px; padding : 0; width : 20px; visibility: hidden;}
.timeline_date button i { width:20px; height:20px; }
.vocDetail_timeline>ul>li::before { border : 1px dotted var(--cr-gray03); bottom : -20px; content : ''; display : inline-block; left : 9px; position : absolute; top : 20px; }
.vocDetail_timeline>ul>li:last-child::before { display: none; }
.vocDetail_timeline select { background-color:transparent; }
.timeline_info { margin-top: 16px; }
.timeline_info .form>li { margin-bottom : 0; }
.timeline_info .form { margin-bottom : 0; }
.timeline_info .ipt.view.hAuto {  line-height: 22px; }
.vocDetail_timeline>ul>li.ready { align-items : center; }
.vocDetail_timeline>ul>li.ready .timeline_count { margin-top : 0; background: var(--cr-white); color: var(--cr-gray05); border: 1px dotted var(--cr-gray05);}
.vocDetail_timeline>ul>li.editPoss .timeline_date button { visibility: visible; }
.vocDetail_timeline>ul>li.customerEvalua { align-items: center; }
.vocDetail_timeline>ul>li.customerEvalua .timeline_count  { margin-top:0; }
.rating { display: flex;flex-wrap: wrap; gap:4px; }
.rating li { width:16px;height:16px;background-image: url(../images/icon/ico-star.svg);background-size: cover; }
.rating li.on { background-image: url(../images/icon/ico-star-on.svg); }

.emploInfo {align-items : center;display : flex;gap : 20px;width : 100%;border-bottom: 1px solid var(--cr-gray01);padding-bottom: 32px;}
.emploIcon { align-items : center; background : var(--cr-gray02); border : 4px solid var(--cr-white); border-radius : 24px; box-shadow : 0 0 20px var(--cr-gray02); display : flex; height : 64px; justify-content : center; width : 64px; }
.emploIcon i { height : 20px; width : 20px; }
.emploInfoDetail { display : flex; flex-direction : column; gap : 8px; }
.emploNm strong { font-size : 18px; }

.vocCancelReson {  margin-bottom: 32px; width: 550px;}
.vocCancelReson pre {background: var(--cr-red01);padding: 12px;border-radius: 4px; line-height: 22px; }

/*편집*/
.uploadList { display: flex; flex-wrap: wrap; gap: 8px;}
.uploadList .img img { height : 100%; object-fit : cover; width : 100%; }
.uploadList li { position : relative; }
.uploadList .close {background : var(--cr-gray06);border-radius : 50px;position : absolute;right: 4px;top: 4px;width: 20px;height: 20px;}
.uploadList .img { border-radius : 8px; height : 88px; overflow : hidden; width : 88px; }
.uploadList .close::after, .uploadList .close::before { background : var(--cr-white); }
.uploadList li { display : flex; flex-direction : column; gap : 6px; }

.changeMng { flex:1; display: flex; align-items: center; gap: 12px; }
.changeMng i { width: 16px; height:16px; }
.changeMng a, .changeMng span { max-width: 130px;text-overflow: ellipsis;white-space: nowrap; overflow: hidden; }

.imgList { padding-right: 16px; gap: 12px; display: flex; flex-direction: column; }
.imgList img { width: 100%; }

.vocDetailChkList { display: flex; flex-direction: column; gap:12px; padding-top: 12px; margin-bottom: 12px;}
.vocDetailChkList li { display: flex; align-items: center; gap: 8px; }
.vocDetailChkList li::before { content: ''; display: inline-block; width: 10px; height:10px; background-size: cover; background-image: url(../images/icon/chk-shape-primary.svg); }

.vocDetailLine { border-top:1px solid var(--cr-gray02); margin-top: 20px; }

/*-------------VOC관리*/
/*--충전기목록*/
.charger_list { border : 1px solid var(--cr-gray02); border-radius : 12px; display : flex; flex-direction : column; gap : 32px; margin-left : 32px; padding : 20px; width : 240px; }
.charger_list ul { display : flex; flex-direction : column; gap : 20px; }
.charger_list ul li { border-bottom : 1px solid var(--cr-gray02); display : flex; flex-direction : column; gap : 12px; padding-bottom : 16px; }
.charger_hd { align-items : center; display : flex; font-size : 15px; justify-content : space-between; }
.charger_info { display : flex; flex-direction : column; gap : 8px; }
.charger_info dl { align-items : center; display : flex; justify-content : space-between; }
.charger_info dl dt { color : var(--cr-gray05); }

.charger_selList {gap: 24px;margin-top: 12px;display: none;flex-wrap: wrap;}
.charger_selList.open { display: flex; }
.charger_selList li { display: flex; align-items: center; }


/*-------------사용자관리*/
.authority_list { display : flex; flex-direction : column; gap : 12px; margin-top: 16px; }
.authority_list label { position: relative; align-items : start; border : 1px solid var(--cr-gray01); border-radius : 8px; display : flex; flex-direction : column; gap : 8px; padding : 20px 16px; }
.authority_list label::after {  content: ''; display: none; width:14px;height:14px; position: absolute; right: 20px; top:20px; background-image: url(../images/icon/chk-shape-primary.svg); background-size: cover; }
.authority_hd { align-items : center; display : flex; gap : 12px; }
.authority_hd strong { font-size : 15px; }
.authority_info { color : var(--cr-gray05); }
.authority_list input:checked + label { border-color: var(--cr-primary05); }
.authority_list input:checked + label::after { display: block; }


/*-------------voc배정관리*/
.vocCat.assignVocCat { color: var(--cr-primary05); font-size: 24px; font-weight: bold; }


/*-------------현장담당자관리*/
.locationList { display: flex; flex-direction: column; gap: 16px; }
.locationList>li { display: flex; align-items: center; gap: 6px; }
.locationList>li>.vocCat { border-radius: 50px; padding: 6px 12px; background: var(--cr-gray02); }

/*--권역관리*/

.chkSelCount { border-top: 1px solid var(--cr-gray02); padding-top: 20px; max-height: 100px; overflow: hidden; overflow-y: auto; }


/*-------------공지사항*/
.noticeHd { border-bottom : 1px solid var(--cr-gray01); display : flex; flex-direction : column; gap : 12px; padding-bottom : 16px; }
.noticeCon { flex:1; }
.noticeTitle { font-size : 20px; font-weight : bold; display: flex; align-items: center; gap: 12px; }
.noticeDate { align-items : center;  display : flex; gap : 24px; }
.noticeDate dl { align-items : center; display : flex; gap : 12px; color : var(--cr-gray05); }
.noticeDate dl dd { color : var(--cr-gray06); }
.note-editor { flex:1; }

/*-------------스크립트 관리*/
.scriptDetail { flex:1; margin-left:64px; overflow: hidden; display: flex; flex-direction: column; }
.treeArea { display: flex; flex-direction: column;  overflow: hidden; }
.tree { flex:1; overflow: hidden; overflow-y: auto; }
.scriptDetailList { display: flex; flex-direction: column; gap: 12px; flex: 1; overflow: hidden;overflow-y: auto;}
.scriptDetailList>ul { background:var(--cr-gray01); padding: 20px 32px; border-radius: 12px; margin-bottom: 0;}
.scriptDetailList>ul .ipt{ background: var(--cr-white); }
.scriptDetailList>ul .ipt textarea {height: 130px;line-height: 24px;font-size: 15px;}
.scriptDetailInfo { font-size: 20px; display: flex;align-items: center; gap: 12px; }
.scriptDetailInfo strong::after { content: ''; display: inline-block; width: 12px;height: 12px; background-size: cover; background-image: url(../images/icon/arw-line-gray05.svg); margin-left: 12px;}
.scriptDetailInfo strong:last-child::after { display: none; }
.scriptDetail>.schArea { flex-direction: initial;justify-content: space-between;}

/*-------------매뉴얼 관리*/
.menualPreviewList { display: flex; flex-direction: column; gap:16px; position: relative; width: 300px; }
.menualPreviewList li { display: flex; align-items: center; gap:16px; }
.menualPreviewList li i { width:12px; height:12px; }
.menualPreviewList strong{ flex:1; }
.menualPreviewListImg { width: 500px; }
.menualPreviewImgInfo .close { width:24px;height:24p; background:var(--cr-gray02); border-radius: 50px; }
.menualPreviewListImg iframe { display: block; overflow: hidden scroll; height:282px; width: 100% }