@charset "UTF-8";

/*현대 - 로그인*/

.login-wrap {background: #FAFAFA; min-height: 100vh;}
/* overflow-x: hidden으로 BFC 생성 → 자식 margin이 바깥으로 collapse되는 현상 방지
   #wrap(ID)보다 높은 명시도(ID+class)로 clip 재정의 */
#wrap.login-wrap { overflow-x: hidden; }
/* 로그인 페이지: sticky 헤더 해제 (상단 여백 방지) */
#wrap.login-wrap #header { position: relative; top: auto; box-shadow: none; border-bottom: none; }
.login-wrap.depth-main#wrap #header{display:none; min-height: 0;}
.login-wrap.depth-main#wrap #header h1{margin-top: 60px}
/*260622 삭제,추가,수정*/
/*.login .login-title{height: 300px; background: url("../images/@thumb/thumb_1320x300.jpg") 0 0 no-repeat;border-radius: 5px; color: #ffffff;}
.login .login-title div{width: 1060px; margin: 0 auto;}
.login .login-title h2{font-size: 70px; line-height: 70px; padding-top: 91px;}
.login .login-title .summary{font-size: 16px; margin-top: 24px}
.login .fieldset .field{float: left; margin: 0;}
.login .fieldset .field .insert{display: block; border-radius: 5px; width: 400px; height: 50px; margin: 0; background-color: #ffffff; border: 1px solid #d1d1d1; box-sizing: border-box;}
.login .fieldset .field .insert:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.login .fieldset .field .insert+.insert{margin-top: 10px}
.login .fieldset .field .insert label{vertical-align: top;float: left;width: 48px;vertical-align: top; }
.login .fieldset .field .insert input{border: 0 none;vertical-align: top; padding-left: 20px;height: 100%; width: 310px; box-sizing: border-box; border-left: 1px solid #d1d1d1;-webkit-appearance: none;}
.login .fieldset .btn.large{float: right;width: 110px; height: 110px; background-color: #002c5f; color: #ffffff; border: 0 none;-webkit-appearance: none;}
.login .data-list{width: 700px; margin: 0 auto; }
.login.new .fieldset{padding: 50px 90px; }*/
.login .fieldset{width: 600px; padding: 60px; margin: 135px auto; background:#fff; border-radius: 15px; box-shadow: 2px 2px 10px 1px #ddd;}
.login .fieldset .login-title{width: 100%; margin: 0 auto; text-align: center;}
.login .fieldset .login-title .logo-area {display: flex; align-items: center; justify-content: center; gap: 20px;}
.login .fieldset .login-title h2{font-size: 32px; line-height: 40px; font-weight:bold; color:#111;}
.login .fieldset .login-title .summary{font-size: 14px; margin-top: 12px; padding-bottom: 40px; color: #545454;}
.login .fieldset .field{float: left; margin: 0; width:100%;}
.login .fieldset .field .insert{display: block; border-radius: 5px; width: 100%; height: 50px; margin: 0; background-color: #ffffff; border: 1px solid #d1d1d1; box-sizing: border-box;}
.login .fieldset .field .insert:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.login .fieldset .field .insert+.insert{margin-top: 10px}
.login .fieldset .field .insert label{float: left; width: 30px; height: 50px; display: flex; align-items: center; justify-content: flex-end;}
.login .fieldset .field .insert label img{width: 16px; height: 16px;}
.login .fieldset .field .insert input{font-size:16px; border: 0 none;vertical-align: top; padding-left: 6px;height: 100%; width: 430px; box-sizing: border-box; -webkit-appearance: none; outline: none; color: #111111;}
.login .fieldset .btn.large{width: 100%; height: 50px; line-height: 48px; padding: 0 25px; background-color: #111111; color: #ffffff; border: 0 none; -webkit-appearance: none; margin-top:30px; font-size: 14px; font-weight: bold;}
.login .fieldset .data-list{font-size: 13px; line-height: 24px; margin-top: 20px; color: #828282;}
.login.new .fieldset{padding: 50px 90px; }

/*로그인-공통*/
/*260622 히든
#wrap.common-login #header h1{width: 267px;height: 30px;background: 0 none;}
#wrap.common-login #header h1:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
#wrap.common-login #header h1 .link01{float: left;width: 180px;height: 30px;background: url('../images/common/h1.gif') 0 50% no-repeat;}
#wrap.common-login #header h1 .link02{float: right;width: 70px;height: 30px;background: url('../images/common/h1_kia.gif') 0 0 no-repeat;}
#wrap.common-login .login .login-title{height: 300px; background: url("../images/@thumb/thumb_1320x300_06.jpg") 0 0 no-repeat;border-radius: 5px; color: #ffffff;}
#wrap.common-login .login .fieldset .btn.large{background-color: #292929;}*/


/*신규입사자*/
.newcomer#wrap.depth-main{max-width: 100%;}
.newcomer.depth-main#wrap #header{min-height: 123px;border-bottom: 2px solid #003166;}
.newcomer#wrap.depth-main #header .header-wrap h1{margin-top: 60px;}
.newcomer.depth-main#wrap #footer{max-width: 1320px;margin: 0 auto;}
.newcomer-intro{width: 1060px !important;margin: 0 auto;padding-top: 60px;}
.newcomer-intro .intro-text{padding: 48px 0 55px;background-color: #ececec;border-radius: 5px;-webkit-border-radius: 5px;}
.newcomer-intro .intro-text .content-title{font-size: 40px;line-height: 60px;padding: 0;text-align: center;}
.newcomer-intro .intro-text .welcome{display: block;position: relative;padding-bottom: 30px;font-size: 15px;line-height: 25px;color: #555;text-align: center;}
.newcomer-intro .intro-text .welcome:after{content: '';display: inline-block;position: absolute;left:0;right: 0;bottom: 0;width: 48px;height: 2px;margin: 0 auto;background-color: #8f8f8f;}
.newcomer-intro .intro-text .data-list{padding-top: 30px;text-align: center;}
.newcomer-intro .intro-text .data-list:after{content: '';display: block;clear: both;height: 0;visibility: hidden;text-align: center;}
.newcomer-intro .intro-text .data-list li{display: inline-block;width: 333px;padding: 0 28px;text-align: left;box-sizing: border-box;-webkit-box-sizing: border-box;vertical-align: top;}
.newcomer-intro .intro-text .data-list li h3{padding-top: 145px;font-size: 18px;line-height: 18px;text-align: center;color: #002c5f;font-weight: 600;background-position: 50% 0;background-repeat: no-repeat;}
.newcomer-intro .intro-text .data-list li.list01 h3{background-image: url('../images/common/ico_newbie.png');}
.newcomer-intro .intro-text .data-list li.list02 h3{background-image: url('../images/common/ico_newbie_02.png');}
.newcomer-intro .intro-text .data-list li.list03 h3{background-image: url('../images/common/ico_newbie_03.png');}
.newcomer-intro .intro-text .data-list li p{padding-top: 12px;font-size: 14px;line-height: 24px;color: #555;}
.newcomer-intro .agree-wrap{padding-top: 60px;}
.newcomer-intro .agree-wrap:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.newcomer-intro .agree-wrap .agreement{float: left;width: 500px;}
.newcomer-intro .agree-wrap .agreement + .agreement{padding-left: 60px;}
.newcomer-intro .agree-wrap .agreement h3{padding-bottom: 30px;padding-left: 9px;font-size: 18px;line-height: 20px;font-weight: 600;color: #292929;}
.newcomer-intro .agree-wrap .agreement h3 label{margin-right: 14px;vertical-align: middle;}
.newcomer-intro .agree-wrap .agreement h3 div.checker{vertical-align: 1px;}
.newcomer-intro .agree-wrap .agreement h3 div.checker input{vertical-align: middle;}
.newcomer-intro .agree-wrap .agreement .text-wrap{width: 500px;height: 122px;padding: 25px 30px;font-size: 14px;line-height: 20px;line-height: 24px;color: #555;background-color: #ececec;box-sizing: border-box;-webkit-box-sizing: border-box;overflow-y: scroll;}
.newcomer-intro .btn-area{padding-top: 40px;text-align: center;}
.newcomer-intro .btn-area .btn{width: 120px;margin: 0 8px;text-align: left;}

/*입사관련 안내사항*/
.item-guidance{width: 1060px !important;margin: 0 auto;}
.item-guidance .content-title{padding: 60px 0 26px;font-size: 40px;line-height: 40px;text-align: center;}
.item-guidance .sub-title{display: block;padding-bottom: 40px;text-align: center;font-size: 25px;line-height: 25px;color: #555;font-weight: normal;}
.item-guidance .guidance-detail{padding: 40px 65px 36px;background-color: #ececec;border-radius: 5px;-webkit-border-radius: 5px;box-sizing: border-box;-webkit-box-sizing: border-box;}
.item-guidance .guidance-detail .section-title{margin: 0 0 6px;}
.item-guidance .guidance-detail h4{padding-top: 14px;font-size: 14px;line-height: 25px;color: #292929;font-weight: 600;}
.item-guidance .guidance-detail .data-list,
.item-guidance .guidance-detail p{padding-top: 2px;}
.item-guidance .guidance-detail .data-list li span{display: block;padding-left: 10px;}
.item-guidance .btn-area{padding-top: 40px;text-align: center;}
.item-guidance .btn-area .btn.type04{width: 233px;text-align: left;}
.item-guidance .laststep{margin-top:100px;padding: 40px 65px 36px;background-color: #ececec;border-radius: 5px;-webkit-border-radius: 5px;box-sizing: border-box;-webkit-box-sizing: border-box;}

/*신규입사자 개인정보 입력사항*/
.newcomer-info:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.newcomer-info .personal-info{width: 1060px;margin: 0 auto;padding-top: 60px;}
.newcomer-info .content-title{float: left;padding-bottom: 28px;font-size: 40px;line-height: 40px;}
.newcomer-info .step{float: right;}
.newcomer-info .step:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.newcomer-info .step li{float: left;position: relative;width: 90px;padding-left: 50px;text-align: right;box-sizing: border-box;-webkit-box-sizing: border-box;}
.newcomer-info .step li:first-child{width: 40px;padding-left: 0;}
.newcomer-info .step li:after{content: '';display: block;position: absolute;left: 0;top: 20px;width: 50px;height: 1px;background-color: #d4d4d4;}
.newcomer-info .step li.active:after{content: '';display: block;position: absolute;left: 0;top: 20px;width: 50px;height: 1px;background-color: #00aad2;}
.newcomer-info .step li:first-child:after{display: none;}
.newcomer-info .step li a{display: block;width: 38px;height: 38px;line-height: 40px;font-size: 20px;color: #bebebe;text-align: center;border: 1px solid #d1d1d1;border-radius: 50%;-webkit-border-radius: 50%;background-color: #fff;}
.newcomer-info .step li.active a{background-color: #00aad2;color: #fff;border: 1px solid #00aad2;}
.newcomer-info .step2{float: right;}
.newcomer-info .step2:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.newcomer-info .step2 li{float: left;position: relative;width: 190px;padding-left: 150px;text-align: right;box-sizing: border-box;-webkit-box-sizing: border-box;}
.newcomer-info .step2 li:first-child{width: 40px;padding-left: 0;}
.newcomer-info .step2 li:after{content: '';display: block;position: absolute;left: 0;top: 20px;width: 150px;height: 1px;background-color: #d4d4d4;}
.newcomer-info .step2 li.active:after{content: '';display: block;position: absolute;left: 0;top: 20px;width: 150px;height: 1px;background-color: #00aad2;}
.newcomer-info .step2 li:first-child:after{display: none;}
.newcomer-info .step2 li a{display: block;width: 38px;height: 38px;line-height: 40px;font-size: 20px;color: #bebebe;text-align: center;border: 1px solid #d1d1d1;border-radius: 50%;-webkit-border-radius: 50%;background-color: #fff;}
.newcomer-info .step2 li.active a{background-color: #00aad2;color: #fff;border: 1px solid #00aad2;}
.newcomer-info .table-wrap{clear: both;}
.newcomer-info .table-wrap .data-table tbody tr td:last-child div{color: #555;}
.newcomer-info .table-wrap .data-table tbody tr td > div:after{content: '';display: block;clear: both;height: 0;visibility: hidden;}
.newcomer-info .table-wrap .data-table tbody tr td div.selector span{color: #292929;}
.newcomer-info .table-wrap .data-table tbody tr td div.thumb{display: inline-block;width: 100px;margin-right: 16px;vertical-align: bottom;}
.newcomer-info .table-wrap .data-table tbody tr td div.thumb img{width: 100%;}
.newcomer-info .table-wrap .data-table tbody tr td div.papers{line-height: 30px;}
.newcomer-info .table-wrap .data-table tbody tr td div.papers span{display: block;float: left;max-width: 120px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;word-break: break-all;}
.newcomer-info .table-wrap .data-table tbody tr td div.address{line-height: 30px;}
.newcomer-info .table-wrap .data-table tbody tr td div.address span{display: block;float: left;width: 280px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;word-break: break-all;}
.newcomer-info .table-wrap .data-table tbody tr.attach td div{vertical-align: bottom;}
.newcomer-info .table-wrap .data-table tbody tr.attach td .btn.type01{float: none;display: inline-block;vertical-align: bottom;}
.newcomer-info .table-wrap .data-table tbody tr td .data-list li{font-size: 14px;line-height: 25px;color: #555;}
.newcomer-info .table-wrap .data-table tbody tr td .ico.date{float: right;}
.newcomer-info .table-wrap .data-table tbody tr td .radio{margin-left: 6px;margin-right: 15px;}
.newcomer-info .table-wrap .data-table tbody tr.disability td .btn.type01{float: right;}
.newcomer-info .table-wrap .data-table tbody tr td div .btn.type01{float: right;}
.newcomer-info .btn-area{position: relative;padding-top: 40px;text-align: center;}
.newcomer-info .btn-area .btn.large{width: 120px;margin: 0 8px;text-align: center;}
.newcomer-info .btn-area .btn-left{position: absolute;left: 0;top: 20px;font-weight: 600;}
.newcomer-info .btn-area .btn .ico.prev{display: inline-block;width: 7px;height: 12px;margin-right: 10px;margin-left: 0;background: url('../images/common/ico_prev.png') 0 center no-repeat;}
.newcomer-info .btn-area .btn .ico.next{display: inline-block;width: 7px;height: 12px;background: url('../images/common/ico_next.png') 0 center no-repeat;}
.newcomer-info .btn-aside{top: 0;}
.newcomer-info .notice{position: relative;}
.newcomer-info .balloon-word{position: absolute;right: 0;top: 0;z-index: 10;}
.newcomer-info .balloon-word .ico-info{display: inline-block;float: right;width: 20px;height: 20px;background: url('../images/common/ico_info_04.png') 0 0 no-repeat;}
.newcomer-info .balloon-word .text-box{display: none;position: relative;margin-top: -35px;margin-right: 38px;padding-right: 27px;}
.newcomer-info .balloon-word  .text-box.active{display: block;}
.newcomer-info .balloon-word .text-box p{padding: 23px 40px 23px 20px;font-size: 15px;line-height: 25px;color: #fff;background-color: #00aad2;border-radius: 20px;-webkit-border-radius: 20px;}
.newcomer-info .balloon-word .text-box:after{content: '';display: block;position: absolute;right: 1px;top: 32px;width: 27px;height: 26px;background: url('../images/common/balloon_03.png') 0 0 no-repeat;}
.newcomer-info .section{clear: both;}
.newcomer-info .section .section-title span{color: #555;}
.newcomer-info .data-list{padding: 14px 0 54px;}
.newcomer-info .data-list li{padding-left: 10px;text-indent: -10px;font-size: 14px;line-height: 25px;}
.newcomer-info .data-list li a{text-decoration: underline;}
.newcomer-info .notice-box{padding: 4px 30px 24px;background-color: #ececec;}
.newcomer-info .notice-box h4{padding-top: 26px;font-size: 14px;line-height: 14px;color: #292929;font-weight: 600;}
.newcomer-info .notice-box ul{padding-top: 7px;}
.newcomer-info .notice-box ul li{padding-left: 10px;text-indent: -10px;font-size: 14px;line-height: 25px;}
.newcomer-info .notice-box p{padding-top: 7px;font-size: 14px;line-height: 25px;}
.newcomer-info div.uploader{width: 92px;}
.newcomer-info div.uploader span.filename{display: none !important;width:0;height:0;}
.newcomer-info div.uploader span.action{position: absolute;left:0;right:auto;top:0;margin-left: 0;z-index: 10;}
.newcomer-info div.uploader input{display: block;float: none;position: absolute;left: 0;right: auto;top: 0;z-index: 100;cursor: pointer;}
.newcomer-info .alert-text{clear: both;padding-bottom: 10px;text-align: left;vertical-align: bottom;overflow: hidden;}
.newcomer-info .alert-text strong{float: left;font-size: 14px;color: #e63312;font-weight: 600;font-weight: normal;}
.newcomer-info .alert-text p{float: right;display: inline-block;text-align: right;font-size: 14px;color: #e63312;font-weight: 600;font-weight: normal;}
.newcomer-info .alert-text p span{margin-right: 6px;}

/*20210224_OTP관련 셀렉트스타일 추가*/
/*260622 삭제.login .insert.has-select-mix div.selector-wrap{width:140px; height:48px; line-height:48px; float:left; display: inline-block;}
.login .insert.has-select-mix div.selector{width:100%; height:48px; line-height:48px; border:none;}
.login .insert.has-select-mix div.selector span{width:100%; height:48px; line-height:48px; background-position:right -86px; color:#555;}
.login .insert.has-select-mix div.selector-wrap + input{width:258px; border-radius:0 5px 5px 0; position:relative; z-index:1;}
*/
/*260622 추가*/
.login .fieldset .field .insert.has-select-mix {border:0;}
.login .insert.has-select-mix div.selector-wrap{background-color: #ffffff; border: 1px solid #d1d1d1; border-radius:5px; box-sizing: border-box; overflow: hidden; width:140px; height:48px; float:left; display: inline-flex; align-items: center; margin-right:4px;}
.login .insert.has-select-mix div.selector{width:100%; height:100%; border:none; display: flex; align-items: center; padding-left:0; border-radius:0; background-color:transparent; overflow:hidden;}
.login .insert.has-select-mix div.selector span{width:100%; height:46px; line-height:44px; padding-left:12px; background-position:right -86px; color:#111111; font-size:14px; font-weight:bold; box-sizing:border-box;}
.login .insert.has-select-mix div.selector select{padding-left:12px;}
.login .insert.has-select-mix div.selector-wrap + input{font-size:16px; width:336px; height:48px; border-radius:5px; position:relative; z-index:1; border:1px solid #d1d1d1; color:#6b6b6b; padding:0 12px; box-sizing:border-box;}
.login .insert.has-select-mix div.selector-wrap + input:disabled{background-color:#f0f0f0;}

/*비밀번호 눈 아이콘 토글*/
.login .fieldset .field .insert.pw{position: relative;}
.login .fieldset .field .insert.pw input{width: 390px;}
.login .fieldset .field .insert.pw input::-ms-reveal,
.login .fieldset .field .insert.pw input::-ms-clear{display: none;}
.login .btn-toggle-pw{position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #aaa; padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 0;}
.login .btn-toggle-pw:hover{color: #333;}
.login .btn-toggle-pw .ico-eye-off{display: none;}
.login .btn-toggle-pw.show-pw .ico-eye{display: none;}
.login .btn-toggle-pw.show-pw .ico-eye-off{display: block;}

/*placeholder 색상*/
.login .fieldset .field .insert input::placeholder{color: #949494;}
.login .fieldset .field .insert input::-webkit-input-placeholder{color: #949494;}
.login .fieldset .field .insert input::-moz-placeholder{color: #949494;}
.login .fieldset .field .insert input:-ms-input-placeholder{color: #949494;}

/*로그인 버튼 클릭 후 안내 메시지*/
#otpMessage{font-size: 13px; color: #111111;}

/*260622 자동완성 배경색 제거*/
.login .fieldset .field .insert input:-webkit-autofill,
.login .fieldset .field .insert input:-webkit-autofill:hover,
.login .fieldset .field .insert input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    box-shadow: 0 0 0px 1000px #ffffff inset;
}

/*260708 common.css fieldset 개편으로 인한 로그인 페이지 스타일 복원*/
.login .fieldset { border: none; }
.login .fieldset select { width: auto; height: auto; -webkit-appearance: auto; appearance: auto; }