@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
}

body{
	width:100vw;
	height:100vh;
}

#content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.start_login {
	
}

.kakao_login {
	width: 568px;
	height: 40px;
	display: flex;
	border-color: #fee500;
	background-color: #fee500;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.kakao_logo {
	width: 20px;
	height: 20px;
	fill: none;
	margin-right: 4px;
}

.naver_login {
	width: 568px;
	height: 40px;
	display: flex;
	border-color: #31c800;
	background-color: #31c800;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.naver_login>img {
	margin-right: 4px;
	width: 28px;
	height: 28px;
}

.line_left {
	width: 271px;
	border: 1px solid #6d6e6f;
}

.line_right {
	width: 254px;
	border: 1px solid #6d6e6f;
}

.email_span {
	font-size: 13px;
}

.pw_span {
	font-size: 13px;
}

.email {
	width: 572px;
	height: 50px;
	border-radius: 14px;
	border: 1px solid #cfcbcb;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
}

.pw {
	width: 572px;
	height: 50px;
	border-radius: 14px;
	border: 1px solid #cfcbcb;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
}

.send_bt:hover {
	cursor: pointer;
}

.send_bt_input {
    width: 572px;
    height: 50px;
    border-radius: 14px;
    border: 1px solid #cfcbcb;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin: 100px 0 0 0;
}

.circle1 {
	float: left;
}

.circle2 {
	float: left;
}

.circle3 {
	float: left;
}

.line_div_area{
    display: flex;
    height: 1px;
    align-items: center;
}

.top_text_area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.login_button_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.form_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mark{
	width: 90%;
}