@charset "utf-8";

/* 공통 */
.check_box input[type="checkbox"]{display:none;}
.check_box input[type="checkbox"] + label{position:relative;font-size:13px;margin-left:30px;}
.check_box input[type="checkbox"] + label:before{content:"";display:block;position:absolute;background:#ddd url(./img/check.svg) no-repeat center;background-size:100%;width:20px;height:20px;border:solid 1px #ddd;border-radius:50%;top:2px;left:-30px;}
.check_box input[type="checkbox"]:checked + label:before{border-color:#222;background-color:#222;}

/* 로그인 */
.mem03_skin {width:960px; max-width: 100%; margin:0 auto; padding-bottom:80px; font-weight: 500;}
.mem03_skin .title {padding:25px 0 45px;font-size:35px;text-align:center;font-weight:700;border-bottom:solid 1px #222;}

.login_wrap {width:540px;margin:0 auto;padding-top:60px;}
.login_wrap .intro_txt {margin: 0 10px 20px; font-size:30px; line-height:1.6;}

#login_fs .login_box .input_wrap {width:460px;}
#login_fs .login_box .btn_wrap {width:100px;margin-left:10px;}
#login_fs .login_box .btn_wrap .btn_submit {width:100%; height:70px; background: #0066cc; border: 1px solid #0066cc; border-radius: 3px; color:#fff; text-shadow: 0.5px 0.5px 1px #000; font-size:13px; font-weight: 600; transition: 0.3s all; box-shadow: 1px 1px 3px #aaa;}
#login_fs .login_box .btn_wrap .btn_submit:hover {background: #003399; border: 1px solid #003399;}
#login_fs .info_wrap {display:flex;align-items:center;justify-content:space-between;margin:30px auto; width: 460px; max-width: 100%;}
#login_fs .info_wrap #lost_password a {border-bottom:solid 1px transparent; font-weight: 600;}
#login_fs .info_wrap #lost_password a:hover {border-bottom:solid 1px #006699; color:#006699;}

#login_fs .login_box {display:flex; justify-content: center; margin-top: 20px;}
#login_fs .frm_input {width:100%; height:30px; border:solid 1px #ddd; box-shadow: 1px 1px 2px #999; font-size:13px; border-radius: 2px;}
#login_fs .frm_input:focus {border:solid 1px #ddd;}
#login_fs .frm_input::placeholder {color:#333;}
/* #login_fs #login_pw {margin-top:10px;} */

#lost_password {display:flex; align-items:center; justify-content:space-between;}
#lost_password a {font-size:13px;color:#999; position:relative;}
#lost_password #join:hover {color:#ff5000;}

.sns_login {margin:50px auto; border-top: solid 1px #ddd;}
.sns_login .sns_list {margin-top:30px; display:flex; align-items: center; justify-content:center;}
.sns_login .sns_list li {width:50%; box-shadow: 1px 1px 3px #ccc;}
.sns_login .sns_list li + li {margin-left:10px;}
.sns_login .sns_list li a {display:flex; align-items:center; justify-content:center; width:100%; height:45px; font-weight: 600; border-radius: 3px;}
.sns_login .sns_list li a.naver_login {background: #00c300; transition: 0.3s all; color: #fff; text-shadow: 0 0 3px #000;}
.sns_login .sns_list li a.naver_login:hover {background: #009600;}
.sns_login .sns_list li a.kakao_login {background: #fedc00; transition: 0.3s all; /* color: #381e1e; */ color: #fff; text-shadow: 0 0 3px #000;}
.sns_login .sns_list li a.kakao_login:hover {background: #f5be00;}
.sns_login .sns_list li a img {width:24px;}
.sns_login .sns_list li a span {font-size:13px; margin-left:7px;}

.sns_login .sns_list li a.naver_login img {filter: hue-rotate(240deg) brightness(300%);}
@media (max-width: 575px) {
	.login_wrap {width: 320px;}
	.login_wrap .intro_txt {font-size: 24px; margin-left: 10px;}
	#login_fs legend {font-size: 16px;}
	#login_fs .login_box .input_wrap {width:240px;}
	#login_fs .info_wrap {width: 360px;}
}