@import url('/statics/css/reset.css');
@import url('/statics/css/common.css');
@import url('/statics/css/layout.css');
@import url("/statics/css/font/web/static/pretendard.css");
@import url("/statics/css/editor.css");
@import url("/statics/css/tutorial.css");
@import url("/statics/css/all.min.css");


/* layer */
.layeredPopUpContainer {
	background:rgba(0,0,0,0.4);
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:9999;
	display:none;
}
.layeredPopUpInner {
	height:100%;
	overflow:auto;
	padding:60px 25px;
	text-align:center;
}
.layeredPopUpContent {
	background:#fff;
	padding:40px;
	display:inline-block;
	text-align:left;
}

/* title-box */
.title-box{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.title-box__title{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* checkbox, radio form */
.control-form{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5em;

    flex: 0 0 auto;
}
.control-form.toggle-wrap{
	display:inline-block;
} 
.toggle-wrap > *{
	vertical-align:middle;
}
@media all and (max-width:768px){
    .control-form.is-change{
        flex-direction: column;
    }
}


.control-form__label{
    display: flex;
    flex-direction: row;
    align-items: center;
    
    gap: .5em;
}

.control-form__label .icon[src*="angle"]{
    transform: rotate(90deg);
    width: 1rem;
    height: 1rem;
}


/* table (ul + li) */
.table{
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 0 0 atuo;
}
.table.is-display-table {
	display:table;
	table-layout:fixed;
}

.table.is-display-table .table__thead {
	display: table-header-group;
}
.table.is-display-table .table__body {
	display: table-row-group;
}
.table.is-display-table .table__tr {
	display:table-row;
}
.table.is-display-table .table__tr .table__td {
	display: table-column;	
}

.table__thead,
.table__tr,
.table__td{
    display: flex;
    align-items: center;
    font-size: var(--text-small);
    border-bottom: 1px solid var(--theme-color-200);
    white-space:nowrap;
    min-width:0
}
.table__thead,
.table__tr{
    width:100%;
    flex: 1 1 auto;
}
.table__td{
    padding: .5em .25em;
    border-bottom: unset;
    flex: 1 1 auto;
}

/* td width set */
.table__td.width-10{
	flex: 0 0 10%;
}
.table__td.width-15{
	flex: 0 0 15%;
}
.table__td.width-20{
	flex: 0 0 20%;
}
.table__td.width-30{
	flex: 0 0 30%;
}
.table__td.width-40{
	flex: 0 0 40%;
}
.table__td.width-50{
	flex: 0 0 50%;
}
.table__td.width-60{
	flex: 0 0 60%;
}
.table__td.width-70{
	flex: 0 0 70%;
}
.table__td.width-90{
	flex: 0 0 90%;
}
.table__td.width-100{
	flex: 0 0 100%;
}

.table__td p,
.table__td span:not(.is-remark){
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	max-width:100%;
}
.table__thead{
	color: var(--text-color-400);
}
.table__tbody{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.table__tbody:last-child{
    width: auto;
}
.table__tr:last-child{
    border-bottom: none;
}
.table__tr--right{
    display: grid;
    align-self: center;
}
.table__tbody .table__tr:not(.isNoneHover):hover{
    cursor: pointer;
    background:var(--theme-color-200);
}

.table__tr.is-active{
    /* box-shadow: var(--box-shadow--3); */
    background: var(--theme-color-200);
}
.table__td.flex--column{
    align-items: flex-start;
}
.table__td.is-vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.table__td.is-right, .table__td.is-left{
    padding: 0;
}
.table__td .icon{
    vertical-align: middle;
}
.table__td--title{
    font-weight: 500;
    width: 100%;
    height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* table paging */
.table__paging{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    padding:0 1em;
}
.table__paging .pagination{
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    gap: .5em;  
    grid-column-start: 2;
}
.table__paging .select-box{
    justify-self: flex-end;
    grid-column-start: 3;
}

@media all and (max-width:1023px){
  .pagination__index-wrap .pagination__item:nth-child(n+6){
   		display:none;
   }
}
@media all and (max-width:768px) {
    .table__paging {
        grid-template-columns: repeat(1,1fr);
        row-gap: 1rem;
        padding:0
    }  
    .table__paging .pagination{
     grid-column-start: unset;
    }
    .table__paging .pagination .button{
        padding: 0;
    }    
    .pagination, .pagination__index-wrap{
    	grid-column-start:unset;
    	max-width:100%;
    	overflow-x: hidden;
	    flex-shrink: 0;
    }
    .pagination__index-wrap{	   
    	overflow-x: auto;
	    flex-shrink: 0;
    }
  
     .pagination__item{
	    flex-shrink: 0;
    }        
    .table__paging .select-box{
       grid-column-start: unset;
	}	
}

/* list-modal set */
.list-modal{
    border-radius: .5rem;
    background: var(--background-color);
    color: var(--text-color-900);
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 8rem;
    max-width: 10rem;
    border: 1px solid var(--theme-color-400);
    box-shadow: var(--box-shadow--3);
	display: flex;
    flex-direction: column;
    z-index: 9;    
}
.doc-header .list-modal {
	max-width: 13rem;
}
.doc-header .list-modal a {
	text-align: center;
}
.list-modal *{
	font-size:var(--text-small)
}
.list-modal li{
    text-align: left;
}  
.list-modal li:hover{
    background:var(--theme-color-100);
}
.list-modal li a {
	padding: 0em 1em;
	display:block;
}


.table__tbody .table__tr .button--outline{
    position: relative;
}

/* table-state 2023-01-30 */
.table-state{
    display: inline-flex;
    background-color: var(--theme-color-100);
    padding: 1em;
    border-radius: .5em;
}
.table-state__item{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.table-state__accent{
    font-size: var(--text-large);
    font-weight: 600;
}
@media all and (max-width: 768px) {
	.table-state {
		display: flex;
		flex-direction: column;
	}
	.table-state__item {
		flex-direction: row;
		justify-content: space-between;
	}
	.table-state__accent{
	    font-size: var(--text-medium);
	}
}
/* table-top */
.table-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.table-top__box{
    display: inline-flex;
    align-items: center;   
    justify-content: space-between;
    width: 100%;
}
.table-top__left{
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}
#selected-top-box{
    padding: 0 1rem;
    min-height: var(--header-height);
    background: var(--theme-color-100);
}
#selected-top-box .button{
    padding: 0;
}
.table-top__tab{
	gap:1em;
}
 @media all and (min-width:769px) and (max-width:1279px){
  	#default-top-box{
        flex-direction:column;
        gap:1em;
        align-items:flex-start;
    }
}
@media all and (max-width:768px){
	.table-state.has-toggle {
		    flex-direction: column;
	}
	 .table-top{
        flex-direction: column;
        gap: 1em;
        align-items: flex-start;               
    }
    .table-top__box{
        flex-direction: column;
        gap:1rem;
    }
    #selected-top-box{
    	padding:.5em 0;
    	position: fixed;
	    left: 0;
	    right: 0;
	    z-index: 3;
	    bottom: 0;
	    gap:0;
    }
    #selected-top-box .table-top__tab{
	    gap:0;
    }
    .table-top__left{
        flex-direction: column;
        gap: 0;
    }       
    .table{
        display: unset;
    }
    .table__colgroup{
        display: unset;
    }
    .table__thead{
        display: none!important;
    }
    .table__tbody{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:1em;
        padding-bottom:1em;
    }
    .table__tr{
        align-items: stretch;
        width: 100%;
        padding: 1em 0;
        border:1px solid var(--theme-color-400);
        border-radius:1em;
        
    }
    .table__tr:last-child{
    	border-bottom:1px solid var(--theme-color-400);;
    }
    .table__tbody .checkbox-area{
        display: none;
    }
    .table__td{
        padding: 0;
        border-bottom: 0;
    }
     .table__td.is-left{
    	flex-direction: column;
        align-items: flex-start;
        gap:.5em;
        padding:0 1em;
    }    
/*     .table__td.is-left:not(.width-100){ */
/*         flex: 0 0 80%; */
/*         width:80%; */
/*     }     */
    .table__td.is-right{
        border-left: 1px solid var(--theme-color-100);
    }
    .table__td.is-left .table__td{
        width: 100%!important;
        flex:1 1 auto;
    }
    .table-top .button{
        width: 100%;
    }    
    .table-top .search__button {
        width: auto;
    }   
    .table-top__tab {
        width: 100%;
        flex-direction:column;
    }
}

