.totalLogin {
  margin: 0 0 3rem;
  /* 로그인 타이틀 */
  /* 로그인 탭 */
}
.totalLogin .cl-text {
  word-break: keep-all;
  white-space: wrap;
}
.totalLogin .title .cl-text {
  position: relative;
  /* font-family:'SCDream'; */
  font-size: 1.7rem;
  font-weight: 700;
  color: #001f2e;
}
.totalLogin .loginTab {
  margin-top: 1.5rem;
}
.totalLogin .loginTab .cl-tabfolder-header {
  border-right: none;
}
.totalLogin .loginTab .cl-tabfolder-header .cl-tabfolder-item {
  position: relative;
  color: #444;
  /* font-family:'SCDream'; */
  background-color: white;
  font-weight: 400;
  border: solid 1px #6d6d6d;
  border-radius: 2rem;
  padding: 0.75rem 2.5rem 0.75rem 3.5rem;
  transition: all 0.2s;
  font-size: 1rem;
  -webkit-transition: all 0.2s;
  -ms-transition: all 0.2s;
  /* 탭 헤더 아이템 - 선택됨 */
}
.totalLogin .loginTab .cl-tabfolder-header .cl-tabfolder-item:after {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 0.65rem;
  width: 35px;
  height: 35px;
  background: url("/theme/common/images/member/ico_loginTy01.png") no-repeat center;
  /* 첫번쨰 탭 : 기업회원 아이콘 */
}
.totalLogin .loginTab .cl-tabfolder-header .cl-tabfolder-item + .cl-tabfolder-item:after {
  background: url("/theme/common/images/member/ico_loginTy02.png") no-repeat center;
  /* 두번쨰 탭 : 개인 아이콘 */
}
.totalLogin .loginTab .cl-tabfolder-header .cl-tabfolder-item.cl-selected {
  color: #fff;
  text-decoration: underline;
  border-color: #017cc6;
  background: linear-gradient(to left, #017cc6 0%, #8fc320 100%);
  background: -webkit-linear-gradient(to left, #017cc6 0%, #8fc320 100%);
  background: -moz-linear-gradient(to left, #017cc6 0%, #8fc320 100%);
  /* 탭 헤더 아이템 닫기 버튼 - 선택 됨 */
}
.totalLogin .loginTab .cl-tabfolder-header .cl-tabfolder-item.cl-selected:before {
  color: #fff;
}
.totalLogin .loginTab .cl-tabfolder-header .cl-tabfolder-item.cl-selected:after {
  background: url("/theme/common/images/member/ico_loginTy01_ov.png") no-repeat center;
  /* 첫번쨰 탭 선택 : 기업회원 아이콘 */
}
.totalLogin .loginTab .cl-tabfolder-header .cl-tabfolder-item.cl-selected .cl-text {
  text-decoration: none !important;
}
.totalLogin .loginTab .cl-tabfolder-header .cl-tabfolder-item + .cl-tabfolder-item.cl-selected:after {
  background: url("/theme/common/images/member/ico_loginTy02_ov.png") no-repeat center;
  /* 두번쨰 탭 선택 : 개인 아이콘 */
}
.totalLogin .loginTab .loginWrap {
  max-width: 50rem;
  margin: 0 auto;
}
.totalLogin .loginTab .loginWrap .infoTit {
  background: #fff;
  border-radius: 30px;
  border: 1px solid #ccc;
  font-weight: 600;
  min-width: 80px;
  text-align: center;
  padding: 0.25rem;
  /* font-family:'SCDream'; */
}
.totalLogin .loginTab .loginWrap .box_st1 {
  padding: 1.25rem 1rem;
}
.totalLogin .loginTab .loginWrap .btn_loginOpt .cl-button:hover,
.totalLogin .loginTab .loginWrap .btn_loginOpt .cl-button.cl-focus {
  text-decoration: underline;
}
.totalLogin .loginTab .loginForm .cl-inputbox {
  border: 1px solid #ddd;
  padding: 0 0.5rem;
}
.totalLogin .loginTab .loginForm .btnLogin {
  background: #0083cb;
  color: #fff;
  /* font-family:'SCDream'; */
  border-radius: 0;
  font-weight: 600;
  padding: 0 0.5rem;
  word-break: keep-all;
  line-height: 1.5 !important;
}
.totalLogin .loginTab .loginForm .btnLogin:hover,
.totalLogin .loginTab .loginForm .btnLogin:focus {
  background: #0f5278;
}
.totalLogin .loginTab .loginType .cl-button {
  border-radius: 0;
  border: 0;
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: #fff;
  background: #4691df;
  /* active */
}
.totalLogin .loginTab .loginType .cl-button .cl-text:before {
  content: "\e966";
  font-size: 1rem;
  display: inline-block;
  vertical-align: middle;
  font-family: 'xeicon';
  font-weight: 400;
}
.totalLogin .loginTab .loginType .cl-button:hover,
.totalLogin .loginTab .loginType .cl-button.cl-focus {
  background: #0083cb;
}
.totalLogin .loginTab .loginType .btn_onepass {
  font-size: 0.85rem;
  padding-left: 3rem !important;
}
.totalLogin .loginTab .loginType .btn_onepass .cl-text:before {
  display: none;
}
.joinStep {
  max-width: 62.5rem;
  margin: 2rem auto;
  /* 상단 절차 */
  /* step-01 박스 */
  /* 개인회원가입 : 인증 */
  /* 기업회원가입 - 가입인증 */
  /* 회원가입 완료 */
}
.joinStep.wp100 {
  max-width: 100% !important;
  width: 100%;
}
.joinStep .stepBox {
  position: relative;
  background: #eee;
  padding: 1rem 0.5rem 1rem 4rem;
}
.joinStep .stepBox .cl-text {
  /* font-family:'SCDream'; */
  word-break: keep-all;
  color: #aaa;
  font-weight: 400;
}
.joinStep .stepBox:before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 1rem;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: left center;
}
.joinStep .stepBox.step1:before {
  background-image: url("/theme/common/images/member/ico_joinStep01.png");
}
.joinStep .stepBox.step2:before {
  background-image: url("/theme/common/images/member/ico_joinStep02.png");
}
.joinStep .stepBox.step3:before {
  background-image: url("/theme/common/images/member/ico_joinStep03.png");
}
.joinStep .stepBox.step4:before {
  background-image: url("/theme/common/images/member/ico_joinStep04.png");
}
.joinStep .stepBox.active {
  background: #0049a4;
}
.joinStep .stepBox.active .cl-text {
  color: #fff;
}
.joinStep .stepBox.active.step1:before {
  background-image: url("/theme/common/images/member/ico_joinStep01_ov.png");
}
.joinStep .stepBox.active.step2:before {
  background-image: url("/theme/common/images/member/ico_joinStep02_ov.png");
}
.joinStep .stepBox.active.step3:before {
  background-image: url("/theme/common/images/member/ico_joinStep03_ov.png");
}
.joinStep .stepBox.active.step4:before {
  background-image: url("/theme/common/images/member/ico_joinStep04_ov.png");
}
.joinStep .box_step1 {
  padding: 0;
  margin-top: 1rem;
}
.joinStep .box_step1 .area {
  padding: 1.5rem;
}
.joinStep .joinBtn {
  border-radius: 2rem;
  background: #125e82;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  /* font-family:'SCDream'; */
}
.joinStep .joinBtn.col {
  background: #2c364f;
  color: #fff;
}
.joinStep .joinBtn.col:hover {
  background: #0049a4;
}
.joinStep .joinBtn:hover {
  background: #2c364f;
  color: #fff;
}
.joinStep .certBox {
  padding: 2.5rem 1rem;
  border: 1px solid #ddd;
}
.joinStep .certBox .cl-text {
  /* font-family:'SCDream'; */
}
.joinStep .certBox:hover {
  border-color: #0049a4;
}
.joinStep .entrInfo {
  word-break: keep-all;
}
.joinStep .entrInfo:before {
  content: "";
  position: absolute;
  left: 20%;
  top: 32px;
  width: 60%;
  height: 3px;
  background: #ccc;
  z-index: 0;
}
.joinStep .entrInfo:after {
  content: "";
  position: absolute;
  left: 20%;
  top: 32px;
  width: 30%;
  height: 3px;
  background: -moz-linear-gradient(right, #99df02 0%, #007cc6 100%);
  background: -webkit-linear-gradient(right, #99df02 0%, #007cc6 100%);
  background: linear-gradient(to right, #99df02 0%, #007cc6 100%);
  z-index: 1;
}
.joinStep .entrInfo .step {
  position: relative;
  z-index: 2;
}
.joinStep .entrInfo .step .dots {
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fff;
}
.joinStep .entrInfo .step .dots:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  background: #ccc;
}
.joinStep .entrInfo .step.on .dots {
  border-color: #017cc6;
}
.joinStep .entrInfo .step.on .dots:before {
  background: #017cc6;
}
.joinStep .joinEnd {
  padding: 2rem 1rem;
  background-repeat: no-repeat;
  background-position: center 140%;
  background-size: contain;
  background-image: url("../theme/common/images/member/bg_joinEng.svg");
}
.joinStep .joinEnd .cl-image.img img {
  max-width: 550px;
  margin: 0 auto;
}
.joinStep .joinEnd .cl-htmlsnippet {
  word-break: keep-all;
}
@media screen and (max-width: 860px) {
  /* step-01 박스 */
  .totalLogin .loginTab .loginWrap .box_st1 {
    padding: 1.25rem 0.85rem;
  }
  .joinStep .stepBox {
    padding-left: 1rem;
  }
  .joinStep .stepBox:before {
    display: none;
  }
  .joinStep .box_step1 .area {
    padding: 1.25rem;
  }
}
@media screen and (max-width: 768px) {
  .totalLogin {
    margin: 0 auto 1rem;
  }
  .totalLogin .title .cl-text {
    font-size: 1.2rem;
  }
  .totalLogin .loginTab {
    margin-top: 0.25rem;
  }
  .totalLogin .loginTab .loginForm {
    margin-top: 0rem;
  }
  .totalLogin .loginTab .loginForm .btnLogin {
    border-radius: 0.25rem;
  }
  .totalLogin .loginTab .loginWrap .infoTit {
    width: calc(100% - 0.5rem) !important;
    margin-right: 0.5rem;
  }
  .totalLogin .loginTab .loginWrap .box_st1 {
    padding: 1.25rem;
  }
  .totalLogin .loginTab .loginWrap .box_st3 {
    padding: 1.25rem 1.5rem;
  }
  .totalLogin .loginTab .loginWrap .btn_loginOpt .cl-htmlsnippet {
    padding-right: 5px;
  }
  .totalLogin .loginTab .loginType .cl-button {
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    text-align: center;
  }
  .totalLogin .loginTab .loginType .cl-button .cl-text:before {
    margin-right: 0;
  }
  .totalLogin .loginTab .cl-tabfolder-header .cl-tabfolder-item.cl-selected {
    text-decoration: none;
  }
  .joinStep {
    margin: 0 auto 2rem;
    /* 개인회원가입 : 인증 */
    /* 기업회원가입 - 가입인증 */
  }
  .joinStep .mobProcess:before {
    content: "";
    position: absolute;
    left: 15%;
    top: 10px;
    width: 70%;
    height: 2px;
    background: #e2e2e2;
  }
  .joinStep .stepBox {
    padding: 0;
    background: none;
  }
  .joinStep .stepBox:before {
    display: none;
  }
  .joinStep .stepBox.active {
    background: none;
  }
  .joinStep .stepBox.active .num {
    background: #0049a4;
  }
  .joinStep .stepBox .num {
    border-radius: 50%;
    text-align: center;
    background: #9b9b9b;
  }
  .joinStep .stepBox .num .cl-text {
    color: #fff;
  }
  .joinStep .stepTxt {
    color: #9b9b9b;
    font-size: 0.8rem;
    /* font-family:'SCDream'; */
    line-height: 1.3;
    font-weight: 600;
    margin-top: 0.25rem;
  }
  .joinStep .stepTxt.active {
    color: #0049a4;
  }
  .joinStep .certBox {
    padding: 1.5rem 0.5rem;
  }
  .joinStep .entrInfo:before {
    top: 1.5rem;
  }
  .joinStep .entrInfo:after {
    top: 1.5rem;
  }
}
@media screen and (max-width: 480px) {
  .totalLogin .loginTab .cl-tabfolder-header .cl-tabfolder-item {
    font-size: 0.85rem;
    padding: 0.25rem 1rem;
  }
  .totalLogin .loginTab .cl-tabfolder-header .cl-tabfolder-item:after {
    display: none;
  }
  .totalLogin .loginTab .btn_loginOpt .cl-htmlsnippet {
    display: none;
    padding-right: 0;
  }
}
@media screen and (max-width: 360px) {
  .totalLogin .loginTab .loginWrap .box_st1 {
    padding: 1rem 0.5rem;
  }
  .totalLogin .loginTab .loginWrap .box_st1 .txt {
    margin-bottom: 10px;
  }
  .totalLogin .loginTab .loginWrap .box_st1 .txt br {
    display: none;
  }
}