@charset "utf-8";
/* CSS Document */

/**************
* Button-style *
**************/
.btn:active, .btn:focus {box-shadow: none !important;}
.btn, .btn-mid, .btn-min {border: 0; transition: 350ms; }
.btn { 
	border-radius: 4px; 
	padding: 4px 14px; /* 20px * 90% = 18px*/
	font-weight: 600; 
	font-size: 13.5px; /* 15px * 90% = 13.5px*/ 
	margin: 0 2px 0 6px; box-sizing: border-box; 
	height: 31px;  /* 34px * 90% = 30.6px*/ 
	white-space: nowrap; color: #fff;
    cursor: pointer;
}


.btn-xs {border-radius: 2px; padding: 2px; font-size: 11px; font-weight: 200; height: auto; margin: auto; }
.btn-min {border-radius: 2px; padding: 4px; font-size: 12px;}
.btn-mid {tborder-radius: 2px; padding: 6px 12px; font-size: 14px;}
.btn.submit-btn {border-radius: 4px; font-size: 20px; padding: 0px 40px; height: 40px; line-height: 40px;}
.btn.icon-btn {
	min-height: 32.4px;   /* 36px * 90% = 32.4px*/
	padding: 6px 16px;
}
.btn.btn-lg {border-radius: 6px; font-size: 	22px; padding: 0px 100px; height: 50px; line-height: 50px;}

