@charset "euc-kr";

/* ===================================================================
   ÅëÇÕȸ¿ø°¡ÀÔ(join) MEXX ½ºÅ²
   ´ë»ó : /russel/member/join ~
   =================================================================== */

.input-basic { border-radius: 3px; border-color: var(--mexx-color-gray5); color: var(--mexx-color-navy); }
.input-basic::placeholder { color: var(--mexx-color-gray5); }
.input-basic:disabled { background: var(--mexx-color-gray5); color: var(--mexx-color-gray5); }
.input-basic:focus { outline: none; }
.is-active .input-basic, .input-basic:focus { border-color: var(--mexx-color-navy); }
.join-page .input-basic:disabled { border-radius: 3px; }
.join-field .input-basic:focus, .join-field select:focus { border-color: var(--mexx-color-navy); }

/* ¼­ºê ŸÀÌƲ ¹Ù */
.sub-header { padding: 160px 0 40px; background: var(--mexx-color-bg); border: 0; box-shadow: none; text-align: center; }
.sub-header .sub-header-back { display: none; }
.sub-header .title-wrap { text-align: center; }
.sub-header .sub-header-title { margin: 0; color: var(--mexx-color-navy); font-family: inherit; font-size: 32px; font-weight: 700; letter-spacing: -.5px; }

.join-line-btn { height: 58px; border-radius: 58px; }
.join-page .btn-line, .join-layer .btn-line { border-color: var(--mexx-color-navy); color: var(--mexx-color-navy); }

#mexx .title-wrap { justify-content: center; }
#mexx .sub-header-title, .mexx-sub-title { padding-top: 70px; margin-bottom: 36px; font-size: 28px; }

.join-step { max-width: 600px; }
.join-con { margin-top: 36px; max-width: 600px; gap: 36px; }
.join-title h4 { color: var(--mexx-color-bluegray2); font-weight: 300; margin-top: -23px; }
.join-brand { border-color: var(--mexx-color-bluegray3); border-radius: 10px; padding: 45px 0; }
.join-logos { gap: 11px; }
.join-logo img { height: 27px; }
.join-box { padding: 0; border-radius: 0; background: transparent; }
.join-box h2 { font-size: 18px; }
.join-types { margin-top: 24px; }
.join-type { height: 130px; border-color: var(--mexx-color-bluegray3); border-radius: 3px; padding: 0; display: flex; align-items: center; gap: 0; flex-direction: row; justify-content: center; line-height: 1; }
.join-type strong { font-weight: 700; font-size: 20px; }
.join-type strong span { font-weight: 400; }
.join-logo-row-top { gap: 34px; }
.join-logo-row-bottom { gap: 28px; }

.join-type .join-ico { display: none; }
.join-page .join-type:hover, .join-page .join-type:focus-visible, .join-page .join-type.is-active { border-color: var(--mexx-color-navy); outline: none; }
.join-page .join-type:hover strong, .join-page .join-type:focus-visible strong, .join-page .join-type.is-active strong { color: var(--mexx-color-navy); }

.join-type[data-mem-kind="0"] { border-color: var(--mexx-color-navy); }
.join-type[data-mem-kind="0"] strong { color: var(--mexx-color-navy); }

