@font-face {
    src:url("../font/NotoSansCJKkr-Regular.otf");
    font-family:"notosanscjk-regular"
}

body {
    display:flex;
    flex-direction:column;
	background-color:var(--bg-login-main) !important;
	font-family:notosanscjk-regular, Arial, sans-serif !important;
}

	
.login-degail-group{
	width:100%;
	padding-left:40px;
	padding-right:40px;
}

.login-logo{
	text-align:right;
	margin-top:30px !important;
	color:var(--login-txt-color);		
}

.login-str{
	font-size:45px;
	font-weight:700;
	color:var(--login-txt-color);
	font-family:notosanscjk-regular, Arial, sans-serif;	
	margin-top:25px !important;
	margin-bottom:45px !important;
}

.login-content ul {
	padding:0;
}

.login_btn{
	width:100%;
	padding: 12px 0;
	background-color:var(--bg-modal);
	color:var(--btn-txt-color);
	font-size:22px;
	font-weight:500;
	border:0;
    border-radius: .25rem;
}

.login_1_btn{
    background-color: var(--btn-color1);
    color: var(--btn-txt-color);
    border-radius: .25rem;
    width: 120px;
    height: 37px;
    padding: 6px 0;
    border: 0;
    font-size: 14px;
}

.mr-5{
	margin-right:5px;
}
.mr-10{
	margin-right:10px;
}
.mr-15{
	margin-right:15px;
}

.login-ck{
	margin-top:10px;
	font-weight:400;
	color:var(--login-txt-color);
}

.login-etc{
	text-align:center;
	/*margin-top:35px;*/
	margin-bottom:2.5rem;	
	font-size:0;
}

.login-bottom{
	width:100%;
	font-size:13px;
	text-align:center;
	font-weight:400;
	font-family:nanum-light, Arial, sans-serif;	
	color:var(--login-txt-color);
}

.login-bottom .font-bold{
	font-weight:700;
}

.login-content{
	flex-direction: column;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	row-gap: 3rem;
}

.login-content ul li{
	margin-top:0.8rem;
	margin-bottom:0.8rem;
	list-style: none;
}

@media (min-width:765px) {
	.login-area{
		display:block;
		position:absolute;
		width: 850px;
		height: 570px;
		border-radius:20px;
		border: 1px solid var(--bg-border);
		box-shadow: 6px 6px var(--box-shadow);
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.login-title{
		display:block;
		position:absolute;
		left:0;
		top:0;
		width:425px;
		height:570px;		
	}
	.login-title .login-title-image{
		display:block;
		width:100%;
		height:100%;
		background-image:url(../img/logintitle-pc.png);		
		border-top-left-radius:20px;
		border-top-right-radius:0;
		border-bottom-left-radius:20px;
		border-bottom-right-radius:0;	
		border-right: 1px solid var(--bg-border);
	}
	
	.login-detail{
		display:block;
		position:absolute;
		left:425px;
		top:0;
		width:425px;
		height:570px;
		border-top-left-radius:0;
		border-top-right-radius:20px;
		border-bottom-left-radius:0;
		border-bottom-right-radius:20px;
		background-color:var(--color-bg-base);
	}
	
}
@media (max-width:764px) {
	.login-area{
		background-color: var(--color-bg-base);
		padding-bottom: 20px;
		border: 1px solid var(--bg-border);
		border-radius: 20px;
		box-shadow: 4px 4px var(--box-shadow);
		width: calc(100% - 2rem);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	

	.login-title{
		display:block;
		position: relative;
		left:0;
		top:0;
		width:100%;
		height:125px;		
	}

	.login-title .login-title-image {
		display: block;
		width: 100%;
		height: 100%;
		background-image: url(../img/logintitle-mobile.png);
		background-size: cover;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.login-bottom {
		font-size: 11px;
	}	
}