/* main home page — hero & sections (brand: logisfactory_video_hero_design_blue.html) */
body.main-page .nav {
	z-index: 60;
}
body.main-page .menu a:hover {
	color: #dce5ff;
}
body.main-page .menu {
	gap: 34px;
}
body.main-page .btn {
	padding: 15px 23px;
	border-radius: 16px;
}
body.main-page .hero .eyebrow {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #edf2ff;
	box-shadow: none;
}.hero {
	position: relative;
	min-height: 100vh;
	/*height: 100vh; */
	height:auto;      /* 추가 */
	padding-top: 76px;
	overflow: hidden;
	background: #06162b url("/images/logisfactory_main_20260703.png") center/cover no-repeat;
	isolation: isolate
}

.hero-video-bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: hidden;
	background: #06162b url("/images/logisfactory_main_20260703.png") center/cover no-repeat
}

.hero-video-bg video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	filter: saturate(1.08) contrast(1.04)
}

.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(90deg, rgba(2, 10, 24, .78) 0%, rgba(2, 10, 24, .56) 38%, rgba(2, 10, 24, .24) 70%, rgba(2, 10, 24, .50) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .10) 48%, rgba(6, 22, 43, .62) 100%)
}

.hero:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .68), transparent 86%);
	pointer-events: none
}

.hero:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 150px;
	z-index: -1;
	background: linear-gradient(to bottom, transparent, #fff)
}

.hero-grid {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	/* min-height: calc(100vh - 76px); */
	min-height: auto;
	padding: 88px 0 120px
}

.hero-copy {
	max-width: 860px;
	color: #fff
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(8, 119, 242, .24);
	color: var(--blue);
	font-size: 13px;
	font-weight: 950;
	letter-spacing: .03em;
	text-transform: uppercase;
	box-shadow: 0 10px 24px rgba(7, 27, 52, .06)
}

.hero h1 {
	margin: 26px 0 24px;
	font-size: clamp(33px, 5.0vw, 55px); /* clamp(46px, 5.2vw, 78px) */
	line-height: 1.08;
	letter-spacing: -.07em;
	color: #071733;
	text-shadow: 0 2px 0 rgba(255, 255, 255, .28)
}

.hero h1 strong {
	color: var(--blue);
	font-weight: 950
}

.hero p {
	max-width: 655px;
	margin: 0;
	font-size: 20px;
	line-height: 1.75;
	color: #29384f;
	font-weight: 700
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 34px 0 30px
}

.hero-badges {
	display: flex;
	gap: 12px;
	flex-wrap: wrap
}

.hero-badges span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .86);
	border: 1px solid rgba(7, 27, 52, .09);
	font-weight: 850;
	color: #22314a;
	box-shadow: 0 10px 26px rgba(7, 27, 52, .08)
}



.hero .eyebrow {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .28);
	color: #9ff8ff;
	box-shadow: none
}

.hero h1 {
	color: #fff;
	text-shadow: 0 16px 46px rgba(0, 0, 0, .32)
}

.hero h1 strong {
	color: #6cf7ff
}

/* English hero headline — clearer hierarchy & line breaks */
html[lang="en"] body.main-page .hero h1.hero-title--en {
	margin: 26px 0 24px;
	font-size: clamp(36px, 4.6vw, 72px);
	line-height: 1.1;
	letter-spacing: -0.032em;
	font-weight: 850;
	max-width: 920px;
}

html[lang="en"] body.main-page .hero h1.hero-title--en .hero-title-line {
	display: block;
}

html[lang="en"] body.main-page .hero h1.hero-title--en .hero-title-line--lead {
	font-size: 0.52em;
	font-weight: 750;
	line-height: 1.28;
	letter-spacing: -0.018em;
	color: rgba(255, 255, 255, .94);
	margin-bottom: 0.42em;
	max-width: 28em;
}

html[lang="en"] body.main-page .hero h1.hero-title--en .hero-title-line--highlight {
	margin: 0 0 0.28em;
	line-height: 1.02;
}

html[lang="en"] body.main-page .hero h1.hero-title--en .hero-title-line--highlight strong {
	display: inline-block;
	font-size: 1em;
	font-weight: 950;
	letter-spacing: -0.045em;
	color: #6cf7ff;
	text-shadow: 0 0 42px rgba(108, 247, 255, .35), 0 16px 46px rgba(0, 0, 0, .32);
}

html[lang="en"] body.main-page .hero h1.hero-title--en .hero-title-line--tagline {
	font-size: 0.56em;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.012em;
	color: rgba(255, 255, 255, .9);
	max-width: 22em;
}

html[lang="en"] body.main-page .hero h1.hero-title--en .hero-title-line--tagline span + span::before {
	content: " ";
}

.hero p {
	color: rgba(255, 255, 255, .84);
	text-shadow: 0 10px 30px rgba(0, 0, 0, .22)
}

