.p-login {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  height: 570px;
  text-align: center;
  margin: auto;
}

.p-login.is-active {
  display: block;
}

.p-login__wrap {
  position: relative;
  display: inline-block;
  height: inherit;
  background-color: #fff;
}

.p-login__wrap:after {
  display: block;
  clear: both;
  content: '';
}

.p-login__content {
  position: relative;
  float: left;
  width: 760px;
  height: inherit;
}

.p-login__layer {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 500;
}

.p-login__layer.is-active {
  display: block;
}

.p-login__box {
  position: relative;
  width: 100%;
  padding: 78px 115px 0;
  box-sizing: border-box;
}

.p-login__list {
  float: left;
  margin: 0;
  padding: 0;
}

.p-login__tit {
  margin: 0;
  font-size: 36px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  color: #b916a4;
  line-height: 1;
}

.p-login__txt {
  margin: 4px 0 0 0;
  font-size: 15px;
  font-weight: 400;
  color: #666;
}

.p-login__txt strong {
  color: #3d3d3f;
  font-weight: 500;
}

.p-login__input {
  width: 100%;
  padding: 0 25px;
  border: 1px solid #c7c7c7;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
}

.p-login__input + .p-login__input {
  margin-top: 10px;
}

.p-login__input:-ms-input-placeholder {
  color: #c7c7c7;
}

.p-login__input::placeholder {
  color: #c7c7c7;
}

.p-login__input::-ms-input-placeholder {
  color: #c7c7c7;
}

.p-login__area {
  position: relative;
  margin-top: 22px;
  padding-right: 220px;
  text-align: left;
  font-size: 0;
  box-sizing: border-box;
}

.p-login__btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 90px;
  line-height: 90px;
  background-color: #424242;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.p-login__list {
  width: 190px;
  height: 100%;
  border-left: 1px solid #e2e2e2;
}

.p-login__item {
  position: relative;
  width: 100%;
  height: 230px;
  text-align: center;
}

.p-login__item.nth-1 .p-login__subject:before {
  width: 46px;
  height: 54px;
  background: url("../images/login/join_icon.png");
}

.p-login__item.nth-2 {
  background-color: #595959;
}

.p-login__item.nth-2 .p-login__subject {
  color: #fff;
}

.p-login__item.nth-2 .p-login__subject:before {
  width: 46px;
  height: 56px;
  background: url("../images/login/pass_icon.png");
}

.p-login__outer {
  margin-top: 40px;
  padding: 0 115px;
  text-align: left;
  box-sizing: border-box;
}

.p-login__outer:before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 40px;
  background-color: #ccc;
}

.p-login__outer:after {
  content: '';
  display: block;
  clear: both;
}

.p-login__inner {
  float: left;
  padding-top: 6px;
}

.p-login__txt2 {
  margin: 0;
  font-size: 20px;
  color: #000;
}

.p-login__txt3 {
  margin: 4px 0 0 0;
  font-size: 15px;
  color: #aaaaaa;
}

.p-login__join {
  display: inline-block;
  float: right;
  padding: 18px 3%;
  border: 1px solid #000;
  background-color: #fff;
  font-size: 18px;
  color: #000;
  box-sizing: border-box;
  text-decoration: none;
}

.p-login__span {
  display: block;
  position: relative;
  padding-right: 64px;
}

.p-login__span:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0px;
  width: 7px;
  height: 100%;
  background: url("../images/login/join_arrow.png") no-repeat center center;
}

.p-login__subject {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #3d3d3f;
}

.p-login__subject:before {
  display: block;
  margin: 0px auto 15px;
  content: '';
}

.p-login__vertical {
  display: table-cell;
  width: 1%;
  height: inherit;
  vertical-align: middle;
}

.p-login__link {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 10;
  text-indent: -999px;
}

.p-login__close {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: -44px;
  display: block;
  width: 44px;
  height: 44px;
  background: url("../images/login/close_icon.png") no-repeat center center #333;
  z-index: 120;
  text-indent: -999px;
}

.p-login__close2 {
  overflow: hidden;
  position: absolute;
  top: 18px;
  right: 18px;
  display: block;
  width: 28px;
  height: 28px;
  background: url("../images/login/join_close.png") no-repeat center center;
  z-index: 100;
  text-indent: -9999px;
}

@media only screen and (max-width: 1025px) {
  .p-login {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    height: auto;
    width: calc(100% - 84px);
  }
  .p-login__tit {
    font-size: 36px;
  }
  .p-login__content {
    float: none;
    width: auto;
  }
  .p-login__list {
    float: none;
    height: auto;
    width: 100%;
    margin-top: 90px;
    border-left: none;
    border-top: 1px solid #e2e2e2;
  }
  .p-login__list:after {
    display: block;
    clear: both;
    content: '';
  }
  .p-login__box {
    padding: 74px 55px 0;
  }
  .p-login__item {
    float: left;
    display: block;
    height: auto;
    width: 50%;
    height: 68px;
  }
  .p-login__item.nth-1 .p-login__subject:before {
    width: 33px;
    height: 38px;
    background: url("../images/login/join_icon.png") no-repeat center center/contain;
  }
  .p-login__item.nth-2 {
    background-color: #595959;
  }
  .p-login__item.nth-2 .p-login__subject {
    color: #fff;
  }
  .p-login__item.nth-2 .p-login__subject:before {
    width: 33px;
    height: 39px;
    background: url("../images/login/pass_icon.png") no-repeat center center/contain;
  }
  .p-login__subject {
    position: relative;
    padding-left: 42px;
  }
  .p-login__subject:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto 0;
  }
  .p-login__close {
    right: 0;
  }
  .p-login__outer {
    padding: 0 55px 82px;
  }
}