/* state */
.state{
    gap: .25em;
    word-break:keep-all;
    font-size:var(--text-small);
	color:var(--primary-color-500);
	font-weight:500;
}
.state .icon{
	filter: var(--filter-primary);
}
.state.is-success{
	color:var(--success-color-500);
}
.state.is-success .icon{
    filter: var(--filter-success);
}
.state.is-process{
	color:var(--focus-color-500);
}
.state.is-process .icon{
    filter: var(--filter-focus);
}
.state.is-ban{
    color:var(--text-color-500);
}
.state.is-ban .icon{
    filter: var(--filter-text-500);
}

/* search-form */
.search-form{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}
.search-form__form{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.search-form__input{
    border-radius: .5rem 0 0 .5rem;
}
.search-form__button{
    border-radius: 0 .5rem .5rem 0;
    border-left: 0;
    background-color: var(--theme-color-100);
}
.search-form__button .icon{
    filter: var(--filter-text-400);
}

/* popup */
.popup__content{
    padding: 2rem;
}
.popup__footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
/* modal */
.modal,.popup{
    background:var(--background-color);
    display: flex;
    flex-direction: column;
    gap: 0;   
    z-index: 99;
    margin: 0 auto;
    position: relative;
   	top: -2%;
    left: 0%;
    opacity:0;
    transform: translate(0%, 0%); 
	border-radius: 1rem;   
    border: 1px solid var(--theme-color-200);
    box-shadow: var(--box-shadow--5);
}
.modal{
    min-width: 30rem; 
    max-width: 50rem; 
}
.modal.is-active{
	opacity:1;
	
}
.modal__header{
    padding: 0 2rem;
    height: var(--header-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--theme-color-400);
}
.modal__close-button{
    filter: var(--filter-text-500);
    width: 2rem!important;
    height: 2rem!important;
    cursor: pointer;
}
.modal__close-button:hover{
    filter: var(--filter-text-900);
    transition: .3s;
}
.modal__title{
    font-weight: 500;
    font-size: var(--text-large);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

.modal-inner{
	/* padding-top: 5% */
}

@media all and (max-width:768px){
	.modal-inner{
		/* padding-top: 10% */
	}	
}

.modal__content{
    padding: 2em;   
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;    
    overflow:visible;
/*     overflow-y:auto; */
/*     max-height:50vh; */
    position:relative;
}
.modal__content .modal__tab-container {
	display:none;
	min-height:15rem;
}
.modal__content .modal__tab-container.signature-pad-container {
	height:19rem;
}
.modal__tab-container.is-active {
	display:block;
}
.modal__search-form{
    position: relative;
    margin-bottom: 2rem;
}
.modal__search-form .input{
    padding-left: 3rem;
}
.modal__search-form .icon{
    position: absolute;
    left: 1rem;
    top: 50%; transform: translateY(-50%);
    filter: var(--filter-text-400);
}

.modal__list{
    display: flex;
    flex-direction: column;
    gap:.5rem
}
.modal__list .list__item{
    padding: .5rem 1.25rem;
}
.modal__list .list__item .icon{
    filter: var(--filter-text-400);
}
.modal__list .list__item[data-id="*"]{
    font-weight: bold;
}
.modal__list li.is-active{
    font-weight: 500;
    background:var(--theme-color-100);
}
.modal__list li.is-active .icon{
    filter: var(--filter-text-800);
}
.modal__list li:hover{
    background: var(--theme-color-100);
}

.modal__footer{
    display: inline-flex;
    height: 3.5rem;   
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    overflow: hidden;    
    border-top: 1px solid var(--theme-color-400);
}
.modal__footer button{
	font-size:1rem;
}
.modal__footer.has-one-button button{
	width: 100%;
    height: 100%;	
}
.modal__footer.has-double-button{
	justify-content:space-between;
    align-items:center;
    height:var(--header-height);
    padding:0 2em;
}

.modal__message{
	font-weight:500;
	font-size:var(--text-large);
	line-height:1.5em;
	text-align:center;	
	width:100%;
	word-wrap:break-word;
}
.modal__desc{
	text-align:center;	
	width:100%;
	overlfow:hidden;
	text-overflow:ellipsis;
	diesplay:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	word-wrap:break-word;
}

@media all and (max-width:768px){
    .modal{
        min-width: unset;
        width:calc(100vw - 4rem);
  		max-height:calc(109vh - var(--header-height))
    }
    .modal__header{
        padding: 0 1rem;
    }
    .modal__body{
    	max-height:calc(100vh - (var(--header-height) * 3));
        overflow-y:auto;
    }
     .modal__content{
        padding: 1em;
    } 
}


/* 모바일에서만 하단 버튼 디자인 변경 */
@media all and (max-width:480px){
    .modal__footer.has-double-button{
   	    flex-direction: column-reverse;
	    height: unset;
	    padding: .5em 1em;
	    gap:.5em;
    }
    .modal__footer.has-double-button button{
   	    width:100%;
    }	
}


/* popup */
.popup{
    width: 30rem; /*480px*/
}
.popup__content{
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.popup__footer{
    border-top: 1px solid var(--theme-color-400);
    padding: 0 2rem;
    height: 3.5rem; /*56px*/

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}


/* aside */
#mainContentContainer {
	position:relative;
}
#mainContentContainer.is-aside-active .main-content {
	padding-right:22rem;
	transition: padding .3s ease-in-out ;
}

@media all and (max-width:1280px){
	#mainContentContainer.is-aside-active .main-content{
		padding-right:1rem;
	}
}
.aside-content{
    width:20rem;
	position:fixed;
	right: -20rem;
	transition-property : right;
	background:var(--background-color);
	transition-duration:.25s;
	border-left:1px solid var(--theme-color-400);
	box-shadow: var(--aside-box-shadow)
}
.aside-content .container{
    /* height: calc(100% - var(--header-height)); */
    height:100%;
    padding: 2rem 1rem;
	padding-top:4em;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    
    position:relative;
    overflow-y: auto;
    
}
.aside-content .container .button{
    width: 100%;
}
.aside-content .inner{
    display: flex;
    flex-direction: column;
    gap: 1rem;
   
}
.aside-content.is-active{
   right:0;
   transition-property : right !important;
   /* height:100%; */
   bottom:0;
   overflow-y:auto;
}
#asideButtonWrap{
	padding-bottom:4em;
}
.inner{
	background:var(--theme-color-100);
    padding: 1rem .5rem;
}


@media all and (max-width:768px){
	#mainContentContainer.is-aside-active{
		padding-right:0;
	}
	.aside-content{
		max-width:unset;
	}
    .aside-content.is-active{
        /* position: absolute; */
        right: 0;;
        /* top: 0; */
        width: 80vw;
        max-width:20rem;
        /* height: calc(100vh - 4rem); */
        background: var(--background-color);
        z-index:3;
    }
    .aside-content .container{
    	padding: 2rem;
    	padding-top:4em;
    	height:100%;
	}
	

	
	.aside-content .is-mobile{
		position:relative;
	}
}


.round-input{
    display: inline-flex;
    align-items: center;
    background: var(--theme-color-100);
    border-radius: 99rem;

    width: 100%;
    max-width:40rem;
    height: 2rem;
    
    padding:.5rem .25em;
}

.round-input .input {
	line-height: 2rem;
	height: 2rem;
}

#selectExcelDwnrd {
	margin-top: 1rem;
}
.round-input.select-excel-download {
	width: 12rem;
}
@media all and (max-width: 480px) {	
	#selectExcelDwnrd {
		display: block
	}
	.round-input.select-excel-download {
		width: 80%;
	}
}

.size-medium {
	max-width: 30rem;
}
.round-input.width-auto {
	width:auto;
}
.round-input.height-auto {
	height:auto;
}
.round-input.is-small-radius {
	border-radius:6px;
}
.round-input.width-100{
    max-width: 100%;
}

.round-input__search{
	display:inline-flex;
	align-items:center;
	width:100%;
	padding:0 .5em;
}
.search__input{
    border: 0;
    width:100%;
    background:transparent;
    padding:0;
}
.search__input:focus{
    outline:none;
}
/* .round-input .button{
	min-width:2.5em
} */
.search__button{
	padding: 0 1em;
}
.search__button img{
	width:1.25em;
}
.search__button.is-active img{
	filter:var(--filter-primary)
}

