body { background:#040404 !important;}
* { box-sizing: border-box;  padding:0; margin:0; }
a { text-decoration:none; }
body { overflow:hidden; width:100%;  }
footer, .fix_button{ display:none; }
#login_section { position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999999; overflow:hidden; }

.login_body { display:flex; justify-content:space-between; align-items: center; height:100%; width:100%; background: #040404 }
.login_box { width:100%; margin:0 auto; background:#fff; display:flex; height:100%; }

.login_box > div {  display:flex; flex-direction: column; justify-content:center; }
.login_box .left_area { width:650px; flex-shrink:0; background: #040404;   padding:0 80px; }
.login_box .right_area  { flex-grow:1; position:relative; }
.login_box .right_area  .bg_img { width:100%; height:100%; position:absolute; left:0; top:0; }
.login_box .right_area  .bg_img img { object-fit:cover; width:100%; height:100%; }

.login_box .title { margin-bottom:40px; }
.login_box .title h1 { font-size:30px; color:#fff;  line-height:45px;   font-family: "Montserrat", sans-serif; font-weight:700; text-align:left; }
.login_box .title h1 img { max-width:60%; }

.login_box .right_area .title h1 { color:#fff; }
.login_box .right_area .title p { margin:10px auto; color:#fff; font-size:16px; text-align:center; }

.login_box .inputList {  }
.login_box .inputList .input_title { color:#aaa; width:100%; font-size:16px; display:flex; justify-content:space-between; align-items:center; }
.login_box .inputList .tpm3 { margin-top:30px; }
.login_box .inputList li { display:flex; align-items:center;  margin-top:10px; background:#040404;border:1px solid #999; padding:10px 15px; border-radius:5px; }
.login_box .inputList li:hover { border:1px solid #fff; }
.login_box .inputList li span { width:35px; flex-shrink:0; }
.login_box .inputList li span img { color:#fff;   filter:invert(44%) sepia(99%) saturate(6958%) hue-rotate(235deg) brightness(100%) contrast(106%); width:30px; }
.login_box .inputList li:first-child { margin-top:0; }
.login_box .inputList li > input { background:#040404; width:100%; flex-grow:1; border:0; height:48px; line-height:30px; padding:9px 12px; font-size:16px; max-width:100%; color:#fff; letter-spacing:1px }
.login_box .inputList li > input::-webkit-input-placeholder { color:#fff; }
.login_box .inputList li > input:-ms-input-placeholder { color:#fff; }
.login_box .inputList li > input::placeholder { color:#fff; }
.login_box .inputList li > input:focus { outline: none;  }
.login_box .inputList li > input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #040404 inset !important;
  -webkit-text-fill-color: #fff !important;
}

.login_box .id_save { display:flex; align-items:center; margin-left:0px; font-size:13px;color:#999; }
.login_box .id_save input[type="checkbox"] {  accent-color: #3047ff; width:16px; height:16px;margin-right:10px;  }

.login_box .id_miss { margin-top:40px; }
.login_box .id_miss a { display:flex; align-items:center; justify-content:space-between;  font-size:13px; color:#aaa; margin-top:5px; }
.login_box .id_miss a span { color:#4c60ff; text-decoration:underline; font-size:15px; }

.login_box .btn_area  {  margin-top:30px; text-align:center; }
.login_box .btn_area .loginButton { width:100%; background: #3047ff; margin:0 auto; height:70px; border-radius:5px;
border:0; color:#fff; letter-spacing:1px; font-size:15px;  }


.login_box .join_menu {  }
.login_box .join_menu a.joinButton { color:#fff; font-weight:bold; }




@media(max-width:650px){
.login_box {  }
.login_box > div { width:100%; }
.login_box > div.left_area { width:100%;  flex-shrink:0; background: #040404;  padding:0 30px; }
.login_box > div.right_area { }

.login_box .inputList .input_title { font-size:13px; }
.login_box .inputList .tpm3 { margin-top:20px; }
.login_box .inputList li span { width:30px; }
.login_box .inputList li span img { width:25px; }
.login_box .inputList li > input {  height:36px; padding:3px 12px;  }
.login_box .btn_area .loginButton { height:52px; }

.login_box .id_miss { }
.login_box .id_miss a {  font-size:13px; color:#aaa; margin-top:15px;  flex-wrap:wrap; }
.login_box .id_miss a span { color:#4c60ff; text-decoration:underline; font-size:14px;  }

}



.login_select_lang { margin:1.7rem auto 0 }
.login_select_lang ul { display:flex; justify-content:center; justify-content: center;}
.login_select_lang ul li { margin:0 3px; }
.login_select_lang ul li a {display:block;background-repeat:no-repeat;width:30px;}
.login_select_lang ul li a img{vertical-align:top; max-width:100%; border:1px solid #ccc;}


.input_wrap { position:relative; }
.clear_btn { position: absolute; right: 18px; top:50%; transform: translateY(-50%); cursor: pointer; display: none; font-size: 10px !important; color: #222 !important; background:#ccc; width:14px !important; height:14px; border-radius:7px; text-align:center; line-height:14px;  }
.input_wrap .eyes{ cursor:pointer;position:absolute; right:43px; top: calc(50% + 2px); transform:translateY(-50%);z-index:10; color:#ccc;  display:block; }




.sns-login-wrap { display:flex; width:100%; gap:0.5rem }
.kakao-login-wrap { margin-top:0.5rem; flex-grow:1; }
a.btn-sns-login { width:100%; display:block; position:relative; padding:0.8rem 0; font-weight:normal; letter-spacing:1px; font-size:0.9rem;  text-align:center; padding-left:1.5rem;  border-radius:0.3rem; }
a.btn-sns-login img { height:2rem; position:absolute; top:50%; transform:translateY(-50%); left:1rem; }

a.btn-kakao { background:#f9e000;  }
a.btn-kakao span { color:#222; }
a.btn-naver { background:#05ac4f; }
a.btn-naver span { color:#fff; }



.login_body .language_area { position:relative;  }
.login_body .select_language { text-align:center; margin:30px auto 0; position:static; top:0; left:0; }
.login_body .select_language .lang_list { right:auto; left:auto; }
@media all and (max-width:768px){
.login_body .language_area { position:static; }
.login_body .lang_btn_txt { display:block; }
.login_body .select_language { left:auto; right:auto; }
}