html { font-size: 1px !important; }
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100%;
	background: #fff;
	font-family: "MiSans", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
	color: #1e1e1e;
	overflow-x: hidden;
	font-size: 14rem;
}

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

a {
	text-decoration: none;
	color: inherit;
}

a,
a:hover,
.btn,
.more {
	transition: all 300ms ease;
	-webkit-appearance: none;
}

ul,
ol {
	list-style: none;
}

.icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.icon-36 {
	width: 36rem;
	height: 36rem;
}

.icon-48 {
	width: 48rem;
	height: 48rem;
}

.icon-24 {
	width: 24rem;
	height: 24rem;
}

.icon-22 {
	width: 22rem;
	height: 22rem;
}

.icon-20 {
	width: 20rem;
	height: 20rem;
}

.icon-18 {
	width: 18rem;
	height: 6.12rem;
}

.icon-17 {
	width: 17rem;
	height: 5.12rem;
}

.icon-16 {
	width: 16rem;
	height: 16rem;
}

.icon-50 {
	width: 50rem;
	height: 50rem;
}

.icon-64 {
	width: 64rem;
	height: 64rem;
}

.icon-32 {
	width: 32rem;
	height: 32rem;
}

.icon-40 {
	width: 40rem;
	height: 40rem;
}

.icon-47 {
	width: 47rem;
	height: 47rem;
}

/* =========================
   Page Wrapper
   ========================= */
.page {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #fff;
	padding-top: 130rem;
}

.container {
	max-width: 1400rem;
	margin: 0 auto;
}

.header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 99990;
	transition: all 300ms ease;
}

.headers {
	top: -50rem;
	box-shadow: 0 0 10rem rgba(0, 0, 0, 0.1);
}

/* =========================
   Banner Section
   ========================= */
.banner {
	position: relative;
	width: 100%;
	height: calc(100vh - 130rem);
	background: #2c2b33;
	overflow: hidden;
	flex-shrink: 0;
}

.banner .swiper-slide {
	position: relative;
}

.banner-bg {
	overflow: hidden;
}

.banner-bg img {
	width: 100%;
	height: calc(100vh - 130rem);
	object-fit: cover;
}

.banner-content {
	position: absolute;
	top: 50%;
	transform: translateY(-60%);
	left: 0;
	right: 0;
	color: #fff;
}

.banner-content .container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50rem;
}

.banner-title {
	display: flex;
	flex-direction: column;
	gap: 8rem;
	align-items: flex-start;
	white-space: nowrap;
}

.banner-title .en {
	font-weight: 400;
	font-size: 14rem;
	line-height: normal;
}

.banner-title .cn {
	font-weight: 600;
	font-size: 64rem;
	line-height: normal;
	text-transform: uppercase;
}

.banner-title .cn span {
	color: #e90617;
}

.banner-desc {
	font-size: 16rem;
	line-height: normal;
	color: #fff;
	max-width: 700rem;
}

.btn-learn-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40rem;
	padding: 10rem 15rem;
	border-bottom: 1rem solid #fff;
	font-size: 16rem;
	line-height: normal;
	color: #fff;
	cursor: pointer;
}

/* Carousel Indicators */
.carousel-indicators {
	position: absolute;
	bottom: 40rem;
	left: 50%;
	transform: translateX(calc(-50% + 587rem));
	display: flex;
	gap: 16rem;
	align-items: center;
	z-index: 999;
}

.indicator-arrow {
	width: 32rem;
	height: 32rem;
	border-radius: 16rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border: 1rem solid #fff;
	cursor: pointer;
	transition: all 300ms ease;
}

.indicator-arrow img {
	width: 17rem;
	height: 5.12rem;
}

.indicator-arrow.flipped img {
	transform: scaleY(-1) rotate(180deg);
}

.indicator-arrow:hover {
	transform: translateX(4rem);
}

.indicator-arrow.flipped:hover {
	transform: translateX(-4rem);
}

.indicator-num {
	display: flex;
	gap: 16rem;
}

.indicator-num span {
	width: 32rem;
	height: 32rem;
	border-radius: 16rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "MiSans", sans-serif;
	font-size: 18rem;
	line-height: 1;
	color: #fff;
	margin: 0;
	background: none;
}

.indicator-num span.swiper-pagination-bullet-active {
	background: #fff;
	color: #e90617;
}

/* Scroll Down Button */
.scroll-down {
	position: absolute;
	left: 260rem;
	bottom: 40rem;
	width: 48rem;
	height: 48rem;
	animation: updown 2s infinite;
	z-index: 999;
}

