﻿/* ============================================================
   百盛医药新站样式（静态站覆盖根目录方案）
   ============================================================ */

/* ====== 基础重置 ====== */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body{
  font-family:"Microsoft YaHei","微软雅黑","PingFang SC","Hiragino Sans GB",sans-serif;
  font-size:14px;
  color:#333;
  background:#f5f7fa;
  min-height:100vh;
}
a{ color:#1a5a8a; text-decoration:none; }
a:hover{ color:#e76f2c; text-decoration:underline; }
img{ max-width:100%; display:block; }
ul,ol{ list-style:none; }
.wrap{ width:1200px; max-width:96%; margin:0 auto; }
.clearfix::after{ content:''; display:block; clear:both; }

/* ====== 头部 ====== */
.site-header{ padding:14px 0 6px; }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:14px; }
.logo-icon{
  width:60px; height:60px;
  background:linear-gradient(135deg,#1a5a8a,#2470a8);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:bold; font-size:22px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  font-family:"STKaiti","KaiTi",serif;
}
/* 真实 logo 图：shenhu/bs.png（300x100 透明 PNG） */
.logo-img{ height:72px; width:auto; display:block;
}
.logo-text{ display:flex; flex-direction:column; justify-content:center; margin-left:14px; }
.logo-text .small{ font-size:13px; color:#666; font-weight:bold; letter-spacing:6px; }
.logo-text .big{
  font-size:36px; font-weight:bold; line-height:1.05;
  color:#1a5a8a;
  letter-spacing:3px;
}
.search-box{
  display:flex; background:#fff; border-radius:3px; overflow:hidden;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.search-box input{
  border:0; outline:none; padding:8px 12px;
  width:240px; font-size:14px;
}
.search-box button{
  border:0; cursor:pointer;
  background:#1a5a8a; color:#fff;
  width:40px; font-size:14px;
}
.search-box button:hover{ background:#144a72; }

/* ====== 主导航 ====== */
.main-nav{ background:#1a5a8a; margin-top:8px; }
.main-nav ul{ display:flex; }
.main-nav li{ flex:1; }
.main-nav a{
  display:block; text-align:center; padding:14px 0;
  color:#fff; font-size:16px; font-weight:bold; letter-spacing:1px;
}
.main-nav a:hover{ background:#144a72; text-decoration:none; }
.main-nav li.active a{ background:#0f3d5c; color:#fff; box-shadow:inset 0 -3px 0 #f7c948; }

/* ====== 面包屑 ====== */
.breadcrumb{ padding:10px 0; font-size:13px; color:#555; }
.breadcrumb .sep{ margin:0 6px; color:#999; }
.breadcrumb .cur{ color:#1a5a8a; }

/* ====== 内容卡片 ====== */
.card{
  background:#fff;
  border:1px solid #e1e4e8;
  border-radius:3px;
  margin-bottom:16px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.card-title{
  background:linear-gradient(90deg,#1a5a8a,#2470a8);
  color:#fff; padding:9px 16px;
  font-size:16px; font-weight:bold;
  display:flex; align-items:center; gap:8px;
}
.card-title .ico{
  display:inline-block; width:14px; height:14px;
  background:#fff; border-radius:2px; position:relative;
}
.card-title .ico::after{
  content:''; position:absolute; inset:3px;
  background:#1a5a8a; border-radius:1px;
}
.card-title .ico-grid{
  display:inline-grid; grid-template-columns:1fr 1fr; gap:2px;
  width:14px; height:14px;
}
.card-title .ico-grid span{ background:#fff; border-radius:1px; }
.card-title .ico-grid span::before{
  content:''; display:block; width:4px; height:4px; background:#1a5a8a;
}
.card-body{ padding:18px; background:#fff; line-height:1.9; }

/* ====== 两列 / 三列布局 ====== */
.col-2{ display:grid; grid-template-columns:1fr 320px; gap:16px; }
.col-3{ display:grid; grid-template-columns:1fr 1fr 320px; gap:16px; }

/* ====== 关于我们正文 ====== */
.about-content p{
  text-indent:2em; margin-bottom:14px;
  font-size:14px; line-height:2; color:#2a2a2a;
}
.about-photo{
  margin:18px 0 4px; width:100%;
  aspect-ratio:16/10;
  background:linear-gradient(135deg,#b8d4e3 0%,#7ea8be 100%);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:22px; font-weight:bold;
  text-shadow:2px 2px 4px rgba(0,0,0,.3);
  letter-spacing:6px;
  border:1px solid #d0d7de;
}

/* ====== 联系我们侧栏 ====== */
.contact-list{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px 8px;
  font-size:14px; line-height:1.7;
}
.contact-list dt{
  font-weight:bold; color:#1a5a8a;
}
.contact-list dd{
  color:#444; word-break:break-all;
  margin-left:0;
}
.contact-list a{ color:#1a5a8a; }

/* ====== 核心价值观 ====== */
.core-values{
  margin-top:18px; padding:14px;
  background:linear-gradient(135deg,#fff5f5 0%,#ffeaea 100%);
  border:1px solid #f0c0c0; border-radius:4px;
  display:grid; grid-template-columns:30px 1fr;
  gap:10px; align-items:center;
}
.core-values .label-vert{
  writing-mode:vertical-rl; font-size:14px; font-weight:bold;
  color:#c8161e; letter-spacing:4px;
  border-right:2px solid #c8161e; padding-right:6px;
}
.core-values .words{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:4px 8px; font-size:14px; font-weight:bold;
}
.core-values .words span{
  text-align:center; padding:5px 0; border-radius:3px;
  background:rgba(255,255,255,.7);
}
.core-values .words span:nth-child(4n+1){ color:#c8161e; }
.core-values .words span:nth-child(4n+2){ color:#1a5a8a; }
.core-values .words span:nth-child(4n+3){ color:#2e8b57; }
.core-values .words span:nth-child(4n)  { color:#1a5a8a; }

.core-values-img{
  width:100%; height:auto; display:block;
  margin-top:18px; border-radius:4px;
  border:1px solid #f0c0c0;
}

/* ====== 首页 Banner ====== */
.banner{
  width:100%; height:400px; display:block;
  object-fit:cover; object-position:center;
  margin-bottom:18px; border-radius:4px;
  border:1px solid #d0d7de;
}

/* ====== 首页最新产品条 ====== */
.section-strip{
  background:linear-gradient(90deg,#1a5a8a,#2470a8);
  color:#fff; padding:10px 16px;
  font-size:18px; font-weight:bold;
  border-radius:3px; margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}

/* ====== 产品展示网格 ====== */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:16px;
}
.product-card{
  background:#fff;
  border:1px solid #e1e4e8;
  border-radius:4px;
  overflow:hidden;
  display:block;
  transition:transform .2s, box-shadow .2s;
}
.product-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(0,0,0,.1);
  text-decoration:none;
}
.product-thumb{
  aspect-ratio:4/3;
  overflow:hidden;
  background:#f5f7fa;
}
.product-thumb img{
  width:100%; height:100%; object-fit:cover;
  display:block;
}
.product-info{ padding:14px; }
.product-info h3{ font-size:15px; color:#333; margin-bottom:6px; }
.product-info p{ font-size:13px; color:#888; line-height:1.5; }

/* ====== 新闻列表 ====== */
.news-list{ padding:6px 4px; }
.news-list li{
  padding:9px 4px; border-bottom:1px dashed #e1e4e8;
  font-size:14px; display:flex; justify-content:space-between; align-items:center;
}
.news-list li::before{
  content:'●'; color:#1a5a8a; margin-right:6px;
  font-size:10px; vertical-align:middle;
}
.news-list a{ color:#444; flex:1; margin-right:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.6; }
.news-list a:hover{ color:#1a5a8a; }
.news-list .date{ color:#999; font-size:12px; }

/* ====== 浮动二维码 ====== */
.float-qr{
  position:fixed; right:14px; top:50%; transform:translateY(-50%);
  width:46px; height:46px; background:#fff;
  border:1px solid #e1e4e8; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  cursor:pointer; font-size:10px; text-align:center;
  color:#1a5a8a; font-weight:bold; line-height:1.1;
  z-index:999; user-select:none;
}
.float-qr:hover{ background:#1a5a8a; color:#fff; }

/* ====== 底部背景 ====== */
.site-bottom-bg{
  background:linear-gradient(180deg,#1a5a8a 0%,#0f3d5c 60%,#082840 100%);
  padding:22px 0 0; margin-top:24px;
}

/* ====== 底部导航 ====== */
.foot-nav{
  text-align:center; padding:14px 0 6px;
}
.foot-nav a{
  color:#fff; margin:0 16px; font-size:13px;
}
.foot-nav a:hover{ color:#f7c948; text-decoration:none; }
.foot-nav .ver{ color:#aab; font-size:12px; margin-left:16px; }

/* ====== 页脚 ====== */
.site-footer{
  background:transparent; color:#fff;
  text-align:center; padding:6px 10px 18px;
  font-size:13px; line-height:1.9;
}
.site-footer a{ color:#fff; margin:0 6px; }
.site-footer a:hover{ color:#f7c948; }
.site-footer .sep{ color:#3a5a7a; margin:0 4px; }
.site-footer .gov{ color:#ff9966; }

/* ====== 占位页 ====== */
.placeholder-page{
  padding:50px 20px; text-align:center; color:#666;
}
.placeholder-page h2{ color:#1a5a8a; margin-bottom:14px; }
.placeholder-page .icon{
  font-size:60px; color:#1a5a8a; margin-bottom:14px; opacity:.7;
}

/* ====== 响应式 ====== */
@media (max-width:1240px){ .wrap{ width:96%; } }
@media (max-width:900px){
  .col-2,.col-3{ grid-template-columns:1fr; }

  .main-nav ul{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .main-nav ul::-webkit-scrollbar{ height:0; }
  .main-nav li{ flex:0 0 auto; }
  .main-nav a{ padding:12px 18px; font-size:15px; white-space:nowrap; }
  .search-box input{ width:140px; }
  .float-qr{ display:none; }
.logo-text .big{ font-size:28px; }
}
/* ====== 手机端优化（600px以下） ====== */
@media (max-width:600px){
  .site-header .wrap{ flex-direction:row; align-items:center; justify-content:space-between; }
  .search-box{ width:auto; }
  .search-box input{ width:120px; }
  .banner{ height:200px; }

  .logo-img{ height:56px; }
  .logo-text{ margin-left:10px; }
  .logo-text .big{ font-size:22px; }
  .logo-text .sub{ font-size:11px; }
  .main-nav a{ padding:10px 14px; font-size:14px; }
  .card-title{ font-size:14px; padding:8px 12px; }
  .section-strip{ font-size:16px; padding:8px 12px; }
  .card-body{ padding:14px; font-size:14px; }
  .foot-nav a{ margin:0 8px; font-size:12px; }
  .site-footer{ font-size:12px; padding:6px 8px 14px; }
  .contact-list{ font-size:13px; grid-template-columns:48px 1fr; }
  .news-list li{ font-size:13px; }
  .product-info h3{ font-size:14px; }
  .product-info p{ font-size:12px; }
}
/* ====== 小屏手机（480px以下）：搜索框缩为放大镜按钮 ====== */
@media (max-width:480px){
  .search-box input{ display:none; }
  .logo-text .sub{ display:none; }
  .logo-text .big{ font-size:20px; }
  .logo-img{ height:48px; }
}