:root {
  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei",
    "Source Han Sans CN", sans-serif;
}
body {
	margin: 0 auto;
}

.main-container {
  overflow: hidden;
}

.main-container,
.main-container * {
  box-sizing: border-box;
}

input,
select,
textarea,
button {
  outline: 0;
}

.main-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #beige;
  overflow: hidden;
}
.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
.top {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 35px;
	position: relative;
	width: 495px;
	margin: 0 auto;
	margin-top: 235px;
	z-index: 16;
}
.logo {
  flex-shrink: 0;
  position: relative;
  width: 250px;
  height: 60.63px;
  background: url(/partner/images/login_logo.svg)
    no-repeat center;
  background-size: cover;
  z-index: 17;
}
.partners {
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  height: 62px;
  color: #007433;
  font-family: paybooc OTF, var(--default-font-family);
  font-size: 50px;
  font-weight: 700;
  line-height: 61.7px;
  text-align: left;
  white-space: nowrap;
  letter-spacing: -1.25px;
  z-index: 18;
}
.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: nowrap;
	gap: 100px;
	position: relative;
	width: 420px;
	margin: 0 auto;
	z-index: 3;
	margin-top: 100px;
}
.input-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 20px;
  position: relative;
  min-width: 0;
  z-index: 4;
}
.input-id {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 10px;
  position: relative;
  width: 420px;
  height: 59px;
  padding: 20px 20px 20px 20px;
  background: #f7f8fa;
  z-index: 5;
  overflow: hidden;
  border-radius: 8px;
  
}
.input_id {
  flex-shrink: 0;
  position: absolute;
  width: 420px;
  height: 59px;
  top: 0;
  left: 0;
  background: transparent;
  border: none;
  z-index: 7;
  outline: none;
  ime-mode:disabled;
  padding-left: 20px;
  font-size: 16px;
}
.input-placeholder {
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  height: 19px;
  color: #767676;
  font-family: Pretendard, var(--default-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  text-align: left;
  white-space: nowrap;
  letter-spacing: -0.4px;
  z-index: 6;
}
.input-pw-active {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 10px;
  position: relative;
  height: 59px;
  padding: 20px 20px 20px 20px;
  background: #ffffff;
  z-index: 8;
  overflow: hidden;
  border-radius: 8px;
}
.input_pw {
  flex-shrink: 0;
  position: absolute;
  width: 420px;
  height: 59px;
  top: 0;
  left: 0;
  background: transparent;
  border: none;
  z-index: 11;
  outline: none;
  padding-left: 20px;
  font-size: 16px;
}
.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 10px;
  position: relative;
  width: 21.692px;
  height: 19px;
  z-index: 9;
}
.password {
  flex-shrink: 0;
  position: relative;
  width: 21.692px;
  height: 5.093px;
  
  z-index: 10;
}
.btn-login {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 10px;
  position: relative;
  height: 61px;
  padding: 20px 20px 20px 20px;
  cursor: pointer;
  background: #222222;
  border: none;
  z-index: 12;
  border-radius: 8px;
}
.login-2 {
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  height: 21px;
  color: #ffffff;
  font-family: Pretendard, var(--default-font-family);
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
  text-align: left;
  white-space: nowrap;
  letter-spacing: -0.45px;
  z-index: 13;
}
.btn-join {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 10px;
  position: relative;
  min-width: 0;
  padding: 20px 40px 20px 40px;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #007433;
  z-index: 14;
  border-radius: 8px;
}
.register {
  flex-shrink: 0;
  flex-basis: auto;
  position: relative;
  height: 21px;
  color: #007433;
  font-family: Pretendard, var(--default-font-family);
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
  text-align: left;
  white-space: nowrap;
  letter-spacing: -0.45px;
  z-index: 15;
}
.modern-interior-conversation {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: url(/partner/images/login_bg.png)
    no-repeat center;
  background-size: cover;
  opacity: 0.64;
  z-index: 1;
}
.dim {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.67);
  z-index: 2;
  overflow: hidden;
}