/*로그인*/
.joinBox{border: 1px solid #ddd; border-radius: 20px; display: grid; grid-template-columns: 1fr 2fr; min-height: 260px; box-sizing: border-box;}
.joinBox .imgArea{background: #F9F5F6; border-radius: 20px 0 0 20px; display: flex; align-items: center; justify-content: center;}
.joinBox .contArea{padding: 30px 50px; box-sizing: border-box; border-radius: 0 20px 20px 0;}
.joinBox .contArea .titArea h4{font-size: 28px; color: #333; font-weight: bold; line-height: 1.2em;}
.joinBox .contArea .titArea p{color: #999; margin: 10px 0 15px 0; box-sizing: border-box; line-height: 1.4em;}
.joinBox .contArea .inputArea{display: grid; grid-template-columns: 3fr 1fr; gap: 5px;}
.joinBox .contArea .inputArea ul li input {width: 100%; margin: 0 0 5px 0; padding: 15px;}
.joinBox .contArea .inputArea ul li:last-child input {margin: 0;}
.joinBox .contArea .inputArea ul li.id input{padding-left: 50px; background: url(/images/uce/sub/id.png)no-repeat left 15px center;}
.joinBox .contArea .inputArea ul li.pw input{padding-left: 50px; background: url(/images/uce/sub/pw.png)no-repeat left 18px center;}
.joinBox .contArea .inputArea button{background: #350E6E; color: #fff;}
.joinBox .contArea> ul{display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 10px;}
.joinBox .contArea> ul> li{border: 1px solid #ddd; border-right: 0; box-sizing: border-box;}
.joinBox .contArea> ul> li> a{display: block; padding: 15px 5px; box-sizing: border-box;}
.joinBox .contArea> ul> li.join> a{background: #f3f3f3;}
.joinBox .contArea> ul> li:last-child{border-right: 1px solid #ddd;}
.joinBox .contArea .ment{font-size: 15px; margin-top: 10px; line-height: 26px;}
.joinBox .contArea .ment span{width: 20px; height: 20px; color: #fff; display: inline-flex; border-radius: 20px; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; margin-right: 3px; box-sizing: border-box;}
.joinBox .contArea .ment.red span{background: #b90910;}
.joinBox .contArea .ment.green span{background: #3f8d00;}
.joinBox .contArea .ment.blue span{background: #0056AA;}
.joinBox .contArea .ment .subConBtn{display: ruby; margin-top: 10px;}
.joinBox .btnType{margin-top: 20px;}

/*아이디찾기*/
.idContArea ol{grid-template-columns: repeat(2, 1fr) !important; gap: 20px; display: grid;}
.idContArea ol> li{border-right: 10px solid #f5f5f5 !important; border-radius: 20px; box-sizing: border-box; border: 10px solid #f5f5f5;}
.idContArea ol> li> a{padding: 100px 10px 20px 10px; display: block; text-align: center;}
.idContArea ol> li.ipin{background: url(/images/uce/sub/ipin.png)no-repeat center top 20px; background-size: 66px;}
.idContArea ol> li.phone{background: url(/images/uce/sub/phone.png)no-repeat center top 20px; background-size: 66px;}
.idContArea dl{margin-bottom: 5px; display: grid; grid-template-columns: 1fr 3fr;}
.idContArea dl dd, .idContArea dl dt{display: table-cell; border: 1px solid #ddd; padding: 12px; box-sizing: border-box;}
.idContArea dl dd{background: #f9f9f9; text-align: center; border-right: 0;}
.idContArea dl dt{color: #999;}

/*비밀번호찾기*/
.pwContArea .InputArea{display: block;}
.pwContArea .InputArea ul> li{position: relative;}
.pwContArea .InputArea ul> li input[type="password"]{width: 100%; padding: 12px 12px 12px 130px; margin-bottom: 0;}
.pwContArea .InputArea ul> li.pw01::before{content: "비밀번호"; position: absolute; left: 15px; top: 15px; z-index: 1;}
.pwContArea .InputArea ul> li.pw02::before{content: "비밀번호확인"; position: absolute; left: 15px; top: 15px; z-index: 1;}

/*회원가입*/
.joinContArea ol{display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; text-align: center;}
.joinContArea ol> li{border-radius: 20px; box-sizing: border-box; border: 10px solid #f5f5f5;}
.joinContArea ol> li> a{display: grid; gap: 10px; padding: 90px 10px 20px 10px;}
.joinContArea ol> li.yes{background: url(/images/uce/sub/yes.png)no-repeat center top 20px; background-size: 60px;}
.joinContArea ol> li.no{background: url(/images/uce/sub/no.png)no-repeat center top 20px; background-size: 60px;}
.joinContArea ol> li.general{background: url(/images/uce/sub/general.png)no-repeat center top 20px; background-size: 60px;}
.joinContArea ol> li.minor{background: url(/images/uce/sub/minor.png)no-repeat center top 20px; background-size: 60px;}

/*회원가입_대출자번호유_회원정보확인*/
.joinContArea .InputArea{display: block;}
.joinContArea .InputArea ul> li{display: inline-flex; align-items: center; width: 100%;}
.joinContArea .InputArea ul> li label{width: 150px;}

@media all and (min-width:1221px) and (max-width:1560px) {  
    

}


@media all and (max-width:1420px) {     

    /*로그인*/
    .joinBox .imgArea img{width: 160px;}
    .joinBox .contArea{padding: 30px;}
    .joinBox .contArea .titArea h4{font-size: 24px;}
    .joinBox .contArea .titArea p{font-size: 15px;}
    .joinBox .contArea ol> li> a{font-size: 15px;}

}


@media all and (max-width:660px) {  

    /*로그인*/
    .joinBox{display: block;}
    .joinBox .imgArea{padding: 30px 0; box-sizing: border-box; border-radius: 20px 20px 0 0;}
    .joinBox .imgArea img{width: 140px;}
    .joinBox .contArea{padding: 20px 30px;}
    .joinBox .contArea .titArea h4{font-size: 20px;}
    .joinBox .contArea .inputArea{display: block;}
    .joinBox .contArea .inputArea button{padding: 17px; width: 100%; margin-top: 5px;}
    .joinBox .contArea ol{display: block; padding-top: 10px; border-top: 1px dashed #ddd;}
    .joinBox .contArea ol> li{border-right: 1px solid #ddd; border-bottom: 0;}
    .joinBox .contArea ol> li:last-child{border-bottom: 1px solid #ddd;}
    .joinBox .contArea ol> li> a{font-size: 13px;}
    .joinBox .contArea a.btnType{width: 100%; text-align: center;}

    /*아이디찾기*/
    .idContArea ol> li{margin-bottom: 10px; border-bottom: 1px solid #ddd !important;}
    .idContArea dl{grid-template-columns: 2fr 3fr; margin-bottom: 3px;}

    /*회원가입*/
    .joinContArea ol> li{margin-bottom: 10px; border-bottom: 1px solid #ddd !important;}
    


}