.hero-badges span {
	background: rgba(255, 255, 255, .13);
	border-color: rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .88);
	backdrop-filter: blur(10px)
}

.hero-scroll {
	position: absolute;
	left: 50%;
	bottom: 34px;
	z-index: 4;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, .78);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase
}

.hero-scroll:after {
	content: "";
	display: block;
	width: 1px;
	height: 42px;
	background: rgba(255, 255, 255, .55)
}

.hero-badges span:before {
	content: '✓';
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #e8f3ff;
	color: var(--blue);
	font-size: 12px
}

.network-card {
	align-self: center;
	justify-self: end;
	width: min(100%, 520px);
	border-radius: 34px;
	padding: 30px;
	background: linear-gradient(180deg, rgba(7, 27, 52, .70),
		rgba(7, 27, 52, .58));
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, .20);
	box-shadow: 0 34px 90px rgba(4, 18, 38, .36);
	color: #fff;
	overflow: hidden
}

.map-title {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 12px
}

.map-title small {
	display: block;
	color: rgba(255, 255, 255, .68);
	font-weight: 900;
	font-size: 12px;
	text-transform: uppercase
}

.map-title h3 {
	margin: 6px 0 0;
	font-size: 25px;
	letter-spacing: -.04em
}

.pill {
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(0, 200, 210, .35);
	background: rgba(0, 200, 210, .12);
	color: #5ff8ff;
	font-weight: 950;
	font-size: 12px;
	white-space: nowrap
}

.map-wrap {
	position: relative;
	margin: 8px auto 18px;
	width: min(100%, 390px);
	aspect-ratio: 1/1
}

.map-wrap svg {
	width: 100%;
	height: 100%;
	display: block
}

.route {
	fill: none;
	stroke: #00d8df;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 7 7;
	filter: drop-shadow(0 0 7px rgba(0, 216, 223, .9));
	animation: dash 7s linear infinite
}

.route.blue {
	stroke: #0877f2
}

@
keyframes dash {
	to {stroke-dashoffset: -130
}

}
.pin-label {
	font-size: 13px;
	font-weight: 950;
	fill: #fff
}

.pin-sub {
	font-size: 10px;
	font-weight: 800;
	fill: rgba(255, 255, 255, .72)
}

.pin-dot {
	fill: #19d7df;
	filter: drop-shadow(0 0 10px rgba(0, 216, 223, .95))
}

.map-benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px
}

.map-benefits div {
	padding: 13px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .12);
	font-weight: 800;
	color: rgba(255, 255, 255, .88)
}

.strength-wrap {
	position: relative;
	z-index: 4;
	margin-top: -58px
}

.strength-box {
	background: rgba(255, 255, 255, .95);
	border-radius: 34px;
	padding: 38px;
	border: 1px solid rgba(230, 237, 245, .9);
	box-shadow: var(--shadow2)
}

.section-kicker {
	color: var(--blue);
	font-weight: 950;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em
}

.strength-box h2 {
	font-size: 30px; /*36*/
	line-height: 1.18;
	margin: 10px 0 26px;
	color: var(--navy);
	letter-spacing: -.12em /*-.05*/
}

.strength-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px
}

.strength-item {
	padding: 28px 18px;
	border-radius: 24px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 10px 26px rgba(7, 27, 52, .05)
}

.strength-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #e9f3ff;
	color: var(--blue);
	font-size: 28px
}

.strength-item b {
	display: block;
	margin-bottom: 8px;
	color: var(--navy);
	font-size: 17px
}

.strength-item span {
	font-size: 13px;
	color: var(--muted);
	font-weight: 650
}

.strength-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow)
}


.section {
	padding: 96px 0
}

.section-head {
	max-width: 800px;
	margin: 0 auto 48px;
	text-align: center
}

.section-head h2 {
	margin: 12px 0;
	font-size: clamp(30px, 4vw, 48px); /*32*/
	line-height: 1.16;
	letter-spacing: -.1em; /*-.055*/
	color: var(--navy)
}

.section-head p {
	margin: 0;
	color: var(--muted);
	font-size: 18px;
	font-weight: 650
}

.services {
	background: linear-gradient(180deg, #fff, #f4faff)
}

/*
.services-grid {
	display: grid;
	grid-template-columns: .95fr 1.05fr;
	gap: 32px;
	align-items: stretch
}*/

.photo-panel {
	position: relative;
	border-radius: 36px;
	overflow: hidden;
	min-height: 520px;
	box-shadow: var(--shadow2)
}

.photo-panel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.photo-panel:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 27, 52, .06),
		rgba(7, 27, 52, .60))
}

.photo-panel-content {
	position: absolute;
	z-index: 2;
	left: 34px;
	right: 34px;
	bottom: 34px;
	color: #fff
}

.photo-panel-content h2 {
	font-size: 40px;
	line-height: 1.16;
	margin: 0 0 12px;
	letter-spacing: -.055em
}

