@charset "utf-8";

/*
 * Project		:	eAccounting Master
 * File			:	page.css
 * Author		:	YoungJae Lee
 * Date			:	July. 2021
 * Description	:	페이지별 스타일 
 */
 


/* --
	:: 로그인
	loginForm, adminLoginForm, pwResetForm, memberPwInputFrm
----------------------------------------------------------------------------------------------------------------- */
/* CAPS LOCK style */
.css-arrow-multicolor {border-color: transparent transparent rgba(239, 83, 80, .2) transparent; border-style: solid; border-width: 4px; width: 0; height: 0;}
.capslock-alert {padding: 8px 10px; color: var(--he-red); background: rgba(239, 83, 80, .2); padding: 5px 13px; border-radius: 15px; display: inline-block;}

#vWrapper.loginWrap {overflow-y: auto; display: flex; align-items: center; flex-direction: column;}
#vWrapper.loginWrap:before {content:''; position: fixed; top: 0; left: 0; right:0; bottom:0; background-image: url("/images/background/bg_login.jpg"); background-size: cover; opacity: 0.4; filter: blur(5px);}
#vWrapper.loginWrap > div {z-index:1;}

.loginForm {flex-grow: 1; position:relative; display: flex; align-items: center;}
.loginFormBox {width: 55vw; min-width: 950px; max-width: 1000px; border-radius: 30px; display: flex; justify-content: space-between; padding: 50px; margin:0 auto; background:rgba(255,255,255,.9); box-shadow: 0 0 15px 3px var(--he-gray-200);}

.loginHeader {width: 50%; display: flex; flex-direction: column; justify-content: space-between;}
.loginHeader .loginLogo img {width:auto; height: 28px;}
.loginTitle {margin-top: 20px; font-size: 44px; font-family: 'esamanru_Light', sans-serif; position: relative; display: inline-block;}
.loginTitle:after {content: ''; position: absolute; right: -20px; bottom: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--he-gradient);}
.loginStc {font-size: 15px; line-height: 1.5;}

.optionBtnArea {border-radius: 35px; background: var(--he-gray-100); display: inline-flex; align-items: center; padding: 0 15px;}
.optionBtn {font-size: 13px; cursor: pointer; padding: 8px 15px; display: flex; align-items: center; transition: .3s; position: relative;}
.optionBtn:before {content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; background: var(--he-gray-400); width: 2px;}
.optionBtn:first-child:before {display: none;}
.optionBtn i {font-size: 8px; margin-right: 3px;}
.optionBtn:hover {font-weight: bold; color: var(--he-main1);}