.round-input .select-box{
    border: unset;
    min-width: min-content;
    font-size:var(--text-small);
    /* padding: 0; */
}

@media all and (min-width:769px) and (max-width:1280px){
    .round-input{
        max-width: 30rem;
    }
}

@media all and (max-width:768px){
    .round-input{
        max-width: unset;
        height: 2.5rem;
        width: 100%;
    }

    .round-input .select-box{
        max-width: max-content;
    }
}


.basic-button-wrap{
    display: inline-flex;
    gap: 1rem;
}

.basic-button-wrap .button{
    width: 100%;
}

@media all and (max-width:768px){
    .basic-button-wrap{
       flex-direction: column;
    }
}

.icon-with-text{
    display: inline-flex;
    align-items: center;
    gap: .25em;
    font-size: var(--text-small);
}
.icon-with-text.is-secondary{
    color: var(--secondary-color-500);
}
.icon-with-text.is-secondary .icon{
    filter: var(--filter-secondary);
}

[id^="sns-"]{
    border-radius: 99em;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;

    padding: .5rem;
    
    width:3rem!important;
    height:3rem;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

/*[ id^="sns-"] img{
    width: 1.25rem;
    margin-right: 1.5rem;
} */
[id^="sns-"] span{
    font-size: var(--text-small);
    font-weight: 500;
    
    display:none;
}

#sns-google{
	background:var(--white)
}
#sns-naver{
    background: #03c75a;
}
#sns-naver span{
    color: white;
}

#sns-kakao{
    background: #FEE500;
}

#sns-kakao span{ 
    color: rgba(0,0,0,85);
}

@media all and (max-width:768px){
    [id^="sns-"]{
        justify-content: center;
    }
}

.card-wrap{
    display: flex;
    flex-direction: column;
    gap:2rem;
}
.card-wrap.is-double{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
}
.card-wrap.is-triple{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
}


.card{
    border: 1px solid var(--theme-color-400);
    border-radius: 1rem;
    background-color: var(--background-color);

    padding: 0 1em;
}
.card .button--text, .step-container .button--text{
    width: fit-content;
    padding: 0;
}
.card__inner{
    display: flex;
    flex-direction: column;
    padding: 1em;
    gap: 1em;
}
.card__body{
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.card__body--row{
    display: inline-flex;
    gap: 1rem;
}

.has-border{
    border-bottom: 1px solid var(--theme-color-400);
}
.has-border:last-child{
	border-bottom:unset;
}
.has-border--top{
	border-top:1px solid var(--theme-color-400);
}

.card__row{
	width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

}
.card__row.is-end{
    justify-content: flex-end;
}

@media all and (max-width:768px){
    .card-wrap{
    	gap:1em;	
    }
    .card{
        padding: 0 .5em;
/*         border:none; */
/*         border-bottom:1px dashed var(--theme-color-400); */
/*         border-radius:0; */
    }
    .card__row.is-change{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 1rem;
    }
    .card__desc{
        margin-bottom: 1rem;
    }
    .card__row .card__desc{
        width: 100%;
        justify-content: space-between;
    }
}

/* card-wrap (grid) */
@media all and (max-width:1023px){
	 .card-wrap.is-double{
		grid-template-columns:repeat(1,1fr);
	}
}

/* signature */
.signature-card {
    border: 1px solid var(--theme-color-400);
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    aspect-ratio:1 / 1
}
.signature-card:hover{
    transition: .3s;
    box-shadow: var(--box-shadow--5);
}
html[data-theme="dark"] .signature-card{
	background:var(--theme-color-500);
}
.check-default-area{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.check-default-area .icon:not(.on){
    display: none;
}
/* .user-active-area{ */
/* 	padding: 0 1rem; */
/* } */
.signature-area {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80%;
}
.signature-area img{
    width: 80%;
    height:auto;
    max-height:100%;
    object-fit:contain;
}

@media all and (max-width: 768px) {
	.signature-card{
		padding:0 1em;
	}
    .check-default-area .button,
    .user-active-area .button
    {
        width: fit-content;
        padding:0;
    }
}

.jstree-default .jstree-search {
    width: 100%;
    background: var(--theme-color-100);
    color: var(--text-color-800);
    font-style: normal;
    font-weight: 500;
}

#deleteDepartment{
	grid-row:1
}
@media all and (max-width:768px){
    #mobile-aside-container{
        position: fixed;
        top: var(--header-height);
        right: 0;        
        height: calc(100vh - var(--header-height));
        background: var(--background-color);
        z-index: 3;
        border-radius: 0;   
        width:0;
        overflow-x:hidden;
        transition:width .3s ease-in-out;
        visibility:hidden;        
        padding:0 2rem;
    }
    #deleteDepartment{
		grid-row:unset;
	}
 	
    #mobile-aside-container.is-active{
    	visibility:visible;
    	width: 80vw;
    	max-width:20rem;
        overflow-x: unset;
        transition:width .3s ease-in-out;
    }
    #mobile-aside-container .table{
        overflow-y: scroll;
 		padding-bottom:2em;
 	}
}
.dtp_modal-digit{
    font-family: 'pretendard';
    font-weight: 500;
}
.step-container {
    padding: 2rem var(--header-height);
    border-left: 1px dashed var(--theme-color-400);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    overflow-x: hidden;
    padding-bottom: var(--header-height);
    position:relative;
}
.step-container.is-waiting{
	filter:grayscale(1)
}
.step-container.is-waiting:before {
	content:"";
	z-index:1;
	background:var(--dim-soft);
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
.step-container:first-child {
	border-left:0;
}
.step__title{
    display: flex;
    flex-direction: column;
    gap: .25rem;

    font-weight: 700;
    font-size: calc(1.333 * 1.333 * 1rem);
    line-height: 1.5em;
}

.step__title span{
    color: var(--primary-color-500);
}

@media all and (max-width:768px){
	.step__title{
		flex-direction:row;
		justify-content:center;
	}
    .step-container{
        padding: 1rem 2rem;
        gap: 1rem;
        padding-bottom: var(--header-height);
        border-right: none;
        border-bottom:1px dashed var(--theme-color-600)
    }   
    .step-container.is-waiting{
    	border-left:none;
    }
}

/* productInfo*/
#price-list .table__td,
#price-list-enter .table__td{
    justify-content: center;
    padding: 0.25em ;
}
#price-list .table__tr:hover {
    cursor: pointer;
    transform: none;
    box-shadow: none;
}

@media all and (max-width:768px) {
	#price-list .table__tr,
	#price-list-enter .table__tr {
		padding: 0.5em;
	}
}

#price-list .table__tr:first-child .table__td{
    padding: 0.25em;
}
#price-list .table__thead .table__td{
    color: var(--text-color-500);
}
#price-list .table__td.is-active{
    background:var(--primary-color-500);
    color: var(--white);
    width: 100%;
    text-align: center;
    padding: 1em;
    border-radius: .5em;
}

@media all and (max-width:768px){
	#price-list .table__tr:first-child .table__td{
		padding:0
	}
    #price-list .table__td,
    #price-list-enter .table__td{
    	padding:0;
        justify-content: flex-start;
    }
}

.table.is-scroll--hor{
    overflow-x: scroll;
    flex:  0 0 auto;
    flex-wrap: nowrap;
}
.table.is-scroll--hor .table__tr,
.table.is-scroll--hor .table__tbody,
.table.is-scroll--hor .table__thead
 {
    flex:  0 0 auto;
    width: 100%;
    flex-wrap: nowrap;
}
.table.is-scroll--hor .table__thead
 {
    position: sticky;
    top: 0;
    background: var(--background-color);
}
.table.is-scroll--hor .table__td {
    flex:  0 0 auto;
}

/* state box set */
.state-box {
    width: 100%;
    background: var(--primary-color-10);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5em;
    color: var(--primary-color-500);
    font-size: var(--text-small);
    padding: 0.5em;
}
.state-box.is-not-flex {
	display:block;
	padding: 1.5em 0.5em;
}
.state-box.is-info{
    background: var(--secondary-color-10);
    color: var(--secondary-color-500);
}

