/* BASIC css start */
#contents{ padding: 0 0 6rem;}


.step1{ padding: 30px 1.3rem 0;}
.step1 article{ }
.step1 article h3{ font-size: 20px; line-height: 1.5;}
.step1 article p{ font-size: 15px; color: #393939; padding: 20px 0 40px;}



[class*="btn_style"]{ margin: 0 auto 10px;}
[class*="btn_style"] a{ position: relative; display: block; padding: 14px 0; width: 100%; text-align: center; font-size: 16px; color: #000; border-radius: 3px;}
[class*="btn_style"] a img{ position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 20px;}

.btn_style_b{ }
.btn_style_b a{background: #393939; color: #fff;}
.btn_style_w a{ border: 1px solid #DEDEDE;}


[class*="btn_style"].kakaotalk{ position: relative;}
[class*="btn_style"].kakaotalk a{ background: #F9DF4A; border: unset;}
[class*="btn_style"].kakaotalk .bubble{ position: absolute; left: 50%; top: -51%; transform: translateX(-50%);  animation: rimotion .6s infinite alternate; }
[class*="btn_style"].kakaotalk .bubble span{ position: absolute; left: 50%; top: 42%;  transform: translate(-50%, -50%); white-space: nowrap;}

@keyframes rimotion {
	0% {margin-top: -3px;}
	100% {margin-top: 2px;}
}



.step1 .sns-login{margin-bottom: 10px;}
.step1 .sns-login > div{ font-size: 13px; text-align: center; color: #A2A2A2; padding: 10px 0; }


.util{ display: flex; align-items: center; justify-content: center; margin: 20px 0 0;}
.util li{ width: auto; padding: 0 10px; position: relative; }
.util li::after{ content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background:#dedede;}
.util li:last-child::after{ display:none;}
.util li a{ font-size: 13px; color:#393939;}





.step2.member{ padding:0; margin: 0;}
.step2.member > *{ padding: 0 1.3rem;}

.location{ position: relative; border-bottom: 1px solid #D9D9D9; padding: 13px 1.3rem !important; margin-bottom: 40px;}
.location a{ font-size: 16px;}
.location h2{ font-size: 16px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

.tab{ display: flex; align-items: center; justify-content: space-between;}
.tab li{ width: 49%; }
.tab li a{ font-size: 16px; padding: 0 0 10px; text-align: center; border-bottom: 1px solid #D9D9D9; color: #A2A2A2; display: block;}
.tab li a.on{ color: #000; border-bottom: 1px solid #000;}

.step2 #MS_frm_login{}
.step2 #MS_frm_login .loginInput{}
.step2 #MS_frm_login .loginInput input{ font-size: 15px; color: #000; padding: 14px 15px; height: fit-content; border: 1px solid #DEDEDE; border-radius: 3px;}
.step2 #MS_frm_login .loginInput input::placeholder{ color:#A2A2A2; font-size: 15px; }

.step2 #MS_frm_login .loginCheck{ display: flex; align-items: center; margin: 10px 0 20px;}
.step2 #MS_frm_login .loginCheck li{display: flex; align-items: center; margin: 0 10px 0 0; }
.step2 #MS_frm_login .loginCheck li span{ color: #393939;}
.step2 #MS_frm_login .loginCheck input[name="auto_login"],
.step2 #MS_frm_login .loginCheck input[name="save_id"]{ display:none;}
.step2 #MS_frm_login .loginCheck input[name="auto_login"] + label,
.step2 #MS_frm_login .loginCheck input[name="save_id"] + label{ display: inline-block; width: 20px; height: 20px;
    border: 1px solid #DEDEDE; border-radius: 30px; margin: 0 5px 0 0; 
    background: url(/design/jmomall/ECHO/uiux/icon/icon_chk_off.svg) center center no-repeat;
}
.step2 #MS_frm_login .loginCheck input[name="auto_login"]:checked + label,
.step2 #MS_frm_login .loginCheck input[name="save_id"]:checked + label{ background: url(/design/jmomall/ECHO/uiux/icon/icon_chk_on.svg) center center no-repeat; border: unset; }


.step2 .util{ margin: 20px 0 64px;}
/* BASIC css end */