* { box-sizing: border-box;  padding:0; margin:0; }
a { text-decoration:none; }
body { overflow:hidden; }
#login_section {  background:none; background: #f4f5fa;   position:fixed; width:100%; height:100%; top:0; left:0; display:flex; justify-content:space-between; z-index:999; }
#login_section .left_img { flex-grow:1; background: #f4f5fa;  text-align:center; display:flex; align-items:center; justify-content:center; position:relative; }
#login_section .left_img img { width:400px; }
#login_section .left_img .login_top_logo { position:absolute; z-index:2; top:30px; left:30px; }
#login_section .left_img .login_top_logo img { max-width:200px; max-width:200px; width:auto; }
#login_section .login_box { width:40%;  max-width:600px; background:#fff;   padding:80px 0 90px 0; min-width:400px; border:0;  display:flex; align-items:center; justify-content:center;  }
#login_section .login_box .title { text-align:center; margin-bottom:30px; }
#login_section .login_box .title h1 { font-size:23px; color:#333;  }
#login_section .login_box .title h1 img { max-width:60%; }

#login_section .mainComponent { width:350px; margin:0 auto; }

@media(max-width:1000px){
body { }
#login_section { background:#fff; }
#login_section .login_box {  padding:0; width:85%;max-width:400px; min-width:0; margin:0 auto; }
#login_section .left_img { display:none; }
#login_section .mainComponent { width:auto }
}



.login_box .inputList {  }
.login_box .inputList li { display:flex; align-items:center;  margin-top:10px; }
.login_box .inputList li:first-child { margin-top:0; }
.login_box .inputList li > input { background:#fff; flex-grow:1; border:0; height:44px; line-height:30px; padding:7px 20px; font-size:16px; max-width:100%; border-radius:5px; border:1px solid #ccc; font-size:16px;}
.login_box .inputList li > input:focus { outline:1px solid #4578cd; background:#f4f5fa; border:1px solid #4578cd}
.login_box .inputList li > input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
}


.login_box .id_miss label { display:flex; align-items:center; margin-left:0px; font-size:13px; white-space:nowrap;  }
.login_box .id_miss label input[type="checkbox"] { margin-right:5px; }

.login_box .id_miss { margin-top:15px; text-align:right; display:flex; justify-content:space-between; align-items:center }
.login_box .id_miss a.idsearch { border: none;  background: none;  cursor:pointer;  color:#555;  font-size:16px;  width:100%;   margin:0 auto; text-align:right;  }

.login_box .btn_area1  {  text-align:center; background:#ddd;  }
.login_box .btn_area1 .loginButton1 {  border-radius:5px; border: none; background: rgb(103,158,240); line-height:1rem; display:block;
background:background: rgb(103,158,240);
background:background: rgb(103,158,240);
background: linear-gradient(163deg, rgba(103,158,240,1) 0%, rgba(12,55,144,1) 100%); width: 100%;  margin: 8px 0;  padding: 20px 0;  color: #fff;  font-size: 18px;  font-weight: 500;  cursor:pointer; }

.login_box .snsList { margin-top:30px; border-top:1px solid #ddd; padding-top:30px; }
.login_box .snsList h4 { color:#555; margin-bottom:10px; text-align:center; font-size:14px; font-weight:normal; }
.login_box .snsList ul { display:flex; align-items:center; justify-content:center; }
.login_box .snsList li { width:30px; height:30px; overflow:hidden; border-radius:15px; margin:0 4px; flex-shrink:0; }
.login_box .snsList li img { object-fit:cover; height:100%; }
.login_box .snsList #naver_id_login { background:url('/_template/in_content_ko01/image/icon_naver.webp'); background-size:100% auto; }
.login_box .snsList #naver_id_login * { opacity:0; }
.login_box .snsList #naver_id_login img {  opacity:100%; }

.login_box .join_menu {  }
.login_box .join_menu a.joinButton { line-height:1rem; display:block; text-align:center; margin:30px auto 0; width:100%;  background:#777;  border-radius:5px; font-size:15px; color:#fff;padding:15px 0;  }





@media(max-width:800px){
.login_box { width:calc(100% - 40px) ; }
.login_box {  display:block; height:auto; }
.login_box > div { width:100%; padding:30px 30px; }
.login_box > div.right_area { padding:20px 0}

}





.login_select_lang { margin:1.7rem auto 0 }
.login_select_lang ul { display:flex; 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: #fff !important; background:#8990a0; width:14px ; height:14px !important; border-radius:7px; text-align:center; line-height:14px;  }
.input_wrap .eyes{ cursor:pointer;position:absolute; right:43px; top: calc(50% - 1px); transform:translateY(-50%);z-index:10; color:#8990a0;  display:none; }


.sns-login-wrap { display:flex; width:100%; gap:0.5rem }
.kakao-login-wrap { margin-top:0rem; 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; }