/*
Theme Name: 光谷官网 2026
Theme URI: https://www.szguanggu.com/
Author: 苏州光谷光电科技有限公司
Author URI: https://www.szguanggu.com/
Description: 苏州光谷光电官网主题。白蓝主调，深蓝 #0A2060 + 橙红 #E15616。保持老站固定链接 /%category%/%post_id%.html 与全部栏目结构不变，只替换展示层。
Version: 1.2.3
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
Text Domain: gg2026
Tags: business, industrial
*/

/*
 * 本文件只承载主题头信息与少量全局修正。
 * 主样式表在 assets/gg.css，由 functions.php 通过 wp_enqueue_style 加载。
 * 不要把 3000 行样式塞进这里——那会让 WordPress 后台的主题编辑器卡死。
 */

/* 极少数必须内联的兜底规则：防止主题切换瞬间布局塌陷 */
body { margin: 0; }
img { max-width: 100%; height: auto; }

/* WordPress 自动给图片加的 alignleft/alignright/aligncenter 需要补齐 */
.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 1em auto; }
.wp-caption  { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--text3, #8C99AC); text-align: center; padding: 6px 0 0; }

/* 后台编辑器里看到的屏幕阅读器文本 */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

/* ==========================================================
   WordPress 动态页面补充样式
   以下类名是静态稿里没有、但接上数据库后新出现的
   ========================================================== */

/* 子分类导航条（分类页顶部） */
.catbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 34px;
}
.catbar a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 14px;
	color: var(--text2);
	background: #fff;
	transition: .2s var(--ease);
}
.catbar a:hover {
	border-color: var(--blue-200);
	color: var(--blue-700);
}
.catbar a.on,
.catbar a.on:hover {
	background: var(--blue-800);
	border-color: var(--blue-800);
	color: #fff;
}
.catbar a i {
	font-style: normal;
	font-size: 12px;
	opacity: .55;
}

/* 产品卡整卡可点：<a class="pimg"> 需要变成块级 */
a.pimg {
	display: block;
	text-decoration: none;
	color: inherit;
}
.pcard .pname a {
	color: inherit;
	text-decoration: none;
}

/* 详情页相关阅读 */
.relpost {
	margin-top: 54px;
	padding-top: 36px;
	border-top: 1px solid var(--line);
}
.relgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.relcard {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	text-decoration: none;
	transition: .22s var(--ease);
}
.relcard:hover {
	border-color: var(--blue-200);
	box-shadow: var(--shadow-s);
	transform: translateY(-2px);
}
.relcard b {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.relcard s {
	font-size: 12px;
	color: var(--text3);
	text-decoration: none;
}

/* 详情页表单宽度（联系页表单放在 .main 里，比侧栏宽） */
.main .form {
	max-width: 720px;
}

/* 空分类提示 */
.empty a.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* 正文内的表格（老文章可能含 table，不能让它撑破版面） */
.prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 14px;
}
.prose table th,
.prose table td {
	border: 1px solid var(--line);
	padding: 10px 12px;
	text-align: left;
}
.prose table th {
	background: var(--bg-soft);
	font-weight: 600;
	color: var(--blue-800);
}
.prose iframe,
.prose video {
	max-width: 100%;
}

/* 正文里 [embed] 输出的视频容器（老站 23 处） */
.prose .wp-block-embed,
.prose .wp-video {
	max-width: 100%;
	margin: 22px 0;
}

/* 分页条（gg_pager 输出） */
.pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 52px;
	flex-wrap: wrap;
}
.pager .pgn {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.pager .pgn a,
.pager .pgn span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	font-size: 14px;
	color: var(--text2);
	background: #fff;
	text-decoration: none;
	transition: .2s var(--ease);
}
.pager .pgn a:hover {
	border-color: var(--blue-200);
	color: var(--blue-700);
}
.pager .pgn .current {
	background: var(--blue-800);
	border-color: var(--blue-800);
	color: #fff;
}
.pager .pginfo {
	font-size: 13px;
	color: var(--text3);
}

@media (max-width: 860px) {
	.relgrid { grid-template-columns: 1fr; }
	.pager { margin-top: 38px; }
}


/* ============================================================
 * 首页：首屏无视频时的静态封面
 * ============================================================ */
