@charset "utf-8";
/* banner轮播*/
.flexslider{ margin: 0px auto; position: relative; width: 100%; height: 450px; overflow: hidden;}
.flexslider .slides li{ width: 100%; height: 100%;}
.flexslider .slides li img { width: 100%; height: 448px; display: block;}
.flex-control-nav{ width: 100%; position: absolute; bottom: 10px; text-align: center;}
.flex-control-nav li{ margin: 0 2px; display: inline-block; background-color: rgba(255,255,255,.5); border-radius: 50%;text-indent: -99em;width: 10px;height: 10px;cursor: pointer;}
.flex-control-nav li.active{ background-color: #fff;}

/* 首页标题*/
.index-title{ border-bottom: 1px solid #ccc; padding: 0 0 10px; margin-bottom: 20px; display: flex; align-items: center; position: relative;}
.index-title h2{ font-size: 22px; font-weight: 600; display: inline-block;}
.index-title span.targ{ font-size: 14px; padding-left: 20px;}
.index-title span.kont{ color: #999; }

/* 主体内容*/
.index-content .box{}
.index-content ul{ width: 100%;}
.index-content ul li{ width: 25%; float: left; text-align: center; margin-bottom: 40px;}
.index-content ul li a{ width: 250px; display: inline-block; }
.index-content ul li a:hover{box-shadow: 0 3px 11.64px 0.36px rgba(0, 0, 0, 0.18);}
.index-content ul li h3{ font-size: 16px; line-height: 22px; padding: 10px; text-align: left;}
.index-content ul li p.sub-tit{ font-size: 14px;line-height: 20px;margin: 0 10px;}
.index-content ul li .other{ padding: 0 10px 10px; display: flex; align-items: center; justify-content: space-between;}
.index-content ul li .other strong{ color: #f42f2f;font-size: 20px;}
.index-content ul li .other em{ font-size: 14px; font-style: normal;}
.index-content ul li .other span{ color: #999; text-decoration: line-through; margin-left: 12px;}
.index-content ul li .other button{ background-color: #f42f2f; border: 0 none; color: #fff; padding: 5px 10px; border-radius: 4px;}
.index-content ul li img{ width: 250px; height: 250px;}
.index-content ul li:hover img, .index-content .box-middle ul li img:hover { opacity: .75;}

/* 热门品牌*/
.index-brand{ display: flex; width: 100%;}
.index-brand li{display: inline-block; flex: 1; text-align: center; border: 1px solid #eaeaea; border-top: 0 none; border-right: 0 none; padding-bottom: 20px; float: left;border:0 none \9;*border:0 none;_border:0 none;}
.index-brand li:last-child{ border-right: 1px solid #eaeaea; }
.index-brand .brand-pic{ position: relative; margin-bottom: 45px;}
.index-brand img.brand-logo{ width: 80px; height: 80px; position: absolute; top: 260px; left: 50%; margin-left: -40px;}
.index-brand h3{ font-weight: bold; }

/* 最新热卖*/
.prolist li{ margin:5px 0 14px; border-bottom: 1px dotted #eaeaea;}
.prolist li img{ float: left;width: 75px;height: 75px; margin: 0 10px 0 0;}
.prolist .proinfo h3{ font-weight: normal;font-size: 12px;height: 36px;overflow: hidden;line-height: 18px;}
.prolist .proinfo .num{ padding: 5px 0 14px;margin: 5px 0 14px;}
.prolist .proinfo .num .price{ font-size: 14px; color: #f42f2f;}
.prolist .proinfo .num .comment{ float: right;}
.prolist .proinfo .num .comment i{ color: #ccc; margin-right: 3px;}

/* 健康知识百科*/
.encyclopedia{ border: 1px solid #eaeaea; min-height: 252px; padding: 10px 0;}
.encyclopedia dl{ padding: 10px 1.6%; width: 30%; float: left;}
.encyclopedia dl dt{ margin-bottom: 5px;}
.encyclopedia dl dt i{ padding-left: 5px; }
.encyclopedia dl dd a{ color: #666; font-size: 12px; line-height: 22px;}
.encyclopedia dl dd em{ color: #ccc; padding: 0 8px;}

/* 友情链接*/
.blogroll .layui-tab-content a{ font-size: 12px;}

/* 悬浮微信公众号导流*/
.fixed-wxchat{ position: fixed; width: 100%; height: 143px; z-index: 1000; bottom: 0; left: 0; }
.fixed-wxchat .fixed-con{ position: relative;}
.fixed-wxchat .panel{ background: black; opacity: 0.6; filter: alpha(opacity=60); position: absolute; bottom: 0; width: 100%; height: 143px; z-index: -1;}
.fixed-wxchat .fixed-wxchat-con{ background: url('/images/weixin.gif') no-repeat; background-size: 100%; width: 1200px; height: 143px; margin: 0 auto; text-align: right;}
.fixed-wxchat .img-ewm{ width: 125px; height: 125px; padding: 9px 251px 0 0;}
.fixed-wxchat .icon-close img{ position: absolute; top: 5px; right: 0; cursor: pointer;}
.hide{ display: none !important; }

/* ==============================================
   以下是 手机端响应式样式（不影响电脑端，直接追加）
   ============================================== */
@media only screen and (max-width: 768px) {
  /* 全局重置 */
  * {
    box-sizing: border-box;
  }
  body,html{
    width: 100%;
    overflow-x: hidden;
  }
/* ==============================================
   手机端：只保留LOGO + 导航，其他全部隐藏
   ============================================== */
@media only screen and (max-width: 768px) {
  /* 隐藏顶部导航栏（欢迎语、登录、订单、热线） */
  .top-nav {
    display: none !important;
  }

  /* 隐藏搜索框、热搜关键词 */
  .head .pull-right {
    display: none !important;
  }

  /* 头部只居中显示LOGO */
  .head .pull-left {
    float: none !important;
    text-align: center !important;
    width: 100% !important;
  }
  .logo {
    text-align: center !important;
  }

  /* 底部多余友情链接隐藏 */
  #linke {
    display: none !important;
  }
}
  /* 容器自适应 */
  .contaninter {
    width: 100% !important;
    padding: 0 12px !important;
    margin: 0 auto !important;
    float: none !important;
    clear: both !important;
  }

  /* banner 自适应 */
  .flexslider {
    height: auto !important;
  }
  .flexslider .slides li img {
    height: auto !important;
    max-height: 180px !important;
    object-fit: cover !important;
  }

  /* 首页标题 */
  .index-title {
    display: block !important;
    text-align: center !important;
    padding: 15px 0 !important;
  }
  .index-title h2 {
    font-size: 18px !important;
    margin-bottom: 5px !important;
  }
  .index-title span.targ {
    padding-left: 0 !important;
    font-size: 12px !important;
  }

  /* 商品列表 —— 手机端 2列布局 */
  .index-content ul li {
    width: 50% !important;
    float: left !important;
    padding: 0 5px !important;
    margin-bottom: 20px !important;
  }
  .index-content ul li a {
    width: 100% !important;
    display: block !important;
  }
  .index-content ul li img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
  }
  .index-content ul li h3 {
    font-size: 14px !important;
    padding: 8px 5px !important;
    text-align: center !important;
  }
  .index-content ul li .other {
    display: block !important;
    text-align: center !important;
  }
  .index-content ul li .other strong {
    font-size: 16px !important;
  }
  .index-content ul li .other button {
    margin-top: 8px !important;
    width: 100% !important;
    padding: 6px !important;
  }

  /* 健康百科手机端 */
  .encyclopedia {
    border: 0 none !important;
    padding: 0 !important;
  }
  .encyclopedia dl {
    width: 100% !important;
    float: none !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  .encyclopedia dl dt {
    font-size: 15px !important;
    font-weight: bold !important;
  }
  .encyclopedia dl dd a {
    font-size: 12px !important;
    line-height: 24px !important;
  }

  /* 热门品牌手机端 */
  .index-brand {
    display: block !important;
  }
  .index-brand li {
    width: 100% !important;
    float: none !important;
    margin-bottom: 15px !important;
  }

  /* 最新热卖手机端 */
  .prolist li img {
    width: 65px !important;
    height: 65px !important;
  }
  .prolist .proinfo h3 {
    height: auto !important;
    font-size: 13px !important;
  }

  /* 悬浮微信（手机端自动隐藏不遮挡） */
  .fixed-wxchat {
    display: none !important;
  }
}