@charset "utf-8";
/* 회원가입 페이지 공통 */
.joinPage .btn-download { font-size: 14px; font-weight: 400; height: 50px; line-height: 50px; padding: 0 25px; display: inline-block; border-radius: 2px; box-sizing: border-box; text-align: center; vertical-align: middle; } 
.joinPage .buttonWrap { display: flex; flex-wrap: wrap; justify-content: center; } 
.joinPage .buttonWrap a { margin:3px; } 
.joinPage .btn-link2:after {content: '\f08e';}
.joinPage .wzbtn:after {display: inline-block; font-family: 'FontAwesome'; margin-left: 5px; vertical-align: middle;}

@media only screen and (max-width: 599px){
.joinPage .buttonWrap a { margin:5px; } 
.joinPage .buttonWrap { flex-direction: column; } 
}


/* 회원가입 페이지 - joinPage */
.joinPage .customersType {justify-content: space-evenly;display: flex;flex-wrap: wrap;align-items: center;padding-left: 0;} 
.joinPage .customersType li { display: inline-block; text-align: center; width: 32.333333%; margin-right: 1.5%; border: 2px solid #e0e0e0; box-sizing: border-box; margin-bottom: 20px; padding: 30px 15px 25px; transition: border-color 0.5s; border-radius: 20px; } 
.joinPage .customersType li:nth-child(2),.joinPage .customersType li:last-child { margin-right: 0; } 
.joinPage .customersType li .userImg { width: 150px; height: 150px; margin: 20px auto; border: 1px solid #4c4c4c; border-radius: 100%; overflow: hidden; background: #4289D5; } 
.joinPage .customersType .typeTit { font-size: 22px; font-weight: 600; line-height: 130%; margin: 15px 0 5px; } 
.joinPage .customersType .typeTit .usrTypeInfo { display: none; } 
.joinPage .customersType .typeco { font-size: 17.5px; color: #696969; line-height: 140%; } 
.joinPage .txtBox { background: #f9f9f9; padding-bottom: 30px; } 
.joinPage .txtBox p { line-height: 1.4em; padding: 10px 0 0; position: relative; word-break: keep-all; } 
.joinPage .txtBox p.bullet01 { padding-left: 15px; } 
.joinPage .txtBox p.bullet01:before { position: absolute; top: 18px; left: 0; vertical-align: middle; content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: #3b3786; } 

 /*교직원 하나 빠지는 경우 추가(ssj0310)*/
  .joinPage .customersType li:nth-last-child(1):nth-child(4),
  .joinPage .customersType li:nth-last-child(2):nth-child(3) {
    width: 49.25%;
}


/* joinPage-usage */
.joinPage.usage .signupWrap{float:none;}
.joinPage.usage .usageBox { position: relative; } 
.joinPage.usage .usageBox:first-child:after { position: absolute; left: 15px; bottom: 0; content: ''; width: calc(100% - 30px); height: 1px; background: #eaeaea; } 
.joinPage.usage .ContentsWrap { font-size: 16px; line-height: 150%; background: #fafafa; float: left; margin: 10px; padding: 10px; box-sizing: border-box; height: 300px; overflow-y: scroll; word-break: keep-all; list-style: none; width: calc(100% - 20px); } 
.joinPage.usage .areWrap { box-sizing: border-box; padding: 15px; overflow: hidden; line-height: 42px; } 


/* 회원가입_본인확인 */
.joinPage.cof .customersType li:hover { border-color: #0365cb; } 
.joinPage.cof .customersType .txtbox { margin-bottom:10px; } 
.joinPage.cof .buttonWrap .btn-download:before { margin-right: 7px; vertical-align: middle; } 
.joinPage.cof .customersType .wzForm label>input[type="radio"] + .spanLabel { float: left; width: 100%; position: relative; padding-left: 0; } 
.joinPage.cof .customersType li.wzForm>label input[type="radio"]:checked + .spanLabel:after { background: #0365cb; left: 10px; top: -2px; } 
.joinPage.cof .customersType li.wzForm>label input[type="radio"] + .spanLabel:before { left: 5px; top: -7px; } 
.joinPage.cof .customersType li.wzForm>label input[type="radio"]:checked + .spanLabel .userImg img:nth-child(1) { display:none; } 
.joinPage.cof .customersType li.wzForm>label input[type="radio"]:checked + .spanLabel .userImg img:nth-child(2) { display:inline-block!important; } 
.joinPage.cof .customersType li .userImg img { transition:all 0.5s; width: 100%; } 
.joinPage.cof .customersType li:hover .spanLabel .userImg img:nth-child(1) { display:none; } 
.joinPage.cof .customersType li:hover .spanLabel .userImg img:nth-child(2) { display:inline-block!important; } 


@media only screen and (min-width: 700px){
 .joinPage .customersType li:nth-child(-n+2) { width: 49.25%; } 
 }

 @media only screen and (max-width: 699px){
 .joinPage.cof .customersType li,
  .joinPage .customersType li:nth-last-child(1):nth-child(4), .joinPage .customersType li:nth-last-child(2):nth-child(3){width: 100%;margin-right: 0;padding: 0px 10px;margin-bottom: 10px;} 
 .joinPage.cof .customersType li.wzForm>label input[type="radio"] + .spanLabel:before {top: 15px;}
 .joinPage.cof .customersType li.wzForm>label input[type="radio"]:checked + .spanLabel:after {top: 20px;}
 .joinPage.cof .customersType .wzForm label>input[type="radio"] + .spanLabel { padding-left: 40px; box-sizing: border-box; } 
 .joinPage.cof .customersType .userImg {width: 80px;height: 80px;float: left;margin: 10px 0;} 
 .joinPage.cof .customersType .txtbox {margin-left: 28px;margin-top: 20px;float: left;text-align: left;} 
 .joinPage.cof .customersType .typeTit { margin-top: 0; font-size: 20px; } 
 }


/* 회원가입_가입신청완료 */
@media only screen and (max-width: 699px){
 .joinPage.comp .customersType li:nth-child(-n+2) { width:100%; } 
 }
 

/* 회원가입_epki 인증 팝업창 */
.joinPage.cert .buttonWrap .btn-download:before { margin-right: 7px; vertical-align: middle; } 
.joinPage.cert a.nextBtn { background: #083778; border: 1px solid #083778; color: #fff; font-size: 14px; font-weight: 400; text-decoration: none; -webkit-transition: background 0.5s; transition: background 0.5s; } 
.joinPage.cert a.nextBtn:hover { color: #fff; background: #333 !important; border-color: #333 !important; } 



@media only screen and (max-width: 599px){
 .joinPage.cert .buttonWrap { margin-top:15px; } 
 .joinPage .buttonWrap a { margin:5px; } 
 .joinPage .buttonWrap { flex-direction: column; } 
}