.scroll-down img {
	width: 100%;
	height: 100%;
}

@keyframes updown {
	0% {
		transform: translateY(10rem);
	}

	50% {
		transform: translateY(0rem);
	}

	100% {
		transform: translateY(10rem);
	}
}

/* Navigation Bar */
.navmain {
	background: #fff;
}

.nav {
	position: relative;
	height: 80rem;
	padding: 20rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo {
	display: flex;
	align-items: center;
	gap: 10rem;
	flex-shrink: 0;
}

.logo img.icon-logo {
	width: 36rem;
	height: 36rem;
}

.logo-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: normal;
	white-space: nowrap;
	color: #1e1e1e;
}

.logo-text .cn {
	font-family: "Noto Sans SC", sans-serif;
	font-weight: 600;
	font-size: 22rem;
	line-height: normal;
}

.logo-text .en {
	font-family: "Gilroy", Arial, sans-serif;
	font-size: 8rem;
	line-height: normal;
	margin-bottom: 4rem;
}

.nav-menu {
	display: flex;
	align-items: center;
	font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	font-size: 16rem;
	line-height: normal;
	white-space: nowrap;
}

.nav-menu a {
	color: #1e1e1e;
	cursor: pointer;
	padding: 10rem 20rem;
}

.nav-menu a.active,
.nav-menu a:hover {
	color: #e90617;
}

.nav-right {
	display: flex;
	gap: 10rem;
	align-items: center;
	justify-content: flex-end;
}

.lang {
	width: 36rem;
	height: 36rem;
	border-radius: 50rem;
	background: #fff;
	border: 1rem solid rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Alimama FangYuanTi VF", "PingFang SC", "Microsoft YaHei", sans-serif;
	font-size: 16rem;
	line-height: normal;
	opacity: 0.5;
	color: #000;
	flex-shrink: 0;
}

.lang.en {
	background: #e90617;
	color: #fff;
	opacity: 1;
}

/* Top Bar */
.topbar {
	position: relative;
	height: 50rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rem;
	background: #1e1e1e;
	background-image: linear-gradient(90deg, rgb(30, 30, 30) 0%, rgb(30, 30, 30) 100%),
		linear-gradient(90deg, rgb(233, 6, 23) 0%, rgb(233, 6, 23) 100%);
	color: #fff;
	overflow: hidden;
}

.topbar-left,
.topbar-right {
	display: flex;
	gap: 30rem;
	align-items: center;
}

.topbar-item {
	display: flex;
	gap: 10rem;
	align-items: center;
	white-space: nowrap;
	font-size: 15rem;
	line-height: normal;
	color: #fff;
}

.topbar-item img {
	width: 24rem;
	height: 24rem;
}

.topbar-divider {
	width: 2rem;
	height: 21rem;
	position: relative;
}

.topbar-divider img {
	width: 2rem;
	height: 21rem;
}

.topbar-center {
	font-size: 15rem;
	line-height: normal;
	text-align: center;
	color: #fff;
	white-space: nowrap;
}

/* =========================
   About Section
   ========================= */
.section-about {
	padding: 130rem 0;
	width: 100%;
}

.section-about .container {
	display: flex;
	gap: 50rem;
	align-items: center;
	flex-shrink: 0;
}

.about-image {
	width: 640rem;
	height: 600rem;
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
}

.about-image-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 522rem;
	overflow: hidden;
	background: url(../images/company-image.png) left top repeat;
	background-size: 88rem auto;
}

.about-image-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-image-corner {
	position: absolute;
	top: 0;
	left: 421rem;
	width: 218rem;
	height: 78rem;
}

.about-image-corner img {
	width: 100%;
	height: 100%;
}

.about-image-yellow {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 540rem;
	height: 540rem;
	overflow: hidden;
}


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


.about-image-badge {
	position: absolute;
	top: 0;
	right: 0;
	width: 164rem;
	height: 164rem;
	background: #e90617;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6rem;
	color: #fff;
	font-family: "Gilroy", Arial, sans-serif;
	line-height: normal;
	white-space: nowrap;
}

.about-image-badge .num {
	font-size: 48rem;
	font-weight: 500;
}

.about-image-badge .num .plus {
	font-size: 30.96rem;
}

.about-image-badge .label {
	font-size: 16rem;
	text-align: center;
}

.about-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 40rem;
	align-items: flex-start;
}

.about-heading {
	display: flex;
	flex-direction: column;
	gap: 30rem;
	width: 100%;
}

