@charset "utf-8";
/* CSS Document */

/* =========================================================
   LINK-KUANG CHEMICAL
   CUSTOM CSS
========================================================= */

:root {

	--lk-blue: #0090b8;
	--lk-blue-light: #00b8eb;
	--lk-blue-dark: #006f91;

	--lk-navy: #0b2545;
	--lk-dark: #142536;

	--lk-text: #182536;
	--lk-muted: #657384;

	--lk-light: #f5f8fa;
	--lk-white: #ffffff;

	--lk-border: #dfe7ec;

	--lk-container: 1440px;

	--lk-shadow:
		0 20px 60px rgba(11,37,69,.10);

}


/* =========================================================
   GLOBAL
========================================================= */

html {
	scroll-behavior: smooth;
}

body {

	margin: 0;

	font-family:
		"Inter",
		"Noto Sans TC",
		Arial,
		sans-serif;

	color: var(--lk-text);

	background: #fff;

	-webkit-font-smoothing: antialiased;

}

img {
	display: block;
	max-width: 100%;
}

a {
	text-decoration: none;
}

button {
	font-family: inherit;
}

::selection {
	background: var(--lk-blue);
	color: #fff;
}


/* =========================================================
   CONTAINER
========================================================= */

.lk-container,
.lg-container {

	width: min(
		calc(100% - 80px),
		var(--lk-container)
	);

	margin-left: auto;
	margin-right: auto;

}


/* =========================================================
   HEADER
========================================================= */

.lg-header {

	position: fixed;

	top: 0;
	left: 0;

	width: 100%;

	z-index: 9999;

	background: rgba(255,255,255,.92);

	border-bottom:
		1px solid rgba(223,231,236,.7);

	backdrop-filter: blur(18px);

	transition:
		background .35s ease,
		box-shadow .35s ease;

}

.lg-header.is-scrolled {

	background:
		rgba(255,255,255,.97);

	box-shadow:
		0 10px 35px rgba(11,37,69,.08);

}


.lg-nav {

	width:
		min(calc(100% - 70px), 1560px);

	height: 92px;

	margin: auto;

	display: flex;

	align-items: center;

	gap: 30px;

}


/* =========================================================
   LOGO
========================================================= */

.lg-logo {

	display: flex;

	align-items: center;

	gap: 12px;

	flex-shrink: 0;

	color: var(--lk-navy);

}

.lg-logo:hover {
	color: var(--lk-navy);
}

.lg-logo-mark {

	width: 48px;
	height: 48px;

}

.lg-logo-mark img {

	width: 100%;
	height: 100%;

	object-fit: contain;

}

.lg-logo-text {

	display: flex;

	flex-direction: column;

	gap: 3px;

}

.lg-logo-text strong {

	font-size: 18px;

	font-weight: 800;

	letter-spacing: .04em;

}

.lg-logo-text small {

	font-size: 8px;

	font-weight: 600;

	letter-spacing: .08em;

	color: var(--lk-muted);

	white-space: nowrap;

}


/* =========================================================
   NAV
========================================================= */

.lg-main-nav {

	margin-left: auto;

}

.lg-main-nav ul {

	margin: 0;
	padding: 0;

	list-style: none;

}

.lg-main-nav > ul {

	display: flex;

	align-items: center;

	gap: 4px;

}

.lg-main-nav > ul > li {

	position: relative;

}

.lg-main-nav > ul > li > a {

	position: relative;

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 3px;

	padding: 10px 16px;

	color: var(--lk-text);

}

.lg-main-nav > ul > li > a::after {

	content: "";

	position: absolute;

	left: 16px;
	right: 16px;
	bottom: 2px;

	height: 2px;

	background: var(--lk-blue);

	transform: scaleX(0);

	transition:
		transform .3s ease;

}

.lg-main-nav > ul > li > a:hover,
.lg-main-nav > ul > li > a.active {

	color: var(--lk-blue);

}

.lg-main-nav > ul > li > a:hover::after,
.lg-main-nav > ul > li > a.active::after {

	transform: scaleX(1);

}

.nav-cn {

	font-size: 15px;

	font-weight: 700;

}

.nav-en {

	font-size: 8px;

	font-weight: 600;

	letter-spacing: .15em;

	color: #8996a2;

}


/* =========================================================
   DROPDOWN
========================================================= */

.lg-dropdown {

	position: absolute;

	top: calc(100% + 18px);

	left: 50%;

	width: 270px;

	padding: 10px;

	background: #fff;

	border: 1px solid var(--lk-border);

	box-shadow: var(--lk-shadow);

	transform:
		translate(-50%,10px);

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	transition:
		opacity .3s ease,
		transform .3s ease,
		visibility .3s ease;

}

.lg-dropdown::before {

	content: "";

	position: absolute;

	top: -7px;

	left: 50%;

	width: 13px;
	height: 13px;

	background: #fff;

	border-left: 1px solid var(--lk-border);
	border-top: 1px solid var(--lk-border);

	transform:
		translateX(-50%)
		rotate(45deg);

}

.has-dropdown:hover .lg-dropdown {

	opacity: 1;

	visibility: visible;

	pointer-events: auto;

	transform:
		translate(-50%,0);

}

.lg-dropdown > a {

	display: flex;

	align-items: center;

	gap: 15px;

	padding: 15px;

	color: var(--lk-text);

}

.lg-dropdown > a:hover {

	background: var(--lk-light);

	color: var(--lk-blue);

}

.drop-no {

	font-size: 10px;

	font-weight: 700;

	color: var(--lk-blue);

}

.lg-dropdown strong {

	display: block;

	font-size: 14px;

}

.lg-dropdown small {

	display: block;

	margin-top: 4px;

	font-size: 8px;

	color: var(--lk-muted);

	letter-spacing: .1em;

}


/* =========================================================
   NAV RIGHT
========================================================= */

.lg-nav-right {

	display: flex;

	align-items: center;

	gap: 15px;

	flex-shrink: 0;

}

.lg-contact-btn {

	display: flex;

	align-items: center;

	gap: 14px;

	padding: 13px 16px 13px 20px;

	background: var(--lk-navy);

	color: #fff;

	font-size: 13px;

	font-weight: 700;

	transition: .3s ease;

}

.lg-contact-btn i {

	width: 27px;
	height: 27px;

	display: flex;

	align-items: center;
	justify-content: center;

	background: var(--lk-blue);

	font-style: normal;

}

.lg-contact-btn:hover {

	color: #fff;

	background: var(--lk-blue);

	transform: translateY(-2px);

}

.lg-contact-btn:hover i {

	background: #fff;

	color: var(--lk-blue);

}


/* =========================================================
   MOBILE BUTTON
========================================================= */

.lg-menu-toggle {

	display: none;

	position: relative;

	width: 44px;
	height: 44px;

	border: 0;

	background: transparent;

	cursor: pointer;

}

.lg-menu-toggle span {

	position: absolute;

	left: 10px;

	width: 24px;
	height: 2px;

	background: var(--lk-navy);

	transition: .3s ease;

}

.lg-menu-toggle span:first-child {
	top: 17px;
}

.lg-menu-toggle span:last-child {
	top: 26px;
}

.lg-menu-toggle.active span:first-child {

	top: 22px;

	transform: rotate(45deg);

}