.hmedia img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 案例卡片的编号（data-num 由 PHP 按顺序生成） */
.ccard::before {
	content: attr(data-num);
	position: absolute;
	top: 22px;
	right: 24px;
	z-index: 3;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .5);
}

/* ============================================================
 * 产品详情页：技术参数区
 * 注意：不能复用首页的 .pspec（那是产品卡里的三格 flex 行），
 *       否则表格会被挤成 flex item，值列被裁切并出现横向滚动条。
 * ============================================================ */
.pxspec {
	display: block;
	width: 100%;
	margin-top: 44px;
}

.pxspec .stabw {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* 值列允许换行，避免长参数（如「110×110mm（可选 175×175 / 200×200）」）被截断 */
.pxspec .stab {
	width: 100%;
	min-width: 0;
	table-layout: fixed;
}

.pxspec .stab tbody th {
	width: 26%;
	min-width: 110px;
	word-break: break-word;
}

.pxspec .stab tbody td {
	word-break: break-word;
	line-height: 1.65;
}

@media (max-width: 640px) {
	.pxspec .stab {
		min-width: 0;
		font-size: 13px;
	}
	.pxspec .stab tbody th {
		width: 34%;
	}
	.pxspec .stab th,
	.pxspec .stab td {
		padding: 10px 10px;
	}
}

/* 表格标题（caption）在 gg.css 里被设了 min-width，会把表格撑到 540px+，
   导致移动端出现横向滚动。这里解除。 */
.pxspec .stab caption {
	min-width: 0;
	width: auto;
	white-space: normal;
}

/* ==========================================================
   产品卡片三格 —— 防止长文字压到邻格
   gg.css 里 .pspec b 只设了 nowrap，没设 overflow，
   「桌面式光纤激光打标机」这种长值会直接盖住右边一格。
   ========================================================== */
.pspec b {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.pspec s {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* ==========================================================
   实拍产品图（JPG 白底）融入浅色版式
   ----------------------------------------------------------
   实拍图是白底、非透明，直接放进浅灰卡片会出现一个白方块。
   multiply 混合让白色部分与背景相乘变透明，只留机器本体。
   同时取消原来的投影——投影在 multiply 下会变成黑块。
   ========================================================== */
.shot img,
.gal-photo {
	mix-blend-mode: multiply;
	filter: none;
}
/* 图片铺满卡片宽度，四周不留白边，
   这样 multiply 让白底直接和版式的网格底纹融合，看不出图片边界。 */
.pimg .shot img {
	max-width: 100%;
	max-height: 100%;
}
.gal-photo {
	max-width: 100%;
	max-height: 100%;
}
/* 主图容器改成纯白底：实拍图本身是白底，放白底上才彻底无缝，
   否则 #F7F9FC 的浅灰会在图片四周显出一个方框。 */
.gal-main {
	background: #fff;
}
.gal-thumbs button img {
	mix-blend-mode: multiply;
}

/* ==========================================================
   内页版式 · 按静态稿 v16 还原
   ----------------------------------------------------------
   下面这些是「模板里放了图片」的补丁：v16 静态稿当时用 SVG 线稿占位，
   现在换成实拍图，需要给图片补上尺寸和融合方式。
   ========================================================== */

/* 案例卡配图恢复 16:10——之前为了压缩页面高度改成 16:6，
   卡片被压成一条，是「平平无奇」的主要原因之一。 */
.casec .cim {
	aspect-ratio: 16 / 10;
}
/* 卡片整块是 <a>，去掉链接默认下划线与蓝色 */
.casec {
	text-decoration: none;
	color: inherit;
}
.casec .cim img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.casec:hover .cim img {
	transform: scale(1.04);
}

/* 行业页 / 走进光谷：左右分栏里的实拍图 */
.split-f img {
	position: relative;
	z-index: 1;
	width: 88%;
	max-height: 88%;
	object-fit: contain;
	box-shadow: 0 18px 40px rgba(6, 22, 65, .12);
}
.split-f.has-photo {
	background: #fff;
}
.split-f.has-photo::before {
	opacity: .35;
}
.split-tx li a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: .2s;
}
.split-tx li a:hover {
	color: var(--orange);
	border-bottom-color: var(--orange);
}

/* 走进光谷 · 厂房图墙：图上压说明条 */
.fg div img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.fg div:hover img {
	transform: scale(1.05);
}
.fg div span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 26px 14px 11px;
	color: #fff;
	font-size: 12.5px;
	text-align: left;
	background: linear-gradient(180deg, transparent, rgba(6, 22, 65, .78));
}

/* 联系页 · 三张联系卡里的电话/邮箱是链接 */
.ctc b a {
	color: inherit;
	text-decoration: none;
}
.ctc b a:hover {
	color: var(--orange);
}

/* 联系页 · 地图：嵌入的 iframe 铺满整块，去掉原来的居中占位样式 */
.mapbox iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	z-index: 2;
}
.mapbox:has(iframe)::before {
	display: none;
}