.ititle {
	display: flex;
	flex-direction: column;
	gap: 16rem;
}

.ititle .eyebrow {
	font-size: 20rem;
	font-weight: 500;
	color: #e90617;
	letter-spacing: 6rem;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: normal;
}

.ititle h3 {
	font-weight: 600;
	font-size: 36rem;
	line-height: normal;
}

.ititle-white h3 {
	color: #ffffff;
}

.about-title {
	display: flex;
	flex-direction: column;
	gap: 8rem;
	width: 100%;
	color: #1e1e1e;
}

.about-title p {
	font-size: 18rem;
	line-height: normal;
	opacity: 0.5;
	width: 100%;
}

.about-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	position: relative;
	padding-bottom: 30rem;
}

.about-list::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1rem;
	border-bottom: 1rem solid #dcdee0;
}

.about-item {
	background: #fff;
	display: flex;
	gap: 12rem;
	align-items: center;
	height: 60rem;
	width: 100%;
	border-radius: 10rem;
}

.about-item .icon-check-circle {
	width: 22rem;
	height: 22rem;
}

.about-item span {
	font-size: 20rem;
	line-height: normal;
	color: #1e1e1e;
}

.btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	height: 55rem;
	padding: 4rem 4rem 4rem 20rem;
	background: #e90617;
	color: #fff;
	font-size: 18rem;
	line-height: normal;
	text-transform: capitalize;
	width: 220rem;
	overflow: hidden;
	cursor: pointer;
	border: 0;
	flex-shrink: 0;
	transition: all 300ms ease;
}

.btn-cta:hover {
	transform: translateX(4rem);
}

.btn-cta .arrow-box {
	width: 47rem;
	height: 100%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-cta .arrow-box img {
	width: 20rem;
	height: 20rem;
}

.btn-cta-white {
	background: #fff;
	color: #e90617;
	border: 0;
}

.btn-cta-white .arrow-box {
	background: #e90617;
}

.btn-cta-white .arrow-box img {
	filter: brightness(0) invert(1);
}

/* =========================
   Core Products Section
   ========================= */
.section-products {
	padding: 100rem 0;
	position: relative;
	background: url('../images/latest-project-bg.jpg') center center no-repeat #1e1e1e;
	background-size: cover;
	overflow: hidden;
	width: 100%;
}

.section-products .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	gap: 60rem;
}

.products-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	z-index: 2;
}


.products-tabs {
	display: flex;
	align-items: center;
	gap: 10rem;
}

.tab-arrow {
	width: 50rem;
	height: 50rem;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 15rem;
	flex-shrink: 0;
	cursor: pointer;
	transition: all 300ms ease;
}

.tab-arrow img {
	width: 20rem;
	height: 20rem;
}

.tab-arrow.flipped img {
	transform: scaleY(-1) rotate(180deg);
}

.tab-arrow:hover {
	transform: translateX(4rem);
}

.tab-arrow.flipped:hover {
	transform: translateX(-4rem);
}

.tab-list {
	overflow: hidden;
	width: 486rem;
}

.tab-list .swiper-slide {
	width: auto;
}

.tab-item {
	height: 50rem;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20rem;
	font-weight: 600;
	font-size: 16rem;
	line-height: normal;
	color: #1e1e1e;
	cursor: pointer;
	white-space: nowrap;
}

.tab-item.active {
	background: #e90617;
	color: #fff;
}

.products-grid {
	z-index: 2;
	overflow: hidden;
	max-width: 1675rem;
}

.product-card {
	height: 400rem;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
}

.product-card-image {
	width: 100%;
	height: 400rem;
	background: #fff;
	position: relative;
	overflow: hidden;
}

.product-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.2s;
}

.product-card-tag {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 300rem;
	background: url(../icons/icon-rect-card.svg) center bottom no-repeat;
	background-size: auto 100%;
	transition: all 300ms ease;
	opacity: 0;
	padding: 50rem 20rem 20rem 20rem;
}

.product-card-tag-name {
	font-weight: 600;
	font-size: 20rem;
	color: #1e1e1e;
	white-space: nowrap;
	margin-bottom: 6rem;
}

.product-card-tag-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 16rem;
	line-height: normal;
	color: #999;
	z-index: 2;
}

.product-card-tag-info .name {
	white-space: pre;
}

.product-card-tag-info .weight {
	white-space: nowrap;
}

.product-card:hover .product-card-tag {
	opacity: 1;
}

.product-card:hover .product-card-image img {
	transform: scale(1.06);
}