.lg-menu-toggle.active span:last-child {

	top: 22px;

	transform: rotate(-45deg);

}


/* =========================================================
   HERO
========================================================= */

.lk-hero {

	position: relative;

	min-height: 880px;

	padding-top: 92px;

	overflow: hidden;

	background:

		radial-gradient(
			circle at 78% 40%,
			rgba(0,184,235,.08),
			transparent 35%
		),

		linear-gradient(
			135deg,
			#f7fafc,
			#fff 55%,
			#f1f8fb
		);

}


/* =========================================================
   HERO BACKGROUND
========================================================= */

.lk-hero-bg {

	position: absolute;

	inset: 0;

	pointer-events: none;

}

.lk-grid {

	position: absolute;

	inset: 0;

	background-image:

		linear-gradient(
			rgba(0,144,184,.055) 1px,
			transparent 1px
		),

		linear-gradient(
			90deg,
			rgba(0,144,184,.055) 1px,
			transparent 1px
		);

	background-size: 70px 70px;

	mask-image:
		linear-gradient(
			to right,
			transparent,
			black 30%,
			black 75%,
			transparent
		);

}

.lk-grid-glow {

	position: absolute;

	width: 650px;
	height: 650px;

	right: -150px;
	top: 80px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(0,184,235,.13),
			transparent 68%
		);

}

.lk-bg-circle {

	position: absolute;

	border: 1px solid rgba(0,144,184,.09);

	border-radius: 50%;

}

.lk-bg-circle-1 {

	width: 650px;
	height: 650px;

	right: -270px;
	top: 90px;

}

.lk-bg-circle-2 {

	width: 420px;
	height: 420px;

	right: 120px;
	top: 220px;

}


/* =========================================================
   SIDE
========================================================= */

.lk-hero-side {

	position: absolute;

	left: 25px;

	top: 50%;

	transform: translateY(-50%);

	z-index: 3;

}

.lk-hero-side span {

	writing-mode: vertical-rl;

	font-size: 10px;

	font-weight: 600;

	letter-spacing: .2em;

	line-height: 2;

	color: #8b98a4;

}


/* =========================================================
   HERO CONTAINER
========================================================= */

