* { box-sizing: border-box;  padding:0; margin:0; }
a { text-decoration:none; }
body { overflow:hidden; }

/*
#login_section { position:fixed; top:0; left:0; width:100%; height:100%; z-index:99999999; overflow:hidden;background: #eee }
*/
.login_a { display:none; }

.login_body { display:flex; justify-content:space-between; align-items: center; width:100%; /* height:100%; */ }
.login_box { width:100%;  margin:0 auto; background:#fff; padding:100px; display:flex; align-items:center; /* box-shadow:0px 0px 20px rgba(0,0,0,0.1); */ border:1px solid #ddd; border-radius:10px; max-width:1200px; }

.login_box .left_area { width:40%;  flex-shrink:0; }
.login_box .right_area { width:60%; padding-left:10%; flex-shrink:0; border-left:1px solid #aaa;  }

.login_box .title { }
.login_box .title h1 { font-size:40px; color:#222;  line-height:45px; }
.login_box .title h1 img { max-width:60%; }

.login_box .inputList {  }
.login_box .inputList li { display:flex; align-items:center;  margin-top:20px; }
.login_box .inputList li:first-child { margin-top:0; }
.login_box .inputList li > input { background:#eee; flex-grow:1; border:0; height:44px; line-height:30px; padding:7px 12px; font-size:1rem; width:100%; }
.login_box .inputList li > input:focus { outline: none; background: ; border:1px solid #000 }

.login_box .id_save { margin:20px auto;  display:flex; align-items:center;  justify-content:space-between; font-size:13px;  }
.login_box .id_save input[type="checkbox"] {   width:16px; height:16px; }

.login_box .id_save label { display:flex; align-items:center; margin-left:0px; font-size:1rem; }
.login_box .id_save label input[type="checkbox"] { margin-right:10px; }
.login_box .id_save a.idsearch { text-decoration:underline; color:var(--main-color); font-size: 1rem;}

.login_box .btn_area  {  }
.login_box .btn_area .loginButton { width:100%;  background: var(--main-color);
border:0; color:#fff; padding:15px 0; font-weight:bold; letter-spacing:1px; font-size:1rem;  }

.login_box .snsList { display:flex; margin-top:20px; align-items:center;  }
.login_box .snsList h4 { color:#555; margin-right:15px; }
.login_box .snsList li { width:30px; height:30px; overflow:hidden; border-radius:15px; margin:0 4px; }
.login_box .snsList li img { object-fit:cover; height:100%; }
.login_box .snsList #naver_id_login { background:url('/_templates/_common/_asset/_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 { margin-top:20px;  }
.login_box .join_menu a.joinButton { display:block; width:100%;  background:#fff; border:1px solid #ddd; padding:15px 0; font-size:1rem;  text-align:center; font-weight:bold; color:#444444; }
.login_box .join_menu a.joinButton:hover { background:#f1f1f1; border-color:#bbb; }

.login_box .password_form_area { width:430px; max-width:85%; margin:0 auto; }
.login_box .password_form_area .title { margin-bottom:2rem; border-bottom:1px solid #ddd; padding-bottom:0.5rem }
.login_box .password_form_area .title h1 { font-size:1.5rem; }
.login_box .password_form_area .title p { font-size:1rem; }
.login_box .password_form_area .inputList { margin-bottom:1rem; }

.select_lang {  padding:5px 0; }
.select_lang ul { display:flex; justify-content:center;     justify-content: flex-end;}
.select_lang ul li { width:30px; margin:0 0px; }
.select_lang ul li a {display:block;/* background-image:url('/_templates/_common/_asset/_image/flag_kor.jpg'); */background-repeat:no-repeat;width:24px;height:18px;background-size:100% auto;/*text-indent:-10000px;*/border:1px solid #ccc;}
.select_lang ul li a img{vertical-align:top; max-width:100%}


/*로그인*/
.idpw{   box-sizing:border-box; height: auto; width: 600px; text-align: center; margin: 0 auto  ; 
    padding: 20px 50px 60px; margin-top: 70px;   }
.idpw:after{content:''; display: block; clear: both;  }
.idpw .login_cont { position:relative;   margin:0px 0 30px; display: flex;     flex-direction: column;}
.idpw .login_cont .loginbox:nth-child(2) {border-top:1px solid #ddd; margin-top:40px; padding-top:25px;}
.idpw .login_cont .loginbox .input_L{ width: 100%; }
.idpw .login_cont .loginbox .btn_L { width:100%; }
.login_tit {font-size: 30px; font-weight: 600;}

/* ID PW찾기 */


/* tab_controll */
.list_wrap .list_inner{display:none; padding: 20px 0px}
.list_wrap .list_inner.active{display:block}

.login-pwArea {display: flex; ;}
.login-pwArea .idpw {width:40%; margin: 0 5%; height: 100%;}
.idpw_tit2{ margin: 30px 0; font-size: 1rem; font-weight: 600;}
.login-pwArea .auth_wrap li {width:100%}

.f_c_b {
    color: #0071b9 !important;}

.idpw .login_cont .loginbox .input_L li {margin-bottom:10px;}
.idpw .login_cont .loginbox .input_L li input {width:100%; height:45px; font-size:1.5rem; background:#fff; border-radius: 5px;}

.bnt_login{width:100%;  text-align:center; margin-top: 15px; }
.bnt_login button {background:var(--main-color); border-color:var(--main-color); color:#fff; font-weight:bold; font-size:1.2rem;width: 100%;height:45px;}
.bnt_login:focus{border:none;}
.sbtn_login{ width:100%;font-size:1em;line-height:43px;height:43px; padding:0 20px; text-align:center;color:#000 !important;
    border:1px solid #dadada;background:#fff; border-radius:30px; transition: all .40s ease;}
.sbtn_login:hover{  background: #f2f2f2; font-weight: bold;}

.area_idschbox {display: flex; height: 45px;}
.area_idschbox :after{content:''; display: block; clear: both;  }

.input_L p { position:relative; width:100%; height:60px; margin-top:10px }
.input_L input{ box-sizing:border-box; padding:20px 0 0; width:100%; height:100%; border:0 none; color:#000; outline:none; font-size: 1.2rem; padding-right: 80px  ;}
.input_L label { position:absolute; left:0%; bottom:0; width:100%; height:100%; border-bottom:1px solid #000; text-align:left; pointer-events:none; }
.input_L label:after { content:""; position:absolute; left:0; bottom:-1px; width:0; height:100%; border-bottom:2px solid #000; transition:all .3s ease; } 
.input_L label span { position:absolute; left:0; bottom:5px; transition:all .3s ease; font-size: 1.2rem; color:#ccc }
.input_L input:focus + label span, 
.input_L input:valid + label span { transform:translateY(-150%); font-size:1rem; color:#ccc; } 
.input_L input:focus + label::after,
.input_L input:valid + label::after { width:100%; transform:translateX(0); } 



.idpw .list_type {text-align: center;}
.idpw .list_type li { display: inline-block; position:relative;width: 250px; border:1px solid #ddd; margin-left: -3px; }
.idpw .list_type li .active {color:#fff; background: #000; border:2px solid #000; display: inline-block; width:250px; line-height: 40px;}
.idpw .list_type li button {font-size: 1.2rem;line-height: 40px;}
/* .idpw .list_type li:first-child:after{position: absolute; right:0; top:2px; content: '|'; right:-15px} */

.idpw_tit {text-align: left; font-size: 1rem; margin-top: 15px;}
.idpw_tit [type="radio"] { /* width:15px; height:15px; */ vertical-align: middle; margin:0; padding:0; }
.idpw_tit label { display:flex; align-items:center; gap:5px; cursor:pointer }


.sir_singo_msg button {cursor:pointer;font-family:Arial,'돋움',Dotum;border:none;padding:0;background:#fff; outline:0}
.sir_singo_msg .blind_view{font-size:1.14em;font-weight:bold;color:#ff4343;margin-top:-3px;text-decoration:underline}
.singo_view { display:none; }
.atvs {    display: none;}
/*a:hover + .atvs {    display: block;}*/

.login_infotxt {text-align: left; color:#ff5926; line-height: 18px; margin: 8px 0; font-size: 1rem;}


.area_idschbox .join_btbox{width: 48%;margin:0 auto; position:relative; }
.area_idschbox .sch_btbox{width: 48%; position:relative}

.LoginType{position:relative; padding-bottom: 30px; margin-bottom: 50px;}
.LoginType li { float:left; margin-bottom: 10px; height: 45px; border:1px solid #dadada; position:relative;border-radius: 8px; text-align: center; color:#183989}
.LoginType li.select{border:1px solid #183989}
.LoginType a li {font-size: 15px; display: table; vertical-align: middle;width: 48%; margin: 0 1%;height: 100%; font-size: 16px; line-height: 20px; }
.LoginType a li p {display: table-cell; vertical-align: middle; padding: 10px 0; height: 65px}



@media(max-width:1000px){
.login_box { width:calc(100% - 40px) ; padding:20px; display:block; }
.login_box .left_area { width:100%;  margin-bottom:10px; }
.login_box .right_area { width:100%; padding-left:0; border-left:0; }
.login_box .title h1 { white-space:nowrap; font-size:20px; text-align:center; }
.login_box .title h1 img { margin:0 auto; }
.login_box .title h1 br { display:none; }

}


@media(max-width:640px){
.idpw{ width: 100%; padding:10px 20px 30px }
.idpw .list_type li {width:50%}
.idpw .list_type li .active {width:100%}
.list_wrap .list_inner {padding:0 0}
/*
#warp {  width:100%; height:calc(100vh - 100px);background:#fff;;  overflow:hidden; }
#warp:after { position:fixed; left:0; top:0; width:100%; height:100%; background:#fff; z-index:999; display:block; content:""; }
*/
#login_section { position:absolute; top:0; left:0; width:100%; z-index:9999; display:flex; align-items:center; height:100%; }
}


.find_id_body { background:#f2f4f7; }
.find_id_content { background:#f2f4f7; width:100%; height:100%; }
.find_id_content .idpw { background:#fff; border-radius:15px; box-shadow:0 0px 10px rgba(0,0,0,0.1); width:450px; max-width:95%; margin:80px auto 20px; padding:40px 40px 0px 40px }
.find_id_content .list_type { width:100%; display:flex; justify-content:center; }
.find_id_content .list_type ul { display:flex; background:#f1f1f1; border-radius:50px; gap:4px; height:3rem; width:100%;  }
.find_id_content .list_type ul li { flex:1; list-style:none; border:0;padding:0;height:3rem;  width:50%; margin:0; }
.find_id_content .list_type ul button{ width:100%; border:0; background:transparent;  line-height:3rem; border-radius:50px; font-size:1rem; font-weight:500;transform:translateZ(0);  color:#777; cursor:pointer;  transition:.25s; height:3rem; border:none; text-align:center; justify-content:center }
.find_id_content .list_type ul button.active{ background:#222; color:#fff; line-height:3rem; height:3rem;  width:100%; padding:0;font-weight:500; box-shadow:0; }
.find_id_content .list_type ul  button span{  pointer-events:none; line-height:3rem; font-size:1rem; }

.find_id_input span.input_label { display:block; text-align:left; font-size:0.9rem; margin-bottom:5px; color:#888 }
.find_id_input { padding:10px 0}
.find_id_input > div { padding:5px 0; }
.find_id_input > div input[type="text"],
.input_style_1 { width:100%; border:1px solid #ddd; padding:10px; border-radius:5px;  font-size:1rem }
.find_id_content .bnt_login button[type="button"] { background:#333; border:0; border-radius:5px; font-weight:normal; font-size:1rem; }

@media(max-width:640px){
.find_id_body { background:#fff; }
.find_id_content { background:#fff; width:100%; height:100%; }
.find_id_content .idpw { background:#fff; border-radius:0px; box-shadow:none; width:100%; max-width:95%; margin:10px auto 10px; padding:30px 20px }
.find_id_content .list_type { width:100%; display:flex; justify-content:center; }

.find_id_input span.input_label { display:block; text-align:left; font-size:0.9rem; margin-bottom:5px; color:#888 }
.find_id_input { padding:5px 0}
.find_id_input > div { padding:3px 0; }
.find_id_input > div input[type="text"] { width:100%; border:1px solid #ddd; padding:10px; border-radius:5px; }
.find_id_content .bnt_login button[type="button"] { background:#333; border:0; border-radius:5px; font-weight:normal; font-size:1rem; }
.idpw .login_cont .loginbox:nth-child(2) {border-top:1px solid #ddd; margin-top:20px; padding-top:15px;}
}