@charset "utf-8";


/* not modal file attach */
.basicFileWrap {}
.basicFileWrap .filebox{position: relative; overflow: hidden; width: 80px; height: 32px; line-height: 32px; border-radius: 5px; text-align: center; background: var(--he-main1); cursor: pointer;}
.basicFileWrap .filebox:before {content:'파일첨부'; color: var(--he-base);}
.basicFileWrap .filebox input{position:absolute; top:0; left:0; filter:alpha(opacity=0); opacity:0; -moz-opacity:0; cursor:pointer !important; width:80px; height:32px;}

.basicFileList {}
.basicFileList .MultiFile-label {margin-top:5px; display:flex; align-items: center; width:100%;}
.basicFileList .MultiFile-label:hover {text-decoration: underline;}
.basicFileList .MultiFile-remove {flex-shrink: 0; background: var(--he-red-dark); width:18px; height:18px; text-align:center; border-radius:3px; cursor:pointer;}
.basicFileList .MultiFile-export {flex-shrink: 0; display: inline-block; border-radius: 50%; width: 18px; height: 18px; margin: 0 2px 0 0; color: var(--he-base); background: var(--he-gray-500); text-align: center; vertical-align: middle;}
.basicFileList .MultiFile-title {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 5px;}

/* modalFileDownForm.jsp */
.previewFileWrap .attachFile {display: none;}
.previewFileWrap .previewFileList {background: var(--he-base); border: 1px solid rgba(var(--he-gray-400-rgb), .6); padding: 0 10px; max-height: 169px; overflow-y: auto;}
.previewFileWrap .fileDownLst {}
.previewFileWrap .MultiFile-label > div {flex-shrink: 0;}
.previewFileWrap .MultiFile-label {padding: 5px 0; display:flex; align-items: center; border-top: 1px dashed var(--he-gray-400);}
.previewFileWrap .MultiFile-label:first-of-type {margin-top: 0; border-top: none;}
.previewFileWrap .MultiFile-remove {margin-right: 5px;}
.previewFileWrap .MultiFile-remove .icn_fileDel {display: inline-block; background: var(--he-red-dark); padding: 4px; border-radius: 3px;}
.previewFileWrap .MultiFile-export {margin-right: 5px; border-radius: 50%; width: 15px; height: 15px; color: var(--he-base); background: var(--he-gray-600); text-align: center; line-height: 15px;}
.previewFileWrap .MultiFile-title {flex-shrink: 1 !important; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.previewFileWrap .MultiFile-title.btnFileDwn {cursor: pointer;}
.previewFileWrap .MultiFile-title.btnFileDwn:hover {text-decoration: underline;}

.MultiFile-btnArea {display: flex; background: var(--he-base); border: 1px solid var(--he-gray-400); border-radius: 5px; margin-left: 5px; overflow: hidden;}
.MultiFile-btn a {background: var(--he-gray-100); display:inline-block; padding:4px 7px; position:relative;}
.MultiFile-btn a:before {content:''; position:absolute; top: 0; bottom:0; left: 0; width: 1px; background: var(--he-gray-400);}
.MultiFile-btn:first-child a:before {display: none;}
.MultiFile-btn a:hover {background: var(--he-gray-200); transition:.3s;}

.previewFileWrap .MultiFile-download .btnFileDwn i {color: var(--he-main1); font-size: 11px; padding: 1px 0;}
.btnPdfView i {color: var(--he-red-dark);} 


.previewFileThumb {margin-top:8px;}
.previewFileThumb ul {background: var(--he-gray-100); border: 1px solid rgba(var(--he-gray-400-rgb), .6);}
.previewFileThumb li {border-top: 1px dashed var(--he-gray-400); padding:10px;}
.previewFileThumb li img {width: 100%; height: auto; cursor: pointer;}
.previewFileThumb li:first-child {border-top: none;}
.previewFileThumb li p {font-size: 12px; margin-top:5px;}
.previewFileThumb li p:before {content: '＊'; color: var(--he-red-dark);}



/* 첨부된 파일 리스트 view 영역 -- 전표작성화면 */
.viewAttachLstWrap {border:1px solid rgba(var(--he-gray-400-rgb),.6);}
.viewAttachLstTit {border-bottom:1px solid rgba(var(--he-gray-400-rgb),.6); background:var(--he-gray-100); padding-left:8px; height:20px; line-height:20px;}
.viewAttachLst {height:88px; overflow-y:auto; padding:4px 0;}
.viewAttachLst li {padding:2px 8px; display: flex; align-items: center;}
.viewAttachLst li>div {flex-shrink: 0;}
.viewAttachLst li>div.attachFile-name {flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.viewAttachLst li>div.attachFile-name:hover {text-decoration: underline;}

.viewAttachLst.dwFileLst li:hover{text-decoration: underline; cursor:pointer;}

.viewAttachLstTit.type02,
.viewAttachLst.type02 {border-left:1px solid rgba(var(--he-gray-400-rgb),.6);}





/* 첨부 모달 영역 */
.attachUpWrap {width:100%; height:360px; position:relative;}
.attachUpWrap * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.attachUpWrap *:before,
.attachUpWrap *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.attachUpWrapIn {padding:8px; height:100%;}
.attachUpLeft {width:35%; height:100%; overflow-y:auto; background-color:var(--he-base); border:1px dashed var(--he-gray-400); border-right:none; position:relative;}
.attachUpRight {width:65%; height:100%; overflow-y:auto; background-color:var(--he-gray-100); border:1px dashed var(--he-gray-400); position:relative;}

/* 파일리스트 영역 */
.attachUpLst {border-left:3px solid var(--he-base); border-bottom:1px dashed var(--he-gray-400); background:var(--he-base); padding:15px 10px; overflow:hidden; display: flex; align-items: center;}
.attachUpLst > div {flex-shrink: 0;}
.attachUpLst:hover {border-left:3px solid var(--he-main1); background:var(--he-gray-100);}
.attachUpLst:nth-child(even) {border-left:3px solid var(--he-gray-100); background-color:var(--he-gray-100);}

.attachUpLst .attachUp-image {width:28px; overflow: hidden;}
.attachUpLst .attachUp-image img {width:100%; min-height:100%;}
.attachUpLst .attachUp-title {margin-left:10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto;}
.attachUpLst .attachUp-button {}
.attachUpLst .attachUp-button a {display:inline-block; height:26px; line-height:24px; padding:0 8px 0 24px; border-radius:3px; transition:.3s; font-weight:400;
										background-size: 14px auto; background-position: center left 7px; background-repeat:no-repeat; margin-left:5px; border:1px solid rgba(var(--he-gray-400-rgb),.6);}
.attachUpLst .attachUp-button a:hover {color:var(--he-base);}
.attachUpLst .attachUp-preview {background-image:url("/images/attach/icon_preview.png"); background-color: var(--he-gray-100);}
.attachUpLst .attachUp-preview:hover {background-color:#2481e8; background-image:url("/images/attach/icon_preview_fff.png");}
.attachUpLst .attachUp-download {background-image:url("/static/images/icon/icon_download.png"); background-color: var(--he-gray-100);}
.attachUpLst .attachUp-download:hover {background-color:#85bd5b; background-image:url("/static/images/icon/icon_download.png");}
.attachUpLst .attachUp-delete {background-image:url("/static/images/icon/icon_delete.png"); background-color: var(--he-gray-100);}
.attachUpLst .attachUp-delete:hover {background-color:#f15642; background-image:url("/static/images/icon/icon_delete.png");}

/* 드래그 & 파일첨부 버튼 영역 */
.dragoverEffect {opacity:0.6; border:3px dotted var(--he-gray-dark);} /* 파일 드래그 됐을때 */
.attachzone {width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	display: flex;
	text-align: center;}
.attachzone .dragdrop {}
.attachzone .dragdropInfoCopy {
	background: url(/static/images/sfa/attachUp_add.png) no-repeat;
	background-position: top center;
	background-size:60px auto;
	width: 100%; padding-top:70px; font-size: 13px;
	font-weight: bold; color: #545454;
}
.attachzone .colorGray { font-size:13px; font-weight:bold; margin:20px 0 27px 0;}
.attachzone .attach {width:110px;}
.attachzone .attachicon {display:block; color:var(--he-base); width:100%; height:100%; font-size:13px; padding:10px 0 10px 28px; cursor:pointer; font-weight:bold; border-radius:3px;
										background-color:var(--he-main1); background-image:url("/static/images/com/web/cloud-upload.png"); background-position:left 14px top 7px; background-repeat:no-repeat; background-size:24px auto;}
.attachzone .attachicon:hover {transition:.3s; background-color:var(--he-main1-hover);}
.attachzone .uploadInputBox {display:none;}




#docUpWrap .attachUpLst .attachUp-title {width:calc(100% - 120px); margin-left:0;}
#docUpWrap .attachUpLst .attachUp-title span {color:#3e99ff;}
#docUpWrap .attachUpLst .attachUp-button {width:80px;}
#docUpWrap .attachUpRight {background:var(--he-base);}






/* 검색박스 */
.attachUpWrap .schArea {margin:10px; background: var(--he-gray-100); border: 1px solid rgba(var(--he-gray-400-rgb),.6);}
.attachUpWrap .sch-box {overflow:hidden; padding:20px;}
.attachUpWrap .sch-box .wrap-inq {width:100%; margin:10px 0 0;}
.attachUpWrap .sch-box .inq-clmn {width:48%;}
.attachUpWrap .sch-box .tit-inq {width:120px;}
.attachUpWrap .sch-box .inq-clmn > div {width:calc(100% - 135px);}
.attachUpWrap .sch-box-footer {text-align:center; border-top:1px solid rgba(var(--he-gray-400-rgb),.6); padding:8px 0;}

.attachUpWrap .tree-panel {margin:0 10px 10px;}
 

 
 
/* 첨부파일 미리보기  > 좌측 썸네일 추가 --- 2023.09.18 yjlee*/
.popFileView-wrap {width: 100%; height: 100%; }
.popFileView-wrap * {box-sizing: border-box;}


.popFileView-head {width: 100%; height: 52px; align-items: center; background: var(--he-main1);}
.popFileView-body {width: 100%; height: calc(100% - 102px);}
.popFileView-foot {width: 100%;  height: 50px;display: flex; justify-content: center; align-items: center; border-top: 1px solid var(--he-gray-400);} 


.popFileView-mTit {padding: 0 20px; color: var(--he-base); font-size: 15px;}
.popFileView-sch {padding: 20px 0 0;}


/*좌측 섬네일 리스트 */
.popFileView-list {overflow-y: auto;  overflow-x: hidden;}

.fileViewLst {border-top: 1px solid var(--he-gray-400);}
.fileViewLst:first-child {border-top: none}
.fileViewLst:nth-child(even) {background-color: var(--he-gray-100);}

.fileViewLst-tit {padding: 10px 8px;}
.fileViewLst-ic img {width: auto; height: 30px;}
.fileViewLst-name {text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

.fileViewLst .btnFileDwn {cursor: pointer; display: inline-block; background-color: var(--he-base); height: 18px; line-height: 18px; padding: 0 4px; border-radius: 8px; border: 1px solid #527ddd; color: #527ddd; font-size: 11px;}
.fileViewLst .btnFileDwn:hover {background-color: #527ddd; color: var(--he-base); transition: .3s;}

.fileViewLst-thum {padding: 0 10px 10px;}
.fileViewLst-thum img  {width: 100%; height: auto; max-height: 200px;}

.fileViewLst-thumBox {border: 1px dashed var(--he-gray-400); width: 100%; height: 80px; background-color: #fff; display: flex; align-items: center; justify-content: center;}
.fileViewLst-thumBox img {width: auto; height: 75%;}

.fileViewLst.hoverTooltipBtn .hoverTooltip {top: auto; right: 9px; left: 9px; bottom: 0; background: var(--he-gray-600); padding: 5px 10px; border-radius: 5px 5px 0 0; line-height: 1.4;}
.fileViewLst.hoverTooltipBtn .hoverTooltip:before {display: none;}
.fileViewLst.hoverTooltipBtn:hover .hoverTooltip {right: 10px; bottom: 10px;}


/* 우측 사이냅 뷰어 */
.popFileViewer {border-left: 1px solid var(--he-gray-400);}
.popFileViewer .findGW {padding: 0;}

/* 뷰어 영역 없이 리스트만 */
.popFileView-list.notThumb {display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; padding: 5px;}
.popFileView-list.notThumb .fileViewLst {width: 200px; height: 147px; margin: 5px; border: 1px solid var(--he-gray-400);}
  
/*  클릭 안내 문구 */
.popFileInfo {display: flex; align-content: center; align-items: center; justify-content: center; width: 100%; height: 100%; flex-wrap: wrap; background: var(--he-gray-100);}
.popFileInfo p {width: 100%; text-align: center; font-size: 15px;}
.popFileInfo p:last-of-type {margin-top: 23px;}
.popFileInfo img {width: 80px; height:  auto;}



/* TOGGLE STYLING */
.radio-toggle {box-sizing: border-box; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch;}
.radio-toggle input {width: 0; height: 0; position: absolute; left: -9999px;}
.radio-toggle input + label {font-size: 13px; padding: 8px 15px; border-radius: 8px 8px 0 0; color: var(--he-base); cursor: pointer;
										box-sizing: border-box; position: relative; display: inline-block; text-align: center; transition: all 0.15s ease-out;}
.radio-toggle input:hover + label {background: rgba(var(--he-base-rgb), .25);}
.radio-toggle input:checked + label {background-color: var(--he-base); color: var(--he-main1); z-index: 1; font-weight: bold;}

 
 
/* 썸네일 이미지 회전 */
.rotateImgWrap {}
.rotateImgWrap ul {overflow: hidden;}
.rotateImgWrap li {position: relative; padding: 0;}

.preview-infoWrap {display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #6f777d; border-bottom: 1px solid #d1d1d1; z-index: 100; position: relative;}
.rotateFileName {margin-right: 10px; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; position: relative;}
.rotateFileName:before {content:'*'; display: inline-block; color: #fff; margin-right: 3px;}

.rotateBtnDiv {flex: 0 0 auto; display: flex; align-items: center;}
.rotateBtn {border: 1px solid #d1d1d1; padding: 6px 10px; display: flex; align-items: center; background: #fff; cursor: pointer; position: relative;}
.rotateBtn:hover {background: #f3fdfd; transition: .3s;}
.rotateBtn i {margin-right: 3px;}
.rotateBtn i > img {width: 17px; height: auto;}
.rotateBtnLeft {border-radius: 5px 0 0 5px;}
.rotateBtnRight {border-radius: 0 5px 5px 0; border-left: none;}

.rotateImgDivWrap {padding: 15px;}
.rotateImgDiv {position: relative; width: 100%; height: 500px;}
.rotateImg {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.rotateImg.landscape {width: 100%; height: auto; max-width: 400px;}
.rotateImg.portrait {width: auto; height: 100%; max-height: 400px;}