@charset "utf-8";
/* ==========================================================================
   Dahua 默认模板 · 视觉增强
   目标：页面更饱满（内容充实、层次分明）+ 更立体（阴影/渐变/圆角/高光）
   说明：本文件独立于 style.css，加载在 style.css 之后，便于单独回滚
   ========================================================================== */

:root{
	/* 深度阴影体系：近距 + 远距双层，营造真实悬浮感 */
	--sh-xs:0 1px 2px rgba(15,23,42,.06);
	--sh-sm:0 2px 8px rgba(15,23,42,.07),0 1px 2px rgba(15,23,42,.04);
	--sh-md:0 10px 26px rgba(15,23,42,.09),0 3px 7px rgba(15,23,42,.05);
	--sh-lg:0 20px 44px rgba(15,23,42,.13),0 6px 14px rgba(15,23,42,.07);
	--sh-xl:0 32px 64px rgba(15,23,42,.18),0 10px 24px rgba(15,23,42,.09);
	/* 圆角体系 */
	--r-xs:4px;
	--r-sm:8px;
	--r-md:14px;
	--r-lg:20px;
	--r-xl:28px;
	/* 品牌渐变 */
	--grad-brand:linear-gradient(135deg,#FFC63A 0%,#FDB812 45%,#F0A400 100%);
	--grad-brand-hover:linear-gradient(135deg,#FFD05A 0%,#FFC02A 45%,#F5AE0A 100%);
	--grad-dark:linear-gradient(180deg,#20242D 0%,#16181E 100%);
	--grad-page:linear-gradient(180deg,#FFFFFF 0%,#F5F7FA 22%,#F2F5F9 100%);
	/* 缓动 */
	--ease:cubic-bezier(.22,1,.36,1);
}

/* ==========================================================================
   一、页面底色与整体饱满度
   ========================================================================== */
body{
	background-color:#F5F7FA;
	background-image:radial-gradient(1200px 500px at 50% -180px,rgba(253,184,18,.10),transparent 70%);
	background-attachment:fixed;
}
main{
	background:transparent;
	padding-bottom:70px;
}
main.about-us{background:transparent}

/* 内容栅格：适度放宽，让版面更舒展饱满 */
.common-wrapper{width:1400px}
@media(max-width:1520px){.common-wrapper{width:1200px}}
@media(max-width:1280px){.common-wrapper{width:1000px}}
@media(max-width:768px){.common-wrapper{width:100%}}

/* ---- 品牌 Logo（齿轮 + DAHUA 标）----
   头部黄底上使用深色版 logo-head.png（940×152，含透明通道） */
.head-logo{
	display:flex;
	align-items:center;
	max-width:none;
}
.head-logo a{
	display:flex;
	align-items:center;
	height:100%;
}
.head-logo img{
	height:auto;
	max-height:52px;
	max-width:none;
	width:auto;
	display:block;
}
/* 头部滚动后加深时，logo 保持深色（黄底上清晰） */
.head.headscroll .head-logo img{
	filter:none;
}
@media screen and (max-width:1024px){
	.head-logo img{max-height:40px}
}
@media screen and (max-width:768px){
	.head-logo img{max-height:32px}
}

/* ==========================================================================
   二、顶部导航：立体悬浮
   ========================================================================== */
.head{
	background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.07));
	box-shadow:0 4px 18px rgba(15,23,42,.16),0 1px 3px rgba(15,23,42,.10);
}
.head:after{
	content:"";
	position:absolute;
	left:0;right:0;bottom:0;
	height:3px;
	background:var(--grad-brand);
	box-shadow:0 2px 8px rgba(253,184,18,.45);
}
.head.headscroll{
	background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.13));
	box-shadow:0 8px 28px rgba(15,23,42,.22),0 2px 6px rgba(15,23,42,.12);
}
.head-nav>ul>li>a{
	transition:color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease);
}
.head-nav>ul>li .inmenu_1,.head-nav>ul>li:hover>a{
	color:var(--color);
	background-color:var(--fontcolor);
	box-shadow:inset 0 -3px 0 var(--color);
}
.head-nav>ul .submenu{
	box-shadow:0 18px 40px rgba(15,23,42,.22);
	border-top:2px solid rgba(255,255,255,.35);
}
.head-nav>ul .submenu a:hover{transform:translateX(6px)}

/* ==========================================================================
   三、通用标题：视觉锚点（居中标题 + 渐变装饰线）
   ========================================================================== */
.common-title{
	position:relative;
	display:inline-block;
	padding-bottom:18px;
	text-align:center !important;
	letter-spacing:.5px;
}
.common-title:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	width:72px;
	height:4px;
	border-radius:3px;
	background:var(--grad-brand);
	box-shadow:0 3px 10px rgba(253,184,18,.55);
}
.hot-pro .common-title,.news .common-title{display:flex;justify-content:center}

/* ==========================================================================
   四、按钮：渐变实心 + 立体光泽
   ========================================================================== */
