@charset "utf-8";

.intro_container {
	width: 100%;
	background-color: #1a1a1a;
	margin-top:-45px;
}

.intro_hero {
	width: 100%;
	height: calc(100vh - 45px);
	min-height: 600px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* top:-45px; */
}

.intro_bg {
	position: absolute;
	top: -9.25%;
	left: 0;
	width: 100%;
	height: 118.49%;
	object-fit: cover;
	z-index: 1;
}

.intro_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

/* 모바일 배경 이미지 - 기본 숨김 */
.intro_mobile_bg {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

/* 콘텐츠 영역 */
.intro_content {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1020px;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* 콘텐츠 top/bottom 래퍼 - 데스크탑에서는 투명 컨테이너 */
.intro_content_top,
.intro_content_bottom {
	width: 100%;
}

.intro_logo {
	height: 61px;
	max-width: 315px;
	width: auto;
	object-fit: contain;
	display: block;
}

.intro_brand_title {
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-weight: 500;
	font-size: 45px;
	color: white;
	margin: 60px 0 0 0;
	line-height: normal;
	letter-spacing: -0.36px;
	width: 100%;
}

.intro_description {
	color: #fff !important;
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 22px;
	letter-spacing: -0.36px;
	padding: 60px 0 80px 0;
	width: 100%;
	max-width: 50%;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3 !important;
}

.intro_description p {
	margin: 0;
	color: white;
	line-height: 1.3 !important;
}

/* 설명 두 번째 줄: 베이지 색상 */
.intro_description p:nth-child(2),
.intro_desc_sub {
	color: #e0cdb5;
}

/* 등록 버튼 */
.intro_register_btn {
	background-color: #141310;
	border: none;
	width: 357px;
	max-width: 100%;
	height: 55px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
	font-weight: 600;
	font-size: 25px;
	color: white;
	letter-spacing: -0.36px;
	transition: background-color 0.2s;
}

.intro_register_btn:hover {
	background-color: #2a2724;
}

/* footer 링크 */
.intro_footer_links {
	position: absolute;
	bottom: 5%;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

.intro_footer_link {
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 350;
	font-size: 16px;
	color: #aeaeae;
	text-decoration: none;
	letter-spacing: -0.36px;
	line-height: 19px;
	padding: 2px 0;
}

.intro_footer_link:hover {
	color: #ffffff;
}

.intro_footer_divider {
	font-size: 16px;
	color: #727272;
	padding: 0 16px;
	line-height: 19px;
}

/* ========================================
   반응형 미디어 쿼리
======================================== */

@media (max-width: 1024px) {
	.intro_content {
		max-width: 760px;
	}

	.intro_brand_title {
		font-size: 38px;
	}

	.intro_description {
		font-size: 20px;
		padding: 50px 0 70px 0;
	}
}

@media (max-width: 768px) {
	/* 데스크탑 배경 숨기고 모바일 배경 표시 */
	.intro_bg {
		display: none;
	}

	.intro_mobile_bg {
		display: block;
	}

	/* 히어로 영역: 375/667 비율 */
	.intro_hero {
		height: auto;
		min-height: unset;
		aspect-ratio: 375 / 667;
		align-items: stretch;
	}

	/* 콘텐츠 영역: 위아래로 분리 */
	.intro_content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		min-height: unset;
		padding: 60px 30px 60px;
		justify-content: flex-start;
		align-items: center;
	}

	/* 로고: 상단 중앙 */
	.intro_content_top {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex-direction: column;
	}

	/* 나머지: 하단 중앙 */
	.intro_content_bottom {
		margin-top: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		text-align: center;
	}

	.intro_logo {
		height: 35px;
	}

	.intro_brand_title {
		font-size: 30px;
		margin-top: 0;
		margin-bottom: 0;
		text-align: center;
	}

	.intro_description {
		line-height: 31.5px;
		padding: 30px 0 40px 0;
		gap: 0;
		max-width: 100%;
		text-align: center;
	}

	.intro_description p {
		margin: 0;
	}

	.intro_description_text {
		font-size: 20px;
		text-align: center;
	}

	.intro_register_btn {
		width: 100%;
		max-width: 260px;
		height: 50px;
		font-size: 22px;
	}
}

@media (max-width: 480px) {
	.intro_brand_title {
		font-size: 26px;
	}

	.intro_description {
		gap: 8px;
		padding: 30px 0 50px 0;
	}

	.intro_register_btn {
		font-size: 18px;
		height: 44px;
	}

	.intro_footer_link,
	.intro_footer_divider {
		font-size: 13px;
	}
}

.intro_description_text{
	color: #E0CDA8 !important;
	font-family: Pretendard;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}