@charset "UTF-8";

#join, #login{ background: #fff; }

#login .login_find, #login .login_sns{ padding: 0 20%; }
#login .login_form{ padding: 0 20% 2em 20%; }
/*전화번호 입력*/
.tel{ position: relative; }
.tel:before{ content: "-"; position: absolute; top: 0; left: -3px; line-height: 40px; }
.tel:after{ content: "-"; position: absolute;  top: 0; right: -3px; line-height: 40px; }

#login .login_find > div{ padding: 0 0 1em 0; }
#login .login_find p{ position: relative; margin: 0; padding: 0 0 0 15px; line-height: 1.5em; }
#login .login_find p i{ position: absolute; left: 0;  }
#login .login_find ul{ padding-bottom: 2em; overflow: hidden; }
#login .login_find ul li{ float: left; width: 25%; border-top: 1px solid #eee;}
#login .login_find ul li a{ display: block; padding: 1em 0; text-align: center; border-bottom: 1px solid #eee; border-right: 1px solid #eee; background: #f7f7f7; }
#login .login_find ul li:nth-child(1){ border-left: 1px solid #eee; width: 20%; }
#login .login_find ul li:nth-child(2){ width: 20%; }
#login .login_find ul li:nth-child(4){ width: 35%; }

.login_sns ul{ margin: 0 -5px; padding-bottom:2em; overflow: hidden; }
.login_sns ul li{ float: left; width: 50%; padding: 0 5px; }
.login_sns p{ padding: 0 0 10px 0; }
.login_sns a{ display: block; padding: 1em 0; text-align: center; border-radius: 5px; }
.login_sns a i{ display: inline-block; width: 22%; border-right: 1px solid #fff; float: left; font-size: 2em; }

@media (max-width:991px) {
	#login .login_form, #login .login_find, #login .login_sns{ padding: 0 5%; }
	#login .login_find ul li{ float: left; width: 50%; }
	#login .login_find ul li:nth-child(1){ width: 50%; }
	#login .login_find ul li:nth-child(2){ width: 50%; }
	#login .login_find ul li:nth-child(4){ width: 50%; }

	.login_sns a i{ left:35px; }
}

@media (max-width:500px) {
	.login_sns ul li{ width: 100%; padding: 5px; }
}

#join .join{ padding: 0 20%; }
#join .privacy{ padding: 2em 0 0 0; }
#join .con{ height: 250px; margin: 0 0 10px 0; padding: 1em; border:1px solid #ccc; overflow-y: scroll; }
#join .join h3{ padding: 0.7em 0; letter-spacing: -1px; border-top: 2px solid #0081ca; }
#join .join h3 b{ font-size: 0.8em; font-weight: 300; color: #e72d18; }

/*정보입력*/
#join .check{ color: #fff; border-radius: 5px; background: #0d569b; }

.join .gender label{ position: relative; width:100%; height: 40px; text-align: center; line-height: 36px; border:1px solid #cdcdcd; }
.join .gender input[type="radio"]:checked + span{ display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; color: #fff;background: #0d569b;}
.input-group-addon { min-width:50px; line-height: 0; font-size: 1.1em; }
.input-group-addon span{ padding:0 0 0 10px; font-size: 0.9em; font-weight: 300; }

@media (max-width:991px) {
	#join .join{ padding: 0 5%; }
}

/*정보없음*/
.no_info{ margin: 20px 0 0 0; padding: 3em 0; text-align: center; border-radius: 10px; box-shadow: 1px 1px 1px #ccc; }
.no_info i{ display: block; padding: 0 0 0.5em 0; font-size: 2.5em; }