.common-more-btn{
	border:0;
	border-radius:999px;
	background:var(--grad-brand);
	color:#FFFFFF;
	box-shadow:0 8px 20px rgba(253,184,18,.40),0 2px 4px rgba(15,23,42,.10);
	transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
	position:relative;
	overflow:hidden;
}
.common-more-btn:hover{
	transform:translateY(-3px);
	background:var(--grad-brand-hover);
	box-shadow:0 14px 30px rgba(253,184,18,.52),0 4px 8px rgba(15,23,42,.12);
}
.common-more-btn-y{
	border:0;
	border-radius:999px;
	background:var(--grad-brand);
	color:#FFFFFF;
	box-shadow:0 8px 20px rgba(253,184,18,.40);
	transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.common-more-btn-y:hover{
	transform:translateY(-3px);
	background:var(--grad-brand-hover);
	box-shadow:0 14px 30px rgba(253,184,18,.52);
}
.common-more-btn i,.common-more-btn-y i{transition:transform .3s var(--ease)}
.common-more-btn:hover i,.common-more-btn-y:hover i{transform:translateX(6px)}
.btn-wrapper{margin-top:4px}

/* ==========================================================================
   五、产品卡片（首页 hot-pro / 列表页）
   ========================================================================== */
.hot-pro ul li{
	border-radius:var(--r-md);
	background-color:#FFFFFF;
	border:1px solid rgba(15,23,42,.05);
	box-shadow:var(--sh-sm);
	overflow:hidden;
	transition:transform .38s var(--ease),box-shadow .38s var(--ease),background-color .38s var(--ease);
}
.hot-pro ul li:hover{
	background-color:#FFFFFF;
	transform:translateY(-9px);
	box-shadow:var(--sh-lg);
	border-color:rgba(253,184,18,.55);
}
.hot-pro .pro-img-wrapper{
	background-color:#F8FAFC;
	box-shadow:inset 0 0 0 1px rgba(15,23,42,.04);
}
.hot-pro .pro-img-wrapper:after{
	content:"";
	position:absolute;
	left:0;right:0;bottom:0;
	height:45%;
	background:linear-gradient(180deg,rgba(15,23,42,0),rgba(15,23,42,.30));
	opacity:0;
	transition:opacity .38s var(--ease);
	pointer-events:none;
}
.hot-pro ul li:hover .pro-img-wrapper:after{opacity:1}
.hot-pro .pro-img img{transition:transform .55s var(--ease)}
.hot-pro ul li:hover .pro-img img{transform:scale(1.08)}
.hot-pro .pro-info{padding:18px 18px 20px}
.hot-pro .pro-name{
	transition:color .3s var(--ease);
	font-weight:var(--fontbold6);
}
.hot-pro ul li:hover .pro-name{color:var(--color)}
.hot-pro .pro-intro{color:var(--introcolor);line-height:1.65;min-height:46px}

/* 侧栏热门产品卡 */
.side-pro ul li{
	background-color:#FFFFFF;
	border-radius:var(--r-sm);
	padding:10px;
	margin-bottom:12px;
	box-shadow:var(--sh-xs);
	transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.side-pro ul li:hover{transform:translateX(4px);box-shadow:var(--sh-sm)}

/* ==========================================================================
   六、新闻卡片
   ========================================================================== */
.news{padding:62px 0;background:transparent}
.news ul li{
	border-radius:var(--r-md);
	border:1px solid rgba(15,23,42,.05);
	box-shadow:var(--sh-sm);
	overflow:hidden;
	transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.news ul li:hover{transform:translateY(-9px);box-shadow:var(--sh-lg)}
.news-img{position:relative;overflow:hidden;background-color:#F8FAFC}
.news-img:after{
	content:"";
	position:absolute;
	left:0;right:0;bottom:0;
	height:40%;
	background:linear-gradient(180deg,rgba(15,23,42,0),rgba(15,23,42,.26));
	opacity:0;
	transition:opacity .38s var(--ease);
}
.news ul li:hover .news-img:after{opacity:1}
.news-img img{transition:transform .55s var(--ease)}
.news ul li:hover .news-img img{transform:scale(1.07)}
.news-info{padding:20px 20px 22px}
.news-title{transition:color .3s var(--ease);font-weight:var(--fontbold6)}
.news ul li:hover .news-title{color:var(--color)}
.news-con{color:var(--introcolor);line-height:1.7;margin-top:8px;min-height:48px}
.news ul li .more-btn{
	border-radius:999px;
	padding:7px 16px;
	background:rgba(15,23,42,.05);
	font-weight:var(--fontbold6);
}
.news ul li:hover .more-btn{background:var(--color);color:#FFFFFF;box-shadow:0 6px 14px rgba(253,184,18,.45)}

/* ==========================================================================
   七、About 区：渐变遮罩 + 玻璃质感内容板
   ========================================================================== */
.about{
	height:620px;
	background-size:cover;
	box-shadow:inset 0 -70px 90px rgba(15,23,42,.45);
	border-radius:0;
}
.about:before{
	content:"";
	width:100%;height:100%;
	background:linear-gradient(125deg,rgba(9,13,22,.93) 0%,rgba(9,13,22,.80) 42%,rgba(9,13,22,.62) 72%,rgba(253,184,18,.22) 100%);
	opacity:1;
	display:block;
}
.about-wrapper{padding:92px 0 70px}
.about-title{
	font-size:var(--fontsize36);
	font-weight:var(--fontbold7);
	letter-spacing:1px;
	padding:0 0 18px;
	position:relative;
	text-shadow:0 3px 16px rgba(253,184,18,.45);
}
.about-title:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	width:70px;height:4px;border-radius:3px;
	background:var(--grad-brand);
	box-shadow:0 3px 12px rgba(253,184,18,.6);
}
.about-text{
	max-width:1080px;
	color:#FFFFFF;
	line-height:1.95;
	font-size:var(--fontsize16);
	background:rgba(255,255,255,.07);
	border:1px solid rgba(255,255,255,.16);
	border-radius:var(--r-lg);
	padding:36px 44px;
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
	box-shadow:0 26px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.20);
}
.about-text p{text-align:center}

/* ==========================================================================
   八、首页 Banner
   ========================================================================== */
#swiper-banner{
	border-radius:0;
	box-shadow:0 18px 44px rgba(15,23,42,.16);
}
.swiper-container .swiper-slide img{object-fit:cover}
.swiper-container .swiper-pagination-bullet{
	width:10px;height:10px;
	background:#FFFFFF;
	opacity:.55;
	transition:all .3s var(--ease);
	box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.swiper-container .swiper-pagination-bullet-active{
	width:28px;
	border-radius:5px;
	background:var(--color);
	opacity:1;
	box-shadow:0 3px 10px rgba(253,184,18,.6);
}
.swiper-container .swiper-button-next,.swiper-container .swiper-button-prev{
	width:48px;height:48px;
	border-radius:50%;
	background:rgba(255,255,255,.16);
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
	border:1px solid rgba(255,255,255,.30);
	box-shadow:0 8px 22px rgba(0,0,0,.22);
	transition:all .3s var(--ease);
}
.swiper-container .swiper-button-next:hover,.swiper-container .swiper-button-prev:hover{
	background:var(--color);
	border-color:var(--color);
	transform:scale(1.08);
}
.swiper-container .swiper-button-next i,.swiper-container .swiper-button-prev i{transform:scale(2.2)}

/* ---- 轮播文案层：左侧渐变遮罩 + 标题/副标题/按钮 ---- */
#swiper-banner .swiper-slide{
	position:relative;
	display:block;
	overflow:hidden;
}
#swiper-banner .slide-img{
	display:block;
	width:100%;
	line-height:0;
}
#swiper-banner .slide-img img{
	display:block;
	width:100%;
	height:auto;
}
#swiper-banner .slide-caption{
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:62%;
	display:flex;
	align-items:center;
	pointer-events:none;
	background:linear-gradient(90deg,
		rgba(12,15,20,.88) 0%,
		rgba(12,15,20,.72) 38%,
		rgba(12,15,20,.36) 68%,
		rgba(12,15,20,0) 100%);
}
#swiper-banner .slide-caption-inner{
	padding:0 0 0 6.2vw;
	max-width:640px;
}
#swiper-banner .slide-eyebrow{
	display:inline-block;
	font-size:13px;
	font-weight:600;
	letter-spacing:3.4px;
	color:var(--color);
	padding-bottom:10px;
	margin-bottom:18px;
	position:relative;
}
#swiper-banner .slide-eyebrow:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:46px;
	height:2px;
	background:var(--grad-brand);
	border-radius:1px;
}
#swiper-banner .slide-title{
	margin:0 0 16px;
	font-size:52px;
	line-height:1.16;
	font-weight:700;
	color:#FFFFFF;
	letter-spacing:-.5px;
	text-shadow:0 3px 18px rgba(0,0,0,.42);
}
#swiper-banner .slide-sub{
	margin:0 0 32px;
	font-size:17px;
	line-height:1.75;
	color:rgba(255,255,255,.82);
	max-width:520px;
	text-shadow:0 2px 10px rgba(0,0,0,.38);
}
#swiper-banner .slide-btn{
	pointer-events:auto;
	display:inline-flex;
	align-items:center;
	gap:9px;
	padding:14px 30px;
	border-radius:999px;
	background:var(--grad-brand);
	color:#1B1E24;
	font-size:15px;
	font-weight:600;
	letter-spacing:.4px;
	box-shadow:0 10px 26px rgba(240,164,0,.38);
	transition:all .3s var(--ease);
}
#swiper-banner .slide-btn i{
	font-size:15px;
	transition:transform .3s var(--ease);
}
#swiper-banner .slide-btn:hover{
	box-shadow:0 14px 34px rgba(240,164,0,.5);
	transform:translateY(-2px);
}
#swiper-banner .slide-btn:hover i{
	transform:translateX(4px);
}
/* 窄屏：文案层改为底部渐变，标题缩小 */
@media screen and (max-width:1024px){
	#swiper-banner .slide-caption{
		width:100%;
		align-items:flex-end;
		background:linear-gradient(0deg,
			rgba(12,15,20,.92) 0%,
			rgba(12,15,20,.74) 32%,
			rgba(12,15,20,.28) 62%,
			rgba(12,15,20,0) 100%);
	}
	#swiper-banner .slide-caption-inner{
		padding:0 5vw 6vw;
		max-width:none;
	}
	#swiper-banner .slide-title{
		font-size:38px;
		margin-bottom:12px;
	}
	#swiper-banner .slide-sub{
		font-size:15px;
		margin-bottom:24px;
	}
}
@media screen and (max-width:768px){
	/* 窄屏下原图等比缩放后高度不足，文案会溢出到顶部 →
	   给 banner 一个足够的固定高度，用 object-fit:cover 裁切画面 */
	#swiper-banner{
		height:62vh;
		min-height:400px;
		max-height:560px;
	}
	#swiper-banner .swiper-slide{
		height:100%;
	}
	#swiper-banner .slide-img{
		height:100%;
	}
	#swiper-banner .slide-img img{
		height:100%;
		width:100%;
		object-fit:cover;
		object-position:72% center;
	}
	#swiper-banner .slide-caption{
		height:100%;
	}
	#swiper-banner .slide-eyebrow{
		font-size:11px;
		letter-spacing:2.6px;
		margin-bottom:12px;
		padding-bottom:8px;
	}
	#swiper-banner .slide-title{
		font-size:27px;
		line-height:1.22;
	}
	#swiper-banner .slide-sub{
		font-size:14px;
		line-height:1.6;
		margin-bottom:20px;
	}
	#swiper-banner .slide-btn{
		padding:11px 22px;
		font-size:14px;
	}
}

