@charset "UTF-8";

:root {
	--color-gray: #505050;
	--color-point: #179CCD;
	--el-color-gray: #6C757D;
	--el-hight: 30px;
	--el-margin: 4px;
	--el-radius: 4px;
	--btn-padding: 4px 10px;
	--btn-hover: #007AC3;
}


/* Reset */
* { margin: 0; padding: 0; font:inherit; color:inherit; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html { position: relative; margin: 0; min-height: 100vh; }
html, body { min-height: 100%; align-items: center; overflow: hidden; }
body { color: #31374A; width: 100%; height: 100vh; font-size: 10pt; text-align: center; }
a, a:link, a:visited, a:hover, a:active { color: inherit; outline: none; text-decoration: none; color: inherit; }
ul, li { list-style: none; }
ol, ul { padding-left: 0; margin-top:0; margin-right: 0; margin-bottom: 0; margin-left: 0; }
p { margin-bottom: 0; }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-bottom: 0; }
input, select { padding-right: 4px; padding-left: 4px; border: 1px solid #DDD; border-radius: 4px; }


.login-wrap {
	width: 600px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.login-title-wrap {
	display: flex;
	margin-bottom: 10px;
	color: #6F6F6F;
	justify-content: space-between;
	align-items: flex-end;
}

.login-title-wrap span {
	width: 100px;
	height: 87px;
	background: url(/image/img_logo.png) no-repeat center/auto;
}

.card {
	padding: 40px;
	box-shadow: inset 0 0 2px 1px hsla(0, 0%, 100%, .9), 0px 0px 20px 0 rgba(0, 0, 0, .09);
	text-align: left;
}

.card-inner { display: flex; }

.input-wrap { flex: 1; }

.input-inner {
	display: flex;
	margin-bottom: 15px;
	align-items: center;
}

.input-inner span {
	width: 100px;
	font-weight: bold;
}

.input-inner input {
	width: 100%;
	height: 45px;
}

.form-check a::before {
	content: '\00a0\00a0|\00a0\00a0';
	padding-right: 5px;
}

.form-check-input:checked {
	background-color: var(--btn-hover) !important;
	border-color: var(--btn-hover) !important;
}

.needs-validation .text-danger {
	margin-top: 1em;
	font-size: small;
	text-align: center;
}

.btn-login {
	width: 90px;
	height: 105px;
	margin-left: 10px;
	color: #FFF;
	font-weight: bold;
	background-image: linear-gradient(to top, #032D5F, #004376, #0079D1);
	border: none;
	border-radius: 6px;
}

.btn-login:hover {
	color: #FFF;
	background-image: linear-gradient(to top, #043F86, #005DA2, #0594FF);
}


/* 비밀번호 변경 팝업 */
#frm-pass ul li {
	margin: 4px 0;
	display: flex;
	align-items: center;
}

#frm-pass ul li div {
	flex: 1;
	height: var(--el-hight);
	text-align: left;
}

#frm-pass ul li input {
	flex: 3;
	height: var(--el-hight);
}

#passPop input:focus-visible { outline: none; }

#passPop .modal-footer button {
	padding: var(--btn-padding);
	border: 1px solid var(--el-color-gray);
	border-radius: var(--el-radius);
}

#passPop .modal-footer .pop-close {
	color: var(--color-gray);
	background-color: transparent;
}

#passPop .modal-footer .pop-save {
	margin-right: var(--el-margin);
	color: #FFF;
	background-color: var(--el-color-gray);
}

#passPop .modal-footer .pop-close:hover {
	color: var(--btn-hover);
	border-color: var(--btn-hover);
}

#passPop .modal-footer .pop-save:hover {
	background-color: var(--color-gray);
}

.modal-header { padding: 10px !important; }
.modal-content { border: none !important; }
.modal-footer { padding: 0 6px !important; }


/* Loading */
.content-center {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#spinner-border {
	display: flex;
	padding: 10px;
	width: 100px;
	height: 100px;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 10px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.spinner-border {
	border: 0.4em dotted var(--color-point);
	animation: 2s linear infinite spinner-border;
}

.spinner-text {
	margin-top: 4px;
	margin-bottom: 0;
	color: #FFF;
}