section.title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
    padding: 1rem 0;
    margin: 0 1.6rem 1.6rem;
    border-bottom: 2px solid #000;
}

section.title .sub {
    text-align: left;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 2rem 0 1rem;
}

button.join-submit {
    width: 100%;
    margin-top: 3rem;
    background-color: #000;
    color: #fff;
    padding: 1.4rem 0;
    font-size: 1.3rem;
}

button.to-hack {
    margin: 1rem 0 3rem;
}

button.to-hack.disabled,
button.join-submit.disabled {
    background-color: #f6f6f6;
    color: #999;
}

button.change-password {
    width: 100%;
    background-color: #fff;
    border: 1px solid #dedede;
    color: #000;
    padding: 1rem 0;
    font-size: 1.2rem;
}

section.join-wrapper {
    margin: 1.6rem;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.input-group {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin: 1rem 0;
}

.input-group label {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    width: 100%;
}

.input-group label em {
    color: #bd081c;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-wrapper.zipcode {
    width: 70%;
}

.input-wrapper button.btn_clear {
    position: absolute;
    visibility: hidden;
    right: 0;
    top: 0;
    width: 3.6rem;
    height: 4rem;
    opacity: 0;
    transition-duration: .3s;
}

.input-wrapper button.btn_clear.on {
    visibility: visible;
    opacity: 1;
}

.input-wrapper button.btn_clear:after {
    top: 50%;
    left: 50%;
    width: 1.8rem;
    height: 1.8rem;
    margin: -0.9rem 0 0 -0.9rem;
    background-position: 100% 0.2rem;
}

.input-wrapper input {
    padding: 1rem;
    font-size: 1.3rem;
    border: 1px solid #dedede;
    width: 100%;
    height: unset;
}

input::placeholder {
    color: #dbdbdb;
}

input#user-password:focus {
    border-color: #000;
    color: #000;
}

.caption {
    margin: 0.2rem 0 1rem;
    font-size: 1.1rem;
    color: #999;
    letter-spacing: -0.05rem;
    padding-left: 1.2rem;
    text-indent: -1.2rem;
    word-break: keep-all;
    line-height: 1.8rem;
}

.marketing-agreement {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    font-size: 1.1rem;
}

.must-agree-wrapper,
.optional-agree-wrapper,
.total-agree-wrapper {
    width: 100%;
    padding-bottom: 1rem;
    border-bottom: 1px solid #dedede;
}

.must-agree-wrapper,
.optional-agree-wrapper {
    border-bottom: none;
}

/*.must-agree-wrapper > label > em,
.total-agree-wrapper > label > em {
    margin-left: 0.5rem;
    font-size: 0.9rem;
}

.must-agree-wrapper > label > em {
    color: #bd081c;
}*/

.individual-agree-wrapper {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 1rem 0;
}

.individual-agree-wrapper .individual-agreement {
    width: 33%;
    margin-bottom: 1.2rem;
}

.total-agree-wrapper > label,
.must-agree-wrapper > label,
.optional-agree-wrapper > label,
.individual-agree-wrapper .individual-agreement label {
    margin-left: 0.4rem;
}

.change-password-wrapper {
    display: none;
    width: 100%;
}

input[name='user-sex'] {
    display: none;
}

input[name='user-sex'] + label {
    width: 50%;
    text-align: center;
    border: 1px solid #dedede;
    padding: 1rem 0;
    font-size: 1.2rem;
}

input[name='user-sex']:checked + label {
    background-color: #000;
    color: #fff;
}

input#user-sex-men + label {
    border-left: none;
}

.search-zipcode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29%;
    background-color: #000;
    color: #fff;
    margin-left: auto;
}

.input-wrapper.user-detailed-address {
    margin-top: 0.6rem;
}

#post_layer {
    display: none;
    position: fixed;
    overflow: hidden;
    z-index: 100;
    -webkit-overflow-scrolling: touch;
}

#btnCloseLayer {
    width: 1.5rem;
    cursor: pointer;
    position: absolute;
    right: -3px;
    top: -3px;
    z-index: 1;
}