.products-arrows {
	display: flex;
	gap: 20rem;
	align-items: center;
	z-index: 2;
}

.products-arrows .arrow-white {
	width: 48rem;
	height: 48rem;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border: 1rem solid #fff;
	overflow: hidden;
	padding: 14rem;
	cursor: pointer;
	transition: all 300ms ease;
}

.products-arrows .arrow-white.flipped img {
	transform: scaleY(-1) rotate(180deg);
}

.products-arrows .arrow-white img {
	width: 20rem;
	height: 20rem;
}

.products-arrows .arrow-white:hover {
	transform: translateX(4rem);
}

.products-arrows .arrow-white.flipped:hover {
	transform: translateX(-4rem);
}

.products-arrows .arrow-red {
	width: 48rem;
	height: 48rem;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 14rem;
}

.products-arrows .arrow-red img {
	width: 20rem;
	height: 20rem;
}

/* =========================
   Business Layout Section
   ========================= */
.section-business {
	display: flex;
	gap: 50rem;
	align-items: center;
	padding: 100rem 0;
	width: 100%;
	flex-shrink: 0;
}

.business-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 40rem;
}


.business-cards {
	display: flex;
	gap: 25rem;
	align-items: flex-start;
	width: 100%;
}

.business-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	min-width: 0;
	border: 1rem solid #e8e7e7;
	padding-bottom: 30rem;
	background: #fff;
	transition: all 300ms ease;
}

.business-card:hover {
	background: #f6f6f6;
}

.business-card-image {
	width: 100%;
	height: 300rem;
	position: relative;
	overflow: hidden;
	margin-bottom: 30rem;
}

.business-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.business-card-text {
	padding: 0 30rem;
	display: flex;
	flex-direction: column;
	gap: 12rem;
	align-items: center;
	text-align: center;
	line-height: normal;
	color: #1e1e1e;
}

.business-card-text h4 {
	font-weight: 600;
	font-size: 24rem;
	line-height: normal;
	white-space: nowrap;
	color: #1e1e1e;
}

.business-card-text p {
	font-size: 16rem;
	line-height: 22rem;
	min-height: 44rem;
	line-height: normal;
	color: #999;
}

/* =========================
   Production Section
   ========================= */
.section-production {
	position: relative;
	width: 100%;
	overflow: hidden;
	flex-shrink: 0;
	background: url('../images/latest-project-bg2.jpg') center center no-repeat #1e1e1e;
}


.production-bg-red {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 446rem;
	background: #e90617;
}

.section-production .container {
	height: 650rem;
	gap: 80rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
}

.production-content {
	display: flex;
	flex-direction: column;
	gap: 30rem;
	align-items: flex-start;
	z-index: 2;
	flex-shrink: 1;
}

.production-title {
	display: flex;
	flex-direction: column;
	gap: 20rem;
	color: #fff;
	font-size: 16rem;
	line-height: 22rem;
	opacity: 0.5;
}

.production-features {
	position: relative;
	z-index: 2;
}

.production-features-list {
	position: relative;
	display: flex;
	gap: 50rem;
	align-items: center;
	margin-bottom: 72rem;
}

.production-feature {
	display: flex;
	gap: 20rem;
	align-items: center;
}

.production-feature img {
	width: 64rem;
	height: 64rem;
}

.production-feature-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: #fff;
	line-height: 22rem;
	white-space: nowrap;
}

.production-feature-text .cn {
	font-weight: 600;
	font-size: 20rem;
	color: #fff;
}

.production-feature-text .en {
	font-family: "Gilroy", Arial, sans-serif;
	font-size: 12rem;
	color: #fff;
}

.production-video {
	position: relative;
	width: 800rem;
	height: 450rem;
	background: #1e1e1e;
	overflow: hidden;
	z-index: 2;
	flex-shrink: 0;
}

.production-video-image {
	position: relative;
}
.production-video-image img {
	cursor: pointer;
}

.production-video-image img ,.production-video-image video{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.production-video-image video {
	display: none;
}

.production-video-image::after {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
}

.production-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100rem;
	height: 100rem;
	cursor: pointer;
}

.production-video-play img {
	width: 100%;
	height: 100%;
}

.production-videos video {
	display: block;
}

.production-videos .production-video-image::after ,.production-videos .production-video-play ,.production-videos .production-video-image img{
	display: none;
}

/* =========================
   Contact Section
   ========================= */
.section-contact {
	background: #fff;
	padding: 100rem 0;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.section-contact .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	gap: 80rem;
}


.contact-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20rem;
	align-items: flex-start;
	min-width: 0;
	z-index: 2;
}

