@charset "utf-8";
/* 기본박스 */
.mbskin {position:relative;margin:100px auto 0;width:360px;text-align:center}
.mbskin:after {right:10px;left:auto;
  -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
     -o-transform:skew(8deg) rotate(3deg);
      transform:skew(8deg) rotate(3deg)}
.mbskin .mbskin_box{border:1px solid #dde7e9;background:#fff}
.mbskin .frm_input {width:100%}
.mbskin .btn_submit {width:100%;margin:10px 0 0;height:45px;font-weight:bold;font-size:1.25em}
.mbskin h1 {margin:60px 0 30px;font-size:2em}
/* 로그인 */
#mb_login {}
#login_fs {padding:35px}
#mb_login #login_fs .btn_submit {margin:0 0 15px}

#login_info {}
#login_info:after {display:block;visibility:hidden;clear:both;content:""}
#login_info .login_if_auto {float:left}
#login_info .login_if_auto label {vertical-align:baseline;padding-left:5px}
#login_info .login_if_lpl {float:right}
#login_password_lost {display:inline-block;border:1px solid #d5d9dd;color:#3a8afd;border-radius:2px;padding:2px 5px;line-height:20px}

#mb_login_notmb {margin:30px auto;padding:20px 30px;border: 1px solid #dde7e9}
#mb_login_notmb h2 {font-size:1.25em;margin:20px 0 10px}
#guest_privacy {border:1px solid #ccc;text-align:left;line-height:1.6em;color:#666;background:#fafafa;padding:10px;height:150px;margin:10px 0;overflow-y:auto}
#mb_login_notmb .btn_submit {display:block;text-align:center;line-height:45px}

#mb_login_od_wr {margin:30px auto;padding:20px 30px;border: 1px solid #dde7e9}
#mb_login_od_wr h2 {font-size:1.25em;margin:20px 0 10px}
#mb_login_od_wr p {background:#f3f3f3;margin:20px 0 0;padding:15px 20px;line-height:1.5em}

#mb_login #sns_login {margin-top:0;border-color:#edeaea;padding:25px}
#mb_login #sns_login:after {display:block;visibility:hidden;clear:both;content:""}
#mb_login #sns_login h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#mb_login #sns_login .sns-wrap {margin:0 !important}
#mb_login #sns_login .sns-icon {width:49% !important;float:left !important}
#mb_login #sns_login .sns-icon:nth-child(odd) {margin-right:2%}
#mb_login #sns_login .txt {font-size:0.95em;padding-left:5px !important;border-left:0 !important}
.mb_log_cate h2 {width:50%;float:left;padding:20px 0;text-align:center}
.mb_log_cate .join {width:50%;float:left;padding:20px 0;text-align:center;background:#f7f7f7;color:#6e6e6e}
.mb_log_cate:after {display:block;visibility:hidden;clear:both;content:""}

.input-floating {
    position: relative;
}
*, ::after, ::before {
    box-sizing: border-box;
}
.input-floating>.form_input {
    padding: 1rem .75rem;
}
.input-floating>.form_input {
    height: calc(3.5rem + calc(2px* 2));
    min-height: calc(3.5rem + calc(2px* 2));
    line-height: 1.25;
}
.form_input {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4285714286;
    color: #172b4d;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 2px solid rgba(9,30,66,0.14);
    border-radius: .25rem;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
}
.input-floating>label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    padding: 1rem .75rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 2px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}
label {
    display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .input-floating > label {
    transition: none;
  }
}
.input-floating > .form_input {
  padding: 1rem 0.75rem;
}
.input-floating > .form_input::-moz-placeholder {
  color: transparent;
}
.input-floating > .form_input::placeholder {
  color: transparent;
}
.input-floating > .form_input:not(:-moz-placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.input-floating > .form_input:focus, .input-floating > .form_input:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.input-floating > .form_input:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.input-floating > .form_input:not(:-moz-placeholder-shown) ~ label {
  color: rgba(23,43,77, 0.65);
  transform: scale(0.75) translateY(-0.5rem) translateX(0.15rem);
}
.input-floating > .form_input:focus ~ label,
.input-floating > .form_input:not(:placeholder-shown) ~ label {
  color: rgba(23,43,77, 0.65);
  transform: scale(0.75) translateY(-0.5rem) translateX(0.15rem);
}
.input-floating > .form_input:not(:-moz-placeholder-shown) ~ label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: #ffffff;
  border-radius: 0.25rem;
}
.input-floating > .form_input:focus ~ label::after,
.input-floating > .form_input:not(:placeholder-shown) ~ label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: #ffffff;
  border-radius: 0.25rem;
}

.input-floating > .form_input:-webkit-autofill ~ label {
  color: rgba(23,43,77, 0.65);
  transform: scale(0.75) translateY(-0.5rem) translateX(0.15rem);
}
.input-floating > :disabled ~ label,
.input-floating > .form_input:disabled ~ label {
  color: rgba(191,219,248,0.28);
}
.input-floating > :disabled ~ label::after,
.input-floating > .form_input:disabled ~ label::after {
  background-color: rgba(188,214,240,0.04);
}
.mb-3{
  margin-bottom: .75rem !important;
}