.join-terms-step .auth-card, .join-auth .auth-card, .join-info .auth-card { border: 0; padding: 0; }
.join-head { margin-bottom: 28px; }
.join-head h3 { font-weight: 700; font-size: 20px; }
.join-indicator li { width: 6px; height: 6px; background: var(--mexx-color-bluegray4); }
.join-indicator li.is-active { background: var(--mexx-color-navy); width: 40px; }
.join-allbox { padding: 27px 24px; background: var(--mexx-color-bluegray6); border: 1px solid var(--mexx-color-bluegray4); border-width: 1px 0; border-radius: 0; }
.chk-ui { width: 19px; height: 19px; }
.join-check .chk-txt { font-size: 16px; color: var(--mexx-color-bluegray0); font-weight: 300; }
.join-term-parent .join-check .chk-txt { font-size: 16px; color: var(--mexx-color-navy); font-weight: 400; }
.join-check .opt_color { color: var(--mexx-color-navy); font-weight: 300; }
.join-all .chk-txt { font-size: 16px; font-weight: 700; }
.join-allbox .noti { margin-top: 13px; font-size: 14px; line-height: 1.6; color: var(--mexx-color-bluegray0); font-weight: 300; }
.join-terms { padding: 0 24px 28px; margin-top: 22px; border-bottom: 1px solid var(--mexx-color-bluegray4); }
.join-term { padding: 6px 0; min-height: 24px; }
.join-term-parent.is-open { min-height: 24px; }
.join-subterms { padding: 12px 0 12px 35px; }
.join-subterms.is-open { gap: 4px; margin-bottom: 10px; }
.join-check .req_color { color: var(--mexx-color-orange); }
.join-subterms dt { color: var(--mexx-color-bluegray0); font-weight: 300; font-size: 14px; }
.join-view { color: var(--mexx-color-bluegray0); font-weight: 300; font-size: 12px; }
.join-check.no-check { font-size: 16px; color: var(--mexx-color-navy); padding-left: 31px;}
.join-btns { margin-top: 36px; }
.join-btn { height: 58px; border-radius: 58px; font-size: 16px; font-weight: 400; letter-spacing: 0; }
.join-page .btn-blue, .join-layer .btn-blue { border: 1px solid var(--mexx-color-navy); background: var(--mexx-color-navy); color: #fff !important; }

.join-tabs { gap: 0; height: 54px; border-bottom: 0; }
.join-tabs button { background: var(--mexx-color-bluegray5); color: var(--mexx-color-bluegray0); font-size: 14px; font-weight: 300; height: 54px; border-bottom: 0; border-radius: 0; }
.join-tabs button.is-active { border: 0; color: var(--mexx-color-white); font-weight: 500; background: var(--mexx-color-navy); }
.join-panel { padding-top: 28px; }
.join-field { margin-top: 16px; }
.join-page .auth-field label { font-size: 14px; font-weight: 500; color: var(--mexx-color-navy); }
.join-field .input-basic, .join-field select { border-color: var(--mexx-color-gray5); }

.rdo-ui { width: 16px; height: 16px; background: var(--mexx-color-bluegray3); }
.rdo-ui:after { width: 6px; height: 6px; }
.rdo-row input:checked + .rdo-ui { background: var(--mexx-color-navy); }
.rdo-txt { color: var(--mexx-color-bluegray2); }

.join-eye { right: 50px; }
.join-pass-check:before { border-color: var(--mexx-color-bluegray4); width: 6px; height: 12px; }
.join-pass-check.is-active:before { border-color: var(--mexx-color-navy); }

.join-form { padding-top: 0; }
.join-eye:before { content:""; display:block; width:20px; height:18px; background:url("data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2220%22%20viewBox%3D%220%200%2022%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M11%203.55C14.79%203.55%2018.17%205.68%2019.82%209.05C19.23%2010.27%2018.4%2011.32%2017.41%2012.17L18.82%2013.58C20.21%2012.35%2021.31%2010.81%2022%209.05C20.27%204.66%2016%201.55%2011%201.55C9.73%201.55%208.51%201.75%207.36%202.12L9.01%203.77C9.66%203.64%2010.32%203.55%2011%203.55ZM9.93%204.69L12%206.76C12.57%207.01%2013.03%207.47%2013.28%208.04L15.35%2010.11C15.43%209.77%2015.49%209.41%2015.49%209.04C15.5%206.56%2013.48%204.55%2011%204.55C10.63%204.55%2010.28%204.6%209.93%204.69ZM1.01%201.42L3.69%204.1C2.06%205.38%200.77%207.08%200%209.05C1.73%2013.44%206%2016.55%2011%2016.55C12.52%2016.55%2013.98%2016.26%2015.32%2015.73L18.74%2019.15L20.15%2017.74L2.42%200L1.01%201.42ZM8.51%208.92L11.12%2011.53C11.08%2011.54%2011.04%2011.55%2011%2011.55C9.62%2011.55%208.5%2010.43%208.5%209.05C8.5%209%208.51%208.97%208.51%208.92ZM5.11%205.52L6.86%207.27C6.63%207.82%206.5%208.42%206.5%209.05C6.5%2011.53%208.52%2013.55%2011%2013.55C11.63%2013.55%2012.23%2013.42%2012.77%2013.19L13.75%2014.17C12.87%2014.41%2011.95%2014.55%2011%2014.55C7.21%2014.55%203.83%2012.42%202.18%209.05C2.88%207.62%203.9%206.44%205.11%205.52Z%22%20fill%3D%22%236C6C7F%22%2F%3E%20%3C%2Fsvg%3E") center/20px 18px no-repeat; }
.join-eye.is-on:before { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2215%22%20viewBox%3D%220%200%2022%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M11%202C14.79%202%2018.17%204.13%2019.82%207.5C18.17%2010.87%2014.79%2013%2011%2013C7.21%2013%203.83%2010.87%202.18%207.5C3.83%204.13%207.21%202%2011%202ZM11%200C6%200%201.73%203.11%200%207.5C1.73%2011.89%206%2015%2011%2015C16%2015%2020.27%2011.89%2022%207.5C20.27%203.11%2016%200%2011%200ZM11%205C12.38%205%2013.5%206.12%2013.5%207.5C13.5%208.88%2012.38%2010%2011%2010C9.62%2010%208.5%208.88%208.5%207.5C8.5%206.12%209.62%205%2011%205ZM11%203C8.52%203%206.5%205.02%206.5%207.5C6.5%209.98%208.52%2012%2011%2012C13.48%2012%2015.5%209.98%2015.5%207.5C15.5%205.02%2013.48%203%2011%203Z%22%20fill%3D%22%236C6C7F%22%2F%3E%20%3C%2Fsvg%3E"); }
.join-ok { color: var(--mexx-color-orange); font-size: 14px; line-height: 1; margin-top: -4px; }
.join-ok:before { content:""; display:block; flex:none; width:13px; height:13px; background:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M5.55%208.8L9.51667%204.85L8.66667%204L5.55%207.1L4.13333%205.7L3.28333%206.55L5.55%208.8ZM6.4%2012.8C5.52222%2012.8%204.69444%2012.6333%203.91667%2012.3C3.13889%2011.9667%202.45833%2011.5083%201.875%2010.925C1.29167%2010.3417%200.833333%209.66111%200.5%208.88333C0.166667%208.10555%200%207.27778%200%206.4C0%205.51111%200.166667%204.68056%200.5%203.90833C0.833333%203.13611%201.29167%202.45833%201.875%201.875C2.45833%201.29167%203.13889%200.833333%203.91667%200.5C4.69444%200.166667%205.52222%200%206.4%200C7.28889%200%208.11944%200.166667%208.89167%200.5C9.66389%200.833333%2010.3417%201.29167%2010.925%201.875C11.5083%202.45833%2011.9667%203.13611%2012.3%203.90833C12.6333%204.68056%2012.8%205.51111%2012.8%206.4C12.8%207.27778%2012.6333%208.10555%2012.3%208.88333C11.9667%209.66111%2011.5083%2010.3417%2010.925%2010.925C10.3417%2011.5083%209.66389%2011.9667%208.89167%2012.3C8.11944%2012.6333%207.28889%2012.8%206.4%2012.8ZM6.4%2011.6C7.84444%2011.6%209.07222%2011.0944%2010.0833%2010.0833C11.0944%209.07222%2011.6%207.84444%2011.6%206.4C11.6%204.95556%2011.0944%203.72778%2010.0833%202.71667C9.07222%201.70556%207.84444%201.2%206.4%201.2C4.95556%201.2%203.72778%201.70556%202.71667%202.71667C1.70556%203.72778%201.2%204.95556%201.2%206.4C1.2%207.84444%201.70556%209.07222%202.71667%2010.0833C3.72778%2011.0944%204.95556%2011.6%206.4%2011.6Z%22%20fill%3D%22%23EA561C%22%2F%3E%20%3C%2Fsvg%3E") center/13px 13px no-repeat; }
.join-page .btn-gray, .join-layer .btn-gray { border: 1px solid var(--mexx-color-navy); color: var(--mexx-color-navy) !important; background: #fff; }

/* ȸ¿ø°¡ÀÔ ³»¿ª Æ˾÷ (.join-layer-pop) */
.join-layer-pop { width: 600px; padding: 40px; border-radius: 0; }
.join-layer-head h4 { color: var(--mexx-color-navy); font-size: 20px; font-weight: 500; }
.join-layer-close:before, .join-layer-close:after { background: var(--mexx-color-bluegray1); width: 17px; }
.join-layer-copy { margin-top: 30px; font-weight: 300; color: var(--mexx-color-bluegray2); line-height: 1.5; }
.join-layer-copy strong { color: var(--mexx-color-navy); font-size: 16px; font-weight: 300; }
.join-layer-copy span { font-weight: 300; font-size: inherit; display: inline; }
.join-layer-copy span#joinMemberName { font-weight: 700; }

.join-member-list { margin-top: 12px; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; border-radius: 0; }
.join-member-list .rdo-row { min-height: 42px; padding: 0 16px; border: 1px solid var(--mexx-color-gray5); border-radius: 3px; position: relative; margin-left: 30px; }
.join-member-list .rdo-row:first-child { border-top: 1px solid var(--mexx-color-gray5); }
.join-member-date { color: var(--mexx-color-bluegray2); font-size: 12px; }

.join-layer-btns { gap: 14px; display: flex; justify-content: center; }
.join-layer-btns .btn { height: 44px; border-radius: 9999px; font-weight: 300; width: 120px; }

.join-layer .btn-blue { background: var(--mexx-color-navy); border-color: var(--mexx-color-navy); }
.join-layer .btn-line { border-color: var(--mexx-color-navy); color: var(--mexx-color-navy) !important; }

.join-member-list .rdo-ui { width: 18px; height: 18px; background: var(--mexx-color-white); border: 1px solid var(--mexx-color-gray5); position: absolute; top: 50%; left: -30px; margin-top: -10px; }
.join-member-list .rdo-ui:after { width: 8px; height: 8px; background: var(--mexx-color-bluegray3); }
.join-member-list .rdo-row input:checked + .rdo-ui { background: var(--mexx-color-white); }
.join-member-list .rdo-row input:checked + .rdo-ui::after { background: var(--mexx-color-navy); }

.join-complete .join-card { border: 0; padding: 0; background: none; }
.join-complete-txt { border: 0; padding: 50px 10px; background: var(--mexx-color-bluegray6); width: 100%; gap: 15px; }
.join-complete-main { color: var(--mexx-color-navy); }
.join-complete-btns { gap: 14px; }
.join-complete-txt p { font-size: 14px; color: var(--mexx-color-bluegray0); line-height: 1.5; }
.join-complete-ico { display: block; width: 40px; height: 32px; margin: 0 0 10px; background: url("data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2232%22%20viewBox%3D%220%200%2040%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M0%2031.1V26.4C0%2025.2667%200.283333%2024.225%200.85%2023.275C1.41667%2022.325%202.26667%2021.6%203.4%2021.1C5.8%2020.0333%208%2019.2667%2010%2018.8C12%2018.3333%2014%2018.1%2016%2018.1C16.9667%2018.1%2017.9917%2018.1583%2019.075%2018.275C20.1583%2018.3917%2021.2667%2018.6%2022.4%2018.9L19.95%2021.35C19.2833%2021.2833%2018.625%2021.225%2017.975%2021.175C17.325%2021.125%2016.6667%2021.1%2016%2021.1C14.0667%2021.1%2012.3083%2021.275%2010.725%2021.625C9.14167%2021.975%207.1%2022.7%204.6%2023.8C4.03333%2024.0667%203.625%2024.45%203.375%2024.95C3.125%2025.45%203%2025.9333%203%2026.4V28.1H18.95L21.95%2031.1H0ZM27.25%2031.9L20.2%2024.85L22.3%2022.75L27.25%2027.7L37.9%2017.05L40%2019.15L27.25%2031.9ZM10.6%2012.9C9.2%2011.5%208.5%209.7%208.5%207.5C8.5%205.3%209.2%203.5%2010.6%202.1C12%200.7%2013.8%200%2016%200C18.2%200%2020%200.7%2021.4%202.1C22.8%203.5%2023.5%205.3%2023.5%207.5C23.5%209.7%2022.8%2011.5%2021.4%2012.9C20%2014.3%2018.2%2015%2016%2015C13.8%2015%2012%2014.3%2010.6%2012.9ZM19.225%2010.725C20.075%209.875%2020.5%208.8%2020.5%207.5C20.5%206.2%2020.075%205.125%2019.225%204.275C18.375%203.425%2017.3%203%2016%203C14.7%203%2013.625%203.425%2012.775%204.275C11.925%205.125%2011.5%206.2%2011.5%207.5C11.5%208.8%2011.925%209.875%2012.775%2010.725C13.625%2011.575%2014.7%2012%2016%2012C17.3%2012%2018.375%2011.575%2019.225%2010.725Z%22%20fill%3D%22%23051730%22%2F%3E%20%3C%2Fsvg%3E") center/40px 32px no-repeat; }

@media (max-width:1199px) {
	.sub-header { padding: 120px 0 32px; }
	.join-title h4 { margin-top: -20px; }
}

@media (max-width:767px) {
	#mexx .title-wrap { padding-top: 40px; }
	#mexx .sub-header-title, .mexx-sub-title { font-size: 24px; /* margin-bottom: 6px; */ padding-top: 0; margin-bottom: 32px; }
	.join-step { padding: 0 20px 0; max-width: none; }
	.join-title h3 { display: none !important; }
	.join-title h4 { margin-top: -22px; }
	.sub-header { padding: 90px 0 28px; }
	.sub-header .sub-header-title { font-size: 24px; }
	.join-type { height: 100px; }
	.join-logos { gap: 20px; }
	.join-brand { padding: 29px 0; }
	.join-logo-row-top { gap: 24px; }
	.join-logo-row-bottom { gap: 20px; }
	.join-logo img { height: 20px; }
	.join-box h2 { font-size: 14px; }
	.join-type strong { font-size: 16px; }

	.join-head h3 { font-size: 16px; }
	.join-allbox { padding: 28px 20px; }
    .join-terms{ padding: 0 20px 28px; }
	.join-all .chk-txt { font-size: 14px; }
	.join-allbox .noti { font-size: 12px; }
	.join-term-parent .join-check .chk-txt { font-size: 14px; }
	.join-check.no-check { font-size: 14px; }
	.join-check .chk-txt { font-size: 14px; }
	.join-subterms dt { font-size: 12px; }
	.join-view { font-size: 10px; }
	.join-btns { margin-top: 32px; }

	.join-tabs { height: 40px; }
	.join-tabs button { font-size: 12px; height: 40px; }
	.join-page .auth-field label { font-size: 12px; }

	.join-layer-pop { padding: 20px; }
	.join-layer-copy { margin-top: 20px; font-size: 14px; }
	.join-layer-copy strong { font-size: 14px; }
	.join-layer-head h4 { font-size: 16px; }

	.join-complete-main { font-size: 16px; }
	.join-complete-txt p { font-size: 12px; }
	.join-complete-btns { padding: 0; }
}