@charset "utf-8";

/* ******************************************************
	@ 로그인 / 비회원 주문조회
*******************************************************/
.login_container .page_subtitle{text-align: center;}
.login_area{max-width:400px;margin:0 auto}
.login_area input{margin-bottom:10px;display:block;border:1px solid #ccc;width: 100%;padding: 10px;border-radius: 4px;}
.login_area .member_txt_box input{margin-bottom:10px;display:block;border:1px solid #ccc;width: 100%;padding: 10px;border-radius: 4px;}
.login_area .login_btn_area a{display:inline-block;width:100%;height:50px;line-height:50px;font-size:18px;color:#fff;text-align:center;background:#070707;border-radius:4px}
.login_area .caution_ment{display: block; margin: 10px 0 20px 0;padding: 10px 0;font-size: 15px;text-align: center;color: #d4202b; background: #fffafa;}
@media all and (max-width:640px){
	.login_area .login_btn_area a{height:45px;line-height:45px;font-size:16px;}
}

/* ******************************************************
	@ secession
*******************************************************/
.secession {margin: 0 auto;max-width:640px;	padding: 50px 44px;background: #f6f6f6;}
.secession .secession_area {text-align: center;font-size: 15px;line-height: 1.4;color: #666;}
.secession .secession_area .box{padding:10px 20px;margin:10px 0;}
.secession .secession_area p span{font-size:15px;color:#333;line-height:1.4;}
.secession .secession_area p strong{display:block;line-height:1.6;font-size:15px;color:#111;word-break:keep-all;}
.secession .secession_area p strong mark{display:inline-block;padding:0 4px;background:#f4ff49;}
.secession .secession_area .chk_list{margin:10px 0;padding:15px 0;background:#fff;}
.secession .secession_area .chk_list li{margin-bottom:4px;word-break:keep-all;}
.secession_alert {display:inline-flex;flex-direction: column;padding:4px 0;}
.secession_alert input[type="checkbox"]{width:0;height:0;opacity:0;padding:0;margin:0;border:0;min-width:auto;}
.secession_alert input[type="checkbox"] + label{display:block;padding-left:30px;width:100%;line-height:1.4;background-repeat:no-repeat;background-position:0 4px; background-image:url(https://bodyfriend.speedgabia.com/img/bodyfriend/icon/icon_check_off.svg);cursor:pointer}
.secession_alert input[type="checkbox"]:checked + label{background-image:url(https://bodyfriend.speedgabia.com/img/bodyfriend/icon/icon_check_on.svg)}

@media all and (max-width:640px){
	.secession{max-width:inherit;width:100%;padding:20px;}
	.secession .secession_area p strong{font-size:14px;}
	.secession .secession_area .chk_list{padding:15px 10px;}
}


/* ******************************************************
	@ old_login
*******************************************************/
#login-container{margin:0 auto;width:100%;padding:90px 0;background:#fff}
#login-container h2{text-align: center;}
#login-container .login-area{max-width:400px;margin:0 auto}
#login-container .login-area-nav{display:flex;flex-wrap:wrap;margin:30px auto 20px;}
#login-container .login-area-nav li{flex-grow:1; width:50%;border:1px solid #e3e3e3;border-bottom:0;}
#login-container .login-area-nav > li a{display:inline-block;width:100%;height:48px;line-height:48px;text-align:center;font-size:15px;background:rgba(255,255,255,1);color:#888;}
#login-container .login-area-nav li a.on{color:#fff;opacity:1;background:#333;}
#login-container .login-area .login-input .member-txt-box input{margin-bottom:10px;display:block;border:1px solid #ccc;width: 100%;padding: 10px;border-radius: 4px;}
#login-container .login-area .login-input .member-txt-box input[type="password"]{margin-bottom:0}
#login-container .login-area .login-input .member-txt-box input::placeholder{font-size:15px;color:#e4e4e4}
#login-container .login-option{padding:7px 0 45px}
#login-container input[type="checkbox"]{display:none}
#login-container input[type="checkbox"] + label{float:left;position:relative;padding-left:18px;padding-right:20px;margin-bottom:20px;font-size:14px;color:#909090;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
#login-container input[type="checkbox"] + label:before{content:'';display:block;width:11px;height:11px;border:1px solid #8e8f91;position:absolute;left:0;top:1px}
#login-container input[type="checkbox"]:checked + label:before{content:"\2714";width:10px;height:11px;opacity:1;font-size:11px;color:#111;padding-left:1px}
#login-container input::placeholder{font-size:12px;font-family:'NotoSansKR-Light'}
#login-container a.idpw-search{float:right;color:#070707}
#login-container .wide-btn{display:inline-block;width:100%;height:50px}
#login-container .wide-btn a{display:inline-block;width:100%;height:50px;line-height:50px;font-size:18px;font-family:'NotoSansKR-Regular';color:#fff;text-align:center;background:#070707;border-radius:4px}
#login-container .wide-btn.non-btn a{background:#fff;color:#070707;border:1px solid #070707;box-sizing:border-box;border-radius:4px}
#login-container .wide-btn.bg0 a{background:#313131}
#login-container .snsBtn.wide-btn{margin-top:15px}
#login-container .snsBtn.wide-btn a{background:#fff!important;border:1px solid #070707;border-radius:4px;color:#444;font-size:18px;font-family:'NotoSansKR-Regular';box-sizing:border-box}
#login-container .snsBtn.wide-btn span img{margin:15px 10px}
#login-container .login-info{display:inline-block;width:100%;margin:20px 0;padding-top:16px;border-top:1px solid #dcdcdc}
#login-container .login-info2{width:100%;margin:45px 0;padding-top:16px}
#login-container .login-info > span{display:block;line-height:1.6;margin-bottom:16px;text-align:center;color:#8e8f91}
#login-container .login-info span:first-child{margin-bottom:0}
#login-container .select-info--txt{display:inline-block;margin-left:8px;font-size:13px;font-family:'NotoSansKR-DemiLight';color:#8e8f91;line-height:30px}
#login-container .idpw-tab-contents,.tab-contents{display:none}
#login-container .idpw-tab-contents.open,.tab-contents.open{display:block}
@media screen and (max-width:640px){
	#login-container input[type="checkbox"] + label{float:left;position:relative;padding-left:15px;padding-right:20px;margin-bottom:20px;font-size:14px;color:#909090;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
}