/* 图墙（行业应用 / 走进光谷 子分类）：用 <a> 整块可点，
   造型与 .fg div 一致，只是多了 hover 缩放。 */
.fg > a {
	aspect-ratio: 4 / 3;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	transition: .3s var(--ease);
}
.fg > a:hover {
	border-color: var(--blue-400);
	box-shadow: var(--shadow-m);
}
.fg > a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.fg > a:hover img {
	transform: scale(1.06);
}
.fg > a span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 30px 14px 11px;
	color: #fff;
	font-size: 12.5px;
	line-height: 1.5;
	background: linear-gradient(180deg, transparent, rgba(6, 22, 65, .8));
}

/* ==========================================================
   导航条：8 个栏目名 + 服务电话 + 免费打样按钮
   ----------------------------------------------------------
   在 1440 屏下这一行本来刚好卡住，浏览器字体渲染稍宽一点
   就会把「联系我们」顶到电话号码下面（两者重叠）。
   处理：导航条单独放宽到 1440，菜单吃剩余空间并居中，
   同时把每项的左右内边距从 14px 收到 11px。
   ========================================================== */
.nav .wrap {
	max-width: 1440px;
	gap: 16px;
	min-width: 0;
}
.menu {
	flex: 1 1 auto;
	justify-content: center;
}
.menu > li > a {
	padding: 12px 11px;
}
.navr {
	gap: 16px;
}
.nav-ph b {
	font-size: 18px;
}

@media (min-width: 1600px) {
	.nav .wrap {
		max-width: 1520px;
	}
}

/* ==========================================================
   解决方案栏目（/ypzs）
   ----------------------------------------------------------
   导航「打样样品」改成「解决方案」，下面挂四个子栏目：
   非标解决方案 / 产品视频 / 技术视频 / 打样样品。
   父页是四张入口卡，子页各有各的版式。
   ========================================================== */

/* 同级切换条：模板里输出的是链接，这里补齐与 .pfil button 一致的观感 */
.pfil a {
	padding: 9px 18px;
	border: 1px solid var(--line);
	font-size: 13.5px;
	color: var(--text2);
	background: #fff;
	transition: .22s var(--ease);
	border-radius: 2px;
	text-decoration: none;
}
.pfil a:hover {
	border-color: var(--blue-400);
	color: var(--blue-700);
}
.pfil a.on {
	background: var(--blue-800);
	border-color: var(--blue-800);
	color: #fff;
	font-weight: 600;
}

/* 产品卡里的补充说明（非标项目没有参数，用一句话顶上三格的位置） */
.pcard .pnote {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.65;
	color: var(--text3);
	min-height: 2.6em;
}

/* ---------- 解决方案总览：四张入口卡 ---------- */
.solgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
.solc {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 30px 26px;
	background: #fff;
	border: 1px solid var(--line);
	text-decoration: none;
	color: inherit;
	transition: .3s var(--ease);
	overflow: hidden;
}
.solc:hover {
	border-color: var(--blue-400);
	box-shadow: var(--shadow-m);
	transform: translateY(-2px);
}
.solc > i {
	position: absolute;
	right: 20px;
	top: 14px;
	font: 700 42px/1 ui-monospace, monospace;
	font-style: normal;
	color: var(--blue-800);
	opacity: .07;
}
.sol-k {
	display: block;
	font: 600 10.5px/1.6 ui-monospace, monospace;
	letter-spacing: .14em;
	color: var(--orange);
}
.solc > b {
	display: block;
	font-size: 21px;
	font-weight: 800;
	color: var(--blue-800);
	margin-top: 8px;
}
.solc > p {
	margin-top: 10px;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--text2);
	max-width: 92%;
}
.sol-n {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 16px;
}
.sol-n em {
	font: 800 30px/1 sans-serif;
	font-style: normal;
	color: var(--blue-700);
}
.sol-n s {
	font-size: 12px;
	color: var(--text3);
	text-decoration: none;
}
.solc > u {
	margin-top: auto;
	padding-top: 16px;
	align-self: flex-start;
	font-size: 13px;
	color: var(--orange);
	text-decoration: none;
	border-bottom: 1px solid rgba(225, 85, 22, .3);
}
.solc:hover > u {
	border-bottom-color: var(--orange);
}

