/* 로그인 레이어 팝업 */

@charset "utf-8";

.member_acc_contents { display:none; position:fixed; top:0%; left:0%; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:100;}

/* 레이어 팝업 */
.mb_acc_box { display:inline-block; width:70%; height:100%; background:#000; float:right; padding:30px 55px;}
.mb_acc_box span.logo_box { display:inline-block; width:100%; color:#fff; font-family: "Palanquin Dark", serif; font-size:55px;}
.mb_acc_box span.logo_box span.under_line { display:inline-block; width:25px; height:3px; background:#fff; margin:0 0 0 0px;}
.mb_acc_box span.dokdo_im_intro { display:inline-block; width:100%; font-size:19px; line-height:170%; color:#fff; padding:15px 0 30px 0; border-bottom:0px solid rgba(255, 255, 255, 0.15);}

/* 레이어 팝업 Close */
.mb_acc_box button.btn_close { position:relative; position:fixed; top:0%; right:0%; margin:35px 35px 0 0; width:50px; height:50px; color:#fff; background:#ffc900; border:0px; border-radius:100px; font-size:55px; opacity:0.9;}
.mb_acc_box button.btn_close:hover {opacity:1;}
.mb_acc_box button.btn_close img.icon_close { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:40%;}
			
/* Login */
.mb_login { display:inline-block; width:100%; margin:50px 0 0 0;}
.mb_login span.mbs_section_title { display:inline-block; width:100%; font-size:21px; color:#fff; padding:0 0 30px 0;}
.mb_login span.mbs_box { display:inline-block; width:100%; margin-bottom:25px;}
.mb_login span.mbs_box span.mbs_title { display:inline-block; width:100%; color:rgba(255, 255, 255, 0.3); font-size:15px; padding:0 0 5px 0;}
.mb_login input.mbs_frm {width:100%; max-width:500px; height:45px; font-size:21px; color:#fff; border:0px; border-bottom:1px solid rgba(255, 255, 255, 0.2); background:none; }
.mb_login input.mbs_frm:focus {outline:none; background:#000; color:#fff;}

/* Login : Button */
.mbs_login_box { display:inline-block; width:100%; max-width:500px; margin:10px 0 0 0;}
.mbs_login_box span.mbs_btn_box { display:inline-block; width:100%; margin:20px 0 0 0;}
.mbs_login_box span.mbs_btn_box button.btn_registration {width:100%; height:55px; background:#ffc900; color:#000; font-size:17px; font-weight:bold; border:0px; border-radius:7px; opacity:0.9;}
.mbs_login_box span.mbs_btn_box button.btn_registration:hover {opacity:1;}
.mbs_login_box span.mbs_reg_tip { display:inline-block; width:100%; color:rgba(255, 255, 255, 1); font-size:15px; padding:15px 15px; border:1px dashed rgba(255, 255, 255, 0.3); border-radius:7px; margin:30px 0 0 0;}
.mbs_login_box span.mbs_reg_tip a.btn_mb_reg { display:inline-block; font-size:15px; color:#1c72ff; float:left; margin:10px 0 0 0; font-weight:bold; opacity:0.9;}
.mbs_login_box span.mbs_reg_tip a.btn_mb_reg:hover {opacity:1;}


/* 로그인 모바일 반응형 스타일 */
@media screen and (max-width: 768px) {
  .member_acc_contents { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index:250; overflow-y: auto; }
  /* 레이어 팝업 */
  .mb_acc_box { display: inline-block; width: 100%; height: auto; min-height: 100%; background: #000; float: none; padding: 30px 20px; }
  .mb_acc_box span.logo_box { display: inline-block; width: 100%; color: #fff; font-family: "Palanquin Dark", serif; font-size: 40px; }
  .mb_acc_box span.logo_box span.under_line { display: inline-block; width: 20px; height: 2px; background: #fff; margin: 0; }
  .mb_acc_box span.dokdo_im_intro { display: inline-block; width: 100%; font-size: 15px; line-height: 150%; color: #fff; padding: 10px 0 20px 0; }
  /* 레이어 팝업 Close */
  .mb_acc_box button.btn_close { position: relative; position: fixed; top: 0%; right: 0%; margin: 15px 15px 0 0; width: 40px; height: 40px; color: #fff; background: #ffc900; border: 0px; border-radius: 100px; font-size: 40px; opacity: 0.9; }
  .mb_acc_box button.btn_close img.icon_close { width: 40%; }
  /* Login */
  .mb_login { display: inline-block; width: 100%; margin: 20px 0 0 0; }
  .mb_login span.mbs_section_title { display: inline-block; width: 100%; font-size: 19px; color: #fff; padding: 0 0 20px 0; }
  .mb_login span.mbs_box { display: inline-block; width: 100%; margin-bottom: 20px; }
  .mb_login span.mbs_box span.mbs_title { display: inline-block; width: 100%; color: rgba(255, 255, 255, 0.3); font-size: 14px; padding: 0 0 5px 0; }
  .mb_login input.mbs_frm { width: 100%; max-width: 100%; height: 40px; font-size: 16px; }
  /* Login : Button */
  .mbs_login_box { display: inline-block; width: 100%; max-width: 100%; margin: 5px 0 0 0; }
  .mbs_login_box span.mbs_btn_box { display: inline-block; width: 100%; margin: 15px 0 0 0; }
  .mbs_login_box span.mbs_btn_box button.btn_registration { width: 100%; height: 50px; font-size: 16px; }
  .mbs_login_box span.mbs_reg_tip { display: inline-block; width: 100%; font-size: 14px; padding: 12px; margin: 25px 0 0 0; }
  .mbs_login_box span.mbs_reg_tip a.btn_mb_reg { font-size: 14px; margin: 8px 0 0 0; }
}

/* 매우 작은 화면에 대한 추가 조정 */
@media screen and (max-width: 480px) {
  .mb_acc_box span.logo_box { font-size: 35px; }
  .mb_acc_box span.dokdo_im_intro { font-size: 14px; line-height: 145%; }
  .mb_login span.mbs_section_title { font-size: 18px; padding: 0 0 15px 0; }
  .mb_login input.mbs_frm { font-size: 15px; height: 38px; }
  .mbs_login_box span.mbs_btn_box button.btn_registration { height: 45px; font-size: 15px; }
  .mbs_login_box span.mbs_reg_tip { font-size: 13px; padding: 10px; }
  .mbs_login_box span.mbs_reg_tip a.btn_mb_reg { font-size: 13px; }
}