@media only screen and (max-width: 680px) {
  .p-login {
    width: calc(100% - 42px);
  }
  .p-login__list {
    margin-top: 0;
    padding: 10px 0 26px;
    text-align: center;
  }
  .p-login__vertical {
    display: block;
    width: auto;
  }
  .p-login__item {
    float: none;
    display: inline-block;
    width: auto;
    height: auto;
  }
  .p-login__item.nth-1 {
    position: relative;
    padding-right: 20px;
    box-sizing: border-box;
  }
  .p-login__item.nth-1:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 9px;
    width: 0;
    height: 11px;
    margin: auto 0;
    border-left: 1px solid #c7c7c7;
    content: '';
  }
  .p-login__item.nth-1 .p-login__subject {
    color: #3d3d3f;
  }
  .p-login__item.nth-2 {
    background-color: #fff;
  }
  .p-login__item.nth-2 .p-login__subject {
    color: #6c6a6a;
  }
  .p-login__area {
    margin-top: 10px;
    padding-right: 0;
  }
  .p-login__wrap {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .p-login__box {
    padding: 36px 0 0;
  }
  .p-login__tit {
    font-size: 2.6rem;
  }
  .p-login__txt {
    margin-top: 8px;
    font-size: 1.3rem;
  }
  .p-login__subject {
    padding-left: 0;
    font-size: 1.4rem;
  }
  .p-login__subject:before {
    display: none;
  }
  .p-login__input {
    padding: 0 15px;
    height: 35px;
    line-height: 35px;
    font-size: 1.4rem;
  }
  .p-login__input + .p-login__input {
    margin-top: 15px;
  }
  .p-login__btn {
    position: static;
    width: 100%;
    height: 40px;
    margin-top: 15px;
    line-height: 40px;
    background: #424242;
  }
  .p-login__close {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    margin: 16px -15px 0;
    background-image: none;
    background-color: #575757;
    text-indent: 0;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 45px;
    text-decoration: none;
  }
  .p-login__close2 {
    top: 20px;
    right: 0px;
    width: 27px;
    height: 27px;
    background: url("../images/login/join_close_m.png") no-repeat center center/27px 27px;
  }
  .p-login__outer {
    margin-top: 15px;
    padding: 0px;
    text-align: center;
  }
  .p-login__outer:before {
    margin-bottom: 10px;
  }
  .p-login__inner {
    display: none;
  }
  .p-login__join {
    float: none;
    width: 100%;
    border: 0;
    padding: 0;
    font-size: 1.4rem;
  }
  .p-login__span {
    padding-right: 0;
  }
  .p-login__span:before {
    display: none;
  }
}

.p-sns__txt {
  display: none;
}

.p-sns__list {
  margin: 30px 0 0 -10px;
  padding: 0;
}

.p-sns__list:after {
  display: block;
  clear: both;
  content: '';
}

.p-sns__item {
  float: left;
  width: 33.333%;
  padding-left: 10px;
  list-style: none;
  box-sizing: border-box;
}

.p-sns__link {
  position: relative;
  display: block;
  height: 40px;
  padding-left: 36px;
  line-height: 40px;
  font-size: 15px;
  color: #fff;
  font-weight: 500;
  box-sizing: border-box;
  text-decoration: none;
}

.p-sns__link.type-ba {
  background-color: #333;
}

.p-sns__link.type-ba:before {
  background: url("../images/login/banobagi_icon.png") no-repeat center center;
}

.p-sns__link.type-na {
  background-color: #2db400;
}

.p-sns__link.type-na:before {
  background: url("../images/login/naver_icon.png") no-repeat center center;
}

.p-sns__link.type-fa {
  background-color: #3b5998;
}

.p-sns__link.type-fa:before {
  background: url("../images/login/facebook_icon.png") no-repeat center center;
}

.p-sns__link.type-ka {
  background-color: #ffeb00;
  color: #3c1e1e;
}

.p-sns__link.type-ka:before {
  background: url("../images/login/ka_icon.png") no-repeat center center;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.p-sns__link:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  content: '';
}

@media only screen and (max-width: 680px) {
  .p-sns__txt {
    display: block;
    margin: 17px 0 0 0;
    font-size: 1.4rem;
    color: #000;
  }
  .p-sns__list {
    margin-left: 0;
    margin-top: 16px;
    text-align: center;
    font-size: 0;
  }
  .p-sns__item {
    float: none;
    display: inline-block;
    width: 50px;
    padding-left: 0;
  }
  .p-sns__item + .p-sns__item {
    margin-left: 18px;
  }
  .p-sns__link {
    padding-left: 0;
    height: 50px;
    line-height: 50px;
    text-indent: -9999px;
    overflow: hidden;
  }
  .p-sns__link.type-ba {
    background-color: #333;
  }
  .p-sns__link.type-ba:before {
    background: url("../images/login/banobagi_icon_m.png") no-repeat center center/17px 21px;
  }
  .p-sns__link.type-na {
    background-color: #2db400;
  }
  .p-sns__link.type-na:before {
    background: url("../images/login/naver_icon_m.png") no-repeat center center/22px 20px;
  }
  .p-sns__link.type-fa {
    background-color: #3b5998;
  }
  .p-sns__link.type-fa:before {
    background: url("../images/login/facebook_icon_m.png") no-repeat center center/14px 30px;
  }
  .p-sns__link.type-ka {
    background-color: #ffeb00;
    color: #3c1e1e;
  }
  .p-sns__link.type-ka:before {
    background: url("../images/login/ka_icon_m.png") no-repeat center center/26px 24px;
  }
  .p-sns__link:before {
    width: 50px;
    border-right: 0;
  }
}

.p-login-dim {
  overflow: hidden;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 119;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  text-indent: -999px;
  content: '';
}

.p-login-dim.is-active {
  display: block;
}