@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%; max-width:800px; margin:0 auto 100px auto; text-align:center;}
#membership h4{position:relative; text-align:center; font-size:30px; font-weight:700; background:#fff url(/assets/img/common/theme/h4_bullets.png) no-repeat left 3px; background-size:20px; color:#222; padding:0 0 15px 25px; margin-bottom:25px; display:inline-block;}
#membership h4 + p{font-size:15px; font-weight:100; line-height:1.45; color:#111; margin-bottom:50px;}
#membership h4 + p em{display:block; font-size:17px; font-weight:700; margin-bottom:15px;}
#membership h4 + p em img{width:23px; display:inline-block; margin-right:5px; vertical-align:-5px;}
#membership h4 + p mark{background:none; color:#ff7e00;}

#membership .login-account{border-top:2px solid #9c1662; box-sizing:border-box; padding:25px 100px; background:#f8f8f8; text-align:left;}
#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-account button[type="submit"]{display:block; width:100%; height:45px; line-height:45px; text-align:center; font-size:17px; font-weight:700; color:#fff; background:#9c1662; cursor:pointer;}

#membership .login-btn{border-top:1px solid #ccc; box-sizing:border-box; padding:10px 100px; background:#f8f8f8;}

#membership .login-btn .login-btn-info{position:relative; text-align:left; margin:5px 0; font-size:13px; height:35px; line-height:35px; letter-spacing:-0.3px;}
#membership .login-btn .login-btn-info a{position:absolute; right:0; top:0; display:inline-block; font-weight:700; color:#fff; background:#a5a5a5; width:150px; text-align:center; height:35px; line-height:35px;}

@media(max-width:640px){
	#membership .login-account{padding:25px 10px;}
	#membership .login-btn{padding:15px 10px;}

	#membership h4 + p{font-size:13px; line-height:1.35;}
	#membership h4 + p em{font-size:15px;}
	#membership h4 + p em img{width:20px; vertical-align:-5px;}
}

@media(max-width:420px){
	#membership .login-btn .login-btn-info{font-size:11px;}
	#membership .login-btn .login-btn-info a{width:110px;}
}
/* --------------------------------------------------------------------------
   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}

#join-form{border-top:2px solid #9c1662;}

/* 회원정보 입력폼 */
.form-group-container{}
.form-group{position:relative; width:100%;}

