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

@charset "utf-8";


.message { padding:8px 12px; margin-bottom:15px; border-radius:4px; font-size:14px; }
.error_message { color:#ff3333; background-color:rgba(255,200,200,0.3); }
.success_message { color:#33aa33; background-color:rgba(200,255,200,0.3); }
.required { color:#ff3333; }
.step_info { margin-bottom:15px; padding:8px 0; font-weight:bold; color:#4a90e2; border-bottom:1px solid #eee; }


/* 레이어 팝업 */
.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:#1c72ff; 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%;}


/* 회원가입 */
.member_join_contents { position:fixed; top:0%; left:0%; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:100;}

.mb_signup { display:inline-block; width:100%; max-width:500px; margin:50px 0 0 0;}
.mb_signup span.mbs_section_title { display:inline-block; width:100%; font-size:23px; color:#fff; padding:0 0 30px 0;}
.mb_signup span.mbs_box { display:inline-block; width:100%; margin-bottom:25px;}
.mb_signup span.mbs_box span.mbs_title { display:inline-block; width:100%; color:rgba(255, 255, 255, 0.5); font-size:15px; padding:0 0 5px 0;}
.mb_signup .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.3); background:none; }
.mb_signup .mbs_frm:focus{outline:none; background:none; color:#fff;}
/* 셀렉트 박스 기본 스타일 */
.mb_signup .mbs_sel_frm {
    width: 100%;
    max-width: 500px;
    height: 45px;
    font-size: 21px;
    color: #fff;
    border: 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	background: url('/img/select_down_arrow.svg') no-repeat !important; /* 화살표 이미지 경로 */
	background-size:20px !important; background-position:center right !important;
    padding-right: 30px; /* 화살표 이미지를 위한 여백 */
    appearance: none; /* 기본 화살표 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    padding:0px; /* 내부 패딩 추가 */
    cursor: pointer;
    position: relative;
    z-index: 1;
    outline: none; /* 포커스 테두리 제거 */
}

.login_link { display:inline-block; width:100%; margin-top:30px; color:rgba(255, 255, 255, 0.5); font-size:15px; text-align:center; transition:all 0.3s;}
.login_link a {color:rgba(255, 255, 255, 0.7); transition:all 0.3s;}
.login_link:hover {color:rgba(255, 255, 255, 0.55);}
.login_link:hover a {color:rgba(255, 255, 255, 0.9);}

.skip_link { display:inline-block; width:100%; margin-top:30px; color:rgba(255, 255, 255, 0.5); font-size:15px; text-align:center; transition:all 0.3s;}
.skip_link button.btn_skip {background:none; border:0px; color:rgba(255, 255, 255, 0.7); transition:all 0.3s;}
.skip_link:hover button.btn_skip  {color:rgba(255, 255, 255, 0.9);}

/* 포커스 효과 */
.mb_signup .mbs_sel_frm:focus {
    background-color: rgba(70, 70, 70, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* 옵션 스타일링 - 브라우저마다 지원이 다를 수 있음 */
.mb_signup .mbs_sel_frm option {background-color:#000; color:#fff; padding:0 10px;}

/* IE에서 화살표 제거 */
.mb_signup .mbs_sel_frm::-ms-expand {display: none;}

.mb_signup span.in_box_half { display:inline-block; width:50%; float:left;}
.mb_signup span.in_box_half:last-child {}


/* 약관동의 */
.mbs_reg_box { display:inline-block; width:100%; max-width:500px; margin:10px 0 0 0;}
.mbs_reg_box span.mbs_terms { display:inline-block; width:100%; color:rgba(255, 255, 255, 0.7); font-size:15px; padding:10px 15px; border:1px dashed rgba(255, 255, 255, 0.3); border-radius:7px;}
.mbs_reg_box span.mbs_terms span.text_agree { display:inline-block; float:right; margin-right:10px;}
.mbs_reg_box span.mbs_terms span.terms_text { display:inline-block; width:calc(100% - 20px); float:left; padding:2px 0 0 0;}
.mbs_reg_box span.mbs_terms input.ch_agree { float:right; width:20px; height:20px; float:left;}
.mbs_reg_box span.mbs_terms a {color:#fff;}
.mbs_reg_box span.mbs_terms a:hover {color:#1c72ff;}

.mbs_reg_box span.mbs_btn_box { display:inline-block; width:100%; margin:20px 0 0 0;}
.mbs_reg_box span.mbs_btn_box button.btn_registration {width:100%; height:55px; background:#1c72ff; color:#fff; font-size:17px; border:0px; border-radius:7px;}
.mbs_reg_box span.mbs_btn_box button.btn_registration_plus {width:100%; height:55px; background:#1c72ff; color:#fff; font-size:17px; border:0px; border-radius:7px;}




/* 모바일 반응형 스타일 */
@media screen and (max-width: 768px) {
  .mb_acc_box { width: 100%; float: none; padding: 30px 20px; height: auto; min-height: 100%; overflow-y: auto; }
  .mb_acc_box span.logo_box { font-size: 40px; }
  .mb_acc_box span.logo_box span.under_line { width: 20px; height: 2px; }
  .mb_acc_box span.dokdo_im_intro { font-size: 15px; line-height: 150%; padding: 10px 0 20px 0; }
  .mb_acc_box button.btn_close { margin: 15px 15px 0 0; width: 40px; height: 40px; }
  .mb_signup { margin: 20px 0 0 0; max-width: 100%; }
  .mb_signup span.mbs_section_title { font-size: 20px; padding: 0 0 20px 0; }
  .mb_signup span.mbs_box { margin-bottom: 20px; }
  .mb_signup span.mbs_box span.mbs_title { font-size: 14px; }
  .mb_signup .mbs_frm { height: 40px; font-size: 16px; }
  .mb_signup .mbs_sel_frm { height: 40px; font-size: 16px; background-size: 16px !important; }
  .mb_signup span.in_box_half { width: 100%; float: none; margin-bottom: 20px; }
  .mb_signup span.in_box_half:last-child { margin-bottom: 0; }
  .mb_signup span.in_box_half[style*="width:30%"] { width: 100% !important; margin-right: 0 !important; margin-bottom: 15px; }
  .mb_signup span.in_box_half[style*="width:calc(70% - 10px)"] { width: 100% !important; }
  .mbs_reg_box { margin: 5px 0 0 0; }
  .mbs_reg_box span.mbs_terms { font-size: 13px; padding: 8px 10px; }
  .mbs_reg_box span.mbs_btn_box button.btn_registration, .mbs_reg_box span.mbs_btn_box button.btn_registration_plus { height: 50px; font-size: 16px; }
  .login_link, .skip_link { margin-top: 20px; font-size: 14px; }
  .message { padding: 6px 10px; margin-bottom: 10px; font-size: 13px; }
  .member_join_contents { overflow-y: auto; }
}

/* 매우 작은 화면에 대한 추가 조정 */
@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_signup .mbs_frm, .mb_signup .mbs_sel_frm { font-size: 15px; }
  .mbs_reg_box span.mbs_terms { font-size: 12px; }
  .mbs_reg_box span.mbs_terms span.terms_text { width: calc(100% - 25px); }
  .mbs_reg_box span.mbs_btn_box button.btn_registration, .mbs_reg_box span.mbs_btn_box button.btn_registration_plus { height: 45px; font-size: 15px; }
}