header { background-color:#f7f7f7;border-bottom:1px solid #eeeeee; }
	nav ul li a{ color:#222222; }
	.logo .logo-white{ display:none; }
	.logo .logo-black{ display:block; }
	.logo { color:#222222; }
	.fa-bars:before, .fa-navicon:before{ color:#222222; }
	.cta-button{ background: rgb(0 0 0 / 0%);border: 1px solid #676767;color: #222222; }

	/* case start */
	.case-container { max-width: 100%;margin: 0 auto;padding: 80px 5%;background-color:#f7f7f7; }
	
	/* Navigation bar style */
	.category-section { margin-top:60px;}
	.category-list { display: flex;justify-content: left;list-style: none;flex-wrap: wrap; }	
	.category-item { margin: 0 15px;}	
	.category-link { text-decoration: none;font-size:18px;color: #7b7b7b;font-weight: 500;padding: 5px 0;position: relative;transition: color 0.3s; }
	.category-link:hover, .category-link.active { color: #000000; }	
	.category-link.active::after { content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background-color: #000000; }
	
	/* 项目网格样式 */
	.projects-grid { display: grid;grid-template-columns: repeat(2, 1fr);gap: 40px;margin-bottom: 60px;margin-top:60px; }
	.projects-grid a { text-decoration:none; }
	
	/* 项目卡片样式 */
	.project-card { border-radius: 10px;overflow: hidden;transition: transform 0.3s, box-shadow 0.3s; }	
	.project-image { width: 100%;height:600px;display: flex;align-items: center;justify-content: center;font-size: 3rem;color: white;position: relative;background:#ff000000;overflow: hidden; border-radius: 10px;}	
	.project-image img { width: 100%;height: 100%;border-radius: 10px;transition: transform 0.5s ease;background-size: 100% 100%;background-repeat: no-repeat;background-position: center; }
	.project-image:hover img { transform: scale(1.2); }
	.project-content h3 { font-size: 22px;font-weight: 600;color:#000000;margin-bottom: 10px; }	
	.project-content p { color: #666666; font-size: 16px;line-height: 1.5; }
	
	/* 响应式设计 */
	
	@media (max-width: 1669px) {
		.project-image{ height:600px;}
	}
	@media (max-width: 1600px) {
		.project-image{ height:500px;}
	}	
	@media (max-width: 1500px) {
		.project-image{ height:400px;}
	}
	@media (max-width: 1200px) {
		.project-image{ height:320px;}
	}
	@media (max-width: 1000px) {
		.project-image{ height:320px;}
	}	
	
	@media (max-width: 992px) {
		#main-nav{
		margin-left:0%;
		}	
		nav ul li a {
			color:#fff;
		}
		.case-container {
			padding: 40px 5%;
		}
		.category-item a {
			font-size: 16px;
			margin-left: 20px;
			line-height: 45px;
		}
		.project-title{
			font-size:18px;
		}
		.project-description {
			font-size: 14px;
		}
		.project-content{
			padding:4px;
		}
		.category-section {
			margin-top:20px;
		}		
		.categy-link{
			font-size:12px;
		}
		.project-image{
			width:100%;
			height:320px;
		}
		.projects-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	@media (max-width: 576px) {
		.project-image{ height:250px;}
	}	
	@media (max-width: 576px) {
		.project-image{ height:auto;}
		.project-image img{ height:auto;}
		.case-container{ padding: 40px 5%; }			
		.category-item a { font-size: 16px;margin-left: 20px;line-height: 45px;}
		.project-title{ font-size:18px;}
		.project-description { font-size: 14px;}			
		.project-content{ padding:4px;}
		.category-section { margin-top:20px;}			
		.categy-link{ font-size:12px;}
		.projects-grid { grid-template-columns: repeat(1, 1fr);}	
		.category-item { margin: 5px 0;}
	}
	
	@media (max-width: 320px) {
		.case-container{ padding: 40px 5%;}			
		.project-content{ padding:20px; }		
		.category-item a { font-size: 16px;margin-left: 20px;line-height: 45px;}
		.project-title{ font-size:18px;}
		.project-description { font-size: 14px;}			
		.category-section { margin-top:20px;}			
		.projects-grid { grid-template-columns: repeat(1, 1fr);}			
	}
	
		
		
		
		/* 分页 */
		
	.navigation.pagination{
		margin:auto;
		width:5%;
		height:100%;
	}
		
		/* 分页 end */
		
		
		
		
		
		


/* 往下是案例详情页*/

 
	/* 容器样式 */
	.project-introduction {
		max-width: 100%;
		width:100%;
		margin: 0 auto;
		padding: 80px 5%;
		display: flex;
		gap: 60px;
		margin-top:60px;
		background-color:#f7f7f7;
	}
	
	/* 左侧品牌名称区域 */
	.brand-section {
		flex: 1;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	
	.brand-name {
		font-size: 36px;
		font-weight: 700;
		color: #222222; /* 深灰色 */
		line-height: 1;
		letter-spacing: -1px;
	}
	
	/* 右侧内容区域 */
	.content-section {
		flex: 3.5;
	}
	
	.section-title {
		font-size: 16px;
		color: #222222;
		margin-bottom: 25px;
		letter-spacing: 0.5px;
	}
	
	.project-description {
		color: #666666;
	}
	.project-description p {
		font-size:16px;
		margin-top:20px;
		color:#666666;
	}
	
	/* 项目信息水平布局样式 */
	.project-info {
		display: flex;
		justify-content: space-between;
		width: 70%;
		margin-top:50px;
		
	}
	
	.info-item {
		flex: 1;
		padding: 0 15px;
	}
	
	.info-item:not(:last-child) {
		/* border-right: 1px solid #eee; */
	}
	
	.info-label {
		color: #666666;
		font-size: 16px;
		margin-bottom: 8px;
	}
	
	.info-value {
		color: #222222;
		font-size: 16px;
		line-height: 1.5;
	}
	.project-content{
		width:100%;
		height:100%;
		background-color:#f7f7f7;
		padding:32px 1%;
	}
	
	.project-detailed-content {
		width:100%;
		height:100%;
		background-color:#f7f7f7;
		padding:80px 5%;
	}	
	.project-detailed-image {
		width:100%;
		height:100%;
	}
	.project-content img {
		width:100%;
	}
	
	/* 响应式设计 */
	@media (max-width: 992px) {
		.project-introduction {
			flex-direction: column;
			gap: 40px;
			padding: 40px 30px;
			margin-top:0;
		}
		.case-image {
			height:auto;
		}
		.case-image img {
			height:auto;
		}
		.brand-name {
			font-size: 22px;
			text-align: center;
		}
		
		.brand-section {
		   /*justify-content: center;*/
		}
	}
	
	@media (max-width: 768px) {
		.project-introduction { padding: 80px 5% 0 5%;margin-top:0;}
		.case-image { height:auto; }
		.case-image img{ height:auto; }
		.brand-name { font-size: 22px; }		
		.section-title { font-size: 1.6rem; }
		.project-description { font-size: 1rem; }
		.project-info { flex-direction: column;border: none;padding: 0; }	
		.info-item { padding: 15px 0;border-right: none !important;border-bottom: 1px solid #eee; }
		.info-item:last-child { border-bottom: none; }
	}
	
	@media (max-width: 576px) {
		.brand-name { font-size: 22px; }
		.case-image { height:auto; }
		.case-image img{ height:auto; }
		.section-title { font-size: 16px;color:#222222;}
	}
	
	/* 相关案例 */
	.related-cases {max-width: 100%;margin: 0 auto;padding: 80px 5%;background-color:#f7f7f7; }
	.page-title { margin-bottom: 50px;font-size: 36px;font-weight: 300;color: #222222;letter-spacing: 1px; }
	.cases-grid { display: grid;grid-template-columns: repeat(4, 1fr);gap: 30px; }
	.case-card { background: #f7f7f7;border-radius: 10px;overflow: hidden;/* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); */}
	/* .case-card:hover { transform: translateY(1.2px);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } */
	.case-image:hover {overflow: hidden;border-radius: 10px;}
	.case-image { width:100%;height:280px;display: flex;align-items: center;justify-content: center;color: white;position: relative;transition: transform 0.3s, box-shadow 0.3s;}
	.case-image img{ width:100%;height:280px;border-radius: 10px;transition: transform 0.5s ease-in-out; }
	.case-image:hover img{ transition: transform 0.3s, box-shadow 0.3s;}
	.case-image:hover img{ transform: scale(1.2); }	
	.case-content { padding: 17px 10px;background-color:#f7f7f7; }
	.case-subtitle { color: #000000;font-size: 16px;margin-bottom: 12px; }   
	.case-description { color: #666666;font-size: 16px;line-height: 1.5; }
	
	@media (max-width: 1024px) {
		.cases-grid { grid-template-columns: repeat(2, 1fr);gap: 25px; }
	}	
	@media (max-width: 768px) {
		.case-image { height:auto; }
		.case-image img{ height:auto; }
		.cases-grid { grid-template-columns: 1fr;gap: 20px; }
		.page-title { font-size: 2rem;margin-bottom: 30px;text-align:center; }
		body { padding: 20px 0; }
	}
			
/* 	案例详情页 end */