﻿/* KAMCO 2022 */
.login-wrap { position: relative; width: 100%; height: 100vh; background-color: rgba(234, 235, 237, 0.2); background-image: url("../../images/renewal/bg/login_bg.png"); background-repeat: no-repeat; background-size: 100%; background-position: 0 0; text-align: center;}
/*Login Common*/
.login_wrap { position: absolute; top: 45%; left: 50%; width:500px; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.login_wrap h1.logo{width:100%;display:inline-block;text-align:center}
.login_wrap h2 { margin-bottom: 40px; font-size: 3.2rem; font-weight: 700; line-height: 45px; color: #343434;}
.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: 1.4em;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{ position: absolute; bottom: -15px; width:100%;text-align:left;color:#ff1616;font-size:1.1em;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: #D23325;font-size:1.4em;padding-top:5px;display:none}
#runningTimer2,
#runningTimer4 { position: absolute; top: 15px; right: 15px; font-size: 1.4rem; font-weight: 400; line-height: 19px;}
.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}
.phone-box { position: relative;}
#runningTimerExist2,
#runningTimerExist4 { position: absolute; left: 0; bottom: -19px;}

/*Login*/
.login_wrap input::placeholder { /* Chrome/Opera/Safari */ /* Firefox 19+ */  /* Firefox 18- */
    font-size: 14px;
}
.login_wrap input:-moz-placeholder{ /* Chrome/Opera/Safari */ /* Firefox 19+ */  /* Firefox 18- */
    font-size: 14px;
}
.login_wrap input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ /* Firefox 19+ */  /* Firefox 18- */
    font-size: 14px;
}
.login_wrap input::-moz-placeholder { /* Chrome/Opera/Safari */ /* Firefox 19+ */  /* Firefox 18- */
    font-size: 14px;
}
.login_wrap input::-ms-input-placeholder { /* Chrome/Opera/Safari */ /* Firefox 19+ */  /* Firefox 18- */
    font-size: 14px;
}
input:-ms-input-placeholder{ color: #757575 !important;} /* IE 10+ */
.login_wrap .login{width:100%; padding: 80px 40px;display:inline-block; border-radius: 30px; background: #FFFFFF; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);}
.login_wrap .login h2 { margin-bottom: 30px;}
.login_wrap .login h2 img { max-width: 100%;}
.login_wrap form.login_enter{width:100%;display:inline-block;}
.login_wrap input[type="text"],
.login_wrap input[type="password"], .k-textbox { width:100%;height:50px; border: 1px solid #DDDDDD; border-radius: 5px; padding: 16px 15px; font-size: 1.6rem; font-weight: 400; line-height: 19px;}
.login_wrap input::placeholder { color: #757575;}
.login_wrap .id_enter:after { content: ''; display: block; clear: both;}
.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 .login_btn{width:100%;height:56px; margin-bottom: 10px; border-radius: 5px; line-height:55px;display:block;margin-top:10px; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em;}
.login_wrap .login_btn > span { font-size: 1.6rem;}
.login_wrap .check-box { display: block; position: relative; margin-top: 10px; text-align: left;}
.login_wrap .check-box input[type=checkbox] { display: inline-block; float: left; position: relative; margin-right: 10px;}
.login_wrap .check-box label { font-size: 1.4rem; font-weight: 400; color: #666666; line-height: 22px; letter-spacing: -0.05em;}
.login_wrap .check-box label .icon { display: none !important;}
.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;}
.login_wrap ul.other_link{ display: flex; justify-content: center; width:100%; margin-top:20px}
.login_wrap ul.other_link li{display:inline-block; position: relative; padding-left: 20px; font-size:1.4rem;}
.login_wrap ul.other_link li:first-child { padding-left: 0; padding-right: 20px;}
.login_wrap ul.other_link li:nth-of-type(2):after { content: ''; display: block; position: absolute;top: 4px; left: 0; width: 1px; height: 16px; background: #E4E2E6;}
.login_wrap ul.other_link li a{ display: inline-block; font-size: 1.4rem; font-weight: 500; color: #565656; line-height: 22px; letter-spacing: -0.05em;}
.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}
.login_wrap .social-box { margin-top: 30px;}
.login_wrap .social-box a { display: flex; justify-content: flex-start; align-items: center; width: 100%; margin-bottom: 10px; padding: 9px 10px; border: 1px solid #DDDDDD; border-radius: 5px; background: #FFFFFF; font-size: 1.5rem; font-weight: 400; color: #666666; text-align: center; line-height: 19px; letter-spacing: -0.02em; cursor: pointer;}
.login_wrap .social-box a span { display: inline-block; width: calc(100% - 32px);}
/* otp */
.login.otp-box { padding: 50px 40px; border-radius: 30px; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);}
.login.otp-box h3,
.change-pw-box h3 { margin-bottom: 15px; font-size: 2.2rem; font-weight: 700; color: #343434; text-align: center; line-height: 45px;}
.login.otp-box p { margin-bottom: 30px; font-size: 1.5rem; font-weight: 350; color: #565656; text-align: center; line-height: 23px; letter-spacing: -0.02em; word-wrap: break-word; word-break: keep-all;}
.login.otp-box .input-box .btn-list { width: calc(100% - 316px); margin-left: 5px; padding: 0;}
.login.otp-box .number-box { position: relative;}
.login.otp-box .number-box input { padding-right: 50px;}
.login.otp-box .number-box .col-red { position: absolute; top: 15px; right: 15px; font-size: 1.4rem; font-weight: 400; line-height: 19px;}
.login.otp-box .login_btn { margin-bottom: 0;}
/*ID PW찾기*/
.login_wrap .id_pw_find{width:100%;display:inline-block; border-radius: 30px; background: #FFFFFF; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);}
.login_wrap ul.main_tab{width:100%;display:inline-block}
.login_wrap ul.main_tab li{width:50%;height:64px;float:left;}
.login_wrap ul.main_tab li:first-child,
.login_wrap ul.main_tab li:first-child a { border-radius: 10px 0 0 0;}
.login_wrap ul.main_tab li:nth-of-type(2),
.login_wrap ul.main_tab li:nth-of-type(2) a { border-radius: 0 10px 0 0;}
.login_wrap ul.main_tab li a{width:100%; padding: 22px 0; background: #EDEDEF; color: #666666;display:block;font-size: 1.6rem; font-weight: 400; line-height: 20px;}
.login_wrap ul.main_tab li.on{}
.login_wrap ul.main_tab li.on a{ background: #FFFFFF; font-weight: 500; color: #343434;}
.login_wrap .btn-list > span { font-weight: 500;}
.login_wrap .find_enter{width:100%; padding:50px 40px 40px; border-radius: 0 0 10px 10px;}
.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 input { height: 48px; margin-top: 0;}
.login_wrap .find_method .input-box { position: relative; margin-bottom: 10px;}
.login_wrap .find_method .num_enter{width:100%; margin-top: 10px;}
.login_wrap .find_method .certify_num{width:100%; padding-right: 50px;}
.login_wrap .find_method .bottom_btn{width:100%;display:flex;margin-top:30px}
.login_wrap .phone_method{display:block}
.login_wrap .pw_find_enter{display:none}
.login_wrap .id_find_result, .login_wrap .pw_find_result{width:100%; border-radius: 0 0 10px 10px; padding: 50px 40px; 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%; margin-bottom: 50px; color: #565656; font-size: 1.8rem; font-weight: 350; text-align: center; line-height: 23px; letter-spacing: -0.02em; word-break: keep-all;}
.login_wrap .result_text strong { display: block; font-size: 1.8rem; font-weight:700; color: var(--primary-indigo); text-align: center; line-height: 23px; letter-spacing: -0.02em;}
.login_wrap .result_data{width:100%;display:inline-block;}
.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%; height: 48px; font-size: 1.5rem;}
.login_wrap .pw_find_result .result_text span{width:100%;display:inline-block}
.login_wrap .phone_method .flex-box { align-items: center;}
.login_wrap .phone_method .flex-box .btn-list { flex-shrink: 0; width: calc(100% - 284px); height: 48px; margin-left: 5px; padding: 0;}
.login_wrap .phone_method .input-box.flex-box .btn-list.btn-s { width: calc(100% - 354.5px);}
.login_wrap .btn-box { width: 100%;}
.login_wrap .btn-box .btn-list { width: 100%; margin-left: 7px;}
.login_wrap .btn-box .btn-list:nth-of-type(1) { margin-left: 0;}
.pw-result-txt { display: block; margin: 10px 0 0; font-size: 1.3rem; font-weight: 400; color: #4C4954; text-align: left; line-height: 18px; letter-spacing: -0.02em;}
.login_wrap .result_data .btn-list { height: 56px; margin-top: 0; margin-bottom: 0;}
.login_wrap .result_data .btn-list > span { font-size: 1.6rem; font-weight: 500;}
/* 비밀번호 변겅 */
.login_wrap2 { top: 50%;}
.change-pw-box { padding: 50px 40px; border-radius: 10px; background: #FFFFFF; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);}
.change-pw-box input { height: 48px; font-size: 1.5rem;}
.change-pw-box .pw-result-txt { display: block; margin-top: 0; margin-bottom: 20px; font-size: 1.5rem; font-weight: 350; color: #565656; line-height: 23px; letter-spacing: -0.02em;}
/* 관리자 승인여부 */
.login-mgr-appr-txt { text-align: center;}
.login-mgr-appr-txt p { font-size: 2.2rem; font-weight: 400; color: #343434; line-height: 30px; letter-spacing: -0.02em;}
.login-mgr-appr-txt p strong { font-weight: 700; color: var(--primary-indigo);}

/* KAMCO */
@media all and (max-width: 960px){
    .podo-wrap .header-wrap.login-header { background: transparent;}
    .login-wrap { padding-top: 50px; background: #F8F8F9;}
    .login_wrap { position: relative; top: 3rem; width: calc(100% - 40px); transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%);}
    .login_wrap > h2 { display: none;}
    .login_wrap .login { padding: 40px 30px;}
    .login_wrap .find_method input,
    .login_wrap .result_data input { height: 35px; padding: 8px 10px;}
    .login_wrap .phone_method .flex-box .btn-list { display: flex; align-items: center; flex-shrink: 0; width: auto; height: 35px; padding: 0 14px;}
    .login_wrap .phone_method .input-box.flex-box .btn-list.btn-s { flex-shrink: 0; width: auto; height: 35px; padding: 0 14px;}
    .login_wrap .phone_method .input-box.flex-box .btn-list span { line-height: 35px;}
    .login_wrap .result_text strong { display: block;}
    .login_wrap .id_find_result,
    .login_wrap .pw_find_result { padding: 40px 30px;}
    .login_wrap .find_method .bottom_btn { margin-top: 25px;}
    .login_wrap .find_enter { padding: 40px 30px;}
    .login_wrap .find_method .num_enter { margin-top: 7px;}
    .login_wrap .find_method .input-box { margin-bottom: 7px;}
    .login_wrap a.login_btn { display: flex; justify-content: center; align-items: center; height: 44px;}
    .login_wrap .result_data .btn-list { height: 44px;}
    .login_wrap input::placeholder { /* Chrome/Opera/Safari */ /* Firefox 19+ */  /* Firefox 18- */
        font-size: 13px;
    }
    .login_wrap input:-moz-placeholder{ /* Chrome/Opera/Safari */ /* Firefox 19+ */  /* Firefox 18- */
        font-size: 13px;
    }
    .login_wrap input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ /* Firefox 19+ */  /* Firefox 18- */
        font-size: 13px;
    }
    .login_wrap input::-moz-placeholder { /* Chrome/Opera/Safari */ /* Firefox 19+ */  /* Firefox 18- */
        font-size: 13px;
    }
    .login_wrap input::-ms-input-placeholder { /* Chrome/Opera/Safari */ /* Firefox 19+ */  /* Firefox 18- */
        font-size: 13px;
    }
}

/*@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}*/
/*}*/