.m-01-01,
.m-01-01 * {
  box-sizing: border-box;
}

button {
  cursor: pointer;
}

.m-01-01 {
  background: #ffffff;
  padding: 50px 0px 50px 0px;
  display: flex;
  flex-direction: column;
  gap: 81px;
  align-items: center;
  justify-content: center;
  height: 852px;
  min-width: 390px;
  max-width: 1210px;
  min-height: 852px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
.frame-1000001179 {
  background: var(--tt);
  padding: 5px 15px 5px 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
  min-width: 390px;
  max-width: 1210px;
  position: relative;
  overflow: hidden;
}
.frame-1000001175 {
  background: #ffffff;
  padding: 0px 20px 0px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 390px;
  height: 50px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.logo-maja-241103-1 {
  align-self: stretch;
  flex-shrink: 0;
  width: 79px;
  position: relative;
  object-fit: cover;
}
.logo-maja-241103-1-4 {
  flex-shrink: 0;
  width: 227.39px;
  height: 50px;
  position: relative;
  object-fit: cover;
}
._01 {
  background: #ffffff;
  border-radius: 5px;
  border-style: solid;
  border-color: var(--tt, #f2f2f2);
  border-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 360px;
  position: relative;
  box-shadow: var(---box-shadow, 2px 2px 2px 0px rgba(38, 48, 73, 0.3));
  overflow: hidden;
  z-index: 10;
}

/* 창 크기가 줄어들 때 적용 */
@media (max-width: 768px) {
  ._01 {
    position: relative; /* 위치를 유지 */
    z-index: 100; /* 우선순위를 높여 가장 위로 */
  }

  .frame-1000001175 {
    position: relative; /* 겹칠 가능성이 있는 다른 요소에도 위치 설정 */
    z-index: 1; /* 우선순위를 낮춰 아래로 */
  }
}

.frame-1000000957 {
  border-radius: 5px;
  padding: 7px 5px 7px 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.component-20 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  position: relative;
}
.frame-1000000948 {
  background: var(--base, #ffffff);
  border-radius: 15px;
  border-style: solid;
  border-color: var(--main, #263049);
  border-width: 1px;
  padding: 4px 10px 4px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  box-shadow: var(---box-shadow, 2px 2px 2px 0px rgba(38, 48, 73, 0.3));
}
._1 {
  color: var(--main, #263049);
  text-align: left;
  font-family: var(--00-font-family, "Inter-Bold", sans-serif);
  font-size: var(--00-font-size, 18px);
  letter-spacing: var(--00-letter-spacing, 0.5em);
  font-weight: var(--00-font-weight, 700);
  position: relative;
  width: 9px;
}
.div {
  color: var(--main, #263049);
  text-align: left;
  font-family: var(--03-font-family, "Inter-Bold", sans-serif);
  font-size: var(--03-font-size, 8px);
  letter-spacing: var(--03-letter-spacing, 0.5em);
  font-weight: var(--03-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.component-21 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  position: relative;
}
.frame-1000000953 {
  background: var(--line, #dbdcde);
  border-radius: 15px;
  border-style: solid;
  border-color: var(--main-01, #a3a7c8);
  border-width: 1px;
  padding: 4px 9px 4px 9px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  box-shadow: var(---box-shadow, 2px 2px 2px 0px rgba(38, 48, 73, 0.3));
}
._2 {
  color: var(--main-01, #a3a7c8);
  text-align: left;
  font-family: var(--00-font-family, "Inter-Bold", sans-serif);
  font-size: var(--00-font-size, 18px);
  letter-spacing: var(--00-letter-spacing, 0.5em);
  font-weight: var(--00-font-weight, 700);
  position: relative;
  width: 12px;
}
.div2 {
  color: var(--main-01, #a3a7c8);
  text-align: left;
  font-family: var(--03-font-family, "Inter-Bold", sans-serif);
  font-size: var(--03-font-size, 8px);
  letter-spacing: var(--03-letter-spacing, 0.5em);
  font-weight: var(--03-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.component-22 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  position: relative;
}
.frame-1000000951 {
  background: var(--line, #dbdcde);
  border-radius: 15px;
  border-style: solid;
  border-color: var(--main-01, #a3a7c8);
  border-width: 1px;
  padding: 4px 9px 4px 9px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  box-shadow: var(---box-shadow, 2px 2px 2px 0px rgba(38, 48, 73, 0.3));
}
._3 {
  color: var(--main-01, #a3a7c8);
  text-align: left;
  font-family: var(--00-font-family, "Inter-Bold", sans-serif);
  font-size: var(--00-font-size, 18px);
  letter-spacing: var(--00-letter-spacing, 0.5em);
  font-weight: var(--00-font-weight, 700);
  position: relative;
  width: 12px;
}
.component-23 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  position: relative;
}
.frame-1000000952 {
  background: var(--line, #dbdcde);
  border-radius: 15px;
  border-style: solid;
  border-color: var(--main-01, #a3a7c8);
  border-width: 1px;
  padding: 4px 8px 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  box-shadow: var(---box-shadow, 2px 2px 2px 0px rgba(38, 48, 73, 0.3));
}
._4 {
  color: var(--main-01, #a3a7c8);
  text-align: left;
  font-family: var(--00-font-family, "Inter-Bold", sans-serif);
  font-size: var(--00-font-size, 18px);
  letter-spacing: var(--00-letter-spacing, 0.5em);
  font-weight: var(--00-font-weight, 700);
  position: relative;
  width: 13px;
}
.component-24 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  position: relative;
}
.frame-1000000955 {
  background: var(--line, #dbdcde);
  border-radius: 15px;
  border-style: solid;
  border-color: var(--main-01, #a3a7c8);
  border-width: 1px;
  padding: 4px 9px 4px 9px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  box-shadow: var(---box-shadow, 2px 2px 2px 0px rgba(38, 48, 73, 0.3));
}
._5 {
  color: var(--main-01, #a3a7c8);
  text-align: left;
  font-family: var(--00-font-family, "Inter-Bold", sans-serif);
  font-size: var(--00-font-size, 18px);
  letter-spacing: var(--00-letter-spacing, 0.5em);
  font-weight: var(--00-font-weight, 700);
  position: relative;
  width: 12px;
}
.component-25 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  position: relative;
}
.frame-1000000956 {
  background: var(--line, #dbdcde);
  border-radius: 15px;
  border-style: solid;
  border-color: var(--main-01, #a3a7c8);
  border-width: 1px;
  padding: 4px 9px 4px 9px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  box-shadow: var(---box-shadow, 2px 2px 2px 0px rgba(38, 48, 73, 0.3));
}
._6 {
  color: var(--main-01, #a3a7c8);
  text-align: left;
  font-family: var(--00-font-family, "Inter-Bold", sans-serif);
  font-size: var(--00-font-size, 18px);
  letter-spacing: var(--00-letter-spacing, 0.5em);
  font-weight: var(--00-font-weight, 700);
  position: relative;
  width: 12px;
}
.div3 {
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
  height: 493px;
  min-width: 390px;
  max-width: 1210px;
  position: relative;
}
.frame-1000000972 {
  padding: 10px 0px 10px 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 390px;
  position: relative;
}
.div4 {
  color: var(--main, #263049);
  text-align: left;
  font-family: var(--h6-font-family, "Inter-Bold", sans-serif);
  font-size: var(--h6-font-size, 20px);
  letter-spacing: var(--h6-letter-spacing, 0.05em);
  font-weight: var(--h6-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-1000000971 {
  padding: 5px 0px 5px 0px;
  display: flex;
  flex-direction: row;
  gap: 11px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 390px;
  position: relative;
}
.check-l {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}
.checkbox-unchecked {
  border-radius: 50%;
  border-style: solid;
  border-color: var(--main-02, #3a528d);
  border-width: 1px;
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  appearance: none;
  cursor: pointer;
}

label {
  cursor: pointer;
}

.checkbox-unchecked:checked {
  background: var(--main-02);
  border: none;
}

.div5 {
  color: var(--main, #263049);
  text-align: left;
  font-family: var(--b-font-family, "Inter-Bold", sans-serif);
  font-size: var(--b-font-size, 16px);
  letter-spacing: var(--b-letter-spacing, 0.05em);
  font-weight: var(--b-font-weight, 700);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.frame-1000000987 {
  padding: 5px 0px 5px 0px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 390px;
  height: 35px;
  position: relative;
}
.line-20 {
  margin-top: -0.5px;
  border-style: solid;
  border-color: var(--main, #263049);
  border-width: 0.5px 0 0 0;
  flex-shrink: 0;
  width: 350px;
  height: 0px;
  position: relative;
}
.frame-1000000979 {
  padding: 0px 20px 0px 20px;
  display: flex;
  flex-direction: row;
  row-gap: 225px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1000000974 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.div6 {
  color: var(--main, #263049);
  text-align: left;
  font-family: var(--r-font-family, "Inter-Regular", sans-serif);
  font-size: var(--r-font-size, 12px);
  font-weight: var(--r-font-weight, 400);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.line-19 {
  margin-top: -0.5px;
  border-style: solid;
  border-color: var(--main, #263049);
  border-width: 0.5px 0 0 0;
  flex-shrink: 0;
  width: 350px;
  height: 0px;
  position: relative;
}
.frame-10000009792 {
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 390px;
  position: relative;
}
.check-s {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  position: relative;
}
.moja {
  color: var(--main, #263049);
  text-align: left;
  font-family: var(--r-font-family, "Inter-Regular", sans-serif);
  font-size: var(--r-font-size, 12px);
  font-weight: var(--r-font-weight, 400);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.expand-right-light {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.frame-1000000984 {
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 390px;
  position: relative;
}
.div7 {
  color: var(--main, #263049);
  text-align: left;
  font-family: var(--r-font-family, "Inter-Regular", sans-serif);
  font-size: var(--r-font-size, 12px);
  font-weight: var(--r-font-weight, 400);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.expand-right-light2 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.frame-1000000980 {
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 390px;
  position: relative;
}
.frame-1000000975 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.expand-right-light3 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.frame-1000000981 {
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 390px;
  position: relative;
}
.frame-1000000976 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
._32 {
  color: var(--main, #263049);
  text-align: left;
  font-family: var(--r-font-family, "Inter-Regular", sans-serif);
  font-size: var(--r-font-size, 12px);
  font-weight: var(--r-font-weight, 400);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.expand-right-light4 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.frame-1000000982 {
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 390px;
  position: relative;
}
.frame-1000000977 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.expand-right-light5 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.frame-1000000983 {
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 390px;
  position: relative;
}
.frame-1000000978 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.expand-right-light6 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  overflow: visible;
}
.frame-1000000962 {
  padding: 0px 15px 0px 15px;
  display: flex;
  flex-direction: row;
  gap: 196px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 35px;
  position: relative;
  overflow: hidden;
}
.frame-1000000933 {
  width: 58px;
  height: 32px;
  background: var(--base, #ffffff);
  border-radius: 12px;
  border-style: solid;
  border-color: var(--main-01, #a3a7c8);
  border-width: 1.5px;
  /* padding: 5px 10px 5px 10px; */
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: var(---box-shadow, 2px 2px 2px 0px rgba(38, 48, 73, 0.3));
  overflow: hidden;
}
.vector-9 {
  border-radius: 0px;
  flex-shrink: 0;
  width: 6px;
  height: 12px;
  position: relative;
  overflow: visible;
}
.div8 {
  width: 100%;
  height: 100%;
  color: var(--main, #263049);
  text-align: center;
  font-family: var(--15b-font-family, "Inter-Black", sans-serif);
  font-size: var(--15b-font-size, 15px);
  font-weight: var(--15b-font-weight, 900);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.component-26 {
  width: 58px;
  height: 32px;
  background: var(--base);
  border-radius: 12px;
  border-style: solid;
  border-color: var(--main-01, #a3a7c8);
  border-width: 1.5px;
  /* padding: 5px 10px 5px 10px; */
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow: var(---box-shadow, 2px 2px 2px 0px rgba(38, 48, 73, 0.3));
  overflow: hidden;
}
.div9 {
  width: 100%;
  height: 100%;
  color: var(--main);
  text-align: center;
  font-family: var(--15b-font-family, "Inter-Black", sans-serif);
  font-size: var(--15b-font-size, 15px);
  font-weight: var(--15b-font-weight, 900);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vector-92 {
  border-radius: 0px;
  flex-shrink: 0;
  width: 6px;
  height: 12px;
  position: relative;
  overflow: visible;
}

.component-26:hover {
  background: var(--main);
}

.component-26:hover .div9 {
  color: var(--base);
}

.component-26:hover .vector-92 {
  content: url("/img/M-S-SignUp/vector-91.svg");
}

.frame-1000000933:hover {
  background-color: var(--main);
}

.frame-1000000933:hover .div8 {
  color: var(--base);
}

.frame-1000000933:hover .vector-9 {
  content: url("/img/M-S-SignUp/vector-9.svg");
}

/* 기본 체크박스 숨기기 */
.checkbox-unchecked {
  display: none;
}

/* 커스텀 체크박스 스타일 */
.custom-checkbox {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  position: relative;
}

/* 체크 상태에서 커스텀 스타일 */
.checkbox-unchecked:checked + .custom-checkbox {
  background-color: var(--main-02);
  border-color: var(--main-02);
}

.checkbox-unchecked:checked + .custom-checkbox::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 커스텀 체크박스 스타일 */
.custom-checkbox2 {
  display: inline-block;
  width: 100%;
  height: 100%;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  position: relative;
}

/* 체크 상태에서 커스텀 스타일 */
.checkbox-unchecked:checked + .custom-checkbox2 {
  background-color: var(--main-02);
  border-color: var(--main-02);
}

.checkbox-unchecked:checked + .custom-checkbox2::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 3px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}