/* ==========================================================================
   九、内页：面包屑 + 主内容卡 + 侧栏卡
   ========================================================================== */
.inner-nav{
	background:linear-gradient(180deg,#FFFFFF,#F7F9FC);
	box-shadow:var(--sh-xs);
	border-bottom:1px solid rgba(15,23,42,.06);
}
.inner-nav a,.inner-nav span.h2,.inner-nav h1{transition:color .25s var(--ease)}
.inner-nav a:hover{color:var(--color)}

.common-main{
	background:#FFFFFF;
	border-radius:var(--r-lg);
	padding:40px 44px 44px;
	box-shadow:var(--sh-md);
	border:1px solid rgba(15,23,42,.045);
}
.common-main h1{
	text-align:center;
	position:relative;
	padding-bottom:16px;
}
.common-main h1:after{
	content:"";
	position:absolute;
	left:50%;bottom:0;
	transform:translateX(-50%);
	width:56px;height:3px;border-radius:2px;
	background:var(--grad-brand);
}
.common-main p{line-height:2.05;color:#333333}

/* 侧栏三块各自成卡 */
.side-cate,.side-pro,.side-contact{
	background:#FFFFFF;
	border-radius:var(--r-md);
	overflow:hidden;
	box-shadow:var(--sh-sm);
	border:1px solid rgba(15,23,42,.045);
	margin-bottom:26px;
}
.side-cate .title,.side-pro .title,.side-contact .title{
	background:var(--grad-brand);
	color:#FFFFFF;
	font-weight:var(--fontbold6);
	letter-spacing:.5px;
	box-shadow:0 4px 12px rgba(253,184,18,.32);
}
.side-about .item,.side-about .LocalCurrent{
	transition:background-color .25s var(--ease),padding-left .25s var(--ease);
}
.side-about .item:hover{background:#FFF8E6;padding-left:6px}
.side-cate li a{transition:color .25s var(--ease),padding-left .25s var(--ease)}
.side-cate li a:hover{padding-left:6px}
.side-news ul li{transition:background-color .25s var(--ease)}
.side-news ul li:hover{background:#FFFBF0}

/* 内页 banner */
.banner{box-shadow:0 14px 36px rgba(15,23,42,.16)}
.pagesbanner .pagesbanner-animate{
	text-shadow:0 3px 18px rgba(0,0,0,.55);
}
.pagesbanner .pagesbanner-animate .p1{letter-spacing:1px}

/* ==========================================================================
   十、分页
   ========================================================================== */
.pagination a,.pagination span{
	border-radius:var(--r-xs);
	border:1px solid rgba(15,23,42,.10);
	box-shadow:var(--sh-xs);
	transition:all .28s var(--ease);
}
.pagination a:hover{
	background:var(--grad-brand);
	color:#FFFFFF;
	border-color:transparent;
	transform:translateY(-2px);
	box-shadow:0 8px 18px rgba(253,184,18,.42);
}
.pagination .page-item.page-link.st{font-weight:var(--fontbold7)}

/* ==========================================================================
   十一、表单与留言（立体输入框）
   ========================================================================== */
.duojiafeedback .inquiry-form input,
.duojiafeedback .inquiry-form textarea{
	border-radius:var(--r-sm);
	border:1px solid rgba(15,23,42,.12);
	box-shadow:inset 0 2px 5px rgba(15,23,42,.05);
	transition:all .28s var(--ease);
	background:#FCFDFE;
}
.duojiafeedback .inquiry-form input:focus,
.duojiafeedback .inquiry-form textarea:focus{
	border-color:var(--color);
	box-shadow:inset 0 2px 5px rgba(15,23,42,.04),0 0 0 4px rgba(253,184,18,.22);
	outline:none;
	background:#FFFFFF;
}
.duojiafeedback .send-btn{
	border-radius:999px;
	background:var(--grad-brand);
	border:0;
	box-shadow:0 8px 20px rgba(253,184,18,.42);
	transition:all .3s var(--ease);
	font-weight:var(--fontbold6);
}
.duojiafeedback .send-btn:hover{
	transform:translateY(-3px);
	background:var(--grad-brand-hover);
	box-shadow:0 14px 30px rgba(253,184,18,.55);
}
.send-inquiry{
	background:#FFFFFF;
	border-radius:var(--r-lg);
	padding:32px 34px;
	box-shadow:var(--sh-md);
	border:1px solid rgba(15,23,42,.045);
}

/* ==========================================================================
   十二、产品详情页
   ========================================================================== */
.pro-preview-left{
	border-radius:var(--r-md);
	overflow:hidden;
	box-shadow:var(--sh-md);
	background:#FFFFFF;
	padding:14px;
}
.pro-preview-right{
	background:#FFFFFF;
	border-radius:var(--r-lg);
	padding:30px 32px;
	box-shadow:var(--sh-md);
	border:1px solid rgba(15,23,42,.045);
}
.pro-preview-right .pro-name{line-height:1.4;margin-bottom:14px}
.pro-preview-right .product-content-price p{
	margin-bottom:10px;
	padding:10px 16px;
	background:#F8FAFC;
	border-radius:var(--r-sm);
	border-left:3px solid var(--color);
	transition:all .25s var(--ease);
}
.pro-preview-right .product-content-price p:hover{background:#FFF8E6;transform:translateX(4px)}
.pro-detail .part .title{
	background:#FFFFFF;
	color:var(--fontcolor);
	border-radius:var(--r-sm);
	border-left:5px solid var(--color);
	padding:16px 20px;
	box-shadow:var(--sh-sm);
	font-weight:var(--fontbold7);
	position:relative;
}
.pro-detail .part .title:after{
	content:"";
	position:absolute;
	left:0;top:0;bottom:0;
	width:5px;
	background:linear-gradient(180deg,#FFC63A,#F0A400);
	border-radius:var(--r-sm) 0 0 var(--r-sm);
}
.pro-detail .part .content{
	background:#FFFFFF;
	border-radius:var(--r-md);
	padding:30px 34px;
	box-shadow:var(--sh-sm);
	border:1px solid rgba(15,23,42,.045);
}

/* ==========================================================================
   十三、页脚
   ========================================================================== */
.search-box{
	background:var(--grad-brand);
	box-shadow:0 10px 26px rgba(253,184,18,.28);
}
.search-input .seatxt{
	border-radius:var(--r-xs) 0 0 var(--r-xs);
	padding-left:16px;
	border:0;
	box-shadow:inset 0 2px 6px rgba(15,23,42,.10);
	background:#FFFFFF;
}
.search-input .stbn{
	border-radius:0 var(--r-xs) var(--r-xs) 0;
	background:var(--fontcolor);
	transition:background .3s var(--ease);
}
.search-input .stbn:hover{background:#2A2E38}
.foot-list{
	background:var(--grad-dark);
	position:relative;
	box-shadow:inset 0 3px 0 var(--grad-brand);
}
.foot-list:before{
	content:"";
	position:absolute;
	left:0;right:0;top:0;
	height:120px;
	background:radial-gradient(600px 120px at 50% 0,rgba(253,184,18,.10),transparent 70%);
	pointer-events:none;
}
.foot-title{
	position:relative;
	padding-bottom:12px;
	margin-bottom:6px;
}
.foot-title:after{
	content:"";
	position:absolute;
	left:0;bottom:0;
	width:34px;height:3px;border-radius:2px;
	background:var(--grad-brand);
}
.foot-l .foot-u li,.foot-item.foot-nav ul li,.foot-cate ul li{
	transition:transform .28s var(--ease);
}
.foot-l .foot-u li:hover,.foot-item.foot-nav ul li:hover,.foot-cate ul li:hover{transform:translateX(6px)}
.foot-item{padding-top:38px}
.foot-right{
	background:#101216;
	border-top:1px solid rgba(255,255,255,.06);
}
.mobile-bottom{
	box-shadow:0 -4px 20px rgba(15,23,42,.16);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
}
.mobile-bottom-item a{
	transition:transform .25s var(--ease),color .25s var(--ease);
}
.mobile-bottom-item a:hover{transform:translateY(-3px);color:var(--color)}

/* 悬浮客服窗 */
.duojia_wm-list{filter:drop-shadow(0 12px 26px rgba(0,0,0,.28))}
#duojia_wm li{transition:transform .3s var(--ease)}
#duojia_wm li:hover{transform:translateX(-4px)}

/* ==========================================================================
   十四、产品区容器修正
   原样式 .pro-scroll-wrapper 在桌面端强制 height:200px + overflow:hidden，
   但脚本中并无对应的横向滚动逻辑，导致第二排产品被裁切、页面显得空荡。
   此处恢复为正常文档流，让全部产品完整展示（页面更饱满）。
   ========================================================================== */
@media screen and (min-width:769px){
	.pro-scroll-wrapper{
		white-space:normal;
		height:auto;
		overflow:visible;
		position:static;
	}
}

/* ==========================================================================
   十五、首页优势条：提升信息密度与页面饱满度
   ========================================================================== */
.advantage{
	width:100%;
	margin-top:52px;
	padding:0 0 6px;
}
.advantage-wrapper{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:24px;
}
.adv-item{
	flex:1 1 0;
	min-width:230px;
	display:flex;
	align-items:flex-start;
	gap:18px;
	padding:26px 24px;
	background:#FFFFFF;
	border-radius:var(--r-md);
	border:1px solid rgba(15,23,42,.05);
	box-shadow:var(--sh-sm);
	transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease);
	position:relative;
	overflow:hidden;
}
.adv-item:before{
	content:"";
	position:absolute;
	left:0;top:0;bottom:0;
	width:4px;
	background:var(--grad-brand);
	transform:scaleY(0);
	transform-origin:top;
	transition:transform .38s var(--ease);
}
.adv-item:hover{
	transform:translateY(-6px);
	box-shadow:var(--sh-lg);
	border-color:rgba(253,184,18,.45);
}
.adv-item:hover:before{transform:scaleY(1)}
.adv-icon{
	flex:none;
	width:52px;height:52px;
	border-radius:14px;
	display:flex;align-items:center;justify-content:center;
	background:linear-gradient(140deg,#FFF6E0,#FFE9B8);
	color:var(--color);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 14px rgba(253,184,18,.28);
	transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.adv-item:hover .adv-icon{
	transform:scale(1.06) rotate(-4deg);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 20px rgba(253,184,18,.38);
}
.adv-icon svg{width:26px;height:26px}
.adv-text h3{
	font-size:var(--fontsize18);
	font-weight:var(--fontbold7);
	margin-bottom:6px;
	letter-spacing:.3px;
}
.adv-text p{
	font-size:var(--fontsize14);
	color:var(--introcolor);
	line-height:1.65;
}

/* ==========================================================================
   十五、列表页：产品 / 新闻 / 案例条目卡片化
   ========================================================================== */
.prolist-1 li,.newslist-1 li,.project-list li{
	border-radius:var(--r-md);
	border:1px solid rgba(15,23,42,.05);
	box-shadow:var(--sh-sm);
	overflow:hidden;
	transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease);
}
.prolist-1 li:hover,.newslist-1 li:hover,.project-list li:hover{
	transform:translateY(-9px);
	box-shadow:var(--sh-lg);
	border-color:rgba(253,184,18,.5);
}
.prolist-1 li .pro-img,.newslist-1 li .pro-img{
	background-color:#F6F8FB;
	box-shadow:inset 0 0 0 1px rgba(15,23,42,.03);
}
.prolist-1 li .pro-img img,.newslist-1 li .pro-img img{
	transition:transform .55s var(--ease);
}
.prolist-1 li:hover .pro-img img,.newslist-1 li:hover .pro-img img{transform:scale(1.07)}
.prolist-1 .pro-info,.newslist-1 .pro-info{padding:18px 20px 20px}
.prolist-1 .pro-name,.newslist-1 .pro-name{transition:color .3s var(--ease);font-weight:var(--fontbold6)}
.prolist-1 li:hover .pro-name,.newslist-1 li:hover .pro-name{color:var(--color)}
.prolist-1 .pro-intro,.newslist-1 .pro-intro{color:var(--introcolor);line-height:1.7;margin:10px 0 0}

/* 搜索 / 图片列表 */
.list-paddingleft-2 .applic-item{
	border-radius:var(--r-md);
	background:#FFFFFF;
	border:1px solid rgba(15,23,42,.05);
	box-shadow:var(--sh-sm);
	overflow:hidden;
	transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.list-paddingleft-2 .applic-item:hover{transform:translateY(-7px);box-shadow:var(--sh-lg)}
.list-paddingleft-2 .applic-img{display:block;background:#F6F8FB;padding-top:100%;position:relative;overflow:hidden}
.list-paddingleft-2 .applic-img img{
	position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;
	transition:transform .5s var(--ease);
}
.list-paddingleft-2 .applic-item:hover .applic-img img{transform:scale(1.06)}
.list-paddingleft-2 .applic-name{
	display:block;padding:16px 18px 18px;font-weight:var(--fontbold6);
	transition:color .3s var(--ease);
}
.list-paddingleft-2 .applic-item:hover .applic-name{color:var(--color)}

/* ==========================================================================
   十六、scrollReveal 兜底
   scrollReveal 会在动画触发前给元素加上 opacity:0 / translateY。
   若脚本未加载或被拦截，内容将永久不可见 —— 这里用 no-js 类兜底，
   保证任何环境下页面内容都是完整可见的。
   ========================================================================== */
html.no-js .hot-pro ul li,
html.no-js .news ul li,
html.no-js .foot-item ul,
html.no-js .common-title,
html.no-js .about-title,
html.no-js .about-text,
html.no-js .banner-title{
	opacity:1 !important;
	visibility:visible !important;
	transform:none !important;
}

/* 上一篇 / 下一篇 */
.common-link{
	border-radius:var(--r-sm);
	overflow:hidden;
	box-shadow:var(--sh-sm);
}
.common-link>div{transition:filter .3s var(--ease)}
.common-link>div:hover{filter:brightness(1.06)}
.common-link .prev{background:linear-gradient(135deg,#FFC63A 0%,#FDB812 100%)}
.common-link .next{background:linear-gradient(135deg,#1A1E26 0%,#000000 100%)}

/* ==========================================================================
   十七、移动端适配
   ========================================================================== */
@media(max-width:768px){
	main{padding-bottom:40px}
	.common-main{
		padding:24px 20px 28px;
		border-radius:var(--r-md);
	}
	.hot-pro ul li,.news ul li{border-radius:var(--r-sm)}
	.about{height:auto;padding:0}
	.about:before{position:absolute}
	.about-wrapper{position:relative;padding:56px 20px 46px}
	.about-text{
		padding:24px 20px;
		border-radius:var(--r-md);
		font-size:var(--fontsize15);
	}
	.about-title{font-size:var(--fontsize26)}
	.about-title:after{left:50%;transform:translateX(-50%)}
	.send-inquiry{padding:22px 18px}
	.pro-preview-right{padding:22px 20px}
	.pro-detail .part .content{padding:22px 18px}
	.swiper-container .swiper-button-next,.swiper-container .swiper-button-prev{display:none}
	.news{padding:44px 0}
	.inner-nav{position:relative}
	.mobcate-main .common-side .side-cate .title{
		background:var(--grad-brand);
		color:#FFFFFF;
	}
}
@media(max-width:768px){
	/* 移动端侧栏展开时保持卡片视觉 */
	.mobcate-main .common-side .side-cate{
		box-shadow:var(--sh-sm);
		border-radius:var(--r-sm);
		overflow:hidden;
	}
}

/* 移动端：优势条堆叠、内边距与字号适配 */
@media(max-width:768px){
	.advantage{margin-top:34px}
	.advantage-wrapper{gap:14px}
	.adv-item{
		flex:1 1 100%;
		min-width:0;
		padding:20px 18px;
		gap:14px;
	}
	.adv-icon{width:46px;height:46px;border-radius:12px}
	.adv-icon svg{width:23px;height:23px}
	.adv-text h3{font-size:var(--fontsize16)}
	.adv-text p{font-size:var(--fontsize13)}
	.common-link>div{font-size:var(--fontsize15);padding:0px 14px;height:44px}
	.common-link>div a{line-height:44px}
	.pro-preview-right{padding:22px 18px}
	.pro-preview-right .product-content-price p{padding:9px 13px}
}

/* 移动端栅格修正：原样式存在两个 768px 断点互相冲突，导致卡片横向溢出 */
@media(max-width:768px){
	.hot-pro ul{
		display:flex !important;
		flex-wrap:wrap !important;
		justify-content:space-between !important;
		width:auto !important;
		margin-top:16px !important;
	}
	.hot-pro ul li{
		width:calc(50% - 9px) !important;
		margin:0 0 18px !important;
		display:block !important;
		box-sizing:border-box !important;
	}
	.hot-pro ul li:last-child{margin-bottom:0 !important}
	.hot-pro .pro-info{padding:8px 10px 10px !important}
	.hot-pro .pro-name{
		font-size:var(--fontsize15) !important;
		white-space:normal !important;
		line-height:1.4 !important;
	}
	.news ul{
		display:flex !important;
		flex-wrap:wrap !important;
		justify-content:space-between !important;
	}
	.news ul li{
		width:calc(50% - 9px) !important;
		margin:0 0 18px !important;
		box-sizing:border-box !important;
	}
	.news ul li:last-child{margin-bottom:0 !important}
	.news-info{padding:12px 12px 14px !important}
	.news-title{font-size:var(--fontsize15) !important}
	.news-con{display:none}
	.prolist-1 li,.newslist-1 li,.project-list li{width:calc(50% - 9px) !important;margin:0 0 18px !important;box-sizing:border-box !important}
	.prolist-1 .pro-info,.newslist-1 .pro-info{padding:12px 12px 14px !important}
	.prolist-1 .pro-name,.newslist-1 .pro-name{font-size:var(--fontsize15) !important}
}

/* ===== 产品详情多图画廊（重构：统一尺寸 + 缩略图可点切换） ===== */
.product-gallery{visibility:visible !important;width:100%}
.pg-main{position:relative;width:100%;aspect-ratio:4/3;background:#f4f5f7;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)}
.pg-main img{width:100%;height:100%;object-fit:cover;display:block}
.pg-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pg-thumb{width:84px;height:84px;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;cursor:pointer;border:2px solid transparent;background:#f4f5f7;box-shadow:var(--sh-xs);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.pg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pg-thumb:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}
.pg-thumb.active{border-color:var(--color)}
@media(max-width:768px){.pg-thumb{width:62px;height:62px}.pg-main{aspect-ratio:1/1}}

/* ===== 详情页图片放大镜 + 全屏灯箱 =====
   原模板用 .preview-container .small-box .hover（180×180 灰色方块镜片）
   + script.js 里的 mousemove 逻辑实现放大镜；画廊重构后该能力丢失，这里还原。
   做法：镜片内放一张与主图同源的图，尺寸 = 盒内显示尺寸 × ZOOM，
   再平移使光标处正对镜片中心。因为主图与镜片图同为 object-fit:cover
   且宽高比一致，放大后的裁切区域与屏幕所见完全吻合。 */
.pg-main{cursor:zoom-in}
.pg-lens{
	position:absolute;
	width:190px;
	height:190px;
	border-radius:50%;
	overflow:hidden;
	pointer-events:none;
	opacity:0;
	visibility:hidden;
	background:#fff;
	box-shadow:0 0 0 3px var(--color),0 12px 30px rgba(15,23,42,.30);
	transition:opacity .18s var(--ease),visibility .18s var(--ease);
	z-index:3;
}
.pg-lens.active{opacity:1;visibility:visible}
.pg-lens img{position:absolute;display:block;max-width:none;max-height:none;object-fit:cover}
/* 右下角放大镜提示图标（纯 CSS 绘制，不依赖图标字体） */
.pg-zoom-hint{
	position:absolute;
	right:12px;
	bottom:12px;
	width:38px;
	height:38px;
	border-radius:50%;
	background:rgba(15,23,42,.50);
	box-shadow:0 4px 14px rgba(15,23,42,.28);
	pointer-events:none;
	z-index:2;
}
.pg-zoom-hint:before{
	content:"";
	position:absolute;
	left:10px;
	top:9px;
	width:14px;
	height:14px;
	border:2px solid #fff;
	border-radius:50%;
}
.pg-zoom-hint:after{
	content:"";
	position:absolute;
	left:22px;
	top:21px;
	width:9px;
	height:2px;
	border-radius:1px;
	background:#fff;
	transform:rotate(45deg);
}
/* 全屏灯箱 */
.pg-lightbox{
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background:rgba(15,23,42,.93);
	display:none;
	align-items:center;
	justify-content:center;
	padding:28px;
	box-sizing:border-box;
	z-index:99999;
}
.pg-lightbox.active{display:flex}
.pg-lightbox img{
	max-width:100%;
	max-height:100%;
	object-fit:contain;
	border-radius:var(--r-sm);
	box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.pg-lightbox-close{
	position:absolute;
	right:18px;
	top:14px;
	width:40px;
	height:40px;
	border:none;
	border-radius:50%;
	background:rgba(255,255,255,.14);
	color:#fff;
	font-size:26px;
	line-height:1;
	cursor:pointer;
	transition:background-color .2s var(--ease);
}
.pg-lightbox-close:hover{background:rgba(255,255,255,.26)}
@media(max-width:768px){
	.pg-lens{display:none}
	.pg-zoom-hint{width:32px;height:32px;right:8px;bottom:8px}
	.pg-zoom-hint:before{left:8px;top:7px;width:12px;height:12px}
	.pg-zoom-hint:after{left:18px;top:17px;width:8px}
}

/* ===== 产品卡片图片统一（不同尺寸图不再变形/留空） ===== */
.prolist-1 li .pro-img{background:#f4f5f7}
.prolist-1 li .pro-img img{width:100%;height:100%;object-fit:cover}
.hot-pro .pro-img,.hot-pro .pro-img img,.side-pro ul li .pro-img,.side-pro ul li .pro-img img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   八、移动端导航：二级菜单可展开 + 语言按钮不与菜单重叠
   修复前的问题：
   1) 二级菜单展开箭头由 UA 嗅探注入，而 CSS 按视口宽度收起子菜单，
      桌面 UA + 窄视口时箭头不生成 → 二级菜单永远打不开；
   2) .lang 在 ≤1024px 被写死为 position:fixed;right:60px，
      与 6vw 宽的汉堡按钮在 640/768px 下重叠 4~17px。
   ========================================================================== */

/* --- 二级菜单箭头（视口驱动注入，桌面端不出现） --- */
.mnav-arrow{display:none}

@media screen and (max-width:768px){
	/* 抽屉内的一级菜单项：给箭头留出位置 */
	.head-nav>ul>li{
		padding-right:11vw;
		box-sizing:border-box;
		position:relative;
	}
	/* 展开箭头：锚定在"一级链接行"的垂直位置（不是整个 li 的 50%，
	   否则展开子菜单后箭头会掉进子菜单区域）。
	   一级链接在窄屏是 font-size 16px 的固定行高（约 26px），行顶即 li 的 padding-top(3vw)，
	   故 top = 3vw + (26px - 箭头高3.4vw)/2 = 1.3vw + 13px，可精确与文字行居中对齐 */
	.head-nav>ul>li .mnav-arrow{
		display:block;
		position:absolute;
		right:4.5vw;
		top:calc(1.3vw + 13px);
		width:3.4vw;
		height:3.4vw;
		line-height:3.4vw;
		text-align:center;
		font-size:3.2vw;
		color:var(--color);
		transform:rotate(0deg);
		transition:transform .25s var(--ease),color .25s var(--ease);
		cursor:pointer;
		z-index:2;
	}
	.head-nav>ul>li .mnav-arrow.mnav-active{
		transform:rotate(90deg);
	}
	.head-nav>ul>li .mnav-arrow:active{
		color:#FFFFFF;
	}

	/* 二级菜单：默认隐藏，展开后以浮起卡片呈现 */
	.head-nav>ul .submenu{
		display:none;
		position:relative;
		top:0;
		right:auto;
		width:100%;
		height:auto;
		opacity:1;
		transform:none;
		background:transparent;
		/* 桌面端下拉用的 2px 白色描边在窄屏会变成一条突兀的白线，必须重置 */
		border-top:none;
		margin-top:.8vw;
		padding:.6vw 0 .6vw 0;
		border-radius:var(--r-sm);
		box-shadow:none;
		list-style-type:none;
	}
	.head-nav>ul .submenu.mnav-open{
		display:block;
	}
	/* 展开时一级项高亮，层级更清晰（底色铺满整行） */
	.head-nav>ul>li.mnav-expanded{
		background-color:#2B2D33;
	}
	.head-nav>ul>li.mnav-expanded>a{
		color:var(--color);
	}
	/* 移动端悬停/点击态：桌面端那条黑色矩形在窄屏显得生硬且被箭头截断，
	   改为"左侧色条 + 淡底"的轻量反馈，通栏铺满不截断 */
	.head-nav>ul>li:hover>a,
	.head-nav>ul>li:hover>i{
		background-color:transparent;
		box-shadow:none;
		color:#FFFFFF;
	}
	/* 箭头保持品牌色，悬停时不变白（与其它菜单项箭头一致） */
	.head-nav>ul>li:hover>i{
		color:var(--color);
	}
	.head-nav>ul>li:hover{
		background-color:rgba(255,255,255,.05);
	}
	.head-nav>ul>li.mnav-expanded:hover{
		background-color:#2B2D33;
	}
	.head-nav>ul>li.mnav-expanded>a{
		color:var(--color);
	}
	/* 二级菜单项：缩进 + 左侧竖线引导 */
	.head-nav>ul .submenu{
		box-sizing:border-box;
		padding-right:11vw;
	}
	.head-nav>ul .submenu li{
		position:relative;
		list-style-type:none;
		margin:0;
		padding:0;
		border-bottom:1px solid rgba(255,255,255,.08);
	}
	.head-nav>ul .submenu li:last-child{
		border-bottom:none;
	}
	.head-nav>ul .submenu li a{
		display:block;
		width:100%;
		font-size:var(--fontsize15);
		line-height:1.6;
		color:rgba(255,255,255,.82);
		padding:2.4vw 2vw 2.4vw 3.4vw;
		box-sizing:border-box;
		transition:background-color .2s var(--ease),color .2s var(--ease),padding-left .2s var(--ease);
	}
	/* 左侧竖线 */
	.head-nav>ul .submenu li a:before{
		content:"";
		position:absolute;
		left:1.6vw;
		top:50%;
		margin-top:-1.1vw;
		width:2px;
		height:2.2vw;
		border-radius:1px;
		background:rgba(255,255,255,.28);
		transition:background-color .2s var(--ease);
	}
	.head-nav>ul .submenu li a:hover,
	.head-nav>ul .submenu li a:active{
		background:rgba(255,255,255,.06);
		color:#FFFFFF;
		padding-left:4vw;
	}
	.head-nav>ul .submenu li a:hover:before,
	.head-nav>ul .submenu li a:active:before{
		background:var(--color);
	}
}

/* --- 语言按钮与汉堡菜单的重叠修复 --- */
/* 原规则在 ≤1024px 把 .lang 固定定位到 right:60px（写死），
   与汉堡按钮（6vw 宽、随视口缩放）在 640~768px 区间重叠。 */
@media screen and (max-width:1024px){
	.lang{
		position:static;
		top:auto;
		right:auto;
		margin-left:auto;
	}
	/* 反制 style.css @media(max-width:800px) 对 .language-dropdown 的
	   right:-50px !important / width:370px / top:45px !important
	   —— 那会让下拉面板整体右移 50px，在 769~800px 平板上超出视口右边缘。
	   这里把面板锚回语言按钮自身：absolute + right:0，面板宽度不超过视口。 */
	.language-dropdown{
		position:absolute !important;
		left:auto !important;
		right:0 !important;
		top:calc(100% + 5px) !important;
		width:370px !important;
		max-width:calc(100vw - 20px) !important;
		box-sizing:border-box;
	}
}

/* --- 平板区间 769~1080px：让语言按钮重新可见可点 ---
   模板在 @media(min-width:769px)and(max-width:1080px) 里给 body 设了
   min-width:1060px（平板保留桌面布局），而 .head 是 position:fixed，
   不随页面横向滚动 → 若 .lang 回到文档流，语言按钮会停在 x=906~1030，
   在 769~1080 的视口里完全够不到（改回 fixed 虽能看见却会压住导航）。
   这里让头部宽度跟随视口、导航横向压缩、隐藏"Language"文字（保留地球+▼），
   三者并排塞进视口内。 */
@media screen and (min-width:769px) and (max-width:1080px){
	.head{
		/* 反制 style.css 里 .head,body{min-width:1060px} —— 它会把头部宽度
		   钳死在 1060px，导致 width:100vw 被顶掉、内容整体溢出视口 */
		width:100vw;
		min-width:0;
		right:auto;
	}
	.head-wrapper{
		width:100%;
		padding:0 12px;
		box-sizing:border-box;
	}
	.head-nav>ul>li>a{
		padding:0 8px;
		font-size:15px;
	}
	.language-btn .current-lang{
		display:none;
	}
	.language-btn .arrow-icon{
		display:inline-block;
		margin-left:4px;
		font-size:10px;
		line-height:1;
		vertical-align:middle;
	}
}

@media screen and (max-width:768px){
	/* 语言按钮：留在头部流内，排在汉堡按钮左侧，不再叠在菜单上 */
	.head-wrapper{
		justify-content:space-between;
	}
	.head-logo{
		order:1;
		margin-right:auto;
	}
	.lang{
		order:2;
		position:static;
		margin-left:0;
		margin-right:3vw;
		flex:none;
	}
	.nav-btn{
		order:3;
		margin:auto 0px;
		flex:none;
	}
	/* 窄屏隐藏"Language"文字，但**保留 ▼ 箭头**：
	   只剩一个地球图标时用户看不出它能展开下拉，箭头是"可点击切换"的直观提示
	   （fanyi.js 已在展开时把箭头旋转 180°） */
	.language-btn .current-lang{
		display:none;
	}
	.language-btn .arrow-icon{
		display:inline-block;
		margin-left:4px;
		font-size:10px;
		line-height:1;
		color:#333;
		vertical-align:middle;
	}
	.language-btn .globe-icon img{
		width:26px;
		height:26px;
	}
	.language-switcher{
		float:none;
		padding:0;
	}
	/* 下拉面板：窄屏改为接近全宽的浮层，避免超出屏幕
	   注意：style.css 的 @media(max-width:800px) 里对 .language-dropdown 写了
	   right:-50px !important / width:370px / top:45px !important，
	   会把面板推到视口右侧外 50px（390px 屏上右边缘到 440px，横向溢出），
	   这里必须用 !important 反制才能真正拉回屏内。 */
	.language-dropdown{
		position:fixed !important;
		left:10px !important;
		right:10px !important;
		top:13.3333333333vw !important;
		width:auto !important;
		max-width:none !important;
		box-sizing:border-box;
	}
	.language-list{
		grid-template-columns:repeat(3,1fr);
	}
}
@media screen and (max-width:400px){
	.language-list{
		grid-template-columns:repeat(2,1fr);
	}
}