/* ÒýÈëË¼Ô´ºÚÌå×ÖÌå */
@font-face {
    font-family: 'Source Han Sans CN';
    src: url('https://fonts.gstatic.com/ea/notosanssc/v5/NotoSansSC-Regular.woff2') format('woff2'),
         url('https://fonts.gstatic.com/ea/notosanssc/v5/NotoSansSC-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Han Sans CN';
    src: url('https://fonts.gstatic.com/ea/notosanssc/v5/NotoSansSC-Bold.woff2') format('woff2'),
         url('https://fonts.gstatic.com/ea/notosanssc/v5/NotoSansSC-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
/* È·±£Ò³ÃæÕûÌå²»³öÏÖºáÏò¹ö¶¯ */
html, body {
  overflow-x: hidden; /* ²»ÈÝºáÏò¹ö¶¯ */
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ½¨¸´bannerÍ¼Òç³öÎÊÌâ */
.ban {
  width: 100%; /* ÈÝÆ÷Õ¼ÂúÆÁÄ»¿í¶È */
  overflow: hidden; /* °µ²Ø³¬³öÈÝÆ÷µÄÄÚÈÝ */
  background-image: url(/template/lelesigang/zzsg/zdzsj.png);
}

.ban img {
  width: 100%; /* Í¼Æ¬¿í¶È×ÔÊÊÓ¦ÈÝÆ÷ */
  height: auto; /* Î¬³ÖÍ¼Æ¬±ÈÀý */
  max-width: 100%; /* ÏÞ¶È×î´ó¿í¶ÈÎªÈÝÆ÷¿í¶È */
  display: block; /* È¥³ýÍ¼Æ¬µ×²¿Ä¬ÈÏ¿ÕÈ± */
}

.body1 {
    margin: 0;
    padding: 0;
    font-family: 'Source Han Sans CN', sans-serif;
    background-color: #f9f9f9;
}

.container {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}


.product-nav {
    background: url(/template/lelesigang/zzsg/zdzsj.png) no-repeat left 80px top 10px;
    padding: 20px 80px;
}

.nav-title {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-left: 20px;
    letter-spacing: 0.3em;
}

.nav-title span{
    color:#fff;
    padding-right: 5px;
}

.nav-subtitle {
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  width: 100%;
  font-size: 14px;
  margin: 8px 0;
}

.left-group {
  display: flex; 
  align-items: center;
  gap: 20px; 
  padding-left: 20px;

}

.solid-line {
  width: 50px;  
  height: 5px; 
  background-color: #fff; 
  color: transparent; 
  font-size: 0;      
  margin: 0;     
  padding: 0;      
  line-height: 1;    
}

.diameter-text {
  font-size: 16px;
}

.note-text {
  font-style: italic;
  font-size: 16px;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 20px;
}

.nav-item {
    background-color: #fff;
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
    font-size: 0; 
}

.nav-item .zdh2{
    font-size: 28px; 
    font-weight: bolder;
    padding:10px 0;
}

.nav-item a {
    display: inline-block;
    padding: 5px 20px;
    background-color: #007bff;
    background: linear-gradient(to bottom,#5E8DDF,#2D6AD1);
    color: #fff;
    text-decoration: none;
    margin-bottom: 5px;
    transition: background-color 0.3s;
    font-size: 14px;
    vertical-align: middle;
}

.nav-item a:hover {
    background-color: #0056b3;
}

.nav-item span {
    display: inline-block;
    padding: 5px 20px;
    background-color: #ff7b00;
    color: #fff;
    margin-bottom: 5px;
    font-size: 14px;
    vertical-align: middle;
}

.jybanner {
    position: relative; /* ÌáÉý²ã¼¶£¬£¬£¬£¬£¬£¬Ô¤·À±» .factory ¸²¸Ç¹Ø¼üÄÚÈÝ */
    z-index: 1; 
    background: url('/template/lelesigang/zzsg/hdbj.png') no-repeat center center;
    background-size: cover;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.jybanner-text {
    text-align: center;
}

.jybanner-text h2 {
    font-size: 45px;
    margin-bottom: 10px;
    padding-bottom: 20px;
}

.jybanner-text p {
    font-size: 16px;
}

.factory {
    display: flex;
    padding: 20px;
    position: relative; /* ¹Ø¼ü£ºÈ·±£¸ºmarginÆ«ÒÆÊ±£¬£¬£¬£¬£¬£¬ÄÚÈÝ²»Ó°ÏìÆäËûÔªËØ²¼¾Ö */
    z-index: 2; /* ²ã¼¶¸ßÓÚ .jybanner£¬£¬£¬£¬£¬£¬È·±£ .factory ÄÚÈÝÏÔÊ¾ÔÚ³ÁµþÇøÓòÉÏ·½ */
    margin-top: -50px;
}

.factory-left {
    flex: 1;
    padding-right: 20px;
}

.factory-card {
    background-color: #2966D0;
    color: #fff;
    padding: 50px 40px;
    border-radius: 5px;
    text-align: center;
}

/* ¸¸ÈÝÆ÷£º½ÚÔìÍ¼Æ¬ºÍÎÄ×ÖºáÏò·ÖÁÐ + ÕûÌå¶ÔÆë */
.factory-card-title {
    display: flex; /* ÆôÓÃFlex²¼¾Ö£¬£¬£¬£¬£¬£¬ÈÃ×ÓÔªËØ£¨img¡¢h3£©ºáÏò·ÖÁÐ */
    align-items: center; /* Í¼Æ¬ÓëÎÄ×Ö´¹Ö±¾ÓÖÐ¶ÔÆë£¨Ô¤·À¸ßµÍ´íÎ»£© */
    gap: 20px; /* Í¼Æ¬ºÍÎÄ×ÖÖ®¼äµÄ¼ä¾à£¬£¬£¬£¬£¬£¬¿É°´Ðèµ÷Õû£¨Èç10px/15px£© */
    margin-bottom: 12px; /* ÓëÏÂ·½ÎÄ×Ö£¨Ã¿Ò»¼þ²úÆ·¶¼ÄÜÌåÏÖca88¹Ù·½Î¨Ò»ÓÃÐÄ£©µÄ¼ä¾à£¬£¬£¬£¬£¬£¬Î¬³Ö²¼¾ÖºôÎü¸Ð */
}

/* Í¼Æ¬ÐÎ×´£º½ÚÔì³ß´ç+Ô¤·À±äÐÎ */
.factory-card-title img {
    width: 80px; /* Í¼Æ¬¿í¶È£¬£¬£¬£¬£¬£¬Æ¾¾Ý icon6.png ÏÖÊµ³ß´çµ÷Õû£¨½¨ÒéÓëÎÄ×Ö¸ß¶ÈÆ¥Åä£© */
    height: 80px; /* Í¼Æ¬¸ß¶È£¬£¬£¬£¬£¬£¬Óë¿í¶ÈÒ»ÖÂÈ·±£Í¼±ê²»±äÐÎ */
    object-fit: contain; /* Î¬³ÖÍ¼Æ¬Ô­ÓÐ±ÈÀý£¬£¬£¬£¬£¬£¬Ô¤·ÀÀ­ÉìÍÌÍÂ */
    vertical-align: middle; /* ¼æÈÝ·ÇFlex³¡¾°µÄ´¹Ö±¶ÔÆë£¨¶µµ×£© */
}

/* ÎÄ×ÖÐÎ×´£ºÓÅ»¯×ÖÌå+¶Ï¸ùÄ¬ÈÏ±ß¾à */
.factory-card-title h3 {
    font-size: 30px; /* ÎÄ×Ö´óÐ¡£¡£¡£¡£¡£¬£¬£¬£¬£¬£¬ÓëÔ­Ò³Ãæ·ç¸ñÎ¬³ÖÒ»ÖÂ */
    font-weight: bold; /* ÎÄ×Ö¼Ó´Ö£¬£¬£¬£¬£¬£¬Í¹Æð±êÌâ²ã¼¶ */
    color: #fff; /* ÎÄ×ÖÉ«²Ê£¨Òò¸¸ÈÝÆ÷ .factory-card ÊÇÀ¶É«²¼¾°£¬£¬£¬£¬£¬£¬ÓÃ°×É«¸üÄÜ¸É£© */
    margin: 0; /* ¶Ï¸ù h3 Ä¬ÈÏµÄ¸ßµÍ±í±ß¾à£¬£¬£¬£¬£¬£¬Ô¤·ÀÓ°ÏìFlex´¹Ö±¾ÓÖÐ */
    line-height: 1.3; /* ÓÅ»¯ÎÄ×ÖÐÐ¸ß£¬£¬£¬£¬£¬£¬Ô¤·À»»ÐÐºóÓµ¼· */
    letter-spacing: 0.2em;
}

.factory-card p {
    font-size: 16px;
    margin-bottom: 5px;
}

.factory-xyw {
  font-size: 12px; /* »ù´¡×ÖÌåÉèÎªä¯ÀÀÆ÷ÔÊÐíµÄ×îÓ×³ß´ç£¨Èç12px£© */
  transform: scale(0.5); /* ËõÓ×50%£¬£¬£¬£¬£¬£¬ÊÓ¾õÉÏ=6px */
  margin: 0;
  color: #fff; /* È·±£ÎÄ×ÖÉ«²Ê¿É¼û */
  display: inline-block; /* ¹²Í¬Ëõ·Å£¬£¬£¬£¬£¬£¬Ô¤·ÀÓ°ÏìÆäËûÔªËØ²¼¾Ö */
}

.factory-features {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.factory-features {
    display: flex;
    flex-wrap: wrap; 
    gap: 16px; 
    margin-top: 12px; 
    text-align: center;
}

.feature-item {
    width: calc(49% - 6px); 
    padding: 5px 15px; /* ±êÇ©ÄÚ±ß¾à£¬£¬£¬£¬£¬£¬Ô¤·ÀÎÄ×ÖÌù±ß */
    margin: 0; /* ¶Ï¸ùÄ¬ÈÏmargin£¬£¬£¬£¬£¬£¬Ô¤·ÀÓ°Ïì²¼¾Ö */
    border-radius: 50px; /* ±êÇ©Ô²½Ç£¬£¬£¬£¬£¬£¬ÓëÔ­·ç¸ñÍ³Ò» */
    font-size: 18px; /* ±êÇ©ÎÄ×Ö´óÐ¡£¡£¡£¡£¡£¬£¬£¬£¬£¬£¬Î¬³ÖÔ­·ç¸ñ */
    font-weight: bold;
    letter-spacing: 0.2em;
    background-color: #fff; /* ±êÇ©²¼¾°ÖÂ£¬£¬£¬£¬£¬£¬Ô­·ç¸ñ²»±ä */
    color: #000; /* ±êÇ©ÎÄ×ÖÉ«£¬£¬£¬£¬£¬£¬Ô­·ç¸ñ²»±ä */
    text-align: center; /* ÎÄ×Ö¾ÓÖÐ£¬£¬£¬£¬£¬£¬ÌáÉýÃÀ¹Û¶È */
    box-sizing: border-box; /* ¹Ø¼ü£ºÈ·±£padding²»³Å´ó¿í¶È£¬£¬£¬£¬£¬£¬²¼¾Ö²»±ä */
}

/* °×É«Ï¸ÊµÏß£º¿íÕ¼ÂúÈÝÆ÷¡¢¸ß2px */
.zddzxbbt {
    width: 100%; /* ¿í¶ÈÕ¼Âú¸¸ÈÝÆ÷£¨factory-card£© */
    height: 2px; /* ÏßÌõ¸ß¶È2px£¬£¬£¬£¬£¬£¬ÊµÏÖ¡°Ï¸ÊµÏß¡±³ÉÐ§ */
    background-color: #fff; /* °×É«ÏßÌõ£¬£¬£¬£¬£¬£¬ÊÊÅä¸¸ÈÝÆ÷À¶É«²¼¾° */
    padding: 0; /* ¶Ï¸ùp±êÇ©Ä¬ÈÏÄÚ±ß¾à£¬£¬£¬£¬£¬£¬Ô¤·ÀÏßÌõ±ä´Ö */
    border: none; /* ¶Ï¸ùp±êÇ©Ä¬ÈÏ±ß¿ò£¬£¬£¬£¬£¬£¬È·±£Ö»ÓÐ´¿É«ÏßÌõ */
    margin-top: 2px;
}

.factory-img {
    width: 100%;
    margin-top: 10px;
}

.factory-right {
    flex: 2;
}

.factory-desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
    text-indent: 2em;
    margin-top: 40px;
}

.factory-right-img {
    width: 100%;
    height: 510px;
}

.advantage {
    background-image: url('/template/lelesigang/zzsg/ldbj.png');
    color: #fff;
    padding: 20px 150px;
    text-align: center;
}

.advantage h2 {
    font-size: 50px;
    padding: 15px 0;
}

.title-with-gradient-lines {
  position: relative; 
  margin: 20px 0 30px 0;
  padding: 20px 0;
}

.title-with-gradient-lines::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; 
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0));
}

.title-with-gradient-lines::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0));
}

