@CHARSET "UTF-8";

html,body{
	height:100%;
}
/* 로그인 */

.login_wrap {
	width: 100%; height: calc(100vh - 315px); text-align: center; position: relative;
}
.login_wrap .login_box {
	width: 330px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.login_wrap .login_box  h4 {
    font-size: 23px; font-weight: 500; line-height: 30px; color: #222; margin-bottom: 10px;
}

.login_wrap .login_box ul {
	width: 100%; height: 95px;
}
.login_wrap .login_box ul li {
	float: left; width: 95px; height: 100%;
}
.login_wrap .login_box ul li:first-child {
	width: calc(100% - 105px); margin-right: 10px;
}
.login_wrap .login_box ul li input {
	background: #f5f8fb; border-radius: 5px; width: 100%; text-indent: 15px; border: 0; padding: 0; font-size: 15px; color: #888; height: 45px;
}
.login_wrap .login_box ul li input:first-child {
	margin-bottom: 5px;
}
.login_wrap .login_box ul li a {
	width: 100%; height: 100%; border-radius: 5px; background: #000 url('/resources/images/gist/new/m_login.png') center 20px no-repeat;
	text-align: center; padding-top: 52px; color: #fff; font-size: 16px; display: inline-block;	
}
.login_wrap .login_box > div {
	height: 20px; margin-top: 20px;
}
.login_wrap .login_box > div a  {
	display: inline-block; color: #555; font-size: 14px;
}
.login_wrap .login_box > div a:hover {
	color: #000; font-weight: 500;
}
.login_wrap .login_box > div a.b_join {
	padding-right: 16px; position: relative; 
}
.login_wrap .login_box > div a.b_join::after {
	content: ""; position: absolute; display: inline-block; width: 1px; height: 12px; background: #9d9d9d; top: 3px; right: 6px; 
}


@media only screen and (max-width: 768px){	
	.login_wrap {height: calc(100vh - 420px);}
}
@media only screen and (max-width: 400px){	
	.login_wrap {height: auto;}
	.login_wrap .login_box {width: 100%; position: relative; left: auto; top: auto; transform: none; margin: 50px 0; padding: 0 20px;}
}