/* bar set */
.bar-wrap{
	display:flex;
	flex-direction:column;
	gap:.25em;
	align-items:flex-end;
}
.bar{
    width: 100%;
    height: .5em;
    display: block;
    border-radius: 99em;
    background: var(--theme-color-200);
}
.bar__primary{
	width:0;
    height: .5em;
    display: block;
    border-radius: 99em;
    background: var(--primary-color-500);
    
   	transition: width 1.75s ease-in-out;
	transition-delay:1s;
}
.bar__value{
	font-size:var(--text-small);
}

/* tooltip set */
.tooltip{
    position: relative;
    cursor: default;
    width: fit-content;
}
.tooltip__absolute{
    position: absolute;
}
.tooltip.has-gap {
	width: auto;
}
.tooltip__modal{
    visibility: hidden;
    min-width: 15rem;
    max-width: 20rem;
    background: var(--text-color-900);
    filter: var(--filter-shadow-3);
    padding: 1em;
    border-radius: .5em;
    color: var(--text-color-100);
    position: absolute;
    z-index: 1;
}
.tooltip__modal.width-10rem{
	min-width: 10rem;
    max-width: 10rem;
}
.tooltip__modal.width-12rem{
	min-width: 12rem;
    max-width: 12rem;
}
.tooltip__modal li{
	font-size:var(--text-small)
}
.tooltip__modal::before{
    content: '';
    width: 0;
    height: 0;
}
.tooltip:not(.is-disabled):hover .tooltip__modal{
    visibility: visible;
    transition: .4s;
}
.tooltip.is-disabled p{
    color:var(--text-color-400);
}
.tooltip__modal.is-bottom{
    top: 2em;
    left: 50%;
    transform: translateX(-50%);
}
#masssign-signer-list .fa-exclamation-circle {
	cursor: pointer;
}
#masssign-signer-list .tooltip__modal.is-bottom {
	right: 0;
	transform: translateX(-90%);
}
.tooltip__modal.is-bottom::before{
    position: absolute;
    top: -.5em;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width:  0 .75em  .75em .75em;
    border-color: transparent transparent  var(--text-color-900)  transparent;
}
#masssign-signer-list .tooltip__modal.is-bottom::before {
	left: auto;
	right: 0%;
}
.tooltip__modal.is-left{
    left: 110%;
    top: 50%;
    transform: translateY(-50%);
}
.tooltip__modal.is-left::before{
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    left: -.5em;
    border-style: solid;
    border-width: .75em 1em .75em 0;
    border-color: transparent var(--text-color-900) transparent transparent;
}

.tooltip.tab-inner {
	white-space: normal;
	line-height: 1.43;
	font-size: 0.875rem;
	font-weight: 400;
	cursor: pointer;
}
.tooltip.tab-inner .is-remark {
	font-size: 1rem;
}
.custom_template .button--text .is-remark  {
	color: var(--secondary-color-400);
}
.custom_template .tooltip__modal.is-left {
	top: 1.8rem;
    left:0;
    transform: translateY(0);
}
.custom_template .tooltip__modal.is-left::before {
	position: absolute;
    top: -.1em;
    left: 0%;
    
    border-style: solid;
    border-width:  1em  0 0  1em;
    border-color: transparent transparent transparent var(--text-color-900);
}
@media all and (min-width:769px) and (max-width:1280px) {
	.tooltip__modal.is-tooltip-mobile-right {
		left: 105%;
	    top: 50%;
	    transform: translateY(-50%);
	}
	.tooltip__modal.is-tooltip-mobile-right::before{
	    top: 50%;
	    transform: translateY(-100%);
	    position: absolute;
	    left: -.5em;
	    border-style: solid;
	    border-width: .75em 1em .75em 0;
	    border-color: transparent var(--text-color-900) transparent transparent;
	}
}

@media all and (max-width:768px){
	.tooltip__modal.is-left{
	    top: 1.8rem;
	    left:0;
	    transform: translateY(0);
	}
	.tooltip__modal.is-left::before{
	    position: absolute;
	    top: -.1em;
	    left: 0%;
	    
	    border-style: solid;
	    border-width:  1em  0 0  1em;
	    border-color: transparent transparent transparent var(--text-color-900);
	}
/* 	.tooltip__modal{ */
/* 		display:none; */
/* 	} */
	.tooltip.tab-inner {
		display: none;
	}
}

/* 대량발송 상세 tooltip */
.status-area .tooltip__modal {
    min-width: 5rem;
    max-width: 10rem;
}

/* is-empty set */
.is-empty{
    height: 28rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    justify-content: center;
}
.card .is-empty{
    height: 20rem;
}

/* circle-wrap set */
.circle-wrap{
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}
.circle__item{
    border: 1px solid var(--theme-color-400);
    border-radius: 99em;
    text-align: center;
    width: 10em;
    height: 10em;   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5em;
}
@media all and (max-width:768px){
    .is-empty{
        height: unset;
        margin: 2rem 0;
        gap: 1rem;
    }
    .circle-wrap{
        flex-direction: column;
    }
    .circle-wrap .icon{
        transform: rotate(90deg);
    }
}

/* file-upload lib */
.ff_fileupload_wrap{
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.ff_fileupload_wrap p{
	word-break:break-all;
}

/* datetimepicker */
#date-time-picker-set, .input-icon-set{
    display: inline-flex;
    align-items:center;
    border: 1px solid var(--theme-color-400);
    border-radius: .5em;
}
#date-time-picker-set .dtp_main{
    border: unset;
    width:inherit;
    justify-content: space-between;
    width:100%;
}

#date-time-picker-set.is-disabled {
	position:relative;
}
 #date-time-picker-set #endDate.is-disabled {
	    background: var(--theme-color-100);
	    color: var(--text-color-500);
	    cursor:no-drop;
 }

#date-time-picker-set.is-disabled::after{
	position:absolute;
	left:50%;
	right:0;
	top:0;
	bottom:0;
	
	content:'';
	display:block;
	width:50%;
	height:100%;
	background:var(--theme-color-100);
	opacity:.5;
	z-index:99;
}

#date-time-picker-set .dtp_main > .icon{
	position:unset;
}

#date-time-picker-set-default .dtp_main > .icon{
    position:unset;
}

.dtp_main span{
	white-space:nowrap;
}



@media all and (max-width:768px){
	.dtp_modal-content-no-time{
		left:50%!important;
		top:50%!important;
		transform:translate(-50%,-50%);
		max-width:calc(100vw - 4rem);
		position:fixed;
	}
	#date-time-picker-set{
	width:100%;
		font-size:var(--text-small);
	}
	.dtp_main{
		padding:0 .5em;
		gap:.5em;
	}
	
	.select-box__select-tag{
		padding-right:2em;
		text-align:left;
	}
	
	#date-time-picker-set .icon{
		display:none;
	}
	
	.search__button{
		padding: 0 .5em;
	}
}


/* input type color */
input[type="color"]{
    -webkit-appearance: none;
    -moz-appearance: none;;
    appearance: none;
    width: 1em;
    height: 1em;
    border: unset;
    cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch{
    border-radius: 99em;
    border: none;
}
input[type="color"]::-moz-color-swatch{
    border-radius: 99em;
    border: none;
}


/* double input set*/
.double-input{
	display: inline-flex;
    border: 1px solid var(--theme-color-400);
    align-items:center;
    border-radius: .5em;
}
.double-input__input{
	border:none;
}


/* signature-pad*/
.tag-stamp-type-wrap {
	margin-top: 10px;
}
.tag-stamp-type-wrap .tag-stamp-type {
	padding: 0.35rem 0.75rem;
	border-radius: 8px;
	background-color: var(--theme-color-400);
	color:var(--text-color-900);
	min-width: 60px;
}
/* #stampResultList {
	top: 4.5rem;
} */
@media all and (max-width:768px){
	#stampResultList {
		display: grid;
	    grid-template-columns: repeat(2,minmax(100px, 1fr));
	    gap: 1rem;
		top: 7.5rem;
	}	
	.genSignResultList .genSignImgWrap{
		width:100%
	}
	#cursiveResultList{
		top: 7.5rem;
	}
}
.tag-stamp-type.active {
	background-color: var(--primary-color-500);
	color: #fff;
}
.signature-pad-container {
	display:none;
	width:100%;
	/* max-width:45rem;
	max-height:28.5rem; */
	height:5rem;
	/* �뜝�럩寃ュ뜝�럥�뿴�뜝�럩�꼪�뜝�럩逾ε뜝�럩�뮔 */
	border:1px solid var(--theme-color-400);
	position:relative;
}
.signature-pad-container.is-padding {
	padding:1rem;
}
#signature-draw-container .signature-pad-body {
	position:relative;
	width:100%;
	height:100%;
	max-height:15rem;
	border:1px solid var(--theme-color-400);
	background:var(--white);	
}
#signature-my-container .my-signature-item {
	display:flex;
	position:relative;
	min-height:8rem;
	border:2px dashed var(--theme-color-400);
    padding: 0 2rem;
    align-items: center;
    justify-content: center;
    width: 100%;
}
#signature-my-container .my-signature-item.is-active {
	border:2px solid var(--primary-color-400);
}
#signature-my-container .my-signature-item img {
	width:100%;
	display:block;
}
#signature-my-body {
	overflow-y: auto;
	height:100%;
	padding:0.6rem;
}
#signature-draw-container canvas {
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
} 

