@import url('/css/fonts/pretendard/pretendard.css');

:root {
	--color-base : #00945e; 
	--color-point : #71b64e;
	--color-black : #151515; 

	--input-bg-color : #fff;
	--input-border-color : #dedede;

	/************************/

	--inner-width: 1440px; 
	--bg-color : #edf8f3;
}

.fs-18px { font-size: 18px; }
.fs-20px { font-size: 20px; }
.fs-22px { font-size: 22px; }
.fs-50px { font-size: 50px; }

.fb-300 { font-weight: 300; }
.fb-600 { font-weight: 600; }
.fb-700 { font-weight: 700; }
.fb-800 { font-weight: 800; }

.color-fff { color : #fff }
.color-434343 { color: #434343; }
.color-434343-opacity-40 { color: rgba(67, 67, 67, 0.4); }

.bg-fff { background-color : #fff  !important }

.border-dedede { border : 1px solid #dedede !important }

.radius-20px { border-radius : 20px; }

.txt-c { text-align: center; }
.txt-r { text-align: right; } 
.txt-l { text-align: left; }

.mt-10px { margin-top: 10px; }
.mt-20px { margin-top: 20px; }
.mt-30px { margin-top: 30px; }
.mt-40px { margin-top: 40px; }
.mt-50px { margin-top: 50px; }

.gap-80px { gap: 80px; }

.row {
	display: -ms-flexbox;
	display: flex;
}

.align-items-center {
	-ms-flex-align: center !important;
	align-items: center !important;
}

.justify-content-center {
	-ms-flex-pack: center !important;
	justify-content: center !important;
}

html,
body {
	font-family: 'Pretendard';
}

#loginArea {
	width: 100%;
	background: var(--bg-color);
}
 
#loginArea .logo img {
	width: 203px
}

.login-header {
	position: relative;
	height: 565px;
	background: url("../img/login/bg_login.jpg") no-repeat center / cover;
	padding-bottom: 145px;
	box-sizing: border-box;        
}

.login-header .logo {
	position: absolute;
	top: 50px;
	left: 50px;
	text-align: left;
}

.login-header .inner,
.login-header .txt-box {
	width: 100%;
	height: 100%;
}

.inner {
	width: 100%;
	max-width: var(--inner-width);
	padding: 0 20px;
	margin: 0 auto;
}   

.login-contents {
	position: relative;
	z-index: 5;
	padding-bottom: 70px;
}

.login-contents .form-area {
	padding: 0 100px;
	margin-top: -145px;
}

.login-contents .form-area .form-wrap {
	padding: 50px;
	height: 590px;
	box-shadow : 10px 10px 43px 6px rgba(66, 66, 66, 0.04);
}

.login-contents .form-area .form-wrap .form-box {
	width: 100%;
	max-width: 510px;
	margin: 0 auto;
}

.login-box {
	width: 100%;
	max-width: 490px;
	margin: 30px auto 0;
}

.login-box input:-webkit-autofill,
.login-box input:-webkit-autofill:hover,
.login-box input:-webkit-autofill:focus,
.login-box input:-webkit-autofill:active,
.login-box input:-webkit-autofill:selected{
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    -webkit-text-fill-color: #fff !important;
}


.login-box input {
	background-color: var(--input-bg-color);
	border: 1px solid var(--input-border-color);
	border-radius: 29.5px;
	padding: 18px 15px 18px 60px;
	background-repeat: no-repeat;
	background-position: left 30px center;
	background-size: 14px;
	margin-bottom: 20px;
}


.login-box input#userId {
	background-image: url('../img/login/ico_login_user.svg') !important;
}

.login-box input#userPw {
	background-image: url('../img/login/ico_login_pw.svg') !important;
	
}

.login-box input::placeholder {
	font-size : 18px;
	color: #999999;
}

.login-box .login-btn {
	background: var(--color-base);
	border-radius: 32.5px;
}

.login-bttom {
	padding: 50px 0;
	background: #fff;
}

.login-bttom .logo {
	margin-top : -9px;
}

.util-btns a:hover {
	font-weight: 700;
	color: var(--color-base);
}

.line-list li {
	display: inline-block;
	position: relative;
	padding: 0 9px;
}

.line-list li:first-child { padding-left: 0;}
.line-list li:last-child { padding-right: 0;}

.line-list li + li::before {
	content: '';
	display: block;
	height: 16px;
	border-left: 2px solid rgba(0, 0, 0, .12);
	position: absolute;
	left: -2px;
	top: 50%;
	margin-top: -8px;
}

@media (max-width: 991px) {
	.login-header {
		height: 400px;
		padding-bottom: 80px;
	}

	.login-contents .form-area {
		padding: 0 50px;
		margin-top: -120px;
	}
		
	.login-contents .form-area .form-wrap {
		padding: 100px 50px;
		height: auto;
	}

	.login-bttom .row {
	  -ms-flex-direction: column  !important;
		flex-direction: column !important;
		gap: 30px;
	}
}


@media (max-width: 767px) {
	.fs-18px { font-size: 14px; }
	.fs-20px { font-size: 16px; }
	.fs-22px { font-size: 18px; }
	.fs-50px { font-size: 30px; }

	.mt-10px { margin-top: 5px; }
	.mt-20px { margin-top: 15px; }
	.mt-30px { margin-top: 20px; }
	.mt-40px { margin-top: 30px; }
	.mt-50px { margin-top: 40px; }

	.md-block {
		display: block;
	}

	.br-md-none br {
		display: none;
	}

	#loginArea .logo img {
		width: 60%;
		max-width: 203px;
	}

	.login-header {
		height: 400px;		
	}

	.login-header .logo {
		top: 30px;
		left: 30px;
	}

	.login-contents {
		padding-bottom: 70px;
	}

	.login-contents .form-area {
		padding: 0;
		margin-top: -120px;
	}
		
	.login-contents .form-area .form-wrap {
		padding: 50px 30px;
	}

	.login-box input {
		border-radius: 20px;
		padding: 13px 15px 13px 50px;		
		background-position: left 25px center;
		background-size: 12px;
		margin-bottom: 10px;
	}

	.login-box input::placeholder {
		font-size : 14px;
	}

	.login-box .login-btn {
		border-radius: 20px;
		padding: 13px 0;
	}

	.login-bttom {
		padding: 50px 0;
	}

	.login-bttom .row {
		gap: 20px;
	}

	.login-bttom .line-list li {
		display:block;
		padding: 0;
	}

	.login-bttom .line-list li:before {
		content: none;
	}
}