/* -------------------- */
/*  	  MEMBER        */
/* -------------------- */

/* hidden contents */
.hidden, .hid {display:none !important; visibility: hidden; font-size: 0;height: 5px;}
.dis_flex { display: flex; align-items: center}
.dis_mb { display: none !important} 
.blind, .skip {width:1px;height:0px;overflow:hidden;position:absolute;top:-9999em;left:-9999em;display:block;text-indent:-9999em;font-size:0px;line-height:0; margin: 0 !important;}
.input-text {height: 48px;  line-height: 1.2em;  font-size: .95em;  font-weight: 400;transition-property: border-color,height,padding-right,color;
transition-duration: .2s,0s;outline: none;border: 1px solid rgba(0,0,0,.15);background: #fff;padding: 0 0.94118em;width: 100%;vertical-align: middle;color: rgba(0,0,0,.84);font-family: roboto,Noto Sans KR,-apple-system,dotum,sans-serif;border-radius: 5px;}
.input-text:focus {border: solid 1px #18abc1;}
/* checkbox */
.checkList.ty_dI {display: block;vertical-align: top;line-height: 0;text-align: left;margin-left: -30px;}
.checkList.ty_dI > li {display: inline-block;text-align: left;vertical-align: top;margin-left: 30px;}

.checkList {font-size:0;margin-left: -34px;}
.checkList li {display: inline-block;vertical-align: top;margin-left: 34px;text-align: left;}
.checkList li label {display: block;padding-top: 10px;padding-bottom: 10px;}
.checkboxArea {cursor:pointer;display: inline-block;vertical-align: top;padding-left: 27px;position: relative;; -ms-user-select: none;  -moz-user-select: -moz-none;  -khtml-user-select: none; -webkit-user-select: none; user-select: none; }
.checkboxArea input[type="checkbox"] {position: absolute;z-index: -99999;opacity: 0;} 
.checkboxArea .fakeCheckbox {position: absolute;width: 24px;height: 24px;border: 1px solid #dcdcdc;box-sizing:border-box;left: 0;top: 50%;margin-top: -11.5px;border-radius: 3px;background-color: #fff;background-repeat: no-repeat;background-position: center center;}
.checkboxArea input[type="checkbox"]:checked + .fakeCheckbox:after {content:'';position: absolute;width: 14px;height: 14px;background-color: #c71e23;left: 50%;top: 50%;border-radius: 3px; transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);}
.checkboxArea.ty2 .fakeCheckbox.ty2 {position: absolute;width: 20px;height: 20px;border: 1px solid #dcdcdc;box-sizing:border-box;left: 0;top: 50%;margin-top: -10px;border-radius:0;background-color: #fff;background-image: url(/images/member/icon_check_g.png);background-repeat: no-repeat;background-position: center center; }
.checkboxArea.ty2 input[type="checkbox"]:checked + .fakeCheckbox.ty2:after {content:'';position: absolute;left: 50%;top: 50%;width: 20px;height: 20px;background-color: #18abc1;border: 1px solid #17a2b8;border-radius: 0;background-image: url(/images/member/icon_check_w.png);background-repeat: no-repeat;background-position: center center; transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);}


/* loginWrap */
.loginWrap,.joinWrap,.findWrap {width: 100%; max-width: 400px; margin: 0 auto; overflow: hidden}
.loginWrap h3,.joinWrap h3, .findWrap h3 {text-align: center;margin: 0 0 .5em;font-weight: 600;}
.loginWrap > input + input {margin-top: 15px;}
.loginWrap p,.joinWrap p {font-size: 1em;}
.findWrap .input-text { margin: 5px 0; display: block}
.loginWrap .input-text { margin: 5px 0}
.loginWrap .agreeWrap p{padding-bottom: 0;}
.loginWrap .linkChk {overflow:hidden;margin-top:20px; margin-bottom: 20px; font-size: .95em }
.loginWrap .linkChk label { margin-bottom: 0}
.loginWrap .linkChk .save {float:left;}
.loginWrap .linkChk .link {float:right;}
.loginWrap .linkChk .link a {display:inline-block;color:#767676;vertical-align:top; }
.loginWrap .linkChk .link a:after{ content:''; display: inline-block; vertical-align: middle; width:1px; height: 16px; background:rgba(0,0,0,0.2);margin:-2px 5px 0 8px;}
.loginWrap .linkChk .link a:last-child:after {display:none;margin:0;padding:0;}
.loginWrap .linkChk .link i {}
.loginWrap .btn_login {padding: 0;color: #666 !important; font-size: 1em !important}
.loginWrap .btn_login .button{ width:100%; text-align: center; height: 48px; line-height: 48px; border-radius: 3px;}

.loginWrap .separator { clear:both; position: relative;margin: 20px 0;text-align: center;line-height: 16px;font-size: 12px;}
.loginWrap .separator:before {position: absolute;top: 50%;left: 0;background: rgba(0,0,0,.06);width: 100%;height: 1px;content: "";}
.loginWrap .separator span {display: inline-block;position: relative;background: #fff;padding: 0 16px;color: rgba(0,0,0,.54);font-size: 13px;}

.social_login { text-align: center}
.social_login button {display: inline-block;transition-property: border-color,background;transition-duration: .2s;   border: 1px solid #ced4da;  border-radius: 50%;  background: #fff;  margin: 0 8px;padding-top: 12px;  padding-bottom: 12px;text-align: center; width: 52px;height: 52px;vertical-align: middle;line-height: 0;font-size: 0;}
.social_login button.facebook {border-color: #304d8a;	background: #304d8a;	color: #fff; background: url("/images/member/icon_facebook.png") no-repeat 50% 50%}
.social_login button.naver {border-color: #00c301;	background: #00c301;	color: #fff; background: url("/images/member/icon_naver.png") no-repeat 50% 50%}
.social_login button.kakao {border-color: #ffcd00;background: #ffcd00;color: #3f2626; background: url("/images/member/icon_kakao.png") no-repeat 50% 50%}
.social_login button i.icon {display: inline-block;vertical-align: top;font-size: 24px;line-height: 24px;}

.loginWrap .bottom-message {position: relative;clear: both;margin-top: 12px; text-align: center}
.loginWrap .bottom-message p{font-size: .85em; margin-top: 1em}
.loginWrap .bottom-message a {margin-left: 16px; text-decoration: underline;color:#18abc1;}


@media only screen and (max-width: 768px) {	
	.loginWrap h3,.joinWrap h3, .findWrap h3 {font-size: 1.4em;}
	.loginWrap .text-center, .joinWrap .text-center, .findWrap .text-center {font-size:12px;}
	.dis_pc { display: none  !important}
    .dis_mb { display: block  !important} 
}
@media only screen and (max-width: 470px) {	

}
@media only screen and (max-width: 360px) {	
	
}


/* 회원가입*/
.joinWrap {max-width: 600px; margin-top: -4em !important;}
.joinWrap .dis_flex {gap: 10px; }
.joinWrap .text-center { color: #666}
.joinWrap .text-center em{color: #ff5353;}
.joinWrap .btn_area { text-align: center; margin-top: 2em;display: flex; gap: 10px;justify-content: center;}
.joinWrap .btn_area .button { width:100%;}
/* step_join */
.step_join {position: relative;padding-bottom: 40px;}
.step_join ul{display: table;text-align:center;width: 100%;}
.step_join ul:after{display: block;position: absolute;left: 15%;top: 50px;margin-top: -1px;width: 70%;height: 1px;border-top: 1px solid #b3b3b3;z-index: 1;}
.step_join li {position:relative;display: table-cell;margin: 0;z-index: 10;}
.step_join li span{font-size:1.05em;display: block;width: 100px;margin: 0 auto;color: #666;}
.step_join li span em {font-weight: 900;font-style: normal;}
.step_join li.on span{color: #18abc1;;}
.step_join li:before{content: '';display: block;width: 100px;height: 100px;margin: 0 auto;background:url('/images/member/bg_member.png') no-repeat;}
.step_join li:last-child:after{ display:none;}
.step_join li.step1:before {background-position:0px -100px;}
.step_join li.step2:before {background-position: -100px -100px;}
.step_join li.step3:before  {background-position: -200px -100px;}
.step_join li.step4:before  {background-position:-200px 0;}
.step_join li.on.step1:before {background-position: 0 0;}
.step_join li.on.step2:before {background-position:-200px 0px;}
.step_join li.on.step3:before {background-position:-100px 0px;}
.step_join li.on.step4:before  {background-position:-200px 0;}
/* 약관동의 */
dl.agreeBox{padding-bottom: 20px;text-align: center;border: 1px solid #239abd;margin-top: 48px;}
dl.agreeBox dt { background-color:#239abd;height: 60px;line-height: 60px;text-align: center;font-size: 24px;font-weight: 400;color: #fff;margin-bottom: 25px }
dl.agreeBox dd {width:90%;max-width: 640px; margin: 0 auto ; text-align: left; font-size: 1.015em;  letter-spacing: -1px; color: #3b3b3b;  margin-bottom: 10px;}
dl.agreeBox dd a {float: right;display: inline-block;width: 100px;height: 30px;line-height: 27px;font-size: 14px;font-weight: 300;color: #878787;text-decoration: none;border: 1px solid #b9b9b9;border-radius: 5px;text-align: center;}
/* 회원정보입력 */
.form_group {margin-bottom: 1.4em;vertical-align: top;}
.form_group.phone_box {margin-bottom: 0em;}
.form_group label:first-child {
	margin: 0 0 4px;
    color: #999;
    display: block;
    font-size: 12px;
}
.form_group label .check {
	color: #ff5353;
}
.form_group input[type='text'],
.form_group input[type='password']{
	display: inline-block;
    width: 100%;
    height: 50px;
    padding: 0 10px;
    color: #000;
    font-size: 14px;
    line-height: 50px;
    letter-spacing: -0.01em;
    background-color: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    transition: border-color 0.2s ease-out;
    outline: none;
}

.form_group.auth_box label {visibility: hidden;height: 3px;margin: 0 !important}
.form_group p {font-size: .85em;font-weight: 400;color: #ff5353;margin: 5px 0 0 0;}
.form_group p + .sms-chk {margin-top: 0;}
.auth_send,
.auth_check,
.id_check {
	width: 140px;
	height: 48px;
	line-height: 46px;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -1px;
	color: #fff;
	background: #17a2b8;
	border: 0;
	border-radius: 5px;
	outline: 0;
	cursor: pointer;
}
.auth_send.gray,
.auth_check.gray,
.id_check.gray{background: #666;pointer-events: none;opacity: 0.7}
.id_check {
	background: #fff;
	border: 1px solid #3b3b3b;
	color: #3b3b3b;
}
.auth_resend {
	display: inline-block;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: -1px;
	color: #000;
	padding: 5px 0;
	border:0;
	border-bottom: 1px solid #000;
	margin-left: 20px;
	margin-bottom: 8px;
	outline: 0;
	cursor: pointer;
	background: #fff;
}
.findSection .text-center { font-size: .95em}

.email_box, 
.emailBox { margin-top:10px}
.email_box .dis_flex,  
.emailBox .dis_flex { gap:5px}
.email_box p,
.emailBox p{ font-size: 0.85em;font-weight: 300;color: #3b3b3b;;margin-top: 5px;}
.email_box.form_group input[type='text'],
.emailBox.form_group input[type='text'] {height: 2.68rem; line-height: 2.68rem;}

.m_join_box {width: 95%;position: relative;margin: 0 auto 0;text-align: center;}
.m_join_box .img { margin-bottom: 2em}
.m_join_box .t1 {font-size: 2em; font-weight: 500;color: #000;letter-spacing: -3px;margin-bottom: 1em;}
.m_join_box .t2 {font-size: 1em;color: #3b3b3b;line-height: 1.7;letter-spacing: -1px; margin: .5em 0}
.m_join_box .info_ex03 { text-align: center; font-size: .85em; color: #DA292C}

/* 아이디/패스워드찾기 */
.findWrap{max-width: 450px;}
.findWrap .btn_area { margin-top:20px}
.findWrap .btn_area .button.large {width: 49.5%;padding: 0;}
.pwWrap h3 { margin-top:3em}
p.g_txt{font-size: .85em;color: #e90b0b; text-align: left}

.messageSection {  min-width: 400px;}
.messageSection .tit strong {display: block;
    padding: 25px 20px;
    background-color: #f0f7f7;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.15em;
    color: #033f54;}
@media only screen and (max-width: 768px) {	
    .findWrap .btn_area .button.large {width: 49%;padding: 0; margin: 0}
    .messageSection {  min-width: 300px; margin: 0 auto}
}


/* 회원탈퇴 */
.member_out { font-size: 13px; line-height: 1.3;  margin: 20px 0 30px; text-align: center;}
.member_out a { display: inline-block; font-weight: 700; color: #777 !important }
.member_out p { margin-bottom: 10px; color: #777;}

/* 나의시술정보 확인 */
.surgeryInfoWrap { max-width: 800px; margin: 0 auto; text-align: left; position: relative; margin-top: -3em;font-size: 15px;}
.surgeryInfoWrap .tti_area {display: flex;justify-content: flex-start;align-items: center; margin: 40px 0 15px}
.surgeryInfoWrap > div:first-child .tti_area { margin-top: 0 }
.surgeryInfoWrap .tti_area h3 {padding: 0;font-weight: 700;flex-grow: 1; font-size: 1.4em; color: #111}
.surgeryInfoWrap .info_area {border: 1px solid #ddd; border-radius: 8px; padding: 15px 20px}
.info_my {position: relative;line-height: 2;display: flex; align-items: center;gap: 5px;padding: 0 0 10px;}
.info_my .my-name {padding: 10px 0;font-weight: 700;font-size: 18px; color: #111}   
.info_my .my-name span {display: inline-block;padding: 0 4px 0 0px;font-weight: 400;font-size:.85em;}
.info_my .my-badge { width:35px;margin-right: 5px; }
.info_my p {display: flex; align-items: center; gap: 8px;font-size: 13px; margin: 0}
.info_my p:before { content: ""; display: inline-block; width: 1px; height: 15px; background-color: #ddd}
.info-grade {display: flex;justify-content: space-between;flex-direction: row;align-items: center;background: #f8f8fa;border-radius: 8px;;padding: 10px 16px;}
.info-grade p { margin: 0}
.info-grade p span{color: #000;display: inline-block; padding: 0 4px;}
.info-grade p:first-child span {font-weight: 700;}
.info-grade p strong {color: #000;font-weight: 700;display: inline-block; padding: 0 4px;}
.info-grade p em { font-style: normal; font-size: 12px; display: inline-block;width: 70px }
.info-grade p:nth-child(3) em {width: inherit}
.info-grade p:last-child { font-size: .852em}
.info-grade p:last-child strong {color: #ed6114; font-size: 1.8em;font-weight: 900;padding: 0 0 0 4px;}
.surgeryInfoWrap .list_check > li.noData {}
.surgeryInfoWrap .list_check > li:hover { border:1px solid #ddd }
.surgeryInfoWrap .txt_list { border: 1px solid #ddd;border-radius: 10px;padding: 0; }
.surgeryInfoWrap .txt_list > li { position: relative; padding: 0px 0 0 7px; margin: 20px; line-height: 1.3; display: flex; align-items: center;justify-content: space-between;}
.surgeryInfoWrap .txt_list > li:before { content: ""; display: inline-block; width: 3px; height: 3px; background-color:#444; margin-right: 5px; border-radius: 50%;position: absolute; left: 0; top:7px}
.surgeryInfoWrap .txt_list > li:last-child {margin-bottom: 20px !important; }
.surgeryInfoWrap .txt_list > li strong {font-weight: 600;}
.surgeryInfoWrap .txt_list > li span:first-child { flex: 1 }
.surgeryInfoWrap .txt_list > li .info { color: #9b9b9b; font-size: .95em}
.surgeryInfoWrap .txt_list > li.noData:last-child {margin: 0px !important;}
.surgeryInfoWrap .txt_list > li.noData:before { display: none}

.surgeryInfoWrap .coupone_list { border: 1px solid #ddd;border-radius: 10px;padding: 10px 15px;flex-direction: row;display: flex;flex-wrap: wrap;justify-content: space-between; }
.surgeryInfoWrap ul.coupone_list:after { display: none !important}
.surgeryInfoWrap .coupone_list > li { position: relative; padding: 20px 40px 20px 20px; margin: 10px 0; line-height: 1.3; width: 49%; border: 1px solid #d8e4ed;border-radius: 6px 0 0 6px;}
.surgeryInfoWrap .coupone_list > li:last-child {margin-bottom: 10px !important; }
.surgeryInfoWrap .coupone_list > li:after { display: block; content: "COUPONE" ;position: absolute; right: -1px; top:-1px; width: 40px; height: calc( 100% + 2px );background: #fff url(/images/member/coupon_bg.svg) repeat-y right; color: #ffffff73;font-size: 10px;writing-mode: vertical-rl;text-align: center;padding: 13px;letter-spacing: 8px;}
.surgeryInfoWrap .coupone_list > li strong {font-weight: 600;font-size: 1.3em;display: block;}
.surgeryInfoWrap .coupone_list > li span {display: block; }
.surgeryInfoWrap .coupone_list > li span:first-child { color: #0789e8;font-size: .85em;}
.surgeryInfoWrap .coupone_list > li .info { display: block; color: #929292;font-size: .85em; margin-top: 7px}
.surgeryInfoWrap .coupone_list > li.noData:last-child {margin: 0px !important; border: none;box-shadow: none;}
.surgeryInfoWrap .coupone_list > li.noData:before, .surgeryInfoWrap .coupone_list > li.noData:after  { display: none}

.surgeryInfoWrap .surgery_list { border: 1px solid #ddd;border-radius: 10px;padding: 0; }
.surgeryInfoWrap .surgery_list > li { position: relative; padding: 0px 0 0 30px; margin: 20px; line-height: 1.3; display: flex; align-items: center}
.surgeryInfoWrap .surgery_list > li:last-child {margin-bottom: 20px !important; }
.surgeryInfoWrap .surgery_list > li.noData:last-child {margin: 0px !important;}
.surgeryInfoWrap .surgery_list input[type="checkbox"].option-input {}
.surgeryInfoWrap .surgery_list input[type="checkbox"].option-input + label { margin: 0; padding: 0; text-overflow: ellipsis;overflow: hidden;white-space: nowrap;flex: 1;}
.btn-rounded-xs {border: 1px solid #ddd; border-radius: 18px;display: inline-block;height: 36px;line-height: 34px;padding: 0 16px;font-weight: 400; font-size: .85em}
.surgeryInfoWrap .btn_area { display: flex; gap:10px; align-items: center; justify-content:center; margin-top: 15px}

@media only screen and (max-width: 1024px) {
    .joinWrap, .surgeryInfoWrap {margin-top: -1em !important;}
    .id_check {font-size:1em}
    .info-grade p:nth-child(3) em {width: 70px}
    
}
@media only screen and (max-width: 768px) {	
	.form_group {font-size: 13px}
    .joinWrap .text-center br { display: none}
	dl.agreeBox dt {height: 50px; line-height: 50px;font-size: 18px;}
	dl.agreeBox dd {width: 95%;font-size: 1em;margin-bottom: 3px;}
	dl.agreeBox dd a {width: 60px; font-size: 12px;height: 25px; line-height: 23px;}
   
    .form_group input[type='text'],
    .form_group input[type='password']{line-height: 40px; height: 40px; font-size: 13px;}    
    .form_group {margin-bottom: 1.3em;}
    .auth_send,.auth_check,.id_check {width: 110px; font-size:1em}

   
    .auth_resend {	margin-left: 20px;	margin-bottom: 8px;}
	.auth_send,
	.auth_check,
	.id_check {width: 110px; height: 40px; line-height: 40px; font-size: 12px;}

    .m_join_box .btn_area .button.large {width:40% !important;max-width:inherit; padding:0; font-size:1.1em !important}
    .m_join_box {margin: 0px auto 30px;}
	.m_join_box .t1 {font-size: 1.5em;}
	
	
	.input_box{padding:20px 0;}
	.input_box li{ display: block;;margin: 5px auto; padding: 0 15px}
	.input_box li label { width: 88px; margin-right: 0; text-align: left}
	.input_box .button { width: 100%; margin-top: 10px}
	.input_box input[type=text], input[type=number] { width: calc(100% - 92px);}

	.joinWrap.outWrap {margin-top:0 !important;}
    .changeWrap.outWrap .wrap {padding: 35px 0 150px;}
    
    .form_group p + .sms-chk {margin-top: 5px;}
    
    .surgeryInfoWrap {margin-top:0 !important; font-size: 14px}
    .surgeryInfoWrap .info_area {padding: 10px 10px;}
    .info_my .my-badge {width: 25px;}
    .info_my .my-name {font-size: 16px;}
    .info-grade { display: block}
    .info-grade p { line-height: 1.5}
    .info-grade p:last-child, .info-grade p strong { font-size:inherit; padding: 0 }
	.surgeryInfoWrap .txt_list > li { display: block}
	.surgeryInfoWrap .txt_list > li .info {display: block; margin-top: 5px;}
	.surgeryInfoWrap .coupone_list > li {width: 100%; }
    .surgeryInfoWrap .surgery_list > li,
    .surgeryInfoWrap .urgery_list > li:last-child{ margin: 15px 10px !important}
    .btn-rounded-xs {height: 28px;line-height: 26px;padding: 0 13px;font-size: 11px;}
    .surgeryInfoWrap .btn_area  {justify-content: space-between;}
    .surgeryInfoWrap .btn_area button { width: 100%; min-width: inherit}

}
@media only screen and (max-width: 640px) {
    
}
@media only screen and (max-width: 400px) {

    
    .email_box select {height: 38px;padding-left:5px;font-size: .95em;width: 110px;}
    .auth_send,
	.auth_check,
	.id_check {height: 38px;line-height: 36px;font-size: .95em;}
	
	/* input_box */
	.input_box { padding: 30px 0; overflow: hidden; text-align: center; border: 1px solid #ddd}
	.input_box li { display: inline-block; margin: 5px;}
	.input_box input[type=text], input[type=number] {width: 170px; height: 35px;border: 1px solid #ddd; font-weight: 500; color: #000; text-indent: 0; }
	.input_box label:before { content: ""; display: inline-block; border: 2px solid #c8161a; margin: 0 5px 5px 0; vertical-align: middle}
	.input_box label { margin-right: 5px; display: inline-block; top: inherit;}
	.input_box .button { margin:-5px 0 0 0;height: 35px; line-height: 35px; }
}

/* * * * * * * * * * * * *  
         login_txt
* * * * * * * * * * * * */
#divMobile {  position: relative;margin-top: 20px;}
#divMobile #timer { position: absolute; right: 120px;bottom: 15px;font-size:12px;line-height: 15px;color: #e90b0b}
.login-wrap{height:auto;width: 450px;padding: 100px 25px;}
.login-wrap .dis_flex { display: flex; justify-content: space-between; align-items: center; gap:10px}
.login-wrap .dis_flex .button {min-width: 100px; padding: 0 15px 1px;}
.login-wrap .no-member label{ color:#999;font-size:12px; margin-bottom: 4px; display: block; text-align: left;cursor: pointer;font-weight: 400;word-break: keep-all;line-height: 1.5;}
.login-wrap label:first-child{margin:20px 0 4px;color: #999;display:block;font-size:12px}
.div-date>div {display: flex;   width: 100%;    gap: 10px;}
.login-form{height:auto;display:flex;flex-direction:column}
.btn-join{width: 100%;height: 60px;line-height: 58px;font-weight: 600;margin-top:20px;margin-bottom:20px;}
.login-form .keep input{margin-right:10px}
.login-form .keep{margin-top:8px;margin-left:20px;padding-left:28px;font-size:15px;line-height:2;color:rgba(17,17,17,0.5)}
.login-form .btn-pur{margin-top:60px}
.login-form .btn-pur{margin-bottom:0}
.login-form .login-line{position:relative;font-size:14px;color:#888;text-align:center;margin-top:20px;margin-bottom:20px}
.login-form .login-line::before{position:absolute;top:50%;left:0;display:block;content:'';width:150px;height:.5px;background-color:#888;opacity:.5}
.login-form .login-line::after{position:absolute;top:50%;right:0;display:block;content:'';width:150px;height:.5px;background-color:#888;opacity:.5}
.login-form .btn-login{width:400px;height:60px;padding:15px 0 20px;font-size:18px;font-weight:400;margin-top:30px}
.login-menu{font-size:14px;display:flex;flex-wrap:nowrap;margin-top:20px}
.login-menu li{opacity:.7;position:relative;margin-right:60px;color:#888}
.login-menu li a{font-weight:300;color:#888}
.login-menu li::after{position:absolute;top:calc(50% - 6px);right:-31px;display:block;content:'';width:2px;height:12px;background-color:#c4cbc4}
.login-menu li:last-child{margin-right:0}
.login-menu li:last-child::after{display:none}
.login-form{position:relative}
.login-wrap .wrong{width:400px;height:70px;background-color:#f9f9f9;padding:12px 16px;font-size:14px;color:#d62c2c;margin-top:10px}
span.desc{display:block;margin:0 auto;text-align:center;margin-top:20px}

.authtext {margin-top: 10px;font-size: 13px;line-height: 20px;color: #ff5845;word-break: keep-all;}
.sms-chk {margin-left: 0;margin-top: 10px;font-size: 14px; width: inherit !important; text-align: left}
.sms-chk>span {font-weight: 400;color: #111;margin-right: 10px}
.sms-chk a,
.sms-chk .btnSmsResend {font-weight: 500;color: #0d91a6 !important;margin-right: 3px}
.sms-chk .btnSmsResend { background: none; border: none; display: inline-block; padding: 0}
.button.btnSmsSend.gray,
.button.btnSmsCheck.gray {pointer-events: none;opacity: 0.7;}
.login .tab{width:800px;margin:0 auto}
.login ul.tab-tit{display:flex}
.login ul.tab-tit li{padding:13px 0;width:50%;text-align:center;cursor:pointer}
.login ul.tab-tit li:hover{background:#fafafa}
.login ul.tab-tit span{border-right:1px solid #eee;font-size:16px;font-weight:500;display:inline-block;width:100%;height:30px;line-height:30px;color:#aaa}
.login ul.tab-tit li:last-of-type span{border-right:0}
.login ul.tab-tit li{position:relative}
.login ul.tab-tit li::after{content:'';display:inline-block;width:100%;position:absolute;height:100%;bottom:0;left:0;transition:.5s}
.login ul.tab-tit li.active::after{background:#0d91a6;height:3px;transition:.5s}
.login ul.tab-tit li:last-child.active::after{background:#111;height:3px;bottom:0}
.login ul.tab-tit li.active span{color:#111}
.login ul.tab-con{display:flex;flex-direction:column;width:400px;margin:0 auto}
.login ul.tab-con li{display:none}
.login ul.tab-con li>div{margin-bottom:40px}
.login ul.tab-con li.active{display:block}
ul.tab-con label{margin:0 0 10px 8px}
.login input[class="radio"]+label{margin-left:12px;font-size:15px}
.login button.btn-login{border-radius:4px}
.simple-login{position:relative}
.simple-login>span{font-size:14px;font-weight:300;color:#676767;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:0 10px}
.sns-login{display:flex;justify-content:center;margin-top:50px}
.sns-login span{font-size:12px;font-weight:400;color:#111;display:flex;flex-direction:column;align-items:center;margin-right:60px;cursor:pointer}
.sns-login span:last-of-type{margin-right:0}
.sns-login span::before{content:'';display:inline-block;width:60px;height:60px;margin-bottom:10px;border:1px solid red}
.find-login{display:flex;justify-content:center;align-items:center;margin-top:80px}
.find-login span{font-size:14px;font-weight:300;color:#888;cursor:pointer}
.find-login span::after{content:'';display:inline-block;width:2px;height:12px;background-color:#efeff1;margin:0 30px}
.find-login span:last-of-type::after{display:none}

button.btn-auto{position:absolute;top:25px;right: 0;border-radius:50px;border:solid 1px #ccc;background-color:#f3f3f3;font-size:14px;font-weight:500;width:90px;height:30px}
.login .login-form .sns-wrap{margin-top:80px}
.select-date{display:flex}
.login-box input[class="radio"]:checked+label:before{width:16px;height:16px}
/*button#authBtn2{top:10px;border-radius:50px;border:solid 1px #ccc;background-color:#f3f3f3;font-weight:500;height:30px}*/
@media(max-width:1199px){
	.login-form input{-webkit-appearance:none;}

	.login-wrap{width:320px;padding: 10px 5px;border:0;background-color:#fff;box-shadow:none;}
	.login-form{}
	.login-form .login-line,.login-form .login-line::before,.login-form .login-line::after{display:none}
	.login-form>button{width:320px;height:50px;padding:15px 0 20px;font-weight:400}
	.login-form .btn-login{font-size:16px;font-weight:400;height:50px;background-color:#0d91a6;color:#fff;margin-top:20px}
	
	.login-wrap input::placeholder{line-height:50px}
	.login-form .keep input{margin-right:10px}
	.login-form .keep{margin-top:6px;margin-left:3px;padding-left:26px;font-size:1.4rem;line-height:2;color:rgba(17,17,17,0.5)}
	.login-form .sns-wrap{width:100%;height:auto}
	.login-form .sns-wrap .sns-label{text-align:center;color:#666;margin:20px 0 14px;display:flex;justify-content:space-between;align-items:center;font-size:12px}
	.login-form .sns-wrap .sns-label::before{display:inline-block;content:'';width:140px;height:1px;background-color:#e3e3e3}
	.login-form .sns-wrap .sns-label::after{display:inline-block;content:'';width:140px;height:1px;background-color:#e3e3e3}
	.login-form .sns-wrap button{width:320px;height:42px;font-size:14px;flex-wrap:wrap;font-weight:12px;border-radius:4px}
	.login-form .sns-wrap button.kakao{position:relative;color:#3c1e1e;background-color:#ffeb00;margin-bottom:10px}
	.login-form .sns-wrap button.apple{position:relative;color:#fff;background-color:#111;margin-bottom:30px;font-weight:300}
	.login-form .kakao::before{position:absolute;top:13px;left:20px;display:block;content:'';width:18px;height:15px;background-image:url(../images/user/mIcon_kakaoLogin.svg);background-size:contain;image-rendering:-webkit-optimize-contrast;background-repeat:no-repeat}
	.login-form .apple::before{display:block;position:absolute;top:12px;left:21px;content:'';width:18px;height:18px;background-image:url(../images/user/mIcon_appleLogin.svg);background-size:contain;background-repeat:no-repeat;image-rendering:-webkit-optimize-contrast;background-position:center}
	.login-menu{width:320px;font-size:12px;margin:0 auto;padding:0 4.3px;margin-top:10px}
	.login-menu li{margin-right:20px}
	.login-menu li:nth-child(2){margin-left:auto}
	.login-menu li:first-child::after{display:none}
	.login-menu li::after{top:7px;right:-12px;width:2px;height:6px;background-color:#efeff1}
	.login span.desc{font-size:1.3rem}
	.login ul.tab-con{width:320px}
	.container>hr:first-of-type{display:none}
	.login .tab{width:360px;margin:45px auto 0}
	.login ul.tab-tit span{border-right:1px solid #eee;font-size:16px;font-weight:300;display:inline-block;width:100%;height:30px;line-height:30px;color:#aaa}
	.login ul.tab-tit li.active span{color:#0d91a6;font-weight:500}
	.login ul.tab-tit li:nth-child(2).active span{color:#111}
	hr .cross{display:none}
	.simple-login>span{display:none}
	.simple-login{display:none}
	input[type=text].border-line,input[type=number].border-line,input[type=password].border-line{font-size:14px;width:100%}
	hr.input{display:block;margin:3px 0 5px 0;background-color:#ccc}
	ul.tab-con label{margin:0 0 10px 8px}
	.login input[class="radio"]+label{margin-left:3px;font-size:1.4rem;marign-top:5px;padding-top:3px}
	.simple-login>span{font-size:14px;font-weight:300;color:#676767;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:0 10px}
	.sns-login{display:flex;justify-content:center;margin-top:50px}
	.sns-login span{font-size:12px;font-weight:400;color:#111;display:flex;flex-direction:column;align-items:center;margin-right:60px;cursor:pointer}
	.sns-login span:last-of-type{margin-right:0}
	.sns-login span::before{content:'';display:inline-block;width:60px;height:60px;margin-bottom:10px;border:1px solid red}
	.find-login{position:absolute;top:125px;width:320px;display:flex;justify-content:flex-start;align-items:center}
	.find-login span{font-size:1.2rem;font-weight:300;color:#888;cursor:pointer}
	find-login span:first-chlid{margin-left:2px}
	.find-login span a{float:right;color:#888}
	.find-login span:first-hlid a{float:left}
	.find-login span:nth-of-type(2){margin-left:auto;margin-right:20px}
	.find-login span::after{content:'';display:inline-block;width:2px;height:6px;background-color:#efeff1;margin:0 30px;position:absolute;top:7px;right:48px}
	.find-login span:first-of-type::after,.find-login span:last-of-type::after{display:none}
	input[name="mobile"].border-line{max-width:100%;margin-right:10px}
	button.btn-auto{position:absolute;top:24px;}
	.login .login-form .sns-wrap{margin-top:70px;margin-bottom:20px}
	.login-wrap .wrong{width:100%;height:68px;font-size:12px;line-height:2rem}
	#loginText{margin-bottom:30px}
	span.desc{margin-top:10px;margin-bottom:40px}
	.login-wrap .join-item label,
    .login-wrap .join-item .div-date label{margin:10px 0 4px;color:rgba(51,51,51,0.5);font-size:12px}
	.div-date label{margin:10px 0 4px;color:rgba(51,51,51,0.5);font-size:12px}
	/*button#authBtn2{top:7px;font-weight:var(--fw_400)}*/
	
    .login-form .btn-join{height: 50px; line-height: 48px; font-size: 16px;}
}
@media(max-width:768px){
    .login-form .btn-join{height: 45px !important; line-height: 43px !important; font-size: 15px !important;}
	#divMobile #timer{ bottom:10px}
	.sms-chk {font-size: 13px;}
}

@media(max-width:320px){
	.container{width:100vw}
	.login-wrap{width:100vw}
	.login-form{width:calc(100% - 20px)}
	.login-form>button{width:calc(100vw - 20px);margin:0 auto}
	.login-menu{width:calc(100vw - 20px)}
	.login .tab{width:100vw}
	.login ul.tab-con{width:calc(100vw - 20px)}
	.find-login{width:calc(100% - 20px)}
	.login-form .btn-login{width:100%}
}