@media all and (max-width:768px){
	#signature-my-container .my-signature-item{
		padding:1em;
		height:8em;
	}
	#signature-my-container .my-signature-item img {
		width:100%;
		height:100%;
		object-fit:contain;
	}
}

.genSignResultList {
	overflow-y: scroll;
    position: absolute;
    left: 0;
    padding: 1rem;
    right: 0;
    top: 70px;
    bottom: 0;
    border-top: 1px dashed var(--theme-color-400);
}

.genSignResultList:after {
	clear:both;
	content:"";
	display:block;
}
.genSignResultList img {
	display:block;
	width:100%;
	height:auto;
}
.genSignResultList .genSignImgWrap {
	padding:10px;
	display:flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	cursor:pointer;
	border:2px solid transparent;
	background:#fff;
	justify-content:center;
}
.genSignResultList .genSignImgWrap .font-name {
	margin-top: auto;
}
.genSignResultList .genSignImgWrap:hover {
	background:#f9f9f9;
}
.genSignResultList .genSignImgWrap.active {
	border-color:var(--primary-color-400);
	background:#f9f9f9;
}

/* test css */
.genSignResultList ul{
	display:grid;
	grid-template-columns: repeat(2,1fr);
	gap:1em;
}
.genSignResultList li{
	border:1px solid var(--text-color-900);
	height:3rem;
}

/* �겫占쏙옙苑� 占쎈뱜�뵳占�*/
#departmentMemberWrap {
	min-height:20rem;
}
#departmentTreeWrap {
	max-height: 400px;
    overflow-y: auto;
}
#departmentTreeWrap dl {
	padding-left:15px;
	position:relative;
	font-size:14px;
}
#departmentTreeWrap dl:before {
	content:"";
	left:0;
	top:0;
	bottom:0;
	width:1px;
	position:absolute;
	background:var(--theme-color-300);
}
#departmentTree dl.department-sub {
	display:none;
}
#departmentTreeWrap .treeMore {
	flex:1;
}
#departmentTree a{
	width:100%;
	padding:.25em .5em;
	margin-right:.5em;
	cursor:pointer;
	height: auto;
}

#departmentTree a.is-active {
	background:var(--theme-color-200);
	font-weight:500;
}


/*qr code design*/
#qr_code_area{
	border: 1px solid var(--theme-color-400);
	width:100%;
	height:20rem;

	display:grid;
	place-items:center;
}
#qr_code{
	background:var(--theme-color-900);
	width:15rem;
	height:15rem;
}

/*virtual keypad*/
.virtual-keypad{
	
	width:100%;
	border-radius:.5em;
}
.virtual-keypad__container{
	height:100%;
}
.virtual-keypad__item-wrap{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	width:100%;
	height:100%;
	
	border:1px solid var(--theme-color-400);
	border-radius:.5em;
	overflow:hidden;

}
.virtual-keypad__item{
	background:var(--background-color);
	text-align:center;
	padding:1em;
	
	
	border-right:1px solid var(--theme-color-400);
	border-bottom:1px solid var(--theme-color-400);
	
	cursor:pointer;
}

.virtual-keypad__item:nth-child(3n){
	border-right:unset;
}

.virtual-keypad__item:nth-child(n+10){
	border-bottom:unset;
}


.virtual-keypad__item:hover{
	background-color:var(--theme-color-100);
	transition:.3s;
}

#pin-delete-all{
    grid-row-start: 4;
    grid-column-start: 1;
}


#pin-delete{
	grid-row-start: 4;
    grid-column-start: 3;
}


/* 2023-01-18 */
input[readonly]{
	cursor:default;
}
input[readonly]:focus{
	outline:none;
}



/* massign custom*/
#masssign-grid-wrap {
	
}
#masssign-signer-list-wrap {
	max-height:15rem;
	overflow-y:auto;
}
#masssign-signer-table {
	width:100%;
	table-layout:fixed;
	border-radius:6px;
}
#masssign-signer-table th,
#masssign-signer-table td {
	border-bottom:1px solid var(--theme-color-400);
	padding:0.3rem;
}
#masssign-signer-table tr:first-child td {
	border-top:1px solid var(--theme-color-400);
}
@media(max-width:1280px) {
	#masssign-grid-wrap {
		grid-template-columns:repeat(1,1fr);
	}
}
.newcontract-already-list,
#newcontract-template-list {
	padding:0 0.3rem;
	max-height:14rem;
	/* height:14rem; */
	overflow-y:auto;
	gap:0;
}
#newcontract-upload-area {
	max-height:14rem;
	height:14rem;
}
.newcontract-already-list a,
#newcontract-template-list a {
	padding:1rem;
	border-bottom:1px solid var(--theme-color-400);
}
.newcontract-already-list a:not(.is-active):hover,
#newcontract-template-list a:not(.is-active):hover {
	background:var(--theme-color-100);
	transition:.3s
}
.newcontract-already-list a.is-active,
#newcontract-template-list a.is-active,
.newcontract-already-list a.is-active .is-remark,
#newcontract-template-list a.is-active .is-remark {
	background: var(--secondary-color-500);
    color: var(--white);
}



.logo__img{
	height:4rem;
  width: 200px;
}
.logo__img.is-small{
	height:3rem;
}
@media all and (max-width:1280px){
	 .logo__img.is-small{
     	height:2.5rem
     }
}

#error-template.container{
	height:100vh;
	padding:20vh 0;
}

@media all and (max-width:1279px){
	#error-template.container{
		max-width:calc(100vw - 4rem)
	}
}
.empty-container.container {
	height:100vh;
	padding:20vh 1rem;
	background:#f0f2f4;
	max-width:none;
}
.empty-container.container .empty-content-box {
	background:#fff;
	text-align:center;
	width:100%;
	max-width:430px;
	padding:2rem;
	border-radius:12px;
}
/* loading layer*/
#loadingLayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  z-index: 10001;
  justify-content: center;
  align-items: center;
}
#loadingLayer .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 8px solid var(--theme-color-400);
  border-top: 8px solid var(--primary-color-500);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-right: -30px;
  animation: spinner 2s linear infinite;
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 2023-01-31 help */
#help-layer {
	width:0;
	height:0;
	overflow-x:hidden;
	
	position:fixed;
	right:0;
	top:0;
	z-index:100;
	
	background:var(--background-color);
	
	transform-origin:right;
	transition:width .35s ease-in-out;
	
	border-left:1px solid var(--theme-color-200);
	box-shadow:var(--help-layer-shadow);
}
#help-layer.is-active{
	z-index:3;
	width:25rem;
	overflow-x:unset;
	min-height:100vh;
	
	transform-origin:right;
	transition:width .35s ease-in-out
}

#help-layer__title{
	height:calc(var(--header-height) * 1.5);
	padding:0 1em;
	
	background:var(--secondary-color-500);
	color:var(--white);
}
#help-layer__title .icon{
	filter:var(--filter-white);
	width:1.5em;
}
#help-layer .input-box{
	border:1px solid var(--theme-color-500);
	background:var(--background-color);
	border-radius:50em;
	
	display:inline-flex;
	align-items:center;
	
	width:100%;
	overflow:hidden;
}

