@charset "utf-8";

.required, textarea.required {background: #f7f7f7 !important;}

body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 기 본 형 */
.mbskin .frm_input {width:100%;border:2px solid #ebebeb !important; ;}
.mbskin .frm_input:focus {background:#e8f0fe !important;border:none;outline:2px solid #5d93ff !important;outline-offset:-2px;}
.mbskin .frm_input:placeholder {color:#999999 !important;}
.mbskin .check_box input[type="checkbox"]{display:none;}
.mbskin .check_box input[type="checkbox"] + label{position:relative;font-size:14px;margin-left:30px;}
.mbskin .check_box input[type="checkbox"] + label:before{content:"";display:block;background: url('./img/check.svg') no-repeat center;background-size:100%;position:absolute;width:23px;height:23px;border:solid 1px #dddddd;border-radius:50%;top:-3px;left:-30px}
.mbskin .check_box input[type="checkbox"]:checked + label:before{border-color:#1d73f3;background-image:url('./img/check_on.svg')}
.mbskin .progress {width:90px; height:4px; overflow:hidden; border:none; border-radius:12px; background-color:#ebebeb;}
.mbskin .prog_bar {float:left; width:0%; height:100%; font-size:12px; border:none; border-radius:12px; background-color:#4c4c4c;}
.mbskin .confirm_box {display:flex;gap:10px;width:100%;}
.mbskin .btnX, .mbskin .btnO {flex:1;border:none;border-radius:4px;padding:0;margin:0;}
.mbskin .btnX, .mbskin .btnO {display:block;width:100%;height:51px;line-height:51px;font-size:15px;font-weight:bold;text-align:center;letter-spacing:1px;}
.mbskin .btnX {background:#4c4c4c;color:#fff;}
.mbskin .btnO {background:#5d93ff;color:#fff;}
.mbskin a.btnX, .mbskin a.btnX:hover {background:#4c4c4c;color:#fff;}
.mbskin a.btnO, .mbskin a.btnO:hover {background:#5d93ff;color:#fff;}


/* 로 그 인 */
#mb_login {position:relative;width:420px;padding:70px;border:solid 1px #e5e5e5;box-shadow:0 4px 8px rgba(0,0,0,0.1);border-radius:8px;background-color:white;}
#mb_login .inner {width:280px;}
#mb_login h1{display:none;}
#mb_login #login_fs{text-align:center;}
#mb_login .frm_input{width:100%;height:51px;line-height:51px;border:2px solid #ebebeb !important;border-radius:4px;background:#f6f6f6;padding:0 13px;font-size:15px;}
#mb_login #login_pw{margin-top:15px;}
#mb_login .info_wrap{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#999999;margin-top:20px;}
#mb_login .info_wrap #login_info{font-size:14px;color:#999999;}
#mb_login .info_wrap #lost_password a{font-size:14px;color:#999999;}
#mb_login .info_wrap #lost_password a:hover{color:#1d73f3;}
#mb_login .btn_submit{margin:40px 0 30px 0;}
#mb_login .join{display:flex;justify-content:space-between;align-items:center;color:#999999;font-size:14px;}
#mb_login .join a:hover{color:#1d73f3;}


/* 가입동의 */
#register {position:relative;width:620px;padding:70px;margin:0;border:solid 1px #e5e5e5;box-shadow:0 4px 8px rgba(0,0,0,0.1);border-radius:8px;background-color:white;}
#register .inner {width:480px;}
#register h1 {margin:35px 0 58px 0;font-size:2em;font-weight:700;line-height:1.4em;}
#register textarea {display:block;width:100%;margin:15px 0 25px 0;padding:15px 30px;height:150px;background:#fff;border:solid 1px #e5e5e5;line-height:1.5;color:#999999;overflow-x:hidden;resize:none;}
#register .fregister_agree {margin-top:15px;}
#register .line {border:none;height:1px;border-top:1px solid #ebebeb;margin:30px 0;}
#register .all_chk p {margin-top:10px;margin-left:30px;color:#666666;line-height:1.5;}
#register .confirm_box {margin:30px 0 0 0;}

/* 가입작성 */
#register_form {position:relative;width:620px;padding:70px;margin:0;border:solid 1px #e5e5e5;box-shadow:0 4px 8px rgba(0,0,0,0.1);border-radius:8px;background-color:white;}
#register_form ul li {position:relative;display:flex;align-items:center;justify-content:center;gap:10px;/*아이템 간격*/width:100%;height:43px;margin-bottom:10px;}
#register_form ul li .left {width:150px;text-align:left;overflow:hidden;}
#register_form ul li .right {flex:1;/* 나머지 너비*/text-align:left;}
#register_form ul li .frm_label {line-height:43px;font-size:15px;}
#register_form ul li .frm_input {height:43px;font-size:15px;border:solid 2px #ebebeb;border-radius:4px;padding:0 13px;background:#fff;vertical-align:top;}
#register_form ul li.split {height:1px;border-top:1px solid #ebebeb;margin:30px 0;}
#register_form ul li.check {height:19px;line-height:19px;margin-bottom:15px;justify-content:left;} 
#register_form ul li:last-child {margin-bottom:0;}
#register_form a.btn_close, #register_form a:hover {background:#4c4c4c;color:#fff;}

/* 가입완료 */
#reg_result {position:relative;width:620px;padding:70px;margin:0;border:solid 1px #e5e5e5;box-shadow:0 4px 8px rgba(0,0,0,0.1);border-radius:8px;background-color:white;}
#reg_result .inner {width:480px;}
#reg_result h1 {margin:35px 0 58px 0;font-size:2em;font-weight:700;line-height:1.4em;}
#reg_result .result_msg {font-size:15px;margin:0 0 30px 0;color:#3684fa;}
#reg_result .result_msg i {font-size:3em;margin-bottom:10px;}
#reg_result .result_txt {font-size:12px;line-height:2.0em;text-align:left;}
#reg_result .result_txt strong {color:#4c4c4c;font-size:15px;font-weight:normal;}
#reg_result #result_email {margin:20px 0;padding:15px 25px;border-radius:4px;border:none;background:#f9f9f9;line-height:2em}
#reg_result #result_email .split {width:100%;height:1px; border-top:1px solid #ebebeb;margin:10px 0;}
#reg_result #result_email span {display:inline-block;width:150px}
#reg_result #result_email strong {color:#4c4c4c;font-size:12px;}
#reg_result .confirm_box {margin:30px 0 0 0;text-align:center;}
#reg_result  a.btn_close, #register_form a:hover {background:#4c4c4c;color:#fff;}

/* 계정찾기 */
#find_info {position:relative;width:480px;padding:70px;margin:0;border:solid 1px #e5e5e5;box-shadow:0 4px 8px rgba(0,0,0,0.1);border-radius:8px;background-color:white;}
#find_info .inner {width:340px;}
#find_info h1 {margin:35px 0 25px 0;font-size:2em;font-weight:700;line-height:1.2em;}
#find_info p {font-size:12px;line-height:22px;border-top:1px solid #ebebeb;padding:25px 0;margin-bottom:10px;text-align:center;}
#find_info .frm_input {height:43px;font-size:15px;border:solid 2px #ebebeb;border-radius:4px;padding:0 13px;background:#fff;vertical-align:top;width:100%;}
#find_info .confirm_box {margin:30px 0 0 0;}
#find_info  a.btn_close, #register_form a:hover {background:#4c4c4c;color:#fff;}


/* 비번입력 */
#pw_confirm {position:relative;width:480px;padding:70px;margin:50px auto 0;border:solid 1px #e5e5e5;}
#pw_confirm .inner {width:340px;text-align:left;}
#pw_confirm h1 {margin:35px 0 25px 0;font-size:2em;font-weight:700;line-height:1.2em;}
#pw_confirm p {font-size:12px;;line-height:22px;border-top:1px solid #ebebeb;padding:25px 0;}
#pw_confirm p strong {margin-bottom:120px;}
#pw_confirm .frm_input {height:43px;font-size:15px;border:solid 2px #ebebeb;border-radius:4px;padding:0 13px;background:#fff;vertical-align:top;}
#pw_confirm .confirm_box {margin:30px 0 0 0;text-align:center;}
#pw_confirm .btn_submit {margin:30px 0 0 0;}


/* 툴립 스타일 */
.tooltip_icon {display:inline-block;vertical-align:baseline;color:#b3b5b8;border:0;font-size:16px;background:transparent;cursor:pointer;}
.tooltip_icon:hover {color:#448bf5}
.tooltip {position:absolute;top:50%;transform:translateY(-50%);width:auto;color:#fff;background:#4c4c4c;padding:12px;font-size:12px;line-height:18px;display:none;z-index:9;}
.tooltip {font-weight:normal;margin-left:15px;margin-top:0;border-radius:4px;}
.tooltip:before {content:"";position:absolute;top:50%;}
.tooltip:before {left:-10px;/*화살표왼쪽*/margin-top:-5px;/*화살표세로*/border-width:5px;/*화살표크기*/border-style:solid;border-color:transparent #4c4c4c transparent transparent;/*화살표방향*/}


/* 캡챠 스타일 */
#captcha_head {height:43px;line-height:43px;border:none;padding:0;background:#fff;overflow:hidden;}
#captcha_wrap {height:43px;overflow:hidden;}
#captcha.regi {display:flex;align-items:center;gap:2px;height:43px;}
#captcha.regi legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;overflow:hidden;text-indent:-9999px;}
#captcha.regi #captcha_img, #captcha.regi #captcha_key {all:unset; flex:1;/*남은 공간 균일하게*/border:1px solid #ebebeb;border-radius:4px;height:41px;}
#captcha.regi #captcha_key {text-align:center;font-size:15px;font-weight:bold;}
#captcha.regi #captcha_reload {all:unset; width:41px;height:41px;border:1px solid #ebebeb;border-radius:4px;background:#efefef;text-align:center;cursor:pointer;}
#captcha.regi #captcha_reload i {font-size:15px;color:#626262;}
#captcha.regi #captcha_reload i:hover {color:#1d73f3;}