.contact-heading {
	font-size: 18rem;
	line-height: normal;
	color: #1e1e1e;
	opacity: 0.5;
	margin-bottom: 60rem;
}

.contact-rating {
	display: flex;
	flex-direction: column;
	gap: 20rem;
	align-items: flex-start;
	width: 314rem;
}

.rating-row {
	display: flex;
	gap: 15rem;
	align-items: center;
	overflow: hidden;
	border-radius: 500rem;
}

.rating-avatars {
	display: flex;
	align-items: center;
	margin-right: 16rem;
}

.rating-avatars .avatar {
	width: 50rem;
	height: 50rem;
	border-radius: 50rem;
	border: 2rem solid #fff;
	object-fit: cover;
	margin-right: -15rem;
}

.rating-score {
	font-family: "Gilroy", Arial, sans-serif;
	font-weight: 500;
	font-size: 40rem;
	line-height: normal;
	color: #1e1e1e;
	white-space: nowrap;
}

.rating-star {
	width: 26rem;
	position: relative;
}

.rating-star img {
	display: block;
	width: 100%;
}

.rating-text {
	font-weight: 500;
	font-size: 16rem;
	line-height: 24rem;
	color: #1e1e1e;
	width: 100%;
}

.rating-text .red {
	color: #e90617;
}

.contact-form-card {
	position: relative;
	background: url(../images/fombg.jpg) center center no-repeat #e90617;
	background-size: cover;
	display: flex;
	flex-direction: column;
	gap: 30rem;
	align-items: flex-start;
	justify-content: center;
	height: 600rem;
	width: 640rem;
	padding: 60rem 70rem;
	overflow: hidden;
	flex-shrink: 0;
	z-index: 2;
}

.form-fields {
	display: flex;
	flex-direction: column;
	gap: 30rem;
	align-items: flex-start;
	width: 100%;
}

.form-row {
	display: flex;
	gap: 50rem;
	align-items: center;
	width: 100%;
}

.form-field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 15rem;
	align-items: flex-start;
	min-width: 0;
}

.form-field label {
	font-weight: 600;
	font-size: 16rem;
	line-height: normal;
	color: #fff;
	white-space: nowrap;
}

.form-input {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10rem);
	-webkit-backdrop-filter: blur(10rem);
	border: 1rem solid rgba(255, 255, 255, 0.25);
	height: 46rem;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 15rem;
	font-size: 14rem;
	line-height: normal;
	color: #fff;
}
.form-input:focus {
	outline: none;
	border: 1rem solid rgba(255, 255, 255, 0.75);
}

.form-textarea {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10rem);
	-webkit-backdrop-filter: blur(10rem);
	border: 1rem solid rgba(255, 255, 255, 0.25);
	height: 100rem;
	width: 100%;
	padding: 15rem;
	display: flex;
	align-items: flex-start;
	font-size: 14rem;
	line-height: normal;
	color: #fff;
	resize: none;
}
.form-textarea:focus {
	outline: none;
	border: 1rem solid rgba(255, 255, 255, 0.75);
}

input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

textarea::placeholder {
	color: rgba(255, 255, 255, 0.5);
}


.btn-cta .arrow-box img.white {
	filter: brightness(0) invert(1);
}

.btn-cta-center {
	margin: 0 auto;
}

/* =========================
   Footer Section
   ========================= */
.footer {
	position: relative;
	width: 100%;
	background: #1e1e1e;
	flex-shrink: 0;
}

.footer-head {}

.footer-head .container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 80rem;
	padding: 60rem 0 110rem 0;
	color: #fff;
	position: relative;
}

.footer-top {
	position: relative;
	width: 400rem;
	display: flex;
	flex-direction: column;
	gap: 24rem;
	align-items: flex-start;
}

.footer-top .logo img.icon-logo {
	width: 48rem;
	height: 48rem;
}

.footer-top .logo-text .cn {
	font-size: 26rem;
	color: #fff;
}

.footer-top .logo-text .en {
	font-size: 10rem;
	color: #fff;
}

.footer-desc {
	font-size: 14rem;
	line-height: 1.5;
	color: #fff;
	opacity: 0.75;
	width: 400rem;
}