.popup-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    padding: 1.6rem;
    box-shadow: 0 0 3px 0 #ccc;
}

.popup-header .close-btn-img-wrapper {
    width: 1.4rem;
}

.popup-header .close-btn-img-wrapper.pseudo {
    visibility: hidden;
}

.popup-header .popup-title {
    margin: 0 auto;
    font-size: 1.3rem;
    font-weight: 500;
}

.popup-container {
    height: 100%;
}

.join-popup {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.join-popup .popup-body {
    padding: 2rem 1.6rem;
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.6rem;
    letter-spacing: -0.05rem;
    color: #1d1e23;
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    /*width: 100%;*/
    /*overflow-x: hidden;*/
}

.popup-trigger {
    font-weight: bold;
    text-decoration: underline;
}

.login-btn {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    padding: 1rem 0;
    margin-bottom: 0.6rem;
    font-weight: 500;
    font-family: hs, noto;
    max-height: 4.2rem;
    line-height: normal;
}

.login-btn.kakao {
    border-radius: .3rem;
    background-color: #f9e000;
    color: #000;
}

.login-btn .sns-logo-wrapper > img {
    width: 1.8rem;
}

.login-btn .sns-logo-wrapper {
    margin-right: 0.6rem;
    display: flex;
    align-items: center;
}

#post_layer > div {
    width: 100% !important;
    height : 400px !important;
}

.popup-body table td {
    border: 1px solid black;
    font-size: 1rem;
    box-sizing: border-box;
    padding: 0.4rem;
}

.popup-body table tr.thead {
    font-weight: bold;
}

