/* bpbrand - style */

* { margin: 0;padding: 0;box-sizing: border-box;font-family: "Font BPVIS 6 Brands", Arial, sans-serif; }
body { color: #222222; line-height: 1.6;overflow-x: hidden;font-family: "Font BPVIS 6 Brands", Arial, sans-serif;}

/* 透明导航栏 */
header { position: fixed;top: 0;left: 0;width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 20px 5%;background-color: rgb(0 0 0 / 0%);/* backdrop-filter: blur(10px); */z-index: 1000;transition: background-color 0.3s ease; }
header.scrolled { background-color: #fff;color:#222222;border-bottom:2px solid #eeeeee; }
.logo { font-size: 28px;font-weight: 700;color: #ffffff;letter-spacing: 1px; }
#main-nav{ width: 60%;float: right;margin-left:30%;}
nav ul { display: flex;list-style: none; }
nav ul li {
	position: relative;
	margin: 0 12px;
}
nav ul li a { color: #fefefe;text-decoration: none;font-size: 16px;font-weight: 500;transition: color 0.3s;display: flex;align-items: center; }
.scrolled nav ul li a{ color:#222222; }
nav ul li a:hover { color: #ff6b6b; }
nav ul li a i { margin-left: 5px;font-size: 12px; }
/* 二级下拉菜单 - 确保垂直展示 */
.submenu { position: absolute;top: 100%;left: 0;min-width: 230px;background-color: #fff;padding: 10px 0;border-radius: 5px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);opacity: 0;visibility: hidden;transform: translateY(10px);transition: all 0.3s ease;display: flex;flex-direction: column; /* 强制垂直排列 */ }       
.has-submenu:hover .submenu { opacity: 1;visibility: visible;transform: translateY(0);margin-top:10px; }
.submenu li { margin: 0;padding: 0;width: 100%; /* 确保子菜单项占满宽度 */ }
.submenu li a { display: block;padding: 10px 20px;color: #222222;transition: all 0.3s;width: 100%; /* 确保链接占满宽度 */ }
.submenu li a:hover { /*background-color: rgba(255, 255, 255, 0.1);color: #ff6b6b;*/padding-left: 25px; }
.cta-button { background: rgb(0 0 0 / 0%);color: #f5f5f5;border: 1px solid #f5f5f5;padding: 11px 31px;border-radius: 30px;font-weight: 600;cursor: pointer;transition: all 0.3s;/* box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); */white-space: nowrap; /* 防止按钮文字换行 */ }
.scrolled .cta-button { background: rgb(0 0 0 / 0%); border: 1px solid #676767;color: #222222; }
.cta-button:hover { /* transform: translateY(-2px);box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4); */ }
.mobile-menu-btn { display: none;background: none;border: none;color: white;font-size: 24px;cursor: pointer; }

/* Banner轮播区域 */
.banner { height: 100vh;position: relative;overflow: hidden; }
.banner-slides { height: 100%;position: relative; }
.banner-slide { height: 100%;position: absolute;top: 0;left: 0;width: 100%;opacity: 0;transition: opacity 1s ease;display: flex;align-items: center;justify-content: center;background-size: cover;background-position: center; }
.banner-slide.active { opacity: 1;z-index: 1; }

.slide-content { text-align: center;color: white;max-width: 800px;padding: 0 20px; }
.slide-content h1 { font-size: 5rem;font-weight: 700;margin-bottom: 20px;letter-spacing: 3px;text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); }
.slide-content p { font-size: 1.2rem;margin-bottom: 30px;line-height: 1.6;}
.banner-controls { position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);display: flex;z-index: 10; }
.control-dot { width: 12px;height: 12px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.5);margin: 0 8px;cursor: pointer;transition: all 0.3s;}
.control-dot.active { background-color: white;transform: scale(1.2); }

/* 响应式设计 */
@media (max-width: 992px) {
	nav ul li { margin: 0 8px; }
	.slide-content h1 { font-size: 4rem; }
	.submenu li a{ color:#fff; }
}

@media (max-width: 768px) {
	nav { position: fixed;top: 60px;left: -100%;width: 100%;height: calc(100vh - 70px);background-color: rgba(0, 0, 0, 0.95);transition: left 0.3s ease;overflow-y: auto;margin-right: 0; }
	nav.active { left: 0; }
	nav ul { flex-direction: column;padding: 20px;}
	nav ul li { margin: 10px 0;width: 100%; }
	.scrolled .fa-bars:before, .fa-navicon:before{ color:#222222; }
	.scrolled nav ul li a{ color:#fff; }
	.submenu { position: static;width: 100%;opacity: 1;visibility: visible;transform: none;background-color: transparent;box-shadow: none;padding: 0;margin-top: 10px;margin-left: 20px;display: none; }
	.submenu li a{ color:#fff; }			
	.submenu.active { display: block; }
	.mobile-menu-btn { display: block; }
	.cta-button { display: none; }
	.slide-content h1 { font-size: 3rem; }
	.slide-content p { font-size: 1rem; }
}

@media (max-width: 480px) {
	.logo { font-size: 22px; }
	.submenu li a{ color:#fff; }
	.slide-content h1 { font-size: 2.5rem; }
}
/* banner 轮播图*/

/* 服务介绍区域 */
.services-intro { background-color: #e4e7e9;padding: 100px 5%;display: flex; }
.services-intro h4 { width: 20%;font-size: 16px;flex-shrink: 0;margin-top: 0.2%;text-align: left;position: absolute; }
.services-title img { max-width: 100%;height: auto;max-height: 150px; }
.services-intro-title{ margin-left:1%;margin-top:6px; }
.services-description { flex: 1;padding-left: 20%; }
.services-description h3 { font-size: 28px;margin-bottom: 20px; }
.services-description p { width:80%;color: #666666;margin-bottom: 20px;line-height: 1.8;font-size:14px; }
/* 服务介绍区域 */

.services-container { width: 100%;margin: 0 auto;background-color: #e4e7e9;padding:0px 5% 100px; }
.services-grid { display: flex;gap: 30px;height: 459px; }
.service-column { flex: 1;transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1);display: flex;flex-direction: column; }
.service-card { background: #ffffff;border-radius: 16px;padding: 30px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);height: 100%;display: flex;flex-direction: column;justify-content: space-between;overflow: hidden;position: relative;transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1);color: #0f172a;}

.service-card::before { content: '';position: absolute;top: 0;left: 0;width: 100%;height: 5px;transform: scaleX(0);transform-origin: left;transition: transform 0.5s ease; }
.service-card.active::before,
.service-card:hover::before { transform: scaleX(1); }

/* 修改图标为图片样式 */
.service-icon { position: absolute;top: 20px;right: 20px;width: 40px;height: 40px;border-radius: 50%;transition: all 0.3s ease;opacity: 0;background-size: 60%;background-position: center;background-repeat: no-repeat; }

/* 为不同卡片设置不同图片 */
.branding-card .service-icon { width:64px;height:64px;background-image: url('../images/i9.png'); /* 设计图标 */ }
.website-card .service-icon { width:64px;height:64px;background-image: url('../images/i9.png'); /* 代码图标 */ }
.graphic-card .service-icon { width:64px;height:64px;background-image: url('../images/i9.png'); /* 品牌图标 */ }
.service-content { margin-top: auto;transition: all 0.4s ease; }
.service-card h3 { font-size: 28px;font-weight: 700;color: #000000;transition: all 0.4s ease; }
.service-card p { line-height: 1.6;font-size: 16px;color: #666666;opacity: 1;transition: all 0.4s ease; }
.service-list { display: grid;grid-template-columns: 1fr;gap: 2px;opacity: 0;height: 0;overflow: hidden;transition: all 0.5s ease;transform: translateY(20px); }
.service-item { display: flex;align-items: center; }
.number { color: white;width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-right: 15px;flex-shrink: 0; }
.service-item h4 { font-size: 16px;color: #0f172a;transition: color 0.3s ease; }
.service-item pre { font-size: 16px;color: #0f172a;transition: color 0.3s ease; }
/* 交互效果 */
.service-column:hover { flex: 1.3; }
.service-column:hover .service-card { width:100%;margin:auto;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);background: linear-gradient(145deg, #d2104e, #ce3364);color: #ffffff; }
.service-column:hover .service-content { margin-top: 0;margin-bottom: 30px;transform: translateY(-60px); }
.service-column:hover .service-list { opacity: 1;height: auto;transform: translateY(-10px);line-height: 0px; }
.service-column:hover .service-card p { opacity: 0;height: 0;margin: 0;display:none; }
.service-column:hover .service-card h3 { margin-top: 20px;color: #ffffff;transform: translateY(30px); }
.service-column:hover .service-icon { opacity: 1;transform: scale(1.2);filter: brightness(0) invert(1); /* 使图片变为白色 */ }        
.service-column:hover .service-item h4 { color: #ffffff;font-size: 16px; }
.service-column:hover .service-item pre { color: #ffffff;font-size: 16px; }
.service-column:hover .service-item span { color: #ffffff;font-size: 12px; }		

/* 非悬停状态下的样式 */
.service-column:not(:hover) { flex: 0.8; }
        /* 响应式设计 */
@media (max-width: 1669px) {
	#main-nav{ width: 100%;}
	.stat-number{ font-size:80px !important;}
}
@media (max-width: 1600px) {
	#main-nav{ width: 100%;}
	.stat-number{ font-size:80px !important;}
}		
@media (max-width: 1500px) {
	#main-nav{ width: 100%;}
	.stat-number{ font-size:50px !important;}
}
@media (max-width: 1400px) {
	#main-nav{ width: 100%;}
	.stat-number{ font-size:50px !important;}
}			
@media (max-width: 900px) {
	.stat-number{ font-size:50px !important; }
	.services-intro h4{ margin: auto;position: absolute;margin-top: -50px;width: 80%; }
	.services-intro pre{ margin: auto;position: absolute;margin-top: -50px;width: 80%; }
	.about-right p { width:100%;}
	.services-description p { width:100%;}
	.services-description{margin-left:-20%;}
	.services-intro{ padding:90px 20px 0px 20px;}
	.services-container{ padding:20px;}
	.services-grid { flex-direction: column;height: auto;padding:0px; }	
	.service-column { margin-bottom: 20px; }	
	.service-column:hover { flex: 1; }
	.service-column:not(:hover) { flex: 1; }
	.service-column:hover .service-content,
	.service-column:hover .service-list,
	.service-column:hover .service-card h3 { transform: none;}
}
        
@media (max-width: 600px) {
	h1 { font-size: 2.5rem; }
	.subtitle { font-size: 1rem; }
	.service-card { padding: 20px;Height:320px; }
	.service-card h3 { font-size: 1.5rem; }
	.service-icon { top: 15px;right: 15px;width: 35px;height: 35px;}
}
        
.footer { text-align: center;color: #64748b;font-size: 0.9rem; }
    
/* 关于我们部分 */
.about-section { background-color: white;padding: 110px 5%; }
.about-section h4{ width: 20%;font-size: 16px;flex-shrink: 0;margin-top: 0.5%;text-align: left;position: absolute; }
.about-container { display: flex; }
.about-left { flex: 1;display: flex;align-items: center;justify-content: center; }
.about-left img { max-width: 80%;height: auto; }
.about-right { flex: 1;margin-left: 25%; }
.about-right h2 { width:50%;font-size: 36px;font-weight: bold;margin-bottom: 20px;line-height: 1.2; }
.about-right p { width:75%;color: #666666;line-height: 1.8;margin-bottom: 20px;font-size:14px; }

/* 统计数字布局 */
.stats-grid { width:90%;display: grid;grid-template-columns: repeat(4, 1fr);gap: 50px;margin-top: 40px; }
.stat-item { text-align: center; }
.stat-number { font-size: 100px;font-weight: bold;color: #222222;margin-bottom: 10px;text-align:left; }
.stat-text { font-size: 16px;color: #222222;text-align:left; }

/* logo 轮播图 */
.logos-section { position: relative;overflow: hidden;width: 100%;max-width: 100%; }
.logos-container { position: relative;overflow: hidden;padding: 1rem 0; }
.logos-track { display: flex;animation: scroll 40s linear infinite;width: max-content; }
.logo-item { flex-shrink: 0;display: flex;align-items: center;justify-content: center;width: 160px;height: 80px;margin-left:110px; }
.logo-img { max-width: 100%;max-height: 100%;filter: grayscale(100%);opacity: 0.7;transition: all 0.3s ease; }
.logo-img:hover { filter: grayscale(0%);opacity: 1;transform: scale(1.05); }
.fade-overlay { position: absolute;top: 0;bottom: 0;width: 100px;pointer-events: none;z-index: 2; }
.fade-left { left: 0;background: linear-gradient(to right, white, transparent); }
.fade-right { right: 0;background: linear-gradient(to left, white, transparent); }
        
@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@media (max-width: 768px) {
	.about-section h4{ margin: auto;position: absolute;margin-top: -50px;width: 80%; }
	.about-right h2{width:100%; }
	.stat-number{ font-size:50px;}
	.stat-text { text-align:none; }
	.logo-item { width: 150px;padding: 0 1.5rem;margin-left:20px; }
	.fade-overlay { width: 50px; }	
	.website-desgn{ padding:20px;}
	.website-description{margin-left:-25%;}
	.website-description p{ width:100%;}	
	.website-description p{ width:100%;}	
	.stats-grid { width:100%;}
	.about-right p { width:100%;}
	.slide-item { flex: 0 0 calc(50% - 15px); }
	.about-right{margin-left:0%;}
	.stats-grid { display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;margin-top: 40px; }
	
	@keyframes continuousSlide {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(calc(-50% * 3 - 90px));
		}
	}			
}
        /* logo 轮播图 END */     
        
@keyframes continuousSlide {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-33.333% * 3 - 90px));
	}
}

/* 响应式设计 */    
@media (max-width: 480px) {
	.website-desgn{ padding:20px;}
	.website-description{margin-left:-25%;}
	.website-description p{ width:100%;}	
	.website-description p{ width:100%;}			
	.stats-grid { width:100%;}
	.about-right p { width:100%;}
	.slide-item { flex: 0 0 100%;padding:30px; }
	
	@keyframes continuousSlide {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(calc(-100% * 3));
		}
	}
	.slider-btn { padding: 10px 20px;font-size: 14px; }
	.about-right h2{ width:100%;}
	.stat-number{ text-align:none;}
	.stat-text { text-align:none;}
	.logo-item { width: 150px;padding: 0 1.5rem;margin-left:20px; }
	.fade-overlay { width: 50px; }
}
/* 复杂布局部分 - 第四张图 */
.complex-layout {padding: 80px 5%;background-color: white;}
.layout-container {display: flex;max-width: 1720px;margin: 0 auto;gap: 30px;}
.layout-left {flex: 1;display: flex;flex-direction: column;gap: 30px;}
.layout-left-top {background-color: #03A9F4;padding:30px;border-radius: 10px;height: 437px;}
.layout-left-bottom {display: flex;gap: 30px;}
.layout-left-bottom-left {height:437px;padding:30px;flex: 1;background-color: #222222;border-radius: 10px;}
.layout-left-bottom-right {flex: 1;display: flex;flex-direction: column;gap: 30px;}
.layout-left-bottom-right-top {background-color: #f8f8f8;padding:30px;border-radius: 10px;flex: 1;}
.layout-left-bottom-right-bottom {background-color: #f8f8f8;padding:30px;border-radius: 10px;flex: 1;}
.layout-right {height:889px;flex: 1;background-color: #f8f8f8;padding:30px;border-radius: 10px;}
/* <!-- 复杂布局部分 - 第四张图 */

.b-image-grid{ padding: 80px 5%;}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table { border-collapse: collapse;border-spacing: 0; }

:root {
	--app-height: 100vh;
	--baseline-unit: 0.25rem;
	--row-height: 1rem;
	--row-1: calc(var(--row-height) * 1);
	--row-2: calc(var(--row-height) * 2);
	--row-3: calc(var(--row-height) * 3);
	--row-4: calc(var(--row-height) * 4);
	--row-5: calc(var(--row-height) * 5);
	--row-6: calc(var(--row-height) * 6);
	--row-7: calc(var(--row-height) * 7);
	--row-8: calc(var(--row-height) * 8);
	--row-9: calc(var(--row-height) * 9);
	--row-10: calc(var(--row-height) * 10);
	--row-11: calc(var(--row-height) * 11);
	--row-12: calc(var(--row-height) * 12);
	--row-13: calc(var(--row-height) * 13);
	--row-14: calc(var(--row-height) * 14);
	--row-15: calc(var(--row-height) * 15);
	--row-16: calc(var(--row-height) * 16);
	--row-17: calc(var(--row-height) * 17);
	--row-18: calc(var(--row-height) * 18);
	--row-19: calc(var(--row-height) * 19);
	--row-20: calc(var(--row-height) * 20);

	/**
	 * Gap is used in grid layouts and margins/paddings around elements.
	 */
	--gap-nano: calc(var(--baseline-unit) * 1);
	--gap-micro: calc(var(--baseline-unit) * 2);
	--gap-tiny: calc(var(--baseline-unit) * 4);
	--gap-small: calc(var(--baseline-unit) * 6);
	--gap: calc(var(--baseline-unit) * 8);
	--gap-medium: calc(var(--baseline-unit) * 8);
	--gap-large: calc(var(--baseline-unit) * 16);
	--gap-huge: calc(var(--baseline-unit) * 32);

	/* Grid gap: Gap between grid columns in flexbox grid */
	--gap-grid: var(--row-height);

	/* Container gap: used for left and right padding on the site main container */
	--gap-container: var(--row-height);

	/* Section gap: used for bottom and right padding on the site main container */
	--gap-section: var(--row-4);
}

@media ( min-width: 768px ) {

:root {
		--gap-section: var(--row-6);
}
	}

:root {

	/**
	 * Max Widths
	 *
	 * Naming: narrow, wide, full
	 */
	--l-max-width-narrow: 720px;
	--l-max-width-wide: 1440px;
	--l-max-width-full: none; /* 2560px; */

	/**
	 * Variables for easy access of fonts
	 * Fonts are imported using @font-face in typography.scss
	 */
	--font-heading: 'Plain', 'Helvetica Neue', helvetica, arial, sans-serif;
	--font-body: 'Plain', 'Helvetica Neue', helvetica, arial, sans-serif;

	/**
	 * Font sizes always expressed in rems!
	 *
	 * Naming: micro, tiny, small, medium (base), large, huge, mega
	 */

	--font-size-tiny: 0.9rem; /* Body */
	--font-size-small: 0.9rem; /* Body (Increased LH) */
	--font-size-medium: 1.75rem; /* H4 */
	--font-size-large: 3rem; /* H3 */
	--font-size-xlarge: 1.75rem; /* H2 */
	--font-size-huge: 2.75rem; /* H1 */
	--font-size-xhuge: 2.75rem; /* H1 (Increased LH) */
}

@media ( min-width: 992px ) {

:root {
		--font-size-xlarge: 3.75rem;
		--font-size-huge: 4.25rem;
		--font-size-xhuge: 4.25rem;
}
	}

:root {

	/**
	 * Line heights shall match their respective font-size and always
	 * be calculated using the baseline-unit
	 */

	--line-height-tiny: 1.15rem; /* Body */
	--line-height-small: 1.35rem; /* Body (Increased LH) */
	--line-height-medium: 2rem; /* H4 */
	--line-height-large: 3.15rem; /* H3 */
	--line-height-xlarge: 2rem; /* H2 */
	--line-height-huge: 2.75rem; /* H1 */
	--line-height-xhuge: 2.75rem; /* H1 (Increased LH) */
}

@media ( min-width: 992px ) {

:root {
		--line-height-xlarge: 3.6rem;
		--line-height-huge: 3.85rem;
		--line-height-xhuge: 4.45rem;
}
	}

:root {

	/* Transitions */
	--transition-slow: 0.8s cubic-bezier(0.36, 0.64, 0.23, 0.94);
	--transition: 0.4s cubic-bezier(0.36, 0.64, 0.23, 0.94);
	--transition-quick: 0.1s ease-in-out;

	/* Transitions with an improved curve */
	--transition-curve-slow: 0.8s cubic-bezier(1, 0, 0.29, 1);
	--transition-curve: 0.4s cubic-bezier(1, 0, 0.29, 1);
	--transition-curve-quick: 0.1s cubic-bezier(1, 0, 0.29, 1);

	/* Animations */
	--animation: 0.65s ease-in-out;
	--animation-slow: 1s ease-in-out;
	--animation-quick: 0.15s ease-in-out;

	/* Drop shadows */
	--drop-shadow-small: 0 10px 30px 0 rgba(0, 0, 0, 0.06);
	--drop-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.15);
	--drop-shadow-large: 0 10px 60px 0 rgba(0, 0, 0, 0.15);

	/* Radius */
	--radius-small: 0.25rem;
	--radius: 0.5rem;
	--radius-large: 0.75rem;

	/* Site Header Height */
	--site-header-height: calc(0.8rem + (var(--row-height) * 2));
}

/* =============================================================================
 # Fonts                                                                      #
============================================================================= */

/**
 * This file is used for web fonts (@font-face).
 */

@font-face {
	font-display: swap;
	font-family: 'Plain';
	font-style: normal;
	font-weight: 300;
	src:
		local('Plain-Thin'),
		url('../fonts/Plain-Thin.woff2') format('woff2'),
		url('../fonts/Plain-Thin.woff') format('woff');
}

@font-face {
	font-display: swap;
	font-family: 'Plain';
	font-style: normal;
	font-weight: 400;
	src:
		local('Plain-Light'),
		url('../fonts/Plain-Light.woff2') format('woff2'),
		url('../fonts/Plain-Light.woff') format('woff');
}

/* =============================================================================
 # Colors                                                                     #
============================================================================= */

:root {
	--color-white: #fff;
	--color-black: #222222;
	--color-gray-1: #f6f6f6;
	--color-gray-2: #e6e6e6;
	--color-gray-3: #3f3f3f;
	--color-gray-4: #1c1d1e;
	--color-gray-5: #a59d9d; /* For cookies notice */
	--color-blur-background: hsla(0, 0%, 76.9%, 0.3);

	/* - */
	--color-background: var(--color-gray-1);
	--color-text: var(--color-black);
}



:root {
	--r-min-font: 16px;
	--r-max-font: 20px;
	--r-max-font-no-px: 20;
	--r-font-diff: 4;
	--r-min-breakpoint: 576px;
	--r-max-breakpoint: 1920px;
	--r-max-breakpoint-no-px: 1920;
	--r-breakpoint-diff: 1344;

	font-size: 16px
}

@media ( min-width: 320px ) {

:root {
		font-size: calc(16px + 4 * (100vw - 576px) / 1344);
		font-size: calc(var(--r-min-font) + var(--r-font-diff) * (100vw - var(--r-min-breakpoint)) / var(--r-breakpoint-diff)) /* stylelint-disable-line */
}
	}

@media ( min-width: 1920px ) {

:root {
		font-size: calc(20 / 1920 * 100vw)
}
	}

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}


.c-icon {
	display: inline-block;
	fill: currentColor;
	height: 1em;	
	vertical-align: top;
	width: 1em

	/* Hide title on hover */
}

.c-icon[title] {
		pointer-events: none;
	}

/* font-size: 1rem; */

.c-logo .c-icon {
		height: 1em;
		width: auto;
	}

/* =============================================================================
 # Image Grid                                                                 #
============================================================================= */

/**
 * A component for image-grid.
 */

.c-image-grid {
	color: #222222;
	color: var(--color-text);
	padding-bottom: 1rem;
	padding-bottom: var(--gap-grid);

	/* Set the colors */
	--color-text: var(--color-gray-3);
}

.c-image-grid__grid {
	display: -ms-grid;
	display: grid;
	grid-gap: 1rem;
	grid-gap: var(--gap-grid);
	-ms-grid-columns: (minmax(0, 1fr))[4];
	grid-template-columns: repeat(4, minmax(0, 1fr));
	-ms-grid-rows: (minmax(0, 1fr))[4];
	grid-template-rows: repeat(4, minmax(0, 1fr));
}

.c-image-grid--1 .c-image-grid__grid {
		-ms-grid-rows: 1fr 1fr 1fr 0.5fr 0.5fr;
		grid-template-rows: 1fr 1fr 1fr 0.5fr 0.5fr;
	}

.c-image-grid--1[data-image-count="2"] .c-image-grid__grid {
		-ms-grid-rows: (minmax(0, 1fr))[3];
		grid-template-rows: repeat(3, minmax(0, 1fr));
	}

.c-image-grid--2[data-image-count="2"] .c-image-grid__grid {
		-ms-grid-rows: (minmax(0, 1fr))[3];
		grid-template-rows: repeat(3, minmax(0, 1fr));
	}

.c-image-grid--3[data-image-count="1"] .c-image-grid__grid,
	.c-image-grid--6[data-image-count="1"] .c-image-grid__grid {
		-ms-grid-rows: 1fr;
		grid-template-rows: 1fr;
	}

@media ( min-width: 768px ) {
		.c-image-grid__grid,
		.c-image-grid--1 .c-image-grid__grid,
		.c-image-grid--1[data-image-count="2"] .c-image-grid__grid,
		.c-image-grid--2[data-image-count="2"] .c-image-grid__grid,
		.c-image-grid--3[data-image-count="1"] .c-image-grid__grid,
		.c-image-grid--6[data-image-count="1"] .c-image-grid__grid {
			-ms-grid-rows: (minmax(0, 1fr))[4];
			grid-template-rows: repeat(4, minmax(0, 1fr));
		}
	}


.c-image-grid__inner-grid {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-left: calc(1rem / 2 * -1);
	margin-left: calc(var(--gap-grid) / 2 * -1);
	margin-right: calc(1rem / 2 * -1);
	margin-right: calc(var(--gap-grid) / 2 * -1);
	width: calc(100% + 1rem);
	width: calc(100% + var(--gap-grid));
}

/* 原有的样式保持不变 */
.c-image-grid__item {
  position: relative; /* 为伪元素提供定位基准 */
  /* 确保容器内容不会被伪元素遮挡，如需交互可添加： */
  /* pointer-events: none; */ 
}

.c-image-grid__item::before {
  content: ''; /* 伪元素必须内容 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color:#fff;
  background-color: rgba(0, 0, 0, 0.5); /* 黑色，50%透明度 */
  opacity: 0; /* 初始完全透明 */
  z-index: 1; /* 确保背景层位于内容上方 */
  transition: opacity 0.2s ease; /* 平滑过渡效果 */
  pointer-events: none; /* 允许鼠标事件穿透，直接与下方元素交互 */
  border-radius:10px;
}

.c-image-grid__item:hover::before {
  opacity: 1; /* 悬停时显示透明背景层 */
}


.c-image-grid__card {border-radius: 0.5rem;border-radius: var(--radius);color: #222222;/* color: var(--color-text); */display: block;height: 100%;overflow: hidden;position: relative;width: 100%}
.c-image-grid__card.disabled-link .c-image-grid__plus {display: none;}
.c-image-grid__card.disabled-link:hover .c-image-grid__image img, .c-image-grid__card.disabled-link:focus .c-image-grid__image img {transform: scale(1);}
.c-image-grid__card:hover .c-image-grid__image img, .c-image-grid__card:focus .c-image-grid__image img {transform: scale(1.025);}
.c-image-grid__card:hover .c-image-grid__item .c-image-grid__image img, .c-image-grid__card:focus .c-image-grid__item .c-image-grid__image img {transform: scale(1);}
.c-image-grid__card:hover .c-image-grid__header, .c-image-grid__card:focus .c-image-grid__header {opacity: 1;visibility: visible;}
.c-image-grid__header {font-family: 'Plain', 'Helvetica Neue', helvetica, arial, sans-serif;font-family: var(--font-body);font-size: 0.9rem;font-size: var(--font-size-small);line-height: 1.265;}
.c-image-grid__header sup {font-size: 0.4em;top: -1.06em;}
.c-image-grid__header {left: 0;opacity: 0;padding: calc(1rem * 1);padding: var(--row-1);position: absolute;right: 0;top: 0;transition:opacity 0.4s cubic-bezier(0.36, 0.64, 0.23, 0.94),visibility 0.4s cubic-bezier(0.36, 0.64, 0.23, 0.94);transition:opacity var(--transition),visibility var(--transition);visibility: hidden;z-index: 1;color:#ffffff;
}

.c-image-grid__header-item {
	flex-basis: calc(( 100 / ( 12 / 6 ) ) * 1%);
	flex-grow: 0;
	max-width: calc(( 100 / (12 / 6 ) ) * 1%);
	padding-left: calc(1rem / 2);
	padding-left: calc(var(--gap-grid) / 2);
	padding-right: calc(1rem / 2);
	padding-right: calc(var(--gap-grid) / 2);
}

.c-image-grid__header-item .c-image-grid__header-item:first-child:last-child {
	flex-basis: calc(( 100 / ( 12 / 10 ) ) * 1%);
	flex-grow: 0;
	max-width: calc(( 100 / (12 / 10 ) ) * 1%);
	padding-left: calc(1rem / 2);
	padding-left: calc(var(--gap-grid) / 2);
	padding-right: calc(1rem / 2);
	padding-right: calc(var(--gap-grid) / 2);
}

.c-image-grid__card-title,
.c-image-grid__list,
.c-image-grid__plus {
	margin-top: calc((1 / 16) * -1em);
}
.c-image-grid__card:hover{
	color:#fff;
}

.c-image-grid__plus {
	font-size: 0.75rem;
	padding: calc(1rem * 1);
	padding: var(--row-1);
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}
.c-image-grid__plus .c-icon {overflow: visible;}
.c-image-grid__item.disabled-link .c-image-grid__plus {display: none;}
.c-image-grid__image embed,
	.c-image-grid__image iframe,
	.c-image-grid__image img,
	.c-image-grid__image video {
		display: block;
		height: 100%;
		left: 0;
		-o-object-fit: cover;
		   object-fit: cover;
		-o-object-position: center;
		   object-position: center;
		position: absolute;
		top: 0;
		width: 100%;
	}

.c-image-grid__image {
	border-radius: 0.5rem;
	border-radius: var(--radius);
	height: 100%;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	overflow: hidden;
	width: 100%;
}

.c-image-grid__image::before {
	background-color: #fff;
	background-color: var(--color-white);
	border-radius: 0.5rem;
	border-radius: var(--radius);
	bottom: 1px;
	content: "";
	display: block;
	left: 1px;
	position: absolute;
	right: 1px;
	top: 1px;
}

.c-image-grid__image img,
	.c-image-grid__image video,
	.c-image-grid__image iframe,
	.c-image-grid__image embed {
		border-radius: 0.5rem;
		border-radius: var(--radius);
		transform: scale(1);
		transition: transform 0.8s cubic-bezier(0.36, 0.64, 0.23, 0.94);transition: transform var(--transition-slow); }

.c-image-grid__title { font-family: 'Plain', 'Helvetica Neue', helvetica, arial, sans-serif;font-family: var(--font-body);font-size: 1.75rem;font-size: var(--font-size-medium);line-height: var(--line-height-medium); }
.c-image-grid__title sup { font-size: 0.4em;top: -1.06em; }
@media ( min-width: 768px ) {
		.c-table--layout-1 .c-table__column--mention {
			--column: 3;
		}
	}
@media ( min-width: 992px ) {
		.c-table--layout-1 .c-table__column--mention {
			--column: 3;
		}
	}
@media ( min-width: 768px ) {
		.c-table--layout-2 .c-table__column--case {
			--column: 3;
		}
	}
@media ( min-width: 992px ) {
		.c-table--layout-2 .c-table__column--case {
			--column: 3;
		}
	}
		
.c-image-grid--1.c-image-grid--standard .c-image-grid__item:nth-child(3) .c-image-grid__header-item:first-child, .c-image-grid--1.c-image-grid--standard .c-image-grid__item:nth-child(4) .c-image-grid__header-item:first-child, .c-image-grid--1.c-image-grid--standard .c-image-grid__item:nth-child(5) .c-image-grid__header-item:first-child {
	flex-basis: calc(( 100 / ( 12 / 10 ) ) * 1%);
	flex-grow: 0;
	max-width: calc(( 100 / (12 / 10 ) ) * 1%);
	padding-left: calc(1rem / 2);
	padding-left: calc(var(--gap-grid) / 2);
	padding-right: calc(1rem / 2);
	padding-right: calc(var(--gap-grid) / 2);
}
.c-image-grid--1.c-image-grid--standard .c-image-grid__item:nth-child(3) .c-image-grid__header-item + .c-image-grid__header-item .c-image-grid__list, .c-image-grid--1.c-image-grid--standard .c-image-grid__item:nth-child(4) .c-image-grid__header-item + .c-image-grid__header-item .c-image-grid__list, .c-image-grid--1.c-image-grid--standard .c-image-grid__item:nth-child(5) .c-image-grid__header-item + .c-image-grid__header-item .c-image-grid__list {
	display: none;
}
.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(1) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 5;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-row-span: NaN;
	grid-row-end: 2;
	-ms-grid-row: 1;
	grid-row-start: 1;
}
.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(1) .c-image-grid__card {
	height: 0;
	overflow: hidden;
	padding-top: calc((2 / 3) * 100%);
	position: relative;
}
.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(1) .c-image-grid__card .c-image-grid__image {
	left: 0;
	position: absolute;
	top: 0;
}
.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(2) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 5;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-row-span: NaN;
	grid-row-end: 4;
	-ms-grid-row: 2;
	grid-row-start: 2;
}
.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(3) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 3;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-row-span: NaN;
	grid-row-end: 6;
	-ms-grid-row: 4;
	grid-row-start: 4;
}
.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(4) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 5;
	-ms-grid-column: 3;
	grid-column-start: 3;
	-ms-grid-row-span: NaN;
	grid-row-end: 5;
	-ms-grid-row: 4;
	grid-row-start: 4;
}
.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(5) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 5;
	-ms-grid-column: 3;
	grid-column-start: 3;
	-ms-grid-row-span: NaN;
	grid-row-end: 6;
	-ms-grid-row: 5;
	grid-row-start: 5;
}
.c-image-grid--1.c-image-grid--standard[data-image-count="2"] .c-image-grid__item:nth-child(1) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 5;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-row-span: NaN;
	grid-row-end: 2;
	-ms-grid-row: 1;
	grid-row-start: 1;
}
.c-image-grid--1.c-image-grid--standard[data-image-count="2"] .c-image-grid__item:nth-child(1) .c-image-grid__card {
	height: 0;
	overflow: hidden;
	padding-top: calc((2 / 3) * 100%);
	position: relative;
}
.c-image-grid--1.c-image-grid--standard[data-image-count="2"] .c-image-grid__item:nth-child(1) .c-image-grid__card .c-image-grid__image {
	left: 0;
	position: absolute;
	top: 0;
}
.c-image-grid--1.c-image-grid--standard[data-image-count="2"] .c-image-grid__item:nth-child(2) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 5;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-row-span: NaN;
	grid-row-end: 4;
	-ms-grid-row: 2;
	grid-row-start: 2;
}
.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(1) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 5;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-row-span: NaN;
	grid-row-end: 3;
	-ms-grid-row: 1;
	grid-row-start: 1;
}
.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(1) .c-image-grid__card {
	height: 100%;
	padding-top: 0;
}
.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(2) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 5;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-row-span: NaN;
	grid-row-end: 4;
	-ms-grid-row: 3;
	grid-row-start: 3;
}
.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(2) .c-image-grid__card {
	height: 0;
	overflow: hidden;
	padding-top: calc((2 / 3) * 100%);
	position: relative;
}
.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(2) .c-image-grid__card .c-image-grid__image {
	left: 0;
	position: absolute;
	top: 0;
}
.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(3) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 3;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-row-span: NaN;
	grid-row-end: 5;
	-ms-grid-row: 4;
	grid-row-start: 4;
}
.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(4) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 5;
	-ms-grid-column: 3;
	grid-column-start: 3;
	-ms-grid-row-span: NaN;
	grid-row-end: 6;
	-ms-grid-row: 4;
	grid-row-start: 4;
}
.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(5) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 3;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-row-span: NaN;
	grid-row-end: 6;
	-ms-grid-row: 5;
	grid-row-start: 5;
}
.c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(1) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 5;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-row-span: NaN;
	grid-row-end: 4;
	-ms-grid-row: 2;
	grid-row-start: 2;
}
.c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(1) .c-image-grid__card {
	height: 100%;
	padding-top: 0;
}
.c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(2) {
	/* stylelint-disable-line */
	-ms-grid-column-span: NaN;
	grid-column-end: 5;
	-ms-grid-column: 1;
	grid-column-start: 1;
	-ms-grid-row-span: NaN;
	grid-row-end: 2;
	-ms-grid-row: 1;
	grid-row-start: 1;
}
.c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(2) .c-image-grid__card {
	height: 0;
	overflow: hidden;
	padding-top: calc((2 / 3) * 100%);
	position: relative;
}
.c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(2) .c-image-grid__card .c-image-grid__image {
	left: 0;
	position: absolute;
	top: 0;
}

@media ( min-width: 768px ) {
	.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(1), .c-image-grid--1.c-image-grid--standard[data-image-count="2"] .c-image-grid__item:nth-child(1) {
		/* stylelint-disable-line */
		-ms-grid-column-span: NaN;
		grid-column-end: 3;
		-ms-grid-column: 1;
		grid-column-start: 1;
		-ms-grid-row-span: NaN;
		grid-row-end: 3;
		-ms-grid-row: 1;
		grid-row-start: 1;
	}
	.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(1) .c-image-grid__card, .c-image-grid--1.c-image-grid--standard[data-image-count="2"] .c-image-grid__item:nth-child(1) .c-image-grid__card {
		height: 0;
		overflow: hidden;
		padding-top: calc((1 / 2) * 100%);
		position: relative;
	}

	.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(1) .c-image-grid__card .c-image-grid__image, .c-image-grid--1.c-image-grid--standard[data-image-count="2"] .c-image-grid__item:nth-child(1) .c-image-grid__card .c-image-grid__image {
		left: 0;
		position: absolute;
		top: 0;
	}

	.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(2), .c-image-grid--1.c-image-grid--standard[data-image-count="2"] .c-image-grid__item:nth-child(2) {
		/* stylelint-disable-line */
		-ms-grid-column-span: NaN;
		grid-column-end: 5;
		-ms-grid-column: 3;
		grid-column-start: 3;
		-ms-grid-row-span: NaN;
		grid-row-end: 5;
		-ms-grid-row: 1;
		grid-row-start: 1;
	}

	.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(3), .c-image-grid--1.c-image-grid--standard[data-image-count="2"] .c-image-grid__item:nth-child(3) {
		/* stylelint-disable-line */
		-ms-grid-column-span: NaN;
		grid-column-end: 2;
		-ms-grid-column: 1;
		grid-column-start: 1;
		-ms-grid-row-span: NaN;
		grid-row-end: 5;
		-ms-grid-row: 3;
		grid-row-start: 3;
	}

	.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(4), .c-image-grid--1.c-image-grid--standard[data-image-count="2"] .c-image-grid__item:nth-child(4) {
		/* stylelint-disable-line */
		-ms-grid-column-span: NaN;
		grid-column-end: 3;
		-ms-grid-column: 2;
		grid-column-start: 2;
		-ms-grid-row-span: NaN;
		grid-row-end: 4;
		-ms-grid-row: 3;
		grid-row-start: 3;
	}

	.c-image-grid--1.c-image-grid--standard:not([data-image-count="2"]) .c-image-grid__item:nth-child(5), .c-image-grid--1.c-image-grid--standard[data-image-count="2"] .c-image-grid__item:nth-child(5) {
		/* stylelint-disable-line */
		-ms-grid-column-span: NaN;
		grid-column-end: 3;
		-ms-grid-column: 2;
		grid-column-start: 2;
		-ms-grid-row-span: NaN;
		grid-row-end: 5;
		-ms-grid-row: 4;
		grid-row-start: 4;
	}
	.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(1), .c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(1) {
		/* stylelint-disable-line */
		-ms-grid-column-span: NaN;
		grid-column-end: 3;
		-ms-grid-column: 1;
		grid-column-start: 1;
		-ms-grid-row-span: NaN;
		grid-row-end: 5;
		-ms-grid-row: 1;
		grid-row-start: 1;
	}

	.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(1) .c-image-grid__card, .c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(1) .c-image-grid__card {
		height: 100%;
		padding-top: 0;
	}

	.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(2), .c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(2) {
		/* stylelint-disable-line */
		-ms-grid-column-span: NaN;
		grid-column-end: 5;
		-ms-grid-column: 3;
		grid-column-start: 3;
		-ms-grid-row-span: NaN;
		grid-row-end: 3;
		-ms-grid-row: 1;
		grid-row-start: 1;
	}
	.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(2) .c-image-grid__card, .c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(2) .c-image-grid__card {
		height: 0;
		overflow: hidden;
		padding-top: calc((2 / 3) * 100%);
		position: relative;
	}

	.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(2) .c-image-grid__card .c-image-grid__image, .c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(2) .c-image-grid__card .c-image-grid__image {
		left: 0;
		position: absolute;
		top: 0;
	}

	.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(3), .c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(3) {
		/* stylelint-disable-line */
		-ms-grid-column-span: NaN;
		grid-column-end: 4;
		-ms-grid-column: 3;
		grid-column-start: 3;
		-ms-grid-row-span: NaN;
		grid-row-end: 4;
		-ms-grid-row: 3;
		grid-row-start: 3;
	}

	.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(4), .c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(4) {
		/* stylelint-disable-line */
		-ms-grid-column-span: NaN;
		grid-column-end: 5;
		-ms-grid-column: 4;
		grid-column-start: 4;
		-ms-grid-row-span: NaN;
		grid-row-end: 5;
		-ms-grid-row: 3;
		grid-row-start: 3;
	}

	.c-image-grid--1.c-image-grid--inverted:not([data-image-count="2"]) .c-image-grid__item:nth-child(5), .c-image-grid--1.c-image-grid--inverted[data-image-count="2"] .c-image-grid__item:nth-child(5) {
		/* stylelint-disable-line */
		-ms-grid-column-span: NaN;
		grid-column-end: 4;
		-ms-grid-column: 3;
		grid-column-start: 3;
		-ms-grid-row-span: NaN;
		grid-row-end: 5;
		-ms-grid-row: 4;
		grid-row-start: 4;
	}
}


/* 网站设计图 */
.website-desgn { background-color: #e4e7e9;padding:100px 5%;display: flex; }
.website-desgn h4{ width: 20%;font-size: 16px;flex-shrink: 0;margin-top: 0.5%;text-align: left;position: absolute;}
.website-description { flex: 1;padding-left: 25%; }
.website-description h3{ width:60%;font-size:36px;line-height:45px; }
.website-description p{ width:58%;font-size:14px;color:#666666; }	

.introcontainer { width: 100%;height: auto;display: flex;flex-direction: column;align-items: center;justify-content: center;position: relative;background-color:#e4e7e9;padding:0% 0 80px;overflow-x: hidden; }
.swiper-container { width: 100%;height: 80%; }
.swiper-wrapper { width:100%;	align-items: center; }
.swiper-slide { width:100%;height: auto;border-radius: 10px;overflow: hidden;position: relative;transition: all 0.3s ease; }
.swiper-slide-active { transform: scale(1.1);z-index: 2; }
.cardsd { width: 100%;position: relative;border-radius:10px; }
.cardd { width: 100%;position: relative;border-radius:10px; }
.cardd img { width: 100%;height: 100%;object-fit: cover;border-radius:10px;transition: transform 0.5s ease;margin-top:10px; }
.cardd:hover img { transform: scale(1.2); }
/* .text { position: absolute;bottom: 0;left: 0;width: 100%;padding: 30px; background: linear-gradient(transparent, rgba(0,0,0,0.8)); z-index: 1; } */

.title-box { position: absolute;bottom: 30px;left: 30px;z-index: 3;max-width: 80%; }
.title-box h2 { font-size: 28px;margin-bottom: 10px;font-weight: 700;display:none; }
.title-box p { font-size: 14px;line-height: 1.5;opacity: 0.9;margin-bottom: 15px;display:none; }
.seperator { width: 50px;height: 2px; }
.swiper-pagination { bottom: 30px !important; }
.swiper-pagination-bullet { background: #fff;opacity: 0.5;width: 10px;height: 10px; }
.swiper-pagination-bullet-active { opacity: 1; }
.bottom-navigation { width: 48%;height:auto;display: flex;justify-content: center;align-items: center;position: relative; }
.showcase-carousel_navigation__o2scu { width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 20px 20px; }
.showcase-carousel_navigation__o2scu .sm-hide { display: flex;flex-direction: column;gap: 10px;margin-top: 10px;width: 80%;position: relative;overflow: hidden; }
.text-container { position: relative;width: 100%;overflow: hidden; }
.heading_wrapper__6woxN { font-size: 16px;margin: 0;transform: translateY(0);transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.6);}
.heading_wrapper__6woxN.c--solid-11 { font-size: 16px;font-weight: 400;opacity: 0.8;max-width: 80%;margin-top: 30px;transform: translateY(0);transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.6);display:none; }

#slide-title-container.hide .heading_wrapper__6woxN { transform: translateY(100%); }
#slide-description-container.hide .heading_wrapper__6woxN.c--solid-11 { transform: translateY(100%); }

.sm-hide::before { content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #e4e7e9;z-index: 2;transform: translateY(0);transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.sm-hide.hiding::before { transform: translateY(0); }
.sm-hide.showing::before { transform: translateY(-100%); }
.showcase-carousel_navigation__o2scu > div:last-child { display: flex;gap: 15px; }

#prev-slide::before { transform: rotate(-135deg); }
#next-slide::before { transform: rotate(45deg); }

.swiper-arrows { display: flex;gap: 15px;align-items: center;background: rgba(255, 255, 255, 0.1);border-radius: 40px;padding: 10px;backdrop-filter: blur(10px); }
.swiper-button-prev,
.swiper-button-next { position: relative;width: 50px;height: 50px;background: rgba(255, 255, 255, 0.2);border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease; }
.swiper-button-prev:hover,
.swiper-button-next:hover { background: rgba(255, 255, 255, 0.4);transform: scale(1.1); }
.swiper-button-prev:after,
.swiper-button-next:after { content: '';position: absolute;width: 12px;height: 12px;border-top: 2px solid #fff;border-right: 2px solid #fff; }
.swiper-button-prev:after { transform: rotate(-135deg);margin-left: 3px; }
.swiper-button-next:after { transform: rotate(45deg);margin-right: 3px; }
.swiper-slide:not(.swiper-slide-active) .title-box { display: none; }

@media (max-width: 768px) {
  .bottom-navigation{ width: 100%; }
  .showcase-carousel_navigation__o2scu{ width: 100%; }
  .swiper-button-prev,
  .swiper-button-next { width: 45px;height: 45px; }
  .swiper-arrows { gap: 10px;padding: 8px; }
  .showcase-carousel_navigation__o2scu { flex-direction: column;gap: 20px; }
  .heading_wrapper__6woxN { font-size: 20px; }
  .heading_wrapper__6woxN.c--solid-11 { font-size: 14px; }
}
/* 网站设计图  end */		

/* 平面设计 */
.website-desgn { background-color: #e4e7e9;padding:100px 5%;display: flex; }
.website-desgn h4{ width: 20%;font-size: 16px;flex-shrink: 0;margin-top: 0.5%;text-align: left;position: absolute; }
.website-description { flex: 1;padding-left: 25%; }
.website-description h3{ width:60%;font-size:36px;line-height:45px; }
.website-description p{ width:58%;font-size:14px;color:#666666; }

.ceaphie-dxeslgn { padding: 100px 5%;background-color: #fff;display: flex; }
.ceaphie-dxeslgn h4{ width: 20%;font-size: 16px;flex-shrink: 0;margin-top: 0.5%;text-align: left;position: absolute; }
.ceaphie-description { flex: 1;padding-left: 25%; }
.ceaphie-description h3{ font-size:36px;}
.ceaphie-description p{ width:80%;font-size:14px;color:#666666;}	
.container { padding:0px 5% 80px; }
.ceaphie_container { max-width: 100%;margin: 0 auto; }
.products-grid { display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px; }
.product-card { background: white;border-radius: 12px;overflow: hidden; }
.product-card a { text-decoration: none;color:#222222; }
.product-image { display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;border-radius: 10px; }
.product-image img { width: 100%;object-fit: contain;border-radius: 10px;object-fit: cover;transition: transform 0.5s ease;}
.product-image:hover img { transform: scale(1.2); }
.product-info { padding: 17px 1%; }
.product-info h3{ font-size: 16px;font-weight: 700;margin-bottom: 10px;color: #000000;}
.product-info p{ font-size: 16px;color: #666666;line-height: 1.5; }

@media (max-width: 992px) {
	.product-image img{ height:100%;}
	.website-description h3{ width:100%;line-height:45px; }
	.ceaphie-description h3{ width:100%;line-height:45px; }
	.website-desgn h4{ margin: auto;position: absolute;margin-top: -50px;width: 80%; }
	.ceaphie-dxeslgn h4{ margin: auto;position: absolute;margin-top: -50px;width: 80%; }
	.container{ padding:20px; }
	.product-image{ Height:auto; }
	.customers-say{ padding:20px;}
	.ceaphie-description{ padding:00px; }
	.website-description p{ width:100%; }
	.ceaphie-description p{ width:100% }			
	.products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
	.product-image{ Height:auto; }			
	.customers-say{ padding:20px; }
	.products-grid { grid-template-columns: 1fr; }
}
/* 平面设计 end */

/* customer */
.customers-say { background-color: #eeeeee;padding: 100px 5%;display: flex; }
.customers-say h4{ width: 20%;font-size: 16px;flex-shrink: 0;margin-top: 0.5%;text-align: left;position: absolute;}
.customers-description { flex: 1;padding-left: 25%; }
.customers-description h3{ font-size:36px;}
.customers-description p{ width:80%;font-size:14px;}

@media (max-width: 992px) {
	.customers-say h4{ margin: auto;position: absolute;margin-top: -50px;width: 80%; }
	.customers-description { width:100%;padding:0; }
	.customers-description p{ width:100%; }
}
@media (max-width: 576px) {
	.products-grid { grid-template-columns: 1fr; }

}

.customers { width: 100%;max-width: 100%;margin: 0 auto;background-color:#eeeeee; }
.slider-container { max-width: 100%;width: 100%;margin: 0 auto;overflow: hidden;position: relative;padding: 0 0 50px 0; }
.cards-swiper { width: 100%;height: 100%;padding: 10px 0; }
.swiper-slide { display: flex;justify-content: center;align-items: center;/* background-color:#f5f5f5; */border-radius:10px; }
.cards { width: 100%;max-width: 100%;border-radius: 10px;padding: 30px 25px;display: flex;flex-direction: column;align-items: flex-start;background-color:#ffffff;/* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); */transition: transform 0.3s ease, box-shadow 0.3s ease;position: relative;overflow: hidden;min-height: 240px; }
.cards::before { content: '';position: absolute;top: 0;left: 0;width: 100%;height: 4px; }
.logo { font-size: 18px;font-weight: 700;letter-spacing: 1px;color: #fff;display: flex;align-items: center; }
.scrolled .logo{ color:#222222; }
.logo-white{ display:block; }
.scrolled .logo-white{ display:none; }
.logo-black{ display:none;}
.scrolled .logo-black{ display:block; }
.logo i { margin-right: 8px;color: #3498db; }
.description { font-size: 14px;color: #222222;line-height: 1.6;margin-bottom: 25px;flex-grow: 1; }
.person-info { display: flex;align-items: center;width: 100%; }
.avatar { width: 45px;height: 45px;border-radius: 50%;margin-right: 12px;overflow: hidden;background-color: #eef2f7;border: 2px solid #e0e6ed; }
.avatar img { width: 100%;height: 100%;object-fit: cover;}
.details h4 { font-size: 14px;color: #222222;}
.details p { font-size: 14px;color: #222222;}
.slider-controlss { display: flex;justify-content: center;align-items: center;margin-top: 40px;gap: 15px;float:right;margin-right:8%; }
.arrow-btn { background-color:#f5f5f5;width: 30px;height: 30px;border-radius: 20%;border: none;font-size: 15px;color: #535353;cursor: pointer;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;z-index: 10; }
.arrow-btn:hover { background: #f5f5f5;color: #535353; }

/* 自定义Swiper样式 */
.swiper-pagination-bullet { width: 10px;height: 10px;background-color: #ccc;opacity: 1; }
.swiper-pagination-bullet-active { background-color: #3498db; }

@media (max-width: 1200px) {
	.cards { max-width: 300px; }
}
@media (max-width: 1024px) {
	.cards { max-width: 280px; }
}
@media (max-width: 768px) {
	.slider-container { padding: 0 15px; }
	.cards { max-width: 100%; }
}
@media (max-width: 480px) {
	.slider-container { padding: 0 10px 40px;}
	.slider-controlss{ float:none;margin-right:0;}	
	.cards { max-width: 100%; }
	.arrow-btn { width: 30px;height: 30px; }
}

/* customer end */


/* news */
.news{ width:100%;height:100%; }
.news-container { max-width: 100%;margin: 0 auto;background-color: #fff;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);overflow: hidden;padding: 80px 5%; }
.news-container h4{ width: 20%;font-size: 16px;color:#222222;flex-shrink: 0;margin-top: 2%;text-align: left;position:absolute; }	
.news-list { width:75%;display: flex;flex-direction: column;gap: 0px;float:right; }
.news-item { display: flex;background: #fff;padding:40px 0px 40px 0px;overflow: hidden;transition: all 0.3s ease;border-top: 1px solid #b9b9b9; }
.news-item:first-child { border-top: none; }
.news-image { flex: 0 0 390px;height: 194px;overflow: hidden;border-radius: 8px; }
.news-item a{ text-decoration: none; }
.news-image img { width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease; }
.news-item:hover .news-image img { transform: scale(1.03);border-radius: 8px; }
.news-content { flex: 1;padding: 20px 25px;display: flex;flex-direction: column;justify-content: space-between; }
.news-title { font-size: 18px;font-weight: 600;margin-bottom: 12px;color: #000000;line-height: 1.4; }
.news-excerpt { font-size: 14px;color: #666666;line-height: 1.6;margin-bottom: 15px;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden; }
.news-meta { display: flex;align-items: center;font-size: 13px;color: #666666; }
.news-date { font-weight: 500; }
.news-category { background-color: #f0f0f0;padding: 4px 10px;border-radius: 6px;font-size: 12px;margin-left:2%; }
.news-class{ margin-left:10%;}
.see-all-news{padding:20px;color:#222222;}

@media (max-width: 768px) {
	.news-meta{ position:relative;top: -205px;margin-bottom: -200px; }
	.news-category{ position:absolute;flex-direction: row-reverse; }
	.news-date{ position:relative;margin-left:35%; }
	.news-time{ margin-left:100%;}
	.news-excerpt{ font-size:14px;position: relative;top: -20px; }
	.news-list{ width:100%;margin-top:20px; }
	.news-container { padding: 20px; }	
	.news-item { display:flex;Height:250px;}
	.news-image { width: 150px;flex: 0 0 127px;overflow: hidden;border-radius: 8px;Height:127px;}
	.news-title { font-size: 16px; }	
}
@media (max-width: 480px) {
	.news-title { font-size: 16px;}	
	.news-content { width: 100%;flex: 1;display: flex; }
}
/* news end */


/* footer */
.footer { background-color: #000000;color: #fff;width: 100%;padding: 60px 0 30px;font-family: 'Segoe UI', sans-serif; }
.footer-container { max-width: 100%;margin: 0 auto; }
.footer-top { display: flex;flex-wrap: wrap;position: relative; }
.contact-form-hr{ width:100%;height:100%;border-bottom:1px solid #777777; }
.contact-form { width: 95%;margin:auto;padding: 0 0 60px 0;display: flex;align-items: flex-start; }
.contact-form h4 { width: 23%;font-size: 16px;color: #ebebeb;margin-left:2.8%;flex-shrink: 0;margin-top: 0;text-align:left; }
.ctaMsg { flex: 0.8;width: 80%; }
.ctaMsg input { height:28px;border-radius: 5px; }
.ctaMsg textarea { height:65px;border-radius: 5px; }
.form-group { width:74.5%;margin-bottom: 17px;display: flex;flex-direction: column; }
.form-group label { display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px;font-size: 14px;color: #ebebeb;letter-spacing: 0.5px; }
.form-control { width: 90%;background-color: #333;border: none;padding: 12px 15px;color: #fff;font-size: 16px;border-radius: 0;transition: background-color 0.3s;font-family: inherit; }
.form-control:focus { outline: none;background-color: #444;}
textarea.form-control { min-height: 120px;resize: vertical; }
.btn-send { width: 83px;height: 28px;text-align: center;background-color: #fff;color: #303030;border: none;font-size: 16px;font-weight: 600;letter-spacing: 1px;cursor: pointer;transition: all 0.3s;margin-right: 76%;border-radius: 5px; }
.btn-send:hover { background-color: #e0e0e0;}
.business-inquiries { width: 95%;padding: 60px 0 60px 0;display: flex;align-items: flex-start;margin:auto; }
.business-inquiries h4 { width: 23%;font-size: 16px;color: #ebebeb;margin-left:2.8%;flex-shrink: 0;margin-top: 0;text-align:left; }
.contact-info { width: 45%;margin-bottom: 30px;}
.contact-item { margin-bottom: 20px;display: flex;align-items: flex-start;text-align:left;}
.contact-label { margin-right: 16px;min-width: 100px;font-size: 14px;color: #ebebeb;flex-shrink: 0; }
.contact-detail { flex: 1;line-height: 1.5;font-size:16px;color:#ebebeb; }
.contact-detail a { display: inline-block;margin-right: 10px;text-decoration: none;color: #fff;transition: color 0.3s; }
.brand-logo { width: 90%;Height:100%;margin:auto;filter: brightness(60%); }
.footer-bottom { display: flex;justify-content: space-between;align-items: center;padding-top: 30px;flex-wrap: wrap;padding:60px 90px 0px 90px; }
.copyright { font-size: 14px;color: #e4e4e4; }
.footer-nav { display: flex;gap: 25px;flex-wrap: wrap; }
.footer-nav a { color: #fff;text-decoration: none;font-size: 14px;text-transform: lowercase;transition: color 0.3s; }
.footer-nav a:hover { color: #e4e4e4; }

@media (max-width: 768px) {
	.form-control{ width: 70%;}
	.footer-bottom{ padding:20px}
	.brand-logo img{width:100%;}
	.form-group{ width:100%;}
	.btn-send{margin:auto;margin-left:-15%;}
	.footer-top { flex-direction: column; }
	.contact-form, .business-inquiries { width: 100%;padding: 0;flex-direction: column;margin-top:20px; }
	.contact-form h4, .business-inquiries h4 { width: 90%;margin-right: 0;margin-bottom: 10px; }
	.ctaMsg, .contact-info { width: 100%;padding:20px; }	
	.contact-form { margin-bottom: 40px; }	
	.brand-logo { font-size: 80px; }	
	.footer-bottom { flex-direction: column;gap: 20px;text-align: center; }
	.footer-nav { justify-content: center;}
	.contact-item { flex-direction: column; }	
	.contact-label { margin-bottom: 5px;min-width: auto;}
	.contact-info { margin-bottom:0; }
}
@media (max-width: 480px) {
	.brand-logo { font-size: 60px;margin-top:-30px; }
	.footer-nav { gap: 15px; }
	.footer-nav a { font-size: 13px; }
}

/* footer end */