.footer-mid {
	width: 900rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.footer-col {
	display: flex;
	flex-direction: column;
	gap: 14rem;
	align-items: flex-start;
}

.footer-col h4 {
	font-weight: 500;
	font-size: 18rem;
	line-height: 1.5;
	color: #fff;
	white-space: nowrap;
}

.footer-col .list {
	display: flex;
	gap: 50rem;
	align-items: center;
	justify-content: center;
	font-size: 14rem;
	line-height: 28rem;
	color: #fff;
	opacity: 0.5;
	white-space: nowrap;
}

.footer-col .list-col p {
	white-space: nowrap;
}

.footer-col .list-vert {
	font-size: 14rem;
	line-height: 28rem;
	color: #fff;
	opacity: 0.5;
	white-space: nowrap;
}

.footer-qr {
	display: flex;
	flex-direction: column;
	gap: 10rem;
	align-items: center;
}

.footer-qr .qr-box {
	width: 148rem;
	height: 148rem;
	background: #fff;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.footer-qr .qr-box img {
	flex: 1;
	min-width: 0;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.footer-qr p {
	font-size: 16rem;
	line-height: 1.5;
	color: #fff;
	text-align: center;
	white-space: nowrap;
}

.footer-bottom {
	border-top: 1rem solid rgba(255, 255, 255, 0.1);
	font-size: 14rem;
	line-height: normal;
	color: #fff;
	overflow: hidden;
	padding: 24rem 0;
}

.footer-bottom .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.footer-bottom p {
	opacity: 0.5;
}

.footer-bottom p.right {
	text-transform: uppercase;
	white-space: pre;
}

.footer-phone {
	position: absolute;
	right: 0;
	bottom: 60rem;
	width: 206rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4rem;
}

.footer-phone .label {
	display: flex;
	gap: 10rem;
	align-items: flex-start;
	font-weight: 500;
	font-size: 14rem;
	line-height: normal;
	color: #fff;
	white-space: nowrap;
}

.footer-phone .label img {
	width: 20rem;
	height: 20rem;
}

.footer-phone .num {
	font-weight: 500;
	font-size: 32rem;
	line-height: normal;
	color: #fff;
	white-space: nowrap;
	width: 100%;
}

.footer-addresses {
	width: 322rem;
	display: flex;
	flex-direction: column;
	gap: 16rem;
	align-items: flex-start;
}

.footer-address {
	display: flex;
	gap: 12rem;
	align-items: center;
	font-size: 14rem;
	line-height: normal;
	color: #fff;
	border-radius: 10rem;
}

.footer-address img {
	width: 16rem;
	height: 16rem;
}

.nav-btn {
	display: none;
	background: url(../icons/nav.svg) center center no-repeat #e90617; background-size: auto 22rem;
	border-radius: 6rem;
	width: 30rem;
	height: 30rem;
}

@media screen and (max-width: 1400px) {
	html { font-size:calc(100vw/1800) !important; }
}

/* =========================
   Mobile Responsive
   ========================= */
@media screen and (max-width: 900px) {
	html { font-size:calc(100vw/400) !important; }
	html,
	body {
		overflow-x: hidden;
	}

	.container {
		padding: 0 20rem;
	}

	.nav-btn {
		display: block;
	}

	/* Header & Nav */
	.topbar {
		display: none;
	}

	.page {
		padding-top: 60rem;
	}

	.headers {
		top: 0;
	}

	.navmain .container {
		padding: 0;
	}

	.nav {
		height: auto;
		padding: 12rem 20rem;
		flex-wrap: wrap;
		gap: 10rem;
	}

	.logo img.icon-logo {
		width: 32rem;
		height: 32rem;
	}

	.logo-text .cn {
		font-size: 18rem;
	}

	.logo-text .en {
		font-size: 7rem;
		margin-bottom: 2rem;
	}

	.nav-menu {
		position: fixed;
		left: 0;
		right: 0;
		background: #ffffff;
		padding: 30rem;
		top: 61rem;
		z-index: 99999;
		display: none;
		box-shadow: 0 0 10rem rgba(0, 0, 0, 0.1);
	}
	.nav-menu a {
		display: block;
	}

	.nav-menu::-webkit-scrollbar {
		display: none;
	}

	.nav-menu a {
		padding: 8rem 12rem;
	}
	
	.nav-right {
		margin-right: 20rem;
		margin-left: auto;
	}

	.nav-right .lang {
		width: 30rem;
		height: 30rem;
		font-size: 14rem;
	}

	/* Banner */
	.banner {
		height: calc(100vh - 60rem);
		min-height: 480rem;
	}
	
	.banner-bg img {
		height: calc(100vh - 60rem);
	}

	.banner-content {
		transform: translateY(-65%);
	}

	.banner-content .container {
		gap: 24rem;
	}

	.banner-title {
		white-space: normal;
	}

	.banner-title .en {
		font-size: 12rem;
	}

	.banner-title .cn {
		font-size: 32rem;
		line-height: 1.2;
	}

	.banner-desc {
		font-size: 14rem;
		max-width: 100%;
		line-height: 1.5;
	}

	.btn-learn-more {
		height: 36rem;
		font-size: 14rem;
		padding: 8rem 12rem;
	}

	.carousel-indicators {
		left: 50%;
		transform: translateX(-50%);
		bottom: 20rem;
	}

	.scroll-down {
		left: auto;
		right: 20rem;
		transform: none;
		bottom: 40rem;
		width: 36rem;
		height: 36rem;
	}

	/* Section Common */
	.section-about,
	.section-products,
	.section-business,
	.section-contact {
		padding: 60rem 0;
	}

	.ititle {
		gap: 10rem;
	}

	.ititle .eyebrow {
		font-size: 14rem;
		letter-spacing: 2rem;
	}

	.ititle h3 {
		font-size: 24rem;
		white-space: normal;
		line-height: 1.3;
	}

	.btn-cta {
		width: 180rem;
		height: 48rem;
		font-size: 16rem;
	}

	/* About */
	.section-about .container {
		flex-direction: column;
		gap: 30rem;
	}

	.about-image {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.about-image-bg {
		height: 70%;
	}

	.about-image-yellow {
		width: 90%;
		height: 90%;
	}

	.about-image-corner {
		left: auto;
		right: 0;
		width: 40%;
		height: auto;
	}

	.about-image-badge {
		width: 100rem;
		height: 100rem;
	}

	.about-image-badge .num {
		font-size: 30rem;
	}

	.about-image-badge .num .plus {
		font-size: 20rem;
	}

	.about-image-badge .label {
		font-size: 12rem;
	}

	.about-content {
		gap: 24rem;
	}

	.about-heading {
		gap: 20rem;
	}

	.about-title p {
		font-size: 14rem;
	}

	.about-item {
		height: auto;
		padding: 8rem 0;
	}

	.about-item span {
		font-size: 14rem;
		white-space: normal;
	}

	/* Products */
	.section-products .container {
		gap: 30rem;
	}

	.products-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 20rem;
	}

	.products-tabs {
		width: 100%;
	}

	.tab-list {
		width: auto;
		flex: 1;
	}

	.tab-arrow {
		width: 42rem;
		height: 42rem;
		padding: 12rem;
	}

	.tab-item {
		height: 42rem;
		padding: 0 14rem;
		font-size: 14rem;
	}

	.products-grid {
		max-width: 100%;
	}

	.product-card {
		height: calc(100vw - 40rem);
	}

	.product-card-image {
		height: calc(100vw - 40rem);
	}

	.product-card-tag {
		width: 96%;
		padding: 40rem 16rem 16rem 16rem;
		opacity: 1;
		background-size: cover;
		background-position: center top;
	}

	.product-card-tag-name {
		font-size: 16rem;
	}

	.product-card-tag-info {
		font-size: 13rem;
	}

	.products-arrows {
		gap: 12rem;
	}

	.products-arrows .arrow-white,
	.products-arrows .arrow-red {
		width: 40rem;
		height: 40rem;
		padding: 12rem;
	}

	/* Business */
	.section-business {
		padding: 60rem 0;
	}

	.business-cards {
		flex-direction: column;
		gap: 20rem;
	}

	.business-card-image {
		height: 200rem;
		margin-bottom: 20rem;
	}

	.business-card-text {
		padding: 0 20rem;
		gap: 10rem;
	}

	.business-card-text h4 {
		font-size: 20rem;
	}

	.business-card-text p {
		font-size: 14rem;
		min-height: auto;
	}

	/* Production */
	.section-production .container {
		flex-direction: column;
		height: auto;
		gap: 40rem;
		padding: 60rem 20rem 30rem 20rem;
	}

	.production-bg-red {
		width: 100%;
		height: 64vw;
		top: auto;
		bottom: 0;
		left: 0;
	}

	.production-content {
		gap: 20rem;
		margin-bottom: 40rem;
	}

	.production-title {
		font-size: 14rem;
		line-height: 1.6;
	}

	.production-features-list {
		flex-wrap: wrap;
		gap: 20rem;
		margin-bottom: 30rem;
	}

	.production-feature {
		gap: 12rem;
	}

	.production-feature img {
		width: 48rem;
		height: 48rem;
	}

	.production-feature-text {
		white-space: normal;
	}

	.production-feature-text .cn {
		font-size: 16rem;
	}

	.production-feature-text .en {
		font-size: 10rem;
	}

	.production-video {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.production-video-play {
		width: 60rem;
		height: 60rem;
	}

	/* Contact */
	.section-contact .container {
		flex-direction: column;
		gap: 40rem;
	}

	.contact-heading {
		font-size: 14rem;
		margin-bottom: 20rem;
		line-height: 1.5;
	}

	.contact-rating {
		width: 100%;
	}

	.rating-score {
		font-size: 30rem;
	}

	.rating-avatars .avatar {
		width: 40rem;
		height: 40rem;
		margin-right: -10rem;
	}

	.rating-text {
		font-size: 14rem;
	}

	.contact-form-card {
		width: 100%;
		height: auto;
		padding: 30rem 20rem;
		gap: 20rem;
	}

	.form-fields {
		gap: 20rem;
	}

	.form-row {
		flex-direction: column;
		gap: 20rem;
	}

	.form-field {
		width: 100%;
	}

	.form-field label {
		font-size: 14rem;
	}

	.form-input {
		height: 42rem;
	}

	/* Footer */
	.footer-head .container {
		flex-direction: column;
		gap: 40rem;
		padding: 40rem 20rem;
	}

	.footer-top {
		width: 100%;
	}

	.footer-top .logo img.icon-logo {
		width: 40rem;
		height: 40rem;
	}

	.footer-top .logo-text .cn {
		font-size: 20rem;
	}

	.footer-top .logo-text .en {
		font-size: 8rem;
	}

	.footer-desc {
		width: 100%;
		font-size: 13rem;
	}

	.footer-mid {
		width: 100%;
		flex-wrap: wrap;
		flex-direction: column;
		gap: 30rem;
	}

	.footer-col {
		gap: 10rem;
	}

	.footer-col h4 {
		font-size: 16rem;
	}

	.footer-col .list {
		flex-wrap: wrap;
		gap: 20rem;
		font-size: 13rem;
		line-height: 24rem;
	}

	.footer-col .list-vert {
		font-size: 13rem;
		line-height: 24rem;
	}

	.footer-qr {
		align-items: flex-start;
	}

	.footer-qr .qr-box {
		width: 120rem;
		height: 120rem;
	}

	.footer-phone {
		position: static;
		width: 100%;
		align-items: flex-start;
	}

	.footer-phone .num {
		font-size: 24rem;
	}

	.footer-addresses {
		width: 100%;
	}

	.footer-address {
		white-space: normal;
		font-size: 13rem;
	}

	.footer-bottom {
		padding: 16rem 0;
	}

	.footer-bottom .container {
		flex-direction: column;
		gap: 10rem;
		text-align: center;
	}

	.footer-bottom p.right {
		white-space: normal;
	}
}

.etip { position: fixed; left: 50%; top: 50%; width: 500rem; margin-left: -250rem; box-sizing: border-box; display: none; transform:translate(0,-50%); background:rgba(0, 0, 0, 0.9); color: #fff; padding: 20rem; text-align: center; font-size: 18rem; line-height: 2; border-radius: 10rem; z-index: 9999991;}
@media (max-width:900px){
.etip { left: 5%; right: 5%; top: 50%; margin-left: 0; width: auto; padding: 10rem; font-size: 14rem; line-height: 2; border-radius: 10rem; }
}



.langen .banner-title .cn { font-size: 50rem; }
.langen .ititle h3 { font-size: 30rem;}
.langen .about-title p { font-size: 16rem;}
.langen .about-item span { font-size: 15rem;}
.langen .business-card-text p { min-height: 66rem;}
.langen .production-features-list { gap: 10rem; margin-right: -40rem;}
.langen .production-feature { gap: 10rem; }
.langen .production-feature-text .cn { font-size: 12rem;}
.langen .footer-col .list { font-size: 12rem;}
.langen .footer-col .list-vert { font-size: 12rem;}
.langen .footer-address { font-size: 12rem;}
.langen .footer-qr p { font-size: 12rem;}
@media screen and (max-width: 900px) {
.langen .banner-title .cn { font-size: 24rem; }
.langen .ititle h3 { font-size: 20rem;}
.langen .about-title p { font-size: 14rem;}
.langen .about-item span { font-size: 14rem;}
.langen .business-card-text p { min-height: auto;}
.langen .production-features-list { gap: 20rem; margin-right: 0;}
.langen .production-feature { gap: 10rem; }
.langen .production-feature-text .cn { font-size: 14rem;}
}