@charset "utf-8";

/* reset */
* {
    box-sizing: border-box;
}

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, address, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, footer, header, nav, section, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}

ul, ol, li {
    list-style-type: none;
}

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

pre {
    font-family: inherit;
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -hp-pre-wrap;
    word-wrap: break-word;
}

img, input, select, textarea {
    vertical-align: middle;
}

*::-webkit-scrollbar {
    width: 4px;
}

*::-webkit-scrollbar-thumb {
    height: 25%;
    background: #794DD6;
    border-radius: 10px;
}

*::-webkit-scrollbar-track {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1); 
}
/* reset */

html, body {
	font-size: 14px;
	font-family:"Noto Sans", sans-serif;
	line-height: 1.2;
	color: #252228;
	background: #F0F5FA;
	width:100%;
	height:100%;
}
input, input[type='submit'] {
	font-family:"Noto Sans Kr", sans-serif;
}
.wrap{
	position:relative;
	width:100%;
	height:100%;
}
.content-wrap{
	position: relative;
	display:flex;
	width:100%;
	height:100%;
}

.content-wrap > div{
	position: relative;
	width:50%;
	height:100%;
}

.left-box-content{
	position: absolute;
	width:100%;
	padding: 20px;
	max-width: 390px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.logo{
	text-align:center;
	width:100%;
	margin-bottom: 20px;
}

.logo > img{
	width: 60%;
	height: auto;
}

.login-form-wrap{
	width:100%;
	height:100%;
	margin-bottom:28px;
}
.form-main {
    width: 100%;
    height: 100%;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 72px;
}
.input-group {	
	width:100%;
}
.form-control {
    display: block;
    width: 100%;
}
input[type='text'], input[type='password'] {
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #BECCDD;
    padding: 0 20px;
    line-height: 50px;
    height: 50px;
    margin: 4px 0;
}
input:placeholder{
	color:##BECCDD;
	font-size:14px;
}
.btn-submit{
	display:block;
	width:100%;
	padding:18px;
	color:#fff;
	font-size: 18px;
	line-height: 26px;
	background: #4D4E5A;
	border-radius: 3px;
	border:0;
	cursor:pointer;
	font-weight: 500;
	letter-spacing: 0.2em;
}
.copyright{
	font-size:13px;
	color:#A0AEC0;
}
.login-right-wrap{
	background: url(../../resource/img/main/login_main.jpg) 50% 50% no-repeat;
	background-size: 100% 100%;
}
.right-box-content{
	position:absolute;
	top: 57%;
	left: 20%;
	transform: translate(-20%, -57%);
	width: 100%;
	padding: 0px 0 0 80px;
}
.right-box-content .slogan{
	font-family:'Noto Serif Kr', serif;
	color:#fff;
}
/*
.right-box-content .slogan:after{
	content:'';
	display:block;
	width:20%;
	height:2px;
	background:#fff;
	margin-top: 13px;
}
*/
.right-box-content .slogan span{
	font-size: 18px;
	line-height:26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: hsla(0, 0%, 100%, 0.6);
}
.right-box-content .slogan p{
	font-size: 32px;
	line-height: 54px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.right-box-content .copy-logo img{
	max-width:100%;
	max-height: 60px;
}

.form-check{
	display:block;
	color:#f00;
	font-size:13px;
	text-align:left;
	line-height:24px;
	min-height:24px;
}

.input-group.val-empty{
	position:relative;
}

.input-group.val-empty .form-control{
	border:1px solid #f00;
	outline:0;
}

.input-group .alert-check{
	display:none;
	position:absolute;
	width:24px;
	height:24px;
	right:10px;
	top:45%;
	transform:translateY(-50%);
	z-index:50;
}
.input-group.val-empty .alert-check{
	display:block;
}
.alert-check img{
	max-width:100%;	
}

@media screen and (max-width:1200px){
    .right-box-content{
        padding: 0 0 0 50px;
    }
    .right-box-content .slogan p {
        font-size: 34px;
        line-height: 48px;
    }
}

@media screen and (max-width:1024px){
    .right-box-content{
        padding: 0 0 0 30px;
    }
	.right-box-content .slogan span{
		font-size:16px;
		line-height: 20px;
	}
    .right-box-content .slogan p {
        font-size: 26px;
        line-height: 40px;
    }
}

@media screen and (max-width: 768px){
	.content-wrap{
		display:block;
	}
	.content-wrap > .login-left-wrap{
		width:100%;
		background: linear-gradient(180deg, #DBDAE2 0%, rgba(255, 255, 255, 0.6875) 13.8%, rgba(255, 255, 255, 0) 100%), #F0F5FA;
	}
	.login-right-wrap{
		display:none;
	}
	.left-box-content{
	}
}

@media screen and (max-width:480px){
	.left-box-content{
	}
}