@charset "utf-8";
/* ============================================================
   广西柏莜蓉商贸有限公司 — 全站样式
   基于 template 840 绿色果园模板改造
   主色 #00bc12 / 辅色 #bddd22 #9ed900 #96ce54
   强调 #ffa400（电话） / 深页脚 #333333
   ============================================================ */

/* ---------- Reset & Base ---------- */
body, ul, ol, li, dl, dt, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div {
  border: 0 none; margin: 0; padding: 0; font-weight: normal;
  font-family: "微软雅黑", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}
header, footer, section, details, aside, menu, nav, article, hgroup, figure, figcaption, time {
  display: block; margin: 0; padding: 0;
}
ul, ol, li { list-style-type: none; }
select, input, img { vertical-align: top; }
a img { border: 0; }
em, i { font-style: normal; }
a:hover { text-decoration: underline; }
a, a:active, a:focus { outline: none; }
textarea { resize: none; }
table { border-collapse: collapse; border-spacing: 0; }
h2, h3, h4, h5, h6 { font-size: 14px; font-weight: bold; }
a { color: #585858; text-decoration: none; }
a:hover { text-decoration: none; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

.home { background: #fff; }
.inner { background: #fff; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* ---------- Fade-in Animation ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Image Fallback ---------- */
.img-fallback {
  background: linear-gradient(135deg, #00bc12, #bddd22);
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; min-height: 200px;
  color: #fff; font-size: 14px; border-radius: 8px;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.menu-box {
  display: block; position: fixed; top: 0; left: 0;
  width: 100%; height: 80px; z-index: 1000;
}
.header-box-black {
  background-color: rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  z-index: 1000;
}

.header {
  max-width: 1200px; margin: 0 auto; clear: both; position: relative;
  height: 80px; display: flex; align-items: center;
}

/* Logo */
.logo {
  height: 80px; overflow: hidden; float: left;
  display: flex; align-items: center; text-decoration: none;
}
.logo:hover { text-decoration: none; }
.logo-ico { flex-shrink: 0; margin-right: 10px; }
.logo-txt { display: flex; flex-direction: column; justify-content: center; line-height: 1.3; }
.logo-txt b {
  font-size: 18px; color: #fff; font-weight: bold; white-space: nowrap;
}
.logo-txt span {
  font-size: 12px; color: rgba(255,255,255,0.7); letter-spacing: 2px; white-space: nowrap;
}

/* Top Tel */
.top-tel {
  margin-left: auto; margin-right: 20px; color: #fff; font-size: 14px;
  white-space: nowrap; flex-shrink: 0;
}
.top-tel b { font-size: 18px; font-weight: bold; color: #ffa400; }

/* Main Nav */
.menu { height: 80px; float: left; }
.nav { height: 80px; position: relative; z-index: 1; float: left; }
.nav .nLi {
  float: left; line-height: 80px; position: relative; display: inline;
}
.nav .nLi h4 {
  width: 90px; font-size: 15px; text-align: center; float: left;
}
.nav .nLi h4 a {
  display: block; text-decoration: none; color: #fff;
}
.nav .sub {
  width: 90px; display: none; left: 0; top: 80px;
  position: absolute; text-align: center; line-height: 46px;
}
.nav .sub li {
  zoom: 1; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 188, 18, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.nav .sub a {
  display: block; padding: 0 10px; text-decoration: none; color: #fff;
}
.nav .sub a:hover {
  color: #fff; background-color: rgba(255, 255, 255, 0.2);
}
.nav .on h4 a {
  color: #fff; background: #00bc12; text-decoration: none;
}

/* Mobile Toggle (hidden on desktop) */
.mobile-toggle {
  display: none; background: none; border: none; color: #fff;
  font-size: 28px; cursor: pointer; padding: 0 10px; line-height: 80px;
}

/* ============================================================
   BANNER
   ============================================================ */
.banner {
  width: 100%; height: 710px; overflow: hidden; position: relative;
}
.slideBox {
  min-width: 1200px; width: 100%; height: 710px; overflow: hidden; position: relative;
}
.slideBox .bd { position: relative; height: 100%; }
.slideBox .bd ul { position: relative; height: 100%; }
.slideBox .bd li {
  height: 710px; text-align: center; zoom: 1; vertical-align: middle;
  position: absolute; top: 0; left: 0; width: 100%;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 0.8s ease;
}
.slideBox .bd li.active { opacity: 1; z-index: 1; }
.slideBox .bd li a {
  height: 710px; display: block; position: absolute; top: 0; left: 0; width: 100%;
}

/* Banner text overlay */
.bn-mask {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.35);
}
.bn-txt {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; z-index: 2; width: 80%; max-width: 800px;
}
.bn-txt h1 {
  font-size: 42px; color: #fff; font-weight: bold; margin-bottom: 15px;
}
.bn-txt h2 {
  font-size: 20px; color: rgba(255, 255, 255, 0.85); font-weight: normal;
  margin-bottom: 30px;
}
.bn-btn {
  display: inline-block; padding: 12px 36px; border: 2px solid #fff;
  color: #fff; font-size: 16px; border-radius: 30px;
  transition: all 0.3s ease; text-decoration: none;
}
.bn-btn:hover {
  background: #00bc12; border-color: #00bc12; text-decoration: none;
}

/* Slide prev/next */
.slideBox .prev, .slideBox .next {
  width: 58px; height: 100px; position: absolute; top: 43%;
  cursor: pointer; opacity: 0.6; z-index: 10;
  background: rgba(0,0,0,0.3); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.slideBox .prev { left: 5%; }
.slideBox .next { right: 5%; }
.slideBox .prev:before, .slideBox .next:before {
  content: ''; display: block; width: 20px; height: 20px;
  border-left: 3px solid #fff; border-bottom: 3px solid #fff;
}
.slideBox .prev:before { transform: rotate(45deg); margin-left: 6px; }
.slideBox .next:before { transform: rotate(-135deg); margin-right: 6px; }
.slideBox .prev:hover, .slideBox .next:hover { opacity: 1; }

/* hd dots */
.slideBox .hd {
  position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; gap: 12px;
}
.slideBox .hd li {
  width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.5);
  cursor: pointer; list-style: none; transition: background 0.3s;
}
.slideBox .hd li.on { background: #00bc12; }

/* ============================================================
   SECTION TITLES (shared)
   ============================================================ */
.cp-tit, .us-tit, .xw-tit, .al-tit {
  padding: 60px 0 20px 0; overflow: hidden; margin: 0 auto;
  border-bottom: 1px solid #ececec;
}
.cp-tit-l, .us-tit-l, .xw-tit-l, .al-tit-l {
  width: 30%; overflow: hidden; float: left;
}
.cp-tit-l h1, .us-tit-l h1, .xw-tit-l h1, .al-tit-l h1 {
  font-size: 30px; color: #333333;
}
.cp-tit-l h2, .us-tit-l h2, .xw-tit-l h2, .al-tit-l h2 {
  font-size: 24px; font-weight: normal; color: #e8e8e8;
}
.cp-tit-r, .us-tit-r, .xw-tit-r, .al-tit-r {
  width: 70%; padding: 20px 0 0 0; overflow: hidden; float: left;
}
.cp-tit-r .hi, .us-tit-r .hi, .xw-tit-r .hi, .al-tit-r .hi {
  height: 40px; line-height: 40px; margin: 0 10px; float: right;
}
.cp-tit-r a, .us-tit-r a, .xw-tit-r a, .al-tit-r a {
  text-align: center; padding: 0 20px; display: block;
  transition: all .2s ease-in 0s;
}
.cp-tit-r .on a, .us-tit-r .on a, .xw-tit-r .on a, .al-tit-r .on a {
  color: #fff; background: #00bc12; text-decoration: none;
}

/* ---------- More Button ---------- */
.more {
  width: 82px; height: 82px; overflow: hidden; text-align: center;
  position: relative; margin: 30px auto;
}
.more-btn {
  position: relative; display: block; z-index: 100;
  width: 60px; height: 60px; line-height: 60px;
  border-radius: 50%; border: 1px solid #c8c8c8;
  color: #585858; font-size: 12px; text-decoration: none;
  margin: 0 auto; transition: all 0.3s ease;
}
.more-btn:hover { text-decoration: none; color: #00bc12; border-color: #00bc12; }
.more .qq {
  position: absolute; display: block; width: 60px; height: 60px;
  border-radius: 50%; box-sizing: border-box; left: 11px; top: 11px;
}
.more:hover .qq {
  border: 1px double #c8c8c8;
  animation: bounce-circle 1.8s infinite; animation-delay: 0s;
}
@keyframes bounce-circle {
  0% { opacity: 0; transform: scale(1); }
  20% { opacity: 1; }
  80%, 100% { opacity: 0; transform: scale(1.3); }
}

/* ============================================================
   PRODUCT SECTION (.cpbox)
   ============================================================ */
.cpbox {
  position: relative; z-index: 200; overflow: hidden;
  background: #fff;
}
.cpbox .wrap { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.cpcc { padding: 30px 0 0 0; overflow: hidden; margin: 0 auto; }
.cpcc > ul { display: flex; flex-wrap: wrap; justify-content: center; }
.cpcc li {
  width: 270px; margin: 0 15px 30px 15px; overflow: hidden;
  float: left; transition: all .2s ease-in 0s;
}
.cpcc li .tu { width: 270px; height: 215px; overflow: hidden; }
.cpcc li .tu img {
  width: 270px; height: 215px; object-fit: cover;
  transition: all .2s ease-in 0s;
}
.cpcc li .ti {
  text-align: center; padding: 15px 10px; line-height: 28px;
}
.cpcc li .ti h1 { font-size: 18px; color: #333; margin-bottom: 5px; }
.cpcc li .ti h2 { font-weight: normal; font-size: 13px; color: #585858; }
.cpcc li:hover a {
  display: block; transition: all .2s ease-in 0s; text-decoration: none;
  color: #fff; background: #00bc12;
}
.cpcc li:hover a .ti h1,
.cpcc li:hover a .ti h2 { color: #fff; }
.cpcc li:hover a img {
  transform: scale(1.05); transition: all .2s ease-in 0s;
}

/* ============================================================
   ABOUT US SECTION (.usbox)
   ============================================================ */
.usbox { position: relative; background: #f8f8f8; overflow: hidden; }
.uscc { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.usdw { line-height: 36px; overflow: hidden; margin: 15px auto 0 auto; color: #585858; }
.usdw p { margin-bottom: 15px; text-indent: 2em; }

/* Qualification Ribbon (稳健化改造版) */
.uspt {
  background: #00bc12; position: relative; margin-top: 20px;
  padding: 40px 0; overflow: visible;
}
.uspt::before {
  content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 100%;
  background: #f8f8f8; clip-path: polygon(0 0, 100% 0, 0 100%);
}
.uspt::after {
  content: ''; position: absolute; top: 0; right: 0; width: 60px; height: 100%;
  background: #fff; clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.ptcc {
  max-width: 1100px; margin: 0 auto; padding: 0 80px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;
}
.pt-cell {
  width: 230px; background: #fff; border-radius: 8px; overflow: hidden;
  text-align: center; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.pt-cell:hover { transform: translateY(-5px); }
.pt-cell img {
  width: 230px; height: 180px; object-fit: cover; display: block;
}
.pt-cell .pt-wz {
  display: block; padding: 10px; font-size: 14px; color: #333;
}
.pt-cell .pt-wz b { font-weight: bold; }
.pt-tag {
  position: absolute; top: 10px; left: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: #00bc12; color: #fff; font-size: 14px; font-weight: bold;
  display: flex; align-items: center; justify-content: center;
  z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ============================================================
   NEWS SECTION (.newsbox)
   ============================================================ */
.newsbox {
  position: relative; overflow: hidden; z-index: 200; background: #fff;
}
.newsbox .wrap { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.newscc { position: relative; overflow: hidden; margin: 0 auto; }
.newscc > ul { display: flex; flex-wrap: wrap; justify-content: center; }
.newscc li {
  width: 370px; margin: 40px 15px 0 15px; float: left;
  background: #f8f8f8; transition: all .2s ease-in 0s;
}
.newscc li .pic { width: 370px; height: 190px; display: block; overflow: hidden; }
.newscc li .pic img {
  width: 370px; height: 190px; object-fit: cover;
  transition: all .2s ease-in 0s;
}
.newscc li:hover .pic img {
  transform: scale(1.05); transition: all .2s ease-in 0s;
}
.newscc li .title { padding: 20px; overflow: hidden; transition: all .2s ease-in 0s; }
.newscc li .title .tidw {
  line-height: 24px; margin: 0 0 15px 0; overflow: hidden;
}
.newscc li .title .tidw h1 { line-height: 30px; color: #adadad; font-size: 14px; }
.newscc li .title .tidw h2 {
  font-size: 16px; line-height: 30px; font-weight: normal; color: #000;
}
.newscc li .title .tidw p {
  font-size: 13px; color: #585858; line-height: 22px; margin-top: 5px;
}
.newscc li .title .gd {
  width: 48px; height: 40px; line-height: 35px; font-size: 24px;
  font-weight: normal; text-align: center; float: right; color: #cecece;
  transition: all .2s ease-in 0s;
}
.newscc li:hover .title .gd {
  background: #00bc12; color: #fff; transition: all .2s ease-in 0s;
}

/* ============================================================
   CTA / CONSULT SECTION (.lxbox)
   ============================================================ */
.lxbox {
  width: 100%; position: relative; z-index: 2;
  background: #333; padding: 90px 0;
}
.lxxx {
  width: 100%; overflow: hidden;
  max-width: 1200px; margin: 0 auto; padding: 0 15px;
  display: flex; flex-wrap: wrap; align-items: center;
}
.lxcc {
  display: flex; flex-wrap: wrap; align-items: center;
  width: 100%;
}
.lxl { flex: 1; min-width: 280px; }
.lxl .ti {
  display: flex; align-items: baseline; flex-wrap: wrap; margin-bottom: 20px;
}
.lxl .ti h1 { font-size: 36px; color: #fff; }
.lxl .ti h2 { font-size: 48px; color: #00bc12; margin: 0 10px; }
.lxl .ti h3 { font-size: 22px; color: #fff; font-weight: normal; }
.lxdw { overflow: hidden; }
.lxdw .hm {
  font-style: italic; font-size: 28px; color: #ffa400; margin: 10px 0;
}
.lxdw .dz { font-size: 16px; line-height: 36px; color: #ccc; }

.lxr { flex-shrink: 0; margin-left: 40px; }
.lxr .rwm { text-align: center; color: #ccc; font-size: 14px; }
.lxr .rwm img { width: 170px; height: 170px; display: block; margin: 0 auto 10px auto; }

/* ============================================================
   BASE/CASE SECTION (.albox)
   ============================================================ */
.albox {
  position: relative; z-index: 200; overflow: hidden; background: #fff;
}
.albox .wrap { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.alcc { margin: 40px auto 0 auto; padding: 0 0 20px 0; overflow: hidden; }
.alcc ul, .alcc .picList {
  display: flex; flex-wrap: wrap; justify-content: center;
}
.alcc li {
  width: 270px; margin: 0 15px 30px 15px; overflow: hidden; float: left;
  transition: all .2s ease-in 0s;
}
.alcc li .tu { width: 270px; height: 215px; overflow: hidden; }
.alcc li .tu img {
  width: 270px; height: 215px; object-fit: cover;
  transition: all .2s ease-in 0s;
}
.alcc li .ti { text-align: center; line-height: 60px; font-size: 16px; color: #333; }
.alcc li:hover a {
  display: block; transition: all .2s ease-in 0s; text-decoration: none;
  color: #fff; background: #00bc12;
}
.alcc li:hover a img {
  transform: scale(1.05); transition: all .2s ease-in 0s;
}

/* ============================================================
   PARTNER / LINK BAR
   ============================================================ */
.linkbar {
  width: 100%; background: #2a2a2a; border-bottom: 1px solid #444;
  padding: 0 20px;
}
.linkbar .wrap {
  max-width: 1200px; margin: 0 auto; height: 40px; line-height: 40px;
  display: flex; align-items: center; overflow: hidden;
}
.linkbar h3 { color: #fff; float: left; margin-right: 10px; font-size: 14px; flex-shrink: 0; }
.linkbar a {
  color: #999; margin: 0 10px 0 0; float: left; font-size: 13px; flex-shrink: 0;
}
.linkbar a:hover { color: #00bc12; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { width: 100%; padding: 0; position: relative; overflow: hidden; background: #333333; }
.foot .con {
  max-width: 1200px; margin: 0 auto; padding: 30px 15px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
}
.con-l { flex: 1; display: flex; flex-wrap: wrap; gap: 30px; min-width: 0; }
.fcol { min-width: 160px; flex: 1; }
.fcol h4 {
  color: #fff; font-size: 16px; font-weight: bold; margin-bottom: 15px;
}
.fcol p, .fcol li, .fcol a { color: #999; font-size: 13px; line-height: 2; }
.fcol a:hover { color: #00bc12; text-decoration: none; }
.fcol ul { padding: 0; }
.faddr { color: #787878; }
.f-about { min-width: 220px; }

.f-rwm {
  text-align: center; color: #999; flex-shrink: 0; padding-left: 20px;
}
.f-rwm img { width: 120px; height: 120px; display: block; margin: 0 auto 10px auto; }

.foot-copy {
  border-top: 1px solid #444; padding: 15px 20px;
  text-align: center; color: #787878; font-size: 13px;
}
.foot-copy p { margin: 3px 0; }
.foot-copy a { color: #787878; }
.foot-copy a:hover { color: #fff; }

.dwz { color: #787878; }
.dwz a { color: #787878; }
.dwz a:hover { color: #fff; }

/* ============================================================
   FIXED RIGHT NAV
   ============================================================ */
.fixed-right-nav {
  position: fixed; z-index: 500; right: 2%; top: 50%; transform: translateY(-50%);
  width: 48px; text-align: center;
}
.fixed-right-nav a {
  display: flex; align-items: center; justify-content: center;
  height: 48px; border-radius: 4px; margin-bottom: 2px;
  background: #939393; color: #fff; text-decoration: none; font-size: 12px;
  cursor: pointer;
}
.fixed-right-nav a:hover { background: #00bc12; text-decoration: none; }
.backtop { display: flex; align-items: center; justify-content: center; }

/* ============================================================
   INNER PAGES
   ============================================================ */

/* Inner Banner */
.n-banner {
  width: 100%; height: 400px; position: relative; overflow: hidden;
  background-size: cover; background-position: center;
}
.n-banner .bn-mask {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

/* Breadcrumb bar */
.ntit {
  width: 100%; height: 80px; position: absolute; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.2);
}
.ntt {
  max-width: 1200px; margin: 0 auto; padding: 0 15px;
  overflow: hidden; display: flex; align-items: center; height: 80px;
}
.ntt h1 { font-size: 26px; line-height: 80px; color: #fff; margin-right: 15px; flex-shrink: 0; }
.ntt i { font-size: 20px; line-height: 80px; color: rgba(255, 255, 255, 0.6); flex-shrink: 0; }
.weiz { line-height: 80px; margin-left: auto; color: #fff; font-size: 14px; flex-shrink: 0; }
.weiz a { color: #fff; }

/* Content wrapper */
.n-box { overflow: hidden; }
.n-con { max-width: 1200px; margin: 10px auto; padding: 0 15px; overflow: hidden; }
.nrwz { padding: 20px 0; line-height: 30px; overflow: hidden; color: #585858; }
.nrwz h3 { font-size: 22px; color: #333; margin: 20px 0 15px 0; font-weight: bold; }
.nrwz p { margin-bottom: 15px; line-height: 1.9; text-indent: 2em; }
.nrwz img { max-width: 100%; height: auto; margin: 15px 0; border-radius: 8px; }

/* Filter nav */
.nfl { width: 100%; border-bottom: 1px solid #ececec; background: #f8f8f8; }
.nfl ul { max-width: 1200px; margin: 0 auto; padding: 0 15px; overflow: hidden; text-align: center; }
.nfl .cl { line-height: 70px; text-align: center; display: inline-block; margin: 0 10px; }
.nfl a {
  padding: 0 10px; height: 70px; text-decoration: none;
  transition: all .2s ease-in 0s; display: block; color: #585858;
}
.nfl .on a { color: #fff; background: #00bc12; text-decoration: none; }

/* Pagination */
.pageListNav {
  text-align: center; padding: 20px 0;
  border-top: 1px solid #ececec; background: #f8f8f8;
}
.pageListNav a {
  display: inline-block; padding: 0 15px; height: 36px; line-height: 36px;
  margin: 0 5px; border-radius: 5px; transition: all .2s ease-in 0s;
  color: #585858; border: 1px solid #cecece;
}
.pageListNav a:hover, .pageListNav a.cur {
  color: #fff; background: #00bc12; border: 1px solid #00bc12; text-decoration: none;
}

/* Page turner */
.fy {
  width: 100%; padding: 10px 0; overflow: hidden;
  border-top: 1px solid #ececec; background: #f8f8f8;
}
.fy ul { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.fy li { font-size: 16px; line-height: 36px; color: #585858; }
.fy li a { color: #585858; }
.fy li a:hover { color: #00bc12; }
.fy li.return { float: right; }

/* Section heading (inner) */
.x-tit {
  line-height: 36px; text-align: center; padding: 5px 0 20px 0; margin: 0 0 15px 0;
  color: #8e8e8e; border-bottom: 1px dashed #cecece;
}
.x-tit h1 { font-size: 24px; font-weight: bold; color: #000; }

/* Product grid (inner) */
.n-cpcc { margin: 40px auto; overflow: hidden; }
.n-cpcc ul { display: flex; flex-wrap: wrap; justify-content: center; }
.n-cpcc li {
  width: 270px; margin: 0 15px 30px 15px; overflow: hidden; float: left;
  transition: all .2s ease-in 0s;
}
.n-cpcc li .tu { width: 270px; height: 215px; overflow: hidden; }
.n-cpcc li .tu img {
  width: 270px; height: 215px; object-fit: cover;
  transition: all .2s ease-in 0s;
}
.n-cpcc li .ti { text-align: center; line-height: 60px; font-size: 16px; color: #333; }
.n-cpcc li:hover a {
  display: block; transition: all .2s ease-in 0s; text-decoration: none;
  color: #fff; background: #00bc12;
}
.n-cpcc li:hover a img {
  transform: scale(1.05); transition: all .2s ease-in 0s;
}

/* ============================================================
   NEWS LIST (inner)
   ============================================================ */
.newslb { overflow: hidden; }
.newslb ul { padding: 0; }
.newslb li {
  max-width: 1160px; padding: 20px; margin: 20px auto;
  overflow: hidden; background: #f8f8f8; border: 1px solid #f8f8f8;
  transition: all .2s ease-in 0s;
}
.newslb li:hover {
  background-color: rgba(0, 188, 18, 0.05); border: 1px dashed rgba(0, 188, 18, 0.3);
}
.newslb li a { display: flex; flex-wrap: wrap; text-decoration: none; }
.newslb li:hover a { text-decoration: none; }
.newslb li .netu { width: 292px; min-width: 200px; height: 150px; margin-right: 20px; overflow: hidden; }
.newslb li .netu img {
  width: 292px; height: 150px; object-fit: cover; transition: all .2s ease-in 0s;
}
.newslb li:hover a img { transform: scale(1.05); transition: all .2s ease-in 0s; }
.newslb li .newz { flex: 1; min-width: 250px; line-height: 30px; overflow: hidden; color: #585858; }
.newslb li a .newz h1 { font-size: 16px; line-height: 36px; color: #000; }
.newslb li .newz h2 { font-size: 12px; line-height: 16px; padding: 5px 0; font-weight: normal; color: #8e8e8e; }
.newslb li .newz p { font-size: 14px; color: #585858; line-height: 24px; }

/* ============================================================
   NEWS DETAIL
   ============================================================ */
.news-article { padding: 20px 0; }
.na-head { border-bottom: 1px dashed #ececec; padding-bottom: 20px; margin-bottom: 20px; }
.na-head h1 { font-size: 24px; color: #333; font-weight: bold; line-height: 1.4; }
.na-meta { font-size: 13px; color: #8e8e8e; margin-top: 10px; }
.na-body { line-height: 1.9; color: #585858; font-size: 15px; }
.na-body p { margin-bottom: 15px; text-indent: 2em; }
.na-body img { max-width: 100%; height: auto; display: block; margin: 20px auto; border-radius: 8px; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-block { margin: 40px 0; }
.ab-tit { text-align: center; margin-bottom: 30px; }
.ab-tit h2 { font-size: 28px; color: #333; font-weight: bold; margin-bottom: 8px; }
.ab-tit span { font-size: 14px; color: #8e8e8e; letter-spacing: 2px; text-transform: uppercase; }
.ab-tit .line {
  width: 60px; height: 3px; background: #00bc12; margin: 10px auto 0 auto;
}

/* Timeline */
.timeline {
  max-width: 900px; margin: 0 auto; padding: 20px 0;
  position: relative;
}
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: #00bc12; transform: translateX(-50%);
}
.tl-item {
  display: flex; align-items: flex-start; margin-bottom: 30px;
  position: relative;
}
.tl-item:nth-child(odd) { flex-direction: row; padding-right: 50%; }
.tl-item:nth-child(even) { flex-direction: row-reverse; padding-left: 50%; }
.tl-dot {
  position: absolute; left: 50%; top: 5px; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%; background: #00bc12;
  border: 3px solid #fff; box-shadow: 0 0 0 3px #00bc12; z-index: 2;
}
.tl-year {
  font-size: 24px; font-weight: bold; color: #00bc12;
  padding: 0 30px; flex-shrink: 0; min-width: 80px;
}
.tl-item:nth-child(even) .tl-year { text-align: right; }
.tl-tt {
  font-size: 18px; font-weight: bold; color: #333; margin-bottom: 5px;
}
.tl-dd { font-size: 14px; color: #585858; line-height: 1.6; }

/* Culture cards */
.culture {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;
  max-width: 1000px; margin: 0 auto;
}
.cul-card {
  flex: 1; min-width: 250px; max-width: 320px;
  background: #f8f8f8; padding: 30px 20px; text-align: center;
  border-radius: 8px; transition: all 0.3s ease;
  border-top: 3px solid #00bc12;
}
.cul-card:hover { transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.cul-ico { font-size: 32px; color: #00bc12; margin-bottom: 15px; }
.cul-card h4 { font-size: 18px; color: #333; margin-bottom: 10px; font-weight: bold; }
.cul-card p { font-size: 14px; color: #585858; line-height: 1.8; }

/* Honor grid */
.honor-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;
  max-width: 1000px; margin: 0 auto;
}
.h-cell {
  width: 230px; text-align: center; background: #f8f8f8;
  border-radius: 8px; overflow: hidden; transition: transform 0.3s;
}
.h-cell:hover { transform: translateY(-5px); }
.h-cell img { width: 230px; height: 180px; object-fit: cover; }
.h-cell p { padding: 12px; font-size: 14px; color: #333; }

/* Team grid */
.team-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 30px;
  max-width: 1000px; margin: 0 auto;
}
.team-card {
  width: 200px; text-align: center; transition: transform 0.3s;
}
.team-card:hover { transform: translateY(-5px); }
.team-card .av {
  width: 140px; height: 140px; border-radius: 50%; overflow: hidden;
  margin: 0 auto 12px auto; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.team-card .av img { width: 140px; height: 140px; object-fit: cover; }
.team-card .info h4 { font-size: 16px; color: #333; font-weight: bold; }
.team-card .info span { font-size: 13px; color: #8e8e8e; }

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pd-wrap { max-width: 1200px; margin: 0 auto; padding: 20px 15px; }
.pd-top { display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; }
.pd-img { flex: 1; min-width: 300px; max-width: 500px; }
.pd-img img { width: 100%; height: auto; border-radius: 8px; object-fit: cover; }
.pd-info { flex: 1; min-width: 300px; }
.pd-info h1 { font-size: 26px; color: #333; font-weight: bold; margin-bottom: 10px; }
.pd-desc { font-size: 16px; color: #00bc12; margin-bottom: 20px; line-height: 1.6; }

.pd-params2 { width: 100%; margin-bottom: 20px; border: 1px solid #ececec; }
.pd-params2 td {
  padding: 10px 15px; border-bottom: 1px solid #ececec; font-size: 14px;
}
.pd-params2 td.k { background: #f8f8f8; color: #333; font-weight: bold; width: 120px; white-space: nowrap; }
.pd-params2 td:last-child { color: #585858; }

.pd-btn {
  display: inline-block; padding: 12px 36px; background: #00bc12;
  color: #fff; font-size: 16px; border-radius: 30px; text-decoration: none;
  transition: all 0.3s ease;
}
.pd-btn:hover { background: #00a00f; text-decoration: none; }

.pd-sect { margin: 40px 0; }
.pd-feat {
  display: flex; flex-wrap: wrap; gap: 20px;
}
.feat {
  flex: 1; min-width: 220px; background: #f8f8f8;
  padding: 25px 20px; border-radius: 8px; text-align: center;
  transition: transform 0.3s ease;
}
.feat:hover { transform: translateY(-3px); }
.feat .f-ico {
  width: 48px; height: 48px; border-radius: 50%; background: #00bc12;
  color: #fff; font-size: 20px; font-weight: bold;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px auto;
}
.feat h4 { font-size: 16px; color: #333; font-weight: bold; margin-bottom: 8px; }
.feat p { font-size: 14px; color: #585858; line-height: 1.7; }

.pd-rel { margin-bottom: 40px; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.lxwz { padding: 20px 0; line-height: 36px; overflow: hidden; }
.lxdt {
  display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 0;
}
.lx-card {
  flex: 1; min-width: 200px; text-align: center; padding: 30px 20px;
  background: #f8f8f8; border-radius: 8px; transition: transform 0.3s;
}
.lx-card:hover { transform: translateY(-3px); }
.lx-ico {
  width: 56px; height: 56px; border-radius: 50%; background: #00bc12;
  color: #fff; font-size: 24px; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 12px auto;
}
.lx-card h4 { font-size: 16px; color: #333; margin-bottom: 8px; font-weight: bold; }
.lx-card p { font-size: 15px; color: #585858; }

/* Contact form */
.lxform {
  max-width: 700px; margin: 40px 0; padding: 30px; background: #f8f8f8; border-radius: 8px;
}
.lxform h3 { font-size: 20px; color: #333; margin-bottom: 20px; font-weight: bold; }
.lxform .row { margin-bottom: 15px; }
.lxform .row.half { display: inline-block; width: 48%; margin-right: 2%; }
.lxform .row.half.r { margin-right: 0; }
.lxform label { display: block; font-size: 14px; color: #333; margin-bottom: 5px; }
.lxform input, .lxform textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #ddd;
  border-radius: 4px; font-size: 14px; font-family: inherit;
  box-sizing: border-box;
}
.lxform textarea { height: 120px; }
.lxform .btn {
  padding: 12px 36px; background: #00bc12; color: #fff;
  border: none; border-radius: 30px; font-size: 16px; cursor: pointer;
  transition: background 0.3s;
}
.lxform .btn:hover { background: #00a00f; }

/* ============================================================
   RESPONSIVE — Tablet (< 1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {
  .header { padding: 0 15px; }
  .logo-txt b { font-size: 16px; }
  .nav .nLi h4 { width: 70px; font-size: 13px; }
  .nav .sub { width: 70px; }
  .top-tel { font-size: 12px; margin-right: 10px; }
  .top-tel b { font-size: 14px; }

  .banner { height: 450px; }
  .slideBox { height: 450px; min-width: 0; }
  .slideBox .bd li { height: 450px; }
  .bn-txt h1 { font-size: 30px; }
  .bn-txt h2 { font-size: 16px; }
  .bn-btn { padding: 10px 28px; font-size: 14px; }

  .cp-tit-l, .us-tit-l, .xw-tit-l, .al-tit-l { width: 40%; }
  .cp-tit-r, .us-tit-r, .xw-tit-r, .al-tit-r { width: 60%; }

  .cpcc li, .alcc li, .n-cpcc li { width: calc(50% - 30px); max-width: 300px; }
  .cpcc li .tu, .cpcc li .tu img { width: 100%; height: auto; aspect-ratio: 4/3; }
  .alcc li .tu, .alcc li .tu img { width: 100%; height: auto; aspect-ratio: 4/3; }
  .n-cpcc li .tu, .n-cpcc li .tu img { width: 100%; height: auto; aspect-ratio: 4/3; }

  .newscc li { width: calc(50% - 30px); }
  .newscc li .pic, .newscc li .pic img { width: 100%; height: auto; aspect-ratio: 16/9; }

  .ptcc { gap: 20px; padding: 0 60px; }
  .pt-cell { width: calc(50% - 20px); max-width: 250px; }

  .foot .con { flex-direction: column; }
  .con-l { flex-wrap: wrap; }
  .f-rwm { padding-left: 0; padding-top: 20px; }

  .tl-item:nth-child(odd) { padding-right: 45%; }
  .tl-item:nth-child(even) { padding-left: 45%; }

  .pd-top { flex-direction: column; }
  .pd-img { max-width: 100%; }

  .lxform .row.half { width: 100%; margin-right: 0; display: block; }
}

/* ============================================================
   RESPONSIVE — Mobile (< 640px)
   ============================================================ */
@media screen and (max-width: 640px) {
  .menu-box { height: 60px; }
  .header { height: 60px; }
  .logo { height: 60px; }
  .logo-ico { width: 34px; height: 34px; }
  .logo-txt b { font-size: 14px; }
  .logo-txt span { font-size: 10px; }

  .top-tel { display: none; }

  /* Mobile menu toggle */
  .mobile-toggle { display: block; line-height: 60px; font-size: 24px; }
  .menu { position: relative; }
  .nav {
    display: none; position: absolute; top: 60px; left: 0;
    width: 200px; height: auto; background: rgba(0,0,0,0.9);
    flex-direction: column; z-index: 100; border-radius: 0 0 8px 8px;
  }
  .nav.open { display: block; }
  .nav .nLi { float: none; line-height: 44px; display: block; }
  .nav .nLi h4 { width: 100%; text-align: left; padding: 0 15px; }
  .nav .nLi h4 a { color: #fff; }
  .nav .sub { position: static; width: 100%; background: rgba(0,188,18,0.5); }
  .nav .sub li { box-shadow: none; border-bottom: 1px solid rgba(255,255,255,0.1); }

  .banner { height: 320px; }
  .slideBox { height: 320px; min-width: 0; }
  .slideBox .bd li { height: 320px; }
  .bn-txt h1 { font-size: 22px; }
  .bn-txt h2 { font-size: 14px; }
  .bn-btn { padding: 8px 24px; font-size: 13px; }
  .slideBox .prev, .slideBox .next { width: 36px; height: 60px; top: 45%; }

  .cp-tit, .us-tit, .xw-tit, .al-tit { padding: 40px 0 15px 0; }
  .cp-tit-l, .us-tit-l, .xw-tit-l, .al-tit-l { width: 100%; float: none; margin-bottom: 10px; }
  .cp-tit-r, .us-tit-r, .xw-tit-r, .al-tit-r { width: 100%; float: none; }
  .cp-tit-r .hi, .us-tit-r .hi, .xw-tit-r .hi, .al-tit-r .hi { float: left; margin: 0 5px 5px 0; }

  .cpcc li, .alcc li, .n-cpcc li { width: 100%; max-width: 320px; margin: 0 auto 20px auto; float: none; }
  .newscc li { width: 100%; max-width: 370px; margin: 20px auto 0 auto; float: none; }
  .newscc li .pic, .newscc li .pic img { width: 100%; height: auto; aspect-ratio: 16/9; }

  .ptcc { flex-direction: column; align-items: center; padding: 0 40px; }
  .pt-cell { width: 100%; max-width: 250px; }

  .lxcc { flex-direction: column; text-align: center; }
  .lxxx { flex-direction: column; text-align: center; }
  .lxl { padding: 0; text-align: center; }
  .lxl .ti { justify-content: center; text-align: center; }
  .lxr { padding: 20px 0 0 0; }
  .lxr .rwm img { width: 130px; height: 130px; }

  .con-l { flex-direction: column; gap: 15px; }
  .fcol { min-width: 100%; }
  .f-rwm { padding: 20px 0 0 0; width: 100%; }

  /* Inner pages */
  .n-banner { height: 250px; }
  .ntit { height: 60px; }
  .ntt { height: 60px; flex-wrap: wrap; padding: 10px 15px; }
  .ntt h1 { font-size: 20px; line-height: 1.3; }
  .ntt i { font-size: 14px; line-height: 1.3; display: none; }
  .weiz { line-height: 1.3; margin-left: 0; width: 100%; font-size: 12px; }

  .nfl .cl { margin: 0 5px; }
  .nfl a { padding: 0 8px; font-size: 13px; }

  .newslb li a { flex-direction: column; }
  .newslb li .netu { width: 100%; height: auto; margin-right: 0; margin-bottom: 10px; }
  .newslb li .netu img { width: 100%; height: auto; }

  /* Timeline mobile */
  .timeline::before { left: 20px; }
  .tl-item:nth-child(odd), .tl-item:nth-child(even) {
    flex-direction: row; padding-left: 50px; padding-right: 0;
  }
  .tl-dot { left: 20px; }
  .tl-year { font-size: 18px; padding: 0 15px; min-width: 60px; }

  .culture { flex-direction: column; align-items: center; }
  .cul-card { max-width: 100%; }

  .honor-grid { gap: 15px; }
  .h-cell { width: calc(50% - 15px); }

  .team-grid { gap: 20px; }
  .team-card { width: calc(50% - 20px); }

  .lxdt { flex-direction: column; }

  .pd-top { gap: 20px; }
  .pd-feat { flex-direction: column; }

  .fixed-right-nav { right: 5px; width: 38px; }
  .fixed-right-nav a { height: 38px; font-size: 10px; }
}