@charset "utf-8";

/*회원*/
.joinArea{padding:50px 0 40px;}
.joinArea .box.join{max-width:520px; margin:0 auto;}
.joinArea .box.find{max-width:520px; margin:0 auto;}
.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;}

.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(/common/images/board/icon_user.svg)}
.designLogin li.inp_pw:before{background-image: url(/common/images/board/icon_pw.svg)}
.designLogin li.inp_name:before{background-image: url(/common/images/board/icon_name.svg)}
.designLogin li.inp_email:before{background-image: url(/common/images/board/icon_email.svg)}
.designLogin li label{position: absolute; top:50%; left:0; z-index:-1; margin:0; color:#888; font-weight:600; transform: translateY(-50%); 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.active label,
.designLogin li input:focus + label,
.designLogin li input:active + label{top:10px; color:#333;}
.designLogin li input:focus,
.designLogin li input:active{border-color:rgba(0,0,0,.4);}
.designLogin li.active:before{opacity: 1;}
.button_area.user:after{content: ""; display: block; visibility: hidden; height: 0; font-size: 0; clear: both;}
.button_area.user .link_join{float:left;}
.button_area.user .list_user{float: right;}
.list_user li{float:left;}
.list_user li:before{content:""; float: left; width: 1px; height: 10px; margin: 4px 10px; background-color: #e5e5e5;}
.list_user li:first-child:before{content:none;}

.button_area.login{margin:30px auto 0;}
.btn_login{position:relative; width:100%; height:58px; background:#424650; border:1px solid #424650; font-weight:600; color:#fff; transition:all .5s ease;}
.btn_login.confirm:hover{background-color: #3a3d42; border-color:#3a3d42;}
.btn_login.check{background:#fff; color:#3a3d42; transition:box-shadow .3s ease;}
.btn_login.check:hover{box-shadow:3px 3px 10px rgba(0,0,0,.06);}
.btn_login.etc{background-color: #f6f6f6; border-color:#f6f6f6; color:#888;}
.btn_login.etc + .btn_login.etc{margin-top:10px;}
.btn_login.kakao,
.btn_login.naver,
.btn_login.facebook{padding-left:55px; padding-right:55px;}
.btn_login.kakao{background-color:#FEE500; color:rgba(0,0,0,.85);}
.btn_login.naver{background-color:#1ec800; color:#fff;}
.btn_login.facebook{background-color:#3C579E; color:#fff;}
.btn_login.kakao span:before,
.btn_login.naver span:before,
.btn_login.facebook span:before{content:""; display: inline-block; position:absolute; top:0; left:0; width:50px; height:100%; background:no-repeat 50% 50%; background-size:24px auto; border-right:1px solid rgba(255,255,255,.2); vertical-align: middle;}
.btn_login.kakao span:before{background-image:url(/common/images/board/icon_kakao.svg)}
.btn_login.naver span:before{background-image:url(/common/images/board/icon_naver.svg)}
.btn_login.facebook span:before{background-image:url(/common/images/board/icon_facebook.svg)}

.line_or{display: block; position: relative; width: 100%; padding: 15px 0; line-height: 0; font-size: 0;}
.txt_or{display: inline-block; width: 40px; line-height: 18px; font-size: 12px; text-align: center; color: rgba(0,0,0,0.3);}
.line_or:before,
.line_or:after{content: ""; display: inline-block; width: calc(50% - 20px); height: 1px; margin: 8px 0; background-color: rgba(0,0,0,0.06); vertical-align: top;}

/*본인인증*/
.certiList{display: table; width: 100%;}
.certiList .certi_item{display: table-cell; width: 50%; 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;}

.certi_item .button{min-width:160px; font-weight: 600;}
.certiList .certi_item:nth-child(1){border-top:6px solid #aecc7e;}
.certiList .certi_item:nth-child(2){border-top:6px solid #577bbc;}
/*.certi_item:nth-child(1) .button{background:#aecc7e; border:1px solid #aecc7e; color: #fff;}
.certi_item:nth-child(2) .button{background:#577bbc; border:1px solid #577bbc; color: #fff;}
.certi_item:nth-child(1) .button:hover{color: #aecc7e;}
.certi_item:nth-child(2) .button:hover{color: #577bbc;}*/



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

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

}

/* **************************************** *
 * 576px
 * **************************************** */
@media (max-width:576px){
    .joinArea{padding:30px 0 20px;}
    .designLogin li{margin-top:26px;}
    .designLogin li input{height:44px;}
    .designLogin li label{font-size:13px;}
    .button_area.login{margin:10px auto 0;}
    .btn_login{height:50px;}
    .btn_login.kakao,
    .btn_login.naver,
    .btn_login.facebook{padding-left:40px; padding-right:40px;}
    .btn_login.kakao span:before,
    .btn_login.naver span:before,
    .btn_login.facebook span:before{width:40px; background-size:20px auto;}
    
    .certi_item .button{min-width:auto;}
    .certiList{display: block;}
    .certiList .certi_item{display: block; width: 100%; margin-top: 20px; padding: 30px 10px;}
    .certiList .certi_item:first-child{margin-top: 0; border-right-width:1px;}
    .certiList .certi_item strong{font-size: 16px;}
}