body { background:#fff !important; }
.login_wrap {  width: 450px; margin: 0 auto; font-size: 1rem; padding:10rem 0; max-width:100% }
.login_wrap h1 { font-size:3rem; text-align:center; }

/* 탭 */
.login_tab { display: flex;  padding-left: 0;  margin-bottom: 0; margin-top:30px; }
.login_tab li { list-style: none; flex: 1; text-align: center; padding: 12px 0; color:#aaa; background: #f5f5f5;  border: 1px solid #ddd;  border-bottom:1px solid var(--main-color); cursor: pointer; }
.login_tab li + li {  border-left: none; }

/* 활성 탭 */
.login_tab li.active { background: #fff; position: relative; border-color:var(--main-color); border-bottom:1px solid #fff;  color:#222; border-left:1px solid var(--main-color); margin-left:-1px; }
.login_tab li:first-child.active { margin-left:0; }

.login_content { padding: 2rem 0; background: #fff; }
.tab_cont { display: none; }
.tab_cont.active { display: block; }

/* 폼 요소 */
.tab_cont input { width: 100%; padding: 10px; box-sizing: border-box; font-size:1rem; border-radius:0; }

/*
.tab_cont button { width: 100%; padding: 10px; background: var(--main-color);  color: #fff; border: none; cursor: pointer; }
*/

.login_btn_area { margin:1rem 0 1rem; }
.login_btn_area .loginButton { background: var(--main-color);  color:#fff; padding:1rem 0; text-align:center; border:0; }

.flex_wrap { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; }
.flex_wrap  * { padding:0; margin:0; font-size:0.9rem; }
.id_save label {  display:flex; align-items:center; white-space:nowrap; gap:0.5rem; }
.join_menu a { font-size:0.9rem; padding:0; position:relative; margin-left:0.7rem; }
.join_menu a.idsearch { margin-left:0; padding-right:0.7rem }
.join_menu a.idsearch:after { position:absolute; top:2px; right:0; width:1px; height:12px; content:""; display:block; background:#aaa; }
.guide_text { font-size:0.9rem; }
.guide_text.flex { display:flex; align-items:center; justify-content:space-between;  }
.guide_text a.under { text-decoration:underline; }


.sns-login-wrap { display:flex; width:100%; gap:0.5rem }
.kakao-login-wrap { flex-grow:1; }
a.btn-sns-login { width:100%; display:block; position:relative; padding:0.8rem 0; font-weight:bold; letter-spacing:1px; font-size:1rem;  text-align:center; padding-left:1.5rem;  }
a.btn-sns-login img { height:2.5rem; 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; }



.input_wrap { position:relative; }
.clear_btn { position: absolute; right: 18px; top:50%; transform: translateY(-50%); cursor: pointer; display: none; font-size: 10px !important; color: #fff !important; background:#8990a0; width:14px; 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:#8990a0; display:none  }

.login_content .inputList {  }
.login_content .inputList li { display:flex; align-items:center;   }
.login_content .inputList li > input {  flex-grow:1; width:100%;  border:1px solid #aaa; }
.login_content .inputList li:last-child > input { border-top:0; }
.login_content .inputList li > input:focus { outline: none; border:1px solid #000 }
.login_content .inputList li:last-child > input:focus { margin-top:-1px; }





.login_select_lang { margin:1.7rem auto 0 }
.login_select_lang ul { display:flex; justify-content:center; j}
.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;}