:root {
	--green: #118b51;
	--deep: #092d28;
	--ink: #1f2a27;
	--muted: #6d7874;
	--line: #e5ebe8;
	--pale: #f2f7f4;
	--gold: #d9ae5c
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	color: var(--ink);
	font-family: Arial, 'Microsoft YaHei', sans-serif;
	background: #fff
}

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

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

button,
input {
	font: inherit
}

.container {
	width: min(1180px, calc(100% - 48px));
	margin: auto
}

.site-header {
	height: 90px;
	background: #fff;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 5;
	border-bottom: 1px solid #eff2f0
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between
}
 header .brand img{
     height: 70px;
 }
.brand {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0
}

.brand-mark {
	width: 43px;
	height: 43px;
	border-radius: 13px 25px 13px 25px;
	background: linear-gradient(135deg, #1eae61 15%, #b9e874 90%);
	position: relative;
	overflow: hidden;
	box-shadow: 0 7px 18px #0f87433b
}

.brand-mark:after {
	content: "";
	position: absolute;
	width: 25px;
	height: 45px;
	left: 14px;
	top: -9px;
	background: #ffffff70;
	transform: rotate(35deg)
}

.nav {
	display: flex;
	gap: 42px;
	align-items: center;
	font-size: 15px;
	font-weight: 700
}

.nav a {
	padding: 35px 0;
	position: relative
}

.nav a:after {
	content: "";
	height: 3px;
	background: var(--green);
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 22px;
	transition: .25s
}

.nav a:hover,
.nav a.active {
	color: var(--green)
}

.nav a:hover:after,
.nav a.active:after {
	right: 0
}

.menu-toggle {
	display: none;
	border: 0;
	background: none;
	font-size: 25px
}

.hero {
	height: 590px;
	background: linear-gradient(90deg, #092d28b8, #092d2830), url('../images/lab-hero.jpg') center/cover;
	display: flex;
	align-items: center;
	color: #fff
}

.hero-content {
	max-width: 760px;
	text-align: center;
	margin: auto
}

.eyebrow {
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #b4ddc3;
	font-weight: 700;
	margin-bottom: 18px
}

.hero h1 {
	font-size: 54px;
	line-height: 1.18;
	margin: 0 0 22px;
	letter-spacing: 1px
}

.hero p {
	font-size: 17px;
	line-height: 1.9;
	color: #eaf4ee;
	margin: 0 auto 31px;
	max-width: 700px
}

.btn {
       display: flex;
    align-items: center;
    gap: 3px;
    background: var(--green);
    color: #fff;
    border: 1px solid var(--green);
    padding: 13px 28px;
    border-radius: 2px;
    font-weight: 700;
    transition: .25s;
    justify-content: center;
    text-align: center;
}

.btn:hover {
	background: #0b7141;
	transform: translateY(-2px)
}

.btn.ghost {
	background: transparent;
	color: var(--green)
}

.section {
	padding: 95px 0
}

.section.pale {
	background: var(--pale)
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 38px
}

.section-kicker {
	color: var(--green);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 2px;
	margin-bottom: 10px
}

.section h2 {
	font-size: 34px;
	margin: 0;
	line-height: 1.2
}

.section-intro {
	color: var(--muted);
	line-height: 1.8;
	max-width: 640px
}

.text-link {
color: var(--green);
    font-weight: 700;
    margin-top: 39px;
    display: flex;
    align-items: center;
}
 footer .lb{
    display: flex;
    flex-direction: column;
}
.about-grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 80px;
	align-items: center
}

.about-img {
	height: 410px;

}

.about-copy h3 {
	font-size: 27px;
	line-height: 1.35;
	margin: 0 0 18px
}

.about-copy p {
	color: var(--muted);
	line-height: 1.9
}

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 34px
}

.stat {
	border-top: 2px solid var(--green);
	padding-top: 16px
}

.stat strong {
	display: block;
	color: var(--green);
	font-size: 30px
}

.stat span {
	font-size: 13px;
	color: var(--muted)
}

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

