html { background: #ffffff; font-size: 14px; color: #333; font-family: "Arial", "微软雅黑", "Helvetica", "sans-serif"; }

body { min-width: 1220px; }

.g_cw {width: 1220px;/* padding: 0 10px; */margin: 0 auto;}
.g_cw::before,
.g_cw::after { content: ''; display: block; clear: both; }

.g_mt { margin-top: 100px; }
.g_mt::before,
.g_mt::after { content: ''; display: block; clear: both; }

.g_mb { margin-bottom: 100px; }
.g_mb::before,
.g_mb::after { content: ''; display: block; clear: both; }

@media (max-width: 1024px) {
	body { min-width: 0; }
	.g_cw { width: 100%; }
}

@media (max-width: 700px) {
	.g_mt { margin-top: 50px; }
	.g_mb { margin-bottom: 50px; }
}


.g_page {/* clear: both; *//* text-align: center; */font-size: 14px;color: #888888;width: 100%;}
.g_page > ul {display: inline-block;}
.g_page > ul > li { float: left; line-height: 35px; margin: 0 5px; }
.g_page > ul > li a { display: block; background: #fff; padding: 0 15px; border: 1px solid #E8E8E8; border-radius: 3px; }
.g_page > ul > li a .fa { font-size: 17px; line-height: 35px; }
.g_page > ul > li a.dis { color: #ccc; cursor: not-allowed; }
.g_page > ul > li a:hover:not(.dis),
.g_page > ul > li a.on { background: #388CD2; color: #fff; border: 1px solid #388CD2; }


.g_title { clear: both; margin-bottom: 40px; }
.g_title .h1 { font-size: 28px; font-weight: bold; margin-bottom: 10px; text-align: center; }
.g_title .h2 { text-align: center; }


.g_header { clear: both; }

.g_header .top { clear: both; height: 110px; border-bottom: 1px solid #E9E9E9; }

.g_header .top .logo { float: left; line-height: 100px; font: bold 50px/100px arial; color: #333333; }
.g_header .top .logo img {vertical-align: middle;margin-right: 10px;width: 222px;}

.g_header .top .right { float: right; line-height: 110px; }
.g_header .top .right .tel { color: #666666; line-height: normal; display: inline-block; padding-bottom: 10px; border-bottom: 1px solid #666; }
.g_header .top .right .pic { float: right; margin-left: 10px; width: 90px; height: 110px; line-height: 110px; background: #42CE8B; text-align: center; border-bottom: 5px solid #3AB97C; }
.g_header .top .right .pic img { vertical-align: middle; height: 32px; }


.g_header .bar { display: none; }


.g_header .nav { position: relative; z-index: 99; box-shadow: 0 5px 10px rgba(0,0,0,.02); }
.g_header .nav .g_cw { text-align: center; height: 55px; overflow: hidden; }
.g_header .nav .list { display: inline-block; }
.g_header .nav .list > li { float: left; }
.g_header .nav .list > li > a { display: block; padding: 0 50px; font-size: 16px; color: #666666; }
.g_header .nav .list > li > a.on,
.g_header .nav .list > li > a:hover { color: #3E87C4; }
.g_header .nav .list > li > a b { line-height: 52px; display: inline-block; border-bottom: 3px solid transparent; transition: ease .3s; }
.g_header .nav .list > li > a.on b,
.g_header .nav .list > li > a:hover b { border-bottom: 3px solid #3E87C4; }


@media (max-width: 1024px) {
	body { padding-top: 70px; }
	.g_header { height: auto; }
	.g_header .top { display: none; }
	.g_header .bar { position: relative; display: block; position: fixed; z-index: 100; left: 0; top: 0; right: 0; height: 70px; background: #fff; border-bottom: 1px solid #42CE8B; }
	.g_header .bar .logo { position: absolute; left: 0; top: 0; display: block; padding: 0 10px; color: #333333; font: bold 30px/70px arial; }
	.g_header .bar .logo img { height: 40px; vertical-align: text-bottom; margin-right: 10px; }
	.g_header .bar .menu { position: absolute; right: 0; top: 0; display: block; float: right; padding: 0 10px; line-height: 70px; }
	.g_header .bar .menu img { vertical-align: middle; height: 40px; }

	.g_header .nav { visibility: hidden; opacity: 0; position: fixed; z-index: 99; left: 0; top: -100%; bottom: 100%; right: 0; background: #fff; border-top: 0; transition: ease .4s; }
	.g_header .nav .g_cw { text-align: left; padding: 0 20px; height: auto; overflow: visible; }
	.g_header .nav .list { display: block; }
	.g_header .nav .list > li { float: none; }
	.g_header .nav .list > li > a {padding: 0px 10px;font-size: 16px;color: #42CE8B;}
	.g_header .nav .list > li > a.on,
	.g_header .nav .list > li > a:hover { color: #3E87C4; }
	.g_header .nav .list > li > a b { line-height: 40px; }

	.g_header .nav.show { visibility: visible; opacity: 1; top: 70px; bottom: 0; }
}


.g_footer {background: #EFEFEF;padding: 0px 0 50px;}

.g_footer .link { float: left; padding: 0 0 10px; font-size: 15px; }
.g_footer .link b { color: #3E87C4; }
.g_footer .link a { margin: 0 15px; color: #7D7D7D; }
.g_footer .link a img { height: 20px; vertical-align: middle; margin-right: 10px; }

.g_footer .share { float: right; }
.g_footer .share a { margin-left: 5px; }
.g_footer .share a img { height: 28px; }

.g_footer .bottom { clear: both; text-align: center; padding: 20px 0 0; margin: 20px 0 0; border-top: 1px solid #E4E4E4; color: #999999; }
.g_footer .bottom span { margin: 0 5px; }

@media (max-width: 1024px) {
	.g_footer .link { float: none; }
	.g_footer .link b { display: block; }
	.g_footer .link a { display: inline-block; margin: 0; padding: 10px; padding-left: 0; }
	.g_footer .share { float: none; }
	.g_footer .share a { margin-left: 0; margin-right: 5px; }
}



.g_site {color: #666666;line-height: 65px;padding: 0 10px;}
.g_site img { height: 18px; vertical-align: text-bottom; }


.g_body {/* background: #F7FCFF; */overflow: hidden;}
.g_body .block { background: #fff; border: 1px solid #F1F1F1; padding: 30px; margin-bottom: 50px; }

.g_body .block .left { float: left; width: 260px; padding-right: 30px; border-right: 1px solid #CFCFCF; }
.g_body .block .left .t { padding: 0 0 0 10px; border-left: 5px solid #3E87C4; line-height: 1em; font-size: 28px; font-weight: bold; color: #3E87C4; margin-bottom: 20px; }
.g_body .block .left .c > li { margin-bottom: 4px; }
.g_body .block .left .c > li a { display: block; padding: 18px 20px; color: #fff; line-height: 1em; opacity: .8; }
.g_body .block .left .c > li a.on,
.g_body .block .left .c > li a:hover { font-weight: bold; opacity: 1; }
.g_body .block .left .c > li a .fa { margin-right: 15px; }
.g_body .block .left .c > li:nth-child(1) a { background: #47AA40; }
.g_body .block .left .c > li:nth-child(2) a { background: #3E87C4; }
.g_body .block .left .c > li:nth-child(3) a { background: #E7C01F; }
.g_body .block .left .c > li:nth-child(4) a { background: #5D6769; }

.g_body .block .body {/* position: relative; *//* left: -1px; *//* padding-left: 30px; *//* border-left: 1px solid #CFCFCF; *//* overflow: hidden; */}


@media (max-width: 800px) {
	.g_body .block { padding: 20px; }
	.g_body .block .left { float: none; width: auto; padding-right: 0; border-right: 0; margin-bottom: 40px; }
	.g_body .block .body { left: 0; padding-left: 0; border-left: 0; margin-bottom: 40px; }
}
.g_footer {
    
    padding: 10px 0 20px;
}
@media (max-width: 600px) {
	.g_body .block { padding: 20px 10px; }


	
}










    /* 产品列表容器：大气留白，最大宽度限制 */
    .product-list {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);  /* 默认1行4个 */
      gap: 2rem;                              /* 宽间距，大气感 */
    }

    /* 产品卡片 */
    .product-card {
      background: #ffffff;
      border-radius: 8px;                    /* 大圆角，现代感 */
      overflow: hidden;
      box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.08), 
                  0 4px 10px -2px rgba(0, 0, 0, 0.02);
      transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), 
                  box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1);
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    /* 悬停微动效 */
    .product-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 30px 50px -16px rgba(0, 0, 0, 0.2), 
                  0 10px 20px -8px rgba(0, 0, 0, 0.08);
    }

    /* 图片容器：固定4:3比例 */
    .product-image {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;                   /* 关键：4:3比例 */
      background: #eef2f6;                   /* 图片占位背景 */
      overflow: hidden;
    }

    .product-image img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;                     /* 裁剪填充，保持比例 */
      display: block;
      transition: transform 0.5s cubic-bezier(0.2, 0, 0, 1);
    }

    .product-card:hover .product-image img {
      transform: scale(1.04);                /* 悬停轻微放大 */
    }

    /* 信息区域：只保留标题，更简洁大气 */
    .product-info {
      padding: 1.25rem 1.5rem 1.5rem;
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    /* 产品标题：大气字体 */
    .product-title {
      font-size: 1.15rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: #0f172a;
      line-height: 1.35;
      /* 多行省略 */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* ----- 响应式调整 ----- */
    /* 平板（1024px以下）: 一行3个 */
    @media (max-width: 1024px) {
      .product-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
      }
      body {
        padding: 2.5rem 1.5rem;
      }
    }

    /* 小平板/大手机横屏（768px以下）: 一行2个 */
    @media (max-width: 768px) {
      .product-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
      }
      body {
        padding: 2rem 0rem;
      }
      .product-title {
        font-size: 1rem;
      }
    }

    /* 手机竖屏（480px以下）: 一行1个，但图片仍4:3，卡片变宽 */
    @media (max-width: 480px) {
      .product-list {
        grid-template-columns: 2fr;
        gap: 0.5rem;
        grid-template-columns: repeat(2,1fr);
      }
      body {
        /* padding: 1.5rem 1rem; */
      }
      .product-info {
        padding: 1.2rem 1.25rem 1.5rem;
      }
      .product-title {
        font-size: 1.1rem;
      }
    }

    /* 超小屏优化，避免文字过小 */
    @media (max-width: 360px) {
      .product-title {
        font-size: 1rem;
      }
    }

    /* 可选：浅色模式下的优雅细节 */
    ::selection {
      background: #3b82f6;
      color: white;
    }

    /* 让图片占位有淡淡的纹理，避免纯色单调（无图时的表现） */
    .product-image {
      background-image: radial-gradient(circle at 10% 10%, rgba(200, 210, 220, 0.3) 0%, transparent 30%);
    }
 
  
  

    
  .div img{
      width:100%;
  }