@charset "utf-8";
/*
 * File			:	page.css
 * Author		:	youngjae lee
 * Date			:	August 2018.
 * Description	:	서브 페이지 개별 스타일 
 */



/* --
	"비밀번호 변경" 레이아웃
----------------------------------------------------------------------------------------------------- */
.pwdChgWrap {background:#f2f2f5 !important; overflow-y:auto !important;}
.pwdHeader {width:100%; padding:80px 0; text-align:center; background:url("/static/images/common/viewChangePw_bg.png") no-repeat center !important; background-size: cover !important;}
.pwdHeader h1 {font-size: 1.8rem; color:#fff; font-weight:300; background:url("/static/images/common/padlock.png") no-repeat top center;
						background-size:40px auto; padding-top:50px !important; margin-bottom:20px !important;}
.pwdHeader p {color:#fff; font-size:1.4rem; line-height:1.6;}
.pwdHeader p span {font-size:1.5rem; font-weignt:bold;}
.pwdBody {background:#fff; border:1px solid #ddd; width:480px; height:auto; margin:40px auto; padding:30px; border-radius:18px;}
.pwdInfo {font-size:1.2rem; line-height:1.6; padding-bottom:25px !important;}

.pwdForm {border-top:1px solid #ddd; padding-top:30px !important;}
.pwdForm li.pw {width:100%; height:46px; line-height:46px; border-radius:5px;}
.pwdForm li.pw {margin-top:20px;}
.pwdForm li.pw:first-child {margin-top:0;}
.pwdForm li > div {height:100%; padding-left:58px;}
.pwdForm li.pw > div {background:url("/static/images/common/login_pw_icon.png") no-repeat; background-position: center left 20px;}
.pwdForm li input {width:100%; height:100%; font-size:14px;}
.pwdForm li.inputFocusOut {background:rgba(242, 242, 245, 0.3); border:1px solid #ddd;}
.pwdForm li.inputFocusOut input {color:#414141;}
.pwdForm li.inputFocusIn {background:rgba(242, 242, 245, 1); border:1px solid #ddd;}
.pwdForm li.inputFocusIn input {color:#414141;}

.pwdBtn {width:100%; 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:1.2rem;}


@media (max-device-width: 480px) {
    .pwdBody {width: fit-content}
}



/* --
	"개인정보 동의, 회사등록" 레이아웃
----------------------------------------------------------------------------------------------------- */
#wrapper.signWrap {background: #f4f8ff;}
.signWrapHead {padding:18px 0; background:#fff; border-bottom:1px solid #e3e5ea;}
.signWrapHead img {width:auto; height:45px;}
.signWrapBody {padding:0 30px; height:calc(100% - 70px); overflow-y:auto;}
.signWrapBodyIn {padding:40px 0;}
.signWrapBody h2 {font-size: 20px; font-weight: 700; line-height:30px;}
.signWrapBody h2 span {font-size: 16px; font-weight: 300;}

.agreeList {margin-top:40px;}
.agreeList .agreeBox {margin-top:30px;}
.agreeList .agreeBox:first-child {margin-top:0;}
.agreeBoxCheck {padding:0 5px;}
.agreeBoxCon {margin-top:7px; border-radius:5px; background:#fff; padding:10px; border:1px solid #e3e5ea; height: 150px; overflow-y: auto;}
.agreeBoxCon .article {margin-top:20px; line-height:1.6; font-size:1.3rem;}
.agreeBoxCon .article:first-child {margin-top:0;}
.agreeBoxCon .article-title {font-size:1.3rem;}
.agreeBoxCon .article-text {font-size:1.3rem; font-weight:normal; margin:8px 0 0 5px;}
.agreeBoxCon .clause {margin:8px 0 0 10px;}
.agreeBoxCon .clause-title {font-size:1.3rem; font-weight:normal;}
.agreeBoxCon .clause-text {margin:5px 0 0 5px;}

.chkAllBtn {border-top:1px solid #e3e5ea; margin-top:30px; padding-top:30px;}

@media all and (min-width:600px){
	#wrapper.signWrap {overflow-y:auto;}
	.signWrapHead {padding:45px 0 0px; background:none; border-bottom:none;}
	.signWrapBody {padding:0 30px; height:auto;}
	.signWrapBodyIn {max-width: 600px; margin: 30px auto; background: #fff; border: 1px solid #e3e5ea; padding: 50px;}
}

.signList {margin-top:20px;}
.signList .input_wrap_table {display: table; width: 100%;}
.signList .input_wrap_cell {display: table-cell;}
.signList .input_title {margin:20px 0 8px; font-size: 14px; font-weight: 700;}
.signList .input_box {display: block; position: relative; width: 100%;  height: 51px; border: solid 1px #dadada; padding: 10px 14px 10px 14px; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box;}
.signList .int {display: block; position: relative; width: 100%; height: 29px; line-height: 29px; border: none; background: #fff; font-size: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 10;}
.signList .error_box {display: block; margin: 7px 0 -2px; font-size: 12px; line-height: 14px; color: #e65f3e;}
.signList .error_box2 {display: block; margin: 7px 0 -2px; font-size: 12px; line-height: 14px; color: #e65f3e;}
.signList .bs_info {font-size: 12px; color: #616161; margin-left:5px;}
.signList .zipcode_cell {width: 100px; padding-right: 10px; padding-bottom: 5px;}	
.signList .input_btn_wrap {position: relative; padding: 0 125px 0 0;}
.signList .auth_wrap {padding-top: 5px;}

.btn_area_double {display: flex; margin: 29px -5px 0;}	
.btn_type {display: block; width: 100%;  padding: 18px 0; margin: 0 5px; font-size: 1.3rem; font-weight: 700; text-align: center; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box;}
.btn_check {position: absolute; top: 0; right: 0; width: 115px; height: 51px; font-size: 1.3rem; font-weight: 700; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; cursor:pointer;}
.btn_cancel {color: #a0a0a0; background-color: #fff; border: solid 1px #a0a0a0; cursor:pointer;}
.btn_accept {color: #fff !important; background: var(--mainColor);}
	
	
    
/* --
	"유저 프로필 팝업" 레이아웃
----------------------------------------------------------------------------------------------------- */
.profilePop {display:none; Z-INDEX: 200; POSITION: fixed; left:633px; top:112px; box-shadow: 0px 0px 13px 5px rgba(0,0,0,0.2); width:400px; height: auto;}
.profilePopWrap {overflow:hidden; background:#fff; width:100%; height:100%;}
.profilePopTit {color:var(--baseColor); height:36px; line-height:36px; padding:0 15px; font-weight:bold; font-size:14px;}
.profilePopCon {color:#555; height:calc(100% - 86px); padding:10px 15px;}

.user-i {display:block;margin:10px auto;text-align:center;}
.user-i > div {margin-bottom:8px;}
.user-i button {width:150px;}
.user-i .name {font-size:16px;}
.user-i .group {color:#989898;}
.btn-area {margin-top:30px; text-align:center;}
.profilePopFooter {text-align:right; padding:0 10px; background:#5a626a; height:30px; line-height:30px; font-size:13px; color:#fff; overflow:hidden; box-shadow: 8px 8px 8px 0px rgba(0,0,0,0.3);}



/* --
	"일정 간단히 보기 팝업" 레이아웃
------------------------------------------------------------------------------------------------------*/
.simpleCalendarPop {display:none; z-index: 201; position: fixed; top:80px; left:50%; /* transform: translate(-50%, 0); */
	box-shadow: 0px 0px 20px 0px rgba(98, 100, 109, 0.7); overflow:hidden; border-radius:8px; width:400px; height:180px;}
.simpleCalendarPopWrap {overflow:hidden; background:#fff; width:100%; height:100%;}
.simpleCalendarPopTit {padding: 5px 15px; border-bottom: 1px solid #e9ebf1; font-size:14px; font-weight:bold;
	display:flex; justify-content: space-between; align-items:center;}
.simpleCalendarPopTit .simpleCalendarPopClose {cursor: pointer; width: 30px; height: 40px; text-align: center; line-height: 40px;}
.simpleCalendarPopCon {color:#555; height:calc(100% - 86px); padding:10px 15px;}



/* --
	"공지사항" 레이아웃
----------------------------------------------------------------------------------------------------- */
.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:400px; height:500px;}
.noticePopWrap {overflow:hidden; background:#fff; width:100%; height:100%; border:1px solid rgba(197,197,197,.6);}
.noti-slider-wrap {width:100%; height:100%; position:relative;}
.noti-view {width:100%; height:100%; position:relative;}

.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:36px; line-height:36px; 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;}
.noticePopTit a:hover {text-decoration: underline;}

.noticePopFile {border-bottom:1px solid rgba(197,197,197,.6); width:100%; position: relative;}
.noticePopFile .attachFileLstWrap {background: #fff;position: absolute;top: 90%;right: 0;line-height: 1.2;}
.noticePopFile .attachFileTit {font-weight: bold;font-size: 1.3rem;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 .attachFileLst {display:none; padding: 5px;border: 1px solid #d8d8d8;border-top: none;background: #fff;}
.noticePopFile .attachFileLst i {font-size: 11px;}
.noticePopFile .attachFileLst:first-child {border-top:1px solid rgba(197,197,197,.6);}
.noticePopFile .attachFileLst .attachViewBtn:hover span {text-decoration: underline;}
.noticePopFile .attachFileLst .fileNameTit {display:inline-block; vertical-align:bottom; padding-left:3px; width:200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.noticePopFile .attachFileLst .fileSize {font-size:11px; color:#666;}
.noticePopFile .attachDownBtn {margin-left: 5px;}

.noticePopCon {height:calc(100% - 57px); 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;}



/* --
	"게시판" 레이아웃
----------------------------------------------------------------------------------------------------- */
.noticeState {display: inline-block; width: 50px; border: 1px solid #ffc6c9; background-color: #ffe3e4; color: #ff4e59; border-radius: 3px; margin-right: 10px; text-align: center; font-size: 11px; font-weight: 800; height: 20px; line-height: 20px;}
.comment_cnt {font-weight: bold; color: #ff2f3b;}
.boardList th {background: #fff;}
.boardList .noticeBoard {background: #f9f9f8;}
.boardList .noticeBoard span {margin-right:0 !important;}
.boardtitleBar {position: relative; overflow: hidden !important; height: 38px;}

/* [게시판 내용 상세보기_view] */
.viewBoardWrap {border-left: 1px solid #d4d5d6; border-right: 1px solid #d4d5d6; border-bottom: 1px solid #d4d5d6; overflow: hidden;}
.viewBoardTit {display: flex; border-top:2px solid var(--mainColor); border-bottom:1px solid #d4d5d6; padding:15px; background:#f9f9f8; font-size:15px; font-weight:bold;}
.viewBoardInfo {border-bottom:1px solid #d4d5d6; padding:13px 15px 13px 4px; overflow:hidden; background:#fff;}
.viewBoardInfo span {display:inline-block; padding-left:12px; font-weight:normal;}
.viewBoardInfo span i {color:var(--grayLightColor); margin-right:3px;}
.viewBoardCon {padding:15px 15px 0;}
.viewContent {font-size: 1em; line-height: 1.6em; margin-bottom: 0.8em; min-height: 200px; padding: 15px;}
.viewContent::after {content:''; display:block; clear:both;}
.viewContent img{max-width: 100% !important; height: auto !important;}
.viewBoardIntro {margin-top:15px;}
.viewBoardIntro div{border:1px solid #d4d5d6; background:#f9f9fa; padding:13px 15px;}

/* [갤러리 게시판 목록] */
.galleryBoardWrap {border-top:2px solid #123b66; border-bottom:1px solid #d4d5d6; overflow:hidden; padding-bottom:15px;}
.galleryNoList {padding-top:15px; text-align:center;}
.galleryBoardLst {float:left; margin:15px 6px 0; width:200px; border:1px solid #d4d5d6; cursor:pointer;}
div.galleryImg {width:200px; height:200px;}
.galleryInfo {padding:10px; border-top:1px solid #d4d5d6;}
.galleryTit {font-size:1.3rem; font-weight:bold;}
.galleryTit a:hover{text-decoration:underline;}
.galleryInfoCon {margin-top:10px;}
.galleryInfoCon dl {height:20px; line-height:20px; overflow:hidden;}
.galleryInfoCon dl dt {float:left; font-size:1.1rem;}
.galleryInfoCon dl dt i {color:#9999a9;}
.galleryInfoCon dl dd {float:right;}
.galleryInfoCon .num::before {content:""; display:inline-block; width:2px;	height:2px; background-color:rgb(97, 102, 112); margin:0 5px 4px 5px; border-radius:2px;}

/* [게시판 관리자 - 권한설정 팝업] */
.popSelectAuth {}
.popSelectAuth li {padding-top: 5px !important;}
.popSelectAuth li:hover {background:#f4f7fa;}
.popSelectAuth li:first-child {}
.authList {margin-top: 5px;}



/* --
	"댓글" 레이아웃 - 게시판 및 전자결재에서 공통 사용
----------------------------------------------------------------------------------------------------- */
.comWrap{overflow:hidden; margin-top:30px; position:relative; background:#fff;}

.comCount {font-size:1.4rem; padding:0 10px;}
.comCount i {color:#5e5e77;}
.comCount span {font-size:1.5rem; font-weight:900; color:#dc3e2d;}

.comWrite {margin-top:15px;}
.comWrite .txt-wrap {overflow-y:auto;}
.comWrite .txt-wrap textarea {height:80px;}
.comWrite .comSaveArea {display: flex; justify-content: flex-end; background: #f9f9fa; border-bottom: 1px solid #d4d5d6; border-right: 1px solid #d4d5d6; border-left: 1px solid #d4d5d6; text-align: right;}
.comWrite .comSaveBtn {height:40px !important; line-height:40px !important;}

.comWrite.bigCom {margin-top: 0; background: #f9f9fa; padding:20px 30px; border-bottom:1px solid #d4d5d6;}
.comWrite.bigCom .comSaveArea {background:#fff;}

.comLstWrap {}
.comLst {padding:10px 10px; border-bottom:1px solid #d4d5d6; line-height: 20px;}
.comName {font-weight:800; font-size:13px;}
.comDate {display:inline-block; margin-left:3px; color:#a4a4a4; font-size:12px; font-weight:normal;}
.comBtnArea {display:flex; justify-content: flex-end; overflow:hidden;}
.comBtnArea em {margin: 0 5px;}
.comBtnArea a {float:left; border-left:2px solid #d4d5d6; padding:0 8px;}
.comBtnArea a:first-child {border-left:none;}
.comBtnArea a i {margin-right:5px; color:#9999a9;}
.comCon {margin-top:5px; line-height:1.6;}



/* --
	"예약" 레이아웃
----------------------------------------------------------------------------------------------------- */
/* [회의실 예약 - 캘린더] */
.reserveCal .ui-widget {font-family:'Pretendard', sans-serif; font-size:1.3rem;}
.reserveCal .ui-datepicker {border-radius:10px; width: 100%; padding: 0; background:url("/static/images/common/bg_calendar.jpg") no-repeat top -120px center; background-size:cover;}
.reserveCal .ui-datepicker .ui-datepicker-header.ui-widget-header {font-weight:normal; font-size:1.5rem; padding:25px 0 18px; margin:0 10px; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.5);}
.reserveCal .ui-datepicker .ui-datepicker-header.ui-widget-header.ui-corner-all {border-radius:0;}

.reserveCal .ui-datepicker .ui-datepicker-prev,
.reserveCal .ui-datepicker .ui-datepicker-next,
.reserveCal .ui-datepicker .ui-datepicker-prev-hover,
.reserveCal .ui-datepicker .ui-datepicker-next-hover {width: 25px; height: 25px; top:26px;}
.reserveCal .ui-datepicker .ui-datepicker-prev,
.reserveCal .ui-datepicker .ui-datepicker-prev-hover {
	left: 10px;
	background:url("/static/images/common/icon_circle_chevron_left.png") no-repeat center center !important;
	background-size:25px auto !important;
}
.reserveCal .ui-datepicker .ui-datepicker-next,
.reserveCal .ui-datepicker .ui-datepicker-next-hover  {
	right: 10px;
	background:url("/static/images/common/icon_circle_chevron_right.png") no-repeat center center !important;
	background-size:25px auto !important;
}
.reserveCal .ui-datepicker .ui-datepicker-title {margin:0 3em;}

.reserveCal .ui-datepicker-calendar {margin: 18px 10px 25px; width: calc(100% - 20px);}
.reserveCal .ui-datepicker-calendar th {color: rgba(255,255,255,.7); font-weight: normal; padding:13px 0;}
.reserveCal .ui-datepicker-calendar td {padding:8px 0; text-align:center;}

.reserveCal .ui-state-default,
.reserveCal .ui-widget-content .ui-state-default,
.reserveCal .ui-widget-header .ui-state-default {border: none; background: none; color: #fff; width: 30px; height: 30px; line-height: 28px; margin: 0 auto;}

.reserveCal .ui-state-hover,
.reserveCal .ui-widget-content .ui-state-hover,
.reserveCal .ui-widget-header .ui-state-hover,
.reserveCal .ui-state-focus,
.reserveCal .ui-widget-content .ui-state-focus,
.reserveCal .ui-widget-header .ui-state-focus,
.reserveCal .ui-state-active,
.reserveCal .ui-widget-content .ui-state-active,
.reserveCal .ui-widget-header .ui-state-active,
.reserveCal .ui-state-highlight:hover,
.reserveCal .ui-widget-content .ui-state-highlight:hover,
.reserveCal .ui-widget-header .ui-state-highlight:hover {background: #9abdde; color: #19417b !important; border-radius: 50%; transition:.3s; border-bottom:none;}

.reserveCal .ui-state-highlight,
.reserveCal .ui-widget-content .ui-state-highlight,
.reserveCal .ui-widget-header .ui-state-highlight {font-weight:bold; color: #efdd0a !important; border-bottom: 2px solid #efdd0a; background:none; border-radius:0;}

/* [회의실 예약 - 테이블] */
.meetReTab {width:100%; border:1px solid #d4d5d6; border-top:1px solid #123b66;}
.meetReTab table {border:1px solid #d4d5d6;}
.meetReTab tr {border-bottom:1px dashed #d4d5d6;}
.meetReTab thead tr {border-bottom:1px solid #d4d5d6;}
.meetReTab tbody tr:last-child {border-bottom:none;}
.meetReTab tbody tr:hover {background:#fff1f4;}
.meetReTab th,
.meetReTab td {width:32px; height:32px; border-left:1px dashed #d4d5d6;}
.meetReTab th:first-child,
.meetReTab td:first-child{width:200px; border-left:none;}
.meetReTab th {background:#fdfdfe; font-weight:bold; border-left:1px solid #d4d5d6;}
.meetReTab td i {margin-right: 8px; color: #888a8e; font-size: 1.3rem;}
.meetReTab td:first-child {padding-left:13px;}


/* 20210810 타임라인 수정 추가 */
.meet-table-div {border-left: 1px solid #d4d5d6; border-right: 1px solid #d4d5d6; border-bottom: 1px solid #d4d5d6; border-top: 2px solid #123b66;}
.meet-table-scroll {position:relative; min-width:500px; margin:auto; overflow:hidden;  font-size: 13px; color: #000;}
.meet-table-wrap {width:100%; overflow:auto;}
.meet-table-wrap table th {border-bottom: 1px solid #123b66;}
.meet-table-scroll table { width:100%; margin:auto; border-collapse:separate; border-spacing:0;}
.meet-table-scroll th, .meet-table-scroll td {width:104px; height: 32px; box-sizing: border-box; padding:5px 7px; border-bottom:1px dashed #d4d5d6; border-left:1px dashed #d4d5d6; background:#fff; white-space:nowrap; vertical-align:middle;}
.meet-table-scroll thead, .meet-table-scroll tfoot { background:#f9f9f9;}

.clone {position:absolute; top:0; left:0; pointer-events:none;}
.clone th, .clone td {visibility:hidden;}
.clone td, .clone th {border-color:transparent}
.clone tbody th {visibility:visible;}

.clone .fixed-side {border-bottom:1px solid #d4d5d6; border-right:1px solid #d4d5d6; visibility:visible; text-align: left; width:105px; height: 32px;}
.clone .fixed-side:last-child {border-bottom:none; border-left:none;}
.clone thead, .clone tfoot{background:transparent;}



/* --
	"스마트오피스 예약" 레이아웃
----------------------------------------------------------------------------------------------------- */

.Smtresve-wrap {padding: 0 0 0 25px; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; overflow-y: auto; }
.Smtresve-map { width: calc(100% - 28px); margin-right: 25px;}
.Smtresve-wrap.search-field .Smtresve-map, .Smtresve-wrap.my-reservation-field .Smtresve-map {width: calc(100% - 340px);}
.Smtresve-wrap.search-field .Smtresve-tab-wrap.search-tab,
.Smtresve-wrap.my-reservation-field .Smtresve-tab-wrap.my-reservation-tab {display: flex;}
.horizontal-bar{box-sizing: border-box; width: 1px; border-right: 1px solid #d4d5d6;}
.background {width:100%;}
.Smtresve-category {height: 61px; box-sizing: border-box; padding-top: 16px; padding-bottom: 8px; overflow-x: auto; overflow-y: hidden;}
.Smtresve-category::-webkit-scrollbar {height: 5px;}
.Smtresve-category::-webkit-scrollbar-thumb {background-color: #bdbdbd; border: 1px solid transparent; border-radius: 28px;}
.Smtresve-category::-webkit-scrollbar-track {background-color: rgba(197,197,197,.6); border-radius: 28px;}

.reservation-header { padding: 0 25px; border-bottom: 1px solid #d4d5d6; display: flex; justify-content: space-between; height: 60px; align-items: center; min-width: max-content;}
.Smtresve-sel-box {display: flex;}

.Smtresve-category .state {height: 32px; white-space: nowrap;}
.Smtresve-category .state .category {height: 32px; display: inline-block; user-select: none;}
.Smtresve-category .state .category > a {display: inline-block;}
.cat-box {display: flex; justify-content: flex-start; padding: 5px 8px; float: left; border-radius: 50px; box-sizing: border-box; user-select: none; cursor: pointer;}
.cat-box:not(:first-child) {margin-left: 10px;}
.selected > .cat-box {border: 1px solid #c5c5c5; padding: 4px 7px;}
.cat-sty {width:15px; height: 15px; border-radius: 50px; border: 1px solid #d9d9d9;}
.cat-sty-txt {padding: 0 0 0 5px; font-size:14px; color:#000;}

.Smtresve-sel {box-sizing: border-box; background-color: #fff; height: 32px;border-radius: 3px; border: 1px solid #bdbdbd; cursor: pointer; padding-right: 6px !important;}
.category-leaf{display: none;}
.category-leaf.active {display: block;}
.Smtresve-sel select {display: block; width: 100%; height: 32px; line-height: 32px; border: none; background: none; outline: none; font-size: 1.2rem; padding: 0 10px;}

.Smtresve-notice-box {width:100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 30px 10px; box-sizing: border-box; min-width: max-content;}
.Smtresve-notice-box > div {flex-shrink: 0;}
.Smtresve-notice-box .infoP {min-width: 100px;}
.Smtresve-notice-box .write {margin: 0 5px;}

.contents-wrap {position: relative; overflow: hidden;}
.map-area * {user-select: none;}
.map-area {z-index: 1; border: 1px solid #d4d5d6; border-radius: 8px; overflow: hidden;}
.list-area {position: absolute; left: 0; top: 0; z-index: 2; background-color: white; width: 100%;}
.list-area.disabled {left:  99999px;}
.zoom-continer {box-sizing: border-box; margin: auto; border-radius: 8px;}
.office-map > img {border-radius: 10px;}
.reservation-list-btn.disabled, .reservation-map-btn.disabled {display: none;}
.datetime-box {display: flex; font-weight: bold; font-size: 20px; align-items: center; flex-grow: 1; justify-content: center; padding: 0 20px;}
.datetime-box * {font-weight: bold;}
.datetime-box > i:not([class*="fa-chevron-"]) {margin: 0 10px; display: flex; align-items: center; font-size: 14px; color: var(--gray-600);}
.datetime-box > i[class*="fa-chevron-"] {display: flex; align-items: center; cursor: pointer; font-size: 13px; padding: 12px 10px 10px;}
.datetime-box > i[class*="fa-chevron-"]:hover {color: var(--mainColor);}
.datetime-box__date {width: 145px; font-size: 20px; user-select: none; cursor: pointer;}
.datetime-box__time {width: 75px; font-size: 20px; user-select: none; cursor: pointer;}

.realtime-check-label .onoffswitch {width: 90px;}
.realtime-check-label .onoffswitch-inner:before,
.realtime-check-label .onoffswitch-inner:after {height: 32px; line-height: 32px; font-size: 14px; font-weight: 600;}
.realtime-check-label .onoffswitch-inner:before {content: "실시간"; padding-left: 13px;}
.realtime-check-label .onoffswitch-inner:after {content: "비실시간"; padding-right: 13px;}
.realtime-check-label .onoffswitch-switch {width: 19px; height: 19px; margin: 6px 5px; right: 61px;}



/*{ display: flex; height: 32px; align-items: center; font-size: 14px; padding: 0 8px; border-radius: 3px; border: 1px solid #bdbdbd; user-select: none; cursor: pointer;}
.realtime-check-box {height: 16px; width: 16px; margin-right: 4px;}*/


.Smtresve-tab-wrap {width: 312px; overflow: hidden; display: none; flex-flow: column; border: 1px solid #d4d5d6; flex-shrink: 0; box-sizing: border-box; margin: 20px 20px 0 0; border-radius: 10px;}
.tab-title {height: 50px; display: flex; justify-content: space-between; padding: 16px; align-items: center; border-bottom: 1px solid #d4d5d6; font-weight: bold; font-size: 16px; background-color: var(--mainColor); color: #fff;}
.tab-title > .tab-close-btn {user-select: none; cursor: pointer;}
.search-tools {display: flex; padding: 16px; border-bottom: 1px solid #d4d5d6;}
.reservation-search-text {box-sizing: border-box; background-color: #fff; height: 32px;border-radius: 3px; border: 1px solid #d4d5d6; margin-right: 6px;}
.reservation-search-none, .my-reservation-none {text-align: center; padding: 32px; color: #a6a6a6; font-size: 14px;}
.reservation-search-none.no-search {color: #ffa8a8;}
.reservation-search-card {display: flex; padding: 16px; border-bottom: 1px solid #d4d5d6; user-select: none; cursor: pointer;}
.reservation-search-card:hover {background-color: #f0f0f0;}
.reservation-search-avatar {margin-right: 16px;}
.reservation-search-avatar > .photo {width: 50px; height: 50px;}
.reservation-search-desc {flex: 1; display: flex; flex-direction: column;}
.reservation-search-desc > *:not(:first-child) {margin-top: 4px;}
.reservation-search-title {margin-bottom: 4px;}
.reservation-search-title > span, .my-reservation__seat-title > span {padding: 5px 14px; border-radius: 28px; background-color: #081b3a; color: white;}
.reservation-search-name {color: #292929; font-weight: bold;}
.reservation-search-position {color: #999999; font-size: 0.8em;}
.reservation-search-location {color: #414141;}
.reservation-search-location > i {color: #081b3a;}
.reservation-search-result {overflow-x: hidden; overflow-y: auto;}

/*my-reservation*/
.my-reservation-list {display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto;}
.my-reservation-card {display: flex; padding: 16px; border-bottom: 1px solid #d4d5d6;}
.my-reservation-info {display: flex; flex-direction: column; flex: 1;}
.my-reservation-info .btn.comm {height: 26px; line-height: 26px;}
.my-reservation-icon {margin-right: 16px; font-size: 22px; height: 50px; line-height: 50px; text-align: center; width: 50px; border-radius: 50%; border: 1px solid #ccc;}
.my-reservation-info > div:not(:first-child):not(:last-child) {margin-bottom: 4px;}
.my-reservation-info > div:first-child {margin-bottom: 15px; margin-top: 6px;}
.my-reservation-info > div:last-child {margin-top: 8px;}

/*.Smt-cal-box {position: initial !important; height: 240px!important; width: 272px!important; padding: 0!important; margin: 20px 20px 0 20px!important; box-shadow: none!important;}*/
.Smt-time-box {margin: 20px; padding: 12px 16px 16px 16px; background: #fff; display: flex; flex-wrap: wrap;}
.Smt-time-box .time {width:50px; height: 28px; line-height: 28px; text-align: center; font-size: 14px; flex-grow: 1; margin-top: 4px; cursor: pointer; color:#000; user-select: none;}
.Smtpop-time-line::-webkit-scrollbar {width: 10px; height: 10px;}
.Smtpop-time-line::-webkit-scrollbar-thumb {background-color: #bdbdbd; border: 1px solid transparent;}
.Smtpop-time-line::-webkit-scrollbar-track {background-color: rgba(197,197,197,.6);}

.time.no-time {cursor: default; color:#cbcbcb;}
.time.use-time {cursor: default; color:#ff0000;}
.time.other-use-time {color: #ffc2c2;}

.Smt-time-box .time-click {width:50px; height: 28px; border-radius: 50px; }
.Smt-time-box .time-active {width:50px; height: 28px; background: var(--grayDarkColor); color: white;}
.Smt-time-box .start-time {width:50px; height: 28px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; }
.Smt-time-box .end-time {width:50px; height: 28px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; }

.Smtpop-No {border-radius: 50px; font-size: 13px; color: #fff; margin-right: 10px; background:var(--SmtresveColor); padding: 5px 10px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; min-width: 70px; text-align: center;}
.Smtpop-Notxt {font-size: 12px; color: #626262; text-align: left; width: 100%;}

.Smtpop-No:hover .tooltip-text {display: block;}
.tooltip-text { display: none; position: absolute; max-width: 200px; border: 1px solid; border-radius: 5px; padding: 5px; font-size: 0.8em; background: beige; color: black;}

.Smtpop-calBox {width:300px; height: 45px; padding:7px 13px; box-sizing: border-box; display: flex; align-items: center;}
.guest-box {height: 100%; display: flex; justify-content: flex-start; align-items: center; font-size: 1em;}
.guest-box > input:disabled { display: inline-block;}
.guest-box > input:not(:disabled) { display: none;}
.guest-box.active {display: flex;}
.guest-box.active > input:disabled { display: none;}
.guest-box.active > input:not(:disabled) { display: inline-block;}
.guest-box:not(.active) .guest-box-txt {color: #ccc;}
.guest-box-check {width: 12px; margin-right: 7px;}
.guest-box-txt {width: 100%; user-select: none; cursor: pointer;}
.guest-box-cont {padding: 0 13px; box-sizing: border-box; display: none; flex-direction: column;}
.guest-box-cont.active {display: flex;}
.guest-box__row {display: flex; justify-content: space-evenly; width: 100%;}
.guest-box__row > input {flex: 1;}
.guest-box-cont .guestTxtS,
.guest-box-cont .guestTxtL {height: 30px; border: 1px solid #d4d5d6; margin: 2px 0; background: #fff; padding: 0 10px; box-sizing: border-box;}

.Smtpop-includBox {padding: 4px 13px 8px 13px; background: #f5f5f5; box-sizing: border-box; align-items: center; display: flex; flex-wrap: wrap; margin-bottom: 14px;}
.Smtpop-includBox-cont {border-radius: 50px; border: 1px solid #bbbbbb; background: #fff; font-size: 11px; color: #838383; padding: 5px 9px; box-sizing: border-box; user-select: none; margin-top: 4px;}
.Smtpop-includBox.no-item{display: none;}
.Smtpop-time-Box {padding:0 13px; box-sizing: border-box;}
.reservation-addition-box {display: flex; width: 100%; padding: 8px 13px; box-sizing: border-box; align-items: center; height: 46px;}
.reservation-addition-box.disabled-memo {justify-content: flex-end;}
.reservation-memo {width: 1px; border: 1px solid #aaaaaa; padding: 4px 8px; box-sizing: border-box; border-radius: 4px; height: 100%; flex: 1; margin-right: 8px;}
.reservation-addition-box.disabled-memo > .reservation-memo {display: none;}
.time-box__text {width: 100%; text-align: center; height: 40px; line-height: 40px; margin-bottom: 8px; border: 1px solid #c6c6c6; border-radius: 7px;}
.time-box__text > .place-holder {font-size: 12px; color: grey; display: none;}
.time-box__text > .time-text {color:#000; font-size: 14px; display: none; }
.time-box__text > .time-text i {padding: 0 5px 0 0; line-height: 23px;}
.time-box__text > span.active{display: inline;}
.Smtpop-time-line {width: 100%; height: 275px; border-radius: 7px; border: 1px solid #c6c6c6; text-align: center; overflow-y: auto; box-sizing: border-box;}

.Smtpop-confirm-box {padding: 0 13px; display: flex; justify-content: flex-start; margin-bottom: 8px; line-height: 1; align-items: center;}
.Smtpop-confirm-part1 {width:60px; height: 60px; margin-right: 10px; text-align: center;}
.Smtpop-confirm-part1 .photo {width:60px; height: 60px;}
.Smtpop-confirm-part1 i {font-size: 27px; line-height: 60px; color: #666;}
.Smtpop-confirm-part2 {width: 200px;}
.Smtpop-confirm-part2 .infobox {display: flex; justify-content: flex-start; }
.Smtpop-confirm-part2 .info {padding: 4px 12px; font-size: 11px; color: #fff; border-radius: 50px; background: #031b3d; box-sizing: border-box; display: inline-block;}
.Smtpop-confirm-part2 .zep {padding: 0 12px; font-size: 11px; color: #fff; border-radius: 50px; background: #6243fe; box-sizing: border-box; align-items: center; display: flex; cursor: pointer;}
.Smtpop-confirm-part2 .zep i {font-size:13px; color:#fff; padding:0 5px 0 0;}
.Smtpop-confirm-part2 .guestTime {display: inline-block; font-size: 14px; margin: 0 7px 0; height: 19px; line-height: 20px;}
.Smtpop-confirm-part2 .name, .fix-reason {padding: 4px 4px; font-size: 15px; color: #000; font-weight: bold;}
.fix-reason {font-size: 12px;}
.Smtpop-confirm-part2 .position {padding: 0 4px; font-size: 12px; color: #818181;}

/*예약현황 리스트 모달*/
.Smtpop-Schedule-wrap {width:1000px; padding: 17px 15px; text-align: center; border-radius: 10px; background: #fff; box-sizing: border-box;}
.Smtpop-Schedule-title {display: flex; justify-content:space-between; width: 100%; height: 30px;}
.Smtpop-Schedule-title .title {font-size:20px; color: #000;}
.Smtpop-Schedule-title .close {font-size:20px; color: #000; cursor: pointer;}
.Smtpop-Schedule-date {display: flex; justify-content: center;; text-align: center; padding: 20px 0;}
.Smtpop-Schedule-category {display: flex; justify-content: center; text-align: center; height: 40px;}
.Smtpop-Schedule-timeline {width: 100%; border: 1px solid #999; box-sizing: border-box;}
.Smtpop-Schedule-btn1,
.Smtpop-Schedule-btn2 {width:40px; height: 32px; border-radius: 4px; border: 1px solid #d6d6d6; text-align: center; box-sizing: border-box; line-height: 30px; cursor: pointer;}
.Smtpop-Schedule-btn1 {background: #fff;}
.Smtpop-Schedule-btn2 {background: #f0f0f0;}
.Smtpop-Schedule-btn1 i,
.Smtpop-Schedule-btn2 i {font-size: 20px; line-height: 30px;}
.Smtpop-Schedule-datetxt {padding: 0 15px; width: 130px; position: relative;}
.Smtpop-Schedule-datetxt > input.date-text {font-size:20px; color: #000; line-height: 32px; width: 130px; cursor: pointer; box-sizing: border-box; position: absolute; left: 15px; top: 0; z-index: 2;}
.Smtpop-Schedule-datetxt i {font-size:20px; color: #000; line-height: 32px; position: absolute; right: 15px; top: 0; }



/* --
	"일정" 레이아웃
----------------------------------------------------------------------------------------------------- */
/* [ 일정등록 - full calendar style ] */
.calendarSchedule {overflow:hidden;}

.cal-tit {position:relative; padding:20px 5px; font-size:13px; font-weight:bold; cursor:pointer; border-bottom:1px dashed #c1c1ca;}
.cal-tit i {margin-right:8px;}
.cal-tit .arrow {float:right; width: 1.25rem; height: 1.25rem; display: inline-block; position: relative;}
.cal-tit .arrow span {top: 8px; position: absolute; width: 0.75rem; height: 0.1rem; background-color:#7b7a99; display: inline-block; transition: all 0.2s ease;}
.cal-tit .arrow span:first-of-type {left: 0; transform: rotate(45deg);}
.cal-tit .arrow span:last-of-type {right: 0; transform: rotate(-45deg);}
.cal-tit.active .arrow span:first-of-type {transform: rotate(-45deg);}
.cal-tit.active .arrow span:last-of-type {transform: rotate(45deg);}

.calendarSchedule ul {margin-bottom:15px!important;}
.calendarSchedule li {font-size:13px; margin-top:10px!important; padding:0 5px!important;}

.calendarSchedule .chk-wrap input[type="checkbox"] + label span {border-radius:3px !important;}
.calendarSchedule .chk-wrap input[type="checkbox"]:checked + label span {border-color:inherit; background-color:inherit; background-size:13px auto;}


/* [ 참석자 리스트 스타일 ] */
.partPersonWrap{height:calc(100% - 47px); overflow-y:auto; border-top:3px solid #2a7fb8; border-bottom:1px solid #d8d8d8; background:#fafafa}
.partPersonWrap.type01{height:140px; margin-top:10px;}
.partPersonNone{font-size:13px; font-weight:bold; text-align:center; margin-top:120px;}
.partPersonLst > *{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.partPersonLst{position:relative; height:45px; line-height:45px; width:100%; border-bottom:1px dashed #d8d8d8;}
.partPersonLst:last-child{border-bottom:none;}
.personImg{overflow:hidden; width:35px; height:35px; position:absolute; top:5px; left:15px;
				moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}
.personImg img{width:35px; min-height:35px; height:auto; vertical-align:top;}

.partPersonLst p{display:inline-block;}
.personName{font-size:1.2rem; margin-left:60px; font-weight:bold;}
.personDp{font-size:1.2rem;}
.partPersonTit{font-weight:bold;}
.perDelBtn img{width:10px; height:auto;}

.partPersonWrap::-webkit-scrollbar {width:6px}
.partPersonWrap::-webkit-scrollbar-track {-webkit-border-radius:10px;border-radius:10px}
.partPersonWrap::-webkit-scrollbar-thumb {-webkit-border-radius:10px;border-radius:10px;background:#c7cbd3}
.partPersonWrap::-webkit-scrollbar-thumb:window-inactive {background:#c7cbd3}

/* [범주관리] */
.categoryLst{display:block; cursor:pointer;}
.categoryLst:hover{background:#eef2f7;}
.categoryLstColor {display:inline-block; width:18px; height:18px;}
.categoryColorChoice a{display:inline-block;}
.categoryColorChoice span{display:inline-block; width:18px; height:18px; margin-right:3px;}



/* --
	"전자결재" 레이아웃
----------------------------------------------------------------------------------------------------- */
/* [참조자] */
.referPerson {overflow:hidden; display: flex; flex-wrap: wrap;}
.referPerson li {border: 1px solid #d4d5d6; border-radius: 35px; background: #fff; padding: 2px 8px !important; margin:2px !important;}
.referPerson li:first-child {margin-left:0 !important;}
.referPerson li i {color:var(--blueColor); margin-right: 5px;}

/* 참조문서 스타일 수정 */
.referDocument {width: 100%; margin-bottom: 4px;}
.referDocument:last-child {margin-bottom: 0;}
.referDocument a {display: inline-block; padding: 0 10px; height: 22px; line-height: 22px; overflow: hidden; border: 1px solid #d4d5d6; background: #fff; margin-top: 5px; border-radius: 35px;}
.referDocument a:first-child {margin-top: 0;}
.referDocument a:hover {background: var(--mainlineonColor);}
.referDocument a i {color: var(--blueColor); margin-right: 5px;}



/* --
	"기안서 양식 관리" 레이아웃
----------------------------------------------------------------------------------------------------- */
.newDocWrap {background:#f6f8fc; min-height: 100%;}
.newDocSec {padding: 30px 20px 0; background:#fff;}
.newDocSec:first-of-type {padding-top:20px;}
.newDocSec-tit {display: flex; justify-content: space-between; align-items: center; font-weight:600; padding-bottom:10px;}
.newDocSec-tit i {margin-right:5px; color:#FFCD00; font-size: 1.4rem;}
.newDocSec .tb-st {table-layout: fixed;}

/* [ 기안서 양식 관리 - 결재선 설정 ] */
.newDocWrap .referDoc-wrap {width:auto; padding:0 10px; border-radius:3px;}
.apprLineLst {display:flex; justify-content: space-between;}
.apprLineLst > div {width:50%; border: 1px solid #d4d5d6; margin-left:5px; border-radius: 5px;}
.apprLineLst > div:first-of-type {margin-right:4px; margin-left:0;}
.apprLineLst-tit {background: var(--barColor); color:#fff; text-align:center; padding:5px 0;}
.apprLineLst-con {padding: 8px 10px; max-height: 80px;}
.apprLineLst-con p {line-height: 1.6;}

/* [ 기안서 양식 관리 - 텍스트 에디터 ] */
.newDocSec.editorWrap {padding: 20px;}
.editorTglBtn {}

/* [ 기안서 양식 관리 - 추가 양식 설정 ] */
.newFormSec {padding: 30px 0 0;}
.newFormSec .newDocSec-tit {padding: 0 20px 0;}

.frmGn-wrap {background:#f6f8fc;}

/* [ 기안서 양식 관리 - 추가 양식 설정 > 레이아웃 선택 ] */
.frmLayout-wrap {position: relative;}
.frmLayout-list {background:#fff; display:flex; align-items:center; padding: 10px 40px!important; margin-top:10px!important; border: 1px solid #d6d6d7; border-left:none; border-right:none; border-radius: 0 0 20px 20px;
								position: sticky; top: -1px;  z-index: 1;}
/* .frmLayout-list.sticky {position: fixed; top: 118px; left: 0; right: 0; z-index: 1; transiton: position 0.4s} */
.frmLayout-tit {display:flex; align-items: center; position:relative; padding-right: 18px;}
.frmLayout-tit i {color: #878787; font-size: 1.1rem; margin-right:5px;}
.frmLayout-add {margin-left:30px!important; font-size:1.4rem; cursor:pointer; padding: 10px 25px 10px 25px!important; border: 1px solid #d5d6d7; border-radius:25px;
						background-repeat: no-repeat; background-position: left 20px center; background-size: 15px auto; background-color: #fff; }
.frmLayout-add:hover {background-color: #fff8dd; /*border-color: #fff8dd;*/ border-radius: 10px; transition: .3s;}
/*.frmLayout-add.st01 {background-image: url("/static/images/common/form-row1.png");}*/
/*.frmLayout-add.st02 {background-image: url("/static/images/common/form-row2.png");}*/
/*.frmLayout-add.st03 {background-image: url("/static/images/common/form-row3.png");}*/

.frmLayout-typeWrap {padding: 0 30px 20px;}
.frmLayout-type {display:none; margin-top: 15px; padding: 15px 10px; border: 1px solid #d6d6d7; border-radius: 8px; background: #fff; box-shadow: 0px 0px 3px 2px #eef0f5;}
.frmLayout-typeTit {margin-left: 20px; padding-left: 28px; background-size: 18px auto; background-repeat: no-repeat; background-position: left center;}
.frmLayout-type.st01 .frmLayout-typeTit {background-image: url("/static/images/common/form-row1.png");}
.frmLayout-type.st02 .frmLayout-typeTit {background-image: url("/static/images/common/form-row2.png");}
.frmLayout-type.st03 .frmLayout-typeTit {background-image: url("/static/images/common/form-row3.png");}

.frmLayout-typeCon {display:flex; align-items: center;}
.frmMove-box {display: flex; flex-direction: column; justify-content: space-around;}
.frmLayout-box {flex: 1 1 auto; margin: 0 3px; align-self: flex-start;}
.frmLayout-type.st01 .frmLayout-box {min-width:calc(97% - 43px);}
.frmLayout-type.st02 .frmLayout-box {min-width:calc(50% - 43px);}
.frmLayout-type.st03 .frmLayout-box {min-width:calc(33.3333334% - 43px);}
.frmLayout-box .popItemAdd-btn {display:block; text-align:center; cursor:pointer;  padding: 13px 0; border-radius: 5px; background: #fffbe7; border: 1px dashed #b5bed1;}
.frmLayout-box .popItemAdd-btn:hover {color:#d92929; background: #fff4ba; transition:.3s;}
.frmLayout-box .popItemAdd-btn i {margin-right: 5px;}
.frmLayout-box .popItemAdd-btn.edit {color:#d92929; background: #fff4ba; border: 1px solid #eddc86;}
.frmLayout-box .popItemAdd-btn.edit:hover {color:#374350; background: #fffbe7; border: 1px dashed #b5bed1;}

.frmLayout-box .select-box {display: flex; cursor:pointer; border-radius: 28px; background: white; border: 1px solid var(--mainonColor); width: 120px; margin: auto; padding: 8px 0; justify-content: center}
.select-able .frmLayout-box {border-radius: 5px; background: #fffbe7; border: 1px dashed #b5bed1; padding: 13px 0;}
.select-box * {text-align: center; width: 40%; border-radius: 28px; transition: all 150ms ease-in-out;}
.select-box *:hover {color:var(--mainonColor); transform: scale(1.2);}
.select-desc {text-align: center; margin-top: 4px; font-size: 0.8em; color: grey;}

.frmLayout-prv {display:none;}

/* [ 기안서 양식 관리 - 추가 양식 설정 > 폼 항목 선택 팝업 ] */
.popItemAddPanelWrap {}
.popItemAddPanelWrap * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.popItemAddPanelWrap *:before,
.popItemAddPanelWrap *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.popItemAddPanelWrap.open {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; background: rgba(0,0,0,.4);}

.popItemAddPanelBody {width: 590px; background: #fff; z-index: 100; position: fixed; top:0; right:-590px; bottom: 0; box-shadow: 0 3px 30px rgba(0,0,0,.1), 0 3px 20px rgba(0,0,0,.1);}

.popItemAddPanel {height: 100%;}
.popItemAddPanel-tit {background: #3e4650; color: #fff; font-size: 14px; display: flex; align-items: center; padding: 15px;}
.popItemAddPanel-tit i {font-size: 11px; color: var(--mainColor); margin-right: 5px;}

.frmItem-wrap {height: calc(100% - 47px);}

.frmItem-tabLst {background: #3e4650; padding: 0 7px 8px;}
.frmItem-tabLst ul {display: flex; align-items: center;}
.frmItem-tab {}
.frmItem-tab a {display: inline-block; padding: 5px 13px 5px 25px; border-radius: 30px; background-color: #3e4650; color: rgba(255,255,255,.6) !important; background-repeat: no-repeat; background-position: left 10px center; background-size: 12px auto;}
.frmItem-tab a.active {cursor:default; background-color: var(--grayDarkColor); color: rgba(255,255,255,1) !important; transition: .3s; background-color: var(--mainColor);}
.frmItem-tab.frm-txt a {background-image: url("/static/images/common/form-txt.png");}
.frmItem-tab.frm-select a {background-image: url("/static/images/common/form-select.png");}
.frmItem-tab.frm-radio a {background-image: url("/static/images/common/form-radio.png");}
.frmItem-tab.frm-checkbox a {background-image: url("/static/images/common/form-checkbox.png");}
.frmItem-tab.frm-calendar a {background-image: url("/static/images/common/form-cal.png");}
.frmItem-tab.frm-address a {background-image: url("/static/images/common/form-address.png");}
.frmItem-tab.frm-num a {background-image: url("/static/images/common/form-num.png");}
.frmItem-tab.frm-txt a.active {background-image: url("/static/images/common/form-txt-active.png");}
.frmItem-tab.frm-select a.active {background-image: url("/static/images/common/form-select-active.png");}
.frmItem-tab.frm-radio a.active {background-image: url("/static/images/common/form-radio-active.png");}
.frmItem-tab.frm-checkbox a.active {background-image: url("/static/images/common/form-checkbox-active.png");}
.frmItem-tab.frm-calendar a.active {background-image: url("/static/images/common/form-cal-active.png");}
.frmItem-tab.frm-address a.active {background-image: url("/static/images/common/form-address-active.png");}
.frmItem-tab.frm-num a.active {background-image: url("/static/images/common/form-num-active.png");}

.frmItem-tabPnLst {height: calc(100% - 33px);}
.frmItem-tabPn {height: 100%;}

.frmItem-box {height: calc(100% - 57px); overflow-y: auto; position: relative; background: #fff;}

.frmItem-rowWrap {padding: 13px 20px;}
.frmItem-row {padding:10px 0; align-items: center;}
.frmItem-row.frmItem-ansOpt,
.frmItem-row.frmItem-editor {align-items: flex-start;}
.frmItem-row.frmItem-ansOpt.disabled {display: none;}

.frmItem-rowTit {width:100px; display: flex; align-items: center;}
.frmItem-rowTit i {color:#efc700; font-size:1.1rem; margin-right:5px;}
.frmItem-ansOpt .frmItem-rowTit,
.frmItem-editor .frmItem-rowTit {padding-top: 14px;}

.ansOptLst-wrap {}
.ansOptLst-wrap .form-select-del {cursor: pointer;}
.ansOptLst-row {display: flex; justify-content: space-between; align-items:center; margin-top: 5px;}
.ansOptLst-row:first-of-type {margin-top: 0;}
.ansOptLst-row:first-of-type > .form-select-del {display: none;}
.ansOptLst-row:first-of-type > .form-group {margin-right: 0;}
.ansOptLst-row .form-group {flex-grow: 1; margin:0 8px;}
.ansOptLst-row i {color: #878787;}
.ansOptLst-add {display:inline-block; margin-top:8px;}
.ansOptLst-add button {padding: 8px 10px; border-radius: 8px; margin-left: 15px; font-size: 1.2rem; border-radius: 50%;}
.ansOptLst-add button:hover {border-radius:5px; background: #eff1f5; transition:.3s;}
.ansOptLst-add button i {color:#c56565;}

.frmCalendar {display:flex; align-items: center;}
.frmCalendar .form-group {flex: 1 1 auto;}
.frmCalendar .form-group input {/*background: url(/static/images/common/form-cal.png) no-repeat; background-size: 16px; background-position: left 13px center;*/ padding-left: 10px;}
.frmCalendar .endDateCal {margin-left:30px; position: relative;}
.frmCalendar .endDateCal:before {content: '~'; position: absolute; left: -20px; top: 50%; font-size: 1.6rem; margin-top: -13px;}

.frmItem-footer {width: 100%; position: absolute; bottom: 0; border-top: 1px solid #ccc; justify-content:center; align-items: center; padding: 10px 8px;}
.frmItem-footer button {margin: 0 3px;}
.frmItem-confirm {background: #ecf2fc; border-radius:50px; padding: 10px 13px;}
.frmItem-confirm i {color: #0073ea; margin-right:5px;}
.frmItem-confirm:hover {background: #d4e1f9; border-radius:5px; transition:.3s;}
.frmItem-close {background: #fff3f3; border-radius:50px; padding: 10px 13px;}
.frmItem-close i {color: #545454; margin-right:5px;}
.frmItem-close:hover {background: #fbdddd; border-radius:5px; transition:.3s;}
.frmItem-delete {color:gray; border-radius:50px; padding: 10px 13px;}
.frmItem-delete:hover {background:#ffdddd; border-radius:5px; transition:.3s;}
.frmItem-delete2 {color:var(--baseColor); border-radius:50px; padding: 10px 12px 8px; font-size:14px;}
.frmItem-delete2:hover {background:var(--mainColor); border-radius:5px; transition:.3s; color:#fff;}

.frmItem-move {color:var(--baseColor); height: 100%; border-radius:50px; padding: 10px 12px 7px; font-size:14px;} 
.frmItem-move:hover {background: var(--mainColor); border-radius:5px; transition:.3s; color:#fff;}
.frmLayout-typeWrap > .jsCloneDiv:first-child .frmItem-move.up {display: none;}
.frmLayout-typeWrap > .jsCloneDiv:last-child .frmItem-move.down {display: none;}

.require-wrap {margin: 0 10px;}
.requireMark {color: red; font-size: 1.8rem; position: absolute; right: -13px; top: -1px;}


.frmItem-wrap .materialFormWrap .form-group input {height: 40px; line-height:40px; border-radius:5px;} /* 항목추가 모달팝업 내 input style */ 
.materialFormWrap .form-group.readonly input {background-color: #ebebf0 !important; border: none !important;}

.addFrm-tit.edit {position: relative; cursor: pointer; padding-right: 38px !important;}
.addFrm-tit.edit:before {content: "\f044"; font-family: 'Font Awesome 5 Free'; background: var(--mainColor); color: #fff; width: 23px; border-radius: 29px; font-size: 10px; height: 18px; text-align: center; display: inline-block; line-height: 18px; position: absolute; top: 50%; right: 10px; margin-top: -9px;}

.addFrm-tit.edit:hover {background: #e4e9f3; transition: .3s;}
.addFrm-tit.edit:hover:before {content: attr(title); padding: 1px 6px; z-index: 3; width: fit-content; font-size: 10px; transition: .2s;}



.selected-master-data {padding: 4px 12px; background: #b9d6ff; border-radius: 28px;}
.no-edit-icon {width: 22px; height: 22px; border-radius: 50%; background: #ffb9b9; display: inline-flex; justify-content: center; align-items: center; margin-left: 2px; font-size: 0.8em; position: relative; bottom: 1px;}

/* ::: tab panel contents area */
.intrl-wrap {position: relative;}

.intrl-header {position: relative; padding: 15px 10px 0; background: #f6f7fa; box-shadow: inset 0 1px 1px #d8dadf;}
.intrl-header .indicator {height: 3px; position: absolute; bottom: -1px; background: var(--mainColor);}
.intrl-header ul {display: flex; align-items: center; height: 45px;}
.intrl-header ul li {opacity: .5; transition: all 0.4s ease; font-size: 12px; margin-right: 25px; cursor: pointer;}
.intrl-header ul li:hover {opacity: .8;}
.intrl-header ul li.active {opacity: 1; color: var(--mainColor);}

.intrl-body {padding: 15px 10px; border-top: 1px solid #e2e3e7;}
.intrl-panel {display: none;}
.intrl-panel.active {display: flex; flex-wrap: wrap;}

.intrl-panel__item {display: inline-block; border: 1px solid #d8dadf; border-radius: 8px; padding: 12px 0; margin: 3px; flex-basis: 82px; text-align: center; cursor: pointer; transition: .3s;}
.intrl-panel__item:hover {border: 1px solid var(--mainColor); color: var(--mainColor); background: #f6f7fa;}
.intrl-panel__item.active {border: 1px solid var(--mainColor); background: var(--mainColor); color: #fff;}



/* --
	"기안서 작성 및 보기" 레이아웃
----------------------------------------------------------------------------------------------------- */
.docHeader {display: flex; position: relative; justify-content: space-between; border-top: 2px solid var(--baseColor);}
.docHeader-tit {flex-grow: 1; display: flex; align-items: center; justify-content: center; background: #f6f8fc; font-size: 2.0rem; font-weight: bold; border: 1px solid #d4d5d6; border-top: none; min-height: 80px;}
.docHeader-tit.abort {background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="100%" y2="0" stroke="red" /></svg>')}

.apprLineDiv {display: flex;}
.apprLineBox {width: 130px; border-right: 1px solid #d4d5d6; display: flex; flex-direction: column}
.apprLineRow {display: flex; padding: 3px 0; border-bottom: 1px solid #d4d5d6; justify-content: center; align-items: center;}
.apprLineRow.apprName {line-height: 1.1;}
.apprLineRow:first-of-type {background: #f6f8fc; min-height: 18px;}
.apprLineRow:last-child {flex-grow: 1; word-break:break-all;}
.apprLineRow:nth-of-type(2) {display: flex;	flex-direction: column; align-items: center; justify-content: center; min-height: 70px; line-height: 1;}
.apprLineStp {display: flex; justify-content: center; align-items: center; flex-direction: column; width: 45px; height: 45px; text-align: center; border-radius: 50%; margin: 0 auto 2px auto; font-weight: 700; font-size: 1.4rem;}
.apprLineStp.progress {border: 0.2em solid #545454; color: #545454;}
.apprLineStp.approval {border: 2px solid var(--blueColor); color: var(--blueColor);}
.apprLineStp.reject {border: 2px solid var(--redColor); color: var(--redColor);}
.apprLineDesc {font-size: 1.3rem;}

.docSection {margin-top: 30px;}
.docSection.first {margin-top: -1px;}
.docSection.second {margin-top: -1px;}
.docSec-tit {display: flex; justify-content: space-between; align-items: center; font-weight:600; padding-bottom:10px;}
.docSec-tit i {margin-right:5px; color:#FFCD00; font-size: 1.4rem;}
.docSection .referDoc-wrap {width: auto; padding: 0 21px; border-radius: 3px; display: inline-block; line-height: 32px;}
.docSection .apprDesc .MultiFile-label {font-size: 12px; height: 17px !important;}
.docSection .apprDesc .attachViewBtn i {font-size: 11px;}
.docSection .division > .change-btn {height: 20px; line-height: 19px; padding: 0 10px;}


/* 자산 입고 */
.previewFile:not(.multi-file) > ul {flex-direction: column; align-items: center;}
.previewFile.multi-file > ul > li {margin: 8px; position: relative;}
.previewFile.multi-file > ul > li > span {top: 0; left: 0; position: absolute; padding: 4px; color: rgba(0, 0, 0, 0.8); background-color: rgba(255, 255, 255, 0.73); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}
.previewFile > ul {display: flex; border: none;}
.previewFile > ul > li {border: 1px solid #d1d1d1; margin-bottom: 8px;}
.file-input-box {box-sizing: border-box; display: flex; border-radius: 5px; border: 1px solid #ccc; padding: 10px; margin-bottom: 16px;}
.file-input-box:not(.multi-file) {height: 50px;}
.file-name {flex-grow: 1; font-size: 12px; line-height: 30px; color: var(--grayColor-10);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 16px; padding-right: 8px;}
.file-names > span {font-size: 12px; line-height: 30px; color: var(--grayColor-10);
	text-overflow: ellipsis; white-space: nowrap; padding-left: 16px; padding-right: 8px;}
.file-names > span > i {margin-left: 4px; cursor: pointer; color: #ff9797;}
.file-input-btn.MultiFile-btn {box-sizing: border-box; height: 30px; line-height: 30px; min-width: 85px;}
.file-cancel-btn {box-sizing: border-box; height: 30px; line-height: 30px; background-color: var(--grayDarkColor); color:white; border-radius: 5px; text-align: center;
	user-select: none; cursor: pointer; transition: 150ms all ease-in-out; margin-left: 4px; min-width: 60px;}
.file-cancel-btn:hover {background-color: var(--grayLightColor);}
.previewFile.multi-file > ul > li > img {width: 150px; height: 150px;}
.previewFile > ul > li > img {cursor: default;}
.type-select {position: absolute; top: 0; left: 4px;}
.type-select > .radio-wrap input[type="radio"] + label span { border-color: darkgrey;}

/* 모달 가운데 */
.modal {text-align: center;}
@media screen and (min-width: 768px) {
	.modal:before { display: inline-block; vertical-align: middle; content: " "; height: 100%;}
}
.modal-dialog { display: inline-block; text-align: left; vertical-align: middle;}