.card {
	background: #fff;
	border: 1px solid var(--line);
	transition: .25s
}

.card:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 30px #123c2c12
}

.card-media {
	height: 185px;
	background-size: cover;
	background-position: center
}

.card-body {
	padding: 22px
}

.card h3 {
	margin: 0 0 9px;
	font-size: 19px;
	 overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
}

.card p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--muted);
	margin: 0;
	 overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
}

.icon-card {
	padding: 28px 22px;
	border-top: 3px solid var(--green);
	background: #fff
}

.icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #dbf2e4;
	color: var(--green);
	display: grid;
	place-items: center;
	font-size: 20px;
	margin-bottom: 17px
}

.icon-card h3 {
	margin: 0 0 8px;
	overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
}
.icon-card p{
   overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;  
}
.solution-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px
}

.solution {
	min-height: 210px;
	padding: 25px;
	background: var(--deep);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: end;
	background-image: linear-gradient(0deg, #092d28e8, #092d2810), url('../images/lab-detail.jpg');
	background-size: cover;
	background-position: center
}

.solution:nth-child(2) {
	background-image: linear-gradient(0deg, #092d28e8, #092d2810), url('../images/lab-work.jpg')
}

.solution:nth-child(3) {
	background-image: linear-gradient(0deg, #092d28e8, #092d2810), url('../images/lab-hero.jpg')
}

.solution:nth-child(4) {
	background-image: linear-gradient(0deg, #092d28e8, #092d2810), url('../images/lab-detail.jpg')
}

.solution h3 {
	margin: 0 0 7px
}

.solution p {
	margin: 0;
	color: #d8eee1;
	font-size: 13px;
	line-height: 1.6
}

.cta {
	padding: 62px 0;
	background: var(--green);
	color: #fff
}

.cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px
}

.cta h2 {
	font-size: 31px;
	margin: 0 0 9px
}

.cta p {
	margin: 0;
	color: #d7f2e0
}

.cta .btn {
	background: #fff;
	color: var(--green);
	border-color: #fff
}

.site-footer {
	background: #092d28;
	color: #c4d8cf;
	padding: 60px 0 25px
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap: 36px
}

.site-footer h3 {
	color: #fff;
	margin: 0 0 19px;
	font-size: 16px
}

.site-footer p,
.site-footer a {
	font-size: 13px;
	line-height: 2;
	color: #a8c0b5
}

.footer-bottom {
	border-top: 1px solid #ffffff1f;
	margin-top: 40px;
	padding-top: 20px;
	font-size: 12px;
	color: #87a59a;
	display: flex;
	justify-content: space-between
}

.page-hero {
	padding: 92px 0 80px;
	background: linear-gradient(90deg, #092d28ed, #092d2877), url('../images/lab-hero.jpg') center/cover;
	color: #fff
}

.page-hero h1 {
	font-size: 34px;
	margin: 0 0 15px
}

.page-hero p {
	margin: 0;
	color: #d9eee2;
	line-height: 1.8
}

.crumb {
	color: #b8dfc6;
	font-size: 18px;
	margin-bottom: 18px;
	    display: flex;
    align-items: center;
    gap: 3px;
}

.toolbar {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
	margin-bottom: 30px
}

.search {
	display: flex;
	border: 1px solid var(--line);
	max-width: 360px
}

.search input {
	border: 0;
	padding: 12px 14px;
	min-width: 0;
	flex: 1;
	outline: 0
}

.search button {
	border: 0;
	background: var(--green);
	color: #fff;
	width: 52px
}

.filter {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}

.filter button {
	border: 1px solid var(--line);
	background: #fff;
	color: var(--muted);
	padding: 9px 14px;
	cursor: pointer
}

.filter button.active,
.filter button:hover {
	border-color: var(--green);
	color: var(--green)
}

.listing {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px
}
.listingnews {
	display: grid;
	grid-template-columns: 1fr 288px;
	gap: 34px
}
.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px
}

.product .card-media {
	height: 170px
}

.side {
	border-left: 1px solid var(--line);
	padding-left: 25px
}

.side h3 {
	font-size: 18px;
	margin: 0 0 20px
}

.side a {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 14px
}

.side a:hover {
	color: var(--green)
}

.article-list {
	display: grid;
	gap: 18px
}

.article {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 22px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 18px
}
.article .nr{
  display: flex;
    flex-direction: column;
    justify-content: center;  
}
.article img {
	height: 145px;
	width: 100%;
	object-fit: cover
}

.article h3 {
	margin: 3px 0 10px;
	font-size: 20px;
	overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
}

.article p {
	color: var(--muted);
	line-height: 1.8;
	font-size: 14px;
	margin: 0 0 25px;
	overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
}

.date {
	font-size: 12px;
	color: #9ba8a3
}

.detail {
	max-width: 820px
}

.detail h2 {
	font-size: 35px;
	margin: 0 0 15px
}

.detail-meta {
	font-size: 13px;
	color: var(--muted);
	padding-bottom: 22px;
	border-bottom: 1px solid var(--line)
}

.detail img {
	margin: 30px 0;
	width: 100%;
	max-height: 420px;
	object-fit: cover
}

.detail p {
	color: #5c6863;
	line-height: 2;
	font-size: 16px
}

.detail h3 {
	margin-top: 30px;
	font-size: 22px
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px
}

.contact-list {
	display: grid;
	gap: 18px
}

.contact-row {
	display: flex;
	gap: 15px
}

.contact-row b {
	width: 80px;
	color: var(--green)
}

.form {
	display: grid;
	gap: 13px
}



.form input,
.form textarea {
	border: 1px solid var(--line);
	padding: 13px;
	outline: 0;
	box-sizing: border-box;
}
.form textarea {
	height: 130px;
	resize: vertical
}

/* webkit内核 Chrome Edge Safari */
.form input::-webkit-input-placeholder,
.form textarea::-webkit-input-placeholder {
  font-family: "Microsoft Yahei", sans-serif;
  font-size:14px;
  color:#999;
  opacity:1;
  font-style: italic;
}
/* Firefox */
.form input::-moz-placeholder,
.form textarea::-moz-placeholder {
  font-family: "Microsoft Yahei", sans-serif;
  font-size:14px;
  color:#999;
  opacity:1;
  font-style: italic;
}
/* IE10+ */
.form input:-ms-input-placeholder,
.form textarea:-ms-input-placeholder {
  font-family: "Microsoft Yahei", sans-serif;
  font-size:14px;
  color:#999;
  opacity:1;
  font-style: italic;
}
/* 现代标准 统一写全所有属性，不要拆分两套 */
.form input::placeholder,
.form textarea::placeholder {
  font-family: "Microsoft Yahei", sans-serif;
  font-size: 14px;
  color: #999;
  font-style: italic;
  opacity: 1;
}

form,
input,
textarea,
select,
button {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.form input:focus,
.form textarea:focus {
	border-color: var(--green)
}

/* 统一表单placeholder样式 */
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: #999999;
  font-size: 14px;
  font-weight: 400;
}

::-webkit-input-placeholder {
  color: #999999;
  font-size: 14px;
  font-weight: 400;
}
::-moz-placeholder {
  color: #999999;
  font-size: 14px;
  font-weight: 400;
}
:-ms-input-placeholder {
  color: #999999;
  font-size: 14px;
  font-weight: 400;
}

.carousel {
	position: relative
}

.carousel-track {
	display: flex;
	overflow: hidden
}

.carousel .slide {
	min-width: 100%;
	transition: .6s
}

.carousel-dots {
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 7px
}

.carousel-dots button {
	width: 7px;
	height: 7px;
	border: 0;
	border-radius: 50%;
	background: #ffffff80;
	padding: 0
}

.carousel-dots button.active {
	background: #fff;
	width: 22px;
	border-radius: 4px
}

.back-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	background: var(--green);
	color: #fff;
	border: 0;
	width: 42px;
	height: 42px;
	display: none;
	cursor: pointer
}

.back-top.show {
	display: block
}
/*.nav-overlay{*/
/*  position: fixed;*/
/*  left: 0;*/
/*  right: 0;*/
/*  top:72px;*/
/*  bottom:0;*/
/*  background:rgba(0,0,0,0.25);*/
/*  z-index:99;*/
/*  display:none;*/
/*}*/
.nav-overlay.show{
  display:block;
}
@media(max-width:990px) {
    
    .listingnews{
        
          display: flex;
        grid-template-columns: 1fr;
        gap: 34px;
        flex-direction: column-reverse;
}
}
@media(max-width:900px) {
	.container {
		width: min(100% - 32px, 680px)
	}

	.site-header {
		height: 72px
	}

	.brand {
		font-size: 20px
	}

	.brand-mark {
		width: 36px;
		height: 36px
	}

	.menu-toggle {
		display: block
	}

	.nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 72px;
		background: #fff;
		flex-direction: column;
		gap: 0;
		padding: 8px 16px;
		border-bottom: 1px solid var(--line);
		box-shadow: 0 10px 20px #00000012;
		z-index:100;
	}

	.nav.open {
		display: flex;
		        z-index: 2222222;
	}

	.nav a {
		padding: 14px 0;
		width: 100%;
		border-bottom: 1px solid #f0f2f1
	}

	.nav a:after {
		bottom: 0
	}

	.hero {
		height: 570px
	}

	.hero h1 {
		font-size: 39px
	}
header .brand img {
    height: 60px;
}
	.hero p {
		font-size: 15px
	}

	.section {
		padding: 30px 0
	}

	.section h2 {
		font-size: 24px
	}

	.about-grid,
	.contact-grid {
		grid-template-columns: 1fr;
		gap: 30px
	}

	.about-img {
		height: 300px
	}

	.stats {
		grid-template-columns: repeat(2, 1fr)
	}

	.cards {
		grid-template-columns: 1fr 1fr
	}

	.solution-grid {
		grid-template-columns: 1fr 1fr
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}
.listing news,
	.listing {
		grid-template-columns: 1fr
	}

	.side {
		border-left: 0;
		border-top: 1px solid var(--line);
		padding: 24px 0 0
	}

	.products {
		grid-template-columns: 1fr 1fr
	}

	.page-hero {
		padding: 65px 0 55px
	}

	.page-hero h1 {
		font-size: 30px
	}

	.toolbar {
		align-items: stretch;
		flex-direction: column
	}

	.search {
		max-width: none
	}

	.article {
		grid-template-columns: 150px 1fr
	}

	.article img {
		height: 110px
	}
	.footer-grid {
    
    gap: 7px;
}
.site-footer p, .site-footer a {
    font-size: 10px;
    line-height: 1.5;
    color: #a8c0b5;
}
.site-footer h3 {
    color: #fff;
    margin: 0 0 6px;
    font-size: 12px;
}
.brand img{
    height: 60px;
}
.site-footer {
    background: #092d28;
    color: #c4d8cf;
    padding: 19px 0 14px;
}
.cta h2 {
    font-size: 25px;
    margin: 0 0 9px;
}
}

@media(max-width:560px) {
    .footer-grid {
    
    gap: 4px;
}
	.container {
		width: calc(100% - 28px)
	}

	.hero {
		height: 530px
	}

	.hero h1 {
		font-size: 32px
	}

	.hero p {
		font-size: 14px;
		line-height: 1.7
	}

	.cards,
	.solution-grid,
	.products {
		grid-template-columns: 1fr
	}

	.section-head {
		display: block
	}

	.section-head .text-link {
		display: inline-block;
		margin-top: 15px
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.footer-bottom {
		display: flex;
		line-height: 1.7
	}

	.article {
		grid-template-columns: 1fr
	}

	.article img {
		height: 190px
	}

	.cta-inner {
		display: block
	}

	.cta .btn {
		margin-top: 22px
	}

	.detail h2 {
		font-size: 22px
	}
}