.photo-panel-content p {
	margin: 0;
	color: rgba(255, 255, 255, .80);
	font-weight: 700
}

.cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px
}

.card {
	padding: 28px;
	border-radius: 26px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 12px 30px rgba(7, 27, 52, .06);
	transition: .2s
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow)
}

.icon {
	width: 52px;
	height: 52px;
	border-radius: 18px;
	background: linear-gradient(135deg, #e9f3ff, #e9fffb);
	display: grid;
	place-items: center;
	color: var(--blue);
	font-size: 26px;
	margin-bottom: 18px
}

.card h3 {
	margin: 0 0 10px;
	font-size: 22px;
	color: var(--navy);
	letter-spacing: -.035em
}

.card p {
	margin: 0;
	color: var(--muted);
	font-weight: 650
}

.hc-v2-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0a32b1, #0c8ef0);
    font-weight: 950;
    font-size: 17px;
    margin-bottom: 16px;
}

.healthcare {
	background: #fff
}

.health-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: stretch
}

.health-visual {
	position: relative;
	min-height: 520px;
	border-radius: 36px;
	overflow: hidden;
	box-shadow: var(--shadow2)
}

.health-visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.health-visual:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, .92),
		rgba(255, 255, 255, .42) 52%, rgba(7, 27, 52, .12))
}

.health-content {
	position: relative;
	z-index: 2;
	padding: 42px;
	max-width: 450px
}

.health-content h2 {
	font-size: 33px; /*40*/
	line-height: 1.15;
	letter-spacing: -.055em;
	margin: 16px 0;
	color: var(--navy)
}

.health-content p {
	color: #46556c;
	font-weight: 700
}

.medical-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 24px
}

.medical-list div {
	padding: 15px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .88);
	border: 1px solid rgba(8, 119, 242, .13);
	font-weight: 900;
	color: var(--navy);
	box-shadow: 0 10px 22px rgba(7, 27, 52, .05)
}

.quality-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px
}

.q {
	padding: 24px;
	border-radius: 24px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 12px 30px rgba(7, 27, 52, .06)
}

.q b {
	display: block;
	color: var(--navy);
	font-size: 21px;
	margin-bottom: 4px
}

.q span {
	color: var(--muted);
	font-weight: 650;
	font-size: 14px
}

#quality .q:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow)
}


.network {
	position: relative;
	background: #f5faff;
	overflow: hidden
}

.network:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(90deg, rgba(8, 119, 242, .05) 1px,
		transparent 1px), linear-gradient(rgba(8, 119, 242, .05) 1px,
		transparent 1px);
	background-size: 56px 56px
}

.network .container {
	position: relative;
	z-index: 1
}

.network-layout {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 30px;
	align-items: center
}

.large-map {
	background: rgba(255, 255, 255, .88);
	border: 1px solid var(--line);
	border-radius: 36px;
	padding: 30px;
	box-shadow: var(--shadow)
}

.large-map .map-wrap {
	width: min(100%, 500px)
}

.large-map .pin-label {
	fill: var(--navy)
}

.large-map .pin-sub {
	fill: #5d6b82
}

.network-list {
	display: grid;
	gap: 14px
}

.network-list div {
	padding: 24px;
	border-radius: 24px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 12px 30px rgba(7, 27, 52, .06)
}

.network-list b {
	display: block;
	color: var(--navy);
	font-size: 22px
}

.network-list span {
	color: var(--muted);
	font-weight: 650
}

.network-list div:hover { 
	transform: translateY(-4px); 
	box-shadow: var(--shadow) 
} 


/*
.network-branch-list {
	max-height: 650px;
	overflow-y: auto;
	padding-right: 8px;
	scrollbar-width: thin;
	scrollbar-color: #b9c7da transparent;
}

.network-branch-list::-webkit-scrollbar {
	width: 7px;
}

.network-branch-list::-webkit-scrollbar-thumb {
	background: #b9c7da;
	border-radius: 999px;
}

.network-branch-list .network-branch-item {
	padding: 17px 19px;
	border-radius: 18px;
}

.network-branch-list .network-branch-item b {
	font-size: 17px;
	line-height: 1.35;
}

.network-branch-list .network-branch-item em {
	display: inline-flex;
	margin-left: 7px;
	padding: 3px 8px;
	border-radius: 999px;
	background: #eef3fa;
	color: #31589e;
	font-size: 11px;
	font-style: normal;
	font-weight: 800;
	vertical-align: 2px;
}

.network-branch-list .network-branch-item span {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.55;
	word-break: keep-all;
}
*/

.network-branch-list .network-branch-item em {
	display: inline-flex;
	margin-left: 7px;
	padding: 3px 8px;
	border-radius: 999px;
	background: #eef3fa;
	color: #31589e;
	font-size: 13px;
	font-style: normal;
	font-weight: 800;
	vertical-align: 2px;
}


