:root {
				--ink: #383838;
				--muted: #777;
				--line: #d8d8d8;
				--page: #f8f8f7;
				--charcoal: #606060;
				--pad: clamp(24px, 5.2vw, 100px);
			}

			* {
				box-sizing: border-box;
			}

			html {
				scroll-behavior: smooth;
			}

			body {
				margin: 0;
				color: var(--ink);
				background: var(--page);
				font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
				font-weight: 300;
			}

			button {
				font: inherit;
				cursor: pointer;
			}

			.hero {
				min-height: 755px;
				background: #ddd;
				position: relative;
				overflow: hidden;
			}

			.hero::before {
				content: "";
				position: absolute;
				inset: 0;
				background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 60%);
				pointer-events: none;
			}

			.hero-swiper,
			.hero-swiper .swiper-wrapper,
			.hero-slide {
				width: 100%;
				height: 100%;
				min-height: 755px;
			}

			.hero-slide {
				background-position: center;
				background-size: cover;
				position: relative;
				display: flex;
				align-items: flex-end;
				padding: 0 var(--pad) 90px;
			}

			.hero-slide::before {
				content: "";
				position: absolute;
				inset: 0;
				background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 60%);
				pointer-events: none;
			}

			.hero-copy {
				margin-bottom: 0;
				position: relative;
				z-index: 1;
			}

			.carousel-controls {
				position: absolute;
				z-index: 2;
				bottom: 37px;
				right: var(--pad);
				display: flex;
				align-items: center;
				gap: 14px;
			}

			.carousel-arrow {
				width: 42px;
				height: 42px;
				border: 1px solid currentColor;
				border-radius: 50%;
				color: #fff;
				background: rgba(30, 30, 30, .18);
				display: grid;
				place-items: center;
				transition: background .18s ease;
			}

			.carousel-arrow:hover,
			.carousel-arrow:focus-visible {
				background: rgba(30, 30, 30, .62);
				outline: none;
			}

			.carousel-arrow svg {
				width: 18px;
				height: 18px;
				fill: none;
				stroke: currentColor;
				stroke-width: 1.5;
			}

			.carousel-dots {
				display: flex;
				align-items: center;
				gap: 9px;
			}

			.carousel-dot {
				width: 9px;
				height: 9px;
				padding: 0;
				border: 1px solid currentColor;
				border-radius: 50%;
				color: #fff;
				background: transparent;
				transition: background .18s ease, transform .18s ease;
			}

			.carousel-dot.is-active {
				background: currentColor;
				transform: scale(1.15);
			}

			.hero-swiper .swiper-button-prev,
			.hero-swiper .swiper-button-next {
				color: #fff;
				width: 42px;
				height: 42px;
				border: 1px solid rgba(255, 255, 255, .85);
				border-radius: 50%;
				background: rgba(30, 30, 30, .18);
			}

			.hero-swiper .swiper-button-prev::after,
			.hero-swiper .swiper-button-next::after {
				font-size: 17px;
			}

			.hero-swiper .swiper-pagination {
				bottom: 34px;
			}

			.hero-swiper .swiper-pagination-bullet {
				width: 9px;
				height: 9px;
				border: 1px solid #fff;
				background: transparent;
				opacity: 1;
			}

			.hero-swiper .swiper-pagination-bullet-active {
				background: #fff;
			}

			.products-swiper .swiper-button-prev,
			.products-swiper .swiper-button-next {
				color: #555;
				width: 36px;
				height: 36px;
			}

			.products-swiper .swiper-button-prev::after,
			.products-swiper .swiper-button-next::after {
				font-size: 18px;
			}

			.products-swiper .swiper-pagination {
				bottom: 2px;
			}

			.products-swiper .swiper-pagination-bullet-active {
				background: #555;
			}

			h1,
			h2,
			h3,
			p {
				margin: 0;
			}

			.hero h1 {
				font-size: clamp(34px, 3.1vw, 58px);
				line-height: 1.3;
				font-weight: 300;
				letter-spacing: .04em;
			}

			.hero p {
				margin-top: 7px;
				font-size: clamp(18px, 1.55vw, 30px);
				font-family: Arial, sans-serif;
				font-weight: 300;
			}

			.line-button {
				margin-top: 15px;
				width: 108px;
				height: 25px;
				border: 1px solid currentColor;
				border-radius: 7px;
				background: transparent;
				color: inherit;
				display: grid;
				place-items: center;
				transition: background .18s ease, color .18s ease;
			}

			.line-button:hover,
			.line-button:focus-visible {
				background: var(--ink);
				color: #fff;
				outline: none;
			}

			.line-button svg {
				width: 48px;
				height: 12px;
				stroke: currentColor;
				fill: none;
				stroke-width: 1.3;
			}

			.page-section {
				padding: 128px var(--pad);
			}

			.about {
				display: grid;
				grid-template-columns: minmax(320px, 1fr) minmax(390px, 1fr);
				gap: clamp(55px, 8vw, 150px);
				align-items: center;
				background: #fafafa;
			}

			.about-image {
				width: 100%;
				display: block;
			}

			.section-heading {
				font-size: clamp(34px, 3.1vw, 58px);
				line-height: 1.25;
				font-weight: 300;
				letter-spacing: .05em;
			}

			.section-subheading {
				margin-top: 8px;
				font: 300 clamp(18px, 1.55vw, 30px)/1.3 Arial, sans-serif;
			}

			.about-copy {
				text-align: left;
			}

			.about-copy .section-heading,
			.about-copy .section-subheading {
				text-align: right;
			}

			.about-copy p {
				margin-top: 35px;
				font-size: 16px;
				line-height: 1.85;
				color: #535353;
			}

			.about-copy .english-copy {
				margin-top: 27px;
				font-family: Arial, sans-serif;
				font-size: 15px;
				line-height: 1.85;
				color: #676767;
			}

			.products {
				background: #fff;
			}

			.section-title-row {
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				margin-bottom: 48px;
			}

			.products-swiper {
				width: 100%;
				overflow: hidden;
				padding-bottom: 34px;
			}

			.products-swiper .swiper-wrapper {
				align-items: stretch;
			}

			.product-card {
				height: auto;
				background: #f0f0f0;
				box-shadow: 0 4px 10px rgba(0, 0, 0, .07);
				min-width: 0;
			}

			.product-image {
				width: 100%;
				aspect-ratio: 1.62/1;
				object-fit: cover;
				display: block;
			}

			.product-card:nth-child(2) .product-image {
				object-position: center 61%;
			}

			.product-body {
				min-height: 303px;
				padding: 28px 21px 20px;
				display: flex;
				flex-direction: column;
			}

			.product-title {
				font-size: 25px;
				line-height: 1.35;
				font-weight: 400;
			}

			.product-subtitle {
				margin-top: 7px;
				min-height: 40px;
				color: #5c5c5c;
				font: 16px/1.45 Arial, sans-serif;
			}

			.product-description {
				margin-top: 22px;
				font-size: 15px;
				color: #727272;
				line-height: 1.8;
			}

			.card-arrow {
				width: 90px;
				height: 24px;
				border: 0;
				background: transparent;
				color: #3d3d3d;
				margin-top: auto;
				margin-left: auto;
				padding: 0;
			}

			.card-arrow svg {
				width: 90px;
				height: 18px;
				fill: none;
				stroke: currentColor;
				stroke-width: 1.2;
			}

			.products-carousel-controls {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 12px;
				margin-top: 34px;
				color: #555;
			}

			.products-carousel-controls .carousel-arrow {
				color: #555;
				background: transparent;
			}

			.products-carousel-controls .carousel-arrow:hover,
			.products-carousel-controls .carousel-arrow:focus-visible {
				color: #fff;
				background: #555;
			}

			.products-carousel-controls .carousel-dot {
				color: #555;
			}

			.services {
				background: #f7f7f6;
			}

			.services .section-title-row {
				margin-bottom: 46px;
			}

			.services-visual {
				display: grid;
				grid-template-columns: 1fr 1.55fr;
				min-height: 478px;
				color: #fff;
			}

			.service-panel {
				background-position: center;
				background-size: cover;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				position: relative;
				overflow: hidden;
			}

			.service-panel::before {
				content: "";
				position: absolute;
				inset: 0;
				background: rgba(0, 0, 0, .17);
			}

			.service-panel:first-child {
				background-image: url("/public/static/img/techology1.png");
			}

			.service-panel:last-child {
				background-image: url("/public/static/img/techology2.png");
			}

			.service-content {
				position: relative;
				z-index: 1;
			}

			.service-content h3 {
				font-size: clamp(28px, 2.2vw, 43px);
				font-weight: 300;
			}

			.service-content p {
				margin-top: 8px;
				font: 300 clamp(18px, 1.6vw, 30px)/1.2 Arial, sans-serif;
			}

			.play-button {
				width: 155px;
				height: 64px;
				margin-top: 27px;
				border: 1px solid #fff;
				border-radius: 17px;
				background: transparent;
				color: #fff;
			}

			.play-button svg {
				width: 35px;
				height: 35px;
				fill: none;
				stroke: currentColor;
				stroke-width: 1.2;
			}

			.service-arrow {
				color: #fff;
			}

			.more-strip {
				height: 76px;
				background: #e5e5e5;
				display: grid;
				place-items: center;
			}

			.more-button {
				width: 147px;
				height: 33px;
				border: 1px solid #555;
				border-radius: 11px;
				color: #555;
				background: transparent;
				font-size: 16px;
			}

			.story {
				min-height: 506px;
				background: url("/public/static/img/xcx.png") center/cover no-repeat;
				color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-align: center;
				padding: 55px var(--pad);
			}

			.story h2 {
				font-size: clamp(34px, 3vw, 55px);
				line-height: 1.35;
				font-weight: 300;
				letter-spacing: .05em;
			}

			.qr-wrap {
				width: 210px;
				height: 210px;
				margin: 30px 0 25px;
				border: 1px solid rgba(255, 255, 255, .9);
				display: grid;
				place-items: center;
			}

			.qr-image {
				width: 170px;
				height: 170px;
				object-fit: cover;
				background: #fff;
			}

			.story p {
				max-width: 920px;
				font-size: 16px;
				line-height: 1.7;
			}

			@media (max-width:850px) {
				.hero {
					min-height: 560px;
					padding: 0;
					background-position: 60% center;
				}

				.hero-swiper,
				.hero-swiper .swiper-wrapper,
				.hero-slide {
					min-height: 560px;
				}

				.hero-slide {
					padding: 0 20px 75px;
				}

				.hero-copy {
					max-width: 90%;
				}

				.carousel-controls {
					right: 20px;
					bottom: 21px;
				}

				.hero-swiper .swiper-button-prev,
				.hero-swiper .swiper-button-next {
					top: auto;
					bottom: 16px;
				}

				.hero-swiper .swiper-button-prev {
					left: 20px;
				}

				.hero-swiper .swiper-button-next {
					left: 72px;
					right: auto;
				}

				.hero-swiper .swiper-pagination {
					bottom: 32px;
				}

				.page-section {
					padding: 68px 20px;
				}

				.about {
					grid-template-columns: 1fr;
					gap: 38px;
				}

				.about-copy .section-heading,
				.about-copy .section-subheading {
					text-align: left;
				}

				.about-copy p {
					margin-top: 24px;
					font-size: 14px;
				}

				.about-copy .english-copy {
					font-size: 13px;
				}

				.section-title-row {
					align-items: flex-start;
					flex-direction: column;
					gap: 8px;
					margin-bottom: 30px;
				}

				.products-grid {
					gap: 0;
				}

				.product-card {
					flex-basis: 100%;
				}

				.product-body {
					min-height: 254px;
				}

				.services-visual {
					grid-template-columns: 1fr;
					min-height: 0;
				}

				.service-panel {
					min-height: 290px;
				}

				.more-strip {
					height: 68px;
				}

				.story {
					min-height: 450px;
					padding: 54px 20px;
				}

				.qr-wrap {
					width: 170px;
					height: 170px;
					margin: 24px 0;
				}

				.qr-image {
					width: 138px;
					height: 138px;
				}

				.story p {
					font-size: 13px;
				}

			}

			@media (prefers-reduced-motion:reduce) {
				html {
					scroll-behavior: auto;
				}

				* {
					transition: none !important;
				}
			}