#container_login {
	position: relative;
    padding-left: 90px;
    padding-bottom: 120px;
}

#container_login .contents {
	position: relative;
    max-width: 980px;
    margin: 0 auto;
}

#container_login .contents .pageTitArea {
	padding-top: 55px;
    padding-bottom: 57px;
    text-align: center;
    font-family: 'NotoB';
}

#container_login .contents .pageTitArea img {
	 vertical-align: middle;
}

#container_login .contents .pageTitArea .title {
	margin-bottom:0;
	margin-top: 20px;
    line-height: 48px;
    font-size: 48px;
    font-weight: 500;
    color: #222222;
	font-family: 'HB';
    letter-spacing: -0.5px;
}


/* -------------------- loginFormArea -------------------- */
#container_login .contents .loginFormArea {
	width:420px; 
	margin: 0 auto; 
	padding-top: 50px; 
	border-top:1px solid #222; 
}

#container_login .contents .loginFormArea .loginBox {
	padding: 40px 50px 0;
}

#container_login .contents .loginFormArea .loginBox form {
	display: block;
}

#container_login .contents .loginFormArea .loginBox form .inp_text {
    margin-top: 8px;
}

#container_login .contents .loginFormArea .loginBox form .inp_text:first-child {	/* 아이디 입력창 */
	margin-top: 0px;
}

#container_login .contents .loginFormArea .loginBox form .inp_text .textBox {
    width: 100%;
    height: 40px;
    padding: 0 8px;
    line-height: 40px;
    color: #555;
    text-indent: 4px;
    border: 1px solid #dcdcdc;
    outline: none;	
    /* outline은 border외에 존재하는 라인이다.
     * none으로 설정하면 input 상자를 클릭했을 때 테두리가 굵게 변하는 설정을 없애준다. */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    
    font-weight: 600;
	font-size: 14.5px;
	color: #5A5555;
	letter-spacing: 0px;	/* 영어글자 간격이 너무 좁아져서 */
	cursor: text;	/* 커서모양 i */
}

#container_login .contents .loginFormArea .loginBox form .inp_text .textBox:focus {
	border: 1px solid #222;
}

#container_login .contents .loginFormArea .loginBox form .inp_text #user_pw {
	letter-spacing: 2px;	/* 패스워드 글자 간격 */
}

#container_login .contents .loginFormArea .loginBox form .inp_text .textBox::placeholder {
	color: #999999;
  	font-size: 13.5px;
  	font-weight: 800;
  	letter-spacing: -0.5px;
}

p.error {	/* 에러글자 */
	text-indent: 10px;
	/* text-indent : 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 된다.
	 * 기본값은 0 
	 */
    font-size: 11.5px;
    font-weight: 600;
    color: #fa5855;
    line-height: 30px;
    letter-spacing: -0.5px;
}

p.er_c {
	text-align: center;
}


/* --------------- 버튼 ------------------- */
#container_login .contents .loginFormArea .loginBox .btn_wrap {
	margin-top: 25px;
	vertical-align: middle;
}

#container_login .contents .loginFormArea .loginBox .btn_wrap .btn_all {
	position: relative;
	width: 318px;
	height: 48px;
	font-size: 16px;
	text-align: center;
	font-weight: 800;
	line-height: 46px;
	
	/* 애니메이션 */
	cursor: pointer;	/* 커서를 올리면 커서가 포인터 모양으로 변한다. */
	transition: all 0.3s;	/* 모두 0.3초만에 바뀐다. */
}

#container_login .contents .loginFormArea .loginBox .btn_wrap .btnA {
	margin-bottom: 8px;
	background-color: #A6CD48;	/* 초록색 */
	color: white;	/* 텍스트 색깔 */
	border: 1px solid #A6CD48;
}

#container_login .contents .loginFormArea .loginBox .btn_wrap .btnA:hover {
	color: black;
	box-shadow: 320px 0 0 0 rgba(255, 255, 255, 1) inset;
}

#container_login .contents .loginFormArea .loginBox .btn_wrap .btnB {
	background-color: #FFFFFF;	/* 흰색 */
	color: #555555;	/* 텍스트 색깔 */
	border: 1px solid #999999;
}

#container_login .contents .loginFormArea .loginBox .btn_wrap .btnB:hover {
	color: white;
	box-shadow: 320px 0 0 0 rgba(153, 153, 153, 1) inset;	/* 회색 그림자 */
}