@media (min-width: 1021px) {
    .network-layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
        align-items: stretch;
        gap: 46px;
    }

    .large-map,
    .network-branch-list {
        min-height: 650px;
        height: 100%;
    }

    .large-map {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .large-map .map-wrap {
        width: min(100%, 500px);
        margin: 0 auto;
    }

    .network-branch-list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        max-height: none;
        overflow: visible;
        padding: 6px 0;
    }

    .network-list.network-branch-list .network-branch-item {
        padding: 10px 0;
        margin: 0;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .network-list.network-branch-list .network-branch-item:hover {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .network-list.network-branch-list .network-branch-item::before,
    .network-list.network-branch-list .network-branch-item::after {
        display: none !important;
        content: none !important;
    }

}

@media (max-width: 1020px) {
	.network-branch-list {
		max-height: none;
		overflow: visible;
		padding-right: 0;
	}
}

@media (max-width: 640px) {
	.network-branch-list {
		gap: 10px;
	}
	.network-branch-list .network-branch-item {
		padding: 16px;
		border-radius: 17px;
	}
	.network-branch-list .network-branch-item b {
		font-size: 16px;
	}
	.network-branch-list .network-branch-item em {
		display: table;
		margin: 6px 0 0;
		font-style: normal;	
	}
	.network-branch-list .network-branch-item span {
		font-size: 13px;
	}
}

.cases {
	background: #fff
}

.case-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px
}

.case-card {
	border-radius: 28px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 14px 36px rgba(7, 27, 52, .07);
	overflow: hidden
}

.case-grid .case-card:hover { 
	transform: translateY(-4px); 
	box-shadow: var(--shadow) 
}

.case-img {
	height: 190px;
	position: relative;
	overflow: hidden
}

.case-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.case-img:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent, rgba(7, 27, 52, .45))
}

.case-body {
	padding: 26px
}

.case-body h3 {
	margin: 0 0 10px;
	color: var(--navy);
	font-size: 22px;
	letter-spacing: -.035em
}

.case-body p {
	margin: 0;
	color: var(--muted);
	font-weight: 650
}

.history {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(180deg, #ffffff 0%, #f3faff 42%, #eef8ff 100%);
}

.history:before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 10% 18%, rgba(0, 200, 210, .18), transparent 28%),
		radial-gradient(circle at 88% 16%, rgba(8, 119, 242, .14), transparent 30%),
		linear-gradient(90deg, rgba(8,119,242,.045) 1px, transparent 1px),
		linear-gradient(rgba(8,119,242,.045) 1px, transparent 1px);
	background-size: auto, auto, 58px 58px, 58px 58px;
	pointer-events: none;
}

.history .container {
	position: relative;
	z-index: 1;
}

.history-intro {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
	margin: -18px 0 34px;
}

.history-intro-card {
	padding: 20px 22px;
	border-radius: 22px;
	background: rgba(255, 255, 255, .86);
	border: 1px solid rgba(219, 231, 242, .92);
	box-shadow: 0 16px 40px rgba(7, 27, 52, .07);
	backdrop-filter: blur(12px);
}

.history-intro-card b {
	display: block;
	font-size: 18px;
	color: var(--navy);
	letter-spacing: -.035em;
	margin-bottom: 5px;
}

.history-intro-card span {
	display: block;
	font-size: 13px;
	font-weight: 750;
	color: var(--muted);
}

.history-intro-card:hover { 
	transform: translateY(-4px); 
	box-shadow: var(--shadow) 
}


.history-layout {
	display: block;
}
.timeline {
	position: relative;
	padding: 34px 28px;
	border-radius: 36px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow)
}

.timeline:before {
	content: "";
	position: absolute;
	left: 50px;
	top: 62px;
	bottom: 62px;
	width: 2px;
	background: linear-gradient(to bottom, var(--cyan),
		rgba(8, 119, 242, .4), rgba(7, 27, 52, .06))
}

.history-item {
	display: grid;
	grid-template-columns: 86px 1fr;
	gap: 20px;
	padding-bottom: 28px
}

.history-item:last-child {
	padding-bottom: 0
}

.year {
	position: relative;
	z-index: 2;
	width: 64px;
	height: 64px;
	border-radius: 20px;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--blue), var(--cyan));
	color: #fff;
	font-weight: 950;
	box-shadow: 0 0 0 8px rgba(8, 119, 242, .06)
}

.history-card {
	padding: 20px 22px;
	border-radius: 22px;
	background: #f8fbff;
	border: 1px solid var(--line)
}

.history-card b {
	display: block;
	color: var(--navy);
	font-size: 20px;
	margin-bottom: 6px
}

.history-card span {
	color: var(--muted);
	font-weight: 650;
	font-size: 14px
}

.history-card:hover { 
	transform: translateY(-4px); 
	box-shadow: var(--shadow) 
}

.revenue {
	border-radius: 36px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	justify-content: space-between
}

.revenue h3 {
	margin: 0;
	color: var(--navy);
	font-size: 28px;
	letter-spacing: -.05em
}

