.login {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.login .div {
  background-color: #ffffff;
  width: 1440px;
  height: 1024px;
  position: relative;
}

.login .frame {
  display: flex;
  flex-direction: column;
  width: 400px;
  align-items: flex-start;
  gap: 19px;
  position: absolute;
  top: 359px;
  left: 878px;
}

.login .frame2 {
  display: flex;
  flex-direction: column;
  width: 400px;
  align-items: flex-start;
  gap: 19px;
  position: absolute;
  top: 100px;
  left: 878px;
}

.login .frame-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.login .frame-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.login .frame-4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.login .welcome-back {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Pretendard Variable-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--main-colorblack);
  font-size: 28px;
  text-align: center;
  letter-spacing: 0;
  line-height: 32px;
}

.login .please-log-in-to {
  position: relative;
  align-self: stretch;
  font-family: "Pretendard Variable-Regular", Helvetica;
  font-weight: 400;
  color: var(--main-colorblack);
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.08px;
  line-height: 20px;
}

.login .frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.login .input-standard {
  display: flex;
  height: 46px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--greyscale-grey-100);
  border-radius: 8px;
}

.login .email {
  position: relative;
  flex: 1;
  font-family: var(--subtitle-sub4-font-family);
  font-weight: var(--subtitle-sub4-font-weight);
  color: var(--greyscale-grey-600);
  font-size: var(--subtitle-sub4-font-size);
  letter-spacing: var(--subtitle-sub4-letter-spacing);
  line-height: var(--subtitle-sub4-line-height);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-style: var(--subtitle-sub4-font-style);
}

.login .frame-6 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 7.5px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.login .frame-7 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  flex: 0 0 auto;
}

.login .frame-8 {
  position: relative;
  width: 16px;
  height: 16px;
  background-image: url(/img/pc/login/check-empty.svg);
  background-size: 100% 100%;
}

.login .remember-me-wrapper {
  position: relative;
  width: 68px;
  height: 16px;
}

.login .remember-me {
  position: absolute;
  top: -1px;
  left: 0;
  font-family: "Pretendard Variable-Regular", Helvetica;
  font-weight: 400;
  color: var(--greyscalegrey-500);
  font-size: 13px;
  letter-spacing: -0.07px;
  line-height: 16px;
  white-space: nowrap;
}

.login .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Pretendard Variable-Regular", Helvetica;
  font-weight: 400;
  color: var(--greyscalegrey-500);
  font-size: 13px;
  text-align: right;
  letter-spacing: -0.07px;
  line-height: 16px;
  white-space: nowrap;
}

.login .button-filled {
  display: flex;
  height: 46px;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--main-colorprimary);
  border-radius: 8px;
}

.login .log-in {
  position: relative;
  width: fit-content;
  font-family: "Pretendard Variable-Medium", Helvetica;
  font-weight: 500;
  color: var(--main-colorwhite);
  font-size: 15px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.login .vector {
  position: relative;
  flex: 1;
  width: 400px;
  flex-grow: 1;
  object-fit: cover;
}

.login .group {
  position: relative;
  width: 157px;
  height: 16px;
  margin-bottom: -1.00px;
}

.login .or-continue-with {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Pretendard Variable-Regular", Helvetica;
  font-weight: 400;
  color: var(--greyscalegrey-500);
  font-size: 13px;
  text-align: center;
  letter-spacing: -0.07px;
  line-height: 16px;
  white-space: nowrap;
}

.login .or-continue-with-2 {
  position: absolute;
  top: 0;
  left: 108px;
  font-family: "Pretendard Variable-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--greyscale-grey-800);
  font-size: 13px;
  text-align: center;
  letter-spacing: -0.07px;
  line-height: 16px;
  white-space: nowrap;
}

.login .overlap-group-wrapper {
  position: absolute;
  width: 719px;
  height: 1024px;
  top: 0;
  left: 0;
}

.login .overlap-group {
  position: relative;
  width: 715px;
  height: 1024px;
  background-image: url(/img/pc/login/mask-group.png);
  background-size: 100% 100%;
  background-color: var(--variable-collection-blue-blue5);
}

.login .view {
  position: absolute;
  width: 182px;
  height: 33px;
  top: 964px;
  left: 51px;
  background-image: url(/img/pc/login/rectangle.png);
  background-size: 100% 100%;
}

.login .welcome-back-2 {
  top: 137px;
  left: 51px;
  font-family: "Pretendard Variable-Regular", Helvetica;
  position: absolute;
  font-weight: 400;
  color: var(--variable-collection-main-color-white);
  font-size: 40px;
  letter-spacing: 0;
  line-height: 65px;
  white-space: nowrap;
}

.login .p {
  top: 226px;
  left: 179px;
  font-family: "Pretendard Variable-Bold", Helvetica;
  position: absolute;
  font-weight: 400;
  color: var(--variable-collection-main-color-white);
  font-size: 40px;
  letter-spacing: 0;
  line-height: 65px;
  white-space: nowrap;
}

.login .span {
  font-weight: 700;
}

.login .text-wrapper-2 {
  font-family: "Pretendard Variable-Regular", Helvetica;
}

.login .line {
  width: 464px;
  top: 168px;
  left: 251px;
  position: absolute;
  height: 1px;
  object-fit: cover;
}

.login .img {
  width: 146px;
  top: 258px;
  left: 8px;
  position: absolute;
  height: 1px;
  object-fit: cover;
}