html, body
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-size: 10pt;
	line-height: 15px;
	font-family: 'Consolas', 'Malgun Gothic'
}

input, select, textarea
{
	font-family: 'Consolas', 'Malgun Gothic'
}

.divLoginBox
{
	width: 1000px;
	height: 500px;
	border-radius: 10px;
	/* background-color: rgba(167, 72, 0, 0.5); */
	background-color: rgba(0, 0, 0, 0.5);
}

.divLoginLogo
{
	position: absolute;
	top: 30px;
	left: 50px;
}

.divCopyright
{
	clear: both;
	text-align: center;
	padding-top: 10px;
	font-family: 'Verdana';
	color: #fff;
}

.loginInput
{
	width: 238px;
	height: 36px;
	margin-bottom : 5px;
	padding-left : 10px;
	border : 1px solid #000;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius : 5px;
	-o-border-radius : 5px;
	font-family: 'Source Sans Pro', sans-serif;
	/* font-family: 'Merriweather', serif; */
	font-size : 15px;
	color : #000;
}

.loginBtn
{
	width: 252px;
	height: 40px;
	margin-bottom : 5px;
	padding-left : 10px;
	border : 1px solid #000;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius : 5px;
	-o-border-radius : 5px;
	font-family: 'Source Sans Pro', sans-serif;
	font-size : 12px;
	background-color: #000;
	color : #fff;
}

/* 깜빡이는 커서 효과를 위한 keyframes 정의 */
@keyframes blink
{
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* 커서 스타일 */
.cursor
{
	display: inline-block;
	width: 7px;									/* 커서의 너비 */
	height: 2px;								/* 커서의 높이 */
	background-color: #fff;						/* 커서 색상 */
	vertical-align: bottom;						/* 텍스트와 정렬 */
	animation: blink 1s step-start infinite;	/* 깜빡임 효과 */
}

#divMask
{
	position: fixed;						/* 레이어를 고정시키기 위해 fixed 사용 */
	top: 0;
	left: 0;
	width: 100%;							/* 전체 화면을 덮기 위해 100% 설정 */
	height: 100%;							/* 전체 화면을 덮기 위해 100% 설정 */
	background-color: rgba(0, 0, 0, 0.6);	/* 반투명 효과를 위해 rgba 사용 */
	z-index: 1000;							/* 모달보다 높은 수준으로 설정하여 화면 위에 표시 */
	display: none;							/* flex를 사용하여 중앙 정렬을 쉽게 구현 */
	justify-content: center;				/* 가로 중앙 정렬 */
	align-items: center;					/* 세로 중앙 정렬 */
	flex-direction: column;					/* 요소들을 세로로 정렬 */
}

#divAlertPop
{
	display: none;
	padding: 20px 40px 20px 40px;
	border-radius: 10px;
	background-color: #fff;
	z-index: 1001;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.btnAlertClose
{
	display: inline-block;
	border-radius: 5px;
	padding: 7px 20px 7px 20px;
	text-align: center;
	border: 1px solid #ccc;
	font-family: "Nanum Gothic";
	font-weight: bold;
	color: #777;
	background-color: #fff;
}

.btnAlertClose:hover
{
	cursor: pointer;
	color: #fff;
	background-color: #ccc;
}

.toast-container-center
{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1100;
}

#loading-screen
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(244, 114, 32, 1);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s ease;
}

#loading-screen.visible
{
	opacity: 1;
	pointer-events: all;
}

.hidden
{
	display: none;
}