@charset "utf-8";

/* 移动端自适应样式 */

/* 取消桌面最小宽度限制 */
body {
	min-width: 0;
}

/* 移动端汉堡菜单按钮 */
.mobile-nav-toggle {
	display: none;
	position: fixed;
	top: 12px;
	right: 14px;
	z-index: 1001;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.35);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mobile-nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	margin: 5px auto;
	background: #fff;
	border-radius: 1px;
	transition: transform 0.25s, opacity 0.25s;
}

body.mobile-nav-open .mobile-nav-toggle span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

body.mobile-nav-open .mobile-nav-toggle span:nth-child(2) {
	opacity: 0;
}

body.mobile-nav-open .mobile-nav-toggle span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.header-bg ~ .mobile-nav-toggle,
body:not(.mobile-layout) .header-bg ~ .mobile-nav-toggle {
	background: rgba(65, 156, 16, 0.12);
}

body:not(.mobile-layout) .header-bg ~ .mobile-nav-toggle span {
	background: #419c10;
}

/* 移动端侧滑导航 */
.mobile-nav-mask {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1002;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	transition: opacity 0.3s;
}

.mobile-nav {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1003;
	width: min(280px, 82vw);
	height: 100%;
	height: 100dvh;
	background: #fff;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mobile-nav-head {
	padding: 18px 20px;
	font-size: 16px;
	font-weight: 600;
	color: #419c10;
	border-bottom: 1px solid #eee;
}

.mobile-nav ul {
	padding: 8px 0 24px;
}

.mobile-nav li a {
	display: block;
	padding: 14px 20px;
	font-size: 16px;
	color: #333;
	border-bottom: 1px solid #f5f5f5;
}

.mobile-nav li a:active,
.mobile-nav li a.active {
	color: #419c10;
	background: #f8fbf6;
}

body.mobile-nav-open .mobile-nav-mask {
	display: block;
	opacity: 1;
}

body.mobile-nav-open .mobile-nav {
	transform: translateX(0);
}