#help-layer .basic-list{
	gap:0;
}
#help-layer .basic-list p{
	color:var(--text-color-800)
}
#help-layer .list__item{
	padding: 1em 0;
	border-bottom:1px solid var(--theme-color-100);
}
#help-layer .icon[src*="pop-out"]{
	width:1.25em;
	opacity:.6;
}
#help-layer .icon[src*="pop-out"]:hover{
	transition:.25s;
	opacity:1;
}


@media all and (max-width:768px){
	#help-layer.is-active{
		display:none;
	}
}



/* ofc 占쎌뒠 筌욑옙占쎌뜖占쎈튊占쎈맙*/
#testPage{
	width:100vw;
	min-height:100vh;
	/* background:#fff9f9; */
}

#testPage .header{
	height:5rem;
	background:var(--white);
	border-bottom: 1px solid var(--theme-color-400);
}
#testPage .header .container{
	height:100%
}
#testPage .header .logo{
	width:6rem;
}

#testPage .sub-header{
	background:var(--secondary-color-500);
	height:25rem;	
}

#testPage .sub-header .container{
	height:100%;	
	justify-content:center;
	gap;2rem;
}


#testPage .sub-header .h4{
	color:var(--white)
}
#testPage .sub-header .input-box{
	border:1px solid white;
	background:white;
	border-radius:1em;
	
	display:inline-flex;
	align-items:center;
	padding-right: 1em;
}

/* #testPage .testpage-main{
	margin-top:10rem;
} */

#testPage .testpage-main .container{
	background:var(--white);
	border-radius:1rem;
	
	padding:5rem;
}



/*2023-02-02*/
.modal__content-wrap{
	display:flex;
	flex-direction:column;
	gap:0;
}
.has-scroll--hor{
	max-height:100%;
	overflow-y:auto;
}
.modal .has-scroll--hor{
	max-height:30rem;
	padding-right:.25em;
}
.is-short--5rem{
	max-height:5rem!important;
}
.is-short--10rem{
	max-height:10rem!important;
}
.modal__content-item{
	border-bottom:1px solid var(--theme-color-400);
	padding:1em 0;
	
	display:inline-flex;
	flex-direction:column;
	gap:.5em;
}
.modal__content-item:first-child{
	padding-top:0;
}
.modal__content-item:last-child{
	border-bottom:none;
}


@media all and (max-width:768px){
	.modal .has-scroll--hor{
		max-height:calc(100vh - (var(--header-height) * 5))
	}
}


/*2023-02-03*/
.toast{
	position:fixed;
	left:50%; transform:translateX(-50%);
	bottom:10%;
/* 
	display:none;
	opacity:0; */
	transition:.3s;
}
.toast.is-active{
	display:block;
	opacity:1;
	transition:.3s;
}

.toast > span{
	background:var(--dim-deep);
	border-radius:50em;
	padding:.5em 1em;
	color:var(--text-color-100);
}


/* editor / request modal file list */
.basic-list.in-modal{
	gap:0;
}
.list__item-wrap.in-modal{
	display:inline-flex;
	gap:0;
	padding:.5em 0;
}
.list__item.in-modal.is-left{
	flex-direction:column;
	gap:.25em;
	align-items:flex-start;
	width:80%;
	padding-right:.5em;
	
}
.list__item.in-modal.is-right{
	border-left:1px solid var(--theme-color-400);
	padding-left:.5em;
	align-items:center;
	
	width:20%;
}


@media all and (max-width:768px){
	.list__item-wrap.in-modal{
		flex-direction:column;
		gap:.5em;
		align-items:flex-end;
	}
	.list__item.in-modal.is-left{
		padding-right:0;
		width:100%;	
	}
	.list__item.in-modal.is-right{
		border-left:none;
		padding-left:0;
		width:100%;
		justify-content:flex-end;
	}
	.list__item.in-modal.is-right .file-box,
	.list__item.in-modal.is-right .file-box label {
		width:100%;
	}
}

/*strip banner*/
.strip-banner{
	display:flex;
	flex-direction:column;
	width:100%;
	height:80px;
	border:1px soldid black;
	background:#040d44;
/* 	height:var(--header-height); */
}


.strip-banner__container {
	display:flex;
	flex-direction:column;
	width: 100%;
	height: 100%;
    justify-content: center
}

.strip-banner__container .button .icon{
	width:1.5em
}
.strip-imgbox {
	display:block;
	width:100%;
	height:auto;
}
.strip-rightbox {
	position:absolute;
	right:0;
}
.strip-banner-img {
	display:block;
	width:100%;
	height:auto;
}
.day-none {
	color:#fff;
}
.login-btn .btn-wh {
	filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(218deg) brightness(106%) contrast(103%);
}

/* helplayer */
#helpLayerList {
	max-height:calc(100vh - 12rem);
	
}
#help-layer .card__inner{
	padding-bottom:1rem;
}


/* modal right */
.button--toggle{
	padding:4em 0;
	border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#detailModalInnerWrap{
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	
	display:inline-flex;
	align-items:center;
	gap:0;

}


#detailModalInnerWrap .button{
	background:var(--theme-color-100);
}

#detailModalToggleTarget{
	width:0;
	overflow-x:hidden;
	padding:0;
	
	padding:2em 0;
	transition:.3s;
}
#detailModalToggleTarget.is-active{
	width:20rem;
	overflow-x:auto;
	padding:2em 1em;
	transition:.3s;
	position:relative;
    border-bottom-right-radius: 1rem;
}

@media all and (max-width:768px){
	#detailModalWrap .width-10{
		width:100%;
	}
	#detailModalToggleTarget.is-active{
		width:15rem;
	}
}

#pdfPreviewLayer {
	position:fixed;
	z-index:3;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:rgba(0,0,0,0.3);
	padding:1rem;
	overflow-y:auto;
}
#pdfPreviewInner {
	max-width:560px;
	margin:0 auto;
	position: relative;
}
#pdfPreviewRemoveButton{
	width:4em;
	height:4em;
	position: absolute;
    right: -10%;
    top: 0;
}
#pdfPreviewRemoveButton .icon{
	filter:var(--filter-white);
	
}

@media all and (max-width:768px){
	#pdfPreviewLayer {
		padding-top:110px;
	} 
	#pdfPreviewInner {
		max-width:calc(100vw - 2rem);
	}
	#pdfPreviewRemoveButton{
		position: absolute;
	    right:50%;
	    transform:translateX(50%);
	    top: 100%;
	}
}


/*froala (占쎈땾占쎌젟占쎈툡占쎌뒄)*/


#wysiwyg_wrap{
    min-width:1050px;
}
#formMngValidate{
	background:var(--background-color);
	padding:2em;
	border-radius:.5em;
	box-shadow:var(--box-shadow--3)
}

#formMngValidate .button--text{
	padding:0;
}
#formMngValidate .icon{
	padding:0;
}

#editMode-add-control {
	border-bottom:1px solid var(--theme-color-400);
	margin-top:-20px;
}


#fileDrpZone p{
	color:var(--text-color-900)
}


.basic-list.has-border--bottom{
	border-bottom:1px solid var(--theme-color-400)
}
.basic-list.has-border--bottom:last-child{
	border-bottom:none
}

#emailBrandingInfoFrm .width-50,
#emailBrandingInfoFrm .width-80{
	width:100%;
}

.orderTxtWrap{
	white-space:nowrap;
}

/* �빟愿� �뒪���씪 吏��젙 */
.terms-style-01 {
	max-height: 30rem;
	overflow-y: auto;
}
.terms-style-01 p {
	margin: 1rem 0;
}
.terms-style-01 .bold {
	font-weight: 600;
}
.terms-style-01 ul {
	margin-top: 0.5rem;
}
.terms-style-01 ul li {
	margin-bottom: 0.5rem;
}
.terms-style-01 ul li.padding{
	padding-left: 0.5rem;
}

@media all and (max-width:768px){
	.terms-style-01 {
		font-size: 0.875rem;
	}
}


/*save template modal in format */
.format__item{
	align-items:center;	
	gap:.25em;
	cursor:pointer;
}
.format__item .icon{
	width:2.5rem;
}
.format__item:hover .icon{
	filter:var(--filter-primary);
}


/* aside close button */
#aside-close-button{
	padding:0;
	position:absolute;
	right:1em;
	top:1rem;
	width:3rem;
	height:3rem;
	display:grid;
}
#aside-close-button img{
	width:100%
}



