.mem_wrap {padding:80px 0 0; background:#fafafa;}

@media all and (min-width:768px) {
  .mem_wrap {padding:100px 0 0;}
}


/* 로그인 */
.login_box {margin:0 auto; width:90%; max-width:640px; background:#fff; padding:40px 20px; border:1px solid #f0f0f0; text-align:center;}
.login_box h1 {font-size:1.5em; font-weight:600;}
.login_box .login_con {margin:40px auto 20px; width:90%;}
.login_box .login_con li {display:flex; align-items:center; text-align:left; margin:5px 0;}
.login_box .login_con li label {width:5em; font-weight:500;}
.login_box .login_con li input {width:calc(100% - 5em);}
.login_box .loginbtn button {width:90%; border:0; background:#007cc5; color:#fff; font-weight:500; height:40px; line-height:40px;}
.login_link .keep {margin:20px 0;}
.login_link .keep input[type="checkbox"] {display:none;}
.login_link .keep input[type="checkbox"] + label {display:flex; align-items:center; justify-content:center;}
.login_link .keep input[type="checkbox"] + label:before {content:'\e92b'; font-family:'xeicon'; margin:0 0.2em 0 0; color:#ddd;}
.login_link .keep input[type="checkbox"]:checked + label:before {color:#007cc5;}
.login_link .link {margin:0 auto; width:90%; display:flex; align-items:center; justify-content:center; border-top:1px solid #e0e0e0; padding:20px 0 0;}
.login_link .link li {color:#888; margin:0 0.5em; display:flex; align-items:center;}
.login_link .link li:not(:last-child):after {content:''; display:inline-block; width:1px; height:1em; background:#e0e0e0; margin-left:1em;}

@media all and (min-width:768px) {
  .login_box {padding:40px;}
  .login_box h1 {font-size:1.75em;}
}


/* 공통 */
.mem_wrap .joinstep ul {display:flex; background:#eee; border-radius:100px; overflow:hidden;}
.mem_wrap .joinstep li {flex:1; text-align:center; padding:5px 0; color:#aaa;}
.mem_wrap .joinstep li span.txt {font-weight:500;}
.mem_wrap .joinstep li span.txt:before {content:'\e929'; font-family:'xeicon'; margin:0 0.5em 0 0;}
.mem_wrap .joinstep li.on {background:#007cc5; color:#fff; border-radius:100px;}
.mem_wrap .joinstep li.on ~ li span.txt:before {display:none;}
.mem_wrap .btns ul {display:flex; align-items:center; justify-content:center; text-align:center;}
.mem_wrap .btns li {width:40%; max-width:160px;}
.mem_wrap .btns li a {display:block; background:#666; color:#fff; font-weight:500; padding:15px 0;}
.mem_wrap .btns li a.type01 {background:#007cc5;}


/* 회원가입 */
.mem_wrap .agreebox {border:1px solid #f0f0f0; border-bottom:0; background:#fff; padding:20px 10px; height:20em; overflow-y:scroll;}
.mem_wrap .agree_check {border:1px solid #f0f0f0; background:#fff; padding:10px;}
.mem_wrap .agree_check input[type="checkbox"] {display:none;}
.mem_wrap .agree_check input[type="checkbox"] + label {display:flex; align-items:center; justify-content:flex-start; font-weight:500; font-size:1.1em;}
.mem_wrap .agree_check input[type="checkbox"] + label:before {content:'\e92b'; font-family:'xeicon'; margin:0 0.2em 0 0; color:#ddd; font-size:1.25em;}
.mem_wrap .agree_check input[type="checkbox"]:checked + label:before {color:#007cc5;}
.mem_wrap .write_apply input {background:#fff;}

@media all and (min-width:768px) {
  .mem_wrap .agreebox {padding:40px 20px;}
  .mem_wrap .agree_check {padding:20px;}
}


/* 아이디·비밀번호찾기 */
.mem_wrap .search_tab {margin:0 auto; width:90%; display:flex;}
.mem_wrap .search_tab dd {flex:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:10px; border-bottom:1px solid #e0e0e0; color:#999; font-weight:500;}
.mem_wrap .search_tab dd.on {border:1px solid #e0e0e0; border-bottom:0; border-top:2px solid tan;}
.mem_wrap .search_input {margin:40px auto 20px; width:90%;}
.mem_wrap .search_input li {display:flex; align-items:center; text-align:left; margin:5px 0;}
.mem_wrap .search_input li .fm_list {width:5em; font-weight:500;}
.mem_wrap .search_input li .fm_txt {width:calc(100% - 5em);}
.mem_wrap .search_input li .fm_txt input {width:100%;}

@media all and (min-width:768px) {
  .mem_wrap .search_tab dd {padding:15px 10px;}
}