.bars {
	display: grid;
	gap: 15px
}

.bar-row {
	display: grid;
	grid-template-columns: 54px 1fr 58px;
	gap: 12px;
	align-items: center;
	font-weight: 900;
	color: var(--navy);
	font-size: 13px
}

.track {
	height: 12px;
	border-radius: 999px;
	background: #eaf1f8;
	overflow: hidden
}

.fill {
	height: 100%;
	background: linear-gradient(90deg, var(--blue), var(--cyan));
	border-radius: inherit
}

.highlight {
	padding: 18px;
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(8, 119, 242, .10),
		rgba(0, 200, 210, .12));
	font-weight: 800;
	color: var(--muted)
}

.highlight b {
	display: block;
	color: var(--navy);
	font-size: 18px
}

.cta {
	background: #fff
}

.cta-box {
	position: relative;
	border-radius: 40px;
	overflow: hidden;
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 56px;
	box-shadow: var(--shadow2);
	border: 1px solid rgba(230, 237, 245, .8);
	background-image: linear-gradient(90deg, rgba(255, 255, 255, .96),
		rgba(255, 255, 255, .82) 44%, rgba(255, 255, 255, .52)),
		url("/images/logisfactory_main_20260703.png");
	background-size: cover;
	background-position: center
}

.cta-box h2 {
	margin: 0;
	color: var(--navy);
	font-size: 42px;
	line-height: 1.18;
	letter-spacing: -.055em
}

.cta-box p {
	color: #475467;
	font-weight: 750
}

.footer {
	background: #06162b;
	color: rgba(255, 255, 255, .62);
	padding: 56px 0 30px
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px
}

.footer .logo {
	color: #fff
}

.footer h4 {
	color: #fff;
	margin: 0 0 16px
}

.footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px
}

.footer p, .footer li {
	font-size: 14px
}

.footer-menu {
	border-top: 1px solid rgba(255, 255, 255, .08);
	margin-top: 34px;
	padding-top: 22px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	align-items: center;
}

.footer-menu a {
	font-size: 13px;
	font-weight: 800;
	color: rgba(255, 255, 255, .74);
}

.footer-menu a:hover {
	color: #fff;
}

.copy {
	/*border-top: 1px solid rgba(255, 255, 255, .08);*/
	margin-top: 18px;
	padding-top: 0;
	font-size: 12px
}

.float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.float a {
	background: var(--cyan);
	color: #fff;
	border-radius: 999px;
	padding: 13px 17px;
	font-weight: 950;
	box-shadow: 0 10px 28px rgba(0, 200, 210, .32)
}

.strength-pictogram-grid{
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	gap:18px;
}
.strength-pictogram-item{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	min-width:0;
	padding:24px 14px 26px;
	transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.strength-pictogram{
	width:118px !important;
	height:118px !important;
	margin:0 auto 18px !important;
	padding:8px !important;
	/*border-radius:26px !important; */
	background:linear-gradient(180deg,#ffffff 0%,#f4f7fb 100%) !important;
	/*border:1px solid #dce4ef;*/
	/*box-shadow:0 10px 24px rgba(31,52,88,.07);*/
	overflow:hidden;
}
.strength-pictogram img{
	display:block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    transform: scale(1.12);
}
.strength-pictogram-item b{
	min-height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:8px;
	text-align:center;
	line-height:1.4;
}
.strength-pictogram-item span{
	display:block;
	text-align:center;
	line-height:1.55;
	word-break:keep-all;
}
.strength-pictogram-item:hover .strength-pictogram{
	border-color:#b8c8df;
	box-shadow:0 14px 30px rgba(31,52,88,.12);
}

.health-performance{
    position:absolute;
    z-index:3;
    right:30px;
    bottom:30px;
    width:min(290px,calc(100% - 60px));
    padding:22px 24px 23px;
    border-radius:22px;
    background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(244,247,251,.93));
    border:1px solid rgba(150,168,190,.50);
    box-shadow:0 20px 48px rgba(31,52,88,.18);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    overflow:hidden;
}
.health-performance:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg,#31589e,#8fa9ca);
}
.health-performance-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
.health-performance-label{
    color:#31589e;
    font-size:13px;
    line-height:1.4;
    font-weight:900;
    letter-spacing:-.02em;
}
.health-performance-date{
    flex:0 0 auto;
    padding:5px 9px;
    border-radius:999px;
    background:#eaf0f7;
    border:1px solid #d5dfeb;
    color:#5b6d84;
    font-size:11px;
    line-height:1;
    font-weight:850;
}
.health-performance-value{
    display:flex;
    align-items:flex-end;
    gap:7px;
    margin:0 0 7px;
    color:#1d2b44;
    font-family:Inter,'Noto Sans KR',sans-serif;
    letter-spacing:-.05em;
}
/* .health-performance-value strong{
    font-size:clamp(34px,4vw,46px);
    line-height:1;
    font-weight:900;
} */