#formEditor ol, 
#formEditor ul {
	list-style:unset;
	padding-inline-start: 40px;
}
/* 泥⑤��뙜由� 愿�由� �뙆�씪�슂泥� view new*/

/* #modalEditorRequestWrap .list__item.in-modal.is-left{ */
/* 	width:25% */
/* } */
#modalEditorRequestWrap .list__item.in-modal.is-left ul{
	width:100%
}
#modalEditorRequestWrap .list__item.in-modal.is-left li{
	margin-bottom:1em;
}
#modalEditorRequestWrap .list__item.in-modal.is-left li:last-child{
	margin-bottom:0;
}
#modalEditorRequestWrap .list__item.in-modal.is-left p{
	word-break:break-all;
	white-space:normal;
}
#modalEditorRequestWrap .list__item.in-modal.is-right{
	width:75%
}

/* file request */
#modalEditorRequestWrap{
/* 	padding-bottom:2rem; */
	position:relative;
}

#requestFileUpload{
	height:unset;
}
#modalEditorRequestWrap .list__item{
	padding:0;
	padding-bottom:2em;
	height:unset;
}

.fileAtchItmes{
	align-items:flex-start;
	margin-left:25%;
}

#modalEditorRequestWrap #fileSignerWrap{
	position:absolute;
	overflow-y:auto;
	width:25%;
	padding-right:1em;
	height:100%;
}

.fileAtchItmes li{
	width:100%;
	padding: 0 1em;
}

#modalEditorRequestWrap .requestInputWrap{
	border-bottom:1px dashed var(--theme-color-400);
	width:100%

}
#modalEditorRequestWrap .requestInputWrap:nth-child(n+2){
	padding-top:1em
}
#modalEditorRequestWrap .requestInputWrap:last-child{
	border-bottom:none;
}
#buttonAddfileRequest{
	position:absolute;
    left: 0;
    bottom: 0;
    padding: 0.5em 2rem;
    border-top: 1px solid var(--theme-color-400);
    background:var(--background-color);
}
#newContractContainer {
	position: relative;
    padding-left: 140px;
}
#newContractTypeSelectWrap {
	position: absolute;
    left: 0;
    width: 120px;
    border-right: 1px solid var(--theme-color-400);
    bottom: 0;
    top: 0;
    padding-right:10px;
}
#newContractTypeSelectWrap .tab {
	flex-direction: column;
    align-items: flex-start;
    gap:0.75em
}
#newContractTypeSelectWrap li {width:100%;text-align:left;}
#newContractTypeSelectWrap li a {padding-left:0;}
#newContractTypeSelectWrap li a.active img {
	filter:var(--filter-white);	
}
#newContractTypeSelectWrap li a span, 
#newContractTypeSelectWrap li a img {
    display: inline-block;
    vertical-align: middle;
}
#newContractTabWrap {margin-bottom:1rem;}

@media(max-width:640px) {
	#newContractContainer {padding-left:0;}
	#newContractTypeSelectWrap {width:auto;position:static;padding-right:0;border:0;margin-bottom:1rem;}
	#newContractTypeSelectWrap .tab {flex-direction:row;}
	#newContractTypeSelectWrap li {
		width:25%;
		text-align:center;
		font-size: 14px !important;
    	white-space: normal;
	}
	#newContractTypeSelectWrap li a {
	    height: auto;
	    padding: 0;
	    line-height: 1.43em;
	}
}


/* extrnal */

#external-template{
	width:720px;
	margin: 0 auto;
}

#external-template #add-signature{
	background:var(--theme-color-200);
	transition:.3s;
} 
#external-template #add-signature:hover{
	background:var(--theme-color-400);
} 
#external-template .article{
	margin-top:1em;
}

#external-template .radio{
	background:var(--background-color)
}

.article__title{
    color: var(--text-color-500);
    font-weight: 500;
    margin-bottom: .5em;
}

.article__number{
	display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1rem;
    line-height: 1rem;
    
    border-right: 1px solid var(--theme-color-600);
    font-size:var(--text-small);
    margin-right:.25em;
}

@media all and (max-width: 768px) {
	#external-template{
		width:100%;
	}
	#myPayHistDetailCard .width-50 {
		width: 100%;
	}
	#myPayHistDetailCard .width-15 {
		width: 20%;
	}	
}


#link-title-wrap{
	align-items:flex-start;
	gap:4em;
}
#link-title-wrap .flex-align--end{
	flex-shrink:0;
}

@media all and (max-width:768px){
	#link-title-wrap .flex-align--end{
		flex-shrink:0;
		width:100%;
	}	
}

/*myBrandingInfo*/
#thumbnailMailform{
    width: 100%;
    /* padding-top: 141.4%; */
    position: relative;
}
#mailOuterDivBgColor{
	box-sizing: border-box;
    margin: 0;
    padding: 64px 32px;
    font-size: 14px;
    letter-spacing: -1px;
    line-height: 1.6;
    /* position: absolute; */
    left: 0;
    top: 0;
    width: 100%;
    color:#333;
}
#mailInnerDivBgColor{
	padding: 32px;
}

@media all and (max-width:1023px){
	#thumbnailMailform,
	#emailBrandingInfoFrm .width-50.is-pc{
		display:none;	   
	}
	
	#emailBrandingInfoFrm .width-50{
	width:100%}
}


/* folder list edit */
.modalFolderListItem:hover{
	background:var(--theme-color-100);
	transition:.3s;
}
.modalFolderListItem.is-active{
	font-weight:500;
	background:var(--theme-color-100);
}
#folderWrapInner .modalFolderListItem{
	padding:0 .25em;
}
.modalFolderListItem a,
#addrGrpListModal .list__item
 {
	height:2.5rem;
	line-height:2.5rem;	
	width:100%;
}
.modalFolderListItem a span{
	width:100%;
}
#folderWrapInner .modalFolderListItem .editBtnWrap,
#addrGrpListModal .list__item .editBtnWrap{
	display:none;
}
#folderWrapInner .modalFolderListItem:hover .editBtnWrap,
#addrGrpListModal .list__item:hover .editBtnWrap{
	display:flex;
}

/* ipad pro 媛�濡� */
@media all and (max-width:1366px){
	#folderWrapInner .modalFolderListItem .editBtnWrap,
	#addrGrpListModal .list__item .editBtnWrap{
		display:flex;
	}	
}


/* 李몄“�옄 �뿰�씫泥섏갼湲� 異붽� */
.signerReceiveInput {
	padding:0;
}

.signerContractWrap{
	padding:0;
}
.signerContractWrap .round-input{
	padding: .5rem .25em
}

/* �꽌紐낆옄�엯�젰�젙蹂� view 蹂�寃�*/
#setSignerListContainer .signerReceiveInput {
	padding:0 1rem
}

/* masssign detial*/
#searchForm .basic-list{
	gap:2em;
} 


/* table view �닔�젙 (test)*/
.name-area,
.content-area{
	flex:1 1 auto;
	flex-grow:1!important;
}
.table__tbody .name-area{
	font-weight:500;
}
.checkbox-area{
	flex: 0 0 2em;
}
.date-area{
	flex: 0 0 11em
}
.folder-area{
	flex: 0 0 8em;
}
.status-area{
	flex: 0 0 9em;
}
.mail-area{
	flex: 0 0 15em;
}
.add-menu-area{
	flex:0 0 4em;
	justify-content: center
}
.link-status-area{
	flex: 0 0 4em;
}
.offical-sender-area{
    flex: 0 0 15em;
}
.offical-no-area {
    flex: 0 0 15em;
}
.tid-area{
	flex:0 0 20em;
}

/* @media all and (max-width:1280px){ */
/* 	.date-area{ */
/* 		flex: 0 0 15% */
/* 	}	 */
/* 	.status-area{ */
/* 		flex: 0 0 15% */
/* 	} */
/* } */

/* @media all and (min-width:992px) and (max-width:1279px){ */
/* 	.date-area{ */
/* 		flex: 0 0 20% */
/* 	} */
/* } */
/* toggle tab button design */
.toggle-tab-wrap{
	display:flex;
	background:var(--theme-color-200);
	border-radius:999em;

	padding:.25em;
	flex-grow:1
}