.lang-sel-wrap {position:relative; height:36px;}
.lang-sel-wrap i {position:absolute; left:0; top:0; display:inline-block; height:100%; width:40px; background:url("/images/icon/web/icon_lang.png") no-repeat center center; background-size: 20px auto;}
.lang-sel-wrap select {display: block; min-width: 150px; height: 100%; font-size: 14px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; transition: .3s;
									background: #f8feff url("/images/icon/web/select_arrow.png") no-repeat right 13px center; background-size: 8px auto; border: 1px solid #93d8e7; border-radius: 30px; padding-left: 38px; padding-right:30px;}
.lang-sel-wrap select::-ms-expand {display: none;} /* IE 10, 11의 네이티브 화살표 숨기기 */


.loginBody {width: 50%; margin-left: 50px;}

/* 내부사용자, 공급사 선택 */
.loginUser {display: flex; justify-content: center;}
.loginUser .tglIBtn {border: 3px solid var(--he-gray-200); background: var(--he-gray-200); display: inline-flex; align-items: center; justify-content: center; padding: 8px; position: relative; transition: background 600ms ease, color 600ms ease;}
.loginUser .tglIBtn-right {border-radius: 0 18px 18px 0; border-left: none;}
.loginUser .tglIBtn-left {border-radius: 18px 0 0 18px; border-right: none;}
.loginUser i {margin-right: 5px; font-size: 10px;}

input[type="radio"].tglInput {display: none;}
input[type="radio"].tglInput + label {cursor: pointer; min-width: 120px;}
input[type="radio"].tglInput + label:after {content: ""; background: var(--he-gradient); border-radius: 15px; height: 100%; position: absolute; top: 0; transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1); width: 100%; z-index: -1;}
input[type="radio"].tglInput.tglInput-left + label:after {left: 98%;}
input[type="radio"].tglInput.tglInput-right + label:after {left: -98%;}
input[type="radio"].tglInput:checked + label {cursor: default; color: #fff; z-index: 2; transition: color 200ms;}
input[type="radio"].tglInput:checked + label:after {left: 0;}

/* 아이디, 비밀번호 입력 */
.loginInputLst {}
.loginInputLst li {margin-top: 15px; width:100%; height:54px; line-height:54px; border: 1px solid rgba(var(--he-gray-400-rgb),.6); border-radius:35px;}
.loginInputLst li:first-child {margin-top:0;}
.loginInputLst li.inputFocusOut {background:var(--he-base);}
.loginInputLst li.inputFocusIn {background:var(--he-gray-100);}

.loginInputIcon {padding: 0 15px 0 18px;}
.loginInputIcon i {background: var(--he-gradient); -webkit-background-clip: text; background-clip: text; font-size: 20px; color: transparent;}

.loginInputLst .loginInput {width:100%; height:100%; font-size:14px;}
.loginInputLst .loginSelect {display:block; width:100%; height:100%; font-size:14px; border:none; outline:none;
										-webkit-appearance: none; -moz-appearance: none; appearance: none;
										background:transparent url("/images/icon/icon_arwDown.png") no-repeat 90% 50%; /* 네이티브 화살표를 커스텀 화살표로 대체 */}
.loginInputLst .loginSelect:required:invalid {color: var(--he-gray-600);}
.loginInputLst .loginSelect option[value=""][disabled] {display: none;}
.loginInputLst .loginSelect option {color: var(--he-gray-dark); padding:0 10px;}
.loginInputLst select::-ms-expand {display: none;} /* IE 10, 11의 네이티브 화살표 숨기기 */

.loginInputLst ::-webkit-input-placeholder,
.loginInputLst ::-moz-placeholder,
.loginInputLst :-ms-input-placeholder,
.loginInputLst :-moz-placeholder,
.loginInputLst input:-webkit-autofill,
.loginInputLst input:-webkit-autofill:hover,
.loginInputLst input:-webkit-autofill:focus,
.loginInputLst input:-webkit-autofill:active {font-size:14px !important;}

/* 로그인 옵션 영역 */
.loginOptionArea {overflow:hidden; padding: 0 8px; display: flex; align-items: center; justify-content: center;}
.loginOptionArea .rememberPw {}
.loginOptionArea .rememberPw .chk-wrap input[type="checkbox"] + label {font-size:14px;}

.loginOptionArea .resetPw {transition: .3s;}
.loginOptionArea .resetPw:hover {font-weight: bold; color: var(--he-main1);}

/* 로그인 버튼 영역 */
.loginBtnArea {}
.loginBtn {font-size: 15px; width: 100%; height: 54px; cursor:pointer; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 35px;}
.loginBtn span {position: relative; left: 0; transition: all .3s;}
.loginBtn:hover span {left: -10px;}
.loginBtn i {font-size: 12px; position: absolute; right: -10px; top: 3px; opacity: 0;  transition: all .3s}
.loginBtn:hover i {right: -20px; opacity: 1;}

.loginSso {}
.loginSso-desc {position: relative; text-align: center; margin: 30px 0;}
.loginSso-desc:before {content: ''; left: 0; right: 0; top: 7px; position: absolute; border: 1px dashed var(--he-gray-400);}
.loginSso-desc span {background: #fff; position: relative; z-index: 1; padding: 0 10px; color: var(--he-gray-600);}
.loginSse-btns {display: flex; align-items: center;}
.loginSso-btn {margin-left: 15px; width: 50%; height: 54px; position: relative; border: 1px solid rgba(var(--he-gray-400-rgb),.6); border-radius:35px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s;}
.loginSso-btn:first-child {margin-left: 0;}
.loginSso-img {margin-right: 10px;}
.loginSso-img img {width: auto; height: 18px;}
.loginSso-txt {font-size: 15px; position: relative;}

.loginSso-btn:hover {background: var(--he-gray-100);}
.loginSso-btn:hover .loginSso-txt {color: var(--he-main1);}

.loginFloatBtn {position: absolute; bottom: 30px; right: 0px;}

.loginWrap .copy {line-height: 1.4; font-size:12px; text-align: center; position:relative; padding:30px 0 20px;}



/* --
	개인정보 동의, 공급사등록
	vendorRegPage
----------------------------------------------------------------------------------------------------- */
#vWrapper.signWrap {overflow-y: hidden;}
#vWrapper.signWrap:before {content:''; position: fixed; top: 0; left: 0; right:0; bottom:0; background-image: url("/images/background/bg_login.jpg"); background-size: cover; opacity: 0.4; filter: blur(5px);}
#vWrapper.signWrap > div {z-index:1;}

.signFormBox {position: relative; border-radius: 30px; display: flex; justify-content: space-between; background: rgba(255, 255, 255, .9); box-shadow: 0 0 15px 3px var(--he-gray-400); width: calc(100% - 100px); height: calc(100% - 100px); margin: 50px;}

.signFormHead {width: 40%; padding: 50px;}
.signFormHead .signFormLogo img {width:auto; height: 28px;}
.signFormTit {margin-top: 20px; font-size: 44px; font-family: 'esamanru_Light', sans-serif; position: relative; display: inline-block;}
.signFormTit:after {content: ''; position: absolute; right: -20px; bottom: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--he-gradient);}
.signFormDesc {font-size: 16px; line-height: 1.6;}

.signFormBody {width: 60%; height: 100%; overflow-y: auto; padding: 50px; padding-left: 0 !important;}

.signBtnArea {display: flex; align-items: center;}
.signBtn {font-size: 15px; width: 100%; height: 54px; cursor:pointer; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 35px; margin-left: 15px; border: 1px solid var(--he-gray-400); background-color: #fff;}
.signBtn:first-child {margin-left: 0;}
.signBtn span {position: relative; left: 0; transition: all .3s;}
.signBtn.bgMainGra:hover span {left: -10px;}
.signBtn i {font-size: 12px; position: absolute; right: -10px; top: 3px; opacity: 0;  transition: all .3s}
.signBtn.bgMainGra:hover i {right: -20px; opacity: 1;}

/* --- 약관동의 */
.agreeForm {width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 600px;}
.agreeList {flex-grow: 1; display: flex; flex-direction: column; overflow: auto;}
.agreeList .agreeBox {margin-top:30px; height: 50%; display: flex; flex-direction: column;}
.agreeList .agreeBox:first-child {margin-top:0;}

.agreeBoxCheck {flex-shrink: 0; padding: 0 5px;}
.agreeBoxCon {flex-grow: 1; margin-top: 15px; border-radius: 5px; background: #fff; padding: 10px; border: 1px solid var(--he-gray-400); overflow-y: auto;}
.agreeBoxCon .article {margin-top: 20px; line-height: 1.6; font-size: 13px;}
.agreeBoxCon .article:first-child {margin-top: 0;}
.agreeBoxCon .article-title {font-size: 13px;}
.agreeBoxCon .article-text {font-size: 13px; font-weight: normal; margin: 8px 0 0 5px;}
.agreeBoxCon .clause {margin: 8px 0 0 10px;}
.agreeBoxCon .clause-title {font-size: 13px; font-weight: normal;}
.agreeBoxCon .clause-text {margin: 5px 0 0 5px;}

.chkAllBtn {border-top: 1px solid var(--he-gray-400); margin-top: 30px; padding-top: 30px;}


/* --- 업체 정보 등록 */
.vendorRegForm {}

.signList {}
.signList-row {margin-top: 30px;}
.signList-row:first-child {margin-top: 0;}

.signList .titArea {display: flex; align-items: center; padding: 0 10px; font-size: 14px; font-weight: 700; min-height: 27px;}
.signList .warningMsg {font-weight: bold; background: rgba(239, 83, 80, .1); padding: 5px 13px 5px 8px; border-radius: 15px; display: inline-block; color: var(--he-red); margin-left: 15px; position: relative;}
.signList .warningMsg:before {content: "\f05a"; font-family: 'Font Awesome 5 Free'; margin-right: 3px;}

.signList .formArea {margin-top: 10px;}
.signList .input_box {position: relative; display: inline-block; padding: 0 20px; width: 100%; height: 54px; line-height: 54px; border: 1px solid rgba(var(--he-gray-400-rgb), .6); background: #fff; border-radius: 10px;}
.signList .input_box.readOnly {background: var(--he-gray-100);}
.signList .int {width:100%; height:100%; line-height: 54px; font-size:14px;}

.signList .select_box {position: relative; display: inline-block; padding: 0 20px; width: 100%; height: 54px; line-height: 54px; border: 1px solid rgba(var(--he-gray-400-rgb), .6); background: #fff; border-radius: 10px;}
.signList .select_box select {display:block; width:100%; height:100%; font-size:14px; border:none; outline:none;
										-webkit-appearance: none; -moz-appearance: none; appearance: none;
										background: transparent url("/images/icon/icon_arwDown.png") no-repeat top 50% right 0 / 8px auto;}
.signList .select_box select:required:invalid {color: var(--he-gray-600);}
.signList .select_box select option[value=""][disabled] {display: none;}
.signList .select_box select option {color: var(--he-gray-dark); padding:0 10px;}
.signList .select_box select::-ms-expand {display: none;} /* IE 10, 11의 네이티브 화살표 숨기기 */

.confirmBtn {font-size: 15px; width: 180px !important; height: 54px; cursor:pointer; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-left: 10px; border: 1px solid var(--he-main1); color: var(--he-main1); background-color: #fff;}
.confirmBtn:hover {background: var(--he-gray-100); transition: .3s;}


	
	
	
/* --
	:: 에러페이지
	error
---------------------------------------------------------- */
#vWrapper.errorWrap {overflow-y: auto;}
#vWrapper.errorWrap:before {content:''; position: fixed; top: 0; left: 0; right:0; bottom:0; background-image: url("/images/background/bg_login.jpg"); background-size: cover; opacity: 0.4; filter: blur(5px);}
#vWrapper.errorWrap > div {z-index:1;}

.errorDiv {position: relative; padding: 198px 250px;}
.errorLogo {}
.errorLogo img {width:150px; height:auto;}
.errorTitle {margin-top:20px; font-size: 56px; font-weight: bold; text-transform: uppercase;}
.errorTitle span {position: relative;}
.errorTitle span:after {content: ''; position: absolute; right: -30px; bottom: 15px; width: 16px; height: 16px; border-radius: 50%; background: var(--he-gradient);}
.errorPhr {margin-top: 32px;}
.errorPhr p {margin-top: 8px; font-size: 15px;}
.errorButton {position: relative; margin-top: 70px;}
.errorButton:before {content: ''; position: absolute; left: 0; top: 50%; width: 30px; height: 30px; border-radius: 50%; margin-top: -15px; z-index: -1; background: var(--he-gradient);}
.errorButton a {padding-left: 14px; font-size:15px; letter-spacing: 1px;}
.errorButton i {margin-left:8px;}
.errorButton span {color: var(--he-base);}



/* --
	:: 모바일 앱 다운로드 페이지
	appDownPage
---------------------------------------------------------- */
#vWrapper.appDownWrap {overflow-y:auto;}
#vWrapper.appDownWrap:before {content:''; position: fixed; top: 0; left: 0; right:0; bottom:0; background-image: url("/images/background/bg_login.jpg"); background-size: cover; opacity: 0.4; filter: blur(5px);}
#vWrapper.appDownWrap > div {z-index:1;}

.appDownDiv {position: relative; display: flex; flex-direction: column; justify-content: center;  align-items: center; width:100%; height:100%;}
.appDownList {display:block; width: 200px; height:200px; text-align:center; box-shadow: 0px 0px 10px 1px var(--he-gray-600); border-radius:30px; position: relative;}
.appDownList:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.8; border-radius: 30px; background: var(--he-gradient);}
.appDownList > div {position: relative;}
.appDownList.android {margin-top: 60px;}
.appDownImg {margin-top: 25px;}
.appDownImg img {width: 80px; height:auto;}
.appDownTit {font-size:22px; margin-top: 13px; font-weight:bold; color:var(--he-base);}
.appDownSubTit {font-size:15px; color:var(--he-base);}

#vWrapper.mobileVer {overflow:hidden !important;}
#vWrapper.mobileVer .fullOverlay {right:0 !important;}




/* --
	:: [팝업] 구매요청 문서정보
	구매요청 작성 하면 견적, 계약, 발주 등에서 고정되는 정보관련
---------------------------------------------------------- */
.boxDtl-wrap {border-radius: 0 0 8px 8px; border: 1px solid var(--he-gray-300); background: var(--he-gray-100); overflow: hidden; border-top: 2px solid var(--he-main1);}
.boxDtl-head {}
.boxDtl-body {padding: 15px 15px 15px 10px;}

.boxDtl-flex {display: flex; align-items: center;}
.boxDtl-flex.stretch {align-items: stretch;}
.boxDtl-flex .flexArea {flex-grow: 1; overflow: hidden;}
.boxDtl-flex .fixArea {flex-shrink: 0;}
.boxDtl-flex.flexWrap {flex-wrap: wrap;}
.boxDtl-flex.flexWrap > div {flex-basis: 30%; flex-grow: 1;}
.boxDtl-flex.flexWrap > div:not(:nth-child(3n)) {margin-right: 20px;}

.boxDtl-doc {font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 76px; border-radius: 30px; margin-right: 5px; padding: 0 10px; background: #fff; border: 1px solid var(--he-gray-300);}
.boxDtl-doc.st02 {background: var(--he-gray-dark); border: 1px solid var(--he-gray-dark); color: #fff;}

.boxDtl-tit {font-size: 15px; line-height: 1.4; font-weight: 600;}

.boxDtl-dl {display: flex; align-items: center; margin-right: 20px;}
.boxDtl-dl .dtArea {margin-right: 5px; color: var(--he-gray-600);}
.boxDtl-dl .dtArea i {font-size: 12px; margin-right: 3px; color: var(--he-main1); font-style: normal;}
.boxDtl-dl .ddArea {font-size: 14px; font-weight: 600; line-height: 1.4;}

.boxDtl-dl.start {align-items: flex-start;}
.boxDtl-dl.start .dtArea {margin-top: 7px;}
.boxDtl-dl.start .preLine {margin-top: 4px;}

.boxDtlDl-box {display: flex; height: 100%;}
.boxDtlDl-box .boxDtl-dl {margin-right: 15px; border: 1px solid var(--he-gray-300); padding: 10px; border-radius: 8px; flex-direction: column; align-items: stretch; justify-content: space-between; min-width: 150px; background: #fff;}
.boxDtlDl-box .boxDtl-dl:last-child {margin-right: 0;}
.boxDtlDl-box .ddArea {text-align: right;}

.boxDtl-memo {border-radius: 0 8px 8px 8px; background: #fff; border: 1px solid var(--he-gray-300); padding: 8px 13px; white-space: pre-wrap; line-height: 1.6;}


/* --- 발주서 상세 */
.boxDtl-part:not(:first-child) {margin-top: 15px; margin-left: 5px;}
.boxDtlPart-tit {font-weight: bold; display: flex; align-items: center; color: var(--he-main1);}
.boxDtlPart-tit i {font-size: 10px; margin-right: 5px;}

.boxDtlPart-item {background: #fff; border-radius: 8px; border: 1px solid var(--he-gray-300); padding: 15px;}
.boxDtlPart-item .boxDtl-dl {min-height: 32px; margin-right: 0;}
.boxDtlPart-item .boxDtl-dl:not(:first-child),
.boxDtlPart-item:has(.boxDtl-flex) .boxDtl-dl:first-child {margin-top: 8px;}
.boxDtlPart-item .dtArea {width: 100px; flex-shrink: 0;}
.boxDtlPart-item .ddArea {flex-grow: 1;}


/* --- 상태버튼 */
.docStateBtn {font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 76px; border-radius: 30px; margin-right: 5px; padding: 0 10px; color: #fff;}
.docStateBtn i {margin-right: 5px;}
.docStateBtn.st01 {background: #eae9ef; color: #25265e; border: 1px solid #25265e;}	/* dart gray */
.docStateBtn.st02 {background: #f3ebff; color: #6e42a2; border: 1px solid #6e42a2;}	/* violet */
.docStateBtn.st03 {background: #ebeffa; color: #2f61d4; border: 1px solid #2f61d4;} /* blue */
.docStateBtn.st04 {background: #fff6d8 ; color: #bb9322; border: 1px solid #bb9322;} /* yellow */
.docStateBtn.st05 {background: #fff5ed; color: #df7b41; border: 1px solid #df7b41;}	/* orange */
.docStateBtn.st06 {background: #ebf5e7; color: #48a138; border: 1px solid #48a138;} /* green */
.docStateBtn.st07 {background: #deeff4; color: #3e95b0; border: 1px solid #3e95b0;}	/* skyblue */
.docStateBtn.st08 {background: #ffeded; color: #e4140f; border: 1px solid #e4140f;}	/* red */





/* --
	:: 인쇄 폼 기본 스타일
---------------------------------------------------------- */
.print-wrap {}

.print-head {text-align: center;}
.print-tit {font-size: 30px; font-weight: bold; letter-spacing: 20px; text-align: center; display: inline-block; background: var(--he-gray-100); border: 1px solid var(--he-main1); border-radius: 30px; padding: 7px 15px 7px 35px;}
.print-break {margin-top: 50px;}
.print-subtit {font-size: 20px; padding: 7px 15px 50px 15px;}
.empty-cell{
	content: '';
	display: block;
	min-height: 100px;
}






/* --
	:: 첨부파일 다운로드 영역 > noticeView.jsp
---------------------------------------------------------- */
.attachFileWrap {position: relative;}
.attachFileTit {height:20px; line-height:20px; text-align:right; cursor: pointer;}
.attachFileTit a.down {display:inline-block; width:15px; height:20px; background:url("/images/icon/web/attachDown.gif") left center no-repeat;}
.attachFileTit a.up {display:inline-block; width:15px; height:20px; background:url("/images/icon/web/attachUp.gif") left center no-repeat;}
.attachFileTit p {display:inline-block; position:absolute; top:0; right:30px; font-weight:bold; padding-left:15px; background:url("/images/com/web/icon_file_list.png") left center no-repeat; background-size:8px auto;}
.attachFileTit span {display:inline-block; color: var(--he-red); margin-left:5px;}
.attachFileLstWrap {margin:0; display:inline-block; background:var(--he-base); position:absolute; top:100%; right:0;}
.attachFileLstWrap .attachFileLst {border:1px solid rgba(var(--he-gray-400-rgb),.6); border-top:none; background: var(--he-base);}
.attachFileLstWrap .attachFileLst:first-child {border-top:1px solid rgba(var(--he-gray-400-rgb),.6);}
.attachFileLstWrap .attachFileLst:hover {background: var(--he-gray-100);}
.attachFileLst .fileNameTit {display:inline-block; vertical-align:bottom; padding-left:5px; width:200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.attachFileLst .fileSize {font-size:11px; color: var(--he-gray-dark);}
.attachDownBtn {display:block; padding:6px;}



/* --
	:: [팝업] 내 정보 변경
	popUserPrifile.jsp
---------------------------------------------------------- */
.profileWrap {}
.profileHead {display: flex; flex-direction: column; align-items: center;}
 
.profile-imgWrap {position: relative;}
.profile-img {width: 120px; height: 120px; border-radius: 175% / 120%; overflow: hidden; border: 1px solid rgba(var(--he-gray-400-rgb), .8);}
.profile-img .imgNotExist i {font-size: 52px;} 
 
.profile-change {position: absolute; right: -10px; bottom: 0;}
.profile-change .profile-changeBtn {border: 1px solid rgba(var(--he-gray-400-rgb), .8); background: #fff; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;}
.profile-change .profile-changeBtn i {font-size: 14px; color: var(--he-gray-dark);}
.profile-change.is-open .profile-changeBtn {background-color: var(--he-main1);}
.profile-change.is-open .profile-changeBtn i {color: #fff;}
.dropdownWrap .dropdownCon.profile-changeList {border-radius: 10px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.18); width: max-content; right: auto;}
.profile-changeList > div {cursor: pointer; border-top: 1px solid var(--he-gray-300); line-height: 40px; height: 40px; padding: 0 15px; }
.profile-changeList > div:hover {background: var(--he-gray-100);}
.profile-changeList > div:first-of-type {border-top: none;}
.profile-changeList > div.colorRed {font-weight: normal;}

.profile-nameWrap {margin-top: 20px; text-align: center;}
.profile-name {font-size: 22px; font-weight: bold;}
.profile-dep {font-size: 15px; margin-top: 8px;}
.profile-dep span {position: relative; padding-left: 12px;}
.profile-dep span:before {content: ''; position: absolute; left: 5px; top: 2px; bottom: 2px; width: 1px; background: var(--he-gray-500);}
.profile-dep span:first-of-type {padding-left: 0;}
.profile-dep span:first-of-type:before {display: none;}

.profileBody {padding: 0 15px 30px;}
.profile-list {margin-top: 20px;}
.profile-list .title-area {padding: 20px 5px 15px; font-size: 14px;}
.profile-list .title-area i {color: var(--he-main1); margin-right: 5px;}
.profile-list .list-area {}
.profile-list .list-row {display: flex; align-items: center; padding: 10px 0;}
.profile-list .list-row-tit {flex-shrink: 0; width: 175px; color: var(--he-gray-600); display: flex; align-items: center;}
.profile-list .list-row-tit i {font-size: 10px; width: 20px; text-align: center;}
.profile-list .list-row-con {flex-grow: 1;}
.profile-list .list-row-con .inp-wrap {width: 100%; border-radius: 50px; padding: 4px 15px; background: var(--he-gray-100);}
.profile-list .list-row-con .inp-wrap input {width:100%; font-size:13px; line-height:22px;}
 
 

/* --
	:: [팝업] 공지사항 팝업
---------------------------------------------------------- */
.noticePop {display: none;}

.notiWrap {position: fixed; z-index: 200; width: 400px; height: 500px; display: flex; flex-direction: column; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; background: #fff; border-radius: 15px; overflow: hidden;}
.notiBody {flex-grow: 1;}
.notiFooter {flex-shrink: 0; padding: 5px 15px 15px; font-size:13px; display: flex; align-items: center; justify-content: space-between;}

.noti-slider-wrap {width:100%; height:100%; position:relative; display: flex; flex-direction: column;}
.noti-slider {flex-grow: 1; position:relative;}
.noti-slider li {width:100%; height:100%; position: absolute; display: flex; flex-direction: column;}

.notiSlider-head {flex-shrink: 0; padding: 15px; min-height: 74px; display: flex; justify-content: center; flex-direction: column; position: relative; cursor: move;}
.notiSlider-head:before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: -30px; z-index: -2; background: url(/images/background/bg_gradient.jpg) no-repeat; background-size: 200% auto; background-position: center left;}
.notiSlider-head:after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: -30px; z-index: -1; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255));}
.notiSlider-body {flex-grow: 1; display: flex; flex-direction: column; border-radius: 15px; background: #fff; margin: 0 15px 10px; border: 1px dashed var(--he-gray-400); overflow: hidden;}

.notiPopType {}
.notiPopType span {display: inline-flex; border-radius: 30px; color: #fff; height: 24px; align-items: center; padding: 0 8px; text-shadow: 0px 0px 1px rgba(0,0,0,.5);}
.notiPopType.st01 span {background: radial-gradient(circle farthest-corner at 10% 20%, #92a3f2 0%, #74d5be 90%);}
.notiPopType.st02 span {background: radial-gradient( circle farthest-corner at 10% 20%, rgba(253,101,133,1) 0%, rgba(243,195,144,1) 90%);}
.notiPopTit {font-family: 'esamanru_Light', sans-serif; font-size: 15px; margin-top: 10px; line-height: 1.4;}

.notiPopCon {flex-grow: 1; line-height: 1.4; overflow-y: auto; padding: 15px;}
.notiPopCon img {width:100%; height:auto;}
.notiPopCon table {width:100%; height:auto;}
  
.notiPopFile {flex-shrink: 0; border-top: 1px dashed var(--he-gray-400); background: var(--he-gray-100); padding: 0 15px; position: relative;}
.notiPopFile .attachFileTit {height: 30px; line-height: 30px; text-align: left; display: flex; align-items: center;}
.notiPopFile .attachFileTit p {position: static; margin-right: 5px; background: none; padding-left: 0;}
.notiPopFile .attachFileTit p i {color: var(--he-main1); margin-right: 5px;}
.notiPopFile .attachFileLstWrap {top: auto; left: -1px; right: -1px; bottom: 30px;} 

.noti-controls {flex-shrink: 0; padding: 0 0 10px;}
.noti-controls .noti-cont-list {display: flex; align-items: center; justify-content: center;}
.noti-controls .noti-cont-list li {margin-left:7px;}
.noti-controls .noti-cont-list li:first-child {margin-left:0;}
.noti-controls .noti-cont-list li span {display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: var(--he-gray-500); cursor: pointer;}
.noti-controls .noti-cont-list li.active span {background-color: var(--he-main1);}

.notiCloseBtn {display: inline-block; padding: 0px 15px; border-radius: 30px; line-height: 26px; border: 1px solid var(--he-main1); color: var(--he-main1); background: var(--he-gray-100);}
    

.noticePop .notiWrap {top: 55px; left: 180px;}























/* -----------------------------------

	---    eAcc page   ---
	
  ----------------------------------- */ 
    
/* [댓글] */
.comWrap {overflow: hidden; margin-top: 20px;}
.comWrap h4 {font-size:13px;}

.comWrite {margin-top: 5px;}
.comWrap .cke_1.cke_chrome {border-color: rgba(var(--he-gray-400-rgb),.6);}
.comWrap .cke_1 .cke_bottom {border-top-color: rgba(var(--he-gray-400-rgb),.6); background-color: var(--he-gray-100);}
.cmt-regBtn {background: var(--he-gray-100); text-align: right; padding: 5px 5px; border: 1px solid rgba(var(--he-gray-400-rgb),.6); border-top:none;}
.comBtn {display: inline-block; padding: 10px 15px 10px 45px; text-align: center; color: var(--he-base); border-radius: 20px;
				background: var(--he-main1) url(/images/icon/web/commentIcon.png) 16px center no-repeat; background-size: 20px auto;}

.comCount {font-size:13px; padding:15px 5px 10px 5px;}
.comCount span {font-weight:bold; color:var(--he-red);}

.comLstWrap {}
.comLst {display:flex; padding:15px 0 20px; border-top: 1px solid rgba(var(--he-gray-400-rgb),.6);}
.comLst:last-child {border-bottom: 1px solid rgba(var(--he-gray-400-rgb),.6);}

.cmt-userPic {flex-shrink: 0; width: 30px; height: 30px;}
.cmt-userPic img{width: 100%; height: 100%;}

.cmt-data {flex-grow: 1; margin-left:13px; max-width:100%;}
.cmt-data-top {display:flex; justify-content: space-between; align-items:center;}
.cmt-data-mid {margin-top:10px;}
.cmt-data-btm {margin-top:10px; display:flex;}

.cmt-userName {font-weight:bold;}
.cmt-btnArea {display:flex;}
.cmt-btn {display: inline-block; cursor:pointer; background:var(--he-gray-100); padding: 3px 8px; border: 1px solid rgba(var(--he-gray-400-rgb),.6); border-radius: 5px; margin: 0 3px; font-size: 13px;}
.cmt-contents {line-height:1.4;}
.cmt-contents img {max-width: 100%; height: auto !important; margin-top:5px; display:block;}
.cmt-contents table {width: 100% !important; margin-top:5px;}
.cmt-contents table img {max-width: none;}
.cmt-day {}
.cmt-reply {margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(var(--he-gray-400-rgb),.6); cursor: pointer;}
.n-icon {display: inline-block; margin-top:-2px; margin-left: 3px; width: 16px; height: 16px; line-height: 16px; background: var(--he-red); color: var(--he-base); border-radius: 50%;
			font-size: 10px; text-align: center; font-weight: 100; vertical-align: middle;}

.replyComLst {padding:15px 0 15px 47px; border-top:1px dashed rgba(var(--he-gray-400-rgb),.6); background: url(/images/icon/web/icons_down_right.png) no-repeat; background-size: 18px auto; background-position: 15px 17px;}


/* [현황판 > 미확인댓글 : 윈도우팝업] */
.popUnconfirmed {}
.popUnconfirmed-head {display:flex; justify-content: space-between;}
.popUnconfirmed-head .comCount {padding:0 10px; font-weight:bold;}
.popUnconfirmed-body ul {}

.popUnconfirmed-Lst {margin-top:15px; border:1px solid rgba(var(--he-gray-400-rgb), .6); border-radius:10px; overflow:hidden;}
.popUnconfirmed-Lst .bold {font-size:14px;}
.popUnconfirmed-Lst .colorGray {font-size:12px;}

.popUnconfirmed-LstTit {padding: 8px 15px; border-bottom: 1px solid rgba(var(--he-gray-400-rgb), .6); background: var(--he-gray-100);}
.popUnconfirmed-LstCon {padding: 12px 15px; display:flex; justify-content: space-between; align-items:center;}
.popUnconfirmed-LstCon > div {flex-shrink: 0;}
.popUnconfirmed-LstCon > div:first-child {flex: 1 1 auto;}
.popUnconfirmed-LstCon .colorGray {position:relative; padding-left:15px;}
.popUnconfirmed-LstCon .colorGray:before {content:''; position:absolute; left:6px; top:2px; width:2px; height:12px; background: var(--he-gray-500);}

.popUnconfirmed .pop-bottom .pagingLst {margin:0;}


/* [게시판] */
.viewBoardTit {border-top:2px solid var(--he-main1); border-bottom:1px solid rgba(var(--he-gray-400-rgb),.6); padding:13px 10px; background:var(--he-gray-100); font-size:14px;}
.viewBoardInfo{border-bottom:1px solid rgba(var(--he-gray-400-rgb),.6); padding:9px 0; overflow:hidden; background:var(--he-base);}
.viewBoardInfo p{font-weight:bold;}
.viewBoardInfo p span{display:inline-block; padding-left:10px; font-weight:normal;}
.viewBoardCon{padding:15px 15px 30px; border-bottom:1px solid rgba(var(--he-gray-400-rgb),.6);}
.viewContent{padding:30px 5px; line-height:1.6;}
.viewBoardIntro{margin-top:30px;}
.viewBoardIntro span{border-left:3px solid var(--he-main1); padding-left:7px; margin-left:7px;}
.viewBoardIntro div{border:1px solid rgba(var(--he-gray-400-rgb),.6); background:var(--he-gray-100); margin-top:10px; padding:10px 20px;  border-left:none; border-right:none;}

/* [카드영수증] */
.cardReceiptWrap {background:var(--he-base); box-shadow: rgba(var(--he-black-rgb), .3) 0px 0px 3px 0px, rgba(var(--he-black-rgb), .3) 0px 10px 10px -5px; position:relative; width:100%;}
.cardReceiptWrap:after {background-position:0px 0px; bottom:-8px; height:10px; left:0px; position:absolute; width:100%; content: ' '; background:url("/images/eaccounting/texture_paper_zigzag.png") repeat-x 0px 0px;}
.cardReceiptWrapIn {padding:25px 20px;}
.cardReceiptTit {width:100%; text-align:center; font-size:23px; overflow: hidden; word-wrap: break-word;}

.cardReceiptCon {margin-top:25px; position:relative;}

/* [전자결재 테이블] */
.approval-tb-wrap {width:100%;}
.approval-tb-st {width:100%;}
.approval-tb-st th {text-align:center; background:var(--he-gray-100); font-weight:400;}
.approval-tb-st th,
.approval-tb-st td {padding: 5px; border:1px solid rgba(var(--he-gray-400-rgb),.6);}

/* 도장 영역 */
.approval-tb-st.type01 th,
.approval-tb-st.type01 td {padding:2px 0;}
.approval-tb-st.type01 th {width:auto; background:none; font-size:20px; border:1px solid rgba(var(--he-gray-400-rgb),.6);}
.approval-tb-st.type01 td {width:120px; text-align:center; border:1px solid rgba(var(--he-gray-400-rgb),.6);}
.approval-tb-st.type01 .stamp td {height:80px;}
.approval-tb-st.type01 .stamp td img{width:50px; height:auto;}

.appr-stamp-th {background:var(--he-gray-100);}
.appr-stamp-th-red {background:#f1b4b4;}

.indiStamp{display:inline-block; width:60px; height:60px; text-align:center;}
.indiStamp span {display:inline-block; font-family: 'Hanna', sans-serif; font-size:14px;}

.indiStamp.red {background:url("/images/com/new_eAcc/stamp_background_red.png") no-repeat center center; background-size:60px 60px;}
.indiStamp.red span.vertical{width:14px; color:var(--he-red); margin-top:8px;}
.indiStamp.red span.horizontal{color:var(--he-red); margin-top:23px;}

.indiStamp.black {background:url("/images/com/new_eAcc/stamp_background_black.png") no-repeat center center; background-size:60px 60px;}
.indiStamp.black span.vertical{width:14px; color:var(--he-gray-dark); margin-top:8px;}
.indiStamp.black span.horizontal{color:var(--he-gray-dark); margin-top:23px;}

.approval-tb-st.type02 {table-layout:fixed; margin-top:5px;}
.approval-tb-st.type03 th,
.approval-tb-st.type03 td {table-layout:fixed; padding:8px;} /* dtl 같은 경우 : not use input */

.approval-tb-wrap h4 {font-size:13px;}
.approval-tb-wrap .onlyTextArea {padding:7px 10px;}


/* [결재자 리스트 스타일] */
.expnSignLstWrap {padding: 0 5px 10px; display: flex; flex-wrap: wrap;}
.expnSignLst {position: relative; margin: 10px 5px 0; flex: 1 1 auto; max-width: 230px;}
.expnSignLst:before {content: ''; position: absolute; left: 35px; right: 10px; top: 13px; border: 1px dashed var(--he-gray-400);}
.expnSignLst:last-of-type:before {display: none;}

.expnSignLst .seq {width: 25px; height: 25px; line-height: 25px; text-align: center; border-radius: 15px;}
.expnSignBox {border-radius: 0 10px 10px 10px; padding: 8px 15px; margin-top: 10px;}
.expnSign-name {font-size: 14px;}
.expnSign-state {display: inline-block; padding: 3px 6px; border-radius: 8px;}
.expnSign-time {margin-left: 5px; padding-left: 5px; position: relative; font-size: 11px;}
.expnSign-time:before {content: ''; position: absolute; top: 3px; bottom: 3px; left: -2px; width: 1px; background: #fff;}
.expnSign-opn {display: flex; word-break: break-all; line-height: 1.2;}
.expnSign-opn i {font-size: 10px; transform: scaleX(-1); margin-right: 3px; flex-shrink: 0; color: var(--he-main1); margin-top: 3px;}

/* st00 : 결재대기 */
.expnSignLst.st00 .seq {background: var(--he-base); border: 1px solid var(--he-gray-400);}
.expnSignLst.st00 .expnSignBox {background: var(--he-gray-100); box-shadow: 0 0 2px var(--he-gray-400);}
.expnSignLst.st00 .expnSign-state {background: #fff; border: 1px solid var(--he-gray-400);}

/* st01 : 승인*/
.expnSignLst.st01 .seq {background: var(--he-main1); border: 1px solid var(--he-main1); color: #fff;}
.expnSignLst.st01 .expnSignBox {background: #eff5ff; box-shadow: 0 0 2px #91b9ff;}
.expnSignLst.st01 .expnSign-state {background: var(--he-main1); border: 1px solid var(--he-main1); color: #fff;}

/* st02 : 반려*/
.expnSignLst.st02 .seq {background: var(--he-red); border: 1px solid var(--he-red); color: #fff;}
.expnSignLst.st02 .expnSignBox {background: #fff1f1; box-shadow: 0 0 2px #ff9797;}
.expnSignLst.st02 .expnSign-state {background: var(--he-red); border: 1px solid var(--he-red); color: #fff;}


/* 이름 + 삭제버튼 */
.prsnNameLst {display: flex; flex-wrap: wrap;}
.prsnNameLst li {margin: 5px 0 0 5px; background: var(--he-gray-200); border-radius: 0 8px 8px 8px; padding: 5px 5px 5px 10px;}
.prsnNameLst .del {margin-left: 15px; cursor: pointer; background: var(--he-red); width: 22px; height: 20px; border-radius: 8px; line-height: 20px; text-align: center; color: #fff;}



/* 전표 단위 구분선 */
.repeatItemAll .repeatItem {border-top:1px dashed var(--he-gray-400); margin-top:10px;}
.repeatItemAll .repeatItem:first-child {border-top:none;}

/* 부분반려시 */
.repeatItem {position:relative;}
.repeatItem .canceled {position:absolute; top:0; bottom:0; left:0; right:0; box-sizing:border-box; border:3px solid var(--he-red);
									background:url("/images/com/new_eAcc/itemCanceledBg.png");}
.repeatItem .canceled span {display:block; width:100%; height:100%; background:url("/images/com/new_eAcc/itemCanceledIcon.png") no-repeat center center;}