/* 移动端：取消全屏滚动，改为自然纵向滚动 */
body.mobile-layout {
	height: auto !important;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

body.mobile-layout html {
	height: auto !important;
}

body.mobile-layout .panel {
	height: auto !important;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: visible !important;
}

body.mobile-layout .footer.panel {
	min-height: auto !important;
	height: auto !important;
	padding: 20px 12px !important;
}

body.mobile-layout .product-cont,
body.mobile-layout .device-cont {
	height: auto;
	min-height: 100vh;
	min-height: 100dvh;
	padding-bottom: 24px;
}

body.mobile-layout .product-viewport,
body.mobile-layout .device-viewport {
	flex: none;
	min-height: 520px;
	height: auto;
}

body.mobile-layout .product-carousel,
body.mobile-layout .device-carousel {
	flex: none;
	min-height: 560px;
}

/* <=1100px 显示移动菜单 */
@media (max-width: 1100px) {
	.mobile-nav-toggle,
	.mobile-nav {
		display: block;
	}

	.header {
		height: 56px;
	}

	.header .logo {
		line-height: 56px;
		padding: 6px 0;
	}

	.header .logo img {
		max-height: 44px;
	}

	.xian {
		display: none;
	}
}

@media (max-width: 768px) {
	.title {
		margin-top: 72px;
		padding: 0 12px;
		box-sizing: border-box;
	}

	.title h2 {
		font-size: 22px;
		line-height: 1.35;
	}

	.title h3 {
		font-size: 14px;
		margin-bottom: 8px;
	}

	.title img {
		max-width: 120px;
		height: auto;
	}

	/* 首页轮播 */
	.panel.home,
	.home-slider,
	.home-slider .flex-viewport,
	.home-slider .slides,
	.home-slider .slides li,
	.home-slide {
		height: 100vh !important;
		height: 100dvh !important;
		min-height: 100vh;
		min-height: 100dvh;
	}

	.home-slide .home-slide-img {
		object-fit: contain;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}

	.flex-direction-nav li a {
		width: 44px;
		height: 44px;
		opacity: 0.5;
	}

	.slide-icon {
		bottom: 24px;
		font-size: 13px;
	}

	.slide-icon img.slide-img {
		width: 40px;
	}

	/* 关于我们 */
	.left-about h1 {
		margin-top: 72px;
		font-size: 22px;
		width: 90%;
		padding-left: 5%;
		padding-top: 24px;
	}

	.left-about .txt {
		width: 90%;
		max-height: none;
		overflow: visible;
	}

	.left-about .txt p {
		font-size: 14px;
		line-height: 1.75;
		margin-bottom: 14px;
	}

	.right-img {
		width: 78%;
		margin: 16px auto 24px;
	}

	.right-img .img-cont {
		margin-top: 0;
	}

	.left-about .more-txt {
		margin: 16px auto 32px 5%;
		width: auto;
		line-height: 44px;
		padding: 0 16px;
		font-size: 14px;
	}

	/* 合作基地 - 移动端网格卡片 */
	.jidi .title h2,
	.jidi .title h3 {
		color: #fff;
		text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
	}

	.jidi .multipleColumn.jidi-mobile-grid {
		width: 94%;
		margin: 8px auto 28px;
		min-height: auto;
	}

	.jidi-mobile-grid .hd {
		display: none;
	}

	.jidi-mobile-grid .bd {
		margin-left: 0;
		overflow: visible;
	}

	.jidi-mobile-grid .ulWrap {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
		width: 100% !important;
		position: relative !important;
		left: 0 !important;
		transform: none !important;
	}

	.jidi-mobile-grid ul {
		width: auto !important;
		float: none !important;
		display: contents !important;
	}

	.jidi-mobile-grid ul li {
		width: auto !important;
		float: none !important;
		min-width: 0;
	}

	.jidi-mobile-grid ul li a {
		display: flex;
		flex-direction: column;
		height: 100%;
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	}

	.jidi-mobile-grid ul li .pro-img {
		order: 1;
		width: 100%;
		padding-top: 72%;
		flex-shrink: 0;
	}

	.jidi-mobile-grid ul li .pro-img img {
		object-fit: cover;
	}

	.jidi-mobile-grid ul li .pro-txt {
		order: 2;
		position: relative !important;
		bottom: auto !important;
		left: auto !important;
		width: 100% !important;
		padding-top: 0 !important;
		height: auto !important;
		min-height: 58px;
		background: #fff;
	}

	.jidi-mobile-grid ul li .pro-txt .bb,
	.jidi-mobile-grid ul li .pro-txt .ll {
		display: none !important;
	}

	.jidi-mobile-grid .pro-txt .text {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		height: auto !important;
		width: 100% !important;
		padding: 10px 12px 12px;
		box-sizing: border-box;
		overflow: visible;
	}

	.jidi-mobile-grid .pro-txt .text h4,
	.jidi-mobile-grid .pro-txt h4 {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		line-height: 1.35 !important;
		font-size: 15px !important;
		font-weight: 600;
		padding: 0 0 4px !important;
		margin: 0;
		border-bottom: none;
		white-space: normal;
	}

	.jidi-mobile-grid .multipleColumn ul li .pro-txt .text p,
	.jidi-mobile-grid .multipleColumn ul.special li .pro-txt p {
		position: static !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0;
		top: auto !important;
		font-size: 12px;
		line-height: 1.45;
		color: #666;
		text-align: left;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* 首个大卡片横跨两列 */
	.jidi-mobile-grid ul.special li {
		grid-column: 1 / -1;
	}

	.jidi-mobile-grid ul.special li a {
		flex-direction: row;
		align-items: stretch;
	}

	.jidi-mobile-grid ul.special li .pro-img {
		width: 42%;
		padding-top: 0;
		height: 120px;
		position: relative;
		overflow: hidden;
	}

	.jidi-mobile-grid ul.special li .pro-img img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.jidi-mobile-grid ul.special li .pro-txt {
		flex: 1;
		display: flex;
		align-items: center;
		min-height: 120px;
	}

	/* 产品 / 设备图片区域 */
	.product-card .product-img,
	.device-card .device-img {
		min-height: 90px;
		padding: 6px;
	}

	.product-card .product-img img,
	.device-card .device-img img {
		width: 100%;
		max-height: 110px;
		object-fit: contain;
	}

	/* 产品 / 设备 */
	.product-title,
	.device-title {
		margin-top: 64px;
	}

	.product-desc,
	.device-desc {
		width: 92%;
		font-size: 13px;
		padding: 0 8px;
		box-sizing: border-box;
	}

	.product-carousel,
	.device-carousel {
		width: 100%;
		padding: 0 32px 24px;
		box-sizing: border-box;
	}

	.product-page,
	.product-page-last,
	.device-page,
	.device-page-last {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, minmax(120px, 1fr));
		gap: 8px;
	}

	.product-nav,
	.device-nav {
		width: 32px;
		height: 32px;
		margin-top: -16px;
		background-size: 18px;
	}

	.product-card .product-name,
	.device-card .device-name {
		font-size: 11px;
		padding: 6px 4px;
	}

	/* 联系我们 */
	.contact .cont {
		width: 94%;
		margin-top: 72px;
		margin-bottom: 24px;
		height: auto;
		min-height: 0;
	}

	.cont .cont-left,
	.cont .cont-right {
		float: none;
		width: 88%;
		margin: 0 auto;
		padding: 16px 0;
	}

	.cont .cont-left {
		font-size: 14px;
		line-height: 1.75;
	}

	.contact .cont h1 {
		font-size: 22px;
		padding: 16px 0;
	}

	.cont .cont-right .star {
		display: none;
	}

	/* 灯箱 */
	.device-lightbox-close {
		top: 10px;
		right: 12px;
		font-size: 32px;
	}

	.device-lightbox-prev,
	.device-lightbox-next {
		width: 40px;
		height: 40px;
		margin-top: -20px;
		background-size: 22px;
	}

	.device-lightbox-panel {
		padding: 48px 12px 16px;
	}

	.device-lightbox-img-wrap img {
		max-height: calc(100dvh - 100px);
	}
}

/* iOS 背景 fixed 兼容 */
body.mobile-layout .panel.jidi,
body.mobile-layout .panel.product {
	background-attachment: scroll !important;
}

body.mobile-layout .panel.jidi {
	min-height: auto;
	padding-bottom: 32px;
}

body.mobile-layout .panel.jidi .cont {
	height: auto;
}

body.mobile-scrolled .header {
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

body.mobile-scrolled .mobile-nav-toggle {
	background: rgba(65, 156, 16, 0.1);
}

body.mobile-scrolled .mobile-nav-toggle span {
	background: #419c10;
}

@media (max-width: 480px) {
	.product-page,
	.product-page-last,
	.device-page,
	.device-page-last {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(6, minmax(100px, auto));
	}

	body.mobile-layout .product-viewport,
	body.mobile-layout .device-viewport {
		min-height: 680px;
	}

	.product-carousel,
	.device-carousel {
		padding: 0 28px 20px;
	}

	.left-about h1 {
		font-size: 20px;
	}
}