@charset "utf-8";

@import url(common.css);

/* ======================== Visual ======================== */

.visual {position: relative;height: 550px;}
.visual.main_visual {position: relative;height: auto;padding-bottom: 0;background-color: #0e275e;background-image: linear-gradient(149deg, rgba(14, 31, 64, 1) 0%, rgba(19, 32, 67, 1) 18%, rgba(30, 58, 137, 1) 100%);overflow: hidden;}
.main_visual_main {display: block;width: min(62vw, 1190px);height: auto;margin-left: auto;}
.main_visual_overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.main_visual_overlay_inner {max-width: 1920px;height: 100%;margin: 0 auto;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;padding-left: min(15vw, 288px);box-sizing: border-box;}
.main_visual_logo {text-align: left;}
.main_visual_logo img {display: block;width: min(23.75vw, 456px);height: auto;}
.main_visual_title {font-weight: 600;font-size: min(2.11vw, 40.5px);margin-top: min(2.8vw, 53.8px);color: #fff;}
.main_visual_line {border-top: 1px solid rgba(255,255,255,0.7);width: min(26.1vw, 501px);margin: min(4vw, 76.8px) 0 min(3.7vw, 71px) 0;}
.main_visual_subtitle {font-size: min(1.74vw, 33.4px);font-weight: 600;color: #fff;margin-bottom: min(1.43vw, 27.5px);}
.main_visual_desc {font-size: min(1.24vw, 23.8px);color: #fff;opacity: 0.7;}

/* ======================== Section 1: 제품 그리드 ======================== */

.section1 {background-color: #0b1a2d;}
.section1 .inner {padding: 80px 0 90px;}
.section1_point {text-align: center;margin-bottom: 20px;}
.section1_point img {width: 34px;height: 34px;}
.section1_sub {margin-top: 18px;color: rgba(255,255,255,0.7);font-size: 20px;line-height: 30px;font-weight: 300;}
.section1_logo {text-align: left;margin-bottom: 45px;}

.product_grid {display: flex;justify-content: center;flex-wrap: wrap;gap: 24px;margin-top: 45px;text-align: center;list-style: none;padding: 0;}
.product_grid.product_grid_row2 {margin-top: 25px;}
.product_grid li {display: block;flex: 0 0 220px;margin: 0;vertical-align: top;}
.product_grid li a {display: block;text-decoration: none;}
.product_card {
	position: relative;
	width: 100%;
	aspect-ratio: 220 / 245;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #0b1a2d;
	border: 1px solid rgba(59, 130, 246, 0.28);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.product_card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, #60a5fa 50%, transparent 100%);
	pointer-events: none;
	z-index: 2;
}
.product_card:hover {
	transform: translateY(-6px);
	border-color: rgba(96, 165, 250, 0.5);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(37, 99, 235, 0.18);
}
.product_label {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 18px 14px 12px;
	box-sizing: border-box;
	z-index: 1;
	overflow: visible;
	background: linear-gradient(160deg, #3b82f6 0%, #2563eb 35%, #1e40af 70%, #1e3a8a 100%);
}
.product_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #fff;
	font-size: 19px;
	line-height: 1;
	flex-shrink: 0;
	transition: transform 0.3s ease, background 0.3s ease;
}
.product_icon .fa {display: block;line-height: 1;}
.product_icon .fa-mobile {font-size: 23px;}
.product_card:hover .product_icon {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.2);
}
.product_name {
	color: rgba(255, 255, 255, 0.92);
	font-family: 'Pretendard', sans-serif;
	font-size: 17px;
	font-weight: 400;
	text-align: center;
	letter-spacing: 2.2px;
	margin: 0;
	padding: 0;
	line-height: 1.5;
	overflow: visible;
}
.product_name b {font-weight: 600;color: #fff;}
.product_name strong {
	display: block;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: 3px;
	line-height: 1.5;
	padding: 2px 0 4px;
	margin: 0;
	color: #fff;
	-webkit-text-fill-color: #fff;
	background: none;
	filter: none;
	overflow: visible;
}
.product_sub {
	font-family: 'Pretendard', sans-serif;
	font-size: 19px;
	font-weight: 600;
	margin: 8px 0 0;
	padding: 0;
	text-align: center;
	letter-spacing: 0.4px;
	line-height: 1.4;
	color: #bfdbfe;
	text-shadow: none;
	flex-shrink: 0;
}
.product_desc {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px 14px 22px;
	font-family: 'Pretendard', sans-serif;
	color: #e2e8f0;
	font-size: 17px;
	font-weight: 500;
	text-align: center;
	line-height: 1.55;
	z-index: 1;
	box-sizing: border-box;
	background: #0b1220;
	border-top: 1px solid rgba(96, 165, 250, 0.2);
	margin: 0;
	letter-spacing: -0.2px;
	overflow: visible;
}

/* ======================== Section 2: 제품 필요성 ======================== */

.section2 {background-color: #f0f6fd;}
.section2 .inner {padding: 100px 0;}
.section2 .title {font-size: 36px;font-weight: 500;color: #13314b;}
.section2_sub {margin-top: 16px;color: #666;font-size: 17px;line-height: 26px;font-weight: 300;}

.need_wrap {margin-top: 60px;display: flex;align-items: stretch;gap: 80px;}
.need_img {width: 50%;display: flex;align-items: center;margin-right: 0;padding-right: 0;}
.need_img img {width: 100%;max-width: none;border-radius: 12px;display: block;cursor: zoom-in;transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.25s ease;}
.need_img img:hover {transform: scale(1.03) translateY(-4px);box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);opacity: 0.96;}
.need_info {width: 50%;margin-left: 0;display: flex;align-items: center;}
.need_info ul {list-style: none;padding: 0;margin: 0;width: 100%;}
.need_info ul li {display: flex;align-items: flex-start;margin-bottom: 40px;}
.need_info ul li:last-child {margin-bottom: 0;}
.need_icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin: 8px 16px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.need_icon::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, #2563eb 0%, #1C357C 100%);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14), 0 2px 8px rgba(28, 53, 124, 0.25);
	animation: needDotPulse 2.4s ease-in-out infinite;
}
@keyframes needDotPulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14), 0 2px 8px rgba(28, 53, 124, 0.25);
	}
	50% {
		transform: scale(1.15);
		box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.08), 0 2px 10px rgba(28, 53, 124, 0.3);
	}
}
.need_txt .tit {color: #13314b;font-size: 22px;font-weight: 600;margin-bottom: 14px;}
.need_txt .txt {color: #666;font-size: 18px;line-height: 32px;font-weight: 300;}

/* ======================== Section 3: 핵심기능 ======================== */

.section3 .inner {padding: 100px 0;}
.section3 .title {font-size: 36px;font-weight: 500;margin-bottom: 40px;}

.core_wrap {margin-top: 50px;display: flex;align-items: stretch;gap: 40px;}
.core_badge {margin-bottom: 40px;}
.core_img {width: 50%;display: flex;align-items: center;margin-right: 0;padding-right: 0;}
.core_img img {width: 100%;max-width: none;border-radius: 12px;display: block;cursor: zoom-in;transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.25s ease;}
.core_img img:hover {transform: scale(1.03) translateY(-4px);box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);opacity: 0.96;}
.core_info {width: 50%;margin-left: 0;display: flex;flex-direction: column;justify-content: center;}
.core_info ul {list-style: none;padding: 0;margin: 0;}
.core_info ul li {position: relative;padding-left: 36px;color: #fff;font-size: 18px;line-height: 32px;margin-bottom: 24px;font-weight: 300;}
.core_info ul li:last-child {margin-bottom: 0;}
.core_info ul li::before {content: '✓';position: absolute;left: 0;top: 4px;width: 24px;height: 24px;display: flex;justify-content: center;align-items: center;background: linear-gradient(135deg, #5e58d9, #275eff);border-radius: 50%;color: #fff;font-size: 14px;font-weight: 700;}

/* collector-badge (shared with wisdom pages) */
.collector-badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	width: fit-content;
	max-width: max-content;
	gap: 12px;
	padding: 12px 28px 12px 22px;
	margin-bottom: 40px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.6px;
	line-height: 1;
	border-radius: 999px;
	background: linear-gradient(90deg, #3b82f6 0%, #2563eb 45%, #1d4ed8 100%);
	box-shadow:
		0 0 0 1px rgba(147, 197, 253, 0.35),
		0 8px 24px rgba(37, 99, 235, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.25);
	border: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.collector-badge::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #bfdbfe;
	box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.28), 0 0 8px rgba(147, 197, 253, 0.7);
	flex-shrink: 0;
	animation: collectorBadgePulse 2s ease-in-out infinite;
}
@keyframes collectorBadgePulse {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
		box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.28), 0 0 8px rgba(147, 197, 253, 0.7);
	}
	50% {
		transform: scale(1.2);
		opacity: 0.9;
		box-shadow: 0 0 0 5px rgba(191, 219, 254, 0.14), 0 0 12px rgba(147, 197, 253, 0.85);
	}
}
.collector-badge:hover {
	transform: translateY(-2px);
	box-shadow:
		0 0 0 1px rgba(147, 197, 253, 0.45),
		0 12px 28px rgba(37, 99, 235, 0.42),
		inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ======================== Section 4: CTA ======================== */

.section4 {background-color: #0b1a2d;}
.section4 .inner {padding: 100px 0;}
.section4 .title {font-size: 33px;font-weight: 500;margin-bottom: 0;}

.cta_wrap {margin-top: 50px;display: flex;align-items: stretch;gap: 80px;}
.cta_badge {margin-bottom: 40px;}
.cta_img {width: 50%;display: flex;align-items: center;margin-right: 0;padding-right: 0;}
.cta_img img {width: 100%;max-width: none;border-radius: 12px;display: block;cursor: zoom-in;transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.25s ease;}
.cta_img img:hover {transform: scale(1.03) translateY(-4px);box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);opacity: 0.96;}
.cta_info {width: 50%;margin-left: 0;display: flex;flex-direction: column;justify-content: center;}
.cta_info ul {list-style: none;padding: 0;margin: 0;}
.cta_info ul li {position: relative;padding-left: 36px;color: #fff;font-size: 18px;line-height: 32px;margin-bottom: 24px;font-weight: 300;}
.cta_info ul li:last-child {margin-bottom: 0;}
.cta_info ul li::before {content: '✓';position: absolute;left: 0;top: 4px;width: 24px;height: 24px;display: flex;justify-content: center;align-items: center;background: linear-gradient(135deg, #5e58d9, #275eff);border-radius: 50%;color: #fff;font-size: 14px;font-weight: 700;}

/* ======================== Section 5: Reference ======================== */

.reference-section {overflow: hidden;background: #fff;}
#content .reference-section .inner {padding: 100px 0 28px;}
.reference-section .title {font-size: 44px;font-weight: 700;color: #13314b;}
.reference_sub {margin-top: 18px;color: #666;font-size: 18px;line-height: 28px;font-weight: 300;}
.reference-marquee {position: relative;width: 100vw;margin-left: calc(50% - 50vw);padding: 0 0 90px;overflow: hidden;}
.reference-marquee::before,
.reference-marquee::after {content: '';position: absolute;top: 0;width: 80px;height: 100%;z-index: 2;pointer-events: none;}
.reference-marquee::before {left: 0;background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%);}
.reference-marquee::after {right: 0;background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%);}
.reference-row {overflow: hidden;margin-top: 68px;}
.reference-track {display: flex;align-items: center;gap: 40px;width: max-content;animation: referenceMarqueeLeft 36s linear infinite;}
.reference-row.is-reverse .reference-track {animation-name: referenceFlowRight;}
.reference-logo {display: flex;align-items: center;justify-content: center;flex: 0 0 380px;height: 74px;padding: 0 16px;box-sizing: border-box;}
.reference-logo img {display: block;max-width: 100%;max-height: 58px;object-fit: contain;opacity: 1;transition: transform 0.25s ease;}
.reference-logo:hover img {transform: scale(1.04);}
.reference-marquee:hover .reference-track {animation-play-state: paused;}

@keyframes referenceMarqueeLeft {
	from {transform: translateX(0);}
	to {transform: translateX(var(--reference-shift));}
}
@keyframes referenceFlowRight {
	from {transform: translateX(var(--reference-shift));}
	to {transform: translateX(0);}
}