@charset "UTF-8";
/* @import url("base-fonts.css"); */
:root {
  --primary-color: #3ba83d;
  --secondary-color: #f0f0f0;
  --text-color: #333;
  --color-white: #fff;
  --color-black: #000;
  --color-gray: #4b5563;
  --font-size-base: 16px;
  --fw-400: 400;
  --fw-bold: bold;
  --fs-4: 0.25rem; /* 4px */
  --fs-5: 0.3125rem; /* 5px */
  --fs-6: 0.375rem; /* 6px */
  --fs-8: 0.5rem; /* 8px */
  --fs-10: 0.625rem; /* 10px */
  --fs-12: 0.75rem; /* 12px */
  --fs-13: 0.8125rem; /* 13px */
  --fs-14: 0.875rem; /* 14px */
  --fs-15: 0.9375rem; /* 15px */
  --fs-16: 1rem; /* 16px */
  --fs-17: 1.0625rem; /* 17px */
  --fs-18: 1.125rem; /* 18px */
  --fs-20: 1.25rem; /* 20px */
  --fs-22: 1.375rem; /* 22px */
  --fs-24: 1.5rem; /* 24px */
  --fs-28: 1.75rem; /* 28px */
  --fs-30: 1.875rem; /* 30px */
  --fs-32: 2rem; /* 32px */
  --fs-36: 2.25rem; /* 36px */
  --fs-40: 2.5rem; /* 40px */
  --fs-48: 3rem;  /* 48px */
  --fs-80: 5rem;  /* 80px */
}
html { font-size: var(--font-size-base);}
body{margin:0; padding:0; color:#333; font-family:'Noto Sans SC', 'Microsoft YaHei',"微软雅黑","宋体", Arial, Helvetica, sans-serif; font-size:var(--fs-14); font-weight: var(--fw-400); background:var(--color-white);}
img,a img{border:0;margin:0;padding:0;vertical-align:middle; max-width: 100%;}
a{color:#333;text-decoration:none;}
a:Hover { text-decoration:none; color: var(--primary-color);}

/*鼠标选中文字的样式*/
::-moz-selection { background: var(--primary-color); color: var(--color-white);}
::selection { background: var(--primary-color); color: var(--color-white);} 
@media (min-width: 992px) {
/*网站默认滚动跳的样式*/
::-webkit-scrollbar { width: var(--fs-8); height: var(--fs-8); }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); }
::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: var(--fs-8);}
::-webkit-scrollbar-thumb:window-inactive { background-color: var(--primary-color); }
::-webkit-scrollbar-thumb:vertical:hover { background-color: var(--primary-color); }
}

@media (min-width: 1440px) {
    .container-xl {
        max-width:1400px
    }
}


.wide {margin: auto; padding: 0 3.85%; }
@media (min-width: 992px) {
  .wide { padding: 0 6.26959%; }
}

#page { margin: 0 auto; width: 100%; max-width: 100%; }

header {width: inherit; height: var(--fs-80);}
.header-wrapper {position: fixed; width: inherit; background-color: var(--color-white); z-index: 99999; box-shadow: 0 0 5px rgba(0, 0, 0, 0.125);}


.logo {padding-top: var(--fs-5); padding-bottom: var(--fs-5); height: var(--fs-80);}
.logo img {width: 100%; max-height: 100%; }
@media (max-width: 1140px) {
  .logo {display: flex; align-items: center; justify-content: start;}
}

.header-side {height: var(--fs-80);}
.nav-list a.m {position: relative; display: block; padding: 0 var(--fs-20); height: inherit; line-height: var(--fs-80); font-size: var(--fs-16); font-weight: var(--fw-400); z-index: 99; letter-spacing: 0.0625rem; white-space: nowrap;}
.nav-list a.m::after {content: ""; position: absolute; top: 0; left: 0; width: 0%; height: var(--fs-80); background-color: transparent; transition: all .2s ease-in-out; z-index: -1;}
.nav-list a.set,
.nav-list a.m:hover { color: var(--color-white); }
.nav-list a.set,
.nav-list a.m:hover::after { width: 100%; background-color: var(--primary-color); }

.nav-down:hover .sub-nav {display: block;}
.nav-down:hover a.m { color: var(--color-white);}
.nav-down:hover a.m::after { width: 100%; background-color: var(--primary-color);}

.nav-down {position: relative;}
.nav-down .sub-nav {position: absolute; visibility: hidden; opacity: 0; top: 120%; width: 100%; background-color: rgba(59, 168, 61, 0.6); padding: 0; transition: all 0.3s ease-in-out; z-index: 99;}
.nav-down:hover .sub-nav { top: 100%; visibility: unset; opacity: 1; }
.nav-down .sub-nav a { display: block; padding: var(--fs-10); color: var(--color-white); font-size: var(--fs-15); font-weight: var(--fw-400); text-align: center; text-decoration: none; transition: all 0.3s ease-in-out; }
.nav-down .sub-nav a:hover { background-color: var(--primary-color); color: var(--color-white); }


