@charset "UTF-8";

.mbskin{width: 96%; max-width: 500px; display: flex; align-items: center; justify-content: center; margin: 0 auto; padding-top: 230px; padding-bottom: 120px;}
.mbskin .login_wrap_box label{display: block; text-align: left; margin-bottom: 5px; font-size: 1.6rem; color: #494949;}
.mbskin .login_wrap_box input{padding-left: 10px; border: 1px solid #dcdcdc; height: 50px; border-radius: 4px;}
.mbskin #login_fs h2{font-size: 3.2rem; margin-bottom: 40px; position: relative; font-weight: 700;}
.mbskin #login_fs h2:after{margin: 0 auto; right: 0;}
#login_info .login_if_lpl{display: flex; justify-content: center; gap: 0px 10px; float: initial; margin-top: 20px;}
#login_info .login_if_lpl span{color: #494949;}
#login_info .login_if_lpl a{color: #494949;}
#login_password_lost{border: none; color: #494949; padding: 0px;}
.mbskin .btn_submit{font-size: 18px; margin-top: 55px !important;}
.login_wrap_box{margin-top: 15px;}


.btn_submit{background: #222;}
.btn_submit:hover{background: #555;}

.mbskin .btn_submit {width:100%;margin:10px 0 0;height:52px;font-weight:bold;font-size:1.25em; border-radius: 30px; background: linear-gradient(15deg, rgba(13,101,112,1) 0%, rgba(118,180,64,1) 100%); border: none;}

.mbskin_box{display: flex; justify-content: space-between; flex-direction: row-reverse; width: 100%;}
/*.mb_log_cate{width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 35px;  background: #f6f6f6;}*/
.mb_log_form{width: 100%;}

.mb_log_cate span{font-size: 15px; color: #555; margin-bottom: 18px;}
.mb_log_cate .join{padding: 15px 0px; border-radius: 3px; width: 100%; background: #52616b; color: #fff;}

#sns_login{border-top: 0px !important;}
#mb_login #sns_login{display: flex; justify-content: center;}
#mb_login #sns_login .txt{display: none;}
#mb_login #sns_login .sns-icon{width: initial !important; background-color: initial !important; margin: 0px !important; border-bottom: 0px !important;}
#sns_login .sns-google .ico{border: 1px solid #ddd;}

.register{width: 96% !important; max-width: 1200px; margin: 0 auto; padding: 80px 0px;}

#fregister p{height: initial; line-height: initial; min-height: 50px; display: flex; justify-content: center; align-items: center; padding: 0px 15px; font-size: 1.8rem;}
#sns_register{display: flex; align-items:center;}
#fregister_chkall{background: #c9d6df;}
.fregister_agree input[type="checkbox"] + label{
  color: #222;
  font-weight: bold;
}

.register {padding-top: 160px; padding-bottom: 120px;}
.register > h2{font-size: 3.2rem; text-align: center; margin-bottom: 80px; font-weight: 700;}
.register h2:after{margin: 0 auto; right:0;}
.register .register_wrap{display: flex; margin-bottom: 40px; justify-content: center;}
.register .register_wrap li{width: 33.33333%; display: flex; flex-direction: column; align-items:center; padding: 70px 0px; background: #f6f6f6;}
.register .register_wrap li.active{background: #c9d6df}
.register .register_wrap li i{font-size: 7.0rem !important; margin-bottom: 20px; color: #444;}
.register .register_wrap li span{font-size: 2.0rem;}
#register_form h2{font-size: 1.8rem !important; margin-bottom: 0px; font-weight: 500; text-align: left;}

.chk_box input[type="checkbox"] + label span{display: none;}
.login_if_auto2{display: flex; justify-content: flex-start;}
.login_if_auto2 input[type="checkbox"] + label{padding-left: 0px; font-size: 1.5rem; color: #494949;}

.login_if_auto2 input[type="checkbox"]{appearance: none;width: 20px;height: 20px;border: 1px solid #ddd;border-radius: 3px;outline: none;cursor: pointer;position: relative;margin-right: 6px;}
.login_if_auto2 input[type="checkbox"]:checked {background-color: var(--color);border-color: var(--color);}
.login_if_auto2 input[type="checkbox"]:checked::after {content: '✓';color: white;font-size: 14px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: 1; /* 필요에 따라 추가 */}

.login_if_auto3 input[type="checkbox"] + label span{display: block;}
@media all and (max-width:768px) {
  .register .register_wrap li{padding: 40px 0px;}
  .register .register_wrap li i{font-size: 5.0rem !important;}
  #reg_result{padding: 40px 0px !important;}
  #reg_result .result_txt br{display: none;}
  .register .register_wrap li span{font-size: 1.8rem;}
  .mbskin_box{flex-direction: column-reverse;}
  .mb_log_form{width: 100%;}
  .mb_log_cate{width: 100%;}
}