sam-kd/css/eworks.css

 
.nav-link:hover {
  cursor: pointer;
}

.no-hover:hover {
    /* hover 상태에서의 특별한 스타일 없음 */
}

.progress-bar {
background: -webkit-linear-gradient(left, #dcdcdc 0%,#3c3c3c 100%); /* Chrome10-25,Safari5.1-6 */
}
.progress-bar2 {
background: -webkit-linear-gradient(left, #CCCCFF 0%,#aaaaaa 100%); /* Chrome10-25,Safari5.1-6 */
}

@charset "utf-8";

.typing-txt{display: none;}
.typeing-txt ul{list-style:none;}
.typing {  
  display: inline-block; 
  animation-name: cursor; 
  animation-duration: 0.3s; 
  animation-iteration-count: infinite; 
} 
@keyframes cursor{ 
  0%{border-right: 1px solid #fff} 
  50%{border-right: 1px solid #000}  
  100%{border-right: 1px solid #fff}   
  }    
  
  
#myMsgDialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);	
	width:60%; 
	background-color: #FFF0F5; 
	border:1px solid black; 
	border-radius: 7px;
}		

#closeDialog {
	width:25%; 
	background-color: #DC6089; 
	border:1px solid black; 
	border-radius: 7px;
}		

#mButton, #closeButton {
	padding: 7px 30px;
	background-color: #DC6089;
	color: white;
	font-size: 15px;
	border: 0;
	outline: 0;
}

#cButton {
	padding: 7px 30px;
	background-color: #FFC0CB;
	color: white;
	font-size: 15px;
	border: 0;
	outline: 0;
}

@media screen and (max-width: 1280px) {		
	#myMsgDialog {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);			
		width:100%; 
		background-color: #BEEFFF; 
		border:1px solid black; 
		border-radius: 7px;
	}		

		#closeDialog {
			width:25%; 
			background-color: #BEEFFF; 
			border:1px solid black; 
			border-radius: 7px;
		}		

		#mButton, #closeButton {
			padding: 7px 30px;
			background-color: #66ccff;
			color: white;
			font-size: 15px;
			border: 0;
			outline: 0;
		}
		
		#cButton {
			padding: 7px 30px;
			background-color: #2828CD;
			color: white;
			font-size: 15px;
			border: 0;
			outline: 0;
		}
}	  

 a {
    text-decoration: none;
    color: gray;
  }

.blink {
	animation: blink-animation 3s steps(2, start) infinite;
}

@keyframes blink-animation {
	to {
		visibility: hidden;
	}
}

.my-card-padding {
    padding: 2px;  /* 원하는 값으로 설정 */
}
 
/* 우측배너 제작 */
.sideBanner {
  position: absolute;
  width: 120px;
  height: 200px;
  top: calc(100vh - 32vh);
  left: calc(100vw - 8vw); 
  z-index: 999; /* 높은 양의 값으로 변경 */
}
 
/* 우측 결재도착 배너 제작 */
.sideEworksBanner {
  position: absolute;
  width: 100px;
  height: 100px;
  top: calc(100vh - 13vh);
  left: calc(100vw - 8vw); 
  z-index: 9999; /* 높은 양의 값으로 변경 */
  overflow: hidden; /* 가상 요소가 박스를 벗어나지 않도록 함 */
}

/* 빛나는 효과를 위한 가상 요소 */
.sideEworksBanner::before {
  content: '';
  position: absolute;
  top: -50%; 
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent 50%);
  transform: skewX(-25deg);
  animation: shine 1.5s infinite linear;
}

.sideEworksBanner:hover {
  cursor: pointer; /* 마우스 hover 시 커서 모양 변경 */
}


/* 애니메이션 정의 */
@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer; /* 마우스를 올렸을 때 손가락 모양으로 변경 */
}
.truncate:hover {
	background-color: #f5f5f5; /* 원하는 배경색으로 변경 */
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
        background-color: transparent;
    }
    50% {
        opacity: 0.5;
        background-color: red;
    }
}

#bellIcon , #alertEworks {
    animation: blink 1.5s linear infinite;
    color: white; /* 아이콘 색상을 흰색으로 설정 */
    border-radius: 15%; /* 원형 모양으로 보이게 함 */
    padding: 3px; /* 아이콘 주변에 여백 추가 */
}
#bellIcon, #alertEworks {
	font-size: 1.1em; /* 또는 원하는 크기 */
	display: none; /* 초기에는 숨겨져 있음 */	
}

.dropdown:hover .dropdown-menu, .dropdown-item {
    display: block;    
	font-size:13px;
}


/* 미래기업 형태 .navbar-custom { */
    /* background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); */
    /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); */
/* } */
/* 대한 형태
.navbar-custom {
    background: linear-gradient(270deg, rgba(10,10,5,1) 0%, rgba(0,9,10
															  ,1) 35%, rgba(0,160,180,1) 80%);
    box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2);
} */

.navbar-custom {
    background: linear-gradient(270deg, rgba(0,0,50,1) 0%, rgba(0,0,100,1) 35%, rgba(0,0,180,1) 80%);
    box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2);
}


.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link {
    color: #ffffff;
}

@media (max-width: 720px) {
    /* 모바일 화면에 대한 스타일 설정 */
    .container-fluid {
        /* 스타일 변경 */
		width : 940px;
		
    }
    .container {
        /* 스타일 변경 */
		width : 900px;
		
    }
}


/* 마우스 오버 효과를 위한 CSS */
.nav-item:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    box-shadow: 0 0 5px rgba(10, 10, 5, 0.5); /* x-offset, y-offset, blur-radius, shadow color */
}

.sitemap-dropdown {
   display: none;
   position: absolute;
   top: 100%; /* 큰 메뉴 아래로 위치시킵니다. */
   left: -25%;
   width: 150%; /* 화면 전체 너비를 사용합니다. */
   max-height: none; /* 최대 높이 제한을 해제합니다. */
   background-color: #ffffff; /* 배경색을 원하는 색상으로 수정하세요 */
   z-index: 999; /* 원하는 숫자를 사용하여 z-index 설정 */
   font-size: 16px;
   border-radius: 10px; /* 4각 라운드 테두리를 설정합니다. */
   border: 1px solid #ccc; /* 테두리 선 스타일과 색상을 지정합니다. */
}

/* 기본 체크박스 숨기기 */
.master-checkbox, .checkItem {
    display: none;
}

/* 사용자 정의 체크박스 레이블 스타일 */
.checkbox-numbered-label {
    display: inline-block;
    width: 25px;
    height: 20px;
    background-color: #f2f2f2;
    border: 2px solid #d1d1d1;
    cursor: pointer;
    text-align: center;
    line-height: 20px; /* 라벨 내의 텍스트를 중앙에 위치시킴 */
}

/* 체크박스가 선택됐을 때의 스타일 */
.master-checkbox:checked + .checkbox-numbered-label,
.checkItem:checked + .checkbox-numbered-label {
    background-color: #00008B  ;
    border-color: #4CAF50;
    color: white; /* 체크박스 내의 텍스트 색상 변경 */
}

/* 체크박스 숫자 스타일 */
.checkbox-numbered-container {
    display: inline-block;
}