/* ---------- 视频列表 ---------- */
.vgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.vc {
	display: block;
	background: #fff;
	border: 1px solid var(--line);
	text-decoration: none;
	color: inherit;
	transition: .3s var(--ease);
}
.vc:hover {
	border-color: var(--blue-400);
	box-shadow: var(--shadow-m);
}
.vcim {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--bg-soft);
	overflow: hidden;
}
.vcim img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s;
}
.vc:hover .vcim img {
	transform: scale(1.04);
}
/* 没上传封面时的兜底：深蓝渐变，中间只留播放按钮，比放机器线稿更像视频 */
.vcdummy {
	height: 100%;
	background: linear-gradient(135deg, #0a2060 0%, #12377f 55%, #0a2060 100%);
}
.vplay {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
	background: rgba(6, 22, 65, .72);
	transition: .3s;
}
.vplay::after {
	content: "";
	position: absolute;
	left: 17px;
	top: 13px;
	border-left: 13px solid #fff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}
.vc:hover .vplay {
	background: var(--orange);
}
.vctx {
	padding: 16px 18px 18px;
}
.vctx h3 {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--blue-800);
	line-height: 1.5;
}
.vctx p {
	margin-top: 7px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--text3);
}

@media (max-width: 980px) {
	.solgrid {
		grid-template-columns: 1fr;
	}
	.vgrid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}
@media (max-width: 720px) {
	.vgrid {
		grid-template-columns: 1fr;
	}
	.solc {
		padding: 24px 22px 22px;
	}
	.solc > b {
		font-size: 19px;
	}
	.solc > p {
		max-width: 100%;
	}
}

/* ==========================================================
   首屏 · 有真实视频时加强左侧遮罩
   ----------------------------------------------------------
   宣传片多数镜头是白墙厂房、白色背景产品图，静态稿那套
   遮罩是配深色封面图调的，白色标题压不住。这里只对
   「第 1 屏且已上传视频」的 .has-vid 生效，其他 4 屏不受影响。
   ========================================================== */
.slide.has-vid .hmask {
	background:
		linear-gradient(90deg,
			rgba(3,10,32,.95) 0%,
			rgba(3,10,32,.88) 30%,
			rgba(3,10,32,.62) 55%,
			rgba(3,10,32,.34) 78%,
			rgba(3,10,32,.26) 100%),
		linear-gradient(0deg, rgba(3,10,32,.82) 0%, rgba(3,10,32,0) 46%),
		linear-gradient(180deg, rgba(3,10,32,.42) 0%, rgba(3,10,32,0) 26%);
}
/* 视频屏标题行距与投影：白底镜头下多一层柔光，字不会发飘 */
.slide.has-vid .hero-dark .hero-txt h1 {
	text-shadow: 0 2px 26px rgba(3,10,32,.5);
}
.slide.has-vid .hero-dark .hero-txt p {
	color: rgba(255,255,255,.84);
}
@media (max-width: 900px) {
	/* 手机竖屏是满屏裁切，左侧遮罩改成整体压暗 */
	.slide.has-vid .hmask {
		background:
			linear-gradient(180deg, rgba(3,10,32,.72) 0%, rgba(3,10,32,.46) 42%, rgba(3,10,32,.86) 100%),
			linear-gradient(90deg, rgba(3,10,32,.5) 0%, rgba(3,10,32,.2) 100%);
	}
}

/* ==========================================================
   首页 · 行业卡实拍图 + 样品墙实拍图
   ----------------------------------------------------------
   原来行业卡是「深蓝渐变 + 白色线稿」，样品墙是「深蓝底 +
   SVG 线稿」。现在两处都换成实拍图，这里只补图片铺满
   与悬停色调，版式、尺寸、动效一律沿用 gg.css 原定义。
   ========================================================== */

