/* 整个页面背景色 */
       body {
           background-color: #F5F5F5;
       }

       /* 产品详情页面样式 */
       .products-banner {
           width: 100%;
           max-height: 520px;
           aspect-ratio: 1920 / 520;
           background-image: url("../assets/images/products/products-banner.webp");
           background-size: cover;
           background-position: center;
           background-repeat: no-repeat;
           padding-left: 6.25vw;
           /* 120px / 1920px = 6.25% */
           padding-top: 11.46vw;
           /* 220px / 1920px = 11.46% */
           position: relative;
       }

       .header-container {
           color: #fff;
       }

       .header-container h1 {
           font-size: 64px;
           font-weight: bold;
           margin-bottom: 20px;
           text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
       }

       .header-container p {
           font-size: 28px;
           font-weight: 400;
           text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
       }

       /* 面包屑导航样式 */
       .breadcrumb-container {
           padding: 10px 0;
       }

       .breadcrumb {
           color: #64748b;
           font-size: 14px;

           margin-bottom: 0 !important;
       }

       .detail-container {
           width: 83%;
           margin: 0 auto !important;
       }

       .breadcrumb a {
           color: #333333;
           text-decoration: none;
           transition: color 0.3s ease;
       }

       .breadcrumb span {
           color: #1e293b;
           font-weight: 500;
       }

       /* 产品基本信息区域 */

       .product-info-content {
           display: flex;
           gap: 30px;
           align-items: stretch;
       }

       .product-image-container {
           width: 680px;
           display: flex;
           justify-content: center;
           align-items: center;
           flex: 0 0 1fr;
           max-width: 50%;
           height: 100%;
           position: relative;
       }

       .product-image {
           width: 100%;
           height: 100%;
           aspect-ratio: 1 / 1;
           object-fit: cover;
       }

       .product-details {
           flex: 1;
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
           background: #fff;
           padding: 40px 50px;
       }

       .product-details h1 {
           font-size: 36px;
           font-weight: bold;
           color: #1e293b;
           margin-bottom: 10px;
       }

       .product-aliases {
           color: #64748b;
           margin-bottom: 20px;
           font-size: 16px;
       }

       .product-codes {
           display: flex;
           gap: 15px;
           margin-bottom: 30px;
       }

       .code-badge {
           background: #3F92B7;
           color: white;
           padding: 8px 16px;
           border-radius: 5px;
           font-size: 14px;
           font-weight: 500;
       }

       .product-properties ul {
           list-style: none;
           padding: 0;
           margin: 0 0 30px 0;
           display: flex;
           flex-wrap: wrap;
       }

       .product-properties li {
           width: 33%;
           padding: 8px 0;
           border-bottom: 1px dashed #3F92B7;
           font-size: 16px;
           display: flex;
           flex-direction: column;
           align-items: flex-start;
       }

       .product-properties li span:first-child {
           font-size: 16px;
           color: #666666;
           margin-bottom: 10px;
       }

       .product-properties li span:last-child {
           font-size: 22px;
           color: #333333;
       }

       .product-description {

           font-size: 16px;
           line-height: 1.6;
           color: #475569;
       }

       .product-actions {
           display: flex;
           gap: 15px;
       }

       .btn-primary,
       .btn-secondary {
           padding: 10px 20px;
           border-radius: 8px;
           font-size: 16px;
           font-weight: 500;
           cursor: pointer;
           border: none;
           display: flex;
           align-items: center;
           gap: 8px;
           transition: all 0.3s ease;
       }

       .btn-primary span,
       .btn-secondary span {
           display: flex;
           align-items: center;
           justify-content: center;
       }

       .btn-primary img,
       .btn-secondary img {
           width: 24px;
           height: 24px;
       }

       .btn-primary {
           background: linear-gradient(90deg, #6CC4DC 0%, #3F92B7 100%);
           color: white;
       }

       .btn-secondary {
           color: #3F92B7;
           border: 1px solid #3F92B7;
       }

       /* 应用领域 */
       .application-fields-section {
           padding: 80px 0;
       }

       .application-fields-section .detail-container {
           background: #fff;
           padding: 40px 50px;
       }

       .section-title {
           font-size: 32px;
           font-weight: bold;
           text-align: left;
           margin-bottom: 20px;
           color: #1e293b;
       }

       .section-line {
           width: 117px;
           height: 4px;
           background: #3F92B7;
           margin-bottom: 20px;
       }

       .section-description {
           text-align: left;
           color: #64748b;
           font-size: 14px;
           margin-bottom: 50px;
       }

       .application-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 30px;
       }

       .application-field {
           width: 100%;
           height: 238px;
           text-align: center;
           /* padding: 50px 30px; */
           transition: transform 0.3s ease;
           position: relative;
       }

       .application-field-content {
           width: 80%;

           height: 30%;

           position: absolute;
           top: 80%;
           left: 50%;
           transform: translate(-50%, -50%);


       }

       .application-field h3 {
           font-size: 18px;
           font-weight: 600;
           margin-bottom: 10px;
           color: #fff;
       }

       .application-field p {
           color: #fff;
           line-height: 1.5;
           text-overflow: ellipsis;
           white-space: nowrap;
           overflow: hidden;
       }

       .specifications-section .detail-container {
           background: #fff;
           padding: 40px 50px;
       }

       .specifications-table {
           max-width: 100%;
           margin: 0 auto;
       }

       .specifications-table table {
           width: 100%;
           border-collapse: collapse;
           background: white;
           border-radius: 12px;
           overflow: hidden;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
       }

       .specifications-table th,
       .specifications-table td {
           padding: 15px 20px;
           text-align: left;
           border-bottom: 1px solid #e2e8f0;
       }

       .specifications-table th {
           background: #D2E9FF;
           color: #3F92B7;
           font-weight: 600;
       }

       .specifications-table tr:last-child td {
           border-bottom: none;
       }

       .spec-note {
           text-align: left;
           color: #818181;
           font-size: 14px;
           margin-top: 20px;
       }

       /* 安全合规 */

       .safety-section {
           margin-top: 50px;
       }

       .safety-section .detail-container {
           background: #fff;
           padding: 40px 50px;
       }

       .safety-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
           gap: 30px;
       }

       .safety-item {
           text-align: center;
           padding: 30px;
           border-radius: 5px;
           background: #F5F5F5;
           border: 2px solid #F5F5F5;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
       }

       .safety-icon {
           width: 76px;
           height: 76px;
           margin-bottom: 20px;
       }

       .safety-icon img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }

       .safety-item h3 {
           font-size: 18px;
           font-weight: 600;
           margin-bottom: 10px;
           color: #333333;
       }

       .safety-item p {
           color: #666666;
           line-height: 1.5;
       }

       .packaging-section {
           margin-top: 50px;
           margin-bottom: 50px;
       }

       .packaging-section .detail-container {
           background: #fff;
           padding: 40px 50px;
       }

       .packaging-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
           gap: 30px;
       }

       .packaging-item {
           text-align: center;
           padding: 20px;
           border-radius: 12px;
           background: white;
           box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
           transition: transform 0.3s ease;
       }

       .packaging-item:hover {
           transform: translateY(-5px);
       }

       .packaging-image {
           width: 120px;
           height: 120px;
           margin: 0 auto;
           /*     border-radius: 12px; */
           overflow: hidden;
       }

       .packaging-image img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }

       .packaging-item h3 {
           font-size: 18px;
           font-weight: 600;
           margin-bottom: 10px;
           color: #1e293b;
       }

       .packaging-item p {
           color: #64748b;
           line-height: 1.5;
       }

       .contact-section {
           margin-bottom: 50px;
       }

       .contact-section .detail-container {
           background: url('../assets/images/products/product-bg.png');
           background-size: cover;
           background-position: center;
           background-repeat: no-repeat;
           padding: 40px 50px;
       }

       .contact-banner {
           text-align: center;
           max-width: 800px;
           margin: 0 auto;
       }

       .contact-banner h2 {
           font-size: 32px;
           font-weight: bold;
           margin-bottom: 20px;
           color: #fff;
       }

       .contact-banner p {
           font-size: 18px;
           margin-bottom: 40px;
           color: #fff;
           line-height: 1.5;
       }

       .contact-actions {
           display: flex;
           gap: 20px;
           justify-content: center;
       }

       .contact-actions .btn-primary {
           background: #fff;
           color: #3F92B7;
           border: 1px solid #3F92B7;
           border-radius: 5px;
           padding: 10px 20px;
           font-size: 16px;
           font-weight: 500;
       }

       .contact-actions .btn-secondary {
           color: #fff;
           border: 1px solid #fff;
       }

       .btn-secondary :hover {
           color: #fff !important;
           border: 1px solid #fff !important;
           background: none !important;
       }

       /* 询价弹窗样式 */
       .inquiry-modal {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.5);
           display: flex;
           justify-content: center;
           align-items: center;
           z-index: 10000;
       }

       .inquiry-modal-content {
           background: #fff;
           border-radius: 12px;
           width: 90%;
           max-width: 800px;
           max-height: 100vh;
           overflow-y: auto;
           box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
       }

       .inquiry-modal-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 30px 30px 20px;
           border-bottom: 1px solid #e2e8f0;
           background: linear-gradient(to bottom, #9ac8d6, #f2f5f7);
       }

       .inquiry-modal-header h2 {
           font-size: 24px;
           font-weight: bold;
           color: #1e293b;
           margin: 0;
       }

       .close-btn {
           background: none;
           border: none;
           font-size: 28px;
           color: #64748b;
           cursor: pointer;
           padding: 0;
           width: 30px;
           height: 30px;
           display: flex;
           align-items: center;
           justify-content: center;
           border-radius: 50%;
           transition: all 0.3s ease;
       }

       .close-btn:hover {
           background: #f1f5f9;
           color: #1e293b;
       }

       .inquiry-form {
           padding: 30px;
       }

       .form-row {
           display: flex;
           gap: 20px;
           margin-bottom: 20px;
       }

       .product-form-group {
           flex: 1;
           display: flex;
           flex-direction: column;
           align-items: flex-start;
       }

       .product-form-group.full-width {
           flex: 100%;
       }

       .product-form-group label {
           font-size: 14px;
           font-weight: 500;
           color: #374151;
           margin-bottom: 8px;
       }

       .required {
           color: #ef4444;
       }

       .product-form-group input,
       .product-form-group textarea {
           width: 100%;
           padding: 8px 16px;
           border: 1px solid #d1d5db;
           border-radius: 8px;
           font-size: 14px;
           font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
           transition: border-color 0.3s ease, box-shadow 0.3s ease;
           outline: none;
       }

       .product-form-group input:focus,
       .product-form-group textarea:focus {
           border-color: #3F92B7;
           box-shadow: 0 0 0 3px rgba(63, 146, 183, 0.1);
       }

       .product-form-group textarea {
           resize: vertical;
           min-height: 100px;
       }

       .form-actions {
           display: flex;
           justify-content: flex-end;
           gap: 15px;
           margin-top: 30px;
           padding-top: 20px;
           border-top: 1px solid #e2e8f0;
       }

       .btn-cancel,
       .btn-submit {
           padding: 12px 24px;
           border-radius: 8px;
           font-size: 14px;
           font-weight: 500;
           cursor: pointer;
           transition: all 0.3s ease;
           border: none;
       }

       .btn-cancel {
           background: #f8fafc;
           color: #64748b;
           border: 1px solid #e2e8f0;
       }

       .btn-cancel:hover {
           background: #f1f5f9;
           color: #475569;
       }

       .btn-submit {
           background: #3F92B7;
           color: white;
       }

       .btn-submit:hover {
           background: #2c6a8a;
           transform: translateY(-1px);
       }

       /* 响应式设计 */
       @media (max-width: 1920px) {
           .products-banner {
               padding-left: 6.25vw;
               padding-top: 11.46vw;
           }

           .header-container h1 {
               font-size: 3.33vw;
           }

           .header-container p {
               font-size: 1.46vw;
           }
       }

       @media (max-width: 1200px) {
           .products-banner {
               padding-left: 8vw;
               padding-top: 15vw;
           }

           .header-container h1 {
               font-size: 4vw;
           }

           .header-container p {
               font-size: 1.8vw;
           }
       }


       @media (max-width: 767px) {
           .products-banner {
               padding-left: 5vw;
               padding-top: 15vw;
               min-height: 200px;
               display: flex;
               align-items: center;
               background-image: url("../images/products/products-banner-mobile.webp");
               background-size: cover;
               background-position: center;
               background-repeat: no-repeat;
           }

           .ellipsis2 {}

           .application-field-content>p {
               display: none;
           }

           .header-container h1 {
               font-size: 24px;
               margin-bottom: 10px;
           }

           .packaging-item {
               padding: 0;
           }

           .header-container p {
               font-size: 14px;
           }

           .product-info-content {
               flex-direction: column;
               gap: 30px;
               width: 100%;
               padding: 0 20px;
           }

           .product-image-container {
               flex: none;
               width: 100%;
               max-width: 100%;
               height: auto;
           }

           .product-image {
               width: 100%;
               height: auto;
               aspect-ratio: 1 / 1;
           }

           .product-details {
               flex: none;
               width: 100%;
           }

           .contact-actions {
               flex-direction: column;
               align-items: center;
           }


           .inquiry-modal-content {
               width: 95%;
               margin: 20px;
           }

           .inquiry-modal-header {
               padding: 20px 20px 15px;
           }

           .inquiry-modal-header h2 {
               font-size: 20px;
           }

           .inquiry-form {
               padding: 20px;
           }

           .form-row {
               flex-direction: column;
               gap: 15px;
           }

           .form-actions {
               flex-direction: column;
               gap: 10px;
           }

           .btn-cancel,
           .btn-submit {
               width: 100%;
           }

           .application-grid,
           .safety-grid,
           .packaging-grid {
               grid-template-columns: 1fr;
           }
       }

       /*  @media (max-width: 480px) {
           .products-banner {
               padding-left: 4vw;
               padding-top: 10vw;
               min-height: 180px;
               display: flex;
               align-items: center;
               background-image: url("./images/products/products-banner-mobile.webp");
               background-size: cover;
               background-position: center;
               background-repeat: no-repeat;
           }

           .header-container h1 {
               font-size: 20px;
               margin-bottom: 8px;
           }

           .header-container p {
               font-size: 12px;
           }
       } */



       @media (min-width: 1920px) {
           .products-banner {
               padding-left: 120px;
               padding-top: 220px;
           }

           .header-container h1 {
               font-size: 64px;
           }

           .header-container p {
               font-size: 28px;
           }
       }



       .application-field-content {
           bottom: 5px;
       }

       /* 
       .safety-item {
           display: none;
       } */

       #specifications-tbody>tr>td:nth-child(1) {
           font-size: 16px;
       }