.header-bar {position: relative; margin-left: 1.5625rem; width: 6.25rem; height: inherit;}
.header-bar::after {content: ""; position: absolute; top: 0px; left: 0; width: inherit; height: inherit; transform: skew(-26deg); z-index: -1; background: var(--primary-color);}
.header-bar ul { height: inherit;}
.header-bar li { padding: 0rem var(--fs-10); }
.header-bar svg {fill: var(--color-white);}
.header-bar a {color: var(--color-white);}
.header-bar span {display: block; width: var(--fs-30); height: var(--fs-30); border-radius: 50%; border: 1px solid var(--color-white); text-align: center; line-height: var(--fs-28); font-size: var(--fs-13);}

@media (min-width: 992px) {
  .nav-list a.m {padding: 0 var(--fs-15); font-size: var(--fs-14);}
}
@media (min-width: 1200px) {
  .nav-list a.m {padding: 0 var(--fs-20); font-size: var(--fs-16);}
}
@media (min-width: 1440px) {
  .nav-list a.m {padding: 0 var(--fs-30);}
}
/* mobile */
.header-mobile { position: fixed; top: 0; left: 0; width: 100%; height: 3.75rem; background-color: var(--color-white); z-index: 99999; box-shadow: 0 0 5px rgba(0, 0, 0, 0.125);}
.header-mobile>div { -ms-flex: 0 0 63.333333%; flex: 0 0 63.333333%; max-width: 63.333333%;}
.header-mobile>div:first-child { -ms-flex: 0 0 15.333333%; flex: 0 0 15.333333%; max-width: 15.333333%;}
.header-mobile>div:last-child { -ms-flex: 0 0 15.333333%; flex: 0 0 15.333333%; max-width: 15.333333%;}

.mobile-logo {text-align: center;}
.mobile-logo img { height: 3.125rem;}
@media (min-width: 640px) { 
  .header-mobile>div { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%;}
  .mobile-logo img { height: 3.75rem;}
}
.mb-menu {position: relative; display: block; margin-left: var(--fs-5); width: 25px; height: 2px; background: #000414;}
.mb-menu::before,
.mb-menu::after {position: absolute; left: 0; top: -.5rem; display: block; content: ""; width: 25px; height: 2px; background: #000414;}
.mb-menu::after { top: auto; bottom: -.5rem;}
.mobile-bar {padding-right: var(--fs-5); text-align: right;}
.mobile-bar span {display: inline-block; width: var(--fs-30); height: var(--fs-30); border-radius: 50%; border: 1px solid var(--color-white); text-align: center; line-height: var(--fs-28); font-size: var(--fs-13); color: var(--color-white); background: var(--primary-color);}
@media (max-width: 991px) {
  header { height: 3.75rem;}
}

/* Banner */
.banner { position: relative; width: 100%; overflow: hidden; text-align: center; }
.home_banner .swiper-pagination-bullet-active { background: var(--primary-color); }
@media (min-width: 992px) {
  .home_banner .swiper-pagination-bullet { width: var(--fs-40); height: var(--fs-4); border-radius: 0; }
}

/* Company Info */
.company-box {position: relative;}
.company-box-title { padding: var(--fs-30) 0; font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--primary-color); text-align: center; letter-spacing: .125rem;}
.company-box-title span {display: block; margin: var(--fs-10) auto 0 auto; width: 5rem; height: var(--fs-4); background-color: var(--primary-color);}
.company-info-img img {border-radius: var(--fs-15);}
.company-info-content h3 {margin-bottom: var(--fs-16); font-size: var(--fs-24); line-height: var(--fs-32); font-weight: var(--fw-bold); color: var(--primary-color); width: 100%; }
.company-info-content p {font-size: var(--fs-14); line-height: var(--fs-24); color: var(--color-gray); margin-bottom: var(--fs-24);}
.company-info-content  a {display: inline-block; padding: var(--fs-10) 1.25rem; background-color: var(--primary-color); color: var(--color-white); font-size: var(--fs-14); border-radius: 0.3125rem; transition: all .3s ease-in-out;}
.company-info-content a:hover { background-color: var(--color-white); color: var(--primary-color); border: 1px solid var(--primary-color); }
@media (min-width: 576px) {
}
@media (min-width: 992px) {
  .company-box-title { font-size: var(--fs-30); line-height: var(--fs-36);}
  .company-box-title span {margin: var(--fs-16) auto 0 auto; }
  .company-info>div {-ms-flex: 0 0 48%; flex: 0 0 48%; max-width: 48%;}
  .company-info-content h3 {font-size: 1.25rem; }
  .company-info-content p {text-align: left; font-size: var(--fs-13); margin-bottom: var(--fs-14);}
}
@media (min-width: 1200px) { 
  .company-box-title { padding: 3.75rem 0 3.375rem 0;}
  .company-info-content h3 {font-size: var(--fs-28); line-height: var(--fs-36);}
  .company-info-content p {font-size: var(--fs-15); margin-bottom: var(--fs-24);}
}
@media (min-width: 1440px) { 
  .company-box-title { padding: 5rem 0 4rem 0;}
}
@media (min-width: 1600px) { 
  .company-info-content p {font-size: var(--fs-16);}
}
/* culture */
.culture-box { background: url("../images/culture.webp") no-repeat center center; background-size: cover; }
@media (min-width: 768px) {
  .culture-box {background-attachment: fixed;}
  .culture-box { min-height: 400px;}
}
@media (min-width: 992px) {
  .culture-box { min-height: 450px;}
}
@media (min-width: 1200px) {
  .culture-box { min-height: 600px;}
}
@media (min-width: 1440px) { 
  .culture-box { padding: 0 15%; }
}
.cultural-content,
.culture-content { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));}
.culture-list {padding: var(--fs-24); border-radius: var(--fs-16);
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.culture-list-icon {width: 4rem; height: 4rem; margin: 0 auto 1.5rem auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(134, 196, 135, 0.12); color: var(--color-white);}
.culture-list-icon svg {width: var(--fs-24); height: var(--fs-24); fill: var(--primary-color);}
.culture-list-title {font-size: var(--fs-20); font-weight: var(--fw-bold); text-align: center; margin-bottom: var(--fs-8);}
.culture-list-con {font-size: var(--fs-16); line-height: var(--fs-24); color: var(--color-gray); text-align: center; margin-bottom: 0;}

.philosophy-box { border-radius: var(--fs-16); padding: var(--fs-32); }
.philosophy-box-title {font-size: var(--fs-20); font-weight: var(--fw-bold); text-align: center; margin-bottom: var(--fs-32);}
.philosophy-box-content {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));}
.philosophy-list { margin-bottom: var(--fs-8);}
.philosophy-list-icon {width: 3.5rem; height: 3.5rem; margin: 0 auto 1.5rem auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(134, 196, 135, 0.12); color: var(--color-white);}
.philosophy-list-icon svg {width: var(--fs-24); height: var(--fs-24); fill: var(--primary-color);}
.philosophy-list-title {font-size: var(--fs-16); font-weight: var(--fw-400); text-align: center; margin-bottom: var(--fs-8);}
.philosophy-list-con {font-size: var(--fs-14); line-height: var(--fs-24); color: var(--color-gray); text-align: center; margin-bottom: 0;}

