/*로그인*/
.loginArea .loginWrap{border: 5px solid #f1f1f1; margin-top: 40px; padding: 50px 100px; box-sizing: border-box;}
.loginBox p.title{font-size: 26px; font-weight: bold; text-align: center;}
.loginBox p.ment{font-size: 17px; color: #777; text-align: center; margin: 15px auto 30px auto;}
.loginBox .inputBox{display: flex; justify-content: center;}
.loginBox .inputBox .inputArea div:nth-child(2){margin-top: 10px; position: relative;}
.loginBox .inputBox .inputArea div label{position:absolute; display:block; overflow:hidden; border:0; width:1px; height:1px; clip: rect(1px, 1px, 1px, 1px); clip-path:inset(50%);}
.loginBox .inputBox .inputArea div input{width: 440px; margin: 0 auto; padding: 25px 15px; box-sizing: border-box;}
.loginBox .inputBox .inputArea div:nth-child(1) input{padding-left: 50px; background: url(/images/uce/commmon/id.png)no-repeat 15px center;}
.loginBox .inputBox .inputArea div:nth-child(2) input{padding-left: 50px; background: url(/images/uce/commmon/pw.png)no-repeat 15px center;}
.loginBox .togglePw{position: absolute; top: 50%; transform: translateY(-50%);  cursor: pointer; width: 24px; height: 24px; right: 20px;}
.loginBox .togglePw img{width: 100%; height: 100%;}
input::-ms-reveal, input::-ms-clear {display : none;}
.loginBox .inputBox> a{background: #1f9ac6; color: #fff; margin-left: 10px; display: flex; justify-content: center; align-items: center; width: 120px; font-size: 17px;}

.loginFind{background: #f5f5f5; margin-top: 20px; padding: 30px 20px; box-sizing: border-box; text-align: center;}
.loginFind> a{display: inline-block; margin-right: 15px; color: #555; font-size: 17px;}
.loginFind> a::after{content: "|"; color: #555; margin-left: 15px;}
.loginFind> a:last-child::after{display: none;}

/*회원가입_대출자유_절차단계*/
.stageArea{box-sizing: border-box; display: grid; grid-template-columns: repeat(4,1fr); grid-column-gap: 50px; border-radius: 10px;}
.stageArea> li{background-color: #fff !important; padding: 100px 20px 20px 20px; box-sizing: border-box; text-align: center; border-radius: 10px; position: relative; border: 1px dashed #1f9ac6; box-sizing: border-box; color: #1f9ac6;}
.stageArea> li:nth-child(1){background: url(/images/uce/yjs/login/stage02.png)no-repeat center 20px;}
.stageArea> li:nth-child(2){background: url(/images/uce/yjs/login/stage05.png)no-repeat center 20px;}
.stageArea> li:nth-child(3){background: url(/images/uce/yjs/login/stage03.png)no-repeat center 20px;}
.stageArea> li:nth-child(4){background: url(/images/uce/yjs/login/stage04.png)no-repeat center 20px;}
.stageArea> li.active{background-color: #d4f3fe !important; color: #1f9ac6;}
.stageArea> li::after{content: ""; color: #1f9ac6; position: absolute; right: -42px; top: 56px; width: 32px; height: 32px; background: url(/images/uce/yjs/login/nextIcon.png)no-repeat;}
.stageArea> li:last-child::after{display: none;}

/*회원가입_대출자무_절차단계*/
.stageArea02> li:nth-child(1){background: url(/images/uce/yjs/login/stage02.png)no-repeat center 20px;}
.stageArea02> li:nth-child(2){background: url(/images/uce/yjs/login/stage01.png)no-repeat center 20px;}
.stageArea02> li:nth-child(3){background: url(/images/uce/yjs/login/stage03.png)no-repeat center 20px;}
.stageArea02> li:nth-child(4){background: url(/images/uce/yjs/login/stage04.png)no-repeat center 20px;}

/*회원가입_대출자무_미성년자_절차단계*/
.stageArea03{box-sizing: border-box; display: grid; grid-template-columns: repeat(5,1fr); grid-column-gap: 50px; border-radius: 10px;}
.stageArea03> li{background-color: #fff !important; padding: 90px 15px 20px 15px; box-sizing: border-box; text-align: center; border-radius: 10px; position: relative; border: 1px dashed #1f9ac6; box-sizing: border-box; color: #1f9ac6;}
.stageArea03> li:nth-child(1){background: url(/images/uce/yjs/login/stage02.png)no-repeat center 20px; background-size: 60px;}
.stageArea03> li:nth-child(2){background: url(/images/uce/yjs/login/stage05.png)no-repeat center 20px; background-size: 60px;}
.stageArea03> li:nth-child(3){background: url(/images/uce/yjs/login/stage01.png)no-repeat center 20px; background-size: 60px;}
.stageArea03> li:nth-child(4){background: url(/images/uce/yjs/login/stage03.png)no-repeat center 20px; background-size: 60px;}
.stageArea03> li:nth-child(5){background: url(/images/uce/yjs/login/stage04.png)no-repeat center 20px; background-size: 60px;}

/*회원가입_대출자유무*/
.loanNumArea{position: relative;}
.loanNumArea .buscaBtn{position: absolute; right: 0; top: -24px;}
.loanNumArea ol{display: grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 20px;}
.loanNumArea ol li{background: #fff; box-sizing: border-box; text-align: center; font-size: 17px; color: #333; font-weight: bold; border: 5px solid #f1f1f1; padding: 40px;}
.loanNumArea li::before{display: none;}
.loanNumArea ol li img{display: block; margin: 0 auto 10px auto; }
.loanNumArea ol li span{font-size: 15px; color: #777; font-weight: lighter;}
.loanNumArea ol li a{display: block !important; margin-top: 20px; padding: 12px; box-sizing: border-box; font-weight: lighter; border: 1px solid #ddd; color: #333; background: #f9f9f9;}

/*회원가입_대출자유_이용동의*/
.agreeArea> li{margin-top: 20px;}
.agreeArea> li:first-child{margin-top: 0;}
.agreeArea> li .grayBox{background: #fff; border: 1px solid #ddd; padding: 20px; box-sizing: border-box; max-height: 150px; overflow-x: auto;}
.agreeArea> li .grayBox p{color: #000; font-weight: bold; font-size: 16px;}
.agreeArea> li .AgreeInput{padding: 15px 20px; box-sizing: border-box; background: #f9f9f9; border: 1px solid #ddd; border-top: 0; text-align: right;}
.agreeArea> li .AllAgree{border-top: 1px solid #ddd;}
.agreeArea> li .AgreeInput input{height: 100%;}
.agreeArea> li .AgreeInput label{margin-right: 10px;}
.textCenter{text-align: center; margin-top: 20px;}
.agreeArea .joinInfo table{font-size: 13px;}
.agreeArea .joinInfo table th, .agreeArea .joinInfo table td{padding: 5px;}
.joinInfo .ma table {margin: 0;}
.joinInfo .ma table td {text-align: left;}
.agreeArea .grayBox ul> li{font-size: 13px; }
.agreeArea .grayBox .type .title{font-size: 13px; color: #1f9ac6; margin-bottom: 0;}
.agreeArea .grayBox .type .text .text_title{font-size: 13px; margin-bottom: 0;}

/*회원가입_대출자유_회원정보입력*/
.checkArea{position: relative;}
.checkArea button{background: #555; color: #fff; font-size: 13px; padding: 8px 10px; box-sizing: border-box;}
.checkArea table.boardform colgroup col:nth-child(1){width: 30% !important;}
.checkArea table.boardform tr td.toggleBox{position: relative;}
.checkArea table.boardform tr td.toggleBox p{margin-bottom: 0; font-size: 16px; font-weight: normal; color: #555;}
.togglePw01, .togglePw02, .togglePw03, .togglePw04, .togglePw05{cursor: pointer; width: 24px; height: 24px; display: inline-block; margin-left: 10px;}
.checkArea .togglePw01 img, .checkArea .togglePw02 img, .checkArea .togglePw05 img{width: 100%; height: 100%;}
.checkArea .buscaBtn{position: absolute; right: 0; top: -24px;}
.checkArea ul li::before{display: none;}
.checkArea .agreeArea{margin-bottom: 30px;}
.checkArea .ma30{margin-top: 20px;}
.checkArea .agree2{color: #1f9ac6; cursor: pointer;}

/*회원가입_가입성공*/
.compArea{padding: 150px 50px 50px 50px; box-sizing: border-box; text-align: center; background: url(/images/uce/commmon/compIcon.png)no-repeat center 50px; background-color: #f9f9f9 !important; border-radius: 20px;}
.compAreano{padding: 150px 50px 50px 50px; box-sizing: border-box; text-align: center; background: url(/images/uce/commmon/fail.png)no-repeat center 50px; background-color: #f9f9f9 !important; border-radius: 20px;}

/*회원가입_대출자무_유형선택*/
.typeArea{position: relative;}
.typeArea ol{display: grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 20px; margin-top: 20px;}
.typeArea ol li{box-sizing: border-box; font-size: 17px; border: 5px solid #f1f1f1; background-color: #fff !important; color: #555; font-weight: bold; padding: 30px; text-align: left;}
.typeArea ol li::before{display: none;}
.typeArea ol li div{position: relative; padding-left: 130px; padding: 22px 0 22px 130px;}
.typeArea ol li:nth-child(1) div::before{content: "" ; position: absolute; left: 0; top: 0; width: 119px; height: 104px; background: url(/images/uce/commmon/adult.png)no-repeat;}
.typeArea ol li:nth-child(2) div::before{content: "" ; position: absolute; left: 0; top: 0; width: 119px; height: 104px; background: url(/images/uce/commmon/child.png)no-repeat;}
.typeArea ol li p{font-size: 26px !important;}
.typeArea ol li span{font-weight: lighter; display: block;}
.typeArea ol li a{text-align: center; padding: 10px 20px; box-sizing: border-box; font-weight: lighter; border: 1px solid #ddd; width: 100%; margin-top: 20px; background: #f9f9f9;}

/*회원가입_대출자무_본인인증*/
.certifyArea ol{display: grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 20px; margin-top: 20px;}
.certifyArea ol li{box-sizing: border-box; font-size: 17px; border: 5px solid #f1f1f1; background-color: #fff !important; color: #555; font-weight: bold; padding: 40px; text-align: left;}
.certifyArea ol li:nth-child(1){background: url(/images/uce/commmon/phone.png)no-repeat right 20px bottom 20px;}
.certifyArea ol li:nth-child(2){background: url(/images/uce/commmon/phone.png)no-repeat right 20px bottom 20px;}
.certifyArea ol li::before{display: none;}
.certifyArea ol li p{font-size: 26px !important; margin-bottom: 20px !important;}
.certifyArea ol li span{font-weight: lighter; height: 46px; display: block;}
.certifyArea ol li a{text-align: center; padding: 10px 20px; box-sizing: border-box; margin-top: 30px; font-weight: lighter; border: 1px solid #ddd; background: #f9f9f9;}

/*회원가입_대출자무_미성년자_본인인증*/
.PcertifyArea{padding: 30px; box-sizing: border-box; border-radius: 20px; position: relative; padding-left: 260px; border: 1px solid #ddd; min-height: 184px;}
.PcertifyArea::before{content: ""; position: absolute; left: 30px; top: 30px; width: 100%; height: 120px; background: url(/images/uce/commmon/Pcertify.png)no-repeat;}

/*회원가입_대출자무_미성년자_입력폼*/
.AgreeCheck{border-top: 1px solid #ddd !important; text-align: left !important;}

/*정회원 레이어팝업*/
.joinLayerArea{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: none;}
.joinLayerArea .layerBox{width: 800px; background: #fff; margin: 200px auto; padding: 50px; box-sizing: border-box;}
.joinLayerArea .layerBox p{font-size: 26px; text-align: center; font-weight: bold; color: #333; margin-bottom: 30px;}
.joinLayerArea .layerBox table{border-top: 2px solid #333;}
.joinLayerArea .layerBox table tbody tr th{background: #d4f3fe; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 15px; box-sizing: border-box; vertical-align: middle;}
.joinLayerArea .layerBox table tbody tr td{border-bottom: 1px solid #ddd; padding: 15px; box-sizing: border-box; vertical-align: middle;}
.joinLayerArea .layerBox table tbody tr td .comment{padding: 5px 0;}
.joinLayerArea .layerBox .textCenter a{border: 1px solid #ddd; padding: 10px; box-sizing: border-box; width: 90px; display: inline-block;}
.joinLayerArea .layerBox .textCenter a:nth-child(1){background: #1f9ac6; color: #fff;}

/*로그인된 로그인페이지*/
.yalogin p {line-height: 2.2rem;}

/*아이디찾기*/
.noid img {float:left; width: 150px; display: block;}
.noid span {margin: 16px 0 0 24px; display: inline-block;}
.noid .basicBtn {margin-left: 24px;}
.noid .buscaBtn {position: static; margin-top: 0; line-height: 40px; padding: 0 18px; margin-left: 8px; border-radius: 6px; min-width: initial; max-width: initial;}

.title50 {width: 50%;}
.title50B {min-width:130px}

.myInfo .myin {margin-top: 0;}
.prg_detail .doc {line-height: 1.5rem;}

/*1128 카드비밀번호 입력*/
#toggle-input {cursor: pointer; background: #555; padding: 2px 10px; color: #fff; font-weight: normal; font-size: 14px; margin: 5px 0;}

.agreeArea > li .AgreeInput input {height: 13px; width: 13px; -webkit-appearance: radio; appearance: radio; margin: 5px; cursor: pointer;}

/*태블릿모바일*/
@media all and (max-width:1299px) {  
}

/*mobile*/
@media all and (max-width:860px) {
    /*로그인*/
    .loginArea .loginWrap{padding: 20px; margin: 0;}
    .loginBox p.title{font-size: 20px; line-height: 28px; padding: 0 20px;}
    .loginBox p.ment{font-size: 13px; line-height: 18px; margin: 10px auto 20px auto;}
    .loginBox .inputBox{display: block;}
    .loginBox .inputBox .inputArea div input{width: 100%; font-size: 13px; padding: 22px 15px;}
    .loginBox .inputBox .inputArea div:nth-child(2){margin-top: 5px;}
    .loginBox .inputBox> a{width: 100%; padding: 16px; box-sizing: border-box; margin-top: 5px; margin-left: 0; font-size: 15px;}
    .loginFind{padding: 20px 0;}
    .loginFind> a{font-size: 13px; margin-right: 5px;}
    .loginFind> a::after{margin-left: 5px;}

    /*회원가입_절차단계*/
    .stageArea{grid-template-columns: repeat(3,1fr); grid-column-gap: 10px; grid-row-gap: 10px;}
    .stageArea> li{padding: 66px 8px 15px 8px; background-size: 40px !important; font-size: 13px;}
    .stageArea> li::after{display: none;}

    /*회원가입_대출자유무*/
    .loanNumArea ol{display: block; }
    .loanNumArea ol li{margin-bottom: 10px;}
    .loanNumArea ol li a{padding: 10px; font-size: 15px;}
    .loanNumArea ol li img{width: 70px; }

    /*회원가입_대출자유_회원정보입력*/
    .checkArea table.boardform colgroup col:nth-child(1){width: 30% !important;}

    /*회원가입_대출자유_이용동의*/
    .agreeArea> li .grayBox{font-size: 13px;}
    .agreeArea> li .AgreeInput{padding: 10px; font-size: 13px;}
	
    /*회원가입_가입성공*/
    .compArea{padding: 100px 20px 30px 20px; background: url("/images/uce/commmon/compIcon.png")no-repeat center 30px; background-size: 50px;}
    .compArea .textCenter a{display: block; margin-bottom: 5px;}

    /*회원가입_대출자무_본인인증*/
    .certifyArea ol{display: block;}
    .certifyArea ol li{margin-top: 10px; padding: 30px;}
    .certifyArea ol li:nth-child(1){margin-top: 0; background-size: 50px;}
    .certifyArea ol li:nth-child(2){background-size: 70px;}
    .certifyArea ol li p{font-size: 20px !important; margin-bottom: 10px !important;}
    .certifyArea ol li a{font-size: 15px; padding: 7px 15px;}

    /*회원가입_대출자무_유형선택*/
    .typeArea ol{display: block;}
    .typeArea ol li{margin-bottom: 10px;}
    .typeArea ol li div{padding: 15px 0 15px 110px;}
    .typeArea ol li p{font-size: 20px;}
    .typeArea ol li a{font-size: 15px; margin-top: 10px;}
    .typeArea ol li:nth-child(1) div::before, .typeArea ol li:nth-child(2) div::before{background-size: 100px; width: 100px; height: 88px;}

    /*회원가입_대출자무_미성년자_본인인증*/
    .PcertifyArea{padding: 150px 30px 30px 30px}
    .PcertifyArea::before{left: 50%; margin-left: -90px; height: 104px; background-size: 180px;}

    /*정회원 레이어팝업*/
    .joinLayerArea .layerBox{width: calc(100% - 20px); padding: 30px;}
    .joinLayerArea .layerBox table{font-size: 13px;}

}

/*tablet*/
@media all and (min-width:861px) and (max-width:1299px) {  
    /*회원가입_절차단계*/
    .stageArea> li{padding: 100px 8px 20px 8px;}
}

/*pc*/
@media all and (min-width:1300px) {  
}