@charset "utf-8";

/* login */
.loginW{background-color: #f0f1f5; min-height: 1000px;}
.loginW .wrap{width: 600px; margin: 0 auto; padding-top: 80px; text-align: center; box-sizing: border-box;}
.loginW .wrap .loginTit{margin-bottom: 30px; font-size: 36px; font-family:NotoSansB, sans-serif;}
.loginW .wrap > p .loginSubTit1{display: block; margin-bottom: 5px; color: #1f1f1f; font-size: 20px; font-family:NotoSansM, sans-serif;}
.loginW .wrap > p .loginSubTit2{display: block; color: #555; font-family:NotoSansM, sans-serif;}
.loginW .wrap > p .loginSubTit3{color: #555; font-size: 18px;}
.loginW .wrap > p .loginGoto{color: #320c9f; font-size: 18px; text-decoration: underline; margin-left: 15px;}
.loginW .loginContent{margin: 60px 0 40px 0; padding: 40px 80px 50px 80px; border: 1px solid #e3e3e3; border-radius: 3px; background: #fff; box-sizing: border-box;}
.loginW .loginContent .loginType{margin-bottom: 25px;}
.loginW .loginContent .loginType li{display: inline-block;}
.loginW .loginContent .loginType li a{display: block; width: 200px; height: 44px; line-height: 18px; margin: 5px; color: #797488; font-family:NotoSansB, sans-serif; font-size: 18px; border-radius: 25px; border: 1px solid #e3e3e3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center;-ms-flex-pack: center; justify-content: center;}
.loginW .loginContent .loginType li.on a{color: #fff; border: none;}
.loginW .loginContent .item{position: relative; margin-bottom: 12px;}
.loginW .loginContent .item .phoneNumber{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;-webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.loginW .loginContent .item .phoneNumber input::placeholder{color:#757a88;}
.loginW .loginContent .item .prtblTelno{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;-webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.loginW .loginContent .item .prtblTelno input::placeholder{color:#757a88;}
.loginW .loginContent .item .email{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;-webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.loginW .loginContent .item .email input::placeholder{color:#757a88;}
.loginW .loginContent .item .certificationNum{position:relative;display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;-webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.loginW .loginContent .item .timer{min-width: 80px;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.loginW .loginContent .item input{width: 100%; height: 55px; font-size: 16px; padding-left: 17px;}
.loginW .loginContent .item input.loginError{border: 1px solid #ed145b;}
.loginW .loginContent .item input#id{padding-left: 50px; background: url(../../../image/ko/ico/idIcon.png) no-repeat left 20px center;}
.loginW .loginContent .item input#id::placeholder {color:#797488}
.loginW .loginContent .item input#id::-moz-placeholder {color:#797488}
.loginW .loginContent .item input#id::-webkit-placeholder {color:#797488}
.loginW .loginContent .item input#id::-ms-placeholder {color:#797488}
.loginW .loginContent .item input#pw{padding-left: 50px; background: url(../../../image/ko/ico/pwIcon.png) no-repeat left 20px center;}
.loginW .loginContent .item input#pw::placeholder {color:#797488}
.loginW .loginContent .item input#pw::-moz-placeholder {color:#797488}
.loginW .loginContent .item input#pw::-webkit-placeholder {color:#797488}
.loginW .loginContent .item input#pw::-ms-placeholder {color:#797488}
.loginW .loginContent .item input#newPassword{padding-left: 50px; background: url(../../../image/ko/ico/pwIcon.png) no-repeat left 20px center;}
.loginW .loginContent .item input#confirmPassword{padding-left: 50px; background: url(../../../image/ko/ico/pwIcon.png) no-repeat left 20px center;}
.loginW .loginContent .item.enabled p.placeholder{position: absolute; left: 17px; top: 16px; color: #757a88; font-size: 16px;}
.loginW .loginContent .item.enabled p.placeholder.active{font-size: 13px; top: 4px;}
.loginW .loginContent .item input.active{padding-top: 18px;}
.loginW .loginContent .loginBtn{margin-top: 50px;}

/* 아이디, 비밀번호 찾기 버튼 */
.loginW .link {margin-top:16px}
.loginW .link li a{color: #384655; font-size: 16px;}
.loginW .link li:not(:last-of-type){padding-right: 40px; position: relative;}
.loginW .link li:not(:last-of-type)::after{display: block; content: ''; width: 1px; height: 16px; background: #abb1b7; position: absolute; right: 17px; top: 3px;}

/* 정보입력 오류 메세지 */
.loginW .loginContent .msg .msgError{color: #ed145b; font-size: 16px; text-align: left;}

/* 인증번호 발송 메세지 */
.loginW .loginContent .msg .msgFind{margin-top: 50px; color: #4d2bf4; font-size: 18px; font-family:NotoSansM, sans-serif;}

/* 아이디 찾기 */
.findBtn{margin-top: 50px;}
.findBtn li{display: inline-block;}
.findIdPw .loginContent{margin-top: 20px;}
.findIdPw .loginContent .findNotice{margin-bottom: 35px; color: #555; font-size: 18px; font-family:NotoSansM, sans-serif;}
.findIdPw .loginContent .loginBtn{margin-top: 15px;}
.loginContent .certificationBtn{margin-left: 15px; min-width: 130px; margin-bottom: 12px;}

/* 회원가입 */
.loginW .loginContent.joinContent{padding: 40px 30px 50px 30px;}
.loginW .loginContent > .inputChk{ margin-bottom: 40px;}
.loginW .loginContent .inputChk{position: relative; display: block;text-align: left}
.loginW .loginContent .inputChk input{position: absolute; left: 0; top: 4px;}
.loginW .loginContent .inputChk label{display: inline-block; padding-left: 25px; color: #333; font-size: 16px; text-align: left}
.loginW .loginContent .inputChk label .termsNecessary{font-size: 16px; margin-left: 3px; color: #ed145b; word-break: keep-all;}
.loginW .loginContent .inputChk label .chkAllTxt{color: #333; font-size: 16px;}
.loginW .termsBx{margin-bottom: 30px;}
.loginW .termsBx .termsBox{margin-top: 15px; padding: 15px 18px 18px 18px; border: 1px solid #e3e3e3; border-radius: 3px; height: 80px; overflow-y: auto; box-sizing: border-box;}
.loginW .termsBx .termsBox p{text-align: left;color: #949494;}
.loginW .termsBx .termsBox::-webkit-scrollbar{width: 14px;}
.loginW .termsBx .termsBox::-webkit-scrollbar-thumb{background-color: #d0d7ea; border-radius: 15px; background-clip: padding-box; border: 4px solid transparent;}
.loginW .loginContent .btnArea .loginBtn{width: 200px; margin: 5px;}

/* 정보입력 오류 */
.loginW .loginContent .item.error{display: block;}
.loginW .loginContent .item.error input{border: 1px solid #ed145b;}
.loginW .loginContent .item.error p{color: #ed145b;}
.loginW .loginContent .item.error .errorMsg span{margin-top: 10px; display: block; color: #ed145b; text-align: left; padding-left: 22px; background: url(../../../image/ko/ico/errorMsgIcon.png) no-repeat left top 4px;}

/* 회원가입 완료 */
.loginW.joinComplete{min-height: 700px;}
.loginW.joinComplete .wrap{width: 440px; padding-top: 150px;}
.loginW .wrap .loginTit2 span{display: block; color: #384655; font-size: 28px; font-family:NotoSansB, sans-serif; padding-top: 150px; background: url(../../../image/ko/ico/loginChk.png) no-repeat top center;}
.loginW .wrap > p .loginSubTit4{display: block; color: #818181; font-size: 18px; margin: 15px 0 70px 0;}

/* 모바일 이하 */
@media screen and (max-width:640px){
    .loginW{height: auto; min-height: 1000px;}
    .loginW .wrap{width: 100%; padding: 120px 16px 0 16px;}
    .loginW .loginContent{padding: 40px 15px;}
    .loginW .loginContent .loginType li a{width: 110px;}

    /* 아이디 찾기 */
    .findBtn li a{min-width: 0;}
    .loginContent .certificationBtn{width: 100%; margin: 0px 0 0px 5px;}

    /* 회원가입 */
    .loginW .loginContent .btnArea .loginBtn{width: 100px;}

    /* 회원가입 완료 */
    .loginW.joinComplete .wrap{width: 100%;}
    .loginW .wrap .loginTit2 span{font-size: 26px;}
}