@charset "utf-8";

/*
 * Project		:	헬로SFA
 * File			:	page.css
 * Author		:	youngjae lee
 * Date			:	March 2018.
 * Description	:	서브 페이지 개별 스타일 
 */
 
 
 
/* ---------------------------------------
	:: 로그인
	loginForm, 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; background: var(--he-gray-200);}
#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; background-position: top center; opacity: 0.3; filter: blur(3px);}
#vWrapper.loginWrap > div {z-index:1;}

.loginForm {flex-grow: 1; position:relative; display: flex; align-items: center;}
.loginFormBox {width: 60vw; min-width: 950px; max-width: 1000px; border-radius: 30px; display: flex; justify-content: space-between; padding: 80px 60px; margin:0 auto; background: #fff; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;}

.loginHeader {width: 50%; display: flex; flex-direction: column; justify-content: space-between;}
.loginHeader .loginLogo img {width:auto; height: 40px;}
.loginTitle {margin-top: 5px; font-size: 44px; font-family: 'esamanru_Light', sans-serif; position: relative; display: inline-block;}
.loginTitle:after {content: ''; position: absolute; right: -20px; bottom: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--he-main1);}
.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 .rememberPw .chk-wrap input[type="checkbox"]:checked + label span {border-color:var(--he-gray-600); background-color:var(--he-gray-600);}

.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;}



/* --
	개인정보 동의, 회사등록
	privacyAgree, companyRegPage
----------------------------------------------------------------------------------------------------- */
#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: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--he-main1);}
.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;}





/* ---------------------------------------
	:: 에러페이지
------------------------------------------ */
#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-main1);}
.errorButton a {padding-left: 14px; font-size:15px; letter-spacing: 1px;}
.errorButton i {margin-left:8px;}
.errorButton span {color: var(--he-base);}



/* ---------------------------------------
	:: 비밀번호 변경
------------------------------------------ */
.pwdChgWrap {background: var(--he-gray-100) !important; overflow-y:auto !important;}

.pwdHeader {width:100%; padding:70px 0; text-align:center; background:url("/static/images/background/bg_login.jpg") no-repeat center !important; background-size: cover !important; position: relative; z-index: 1;}
.pwdHeader:before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: black; opacity: 0.6; z-index: -1;}
.pwdHeader h1 {font-size: 1.6rem; color:var(--he-base); font-weight:300; background:url("/static/images/icon/icon_padlock.png") no-repeat top center; background-size:40px auto; padding-top:50px; margin-bottom:30px;}
.pwdHeader p {color:var(--he-base); font-size:1.2rem; line-height:1.6;}
.pwdHeader p span {font-size:1.3rem; font-weight:bold;}

.pwdBody {background:var(--he-base); border:1px solid rgba(var(--he-gray-400-rgb),.6); width:600px; height:auto; margin:40px auto; padding:30px; border-radius:18px;}

.pwdInfo {font-size:1.0rem; line-height:1.6; padding-bottom:25px;}

.pwdForm {margin-top: 25px;}
.pwdForm li {margin-top:15px; width:100%; height:54px; line-height:54px; border: 1px solid rgba(var(--he-gray-400-rgb),.6); border-radius:35px;}
.pwdForm li:first-child {margin-top:0;}
.pwdForm li.inputFocusOut {background:var(--he-base);}
.pwdForm li.inputFocusIn {background:var(--he-gray-100);}

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

.pwdForm .pwdInput {width:100%; height:100%; font-size:14px;}

.pwdBtn {width:100%; overflow:hidden; margin-top:30px; text-align: center;}
.pwdBtn a {height:46px !important; line-height:46px !important; padding:0 !important; display:inline-block; width:calc(50% - 3px); text-align:center; font-size:13px;}
.pwdBtn a:first-child {margin-right:6px;}







/* ---------------------------------------
	:: 전자결재 기안문 관련 스타일
------------------------------------------ */
.docInfoWrap {border-right: 1px solid var(--he-gray-400); background: var(--he-gray-100);}
.docFormWrap {padding: 0 30px 30px;}
.docFormTit {text-align: center; font-size: 20px; margin: 50px 0 30px; font-weight: bold;}

