/*회원가입 단계*/
.joinStage{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px; margin-bottom: 50px; background: #F1F5FB; padding: 25px; box-sizing: border-box; border-radius: 10px;}
.joinStage> li{box-sizing: border-box; padding: 20px 15px; display: flex; box-shadow: 3px 4px 10px 0px rgba(196, 106, 64, 0.07); background: #fff; border-radius: 10px; align-items: center; justify-content: center; position: relative; color: #777; font-size: 20px; font-weight: 300; text-align: center;}
.joinStage> li::after{content: ">"; position: absolute; right: -22px; top: 20px; color: #819ddd; font-size: 20px; font-weight: 300;}
.joinStage> li:last-child:after{display: none;}
.joinStage> li.active{color: #32446D; position: relative; font-weight: 600;}
.joinStage> li> p{position: relative;}
.joinStage> li.active> p::after{content: ""; position: absolute; width: 100%; height: 1px; right: 0; bottom: 0; background-color: #32446D;}

/*01. 회원가입 동의*/
.agreeArea> li{margin-bottom: 30px;}
.agreeArea> li> p.tit{font-size: 20px;}
.agreeArea> li> p.tit button{background: #32446D; color: #fff; padding: 5px; box-sizing: border-box; border-radius: 5px; vertical-align: middle; margin-left: 5px;}
.agreeArea> li .joinInfo{padding: 0 !important;}
.agreeArea> li .joinInfo p.cont{font-size: 15px; padding: 10px 20px; box-sizing: border-box; background: #fff;}
.agreeArea> li .joinInfo .agreeBox{border-top: 1px solid #ddd; padding: 10px 20px; box-sizing: border-box; text-align: right; font-size: 15px;}
.agreeArea> li:first-child .joinInfo .agreeBox{background: #32446D; color: #fff;}
.useLayer{position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgb(0,0,0,0.6); z-index: 99; display: none;}
.useLayer .useBox{background: #fff; width: 1000px; margin: 150px auto; padding: 30px; box-sizing: border-box; }
.useLayer .useBox p.tit{font-size: 20px; font-weight: 600; margin-bottom: 10px; color: #000;}
.useLayer .useBox .grayBox{padding: 20px; font-size: 15px; max-height: 340px; margin-bottom: 20px; overflow-y: auto; line-height: 24px;}
.useLayer .useBox .centerBox .btnType{padding: 5px 20px; font-size: 15px;}
.agreeTable{margin-top: 10px; border-top: 0;}
.agreeTable thead tr th, .agreeTable tbody tr td{padding: 10px;}
.agreeTable thead tr th{background: #32446D; color: #fff;}
.agreeTable tbody tr td{background: #FFF;}

/*02. 회원가입_본인인증*/
.certifyArea{box-sizing: border-box; border: 5px solid #f1f1f1; font-weight: bold; padding: 40px; margin-top: 20px; padding-left: 270px; background: url(/images/uce/sub/joinCertify.png)no-repeat left 40px center; min-height: 270px;}
.certifyArea p{font-size: 26px !important; margin-bottom: 20px !important;}
.certifyArea ol li{font-weight: 300; }
.certifyArea a{text-align: center; padding: 10px 20px; box-sizing: border-box; margin-top: 20px; font-weight: 300; border: 1px solid #ddd; display: block; width: 200px;}

/*03. 회원가입_정보입력*/
.joinArea{position: relative;}
.joinArea button.check{background: #32446D; color: #fff; font-size: 15px; padding: 10px; box-sizing: border-box; border: 1px solid #32446D; font-weight: 600; vertical-align: middle;}
.joinArea button.check01{background: #fff; color: #32446D; border: 1px solid #32446D;}
.mark{border-radius: 20px; width: 16px; height: 16px; display: inline-flex; justify-content: center; align-items: center; font-size: 11px; vertical-align: 1px; font-weight: 700;}
.mark01{background: #32446D; color: #fff; border: 1px solid #32446D}
.mark02{background: #f9f9f9; border: 1px solid #ddd; color: #ddd;}
.joinArea .tableType03 tbody tr td p{font-weight: 300;}
.joinArea .tableType03 tbody tr td ol> li{display: inline-block; font-size: 15px; margin-right: 5px; color: #999; font-weight: 300;}
.tableType03 tbody tr td ol> li.active{color: #289E6B;}
.tableType03 tbody tr td ol> li.active .mark02{background: #289E6B; color: #fff; border: 1px solid #289E6B;}
.joinArea .numberMark{background: #ED7322; color: #fff; padding: 5px 10px; box-sizing: border-box; border: 1px solid #ddd; font-size: 15px; width: 80px; display: inline-block; text-align: center; vertical-align: middle;}
.joinArea .unit{margin-left: -30px; margin-right: 10px; position: relative; z-index: 1;}
.joinArea .elecLayerArea01{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9999; display: none;}
.elecLayerArea01 .LayerBox01{background: #fff;padding: 0;box-sizing: border-box;max-height: 620px; margin: 50px auto; height: calc(100% - 50px);}
.elecLayerArea01 .LayerBox01 iframe{height: 620px}

.snsAgree{margin-left: 10px;}

/*구좌*/
.numberTd{position: relative;}
.numberTd02{position: relative; display: inline-block;}
.symbol{font-size: 13px; position: absolute; left: 27px; top: 24px; z-index: 1;}
.numberTd02 .symbol01{position: absolute; left: 10px; top: 12px;}
.numberTd02 .symbol02{position: absolute; right: 10px; top: 12px;}
.numberTd02 input[type="text"]{text-align: right; padding: 10px 30px 10px 80px;}
.numberSelect, .numberInput{padding: 10px 10px 10px 30px;}
select:disabled{background: #f9f9f9; color: #111;}

/*04. 회원가입_가입완료*/
.complArea{background: url(/images/uce/sub/joinCompl.png)no-repeat left 40px center; padding-left: 250px;}
.complArea02{background: url(/images/uce/sub/joinCompl02.png)no-repeat left 40px center}
.call{margin-top: 10px;}
.call b{font-size: 22px;}

/*로그인*/
.loginArea{padding: 50px 400px !important;}
.loginArea .titBox{text-align: center;}
.loginArea .titBox .tit{font-size: 40px; margin-bottom: 15px; font-weight: 700; color: #32446D; letter-spacing: -2px; position: relative;}
.loginArea .titBox .tit::after{content: ""; position: absolute; width: 25%; height: 2px; left: 0; top: 14px; background: #32446D;}
.loginArea .titBox .tit::before{content: ""; position: absolute; width: 25%; height: 2px; right: 0; top: 14px; background: #32446D;}
.loginArea .titBox .ment{color: #32446D; line-height: 26px; margin-bottom: 20px;}
.loginArea .loginBox{text-align: center; display: grid; align-items: center; justify-content: center; grid-template-columns: 3fr 1fr; margin-bottom: 5px;}
.loginArea .loginBox> div input{padding: 15px; font-size: 17px; border-radius: 10px; padding-left: 54px; display: block; width: 100%; margin: 0 0 5px 0; background: url(/images/uce/sub/login.png)no-repeat left 20px center; background-clip: padding-box; appearance: none; -webkit-appearance: none;}
.loginArea .loginBox> div input[type="text"]::-webkit-autofill{background: url(/images/uce/sub/login.png)no-repeat left 20px center; background-color: transparent !important; background-size: cover;}
.loginArea .loginBox> div input#login_pw{margin-bottom: 0; background: url(/images/uce/sub/pw.png)no-repeat left 22px center;}
.loginArea .loginBox button{background: #32446D; color: #fff; height: 100%; font-size: 17px; margin-left: 5px; border-radius: 10px; font-weight: 600;}
.loginArea ol.btnBox{margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;}
.loginArea ol.btnBox> li{font-size: 15px; border-radius: 20px; box-sizing: border-box; border: 1px solid #ddd; background: #f9f9f9;}
.loginArea ol.btnBox> li> a{padding: 5px 15px; display: flex; align-items: center; justify-content: center;}
.loginArea ol.btnBox> li:first-child{border: 1px solid #32446D; color: #32446D; background: #F1F5FB;}
.loginArea ol.ment{margin-top: 20px; border-top: 1px dashed #ddd; padding-top: 20px; box-sizing: border-box; font-size: 15px;}

/*로딩중*/
#loading-screen {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; }
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#loading-spinner {border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1.5s linear infinite;}

/*비밀번호 찾기*/
.idInput{display: block; margin-top: 20px;}
.idInput a{background: #32446D; color: #fff; padding: 6px; display: inline-block; width: 120px; font-size: 15px;}
.idInput p{font-size: 15px !important;}
.idInput span{display: inline-flex; align-items: center; justify-content: center; margin-right: 5px;}



/*****테블릿가로*****/
@media all and (min-width:1221px) and (max-width:1530px) {  
    
    /*회원가입 단계*/
    .joinStage> li{font-size: 17px;}

    /*로그인*/
    .loginArea{padding: 50px 300px !important;}

    /*03. 회원가입_정보입력*/
    .joinArea .numberMark{padding: 7px 10px;}

}


/*****테블릿세로*****/
@media all and (min-width:768px) and (max-width:1220px) { 

    /*회원가입 단계*/
    .joinStage{grid-gap: 10px;}
    .joinStage> li{font-size: 15px; padding: 15px 10px;}
    .joinStage> li::after{display: none;}
    .joinStage> li:nth-child(3){letter-spacing: -3px;}

    /*01. 회원가입 동의*/
    .useLayer .useBox{width: calc(100% - 50px);}

    /*로그인*/
    .loginArea{padding: 50px 100px !important;}

    /*03. 회원가입_정보입력*/
    .joinArea .numberMark{padding: 7px 10px;}

    /*비밀번호 찾기*/
    .idInput a{width: 80px; font-size: 13px;}

}


/*****모바일*****/
@media all and (max-width:767px) { 

    /*회원가입 단계*/
    .joinStage{grid-gap: 10px; grid-template-columns:repeat(2, 1fr); padding: 15px;}
    .joinStage> li{font-size: 15px; padding: 10px; border-radius: 5px;}
    .joinStage> li::after{display: none;}
    .joinStage> li:nth-child(3){letter-spacing: -3px;}

    /*01. 회원가입 동의*/
    .agreeArea> li{margin-top: 20px;}
    .agreeArea> li> p.tit{font-size: 15px;}
    .agreeArea> li> p.tit button{font-size: 11px;}
    .agreeArea> li .joinInfo p.cont{font-size: 13px; padding: 10px 15px;}
    .agreeArea> li .joinInfo .agreeBox{font-size: 13px;}
    .useLayer .useBox{width: calc(100% - 50px);}
    .useLayer .useBox .centerBox .btnType{padding: 10px 20px;}

    /*02. 회원가입_본인인증*/
    .certifyArea{background: url(/images/uce/sub/joinCertify.png)no-repeat center top 20px; background-size: 120px; padding: 150px 20px 20px 20px; text-align: center;}
    .certifyArea p{font-size: 20px !important; margin-bottom: 10px !important;}
    .certifyArea a{width: 100%;}

    /*03. 회원가입_정보입력*/
    .joinArea button.check{font-size: 12px;}
    .joinArea .numberMark{font-size: 12px; padding: 7px 10px;}
    .joinArea button.check, .joinArea .textType table tbody tr td .smallFont, .joinArea .textType table tbody tr td ol li{font-size: 12px;}
    .joinArea table tbody tr td button.unitBtn{margin-bottom: 2px; margin-top: 3px;}
    .joinArea .unit{margin-left: -26px; margin-right: 10px;}
    .elecLayerArea01 .LayerBox01{height: calc(100% - 100px);}

    /*04. 회원가입_가입완료*/
    .complArea{background: url(/images/uce/sub/joinCompl.png)no-repeat center top 20px; padding: 160px 20px 20px 20px; text-align: center; background-size: 120px;}
    .complArea02{background: url(/images/uce/sub/joinCompl02.png)no-repeat center top 20px;  padding: 160px 20px 20px 20px; text-align: center; background-size: 120px;}
    .call b{font-size: 20px; margin-top: 5px; display: block;}

    /*로그인*/
    .loginArea{padding: 30px !important;}
    .loginArea .titBox .tit{font-size: 20px; line-height: 24px; margin-bottom: 10px; font-size: 30px;}
    .loginArea .titBox .tit::before, .loginArea .titBox .tit::after{display: none;}
    .loginArea .titBox .ment{line-height: 16px;}
    .loginArea .loginBox{display: block;}
    .loginArea .loginBox> div .input-wrapper input{font-size: 13px !important; padding: 12px 12px 12px 48px; background-size: 16px !important;}
    .loginArea .loginBox> div .input-wrapper:last-child input{background: url(/images/uce/sub/pw.png)no-repeat left 20px center;}
    .loginArea .loginBox button{display: block; padding: 12px; box-sizing: border-box; font-size: 13px; margin-top: 5px; width: 100%; margin-left: 0;}
    .loginArea ol.ment{font-size: 13px;}
    .loginArea ol.btnBox{display: block;}
    .loginArea ol.btnBox> li{margin-bottom: 3px; font-size: 13px; border-radius: 0;}
    .loginArea ol.btnBox> li> a{padding: 7px;}

    /*비밀번호 찾기*/
    .idInput a{width: 100%; font-size: 13px; margin-top: 5px; padding: 10px;}

    
    /*구좌*/
    .symbol{left: 22px; top: 21px; }

}