/* 마켓컬리 회원가입 양식 */
body {background-color: #f5f5f5;}
#wrap {
    width: 612px;
    margin: 0 auto;
}
/* 로고 */
#wrap h1 {text-align: center; margin: 41px 0;}
#wrap h1 a {}
#wrap h1 a img {}

/* 약관 */
#wrap .law {
    height: 200px;
    background-color: #fff;
    padding: 10px;
    overflow: auto;
    font-size: 0.75rem;
    margin: 0 0 54px;
}
#wrap .law h2 {margin-bottom: 40px;}
#wrap .law h3 {margin-bottom: 20px;}
#wrap .law p {line-height: 1.5;}

/* 가입양식(아이디~생년월일) */
#wrap #join_frm {}
#wrap #join_frm .user_info {background-color:  #f5f5f5; margin: 0 0 54px; overflow: hidden;} /* dl */
#wrap #join_frm .user_info dt {
    text-align: left; width: 120px; /* figma에서 W를 줬기 때문! */
    /* display: inline-block; */
    float: left; clear: both;
}
#wrap #join_frm .user_info dd {
    width: 300px;
    /* display: inline-block; */
    float: left;
    margin: 11px 0 0;
}
#wrap #join_frm .user_info dd:last-child(2) {margin: 0;} 
#wrap #join_frm .user_info dd:nth-child(3n) {
    width: 120px;
    float: right;
}

#wrap #join_frm .btn_design:hover {background-color: #df15ff !important;}

#wrap #join_frm .user_info dt em {color: #f00; font-weight: 600;} /* 공통 */
/* 1~6 공통 클래스 */
#wrap #join_frm .user_info dt {/* background-color: red; */} /* 공통 */
#wrap #join_frm .user_info dd .input_de1/* input, margin 주면 안 돼! (margin은 dd한테 줘야 해! */{
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    padding: 10px;
    width: 100%; /* 부모 만큼 */
}
#wrap #join_frm .user_info dd .input_de1:focus {border: 1px solid #9E00B7;}
#wrap #join_frm .user_info dd .input_de1::placeholder {
    color: #aaa; font-size: 0.875rem;}
/* 가입양식 -----------------------------------1. 아이디 */
#wrap #join_frm .user_info dd #id_overlap_btn {
    background-color: #9E00B7; 
    border-radius: 5px; 
    color: #fff; 
    padding: 10px 0;
    width: 120px; 
    font-size: 0.875rem;
}
#wrap #join_frm .user_info dd #input_id {/* background-color: orange; */} /* 개별 */
/* 가입양식 -----------------------------------2. 비밀번호 */
#wrap #join_frm .user_info dd #input_pwd {/* background-color: orange; */} /* 개별 */
/* 가입양식 -----------------------------------3. 비밀번호확인 */
#wrap #join_frm .user_info dd #input_pwd_chk {/* background-color: orange; */} /* 개별 */
/* 가입양식 -----------------------------------4. 이름 */
#wrap #join_frm .user_info dd #input_name {/* background-color: orange; */} /* 개별 */
/* 가입양식 -----------------------------------5. 이메일 */
#wrap #join_frm .user_info dd #input_email {/* background-color: orange; */} /* 개별 */
#wrap #join_frm .user_info dd #mail_overlap_btn {
    background-color: #9E00B7; 
    border-radius: 5px; 
    color: #fff; 
    padding: 10px 0;
    width: 120px; 
    font-size: 0.875rem;
} /* 개별 */

#wrap #join_frm .user_info dd #mail_overlap_btn:hover {}
/* 가입양식 -----------------------------------6. 휴대폰 */
#wrap #join_frm .user_info dd #agency {
    /* background-image: url(../image/arrow_drop_down.png);
    background-repeat: no-repeat;
    background-position: 27px 9px; */
    background: #fff url(../image/arrow_drop_down.png) no-repeat 27px 9px;
    width: 50px; padding: 9px;
    border: 1px solid #aaa;
    border-radius: 5px;
    font-size: 0.75rem;
    float: left; height: 41px;
} /* select */
#wrap #join_frm .user_info dd #agency option {}
#wrap #join_frm .user_info dd #input_tel {width: 245px; float: right;}
#wrap #join_frm .user_info dd #certified_overlap_btn {
    background-color: #CCC;
    border-radius: 5px; 
    color: #fff; 
    padding: 10px;
    width: 120px;
    font-size: 0.875rem;
} /* 개별 */
/* 가입양식 -----------------------------------7. 주소 */
#wrap #join_frm .user_info dd .adr_search {
    border: 1px solid #9E00B7;
    border-radius: 5px;
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 0.875rem;
    background-color: #fff;
    margin: 0 0 10px; /* 형제 사이니까 가능! */
} /* 개별 */
#wrap #join_frm .user_info dd p {
    color: #aaa; font-size: 0.875rem;
} /* 개별 */
/* 가입양식 -----------------------------------8. 성별 */
#wrap #join_frm .user_info dd:nth-child(23) {text-align: center; padding: 10px 0}
#wrap #join_frm .user_info dd label {}
#wrap #join_frm .user_info dd label:nth-child(2) {margin: 0 30px;}
#wrap #join_frm .user_info dd label .gender {display: none;} /* 공통 */
#wrap #join_frm .user_info dd label .gender:checked+span    {
    background-image: url(../image/gender_checked.png);} /* 공통 */
#wrap #join_frm .user_info dd #male {}
#wrap #join_frm .user_info dd #female {}
#wrap #join_frm .user_info dd #none {}
#wrap #join_frm .user_info dd label span {
    background-image: url(../image/gender_unchecked.png);
    padding-left: 17px;
    background: no-repeat;
    font-size: 0.875rem;
} /* 선택 x = default*/
/* 가입양식 -----------------------------------9. 생년월일 */
#wrap #join_frm .user_info dd:nth-child(26) {
    border: 1px solid #9E00B7; border-radius: 5px;
    padding: 10px 0; display: inline-block; width: 300px; text-align: center; background-color: #fff;
    margin-top: 11px;
}
#wrap #join_frm .user_info dd .birthday {
    width: 50px; text-align: center; border: 1px solid #fff;
} /* 공통 */
#wrap #join_frm .user_info dd .birthday:focus {border: 1px solid #9E00B7;}
#wrap #join_frm .user_info dd #input_y {} 
#wrap #join_frm .user_info dd #input_m {} 
#wrap #join_frm .user_info dd #input_d {} 
#wrap #join_frm .user_info dd > span {margin: 0 15px;} 


/* 가입 버튼 */
#wrap #join_frm #join_btn {
    background-color: #9E00B7;
    color: #fff;
    width: 200px; height: 40px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 54px auto 0; display: block;
}