@charset "utf-8";

/*회원*/
.joinArea{padding:50px 0 40px;}
.joinArea .title{font-size: 26px; font-weight:400; letter-spacing: -1px; text-align:center;}
.joinArea .title_para{margin-top:5px; color:#888; text-align: center;}
.joinArea input{background:transparent;}

.join_box_scroll{overflow-y:auto; height:260px; padding:20px; border:1px solid #dbdbdb; color:#454545;}
.join_tit{margin:30px auto 12px; font-size:16px; font-weight:600; color:#222;}
.joinArea .box .check_box{margin-top:10px; text-align:right;}

/* 로그인화면 */
.login_con{margin:0 auto;}

.designLogin li{position:relative; padding-top:20px; margin-top:34px;}
.designLogin li:before{opacity: .4; content:""; display: block; position:absolute; top:50%; right:0; width:28px; height:28px; background:no-repeat 50% 50%; background-size:contain; transform: translateY(-50%); transition:opacity .5s ease;}
.designLogin li.inp_id:before{background-image: url(/images/page/board/icon_user.svg)}
.designLogin li.inp_pw:before{background-image: url(/images/page/board/icon_pw.svg)}
.designLogin li.inp_name:before{background-image: url(/images/page/board/icon_name.svg)}
.designLogin li.inp_email:before{background-image: url(/images/page/board/icon_email.svg)}
.designLogin li label{position: absolute; top:0; left:0; z-index:-1; margin:0; color:#222; font-weight:600; transition:top .6s ease;}
.designLogin li input{height:50px; margin:0; padding-left:0; padding-right:0; border-width:0 0 2px 0; border-color:#ebebeb; transition:border .3s ease;}
.designLogin li input:hover,
.designLogin li input:focus{border-color:rgba(0,0,0,.4); box-shadow:none;}
.designLogin li input:hover,
.designLogin li input:focus + label{top:10px; color:#333;}
.designLogin li input:hover,
.designLogin li input:focus{border-color:rgba(0,0,0,.4);}
.designLogin li:hover:before,
.designLogin li:focus:before{opacity: 1;}

.forgetmenot.designChk{margin-top:10px;}
.login_warning{padding:10px 0; color:var(--ad-danger); font-size:12px;}

.btn_login{width:100%; height:58px; border-radius:5px; color:#fff; font-weight: 600;}
.login_sub_btns{display:flex; align-items: center; gap:10px; margin-top:20px; padding-top:20px; border-top:1px dotted #ddd;}
.login_sub_btns > button{width:calc((100% - 10px)/2); margin:0;}


/* 회원 가입 절차 */
.joinProcess {padding-bottom: 40px; text-align: center;}
.joinProcess ul {display:flex; justify-content: center; align-items: center; gap:20px}
.joinProcess ul li {position: relative; display: inline-block; font-size: 14px; color: #999;}
.joinProcess ul li:before {content: ''; display: block; width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 50%; margin: 0 auto 10px;}
.joinProcess ul li:after {content: ''; display: block; width: 20%; border-top: 1px dashed #ddd; position: absolute; top: 10px; right: -15px; z-index: -1;}
.joinProcess ul li:last-child:after {content: none;}
.joinProcess ul li.on {color: var(--main-color); font-weight: 600;}
.joinProcess ul li.on:before {background: var(--main-color); background: linear-gradient(135deg, var(--main-color) 1%, #55bfac 100%); border: transparent;}
.joinProcess ul li.finish {color: #999;}
.joinProcess ul li.finish:before{background: #ddd;}

/* certiList */
.certiList{display: flex; width: 100%; align-items: stretch;}
.certiList .certi_item{width: 100%; padding: 90px 30px; border:1px solid #ddd; font-size: 1rem; vertical-align: top; text-align: center;}
.certiList .certi_item:first-child{border-right-width:0;}
.certiList .certi_item strong{display: block; margin-bottom: 20px; font-size: 22px; font-weight: 600;}
.certiList .certi_item p{margin-top: 40px; color:#999; word-break: keep-all;}

.certi_item .btn{min-width:160px; font-weight: 600;}
.certiList .certi_item:nth-child(1){border-top: 6px solid #3e9190;}
.certiList .certi_item:nth-child(2){border-top: 6px solid #96c73a;}
.certi_item:nth-child(1) .btn:not(.btn-line-gray){background:#3e9190; border:1px solid #3e9190; color: #fff;}
.certi_item:nth-child(2) .btn:not(.btn-line-gray){background:#96c73a; border:1px solid #96c73a; color: #fff;}

/* 약관 동의 */
.policy_con{margin-top:40px;}

.all_check_box {width:100%;}
.all_check_box input[type="checkbox"] {position: absolute;opacity: 0;width: 0;height: 0;}
.all_check_box label {display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 1rem; color: #000; border:1px solid #ddd; padding:20px;}
.all_check_box label::before {content: ''; width: 18px;height: 18px;border: 1px solid #CBD2DC;background-color: #fff;border-radius: 5px;margin-right: 5px;transition: all .25s;}
.all_check_box input[type="checkbox"]:checked + label{background:rgba(var(--main-color-rgb), 0.04); color:var(--main-color);}
.all_check_box input[type="checkbox"]:checked + label::before {background-color: var(--main-color);border-color: var(--main-color);background-image: url('/images/common/icon_check.svg');background-repeat: no-repeat;background-position: 50% 50%;background-size: contain;}
.all_check_box input[type="checkbox"]:focus + label::before {box-shadow: 0 0 0 3px rgba(var(--main-color-rgb), .25);border-color: var(--main-color);}
.all_check_box input[type="checkbox"]:disabled + label {cursor: not-allowed;opacity: .5;}

.all_check_box input[type="checkbox"]:checked:disabled + label::before {background-color: var(--main-color);}

.join_chk{background:rgba(var(--main-color-rgb), 0.04); border:1px solid #ddd; border-width: 1px 0; margin-top:15px; padding:0 15px;}
.join_chk .designChk{display:flex; align-items: center;}
.join_chk .designChk input[type="checkbox"]{margin-top:0;}
.join_chk .designChk label{width:100%; cursor: pointer; padding:15px 0;}

/* 회원정보입력 */
.address{display:flex; gap:5px; flex-wrap: wrap;}
.address input, .address .btn{margin:0 !important;}
.address .zip_wrap{display:flex; gap:5px;}

/* 입력양식 */
.input_row{display:flex; align-items: center; gap:5px;}
.input_row input{margin:0;}

.btn_row{display:flex; align-items: center; gap: 5px;}
.btn_row .btn{margin:0;}


/* **************************************** *
 1024px
 * **************************************** */
 @media (max-width:1024px){

 }


/* **************************************** *
 * 768px
 * **************************************** */
 @media (max-width:768px){


 }


/* **************************************** *
 * 640px
 * **************************************** */
 @media (max-width:640px){

   .address .zip_wrap{flex-wrap:wrap; width:100%;}
   .address .zip_wrap > *{width:100% !important; max-width:100% !important}

}

/* **************************************** *
 * 576px
 * **************************************** */
 @media (max-width:576px){
  /* certiList */
  .certiList{flex-direction: column;}
  .certiList .certi_item strong{margin-bottom: 10px; font-size: 18px;}
  .certiList .certi_item p br {display: none;}
  .certiList .certi_item p{margin-top: 20px;}

  /* 입력양식 */
  .input_row{flex-wrap: wrap;}
  .input_row input[type="text"]{width:100%; max-width:100% !important;}
  .btn_row{width:100%; justify-content: center;}
  .btn_row .btn{width:100%; flex-shrink:1;}
}