.lk-slider-container {

	position: relative;

	z-index: 5;

	min-height: 680px;

	display: grid;

	grid-template-columns:
		minmax(400px,.82fr)
		minmax(500px,1.18fr);

	align-items: center;

	gap: 70px;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.lk-slider-content {

	position: relative;

	z-index: 10;

}


/* =========================================================
   KICKER
========================================================= */

.lk-slider-kicker {

	display: flex;

	align-items: center;

	gap: 13px;

	margin-bottom: 28px;

}

.kicker-line {

	width: 38px;

	height: 1px;

	background: var(--lk-blue);

}

.lk-slider-kicker span:last-child {

	font-size: 10px;

	font-weight: 700;

	letter-spacing: .18em;

	color: var(--lk-blue);

}


/* =========================================================
   TITLE
========================================================= */

.lk-slider-title-wrap {

	position: relative;

}

.lk-slider-number {

	position: absolute;

	left: 0;
	top: -70px;

	font-size: 120px;

	font-weight: 800;

	line-height: 1;

	letter-spacing: -.08em;

	color: rgba(0,144,184,.055);

}

.lk-slider-title {

	position: relative;

	z-index: 2;

	margin: 0;

	font-size: clamp(44px,4.6vw,74px);

	font-weight: 700;

	line-height: 1.18;

	letter-spacing: -.04em;

	color: var(--lk-navy);

}

.lk-slider-title span,
.lk-slider-title strong {

	display: block;

}

.lk-slider-title .title-indent {

	padding-left: 55px;

}

.lk-slider-title strong {

	color: var(--lk-blue);

	font-weight: 800;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.lk-slider-description {

	max-width: 560px;

	margin-top: 30px;

}

.lk-slider-description p {

	margin: 0;

	font-size: 15px;

	line-height: 2;

	color: var(--lk-muted);

}


/* =========================================================
   ACTION
========================================================= */

.lk-slider-actions {

	display: flex;

	align-items: center;

	gap: 30px;

	margin-top: 35px;

}

.lk-slider-btn {

	display: inline-flex;

	align-items: center;

	background: var(--lk-navy);

	color: #fff;

	transition: .3s ease;

}

.lk-slider-btn span {

	padding-left: 23px;

	font-size: 13px;

	font-weight: 700;

}

.lk-slider-btn strong {

	width: 48px;
	height: 48px;

	display: flex;

	align-items: center;
	justify-content: center;

	background: var(--lk-blue);

	font-size: 18px;

	font-weight: 400;

}

.lk-slider-btn:hover {

	color: #fff;

	transform: translateY(-3px);

	box-shadow:
		0 15px 35px rgba(11,37,69,.18);

}

.lk-slider-text-link {

	display: flex;

	align-items: center;

	gap: 10px;

	padding-bottom: 6px;

	border-bottom: 1px solid var(--lk-border);

	color: var(--lk-text);

	font-size: 13px;

	font-weight: 700;

}

.lk-slider-text-link span {

	color: var(--lk-blue);

	font-size: 17px;

}

.lk-slider-text-link:hover {

	color: var(--lk-blue);

	border-color: var(--lk-blue);

}


/* =========================================================
   TAGS
========================================================= */

.lk-material-tags {

	display: flex;

	flex-wrap: wrap;

	gap: 8px;

	margin-top: 45px;

}

.lk-material-tags span {

	padding: 7px 12px;

	border: 1px solid var(--lk-border);

	background: rgba(255,255,255,.7);

	font-size: 8px;

	font-weight: 700;

	letter-spacing: .13em;

	color: var(--lk-muted);

}


/* =========================================================
   VISUAL
========================================================= */

.lk-slider-visual {

	position: relative;

	height: 620px;

}

.lk-slider-image {

	position: absolute;

	right: 0;
	top: 20px;

	width: 90%;
	height: 570px;

	overflow: hidden;

	background: #dce8ed;

	box-shadow:
		0 30px 80px rgba(11,37,69,.18);

}

.lk-slider-image img {

	width: 100%;
	height: 100%;

	object-fit: cover;

	transform: scale(1.01);

	transition:
		transform 1.2s ease;

}

.lk-slider-image:hover img {

	transform: scale(1.05);

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.image-overlay {

	position: absolute;

	inset: 0;

	z-index: 2;

	background:
		linear-gradient(
			to top,
			rgba(11,37,69,.75),
			transparent 52%
		);

}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.image-caption {

	position: absolute;

	right: 32px;
	bottom: 30px;

	z-index: 4;

	display: flex;

	flex-direction: column;

	gap: 5px;

	color: #fff;

}

.image-caption span {

	font-size: 9px;

	letter-spacing: .16em;

	opacity: .75;

}

.image-caption strong {

	font-size: 22px;

	font-weight: 700;

}


/* =========================================================
   IMAGE INDEX
========================================================= */

.image-index {

	position: absolute;

	top: 25px;
	right: 25px;

	z-index: 5;

	width: 48px;
	height: 48px;

	display: flex;

	align-items: center;
	justify-content: center;

	border: 1px solid rgba(255,255,255,.5);

	color: #fff;

	font-size: 12px;

	font-weight: 700;

}


/* =========================================================
   FLOATING CARD
========================================================= */

.lk-floating-card {

	position: absolute;

	left: -45px;
	bottom: 35px;

	z-index: 8;

	width: 230px;

	padding: 23px 25px;

	background:
		rgba(255,255,255,.94);

	border: 1px solid rgba(223,231,236,.8);

	box-shadow:
		0 20px 55px rgba(11,37,69,.14);

	backdrop-filter: blur(15px);

	animation:
		lkFloat 5s ease-in-out infinite;

}

.floating-label {

	display: block;

	margin-bottom: 9px;

	font-size: 8px;

	font-weight: 700;

	letter-spacing: .18em;

	color: var(--lk-blue);

}

.lk-floating-card strong {

	display: block;

	font-size: 18px;

	color: var(--lk-navy);

}

.lk-floating-card small {

	display: block;

	margin-top: 6px;

	font-size: 11px;

	line-height: 1.7;

	color: var(--lk-muted);

}

@keyframes lkFloat {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}

}


/* =========================================================
   CROSS
========================================================= */

.lk-visual-cross {

	position: absolute;

	width: 20px;
	height: 20px;

	z-index: 7;

}

.lk-visual-cross::before,
.lk-visual-cross::after {

	content: "";

	position: absolute;

	background: var(--lk-blue);

}

.lk-visual-cross::before {

	width: 20px;
	height: 1px;

	top: 9px;

}

.lk-visual-cross::after {

	width: 1px;
	height: 20px;

	left: 9px;

}

.cross-01 {

	right: -25px;
	top: 80px;

}

.cross-02 {

	left: -25px;
	top: 280px;

	transform: scale(.7);

}


/* =========================================================
   SLIDER NAVIGATION
========================================================= */

.lk-slider-navigation {

	position: absolute;

	left: 50%;
	bottom: 105px;

	z-index: 10;

	width:
		min(calc(100% - 80px),var(--lk-container));

	transform: translateX(-50%);

	display: flex;

	align-items: center;

}

.slider-nav-label {

	display: flex;

	flex-direction: column;

	gap: 4px;

	min-width: 190px;

}

.slider-nav-label span {

	font-size: 8px;

	font-weight: 700;

	letter-spacing: .18em;

	color: var(--lk-blue);

}

.slider-nav-label strong {

	font-size: 13px;

	color: var(--lk-navy);

}


/* =========================================================
   NUMBERS
========================================================= */

.slider-numbers {

	display: flex;

	align-items: center;

	gap: 5px;

}

.slider-numbers button {

	width: 42px;
	height: 42px;

	border: 1px solid transparent;

	background: transparent;

	color: #93a0ac;

	cursor: pointer;

	font-size: 11px;

	font-weight: 700;

	transition: .3s ease;

}

.slider-numbers button:hover {

	color: var(--lk-blue);

}

.slider-numbers button.active {

	background: var(--lk-navy);

	color: #fff;

	border-color: var(--lk-navy);

}


/* =========================================================
   CONTROLS
========================================================= */

.slider-controls {

	margin-left: auto;

	display: flex;

	gap: 7px;

}

.slider-controls button {

	width: 44px;
	height: 44px;

	border: 1px solid var(--lk-border);

	background: rgba(255,255,255,.85);

	color: var(--lk-navy);

	cursor: pointer;

	font-size: 17px;

	transition: .3s ease;

}

.slider-controls button:hover {

	background: var(--lk-blue);

	color: #fff;

	border-color: var(--lk-blue);

}


/* =========================================================
   HERO BOTTOM
========================================================= */

.lk-hero-bottom {

	position: absolute;

	left: 50%;
	bottom: 32px;

	z-index: 8;

	width:
		min(calc(100% - 80px),var(--lk-container));

	transform: translateX(-50%);

	display: grid;

	grid-template-columns: 1fr auto 1fr;

	align-items: center;

}

.hero-scroll {

	display: flex;

	align-items: center;

	gap: 10px;

	font-size: 9px;

	color: #8b98a4;

}

.scroll-arrow {

	width: 22px;
	height: 22px;

	display: flex;

	align-items: center;
	justify-content: center;

	border: 1px solid var(--lk-border);

	color: var(--lk-blue);

}

.hero-counter {

	display: flex;

	align-items: center;

	gap: 10px;

	font-size: 10px;

	color: #8b98a4;

}

.counter-current {

	font-size: 14px;

	color: var(--lk-navy);

}

.counter-line {

	width: 70px;

	height: 1px;

	background: var(--lk-border);

}

.hero-location {

	justify-self: end;

	font-size: 9px;

	color: #8b98a4;

	letter-spacing: .14em;

}


/* =========================================================
   LK INTRO
   MATERIAL × APPLICATION
========================================================= */

.lk-intro {

	position: relative;

	overflow: hidden;

	background: #ffffff;

	padding: 150px 0 130px;

}


/* =========================================================
   MAIN WRAP
========================================================= */

.lk-intro-wrap {

	position: relative;

	display: grid;

	grid-template-columns: 40% 60%;

	align-items: center;

	min-height: 680px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.lk-intro-content {

	position: relative;

	z-index: 10;

	padding-right: 70px;

}


/* =========================================================
   NUMBER
========================================================= */

.lk-intro-number {

	margin-bottom: 30px;

	font-family: "Roboto", sans-serif;

	font-size: 14px;

	font-weight: 500;

	letter-spacing: .18em;

	color: var(--lk-blue);

}


.lk-intro-number span {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 48px;

	height: 48px;

	border: 1px solid rgba(0, 144, 184, .35);

	border-radius: 50%;

}


/* =========================================================
   LABEL
========================================================= */

.lk-intro-label {

	display: flex;

	align-items: center;

	gap: 14px;

	margin-bottom: 25px;

	font-family: "Roboto", sans-serif;

	font-size: 12px;

	font-weight: 600;

	letter-spacing: .16em;

	color: var(--lk-blue);

}


.lk-intro-label-line {

	display: block;

	width: 36px;

	height: 1px;

	background: var(--lk-blue);

}


/* =========================================================
   TITLE
========================================================= */

.lk-intro-title {

	margin: 0;

	font-size: clamp(42px, 4vw, 66px);

	line-height: 1.25;

	font-weight: 300;

	letter-spacing: -.045em;

	color: #172731;

}


.lk-intro-title strong {

	font-weight: 700;

	color: var(--lk-blue);

	position: relative;

}


.lk-intro-title strong::after {

	content: "";

	position: absolute;

	left: 0;

	right: 0;

	bottom: 3px;

	height: 6px;

	background: rgba(0, 184, 235, .12);

	z-index: -1;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.lk-intro-description {

	max-width: 470px;

	margin-top: 35px;

}


.lk-intro-description p {

	margin: 0;

	font-size: 16px;

	line-height: 2;

	color: #657384;

}


/* =========================================================
   LINK
========================================================= */

.lk-intro-link {

	display: inline-flex;

	align-items: center;

	gap: 24px;

	margin-top: 35px;

	padding-bottom: 12px;

	border-bottom: 1px solid #182536;

	color: #182536;

	font-size: 14px;

	font-weight: 600;

	text-decoration: none;

	transition: all .35s ease;

}


.lk-intro-link strong {

	font-family: Arial, sans-serif;

	font-size: 20px;

	font-weight: 400;

	transition: transform .35s ease;

}


.lk-intro-link:hover {

	color: var(--lk-blue);

	border-color: var(--lk-blue);

}


.lk-intro-link:hover strong {

	transform: translate(5px, -5px);

}


/* =========================================================
   META
========================================================= */

.lk-intro-meta {

	display: flex;

	align-items: center;

	gap: 12px;

	margin-top: 60px;

	font-family: "Roboto", sans-serif;

	font-size: 9px;

	letter-spacing: .16em;

	color: #9aa8af;

}


.meta-dot {

	width: 3px;

	height: 3px;

	border-radius: 50%;

	background: var(--lk-blue);

}


/* =========================================================
   MATERIAL MAP
========================================================= */

.lk-material-map {

	position: relative;

	width: 100%;

	height: 680px;

	overflow: hidden;

}


/* =========================================================
   GRID
========================================================= */

.lk-map-grid {

	position: absolute;

	inset: 0;

	background-image:

		linear-gradient(
			rgba(0, 144, 184, .055) 1px,
			transparent 1px
		),

		linear-gradient(
			90deg,
			rgba(0, 144, 184, .055) 1px,
			transparent 1px
		);

	background-size: 48px 48px;

	mask-image: linear-gradient(
		to bottom,
		transparent,
		black 15%,
		black 85%,
		transparent
	);

}


/* =========================================================
   COORDINATES
========================================================= */

.lk-map-coordinate {

	position: absolute;

	font-family: "Roboto", sans-serif;

	font-size: 9px;

	letter-spacing: .15em;

	color: #a3b0b6;

}


.lk-map-coordinate span {

	color: var(--lk-blue);

}


.coordinate-top {

	top: 55px;

	right: 20px;

}


.coordinate-bottom {

	bottom: 55px;

	left: 20px;

}


/* =========================================================
   OUTER RINGS
========================================================= */

.lk-map-ring {

	position: absolute;

	left: 50%;

	top: 50%;

	border: 1px solid rgba(0, 144, 184, .10);

	border-radius: 50%;

	transform: translate(-50%, -50%);

}


.map-ring-1 {

	width: 320px;

	height: 320px;

}


.map-ring-2 {

	width: 470px;

	height: 470px;

	border-style: dashed;

	animation: lkRingRotate 30s linear infinite;

}


.map-ring-3 {

	width: 610px;

	height: 610px;

	border-color: rgba(0, 144, 184, .06);

}


/* =========================================================
   RING ROTATE
========================================================= */

@keyframes lkRingRotate {

	from {

		transform:
			translate(-50%, -50%)
			rotate(0deg);

	}

	to {

		transform:
			translate(-50%, -50%)
			rotate(360deg);

	}

}


/* =========================================================
   CONNECTION LINES
========================================================= */

.lk-map-line {

	position: absolute;

	height: 1px;

	background: linear-gradient(
		90deg,
		transparent,
		rgba(0, 184, 235, .7),
		transparent
	);

	transform-origin: left center;

	opacity: .65;

}


.lk-map-line::after {

	content: "";

	position: absolute;

	right: 0;

	top: 50%;

	width: 5px;

	height: 5px;

	border-radius: 50%;

	background: var(--lk-cyan);

	transform: translateY(-50%);

	box-shadow:
		0 0 10px rgba(0, 184, 235, .8);

}


/* PU */

.line-pu {

	width: 235px;

	left: 90px;

	top: 205px;

	transform: rotate(13deg);

}


/* EPOXY */

.line-epoxy {

	width: 245px;

	left: 105px;

	top: 320px;

	transform: rotate(3deg);

}


/* ACRYLIC */

.line-acrylic {

	width: 245px;

	left: 100px;

	top: 440px;

	transform: rotate(-5deg);

}


/* WATERPROOF */

.line-waterproof {

	width: 240px;

	left: 115px;

	top: 535px;

	transform: rotate(-13deg);

}


/* Applications */

.line-building {

	width: 215px;

	left: 50%;

	top: 50%;

	transform:
		rotate(-12deg)
		translateY(-120px);

}


.line-floor {

	width: 235px;

	left: 50%;

	top: 50%;

	transform:
		rotate(8deg)
		translateY(-10px);

}


.line-water {

	width: 230px;

	left: 50%;

	top: 50%;

	transform:
		rotate(17deg)
		translateY(100px);

}


.line-industrial {

	width: 205px;

	left: 50%;

	top: 50%;

	transform:
		rotate(28deg)
		translateY(180px);

}


/* =========================================================
   MATERIAL NODE
========================================================= */

.lk-material-node {

	position: absolute;

	z-index: 5;

	display: flex;

	align-items: center;


	gap: 12px;

}


.node-dot {

	position: relative;

	width: 10px;

	height: 10px;

	border: 1px solid var(--lk-blue);

	border-radius: 50%;

	background: #ffffff;

	box-shadow:
		0 0 0 5px rgba(0, 144, 184, .08),
		0 0 15px rgba(0, 184, 235, .35);

}


.node-dot::after {

	content: "";

	position: absolute;

	left: 50%;

	top: 50%;

	width: 3px;

	height: 3px;

	border-radius: 50%;

	background: var(--lk-cyan);

	transform: translate(-50%, -50%);

}


.node-content {

	display: flex;

	flex-direction: column;

	gap: 3px;

}


.node-content strong {

	font-family: "Roboto", sans-serif;

	font-size: 13px;

	font-weight: 600;

	letter-spacing: .08em;

	color: #182536;

}


.node-content span {

	font-size: 10px;

	color: #89979e;

}


/* =========================================================
   NODE POSITIONS
========================================================= */

.node-pu {

	left: 48px;

	top: 175px;

}


.node-epoxy {

	left: 80px;

	top: 290px;

}


.node-acrylic {

	left: 72px;

	top: 415px;

}


.node-waterproof {

	left: 55px;

	top: 525px;

}


/* =========================================================
   MATERIAL CORE
========================================================= */

.lk-material-core {

	position: absolute;

	left: 50%;

	top: 50%;

	width: 190px;

	height: 190px;

	transform: translate(-50%, -50%);

	z-index: 10;

	display: flex;

	align-items: center;

	justify-content: center;

}


/* Pulse */

.core-pulse {

	position: absolute;

	inset: 20px;

	border-radius: 50%;

	background: rgba(0, 184, 235, .08);

	animation: lkCorePulse 3s ease-in-out infinite;

}


@keyframes lkCorePulse {

	0%,
	100% {

		transform: scale(.85);

		opacity: .35;

	}

	50% {

		transform: scale(1.12);

		opacity: .7;

	}

}


/* Core Circle */

.core-circle {

	position: relative;

	z-index: 3;

	width: 132px;

	height: 132px;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	border: 1px solid rgba(0, 144, 184, .45);

	border-radius: 50%;

	background: rgba(255,255,255,.96);

	box-shadow:

		0 0 0 10px rgba(0, 184, 235, .035),

		0 15px 50px rgba(0, 55, 75, .10);

}


.core-circle::before {

	content: "";

	position: absolute;

	inset: 8px;

	border: 1px dashed rgba(0, 144, 184, .18);

	border-radius: 50%;

}


.core-number {

	font-family: "Roboto", sans-serif;

	font-size: 9px;

	letter-spacing: .15em;

	color: var(--lk-blue);

}


.core-circle strong {

	margin-top: 7px;

	font-family: "Roboto", sans-serif;

	font-size: 16px;

	font-weight: 600;

	letter-spacing: .12em;

	color: #182536;

}


.core-circle small {

	margin-top: 4px;

	font-size: 10px;

	color: #89979e;

}


/* =========================================================
   CROSSHAIR
========================================================= */

.core-crosshair {

	position: absolute;

	z-index: 4;

	background: rgba(0, 144, 184, .25);

}


.crosshair-x {

	width: 230px;

	height: 1px;

	left: -20px;

	top: 50%;

}


.crosshair-y {

	width: 1px;

	height: 230px;

	top: -20px;

	left: 50%;

}


/* =========================================================
   APPLICATION NODE
========================================================= */

.lk-application-node {

	position: absolute;

	z-index: 6;

	display: flex;

	align-items: center;

	gap: 12px;

	padding: 10px 14px;

	background: rgba(255,255,255,.82);

	border: 1px solid rgba(0,144,184,.12);

	backdrop-filter: blur(8px);

	-webkit-backdrop-filter: blur(8px);

}


.application-index {

	font-family: "Roboto", sans-serif;

	font-size: 9px;

	color: var(--lk-blue);

}


.lk-application-node div {

	display: flex;

	flex-direction: column;

	gap: 3px;

}


.lk-application-node strong {

	font-size: 12px;

	font-weight: 600;

	color: #182536;

}


.lk-application-node small {

	font-family: "Roboto", sans-serif;

	font-size: 8px;

	letter-spacing: .12em;

	color: #9aa7ad;

}


/* =========================================================
   APPLICATION POSITIONS
========================================================= */

.application-building {

	right: 58px;

	top: 175px;

}


.application-floor {

	right: 28px;

	top: 295px;

}


.application-water {

	right: 35px;

	top: 420px;

}


.application-industrial {

	right: 58px;

	top: 525px;

}


/* =========================================================
   FLOATING LABEL
========================================================= */

.lk-map-floating {

	position: absolute;

	right: 15px;

	top: 65px;

	z-index: 20;

	display: flex;

	align-items: center;

	gap: 10px;

	padding: 9px 12px;

	border-left: 2px solid var(--lk-blue);

	background: rgba(255,255,255,.8);

}


.floating-status {

	width: 6px;

	height: 6px;

	border-radius: 50%;

	background: var(--lk-cyan);

	box-shadow:
		0 0 10px rgba(0,184,235,.8);

	animation: lkStatus 2s infinite;

}


@keyframes lkStatus {

	0%,
	100% {

		opacity: 1;

	}

	50% {

		opacity: .35;

	}

}


.lk-map-floating div {

	display: flex;

	flex-direction: column;

	gap: 2px;

}


.lk-map-floating strong {

	font-family: "Roboto", sans-serif;

	font-size: 9px;

	letter-spacing: .12em;

	color: #182536;

}


.lk-map-floating small {

	font-size: 9px;

	color: #8a989e;

}


/* =========================================================
   PARTICLES
========================================================= */

.lk-map-particle {

	position: absolute;

	width: 4px;

	height: 4px;

	border-radius: 50%;

	background: var(--lk-cyan);

	box-shadow:
		0 0 10px rgba(0,184,235,.7);

	animation: lkParticle 4s ease-in-out infinite;

}


.particle-1 {

	left: 35%;

	top: 18%;

}


.particle-2 {

	left: 72%;

	top: 27%;

	animation-delay: .8s;

}


.particle-3 {

	left: 30%;

	top: 70%;

	animation-delay: 1.5s;

}


.particle-4 {

	left: 78%;

	top: 73%;

	animation-delay: 2.1s;

}


.particle-5 {

	left: 48%;

	top: 14%;

	animation-delay: 2.8s;

}


@keyframes lkParticle {

	0%,
	100% {

		transform: translateY(0);

		opacity: .3;

	}

	50% {

		transform: translateY(-10px);

		opacity: 1;

	}

}




/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

	.lk-intro {

		padding: 120px 0 110px;

	}


	.lk-intro-wrap {

		grid-template-columns: 42% 58%;

	}


	.lk-intro-content {

		padding-right: 35px;

	}


	.lk-intro-title {

		font-size: 48px;

	}


	.lk-material-map {

		transform: scale(.9);

		transform-origin: center;

	}


	.application-building {

		right: 30px;

	}


	.application-floor {

		right: 10px;

	}


	.application-water {

		right: 15px;

	}


	.application-industrial {

		right: 30px;

	}

}


@media (max-width: 991px) {

	.lk-intro {

		padding: 100px 0;

	}


	.lk-intro-wrap {

		display: block;

	}


	.lk-intro-content {

		padding-right: 0;

		max-width: 650px;

	}


	.lk-intro-title {

		font-size: 52px;

	}


	.lk-intro-description {

		max-width: 600px;


	}


	.lk-material-map {

		height: 620px;

		margin-top: 70px;

		transform: none;

	}



}


@media (max-width: 767px) {

	.lk-intro {

		padding: 80px 0 90px;

	}


	.lk-intro-number {

		margin-bottom: 22px;

	}


	.lk-intro-number span {

		width: 42px;

		height: 42px;

	}


	.lk-intro-label {

		font-size: 10px;

	}


	.lk-intro-title {

		font-size: 40px;

		line-height: 1.3;

	}


	.lk-intro-description {

		margin-top: 25px;

	}


	.lk-intro-description p {

		font-size: 14px;

		line-height: 1.9;

	}


	.lk-intro-meta {

		margin-top: 40px;

	}


	.lk-material-map {

		height: 540px;

		margin-top: 45px;

	}


	.lk-map-grid {

		background-size: 35px 35px;

	}


	.lk-map-ring {

		left: 50%;

	}


	.map-ring-1 {

		width: 250px;

		height: 250px;

	}


	.map-ring-2 {

		width: 370px;

		height: 370px;

	}


	.map-ring-3 {

		width: 480px;

		height: 480px;

	}


	.lk-material-core {

		width: 150px;

		height: 150px;

	}


	.core-circle {

		width: 105px;

		height: 105px;

	}


	.core-circle strong {

		font-size: 13px;

	}


	.crosshair-x {

		width: 180px;

		left: -15px;

	}


	.crosshair-y {

		height: 180px;

		top: -15px;

	}


	/* Material nodes */

	.node-pu {

		left: 10px;

		top: 135px;

	}


	.node-epoxy {

		left: 20px;

		top: 230px;

	}


	.node-acrylic {

		left: 15px;

		top: 335px;

	}


	.node-waterproof {

		left: 10px;

		top: 430px;

	}


	.node-content strong {

		font-size: 11px;

	}


	.node-content span {

		font-size: 8px;

	}


	/* Application */

	.application-building {

		right: 8px;

		top: 135px;

	}


	.application-floor {

		right: 0;

		top: 230px;

	}


	.application-water {

		right: 5px;

		top: 335px;

	}


	.application-industrial {

		right: 8px;

		top: 430px;

	}


	.lk-application-node {

		padding: 7px 9px;

	}


	.lk-application-node strong {

		font-size: 10px;

	}


	.lk-application-node small {

		font-size: 7px;

	}


	.lk-map-floating {

		top: 20px;

		right: 0;

	}


	.coordinate-top {

		top: 20px;

	}


	.coordinate-bottom {

		bottom: 20px;

	}


}


@media (max-width: 575px) {

	.lk-intro-title {

		font-size: 34px;

	}


	.lk-material-map {

		height: 470px;

		margin-left: -15px;

		margin-right: -15px;

	}


	.map-ring-1 {

		width: 210px;

		height: 210px;

	}


	.map-ring-2 {

		width: 310px;

		height: 310px;

	}


	.map-ring-3 {

		width: 400px;

		height: 400px;

	}


	.lk-material-core {

		transform:
			translate(-50%, -50%)
			scale(.82);

	}


	/* 隱藏部分輔助文字 */

	.node-content span {

		display: none;

	}


	.lk-application-node {

		gap: 7px;

	}


	.lk-application-node small {

		display: none;

	}


	.lk-map-floating {

		transform: scale(.85);

		transform-origin: right top;

	}


	/* Connection lines */

	.line-pu,
	.line-epoxy,
	.line-acrylic,
	.line-waterproof {

		width: 150px;

		left: 55px;

	}


	.line-building,
	.line-floor,
	.line-water,
	.line-industrial {

		width: 140px;

	}


}

/* =========================================================
   FOOTER
========================================================= */

.lg-footer {

	background: var(--lk-navy);

	color: #fff;

}

.footer-top {

	min-height: 150px;

	display: flex;

	align-items: center;

	justify-content: space-between;

}

.footer-brand {

	display: flex;

	flex-direction: column;

	gap: 6px;

}

.footer-brand strong {

	font-size: 18px;

}

.footer-brand span {

	font-size: 8px;

	color: rgba(255,255,255,.5);

	letter-spacing: .14em;

}

.footer-copy {

	font-size: 9px;

	color: rgba(255,255,255,.45);

}


/* =========================================================
   GO TOP
========================================================= */

#gotoTop {

	width: 45px;
	height: 45px;

	right: 25px;
	bottom: 25px;

	background: var(--lk-navy);

	color: #fff;

	border-radius: 0;

	transition: .3s ease;

}

#gotoTop:hover {

	background: var(--lk-blue);

	transform: translateY(-3px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1199px) {

	.lg-nav {

		width: calc(100% - 40px);

	}

	.lg-main-nav > ul > li > a {

		padding-left: 10px;
		padding-right: 10px;

	}

	.lk-slider-container {

		gap: 40px;

	}

	.lk-slider-title {

		font-size: 52px;

	}

	.lk-slider-title .title-indent {

		padding-left: 35px;

	}

}


/* =========================================================
   MOBILE NAV
========================================================= */

@media (max-width:991px) {

	.lg-nav {

		height: 76px;

	}

	.lg-logo-text small {

		display: none;

	}

	.lg-main-nav {

		position: fixed;

		top: 86px;

		left: 20px;
		right: 20px;

		padding: 12px;

		background: rgba(255,255,255,.98);

		border: 1px solid var(--lk-border);

		box-shadow: var(--lk-shadow);

		max-height:
			calc(100vh - 105px);

		overflow-y: auto;

		opacity: 0;

		visibility: hidden;

		transform: translateY(-10px);

		transition: .3s ease;

	}

	.lg-main-nav.mobile-open {

		opacity: 1;

		visibility: visible;

		transform: translateY(0);

	}

	.lg-main-nav > ul {

		display: block;

	}

	.lg-main-nav > ul > li {

		border-bottom: 1px solid var(--lk-border);

	}

	.lg-main-nav > ul > li > a {

		flex-direction: row;

		justify-content: space-between;

		padding: 15px 12px;

	}

	.lg-main-nav > ul > li > a::after {

		display: none;

	}

	.nav-en {

		margin-left: auto;

		margin-right: 15px;

	}

	.lg-dropdown,
	.lg-dropdown-wide {

		position: static;

		width: auto;

		display: none;

		padding: 0 8px 10px;

		border: 0;

		box-shadow: none;

		transform: none;

	}

	.lg-dropdown::before {

		display: none;

	}

	.has-dropdown.dropdown-open .lg-dropdown {

		display: block;

		opacity: 1;

		visibility: visible;

	}

	.lg-contact-btn {

		display: none;

	}

	.lg-menu-toggle {

		display: block;

	}


	/* HERO */

	.lk-hero {

		min-height: auto;

		padding-top: 76px;

	}

	.lk-hero-side {

		display: none;

	}

	.lk-slider-container {

		min-height: auto;

		padding-top: 90px;

		padding-bottom: 180px;

		grid-template-columns: 1fr;

		gap: 60px;

	}

	.lk-slider-visual {

		height: 520px;

	}

	.lk-slider-image {

		width: 90%;

		height: 470px;

	}

	.lk-slider-navigation {

		width: calc(100% - 40px);

		bottom: 80px;

	}

	.slider-nav-label {

		display: none;

	}

	.lk-hero-bottom {

		width: calc(100% - 40px);

	}


	/* INTRO */

	.lk-intro {

		padding: 110px 0;

	}

	.lk-intro .lk-container {

		grid-template-columns: 60px 1fr;

	}

	.intro-description {

		grid-column: 2;

		padding-top: 0;

	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px) {

	.lk-container,
	.lg-container {

		width: calc(100% - 40px);

	}

	.lg-nav {

		width: calc(100% - 30px);

		height: 70px;

	}

	.lg-logo-mark {

		width: 40px;
		height: 40px;

	}

	.lg-logo-text strong {

		font-size: 15px;

	}


	.lk-slider-container {

		padding-top: 70px;

		padding-bottom: 170px;

		gap: 45px;

	}

	.lk-slider-number {

		top: -35px;

		font-size: 75px;

	}

	.lk-slider-title {

		font-size: 39px;

	}

	.lk-slider-title .title-indent {

		padding-left: 25px;

	}

	.lk-slider-description {

		margin-top: 24px;

	}

	.lk-slider-description p {

		font-size: 13px;

		line-height: 1.9;

	}

	.lk-slider-actions {

		flex-direction: column;

		align-items: flex-start;

		gap: 20px;

	}

	.lk-material-tags {

		margin-top: 30px;

	}

	.lk-slider-visual {

		height: 390px;

	}

	.lk-slider-image {

		height: 350px;

		width: 94%;

	}

	.lk-floating-card {

		left: 0;

		bottom: 5px;

		width: 190px;

		padding: 17px 18px;

	}

	.image-caption {

		left: 20px;
		bottom: 20px;

	}

	.image-caption strong {

		font-size: 17px;

	}

	.lk-slider-navigation {

		bottom: 72px;

	}

	.slider-numbers button {

		width: 34px;
		height: 34px;

	}

	.slider-controls button {

		width: 36px;
		height: 36px;

	}

	.lk-hero-bottom {

		bottom: 25px;

		grid-template-columns: 1fr auto;

	}

	.hero-counter {

		display: none;

	}

	.lk-intro {

		padding: 90px 0;

	}

	.lk-intro .lk-container {

		grid-template-columns: 45px 1fr;

		gap: 20px;

	}

	.intro-main h2 {

		font-size: 36px;

	}

	.intro-description {

		grid-column: 2;

		margin-top: 20px;

	}

	.footer-top {

		min-height: 130px;

		flex-direction: column;

		align-items: flex-start;

		justify-content: center;

		gap: 15px;

	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px) {

	.lk-slider-title {

		font-size: 34px;

	}

	.lk-slider-title .title-indent {

		padding-left: 15px;

	}

	.lk-slider-visual {

		height: 330px;

	}

	.lk-slider-image {

		height: 295px;

	}

	.lk-floating-card {

		width: 175px;

		padding: 14px 16px;

	}

	.slider-numbers button {

		width: 30px;
		height: 30px;

	}

	.slider-controls button {

		width: 33px;
		height: 33px;

	}

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.lg-main-nav a:focus-visible,
.lg-contact-btn:focus-visible,
.lg-menu-toggle:focus-visible,
.slider-numbers button:focus-visible,
.slider-controls button:focus-visible {

	outline: 2px solid var(--lk-blue);

	outline-offset: 4px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce) {

	* {

		animation-duration: .01ms !important;

		transition-duration: .01ms !important;

	}

}

/* =========================================================
   03 PRODUCTS
   PRODUCT DATABASE / MATERIAL SELECTOR
========================================================= */

.lk-products {

	position: relative;

	overflow: hidden;

	padding: 145px 0 130px;

	background: #f7fafb;

}


/* =========================================================
   BACKGROUND
========================================================= */

.lk-products-bg {

	position: absolute;

	inset: 0;

	pointer-events: none;

}


.lk-products-grid {

	position: absolute;

	inset: 0;

	background-image:

		linear-gradient(
			rgba(0, 144, 184, .045) 1px,
			transparent 1px
		),

		linear-gradient(
			90deg,
			rgba(0, 144, 184, .045) 1px,
			transparent 1px
		);

	background-size: 55px 55px;

	mask-image: linear-gradient(
		to bottom,
		transparent,
		black 15%,
		black 85%,
		transparent
	);

}


.lk-products-glow {

	position: absolute;

	width: 700px;

	height: 700px;

	right: -250px;

	top: 50%;

	transform: translateY(-50%);

	border-radius: 50%;

	background: radial-gradient(
		circle,
		rgba(0,184,235,.08) 0%,
		rgba(0,184,235,.025) 35%,
		transparent 70%
	);

}


/* =========================================================
   MAIN WRAP
========================================================= */

.lk-products-wrap {

	position: relative;

	z-index: 2;

	display: grid;

	grid-template-columns: 36% 64%;

	align-items: center;

	gap: 0;

}


/* =========================================================
   LEFT INTRO
========================================================= */

.lk-products-intro {

	padding-right: 75px;

}


/* =========================================================
   NUMBER
========================================================= */

.lk-products-number {

	margin-bottom: 28px;

}


.lk-products-number span {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 50px;

	height: 50px;

	border: 1px solid rgba(0,144,184,.35);

	border-radius: 50%;

	font-family: "Roboto", sans-serif;

	font-size: 13px;

	letter-spacing: .12em;

	color: var(--lk-blue);

}


/* =========================================================
   LABEL
========================================================= */

.lk-products-label {

	display: flex;

	align-items: center;

	gap: 13px;

	margin-bottom: 24px;

	font-family: "Roboto", sans-serif;

	font-size: 11px;

	font-weight: 600;

	letter-spacing: .17em;

	color: var(--lk-blue);

}


.lk-products-label-line {

	width: 35px;

	height: 1px;

	background: var(--lk-blue);

}


/* =========================================================
   TITLE
========================================================= */

.lk-products-title {

	margin: 0;

	font-size: clamp(46px, 4vw, 64px);

	font-weight: 300;

	line-height: 1.25;

	letter-spacing: -.045em;

	color: #182536;

}


.lk-products-title strong {

	font-weight: 700;

	color: var(--lk-blue);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.lk-products-description {

	max-width: 420px;

	margin: 30px 0 0;

	font-size: 15px;

	line-height: 2;

	color: #657384;

}


/* =========================================================
   PRODUCT STATS
========================================================= */

.lk-products-stats {

	display: flex;

	align-items: center;

	gap: 30px;

	margin-top: 55px;

}


.lk-product-stat {

	display: flex;

	align-items: flex-start;

	gap: 10px;

}


.lk-product-stat > span {

	font-family: "Roboto", sans-serif;

	font-size: 8px;

	letter-spacing: .12em;

	color: #a3afb5;

}


.lk-product-stat div {

	display: flex;

	flex-direction: column;

	gap: 4px;

}


.lk-product-stat strong {

	font-family: "Roboto", sans-serif;

	font-size: 25px;

	font-weight: 500;

	line-height: 1;

	color: #182536;

}


.lk-product-stat small {

	font-size: 9px;

	color: #8c999f;

	white-space: nowrap;

}


/* =========================================================
   DATABASE
========================================================= */

.lk-products-database {

	position: relative;

	padding: 30px 35px;

	background: rgba(255,255,255,.78);

	border: 1px solid rgba(0,144,184,.13);

	box-shadow:
		0 25px 70px rgba(19,55,68,.07);

	backdrop-filter: blur(12px);

	-webkit-backdrop-filter: blur(12px);

}


/* =========================================================
   DATABASE HEADER
========================================================= */

.lk-database-header {

	display: flex;

	align-items: center;

	justify-content: space-between;

	padding-bottom: 20px;

	border-bottom: 1px solid #e2eaed;

}


.lk-database-header > div:first-child {

	display: flex;

	align-items: center;

	gap: 10px;

	font-family: "Roboto", sans-serif;

	font-size: 9px;

	font-weight: 600;

	letter-spacing: .16em;

	color: #182536;

}


.database-status {

	width: 6px;

	height: 6px;

	border-radius: 50%;

	background: var(--lk-cyan);

	box-shadow:
		0 0 0 4px rgba(0,184,235,.10),
		0 0 12px rgba(0,184,235,.5);

	animation: lkDatabaseStatus 2s ease-in-out infinite;

}


@keyframes lkDatabaseStatus {

	0%,
	100% {

		opacity: 1;

	}

	50% {

		opacity: .4;

	}

}


.database-count {

	display: flex;

	align-items: center;

	gap: 12px;

}


.database-count span {

	font-family: "Roboto", sans-serif;

	font-size: 8px;

	letter-spacing: .12em;

	color: #9aa7ad;

}


.database-count strong {

	font-family: "Roboto", sans-serif;

	font-size: 9px;

	font-weight: 500;

	letter-spacing: .08em;

	color: var(--lk-blue);

}


/* =========================================================
   MATERIAL SELECTOR
========================================================= */

.lk-material-selector {

	margin-top: 8px;

}


/* =========================================================
   PRODUCT ITEM
========================================================= */

.lk-product-item {

	position: relative;

	display: grid;

	grid-template-columns: 45px 1fr auto 35px;

	align-items: center;

	gap: 18px;

	min-height: 125px;

	padding: 18px 5px;

	color: #182536;

	text-decoration: none;

	transition:
		padding .35s ease,
		background .35s ease;

}


.lk-product-item:hover {

	padding-left: 18px;

	padding-right: 18px;

	background: #ffffff;

}


/* =========================================================
   ITEM NUMBER
========================================================= */

.product-item-number {

	align-self: flex-start;

	padding-top: 7px;

	font-family: "Roboto", sans-serif;

	font-size: 10px;

	letter-spacing: .08em;

	color: #a1adb2;

	transition: color .3s ease;

}


.lk-product-item:hover .product-item-number {

	color: var(--lk-blue);

}


/* =========================================================
   ITEM MAIN
========================================================= */

.product-item-main {

	display: flex;

	flex-direction: column;

	gap: 5px;

}


.product-item-code {

	font-family: "Roboto", sans-serif;

	font-size: 8px;

	letter-spacing: .14em;

	color: #a3afb5;

}


.product-item-main h3 {

	margin: 0;

	font-family: "Roboto", sans-serif;

	font-size: 25px;

	font-weight: 600;

	letter-spacing: .03em;

	color: #182536;

	transition: color .3s ease;

}


.lk-product-item:hover .product-item-main h3 {

	color: var(--lk-blue);

}


.product-item-main p {

	margin: 0;

	font-size: 12px;

	color: #7b898f;

}


/* =========================================================
   PRODUCT TAGS
========================================================= */

.product-item-tags {

	display: flex;

	align-items: center;

	gap: 7px;

}


.product-item-tags span {

	padding: 6px 9px;

	border: 1px solid #e0e8eb;

	font-size: 9px;

	color: #718087;

	transition:
		border-color .3s ease,
		color .3s ease,
		background .3s ease;

}


.lk-product-item:hover .product-item-tags span {

	border-color: rgba(0,144,184,.18);

	color: var(--lk-blue);

	background: rgba(0,184,235,.035);

}


/* =========================================================
   ARROW
========================================================= */

.product-item-arrow {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 32px;

	height: 32px;

	border: 1px solid #dfe7ea;

	border-radius: 50%;

	font-family: Arial, sans-serif;

	font-size: 15px;

	font-weight: 400;

	color: #849298;

	transition:
		transform .35s ease,
		background .35s ease,
		border-color .35s ease,
		color .35s ease;

}


.lk-product-item:hover .product-item-arrow {

	transform: translate(3px,-3px);

	border-color: var(--lk-blue);

	background: var(--lk-blue);

	color: #ffffff;

}


/* =========================================================
   ITEM LINE
========================================================= */

.product-item-line {

	position: absolute;

	left: 0;

	right: 0;

	bottom: 0;

	height: 1px;

	background: #e5ecef;

}


.product-item-line::after {

	content: "";

	position: absolute;

	left: 0;

	top: 0;

	width: 0;

	height: 1px;

	background: var(--lk-cyan);

	transition: width .5s ease;

}


.lk-product-item:hover .product-item-line::after {

	width: 100%;

}


/* =========================================================
   DATABASE FOOTER
========================================================= */

.lk-database-footer {

	display: flex;

	align-items: center;

	justify-content: space-between;

	padding-top: 22px;

}


.database-footer-info {

	display: flex;

	align-items: center;

	gap: 10px;

	font-family: "Roboto", sans-serif;

	font-size: 8px;

	letter-spacing: .12em;

	color: #a1adb2;

}


.database-footer-dot {

	width: 3px;

	height: 3px;

	border-radius: 50%;

	background: var(--lk-blue);

}


/* =========================================================
   ALL PRODUCTS LINK
========================================================= */

.database-all-link {

	display: inline-flex;

	align-items: center;

	gap: 14px;

	color: #182536;

	text-decoration: none;

	font-size: 12px;

	font-weight: 600;

	transition: color .3s ease;

}


.database-all-link strong {

	font-family: Arial, sans-serif;

	font-size: 18px;

	font-weight: 400;

	transition: transform .3s ease;

}


.database-all-link:hover {

	color: var(--lk-blue);

}


.database-all-link:hover strong {

	transform: translate(4px,-4px);

}



/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width: 1199px) {

	.lk-products-wrap {

		grid-template-columns: 38% 62%;

	}


	.lk-products-intro {

		padding-right: 40px;

	}


	.lk-products-title {

		font-size: 50px;

	}


	.lk-products-database {

		padding-left: 25px;

		padding-right: 25px;

	}


	.lk-product-item {

		grid-template-columns: 35px 1fr auto 32px;

		gap: 12px;

	}


	.product-item-tags {

		gap: 4px;

	}


	.product-item-tags span {

		padding: 5px 7px;

		font-size: 8px;

	}

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

	.lk-products {

		padding: 110px 0 100px;

	}


	.lk-products-wrap {

		display: block;

	}


	.lk-products-intro {

		max-width: 650px;

		padding-right: 0;

	}


	.lk-products-description {

		max-width: 600px;

	}


	.lk-products-stats {

		margin-top: 40px;

	}


	.lk-products-database {

		margin-top: 65px;

	}


}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.lk-products {

		padding: 85px 0 90px;

	}


	.lk-products-number span {

		width: 44px;

		height: 44px;

		font-size: 11px;

	}


	.lk-products-label {

		font-size: 9px;

	}


	.lk-products-title {

		font-size: 40px;

	}


	.lk-products-description {

		margin-top: 23px;

		font-size: 14px;

		line-height: 1.9;

	}


	.lk-products-stats {

		gap: 22px;

		margin-top: 35px;

	}


	.lk-product-stat strong {

		font-size: 21px;

	}


	.lk-product-stat small {

		font-size: 8px;

	}


	.lk-products-database {

		margin-top: 50px;

		padding: 20px 15px;

	}


	.lk-database-header {

		align-items: flex-start;

		gap: 15px;

	}


	.database-count {

		flex-direction: column;

		align-items: flex-end;

		gap: 3px;

	}


	.lk-product-item {

		grid-template-columns: 28px 1fr 32px;

		min-height: 105px;

		gap: 10px;

		padding: 15px 0;

	}


	.lk-product-item:hover {

		padding-left: 8px;

		padding-right: 8px;

	}


	.product-item-main h3 {

		font-size: 21px;

	}


	.product-item-main p {

		font-size: 10px;

	}


	.product-item-tags {

		display: none;

	}


	.product-item-arrow {

		width: 29px;

		height: 29px;

		font-size: 13px;

	}


	.lk-database-footer {

		align-items: flex-end;

		gap: 15px;

	}


	.database-footer-info {

		display: none;

	}


	.database-all-link {

		margin-left: auto;

	}


}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

	.lk-products-title {

		font-size: 35px;

	}


	.lk-products-stats {

		gap: 16px;

	}


	.lk-product-stat {

		gap: 6px;

	}


	.lk-product-stat > span {

		display: none;

	}


	.lk-product-stat strong {

		font-size: 19px;

	}


	.lk-products-database {

		margin-left: -5px;

		margin-right: -5px;

	}


	.lk-database-header > div:first-child {

		font-size: 8px;

	}


	.database-count span {

		font-size: 7px;

	}


	.database-count strong {

		font-size: 8px;

	}


	.product-item-code {

		font-size: 7px;

	}


	.product-item-main h3 {

		font-size: 19px;

	}


	.product-item-main p {

		font-size: 10px;

	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.database-status {

		animation: none;

	}

	.lk-product-item,
	.product-item-arrow,
	.database-all-link strong,
	.product-item-line::after {

		transition: none;

	}

}