.join-wrapper h2 { width:100%; font-size:1.7rem;font-weight:bold; }
.join-wrapper p.sub { width:100%; margin-top:1.1rem; font-size:1.2rem; }
.join-wrapper .phone-confirm { margin-top:2.05rem; padding:2.05rem 0 10rem; border-top:1px solid #666666; }
.join-wrapper .phone-confirm .input-wrapper input { border-radius:4px; box-sizing:border-box; }
.join-wrapper .confirm-wrap { display:flex; width:100%; justify-content:space-between; }
.join-wrapper .confirm-wrap .input-wrapper { width:65%; }
.join-wrapper .confirm-wrap .input-wrapper input { color:#CCCCCC; font-size:1.2rem; border-color:#E5E5E5; }
.join-wrapper .confirm-wrap .btn-confirm { width:33%; background:#CCCCCC; color:#FFFFFF; font-size:1.2rem; border-radius:4px; text-align:center; }
.join-wrapper .confirm-wrap .btn-confirm span { display:none; }
.join-wrapper .confirm-wrap .btn-confirm .txt-get { display:block; }
.join-wrapper .phone-confirm .active input { color:#222222; border-color:#020202; }
.join-wrapper .confirm-wrap .active + .btn-confirm { background-color:#020202; }
.join-wrapper .input-confirm { display:none; margin-top:1rem; }
.join-wrapper .input-confirm input { font-size:1.2rem; }
.join-wrapper .confirm-wrap.confirm .btn-confirm { color:#222222; background:#FFFFFF; border:1px solid #666666; font-weight:bold; }
.join-wrapper .confirm .btn-confirm .txt-get { display:none; }
.join-wrapper .confirm .btn-confirm .txt-re { display:block; }
.join-wrapper .confirm + .input-confirm { display:block; }
.join-wrapper .input-confirm .confirm-time { display:flex; position:absolute; top:0; right:1.7rem; height:100%; color:#BD083D; font-size:1rem; align-items:center; }

.join-wrapper .agreement-title { display:block; margin-bottom:1.37rem; }
.join-wrapper .agreement-title em { color:#bd083d; }
.join-wrapper .must-agree-wrapper.agree-all .caption { margin-top:0.86rem; margin-bottom:0.43rem; padding-bottom:0.86rem; border-bottom:0.08rem solid #020202; }

.join-popup .popup-header { box-shadow:none; border-bottom: 1px solid #f1f1f1; }

.join-popup .blt { position:relative; padding-left:0.86rem; }
.join-popup .blt::before { content:''; display:block; position:absolute; top:0.55rem; left:0; width:0.35rem; height:0.35rem; background-color:#020202; border-radius:50%; }
.join-popup .ul-table { margin-top:1.03rem; margin-bottom:2.22rem; border-top:0.08rem solid #666666; }
.join-popup .ul-table li { display:flex; border-bottom:0.08rem solid #e5e5e5; }
.join-popup .ul-table li .th, .join-popup .ul-table li .td { padding:1.2rem; }
.join-popup .ul-table li .th { width:25%; background-color:#f6f6f6; font-weight:bold; }
.join-popup .ul-table li .td { width:75%; }

.join-popup.provide-popup .popup-body .ul-table .popup-trigger { padding-right:1.4rem; background:url('https://i.balaan.io/balaanfront/mobile/img/common/icon-arrow-right-black-16.svg') right 0.15rem no-repeat; font-weight:normal; }
.join-popup.partner-list-popup .simple-pagination { padding-bottom:0; }

button.join-confirm { position:fixed; bottom:0; width:100%; background-color:#CCCCCC; color:#fff; padding:1.4rem 0; font-size:1.37rem; font-weight:bold; }
button.btn-on { background-color:#020202; }

.join-popup.partner-list-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; }
.join-popup.partner-list-popup .popup-header { position: relative; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: 1.21rem 1.71rem; text-align:left; }
.join-popup.partner-list-popup .popup-header .popup-title { width:100%; margin:0; }
.join-popup.partner-list-popup .popup-header .close-img { vertical-align:middle; }
.join-popup.partner-list-popup div.layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; opacity: 0.8; }
.join-popup.partner-list-popup .content { position: absolute; display: block; cursor: pointer; background: #fff; left: 50%; top: 50%; width: 87%; padding: 0; font-size: 1.2rem; line-height: 1.9rem; transform: translate(-50%, -50%); border-radius: 0.35rem; }
.join-popup.partner-list-popup .popup-body { position:relative; max-height:33rem; padding: 1.71rem; }
.join-popup.partner-list-popup .popup-body .table-th { padding:1.2rem; border-top:0.08rem solid #666666; background-color:#f6f6f6; text-align:center; font-weight:bold; }
.join-popup.partner-list-popup .popup-body .table-td { padding:1.2rem; border-bottom:0.08rem solid #e5e5e5; text-align:center; }


div.layer-modal-wrapper {
    display: none;
  }

  div.layer-modal-wrapper.show {
    display: flex;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    align-items: center;
    justify-content: center;
    z-index: 9999999;
  }

  div.layer-background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999;

    background-color: black;
    opacity: 0.5;
  }

  div.layer-modal {
    border-radius: 0.6rem;
    background-color: #fff;
    padding: 2.56rem 2.05rem 2.05rem;
    font-family: lato, SpoqaHanSansNeo !important;
    width:calc(100% - 3.2rem);
    z-index: 9999999;
    box-sizing:border-box;
    font-size:1.2rem;
  }

  .layer-modal .layer-contents-img {
    text-align:center;
  }

  .layer-modal .layer-contents-body {
    margin-top:1.3rem;
    line-height:1.56;
    text-align:center;
  }

  .layer-modal .layer-contents-body strong {
    font-weight:bold;
  }

  .layer-modal .layer-contents-btn {
    display:flex;
    align-items:center;
    margin-top:1.4rem;
    height:3.5rem;
    justify-content: space-between;
    font-weight:500;
    color:#FFFFFF;
  }

  .layer-modal .layer-contents-btn button {
    width:50%;
    border-radius:0.3rem;
    height:100%;
    display:flex;
    align-items:center;
    justify-content: center;
    box-sizing: border-box;
    border:1px solid #000000;
  }


  .layer-modal .layer-contents-btn button.btn-close-coupon-popup {
    background-color:#FFFFFF;
    color:#000000;
    margin-right:0.8rem;
  }

  .layer-modal .layer-contents-btn button.btn-go-coupon-list {
    color:#FFFFFF;
    background-color:#000;
  }

@media screen and (min-width:550px) {
    button.join-submit { left:50%; width:550px; }
  }