.form-wrap {}
.form-box {margin-top: 10px; background: #fff; padding: 15px; border-bottom: 1px solid var(--he-gray-400);}
.form-box:first-of-type {margin-top: 0;}
.form-head {display: flex; align-items: center; justify-content: space-between;}
.form-head .title {font-size: 14px; font-weight: bold;}
.form-head .title i {color: var(--he-main1); margin-right: 5px;}
.form-body {margin-top: 15px;}
.form-body .viewAttachLstWrap {border-radius: 5px;}
.form-body .viewAttachLstTit {padding: 8px 15px; font-weight: bold; height: auto; line-height: unset;}

.formBody-box {border: 1px solid var(--he-gray-400); border-radius: 5px; overflow: hidden; margin-top: 15px;}
.formBody-box:first-of-type {margin-top: 0;}
.formBody-box .title {background: var(--he-gray-100); padding: 8px 15px; border-bottom: 1px solid var(--he-gray-400); font-weight: bold;}
.formBody-box .list {padding: 10px 15px; max-height: 200px; overflow-y: auto;}
.formBody-box .list p {line-height: 24px;}

.form-wrap .sel-wrap {height:42px; padding: 0 10px; border-radius: 5px; cursor: pointer;}
.form-wrap .sel-wrap  select {height: 100%; cursor: pointer;}

.appr-table {width: 100%;}
.appr-table table {table-layout:fixed;}
.appr-table table th,
.appr-table table td {text-align:center; width: 100px; height: auto; font-feature-settings: 'tnum'; line-height: 1.5;}

.referPerson {display: flex; flex-wrap: wrap; max-height: 75px; overflow-y: auto;}
.referPerson li {line-height: 1.6;}
.referPerson li i {margin: 0 8px 0 3px;}
.referPerson li:last-child i {display: none;}

.error-message {position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding-right: 25px; padding-left: 8px; color: var(--he-red); font-weight: bold;  background: rgba(255, 199, 198, .95); cursor: pointer; line-height: 30px; display: inline-block; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
.error-message:after {font-family: "Font Awesome 5 Free"; content: "\f00d"; display: inline-block; font-size: 12px; position: absolute; right: 8px; }



/* ---------------------------------------
	:: 공지사항 레이어팝업
------------------------------------------ */
.noticePop {display:none; z-index: 201; position: fixed; left:100px; top:80px; box-shadow: 0px 0 10px 0px rgba(0,0,0,0.3); width:600px; height:500px;}
.noticePopWrap {overflow:hidden; background:#fff; width:100%; height:100%; border:1px solid rgba(197,197,197,.6); display: flex; flex-direction: column;}
.top-notice .noticePopTit {background: #ff7070; color: white;}
.noti-slider-wrap {width:100%; height:100%; position:relative;}
.noti-view {width:100%; height:100%; position:relative;}
.pop-btn {text-decoration: underline; color: #868686; margin-left: 8px; font-size: 0.9em;}
.move-page {color: #ff8d3a;}
.top-notice .noticePopWrap .noticePopTit .pop-btn {color: #fff; !important;}

.noti-slider {height:94%; position:relative;}
.noti-slider > li {width:100%; height:100%; position:absolute;}
.noticePopTit {border-bottom:1px solid rgba(197,197,197,.6); background: #f5f4f8; height:40px; display: flex; align-items: center; padding:0 15px; font-weight:bold; font-size:15px; cursor:move;}
.noticePopTit a {display:inline-block; max-width: 370px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration: underline !important; line-height: 40px;}
.noticePopTit a:hover {text-decoration: underline;}

.noticePopCon {height: 100%; padding:10px 15px!important; overflow-y:auto; line-height: 1.6;}
.noticePopCon img {width:100% !important; height:auto !important;}
.noticePopCon table {width:100% !important; height:auto !important;}

.noti-slider-wrap .noti-controls {display: flex; justify-content: center; align-items: center; border-top: 1px solid rgba(197,197,197,.6); position: absolute; width: 100%; height: 30px; background-color: #fff; box-sizing: border-box;}
.noti-slider-wrap .noti-cont-list li {display: inline-block; margin-left:7px;}
.noti-slider-wrap .noti-cont-list li:first-child {margin-left:0;}
.noti-slider-wrap .noti-cont-list li span {display:block; width:11px; height:11px; border-radius:50%; background-color:#909090; cursor:pointer;}
.noti-slider-wrap .noti-cont-list li.active span {background-color:var(--mainColor);}

.notiFooter {background:#414141; padding:5px 15px; font-size:12px; color:#fff; overflow:hidden; box-shadow:4px 0 5px 0 rgba(0,0,0,0.3); width:371px}
.notiFooter input {display:inline-block; width:16px; height:16px; vertical-align:middle; margin-right:5px;}

.noticePopFile {border-bottom:1px solid rgba(197,197,197,.6); width:100%; position: relative;}
.noticePopFile .popAttachFileLstWrap {background: #fff;position: absolute;top: 90%;right: 0;line-height: 1.2;}
.noticePopFile .attachFileTit {font-weight: bold;height:25px; line-height:25px;text-align: right;padding: 0 20px;}
.noticePopFile .attachFileTit p {display:inline-block;font-weight:bold;}
.noticePopFile .attachFileTit .showAttLstBtn {margin-left:3px;}
.noticePopFile .attachFileTit .ab {cursor: pointer;right: 10px;top: 0;}
.noticePopFile .popAttachFileLst {display:none; padding: 5px;border: 1px solid #d8d8d8;border-top: none;background: #fff;}
.noticePopFile .popAttachFileLst i {font-size: 11px;}
.noticePopFile .popAttachFileLst:first-child {border-top:1px solid rgba(197,197,197,.6);}
.noticePopFile .popAttachFileLst .attachViewBtn:hover span {text-decoration: underline;}
.noticePopFile .popAttachFileLst .fileNameTit {display:inline-block; vertical-align:bottom; padding-left:3px; width:200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.noticePopFile .popAttachFileLst .fileSize {font-size:11px; color:#666;}
.noticePopFile .attachDownBtn {margin-left: 5px;}



/* ---------------------------------------
	:: 유저 프로필 팝업
------------------------------------------ */
.profile-wrap {}
.top-area {margin-bottom:15px;}
.user-pic {display:block;width:90px;height:90px;border-radius:70px;margin:0 auto;overflow:hidden;}
.user-pic a {display:block; width:100%; height:100%;}
.user-pic img {width:100%;height:100%;}
.user-i {display:block;width:120px;margin:15px auto;text-align:center;}
.user-i .name {font-size:16px;}
.user-i .group {color:#989898;}
.bottom-area {}
.btn-area {text-align:center;}
.profile-wrap .btn {border-radius:2px; overflow:hidden;} 

.profilePop {display:none; Z-INDEX: 201; POSITION: fixed; left:633px; top:112px; box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.3); width:400px; height:590px;}
.profilePopWrap {overflow:hidden; border-left:1px solid #d4d4d4; background:#fff; width:100%; height:100%; bax-sizing:border-box;}
.profilePopTit {cursor: move; background:#504b56; color:#fff; height:36px; line-height:36px; padding:0 15px; font-weight:bold; font-size:14px;}
.profilePopCon {color:#555; height:calc(100% - 86px); padding:10px 15px; overflow-y:auto;}
		
.profilePopFooter {text-align:right; padding:0 10px; background:#504b56; height:30px; line-height:30px; font-size:13px; color:#fff; overflow:hidden; box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.3);}



/* ---------------------------------------
	:: 첨부파일 다운로드 영역
------------------------------------------ */
.attachFileWrap {position: relative;}
.attachFileTit {position:relative; cursor: pointer; display: flex; align-items: center;}
.attachFileTit a {margin-left: 5px; display:inline-block; width:15px; height:20px;}
.attachFileTit a.down {background:url("/static/images/icon/web/attachDown.gif") left center no-repeat;}
.attachFileTit a.up {background:url("/static/images/icon/web/attachUp.gif") left center no-repeat;}
.attachFileLstWrap {display:inline-block; background:#fff; position:absolute; top: 28px; right: 0; min-width: 500px;}
.attachFileLstWrap .attachFileLst {border:1px solid var(--he-gray-400); padding: 10; border-top:none;}
.attachFileLstWrap .attachFileLst:first-child {border-top: 1px solid var(--he-gray-400);}
.attachFileLstWrap .attachFileLst:hover {background: var(--he-main1); color: #fff;}
.attachDownBtn {display:block;}
.attachFileLstWrap .attachFileLst a {display: flex; align-items: center;}
.attachFileLstWrap .attachFileLst a img,
.attachFileLstWrap .attachFileLst a .fileSize {flex-shrink: 0;}
.attachFileLstWrap .attachFileLst a .fileNameTit {flex-grow: 1; margin: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}



/* ---------------------------------------
	:: 게시판
------------------------------------------ */
.viewBoardTit {border-top:2px solid var(--he-main1); border-bottom:1px solid var(--he-gray-400); padding: 15px; background: var(--he-gray-100); font-size:14px; font-weight:500; display: flex; align-items: center;}
.viewBoardInfo {border-bottom:1px solid var(--he-gray-400); padding: 8px 15px; background:#fff; display: flex; align-items: center; justify-content: space-between;}
.viewBoardInfo .attachFileTit {}
.viewBoardWrap {border-left: 1px solid var(--he-gray-400); border-right: 1px solid var(--he-gray-400);}

.viewBoardCon {padding:15px 15px 30px; border-bottom:1px solid #d8d8d8;}
.viewBoardCon {}

.viewContent {padding:30px 5px; line-height:1.6;}
.viewBoardIntro {margin-top:30px;}
.viewBoardIntro span {border-left:3px solid #2a7fb8; padding-left:7px; margin-left:7px;}
.viewBoardIntro div {border:1px solid #e3e8ef; background:#f1f4f8; margin-top:10px; padding:10px 20px;  border-left:none; border-right:none;}



/* ---------------------------------------
	:: 거래명세표
------------------------------------------ */
.invoiceWrap {font-feature-settings: 'tnum';}
.invoiceTable {border-top: 2px solid var(--he-blue);}

.invoiceItem {border: 2px solid var(--he-blue); border-top: none;}
.invoiceItem tr {height: 32px; border-top: 1px solid var(--he-blue);}
.invoiceItem th {color: var(--he-blue); text-align:center; overflow:hidden; border-left:1px solid var(--he-blue); background: var(--he-gray-100);}
.invoiceItem td {text-align: left; overflow: hidden; border-left: 1px solid var(--he-blue); line-height: 1.6; padding-left: 5px;}
.invoiceItem td.t-c {text-align: center; padding-left: 0;}
.invoiceItem td.t-r {text-align: right; padding-left: 0; padding-right: 5px;}
.invoiceItem td.empaBg {background: var(--he-gray-100);}

.invoiceItem tr:first-child {border-top: none;}
.invoiceItem tr th:first-child,
.invoiceItem tr td:first-child {border-left: none;}
.invoiceItem thead tr:last-child {border-bottom: 1px solid var(--he-blue);}

.invoiceItem .bd-l {border-left:1px solid var(--he-blue) !important;}

.invoiceItem span {display: inline-block;}

.invoiceStamp {width: 70%; height: auto;}



/* ---------------------------------------
	:: 카드영수증
------------------------------------------ */
.cardReceiptWrap {background:#fff; box-shadow: rgba(0, 0, 0, 0.298039) 0px 0px 3px 0px, rgba(0, 0, 0, 0.298039) 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("/static/images/sfa/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;}



/* ---------------------------------------
	:: 모바일 앱 다운로드
------------------------------------------ */
.app-bg-form {width:100%; height:100%; position:relative;}
.installBtn {width:100%; position:absolute; top:40%; left:50%; margin-left:-49%; margin-top:10px;}
.installBtn li {float:left; width:50%;}
.installBtn li  > div {padding:30px; margin:0 15px; border-radius:5px; text-align:center;}
.installBtn li span{display:block; font-size:22px;}

.installBtn li.androidBtn > div {background:#576271; color:#fff;}
.installBtn li.androidBtn img{height:164px; width:auto;}
.installBtn li.iosBtn > div {background:#fff; color:#576271; border:1px solid #d8d8d8;}
.installBtn li.iosBtn img{height:162px; width:auto;}