@import url(variable.less);

.page {
	height: 100vh;
	overflow: hidden;
}

.form_con:focus {
	border-color: @color_black !important;
	box-shadow: 0 0 0 1px @color_black;
	border-radius: 5px;
}

.login {
	.inp_group {
		input {
			width: 100%;
			height: 5.2rem;
			padding-left: 5rem;
			border: 1px solid @color_lightgray;
			margin-bottom: 1.5rem;
			background-color: #fff !important;
		}
		button {
			width: 100%;
			margin: 3rem 0;
		}
		.id_input {
			background: url(/img/ico/person.svg) 20px 50% / auto no-repeat;
		}
		.pw_input {
			background: url(/img/ico/pswd.svg) 20px 50% / auto no-repeat;
		}
	}
	.btn_login {
		background-color: @color_main;
		width: 100%;
		height: 6rem;
		color: #fff;
		margin: 3rem 0;
		transition: 0.2s ease-in-out;
		&:hover {
			box-shadow: 0 10px 20px rgba(@color_main_rgb, 0.2);
		}
	}
	.find {
		display: flex;
		align-items: center;
		.btn_find {
			&:nth-child(2)::before {
				.division();
			}
			&:hover {
				color: @color_sub;
			}
		}
	}
	@media @mobile_l {
		.inp_group {
			input {
				height: 4.8rem;
				margin-bottom: 1rem;
				padding-left: 4rem;
			}
			.id_input {
				background: url(/img/ico/person.svg) 15px 50% / 15px no-repeat;
			}
			.pw_input {
				background: url(/img/ico/pswd.svg) 15px 50% / 15px no-repeat;
			}
		}
		.btn_login {
			height: 5.2rem;
			margin: 2rem 0;
		}
	}
}

.sec_01 {
	width: 42rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
	.tit {
		text-align: center;
		p {
			margin-top: 0.5rem;
			color: @color_dark;
		}
	}
	.login {
		padding: 3rem 0;
		.find {
			justify-content: center;
		}
	}
	.comment {
		margin-top: 3rem;
		padding: 2rem 3rem;
		background-color: @color_bg;
		display: flex;
		gap: 2rem;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		.btn_sign {
			background-color: #fff;
			color: @color_sub;
			border: 1px solid @color_sub;
			width: 12rem;
			height: 4.2rem;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: 0.4s;
			&:hover {
				background-color: @color_sub;
				color: #fff;
			}
		}
		@media @mobile_l {
			margin-top: 0;
		}
	}
	@media @mobile_l {
		width: 90%;
		top: 52%;
		.login {
			padding: 2rem 0;
			padding-bottom: 4rem;
		}
		.comment {
			margin-top: 0;
			padding: 2rem;
			gap: 1rem;
			.btn_sign {
				width: 100%;
			}
		}
	}
}

//아이디,비밀번호찾기 + 회원가입 모달
.modal {
	.md_body {
		margin-bottom: 2rem;
	}
	.inp_form {
		margin-top: 0;
		border-top: none;
		gap: 2.6rem;
		display: flex;
		flex-direction: column;
		.form_box {
			flex-direction: column;
			border-bottom: none;
			.tit {
				margin-bottom: 1.5rem;
			}
			.inp_con {
				display: flex;
				gap: 1rem;
			}
			.comment {
				margin-top: 0.5rem;
			}
			.privacy_box {
				height: 24rem;
				background-color: @color_bg;
				.terms_content {
					padding: 1.5rem;
				}
			}
			.btn_bg {
				flex: 0 0 auto;
				width: 8rem;
			}
		}
		.inp_group {
			flex-direction: column;
			background-color: transparent;
			border-bottom: none !important;
			.inp_con {
				min-height: auto;
				padding: 0;
			}
			.inp_inner {
				width: 100%;
				.comment {
					margin-bottom: 1.5rem;
					display: none;
					color: @color_darkgray;
				}
				.comment.active {
					display: block;
				}
			}
		}
		.form_company {
			.inp_box {
				border: none;
				flex-direction: column;
				gap: 0 !important;
				.inp_hp {
					margin-top: -1px;
					position: relative;
					&:focus-visible {
						z-index: 1;
					}
				}
			}
		}
		.form_company,
		.form_info {
			.inp_group {
				gap: 1rem;
				.inp_pw {
					border: none;
					flex-direction: column;
					gap: 0 !important;
					.inp_hp {
						margin-top: -1px;
						position: relative;
						&:focus-visible {
							z-index: 1;
						}
					}
				}
			}
		}
	}
	&:not(#md_sign) {
		.inp_form .form_box {
			gap: 1rem;
		}
	}
}

#md_find {
	.md_body {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 3rem;
		.ico {
			border: 1px solid @color_gray;
			width: 8rem;
			height: 8rem;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: @color_main;
			font-size: 4.2rem;
			margin-bottom: 1.6rem;
		}
		.txt_box {
			text-align: center;
			margin-bottom: 1.6rem;
			.txt {
				margin-top: 1.6rem;
			}
		}
	}
}