@charset "utf-8"; 

/*
 * --------------------------------------------------------------------------
 * descript : 맴버쉽
 * --------------------------------------------------------------------------
 * version	: 2.0.0
 * author	: Yoodaekyung
 * update	: 2018.08.17
 * email	: eorud0818@naver.com
 * --------------------------------------------------------------------------
 */

/*
 * ==========================================================================
 * Table of Contents 
 * ==========================================================================
 * 1.0 - 로그인 폼
 * 2.0 - 회원가입 입력 폼
 * 3.0 - 회원가입 완료
 * --------------------------------------------------------------------------
 */

/* --------------------------------------------------------------------------
   1.0 로그인 폼
   -------------------------------------------------------------------------- */
#membership{width:100%; margin-bottom:100px;}
#membership .inner{max-width:580px;}
#membership h4{text-align:center; font-size:24px; font-weight:700; background:#f5f8fc; color:#222; padding:35px 0;}
#membership .login-account{border:1px solid #eee; border-top:2px solid #0091d5; box-sizing:border-box; padding:25px 50px; background:#f8f8f8;}
#membership .login-account li{padding:5px 0;}
#membership .login-account label[for="m_id"], #membership .login-account label[for="m_pass"]{width:20%; float:left; height:45px; line-height:45px; font-weight:700;}
#membership .login-account input[type="text"], #membership .login-account input[type="password"]{width:80%; height:45px; line-height:45px; background:#fff; border:1px solid #ddd; padding:0 15px; box-sizing:border-box;}
#membership .login-account .save-account{text-align:right;}

#membership .login-btn{border:1px solid #eee; border-top:0; box-sizing:border-box; padding:25px 50px; background:#f8f8f8;}
#membership .login-btn button[type="submit"]{display:block; width:100%; height:45px; line-height:45px; text-align:center; font-size:17px; font-weight:700; color:#fff; background:#0091d5}
#membership .login-btn .login-btn-info{text-align:right; margin-top:15px;}
#membership .login-btn .login-btn-info a{position:relative; display:inline-block; margin-left:25px; font-weight:700; color:#222; font-size:12px;}
#membership .login-btn .login-btn-info a::before{position:absolute; display:inline-block; content:''; width:3px; height:3px; border-radius:3px; background:#222; left:-10px; top:5px;}

#membership .login-form input[type="radio"],
#membership .login-form input[type="checkbox"]{display:none;}

#membership .login-form input[type="radio"] + label,
#membership .login-form input[type="checkbox"] + label{font-size:13px; position:relative; cursor:pointer; padding-left:25px;}

#membership .login-form input[type="radio"] + label::before,
#membership .login-form input[type="checkbox"] + label::before{position:absolute; content:""; display:inline-block; left:0; top:-4px; border:1px solid #ddd; width:20px; height:20px; background:#fff; border-radius:23px; box-sizing: border-box; cursor:pointer; vertical-align:middle;}

#membership .login-form input[type="radio"]:checked + label:after,
#membership .login-form input[type="checkbox"]:checked + label::after{position:absolute; content:""; display:inline-block; width:20px; height:20px; left:0; top:-4px; background:url(/assets/img/common/theme/check_bg.png) no-repeat center center}


/* --------------------------------------------------------------------------
   1.0 회원가입 입력 폼
   -------------------------------------------------------------------------- */

