@charset "utf-8";


/*---------------------------------
            common
---------------------------------*/
form legend {
  position:absolute;
  top:-5000%;
}

main {
  padding:56px 2rem 2rem;
  max-width: 550px;
  margin: auto;
}
header {
  margin:0 0 3rem;
    
}
h1 {
  font-size:36px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
}
header h2, header p {
  font-size:18px;
}
header h3, header h2 span {
  font-size:18px;
  font-weight: bold;
  margin:0.4rem 0;
}




/* login/join */
.login-wrap {
  width:100%;
  margin:0 auto 30px;
}
.login-wrap legend {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 10px;
}
.login-wrap input {
  width:100%;
  margin-bottom: 6px;
}
.login-wrap button {
  background:#863ED9;
  color:#fff;
  text-align: center;
  padding:6px 0;
  border-radius: 6px;
  width: 100%;
}
.login-wrap button:hover {
  background: #000;
}
.login-wrap .join-btn {
  background: rgb(95, 95, 95);
  margin-top: 10px;
}




/* SNS form */
.sns-login {
    margin:2rem auto 0;
   /* width:40%;*/
}
.sns-login li {
    border-radius: 50px;
    color:#fff;
    margin-bottom: 10px;
    line-height:33px;
    position: relative;
    text-align: center;
    font-size:16px;
}
.sns-login li a {
    padding:10px 20px 10px 60px;
}


/*---icon---*/
.sns-login li::before {
    display: flex;
    align-items: center;
    font-size:2.2em;
    position: absolute;
    top:10px;
    left:30px;
}

/* google */
.sns-login li.google {
    border:1px solid #eee;
    color:#000;
    background:url('../img/google_btn.png') 6% center no-repeat #fff;
}

/* line */
.sns-login li.line {
    background:url('../img/line_btn.png') 10% center no-repeat #06C755;
}

/* facebook */
.sns-login li.fb {background:#1877F2;}

/* instagram */
.sns-login li.insta {
    background:transparent linear-gradient(90deg, #FFDC80 0%, #F77737 12%, #F56040 21%, #FD1D1D 33%, #E1306C 47%, #C13584 60%, #833AB4 74%, #5851D8 88%, #405DE6 100%) 0% 0% no-repeat padding-box;
}


/* twitter */
.sns-login li.twitter {
    background:#55ACEE
}


/* mail */
.sns-login li.mail {
    background:#eee;
    color:#000;
    font-family: 'Material Icons';
}

/* kakao */
.sns-login li.kakao {
  background:url('../img/kakao_btn.png') 9% center no-repeat #FEE500;
  background-size: 30px;
  color: #000;
}

/* naver */
.sns-login li.naver {
  background:url('../img/naver_btn.png') 10% center no-repeat #03C75A;
  background-size: 24px;
}

/*---///icon---*/



.more-login p {
    position: relative;
    text-align: center;
    margin:1.6rem auto 1.6rem;
    font-size:12px;
    color:#B8B8B8;
}
.more-login p:before, .more-login p:after {
    content:'';
    width:50px;
    height:1px;
    background:#B8B8B8;
    position: absolute;
    top:50%;
}
.more-login p:before {
    right:26%;
}
.more-login p:after {
    left:26%;
}
.more-login .sns-login {
    display: flex;
    justify-content: center;
    align-items: center;
}
.more-login .sns-login li {
    border-radius: 100%;
    width:36px;
    height:36px;
    margin-right:20px;
}
.more-login .sns-login li:last-child {margin-right:0;}
.more-login .sns-login li a {
    padding:2px 0px 0px 2px;
    font-size:20px;
}

.caution {
    color:#707070;
    font-size:12px;
    text-align: center;
    line-height: 1.6rem;
    margin:40px auto 0;
}





/*---------------------------------
            닉네임 입력폼
---------------------------------*/
.prev_arrow {
    position: absolute;
    top:3%;
    left:1.4rem;
}
.userinfo input {
    width:100%;
}
.userinfo label{
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: 700;
}
.userinfo .text-box {
    font-size:14px;
    margin:20px 0;
    line-height: 1.4rem;
}
.userinfo .text-box.overlap {
    color:#D61D1D;
}
.has-error .ipt_style_app{
    border-color: #D61D1D;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
}


.mdline-title {
    margin: 15px 0;
    background: url('../images/centerline.png') center center repeat-x;
}
.mdline-title span {
    padding: 0 7px;
    background: #fff;
    color: #aaa;
    text-align: center;
}
.social-login {
    padding-bottom: 50px;
}
.text-center{
    text-align: center;
}
.social-login a{
    display: inline-block;
}

.btn-naver {
    color: #fff !important;
    background-color: #00c63b;
    border-color: #00c63b;
}
.btn-naver:hover {
    background-color: #09a137;
    border-color: #09a137;
}
.btn-kakao {
    color: #3b1e1e !important;
    background-color: #f9e000;
    border-color: #f9e000;
}
.btn-kakao:hover {
    background-color: #d4c009;
    border-color: #d4c009;
}
.btn-facebook {
    color: #fff !important;
    background-color: #3c5b9b;
    border-color: #3c5b9b;
}
.btn-facebook:hover {
    background-color: #274178;
    border-color: #274178;
}
.btn-google {
    color: #fff !important;
    background-color: #f63d27;
    border-color: #f63d27;
}
.btn-google:hover {
    background-color: #c73322;
    border-color: #c73322;
}
.btn-block{
    width: 100%;
}
.btn{
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn-block+.btn-block{
    margin-top: 5px;
}

.userinfo button {
    box-sizing: border-box;
    width:100%;
    text-align: center;
}
span.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #D61D1D;
}

/* 중복확인 버튼 */
.btn_gray_no{
    font-size:12px;
    background:#DBDBDB;
    color:#fff;
    padding:15px 25px;
    border-radius:5px;
}
.btn_gray_no.blk {
    background:#191919;
}

/* next button */
.btn_yel_no {
    font-size:12px;
    background:#fff7c0;
    color:#a3a3a3;
    padding:1.4rem 0;
}
#nextBtn {
    position: fixed;
    bottom:0;
    left:0;
}
.btn_yel_no.btn_ok {
    background: #FEEA61;
    color:#191919;
}

/*---------------------------------
            서비스국가 입력
---------------------------------*/
.nickname select {
    width:100%;
}


/*---------------------------------
            약관동의
---------------------------------*/
.clause-wrap .checkbox-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:10px 0;
    border-bottom: 1px solid #eee;
    font-size:14px;
}


/* accordion button */
.clause-wrap .acc-btn {
    width:50px;
    font-size:2rem;
    text-align: center;
    font-family: 'material icons';
    cursor: pointer;
}
.clause-wrap .acc-btn::before {
    content:'';
    
    
    transform: translateY(-50%);
    font-size:30px;
    color:#000;
    transition: all .5s ease;
}
.clause-wrap .acc-btn.active::before {
    transform: rotate(-180deg);
    top:14%;
}

  /* accordion contents */
.clause-wrap .acc-content {
    background:#eee;
    font-size:14px;
    padding:1.2rem;
    line-height: 1.4rem;
}




/*---------------------------------
        responsive
---------------------------------*/
@media screen and (max-width:1024px) {
  .sns-login {width:100%;}
}


/*mobile -> "#login-page-left" hide */
@media screen and (max-width:767px) {


}