@charset "utf-8";

/*공통*/
.member {padding:120px 0; background:#f6f7f8 url('../img/sub_vis_bg.png') no-repeat right bottom / 30%;}

@media all and (min-width:1080px) {
   .member {padding:160px 0;}
}

/* 로그인*/
.member .login_box {position:relative; padding:30px; width:90%; max-width:600px; margin:0 auto;}
.member .login_box h1 {color:#333; font-weight:600; font-size:1.5em; text-align:center;}
.member .login_box .tx_deco {color:#777; text-align:center; margin-bottom:20px; font-size:0.9em;}
.member .login_box.bd_none {border-bottom:0px none}
.member .login_box .login_con li {position:relative;}
.member .login_box .login_con li.inbox2 {margin-top:10px;}
.member .login_box .login_con li label {position:absolute; top:0; left:0; width:40px; height:40px; border-right:0; background:url('../img/ic_id.png') 50% 50% no-repeat; background-size:30px; text-indent:-9999px;}
.member .login_box .login_con li.inbox2 label {background-image:url('../img/ic_pw.png');}
.member .login_box .login_con li input {width:100%; height:40px; padding-left:50px;}

.member .login_box .login_check_con li {position:relative;}
.member .login_box .login_check_con li.inbox2 {margin-top:10px;}
.member .login_box .login_check_con li label {position:absolute; top:0; left:0; width:40px; height:40px; border-right:0; background:url('../img/ic_company.png') 50% 50% no-repeat; background-size:30px; text-indent:-9999px;}
.member .login_box .login_check_con li.inbox2 label {background-image:url('../img/ic_id.png');}
.member .login_box .login_check_con li input {width:100%; height:40px; padding-left:50px;}

.loginbtn {margin:20px 0}
.loginbtn button {width:100%; height:50px; background:#3b75b9; background:linear-gradient(108deg, #3b75b9 60%, #2d598c 100%); color:#fff; font-size:1.1em; font-weight:500; border:0px;}
.loginbtn.find button {float:left; width:49%; margin-right:2%;}
.loginbtn.find button:last-child {margin-right:0; background:#b1b1b9}
.login_err {margin-top:15px; color:#ec3a3a; font-weight:500; line-height:20px;}
.member .login_box .login_link {overflow:hidden; color:#888; font-size:15px; letter-spacing:-0.5px;}

.member .login_box .login_link .left {margin-bottom:10px;}
.member .login_box .login_link .left li {font-size:15px; margin-right:20px; font-weight: 400;}
.member .login_box .login_link .left li input {margin-right:5px; line-height:45px;}
.member .login_box .login_link .left li label {line-height:45px;}
.member .login_box .login_link .right {overflow:hidden;}
.member .login_box .login_link .right li {width:40%; float:left;}
.member .login_box .login_link .right li:last-child {width:60%; float:left;}
.member .login_box .login_link .right li a {line-height:45px; display:block; text-align:center; position:relative;}
.member .login_box .login_link .right li a:before {content:''; width:1px; height:14px; background:#e6e6e6; position:absolute; left:0; top:0; bottom:0; margin:auto}
.member .login_box .login_link .right li:first-child a {position:relative; color:#000;}
.member .login_box .login_link .right li:first-child a:before {display:none}

.member .search_tab dd {display:inline-block; width:50%; float:left; text-align:center; padding:15px 0; cursor:pointer; border:1px solid #ddd; background:#fafafa; position:relative; color:#777;}
.member .search_tab dd:last-child {border-left:0;}
.member .search_tab dd h3 {font-size:1.1em; font-weight:600; line-height:1.25em; margin:0 0 5px;}
.member .search_tab dd h3:before {font-family:'FontAwesome'; display:inline-block; content:"\f058"; margin:0 5px 0 0;}
.member .search_tab dd p {font-size:0.8em; opacity:0.8;}
.member .search_tab dd.on {border-bottom:0; background:#fff; color:#000;}
.member .search_tab dd.on:before {content:''; display:inline-block; width:100%; height:3px; background:#3b75b9; position:absolute; left:0; top:-1px;}
.member .search_tab dd.on h3:before {color:#3b75b9;}

.member .search_input .result_txt {padding:20px 0;}
.member .search_input ul {overflow:hidden;}
.member .search_input li {overflow:hidden; position:relative;}
.member .search_input li .fm_list{display:inline-block; width:100px; float:left; font-size:1em; padding:.750em 0; font-weight:500; background:#fff}
.member .search_input li .fm_txt{display:inline-block; width:calc(100% - 100px); font-size:1em; padding:.750em 0;}
.member .search_input li .fm_txt input{width:100%;  height:36px; line-height:36px;}
.member .search_input li .fm_txt input[type="radio"],
.member .search_input li .fm_txt input[type="checkbox"] {width:auto; display:inline-block; margin-right:5px;}
.member .search_input li .fm_txt input.rdo{display:inline-block; width:auto; }
.member .search_input li .fm_txt .rdo_txt{margin-left:3px; margin-right:10px;}
.member .search_input li .fm_txt button{line-height:36px; height:36px}
.member .search_input li .btn_change input.op0{display:none;}
.member .search_input li .btn_change .radio_label{display:inline-block; height:36px; line-height:36px; padding:0 20px; border:1px solid #e6e6e6; min-width:100px; text-align:center;}
.member .search_input li .btn_change input:checked + .radio_label{background-color:#616d7b; border-color:#616d7b;color:#fff}


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

   .member .login_box{padding:50px;}
   .member .login_box .login_con li.inbox2 {margin-top:15px;}
   .member .login_box .login_con li label {width:55px; height:55px;}
   .member .login_box .login_con li input {height:55px;}
   .member .login_box .login_check_con li.inbox2 {margin-top:15px;}
   .member .login_box .login_check_con li label {width:55px; height:55px;}
   .member .login_box .login_check_con li input {height:55px;}
   .loginbtn {margin:20px 0 40px}
   .loginbtn button{height:55px;}

   .member .login_box .login_link .left {float:left;}
   .member .login_box .login_link .right{float:right; width:320px;}
}


/*회원가입*/
.member .sub_title {text-align:center;}
.member .sub_title h3 {font-size:1.75em; color:#222; font-weight:600; position:relative; padding:0 0 20px;}
.member .sub_title h3:after {content:''; display:inline-block; width:40px; height:1px; background:#222; position:absolute; left:calc(50% - 20px); bottom:0px;}

.member .joinstep {text-align:center;}
.member .joinstep ul {width:100%; max-width:600px; margin:0 auto; position:relative;}
.member .joinstep ul:before {content:''; display:inline-block; width:4px; height:4px; border:4px solid #616d7b; background:#fff; border-radius:100px; position:absolute; left:0; top:-4px; z-index:10;}
.member .joinstep li {display:inline-block; width:33.33%; float:left; padding:10px 10px 0 0; border-top:4px solid #616d7b; color:#616d7b; text-align:right; position:relative;}
.member .joinstep li.on {color:#616d7b;}
.member .joinstep li span.st {display:inline-block; width:12px; height:12px; border:4px solid #616d7b; background:#fff; border-radius:100px; position:absolute; right:0; top:-8px;}
.member .joinstep li.on ~ li {border-color:#d5dade; color:#9ea9b3;}
.member .joinstep li.on ~ li span.st {border-color:#d5dade;}

.member .agreebox {background:#fff; padding:20px 3%; border:1px solid #e0e0e0; width:100%; height:300px; overflow-y:scroll;}
.member .agreebox h5 {font-weight:600; font-size:1.1em;}

.member .agree_check {background:#fff; border:1px solid #e0e0e0; border-top:0; padding:10px 3%;}
.member .agree_check.bt {border-top:1px solid #e0e0e0;}
.member .agree_check input[type="checkbox"] {display:none;}
.member .agree_check input[type="checkbox"] + label:before {content:'\f058'; font-family:'FontAwesome'; display:inline-block; vertical-align:baseline; margin:0 0.5em 0 0; font-size:1.25em; color:#9ea9b3;}
.member .agree_check input[type="checkbox"]:checked + label:before {color:#3b75b9;}

@media all and (min-width:768px) {
  .member .agreebox {padding:30px 20px;}
  .member .agree_check {padding:15px 20px;}
  .member input[type="password"].mid_input {min-width:400px;}
}