﻿* { margin: 0rem; padding: 0rem; outline: none; }
ul, li { list-style-type: none; }
img, video, iframe { border: 0rem; max-width: 100%;object-fit: cover; }
img { /*image-rendering: pixelated;*/ }

html { font-size: 100px; }
html, body { height: 100%; }
body { font-size: 14px; font-family: Microsoft YaHei,Arial, Helvetica, sans-serif,simsun; color: #333; overflow-x: hidden; margin: 0 auto; max-width: 1920px; font-weight: 500; }
a { color: #333333; text-decoration: none; }
a:hover { color: #03359b; }
input { outline: none; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus { transition: background-color 5000s ease-in-out 0s; }
.no-animate { opacity: 0; }



.main { width: 100%; overflow: hidden; }
.main_w {max-width: 1680px;margin: 0 auto;padding-left: 1.2rem;padding-right: 1.2rem;}



.klist .box .list { display: none; }
.klist .box .list.cur { display: block; }
.klist { width: 100%; overflow: hidden; }
.klist .list { width: 100%; padding: .4rem 0 .64rem; /* 修复浮动塌陷（原有结构可能存在高度丢失） */ overflow: hidden; }
/* 1. 基础li样式：新增hover交互，优化过渡曲线 */
.klist .list li { width: 15.5%; border-radius: 20px; padding: .4rem; box-sizing: border-box; float: left; margin-right: 1.5%; height: 5.8rem; overflow: hidden; position: relative; z-index: 1; /* 新增：hover时轻微上浮，增加交互感 */ transition: all 0.4s ease-in-out; cursor: pointer; box-sizing: border-box; }
/* 新增hover基础反馈（非cur状态） */
.klist .list li:hover:not(.cur) { transform: translateY(-4px); }
.klist .list li:hover:not(.cur)::after { background-color: #f0f2f5; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

/* 2. 背景层优化：增加透明度过渡，避免背景图突然切换 */
.klist .list li::after { content: ""; display: block; background: #f4f5f6; position: absolute; left: 0; top: 0; width: 100%; height: 4.8rem; z-index: -1; /* 新增：背景图/颜色过渡，增加阴影过渡 */ transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out; border-radius: 20px; /* 与li圆角统一，避免漏角 */ }

/* 3. 图片优化：限制尺寸，cur时轻微缩放增强动态感 */
.klist .list li .pro img { width: 4.51rem; max-width: 1000px; /* 修复原有max-width过大导致图片溢出问题 */ margin-top: .3rem; display: block; margin-left: auto; margin-right: auto; /* 新增：图片缩放过渡 */ transition: transform 0.4s ease-in-out; transform: scale(0.95); }

/* 4. 标题文字：优化颜色过渡，cur时更醒目 */
.klist .list li .c1 font { font-size: 18px; color: #505050; display: block; padding-bottom: .2rem; text-align: center; /* 统一居中，视觉更整齐 */ transition: font-size 0.4s ease-in-out, color 0.4s ease-in-out; white-space: nowrap; }

/* 5. 描述文字：新增透明度过渡，避免突然显示 */
.klist .list li .c1 p { color: rgba(0.8, 0.8, 0.8, 0.7); /* 原有写法正确，补充透明度过渡 */ text-align: center; box-sizing: border-box; overflow: hidden; height: 0; opacity: 0; /* 新增：初始透明 */ /* 新增：透明度+高度同步过渡，显示更自然 */ transition: height 0.4s ease-in-out, opacity 0.4s ease-in-out; line-height: 1.6; /* 优化行高，避免文字拥挤 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* 6. 按钮：新增位移过渡，从下往上弹出 */
.klist .list li .more { width: 0; height: 0; background: #d50707 url(/static/default/assets/img//jian.png) no-repeat center right 4px; background-size: 0 auto; border-radius: 50px; line-height: .4rem; color: #fff; padding-left: .19rem; box-sizing: border-box; margin: 0 auto; overflow: hidden; /* 新增：位移过渡（初始向下偏移），宽度/高度/背景同步过渡 */ transition: all 0.4s ease-in-out; transform: translateY(10px); /* 初始向下隐藏 */ opacity: 0; /* 初始透明 */ }

/* 7. cur状态：强化突出效果，动画维度更丰富 */
.klist .list li.cur { width: 30%; z-index: 2; /* 提升层级，覆盖其他li */ transform: translateY(-6px); /* 上浮更明显，突出选中状态 */ }
.klist .list li.cur::after { background: url(/static/default/assets/img//probox.png) no-repeat top center; background-size: 100% 4.8rem; box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* 新增阴影，增强立体感 */ }
.klist .list li.cur .pro img { transform: scale(1); /* 图片轻微放大，吸引注意力 */ }
.klist .list li.cur .c1 font { font-size: 22px; color: #d50707; /* 标题色与按钮色统一，视觉更协调 */ font-weight: 500; /* 加粗，突出标题 */ }
.klist .list li.cur .c1 p { height: 1rem; /* 调整高度，确保文字完整显示（原.6rem可能截断） */ opacity: 1; /* 透明度渐变显示 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.klist .list li.cur .more { width: 1.48rem; height: .4rem; background-size: 0.33rem auto; /* 按钮箭头正常显示 */ transform: translateY(0); /* 位移回归，自然弹出 */ opacity: 1; /* 透明度显示 */ }

