:root {
		    --primary-color: #009ad8;
		    --secondary-color: #029BD8;
		    --accent-color: #F2802A;
		    --light-color: #ecf0f1;
		    --dark-color: #2c3e50;
		    --gray-color: #7f8c8d;
		    --success-color: #27ae60;
		}

		.dianji_box{background: #fff; margin: 0 auto; padding-top: 30px; padding-bottom: 30px;}
		
		.container {
		    width: 100%;
		        max-width: 1480px;
		        margin: 0 auto;
		        padding-left: 50px;
		        padding-right: 50px;
		}
		/* Page Header */
		.page-header {
		    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
		    color: white;
		    padding: 100px 0;
		    text-align: center;
		    margin-bottom: 40px;
		}
		
		.page-header h1 {
		    font-size:min(max(4.167vw, 47px), 50px);
			padding-bottom: 30px;
		}
		
		.page-header p {
		    font-size:18px;
		    max-width: 700px;
		    margin: 0 auto;
		
		}
		
		/* Category Navigation */
		.category-nav {
		    background: white;
		    border-radius: 8px;
		    padding: 25px;
		    margin-bottom: 30px;
		    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
		}
		
		
		
		.category-nav h2 {
		    margin-bottom: 20px;
		    color: var(--primary-color);
		    border-bottom: 1px solid #eee;
		    padding-bottom: 15px;
		    display: flex;
		    align-items: center;
			font-weight: 700;
		}
		
		.category-nav h2 i {
		    margin-right: 10px;
		    color: var(--secondary-color);
		}
		
		.category-filters {
		    display: flex;
		    flex-wrap: wrap;
		    gap: 12px;
		}
		
		.category-filters ul li{ 
		 float: left;
		 width: auto; 
		
		 margin: 10px 10px; 
		
         cursor: pointer;
         transition: all 0.3s;
		 text-align: center; 
		 }
		.category-filters ul li a{ background: var(--light-color); display: block; width: 100%; padding: 10px 35px;  border-radius: 25px; }
		
		
	
		.category-filters ul li a:hover, .category-filters ul li a.active {
		    background: var(--secondary-color);
		    color: white;		
		}
	
	
	
	
	
		/* Series Introduction */
		.series-intro {
		    background: white;
		    border-radius: 10px;
		    padding: 30px;
		    margin-bottom: 40px;
		    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    text-align: center;
		}
		
		.series-intro h2 {
		    color: var(--primary-color);
		    margin-bottom: 20px;
		    font-size: 26px;
			font-weight: 700;
		}
		
		.series-intro p {
		    max-width: 800px;
		    margin-bottom: 25px;
		    font-size: 16px;
		    line-height: 1.6;
		}
		
		.features {
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    gap: 25px;
		    margin-top: 20px;
		}
		
		.feature {
		    flex: 1;
		    width: 25%;
		    padding:30px 20px 0px 20px;
		    background: var(--light-color);
		    border-radius: 8px;
		    text-align: center;
			box-sizing: border-box;
			
			
		}
		
		.feature i {
			 margin-bottom: 15px;
		}
		.feature i img{max-width: 25%; display: block; margin: 0 auto; }
		
		.feature h3 {
		    color:#333;
		    margin-top: 10px;
			margin-bottom: 0px;
			font-size: 16px;
			font-weight: 700;
		}
		
		/* Products Grid */
		.products-grid {
		    display: grid;
		    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		    gap: 30px;
		    margin-bottom: 50px;
		}
		
		.product-card {
		    background: white;
		    border-radius: 10px;
		    overflow: hidden;
		    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
		    transition: transform 0.3s, box-shadow 0.3s;
		    display: flex;
		    flex-direction: column;
		}
		
		.product-card:hover {
		    transform: translateY(-5px);
		    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
		}
		
		.product-image {
		    height: 220px;
		    background:#fff;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    color: var(--gray-color);
		    position: relative;
		    padding: 20px;
		}
		
		.product-image:hover {background: linear-gradient(to right, #82CEEB 0%, #93D8EA 100%); }
		
		.product-image:hover img {
		  -webkit-transform: scale(1.1);
		          transform: scale(1.1);
				   transition: all 1s;
		}
		
		
		.new-badge {
		    position: absolute;
		    top: 15px;
		    right: 15px;
		    background: var(--accent-color);
		    color: white;
		    padding: 5px 12px;
		    border-radius: 4px;
		    font-size: 12px;
		    font-weight: bold;
		}
		
		.product-info {
		    padding: 25px;
		    flex-grow: 1;
		    display: flex;
		    flex-direction: column;
		}
		
		.product-info h3 {
		    color: var(--primary-color);
		    margin-bottom: 15px;
		    font-size:18px;
		}
		
		.product-tags {
		    display: flex;
		    flex-wrap: wrap;
		    gap: 8px;
		    margin-bottom: 15px;
		}
		
		.tag {
		    background: var(--light-color);
		    padding: 5px 12px;
		    border-radius: 20px;
		    font-size: 12px;
		    color: var(--dark-color);
		}
		
		.product-description{
		    color: var(--gray-color);
		    font-size: 15px;
		    margin-bottom: 5px;display: -webkit-box;
			-webkit-line-clamp: 4; /* 限制行数为4 */
			-webkit-box-orient: vertical;
			overflow: hidden;
			font-size: 15px;
			margin-bottom: 5px;
			width: 100%;
		    
		}
		.product-description p {
			
			
			}
		
		.specs {
		    margin-bottom: 20px;
		}
		
		.spec {
		    display: flex;
		    justify-content: space-between;
		    margin-bottom: 2px;
		    font-size: 15px;
		}
		
		.spec-name {
		    color: var(--gray-color);
		}
		
		.spec-value {
		    font-weight: 500;
		}
		
		.product-actions {
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		}
		
		.product-link {
		    display: inline-flex;
		    align-items: center;
		    color: var(--secondary-color);
		    text-decoration: none;
		    font-weight: 500;
		    font-size: 15px;
		}
		
		.product-link:hover {
		    text-decoration: underline;
			color: #F2802A;
		}
		
		.product-link i {
		    margin-left: 5px;
		}
		
		.download-btn {
		    background: var(--primary-color);
		    color: white;
		    border: none;
		    border-radius: 4px;
		    padding: 8px 15px;
		    cursor: pointer;
		    font-size: 14px;
		  
			position: relative;
			padding-left:30px;
		}
		.download-btn:before { position: absolute;content: "";left:5px; top: 10px;background: url(../images/down_ico.png) no-repeat; width: 20px; height: 20px; background-size: cover; }
		
		
		.download-btn:hover { background: #F2802A;}
		
		/* Marble Cases Section */
		.marble-cases {
		    background: white;
		    border-radius: 10px;
		    padding: 40px;
		    margin-bottom: 50px;
		    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
		}
		
		.marble-cases h2 {
		    color: var(--primary-color);
		    margin-bottom: 30px;
		    text-align: center;
		    font-size: 26px;
		}
		
		.case-grid {
		    display: grid;
		    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
		    gap: 30px;
		}
		
		.case-card {
		    background: var(--light-color);
		    border-radius: 8px;
		    overflow: hidden;
		}
		
		.case-image {
		    height: 250px;
		    background: linear-gradient(45deg, #d5dbdb, #ebedef);
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    color: var(--gray-color);
		}
		
		.case-info {
		    padding: 20px;
		}
		
		.case-info h3 {
		    color: var(--primary-color);
		    margin-bottom: 10px;
			font-size: 16px;
			font-weight: 700;
			color: #363636;
		}
		
		.case-info p {
		    color: var(--gray-color);
		    margin-bottom: 15px;
		    line-height: 1.6;
		}
		
		/* Responsive Design */
		@media (max-width: 900px) {
		    .products-grid {
		        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		    }
		    
		    .case-grid {
		        grid-template-columns: 1fr;
		    }
		}
		
		@media (max-width: 768px) {
		    .navbar {
		        flex-direction: column;
		    }
		    
		    .nav-links {
		        margin-top: 15px;
		        flex-wrap: wrap;
		        justify-content: center;
		    }
		    
		    .nav-links li {
		        margin: 5px 10px;
		    }
		    
		    .category-filters {
		        justify-content: center;
		    }
		    
		    .page-header h1 {
		        font-size:20px;padding-bottom: 10px;
		    }
		    
		    .page-header p {
		        font-size: 14px;line-height: 1.4;
		    }
			
			.page-header { padding: 50px 0; margin-bottom:15px;}
			
			.container{padding-left: 10px; padding-right: 10px; max-width: 100%;}
		}
		
		
		@media (max-width: 1023px) {
			
		.category-filters{width: 100%; display: block; clear: both; }
			.category-nav h2{padding-bottom: 10px;margin-bottom: 10px;}
			.category-filters ul li{ width: 23%; margin: 5px 1%;}
		.category-filters ul li a{padding: 10px;}
			.feature{ float: left;width: 23%; margin: 10px 1%; }
			.feature{padding: 10px;}
			
				.dianji_box{ padding-top: 20px; padding-bottom: 20px;}
			
			}
		
		
		@media (max-width: 640px) {
			
			.category-nav {	 
			    padding: 15px;
			    margin-bottom: 15px;
			}
			.category-nav h2{padding-bottom: 10px;margin-bottom: 10px;}
			.category-filters ul li{ width: 48%; margin: 5px 1%;}
			.series-intro{ padding: 15px;margin-bottom: 15px;}
			
			.series-intro h2{ font-size: 20px; margin-bottom: 15px;}
			.series-intro p{ font-size: 14px; margin-bottom: 0; line-height: 1.4;}
			
			.features{display: block; margin-top: 0; }
			.feature{ float: left;width: 48%; margin: 10px 1%; }
			.feature h3{ font-size: 14px; line-height: 1.4; }
			
			.product-info h3{font-size: 16px;margin-bottom: 5px;}
			.product-description{font-size: 14px;line-height: 1.4;}
			.product-link{font-size: 14px;}
			.products-grid{ margin-bottom: 25px;}
			
			.marble-cases{padding: 10px;}
			.marble-cases h2{font-size:20px;margin-bottom: 15px;}
			
			.dianji_box{ padding-top: 15px; padding-bottom: 15px;}
			
			.feature{ float: none; width: 100%;}
					
				}