@charset "utf-8";
/*
 - 파일이름	:	css/cssProject/style.css
 - 설    명	: 프로젝트별 디자인 css
 - 추가내용   : 이 파일은 프로젝트별 따라 달라질 수 있다.
 - 버전관리
 ----------------------------------------------------------
 -   Date      Version   Auther   Description
 ------------  --------  -------  --------------------------
 - 204.02.05    1.0       PMI     신규작성
 */
 @font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	src: url(../../fonts/woff2/Pretendard-Black.woff2) format('woff2'), url(../../fonts/woff/Pretendard-Black.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	src:url(../../fonts/woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(../../fonts/woff/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	src:url(../../fonts/woff2/Pretendard-Bold.woff2) format('woff2'), url(../../fonts/woff/Pretendard-Bold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	src:url(../../fonts/woff2/Pretendard-SemiBold.woff2) format('woff2'), url(../../fonts/woff/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	src:url(../../fonts/woff2/Pretendard-Medium.woff2) format('woff2'), url(../../fonts/woff/Pretendard-Medium.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	src:url(../../fonts/woff2/Pretendard-Regular.woff2) format('woff2'), url(../../fonts/woff/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	src:url(../../fonts/woff2/Pretendard-Light.woff2) format('woff2'), url(../../fonts/woff/Pretendard-Light.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	src:url(../../fonts/woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(../../fonts/woff/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	src:url(../../fonts/woff2/Pretendard-Thin.woff2) format('woff2'), url(../../fonts/woff/Pretendard-Thin.woff) format('woff');
}

/*2.0조직도*/
.orgImgBox{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}

.orgImgBox .imgBox{
	width: 150px;
	height: 150px
}

.orgImgBox .btnBox button, .orgImgBox .btnBox label{
	width: 220px;
	height: 45px
}

 .progress-container {
     width: 600px;
     background: var(--neutral-l-100, #DDE1E7);
     border-radius:99px;
     overflow: hidden;
 }
 
 .progress-container-s {
     width: 415px;
     background: var(--neutral-l-100, #DDE1E7);
     border-radius:99px;
     overflow: hidden;
 }
 
 .progress-bar {
     width: 0;
     height: 12px;
     background: var(--primary-l-500, #3479FF);
     text-align: center;
     line-height: 40px;
     transition: width 0.3s ease;
 }
 
  .progress-bar-s {
     width: 0;
     height: 8px;
     background: var(--primary-l-500, #3479FF);
     text-align: center;
     line-height: 40px;
     transition: width 0.3s ease;
 }
 
 .boxs-org {
	position: relative;
	min-width: 0;
	word-wrap: break-word;
	background:var(--bs-white, #fff);
	border-radius: 20px;
	padding:20px;
}
 
 .orgBox{
    display: grid;
	grid-template-columns: 438px 1fr;
	gap: 16px; 
}

 .orgBoxBottom{
    display: grid;
	grid-template-columns: 438px 1fr;
	gap: 16px; 
}

.orgBoxLeft{
	padding: 20px;
	border-radius: 20px;
	background: var(--White, #FFF);
	height: 754px;
}

.orgBoxRight{
	padding: 20px;
	border-radius: 20px;
	background: var(--White, #FFF);
	height: 754px;
}

.orgBoxLeft .outLine{
	display: flex;
	padding: 16px 20px 0px 20px;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 0 0;
	border-radius: 12px;
	border: 1px solid var(--neutral-l-100, #DDE1E7);
	background: var(--White, #FFF);
	min-height: 610px;
	margin-top: 16px;
}

.ms-search-jsTree input{
    width: 100%;
    height: auto !important;
    min-height: 36px;
    height: 36px;
    padding: 0 16px 0 28px;
    margin: 0;
    outline: 0;
    border-radius: 8px !important;
	border: 1px solid var(--neutral-l-100, #DDE1E7);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    background: url(../../../../images/svg/ic_search.svg) no-repeat;
    background-position: 8px;
}

.ms-search-jsTree input::placeholder {
    font-size: 13px;
    font-weight: 500;
    color: var(--neutral-l-300, #B3B9C4);
}

.ms-search-jsTree input:hover{
	border: 1px solid var(--primary-l-500, #3479FF);
}

.ms-search-jsTree input:focus{
	border: 1px solid var(--primary-l-500, #3479FF);
}

.orgBoxRight img{
	cursor: pointer;
}

/*조직도 트리*/
.treeBox{
	width: 100%;
	height:610px;
	padding: 16px 20px 0 20px;
	border-radius: 12px;
	border: 1px solid var(--neutral-l-100, #DDE1E7);
	margin-top: 16px;
	background: #fff;
}

.tree-container{
	color: var(--neutral-l-700, #3F4652);
	text-overflow: ellipsis;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 21px */
}

.tree-container>i{
	display: none;
}

.depthInfo{
	display: flex;
	padding: 16px 0px 12px 0px;
	justify-content: space-between;
	border-radius: 10px 10px 0px 0px;
	background: var(--White, #FFF);
}

.depthTitle{
	color: var(--neutral-l-900, #181A1B);
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%; /* 31.2px */
}

.depthTitle.box{
	padding: 3px 0px 12px 0px;
}

.depthCntBox{
	display: flex;
	padding: 12px 0px;
	align-items: center;
	align-self: stretch;
	border-top: 1px solid var(--neutral-l-50, #EFF1F5);
	height: 60px;
	line-height: 60px;
}

.depthCnt{
	color: var(--neutral-l-700, #3F4652);
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 24px */
}

.depthCnt span, .depthCntBox span{
	color: var(--primary-l-600, #2269F2);
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
}

.depthMemberCnt{
	color: var(--neutral-l-400, #9099A4);
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 18px */
}

 .jstree-clicked .depthMemberCnt{
	color: var(--primary-l-500, #3479FF);
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 18px */
}

.depthMemberBtn{
	width: 20px;
	height: 20px;
	background: url(../../../../images/svg/depth_plus.svg) no-repeat;
	background-position: center;
	display: none;
	cursor: pointer;
}

.depthPlusBtn{
	width: 20px;
	height: 20px;
	background: url(../../../../images/svg/tree_plus.svg) no-repeat;
	background-position: center;
	display: none;
	cursor: pointer;
}

.depthDeleteBtn{
	width: 20px;
	height: 20px;
	background: url(../../../../images/svg/tree_delete.svg) no-repeat;
	background-position: center;
	display: none;
	cursor: pointer;
}

.depthEditBtn{
	width: 20px;
	height: 20px;
	background: url(../../../../images/svg/edit.svg) no-repeat;
	background-position: center;
	display: none;
	cursor: pointer;
}

.jstree-default .jstree-hovered .depthMemberBtn {display: block;}
.jstree-default .jstree-hovered .depthPlusBtn,
.jstree-default .jstree-hovered .depthEditBtn,
.jstree-default .jstree-hovered .depthDeleteBtn {display: block;}

.orgBoxRight .ms-search input, .input-search .ms-search input{
    width: 380px;
    height: auto !important;
    min-height:36px;
    height:36px;
    padding: 0 16px 0 36px;
    margin: 0;
    outline: 0;
    font-family: 'Pretendard';
    font-size: 16px;
    font-weight: 500;
    line-height:150%;
    border: 1px solid var(--neutral-l-100, #DDE1E7);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px !important;
    background-color:#fff;
    background-image: url(../../../../images/svg/ic_search.svg) no-repeat;
    background-position: 16px;
}

.orgBoxRight .ms-search input:hover, .input-search .ms-search input:hover{
	border: 1px solid var(--primary-l-500, #3479FF);
}

.orgBoxRight .ms-search input:focus, .input-search .ms-search input:focus{
	border: 1px solid var(--primary-l-500, #3479FF);
}

.depthChoice{
	color: var(--neutral-d-300, #373946);
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%;
}

.depthChoice span{
	color: var(--primary-l-500, #3479FF);
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 120%; /* 24px */
}

.ymd{
	color: var(--neutral-l-400, #9099A4);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 21px */
	margin-left: 16px
}

.gbox{
	border:0px solid red;
}

.orgBoxBottom2{
   display: none;
}

.phoneAdd{
	    position: absolute;
	    right:16px;
	    top: 13px;
	    cursor: pointer;
		z-index: 1;
		width: 16px;
		height: 16px;
		background-image: url("/images/svg/phoneAdd.svg");
	}
	
.phoneRemove{
	    position: absolute;
	    right:16px;
	    top: 13px;
	    cursor: pointer;
		z-index: 1;
		width: 16px;
		height: 16px;
		background-image: url("/images/svg/phoneRemove.svg");
	}

/*반응형*/
@media (max-width: 1919px) {	

	 .orgBox{
	    display: grid;
		grid-template-columns: 438px 1fr;
		gap: 16px; 
	}
	
	.gbox-re{
		min-width: 1106px;
		border: 0px solid blue;
		width: 100%;
	}

}

@media (max-width: 1759px) {	

	.basicBox60, #basicBox {
		padding: 60px 40px 65px 40px;
		position: relative;
	}
	
	 .orgBox{
	    display: block;
	}
	
	.orgBoxRight{
		margin-top: 16px;
	}
	
	.orgBoxBottom{
	    display: flex;
		/*justify-content: space-between;*/
		/*align-items: center;*/
		/*margin-left: 100px;*/
	}
	
	.orgBoxBottom2{
	   display: flex;
	   justify-content: space-between;
	   
	}
	
	.orgBoxLeft{
		height: 420px;
	}
	
	.orgBoxLeft .outLine{
		min-height: 276px;
	}
	
	.treeBox{
		height: 276px;
	}
	
/* 	.orgBoxRight .ms-search input{ */
/* 		width: 300px; */
/* 	} */


}

@media (max-width: 739px) {	
	.orgBoxLeft {
        width: 100%;
    }


}

/*pass눈모양아이콘*/
.invisible{
	width: 20px;
	height: 20px;
	background: url(../../../../images/svg/pass_invisible.svg) no-repeat;
}

.visible{
	width: 20px;
	height: 20px;
	background: url(../../../../images/svg/pass_visible.svg) no-repeat;
}

/*회사변경*/
.centerBox{
	padding: 40px 35px;
	border-radius: 20px;
	background: var(--White, #FFF);
	width: 485px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

/*input*/
.centerBox input, .centerBox input[type="text"], .centerBox input[type="password"] {
	height: 42px;
	line-height:150%;
	padding: 0px 16px;
	align-items: center;
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 500;
	border-radius: 8px;
	border: 1px solid var(--neutral-l-100, #DDE1E7);
	background:var(--bs-white, #fff);
	color:var(--neutral-l-900, #181A1B);
	caret-color:var(--primary-l-500, #3479FF);/* 커서 색상 설정 */
	font-family: Pretendard !important;
}

.centerBox input::placeholder {
  font-weight:500;
  color:var(--neutral-l-300, #B3B9C4);
}

.ciImgBox{
	display: flex;
	height: 371px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	background: var(--neutral-l-50, #EFF1F5);
}

.ciImgBox img{
	max-width: 415px;
	overflow: hidden;
}

.ciNoImgBox{
	display: flex;
	width: 415px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}

.ciNoImgBox .imgBox{
	width: 150px;
	height: 150px
}




.popup-container {
	display: flex;
	padding: 20px;
	flex-direction: column;
	border-radius: 20px;
	background: var(--White, #FFF);
	height:754px;
}

  .tab-container {
		margin: 0 auto;
		color: var(--neutral-l-300, #B3B9C4);
		text-align: center;
		font-feature-settings: 'liga' off, 'clig' off;
		/* Label/label_2 */
		font-family: Pretendard;
		font-size: 16px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		width: 540px;
		overflow: hidden;
		height: 55px;
  }
  
   .tabText{
  	position: relative;
  }
  
  .tabText>div{
  	position: absolute;
  	top:12px
  }
  
    .tab-item {
        cursor: pointer;
        position: relative;
    }
    
    .tab-item.active {
       color: var(--primary-l-600, #2269F2);
		text-align: center;
		font-size: 16px;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
    }
    
    .tab-item .number {
        display: inline-block;
        width: 22px;
        height: 22px;
        background: #C5CAD2;
        border-radius: 50%;
        text-align: center;
        color: var(--White, #FFF);
		font-size: 14px;
		font-weight: 500;
		line-height: 150%; /* 21px */
    }
    
    .tab-item.active .number {
        background: #2269F2;
    }
    
   .content-section {
        display: none;
        width: 100%;
       justify-content: center;
    }
    .content-section.active {
        display: block;
        display: flex;
        width: 100%;
        justify-content: center;
    }
  
    .content-container {
        flex: 1;
        margin-top: 20px;
    }
    
    .middleBox{
        align-content: center;
	    align-items: center;
	    text-align: center;
        width: 600px;
    }
    
    
    
    
   .upload-container {
        text-align: center;
/*         padding: 50px; */
    }


    .upload-box {
        border: 2px dashed #ccc;
        padding: 40px;
        margin: 20px;
        cursor: pointer;
    }
    .rank-container {
        padding: 20px;
    }
    .rank-header {
        background: #f5f5f5;
        padding: 15px;
        margin-bottom: 20px;
    }
    .list-container {
      border: 0px solid red;
    }
    .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #DDE1E7;
        height: 42px;
    }
    
    .list-item:hover{
    	background: var(--neutral-l-10, #F8F8FB);
    	cursor: pointer;
    }
    
    .item-content {
        display: flex;
        align-items: center;
    }
    
    .item-content img{cursor: pointer;}
    .button-group {
        display: flex;
        gap: 16px;
    }

    .move-button {
        cursor: move;
    }

    .ui-sortable-helper {
        background: #f8f8f8;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    }
    .ui-state-highlight {
        height: 40px;
        background: #f0f0f0;
        border: 1px dashed #ccc;
        margin: 5px 0;
    }
    
    .item-input {
       display: flex;
		height: 30px !important;
		padding: 0px 16px 0px 8px  !important;
		align-items: center;
		align-self: stretch;
		border-radius: 5px  !important;
		border: 1px solid var(--neutral-l-100, #DDE1E7);
		background: var(--White, #FFF);
		width: 1094px;
		color: var(--neutral-l-900, #181A1B);
		font-size: 13px !important;
		font-style: normal;
		font-weight: 500;
		line-height: 150%; /* 19.5px */
    }
    
   .item-input::placeholder{
	color: var(--neutral-l-300, #B3B9C4);
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 21px */
}
    
    .footer-buttons {
        text-align: center;
        margin-top: 20px;
        padding: 20px;
        border-top: 1px solid #eee;
    }
    
    .stepTitleBg{
	    display: flex;
		height: 42px;
		align-items: flex-start;
		border-radius: 10px 10px 0px 0px;
		background: var(--primary-l-50, #E5EFFF);
		padding: 0 16px;
		color: var(--neutral-l-900, #181A1B);
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: 42px;
}

.popup-rid-btn{
	border: 0px solid #0d6efd;
	cursor: pointer;
}


.setRIDpopup{
	height: 758px;
	padding:20px;
}

.setRIDpopup .left{	
	display: flex;
	width: 438px;
	height: 718px;
	padding: 20px;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	border-radius: 20px;
	background: var(--White, #FFF);
}

.setRIDpopup .left .inLine{	
	display: flex;
	padding: 16px;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 0 0;
	border-radius: 12px;
	border: 1px solid var(--neutral-l-100, #DDE1E7);
	background: var(--White, #FFF);
	width: 100%;
}

#ridList li{
	display: flex;
	width: 366px;
	height: 42px;
	padding: 7px 12px;
	align-items: center;
	color: var(--neutral-l-700, #3F4652);
	text-overflow: ellipsis;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 21px */
	cursor: pointer;
}

#ridList li span{
	color: var(--neutral-l-400, #9099A4);
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 18px */
	margin-left: 4px
}

#ridList li.selected, #ridList li.selected span{
	color: var(--primary-l-500, #3479FF);
}

#ridList li:hover{
	border-radius: 10px;
	background: var(--primary-l-10, #F4F8FF);
}


.setRIDpopup .right{	
	display: flex;
	height: 718px;
	padding: 20px;
	flex-direction: column;
	gap: 16px;
	flex: 1 0 0;
	border-radius: 20px;
	background: var(--White, #FFF);
}

.setRIDpopup .right #ridUseCount{
	color: var(--primary-l-600, #2269F2);
}