.login_wrap::placeholder{
  font-size:1rem !important;
  color: var(--gray-200) !important;
  opacity: 0.5  !important;
}
.login_wrap::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size:1rem !important;
  color: var(--gray-200) !important;
  opacity: 0.5  !important;
}
.login_wrap::-moz-placeholder { /* Firefox 19+ */
  font-size:1rem !important;
  color: var(--gray-200) !important;
  opacity: 0.5  !important;
}
.login_wrap:-ms-input-placeholder { /* IE 10+ */
  font-size:1rem !important;
  color: var(--gray-200) !important;
  opacity: 0.5  !important;
}
.login_wrap:-moz-placeholder { /* Firefox 18- */
  font-size:1rem !important;
  color: var(--gray-200) !important;
  opacity: 0.5  !important;
}
.login_wrap {
  display: flex;
  justify-content: center;
}
.form {
	width:100%;
  max-width: 800px;
  display: flex;
  gap: 10rem;
  justify-content: center;
  align-items: flex-start;
	margin: 0px auto;
	padding: 5rem;
	text-align: left;
}
.form .pic{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	width:50%;
	padding:0px 0px;
	margin: 0;
  font-size: 1.4rem;
	text-align: center;
}
.form .pic img{
	width: 100%;
}
.form .tt{
  font-weight: 800;
	font-size: 3.5rem;
	color: var(--primary);
}
.form .txt{
  font-size: 0.9rem;
  color:dimgray;
	text-align: left;
	padding: 0px;
	margin: 0px 0px 10px 0px; 
}
.form .info{
  display: flex;
  flex-direction: column;
  gap:1rem;
  width: 100%;
}
.form ul{
  display: flex;
  align-items: center;
  gap:1rem;
	width:100%;
	margin:0px;
	padding:0px 0px;
}
.form ul li{
  width: 100%;
	margin:0;
	padding:0;
	font-weight: bold;
}
.form ul li.t{
  width: 20%;
  font-size: 1.2rem;
}
.form ul li input{
	margin: 0px;
	padding: 1.5rem 1rem;
	width: 100%;
	font-size: 1.6rem;
	outline: 0 !important;
	border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: 2px;
	box-shadow: none;
	outline: 0 !important;
}
.form ul li input.chk{
	padding: 5px;
	width: 15px;
	height: 15px;
}
.form ul li input:focus {
	border: 1px solid rgba(var(--primary-rgb), 0.5);
	box-shadow: none;
	outline: 0 !important;
}
.form ul li input:-webkit-autofill,
.form ul li input:-webkit-autofill:hover,
.form ul li input:-webkit-autofill:focus,
.form ul li input:-webkit-autofill:active {
	background-color: rgb(253, 242, 242) !important;
  transition: background-color 5000s ease-in-out 0s;
}
.form ul li input:autofill,
.form ul li input:autofill:hover,
.form ul li input:autofill:focus,
.form ul li input:autofill:active {
	/* background-color: rgb(253, 242, 242) !important; */
  transition: background-color 5000s ease-in-out 0s;
}



.line_top {
	border-top: 1px solid #f4f4f4;
}


.bt_login {
	width: 100%;
	color: #ffffff;
	font-size:2rem;
	font-weight: 500;
	margin-top: 10px;
	padding: 15px 0px;
	background-color: var(--primary);
	border:1px solid var(--primary);
	cursor:pointer;
  border-radius: 2px;
}
.bt_login:focus, .bt_login:hover {
	color: #ffffff;
	background-color: var(--primary-dark);
	border:1px solid var(--primary-dark);
	outline: 0;
}

.bt_join {
  display: inline-flex;
  justify-content: center;
	width: 100%;
	color: var(--primary);
	font-size:2rem;
	font-weight: 500;
	padding: 15px 0px;
	border:1px solid var(--primary);
	cursor:pointer;
  border-radius: 2px;
}
.bt_join:focus, .bt_join:hover {
	color: var(--primary);
	border:1px solid var(--primary-dark);
	outline: 0;
}



@media (max-width: 767.98px) {
	.form {
    flex-direction: column;
		max-width: 100%;
    gap: 5rem;
	}
  .form .pic{
    width: 100%;
  }
}



.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
.modal-content {
	position: relative;
  background: #fff;
  margin: 15% auto;
  padding: 20px;
  width: 300px;
  border-radius: 10px;
  text-align: center;
}
.close {
	position: absolute;
	right: -2rem;
	top: -2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
  font-size: 3.0rem;
	font-weight: 600;
	color: #fff;
  cursor: pointer;
	width: 4rem;
	height: 4rem;
	background-color: #111;
	border-radius: 4rem;
}
.modal-content h3{
	font-size: 2.0rem;
	font-weight: 700;
}
.pw-box {
  font-size: 2.0rem;
  font-weight: 600;
  margin: 10px 0;
  padding: 10px;
	color: var(--primary-dark);
  /* background: var(--primary); */
	border: 3px dotted var(--primary);
  border-radius: 5px;
}
.bt_copy {
  display: inline-flex;
  justify-content: center;
	width: 100%;
	color: var(--primary);
	font-size:1.6rem;
	font-weight: 600;
	padding: 8px 0px;
	border:1px solid var(--primary);
	cursor:pointer;
  border-radius: 5px;
}
.bt_copy:focus, .bt_copy:hover {
	color: var(--primary);
	border:1px solid var(--primary-dark);
	outline: 0;
}
.bt_close {
  display: inline-flex;
  justify-content: center;
	width: 100%;
	color: var(--gray-500);
	font-size:1.6rem;
	font-weight: 600;
	padding: 8px 0px;
	cursor:pointer;
  border-radius: 5px;
}
.bt_close:focus, .bt_close:hover {
	color: var(--gray-700);
	outline: 0;
}