/* 마켓컬리 회원가입 양식 */
body {background-color: #f5f5f5;}
#wrap {
    /* border:3px solid palevioletred; */
    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:darkgoldenrod; */
    overflow:hidden;
    margin:0 0 54px;
}
#wrap #join_frm .user_info dt {
    /* background-color: aqua; */
    width:120px;
    float:left; clear:both;
    /* display:inline-block; */
}
#wrap #join_frm .user_info dt em {font-weight:600; color:#f00;}
#wrap #join_frm .user_info dd {
    /* background-color: bisque; */
    width:300px; margin:0 0 11px;
    float:left;
    /* display:inline-block; */
    /* 인라인-블록은 기본 margin을 2~3px 내장하고 있다. */
}
#wrap #join_frm .user_info dd:nth-last-child(2) {margin:0;}
#wrap #join_frm .user_info dd:nth-child(3n) {
    /* background-color:lime; */
    width:120px;
    float:right;
}
/* 가입양식--------------------------------------------1~6 공통 클래스 */
#wrap #join_frm .user_info dd .input_de {
    width:100%; padding:10px;
    border:1px solid #aaa; border-radius: 5px;
}
#wrap #join_frm .user_info dd .input_de::placeholder {
    font-size:0.875rem;
    color:#aaa;
}
/* 가입양식--------------------------------------------1.아이디 */
#wrap #join_frm .user_info dd #user_id {}
#wrap #join_frm .user_info dd #id_overlap_btn {
    background-color:#9E00B7; color:#fff;
    border-radius:5px;
    width:120px; padding:10px 0;
    font-size:0.875rem;
}
/* 가입양식--------------------------------------------2.비밀번호 */
#wrap #join_frm .user_info dd #user_pw {}
/* 가입양식--------------------------------------------3.비밀번호확인 */
#wrap #join_frm .user_info dd #user_pw_chk {}
/* 가입양식--------------------------------------------4.이름 */
#wrap #join_frm .user_info dd #user_name {}
/* 가입양식--------------------------------------------5.이메일 */
#wrap #join_frm .user_info dd #user_email {}
#wrap #join_frm .user_info dd #email_overlap_btn {
    background-color:#9E00B7; color:#fff;
    border-radius:5px;
    width:120px; padding:10px 0;
    font-size:0.875rem;
}
/* 가입양식--------------------------------------------6.휴대폰 */
#wrap #join_frm .user_info dd #agency:hover {border: 1px solid #9E00B7;}
#wrap #join_frm .user_info dd #agency {
    /* background-image:url(../images/arrow_drop_down.png);
    background-repeat:no-repeat;
    background-position:34px 15px; */
    background:#fff url(../images/arrow_drop_down.png) no-repeat 34px 15px;
    width:50px; padding:10px;
    border:1px solid #aaa;
    border-radius:5px;
    font-size:0.75rem; float:left; height:41px;
}
#wrap #join_frm .user_info dd #agency option {}
#wrap #join_frm .user_info dd #user_ph_number {width:245px; float:right;}
#wrap #join_frm .user_info dd #certified_btn:hover {background-color:#df15ff;}
#wrap #join_frm .user_info dd #certified_btn {
    background-color:#CCC; color:#fff;
    border-radius:5px;
    width:120px; padding:10px 0;
    font-size:0.875rem;
}
/* 가입양식--------------------------------------------7.주소 */
#wrap #join_frm .user_info dd .adr_search {
    display:block;
    border:1px solid #9E00B7;
    padding:10px;
    border-radius:5px;
    text-align:center;
    font-size:0.875rem;
    background:#fff; margin:0 0 10px;
}
#wrap #join_frm .user_info dd p {
    font-size:0.875rem; color:#aaa;
}
/* 가입양식--------------------------------------------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 #male {}
#wrap #join_frm .user_info dd label #female {}
#wrap #join_frm .user_info dd label #none {}
#wrap #join_frm .user_info dd label span {
    background-image:url(../images/gender_unchecked.png);
    background-repeat:no-repeat;
    padding-left:17px;
    font-size:0.875rem;
} /* 선택 X(★default) */
#wrap #join_frm .user_info dd label .gender:checked + span {
    background-image:url(../images/gender_checked.png);
} /* 선택 O */
/* 가입양식--------------------------------------------9.생년월일 */
#wrap #join_frm .user_info dd .birthday:focus {border:1px solid #9E00B7;}
#wrap #join_frm .user_info dd .birthday {text-align:center; width:50px;} /* 생년월일 공통 */
#wrap #join_frm .user_info dd:nth-child(26) {
    text-align:center;
    background:#fff;
    font-size:0.875rem;
    padding:10px 0;
    border:1px solid #9E00B7;
    border-radius:5px;
}
#wrap #join_frm .user_info dd #user_year {}
#wrap #join_frm .user_info dd #user_month {}
#wrap #join_frm .user_info dd #user_day {}
#wrap #join_frm .user_info dd > span {
    margin:0 15px;
    color:#aaa;
}
/* --------------------------------------------------------가입버튼 */
#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
}
/* --------------------------------------------------------버튼 활성화 공통 디자인 */
#wrap #join_frm .btn_design:hover {background-color:#df15ff !important;} 
/* 선택자 우선순위 -> !important > #아이디 > .클래스 > 태그 */