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

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


/* 로그인 */
.login {min-height:400px; text-align:center; display:flex; align-items:center; justify-content:center;}
.login > form {width:100%; max-width:480px; border:1px solid #dedede; border-radius:10px; padding:40px min(5vw, 40px); transition:0.3s;}
.login h5 {font-weight:800; font-size:1.5em; text-align:center; margin:0 0 5px;}
.login p {margin:0 0 20px; text-align:center; color:#aaa;}
.login li {display:flex; align-items:center; justify-content:space-between; margin:10px 0;}
.login li label {font-weight:800;}
.login li input {width:75%; height:40px; margin-left:auto; border:0; font-weight:600; border-radius:5px; background:var(--bg-grey);}
.login .btn_sumit {background:var(--point-color2); color:#fff; font-weight:600; border-radius:5px; transition:0.3s; border:0; display:flex; width:100%; height:40px;}
.login .btn_sumit:hover {background:var(--point-color);}
.login .sns {display:flex; gap:2%;}
.login .sns a {flex:1; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:600; color:#fff; padding:10px; font-size:0.9em; border-radius:5px; border:1px solid rgba(0,0,0,0.05); box-sizing:border-box; line-height:1.25;}
.login .sns a:nth-child(1) {background:#03c75a;}
.login .sns a:nth-child(2) {background:#fae100; color:#111;}
.login .sns a:nth-child(3) {background:#4285f4;}
.login dl {display:flex; align-items:center; gap:10px;}
.login dd {border:1px solid #dedede; border-radius:5px; flex:1;}
.login dd a {padding:0.5em 1em; display:blpck; color:var(--point-color-grey); display:block; font-size:0.9em;}

.login .tablinks {padding:0.5em 1em; cursor:pointer; margin-top:20px;}
.login .tablinks.on {border-color:var(--point-color2); color:var(--point-color2);}
.login_cont .btn_submit,
.loginbtn a {background:var(--point-color2); color:#fff; font-weight:600; border-radius:5px; transition:0.3s; border:0; display:flex; width:100%; height:40px; text-align:center; justify-content:center; align-items:center;}
.login_cont .btn_submit:hover,
.loginbtn a:hover {background:var(--point-color);}
.login .idinfo {color:#333;}
.login .idinfo b {color:var(--point-color2); font-weight:800; margin:0 0.1em;}

@media all and (min-width:768px) {
  .login > form {padding-top:60px; padding-bottom:60px;}
}


/* 공통 */
.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:'check'; font-family:var(--ic); margin:0 0.5em 0 0;}
.mem_wrap .joinstep li.on {background:var(--point-color2); 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:var(--point-color2);}


/* 회원가입 */
.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:'check_circle'; font-family:var(--ic); margin:0 0.2em 0 0; color:#ddd; font-size:1.25em;}
.mem_wrap .agree_check input[type="checkbox"]:checked + label:before {color:var(--point-color2);}
.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 #dedede; color:#999; font-weight:500;}
.mem_wrap .search_tab dd.on {border:1px solid #dedede; 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;}
}


/*회원가입*/
.member .joinstep {display:flex; gap:10px;}
.member .joinstep li {flex:1; background:#f4f4f4; color:#888; font-weight:700; display:flex; align-items:center; justify-content:center; padding:10px;}
.member .joinstep li.on {background:var(--point-color2); background: linear-gradient(135deg, var(--point-color) 0%, var(--point-color2) 100%); color:#fff;}
.member .joinstep li p {display:flex; align-items:center;}
.member .joinstep li p:after {font-family:var(--ic); margin-left:0.2em; content:'person'; content:'check';}
.member .joinstep li.on p:after{content:'task_alt';}
.member .joinstep li.on ~ li p:after {display:none;}

.member .agreebox {background:#fff; padding:10px min(3%, 20px); border:1px solid #dedede; width:100%; height:300px; overflow-y:scroll;}
.member .agreebox h5 {font-weight:800; font-size:1.1em; margin:20px 0;}
.member .agreebox h5:nth-of-type(1) {margin-top:0;}
.member .agreebox h6 {font-weight:600; margin:10px 0;}

.member .agree_check {background:#fff; border:1px solid #dedede; border-top:0; padding:10px min(3%, 20px);}
.member .agree_check input[type="checkbox"] {width:0; height:0; opacity:0;}
.member .agree_check input[type="checkbox"] + label {display:flex; align-items:center; padding-left:0;}
.member .agree_check input[type="checkbox"] + label:before {content:'check_box_outline_blank'; font-family:var(--ic); margin:0 0.5em 0 0; font-size:1.5em;}
.member .agree_check input[type="checkbox"]:checked + label:before {content:'check_box'; color:var(--point-color2);}

.member .btns {display:flex; align-items:center; justify-content:center;}
.member .btns a {display:flex; align-items:center; justify-content:center; padding:0.75em 1em;min-width:120px; color:#fff; background:#aaa;}
.member .btns a.type01 {background:var(--point-color2);}

.member .write_apply {width:100%; margin:0 auto;}
.member .write_apply li {align-items:flex-start;}
.member .write_apply .textin {font-size:0.9em;}
.member .write_apply .addbox {position:relative;}
.member .write_apply .addbox a.btn_sumit {display:flex; align-items:center; justify-content:center; width:90px; height:36px; position:absolute; right:0; top:2px; border:1px solid #dedede !important; background:#fff; font-size:13px; color:#999 !important;}
.member .write_apply .scbox {position:relative;}
.member .write_apply .scbox button {display:flex; align-items:center; justify-content:center; width:60px; height:36px; position:absolute; right:0; top:2px; border:1px solid #dedede; background:#fff; font-size:15px; color:#999;}
.member .write_apply .selectbox {position:relative;}
.member .write_apply .selectbox select {width:100% !important;}
.member .write_apply .selectbox:after {font-family:var(--ic); content:'arrow_drop_down'; position:absolute; right:10px; top:0; line-height:36px;}
.member .orgbox {display:flex; flex-wrap:wrap; border-top:2px solid #222;}
.member .orgbox dt,
.member .orgbox dd {padding:10px; border-bottom:1px solid #dedede;}
.member .orgbox dt {width:20%; font-weight:600; background:#fafafa; text-align:center;}
.member .orgbox dd {width:80%; color:#888;}

@media all and (min-width:768px) {
  .member .joinstep li {padding:15px;}

  .member .agree_check {padding:15px min(3%, 20px);}

  .member .orgbox dt {width:15%;}
  .member .orgbox dd {width:35%;}
  .member .orgbox dd.full {width:85%;}
}

@media all and (min-width:1200px) {
  .member .write_apply li {padding:20px 10px;}
}


/*회원가입 완료*/
.member .loginbox {display:flex; align-items:center; justify-content:center; margin:0 auto; padding:40px 0;}
.member .loginbox h5 {font-weight:800; font-size:1.5em; text-align:center; margin:0 0 5px;}
.member .loginbox p {margin:0 0 20px; text-align:center; color:#aaa;}
.member .loginbox form {width:100%; max-width:400px;}
.member .loginbox ul {margin:0 0 10px;}
.member .loginbox li {display:flex; align-items:center; margin:0 0 10px;}
.member .loginbox label {display:none;}
.member .loginbox label + input {border:1px solid #dedede; width:100%; height:50px; padding:0 1em;}
.member .loginbox label + input::placeholder {color:#aaa;}
.member .loginbox dl {display:flex; align-items:center; margin:20px 0 0;}
.member .loginbox dd {flex:1; text-align:center;}
.member .loginbox dd:first-of-type {border-right:1px solid #dedede;}
.member .loginbox dd a {display:block; color:#999; font-size:0.9em;}
.member .loginbox .btn_sumit {width:100%; height:50px; background:var(--point-color2); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; border:0;}

@media all and (min-width:768px) {
  .member .loginbox h5 {font-size:1.75em;}
}