.gnb-menu .menu-0{
	display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 파이어폭스에서의 초기화 방법 */
input[type=number] {
    -moz-appearance: textfield;
}

.main-wrap {
	width: 100%;
	box-sizing: border-box;
	padding: 54px 0 97px;
	background-color: #EDF4FC;
}
.main-wrap .inner{
	width: 600px;
	margin: 0 auto;
	position: relative;
	box-sizing:border-box;
}
.main-wrap .inner > h2{
	padding-bottom: 40px;
	color: var(--color-static-black, #11151C);
	font-size: var(--font-size-4xl, 36px);
	font-style: normal;
	font-weight: 700;
	line-height: 140%; /* 50.4px */
}
.join-article {
	margin: 0 auto;
	box-sizing: border-box;
	max-width: 100%;
	padding: 48px 60px;
	border-radius: 16px;
	background-color: #fff;
}

.join-article h2 {
	width: 100%;
	color: #11151C;
	font-size: 24px;
	font-weight: 700;
	line-height: 150%;
}

.join-article > p {
	margin-top: 8px;
	width: 100%;
	color: #717D8E;
	font-size: 16px;
	font-weight: 500;
	line-height: 150%;
	text-align: left;
}

.form-wrap {
}

.join-member {
	box-sizing: border-box;
	position: relative;
}

.join-member + .join-member {
	margin-top: 40px;
	border-top: 1px solid #EDF4FC;
	padding-top: 40px;
}

.join-title {
	color: var(--Color-Text-black, #11151C);
	font-size: var(--font-size-xl, 26px);
	font-style: normal;
	font-weight: 700;
	line-height: 150%; /* 39px */
	padding-bottom: 36px;
}

.join-inform {

}

/* 기본정보 */
.basic-box li {
	margin-bottom: 40px;
}

.basic-box li:last-child {
	position: relative;
	margin-bottom: 0;
}

.basic-box h3 {
	color: var(--color-black-1000, #11151C);
	font-size: var(--font-size-md, 18px);
	font-style: normal;
	font-weight: 700;
	line-height: 150%; /* 27px */
	padding-bottom: 16px;
}

.user-input {
	display: block;
	position: relative;
	width: 100%;
}

.user-input input {
	box-sizing: border-box;
	border: 1px solid #D9E1EE;
	border-radius: 8px;
	width: 100%;
	height: 64px;
	line-height: 64px;
	padding: 0 20px;
	text-indent: 0;
	color: #11151C;
	font-size: 18px;
	font-weight: 500;
}

.user-input input:focus {
	border: 1.5px solid #11151C;
}

.user-input input::-webkit-input-placeholder {
	color: #C1C9D6;
	font-weight: 500;
}

.user-input input::-moz-input-placeholder {
	color: #C1C9D6;
	font-weight: 500;
}

.user-input input:-ms-input-placeholder {
	color: #C1C9D6;
	font-weight: 500;
}

.user-input input::placeholder {
	color: #C1C9D6;
	font-weight: 500;
}

/* .user-input 안에 비밀번호 규칙 안내문이 같이 있어 input 높이 기준으로 고정 */
.lock-btn.user-pw {
	top: 28px;
	right: 16px;
	transform: translateY(-50%);
}

.lock-btn.user-pw > button {
	font-size: 0;
}
/* !기본정보 */


/*선택항목*/
.join-radio li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.join-radio li:last-child {
	margin-bottom: 0;
}

.radio-wrap {
	position: relative;
	display: block;
	flex: 1;
	min-width: 0;
}

.radio-wrap input[type="radio"] {
	position: absolute;
	visibility: hidden;
}

.radio-wrap input[type="radio"]+label {
	display: block;
	position: relative;
	box-sizing: border-box;
	cursor: pointer;
	z-index: 5;
	color: var(--color-black-1000, #11151C);
	font-size: var(--font-size-md, 18px);
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 27px */
	padding: 4px 0 4px 32px;
}

.radio-wrap .check {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cg clip-path='url(%23clip0_10080_523)'%3E%3Cpath d='M13 0.5C19.9036 0.5 25.5 6.09644 25.5 13C25.5 19.9036 19.9036 25.5 13 25.5C6.09644 25.5 0.5 19.9036 0.5 13C0.5 6.09644 6.09644 0.5 13 0.5Z' stroke='%23D9E1EE'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_10080_523'%3E%3Crect width='26' height='26' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
}

.radio-wrap input[type="radio"]:checked~.check {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_10080_571)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 0.545456C18.3261 0.545456 23.4545 5.67383 23.4545 12C23.4543 18.326 18.326 23.4545 12 23.4545C5.67388 23.4545 0.545561 18.326 0.54541 12C0.54541 5.67383 5.67378 0.545456 12 0.545456ZM18.7105 7.32534C18.2941 6.93716 17.6424 6.95951 17.2541 7.37568L10.2616 14.8759L6.71118 11.4217C6.30309 11.0247 5.65066 11.0337 5.25363 11.4418C4.85665 11.8499 4.86569 12.5023 5.27377 12.8994L9.57817 17.0874C9.77679 17.2807 10.045 17.3861 10.322 17.3794C10.5992 17.3726 10.8623 17.2544 11.0514 17.0516L18.7619 8.78177C19.15 8.36533 19.1268 7.71355 18.7105 7.32534Z' fill='%2300CC88'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_10080_571'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
/* !가입경로 */


/* 서비스 약관 */
.join-terms {
	width: 100%;
}

.all-checkbox {
	box-sizing: border-box;
}

.terms-box {
	box-sizing: border-box;
	margin-top: 16px;
	padding-left: 20px;
}

.terms-box > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
}

.terms-li {
	position: relative;
	min-height: 26px;
	width: 100%;
}

/* 마케팅 수신 동의 하위 항목(SMS·이메일)만 한 줄에 나란히 */
.terms-li.sub-title ~ .terms-li {
	width: auto;
}

.terms-li.sub-title{
	color: var(--color-black-1000, #11151C);
	font-size: var(--font-size-sm, 16px);
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 24px */
}

.checkbox-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.checkbox-wrap input[type="checkbox"] {
	position: absolute;
	visibility: hidden;
}

.checkbox-wrap label {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 4px 0 4px 34px;
	cursor: pointer;
	z-index: 5;
	color: var(--color-black-1000, #11151C);
	font-size: var(--font-size-md, 18px);
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 27px */
}

.checkbox-wrap label.noti_all {
	color: var(--color-black-1000, #11151C);
	/* lg(18)/semibold */
	font-family: var(--font-family-pretendard, "Pretendard Variable");
	font-size: var(--font-size-lg, 20px);
	font-style: normal;
	font-weight: 600;
	line-height: 150%; /* 30px */
}

.terms-chk {
	position: absolute;
	top: 4px;
	left: 0;
	width: 26px;
	height: 26px;
	background-image: url("https://images.carvazo.com/carvazo/common/icon_checkbox_off.svg");
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
}

.checkbox-wrap input[type="checkbox"]:checked~.terms-chk {
	background-image: url("https://images.carvazo.com/carvazo/common/icon_checkbox_on.svg");
}

.all-chk {
	width: 24px;
	height: 24px;
}

.terms-detail {
	vertical-align: middle;
	font-size: 12px;
	color: #0fae6f;
	cursor: pointer;
}

.noti-choice {
	vertical-align: middle;
	font-size: 14px;
	color: #a9adb4;
}
/* !서비스약관 */


/*회원가입 btn*/

.join-submit {
	text-align: center;
}

.join-submit input {
	width: 100%;
	height: 56px;
	border-radius: 8px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 56px;
	text-align: center;
	background-color: #00CC88;
}

label.error {
	margin-top: 12px;
	color: var(--color-red-500, #FF644C);
	font-size: var(--font-size-sm, 16px);
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 24px */
	display: block;
	width: 100%;
}

/* 메시지가 비어 있을 때는 margin/height 도 잡지 않도록 */
label.error:empty {
	display: none;
}

.terms-li > label.error {
	font-size: 14px;
}

/* 약관 항목은 .checkbox-wrap 안에서 바로 아래 줄에 붙음 */
.terms-li label.error {
	margin-top: 0;
}

/* 비밀번호 작성 규칙 안내 (EEAZ-2219) */
.password-rule-guide{
	position: relative;
	box-sizing: border-box;
	margin-top: 12px;
	padding-left: 12px;
	width: 100%;
	color: var(--color-neutral-600, #717D8E);
	font-size: var(--font-size-sm, 16px);
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 24px */
	text-align: left;
}

.password-rule-guide::before{
	content: '';
	position: absolute;
	top: 10px;
	left: 2px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
}
.password-rule-guide:last-of-type{
	margin-top: 0;
}
/* 모카 배너 */
.promotion-banner{
	position: static;
	width: 100%;
	margin-top: 16px;
	padding: 12px 8px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	border-radius: 8px;
	background: #F5F8FC;
	backdrop-filter: blur(2px);
	box-sizing: border-box;
}
.promotion-banner .img-wrap{
	width: 60px;
	height: 60px;
}
.promotion-banner .img-wrap img{
	width: 100%;
}
.promotion-banner .text-wrap{
	color: #17191C;
	font-family: 'pretendard';
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
}
.promotion-banner .text-wrap b{
	color:#17191C;
	font-family: 'pretendard';
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%; /* 21px */
}
/* !모카 배너 */

.member-phone{
	display:flex;
	justify-content: space-between;
	gap: 8px;
}

.member-phone > input {
	flex: 1;
	min-width: 0;
}
.phone-num {
	position: relative;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	border: 1px solid #dee1e4;
	padding: 0 30px;
	width: 265px;
	height: 66px;
	border-radius: 3px;
	font-size: 0;
	line-height: 55px;
	text-align: center;
}

.phone-num input {
	display: inline-block;
	vertical-align: middle;
	width: calc((100% - 40px) / 3);
	margin-left: 20px;
	font-size: 20px;
	text-align: center;
	border:none;
}

.phone-num input:focus {
	border: none;
}

.phone-num input:first-of-type {
	margin-left: 0;
	width: 45px;
}

.phone-num::before,
.phone-num::after {
	content: " ";
	position: absolute;
	top: 31px;
	left: 84px;
	width: 10px;
	height: 1px;
	background-color: #a9adb4;
}

.phone-num::after {
	left: auto;
	right: 94px;
}

.certification {
	display: inline-block;
	vertical-align: top;
	margin-left: 1px;
}

.certification > input {
	border: none;
	width: 130px;
	height: 64px;
	line-height: 64px;
	text-align: center;
	border-radius: var(--Radius-8, 8px);
	background: var(--color-green-500, #0C8);
	color: var(--color-white-1000, #FFF);
	font-size: var(--font-size-md, 18px);
	font-style: normal;
	font-weight: 600;
}

/* .user-input input:focus 의 테두리가 버튼에도 걸려서 제외 */
.certification > input:focus,
.certi-input .certi-submit:focus {
	border: none;
}

/* 입력이 유효하기 전에는 비활성 (모바일 .certi-btn:disabled 와 동일) */
.certification > input:disabled,
.certi-input .certi-submit:disabled {
	background-color: var(--color-neutral-300, #C1C9D6);
}

.certi-num.non-pass {
	border-color: #FF644C;
}

/* 인증 완료 후 잠긴 입력창 */
.user-input input[type="text"]:disabled,
.user-input input[type="password"]:disabled {
	background: #F5F8FC;
	border: 1px solid #C1C9D6;
	color: #C1C9D6;
	-webkit-text-fill-color: #C1C9D6;
}
.certi-input {
	margin-top: 8px;
	display: none;
	gap: 8px;
	justify-content: space-between;
}

.certi-input .certi-num {
	display: inline-block;
	vertical-align: middle;
	height: 64px;
	box-sizing: border-box;
}

.certi-input .certi-submit {
	display: inline-block;
	width: 130px;
	height: 64px;
	border-radius: 8px;
	background-color: var(--color-green-500, #0C8);
	text-align: center;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
}

.number-notice{
	display: none;
	margin-top: 12px;
	text-align: left;
	color: var(--color-red-500, #FF644C);
	font-size: var(--font-size-sm, 16px);
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 24px */
}

.number-notice.pass{
	display: block;
	color: #00B277;
}

.number-notice.non-pass{
	display: block;
	color: #FF644C;
}
.join-article .recaptcha-message{
	padding: 40px 0;
	text-align: center;
	color: var(--color-neutral-300, #C1C9D6);
	font-size: var(--font-size-3xs, 13px);
	font-style: normal;
	font-weight: 500;
	line-height: 150%; /* 19.5px */
}
.recaptcha-message a{
	color: var(--color-neutral-300, #C1C9D6) !important;
	font-size: var(--font-size-3xs, 13px);
	font-style: normal;
	font-weight: 500;
	line-height: 150%;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}