/* 회원정보 입력 폼 라벨 */
.form-group > label{position:absolute; left:0; top:0; width:125px; height:100%; box-sizing:border-box; text-align:center; font-size:15px; line-height:35px; font-weight:700; padding-top:10px; background:#f8f8f8; border-bottom:1px solid #ccc;}

/* 회원정보 입력 폼 INPUT */
.form-group .input-group-container{padding:10px 10px 10px 135px; border-bottom:1px solid #ccc;}
.form-group .input-group-container > p{font-size:13px; color:#aaa; margin-top:10px; line-height:1.45;}

.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{float:left; vertical-align:middle; width:20px; font-size:13px; color:#333; text-align:center;}
.form-group .input-group-container .input-group input{float:left; vertical-align:middle; padding:0 5px; height:inherit; line-height:inherit; background:#fff; border:1px solid #ddd;}
.form-group .input-group-container .input-group select{float:left; vertical-align:middle; padding:0 5px; height:inherit; line-height:inherit; background-color:#fff; border:1px solid #ddd;}
.form-group .input-group-container .input-group button{float:left; width:100px; background:#a5a5a5; height:inherit; line-height:inherit; color:#fff; cursor:pointer;}
.form-group .input-group-container .input-group em{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(150px);}
.form-group .input-group-container .input-group input[data-name="단체명"]{width:calc(150px);}
.form-group .input-group-container .input-group input[data-name="아이디"]{width:calc(150px); border-right:0;}
.form-group .input-group-container .input-group input[data-name="비밀번호"]{width:calc(150px);}
.form-group .input-group-container .input-group input[data-name="새비밀번호"]{width:calc(150px);}
.form-group .input-group-container .input-group input[data-name="비밀번호 확인"]{width:calc(150px);}
.form-group .input-group-container .input-group input[data-name="휴대전화"]{width:calc(100px);}
.form-group .input-group-container .input-group input[data-name="이메일"]{width:calc(150px);}
.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(85px);}
.form-group .input-group-container .input-group select[data-name="이메일"]{width:calc(100px); 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:7px; border:1px solid #ddd; width:23px; height:23px; border-radius:23px; box-sizing: border-box;}
.form-group input[type="checkbox"] + label::after{display:inline-block; width:15px; height:15px; border-radius:15px; left:4px; top:11px; background:#ddd}
.form-group input[type="checkbox"]:checked + label::after{background:#ff7e00}


.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:7px; border:1px solid #ddd; width:23px; height:23px; border-radius:23px; box-sizing: border-box;}
.form-group input[type="radio"] + label::after{display:inline-block; width:15px; height:15px; border-radius:15px; left:4px; top:11px; background:#ddd}
.form-group input[type="radio"]:checked + label::after{background:#ff7e00}


@media(max-width:640px){
	.form-group > label{font-size:12px; width:100px;}

	.form-group .input-group-container{padding:10px 10px 10px 110px;}

	.form-group .input-group-container .input-group button{width:50%;}

	.form-group .input-group-container .input-group input[data-name="이름"]{width:calc(100%);}
	.form-group .input-group-container .input-group input[data-name="단체명"]{width:calc(100%);}
	.form-group .input-group-container .input-group input[data-name="아이디"]{width:calc(50%); border-right:0;}
	.form-group .input-group-container .input-group input[data-name="비밀번호"]{width:calc(100%);}
	.form-group .input-group-container .input-group input[data-name="새비밀번호"]{width:calc(100%);}
	.form-group .input-group-container .input-group input[data-name="비밀번호 확인"]{width:calc(100%);}
	.form-group .input-group-container .input-group input[data-name="휴대전화"]{width:calc(50% - 52.5px);}
	.form-group .input-group-container .input-group input[data-name="이메일"]{width:calc(50% - 10px);}


	.form-group .input-group-container .input-group select[data-name="휴대전화"]{width:calc(65px);}
	.form-group .input-group-container .input-group select[data-name="이메일"]{width:calc(100%); margin-left:0; margin-top:5px;}

	.form-group input[type="radio"] + label{font-size:12px; line-height:1.45;}
}


/* --------------------------------------------------------------------------
   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;}






/* 아이디 및 비밀번호 찾기 시작 */
.find-account{height:200px;padding-bottom:200px}

.find-account .find-id,
.find-account .find-pw{position:relative; float:left; display:inline-block; box-sizing:border-box; padding:25px; width:calc(50% - 10px); margin-right:20px; border-top:2px solid #9c1662; background:#f8f8f8;}

.find-account .find-id em,
.find-account .find-pw em{display:block; font-size:21px; font-weight:700; text-align:center; color:#111; padding:0 0 35px 0;}

.find-account .find-id{}
.find-account .find-pw{margin-right:0;}


.find-account .find-id button[data-name="본인인증"]{display:block; width:100%; height:50px; line-height:50px; text-align:center; color:#fff; background:#9c1762; font-size:15px;}

.find-account .find-pw label{display:inline-block; float:left; width:65px; height:50px; line-height:50px;}
.find-account .find-pw label + .input-group-container{display:inline-block; float:left; width:calc(100% - 65px); height:50px;}

.find-account .find-pw label + .input-group-container input[data-name="아이디"]{display:inline-block; float:left; width:calc(100% - 90px); height:50px; line-height:50px; text-align:center; margin-right:5px; background:#fff; box-sizing:border-box; padding:0 5px; border:1px solid #ddd; text-align:left;}
.find-account .find-pw label + .input-group-container button{display:inline-block; float:left; width:85px; height:50px; line-height:50px; text-align:center; color:#fff; background:#9c1762; font-size:15px;}

@media(max-width:640px){
	.find-account .find-id,
	.find-account .find-pw{float:none; width:100%; margin-right:0; padding:25px 10px;}

	.find-account .find-id{margin-bottom:10px;}
}

/* 아이디 및 비밀번호 찾기 끝 */


/* 실명인증 시작 */

.authorization{display:inline-block; width:100%;}
.authorization .autho-form{position:relative; float:left; display:inline-block; box-sizing:border-box;width:calc(50% - 10px); margin-right:20px; border-top:2px solid #9c1662; background:#f8f8f8;}
.authorization .autho-form:last-child{margin-right:0;}

.authorization .autho-form p{font-size:15px; text-align:center; padding:25px 0; border-bottom:1px solid #ccc; line-height:1.45;}

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

.authorization .autho-form .autho-btn{margin-bottom:25px;}
.authorization .autho-form .autho-btn button{display:inline-block; width:95px; height:50px; line-height:50px; text-align:center; color:#fff; background:#a5a5a5; font-size:15px;}
.authorization .autho-form .autho-btn a{display:inline-block; width:95px; height:50px; line-height:50px; text-align:center; color:#fff; background:#a5a5a5; font-size:15px;}
.authorization .autho-form .autho-btn button.active{background:#9c1762;}
.authorization .autho-form .autho-btn a.active{background:#9c1762;}

@media(max-width:640px){
	.authorization .autho-form{float:none; width:100%; margin-right:0; margin-bottom:10px;}

}
/* 실명인증 끝 */




#join-process{margin-bottom:50px;}
#join-process ul{display:inline-block; width:100%;}
#join-process ul li{position:relative; box-sizing:border-box; float:left; width:calc(25% - 15px); margin-right:20px; height:55px; line-height:55px; background:#e5e5e5; text-align:center; font-size:18px; color:#111;}
#join-process ul li.active{background:#ff7e00; color:#fff;}
#join-process ul li:last-child{margin-right:0;}
#join-process ul li::after{display:inline-block; right:-30px; top:8px; width:40px; height:40px; border-radius:40px; background:#fff url(/assets/img/member/web/theme/process_before.png) no-repeat center center; background-size:10px; z-index:1;}
#join-process ul li:last-child::after{display:none;}
#join-process ul li.active::after{background:#fff url(/assets/img/member/web/theme/process_after.png) no-repeat center center; background-size:10px;}
#join-process ul li span{}



.agreement{margin-bottom:10px; border-top:2px solid #9c1662; background:#f8f8f8; border-bottom:1px solid #ccc; padding:15px; height:200px; overflow-y:auto;}
.agreement em{display:block; font-weight:700; margin-bottom:10px;}



.agreement-check{display:inline-block; width:100%; margin-bottom:50px;}

.agreement-check .agreement-radio{position:relative; display:inline-block; float:left; margin-right:20px; margin-bottom:10px;}
.agreement-check .agreement-radio input[type="radio"]{display:none;}
.agreement-check .agreement-radio input[type="radio"] + label{display:block; position:relative;line-height:23px; font-size:15px; padding-left:30px; cursor:pointer;}
.agreement-check .agreement-radio input[type="radio"] + label::before{display:inline-block; left:0; top:0; border:1px solid #ddd; width:23px; height:23px; border-radius:23px; box-sizing: border-box;}
.agreement-check .agreement-radio input[type="radio"] + label::after{display:inline-block; width:15px; height:15px; border-radius:15px; left:4px; top:4px; background:#ddd}
.agreement-check .agreement-radio input[type="radio"]:checked + label::after{background:#ff7e00}
.agreement-check .agreement-radio input[type="radio"] + label + p{padding-left:30px; font-size:11px; line-height:1.35; color:#aaa;}

.leave-form .agreement {height:auto !important; text-align:left;}
.leave-form .agreement .agreement-check {margin:0;}
.leave-form .agreement-radio {margin:0;}
.leave-form .agreement-radio > div {padding:10px 0;}
.leave-form textarea {width:100%; max-width:100%; min-width:100%; height:150px; bbox-sizing:border-box; padding:5px; border:1px solid #cacaca; color:#222; font-size:12px; line-height:20px; background:#fff; resize:none;}

@media(max-width:640px){
	#join-process ul li{font-size:15px; width:calc(50% - 10px); margin-right:20px; margin-bottom:10px;}
	#join-process ul li:nth-child(even){margin-right:0;}
	#join-process ul li:nth-child(even)::after{display:none;}

	.agreement-check .agreement-radio input[type="radio"] + label{font-size:13px;}

}




#membership-result{width:100%; max-width:640px; margin:0 auto; box-sizing:border-box; background:#f8f8f8 url(/assets/img/common/theme/h4_bullets.png) no-repeat center 25px; background-size:25px; border-top:2px solid #9c1662; border-bottom:1px solid #ccc; padding:85px 15px 50px 15px; text-align:center;}
#membership-result > em{display:block; font-size:25px; font-weight:700; margin-bottom:30px;}
#membership-result p{font-size:17px; line-height:1.45; color:#111;}
#membership-result p em{color:#ff7e00;}

@media(max-width:640px){
	#membership-result > em{font-size:21px;}
	#membership-result p{font-size:13px;}

}