/* 개인정보 취급방침 동의 */
.member-privacy{padding:15px; background:#eee; font-size:13px; line-height:23px;}

/* 개인정보 취급방침 체크박스 */
.member-privacy .check-group{position:relative; margin-top:30px;}

.member-privacy input[type="checkbox"]{display:none;}
.member-privacy input[type="checkbox"] + label{font-size:14px; padding-left:30px; cursor:pointer; height:inherit; line-height:inherit;}
.member-privacy input[type="checkbox"] + label::before{display:inline-block; left:0; top:50%; transform:translate(0, -50%); border:1px solid #ddd; width:23px; height:23px; box-sizing: border-box;}
.member-privacy input[type="checkbox"] + label::after{display:inline-block; width:15px; height:15px; left:4px; top:50%; transform:translate(0, -50%); background:#ddd}
.member-privacy input[type="checkbox"]:checked + label::after{background:#0ba29a}

/* 회원정보 입력폼 */
.form-group-container{border:1px solid #eee; padding:20px; background:#fcfcfc; border-top:2px solid #0091d5;}
.form-group{width:100%; display:inline-block; padding:10px 0; border-bottom:1px dashed #ddd;}
.form-group:last-child{border-bottom:0;}

/* 회원정보 입력 폼 라벨 */
.form-group > label{float:left; width:20%; padding-right:20px; text-align:right; height:inherit; line-height:inherit; font-size:13px; height:35px; line-height:35px; font-weight:700;}

/* 회원정보 입력 폼 INPUT */
.form-group .input-group-container{float:left; width:80%;}
.form-group .input-group-container > p{font-size:13px; color:#aaa; margin-top:10px;}

.form-group .input-group-container .input-group{position:relative; width:100%; display:table; height:35px; line-height:35px;}
.form-group .input-group-container .input-group span{display:table-cell; float:left; vertical-align:middle; background:#ddd; width:35px; font-size:13px; color:#333; text-align:center;}
.form-group .input-group-container .input-group input{display:table-cell; float:left; vertical-align:middle; padding:0 5px; height:inherit; line-height:inherit; background:#f3f3f3;}
.form-group .input-group-container .input-group select{display:table-cell; float:left; vertical-align:middle; padding:0 5px; height:inherit; line-height:inherit; background-color:#f3f3f3;}
.form-group .input-group-container .input-group button{display:table-cell; width:100px; background:#0ba29a; height:inherit; line-height:inherit; color:#fff; cursor:pointer;}
.form-group .input-group-container .input-group em{display:table-cell; float:left; vertical-align:middle; height:inherit; line-height:inherit; width:35px; text-align:center;}

/* 회원정보 입력 폼 INPUT 정렬 */
.form-group .input-group-container .input-group input[data-name="이름"]{width:calc(100% - 35px);}
.form-group .input-group-container .input-group input[data-name="아이디"]{width:calc(100% - 135px); }
.form-group .input-group-container .input-group input[data-name="비밀번호"]{width:calc(100% - 35px);}
.form-group .input-group-container .input-group input[data-name="새비밀번호"]{width:calc(100% - 35px);}
.form-group .input-group-container .input-group input[data-name="비밀번호 확인"]{width:calc(100% - 35px);}
.form-group .input-group-container .input-group input[data-name="휴대전화"]{width:calc(35% - 35px);}
.form-group .input-group-container .input-group input[data-name="이메일"]{width:calc(35% - 35px);}
.form-group .input-group-container .input-group input[data-name="우편번호"]{width:calc(100% - 135px); }
.form-group .input-group-container .input-group input[data-name="기본주소"]{width:calc(100% - 35px);}
.form-group .input-group-container .input-group input[data-name="상세주소"]{width:calc(100% - 35px);}

.form-group .input-group-container .input-group select[data-name="년"]{width:calc(50% - 70px);}
.form-group .input-group-container .input-group select[data-name="월"]{width:calc(25% - 35px);}
.form-group .input-group-container .input-group select[data-name="일"]{width:calc(25% - 35px);}
.form-group .input-group-container .input-group select[data-name="휴대전화"]{width:calc(30% - 35px);}
.form-group .input-group-container .input-group select[data-name="이메일"]{width:calc(30% - 5px); margin-left:5px;}

/* 회원정보 입력 폼 PLACEHOLDER 폰트 색상 */
.form-group .input-group-container .input-group input::placeholder{color:#aaa;}

/* 회원정보 입력 폼 체크박스 및 라디오버튼 */
.form-group .input-group-container .input-group .check-group,
.form-group .input-group-container .input-group .radio-group{position:relative; float:left; margin-right:20px;}

.form-group input[type="checkbox"]{display:none;}
.form-group input[type="checkbox"] + label{font-size:14px; padding-left:30px; cursor:pointer; height:inherit; line-height:inherit;}
.form-group input[type="checkbox"] + label::before{display:inline-block; left:0; top:50%; transform:translate(0, -50%); border:1px solid #ddd; width:23px; height:23px; box-sizing: border-box;}
.form-group input[type="checkbox"] + label::after{display:inline-block; width:15px; height:15px; left:4px; top:50%; transform:translate(0, -50%); background:#ddd}
.form-group input[type="checkbox"]:checked + label::after{background:#0ba29a}


.form-group input[type="radio"]{display:none;}
.form-group input[type="radio"] + label{font-size:14px; padding-left:30px; cursor:pointer; height:inherit; line-height:inherit;}
.form-group input[type="radio"] + label::before{display:inline-block; left:0; top:50%; transform:translate(0, -50%); border:1px solid #ddd; width:23px; height:23px; box-sizing: border-box;}
.form-group input[type="radio"] + label::after{display:inline-block; width:15px; height:15px; left:4px; top:50%; transform:translate(0, -50%); background:#ddd}
.form-group input[type="radio"]:checked + label::after{background:#0ba29a}

/* --------------------------------------------------------------------------
   3.0 회원가입 완료
   -------------------------------------------------------------------------- */
.join-finish{text-align:center; }
.join-finish h6{font-size:24px; font-weight:700; background:#f5f8fc; color:#222; padding:35px 0;}
.join-finish p{border:1px solid #eee; border-top:2px solid #0091d5; box-sizing:border-box; padding:50px; background:#f8f8f8; font-size:15px; line-height:25px;}
.join-finish p em{color:#0091d5; font-weight:700;}


#membership .membership-tab{width:100%; height:50px;}
#membership .membership-tab a{float:left; display:block; width:50%; height:50px; line-height:50px; text-align:center; background:#cbcbcb; color:#fff; font-size:15px; font-weight:700;}
#membership .membership-tab a.active{background:#0091d5}

/* --------------------------------------------------------------------------
   4.0 회원탈퇴
   -------------------------------------------------------------------------- */
.member-leave{}
.member-leave textarea{width:100%; max-width:100%; min-width:100%; height:200px; background:#fff; border:1px solid #eee; box-sizing:border-box; padding:5px;}
.member-leave .radio-group{position:relative; height:23px; line-height:23px; margin-bottom:7px;}
.member-leave .radio-group input[type="radio"]{display:none;}
.member-leave .radio-group input[type="radio"] + label{font-size:14px; padding-left:30px; cursor:pointer; height:inherit; line-height:inherit;}
.member-leave .radio-group input[type="radio"] + label::before{display:inline-block; left:0; top:50%; transform:translate(0, -50%); border:1px solid #ddd; width:23px; height:23px; box-sizing: border-box;}
.member-leave .radio-group input[type="radio"] + label::after{display:inline-block; width:15px; height:15px; left:4px; top:50%; transform:translate(0, -50%); background:#ddd}
.member-leave .radio-group input[type="radio"]:checked + label::after{background:#0ba29a}

/* --------------------------------------------------------------------------
   5.0 개인정보 취급방침 및 이용약관안내
   -------------------------------------------------------------------------- */
.agree,
.privacy{padding:15px; background:#eee; font-size:13px; line-height:23px; border-top:2px solid #0091d5;}