@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    list-style-type:none;
    font-family: 'Noto Sans KR', sans-serif;
    font-size:16px;
}

body{
    background:#f6f7fc;
    display:flex;
    min-height:100vh;
    justify-content:center;
    align-items:center;
}

section{
    width:500px;
    height:auto;
    border-radius:10px;
    background:#fff;
    border:1px solid #e8e9ef;
    box-shadow: 0px 5px 10px rgba(239,240,245,0.9);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    padding:40px 50px;
    margin-top:-70px;
}

section > ul li:first-child{
    max-height:64px;
    margin-bottom:50px;
}
section > ul img{
    height:100%;
    width:auto;
}
section > ul {
    text-align:center;
    width:100%;
}

section > ul .idpw{
    display:block;
    width:100%;
    border:1px solid #bdc0cd;
    color:#6e6f77;
    font-size:1.1em;
    padding:15px 25px;
}

section > ul .idpw::placeholder{
    color:#bdc0cd;
}

section > ul .idpw:hover, section > ul .idpw:focus{
    border-color:#5f80ec;
    outline:1px solid #5f80ec;
    outline-offset:-1px;
}

section > ul li:nth-child(3){
    margin-top:20px;
    margin-bottom:32px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
}

section > ul li:nth-child(3) input[type="checkbox"]{
    width:1em;
    height:1em;
    border:1px solid rgba(189,192,205,0.75);
    margin-top:2px;
}

section > ul li:nth-child(3) input[type="checkbox"]:focus{
    outline:2px solid #5f80ec;
    outline-offset:-1px;
}

section > ul li:nth-child(3) label{
    margin-left:11px;
    color:#6e6f77;
    font-size:1em;
}


.loginbtn{
    display:block;
    width:100%;
    text-align:center;
    background:#5f80ec;
    color:#FFF;
    text-decoration:none;
    font-size:1em;
    border:2px solid #5f80ec;
    transition:background .7s;
    padding:1em 0;
}

.loginbtn:hover, .loginbtn:focus{
    background:#fff;
    color:#5f80ec;
    border-width:2px;
    outline:none;
}

section > ul li:last-child{
    margin-top:40px;
}

section > ul li:last-child a{
    text-decoration:none;
    color:#6e6f77;
    font-size:0.9em;
}
section > ul li:last-child a:hover, section > ul li:last-child a:focus{
    opacity:.8;
}

section > ul li:last-child a:first-child{
    margin-right:28px;
    position:relative;
}

section > ul li:last-child a:first-child::before{
    content:'';
    position:absolute;
    right:-31px;
    top:3px;
    display:block;
    width:1px;
    height:1em;
    background:#bdc0cd;
}
section > ul li:last-child a:last-child{
    margin-left:28px;
}


@media screen and (max-width:500px){
    section{
        width:96vw;
        padding:40px 10px;
        margin-top:-140px; /* 20210107_c replace margin-top:-30px;*/
    }
}

input[type="submit"]{
	cursor:pointer;
}

/* 20210107_c add login_page footer */
footer{
	position:absolute;
	bottom:0;
	width:100%;
	background:#f4f5f9;
	border-top:1px solid #e1e1e1;
	text-align:center;
}

footer .ft_con {
	padding:1rem 3rem;
	width:auto;
	display:flex;
	justify-content:center;
}

footer .ft_con .ft_copy{
	font-family: "spoqaR";
	  font-size: 1rem;
	  letter-spacing: -0.32px;
	  color: #6b738d;
	  text-align:left;
	  word-break:keep-all;
}

/*@media only screen and (max-width:1800px){
	footer .ft_con .ft_copy{
	
	}	
}*/

@media only screen and (max-width:1100px) {
	footer .ft_con {
		padding:.5rem;
	}
	footer .ft_con .ft_copy {
		padding:0;
	}
}