/* 潍坊万翔化工有限公司 静态站样式 v2 */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif; color:#404040; font-size:15px; line-height:1.75; background:#fff; }
img { max-width:100%; border:0; }
a { color:#404040; text-decoration:none; transition:color .3s; }
a:hover { color:#ed2832; }
ul { list-style:none; }
.container { max-width:1200px; margin:0 auto; padding:0 15px; }
::selection { background:#ed2832; color:#fff; }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#f1f1f1; }
::-webkit-scrollbar-thumb { background:#c9c9c9; border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:#ed2832; }

/* 头部 */
.header { background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.header-in { display:flex; align-items:center; justify-content:space-between; height:84px; }
.logo img { height:38px; display:block; }
.nav { display:flex; }
.nav li a { display:block; padding:0 26px; line-height:84px; font-size:16px; position:relative; }
.nav li a::after { content:""; position:absolute; left:26px; right:26px; bottom:18px; height:3px; background:#ed2832; transform:scaleX(0); transition:transform .3s; }
.nav li a.active, .nav li a:hover { color:#ed2832; }
.nav li a.active::after, .nav li a:hover::after { transform:scaleX(1); }
.nav-toggle { display:none; background:none; border:0; font-size:24px; color:#ed2832; cursor:pointer; }

/* 轮播 */
.carousel { position:relative; height:480px; overflow:hidden; }
.slides, .slide { position:absolute; top:0; left:0; right:0; bottom:0; }
.slide { background-size:cover; background-position:center; opacity:0; transition:opacity .9s ease; }
.slide.on { opacity:1; }
.slide-mask { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.05) 55%,rgba(0,0,0,.38) 100%); }
.dots { position:absolute; bottom:20px; left:0; right:0; text-align:center; z-index:7; }
.dot { display:inline-block; width:26px; height:4px; margin:0 5px; border-radius:2px; background:rgba(255,255,255,.55); cursor:pointer; transition:background .3s,width .3s; }
.dot.on { background:#ed2832; width:36px; }

/* 板块 */
.section { padding:56px 0; }
.section-gray { background:#f7f7f7; }
.section-title { position:relative; text-align:center; margin-bottom:36px; }
.section-title h1, .section-title h2 { display:inline-block; font-size:28px; color:#272727; letter-spacing:2px; padding-bottom:12px; position:relative; }
.section-title h1::after, .section-title h2::after { content:""; position:absolute; left:50%; bottom:0; width:56px; height:4px; margin-left:-28px; background:#ed2832; border-radius:2px; }
.home-h1 { font-size:24px; color:#272727; letter-spacing:2px; margin:0 0 10px; }
.section-title span { display:block; color:#aaa; letter-spacing:4px; font-size:12px; margin-top:10px; }
.section-title .more-btn { position:absolute; right:0; top:14px; }
.more-btn { display:inline-block; border:1px solid #ed2832; color:#ed2832; padding:5px 18px; font-size:13px; border-radius:20px; transition:all .3s; }
.more-btn:hover { background:#ed2832; color:#fff; }
.section-intro { max-width:920px; margin:0 auto 34px; text-align:center; color:#666; }

/* 四大系列 */
.series-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.series-card { text-align:center; padding:30px 16px; background:#fff; border:1px solid #eee; border-radius:8px; transition:transform .3s, box-shadow .3s; }
.series-card:hover { transform:translateY(-6px); box-shadow:0 10px 26px rgba(237,40,50,.16); border-color:#f5c2c5; }
.series-img { width:124px; height:124px; margin:0 auto; border-radius:50%; overflow:hidden; border:3px solid #fde8e9; transition:border-color .3s; }
.series-card:hover .series-img { border-color:#ed2832; }
.series-card img { width:100%; height:100%; object-fit:cover; }
.series-card h3 { color:#ed2832; font-size:18px; margin:16px 0 8px; }
.series-card p { color:#777; font-size:13px; }

/* 产品网格 */
.product-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.product-card { background:#fff; border:1px solid #eee; border-radius:6px; overflow:hidden; transition:box-shadow .3s, transform .3s; }
.product-card:hover { box-shadow:0 10px 24px rgba(0,0,0,.12); transform:translateY(-5px); }
.product-pic { display:block; overflow:hidden; }
.product-pic img { width:100%; height:180px; object-fit:cover; display:block; transition:transform .4s; }
.product-card:hover .product-pic img { transform:scale(1.07); }
.product-body { padding:14px; }
.product-body h3 { font-size:16px; margin-bottom:6px; }
.product-body h3 a { transition:color .3s; }
.product-body p { color:#777; font-size:12px; height:60px; overflow:hidden; margin-bottom:12px; }
.btn { display:inline-block; background:#ed2832; color:#fff !important; padding:6px 18px; font-size:13px; border-radius:3px; border:0; cursor:pointer; transition:background .3s, box-shadow .3s; }
.btn:hover { background:#c91f28; box-shadow:0 4px 12px rgba(237,40,50,.35); }
.btn-outline { background:transparent; border:1px solid #fff; padding:8px 26px; border-radius:22px; font-size:14px; }
.btn-outline:hover { background:#ed2832; border-color:#ed2832; }

/* 新闻列表 */
.news-row { display:flex; gap:22px; padding:22px 10px; border-bottom:1px solid #eee; border-radius:6px; transition:background .3s; }
.news-row:hover { background:#fafafa; }
.news-row:hover h3 a { color:#ed2832; }
.news-thumb { flex:0 0 220px; overflow:hidden; border-radius:6px; }
.news-thumb img { width:220px; height:140px; object-fit:cover; display:block; transition:transform .4s; }
.news-row:hover .news-thumb img { transform:scale(1.05); }
.news-info h3 { font-size:17px; margin-bottom:8px; }
.news-info h3 a { transition:color .3s; }
.news-info p { color:#777; font-size:13px; margin-bottom:8px; }
.news-date { color:#aaa; font-size:12px; }
.news-date::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:#ed2832; margin-right:6px; opacity:.6; }

/* 内页横幅 */
.page-banner { height:210px; background-size:cover; background-position:center; }

/* 面包屑（详情页正文内） */
.crumbs { padding:14px 4px; color:#999; font-size:13px; border-bottom:1px solid #eee; margin-bottom:28px; }
.crumbs a { color:#888; }
.crumbs a:hover { color:#ed2832; }
.crumbs .sep { margin:0 8px; color:#ed2832; }
.crumbs .crumb-title { display:inline-block; max-width:50%; vertical-align:bottom; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 详情页 */
.detail-head { display:flex; gap:34px; margin-bottom:36px; }
.detail-pic { flex:0 0 420px; border:1px solid #eee; border-radius:8px; padding:12px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.05); }
.detail-pic img { width:100%; display:block; border-radius:4px; }
.detail-side { flex:1; min-width:0; }
.detail-side h1 { font-size:26px; color:#272727; margin-bottom:16px; padding-bottom:14px; border-bottom:2px solid #ed2832; display:inline-block; }
.detail-summary { color:#666; background:#fdf3f4; padding:18px 20px; border-left:4px solid #ed2832; border-radius:0 6px 6px 0; font-size:14px; }
.detail-content { max-width:880px; font-size:15px; line-height:1.9; color:#444; text-align:justify; }
.detail-content p, .detail-content div { margin-bottom:12px; }
.detail-content h2, .detail-content h3, .sec-title { font-size:18px; color:#272727; margin:26px 0 12px; padding-left:12px; border-left:4px solid #ed2832; line-height:1.4; }
.detail-content h2 { font-size:20px; }
.detail-content img { display:block; margin:14px auto; max-width:100%; border-radius:6px; }
.detail-content ul, .detail-content ol { padding-left:24px; margin-bottom:12px; }
.detail-content li { margin-bottom:8px; list-style:disc; }
.sec-body { margin-bottom:14px; }

/* 参数表格（红边斑马纹） */
.param-table, .spec-table { width:100%; border-collapse:collapse; margin:16px 0 24px; font-size:14px; background:#fff; }
.param-table { border:1px solid #ed2832; border-radius:6px; overflow:hidden; }
.param-table th, .param-table td { padding:10px 16px; border-bottom:1px solid #f3d4d6; text-align:left; }
.param-table th { width:120px; background:#fdf3f4; color:#ed2832; font-weight:600; }
.param-table tr:nth-child(even) td { background:#fbf7f7; }
.param-table tr:last-child th, .param-table tr:last-child td { border-bottom:0; }
.detail-side .param-table { margin:20px 0 0; }
.spec-table { border:1px solid #e5e5e5; }
.spec-table th, .spec-table td { padding:9px 14px; border:1px solid #eee; text-align:center; }
.spec-table tr:first-child td, .spec-table th { background:#ed2832; color:#fff; font-weight:600; }
.spec-table tr:nth-child(odd):not(:first-child) td { background:#faf5f5; }
.spec-table td p { margin:0; }

.article h1 { font-size:25px; margin-bottom:12px; color:#272727; }
.article-meta { color:#999; font-size:13px; border-bottom:1px solid #eee; padding-bottom:14px; margin-bottom:24px; }
.article-meta::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:#ed2832; margin-right:8px; opacity:.6; }
.prev-next { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #eee; margin-top:34px; padding-top:18px; font-size:14px; }
.prev-next a { transition:color .3s; }

/* 关于我们 */
.about-wrap { display:flex; gap:36px; align-items:flex-start; }
.about-text { flex:1; }
.about-text p { text-indent:2em; margin-bottom:16px; font-size:15px; line-height:1.9; text-align:justify; }
.about-img { flex:0 0 400px; }
.about-img img { width:100%; display:block; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.1); }

/* 联系我们 */
.contact-wrap { display:flex; gap:44px; }
.contact-info { flex:1; display:flex; flex-direction:column; gap:18px; }
.contact-card { display:flex; gap:16px; align-items:center; background:#fff; border:1px solid #eee; border-radius:8px; padding:20px 22px; transition:box-shadow .3s, transform .3s; }
.contact-card:hover { box-shadow:0 8px 22px rgba(237,40,50,.12); transform:translateY(-3px); }
.contact-icon { flex:0 0 52px; width:52px; height:52px; border-radius:50%; background:#ed2832; color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; }
.contact-card h4 { font-size:15px; color:#272727; margin-bottom:4px; }
.contact-card p { color:#666; font-size:14px; }
.contact-form { flex:1; background:#fafafa; border-radius:10px; padding:30px 28px; }
.contact-form h3 { font-size:20px; color:#ed2832; margin-bottom:18px; }
.contact-form input, .contact-form textarea { width:100%; border:1px solid #ddd; border-radius:5px; padding:11px 14px; margin-bottom:14px; font-family:inherit; font-size:14px; background:#fff; transition:border-color .3s, box-shadow .3s; }
.contact-form input:focus, .contact-form textarea:focus { border-color:#ed2832; box-shadow:0 0 0 3px rgba(237,40,50,.12); outline:none; }

/* 页脚 */
.footer { background:#272727; color:#999; margin-top:24px; }
.footer-in { display:grid; grid-template-columns:2fr 1fr 1.4fr; gap:40px; padding:44px 15px 36px; }
.footer-col h4 { color:#fff; font-size:16px; margin-bottom:16px; padding-bottom:10px; position:relative; }
.footer-col h4::after { content:""; position:absolute; left:0; bottom:0; width:30px; height:2px; background:#ed2832; }
.footer-col p { margin-bottom:8px; font-size:13px; }
.footer-col a { color:#999; transition:color .3s; }
.footer-col a:hover { color:#ff8f96; }
.copyright { background:#1c1c1c; text-align:center; padding:16px; font-size:13px; color:#777; }
.copyright a { color:#999; }
.copyright a:hover { color:#ff8f96; }
.beian, .friend-link { margin-left:24px; }
.friend-link a { color:#999; }
.friend-link a:hover { color:#ff8f96; }

/* 响应式 */
@media (max-width:992px) {
  .product-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
  .carousel { height:260px; }
  .series-grid { grid-template-columns:repeat(2,1fr); }
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .nav { display:none; position:absolute; top:87px; left:0; right:0; background:#fff; flex-direction:column; box-shadow:0 8px 16px rgba(0,0,0,.12); z-index:99; }
  .nav.open { display:flex; }
  .nav li a { line-height:48px; border-bottom:1px solid #f0f0f0; }
  .nav li a::after { display:none; }
  .nav-toggle { display:block; }
  .header { position:relative; }
  .detail-head, .about-wrap, .contact-wrap { flex-direction:column; }
  .detail-pic, .about-img { flex:none; width:100%; }
  .news-thumb { flex:0 0 120px; }
  .news-thumb img { width:120px; height:80px; }
  .page-banner { height:130px; }
  .footer-in { grid-template-columns:1fr; }
  .section-title .more-btn { position:static; display:inline-block; margin-top:10px; }
  .detail-content { max-width:100%; }
}