/**
* 本站补充样式。
*
* 放在主题样式之后加载，用来修正主题（当年买的模板）里的一些历史问题。
* 原则：只覆盖明确有问题的规则，不动整体视觉风格。
*/
/*
⚠ 这条必须放在**文件最前面**，别挪到下面去。
主题 global.css 有一条老重置 `font, span { font-size: 12px }`，
自建页面的容器加了 .jc-shell 就是想把它按回去（让 span 继承容器字号）。
但 `.jc-shell :where(span, font)` 的权重是 (0,1,0)，和组件自己那条
`.jc-collection-name { font-size: 19px }` **一样高**——同权重就比谁写在后面，
写到后面就会把组件字号全按成继承值（播客那两页的合集名、节目名一起掉到 12px，
2026-10-13 这轮体检抓到的）。放在最前面：同权重时组件规则在后面，组件赢；
没有自己规则的 span 才吃这条继承。
*/
.jc-shell :where(span, font) { font-size: inherit; }
/* 旧主题在手机上隐藏了当前首页轮播；恢复显示并去掉桌面的负上边距。 */
@media (max-width: 750px) {
#head_banner.index .apple-banner { display: block !important; }
#head_banner.index .apple-banner .swiper-container { margin-top: 0; }
#head_banner.index .apple-banner .swiper-slide { min-height: 0; }
#head_banner.index .apple-banner .swiper-slide img { display: block; }
}
/* ============================================================
1. 无横幅页面的页头
主题用 #head_banner .padding { padding: 20.83% 0 0 } 来撑高头部，
那是为首页大横幅准备的；详情页、列表页等没有横幅时，这块会变成
一大片空白，而头部文字是白色的——于是"菜单栏看不见"。
这里把占位层去掉，直接给头部一条实色栏。
============================================================ */
.page-plain #head_banner {
background-color: #1d6f8e;
}
.page-plain #head_banner > .relative {
display: none; /* 去掉撑高的占位层 */
}
.page-plain #head_banner .box {
display: none;
}
.page-plain #head_banner #header.absolute {
position: relative; /* 让头部自己撑出高度，而不是绝对定位在空白层上 */
top: auto;
height: 80px;
}
.page-plain #head_banner #header .w1800 {
height: 80px;
/* 让 logo 与导航在栏内垂直居中（原来是绝对定位，不看高度） */
display: flex;
align-items: center;
justify-content: space-between;
}
.page-plain #head_banner #header .logo,
.page-plain #head_banner #header .nav {
float: none;
}
.page-plain #head_banner #header .nav {
display: flex;
align-items: center;
/*
gap 必须是 0：主题给每个菜单项自己设了 margin-left（桌面 60px，
≤1200px 时 35px），这里再加 gap 就成了「外边距 + 间距」叠加——
栏目页的菜单间距（61px）比首页（35px）宽出一大截，看着松垮。
间距一律交给主题那一条，首页与内页就完全一致了。
*/
gap: 0;
margin-left: auto; /* 导航靠右，与首页保持一致 */
}
.page-plain #head_banner #header .nav .item-a { padding: 0; }
/* 桌面端把手机端的汉堡按钮与清理层收起来，否则它们会占位把导航挤到中间 */
.page-plain #head_banner #header .menu,
.page-plain #head_banner #header .close1,
.page-plain #head_banner #header .clear {
display: none;
}
@media (max-width: 768px) {
.page-plain #head_banner #header .nav { display: none; }
.page-plain #head_banner #header .menu { display: block; }
}
/* 说明：页面上其实有两套页头——顶部静态栏 + 滚动时滑入的固定栏，
这是主题自带的设计（滚动时导航始终可用），保留不动。
整页长截图里出现的"多条页头"是截图工具对固定定位元素的呈现方式，不是页面问题。 */
/* 正文图片：只做安全兜底，不强制宽度——
强制宽度会让后台编辑器里调整的尺寸失效。
公众号原图偏大，靠图片自身的内联 max-width（导入时写成 760px）来限制。 */
#website.info_detail .content img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
/* 栏目页的大标题：播客等自定义页面原本继承了另一套字号，这里统一成与视频页一致 */
/* 视频页的容器带 contact_box 类，主题给它 4.2% 的上边距；
播客页用的是自定义容器，这里补上同样的间距，两个栏目看起来才一致 */
#website.info_box {
margin-top: 4.2%;
margin-bottom: 9.12%;
}
#website.info_box .pub_tit .tit {
font-size: 30px;
color: #22313c;
}
#website.info_box .pub_tit .en {
font-size: 14px;
letter-spacing: 1px;
color: #66727e;
margin-top: 6px;
}
/* 主题把「英文副标题、栏目+日期、年份、内页日期」这一排元信息小字都写成 #999，
白底上只有 2.85:1，达不到 WCAG AA 的 4.5:1（中文小字本来就细，灰下去更看不清）。
只改颜色，不动字号与排版；选择器带 #website 前缀，免得波及主题别处。 */
#website .en,
#website .cate,
#website .y,
#website .inner_date {
color: #66727e;
}
/* 例外：首页「播客合集」那一块（.team_box）底色是近黑色，配浅灰才对；
上面的深灰换到那儿反而只有 3.65:1，比改之前更差。 */
#website .team_box .en,
#website .team_box .cate,
#website .team_box .y,
#website .team_box .inner_date {
color: #9aa7b2;
}
/* 首页文章卡片上的摘要与日期：主题给的是 #7c7c7c（4.17:1）与 #939393（3.07:1），
白底上都不到 AA 的 4.5:1。同样只改颜色。 */
#website.index_box .info_list .desc,
#website.index_box .info_list .day {
color: #66727e;
}
/* ============================================================
2. 详情页视频
正文里的播放器带 width="420" height="280" 属性，会被 video.js 的
默认尺寸覆盖成一个小方块。这里让它按内容区宽度自适应。
============================================================ */
#website.info_detail .content video,
#website.info_detail .content .video-js {
width: 100%;
max-width: 1080px;
height: auto;
aspect-ratio: 16 / 9;
display: block;
margin: 0 auto;
background: #000;
border-radius: 4px;
}
/* ============================================================
3. 详情页留白收一点，避免内容区上下空得太多
============================================================ */
#website.info_detail .content {
padding-top: 10px;
}
/* ============================================================
5. 播放器：先看封面，点一下才播放
============================================================ */
#website.info_detail .jc-player {
position: relative;
max-width: 1080px;
margin: 0 auto;
line-height: 0;
}
#website.info_detail .jc-player .jc-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 76px;
height: 76px;
border: 0;
border-radius: 50%;
cursor: pointer;
background: rgba(29, 111, 142, .88);
box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
transition: transform .2s ease, background .2s ease;
}
#website.info_detail .jc-player .jc-play::after {
content: "";
position: absolute;
left: 54%;
top: 50%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 13px 0 13px 21px;
border-color: transparent transparent transparent #fff;
}
#website.info_detail .jc-player .jc-play:hover {
transform: translate(-50%, -50%) scale(1.06);
background: rgba(29, 111, 142, 1);
}
#website.info_detail .jc-player.is-playing .jc-play {
display: none;
}
/* ============================================================
6. 细节收尾：页面轻微淡入、作品卡片悬停反馈
============================================================ */
/*
只留我们真正用到的那一个动画（2026-10-12 性能这一轮）。
主题的 animated.min.css 有 61KB / 76 个动画，而全站只用了 `wow fadeInUp`
这一个类（13 处，都在模板里；内容 HTML 里一处都没有）。整包照下纯属浪费，
这里把 animate.css 里那两个定义原样抄过来（含 -webkit- 前缀，老 Safari 也在）。
注意：**换了动画名要同步往这里加**——WOW.js 会先把 .wow 元素藏起来再靠动画显示，
动画名不存在的话那块内容就永远不出现。
*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes fadeInUp {
0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
100% { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInUp {
0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
100% { opacity: 1; -webkit-transform: none; transform: none; }
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; }
/*
表单回跳的那一次不要入场动画（见 helpers 的 take_no_anim()）：
评论 / 点赞 / 留言提交后是「重定向回原页」，WOW 会把整页又演一遍「从下往上滑」，
站主看到的是「网页刷新了一下，整个页面在眼前向上滑」。
!important 是为了压过 WOW 写在元素上的内联样式（visibility / animation-name）。
*/
.jc-no-anim .wow { visibility: visible !important; animation: none !important; }
/*
吸顶导航条只在「真的有内容」的地方接收点击。
起因（站主报的 bug）：滚动页面时主题会把 #header.fixed_head 展开成 100px（手机 80px）
的一条固定栏，**整条**都会吃掉点击——哪怕那一段是空白。于是页面滚到某个位置时，
下面露出来的面包屑「首页」正好压在它下面，点下去一点反应都没有（真机宽度实测：
点击命中的是 DIV.w1800.m_auto[顶栏]，不是面包屑的链接）。
这里把整条设成 pointer-events:none，再把真正可点的东西（logo、导航项、汉堡、关闭）
单独恢复成 auto：该点的地方照旧，空白处让点击穿过去落到页面上。
*/
#header.fixed_head { pointer-events: none; }
#header.fixed_head .logo,
#header.fixed_head .nav,
#header.fixed_head .nav a,
#header.fixed_head .menu,
#header.fixed_head .close1 { pointer-events: auto; }
body {
animation: jc-fade-in .32s ease both;
}
@keyframes jc-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.products-list .item .box {
transition: box-shadow .25s ease, transform .25s ease;
}
.products-list .item:hover .box {
box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
transform: translateY(-3px);
}
/* ============================================================
7. 首页留白节奏
主题各区块的间距是按大屏横幅的尺度定的，整体偏松。
这里统一成一致的节奏：区块上下 56px，标题与内容间距 30px。
============================================================ */
.page-home #website > .w1200,
.page-home #website > .team_box {
padding-top: 56px;
padding-bottom: 56px;
}
.page-home #website .pub_tit {
margin-bottom: 30px;
}
.page-home #website .more {
margin-top: 34px;
}
.page-home #website .info_list {
margin-bottom: 26px;
}
/* ============================================================
8. 作品卡片：补上日期，信息密度提一档
============================================================ */
.products-list .item .jc-date {
color: #66727e;
margin-left: 10px;
font-size: 13px;
}
.products-list .item .name {
font-size: 16px;
}
/* ============================================================
9. 详情页图片点击放大
============================================================ */
/* ============================================================
9b. 站内搜索
============================================================ */
.jc-search { display: flex; gap: 10px; max-width: 620px; margin: 0 auto 18px; }
.jc-search input {
flex: 1; padding: 12px 16px; border: 1px solid #dfe7ec; border-radius: 8px;
font-size: 15px; color: #22313c; background: #fff;
}
.jc-search button {
padding: 0 26px; border: 0; border-radius: 8px; background: #1d6f8e;
color: #fff; font-size: 15px; cursor: pointer;
}
.jc-search button:hover { background: #17607b; color: #fff; }
.jc-search-count { text-align: center; color: #66727e; font-size: 14px; margin-bottom: 22px; }
/* 顶部导航里的搜索入口：与其它导航项同样的样式，加一个放大镜图标 */
/* 导航里的搜索：点一下就地展开输入框，左边的菜单项随之左移（不叠层、不跳页）。
折叠时它就是一个「放大镜 + 搜索」，展开时「搜索」二字让位给输入框。 */
.jc-nav-search { display: inline-flex; align-items: center; }
.jc-nav-search-toggle {
display: inline-flex; align-items: center; gap: 5px;
color: inherit; text-decoration: none; white-space: nowrap;
}
.jc-nav-search-toggle svg {
width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor;
stroke-width: 1.8; stroke-linecap: round;
}
/*
悬停色必须和其它菜单项一致。
主题的 global.css 里有一条 a:hover { color: #f26e5c }（珊瑚红）。别的菜单项是
，会被 #header .nav .item-a:hover（带 id，权重更高）盖成灰色；
而搜索项是个没有 item-a 的 ，只有那条红色规则命中——鼠标一放上去，
「搜索」二字和放大镜一起变红（用户看到的「搜索框是红色的」就是这个，截图时鼠标正好停在那）。
这里按类名把悬停色钉回菜单项的灰 #999（和 #header .nav .item-a:hover 同色）。
*/
.jc-nav-search-toggle:hover { color: #999999; }
/* 主题的 global.css 里有一条老式重置「font, span { font-size: 12px }」，
任何 span 都会被压到 12px——「搜索」二字因此比其它菜单项小一号。
这里让它跟随导航项自己的字号（宽屏 14px、窄屏 16px）。 */
.jc-nav-search-label { font-size: inherit; }
.jc-nav-search-input {
width: 0; margin-left: 0; padding: 0; border: 0; opacity: 0;
background: transparent; outline: none;
color: #fff; font-size: 14px; line-height: 22px; height: 22px;
transition: width .28s ease, margin-left .28s ease, opacity .18s ease;
}
.jc-nav-search-input::placeholder { color: rgba(255, 255, 255, .55); }
/*
展开搜索框时脚本会自动聚焦，而文本框永远匹配 :focus-visible——
于是通用那条焦点样式会在这里画一圈蓝框（深色横幅上很扎眼）。
这里改成「下划线变实、底色微微提亮」：焦点照样看得见，但不破坏横幅的整体感。
键盘 Tab 到别的链接/按钮时，那一圈焦点框仍然照旧。
*/
/*
权重得写成「父级 + 自己」两层：输入框带 tabindex="-1"，通用规则里的
[tabindex]:focus-visible 同样是 (0,2,0)，写在后面就会把这条盖掉（实测过）。
*/
.jc-nav-search .jc-nav-search-input:focus,
.jc-nav-search .jc-nav-search-input:focus-visible { outline: none !important; }
/* 只给桌面端那条「下划线输入框」加提示（手机端本来就带底色，不用再叠一层） */
.jc-nav-search:not(.jc-nav-search-mobile) .jc-nav-search-input:focus {
border-bottom-color: #fff;
background: rgba(255, 255, 255, .12);
}
.jc-nav-search.is-open .jc-nav-search-label { display: none; }
.jc-nav-search.is-open .jc-nav-search-input {
width: 210px; margin-left: 9px; opacity: 1;
border-bottom: 1px solid rgba(255, 255, 255, .55);
}
/* 手机端菜单里的同一个入口：菜单是全屏列表，展开的输入框出现在「搜索」这一行下方，
其余菜单项顺势下移；折叠用 max-height，动画不依赖具体高度。 */
.jc-nav-search-mobile { display: block; }
/* 这一行的高度改成 auto：展开时它会随输入框长高，下面的菜单项顺势下移 */
#nav ul li.jc-nav-search-item { height: auto; }
.jc-nav-search-field {
display: flex; gap: 8px; align-items: center;
max-height: 0; overflow: hidden; padding: 0 20px;
transition: max-height .3s ease, padding .3s ease;
}
.jc-nav-search-mobile.is-open .jc-nav-search-field { max-height: 96px; padding: 12px 20px 16px; }
.jc-nav-search-mobile .jc-nav-search-input {
flex: 1; width: auto; height: 38px; line-height: 38px; opacity: 1;
padding: 0 12px; border-radius: 4px;
background: rgba(255, 255, 255, .16);
}
.jc-nav-search-mobile.is-open .jc-nav-search-input { width: auto; margin-left: 0; }
.jc-nav-search-go {
flex: 0 0 auto; height: 38px; padding: 0 16px; border: 0; border-radius: 4px;
background: rgba(255, 255, 255, .24); color: #fff; font-size: 14px; cursor: pointer;
}
.jc-nav-search-go:hover { background: rgba(255, 255, 255, .34); }
/*
空着点「搜索」时的回应：轻轻左右抖一下 + 按钮底色提亮。
为什么要这个（2026-10-14）：手机端那一行本来就一直展开，「空着就悄悄收起来」
在手机上看不出任何变化——站主看到的就是「点了没反应、不能搜」。
动画很短（240ms、两次），不打断操作。
*/
/* 整行一起抖（输入框 + 「搜索」按钮），不然只有输入框在动，按钮看着纹丝不动 */
.jc-search-nudge .jc-nav-search-field { animation: jc-search-nudge .24s ease 2; }
/* 再加一圈青色描边：手机端背景是白的，光靠抖动不够醒目；这条不会被
#nav .jc-nav-search-input 那几条（只写 border/background）覆盖。
用 inset：描边画在输入框里侧，不然同样会被那一行的 overflow:hidden 剪掉，
也会变成一条挂在右侧的蓝竖条。 */
.jc-search-nudge .jc-nav-search-input { box-shadow: inset 0 0 0 2px rgba(29, 111, 142, .5); }
@keyframes jc-search-nudge {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
/* 系统里关了动效就别抖：留下那圈描边，同样能看出「这一下点到了」 */
@media (prefers-reduced-motion: reduce) {
.jc-search-nudge .jc-nav-search-field { animation: none; }
}
/* 面包屑：统一按主题在详情页里的规格（14px / 77px 行高 / 灰色）。
主题只在 .info_detail 下定义过，自建页面会继承到另一套字号，两边看起来不一样。
另外链接颜色原本是白色（为深色横幅设计），在浅色页头下会看不见，这里一并指定。 */
#website .bread {
height: 77px;
/* 字号/行高/颜色要设在容器上：
面包屑里有些内容是裸文本节点（不在任何标签里），
只写 .bread * 的话匹配不到它们，会继承外部字号导致大小不一 */
font-size: 14px;
line-height: 77px;
color: #767676;
}
#website .bread * {
font-size: 14px;
line-height: 77px;
color: #767676;
}
#website .bread a {
color: #767676;
text-decoration: none;
/* 手机上这一串链接只有文字那么点大（实测 28×16），点起来很费劲。
inline 元素加内边距只扩大可点区域、不影响行高，所以桌面排版一模一样。 */
padding: 11px 0;
}
#website .bread a:hover {
color: #1d6f8e;
text-decoration: underline;
}
#website .bread .on {
color: #4c5b66;
}
/* 手机端：面包屑会很长（首页 >> 栏目 >> 合集 >> 内容），
桌面那套 77px 单行放不下，会溢出被截断。这里改成可换行、行距收紧。 */
@media (max-width: 768px) {
#website .bread {
height: auto;
padding: 12px 0 4px;
/* 标题是裸文本，也必须在容器上覆盖桌面的 77px 行高。 */
line-height: 1.9;
overflow-wrap: anywhere;
}
#website .bread * {
line-height: 1.9;
word-break: break-word;
}
/* 手机上「当前位置：」这几个字单独占一行反而乱，路径本身已经说明了含义 */
#website .bread .dis {
display: none;
}
}
.jc-lightbox {
position: fixed; inset: 0; z-index: 9999;
background: rgba(12, 20, 26, .92);
display: flex; align-items: center; justify-content: center;
padding: 40px; cursor: zoom-out;
}
.jc-lightbox img {
max-width: 100%; max-height: 100%; border-radius: 4px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
/* ============================================================
10. 播客（声音纪录片）：节目列表与播放器
============================================================ */
.jc-episodes { display: flex; flex-direction: column; gap: 14px; }
.jc-episode {
display: flex; align-items: center; gap: 18px;
padding: 16px 20px; background: #fff; border: 1px solid #e8eef2;
border-radius: 10px; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.jc-episode:hover {
box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
transform: translateY(-2px); border-color: #cfe0e9;
}
.jc-episode-cover {
flex: 0 0 auto; width: 92px; height: 92px; border-radius: 8px; overflow: hidden;
background: linear-gradient(135deg, #1d6f8e, #2f8fb5); display: flex;
align-items: center; justify-content: center;
}
.jc-episode-cover img { width: 100%; height: 100%; object-fit: cover; }
.jc-episode-wave {
width: 40px; height: 24px;
background: repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 3px, transparent 3px 8px);
border-radius: 2px;
}
.jc-episode-body { flex: 1 1 auto; min-width: 0; }
.jc-episode-title { display: block; font-size: 17px; font-weight: 600; color: #22313c; }
.jc-episode-meta { display: block; margin: 5px 0 7px; font-size: 13px; color: #66727e; }
.jc-episode-desc { display: block; font-size: 14px; color: #5b6a75; line-height: 1.7; }
.jc-episode-play {
flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
background: #1d6f8e; display: flex; align-items: center; justify-content: center;
}
.jc-episode-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 2px; }
.jc-episode:hover .jc-episode-play { background: #17607b; }
.jc-episode-play.is-text { background: #b3c2cd; }
.jc-episode:hover .jc-episode-play.is-text { background: #9fb1be; }
.jc-episode-play.is-text svg { width: 20px; height: 20px; margin-left: 0; }
/* 播放器：详情页里的音频 */
/* 音频播放器：居中、留出上下呼吸空间 */
#website.info_detail .content audio {
width: 100%; max-width: 760px; display: block; margin: 4px auto 30px;
border-radius: 26px;
}
/* 正文里的链接：主题没给明确颜色，导致「原文：」后面的链接像消失了 */
#website.info_detail .content a {
color: #1d6f8e;
text-decoration: none;
border-bottom: 1px solid rgba(29, 111, 142, .35);
}
#website.info_detail .content a:hover {
color: #17607b;
border-bottom-color: #17607b;
}
/* 音频下载条 */
/* 手机上的坑：minmax(430px, 1fr) 里的 430px 是「最小不能小于」，360px 宽的容器里
这一列照样占 430px，整页横向多出 63px 可以左右拖（2026-10-12 真机宽度量出来的）。
min(430px, 100%) 让轨道在窄屏下退到容器宽度；万一浏览器不认 min()，
整条声明作废、退回单列网格，也不会坏。 */
.jc-collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr)); gap: 18px; }
.jc-collection {
display: flex; align-items: center; gap: 20px; padding: 20px 22px;
background: #fff; border: 1px solid #e8eef2; border-radius: 12px;
transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.jc-collection:hover { box-shadow: 0 12px 30px rgba(0,0,0,.09); transform: translateY(-2px); border-color: #cfe0e9; }
.jc-collection-cover {
/* 横向封面：系列主视觉通常是横图，方形会裁掉标题字 */
flex: 0 0 auto; width: 152px; height: 96px; border-radius: 8px; overflow: hidden;
background: linear-gradient(135deg, #1d6f8e, #34a0c4); display: flex; align-items: center; justify-content: center;
}
.jc-collection-cover img { width: 100%; height: 100%; object-fit: cover; }
.jc-collection-ph { color: #fff; font-size: 40px; font-weight: 700; }
.jc-collection-body { flex: 1 1 auto; min-width: 0; }
.jc-collection-name { display: block; font-size: 19px; font-weight: 600; color: #22313c; }
.jc-collection-meta { display: block; margin: 6px 0 8px; font-size: 13px; color: #66727e; }
.jc-collection-desc { display: block; font-size: 14px; color: #5b6a75; line-height: 1.7; }
.jc-collection-go { flex: 0 0 auto; color: #b8c6d0; }
.jc-collection-go svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jc-collection:hover .jc-collection-go { color: #1d6f8e; }
/* 合集介绍条 */
.jc-series {
display: flex; gap: 24px; align-items: center; margin: 0 0 26px;
padding: 22px 24px; background: #f7fafb; border: 1px solid #e6eef2; border-radius: 12px;
}
.jc-series-cover { flex: 0 0 auto; width: 208px; height: 118px; border-radius: 8px; overflow: hidden; }
.jc-series-cover img { width: 100%; height: 100%; object-fit: cover; }
.jc-series-body { flex: 1 1 auto; min-width: 0; }
.jc-series-name { display: block; font-size: 20px; font-weight: 600; color: #22313c; }
.jc-series-count { display: block; margin: 6px 0 10px; font-size: 13px; color: #66727e; }
.jc-series-desc { display: block; font-size: 14px; color: #5b6a75; line-height: 1.8; }
/* 合集页的订阅入口 */
.jc-series-feed { display: block; margin-top: 8px; font-size: 14px; }
.jc-series-feed a { color: #1d6f8e; }
.jc-series-feed-hint { margin-left: 8px; color: #66727e; font-size: 13px; }
/* ============================================================
作品网格：规整的行列（原来是瀑布流）
起因：卡片封面比例从 0.49（竖屏）到 1.80（16:9）都有，瀑布流按高度往下排，
于是同一行里高低错落、行与行之间留出大片空洞，看着很乱（用户截图反馈
「应该左对齐，中间不留空」）。
做法两步：
1) 中和瀑布流的绝对定位——主题自己手机端就是这么干的（position: static +
visibility: visible），这里把它用到桌面端；不用改主题的 JS。
2) 画面框统一 16:9：横版封面正好铺满；竖版封面用 contain 居中，两侧留深色底
（和播放器显示竖屏视频一个道理），这样每张卡一样高，网格才能横平竖直。
============================================================ */
@media (min-width: 769px) {
/*
容器高度交还给内容：瀑布流脚本仍会算一遍并把高度写成行内样式（实测留下 1108px，
而卡片只排到 704px），结果最后一排和翻页条之间空出一大块——用户截图圈的就是它。
高度 auto + overflow: hidden（主题已有）就能正确包住浮动卡片。
布局本身改成 CSS grid：这样竖版卡片才能「占两行」而不会像浮动那样在行里留出空洞
（浮动遇到高矮不一的卡片必然错位，这正是瀑布流时代的老问题）。
*/
.products-list {
margin-left: 0;
height: auto !important;
min-height: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: min-content;
gap: 17px;
overflow: visible;
}
.products-list .item {
position: static !important;
left: auto !important;
top: auto !important;
float: none !important;
width: auto !important;
margin: 0 !important;
display: flex;
flex-direction: column;
/* 不依赖 JS 的滚动淡入也能看见（wow 会在元素进入视口时用行内样式接管） */
visibility: visible;
}
/* 卡片内部也串成纵向 flex，竖版卡片多出来的高度才能落到画面框上 */
.products-list .item .box { display: flex; flex-direction: column; height: 100%; }
.products-list .item .img { flex: 1 1 auto; min-height: 0; }
.products-list .item .img > a { display: block; height: 100%; }
.products-list .item .img .relative {
position: relative;
height: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #0f1c25; /* 只在图片还没加载出来时露一下 */
}
/*
横版封面铺满画面框（cover），不留任何白边/黑边。
走过的弯路：contain 会因比例差 1%～3% 留细边；虚化底用户仍觉得是「边」；
一刀切成 16:9 又把竖屏封面裁成中间一条、根本没法看。
最终：横版铺满（几乎不裁），竖版单独处理——卡片占两行、画面框跟着变成竖的
（见下面 .jc-portrait），既不留边也不裁内容，网格照样严丝合缝。
*/
.products-list .item .img .relative img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* 竖版：卡片占两行，画面框撑满多出来的高度（比例自然变成竖的，不用裁） */
.products-list .item.jc-portrait { grid-row: span 2; }
.products-list .item.jc-portrait .img .relative { aspect-ratio: auto; min-height: 220px; }
}
@media (min-width: 769px) and (max-width: 991px) {
.products-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.jc-audio-bar {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
margin: 0 0 20px; padding: 12px 16px; background: #f7fafb;
border: 1px solid #e6eef2; border-radius: 8px;
}
.jc-audio-name { font-size: 13px; color: #66727e; word-break: break-all; }
.jc-audio-dl {
display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
color: #1d6f8e; font-size: 14px; font-weight: 600;
}
.jc-audio-dl svg {
width: 18px; height: 18px; fill: none; stroke: currentColor;
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.jc-audio-dl:hover { color: #17607b; }
@media (max-width: 768px) {
.jc-episode { gap: 12px; padding: 14px; }
.jc-episode-cover { width: 64px; height: 64px; }
.jc-episode-title { font-size: 15px; }
.jc-episode-play { width: 38px; height: 38px; }
}
/* ============================================================
10. 联系页里的「约我出去玩」
============================================================ */
/* 约玩与留言并排：两栏等高、窄屏自动上下堆叠 */
.jc-pair { display: flex; align-items: flex-start; gap: 46px; }
.jc-pair-col { flex: 1 1 0; min-width: 0; }
/* ------------------------------------------------------------
自建页面（不套主题的页面类型类）统一规格：容器加 jc-shell 即可。
为什么需要这一条：主题 global.css 有两条老重置
td, th, div, input, … { font-size: 12px }
font, span { font-size: 12px }
而大标题的字号只挂在各页面类型类下（.contact_box .pub_tit .tit 之类）。
自己新写的页面既不带那些类、又会被重置压到 12px，标题就会小得显眼。
以后新建页面：容器加 jc-shell、标题沿用 .pub_tit 结构，不必逐页再补。
------------------------------------------------------------ */
.jc-shell { font-size: 15px; }
/*
（`span / font` 字号继承那条已经挪到文件最前面了——同权重时它会压过写在前面的组件规则，
这一条踩过一次：加 jc-shell 之后播客的合集名/节目名一起掉回 12px。见文件开头的说明。）
*/
.jc-shell .pub_tit { margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid #e5e5e5; }
.jc-shell .pub_tit .tit { margin-bottom: 10px; color: #000; font-size: 30px; }
.jc-shell .pub_tit .en { color: #767676; font-size: 14px; font-family: Arial, sans-serif; }
/* 播客那两页的标题下面不要那条分隔线（站主 2026-10-13：「不要这条线」）。
jc-shell 是通用的（别处确实要这条线，主题的 contact_box 也自带一条），
所以用容器上的第二个类只把这两页摘出来。 */
.jc-shell.jc-plain-tit .pub_tit { border-bottom: 0; }
/* 主题把 a 的默认色设成了白色（当年为深色横幅），浅底页面上会隐形。
注意要排除「按钮样式的链接」：它们本来就是白字配深底，
被这条一起染成青色就变成青字青底、等于没文字（已经踩过一次）。 */
/*
再排除 .dis：那是「同栏目标签」那颗药丸（主题给它白字 + 深青底，
见 .photography .category a.dis/.on）。不排除的话，选中态会变成青字青底、
文字直接消失——播客那两页加上 jc-shell 后当场现形（2026-10-13 截图核对时发现的）。
*/
.jc-shell a:not(.jc-date-submit):not(.jc-card-btn):not(.dis) { color: #1d6f8e; }
.jc-shell a:not(.jc-date-submit):not(.jc-card-btn):not(.dis):hover { color: #17607b; }
/* 关于页正文：简历内容整段都是主题继承下来的 12px，读起来吃力（招聘方看的正是这页）。
正文统一到 15px、行高放宽；这一条只作用于「关于」这类单页，不碰列表页。 */
#website.about_box .content p,
#website.about_box .content li,
#website.about_box .content div {
font-size: 15px;
line-height: 1.95;
}
#website.about_box .content h1,
#website.about_box .content h2,
#website.about_box .content h3 {
font-size: 19px;
line-height: 1.6;
margin: 22px 0 10px;
}
/* 详情页正文（作品说明、播客单集、文章）也是继承来的 12px，一并放宽 */
#website.info_detail .content p,
#website.info_detail .content li,
#website.info_detail .content div {
font-size: 15px;
line-height: 1.95;
}
#website.info_detail .content h1,
#website.info_detail .content h2,
#website.info_detail .content h3 {
font-size: 19px;
line-height: 1.6;
margin: 22px 0 10px;
}
/* 主题里还有几处「该给人看的字」停在 12px（继承来的，不是有意设计的小字）：
首页与博客列表的摘要、关于页的作品区块标题、分页条。
这些类名主题里到处都在用，所以统一挂在 #website 下、只调字号行高，不动布局。 */
/* 关于页下那一块「作品」的标题与简介。
.text-center:not(.pub_tit) 这个写法是关键：页面主标题也带 .text-center 和 .tit，
写成 .about_box .tit 会把主标题一起压小（已经踩过一次）。 */
#website.about_box .text-center:not(.pub_tit) > .tit { font-size: 22px; line-height: 1.5; }
#website.about_box .text-center:not(.pub_tit) > .intro { font-size: 13px; }
#website.about_box .term2 .title { font-size: 15px; line-height: 1.6; }
#website.about_box .term2 .desc { font-size: 13px; line-height: 1.8; }
/* 摘要类文字：主题在 #website.index_box .info_list .desc 里写死了 12px，
选择器要和它一样具体、再靠加载顺序压过去（写 #website .info_list .desc 权重不够） */
#website.index_box .info_list .desc,
#website .info_list .desc,
#website .info_list .brief,
#website .list .item .info .brief { font-size: 14px; line-height: 1.85; }
#turn_page .pglist a { font-size: 14px; }
.jc-date { padding: 0; }
/* 联系页的标题留白收紧：主题给得比较松（上下加起来一百多像素），
紧一点才能让「约我出去玩」整张表单一屏放得下 */
.contact_box { margin-top: 26px; }
.contact_box > div > .pub_tit { margin-bottom: 26px; padding-bottom: 20px; }
/* 主题只在 .contact_box 里定义了标题字号，没写就会落到 global.css 的 div 通用 12px */
.jc-date-head { margin-bottom: 10px; text-align: center; }
.jc-date-head .tit { margin-bottom: 8px; color: #000; font-size: 24px; }
.jc-date-head .en { color: #767676; font-size: 13px; font-family: Arial, sans-serif; }
.jc-date-lead {
max-width: 520px; margin: 0 auto 18px; text-align: center;
color: #5b6a75; font-size: 15px; line-height: 1.85;
}
.jc-date-flash {
margin: 0 0 16px; padding: 11px 14px;
border-radius: 8px; font-size: 14px; line-height: 1.7;
}
.jc-date-flash.good { background: #eef8f1; color: #2d7a45; }
.jc-date-flash.bad { background: #fdf1f1; color: #b04141; }
/* 既不是成功也不是失败的中性提示（比如「把验证码粘进来」），别用红色吓人 */
.jc-date-flash.note { background: #f2f7fb; color: #2c5d7c; }
.jc-date-form {
max-width: none; margin: 0; padding: 20px 22px 16px;
background: #fff; border: 1px solid #e8eef3; border-radius: 12px;
}
.jc-date-row { display: flex; flex-wrap: wrap; gap: 16px; }
.jc-date-field { display: block; flex: 1 1 200px; }
.jc-date-field.wide { flex: 1 1 100%; margin-top: 18px; }
.jc-date-field > span { display: block; margin-bottom: 7px; color: #22313c; font-size: 14px; }
.jc-date-form input[type="text"],
.jc-date-form input[type="date"],
.jc-date-form select,
.jc-date-form textarea {
width: 100%; padding: 10px 12px; border: 1px solid #dfe7ec; border-radius: 8px;
background: #fff; color: #22313c; font-size: 14px; font-family: inherit;
}
.jc-date-form textarea { resize: vertical; line-height: 1.7; }
.jc-date-block { margin-top: 14px; }
.jc-date-label { margin-bottom: 9px; color: #22313c; font-size: 14px; }
.jc-date-hint { margin-left: 8px; color: #66727e; font-size: 12px; }
.jc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jc-chip { position: relative; cursor: pointer; }
.jc-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.jc-chip span {
display: inline-block; padding: 7px 14px; border: 1px solid #dfe7ec;
border-radius: 999px; background: #fff; color: #52606d; font-size: 14px;
transition: background .18s, color .18s, border-color .18s;
}
.jc-chip input:checked + span { background: #1d6f8e; border-color: #1d6f8e; color: #fff; }
.jc-chip input:focus-visible + span { outline: 2px solid #1d6f8e; outline-offset: 2px; }
.jc-date-slot { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.jc-date-slot input[type="date"] { flex: 0 0 190px; }
.jc-date-slot select { flex: 0 0 160px; }
/* 年 / 月 / 日 三个窄下拉：比原生日期框窄得多，四个控件能在一行里排开 */
.jc-date-ymd { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.jc-date-slot .jc-date-ymd select { flex: 0 0 auto; width: auto; min-width: 84px; padding-left: 10px; padding-right: 8px; }
/* 留言那栏的验证码图：尺寸跟着输入框走，别比输入框高出一截 */
.jc-captcha {
height: 38px; width: auto; border: 1px solid #e6eaee;
border-radius: 6px; vertical-align: middle; cursor: pointer;
}
/* 注册 / 登录 / 我的邀约（标题与链接颜色统一由 .jc-shell 管） */
.jc-account { padding: 0; margin-top: 26px; margin-bottom: 60px; }
.jc-my-card a { color: #1d6f8e; }
.jc-my-card a:hover { color: #17607b; }
/*
.jc-my-card a（0,2,0）会盖掉 .jc-date-submit 的白色（0,1,0）——
于是「空状态里那个『去约一次』按钮」是**青底青字**，看上去就是一块没字的色块。
权重得写成「.jc-my-card + a + .jc-date-submit」才压得住。同类坑见过两次了
（导航「搜索」悬停变红、这条按钮隐形），以后往卡片里放 当按钮，记得先量颜色。
*/
.jc-my-card a.jc-date-submit,
.jc-my-card a.jc-card-btn { color: #fff; }
/*
悬停时也要写全（2026-10-13 又栽了一次：新的「仅登录可见」门口页上那个「登录」按钮，
`.jc-my-card a:hover`（0,2,1）压过了 `.jc-date-submit:hover`（0,1,1）——
实心按钮悬停变成深青字压深青底）。check-buttons.py 当场报出来的。
**往卡片里放实心按钮，正常态和悬停态的颜色都要写全。**
*/
.jc-my-card a.jc-date-submit:hover,
.jc-my-card a.jc-card-btn:hover { color: #fff; }
/*
正文里的链接（单页/详情页的 .content）：主题那条 `a { color: #fff }` 是当年给
深色横幅用的，白底正文里的链接就变成白字看不见——隐私说明里的「个人资料」
实测对比度 1.00:1（fe_audit 报出来的）。正文链接统一成品牌青。
*/
#website .content a { color: #1d6f8e; }
#website .content a:hover { color: #17607b; }
/* 正文里的链接同样只有 17px 高（实测「个人资料」60×17）：只加竖向 padding 撑大可点区域 */
#website .content a,
.jc-404 a { padding: 8px 0; }
/* ============================================================
账号页（/my）：左边一张账号卡，右边是邀约与评论
以前是「姓名一行 + 头像上传一行 + 一条窄窄的 720px 卡片居中」，
两个头像、整页留白，站主说丑。改成两栏：左栏放账号与操作（含隐私说明入口），
右栏放内容；窄屏自动叠成一栏。
============================================================ */
.jc-account-grid {
display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px;
align-items: start; margin-top: 4px;
}
/* 左栏也不装框：头像/姓名、换头像、操作三组，各用一条浅线分开就够了 */
.jc-account-side { display: flex; flex-direction: column; gap: 0; }
.jc-account-side .jc-my-card { max-width: none; margin: 0; padding: 0; box-shadow: none; }
/* 头像 + 姓名 + 验证徽标下面要留白：不留的话「换头像」上面那条线紧贴着徽标，
看着像把上面那块圈住了（站主指出来的） */
.jc-account-id { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; }
/* 头像不许被 flex 压窄：不写这句时它会被右侧文字挤成 52×62，圆变成椭圆（实测出来的） */
.jc-account-id .jc-avatar { flex: 0 0 auto; }
.jc-account-who { min-width: 0; }
.jc-account-name { font-size: 17px; font-weight: 600; color: #22313c; line-height: 1.4; }
.jc-account-mail { margin-top: 4px; color: #66727e; font-size: 13px; word-break: break-all; }
/* 邮箱长、允许断行，但「已验证」这个小徽标不能被拆成两行（之前出现「待验 证」） */
.jc-account-mail .jc-my-status { white-space: nowrap; }
.jc-avatar.xl { width: 62px; height: 62px; font-size: 22px; }
/* 头像那一行：在账号卡里靠左排，不再横贯整页居中 */
.jc-account-side .jc-avatar-form {
max-width: none; margin: 0; justify-content: flex-start; gap: 8px;
padding: 16px 0 0; border-top: 1px solid #eef2f5;
}
.jc-account-side .jc-avatar-form .jc-date-hint { flex: 1 1 100%; margin-top: 2px; }
/* 账号操作：竖排按钮，右侧一个箭头 */
.jc-account-ops {
display: flex; flex-direction: column; margin-top: 16px;
padding-top: 12px; border-top: 1px solid #eef2f5;
}
.jc-account-op {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 0; border: 0; background: none;
color: #3c4a55; font-size: 15px;
}
.jc-account-op:hover { color: #1d6f8e; }
.jc-account-op span[aria-hidden] { color: #b9c3cc; transition: color .18s; }
.jc-account-op:hover span[aria-hidden] { color: #1d6f8e; }
.jc-account-op.quiet { background: none; color: #5b6a75; padding: 10px 0 0; }
.jc-account-op.quiet:hover { color: #b04141; }
/* 邮箱待验证的提示卡 */
.jc-account-side .jc-my-card.jc-verify-box {
margin-top: 18px; padding: 16px 18px; border-radius: 10px;
background: #fffbf2; box-shadow: none;
}
.jc-verify-t { font-size: 15px; font-weight: 600; color: #8a6d1d; }
.jc-verify-p { margin: 8px 0 12px; color: #6b5b2d; font-size: 13.5px; line-height: 1.85; }
.jc-account-card {
max-width: 560px; margin: 0 auto; padding: 24px 26px 20px;
background: #fff; border: 1px solid #e8eef3; border-radius: 12px;
}
/* 「仅登录可见」栏目的门口页 */
.jc-gate { max-width: 620px; text-align: center; padding: 26px 28px 24px; }
.jc-gate-t { font-size: 17px; font-weight: 600; color: #22313c; }
.jc-gate-p { margin: 10px 0 18px; color: #5b6a75; font-size: 14.5px; line-height: 1.95; text-align: left; }
.jc-gate-ops { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.jc-gate-note { margin: 18px 0 0; color: #5b6a75; font-size: 13.5px; line-height: 1.9; }
.jc-gate-note a { padding: 6px 2px; }
/*
「关于」页下面的「申请看简历」区块（2026-10-13 站主的想法）。
表单沿用联系页那套（.jc-date-form / .jc-date-field / .jc-date-row），
只是套在正文下面，所以这里只补外壳与标题。
*/
.jc-resume-ask {
/* 下边距是「申请框到页脚」那条空隙：10px 时框几乎是贴着页脚深色条的（站主截图指出的），
留足一屏呼吸的余地，比正文段落间距再大一号 */
margin: 30px 0 56px; padding: 22px 24px 20px;
background: #fff; border: 1px solid #e8eef3; border-radius: 12px;
}
.jc-resume-ask-t { font-size: 18px; font-weight: 600; color: #22313c; }
.jc-resume-ask-p { margin: 10px 0 16px; color: #5b6a75; font-size: 14.5px; line-height: 1.95; }
.jc-resume-ask-member { margin: 0; color: #3c4a55; font-size: 15px; }
.jc-resume-ask .jc-date-field span .jc-date-hint { margin-left: 6px; }
.jc-resume-ask .jc-date-form,
.jc-resume-form { max-width: none; margin: 0; padding: 0; background: none; border: 0; }
.jc-resume-form textarea {
width: 100%; padding: 10px 12px; border: 1px solid #dfe7ec; border-radius: 8px;
background: #fff; color: #22313c; font: inherit; font-size: 14px; line-height: 1.7; resize: vertical;
}
/* 输入框也要撑满：`.jc-date-form input` 那条只作用于联系页那个表单，这里得自己写一遍 */
.jc-resume-form input[type="text"] {
width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #dfe7ec;
border-radius: 8px; background: #fff; color: #22313c; font: inherit; font-size: 14px;
}
/* 简历页（凭临时链接打开）：正文照旧，上面加一条说明 */
.jc-resume { max-width: 860px; margin: 0 auto; }
.jc-resume-tip {
margin: 0 0 18px; padding: 11px 14px; border-radius: 8px;
background: #f2f7fb; color: #2c5d7c; font-size: 13.5px; line-height: 1.8;
}
.jc-resume-body { padding: 0 0 10px; }
.jc-account-lead { margin: 0 0 18px; color: #5b6a75; font-size: 14px; line-height: 1.8; text-align: center; }
.jc-account-alt { margin-top: 16px; color: #66727e; font-size: 14px; text-align: center; }
/* 表单下面那种「补充说明」：左对齐到输入框的左边缘，跟上面的居中辅助链接分开 */
.jc-account-note {
margin-top: 6px; color: #66727e; font-size: 14px; text-align: left;
}
.jc-account .jc-date-form { border: 0; border-radius: 0; padding: 0; }
.jc-date-form input[type="password"] {
width: 100%; padding: 10px 12px; border: 1px solid #dfe7ec; border-radius: 8px;
background: #fff; color: #22313c; font-size: 14px; font-family: inherit;
}
.jc-date-plain { color: #1d6f8e; font-size: 14px; }
/* 登录/注册页那几行小链接（「去登录」「忘了密码？」）实测只有 20px 高，
手机上不好点。同样只加内边距、不改排版。 */
.jc-date-plain, .jc-account-alt a { padding: 6px 2px; }
/* 详情页标题条上的「日期 + 阅读量」。
主题给的 #999999 压在 info_bg.jpg（实测中部平均 #ECECEC）上只有 2.41:1，
#66727e 也只有 4.16:1，都不到 AA；#5b6a75 是 4.72:1（量过）。 */
.info_detail .title .dis { color: #5b6a75; }
/* 导航里的未读小红点 */
.jc-badge {
display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 9px;
background: #e05555; color: #fff; font-size: 11px; line-height: 16px;
vertical-align: 1px;
}
/* 头像：有图用图，没图用昵称第一个字兜底 */
.jc-avatar {
display: inline-block; width: 40px; height: 40px; border-radius: 50%;
object-fit: cover; background: #e6eef2; vertical-align: middle;
}
.jc-avatar.lg { width: 48px; height: 48px; }
.jc-avatar.text {
display: inline-flex; align-items: center; justify-content: center;
background: #1d6f8e; color: #fff; font-size: 18px; line-height: 1;
}
.jc-avatar-form {
display: flex; align-items: center; justify-content: center; gap: 12px;
flex-wrap: wrap; max-width: 720px; margin: 0 auto 22px;
}
.jc-avatar-pick {
position: relative; overflow: hidden; display: inline-block;
padding: 7px 14px; border: 1px solid #dfe7ec; border-radius: 8px;
background: #fff; color: #52606d; font-size: 14px; cursor: pointer;
}
/* 描边按钮的悬停：边框与文字同色加深（与上面「按钮悬停的统一约定」一致） */
.jc-avatar-pick:hover { border-color: #1d6f8e; color: #1d6f8e; }
/*
把