.advantage-btns {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.advantage-btn {
    padding: 10px 20px;
    background-color: #fff;
    font-size: 20px;
    color: #000;
    border: none;
    font-weight: bold;
    border-radius: 25px 0px 0px 25px;
    cursor: pointer;
    font-family: 'Source Han Sans CN', sans-serif;
    transition: all 0.3s;
}

.advantage-btn-orange {
    background-color: #ff7b00;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    border-radius: 0px 25px 25px 0px;
}

.advantage-features {
    display: flex;
    justify-content: space-around;
}

.advantage-feature {
    text-align: center;
}

.advanthr{
    width:30px; 
    height:3px; 
    background:#fff; 
    margin:0 auto;
}

.advantage-feature img {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

.advantage-feature h1 {
    font-size: 16px;
    font-weight: bolder;
    padding: 5px 0;
}
.advantage-feature p {
    font-size: 12px;
}

.recommend {
    padding: 20px 150px;
    text-align: center;
    background-image: url('/template/lelesigang/zzsg/bdbj.jpg');
}

.recommend h2 {
    font-size: 40px;
    margin-bottom: 5px;
    padding: 10px 0;
}

.recommend h3 {
    font-size: 20px;
    color: #346FCD;
    margin-bottom: 20px;
    padding-top: 20px;
}

.recommend .zdxg {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}

.recommend .zdxg span {
    font-size: 18px;
    margin-bottom: 10px;
    color: #666;
    font-weight: bolder;
}

.recommend p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.product-card-wrap {
    background: linear-gradient(to bottom, #2270D5, #0A3AA8);
    border-radius: 35px; 
    padding: 13px; 
    margin-bottom: 20px; 
}

.product-card {
    display: flex;
    border: 8px solid #D3E3FA; 
    border-radius: 25px; 
    overflow: hidden;
    transition: box-shadow 0.3s;
    background-color: #fff; 
    width: 98.5%;
}

.gradient-line {
    display: flex;
    width: 230px;  
    height: 5px;   
    align-items: center; /* Ï¸ÏßÔÚÈÝÆ÷ÄÚ´¹Ö±¾ÓÖÐ£¨Ô¤·À¸ßµÍÆ«ÒÆ£© */
    margin: 10px 0; 
}

.line-thick {
    width: 80px;
    height: 5px;
    background-color: #999; 
}

.line-thin {
    width: 150px;
    height: 2px;
    background-color: #ccc; 
}

.product-card-wrap:hover .product-card {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); 
}

.product-card-left {
    flex: 1;
    padding: 30px;
    text-align: left;
    flex: 4;
}

.product-card-left h2 {
    margin-bottom: 5px;
    font-size: 24px; 
    font-weight: normal;
    margin-top: 0; 
}

.product-card-left h3 {
    margin-top: 0; 
    font-size: 50px;
    font-weight: bolder;
    background: linear-gradient(to bottom, #EE5A08, #FD2C0C);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.1em;
    padding: 20px 0;
}

.product-features {
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin: 10px 0; 
    padding-bottom: 40px;
}

.product-feature {
    width: calc(45% - 5px); 
    padding: 5px 10px;
    padding-left: 20px; 
    margin: 0;
    border-radius: 3px;
    font-weight: bold;
    font-size: 20px;
    box-sizing: border-box; 
    position: relative; 
}

.product-feature::before {
    content: ""; 
    position: absolute; /* ¾ø¶Ô¶¨Î»£¬£¬£¬£¬£¬£¬¹Ì¶¨ÔÚÎÄ×Ö×ó²à */
    left: 8px; /* Ô²µãÓë±êÇ©×ó²àµÄ¾àÀë£¬£¬£¬£¬£¬£¬°´Ðèµ÷Õû */
    top: 50%; /* ´¹Ö±¾ÓÖÐ£ºÏÈ¶¨Î»µ½±êÇ©50%¸ß¶È´¦ */
    transform: translateY(-50%); /* ÔÙÏòÉÏÆ«ÒÆ×ÔÉí50%£¬£¬£¬£¬£¬£¬ÊµÏÖ¾«×¼´¹Ö±¾ÓÖÐ */
    width: 6px; 
    height: 6px; 
    background-color: #ff7b00; 
    border-radius: 50%; /* Ô²ÐÎ»¯£¬£¬£¬£¬£¬£¬ÊµÏÖÊµÐÄÔ²µã */
}

.product-card-left a {
    display: inline-block;
    padding: 5px 20px;
    background-color: #ff7b00;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    margin-top: 10px;
    transition: background-color 0.3s;
    font-size: 12px;
}

.product-card-left a:hover {
    background-color: #e66a00;
}

.product-card-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 6;
}
.product-card-left img,
.product-card-right img {
    width: 350px;
    height: auto;
}<!--ºÄÊ±1786755403.6439Ãë-->