.cultural-concept {padding-top: var(--fs-32); padding-bottom: var(--fs-32); background: rgb(249 250 251 / 50%);}
.cultural-text,
.cultural-text p {font-size: var(--fs-14); color: var(--color-gray);}
.cultural-text h2 { font-size: var(--fs-28);}
.cultural-image img { border-radius: var(--fs-16); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);}

@media (min-width: 768px) {
  .culture-content { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fs-24); }
  .cultural-content,
  .philosophy-box-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-24); }
}
@media (min-width: 992px) {
  .philosophy-box-content { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fs-28); }
  .cultural-concept {padding-top: var(--fs-80); padding-bottom: var(--fs-80);}
  .cultural-text,
  .cultural-text p {font-size: var(--fs-16);}
  .cultural-text h2 { font-size: var(--fs-32);}
}
@media (min-width:1200px) {
  .cultural-content,
  .culture-content {  gap: var(--fs-32);}
  .culture-list-title {font-size: var(--fs-22); }
  .culture-list-con {font-size: var(--fs-17); line-height: var(--fs-28);}
}

.history-list {position: relative; min-height: 500px;}
.history-time-line {position: absolute; left: 50%; height: 100%; width: 0.25rem; background: rgb(229 231 235 / 1); --tw-translate-x: -50%; transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);}
.history-time-item {position: relative; margin-bottom: var(--fs-32);}
.history-time-content {display: flex; flex-direction: column; align-items: center;}
.history-item-content {margin-bottom: 1.5rem; width: 100%; }
.history-item-content-box { display: inline-block; border-radius: var(--fs-16); background: #fff; padding: var(--fs-24); width: inherit;}

.history-item-content-box h3 {margin-bottom: .5rem; font-size: var(--fs-20); line-height: var(--fs-28); font-weight: var(--fw-bold); color: #1f2937;}
.history-item-content-box p {font-size: var(--fs-14); color: rgb(75 85 99 / 1);}
.history-item-yuan {position: absolute; left: 50%; z-index: 10; width: var(--fs-30); height: var(--fs-30); border-radius: 50%; border: 4px #fff solid; background-color: var(--primary-color); --tw-translate-x: -50%; transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);}

@media (min-width: 768px) {
  .history-time-item {margin-left: 0px; margin-bottom: 4rem;}
  .history-time-content {flex-direction: row;}
  .history-item-content {margin-bottom: 0; width: 50%; padding-right: 3rem; text-align: right;}
  .item-even {text-align: left; padding-right: 0; padding-left: 3rem;}
  .history-item-content-box p {font-size: var(--fs-16);}
  .history-item-side {width: 50%; padding-left: var(--fs-48);}
}
@media (max-width: 767.9px) {
.history-time-item:last-child .history-item-content {margin-bottom: 0 !important;}
.history-time-item:last-child {margin-bottom: 0 !important;}
}

/* Environment */
.environment-box {background: url(../images/environment.webp) no-repeat center center; background-size: cover;}
.environment-box .company-box-title { color: #fff;}
.environment-box .company-box-title span {background-color: #fff;}
@media (min-width: 992px) {
  .environment-box {background-attachment: fixed;}
  
}
.sub-title { margin-top: var(--fs-10) !important; font-size: var(--fs-14); line-height: var(--fs-24); color: var(--color-gray); text-align: center; margin-bottom: var(--fs-24); font-weight: var(--fw-400); letter-spacing: 0;}
.environment-list {padding: 0 5%;}
.produce-box {background: #fff; border-radius: var(--fs-16); padding: var(--fs-15) var(--fs-15) 0 var(--fs-15);}
.produce-list {position: relative; overflow: hidden; padding-bottom: 50px;}
.produce-list .swiper-pagination-bullet { opacity: .7; width: 10px; height: 10px;}
.produce-list .swiper-pagination-bullet-active {background: var(--primary-color); opacity: 1;}
.environment-item {position: relative; border-radius: var(--fs-16); overflow: hidden; background-color: var(--color-white); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); height: 13rem; }
.environment-item img {width: 100%; height: 100%; border-radius: var(--fs-16); transition: transform 0.3s ease-in-out;}
.environment-item a {display: none; justify-content: center; align-items: center; font-size: var(--fs-18); color: var(--color-white); transition: transform 0.3s ease-in-out;}
.environment-item:hover img {transform: scale(1.05);}
.environment-item:hover a {display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3);}
@media (min-width: 576px) {
  .environment-item {height: 16rem;}
}
@media (min-width: 768px) {
  .environment-list {padding: 0 13%;}
  .environment-item {height: 14rem;}
}
@media (min-width: 992px) {
  .environment-list {padding: 0 10%;}
  .environment-item {height: 12rem;}
}
@media (min-width: 1200px) { 
  .environment-list {padding: 0 13%;}
  .environment-item {height: 15rem;}
  
}
@media (min-width: 1440px) {
  .environment-box {padding-bottom: 7rem !important;}
  .environment-item {height: 13rem;}
}
@media (min-width: 1600px) { 
  .environment-item {height: 16rem;}
}


/* Environment */
.product-env-box {background: rgb(249 250 251 / 50%);}
.sub-title { margin-top: var(--fs-10) !important; font-size: var(--fs-14); line-height: var(--fs-24); color: var(--color-gray); text-align: center; margin-bottom: var(--fs-24); font-weight: var(--fw-400); letter-spacing: 0;}
.product-env-list {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--fs-24);}
.product-env-item {position: relative; border-radius: var(--fs-16); overflow: hidden; background-color: var(--color-white); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); height: 13rem; }
.product-env-item img {width: 100%; height: 100%; border-radius: var(--fs-16); transition: transform 0.3s ease-in-out;}
.product-env-item a {display: none; justify-content: center; align-items: center; font-size: var(--fs-18); color: var(--color-white); transition: transform 0.3s ease-in-out;}
.product-env-item:hover img {transform: scale(1.05);}
.product-env-item:hover a {display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3);}
@media (min-width: 576px) {
  .product-env-item {height: 16rem;}
}
@media (min-width: 768px) {
  .product-env-list {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (min-width: 1024px) { 
  .product-env-list {grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (min-width: 2000px) {
  .product-env-list {grid-template-columns: repeat(4, minmax(0, 1fr));}
  .product-env-item {height: 20rem;}
}


/* Team */
.team-box {background: #fff;}
.team-list {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--fs-24);}
.team-item {position: relative; border-radius: var(--fs-16); overflow: hidden; background-color: var(--color-white); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); height: 13rem; }
.team-item img {width: 100%; height: 100%; border-radius: var(--fs-16); transition: transform 0.3s ease-in-out;}
.team-item a {display: none; justify-content: center; align-items: center; font-size: var(--fs-18); color: var(--color-white); transition: transform 0.3s ease-in-out;}
.team-item:hover img {transform: scale(1.05);}
.team-item:hover a {display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3);}
@media (min-width: 576px) {
  .team-item {height: 16rem;}
}
@media (min-width: 768px) {
  .team-list {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (min-width: 1024px) { 
  .team-list {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .team-item {height: 13rem;}
}
@media (min-width: 1360px) { 
  .team-list {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .team-item {height: 16rem;}
}
@media (min-width: 1600px) { 
  .team-list {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .team-item {height: 18rem;}
}
@media (min-width: 2000px) {
  .team-list {grid-template-columns: repeat(4, minmax(0, 1fr));}
  .team-item {height: 20rem;}
}
/* products */
.products-box {background: none;}
.products-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-10); text-align: center; }
.goods {position: relative; border-radius: var(--fs-16); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease-in-out;}
.good-img {height: 14rem; overflow: hidden;}
.good-img img {object-fit: cover; transition: transform 0.3s ease-in-out;}
.goods:hover .good-img img { transform: scale(1.05); }
.good-info {padding: var(--fs-24);}
.good-title {font-size: var(--fs-18); font-weight: var(--fw-bold); line-height:var(--fs-28);}
.good-title a {display: block; color: var(--text-color); font-size: var(--fs-13); text-decoration: none; transition: color 0.3s ease-in-out;}
.good-title a:hover {color: var(--primary-color);}
@media (min-width: 576px) {
    .products-list { gap: var(--fs-24);}
}
@media (min-width: 992px) {
    .products-list {grid-template-columns: repeat(3, minmax(0, 1fr));}
    .good-title a {font-size: var(--fs-14);}
}
@media (min-width: 1280px) {
    .products-list {grid-template-columns: repeat(4, minmax(0, 1fr));}
    .products-info {grid-template-columns: repeat(3, minmax(0, 1fr));}
    .good-title a {font-size: var(--fs-16);}
}
@media (min-width: 2000px) {
    .products-list {grid-template-columns: repeat(6, minmax(0, 1fr));}
}

/* advantages */
.advantages-box {background: rgb(249 250 251 / 30%);}
.advantages-list {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--fs-18);}
.advantages-group {padding: var(--fs-24); border-radius: var(--fs-16);
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.advantages-list-icon {width: 4rem; height: 4rem; margin: 0 auto 1.5rem 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(134, 196, 135, 0.12); color: var(--color-white);}
.advantages-list-icon img {width: var(--fs-24); height: var(--fs-24); fill: var(--primary-color);}
.advantages-list-title {font-size: var(--fs-20); font-weight: var(--fw-bold); margin-bottom: var(--fs-8);}
.advantages-list-con {font-size: var(--fs-14); line-height: var(--fs-24); color: var(--color-gray); margin-bottom: 0;}

@media (min-width: 768px) {
    .advantages-list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-24);}
}
@media (min-width: 1024px) {
    .advantages-list {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fs-32);}
}
@media (min-width: 2000px) {
    .advantages-list {grid-template-columns: repeat(6, minmax(0, 1fr));}
}
@media (min-width: 768px) and (max-width: 1024px) {
.contact-box .advantages-group:nth-child(3) { grid-column: span 2 / span 2; }
}

/* adv img */
.advantage-box { text-align: center; background: #e8fbf7;}
/* contact */
.contact-address {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--fs-18);}
.contact-group {padding: var(--fs-24); border-radius: var(--fs-16);
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.contact-address-icon {width: 4rem; height: 4rem; margin: 0 0.625rem 1.5rem 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(134, 196, 135, 0.12); color: var(--color-white);}
.contact-address-icon img {width: var(--fs-24); height: var(--fs-24); fill: var(--primary-color);}
.contact-address-title {font-size: var(--fs-20); font-weight: var(--fw-bold); margin-bottom: var(--fs-8);}
.contact-address-con {font-size: var(--fs-14); line-height: var(--fs-24); color: var(--color-gray); margin-bottom: 0;}

@media (min-width: 1024px) {
  .contact-address {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-32);}
  .contact-address-con {font-size: var(--fs-16); line-height: var(--fs-28);}
}


/* honors */
.honor-bg { padding-bottom: 50px; background: url(../images/honor.jpg) no-repeat center/cover; }
.honor-index-list { padding: 0 5%;}
@media (min-width: 768px) { 
.honor-index-list { padding: 0 13%;}
}
@media (min-width: 992px) { 
.honor-index-list { padding: 0 10%;}
}
@media (min-width: 1024px) { 
  .honor-bg { background-attachment: fixed; }
}
@media (min-width: 1200px) { 
.honor-index-list { padding: 0 13%;}
}


.honor-group {padding: var(--fs-15); border-radius: var(--fs-16); height: 100%; display: flex !important; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 0 !important;}
.honor-list .swiper-slide { height: auto;}
.honor-list-title {display: flex; padding: var(--fs-15) var(--fs-5); align-items: center; font-size: var(--fs-16); font-weight: var(--fw-400); text-align: center; margin-bottom: 0 !important;}
.honor-list-title a { font-size: var(--fs-16);}
.honor-list .swiper-pagination-bullet-active { background: var(--primary-color); }
@media (min-width: 992px) {
  .honor-list-title {font-size: var(--fs-16); }
}

.honor-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-10)}
.honor-grid .honor-group {padding: var(--fs-8);}
.honor-grid .honor-group .honor-list-title { line-height: var(--fs-22);}
@media (min-width: 768px) {
    .honor-grid {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fs-24);}
    .honor-grid .honor-group {padding: var(--fs-15);}
}
@media (min-width: 1024px) {
    .honor-grid {grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fs-32);}
    .honor-list-title a { font-size: var(--fs-18);}
