@charset "utf-8";

.joinWrap { width:100%; max-width: 400px; margin:60px auto; background:#fff; border-radius: 20px; text-align: center; }
.joinWrap > a { display:inline-block; width:100%; }
.joinWrap > a > img { width:80px; margin:20px 0 0 0; }
.joinWrap > h2 { font-size:20px; height:26px; line-height: 26px; margin:10px 0 10px 0; width:auto; display:inline-block; position:relative; }
.joinWrap > h2:not(.noicon) { padding-left:35px; }
.joinWrap > h2:not(.noicon):before { content:""; display:inline-block; width:25px; height:25px; background:#eee; border-radius: 3px; position:absolute; left:0; top:50%; transform:translateY(-50%); }
.joinWrap > h2.is-kakao:before { background:#fce250 url('../img/login/icon_kakao.png') no-repeat center center; background-size:14px; }
.joinWrap > h2.is-naver:before { background:#03c75a url('../img/login/icon_naver.png') no-repeat center center; background-size:14px; }
.joinWrap > h2.is-apple:before { background:#000000 url('../img/login/icon_apple.png') no-repeat center center; background-size:14px; }
.joinWrap > h3 { font-size:14px; margin:0 0 20px 0; font-weight: normal; color:#777; }
.joinWrap > ul { width:100%; padding:20px 30px; margin:0 auto; display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.joinWrap > ul > li { margin:0 0 5px 0; width:100%; position:relative; }
.joinWrap > ul > li:last-child { margin:0; }
.joinWrap > ul > li:nth-child(2):before { width:100%; height:1px; content:""; background:#eee; position:absolute; left:0; top:-20px; }
.joinWrap > ul > li:nth-child(2):after { width:40px; text-align: center; content:"또는"; display:inline-block; background:#fff; position:absolute; left:50%;
  transform: translateX(-50%); top:-25px; color:#777; }
.joinWrap > ul > li > a { display:block; background:#eee; border-radius: 6px; height:45px; line-height: 45px; font-size:14px; position:relative; }
.joinWrap > ul > li > a.is-alvins { font-size:16px; height:55px; line-height: 55px; background:#fce250 url('../img/stamp_on.png') no-repeat left 25% top 12px;  background-size:20px; color:#1b1b1b; border:#fce250 1px solid; font-weight: bold; }
.joinWrap > ul > li > a.is-kakao { background:#fce250 url('../img/login/icon_kakao.png') no-repeat left 15px center; background-size:18px 17px; color:#353000; }
.joinWrap > ul > li > a.is-naver { background:#03c75a url('../img/login/icon_naver.png') no-repeat left 15px center; background-size:18px 17px; color:#ffffff; }
.joinWrap > ul > li > a.is-apple { background:#000000 url('../img/login/icon_apple.png') no-repeat left 15px center; background-size:16px; color:#ffffff; }
.joinWrap > ul > li > ul { width:100%; display:flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; margin:10px 0 40px 0; text-align: left; }
.joinWrap > ul > li > ul > li {  }
.joinWrap > ul > li > ul > li > a { font-size:11px; color:#666; }
.joinWrap > ul > li > ul > li > a > strong { text-decoration: underline; color:#1b1b1b; }

.joinWrap.dxJoinWrap > ul { width:100%; padding:20px 30px; margin:0 auto; display:flex; flex-direction: row; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.joinWrap.dxJoinWrap > ul > li { width:auto; }
.joinWrap.dxJoinWrap > ul > li:first-child { width:100%; margin:0 0 15px 0; }
.joinWrap.dxJoinWrap > ul > li:first-child:before { width:100%; height:1px; content:""; background:#eee; position:absolute; left:0; bottom:15px; }
.joinWrap.dxJoinWrap > ul > li:first-child:after { width:40px; text-align: center; content:"또는"; display:inline-block; background:#fff; position:absolute; left:50%;
  transform: translateX(-50%); bottom:7px; color:#777; }
.joinWrap.dxJoinWrap > ul > li:nth-child(2):before, .joinWrap.dxJoinWrap > ul > li:nth-child(2):after { display:none; }
.joinWrap.dxJoinWrap > ul > li:not(:first-child) > a {  margin:0 2px; display:flex; width:60px; height:60px; align-items: center; justify-content: center; flex-wrap: wrap;
  font-size:13px; padding:0 5px 0 30px; border-radius: 100%; text-align: center; position:relative; text-indent: -999999px; }
.joinWrap.dxJoinWrap > ul > li > a.is-kakao { background:#fee500 url('../img/login/icon_kakao.png') no-repeat center center; background-size:24px; color:#353000; }
.joinWrap.dxJoinWrap > ul > li > a.is-naver { background:#03c75a url('../img/login/icon_naver.png') no-repeat center center; background-size:22px; color:#ffffff; }
.joinWrap.dxJoinWrap > ul > li > a.is-apple { background:#000000 url('../img/login/icon_apple.png') no-repeat center top 15px; background-size:22px; color:#ffffff; }

.joinWrap #fregisterform { text-align: left; margin:40px auto 0 auto; width:90%; }
.joinWrap #fregisterform .frm_input { width:100%; }
.joinWrap.mbskin { position:relative; }
.joinWrap.mbskin .all_agree, .joinWrap.mbskin .toggle { border:0; background:#fff; margin:0; }
.joinWrap.mbskin .toggle-title { padding:5px 5px !important; width:100%; display:flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.joinWrap.mbskin .toggle .title-name { order:1; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap;  }
.joinWrap.mbskin .toggle .title-name > label { margin-left:7px; cursor: pointer; }
.joinWrap.mbskin .toggle .right_i { position:relative; order:2; top:0; right:0; }
.joinWrap.mbskin .toggle .agree_i { width:100%; order: 3; font-size:11px; color:#666; padding:2px 20px; font-style: normal; }

.joinWrap.mbskin .all_agree { padding:20px 5px 10px 5px !important; border-bottom:#eee 1px solid; }
.joinWrap.mbskin .all_agree .title-name { display:flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.joinWrap.mbskin .all_agree .title-name > label { margin-left:7px; cursor: pointer; }
.joinWrap.mbskin .all_agree .title-name > label > strong { font-size:15px; }

#fregisterform .btn_confirm .btn_submit { width:100%; border-radius: 6px; font-size:15px !important; }
#fregisterform .btn_confirm .btn_submit:hover { background:#ffde25; }

#fregisterform .btn_confirm .btn_submit.is-kakao, #fregisterform .btn_confirm .btn_submit.is-kakao:hover { background:#fce250 !important; color:#353000 !important; }
#fregisterform .btn_confirm .btn_submit.is-naver, #fregisterform .btn_confirm .btn_submit.is-naver:hover { background:#03c75a !important; color:#ffffff !important; }
#fregisterform .btn_confirm .btn_submit.is-apple, #fregisterform .btn_confirm .btn_submit.is-apple:hover { background:#000000 !important; color:#ffffff !important; }


.joinWrap.mbskin .sns_tbl th { width:50px; }
.joinWrap.mbskin .sns_tbl caption { height:auto; line-height: normal;background:transparent url('../svg/icon_ok.svg') no-repeat left 5px top;
  background-size:15px 15px; color:#1b1b1b; margin:0 0 10px 0; padding:0 0 10px 25px; }

.joinWrap.mbskin .member_connect { margin:20px 0 0 0; padding-bottom: 30px; background:transparent; text-align: center; }
.joinWrap.mbskin .member_connect button { background:transparent; padding:0; color:#1b1b1b; text-decoration: underline; font-size:14px; font-weight: normal; border:0; }
.joinWrap.mbskin .member_connect button:hover { background:transparent; }
.joinWrap.mbskin .member_connect > p { margin:0 0 10px 0; color:#777; }

.joinWrap.mbskin .toggle .toggle-inner { max-height: 200px; overflow-y: auto !important; border:#eee 1px solid; }
.joinWrap.mbskin .sns_tbl td { padding: 7px 0; }
.joinWrap.mbskin .sns_tbl td label { margin:0 0 5px 0; display:inline-block;  }

.joinWrap.mbskin .btn_back { position:absolute; left:20px; top:20px; width:30px; height:30px; z-index: 9; }

.ad_agree_list { order:3; width:100%; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding:5px 20px; }
.ad_agree_list > span { margin:0 15px 0 0; }

#reg_mb_hp { width:100%; }
#reg_mb_hp > ul { width:100%; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
#reg_mb_hp > ul > li { flex:1; margin:0 10px 0 0; position:relative; }
#reg_mb_hp > ul > li:nth-child(4) { margin:0; }
#reg_mb_hp > ul > li#li_hp_cert { flex:none; width:100%; margin:5px 0 0 0; display:none; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
#reg_mb_hp > ul > li#li_hp_cert > .frm_input { width:calc(100% - 100px); }
#reg_mb_hp > ul > li > button { width:90px; height:40px; line-height: 40px; border:0; background:#fff; color:#282f51; border:#282f51 1px solid; border-radius: 3px; }
#countdownText { position:absolute; top:50%; transform:translateY(-50%); right:115px; text-align: right; }
#countdownText > strong { display:inline-block; margin:0 0 0 5px; font-weight: normal; color:#ff0000; }

.sns-wrap { width:auto; display:flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; }
#sns_login .sns-wrap > a {  margin:0 2px; display:flex; width:60px; height:60px; align-items: center; justify-content: center; flex-wrap: wrap;
  font-size:13px; padding:0 5px 0 30px; border-radius: 100%; text-align: center; position:relative; text-indent: -999999px; }
#sns_login .sns-wrap > a.is-kakao { background:#fee500 url('../img/login/icon_kakao.png') no-repeat center center; background-size:24px; color:#353000; }
#sns_login .sns-wrap > a.is-naver { background:#03c75a url('../img/login/icon_naver.png') no-repeat center center; background-size:22px; color:#ffffff;margin:0 10px; }
#sns_login .sns-wrap > a.is-apple { background:#000000 url('../img/login/icon_apple.png') no-repeat center top 15px; background-size:22px; color:#ffffff;margin:0 10px; }

#social_connect .sns-wrap > ul { width:100%; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
#social_connect .sns-wrap > ul > li { width:auto; padding:0 !important; margin:0 15px 0 0; }
#social_connect .sns-wrap > ul > li > a { display:flex; width:100%; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding:0 5px 0 25px; position:relative; }
#social_connect .sns-wrap > ul > li > a:before { content:""; width:20px; height:20px; display:inline-block; position:absolute; left:0;top:50%; transform: translateY(-50%); border-radius: 2px; }
#social_connect .sns-wrap > ul > li > a.is-kakao:before { background:#fee500 url('../img/login/icon_kakao.png') no-repeat center center; background-size:12px; }
#social_connect .sns-wrap > ul > li > a.is-naver:before { background:#03c75a url('../img/login/icon_naver.png') no-repeat center center; background-size:10px; }
#social_connect .sns-wrap > ul > li > a.is-apple:before { background:#000000 url('../img/login/icon_apple.png') no-repeat center center; background-size:12px; }

#sns_login{border:0;margin-top:0 ;padding: 0 0 20px 0; }
#sns_login h3{;padding:10px 0 0;text-align:left;font-weight:bold}
#sns_login > h1 { padding: 20px 0 12px 0; margin:0;
  font-size: 14px; position:relative;
  text-align: center;
  font-weight: normal; }
#sns_login > h1:before { width:100%; height:1px; content:""; background:#eee; position:absolute; left:0; top:10px; }
#sns_login > h1:after { width:40px; text-align: center; content:"또는"; display:inline-block; background:#fff; position:absolute; left:50%;
  transform: translateX(-50%); top:5px; color:#777; }

#mb_login .mb_login_join { border-top:0; }

.socialOnOff {display:inline-block; margin:0 0 0 5px; }
.socialOnOff input {display:none; background:none !important}
.socialOnOff input + label { outline: 0; display: block; width: 44px; height: 23px; position: relative; cursor: pointer; background: #ccc; border-radius: 25px; padding: 2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}
.socialOnOff input::-moz-selection, .socialOnOff input:after::-moz-selection, .socialOnOff input:before::-moz-selection, .socialOnOff input *::-moz-selection, .socialOnOff input *:after::-moz-selection, .socialOnOff input *:before::-moz-selection, .socialOnOff input + label::-moz-selection {
  background: none;
}
.socialOnOff input::selection, .socialOnOff input:after::selection, .socialOnOff input:before::selection, .socialOnOff input *::selection, .socialOnOff input *:after::selection, .socialOnOff input *:before::selection, .socialOnOff input + label::selection {
  background: none;
}
.socialOnOff input + label:before , .socialOnOff input + label:after { position: relative; display: block; content: ""; width: 19px; height: 19px;}
.socialOnOff input + label:before { display: none;}
.socialOnOff input + label:after { left: 0;border-radius: 50%; background: #fff;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}
.socialOnOff input:checked + label { background: #ff8601;}
.socialOnOff input:checked + label:after { left: 21px;}

.is-social-title > i { font-style: normal; display:inline-block; margin-left:10px; color:#888; }

@media only screen and (max-width: 767px) {
  body { background:#fff !important; }
  .joinWrap { width:100%; max-width: 100%; margin:0; border-radius: 0; }
  .mbskin .member_connect { border:0 !important; }
  #fregisterform .btn_confirm .btn_submit { border:0 !important; }
  .joinWrap #fregisterform { margin-top:20px; }
  #mb_login .mb_login_join { margin-top: 0 !important; }
}

.is-logging { text-indent: -999999px; }

@keyframes spinner {
  to {transform: rotate(360deg);}
}

.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid #ccc;
  border-top-color: #000;
  animation: spinner .6s linear infinite;
}