@charset "UTF-8";

#login_wrap {  padding:0; margin:10% auto; width:100%;}
#login_wrap h3 { font-size:35px;  font-weight:normal; text-align:center; padding:20px; color:#394053; background:none; width:100%; margin:0 auto;}
#login_wrap p { font-size:17px; color:#4da29e; font-weight:normal; text-align:center; 
padding:30px 0px; margin:0px auto; border-bottom:1px solid #cccccc; width:100%; max-width:570px; line-height:25px; }
.login { padding:0; margin:20px auto 0px auto; width:100%; max-width:560px; display:table;}
.login li{  padding:10px; margin:0; text-align:center; display:table-cell; }
.login li span{ padding:0px; margin:10px auto 10px auto; width:70px; height:70px; display:block; border-radius:40px;}
.login li.google span{ border:1px solid #d7d7d7; background:url(../images/login/google.jpg) no-repeat center 50%;  }
.login li.naver span{  background:url(../images/login/naver.jpg) #40c429 no-repeat center 50%;  }
.login li.kakao span{ background:url(../images/login/kakao.jpg) #ffeb04 no-repeat center 50%; }
.login li.facebook span{ background:url(../images/login/facebook.jpg) #405a94 no-repeat center 50%; }
.login:after { clear:both; display:block; content:""; }

.employ_login { margin:0 auto; padding:20px; width:100%; text-align:center;}
.employ_login div{  padding:5px 0;}
.employ_login form{  padding:0 20px;  margin:0px auto; width:100%; max-width:350px;   }
.employ_login form input{  padding:5px; border:1px solid #394053; height:40px; border-radius:10px; width:100%;}
button.block{width:100%; }
button.btn_rect_default,
button.btn_rect_default:hover,
button.btn_rect_default:focus,
button.btn_rect_default.focus,
button.btn_rect_default:active,
button.btn_rect_default.active,
button.btn_rect_default:active:focus,
button.btn_rect_default.active:focus 
button.btn_rect_default:visited{color:#FFF; background:#394053; padding:10px; font-size:18px;  border-radius: 25px; }
button.btn_rect_gray,
button.btn_rect_gray:hover,
button.btn_rect_gray:focus,
button.btn_rect_gray.focus,
button.btn_rect_gray:active,
button.btn_rect_gray.active,
button.btn_rect_gray:active:focus,
button.btn_rect_gray.active:focus 
button.btn_rect_gray:visited{color:#FFF; background:#8f92a1; padding:10px; font-size:18px;  border-radius: 25px;}
a.btn_login {color:#FFF; background:#0c285d;  border-radius: 2px; }
.exsample{ padding:5px 0; color:#d8613b; font-size:14px; letter-spacing:0px; display:inline-block;}

.btn_list { padding:0; margin:0; display:table; width:100%;}
.btn_list li{ display:table-cell; text-align:center; padding:5px; }

/* 모바일 ~ 타블렛 */
@media (max-width:430px)/*아이폰 고사양에 따라 421에서 430으로 수정*/ {
	#login_wrap h3 { font-size:25px;padding:0px}
	#login_wrap p { max-width:320px;}
	.login li a{padding:10px; margin:0; font-size:13px;}
	.login li span{ padding:0px; margin:10px auto 10px auto; width:40px; height:40px; display:block; border-radius:40px;}
	.login li.google span{ border:1px solid #d7d7d7; background:url(../images/login/google.jpg) no-repeat center 50%;  background-size:50%; }
	.login li.naver span{ background-size:40%; }
	.login li.kakao span{background-size:50%;}
	.login li.facebook span{background-size:25%;}
	.login { max-width:320px; }
	.login li{ padding:0;}
}