.health-performance-value strong{
    display:inline-block;
    min-width:150px;
    font-variant-numeric: tabular-nums;
}
.health-performance-value span{
    padding-bottom:4px;
    color:#31589e;
    font-size:15px;
    line-height:1;
    font-weight:900;
    letter-spacing:.02em;
}
.health-performance-note{
    margin:0;
    color:#68758a;
    font-size:12px;
    line-height:1.55;
    font-weight:700;
}
@media ( max-width :1020px) {
	.menu, .nav-cta {
		display: none
	}
/*	.mobile-menu-btn {
		display: inline-flex
	} */
	.hero-grid, .services-grid, .health-grid, .network-layout,
		.history-layout {
		grid-template-columns: 1fr
	}
	.hero {
		background-position: center;

	}
	.network-card {
		justify-self: stretch;
		width: 100%
	}
	.strength-grid {
		grid-template-columns: repeat(2, 1fr)
	}
	.case-grid {
		grid-template-columns: 1fr 1fr
	}
	.photo-panel {
		min-height: 430px
	}
	.cta-box {
		display: grid
	}
	.footer-grid {
		grid-template-columns: 1fr
	}
	.strength-pictogram-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
	.strength-pictogram-item:last-child{
		grid-column:1 / -1;
		width:min(100%,calc(50% - 9px));
		justify-self:center;
	}
   .health-performance{
        right:24px;
        bottom:24px;
        width:min(280px,calc(100% - 48px));
    }
	
}

@media ( max-width :640px) {
	.container {
		width: min(100% - 28px, 1240px)
	}
	.hero-grid {
		padding: 58px 0 92px;
		gap: 30px
	}
	.hero h1 {
		font-size: 33px; /*40*/
	}
	html[lang="en"] body.main-page .hero h1.hero-title--en {
		font-size: 34px;
		max-width: none;
	}
	html[lang="en"] body.main-page .hero h1.hero-title--en .hero-title-line--lead {
		font-size: 0.58em;
		max-width: none;
	}
	html[lang="en"] body.main-page .hero h1.hero-title--en .hero-title-line--tagline {
		font-size: 0.62em;
	}
	.hero {
		min-height: 100svh;
		/* height: 100svh */
		height:auto;      /* 중요 */
	}
	.hero-video-bg video {
		object-position: center center
	}
	.hero p {
		font-size: 17px
	}
	.hero-actions {
		flex-direction: column
	}
	.btn {
		width: 100%
	}
	.network-card {
		padding: 22px;
		border-radius: 26px
	}
	.map-benefits {
		grid-template-columns: 1fr
	}
	.strength-wrap {
		margin-top: -38px
	}
	.strength-box {
		padding: 26px;
		border-radius: 26px
	}
	.strength-grid, .cards, .quality-list, .medical-list, .case-grid {
		grid-template-columns: 1fr
	}
	.section {
		padding: 72px 0
	}
	.section-head {
		text-align: left
	}
	.photo-panel, .health-visual {
		min-height: 400px;
		border-radius: 28px
	}
	.health-content {
		padding: 28px
	}
	.timeline:before {
		left: 32px
	}
	.history-item {
		position: relative;
		display: grid;
		grid-template-columns: 108px 1fr;
		gap: 26px;
		padding: 0 0 30px;
		align-items: start;
	}

	.history-item:last-child {
		padding-bottom: 0;
	}

	.year {
		position: relative;
		z-index: 2;
		width: 82px;
		height: 82px;
		border-radius: 26px;
		display: grid;
		place-items: center;
		background: linear-gradient(135deg, var(--blue), var(--cyan));
		color: #fff;
		font-weight: 950;
		font-size: 18px;
		box-shadow:
			0 18px 42px rgba(8, 119, 242, .24),
			0 0 0 10px rgba(8, 119, 242, .07);
	}

	.history-card {
		position: relative;
		padding: 25px 28px;
		border-radius: 26px;
		background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
		border: 1px solid rgba(219, 231, 242, .95);
		box-shadow: 0 14px 38px rgba(7, 27, 52, .07);
		transition: .22s;
	}

	.history-card:before {
		content: "";
		position: absolute;
		left: 0;
		top: 22px;
		bottom: 22px;
		width: 5px;
		border-radius: 0 999px 999px 0;
		background: linear-gradient(to bottom, var(--blue), var(--cyan));
	}

	.history-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 22px 54px rgba(7, 27, 52, .11);
		border-color: rgba(8, 119, 242, .22);
	}

	.history-card b {
		display: block;
		color: var(--navy);
		font-size: 23px;
		line-height: 1.25;
		letter-spacing: -.045em;
		margin-bottom: 8px;
	}

	.history-card span {
		display: block;
		color: var(--muted);
		font-weight: 700;
		font-size: 15px;
	}

	.history-tag {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 10px;
		padding: 6px 10px;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 900;
		color: var(--blue);
		background: rgba(8, 119, 242, .08);
		border: 1px solid rgba(8, 119, 242, .12);
	}
	.bar-row {
		grid-template-columns: 46px 1fr 48px;
		font-size: 12px;
		gap: 8px
	}
	.cta-box {
		padding: 34px;
		min-height: 360px
	}
	.cta-box h2 {
		font-size: 34px
	}
	.float {
		right: 14px;
		bottom: 14px
	}
	.float a {
		padding: 11px 13px;
		font-size: 13px
	}

	.strength-pictogram-grid{
		grid-template-columns:1fr;
		gap:14px;
	}
	.strength-pictogram-item,
	.strength-pictogram-item:last-child{
		width:100%;
		grid-column:auto;
		display:grid;
		grid-template-columns:96px minmax(0,1fr);
		grid-template-rows:auto auto;
		column-gap:18px;
		align-items:center;
		text-align:left;
		padding:18px;
	}
	.strength-pictogram{
		grid-column:1;
		grid-row:1 / span 2;
		width:96px !important;
		height:96px !important;
		margin:0 !important;
		padding:7px !important;
		border-radius:22px !important;
	}
	.strength-pictogram-item b{
		grid-column:2;
		grid-row:1;
		min-height:0;
		justify-content:flex-start;
		margin:0 0 5px;
		text-align:left;
		font-size:17px;
	}
	.strength-pictogram-item span{
		grid-column:2;
		grid-row:2;
		text-align:left;
		font-size:13px;
	}
    .health-performance{
        position:relative;
        right:auto;
        bottom:auto;
        width:auto;
        margin:0 18px 20px;
        padding:20px;
        border-radius:19px;
    }
    .health-performance-value strong{
        font-size:36px;
    }		
}


