* { 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%; }
.login_box { width:100%;  margin:15vh auto 0; 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:0.8rem 0; font-weight:bold; letter-spacing:1px; font-size:1rem; border-radius:0.5rem; }

.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:0.5rem; }
.login_box .join_menu a.joinButton { display:block; width:100%;  background:#fff; border:1px solid #ddd; padding:0.8rem 0; font-size:1rem;  text-align:center; font-weight:bold; color:#444444; border-radius:0.5rem; }
.login_box .join_menu a.joinButton:hover { background:#f1f1f1; border-color:#bbb; }
.login_box .join_menu.tm_2 { margin-top:1.5rem; }


.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 #ccc; margin-top:30px; padding-top: 30px;}
.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: 1.3rem; 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:1.5rem;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{ text-decoration:underline; 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: 1.3rem; margin-top: 15px;}
.idpw_tit [type="radio"] {width:18px; height:18px; vertical-align: middle;}



.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%; }
}





.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; border:1px solid #ccc;}
.login_select_lang ul li a img{vertical-align:top; max-width:100%}

.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  }

.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:bold; letter-spacing:1px; font-size:1rem;  text-align:center; padding-left:1.5rem;  border-radius:0.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; }