@charset "utf-8";

/* log in */
/*#mb_login {background: #f2f2f2;}*/
/*.mbskin_box {width: 90%;  max-width: 550px;  margin: 0 auto;  background: #fff}
.mbskin_box .login_header a {display: inline-block;    font-size: 14px;   color: #666;   padding-left: 1.5em;   position: relative;   margin-bottom: 1.8rem;}
.mbskin_box .login_header a:hover {color:#222}
.mbskin_box .login_header a:before {content:""; content: "";  position: absolute;   left: 0;   top: 0;   width: 15px;   height: 15px; background:url(../img/main/home_icon.png) no-repeat center}
.mbskin_box .logo_wrap {text-align: center;   margin-bottom: 40px;}
#login_fs .frm_input {width: 100%;   height: 54px;   box-shadow: none;   border-radius: 10px;   margin-bottom: 15px;   padding: 1.13em 1.25em;   font-size: 16px;  color: #222;}
#login_fs .frm_input::placeholder {color:#999}
#login_fs .userid { background:url(../img/main/id_icon.png) no-repeat 30px 50%}
#login_fs .passwd { background:url(../img/main/pass_icon.png) no-repeat 30px 50%}
.login_if_auto label span {display: inline-block;   font-size: 16px;  color: #666;  padding-left: 1.5em;  margin-top: 5px;  margin-bottom: 2em; position: relative; cursor:pointer}
.login_if_auto label input + span:before {content: "";  position: absolute;     left: 0;    top: -0.1em;    width: 1.2em;    height: 1.2em;    border: 3px solid #ccc;    border-radius: 3px;}
.login_if_auto label input:checked + span:before { border: 3px solid var(--key-color); }
.login_if_auto label input:checked + span:after {content:"✔"; position: absolute;   left: 0.2em;   top: 0;   color: var(--key-color);   font-weight: 600;}
#login_fs .btn_submit {display: block;  width: 100%;   height: 50px;   border-radius: 10px;   border: 2px solid var(--key-color);   background: #fff;  color: var(--key-color);   font-size: 18px;   font-weight: 700;   margin-bottom: 15px; transition: all 0.15s;}
#login_fs .btn_submit:hover { background: var(--key-color); color:#fff}
#mb_login #sns_login {padding: 0;  border: none;}
#mb_login #sns_login .sns-icon:nth-child(odd) {   margin-right: 0;}*/
/*
#mb_login #sns_login .sns-icon {  width: 100% !important;   float: none !important; display: flex;    height: 50px;   justify-content: center;   align-items: center; border-radius: 10px;  margin-bottom: 10px;  transition: all 0.15s;}
#mb_login #sns_login .sns-icon:hover {box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);}
#mb_login #sns_login .sns-icon:last-child {margin-bottom:0; }
#mb_login #sns_login .txt {   font-size: 17px;   padding-left: 0 !important;   border-left: 0 !important;   font-weight: 600;   color: #fff;}
#mb_login #sns_login .sns-apple {background: url(../img/main/login_apple.png) no-repeat 30px 50% #000;}
#mb_login #sns_login .sns-line {background: url(../img/main/login_line.png) no-repeat 30px 50% #07b53b;}
#mb_login #sns_login .sns-wechat {background: url(../img/main/login_wechat.png) no-repeat 30px 50% #00dc66;}
#mb_login #sns_login .sns-facebook {background: url(../img/main/login_fb.png) no-repeat 30px 50% #0766ff;}
#mb_login #sns_login .sns-google {background: url(../img/main/login_google.png) no-repeat 30px 50% #000;}
#mb_login #sns_login .sns-email { border: 1px solid #000}
#mb_login #sns_login .sns-email .txt {color:#000}
*/
.login_if_lpl {display: flex; justify-content: center;  gap: 40px; margin-bottom: 0;}
.login_if_lpl a { font-size: 1.5rem;  color: var(--font-bk); display: inline-block;  position: relative; line-height: 1.5em;}
.login_if_lpl a:after {content: "";   position: absolute; right: -20px; top: 50%; transform: translate(-50%, -50%);   width: 0.5px;   height: 0.9em;   background: #eee;}
.login_if_lpl a:last-child:after {content:none}

#mb_login #sns_login .sns-icon {  width: 50px !important;   float: none !important; display: flex;    height: 50px;   justify-content: center;   align-items: center; border-radius: 100%; transition: all 0.15s;}
#mb_login #sns_login .sns-icon:hover {box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);}
/*#mb_login #sns_login .sns-wrap {display: flex;   align-items: center;  justify-content: center; gap:15px}*/
/*#mb_login #sns_login .sns-facebook {background: url(../img/main/login_fb.png) no-repeat center center #0766ff; background-size: 10px ! IMPORTANT;}
#mb_login #sns_login .sns-google {background: url(../img/main/login_google.png) no-repeat center center #f6f6f6; background-size: 18px ! IMPORTANT;}*/
#mb_login #sns_login .sns-wechat {background: url(../img/main/login_wechat.png) no-repeat center center #00dc66; background-size: 25px ! IMPORTANT;}
#mb_login .email_login_wrap {margin-top: 20px;   border-top: 1px solid #ddd;   padding-top: 20px;   text-align: center;}
#mb_login .email_login_wrap .sns-email {font-size: 18px;   font-weight: bold;}
#mb_login .email_login_wrap .sns-email:hover {text-decoration: underline;  text-underline-offset: 3px;}



/* find username password */
/*#find_info {width: 90%;   max-width: 550px;   margin: 0 auto;}
#find_info .new_win_con {   background: #fff !important;   margin: 0;   padding: 0;}
#find_info .new_win_con h2 { display: none; text-align: center;   font-size: 30px;   padding-bottom: 1.2em;   margin-bottom: 1em;   border-bottom: 1px solid #ddd;}
#find_info #info_fs h3 {display: block;     text-align: left;    font-size: 20px;    margin-bottom: 0.5em;}
#find_info #info_fs p {font-size: 18px;  margin-bottom: 1.5em; word-break: keep-all;}
#find_info #info_fs .frm_input {height: 55px;     box-shadow: none;    border-radius: 10px;    font-size: 16px;    padding: 0.1em 1.5em;   }
#find_info .iti {height: 55px;   margin-bottom: 10px;  width: 100%;}
#find_info .iti__country-container {height: 55px;     width: 160px;    border: 1px solid #d0d3db;    border-radius: 10px;}
#find_info .iti__selected-country {width: 100%;  padding: 10px; background:url(../img/main/select_arrow.png) no-repeat 90% 50%; position:relative}
#find_info .iti__selected-dial-code {   margin-left: 4px;   font-size: 16px;  color: #666; }
#find_info .iti__tel-input {  margin-left: 190px;     width: calc(100% - 190px);    padding: 0.1em 1.5em !IMPORTANT;}
#find_info .iti__tel-input:focus, 
#find_info .iti__tel-input:focus-visible {border: 1px solid #558ab7 !important; outline: none}
#find_info .iti__arrow {display:none}
#find_info .iti__selected-country:after {content: "-";     position: absolute;    right: -20px;    top: 50%;    transform: translateY(-50%);    font-size: 1.5em;}
#find_info #captcha {display: flex;   justify-content: center;   flex-wrap: wrap;   gap: 5px;}
#find_info .imgwrap {height: 55px;   width: 140px;   border: 1px solid #ddd;   border-radius: 10px;   display: flex;  justify-content: center;  align-items: center;}
#find_info .imgwrap img {border: none !important;}
#find_info #captcha #captcha_mp3 {width: 55px; height: 55px; border-radius: 10px; background:url(../img/main/mp3_icon.png) no-repeat center}
#find_info #captcha #captcha_reload {width: 55px; height: 55px; border-radius: 10px; background:url(../img/main/rewind_icon.png) no-repeat center}
#find_info #captcha #captcha_info {display: block;   margin: 5px 0 2em;  font-size: 16px;   color: #666;   letter-spacing: -0.1em;   width: 100%;  text-align: center;}
#find_info #captcha #captcha_key {    margin: 0;     padding: 0.1em 1em;    width: calc(100% - 205px);    height: 55px;    border: 1px solid #d0d3db;    background: #fff;    font-size: 16px;    font-weight: 400;    text-align: left;    border-radius: 10px;    vertical-align: middle;}
#find_info .win_btn {display: flex;   align-items: center;   justify-content: center;   gap: 10px;}
#find_info .win_btn button {width: 100%;    height: 55px;    font-weight: 600;    font-size: 16px;    color: #fff;    border-radius: 10px;    border: none; transition: all 0.15s;}
#find_info .win_btn button:hover {box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);}
#find_info .win_btn .btn_cancel {background: #ccc}
#find_info .win_btn .btn_submit {background: var(--key-color);}*/
.find_userinfo_pop_wrap {position: fixed;   top: 0;   left: 0;   width: 100%;  height: 100%;z-index: 199999;}
.find_userinfo_pop_wrap .close_wrap {position: absolute;     top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 0.85);}
.find_userinfo_pop_wrap .info_box {width: 90%;     max-width: 300px;    background: #fff;    padding: 30px 20px;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -60%);    border-radius: 10px;    text-align: center; box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.4)}
.find_userinfo_pop_wrap .info_box h3 {font-size: 18px;   line-height: 1.4em;   margin-bottom: 1.2em;  font-weight: 500;}
/*.find_userinfo_pop_wrap .info_box a {display: inline-block;    font-size: 16px;   color: #fff;   background: var(--key-color);   padding: 0.5em 2em;   border-radius: 30px;}*/
#find_info #mb_email {   margin-top: 0 !important;}

#find_info .logo_wrap {text-align: center;   margin-bottom: 30px;}








/* Register */
#register_form h2 {font-size: 30px;   text-align: center; margin-bottom:0}
#register_form .sub_title {font-size: 23px;  margin-bottom: 1em;}
#register_form .sub_title span {display: inline-block;   font-size: 0.7em;   color: #999;   font-weight: 500;   padding-left: 0.5em;}
/*#register_form .data_input_list {border-top: 1px solid #222}*/
#register_form .data_input_list li {display: grid; margin: 0; gap:15px 0}
#register_form .data_input_list li label {/*display: flex;     align-items: center;    width: 230px;    font-size: 17px;    font-weight: 600;    padding-left: 1.5em;    background: #f8f8f8;*/}
#register_form .data_input_list li .data_input {/*width: calc(100% - 230px);  padding: 10px; display: flex; align-items: center;font-size: 16px;  line-height: 1.8em;*/} 
#register_form .data_input_list li .data_input .frm_input {border: 1px solid var(--line);     border-radius: 0;    box-shadow: none;    padding: 10px;    font-size: 17px;    height: 40px;}
#register_form .data_input_list li .data_input.name {display: flex;  flex-wrap: wrap; gap: 10px;}
#register_form .data_input_list li .data_input.name .frm_input {width: 100%;   max-width: 210px;}
/*#register_form .data_input_list .email_input_wrap {display: flex;   align-items: center; width: 100%;font-size: 16px;  line-height: 2em;}
#register_form .data_input_list .email_input_wrap span {display: inline-flex;   width: 50px;  justify-content: center;  align-items: center;  font-size: 15px;}
#register_form .data_input_list .email_input_wrap #email_id,
#register_form .data_input_list .email_input_wrap #email_address {width: 100%;  max-width: 225px;}
#register_form .data_input_list .email_input_wrap select {width: 100%;  max-width: 200px; margin-left: 10px; color: #999;    background: url(../img/main/select_arrow.png) no-repeat 90% 50%;   -webkit-appearance: none;   -moz-appearance: none;}*/
#register_form .data_input_list .e_verifi {width: 100%;  max-width: 500px;}
#register_form .data_input_list .e_verifi_btn {height: 40px;   width: 200px;  margin-left: 10px;   font-size: 17px;   color: #fff;  border: none;   background: #aaa; transition: all 0.15s;}
#register_form .data_input_list .e_verifi_btn:hover {background:var(--key-color)}
#register_form .data_input_list #reg_mb_password,
#register_form .data_input_list #reg_mb_password_re,
#register_form .data_input_list #reg_mb_name,
#register_form .data_input_list .country {max-width: 710px;}
#register_form .data_input_list .radio_wrap {display: flex;   align-items: center;  gap: 20px; height: 40px;}
#register_form .data_input_list .radio_wrap label {width: auto;    background: #fff;   padding: 0;   cursor: pointer;}
#register_form .data_input_list .radio_wrap label input {position: absolute; display:none}
#register_form .data_input_list .radio_wrap label span {font-size: 15px;    color: #666;   font-weight: 400;   display: inline-block;  padding-left: 1.5em; position: relative}
#register_form .data_input_list .radio_wrap label input + span:before {content:""; position: absolute;  left: 0;     top: 0;    width: 15px;    height: 15px;    border: 2px solid #999;    border-radius: 100%;}
#register_form .data_input_list .radio_wrap label input:checked + span:before {content:""; border: 2px solid var(--key-color);}
#register_form .data_input_list .radio_wrap label input:checked + span:after {content:"";position: absolute;     left: 5px;    top: 5px;    width: 5px;    height: 5px;    background: var(--key-color);    border-radius: 100%;}
/*.sub-content--account .input-wrap--phone .iti {height: 40px;  width: 100%;}
.sub-conent--account .input-wrap--phone .iti__country-container {height: 40px;   width: 150px;    border: 1px solid #ddd; }
.sub-conent--account .input-wrap--phone .iti__selected-country {width: 100%;  padding: 10px; position:relative}
.sub-conent--account .input-wrap--phone .iti__selected-dial-code {   margin-left: 4px;   font-size: 16px;  color: #666; }
.sub-conent--account .input-wrap--phone .iti__tel-input {  margin-left: 160px;     width: 100%; max-width: 270px;   padding: 10px !IMPORTANT;}
.sub-conent--account .input-wrap--phone .iti__tel-input:focus, 
.sub-conent--account .input-wrap--phone .iti__tel-input:focus-visible {border: 1px solid var(--yellow) !important; outline: none}
.sub-conent--account .input-wrap--phone .iti__arrow {display:none}
.sub-conent--account .input-wrap--phone .iti__selected-country-primary {display: none;}*/
#register_form .register_form_inner {padding-bottom: 20px;}
.agree_pirvacy_policy .privacy_tit {font-size: 17px; margin-bottom: 20px;}
.agree_pirvacy_policy .privacy_tit:hover {text-decoration: underline;}
.privacy_contents_wrap {text-align: left; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 25px 20px;   overflow-y: auto;  height: 225px; background:var(--bg-light)}
.privacy_contents_wrap > * {line-height:1.3}
.privacy_contents_wrap p {color:var(--font-gray)}
.privacy_contents_wrap strong {display:block}
.privacy_contents_wrap strong + p {padding-top:10px}
.privacy_contents_wrap p + strong {padding-top:20px}
#register_form .privacy_contents_wrap h2 {font-size: 20px;   text-align: left;  margin-bottom: 0.5em;}
#register_form .privacy_contents_wrap p { font-size: 15px;   line-height: 1.6em;  word-break: keep-all;}
.agree_pirvacy_policy .radio_wrap {display: flex;  flex-wrap: wrap; gap: 30px;  margin-bottom: 40px;}
.agree_pirvacy_policy .radio_wrap label {width: auto;    background: #fff;   padding: 0;   cursor: pointer;}
.agree_pirvacy_policy .radio_wrap label input {position: absolute; display:none}
.agree_pirvacy_policy .radio_wrap label span {font-size: 18px;    color: #666;   font-weight: 400;   display: inline-block;  padding-left: 1.5em; position: relative}
.agree_pirvacy_policy .radio_wrap label input + span:before {content:""; position: absolute;  left: 0;     top: 0;    width: 15px;    height: 15px;    border: 3px solid #999;    border-radius: 100%;}
.agree_pirvacy_policy .radio_wrap label input:checked + span:before {content:""; border: 3px solid var(--key-color);}
.agree_pirvacy_policy .radio_wrap label input:checked + span:after {content:"";position: absolute;     left: 5px;    top: 5px;    width: 5px;    height: 5px;    background: var(--key-color);    border-radius: 100%;}
#fregisterform .btn_confirm a,
/*#fregisterform .btn_confirm button {display: inline-flex;   width: 200px;  justify-content: center;   align-items: center;   height: 50px;   border: none;   background: #ccc;   border-radius: 50px;   margin: 0 5px;   font-size: 17px;   color: #fff; transition: all 0.15s;  vertical-align: top;}
#fregisterform .btn_confirm a:hover,
#fregisterform .btn_confirm button:hover {box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); }
/*#fregisterform .btn_confirm button {background:var(--key-color)}*/
#register_form .email_auth_wrap .auth_btn {display: inline-flex;     justify-content: center;    align-items: center;    font-size: 17px;    background: var(--key-color);    color: #fff;    height: 40px;    padding: 5px 1em;    margin-left: 10px;    border-radius: 5px;transition: all 0.15s; }
/*#register_form .email_auth_wrap .auth_btn:hover {box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);}*/



/* 가입완료 */
.register_result_message_wrap #reg_result {background: #fff;  border: 1px solid #ddd; border-radius: 10px; max-width: 700px;}
.register_result_message_wrap #reg_result .logo_wrap {margin-bottom: 3rem;}
.register_result_message_wrap #reg_result .reg_result_p {font-size: 2.4rem;   color: #222; }
.register_result_message_wrap #reg_result .result_txt {text-align: center;   font-size: 1.7rem;  word-break: keep-all;}
.register_result_message_wrap #reg_result .reg_btn_submit {background: var(--key-color);   border-radius: 30px;  font-size: 1.8rem;}
.register_result_message_wrap #reg_result .reg_btn_submit:hover {box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);}
.register_result_message_wrap #reg_result .btn_confirm_reg {display: flex; align-items: center; justify-content: center; margin: 4rem auto 2rem; }
.btn_confirm_reg .butn {justify-content: center; width: 20rem}




/* 소셜 로그인 */
.social_register .terms_box {width: 100%;   height: 150px;  overflow-y: auto;  padding: 20px;}






/* Media Query  */
@media ( min-width: 2000px) {
#mb_login {display: flex;  justify-content: center;  align-items: center;}
.mbskin_box {margin: auto;   background: #fff;   height: 100%;   max-height: 600px;}
/* #container .register {min-height: calc(100vh - 456px)} */
}


@media ( max-width: 1280px) {
/*#register_form .data_input_list .email_input_wrap #email_id,
#register_form .data_input_list .email_input_wrap #email_address {max-width: 15vw;}
#register_form .data_input_list .email_input_wrap select {max-width: 13vw;}	*/
}

@media ( max-width: 980px) {
/* Register */
#register_form .data_input_list li label {width: 100%;    background: #fff;   padding-left: 0;   padding-top: 1em;}
#register_form .data_input_list li .data_input {width: 100%; padding-left: 0;}

/*#register_form .data_input_list .email_input_wrap {flex-wrap: wrap;}
#register_form .data_input_list .email_input_wrap #email_id,
#register_form .data_input_list .email_input_wrap #email_address {max-width: 27vw;}
#register_form .data_input_list .email_input_wrap select {max-width: 25vw;}
#register_form .data_input_list .email_input_wrap span {width: 15px;}*/
#register_form .email_auth_wrap {width:100%}
#register_form .email_auth_wrap .auth_btn {margin-left: 0; margin-top: 10px;}
}



@media ( max-width: 480px) {
/* log in */
/*.mbskin_box .logo_wrap img {width:180px}
#login_fs .frm_input {padding: 0.6em 2.5em;}
#login_fs .userid,
#login_fs .passwd {   background-position: 15px 50% !important; }
#login_fs .frm_input,
#login_fs .btn_submit,
#mb_login #sns_login .sns-icon {height: 50px; background-position: 20px 50% ! IMPORTANT; }
#mb_login #sns_login .txt {  font-size: 16px;}*/


/* find username password */
/*#find_info #info_fs h3 {font-size: 18px;}
#find_info #info_fs p {  font-size: 16px;}
#find_info #info_fs .frm_input {  height: 50px;}
#find_info .iti { height: 50px;}
#find_info .iti__country-container {  height: 50px; width: 110px;}
#find_info .iti__selected-country {padding: 5px;}
#find_info .iti__tel-input {  margin-left: 130px; width: calc(100% - 130px);}
#find_info .iti__selected-country:after {right: -15px;}
#find_info .imgwrap {  height: 50px;  width: 100px;}
#find_info #captcha #captcha_reload {  width: 50px;  height: 50px;}
#find_info #captcha #captcha_key {width: calc(100% - 165px);   height: 4.6rem;}
#find_info #captcha #captcha_info {font-size: 1.6rem;   letter-spacing: 0;}*/
#find_info #captcha {display: flex; flex-direction: row; row-gap: 0.5rem; column-gap: 0.5rem; flex-wrap: wrap;}
#find_info #captcha #captcha_key {margin-left: 0; order: 3; width: 100%;}
#find_info #captcha #captcha_info {order: 4; width: 100%;}

/* Register */
#register_form h2 {  font-size: 26px;}
#register_form .sub_title {  font-size: 18px; }
.privacy_contents_wrap {padding: 10px;}
.agree_pirvacy_policy .radio_wrap {gap: 15px;}
.agree_pirvacy_policy .radio_wrap label span {  font-size: 15px;}
/*#fregisterform .btn_confirm a, #fregisterform .btn_confirm button {width: 40vw; height: 38px;}*/
#register_form .data_input_list li .data_input .frm_input {font-size: 14px;}

.iti--fullscreen-popup.iti--container {padding-top: 100px !important;}

#register_form .data_input_list li .data_input.name  {flex-wrap: wrap; gap: 10px;}
#register_form .data_input_list li .data_input.name .frm_input {  max-width: 100%;}

.agree_pirvacy_policy .privacy_tit  a {display:inline-block; position: relative;}
.agree_pirvacy_policy .privacy_tit a:after {content: "";   position: absolute;  right: -18px;   top: 1px;  width: 15px;  height: 15px;  background: url(../img/main/select_arrow.png) no-repeat center; }

}

/*****이다혜 register 스타일 수정 2024.09.10*****/

/*로그인, id/pw 찾기, 회원가입*/
.mbskin_box .register_btn {margin-top:15px}
/*.devide_login {padding-top:15px; margin:20px 0; position:relative; text-align:center}
.devide_login:before{content:''; display:block; width:100%; height:1px; background:var(--line); position:absolute; left:0; bottom:9px}
.devide_login p {text-align:center; display:inline-block; position:relative; z-index:2; background:var(--color-white); padding:0 20px}*/
.devide_login {display: flex; align-items: center; column-gap: 1rem; margin-bottom: 1.5rem;}
.devide_login .line {display: inline-block; width: 45%; height: 1px; background: #eee;}
.devide_login .txt {font-size: 1.4rem; color: #666; line-height: 1.6em;}

/*#find_info {padding-bottom:235px}
#find_info #info_fs h3 {margin-bottom:15px}
#find_info #info_fs p {margin-bottom: 2.35em}
#find_info #info_fs .frm_input {width: 100%; height: 54px; box-shadow: none; border-radius: 10px; padding: 1.13em 1.25em; font-size: 16px; color: #222}
#find_info #info_fs .frm_input::placeholder {color:#999}*/

.find_userinfo_pop_wrap .info_box p {line-height:1.3}
.find_userinfo_pop_wrap .info_box a.close {position:absolute; right:15px; top:15px; width:16px; height:16px; background:url("../img/sub/pop_close.svg") no-repeat center / cover; font-size:0; display:block}


#find_info.pb135 {padding-bottom:135px}

.register_box {max-width:550px; width:100%; margin:0 auto}
#register_form.form_01 li:after {display:none}
#register_form .data_input_list li .data_input .frm_input {width: 100%; height: 54px; box-shadow: none; border-radius: 10px; padding: 1.13em 1.25em; color: #222}
#register_form .data_input_list li + li {margin-top:20px}
#container .register {margin-bottom:0}

/*팝업 스타일 추가*/
.find_userinfo_pop_wrap.wide .info_box {max-width: 48rem; width: 95%; padding: 2rem 2.5rem 2rem;}
.find_userinfo_pop_wrap.wide .info_box .title,
.find_userinfo_pop_wrap.mid2 .info_box .title{font-size: 2.2rem; font-weight: 500; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #ddd;}
.find_userinfo_pop_wrap.wide .info_box .cont_wrap {overflow-y:auto; max-height: 48vh; border-bottom:1px solid #ddd}
.find_userinfo_pop_wrap.wide .info_box .cont > * {text-align:left; line-height:1.5}
.find_userinfo_pop_wrap.wide .info_box .cont .sub_tit {text-align:left; font-weight:500; font-size:16px}
.find_userinfo_pop_wrap.wide .info_box .cont .sub_tit + * {padding-top:10px}
.find_userinfo_pop_wrap.wide .info_box .cont > * + 	.sub_tit {padding-top:30px}

.find_userinfo_pop_wrap.wide.large .info_box{max-width:1000px}

.find_userinfo_pop_wrap.mid .info_box {max-width:400px}
.find_userinfo_pop_wrap.mid2 .info_box {display: flex; flex-direction: column; row-gap: 2rem; max-width:540px}
.find_userinfo_pop_wrap .info_box p.tx_20sb {margin-bottom:5px}

.ico_register{margin:0 auto; width:100px; height:100px; background:url("../img/sub/illust_register.svg") no-repeat center / cover; margin-bottom:10px}

.find_userinfo_pop_wrap .pop_inner_notion {padding:10px; background:rgba(87,69,197,0.1); border-radius:5px}
.find_userinfo_pop_wrap .pop_inner_notion p {color:var(--sub-key-color)}
.find_userinfo_pop_wrap .pop_inner_notion p span {display:inline-block; color:var(--sub-key-color); vertical-align:middle; padding:0 10px}

.find_userinfo_pop_wrap .pop_inner_list li{text-align:left; line-height:1.4; word-break:keep-all}
.find_userinfo_pop_wrap .pop_inner_list li + li {padding-top:2px}

.find_userinfo_pop_wrap .pop_cou_num {display:flex; justify-content:space-between; align-items:center; gap:0 10px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.find_userinfo_pop_wrap .pop_cou_num input {max-width:100%;}

.find_userinfo_pop_wrap.width-1000 .info_box {max-width: 100rem; width: 95%;}
.find_userinfo_pop_wrap.width-800 .info_box {max-width: 80rem; width: 95%;}
.find_userinfo_pop_wrap.width-550 .info_box {max-width: 55rem; width: 95%;}
.find_userinfo_pop_wrap.width-400 .info_box {max-width: 40rem; width: 95%;}

/* qr 모달 */
.qr-modal {opacity: 0; visibility: hidden; transition: all 0.3s;}
.qr-modal.show {opacity: 1; visibility: visible;}
.qr-modal .info_box {padding-top: 5rem; position: relative;}
.qr-modal .qr-icon {background: #25d366; width: 7rem; height: 7rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);}
.qr-modal .qr-icon img {width: 3rem; height: 3rem;}
.qr-modal .qr-code {width: 80%; margin: 1rem auto 1.5rem;}
.qr-modal .qr-text {font-size: 2rem; font-weight: 600; color: #22b458; text-align: center; word-break: keep-all; line-height: 1.25em;}
.qr-modal.find_userinfo_pop_wrap .info_box a.close {width: 2rem; height: 2rem;}

/*media query*/

@media ( max-width: 480px) {
	.mbskin.pt100 {padding-top:10.9vw}
	.mbskin.pb120 {padding-bottom:12.1vw}

	/* #login_fs .frm_input {padding: 0.6em; height:50px} */

	#find_info.pt100 {padding-top:10.9vw}								 
	/* find_info #info_fs .frm_input {height:50px; padding:0 0.6em} */
	#find_info #info_fs .frm_input.mb30,
	#find_info .email_input_wrap.mb30{margin-bottom:15px}

	#register_form .data_input_list li .data_input .frm_input {height:50px; padding:0 0.6em}

	.register.pt100 {padding-top:10.9vw}
	.register.pb120 {padding-bottom:12.1vw}

	.find_userinfo_pop_wrap .pop_cou_num {gap:0 3px}

	.qr-modal .qr-text {font-size: 2.2rem;}
	.qr-modal .qr-code {width: 75%;}
	.qr-modal.find_userinfo_pop_wrap .info_box a.close {width: 2.4rem; height: 2.4rem;}
	.qr-modal.modal.find_userinfo_pop_wrap .info_box {overflow-y: unset;}
}


/* 2024.11.01 김희정 추가 */
.social_register .terms_box {height:300px;}
.social_register .frm_input {width: 100%; height: 54px; box-shadow: none; border-radius: 10px; padding: 1.13em 1.25em; color: #222}

/* [KSR 2025.07.16] 추가 */
.form-wrap fieldset, .form-wrap .form-section {display: flex; flex-direction: column; row-gap: 2rem;}
.form-wrap .form-row {display: flex; flex-direction: column; row-gap: 8px;}
.form-wrap .form-row.form-row--flex {flex-direction: row; column-gap: 2rem;}
.form-wrap .form-row--heading {flex-direction: row; align-items: center;}
.form-wrap .form-row--heading h5 {font-weight: 400;}
.form-wrap .form-row--heading p {position: relative; margin-left: auto; font-size: 1.2rem; padding-left: 1.1rem; color: #666;}
.form-wrap .form-row--heading p .aster {top: 50%; left: 0; transform: translateY(-50%);}
.form-wrap .form-row .form-group {display: flex; flex-direction: column; row-gap: 8px; width: calc((100% - 2rem) / 2);}
.form-wrap .aster {position: absolute; width: 6px; height: 6px; background: var(--yellow); border-radius: 999px;}
.form-wrap input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}
.form-wrap input[type="checkbox"] {position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; outline: 0; z-index: -1; overflow: hidden;}
.form-wrap .label {font-weight: 400; font-size: 1.2rem; line-height: 1.5em; text-align: left;}
.form-wrap .label label {position: relative;}
.form-wrap .label label .aster {left: calc(100% + 5px); top: 0;}
.form-wrap .aster {font-size: 2rem; color: var(--yellow); font-weight: inherit; font-style: normal;}
.form-wrap .label-guide {display: block; font-size: 1.3rem;}
.form-wrap .input-wrap {display: flex; align-items: center; column-gap: 0.9rem;}
.form-wrap .input-wrap.input-wrap--column {flex-direction: column; row-gap: 0.8rem;}
.form-wrap .term-text {padding: 2.5rem 1rem; max-height: 25rem; overflow-y: auto;}
.form-wrap button {background: transparent; border: 0; outline: 0; color: #000;}
.form-wrap .nice-select {width: 100%; border: 0; padding-left: 0; padding-right: 0; height: 4.2rem; line-height: 4.2rem; font-size: 1.3rem;}
.form-wrap .nice-select .list {padding: 1rem;}
.form-wrap .nice-select .option:hover, .form-wrap .nice-select .option.focus, .form-wrap .nice-select .option.selected.focus {
	background: var(--lightyellow)
}
.form-wrap .nice-select:after {border-bottom: 0; border-right: 0; background: url('../img/main/icon-category-select.svg') no-repeat 50% 50% / contain; width: 1.6rem; height: 1.6rem; right: 0; margin-top: 0; transform-origin: 50% 0; transform: rotate(0) translateY(-50%)}
.form-wrap .nice-select.open:after {transform: rotate(-180deg) translateY(-50%);}
.input-group--flex {display: flex; align-items: center; column-gap: 8px; width: 100%;}
.input-group--flex .butn {align-self: stretch; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 500; width: 9rem; border-radius: 999px; border: 1px solid #f1f1f1;}
.input-group--flex .butn.butn-coupon {width: auto; padding: 1.2rem 2rem; flex: 0 0 auto; border: 1px solid #000;}
.input-item {border: 1px solid #DDD; background: #fff; padding: 0 2rem; width: 100%; border-radius: 999px; position: relative;}
.input-item.focus {border-color: var(--darkblue);}
.input-item.active {border-color: var(--yellow) }
.input-item.disabled, .input-item.disabled input {background: #EDEDED; pointer-events: none; color: #999;}
.input-item.textarea {border-radius: 1rem; padding: .5rem 2rem;}
.input-item input, .input-item select {padding: 1.1rem 0; width: 100%; line-height: 1.5em; height: 2rem; box-sizing: content-box; box-shadow: none; border: 0;}
.input-item select {line-height: normal; padding: 1.1rem 0;}
.input-item input {font-size: 1.3rem;}
.input-item input:focus-visible {outline: none;}
.input-item input[type=text]:focus, .input-item input[type=password]:focus, .input-item textarea:focus, .input-item select:focus {-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 0 !important;}
.input-item textarea {border: 0; padding: 1rem 0; width: 100%; min-height: 20rem; font-size: 1.3rem; line-height: 1.4em;} 
/* .input-item textarea::-webkit-scrollbar {width: 6px;}
.input-item textarea::-webkit-scrollbar-thumb {background: #ccc; border-radius: 3px;} */
.input-item textarea:focus-visible {outline: none;}
.input-item.input-readonly, .input-item.input-readonly input {background: #EDEDED; cursor: default; pointer-events: none;}
.input-item.input-readonly textarea {background:     #EDEDED;}
.input-item.input-readonly input {}
.input-item.input-readonly.select {width: 25.4%;}
.input-item.input-readonly select {background: #EDEDED ; pointer-events: none;}
.input-item.select {display: flex; align-items: center; /*padding: 0;*/ position: relative;}
.input-item.select::after {content: ""; display: inline-block; width: 1.4rem; height: 1.4rem; background: url(../images/icon_select.svg) no-repeat 50% 50% / contain;
position: absolute; top: 50%; transform: translateY(-50%); right: 1.5rem;}
.input-item select {font-size: 1.4rem; width: 100%; border-radius: 999px;}
.input-item select:focus-visible {outline: none;}
.input-wrap button {align-self: stretch;}
.input-wrap .upload-name {display: -webkit-box; text-overflow: ellipsis; overflow: hidden !important; width: 95%;}
.input-wrap .upload-appearance {display: -webkit-box; text-overflow: ellipsis; overflow: hidden !important; width: 95%; cursor: default;}
.file-delete {display: flex; align-items: center; column-gap: 1rem; align-self: flex-start; width: 80%;}
.file-delete .file-delete-title {font-size: 1.3rem; line-height: 1.5em; color: #666; display: -webkit-box; overflow: hidden; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; word-break: break-all; max-width: 80%;}
input[type="checkbox"], input[type="radio"] {position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; outline: 0; z-index: -1; overflow: hidden;}
.existing-file {display: flex; align-items: center; column-gap: 1rem; align-self: flex-start; width: 90%;}
.existing-file .existing-file-title {font-size: 1.3rem; line-height: 1.5em; color: #666; display: -webkit-box; overflow: hidden; white-space: normal; word-wrap: break-word; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; word-break: break-all; max-width: 90%;}
.existing-file .existing-file-title a {display: block; width: 100%; line-height: 1.4em;}
.checkbox-wrap {display: flex;}
.checkbox-wrap--column {display: flex; flex-direction: column; row-gap: 1rem; align-items: flex-start;}
.checkbox-wrap .chk_box input[type="checkbox"] + label span {position: static; top: auto; left: auto; width: auto; height: 1.8rem; display: inline-block; margin-top: 0; margin-bottom: 0; border: 0; background: transparent; border-radius: 0; padding-left: 0;}
.checkbox {position: relative; text-align: left; font-size: 1.3rem; color: #222; line-height: 1em; cursor: pointer; line-height: 1.6em;}
.checkbox.chk_box input[type="checkbox"] + label {display: flex; align-items: center; column-gap: 1rem; padding-lefT: 0;}
.checkbox label span {display: flex; align-items: flex-start; line-height: 1.6rem; font-size: 1.6rem;}
.checkbox label em {display: inline-block; width: 1.8rem; height: 1.8rem; background: #fff; border: 1px solid #D9D9D9; border-radius: 3px;}
.checkbox input:checked ~ label em {border-color: var(--yellow); background-color: var(--yellow); background-image: url('../img/sub/icon-check-black.svg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 12px 10px;}
.radio-wrap {display: flex; column-gap: 3rem;}
.radio-wrap--column {flex-direction: column; row-gap: 1rem; align-items: flex-start;}
.radio-wrap .radio label span {position: static; top: auto; left: auto; width: auto; height: 1.8rem; display: inline-block; margin-top: 0; margin-bottom: 0; border: 0; background: transparent; border-radius: 0; padding-left: 0;}
.radio {position: relative; text-align: left; font-size: 1.3rem; color: #222; line-height: 1em; cursor: pointer; line-height: 1.6em;}
.radio label {display: flex; align-items: center; column-gap: 1rem; padding-lefT: 0;}
.radio label span {display: flex; align-items: flex-start; line-height: 1.6rem; font-size: 1.6rem;}
.radio label em {display: flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; background: #fff; border: 1px solid #B2B3B7; border-radius: 50px; position: relative; padding-bottom: .5px; }
.radio label em::after {content: ""; display: inline-block; width: 1rem; height: 1rem; border-radius: 50px; background: transparent;}
.radio input:checked ~ label em {border-color: var(--yellow); }
.radio input:checked ~ label em::after {background: var(--yellow);}

.sub-content--account {display: flex; align-items: center; justify-content: center; background: #666; }
.sub-content--account .form-box {display: flex; align-items: flex-start; max-width: 92rem; width: 90%; padding: 1rem; background: #fff; border-radius: 2rem; max-height: unset; height: auto;}
.sub-content--account .form-box--img {display: flex; align-items: center; justify-content: center; width: 44%; overflow: hidden; border-radius: 2rem; position: relative; align-self: stretch;}
.sub-content--account .form-box--img img {width: auto; max-width: unset; height: 100%;}
.sub-content--account .form-box--img span {font-size: 2rem; font-weight: 500; color: #fff; position: absolute; top: 4.4rem; line-height: 1.6em;}
.sub-content--account .form-wrap {flex: 1; padding: 5rem 6rem 6rem;}
.sub-content--account .input-wrap {position: relative;}
.sub-content--account .dropdown-wrap {position: absolute; top: 110%; width: 100%; background: #fff; z-index: 6;}
.sub-content--account .email-dropdown {display: flex; flex-direction: column; row-gap: 0.5rem; max-height: 16rem; overflow-y: auto;}
.sub-content--account .email-dropdown li {font-size: 1.3rem; line-height: 1.5em; padding: 0.5rem; cursor: pointer;}
.sub-content--account .dropdown-wrap.open {padding: 1.5rem; border: 1px solid #ddd; border-radius: 1.5rem; display: flex; flex-direction: column; row-gap: 1rem;}
.sub-content--account .input-wrap--password .input-item {height: 4.2rem; position: relative;}
.sub-content--account .input-wrap--password input {height: 100%; box-sizing: border-box;}
.sub-content--account .register_btn {text-align: center;}
.sub-content--account #toggleBtn {position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; z-index: 4;}

.sub-content--account.login .form-wrap {display: flex; flex-direction: column; row-gap: 3rem;}
.sub-content--account.login form {display: flex; flex-direction: column; row-gap: 1.2rem;}
.input-wrap--password .real-password {position: absolute; top: 0; left: 2rem; width: calc(100% - 4rem); z-index: 2; background: transparent;}
.input-wrap--password .overlay-password {position: absolute; top: 0; left: 2rem; width: calc(100% - 4rem); height: 100%; z-index: 1; pointer-events: none; border: 0; background: white; color: black;}
.sub-content--account.login .checkbox.chk_box {padding: 5px 0;}
.sub-content--account.login .checkbox.chk_box input[type="checkbox"] + label {justify-content: flex-end;}
.social_link.butn_style1 {font-size: 1.4rem;}

.sub-content--account.register .checkbox_wrap {margin-bottom: 3rem;}
.sub-content--account .input-wrap--phone .input-item {border-radius: 0; border: 0; padding: 0; background: transparent;}
.sub-content--account .input-wrap--phone .iti {display: flex; flex-direction: column; row-gap: 0.8rem; height: auto;}
.sub-content--account .input-wrap--phone .iti__country-container {position: static; width: 100%; height: auto; border: 1px solid #ddd; border-radius: 50px; padding: 0; background: #fff; overflow: hidden;}
.sub-content--account .input-wrap--phone .input-item .iti > input {border: 1px solid #ddd; padding: 1.1rem 2rem !important; border-radius: 50px; width: 100%; margin-left: 0; width: calc(100% - 4rem); max-width: unset; padding-left: 2rem !important;}
.sub-content--account .input-wrap--phone .input-item .iti > input:focus {border: 1px solid var(--yellow) !important;}
.sub-content--account .input-wrap--phone .iti__selected-country {font-size: 1.3rem; padding: 1.1rem 2rem; width: 100%;}
.sub-content--account .input-wrap--phone .iti__arrow {display: none;}
.sub-content--account .iti__selected-dial-code {  margin-left: 0;  font-size: 1.3rem; line-height: 1.5em; height: 2rem;}
.sub-content--account .iti--inline-dropdown .iti__dropdown-content {z-index: 5;}
.sub-content--account .iti--inline-dropdown .iti__dropdown-content input {height: auto; min-height: 2rem; box-sizing: border-box; padding: 1.1rem 2rem;}
.sub-content--account .iti .iti__country {padding-top: 1rem; padding-bottom: 1rem; font-size: 1.3rem;}
.subpage .iti--inline-dropdown .iti__dropdown-content,
.sub-content--account .iti--inline-dropdown .iti__dropdown-content,
.checkout_wrap_all .iti--inline-dropdown .iti__dropdown-content {z-index: 10; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.20); border-radius: 1rem; border: 0; overflow: hidden;}
.subpage .input-wrap--phone .iti__selected-country::after,
.sub-content--account .input-wrap--phone .iti__selected-country::after,
.checkout_wrap_all .iti__selected-country::after {content: ""; display: inline-block; width: 1.1rem; height: 0.6rem; background: url(../img/main/select_arrow.png) no-repeat 96% 50% /contain; position: absolute; top: 50%; transform: translateY(-50%); right: 2rem; transition: .2s; }
.subpage .input-wrap--phone .active .iti__country-container,
.sub-content--account .input-wrap--phone .active .iti__country-container {border-color: var(--yellow);}
.subpage .input-wrap--phone .active .iti__selected-country::after,
.sub-content--account .input-wrap--phone .active .iti__selected-country::after,
.checkout_wrap_all .active .iti__selected-country::after  {transform: translateY(-50%) rotate(180deg);}

/* 아이디, 비밀번호 찾기 */
.sub-content--account.lost .form-row--heading {flex-direction: column; row-gap: 0.5rem; align-items: flex-start;}
.sub-content--account.lost .form-wrap .form-row--heading h5 {font-weight: 500;}
.sub-content--account.lost .form-row--heading p {margin-left: 0; padding-left: 0;}
.sub-content--account.lost form {display: flex; flex-direction: column; row-gap: 2rem;}
.sub-content--account .butn_submit.disabled {background: #EBECF0; cursor: not-allowed; pointer-events: none; }
.form-row--captcha {padding-bottom: 3rem;}

/* 호스팅 신청 */
.radio-wrap.radio-wrap--button {}

@media (hover: hover) {
	.login_if_lpl a:hover {color:#222; text-decoration: underline; text-underline-offset: 3px;}
	.sub-content--account .login_term_checkbox a:hover {text-decoration: underline; text-underline-offset: 3px; cursor: pointer;}

	.sub-content--account .email-dropdown li:hover,
	.sub-content--account .email-dropdown li.active {background: var(--lightyellow);}
	.sub-content--account .register_btn:hover {text-decoration: underline; text-underline-offset: 3px;}

	.input-group--flex .butn.butn-coupon:hover {background: #000; color: #fff;}
	.sub-content--checkout .radio-wrap--button .radio-label:hover {background: #D0D0D0; border-color: #D0D0D0}
}

@media (max-width: 1024px) {
	.sub-content--account .form-wrap {padding: 3rem 3.5rem 4rem;}
}

@media (max-width: 768px) {
	.form-wrap .form-row--heading p {font-size: 1.5rem;}
	.form-wrap .label {font-size: 1.4rem;}
	.form-wrap .nice-select {height: 4.8rem; line-height: 4.8rem; font-size: 1.5rem;}
	.input-item input, .input-item select {font-size: 1.5rem; height: 2.6rem;}
	.input-item textarea {font-size: 1.4rem;}
	.checkbox {font-size: 1.5rem;}
	.sub-content--account .input-wrap--password .input-item {height: 5rem;}

	.sub-content--account .form-box {flex-direction: column; row-gap: 2rem; max-width: 50rem; width: 95%;}
	.sub-content--account .form-box--img {width: 100%; height: 24rem;}
	.sub-content--account .form-box--img img {width: 100%; height: auto;}
	.sub-content--account .form-wrap {padding: 2rem 1rem 4rem; width: 100%;}
	.sub-content--account .email-dropdown li {font-size: 1.5rem; padding: 0.8rem;}
	.sub-content--account .input-wrap--phone .iti__selected-country {font-size: 1.5rem; height: 4.8rem;}

	.sub-content--account.login .form-wrap {width: 100%;}
	.devide_login .txt {font-size: 1.6rem;}
	.social_link.butn_style1 {font-size: 1.6rem;}

}

@media (max-width: 480px) {
	.form-wrap .form-row--heading {flex-direction: column; row-gap: 0.5rem; align-items: flex-start;}
	.form-wrap .form-row--heading p {margin-left: 0;}
	.form-wrap .form-row.form-row--flex {flex-direction: column; row-gap: 2rem;}
	.form-wrap .form-row .form-group {width: 100%;}
	.radio-wrap--button.radio-wrap-col3 {flex-wrap: wrap; row-gap: 0.8rem;}
	.radio-wrap--button.radio-wrap-col3 .radio {width: 100%;}

	.existing-file .existing-file-title {font-size: 1.4rem;}
	.subpage--hosting .file-list {margin-top: 1rem; row-gap: 1rem;}
	.section-business .existing-file {width: 100%;}
	.section-business .existing-file-title {max-width: 100%;}

	.find_userinfo_pop_wrap .info_box {transform: translate(-50%, -50%);}
}

@media (max-width: 325px) {
	.sub-content--account .form-box--img span {padding: 0 2rem;}
	.sub-content--account .form-box--img span br {display: none;}
}