.toggle-tab__item{
	width:100%;
	padding:.5em 1em;
	border-radius:999em;
	
	text-align:center;
}
.toggle-tab__item.is-active{
	background:var(--theme-color-50);
	border-bottom:none;
}

/*authentication.sg */
#editorMain .card{
	border:10px solid var(--theme-color-400);
	border-radius:1rem;
}

/*modal_folderList*/
#defaultFolderWrap{
	border-bottom:1px solid var(--theme-color-200);
}
#generateFolderList{
    max-height: 15rem;
    overflow-y:auto;
}

@media all and (max-width:768px){
	#roleInfo .width-50{
		width:100%;
	}
	#roleInfo .width-50 label{
		width:100%
	}	
	#roleInfo .tooltip{
		width:auto;
	}
	#roleInfo .flex--row.is-change{
	gap:.5em;}
}

#validation .width-50{
	width:100%;
}

#entprsLogoFrm .folder-area{
	flex-basis:0;
}

/* 첫번째 서명자 붉은 글씨 */
.signer-item:first-child .orderTxtWrap {
	color: var(--primary-color-500);
}

/* 업로드 취소 버튼 */

@media all and (min-width: 769px) {
	.button-upload-delete {
		position: absolute;
		right: 1rem;
		bottom: 1rem;
	}
}

.width-5 {
	width: 5%;
}
.width-40 {
	width: 40%;
}
.width-55 {
	width: 55%;
}
.width-95 {
	width: 95%;
}
.common-list-area {
	width: 100%;
	padding: 1rem;
	margin-bottom: 1rem;
}
.common-list-area .title {
	margin-bottom: 0.5rem;
	font-weight: 600;
}
.modal-content-title {
	margin-bottom: 1rem;
}
.linksign-status-box .button {
	margin-left: 0.25rem;
}
@media (min-width: 769px) and (max-width: 1280px) {
	.round-input.api-search-area {
		max-width: 40rem;
	}
}
@media all and (max-width:768px) {
	.linksign-status-box .button {
		margin-left: 0;
		margin-top: 0.25rem;
	}	

	.round-input.api-search-area {
		width: auto;
	}
}
@media all and (max-width:480px) {
	#addOnRefer	.list__item {
		display: block;
	}
	#addOnRefer	.list__item .width-5,
	#addOnRefer	.list__item .width-40 {
		display: inline-block;
		vertical-align: middle;
	}
	#addOnRefer	.list__item .width-5 {
		margin-right: 0.5rem;
	}
	#addOnRefer	.list__item .width-55 {
		display: block;
		width: 100%;
		margin-top: 0.5rem;
	}
}
 
#detailModalWrap .basic-list {
	padding: 1.5rem 0;
}
#detailModalWrap .basic-list.has-scroll {
	max-height:300px;
	overflow-y:auto;
}
#detailModalWrap .basic-list:first-child {
	padding-top: 0;
}

#detailModalWrap .basic-list.is-active {
	padding: 2em 1em;
}

#modalDepartmentTreeWrap,
#groupShareMngMemberListWrap {
	max-height:400px;
	overflow-y:auto;
}


/* 환불접수신청 버튼 */

.refund-btn {
	float:right;
	padding:16px 24px;
	font-size:14px;
	font-weight:600;
	color:#fff;
	border-radius:8px;
	background-color:#0056FF;
}
.refund-done {
	float:right;
	color:#0056FF;
}

@media all and (max-width:1280px) {
	.refund-box {
		position: absolute;
    	top: 52%;
    	right: 16px;
	}
}

@media all and (max-width:1024px) {
	.refund-box {
		position: relative;
    	top: -76px;
    	right: 0;
	}
}

@media all and (max-width:768px) {
	.refund-box {
		position: relative;
    	top: -58px;
	}
}

/* 환불접수신청 모달창 */


.modal_refnd_container {
	display:flex;
}

.refnd_item_box {
	display:flex;
	padding:6px 0;
}
.refnd_item_title {
	width:25%;
	font-weight:500;
}
.refnd_item_title span {
	display:inline-block;
	padding-left:4px;
	font-size:12px;
	color:#0056FF;
}
.refnd_item_txt {
	width:75%;
}
.request-box {
	padding:8px 0;
	margin-top:24px;
	border-radius:8px;
	background-color:#0056FF;
	text-align:center;
}
.refund-request-btn {
	width:100%;
	font-weight:500;
	color:#fff;
}

.refnd_item_box input {
	padding:0 4px;
	border:none;
	border-radius:4px;
/* 	background-color:#EDF0EE; */
	box-shadow: 0px 0px 4px rgba(208,204,221,1.5);
}
.refnd_item_box input:focus {
	outline-color:#999;
}
.refnd_item_box select:focus {
	outline-color:#ededed;
}
.refnd_item_money strong {
	font-weight:500;
}
html[data-theme='dark'] .refnd_item_box input, html[data-theme='dark'] .refnd_item_box select, html[data-theme='dark'] .refnd_item_title, html[data-theme='dark'] .refnd_item_txt {
	color:#fff;
}
html[data-theme='dark'] .refnd_item_box input {
	box-shadow: 0px 0px 4px rgba(255,255,255,1.5);
}

@media screen and (max-width:1280px) {
	.refund-prev {
		position:relative;
		width:40%;
		z-index:1;
	}
	.refund-done {
		padding-top:10px;
	}
}

@media screen and (max-width:1095px) {
	.refund-done {
		padding-top:20px;
	}
}

@media screen and (max-width:1280px) {
	.refund-done {
		padding-top:12px;
	}
}

@media screen and (max-width:580px) {
	.refnd_item_title {
		width:30%;
	}
	.refnd_item_txt {
		width:70%;
	}
}

@media screen and (max-width:480px) {
	.refnd_item_title {
		width:38%;
	}
	.refnd_item_txt {
		width:62%;
	}
}

.table-data-label {
	min-width: 3.5rem;
	color: #999999;
}


#maintenanceNoticeWrap {
	width: 100%;
	position:relative;
    background: var(--primary-color-10);
    gap: 1em;
    color: var(--primary-color-500);
    font-size: var(--text-small);
    padding: 0.5em;
    padding-left:80px;
    border: 1px solid #dbdbdb;
    overflow:hidden;
}
#maintenanceNoticeWrap.has-close {
	padding-right:90px;
}
#maintenanceNoticeWrap.is-editor {
	position:absolute;
	left:10px;
	bottom:100%;
	margin-bottom:10px;
	max-width:320px;
}
#maintenanceNoticeWrap .left {
	position:absolute;	
	left:20px;
	top:50%;
	margin-top:-20px;
}
#maintenanceNoticeWrap .left .icon {width:40px;}
#maintenanceNoticeWrap .maintenanceNotice-title {
	font-weight:bold;
}
#maintenanceNoticeWrap .maintenanceNotice-content {
	white-space:pre-line;	
}
#maintenanceNoticeWrap .maintenance-close {
	position:absolute;	
	right:20px;
	top:50%;
	margin-top:-20px;
}

.external-card-button button {
	padding: 0 1rem;
	font-size: 1rem;
}

.external-card-button button .card__inner {
	padding: 1rem;
	text-align: left;
}

@media all and (max-width: 768px) {
	.external-button-wrap {
		flex-direction: column;	
		width: 100%;
	}
} 


/* 요금제 선택 버튼 스타일*/
#price-select-button-wrap {

}
#price-select-button-wrap dl:after {
    clear:both;
    content:"";
    display:block;
}
#price-select-button-wrap dl dd {
    float:left;
    width:50%;
}
#price-select-button-wrap dl dd a {
    display:block;
    text-align:center;
    border:1px solid var(--theme-color-400);
    font-size:1.2em;
    padding:1em;
    background:var(--background-color);
    color : var(--text-color-1000);
}
#price-select-button-wrap dl dd a.active {border-bottom:1;background-color: #f54c66;color: var(--white);}
#price-select-button-wrap dl dd:first-child a {
    border-radius: 1rem 0 0 0;
    border-right:0;
}
#price-select-button-wrap dl dd:last-child a {
    border-radius: 0 1rem 0 0;
}
#normal-price-wrap .card,
#custom-price-wrap .card {border-top:0;border-radius: 0 0 1rem 1rem}

#normal-price-wrap,
#custom-price-wrap {display:none;}
#normal-price-wrap.active {display:flex}
#custom-price-wrap.active {display:flex}