/* 行业卡：图片由行内 background-image 提供，这里兜底色与裁切 */
.indc .ibg{
	background-color:#0A2060;
	background-size:cover;
	background-position:center;
	/* 实拍图多为浅底，压一点点让 7 张卡色调统一，也让底部白字更稳 */
	filter:saturate(1.02) brightness(.95);
}
/* 悬停只轻微提亮，原 1.18 对实拍图会发白失真 */
.indc:hover .ibg{
	transform:scale(1.08);
	filter:saturate(1.04) brightness(1.04);
}

/* 样品墙：实拍图铺满方格，悬停整格放大由 .mitem 自己完成 */
.mitem img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	/* 深蓝底上 20 张浅底实拍，稍压一点避免刺眼，保留材质细节 */
	filter:saturate(1.03) brightness(.96);
	transition:filter .4s var(--ease);
}
.mitem:hover img{
	filter:saturate(1.06) brightness(1.06);
}

/* 窄屏：行业卡比例改为 1/1.15，竖图 cover 会切上下，压暗深一点更连贯 */
@media (max-width:700px){
	.indc .ibg{filter:saturate(1.02) brightness(.88)}
	.indc:hover .ibg{filter:saturate(1.02) brightness(.94)}
}

/* ----------------------------------------------------------
   样品墙 · 明暗校准
   20 张全是浅底实拍（白墙、白布、浅木），直接铺在深蓝底上
   会形成 20 个白块，非常刺眼。这里压亮度 + 叠一层品牌蓝，
   让白底降为灰蓝，和背景连成一体；悬停时再回到原亮度看细节。
   ---------------------------------------------------------- */
.mitem img{
	filter:brightness(.66) saturate(.86) contrast(1.06);
}
.mitem::before{
	content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
	background:linear-gradient(160deg,rgba(10,32,96,.42),rgba(6,22,65,.54));
}
.mitem:hover img{
	filter:brightness(.92) saturate(1) contrast(1.02);
}
/* 悬停时蓝蒙版淡出，看真实材质 */
.mitem:hover::before{opacity:0}
.mitem::before{transition:opacity .4s var(--ease)}
/* 说明文字要盖在蒙版之上 */
.mitem::after{z-index:2}

/* 两行之间留一点呼吸，避免上下两排白块连成一片 */
.mq-row + .mq-row{padding-top:14px}

/* ----------------------------------------------------------
   行业卡 · 顶部也补一点蓝，避免上半张亮、下半张深蓝的割裂
   ---------------------------------------------------------- */
.indc::after{
	background:linear-gradient(180deg,
		rgba(10,32,96,.26) 0%,
		rgba(10,32,96,.10) 32%,
		rgba(6,22,65,.90) 100%);
}
/* 第一张（.on）原来靠「整卡加深」表示当前项，换成实拍图后会明显比其他
   卡暗一块。这里改成与其余六张同样的过渡，只用橙色底线标出当前项。 */
.indc.on::after{
	background:linear-gradient(180deg,
		rgba(10,32,96,.28) 0%,
		rgba(10,32,96,.10) 32%,
		rgba(6,22,65,.90) 100%);
}
.indc.on .iln{transform:scaleX(1)}

/* ============================================================
   案例详情页：导语 + 案例信息卡（v1.2.3）
   老站案例正文多为一句话甚至空白，靠这两个块把页面撑起来。
   ============================================================ */
.ccase{margin-bottom:38px}
.ccase .clead{
	font-size:17px;
	line-height:1.85;
	color:var(--text);
	border-left:3px solid var(--orange-2);
	padding-left:18px;
	margin:0 0 24px;
}
.ccase .cinfo{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
	gap:1px;
	background:var(--line);
	border:1px solid var(--line);
	border-radius:8px;
	overflow:hidden;
}
.ccase .ci{
	background:var(--bg-soft);
	padding:16px 18px;
}
.ccase .ci s{
	display:block;
	text-decoration:none;
	font-size:12px;
	color:var(--text3);
	letter-spacing:.04em;
	margin-bottom:5px;
}
.ccase .ci b{
	display:block;
	font-size:15px;
	line-height:1.4;
	color:var(--blue-800);
	font-weight:600;
}
@media(max-width:560px){
	.ccase .cinfo{grid-template-columns:repeat(2,1fr)}
	.ccase .clead{font-size:16px;padding-left:14px}
	.ccase .ci{padding:13px 14px}
	.ccase .ci b{font-size:14px}
}