.honor-grid .honor-group .honor-list-title { line-height: var(--fs-28);}
}
@media (min-width: 2000px) {
    .honor-grid {grid-template-columns: repeat(5, minmax(0, 1fr));}
}


.honor-index-list .honor-group .honor-img { position: relative; padding-bottom: 100%; width: 100%; overflow: hidden; transition: all .3s ease-in-out; }
.honor-index-list .honor-group .honor-img a { display: -webkit-box; display: -webkit-flex; display: flex; position: absolute; overflow: hidden; width: 100%; height: 100%; cursor: pointer; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
.honor-index-list .honor-group .honor-img a img { visibility: inherit; object-fit: cover; font-family: "object-fit: cover;"; min-height: 1px; -webkit-user-select: none; user-select: none; max-width: 100%; max-height: 100%; opacity: 1; transition: all .3s ease-in-out; }

.partner-box {background: rgb(249 250 251 / 30%);}
.partner-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fs-8);}
.partner-item {display: flex; align-items: center; justify-content: center; padding: var(--fs-12); border-radius: var(--fs-16); background-color: var(--color-white); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.06);}
.partner-item img {max-width: 100%; height: auto; transition: transform 0.3s ease-in-out;}
.partner-item:hover img {transform: scale(1.05);}
@media (min-width: 768px) {
    .partner-list {grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .brand-list {grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (min-width: 1024px) {
  .partner-list {grid-template-columns: repeat(8, minmax(0, 1fr));}
  .partner-item {padding: var(--fs-12) var(--fs-24);}
  .brand-list {grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fs-12);}
}

/* inside banner */
.page-banner {width: 100%; text-align: center;}
.page-menu {display: flex; justify-content: center; height: 3.75rem; align-items: center; background-color: var(--color-white); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.06);}
.page-menu ul {height: 100%;}
.page-menu li {height: inherit;}
.page-menu li a {display: block; padding: 0 var(--fs-10); font-size: var(--fs-13); height: 3.75rem; line-height: 3.75rem; }
.page-menu li.active a {color: var(--primary-color);}
@media (min-width: 768px) {
  .page-menu li a {padding:0 var(--fs-12); font-size: var(--fs-15);}
}
@media (min-width: 992px) {
  .page-menu {height: 5rem;}
  .page-menu li {height: inherit;}
  .page-menu li a {padding:0 var(--fs-20); font-size: var(--fs-16); height: 5rem; line-height: 5rem;}
}

/* 底部 */
footer { padding: 20px 0 0; background: var(--primary-color); }
.footer {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.footer-header {display: flex; flex-wrap: wrap; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}
.footer-body   {display: flex; flex-wrap: wrap; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}
.footer-header .footer-logo,
.footer-header .footer-addrees,
.footer-header .footer-weixin { display: block; width: 100%;}
.footer-header .footer-logo { margin-bottom: 20px;}
.footer-header .footer-logo img { height: 70px;}
.footer-header .footer-addrees {margin-bottom: 20px; font-size: 16px; color: #fff; line-height: 28px; text-align: left;}
.footer-header .footer-weixin {padding-bottom: 10px;}

.footer-body {padding: 25px 0;}
.footer-body dt { margin-bottom: 30px; font-size: 14px; color: #fff; font-weight: 500;}
.footer-body dd a { color: #fff; font-size: var(--fs-15);}
.footer-body dd a:hover {color: #8cff92;}

.footer-copyright {padding: 20px 0; text-align: center; color: #fff; border-top: 1px solid #2d9b2f; background: #2d9b2f;}
.footer-copyright a {color: #fff;}
@media (max-width: 768px) {
  .footer-header {padding: 0 15px; text-align: center;}
}
@media (min-width: 768px) {
  footer {padding: 30px 0 0;}
  .footer-header {display: flex; -ms-flex: 0 0 34%; flex: 0 0 34%; max-width: 34%; padding-left: 15px;}
  .footer-body   {display: flex; -ms-flex: 0 0 66%; flex: 0 0 66%; max-width: 66%}
  .footer-header .footer-logo { margin-bottom: 40px;}
  .footer-header .footer-addrees {margin-bottom: 40px;}
  .footer-copyright {padding: 40px 0;}
}
@media (min-width: 992px) {
  footer {padding: 60px 0 0;}
  .footer-header {display: flex; -ms-flex: 0 0 34%; flex: 0 0 34%; max-width: 34%; padding-left: 0;}
  .footer-body   {display: flex; -ms-flex: 0 0 66%; flex: 0 0 66%; max-width: 66%}
  .footer-header .footer-logo { margin-bottom: 30px;}
  .footer-header .footer-addrees {margin-bottom: 30px;}
  .footer-copyright {text-align: right;}
  .footer-copyright {padding: 40px 0;}
}
@media (min-width:1200px) {
  .footer-body dt { margin-bottom: 30px; font-size: 16px;}
}
@media (min-width:1440px) {
  .footer-body dt { margin-bottom: 30px; font-size: 18px;}
}

.weix {position: relative; padding-top: 50px; cursor: pointer; font-size: 15px; font-weight: 400; color: #fff; }
.weix a {color: #fff;}
.weixin { position: absolute; bottom: 70px; opacity: 0; visibility: hidden; width: 168px; height: auto; background: #fff; transition: all .3s ease-in-out; box-shadow: 0px 2px 2px rgb(0 0 0 / 30%); z-index: 10; }
.weixin::after { position: absolute; left: 50%; bottom: -5px; content: ""; display: block; width: 10px; height: 10px; transform: rotate(-45deg); background: linear-gradient(45deg, rgb(255, 255, 255), rgb(255, 255, 255) 50%, transparent 50%, transparent 100%); box-shadow: 0px 2px 0px rgb(0 0 0 / 30%); z-index: 1; }
.weix:hover .weixin { visibility: unset; opacity: 1; bottom: 50px; }
@media (max-width: 768px) {
  .weix {display: flex; justify-content: center;}
}

#main-nav {display: none;}

.backTop { position: fixed; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; right: 40px; bottom: 80px; z-index: 20; overflow: hidden; cursor: pointer; width: 60px; height: 60px; background-size: contain; opacity: 0; -webkit-transition: opacity .5s ease; transition: opacity .5s ease; font-size: 60px; background-color: hsla(0,0%,100%,.9); box-shadow: 0 2px 20px rgba(0,0,0,.25); border-radius: 50px; font-size: 24px; }
.backTop { width: 40px; height: 40px; bottom: 72px; right: 12px; font-size: 16px; }
.backTop_hide { opacity: 0; }
.backTop_show { opacity: 1; }

.contact-box {margin-bottom: var(--fs-20);}
.contact-box .container-md { max-width: 960px; }
#message-from label { font-size: var(--fs-14); margin-bottom: var(--fs-10);}
#message-from input { padding: var(--fs-12) var(--fs-16); height: auto; border-radius: var(--fs-15);}
#message-from select,
#message-from textarea { padding: var(--fs-12) var(--fs-16); height: auto; border-radius: var(--fs-15); }
#message-from input::placeholder { font-size: var(--fs-14);}
#message-from button {padding: var(--fs-12) var(--fs-28);}

/* news */
.news-section {margin: 0 auto; max-width: 1200px; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin-bottom: 40px; }
@media (max-width: 768px) {
.news-grid { grid-template-columns: 1fr; padding: 0 var(--fs-15); }
}
@media (max-width: 1200px) {
.news-grid { padding: 0 var(--fs-15); }
}

.news-image { position: relative; height: 250px; overflow: hidden; }
.news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.news-date { position: absolute; top: 15px; left: 15px; background-color: var(--primary-color); color: #fff; padding: 10px; border-radius: 5px; text-align: center; line-height: 1.2; }
.news-date .day { display: block; font-size: 24px; font-weight: bold; }
.news-date .month { display: block; font-size: 14px; }
.news-content { padding: 20px; }
.news-content h3 { margin-top: 0; margin-bottom: 10px; font-size: 20px; color: #333; }
.news-meta { color: #888; font-size: 14px; margin-bottom: 15px; }
.read-more { display: inline-block; color: var(--primary-color); font-weight: 400; text-decoration: none; transition: color 0.3s ease; }
.read-more img { transition: all 0.3s ease-in-out;}
.read-more:hover img { margin-left: 5px;}
.read-more:hover { color: var(--primary-color); font-weight: 600; } 
/* 资讯动态页面样式 */
.news-item { background-color: #fff; border-radius: 8px; overflow: hidden;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);  transition: all 0.3s ease; }
.news-item:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); }
.news-item.featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) {
  .news-item.featured { grid-template-columns: 1fr; }
}
.news-image img { width: 100%; height: 250px; object-fit: cover; }
.news-content { padding: 20px; }
.news-item.featured .news-content { padding: 30px; }
.news-content h3 { font-size: 20px; margin-bottom: 10px; color: #333; }
.news-item.featured .news-content h3 { font-size: 24px; }
.news-meta { font-size: 14px;  color: #888; margin-bottom: 10px; }
.news-meta i { margin-right: 5px; }
.news-excerpt { margin-bottom: 15px; color: #666; }
@media (min-width: 576px) {
  .news-image { height: 380px; }
  .news-image img { height: 380px;}
}
@media (min-width: 768px) {
  .news-image { height: 300px; }
  .news-image img { height: 300px;}
}
@media (min-width: 992px) {
  .news-image { height: 250px; }
  .news-image img { height: 250px;}
}

.news-wrapper {padding: 60px 0;}
.news-detail-title { margin-bottom: var(--fs-15); font-size: var(--fs-28);}
.news-wrapper .news-meta { margin-bottom: var(--fs-15); padding-bottom: var(--fs-12); font-size: var(--fs-13); color: rgba(0, 0, 0, 0.35); border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.news-detail-image {margin-bottom: var(--fs-15); text-align: center;}
.news-detail-image img {margin-bottom: var(--fs-15);}
.news-detail-content { margin-bottom: var(--fs-15);}
.news-detail-content p { margin-bottom: var(--fs-15); font-size: var(--fs-16);}
@media (max-width: 767px) {
.news-detail-content p { font-size: var(--fs-14);}
}

.detail-footer-list {position: relative; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid #a7a7a7;}
.detail-footer-list li {color: #858585; font-size: var(--fs-14); line-height: 30px;}
.detail-footer-list li a {color: #858585;}
.detail-footer-list li a:hover {color: var(--primary-color);}
.news-btn {margin-top: 20px; position: relative; left: 44%; margin-left: -80px; list-style-type: none; width: 160px; }
.news-btn a {display: block; padding: 2px 40px; background: var(--primary-color); border-radius: 40px; font-size: var(--fs-14); color: #fff !important; text-align: center;}

@media (min-width: 768px) {
  .detail-footer-list li {font-size: var(--fs-14); line-height: 34px;}
}
@media (min-width: 992px) {
  .detail-footer-list li {font-size: var(--fs-14); line-height: 30px;}

  .news-btn {position: absolute; left: auto; right: 0; bottom: 20px; margin-top: 0; margin-left: 0;}
  .news-btn a { background: var(--primary-color);  font-size: var(--fs-14); }
}
@media (min-width: 1200px) {
  .detail-footer-list {padding-left: 30px;}
  .detail-footer-list li {font-size: var(--fs-15); line-height: 40px;}
  .news-btn a { font-size: var(--fs-15);}
}
@media (min-width: 1440px) {
  .detail-footer-list li {font-size: var(--fs-16); line-height: 40px;}
  .news-btn a { font-size: var(--fs-16);}
}

.page-link,
.page-link:hover {color: var(--primary-color);}
.page-item.active .page-link,
.page-item.active .page-link:hover {background-color: var(--primary-color); color: #fff; border-color: var(--primary-color);}

/* product */
.product-show,
.product-info {width: 100%; display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); margin-bottom: var(--fs-24);}
.team-info {gap: var(--fs-16);}
.info-content h2 {font-size: var(--fs-20); font-weight: var(--fw-bold); margin-bottom: var(--fs-16); color: var(--primary-color);}
.product-show {gap: var(--fs-24); grid-template-columns: repeat(2, minmax(0, 1fr));}
.product-show .show-img { border-radius: 1rem; overflow: hidden; }
  .info-content,
  .info-content p { color: var(--color-gray);}

@media (min-width: 992px) { 
  .product-info {grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--fs-48);}
  .info-content h2 {font-size: var(--fs-24); margin-bottom: var(--fs-24);}
  .product-show {grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (min-width: 1200px) { 
  .product-info {grid-template-columns: repeat(5, minmax(0, 1fr));}
  .product-info .product-info-text {grid-column: span 2 / span 2; }
  .product-info .product-info-img {grid-column: span 3 / span 3; }
  .info-content h2 {font-size: var(--fs-30); }
  .info-content,
  .info-content p {font-size: var(--fs-16); line-height: var(--fs-32);}
  .product-show {grid-template-columns: repeat(6, minmax(0, 1fr));}
}

.vide-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-10); text-align: center; }

@media (min-width: 1200px) {
    .vide-list {grid-template-columns: repeat(4, minmax(0, 1fr));}
}

.vide-item {position: relative; cursor: pointer; overflow: hidden; z-index:  99;}
.vide-item svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); fill: #fff; width: 60px; height: 60px; opacity: 0.8; transition: all .3s ease-in-out; }
.vide-item img { transition: all .3s ease-in-out;}
.vide-item:hover img {transform: rotate(2deg) scale(1.2);  filter: brightness(0.8); }
.vide-item:hover svg { fill: var(--primary-color); opacity: 1; width: 80px; height: 80px; filter: brightness(1);}
@media (min-width: 576px) {
.vide-item svg { width: 80px; height: 80px;  }
.vide-item:hover svg {width: 100px; height: 100px;}
}
@media (min-width: 1200px) {
.vide-item svg { width: 100px; height: 100px;  }
.vide-item:hover svg {width: 120px; height: 120px;}
}

.video-fixed.ons { z-index: 100000 !important; }
.video-fixed .cha { width: 40px; height: 40px; background: url(../images/close-vid2.png) #000 no-repeat center/80% auto; position: absolute; top: 40px; right: 40px; cursor: pointer; }
.video-fixed { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); z-index: 230; top: 0; left: 0; cursor: pointer; display: none; transition: .8s ease-in-out; }
.video-fixed .imghide { display: none; }
.video-fixed .videoboxs .box { display: flex; justify-content: center; align-items: center; }
.video-fixed.ons { transition: .8s ease-in-out; }
.video-fixed .videoboxs .box { height: 100%; }
.video-fixed .videoboxs { width: 80%; height: 80%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: #000; box-sizing: border-box; }
@media screen and (max-width: 1024px) {
.video-fixed .videoboxs { width: 90%; height: 90%; }
}
@media screen and (max-width: 768px) {
.video-fixed .videoboxs { width: 100%; height: 80%; bottom: 0; margin: auto; }
.video-fixed .cha { right: .2rem; top: -1.2rem; width: 1rem; height: 1rem; }
}

.app-group {border-radius: var(--fs-16); height: 100%; display: flex !important; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 0 !important; overflow: hidden; transition: all 0.3s ease-in-out;}
.app-group:hover {transform: translateY(-10px);}
.app-list-title {display: flex; padding: var(--fs-5) var(--fs-5); align-items: center; font-size: var(--fs-13); font-weight: var(--fw-400); text-align: center; justify-content: center; width: 100%; margin-bottom: 0 !important; background: #3ba83d; color: #fff;}
@media (min-width: 992px) {
  .app-list-title {font-size: var(--fs-15); }
}

.app-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-10);}

.app-grid .app-group .app-list-title { line-height: var(--fs-32);}
.app-img { position: relative; padding-bottom: 100%; width: 100%; overflow: hidden; transition: all .3s ease-in-out; }
.app-img a { display: -webkit-box; display: -webkit-flex; display: flex; position: absolute; overflow: hidden; width: 100%; height: 100%; cursor: pointer; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
.app-img a img { visibility: inherit; object-fit: cover; font-family: "object-fit: cover;"; min-height: 1px; -webkit-user-select: none; user-select: none; max-height: 100%; max-width: 100%; opacity: 1; transition: all .3s ease-in-out; }

@media (min-width: 768px) {
    .app-grid {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fs-20);}
    .app-grid .app-group .app-list-title {font-size: var(--fs-14); padding: var(--fs-8) var(--fs-5);}
}
@media (min-width: 1024px) {
    .app-grid {grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--fs-24);}
    .app-img {object-fit: cover;}
    .app-grid .app-group .app-list-title {font-size: var(--fs-16); padding: var(--fs-10) var(--fs-5);}
}

.product-table td,
.product-table th {white-space: nowrap;}