@media ( max-width :980px) {
	.history-intro {
		grid-template-columns: 1fr;
	}
	.timeline {
		padding: 30px 24px;
	}
	.timeline:before {
		left: 52px;
		top: 58px;
		bottom: 58px;
	}
	.timeline:after {
		display: none;
	}
	.history-item {
		grid-template-columns: 66px 1fr;
		gap: 18px;
	}
	.year {
		width: 56px;
		height: 56px;
		border-radius: 18px;
		font-size: 13px;
		box-shadow: 0 14px 28px rgba(8, 119, 242, .20), 0 0 0 7px rgba(8, 119, 242, .06);
	}
}

@media ( max-width :560px) {
	.timeline {
		padding: 24px 16px;
		border-radius: 30px;
	}
	.timeline:before {
		left: 38px;
	}
	.history-item {
		grid-template-columns: 48px 1fr;
		gap: 13px;
		padding-bottom: 22px;
	}
	.year {
		width: 44px;
		height: 44px;
		border-radius: 14px;
		font-size: 12px;
	}
	.history-card {
		padding: 18px 17px;
		border-radius: 22px;
	}
	.history-card b {
		font-size: 18px;
	}
	.history-card span {
		font-size: 13px;
	}
}

@media(max-width:400px){
	.strength-pictogram-item,
	.strength-pictogram-item:last-child{
		grid-template-columns:82px minmax(0,1fr);
		column-gap:14px;
		padding:15px;
	}
	.strength-pictogram{
		width:82px !important;
		height:82px !important;
	}
}


