@charset "UTF-8";
#sec1 {
	margin-top: clamp(102px, 7.29vw, 140px);
}

.cont label {
  font-size: clamp(14px, 0.78vw, 15px);
  padding-bottom: clamp(10px, 0.52vw, 10px);
}
.cont label span {
  color: #f5635c;
}
.cont input {
  width: 100%;
  font-size: clamp(14px, 0.83vw, 16px);
  line-height: 1.19; /*19px*/
  color: #444;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: clamp(15px, 1.04vw, 20px);
  margin-bottom: clamp(15px, 1.04vw, 20px);
}
.cont input.on {
  border-color: #f5635c;
}
.cont input::placeholder {
  color: #888;
}

.warning {
  font-size: clamp(14px, 0.73vw, 14px);
  padding-bottom: clamp(10px, 0.52vw, 10px);
  color: #f5635c;
}

.agree label::before {
  content: "";
  display: inline-block;
  margin-right: clamp(8px, 0.42vw, 8px);
  vertical-align: middle;
  width: clamp(20px, 1.04vw, 20px);
  height: clamp(20px, 1.04vw, 20px);
  line-height: clamp(20px, 1.04vw, 20px);
  border-radius: 100%;
  border: 1px solid #ddd;
}
.agree #agree:checked + label::before {
  border: none;
  background-color: #3691ff;
  background-image: url(../img/check_white_ico.svg);
  background-size: clamp(12px, 0.63vw, 12px) clamp(10px, 0.52vw, 10px);
  background-position: center;
  background-repeat: no-repeat;
}
.agree .agree_detail_btn {
	font-size: clamp(14px, 0.73vw, 14px);
	color: #888;
	margin-left: 10px;
	border: 1px solid #ddd;
	padding: 5px;
	border-radius: 4px;
}

.login_btn,
.join_btn,
.find_btn {
  width: 100%;
  border-radius: 10px;
  color: #fff;
  line-height: clamp(56px, 2.92vw, 56px);
  background: #0186f9;
  transition: background-color 0.3s;
  padding: 0;
}
.login_btn.off,
.join_btn.off,
.find_btn.off {
  background: #c2c1c6;
}

/* 로그인 페이지 */
#loginForm input#id {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  margin: 0;
}
#loginForm input#password {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.login_links {
  font-weight: 600;
}
.login_links .password_link {
  color: #888;
}

.simple_login {
  border-top: 1px solid #ddd;
}
.simple_login p {
  font-size: clamp(13px, 0.68vw, 13px);
  color: #333;
  font-weight: 600;
  padding-bottom: clamp(14px, 0.73vw, 14px);
}
.simple_login a {
  border-radius: 100%;
  width: clamp(48px, 2.5vw, 48px);
  height: clamp(48px, 2.5vw, 48px);
}
.simple_login .kakao {
  background-image: url(../img/kakao_color_ico.svg);
  margin-right: clamp(8px, 0.42vw, 8px);
}
.simple_login .naver {
  background-image: url(../img/naver_color_ico.svg);
}

@media (max-width: 750px) {
	#sec1 {
		margin-top: clamp(116px, 31.33vw, 235px);
		max-width: 660px;
		width: calc(100% - (6.13vw * 2));
	}
	.cont input {
		font-size: clamp(14px, 4.00vw, 30px);
		padding: clamp(18px, 4.80vw, 36px) clamp(15px, 4.00vw, 30px);
		margin-bottom: clamp(10px, 2.67vw, 20px);
	}
	.cont label {
		font-size: clamp(16px, 4.00vw, 30px);
		padding-bottom: clamp(10px, 2.67vw, 20px);
	}
	.agree label {
		font-size: clamp(14px, 4.00vw, 30px);
	}
	.agree label::before {
		width: clamp(15px, 4.00vw, 30px);
		height: clamp(15px, 4.00vw, 30px);
		margin-right: clamp(7px, 2.67vw, 20px);
	}
	.agree #agree:checked + label::before {
		background-size: clamp(9px, 1.60vw, 12px) clamp(8px, 1.33vw, 10px);
	}
	.agree .agree_detail_btn {
		font-size: clamp(12px, 2.67vw, 20px);
		margin-left: clamp(10px, 2.67vw, 20px);
		padding: clamp(4px, 1.07vw, 8px);
	}
	.login_btn, .find_btn, .join_btn {
		font-size: clamp(16px, 4.00vw, 30px);
		line-height: clamp(55px, 14.67vw, 110px);
	}
	.login_links {
		font-size: clamp(16px, 4.00vw, 30px);
	}
	.simple_login p {
		font-size: clamp(16px, 4.00vw, 30px);
		padding-bottom: clamp(20px, 5.33vw, 40px);
	}
	.simple_login a {
		width: clamp(50px, 13.33vw, 100px);
		height: clamp(50px, 13.33vw, 100px);
		background-repeat: no-repeat;
		background-size: cover;
	}
	.simple_login .kakao {
		margin-right: clamp(10px, 2.67vw, 20px);
	}
}