.fc-white { color: #fff !important;}
.fc-blue { color: #0039BF !important;}
.fc-red { color: #ff3312 !important;}
.fc-gray { color: #888 !important;}
.fc-green { color: #00C359 !important;}

/* 기본 버튼 스타일 */
.btn.btn-primary {
    color: #fff;
    background-color: #00a1cd;
    border: 1px solid #00a1cd;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 더 깊은 기본 그림자 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 트랜지션 */
}

/* 마우스를 올렸을 때의 스타일 */
.btn.btn-primary:hover {
    color: #fff;
    background-color: #007aa8;
    border: 1px solid #007aa8;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 더 깊고 진한 그림자 */
    transform: translateY(-1px); /* 살짝 더 위로 올라가는 효과 */
}

/* 기본 버튼 스타일 */
.btn.btn-warning {
    color: #fff;
    background-color: #FF9933;
    border: 1px solid #FF9933;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 더 깊은 기본 그림자 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 트랜지션 */
	font-weight: bold; 
}

/* 마우스를 올렸을 때의 스타일 */
.btn.btn-warning:hover {
    color: #fff;
    background-color: #CC7A29;
    border: 1px solid #CC7A29;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 더 깊고 진한 그림자 */
    transform: translateY(-1px); /* 살짝 더 위로 올라가는 효과 */
	font-weight: bold; 
}

.btn.btn-warning:disabled,
.btn.btn-warning.disabled {
    color: #fff;
    background-color: #FFA64D; /* 약간 연한 오렌지 */
    border: 1px solid #FFA64D;
    box-shadow: none; /* 그림자 제거 */
    opacity: 0.6; /* 흐릿하게 */
    cursor: not-allowed; /* 마우스 커서 변경 */
    font-weight: bold;
    pointer-events: none; /* 클릭 완전 방지 */
}

/* 깜빡이는 애니메이션 정의 */
@keyframes blink-warning {
    0% {
        background-color: #FF9933;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }
    50% {
        background-color: #CC7A29;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    }
    100% {
        background-color: #FF9933;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }
}

/* 깜빡이는 효과를 적용하는 클래스 */
.blink {
    animation: blink-warning 1s infinite; /* 1초 주기로 반복 */
}

.btn.btn-primary-filter {
    color: #fff;
    background-color: #00a1cd !important; /* 기본 배경색 강제 적용 */
    border: 1px solid #00a1cd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 더 깊은 기본 그림자 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 트랜지션 */
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe29wYWNpdHk6MDtmaWxsOiNGRkZGRkY7fS5zdDF7ZmlsbDojNkZDM0RGO30uc3Qye2ZpbGw6IzY5QjYzMTt9LnN0M3tmaWxsOiNGRkNDMDI7fS5zdDR7ZmlsbDojOUU3MjE1O30uc3Q1e2ZpbGw6I0YyRjJGMjt9LnN0NntmaWxsOiNDQ0NDQ0M7fS5zdDd7ZmlsbDojNjc2NzY3O30uc3Q4e2ZpbGw6I0ZENEMxRTt9LnN0OXtmaWxsOiMxNzE3MTc7fS5zdDEwe29wYWNpdHk6MC4zO2ZpbGw6IzZGQzNERjt9LnN0MTF7b3BhY2l0eTowLjg7fS5zdDEye2ZpbGw6I0ZGRkZGRjt9LnN0MTN7b3BhY2l0eTowLjM7fS5zdDE0e2ZpbGw6I0IyM0EzQTt9LnN0MTV7b3BhY2l0eTowO2ZpbGw6I0NDQ0NDQzt9PC9zdHlsZT48cG9seWdvbiBjbGFzcz0ic3Q1IiBwb2ludHM9IjE0LDIgMiwyIDIsMyA2LDcgNiwxNCAxMCwxMiAxMCw3IDE0LDMgIi8+PC9zdmc+') no-repeat center; /* 이미지 추가 */
    
    background-size: 20px 20px; /* 이미지 크기 조정 */
    width: 31px; /* 버튼 크기 */
    height: 32px; /* 버튼 크기 */
    cursor: pointer; /* 마우스 포인터 추가 */
}

/* 마우스를 올렸을 때의 스타일 */
.btn.btn-primary-filter:hover {
    color: #fff;
    background-color: #007aa8;
    border: 1px solid #007aa8;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* 더 깊고 진한 그림자 */
    transform: translateY(-1px); /* 살짝 더 위로 올라가는 효과 */
}

/* 기본 버튼 스타일 약한스타일 */
.btn.btn-primary-normal {
    color: #fff;
    background-color: #00a1cd;
    border: 1px solid #00a1cd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 더 깊은 기본 그림자 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 트랜지션 */
    
}

/* 마우스를 올렸을 때의 스타일 */
.btn.btn-primary-normal:hover {
    color: #fff;
    background-color: #007aa8;
    border: 1px solid #007aa8;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* 더 깊고 진한 그림자 */
    transform: translateY(-1px); /* 살짝 더 위로 올라가는 효과 */
}


/* 기본 버튼 스타일 약한스타일 */
.btn.btn-primary-light {
    color: #007aa8;
    background-color: #e6f7fb     ;
    border: 1px solid #007aa8  ;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 더 깊은 기본 그림자 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 트랜지션 */
}

/* 마우스를 올렸을 때의 스타일 */
.btn.btn-primary-light:hover {
    color: #fff;
    background-color: #00a1cd;
    border: 1px solid #00a1cd;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* 더 깊고 진한 그림자 */
    transform: translateY(-1px); /* 살짝 더 위로 올라가는 효과 */
}



/* 기본 버튼 스타일 약한스타일 (소형) */
.btn.btn-primary-light-s {
    font-size: 12px; /* 텍스트 크기 줄임 */
    padding: 2px 6px; /* 버튼 내부 여백 줄임 */
    color: #007aa8;
    background-color: #e6f7fb;
    border: 1px solid #007aa8;
    height: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 더 깊은 기본 그림자 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 트랜지션 */
}



.btn.btn-primary-foricon {
    font-size: 12px; /* 텍스트 크기 조금 키움 */
    padding: 0; /* 내부 여백 제거 */
    color: white; /* 텍스트 색상을 흰색으로 */
    
    
    background-color: #FF9933; /* 배경색을 물음표 아이콘과 유사하게 */
    border: 1px solid #aa5A09; /* 테두리 색상 */
    
    width: 20px; /* 버튼의 너비와 높이를 동일하게 */
    height: 20px; /* 높이 */
    border-radius: 50%; /* 원 형태 */
    
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 트랜지션 */
    
}

.btn.btn-primary-foricon:hover {
    background-color: #CC6600; /* 호버 시 배경색 */
}









/* 버튼을 클릭했을 때의 스타일 */
.btn.btn-primary:active {
    color: #fff;
    background-color: #007aa8;
    border: 1px solid #007aa8;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 낮아진 그림자 */
    transform: translateY(2px); /* 눌린 느낌 */
}

.btn.btn-primary-line {
    color: #888888;
    background-color: inherit;
    border: 1px solid #888888;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn.btn-primary-line:hover {
    color: #666666;
    border-color: #666666;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.btn.btn-primary-white {
    color: #007aa8;
    background-color: #fff;
    border: 1px solid #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn.btn-primary-white:hover {
    color: #108e91;
    background-color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.btn.btn-primary-white:active {
    color: #108e91;
    background-color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.btn-remote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
    padding: 3px 6px;
    font-size: 16px;
    font-weight: bold;
    color: #fff !important; /* 기본 배경색 강제 적용 */
    background-color: #00a1cd !important; /* 기본 배경색 강제 적용 */
    border: 1px solid #00a1cd;
    border-radius: 5px; /* 둥근 모서리 */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    
    background-size: 20px 20px; /* 이미지 크기 조정 */
    width: 31px ;
    min-width: 31px ;  
}

.btn-remote:hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
    padding: 3px 6px;
    font-size: 16px;
    font-weight: bold;
    color: #fff !important; /* 기본 배경색 강제 적용 */
    background-color: #007aa8 !important; /* 기본 배경색 강제 적용 */
    border: 1px solid #007aa8;
    border-radius: 5px; /* 둥근 모서리 */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    
    background-size: 20px 20px; /* 이미지 크기 조정 */
    width: 31px ;
    min-width: 31px ;  
    transform: translateY(-1px); /* 살짝 위로 올라감 */
}

.btn-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
    padding: 3px 6px;
    font-size: 16px;
    font-weight: bold;
    color: #fff !important; /* 기본 배경색 강제 적용 */
    background-color: #ccc !important; /* 기본 배경색 강제 적용 */
    border: 1px solid #ccc;
    border-radius: 5px; /* 둥근 모서리 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 트랜지션 */
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe29wYWNpdHk6MDtmaWxsOiNGRkZGRkY7fS5zdDF7ZmlsbDojNkZDM0RGO30uc3Qye2ZpbGw6IzY5QjYzMTt9LnN0M3tmaWxsOiNGRkNDMDI7fS5zdDR7ZmlsbDojOUU3MjE1O30uc3Q1e2ZpbGw6I0YyRjJGMjt9LnN0NntmaWxsOiNDQ0NDQ0M7fS5zdDd7ZmlsbDojNjc2NzY3O30uc3Q4e2ZpbGw6I0ZENEMxRTt9LnN0OXtmaWxsOiMxNzE3MTc7fS5zdDEwe29wYWNpdHk6MC4zO2ZpbGw6IzZGQzNERjt9LnN0MTF7b3BhY2l0eTowLjg7fS5zdDEye2ZpbGw6I0ZGRkZGRjt9LnN0MTN7b3BhY2l0eTowLjM7fS5zdDE0e2ZpbGw6I0IyM0EzQTt9LnN0MTV7b3BhY2l0eTowO2ZpbGw6I0NDQ0NDQzt9PC9zdHlsZT48cG9seWdvbiBjbGFzcz0ic3Q1IiBwb2ludHM9IjE0LDIgMiwyIDIsMyA2LDcgNiwxNCAxMCwxMiAxMCw3IDE0LDMgIi8+PC9zdmc+') no-repeat center; /* 이미지 추가 */
    
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    
    background-size: 20px 20px; /* 이미지 크기 조정 */
    width: 31px ;
    min-width: 31px ;  
}


.btn-filter:hover {
    background-color: #bbb; /* 더 어두운 그레이 */
    border-color: #555;
    color: #fff;
    transform: translateY(-1px); /* 살짝 위로 올라감 */
}

 
/* true 상태의 색상 */
.btn-filter.active {
    background-color: #00a1cd !important; /* 기본 배경색 강제 적용 */
    border: 1px solid #00a1cd;
    color: #fff;
}

/* 마우스를 올렸을 때의 스타일 (active 상태) */
.btn-filter.active:hover {
    background-color: #007aa8; /* 더 진한 오렌지 */
    border-color: #007aa8;
    color: #fff; /* 조금 더 어두운 텍스트 */
    transform: translateY(-1px); /* 살짝 위로 올라감 */
}

/* 기본 색상 (false 상태) */
.btn-filter.inactive {
    background-color: #ccc; /* 그레이 색상 */
    border: 1px solid #ccc;
    color: #fff;
}

/* 마우스를 올렸을 때의 스타일 (inactive 상태) */
.btn-filter.inactive:hover {
    background-color: #bbb; /* 더 어두운 그레이 */
    border-color: #555;
    color: #fff;
    transform: translateY(-1px); /* 살짝 위로 올라감 */
}


/* 기본 버튼 스타일 */
.btn-balloon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
    padding: 3px 6px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #ccc; /* 그레이 색상 */
    border: 1px solid #ccc;
    border-radius: 5px; /* 둥근 모서리 */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.btn-balloon:hover {
    background-color: #bbb; /* 더 어두운 그레이 */
    border-color: #555;
    color: #fff;
    transform: translateY(-1px); /* 살짝 위로 올라감 */
}


/* true 상태의 색상 */
.btn-balloon.active {
    background-color: #FF9933; /* 기본 오렌지 색상 */
    border: 1px solid #FF9933;
    color: #fff;
}

/* 마우스를 올렸을 때의 스타일 (active 상태) */
.btn-balloon.active:hover {
    background-color: #CC7A29; /* 더 진한 오렌지 */
    border-color: #CC7A29;
    color: #fff; /* 조금 더 어두운 텍스트 */
    transform: translateY(-1px); /* 살짝 위로 올라감 */
}

/* 기본 색상 (false 상태) */
.btn-balloon.inactive {
    background-color: #ccc; /* 그레이 색상 */
    border: 1px solid #ccc;
    color: #fff;
}


/* 마우스를 올렸을 때의 스타일 (inactive 상태) */
.btn-balloon.inactive:hover {
    background-color: #bbb; /* 더 어두운 그레이 */
    border-color: #555;
    color: #fff;
    transform: translateY(-1px); /* 살짝 위로 올라감 */
}


/* 풍선 아이콘 스타일 */
.btn-balloon .icon {
    font-size: 18px;
}






/* 기본 버튼 스타일 */
.btn-balloon2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
    padding: 3px 6px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #00a1cd !important; /* 기본 배경색 강제 적용 */
    border: 1px solid #00a1cd;
    border-radius: 5px; /* 둥근 모서리 */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

/* true 상태의 색상 */
.btn-balloon2.active {
    background-color: #00a1cd !important; /* 기본 배경색 강제 적용 */
    border: 1px solid #00a1cd;
    color: #fff;
}

/* 마우스를 올렸을 때의 스타일 (active 상태) */
.btn-balloon2.active:hover {
    background-color: #007aa8 !important; /* 기본 배경색 강제 적용 */
    border: 1px solid #007aa8;
    color: #fff; /* 조금 더 어두운 텍스트 */
    transform: translateY(-1px); /* 살짝 위로 올라감 */
}



/* 기본 버튼 스타일 */
.btn-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 아이콘과 텍스트 사이 간격 */
    padding: 3px 6px;
    font-size: 16px;
    font-weight: bold;
    color: #888;
    background-color: #fff; /* 그레이 색상 */
    border: 1px solid #ccc;
    border-radius: 5px; /* 둥근 모서리 */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.btn-logout:hover {
    background-color: #bbb; /* 더 어두운 그레이 */
    border-color: #555;
    color: #fff;
    transform: translateY(-1px); /* 살짝 위로 올라감 */
}


/* true 상태의 색상 */
.btn-logout.active {
    background-color: #FF9933; /* 기본 오렌지 색상 */
    border: 1px solid #FF9933;
    color: #fff;
}

/* 마우스를 올렸을 때의 스타일 (active 상태) */
.btn-logout.active:hover {
    background-color: #CC7A29; /* 더 진한 오렌지 */
    border-color: #CC7A29;
    color: #fff; /* 조금 더 어두운 텍스트 */
    transform: translateY(-1px); /* 살짝 위로 올라감 */
}

/* 기본 색상 (false 상태) */
.btn-logout.inactive {
    background-color: #ccc; /* 그레이 색상 */
    border: 1px solid #ccc;
    color: #fff;
}


/* 마우스를 올렸을 때의 스타일 (inactive 상태) */
.btn-logout.inactive:hover {
    background-color: #bbb; /* 더 어두운 그레이 */
    border-color: #555;
    color: #fff;
    transform: translateY(-1px); /* 살짝 위로 올라감 */
}



.btn.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 기본 그림자 적용 */
}

.btn.btn-secondary:hover {
    color: #fff !important;
    background-color: #5c636a;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 호버 시 더 깊은 그림자 적용 */
    transform: translateY(-2px);
}

.btn.btn-secondary:active {
    color: #fff;
    background-color: #5c636a;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 클릭 시 더 깊은 그림자 적용 */
    transform: translateY(-1px); /* 클릭 시 약간 내려감 */
}

.btn-secondary-line {
    color: #0078a6;
    font-weight: 500;
    font-size: 13.5px;
    background-color: inherit;
    border: 1px solid #007aa8;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 기본 그림자 적용 */
}

.btn-secondary-line.ac {
    text-align: left !important;
}

.btn-secondary-line:hover {
    color: #fff;
    background-color: #0078a6;
    border-color: #6c757d;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 호버 시 더 깊은 그림자 적용 */
    /*transform: translateY(-2px)*/
}

.btn-secondary-line:active {
    background-color: #FFF;
    color: #007aa8;
    border-color: #007aa8;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* 클릭 시 더 깊은 그림자 적용 */
    transform: translateY(-1px); /* 클릭 시 약간 내려감 */
}

.btn-success {
    color: #fff;
    background-color: #0078A6;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; /* 트랜지션 통일 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* btn-primary와 동일한 깊은 그림자 */
}

.btn-margin-left {
    margin-left: 30px; /* 원하는 마진 값으로 변경 */
}

.btn-success:hover {
    color: #fff;
    background-color: #005F8A;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.btn-warnnig {
    color: #111;
    background-color: #ffda01;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-warnnig:hover {
    color: #fff;
    background-color: #ffe007;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.btn-danger {
    color: #fff;
    background-color: #ff4d36;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 더 깊은 기본 그림자 */
}

 

.btn-danger:hover {
    color: #fff;
    background-color: #DB2D27;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 더 깊은 기본 그림자 */
    transform: translateY(-2px);
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    cursor: default !important;
    background-color: #bbb;
    color: #f9f9f9 !important;
    box-shadow: none; /* 비활성화된 버튼에는 그림자와 이동 효과를 제거 */
}

/**************
* input-style *
**************/
input {
    position: relative;
}

/* 기본 스타일 */
.form-control, .form-select {
    padding: 0 0.75rem;
    height: 32.4px;  /* 36px * 90% = 32.4px*/
    font-size: 13.5px; /* 15px * 90% = 13.5px*/ 
    border-radius: 4px; /* 모서리를 약간 둥글게 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 트랜지션 */
}

/* 포커스 및 호버 시 스타일 */
.form-select:focus, .form-control:focus, .datepicker:focus {
    color: #212529;
    background-color: #fff;
    border-color: #eee;
    outline: 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 포커스 시 깊은 그림자 */
    transform: translateY(-2px); /* 포커스 시 살짝 위로 올라가는 효과 */
}

.form-select:hover, .form-control:hover, .datepicker:hover {
    transform: translateY(-1px); /* 호버 시 살짝 위로 올라가는 효과 */
}

/* readonly 상태일 때 아주 연한 회색 배경 지정 */
.form-control[readonly] {
    background-color: #f6f7f8; /* 또는 더 연한 색을 원하시면 #fafafa */
    opacity: 1; /* 브라우저 기본 투명도 방지 */
}

.datepicker-wrap {
    position: relative;
}

.datepicker-wrap::after {
    content: "\f133";
    position: absolute;
    right: 15px;
    top: 8px;
    font-size: 13.5px; /* 15px * 90% = 13.5px*/ 
    color: #555;
    cursor: pointer;
}

.datepicker-wrap.min::after {
    right: 22px;
    font-size: 14px;
    top: 10px; /*240805 추가*/
}


.dropdown-menu {
    border: 1px solid #ddd;
    margin-top: 2px;
    background-color: #fff; /* 배경색을 흰색으로 설정 */
    opacity: 1; /* 투명도를 1로 설정하여 완전히 불투명하게 */
    z-index: 1000; /* 다른 요소 위에 표시되도록 z-index 값을 높임 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 그림자를 추가하여 뒷배경과 구분 */

}
.dropdown-menu.datepicker {
    padding: 20px;
    min-width: auto;
 

}


.datepicker td, .datepicker th {
    width: 32px;
    height: 32px;
}



/* 드롭다운 메뉴 스타일 */
.dropdown-menu.min-menu {
    right: 0 !important;
    padding: 0;
    box-shadow: 0 5px 10px 1px rgb(94 94 94 / 35%);
    width: fit-content;
    border: 1px solid #aaa;
}

.dropdown-menu.min-menu .tit {
    padding: 8px 0 4px 12px;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
    font-weight: 900;
    color: #777;
}

.dropdown-menu.min-menu > ul {
    display: flex;
    padding: 12px 16px;
    flex-direction: column;
}

.dropdown-menu.min-menu li {
    margin-bottom: 8px;
}

.dropdown-menu.min-menu li .btn {
    margin: 0;
}


/* 체크박스 스타일 */
.form-check-input:checked {
    background-color: #079ca0;
    border-color: #079ca0;
}

.form-control.w80px {width: 80px;}
.form-control.w100 {width: 100px;}
.form-control.w120 {width: 120px;}
.form-control.w160 {width: 160px;}
.form-control.w200 {width: 200px;}
.form-control.w240 {width: 240px;}
.form-control.w400 {width: 400px;}
.form-control.w500 {width: 500px;}

.form-select.w80px {width: 80px;}
.form-select.w100 {width: 100px;}
.form-select.w120 {width: 120px;}
.form-select.w160 {width: 160px;}
.form-select.w200 {width: 200px;}
.form-select.w240 {width: 240px;}

.datepicker.w80px {width: 80px;}
.datepicker.w100 {width: 100px;}
.datepicker.w120 {width: 120px;}
.datepicker.w160 {width: 160px;}
.datepicker.w200 {width: 200px;}
.datepicker.w240 {width: 240px;}
@media (max-width: 1280px) {
}
@media (max-width: 576px) {
	.input-group {align-items: center; width: 100%; flex-direction: row; flex-wrap: wrap; margin-top: 0;}
	.input-group .input-item {box-sizing: border-box; margin: 2px 0; flex-wrap: wrap;}
	.input-group .input-item.wide {width: 100%;}
	.input-group .input-item > * {margin: 2px;}
	.form-control.w80px, .form-control.w100, .form-control.w120, .form-control.w160,	.form-control.w200,	.form-control.w240,	.form-control.w400 {width: 90%;}
	.form-select.w80px, .form-select.w100, .form-select.w120, .form-select.w160, .form-select.w200, .form-select.w240 {width: 90%;}
	.datepicker.w80px, .datepicker.w100, .datepicker.w120, .datepicker.w160, .datepicker.w200, .datepicker.w240 {width: 100%;}
	.dropdown-menu.min-menu>ul {flex-direction: column;}
	.dropdown-menu.min-menu>ul li, .dropdown-menu.min-menu li:last-child {margin :4px;}
	.datepicker.w80px {width: 80px;}
	.datepicker.w100 {width: 100px;}
	.datepicker.w120 {width: 120px;}
	.datepicker.w160 {width: 160px;}
	.datepicker.w200 {width: 200px;}
	.datepicker.w240 {width: 240px;}
	
}
.table3 {width: 100%;}
.table3 :is(th,td) {padding: 10px;}
.table3 th {background-color: #F6F1F1; font-weight: bold; border: 1px solid #bbb; vertical-align: middle; text-align: center; color: #222}
.table3 th.white-th {background: #fff; }
.table3 td {background-color: #fff; height: 180px; border: 1px solid #ddd;}
.table3 td.stamp-area {margin: auto;}
.table3 td.stamp-area>div {border: 1px dotted #ddd; height: 100%; text-align: center;}

/*내부 페이지 테이블타입4 (메인페이지/게시판)*/
.table4 {width: 100%; border-top: 2px solid #222}
.table4.mint {border-top: 2px solid #007aa8;}
.table4 :is(th,td) {border-bottom: 1px solid #aaa;}
.table4 th {/*text-align: center;*/ font-weight: 700; padding: 10px; white-space: nowrap;}
.table4 td {/*text-align: center;*/ padding: 10px; color: #000; white-space: nowrap;}
.table4 td a {color: #111;}
.table4 th.imp:after {content:' *'; color: #ff3b59;}

/*내부 페이지 테이블타입5 (메인페이지/게시판) padding 15->8px*/
.table7 {width: 100%; border-top: 2px solid #222}
.table7.mint {border-top: 2px solid #007aa8;}
.table7 :is(th,td) {border-bottom: 1px solid #aaa;}
.table7 th {/*text-align: center;*/ font-weight: 700; padding: 10px; white-space: nowrap;}
.table7 td {/*text-align: center;*/ padding: 8px; color: #000; white-space: nowrap;}
.table7 td a {color: #111;}
.table7 th.imp:after {content:' *'; color: #ff3b59;}

/*일정변경 스타일*/
.table6 {
    width: 100%;
    border-top: 2px solid #222;
}
.table6.mint {
    border-top: 2px solid #007aa8;
}
.table6 :is(th, td) {
    border-bottom: 1px solid #aaa;
}
.table6 th {
    font-weight: 700;
    padding: 6px; /* 기존 10px → 6px */
    white-space: nowrap;
}
.table6 td {
    padding: 8px; /* 기존 15px → 8px */
    color: #888;
    white-space: nowrap;
}
.table6 td a {
    color: #111;
}
.table6 th.imp:after {
    content: ' *';
    color: #ff3b59;
}


/* 내부 페이지 테이블타입5 (메인페이지/게시판) */
.table5 {width: 100%; border-top: 2px solid #222;}
.table5.mint {border-top: 2px solid #00a1cd;}
.table5 :is(th, td) {border-bottom: 1px solid #d5d5d5;}


.table5 th {text-align: center; font-size: 14px; font-weight: 700; padding: 10px; 
	white-space: nowrap;
	background-color: #f5f5f5; /* 아주 옅은 회색 */
}
.table5 td {text-align: center; padding: 15px; color: #888; white-space: nowrap;}
.table5 td a {color: #111;}
.table5 td.imp a {color: #ff3b59;}
.table5 th.imp:after {content: ' *'; color: #ff3b59;}
.table5 td.lnk {
  position: relative; /* 부모 요소를 기준으로 */
}

.table5 td.lnk a {
	color: #007aa8;
  	cursor: pointer;
}
.table5 th.lnk:after {content: ' *'; color: #007aa8;}
.table5 td.lnk:hover::after {
  content: attr(data-tooltip);
  position: absolute; /* 절대 위치로 변경 */
  top: -30px; /* 풍선 도움말의 위치 */
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(20, 20, 20, 0.5); /* 배경색 */
  color: #fff; /* 글자색 */
  padding: 4px 6px; /* 안쪽 여백 */
  font-size: 12px; /* 글자 크기 */
  border-radius: 3px; /* 모서리 둥글게 */
  white-space: nowrap; /* 한 줄로 표시 */
  opacity: 0;
  transition: opacity 0.2s ease-in-out; /* 표시 속도 조절 */
  z-index: 1000;
}

.table5 td.lnk:hover::after {
  opacity: 1; /* 투명도 변경으로 보이게 */
}

/* 공단수집 테이블에서 "업무" 열 셀 사이에만 라인 추가 */
.table5.mint td:first-child {
    border-right: none; /* 오른쪽 선 제거 */
    border-bottom: 1px solid #d5d5d5; /* 셀 사이에만 라인 추가 */
}

.table5.mint th:first-child {
    border-right: none; /* 헤더의 오른쪽 선 제거 */
    border-bottom: 1px solid #d5d5d5; /* 헤더 셀 사이 라인 */
}

/* 툴팁 스타일 */
.tooltip-content {
    position: fixed; /* 화면 내에서 고정 위치 */
    background-color: rgba(255, 165, 0, 0.9); /* 밝은 주황색 배경 */
    color: rgba(0, 0, 0, 1); /* 검정 텍스트 */
    padding: 10px 14px; /* 패딩 조정 */
    font-size: 14px; /* 글자 크기 조정 */
    line-height: 1.5; /* 줄 간격 */
    border-radius: 6px; /* 둥근 모서리 */
    white-space: pre-wrap;
    text-align: left;
    z-index: 1000;
    pointer-events: none;
    min-width: 400px; /* 최소 너비 설정 */
    max-width: 400px; /* 최대 너비 설정 */
    word-break: break-word; /* 긴 단어 줄 바꿈 */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 약간의 그림자 추가 */
}

/* 툴팁 보이기 상태 */
.tooltip-content.show {
    opacity: 1;
}

/* 덧씌우는 테두리 */
.custom-tooltip.tooltip-border::before {
    content: ''; /* Empty content for pseudo-element */
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px dashed rgba(255, 69, 0, 0.8); /* Dotted border */
    border-radius: 4px; /* Rounded corners */
    pointer-events: none; /* Ignore mouse events */
    z-index: 1; /* Above other content */
}







/*툴팁*/
[data-tooltip-text]:hover {position: relative;}
[data-tooltip-text]:after {-webkit-transition: bottom .3s ease-in-out, opacity .3s ease-in-out; -moz-transition: bottom .3s ease-in-out, opacity .3s ease-in-out; transition: bottom .3s ease-in-out, opacity .3s ease-in-out;	background-color: rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4); -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4); white-space: nowrap;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
  color: #FFFFFF; font-size: 12px; margin-bottom: 10px; padding: 4px; position: absolute; width: auto; min-width: 30px; max-width: 300px; z-index: 9999; opacity: 0; left: 9999px; top: 90%; content: attr(data-tooltip-text);}
[data-tooltip-text]:hover:after {top: 130%; left: 0; opacity: 1;}

.link-icon {
    display: inline-block;
    height: 32px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 기본 그림자 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 트랜지션 */
}

.link-icon img {height: 100%; }

.link-icon:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 더 깊은 그림자 */
    transform: translateY(-2px); /* 살짝 위로 올라가는 효과 */
}

/*페이징*/
.board-table .pagination{justify-content: center; } 
.board-table .paging .page-link {color: #444; border: none;}

/*테이블 제목*/
.table-caption {margin: 30px 0 15px 0;}
.table-caption h5 {font-size: 20px;}

/*내부 페이지 타이틀부*/
.menu-area {
    width: 100%;
    height: 54px; /* 60px * 90% = 54px*/
    padding: 8px 0;
    background: #00addb; /* 기본 배경색 */
    background: -moz-linear-gradient(left, #00b8d4 0%, #0096d4 100%); /* Firefox용 그라데이션 */
    background: -webkit-linear-gradient(left, #00b8d4 0%, #0096d4 100%); /* Chrome, Safari용 그라데이션 */
    background: linear-gradient(to right, #00b8d4 0%, #0096d4 100%); /* 표준 그라데이션 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 3D 효과를 위한 그림자 */
    transform: translateY(-2px); /* 약간 위로 올리는 효과 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 애니메이션 효과 추가 */
}
.menu {height: inherit;}
.menu-category {display: flex; align-items: center}
.menu-category li {
	font-size: 13.5px; /* 15px * 90% = 13.5px*/  
	color: #fff;
}
.menu-category li a:hover {color: #aad3ff;}
.menu-category li:after {content:'>'; color: #dddddd80; margin: 0 10px;}
.menu-category li:last-child:after {content: '';}

/*보드 타이틀*/
.container-title {
    padding: 0px;
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 자식 요소 수직 중앙 정렬 */
    height: 100%; /* 부모 요소의 높이를 기준으로 맞춤 */
    }
.container-title-end {
    padding: 0px;
    display: flex; /* Flexbox 사용 */
    align-items: center; /* 자식 요소 수직 중앙 정렬 */
    justify-content: flex-end; /* 자식 요소를 오른쪽 정렬 */
    height: 100%; /* 부모 요소의 높이를 기준으로 맞춤 */
    }
.container-title h4 {    
	font-size: 22.5px; /* 25px * 90% = 22.5px*/
    font-weight: 1000;
    color: #ffffff;
    margin: 0; /* 기본 마진 제거 */
    line-height: 1.8; /* 텍스트 줄 높이 설정 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 텍스트에 그림자 추가 */
    }
    
.container-title h3 {    
    font-size: 13.5px; /* 15px * 90% = 13.5px*/
    font-weight: 1000;
    color: #ffffff;
    display: flex; /* 플렉스박스 적용 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 가로 중앙 정렬 (필요하면 추가) */
    height: 100%; /* 부모 요소의 높이에 따라 조정 */
    line-height: normal; /* 기본 줄 높이로 설정 */
    margin-left: 10px; /* 기본 마진 제거 */
    margin-bottom: 0;
    margin-top: 0;
    }
    
.container-title-end h3 {    
	font-size: 13.5px; /* 15px * 90% = 13.5px*/ 
    font-weight: 1000;
    color: #ffffff;
    margin: 0; /* 기본 마진 제거 */
    line-height: 1.8; /* 텍스트 줄 높이 설정 */
    }
.container-title h4 span {
    font-weight: 200;
    font-size: 18px;
    color: #CDD4F9;
    letter-spacing: -2px;
    margin-left: 5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* span 요소에도 약한 그림자 추가 */
    }

.notice-txt {padding: 10px 15px; border: 1px solid #138aff; border-radius: 10px; background-color: #fff; margin-bottom: 20px; margin-top: -10px;}
.notice-txt.mid-notice {margin-top: 0}
.notice-txt p {
	font-size: 13.5px; /* 15px * 90% = 13.5px*/  
	color: #0046c9;line-height: 1.5
}
.notice-txt p:before{content:"\f06a"; color: #1667ff; margin-right: 5px;}
.input-group {
	padding: 0; 
	align-items: center; 
	min-height: 40px; 
	margin: 6px 0; 
	flex-wrap: nowrap;
}
.input-group.right {justify-content: flex-end}
.input-item.right {justify-content: flex-end}
.cont-box .input-group.grid2 {
	display: grid; 
	align-items: center; 
	grid-row-gap: 16px; 
	grid-template-columns: 1fr 1fr;
}

.cont-box .input-group.grid3 {display: grid; align-items: center; grid-row-gap: 16px; grid-template-columns: 1fr 1fr 1fr;}
.cont-box .input-group.grid3 {display: grid; align-items: center; grid-row-gap: 16px; grid-template-columns: 1fr 1fr 1fr 1fr;}

@media (max-width: 790px) {
	.input-group.cont-align {flex-wrap: wrap;}
}
@media (max-width: 576px) {
	.input-group.cont-align .input-item {width: 50%;}
}

.input-group.w-100 {width: 100%;}
.row .w-auto {width:  auto;}
.align-right{justify-content: flex-end}
.input-item {display: flex; align-items: center; box-sizing: border-box; position: relative;}
.input-item h6 {
	font-size: 13.5px; /* 15px * 90% = 13.5px*/ 
	white-space: nowrap;margin: 5px 15px 5px 0;min-width: 55px;
}



.input-item .form-control,
.input-item .form-select,
.input-item .datepicker {
    flex: 1; /* 입력 필드가 남은 공간을 차지하도록 설정 */
    margin-left: 10px; /* 라벨과 입력 필드 사이의 간격 */
    padding: 0 0.75rem;
    height: 32.4px;  /* 36px * 90% = 32.4px*/
    font-size: 13.5px; /* 15px * 90% = 13.5px*/ 
    border-radius: 4px; /* 모서리를 약간 둥글게 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 트랜지션 */
}

.input-item .form-check {
    margin-left: 2px; /* 라벨과 체크박스/라디오버튼 사이의 간격 */
}


.input-item h6:before {
    content: '';
    display: inline-block;
    height: 6px;
    width: 6px;
    background-color: #007aa8;
    border-radius: 50%; /* 동그라미 모양 */
    vertical-align: middle; /* 텍스트와 세로로 정렬 */
    margin-right: 8px;
}

.input-item h6.imp:after {
    content: ' *';
    color: #f9005f;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 별표에 대한 텍스트 그림자 */
}

.input-item label {cursor: pointer; white-space: nowrap;}
.input-item label input {position: relative; top: 3px; margin-right: 5px;}
.input-item input::placeholder {color: #888; font-weight: 400; width: 100%
	; font-size: 13.5px; /* 15px * 90% = 13.5px*/ 
}
.form-check { display: flex; align-items: center;}
.form-check input {margin-right: 4px;}

/*그리드 섹션 잡기*/
.grid-section_s {border: 0px solid #ccc; min-height: 100px; overflow-y: hidden; }
.grid-section {border: 0px solid #ccc; min-height: 200px; overflow-y: hidden; }
.grid-section.full {min-height: calc(100vh - 200px);}
.grid-section.h692 {min-height: 692px;}

/*콘텐트 박스*/
/*콘텐트 박스*/
.cont-box {
    padding: 8px 16px; 
    border: 1px solid #ccc;
    display: flex;
    margin-top: 16px;
	height:auto; /* 160px에서 auto로 변경 */
    border-radius: 8px; /* 모서리를 둥글게 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
}


.cont-box.autobox {width:  fit-content;}
.cont-box.w850 {width: 850px;}
.cont-box .left-box {}
.cont-box .right-box {margin-left: 24px;}
.cont-box.col {flex-direction: column;}
.cont-box .input-item {padding: 0 12px;}
.cont-box .input-item.w100 {width: 100%; max-width: none}
.cont-box .input-item h6 {
	width: 96px; 
	letter-spacing: -1px; 
	font-size: 12.6px;  /* 14px * 90% = 12.6px*/
	margin: 0; padding-right: 8px; box-sizing: border-box;
}

.cont-box .input-item h6.blank:before {display: none;}
.cont-box .input-item h6.wide {margin-right:  16px}
.cont-box .input-item h6.w-auto {width: auto;}
.cont-box .input-item.add h6 {margin-right: 40px;}
.cont-box .input-item :is(.form-control, .form-select,.datepicker) {width: calc(100% - 96px);}
.cont-box .input-item button {white-space:  nowrap;}
.cont-box .cont-data-box {width: calc(100% - 180px);}
.cont-box .cont-img-box {padding-left: 16px;}
.cont-box .img-box {width: 160px; margin: 8px auto;}
.cont-box .left-box {width: 20%}
.cont-box .right-box {width: 80%}
.cont-box .input-group.address {flex-direction: column;}

/*회원정보 - contbox 높이들*/
.cont-box .user0, .cont-box .stamp {width: 16%}
.cont-box .user0 > div {
    height: 160px;
    margin: 10% auto;
    width: 145px;
    background: #f7f7f7;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 추가 */
}
.cont-box .stamp>div {height: 160px; margin: 10% auto; width: 160px; background: #eee;}
.cont-box .user1 {width: 44%}
.cont-box .userX {width: 0%}
.cont-box .user2 {width: 40%}
.cont-box .user3 {width: 70%}

.height1 {height:  340px;}
.height2 {height:  462px;}
.height3 {height:  320px;}
.height5 {height:  280px;}
.height4 {height:  718px;}
.height6 {height:  886px;}
.height7 {height:  670px;}
.height8 {height:  200px;}

.height718 {height:  calc(100vh - 220px)} /* 790px */
.heightAuto2 {height:  calc(100vh - 558px)} /* 790px */
	.heightPopup {height:  calc(100vh - 62px)}
	.heightPopup2 {height:  calc(100vh - 85px)}
.height734 {height:  734px;}
.height678 {height:  678px;}
.heightFit2 {height:  calc(100vh - 295px)} /* 790px */
.height462 {height:  462px;}
.height300 {height:  304px;}
.height340 {height:  344px;}


/*회원정보: 높이*/
@media (min-height: 1200px) {
	.height1 {height:  440px;}
	.height3 {height:  fit-content;}
	.height1 .grid-section {height: 380px;}
	.height4 {height:  800px;}
	.height718 {height:  calc(100vh - 250px)} /* 790px */
	.heightAuto2 {height:  calc(100vh - 558px)} /* 790px */
	.heightFit2 {height:  calc(100vh - 295px)} /* 790px */
	.heightPopup {height:  calc(100vh - 62px)}
	.heightPopup2 {height:  calc(100vh - 85px)}
	.height678 {height:  746px;}
	.height462 {height:  508px;}
	.height300 {height:  330px;}
	.height340 {height:  370px;}
}
@media (min-height: 1440px) and (min-width: 1920px) {
	.height1 {height:  710px;}
	.height1 .grid-section {height: 650px;}
	.height3 {height:  fit-content;}
	.height4 {height:  1070px;}
	.height718 {height:  calc(100vh - 250px)} /* 869px */
	.heightAuto2 {height:  calc(100vh - 558px)} /* 790px */
	.heightPopup {height:  calc(100vh - 62px)}
	.heightPopup2 {height:  calc(100vh - 85px)}
	.height678 {height:  820px;}
	.heightFit2 {height:  calc(100vh - 295px)} /* 790px */
	.height462 {height:  559px;}
	.height300 {height:  363px;}
	.height340 {height:  403px;}
}

/*회원정보: 가로*/
@media (max-width: 1600px) {
	.cont-box .input-group.address {flex-direction: row;}

	.height1 {height:  300px;}
	.height2 {height:  360px;}
	.height3 {height:  fit-content;}
	.height4 {height:  898px;}
	.height718 {height:  calc(100vh - 250px)} /* 653px */
	.heightAuto2 {height:  calc(100vh - 558px)} /* 790px */
	.heightPopup {height:  calc(100vh - 62px)}
	.heightPopup2 {height:  calc(100vh - 85px)}
	.height734 {height:  704px;}
	.height678 {height:  616px;}
	.heightFit2 {height:  calc(100vh - 295px)} /* 790px */
	.height462 {height:  420px;}
	.height300 {height:  273px;}
	.height340 {height:  313px;}

	.cont-box { flex-wrap: wrap;}
	.cont-box .user0, .cont-box .stamp {width: 24%}
	.cont-box .user1 {width: 76%}
	.cont-box .userX {width: 24%}
	.cont-box .user2 {width: 76%}
	.cont-box .input-item h6 {width: 140px;}
}
@media (max-width: 1439px) {
	.height1 {height:  300px;}
	.height2 {height:  360px;}
	.height3 {height:  fit-content;}
	.height4 {height:  943px;}
	.height718 {height:  calc(100vh - 250px)} /* 593px */
	.heightAuto2 {height:  calc(100vh - 558px)} /* 790px */
	.heightPopup {height:  calc(100vh - 62px)}
	.heightPopup2 {height:  calc(100vh - 85px)}
	.height678 {height:  560px;}
	.heightFit2 {height:  calc(100vh - 295px)} /* 790px */
	.height462 {height:  382px;}
	.height300 {height:  248px;}
	.height340 {height:  288px;}
	
	.left-box {margin-bottom: 8px;}
	/*회원정보*/
	.cont-box .user0>div {margin: 2% auto 4% auto; width: 140px; height:  150px;}
	.cont-box .stamp>div{margin: 2% auto 4% auto; width: 140px; height:  140px;}
	
	.cont-box .input-group {margin-top: 0; flex-wrap: wrap;}
	.cont-box .input-group.address {margin-top: 8px;}
	.cont-box .input-item.w360 {width: 100%;}
	.cont-box .input-item.w460 {width: 100%;}

	.cont-box .input-group.grid2 .input-item {
		width: 100%; margin: 4px 0;
	}
	.cont-box .input-item :is(.form-control, .form-select,.datepicker) {width: 100%;}
}

@media (max-width: 990px) {
	.input-item {margin: 2px;}
	.input-group.right {justify-content: flex-start;}
	.input-item.right {justify-content: flex-start;}
	.cont-box.w820 {width: auto;}
	.cont-box .input-item.w360 :is(.form-control, .form-select,.datepicker) {width: 100%;}
	.cont-box .input-item.w460 :is(.form-control, .form-select,.datepicker) {width: 100%;}
	.cont-box .right-box {margin-left: 0;}
	.cont-box .input-item h6 {width: 120px}
	.height3 {height:  fit-content;}
	.height4 {height: 440px;}
	.height718 {height: 539px;}
	.heightAuto2 {height:  calc(100vh - 558px)} /* 790px */
	.heightPopup {height:  calc(100vh - 62px)}
	.heightPopup2 {height:  calc(100vh - 85px)}
	.height678 {height: 509px;}
	.heightFit2 {height:  calc(100vh - 295px)} /* 790px */
	.height462 {height: 347px;}
	.height300 {height: 225px;}
	.height340 {height: 265px;}
}
@media (max-width: 768px) {
	.cont-box .user0>div {margin: 2% auto 4% auto; width: 100px; height:  110px;}
	.cont-box .stamp>div {margin: 2% auto 4% auto; width: 100px; height:  100px;}
	.height1 {margin-bottom: 20px;}
	.height2 {height: fit-content;}
	.height3 {height: fit-content;}
	.height4 {height: fit-content;}
	.height718 {height: 490px;}
	.heightAuto2 {height:  calc(100vh - 558px)} /* 790px */
	.heightPopup {height:  calc(100vh - 62px)}
	.heightPopup2 {height:  calc(100vh - 85px)}
	.height678 {height: 463px;}
	.heightFit2 {height:  calc(100vh - 295px)} /* 790px */
	.height462 {height: 316px;}
	.height300 {height: 205px;}
	.height340 {height: 205px;}
			
}
@media (max-width: 576px) {
	.cont-box .input-item h6 {width: 100%; margin-bottom: 8px;}	
	.height1 {margin-bottom: 40px;}
	.height3 {height:  fit-content;}
	.height718 {height: 446px;}
	.heightAuto2 {height:  calc(100vh - 558px)} /* 790px */
	.heightPopup {height:  calc(100vh - 62px)}
	.heightPopup2 {height:  calc(100vh - 85px)}
	.height678 {height: 421px;}
	.heightFit2 {height:  calc(100vh - 295px)} /* 790px */
	.height462 {height: 287px;}
	.height300 {height: 186px;}
	.height340 {height: 226px;}
}

@media (max-width: 460px) {
	.cont-box .input-group.grid2 {grid-template-rows: 1fr 1fr;  grid-template-columns: none;}
	.cont-box .input-group.grid3 {grid-template-rows: 1fr 1fr 1fr; grid-template-columns: none;}
	.cont-box .input-group.grid3 {grid-template-rows: 1fr 1fr 1fr 1fr; grid-template-columns: none;}
	.cont-box .user0,.cont-box .stamp {width: 100%}
	.cont-box .user1 {width: 100%}
	.height718 {height: 405px;}
	.heightAuto2 {height:  calc(100vh - 558px)} /* 790px */
	.heightPopup {height:  calc(100vh - 62px)}
	.heightPopup2 {height:  calc(100vh - 85px)}
	.height678 {height: 383px;}
	.heightFit2 {height:  calc(100vh - 295px)} /* 790px */
	.height462 {height: 261px;}
	.height300 {height: 169px;}
	.height340 {height: 209px;}
}

/*탭*/
.nav-tabs {
    margin-top: 0px; /* 35 -> 0으로 조정 */
    display: flex;
    justify-content: flex-start; /* 탭들을 왼쪽에 정렬 */
}

.nav-tabs .nav-item {
	width: 120px; /* 각 탭의 너비를 동일하게 설정 */
    text-align: center; /* 탭 텍스트를 가운데 정렬 */
}

.nav-tabs .nav-item .nav-link {
	border: 1px solid;
	border-color: #ddd;
    background-color: #fff; /* 활성화된 탭에 파란색 배경 추가 */
	width: 100%; /* 링크가 탭 전체를 차지하도록 설정 */
    font-weight: 700; /* 글씨 굵기 설정 */
    font-size: 13px;  /* 15px * 90% = 13.5px*/  /* 글씨 크기 설정 */
    transition: color 0.3s ease, border-bottom 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* 애니메이션 트랜지션 추가 */
    transform: translateY(0); /* 초기 상태에서 평면 유지 */
    text-align: center; /* 텍스트를 가운데 정렬 */ 
	}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border: 1px solid;
	border-color: #007aa8;
    border-bottom: 3px solid #00addb;
    background-color: #eef4fd; /* 활성화된 탭에 파란색 배경 추가 */
    color: #000000; /* 활성화된 탭의 텍스트 색상을 검정색으로 변경 */
    transform: translateY(-2px); /* 탭이 활성화되면 살짝 위로 이동 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 활성화된 탭에 3D 그림자 추가 */
    transition: background-color 0.3s ease, color 0.3s ease, border-bottom 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* 애니메이션 트랜지션 */
	}
.nav-tabs .nav-item .nav-link:hover {
    color: #00addb;
    transform: translateY(-2px); /* 마우스를 올리면 살짝 위로 이동 */
    border-bottom: 3px solid #007aa8;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 마우스를 올릴 때 3D 그림자 추가 */
    transition: color 0.3s ease, border-bottom 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* 애니메이션 트랜지션 */
    }
.tab-grid {position: relative;}
.tab-grid .grid-cont {box-sizing: border-box; display: none}
.tab-grid li.active {display: block;}

/*메인 헤더*/
.main-header {padding: 15px 0 10px 0; border-bottom: 1px solid #eee}
.main-header .logo img {height: 45px;}
.main-header .userbar {justify-content: space-between}
.main-page .logo {display: none;}

/*로그인 모달*/
.login {-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
.login .modal-body {padding: 16px 40px;}
.login-input-group {margin: 24px auto 0;}
.login .modal-title {font-size: 24px;}
.login label input[type='checkbox'] { position: relative; top: 3px; margin-right: 5px;}
.login .input-group {position: relative; width: 100%; margin: 0 auto 24px;}
.login .form-control {display: block;  font-size: 14pt; padding: 10px; border: 1px solid #ccc; height: 50px;}
.login .form-control:focus,.login .form-control:active {outline: none; box-shadow:  none;}
.login label.tag {position: absolute; top: 15px; left: 10px; color: #999; font-size: 14px; font-weight: normal; pointer-events: none; transition: all 0.2s ease; background-color:  #fff; padding: 0px 4px; border-radius: 5px;}
.login input:focus ~ label.tag, input:valid ~ label.tag {top: -21px;font-size: 10pt;color: #52abad;z-index: 100;}
@media(max-width: 460px){
	.login .modal-footer .btn {width: 40%; padding: inherit; line-height: 0}
}
/*내부 페이지 테이블타입2*/
.sum-grid {width: 100%; border-top: 2px solid rgb(80 80 80);  border-bottom: 1px solid rgb(80 80 80);  border-right: 1px solid rgb(80 80 80); margin-top: 5px;}
.table2 {width: 100%;}
.table2 :is(th,td) {padding: 5px; height: 48px; 
	font-size: 13.5px; /* 15px * 90% = 13.5px*/  
	white-space: nowrap; vertical-align: middle;
}
.table2 th {background: rgb(120 120 120); color: #fff; font-weight: bold; }
.table2 td {background-color: #fff; color: #111;}

/*팝업 모달*/
.modal-dialog {top: 10%;}
.modal-header {padding: 8px 16px 8px 24px; justify-content: space-between; border: none;}
.modal-content {
	background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#searchCompanyModal .modal-dialog,
#salaryModal .modal-dialog,
#addEmpModal .modal-dialog {
    width: 1200px !important;
    height: 800px !important;
    max-width: 1200px !important;
    max-height: 800px !important;
}

#chkInsuranceModal .modal-dialog {
    width: 90% !important;
    height: 600px !important;
    max-width: 90% !important;
    max-height: 600px !important;
    top: 0px; /* 모달의 상단에서 50px 떨어지도록 설정 */
}

.multiline-editor{
  white-space: pre-line;
}

.modal-body .card-body {height: 450px;}
.popText-area {min-width: 450px; padding: 0 20px;}
.popText-area p {font-size: 17px; line-height: 1.5; color: #333;}
.popText-area.poptextSubmit {}
.popText-area.poptextSubmit p{}
.modal-textarea {min-width : 500px; border: 1px solid #ccc; min-height: 300px;}
.modal-header .close {color: #111; border: none; background: unset;}
.modal-footer {justify-content: center;   border: none;}


.modal-body2 {
    padding-top: 0px; /* Adjust this value as needed */
    padding-right: 16px;
    padding-bottom: 20px;
    padding-left: 16px;
    /* Add other properties from .modal-body if needed */
}

.modal-body3 {
	display: flex;
    padding-top: 0px; /* Adjust this value as needed */
    padding-right: 16px;
    padding-bottom: 20px;
    padding-left: 16px;
    /* Add other properties from .modal-body if needed */
}


/*메인페이지 보드부*/
.board-table {width: 100%;}
.section-sub-title {color: #666; margin-top: 8px; font-weight: 400; 
	font-size: 13.5px; /* 15px * 90% = 13.5px*/ 
}
.board-list-tab {width: 100%; display: flex; margin: 24px 0 0 0; }
.board-list-tab li {width: 25%; text-align: center; padding: 10px; 
	font-size: 13.5px;  /* 15px * 90% = 13.5px*/ 
	font-weight: 300; cursor: pointer; white-space: nowrap;
}
.board-list-tab li:hover {background-color: #c8e0fd; transition: 0.7s;}
.board-list-tab li.active {background-color: #007aa8; color: #fff;  font-weight: 500;}
.board-list-tab li label { cursor: pointer;}
.board-list-tab li input {display: none}
.board-table .btn:hover {background-color: #f7f7f7; border: 1px solid #f7f7f7; color:#111;}

/*게시판 내용부*/
.board-contents .table4 tr:hover td {background-color: #fff;}
.board-contents .board-date { border-bottom: none; padding-bottom: 0; font-size: 13px; font-weight: 300; text-align: left;}
.board-contents .board-title {color: #222; font-size: 20px; text-align: left; line-height: 1.2;}
.board-contents .board-title input::placeholder {color: #bbb;}
.board-time {font-size: 13px;}
.board-contents .board-cotain>div{min-height: 100px;}
.board-contents .board-data,.board-contents .board-data-upload {border: 0; width: 100%; min-height: 100px; max-height: 200px; overflow: auto; padding: 15px 20px; box-sizing: border-box; text-align: left;}
.board-contents .board-data {border: 1px dashed #aaa;}
.board-contents .board-data-upload { background-color: #f0f0f0;}
.board-contents .board-data li {padding : 4px 0;}
.board-contents .board-data li a:hover {color: #999; transition: 0.5s;}
.board-contents .board-data-title {vertical-align: middle; color: #222; font-weight: bold; border-bottom: 0; padding-bottom: 0; text-align: left; font-size: 16px; border-top: 1px dotted #ccc;}

/*문의게시판*/
.board-contents .board-answer{ border-bottom: none; padding-bottom: 0; 
	font-size: 13.5px; /* 15px * 90% = 13.5px*/  
	font-weight: 700; text-align: left;
}
.answer-modal {width: 1000px;}

@media(max-width: 991px){
	.board-list-tab li {font-size: 14px; }
}
@media(max-width: 460px){
	.board-list-tab {justify-content: space-between;}
	.board-list-tab li {width: auto}
}

/*소개 페이지*/
section.solid-bg {background-color: #08adb1;}
.point-section,.work-section {margin-top: 30px; text-align: center;}
.point-section h3 {font-size:24px; font-weight: 600; color: #777;}

.point-section h3 span {font-size:24px; font-weight: 900; color: #222;}
.point-list,.work-list {}/*2312수정*/
.point-list li {font-size: 18px; line-height: 1.8; color: #222; text-align: left;}
.point-list li:before {content:'\2714'; color: #aaa; margin-right: 10px;}
.point-title {display:flex; align-items: center; margin-bottom: 15px;}
.work-title {margin-bottom: 10px;}
.point-title img,.work-title img {width: 32px; margin-right: 10px;	}
.point-title h3 {margin-bottom: 0;}
.work-list li{font-size: 18px; line-height: 2; color: #222;}
.work-title h4 {font-size: 18px; color: #333; margin-bottom: 10px; font-weight: 400; position: relative; left: 20px;}
.work-title h4:before {content:'\2714'; color: #416fdf; margin-right: 10px; margin-left: -30px;}
section.btn-section {padding: 80px 0;}
.btn-section .row div {display: flex; align-items: center; flex-direction: column; justify-content: space-between;}
.btn-section .row div p {font-size: 20px; color: #fff; margin-bottom: 15px; line-height: 1.5;}

/*올케어 페이지*/
.introduce-text {text-align: left;}
h4.introduce-text {font-size: 22px; line-height: 1.7; }
h5.introduce-text {font-size: 20px;}
.introduce-text p {font-size: 17px; line-height: 1.8; color: #333; font-weight: 300;}
.introduce-img {width: 100px; margin-bottom: 20px;}
.introduce-img img {width: 100%;}
.modal-body .card-body {min-width: 800px;}
.owner-title {font-size: 20px; font-family: 'Chosunilbo_myungjo'; color: #111;}
.owner-profile {text-align: left; margin: auto;}
.subway h5 {font-size: 15px; color: #444;}
.subway {margin: 20px 0;}
.search-subway {font-weight: 600; font-size: 15px; color: #222; margin: 5px 0;}
.search-subway i {font-size: 15px; margin-right: 5px;color: #555;}
.subway-line {border-radius: 20px; padding: 3px; font-size:12px; color: #fff; min-width:20px; display: inline-block; text-align: center; height:20px;}
.subway-line.line7 {background-color: darkolivegreen}
.subway-line.linesl{background-color: #605b7d; padding: 3px 10px}
.subway-list {margin: 10px 0;}
.section-title {margin: 0px auto; font-size: 24px; text-align: center;}
.section-title-min {font-size: 24px;}
.point-item {margin: 30px 0 50px; padding: 30px 20px;}
.point-item-image img {width: 80%;}
.point-text {display: flex; flex-direction: column; justify-content: center;}
.work-img {text-align: left;}
.work-img img{width: 120px;}
.owner-title {font-size: 20px; font-family: 'Chosunilbo_myungjo'; color: #111;}
.owner-profile {width: 550px; text-align: left; margin: auto;}
.search-address {font-size: 18px;}

/*내용페이지 헤더*/
.banner-area {height: 300px; display: flex; justify-content: flex-start; align-items: center; padding-left: 20%; background-position: center; background-size: auto;
    background-repeat: no-repeat;}
.banner-area .banner-heading h2 {color: #fff; font-size: 30px;}
.banner-area.page01 {background-image: url(../images/banner/banner1.jpg); } 
.banner-area .banner-details, .banner-title-text {margin-top:20px;}
.banner-area .banner-details li, .banner-title-text { font-size: 15px; line-height: 2; color: #fff; font-weight: 400;} /*2312수정*/
.banner-area .banner-details li:before {content:'\2714'; color: #63a7ff; margin-right: 10px;} /*2312수정*/

.banner-area .banner-title {font-size: 36px;}
.point-section,.work-section {margin-top: 30px; text-align: center;}
.point-section h3 {font-size:24px; font-weight: 600; color: #777;}

/*내용페이지-프로그레스바*/
.progress-step {counter-reset: step;}
.progress-step li {list-style: none; display: inline-block; width: 24%; position: relative; text-align: center; cursor: pointer;}
.progress-step li:before {content: counter(step);  counter-increment: step; width: 40px; height: 40px; line-height : 40px; border: 1px solid #ddd; 
						  border-radius: 100%; display: block; text-align: center; margin: 0 auto 10px auto; background-color: #fff;}
.progress-step li:after {content: ""; position: absolute; width: 100%; height: 2px; background-color: #ddd; top: 20px; left: -50%; z-index : -1;}
.progress-step li:first-child:after {content: none;}
.progress-step li.active {color: #333;}
.progress-step li.active p {font-weight: bold;}
.progress-step li.active:before {background-color: #333; color: #fff; border-color: #333;} 
.progress-step li.active + li:after {background-color: #333;}

/*내용페이지-게시판 셀렉*/
.serv-body {width: 100%;}
.service-borad .table4 td{color: #222; cursor: pointer}
.service-borad-write .table4 td {padding: 5px 0;}
.service-borad-list {display:flex; flex-wrap: wrap;}
.service-borad-item {width: 100%; display:flex; align-items: center; margin: 5px 0;}
.service-borad-item h6 {min-width: 140px; text-align: left; padding: 0 10px}
.service-borad-content {display:flex; align-items: center}	
.service-borad-content .service-borad-item2 {width:10%;}
.service-borad-item h6.imp:after {content:' *'; color: #ff3b59;}

/*내용페이지-회원가입 프로그레스바*/
.join-progress-step {counter-reset: step;  display: flex; justify-content: space-between; align-items: stretch;}
.join-progress-step li {display: inline-block; width: 32%; position: relative; text-align: left; border: 1px solid #eee; background-color: #eee; padding: 8px 24px;}
.join-progress-step li:after {content:'';display: block; position: absolute; width: 12px; height: 12px; background: #ccc;clip-path: polygon(30% 0, 30% 100%, 100% 50%); top: 50%; right: -16px;}
.join-progress-step li:last-child:after {display: none;}
.join-progress-step li .step-text-s {font-size: 13px; line-height: 2; color: #bbb;}
.join-progress-step li .step-text {font-size: 18px;  line-height: 1.5; font-weight: 700; color: #aaa;}
.join-progress-step li.active {background: #16b1a7; }
.join-progress-step li.active:after {background: #888}
.join-progress-step li.active .step-text-s {color: #fff;}
.join-progress-step li.active .step-text {color: #fff;}

/*회원가입*/
.input-group.join h6 {width: 120px; }
.input-group.join .pw-icon {position: absolute; right: 8px;}
.input-group.join.address .input-item {width: 100%; margin: 4px 0;}
.input-group.join.address .input-item:nth-child(2) input {margin-left: 138px}
.input-group.join.address .input-item input[type="text"] {}

/*이용약관*/
.scroll-cont {overflow-x: scroll;}
.hpx-160 {height: 160px;}
.chk-radio:checked + label {color: #111; font-weight: bold}
.agreement-input {}
.agreement-input>div {display: inline-block; margin: 0 8px}
.agreement-input label {font-size: 15px; font-weight: 300; margin-left: 4px; cursor:  pointer;}

/*내부 페이지 테이블타입5 (약관동의)*/
.table5 {width: 100%; border-top: 2px solid #222; border-bottom: 1px solid #777;}
.table5 th { font-weight: 700; padding: 8px 12px; }
.table5 td { padding: 8px; color: #444; font-size: 14px; line-height: 1.5; font-weight: 200;}
.table5 td a {color: #111;}
.table5 th.imp:after {content:' *'; color: #ff3b59;}

/*항목추가 테이블*/
.add-table-wrap {margin-top: 16px; display: flex; background-color: #f5f5f5; align-items: center;}
.add-table {display: flex; padding: 6px; align-items: center;}
.add-table h6 {padding: 0 14px;}
.add-check {padding: 4px 16px;}
.add-table .form-control {zoom: 0.8; width: 160px;}

/*파일 업로드 리스트*/
.upload-box {height: 38px; line-height: 30px; padding:  4px 12px; border-radius: 4px; width: 100%; box-sizing: border-box; margin-left: 4px; display: flex; flex-wrap: wrap;}
.upload-file {color: #333; height: -webkit-fill-available; width: fit-content; margin-right: 8px;}
.upload-file .file-icon {margin:0 4px; color: #555;}
.upload-file a {margin-left: 4px; font-size: 12px;}
.upload-file a:hover{color: #3d4cbf;}

/*아이디/패스워드 찾기 */
.find-id-pw {}
.find-id-pw .input-group {}


@media(max-width: 768px){
	.join-progress-step {flex-direction: column;}
	.join-progress-step li {width: 100%; margin-bottom: 16px;}
	.join-progress-step li:after { top: 100%; transform: rotate(90deg); right: 50%;}
	.table5 th {white-space: nowrap}
	.input-group.join.address .input-item:nth-child(2) input {margin-left: 0px}
}

@media(max-width: 425px){
	.input-group.join .input-item {width: 100%;}
	.input-group.join .input-item :is(.form-control.w100, .form-control.w120, .form-control.w160, .form-control.w200, .form-control.w240, .form-control.w400) {width: 45%;}
	.input-group.join h6 {width: 100%; box-sizing: border-box; }

}

/* 공통 규칙 (기본값) */
.row > * {
    padding-left: 0;
    padding-right: 0; /* 기본적으로 오른쪽 패딩 제거 */
}

/* 모바일이 아닌 경우 */
@media (min-width: 990px) {
    .row > * {
        padding-right: calc(var(--bs-gutter-x) * 1); /* 비모바일 환경에서 오른쪽 패딩 적용 */
    }

    .row > div:last-child {
        padding-right: 0; /* 마지막 div는 항상 패딩 제거 */
    }
}

/* 보조기능 분류 스타일 */
.dropdown-menu-seperate {
    color: #777777;
    font-weight: bold;
    font-size:13.5px;
    padding: 2px;
    margin-top: 6px; /* 위쪽 항목과의 간격 조정 */
}
        
.orange-color {
  background: #f4e04d 
}

/* 1. 행에 포커스가 갔을 때 해당 셀의 색상 유지 */
.rg-focused-row .orange-color, 
.rg-focused-row .rg-table .rg-body td.orange-color {
  background: #f4e04d !important; /* 포커스 시에도 기존 색상 유지 */
}
        
.orange-color2 {
  background: #fFd7d9 
}


.orange-gray {
  background: #efefef 
}

.orange-darkgray {
  background: #cfcfcf 
}

.orange-bold {
    background: #f4e04d;
	font-weight: bold; 
}


.orange-red {
    color: #ff0000;
	font-weight: 700; 
}

.orange-obg {
    color: #007aa8; /*오션브리즈그린 컬러*/
	font-weight: bold; 
}

.just-bold {
	font-weight: bold; 
}





.orange-warning {
    background: #FF9933;
	font-weight: bold; 
}

.rg-focused-row .orange-warning,
.rg-focused-row .rg-table .rg-body td.orange-warning {
	background: #FF9933 !important;
}

/*modal 내용추가 (알림톡) 24.11 */
.modal-dialog.mw1200 {max-width: 1300px; }


.sub-text {font-size: 14px;}
.grid-section.h400 {border: 0px solid #ccc; min-height: 400px; height: 500px; overflow-y: auto; }
.grid-section.msg-box {background: #bacee0; border: none; box-sizing: border-box; }
.grid-section.msg-box h5 {padding: 4px 8px; text-align: left; background: #9fbbd3; color: #222; font-size: 14px;}
.grid-section.msg-box .talk-box {
	text-align: left;
	background: #ffeb33;
	margin: 3%;
	padding: 5%; 
	border-radius: 4px; 
	box-shadow: 0 2px 1px 0px rgba(0,0,0,0.3); 
	overflow-y: auto; }/* 필요에 따라 최대 높이를 지정 */

		
.grid-section.msg-box .talk-box h6 {margin-bottom: 8px;}
.grid-section.msg-box p { 
	white-space: pre-wrap; 
	line-height: 1.5; 
	color: #222;
}