.health-performance.health-performance-bar{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    padding:24px 30px 24px 34px;
    margin:0 0 4px;
    border-radius:22px;
    background:linear-gradient(135deg,#ffffff 0%,#f4f7fb 100%);
    border:1px solid #d8e1ed;
    box-shadow:0 16px 38px rgba(31,52,88,.09);
    overflow:hidden;
}
.health-performance.health-performance-bar:before{
    top:0;
    bottom:0;
    left:0;
    right:auto;
    width:5px;
    height:auto;
    background:linear-gradient(180deg,#31589e,#8fa9ca);
}
.health-performance-intro{
    min-width:0;
    display:flex;
    align-items:center;
    gap:18px;
}

.health-performance-bar .health-performance-label{
    display:block;
    margin-bottom:3px;
    font-size:16px;
    color:#263752;
}
.health-performance-bar .health-performance-note{
    font-size:13px;
    color:#68758a;
}
.health-performance-bar .health-performance-value{
    flex:0 0 auto;
    margin:0;
    white-space:nowrap;
}

.health-performance-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.health-performance-value > strong {
    display: block;
    font-size: 48px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -2px;
}

.health-performance-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
}

.health-performance-date {
    display: block;
    font-size: 13px;
    line-height: 1.2;
    color: #64748b;
    white-space: nowrap;
}

.health-performance-unit {
    display: block;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
    color: #0a32b1;
}
.health-performance-bar .health-performance-value strong{
    font-size:clamp(38px,4.2vw,56px);
    color:#0a32b1;
}
health-performance-bar .health-performance-date{
    padding:8px 12px;
    font-size:12px;
    background:#edf2f8;
    border-color:#d8e1ed;
    color:#52657d;
}
.health-performance-bar .health-performance-value span.box{
    padding-bottom:7px;
    font-size:12px;
    color:#31589e;
}
@media(max-width:760px){
    .health-performance.health-performance-bar{
        display:grid;
        gap:16px;
        padding:21px 20px 22px 24px;
        margin-bottom:0;
        border-radius:20px;
    }
    .health-performance-intro{
        align-items:flex-start;
        gap:12px;
    }
    .health-performance-bar .health-performance-date{
        margin-top:1px;
    }
    .health-performance-bar .health-performance-value strong{
        font-size:38px;
    }
}
@media(max-width:430px){
    .health-performance-intro{
        display:grid;
        gap:9px;
    }
    .health-performance-bar .health-performance-date{
        justify-self:start;
    }
    .health-performance-bar .health-performance-value strong{
        font-size:34px;
    }
}

/* [수정] 지도와 도시 레이어가 들어갈 공간 - 모바일 대응 반응형 구조 */
.map-render-area {
	position: relative; /* 자식 요소들의 기준점 */
	width: 100%; /* 모바일에서는 부모 너비에 맞춤 */
	max-width: 500px; /* 데스크톱 등 큰 화면에서의 최대 크기 제한 */
	aspect-ratio: 1/1; /* 가로세로 1:1 비율을 강제 유지 (핀 밀림 방지) */
	margin: 0 auto; /* 중앙 정렬 */
}

/* 아래에 깔릴 배경 지도 이미지 */
.bg-map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1; /* 밑에 깔리도록 설정 */
	pointer-events: none; /* 마우스 이벤트 방해 금지 */
}

/* 위에 얹어질 도시 노선 및 핀 SVG */
.korea-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2; /* 지도 위에 올라오도록 설정 */
}

.hero-video{
    opacity:1;
    transition:opacity .8s;
}

/* Service pictogram cards */
.service-pictogram {
    width: 100%;
    aspect-ratio: 2.35 / 1; /*3.35*/
    margin: 0 0 20px;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4e9f0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-pictogram img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.cards .card {
    display: flex;
    flex-direction: column;
}
@media (max-width: 640px) {
    .services .cards {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px;
    }
    .services .card {
        padding: 20px;
    }
    .service-pictogram {
        aspect-ratio: auto;
        min-height: 0;
        margin-bottom: 18px;
        border-radius: 14px;
    }
    .service-pictogram img {
        width: 100%;
        height: auto;
    }
}

/* =========================================================
   Services balanced layout
   - Restore the nationwide logistics photo at a narrower width
   - Keep service pictograms large but prevent excessive stretching
   ========================================================= */
.services-grid{
    display:grid !important;
    grid-template-columns:minmax(250px, 450px) minmax(0, 1fr) !important;
    gap:28px !important;
    align-items:start !important;
}
.services-grid > .services-photo-panel{
    display:block !important;
    min-height:620px !important;
    height:calc(100vh - 150px);
    max-height:780px;
    position:sticky;
    top:104px;
    border-radius:8px !important;
}
.services-photo-panel .photo-panel-content{
    left:24px;
    right:24px;
    bottom:26px;
}
.services-photo-panel .photo-panel-content h2{
    font-size:clamp(25px, 2.4vw, 34px);
    line-height:1.22;
}
.services-photo-panel .photo-panel-content p{
    font-size:14px;
    line-height:1.65;
}
.services .cards{
    width:100%;
    min-width:0;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:20px !important;
}
.services .card{
    padding:26px 28px 28px !important;
    gap:16px !important;
}
.services .service-pictogram{
    width:100% !important;
    max-width:900px !important;
    margin:0 auto !important;
    padding:8px 10px !important;
}
.services .service-pictogram img{
    width:100% !important;
    height:auto !important;
}
.multiline {
	white-space: pre-line;
}
@media (max-width:1020px){
    .services-grid{
        grid-template-columns:1fr !important;
        gap:22px !important;
    }
    .services-grid > .services-photo-panel{
        position:relative;
        top:auto;
        height:260px;
        min-height:260px !important;
        max-height:none;
    }
    .services-photo-panel img{
        object-position:center 56%;
    }
    .services-photo-panel .photo-panel-content h2{
        font-size:28px;
    }
}
@media (max-width:640px){
    .services-grid > .services-photo-panel{
        height:210px;
        min-height:210px !important;
        border-radius:22px !important;
    }
    .services-photo-panel .photo-panel-content{
        left:20px;
        right:20px;
        bottom:20px;
    }
    .services-photo-panel .photo-panel-content h2{
        font-size:24px;
        margin-bottom:7px;
    }
    .services-photo-panel .photo-panel-content p{
        font-size:13px;
    }
    .services .card{
        padding:20px 16px 22px !important;
    }
    .services .service-pictogram{
        padding:4px 0 !important;
    }
}