@charset "utf-8";

/* commo */
body {background-color:#f5f6f7}

/* Layout */
#wrap {position:relative}
#container {margin:0 auto; position:relative}
#container:after{display:block;clear:both;content:''}

/* content */
.join_content {width:500px; margin:0 auto}
.hp_logo {text-align:center; margin:35px auto 50px auto}

.hp_log_box {width:500px; border: 1px solid #eaeaeb; background-color:#feffff; margin-bottom:30px}
.hp_log_box form {overflow:hidden}
.hp_log_box h2 {margin: 45px 0 15px 0; font-size: 22px; color: #444; letter-spacing: -1px; font-weight: bold; text-align: center}
.log_cont {width:410px; margin:0 auto; padding-bottom:60px}
.log_in_w {border:1px solid #cdced0}
.log_banner {margin-bottom:60px!important}

.bg_join {border-top:1px solid #e5e5e5; background-color:#fff; width:408px; }
.input_info {display:block;position:relative;height:54px; font-weight:bold;font-size:16px}
.input_info .tf_g {display:inline;float:left;width:382px;height:31px;padding:0;margin:11px 12px 0 13px;font-weight:bold;font-size:16px;color:#222; border:none}
.input_info .tf_g::-ms-clear {display: none}
.input_info .tf_pw {width:374px}
.input_info .lab_g {position:absolute;top:16px;left:14px;height:24px;color:#999; font-family:"맑은 고딕","Malgun Gothic","Apple SD Gothic Neo","Gulim";}
.input_on {border:1px solid #6286de}

.find_info {clear:both; display:block; overflow:hidden; margin-top:32px; font-size:14px; border:1px solid #e5e6e7}
.find_info a {width:33%; height:35px; color:#777; display: inline-block; text-align: center; letter-spacing:-1px; text-decoration: none; line-height:35px; word-break:-1px; border-right: 1px solid #e5e6e7}
.find_info a.info_m3 {border-right:none}

/* 버튼 */
.btn_login{display:block; height:60px; width:410px; margin-top:15px; background:#6286de}
.btn_login input, .btn_login2 input {width:100%; border:1px solid #5372bd; *border:none; height:60px; background:#6286de; *text-indent:0; -webkit-appearance:none; font-size:20px; color:#fff}
.btn_login2 {display:block; height:60px; width:410px; background:#6286de; margin:0 auto 50px auto}

/* checkbox */
.login_check {margin:13px 0 0 3px}
.login_check_box {display:block; float:left; width:160px; height:25px; position:relative; letter-spacing:-1px}
.login_check_box input:checked + label {background-position:0 -28px;  background-color:#fff}
.login_check_box input {cursor:pointer; position:absolute; top:1px; left:1px; height:23px; width:23px}
.login_check_box label.on {background-position:0 -28px;  background-color:#fff}
.login_check_box label {cursor:pointer; position:absolute; top:0; left:0; color:#333; font-size:14px; height:26px; line-height:24px; padding-left:32px; background:url("/images/v4/login/check.png?v=2") no-repeat scroll 0 0}

/* naver_login */
.nv_log_box {width:263px; float:left; margin-left:30px; font-family:dotum; line-height:18px; color:#333}
.nv_info {padding-left:4px; padding-bottom:13px; color:#6e6e6e}
.nv_info span {display:block; margin-bottom:12px}
.nv_info a {color:#496abc; text-decoration:underline}

/* sns_login */
.sns_mem_join {overflow:hidden}
.sns_mem_join .sns_join_tit {position: relative; display: block; height:16px; font-size:0; text-align:center; margin:37px auto 17px auto}
.sns_mem_join .sns_join_tit strong {display: inline-block; position: relative; z-index: 1; padding:0 12px; line-height:17px; font-size:14px; color: #333; font-weight:normal; background: #fff; word-spacing:-1px; letter-spacing:-0.5px}
.sns_mem_join .sns_join_tit:before {display:block; content: ""; position:absolute; top:50%;  left:0; width:100%; height:1px; background:#e5e6e7}
.sns_mem_join ul {margin: 0 auto; width:330px; overflow:hidden}
.sns_mem_join li {float: left}
.sns_mem_join li a {display: block; height:48px; width:48px; font-size:0; margin:0 9px; background: url(/images/v4/member/mem_sns_ico.png) no-repeat 0 0; background-size:280px auto}
.sns_mem_join li a.naver {background-position:0 0}
.sns_mem_join li a.kakao {background-position:-58px 0}
.sns_mem_join li a.facebook {background-position:-116px 0}
.sns_mem_join li a.apple {background-position:-174px 0}
.sns_mem_join li a.payco {background-position:-232px 0}

/*fun비회원*/
.no_mem {margin-top:15px; padding-left:4px; padding-top:15px; border-top:1px solid #e2e2e2; letter-spacing:-1px}
.no_mem .btn_no_mem {display:block; height:23px; width:180px; margin-top:8px; line-height:20px; color:#fff; text-decoration:none; text-align:center; background:#6286de;  border:1px solid #5372bd; font-family:AppleSDGothicNeo-Regular,"Malgun Gothic","맑은 고딕",dotum,"돋움",sans-serif; border-radius:2px; letter-spacing:0}

/* 20220214 로그인 버튼 수정 */
.sns_tit{overflow:hidden; margin:0 auto}
.sns_mem_join .sns_tit {display:block;line-height:17px; font-size:13px; color: #333; font-weight:normal; word-spacing:-1px; letter-spacing:-0.5px;}
.sns_mem_join .sns_tit ul {overflow:hidden; max-width:510px; text-align: center; margin: 0 auto; padding: 8px 0}
.sns_mem_join .sns_tit li {float: left; width:66px}

/* 페이스북 로그인 종료 안내 팝업 */
.btn_fun_w {padding:0 12px; display:inline-block; background-color:#fff; border:1px solid #c2c2c2; font-size:12px; height:29px; line-height:32px; text-align:center; text-decoration:none; color:#333}
.btn_fun_b {padding:0 12px; display:inline-block; background-color:#6286de; border:1px solid #5372bd; font-size:12px; height:29px; line-height:32px; text-align:center; text-decoration:none; color:#fff; font-weight:bold; letter-spacing:-1px}

/*2024124134255 :: 로그인폼 수정 :: START*/
* { box-sizing: border-box; }
.input_info { position: static; height: 54px; padding: 0; }
.input_info .tf_g { float: none; display: block; width: 100%; margin: 4px 0 0 0; height: auto; }
.input_info .lab_g { position: static; font-size: 12px; transition: all .3s cubic-bezier(.4,0,.2,1); }

.sns_mem_join > ul { width: 100%; display: flex; flex-direction: row; justify-content: center; gap: 30px; text-align: center; }
.sns_mem_join > ul > li > .Text { margin-top: 8px; }
.sns_mem_join li a { height: 50px; width: 50px; margin: 0; }
.sns_mem_join li a.kakao { background-position:-77px 0; }
.sns_mem_join li a.apple { background-position:-153px 0; }
.sns_mem_join li a.payco { background-position:-230px 0; }

.InputUi { position: relative; height: 100%; padding: 25px 13px 0; }
.InputUi > input { display: block; width: 100%; padding-right: 35px; font-size: 16px; font-weight: 700; color: #3D3D3D; outline: none; border: none; background-color: transparent; }
.InputUi .Label { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); font-size: 16px; font-weight: 500; color: #999; pointer-events: none; transition: all 0.25s ease-in-out; }
.InputUi .Btn_eye { display: none; position: absolute; right: 37px; top: 20px; background: transparent; border: none; cursor: pointer; }
.InputUi .Btn_eye > img { width: 17px; height: 17px; }
.InputUi .Btn_delete { display: none; position: absolute; top: 20px; right: 10px; z-index: 10; width: 15px; cursor: pointer; }
.InputUi .Btn_delete > img { max-width: 100%; height: auto; }
.InputUi > input:focus + .Label, .InputUi > input:not(:placeholder-shown) + .Label { font-size: 12px; top: 15px; }
/* input box color */
input:-internal-autofill-selected { background-color: transparent !important; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }
/*2024124134255 :: 로그인폼 수정 :: END*/