@charset "utf-8";

.member-container {position: relative;display: block;min-height: 300px;}

/*회원공통*/
.memBox {position: relative;display: block;width: 450px;padding: 50px;margin: 40px auto;}
.memBox .title {position: relative;display: block;text-align: center;}
.memBox .title .btit {display: block;font-size: 32px;color: #222;line-height: 130%;font-weight: 600}
.memBox .title .tit {display: block;font-size: 28px;color: #222;line-height: 130%;font-weight: 600;margin-bottom: 10px}
.memBox .title .txt {display: block;font-size: 15px;color: #777}
.memBox .title .logo {display: block;margin-top: 20px}

.member-form {position: relative;display: block;overflow: hidden;margin: 50px 0 0;border-top: 1px solid #dee2e6}
.member-form ul {overflow: hidden;}
.member-form li {position: relative;display: block;margin-bottom: 10px;padding: 15px 0;border-bottom: 1px solid #dee2e6}
.member-form li:last-child {margin-bottom: 0}
.member-form li .form-title {position: relative;line-height: 140%;display: block;font-size: 15px;color: #222;font-weight: 600;margin-bottom: 10px}
.member-form li input[type=text], .member-form li input[type=password] {height: 35px;line-height: 35px;font-size: 15px;background: #fff;}
.member-form li .loginInput {position: relative;display: block;}
.member-form li .loginInput input[type=text], .member-form li .loginInput input[type=password] {padding-left: 40px;height: 50px;line-height: 50px;}
.member-form li .loginInput:before {position: absolute;top: 50%;left: 40px;width: 1px;height: 20px;margin-top: -10px;background: #ddd;content: "";z-index: 10}
.member-form li .loginInput:after {position: absolute;display: block;top: 0;left: 0;width: 40px;height: 50px;line-height: 50px;text-align: center;font-size: 21px;font-family: Feather;z-index: 10}
.member-form li .loginInput.id:after {content: "\e9f1"}
.member-form li .loginInput.password:after {content: "\e987"}
.member-form li .login-btn {position: relative;display: block;background: #3b53a3;color: #fff;height: 50px;line-height: 50px;font-size: 20px;text-align: center;border-radius: 5px;}
.member-form li .input-group {position: relative;display: block;margin: 5px 0;overflow: hidden}
.member-form li .input-group.full input[type=text] {width: 95%}
.member-form li .input-group input[type=text], .member-form li .input-group input[type=password] {width: 250px}
.member-form li .input-stxt {position: relative;display: block;}
.member-form li .sinput {display: inline-block;vertical-align: top;width: 100px}
.member-form li .binput {display: inline-block;vertical-align: top;width: 100px}
.member-form li .sinput-txt {display: inline-block;vertical-align: top;width: 20px;line-height: 35px;text-align: center}

.member-form.login {margin-bottom: 30px;border-top: none}
.member-form.login li {padding: 0;border-bottom: none}
.member-form.login li .form-title {position: relative;top: 0;width: 100%;line-height: 25px;margin-bottom: 5px}

.sns_login {display: block;margin-bottom: 20px}
.sns_login h3 {display: block;font-weight: 600;color: #151515;font-size: 17px;margin-bottom: 10px}
.sns_login ul {overflow: hidden}
.sns_login li {float: left;width: 48%}
.sns_login li:first-child {margin-right: 4%}
.sns_login li a {position: relative;display: block;color: #fff;height: 50px;line-height: 50px;font-size: 15px;text-align: center;border-radius: 5px;}
.sns_login li a span {display: inline-block;padding-left: 30px;}
.sns_login li a.naver {background: #00c73c;color: #fff}

.sns_login li a.naver span {background: url("/static/images/design/content/login_naver.png") no-repeat left center}
.sns_login li a.kakao {background: #fee500;color: #1a1a1c}
.sns_login li a.kakao span {background: url("/static/images/design/content/login_kakao.png") no-repeat left center}


.member-form.line-top {border-top: 2px solid #98a6ad}
.member-form.line-top .btn {padding: 0 10px;line-height: 33px}

.tlineNo {margin-top: 10px;border-top: none;}
.tlineNo .form-title {left: 10px !important;width: 110px}

/*로그인*/
.loginBox {padding: 70px 50px}
.loginBox .membtBox {position: relative;display: block;overflow: hidden;text-align: center}
.loginBox .membtBox li {position: relative;display: inline-block;padding-left: 17px;vertical-align: top}
.loginBox .membtBox li:after {position: absolute;top: 4px;left: 8px;width: 1px;height: 10px;background: #ccc;content: ""}
.loginBox .membtBox li a {display: inline-block;color: #666}
.loginBox .membtBox li:first-child {padding-left: 0}
.loginBox .membtBox li:first-child:after {display: none}


.mem_dangoll {position: relative;display: block;overflow: hidden;margin-top: 20px;background: #f6f6f6;border: 1px solid #ddd;padding: 20px;text-align: center}
.mem_dangoll .btnbox {position: relative;display: block;margin-top: 10px}

/*회원가입*/
.join-step {position: relative;display: block;overflow: hidden;margin: 30px 0;text-align: center}
.join-step li {position: relative;display: inline-block;vertical-align: top;margin: 0 25px}
.join-step li:after {position: absolute;top: 0;right: -30px;width: 23px;height: 30px;font-family: Feather;content: "\e99b";font-size: 25px;line-height: 30px;text-align: center;color: #bbb}
.join-step li:last-child:after {display: none}
.join-step li .num {position: relative;display: block;width: 30px;height: 30px;line-height: 30px;margin: 0 auto;border-radius: 50%;background: #aaa;text-align: center;color: #fff;}
.join-step li .txt {display: block;margin-top: 5px;text-align: center;font-size: 16px;color: #888}
.join-step li.on .num {background: #1e2c5d;}
.join-step li.on .txt {color: #1e2c5d;}

.join-agree {position: relative;display: block;overflow: hidden;border: 1px solid #dee2e6;}
.join-agree li {position: relative;display: block;padding: 15px 70px 15px 15px;border-bottom: 1px solid #dee2e6;overflow: hidden;}
.join-agree li:first-child {background: #f6f6f6;color: #222;font-weight: 600}
.join-agree li:last-child {border-bottom: none}
.join-agree li .txt {display: block;line-height: 30px;font-size: 14px}
.join-agree li .as-chek {position: absolute;top: 50%;right: 0;margin-top: -13px;}
.join-agree li .detail {position: relative;display: inline-block;padding-right: 8px;margin-left: 5px;font-size: 12px;color: #106cde}
.join-agree li .detail:before {position: absolute;top: 0;right: 0;width: 5px;height: 10px;content: "▶";font-size: 10px;}

.join-complete {position: relative;display: block;overflow: hidden;border: 1px solid #ddd;background: #f6f6f6;padding: 35px 25px 30px;text-align: center}
.join-complete .title {display: block;font-size: 22px;color: #555;margin-bottom: 20px;line-height: 140%}
.join-complete .title b {color: #222}
.join-complete .txt {display: block;font-size: 16px;line-height: 160%}
.join-complete .txt .enter {display: block}
.join-complete .logo {display: block;margin-top: 15px;}
.join-complete .logo img {width: 130px}

.join_type {position: relative;display: block;overflow: hidden;margin: 30px 0;}
.join_type h3 {display: block;font-weight: 600;color: #151515;font-size: 17px;margin-bottom: 10px}
.join_type ul {overflow: hidden}
.join_type li {float: left;width: 48%}
.join_type li.full {float: none;width: 100%}
.join_type li:first-child {margin-right: 4%}
.join_type li .join {position: relative;display: block;background: #3b53a3;color: #fff;height: 50px;line-height: 50px;font-size: 20px;text-align: center;border-radius: 5px;}
.join_type li a {position: relative;display: block;color: #fff;height: 50px;line-height: 50px;font-size: 15px;text-align: center;border-radius: 5px;}
.join_type li a span {display: inline-block;padding-left: 30px;}
.join_type li a.naver {background: #00c73c;color: #fff}
.join_type li a.naver span {background: url("/static/images/design/content/login_naver.png") no-repeat left center}
.join_type li a.kakao {background: #fee500;color: #1a1a1c}
.join_type li a.kakao span {background: url("/static/images/design/content/login_kakao.png") no-repeat left center}

.find-complete {position: relative;display: block;overflow: hidden;border: 1px solid #ddd;background: #f6f6f6;padding: 35px 25px 30px;text-align: center;margin: 30px 0 10px;font-size: 17px}
.find-complete b {color: #ef4123;letter-spacing: 0}
.find-complete small {display: block;margin-top: 10px;font-size: 13px;color: #888}
.find-txt {position: relative;display: block;overflow: hidden;text-align: center}
.find-txt ul {overflow: hidden;margin-top: 3px}
.find-txt li {position: relative;display: inline-block;padding: 0 7px 0 10px;color: #888;letter-spacing: 0}
.find-txt li:before {position: absolute;top: 4px;left: 0;width: 1px;height: 10px;background: #ccc;content: ""}
.find-txt li:first-child:before {display: none}

@media only screen and (max-width:640px){

    .member-container {background: #fff;}

    .memBox {width: 100%;padding: 30px 20px;margin: 0 auto;max-width: 450px;-webkit-box-shadow: none;-moz-box-shadow: none; box-shadow: none;box-sizing: border-box}
    .memBox .title {border-bottom: 1px dotted #ccc;padding-bottom: 20px}
    .memBox .title .tit {font-size: 22px;}
    .memBox .title .txt {font-size: 14px;}

    .member-form {margin: 20px 0}
    .member-form li .form-title {font-size: 15px;}
    .member-form li input[type=text], .member-form li input[type=password] {font-size: 14px;}
    .member-form li .loginInput input[type=text], .member-form li .loginInput input[type=password] {height: 40px;line-height: 40px;font-size: 14px;}
    .member-form li .loginInput:after {height: 40px;line-height: 40px;}
    .member-form li .login-btn {font-size: 17px;}
    .member-form li .input-group input[type=text], .member-form li .input-group input[type=password] {width: calc(100% - 95px)}
    .member-form li .input-group.full input[type=text], .member-form li .input-group.full input[type=password] {width: calc(100%)}
    .member-form li .sinput {width: calc(30% - 30px)}
    .member-form li .sinput input {width: 100% !important;}
    .member-form li .sinput-txt {width: 15px;}

    .member-form li .binput {width: calc(30% - 12px)}
    .member-form li .binput input {width: 100% !important;}

    .member-form li .sinput.email {width: calc(48% - 12px)}
    .member-form li .btn {padding: .375rem 0.5rem}

    .member-form li .form-title {width: 80px;}

    .tlineNo .form-title {left: 0 !important;width: 80px}

    .sns_login li a {height: 40px;line-height: 40px;font-size: 13px;}
    .sns_login li a span {padding-left: 20px;background-size: 17px !important}

    /*로그인*/
    .loginBox {max-width: 320px;padding: 60px 20px;}
    .loginBox .title img {width: 240px}

    /*회원가입*/
    .join-step li .txt {font-size: 14px;}
    .join-agree li {padding: 15px 60px 15px 15px;}
    .join-agree li .txt {line-height: 20px;font-size: 14px;}

    .join-complete .title {font-size: 20px;line-height: 130%}
    .join-complete .title .enter {display: block;}
    .join-complete .txt {font-size: 14px;line-height: 140%}
    .join-complete .txt .enter {display: inline }
    .join-complete .logo img {width: 110px}

    .mem_dangoll {padding: 15px}
    .mem_dangoll br {display: none}

    .join_type li:first-child {margin-right: 4%}
    .join_type li .join {font-size: 17px}
    .join_type li a {height: 40px;line-height: 40px;font-size: 13px;}
    .join_type li a span {padding-left: 20px;background-size: 17px !important}


}


@media only screen and (max-width:380px){

    .member-form li {padding: 15px 0;}
    .member-form li .form-title {position: relative;top: 0;width: 100%;line-height: 25px}

    .join-step li {margin: 0 18px}

    .join-complete {padding: 25px 15px 20px;}

}


.h5-title {position: relative;display: block;padding-top: 7px;font-weight: 600;color: #222;font-size: 16px;line-height: 140%;margin-bottom: 7px}
.h5-title:before {position: absolute;top: 0;left: 0;width: 20px;height: 3px;content: "";background: #ef3d58}

.agreement_li {position: relative;display: block;}
.agreement_li li {position: relative;display: block;padding-left: 18px;margin-bottom: 10px;line-height: 22px;}
.agreement_li li:last-child {margin-bottom: 0}
.agreement_li li span {position: absolute;top: 0;left: 0;line-height: 22px;display: inline-block;}