﻿/*Login Common*/
.login_wrap{width:500px;position:absolute;left:50%;margin-left:-250px;top:15%}
.login_wrap h1.logo{width:100%;display:inline-block;text-align:center}
.login_wrap .info_text{width:100%;color:#dadada;font-size:1.03em}
.login_wrap .info_text2{width:100%;color:#6a6a6a;font-size:1.03em}
.login_wrap .info_text3{width:100%;color:#a3a3a3;font-size:0.8em;font-weight:300;margin-top:20px}
.login_wrap .info_text3 a{color:#39b54a}
.login_wrap input:-ms-input-placeholder{color:#dadada}
.login_wrap input::-webkit-input-placeholder{color:#dadada}
.login_wrap input::-moz-placeholder {color:#dadada}
.login_wrap .wrong_message{width:100%;text-align:left;color:#ff1616;font-size:0.9em;padding-top:5px;display:none}
.login_wrap #success_message_email1, .login_wrap #success_message_email2, .login_wrap #success_message_phone1, .login_wrap #success_message_phone2{width:100%;text-align:left;color:#39b54a;font-size:0.9em;padding-top:5px;display:none}
.login_wrap #wrong_message_email1, .login_wrap #wrong_message_phone1, .login_wrap #wrong_message_number1, .login_wrap #wrong_message_email2, .login_wrap #wrong_message_phone2, .login_wrap #wrong_message_number2, .login_wrap #none_message_email1, .login_wrap #none_message_email2, .login_wrap #none_message_phone1, .login_wrap #none_message_phone1, .login_wrap #wrong_message_number3, .login_wrap #wrong_message_number4{width:100%;text-align:left;color:#ff1616;font-size:0.9em;padding-top:5px;display:none}
.login_wrap #empty_message_phone1, .login_wrap #empty_message_email1, .login_wrap #empty_message_phone2, .login_wrap #empty_message_email2, .login_wrap #empty_message_id1, .login_wrap #empty_message_id2, .login_wrap #none_message_phone2, .login_wrap #empty_message_pwd1, .login_wrap #empty_message_pwd2, .login_wrap #wrong_message_pwd, .login_wrap #runningTimerExist1, .login_wrap #runningTimerExist2, .login_wrap #runningTimerExist3, .login_wrap #runningTimerExist4{width:100%;text-align:left;color:#ff1616;font-size:0.9em;padding-top:5px;display:none}
.log_copyright{width:100%;color:#777;margin-top:20px;font-size:0.8em}
.login_wrap input[type=text], .login_wrap input[type=password]{border:1px solid #dadada;height:53px;padding:0 2%;font-size:1em;color:#000;margin-top:10px}

/*Login*/
.login_wrap .login{width:100%;border:1px solid #dadada;padding:60px 13.7% 40px 13.7%;margin-top:20px;display:inline-block}
.login_wrap form.login_enter{width:100%;display:inline-block;margin-top:26px}
.login_wrap .id_enter{width:100%;height:52px;position:relative;border:1px solid #dadada;display:inline-block;color:#000}
.login_wrap .id_enter input.user_id{width:100%;height:50px;float:left;border:none;margin-top:0}
.login_wrap .id_enter .email_address{width:50%;text-align:right;position:absolute;right:2%;top:25%;color:#9d9d9d;font-weight:500;font-size:1em}
.login_wrap input.user_pw{width:100%}
.login_wrap a.login_btn{width:100%;height:52px;background:#212121;border:1px solid #212121;color:#fff;line-height:50px;display:block;margin-top:15px}
.login_wrap div.login_keep{width:100%;text-align:right;display:inline-block;margin-top:8px}
.login_wrap div.login_keep input[type=checkbox]{ vertical-align: text-bottom; transform:scale(1.5);-webkit-transform: scale(1.5)}
.login_wrap div.login_keep label{color:#676767;margin-left:5px; font-size:15px; font-size:400;}
.login_wrap ul.other_link{width:100%;display:inline-block;margin-top:70px}
.login_wrap ul.other_link li{display:inline-block;font-size:0.96em}
.login_wrap ul.other_link li a{color:#676666}
.login_wrap ul.other_link li a:hover{text-decoration:underline}
.login_wrap ul.other_link li.line{color:#676666;margin:0 10px;font-size:0.8em}
/*ID PW찾기*/
.login_wrap .id_pw_find{width:100%;margin-top:20px;display:inline-block}
.login_wrap ul.main_tab{width:100%;display:inline-block}
.login_wrap ul.main_tab li{width:50%;height:53px;float:left;border:1px solid #d2d2d2;border-bottom:1px solid #26a637}
.login_wrap ul.main_tab li a{width:100%;line-height:51px;color:#bebebe;display:block;font-size:0.95em}
.login_wrap ul.main_tab li a:hover{color:#26a637}
.login_wrap ul.main_tab li.on{border:1px solid #26a637;border-bottom:none}
.login_wrap ul.main_tab li.on a{color:#26a637;line-height:52px}
.login_wrap .find_enter{width:100%;border:1px solid #26a637;padding:60px 13.7% 40px 13.7%;margin-top:-5px;border-top:none}
.login_wrap ul.find_tab{width:100%;display:inline-block;margin:30px 0 25px 0}
.login_wrap ul.find_tab li{display:inline-block;margin:0 3%}
.login_wrap ul.find_tab li a{color:#676767;font-size:0.9em;padding-left:28px;background:url(../../images/solution/find_tab_off.gif) no-repeat left center;display:inline-block}
.login_wrap ul.find_tab li a.on{background:url(../../images/solution//find_tab_on.gif) no-repeat left center}
.login_wrap .find_method{width:100%;display:inline-block}
.login_wrap .find_method .num_enter{width:100%;display:inline-block}
.login_wrap .find_method .num_enter input{width:60.8%;float:left;border-right:none;margin-top:0}
.login_wrap .find_method .num_enter button{width:39.2%;height:53px;float:right;background:#555;border:1px solid #3f3f3f;color:#fff}
.login_wrap .find_method .certify_num{width:100%;margin-top:25px}
.login_wrap .find_method .bottom_btn{width:100%;display:inline-block;margin-top:25px}
.login_wrap .find_method .bottom_btn a{width:49%;height:53px;color:#fff;line-height:51px}
.login_wrap .find_method .bottom_btn a.cancle{float:left;background:#cacaca;border:1px solid #b4b4b4}
.login_wrap .find_method .bottom_btn a.confirm{float:right;background:#39b54a;border:1px solid #26a637}
.login_wrap .phone_method{display:none}
.login_wrap .pw_find_enter{display:none}
.login_wrap .id_find_result, .login_wrap .pw_find_result{width:100%;border:1px solid #26a637;padding:60px 13.7% 40px 13.7%;margin-top:-5px;display:none}
.login_wrap .id_find_result h3, .login_wrap .pw_find_result h3{width:100%;display:inline-block;color:#38b549}
.login_wrap .result_text{width:100%;color:#6a6a6a;font-size:1.03em;margin-top:5px}
.login_wrap .result_text span{font-weight:700}
.login_wrap .result_data{width:100%;display:inline-block;margin-top:30px}
.login_wrap .result_data div.user_id_text{width:100%;border:1px solid #dadada;padding:15px 2%;font-size:1em;color:#000;margin-top:10px;text-align:left}
.login_wrap .result_data input{width:100%}
.login_wrap .result_data a{width:100%;height:52px;background:#38b549;border:1px solid #26a637;color:#fff;line-height:50px;display:block;margin-top:15px}
.login_wrap .pw_find_result .result_text span{width:100%;display:inline-block}
.login_wrap .pw_find_result .result_data span{width:100%;display:inline-block;text-align:left;font-size:0.8em;color:#6a6a6a;margin-top:10px}
.login_wrap .pw_find_result .result_data span::before{content:'▪';margin-right:5px}

@media all and (max-width:500px){
    /*Login Common*/
    .login_wrap{width:96%;margin-left:-48%}
    .login_wrap h1.logo img{width:50%;max-width:366px}
    /*Login*/
    .login_wrap .login{padding:40px 5%}
    .login_wrap .find_enter{padding:40px 5%}
    .login_wrap .id_find_result, .login_wrap .pw_find_result{padding:40px 5%}
}
@media all and (min-width:320px) and (max-width:414px){
    .login_wrap input[type=text], .login_wrap input[type=password]{font-size:0.9em}
    .login_wrap .id_enter .email_address{font-size:0.9em;top:30%}
    .login_wrap .info_text2{font-size:0.9em}
}
@media all and (min-width:320px) and (max-width:368px){
    .login_wrap .info_text2{font-size:0.8em}
    .login_wrap .info_text3{font-size:0.7em}
    .login_wrap .id_enter{height:45px}
    .login_wrap .id_enter input.user_id{height:43px}
    .login_wrap .id_enter .email_address{top:23%}
    .login_wrap a.login_btn{height:45px;line-height:43px}
    .login_wrap ul.other_link{margin-top:40px}
    .login_wrap input[type=text], .login_wrap input[type=password]{height:45px}
    .login_wrap .find_method .num_enter button{height:45px}
    .login_wrap .find_method .bottom_btn a{height:45px;line-height:43px}
    .login_wrap ul.main_tab li{height:45px}
    .login_wrap ul.main_tab li a{line-height:43px}
    .login_wrap ul.find_tab li a{font-size:0.8em;padding-left:28px;padding-top:3px;padding-bottom:3px}
    .login_wrap .result_text{font-size:0.9em}
    .login_wrap .result_data div.user_id_text{padding:10px 2%;font-size:0.8em}
    .login_wrap .result_data a{height:45px;line-height:43px}
    .login_wrap .pw_find_result .result_data span{font-size:0.7em}
}
@media all and (max-width:320px){
    .login_wrap .login{padding:20px 5%}
    .login_wrap .find_enter{padding:20px 5%}
    .login_wrap .id_find_result, .login_wrap .pw_find_result{padding:20px 5%}
    .login_wrap .info_text{font-size:0.9em}
    .login_wrap input[type=text], .login_wrap input[type=password]{font-size:0.8em}
    .login_wrap .id_enter .email_address{font-size:0.8em;top:30%}
    .login_wrap .info_text2{font-size:0.7em}
    .login_wrap ul.other_link li a{font-size:0.8em}
    .login_wrap div.login_keep input[type=checkbox]{transform:scale(1.2);-webkit-transform: scale(1.2)}
    .login_wrap div.login_keep label{font-size:0.9em}
    .login_wrap ul.main_tab li a{font-size:0.8em}
    .login_wrap .find_method .num_enter button{font-size:0.75em}
}