/* ============================================
   南宁段国广中医诊所 - 现代响应式样式（重构版）
   严格按原站 css-xl.css / css-m.css 视觉重现
   ============================================ */

/* ---------- 基础重置 ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif;
  color:#505050;
  line-height:1.6;
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:#555; }
ul { list-style:none; }
.main-content-img{
  float: right;
}
/* ============================================
   宽屏（>=768px）—— 对应原 css-xl.css
   ============================================ */
@media (min-width:768px) {

  /* 页面背景：顶部bg.jpg横幅 + 底部f1.jpg + 中间浅黄#f3e4b9 */
  body {
    background:url(skins/bg.jpg) repeat-x top center,
               url(skins/f1.jpg) #f3e4b9 no-repeat bottom center;
  }

  /* 整体容器 1190px 居中 */
  .container { width:1190px; margin:0 auto; min-height:710px; }

  .bannerline {
    display: none;
  }

  .disease-PHONE{
    display: none;
  }

  .header-logo { display:none; }  /* 隐藏手机头部图片 */

  /* ---------- 顶部 header ---------- */
  .header {
    width:1190px; height:200px; position:relative;
    background:url(skins/logo.jpg) no-repeat;
  }
  .header-logo {
    position:absolute; left:20px; top:38px; width:486px;
  }
  .header-logo img { width:486px; }
  .header-top {
    position:absolute; right:15px; top:130px; width:250px;
    text-align:right;
  }
  .header-search { display:flex; justify-content:flex-end; margin-bottom:5px; }
  .header-search input {
    width:180px; height:26px; border:1px solid #DBDBDB;
    border-radius:5px 0 0 5px; font-size:13px; padding:0 5px;
  }
  .header-search .btn {
    width:70px; height:26px; line-height:26px; text-align:center;
    background:#F3F3F3; color:#999; font-size:13px; cursor:pointer;
    border-radius:0 5px 5px 0;
  }
  .header-txt { font-size:13px; color:#666; letter-spacing:1px; line-height:24px; }
  .header-txt a { color:#666; }

  /* ---------- 导航栏 navbar（占右侧75%，不铺满） ---------- */
  .navbar {
    height:35px;
    background:url(skins/nav.jpg) no-repeat;
    padding-left:25%;
    font-size:16px; font-weight:bold;
    margin-top: 4px;
  }
  .nav{
    width:100%; 
    display: flex;
    flex-direction: row;
    justify-content: start;
  }
  .nav li {
    height:35px; line-height:35px;
    width:103px; text-align:center; font-weight:bold;
    background-color:#900;
  }
  .nav li a {
    display:block; height:35px; line-height:35px;
    color:#FFF; background-color:#7c624d;
    transition:transform 0.3s, height 0.3s, background-color 0.3s;
  }
  .nav li a.active {
    color:#fff; height:43px; border-radius:8px 8px 0 0;
    background-color:#900; text-shadow:1px 1px 5px #000;
    transform:translateY(-8px);
  }

  /* ---------- 主体两栏 ---------- */
  .stationary {
    width:1190px;border-radius:0 0 25px 25px;
    background:transparent;display: flex;margin-top: 4px;
    justify-content: space-between;
  }

  /* 左侧菜单 */
  .menu {
    width:240px; margin:20px 0 30px 20px; min-height:500px;
    position: sticky;
    top: 0;
    align-self: flex-start;
  }
  .menu-slide { width:220px; min-height:150px; }
  .menu-slide-img {
    width:220px; margin:0 0 10px 0; border-radius:8px;
    background-color:#FFF;
  }
  .menu-slide-list { 
    width:220px; 
    min-height:100px; 
    font-size:12px; 
    margin:0 0 30px 0; 
  }
  .menu-slide-list ul li {
    line-height:25px; 
    width:220px; 
    margin-bottom:8px;
    border-radius:8px 0 0 8px; 
    font-size:18px; 
    font-family:宋体;
  }
  .menu-slide-list ul li a {
    display:block; 
    text-align: right;
    padding:14px 20px 14px 30px; 
    color:#FFF; 
    font-weight:bold;
    background:url(skins/leftheadingh4.jpg) #7e5132 no-repeat bottom right;
    border-radius:8px;
    transition:transform 0.3s;
  }
  .menu-slide-list ul li a:hover,
  .menu-slide-list ul li a.active {
    border-radius:8px 0 0 8px;
    background:#FFF7DD no-repeat bottom right;
    color:#7e5132;
    transform:translateX(20px);
  }

  /* 右侧主内容 */
  .main {
    width:930px; min-height:500px;
    padding:30px 30px 80px 30px; margin-top:20px;
    background:#FFF7DD;
    border-radius: 15px;
    overflow: hidden;
  }

   .main p{
    font-size:16px;
  }

  .main-block { width:100%; height:auto; }

  /* 内容标题条 */
  .main-title {
    text-align:center; width:100%; margin:10px 0 15px 0;
    height:auto; line-height:60px;
    font-size:22px; font-weight:bold; color:#fff;
    font-family:Verdana,Geneva,sans-serif;
    background:url(img/bar3.jpg) no-repeat center;
    background-size:70% 40px;
  }
  .main-content-videocenter{
    display: block; 
    width:80%;
    border-radius:10px;
    background:#000;
    margin: auto;
  }

  /* 擅长诊治范围卡片 */
  .disease-intro {
    width:100%; margin:0 0 18px 0;
    text-align:center; color:#7c624d; font-size:15px; letter-spacing:1px;
  }
  .disease-card {
    width:100%; margin:0 0 16px 0;
    background:#fdf6e3; border:1px solid #d9c9a3;
    border-left:5px solid #7c624d;
    border-radius:8px;
    padding:14px 16px;
  }
  .disease-card h3 { color:#7c624d; font-size:16px; margin-bottom:10px; }
  .disease-card p { color:#505050; line-height:2.2; font-size:14px; }
  .disease-card .tip { color:#a08050; font-size:13px; font-style:italic; margin-top:8px; }

  /* 荣誉风采图片墙 */
  .honor-row { width:100%; margin:0 0 20px 0; text-align:center;display: flex; flex-direction: row; justify-content: space-between;
    flex-wrap: wrap;}
  .honor-row img {
    width:30%; 
    border:#fff 5px solid;
    margin: 10px 0;
  }
  .main-content p{
    padding: 6px 30px;
    text-indent: 2em;
  }
  
  .main-content-img{
    margin-right: 30px;
    margin-left: 20px;
  }
  .main-content-imgcenter{
    margin: auto;
  }
  /* 大图 */
  .main-content-imgcenter3 {
    display: block;
    width: calc(100% + 60px);   /* 左右 padding 之和：30px + 30px */
    max-width: none;
    margin: -30px 0 0 -30px;    /* 分别抵消 top 和 left padding */
    margin-bottom: 30px;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  }

  /* ---------- 页脚 ---------- */
  .footer {
    width:100%; min-height:50px; display: flex; flex-direction: column; justify-content: center;
    background:url(skins/foot2.jpg) no-repeat;
    color:#FFF; font-size:13px; padding:30px 0;
    margin-bottom:172px; border-radius:25px; margin-top:30px;
  }
  .footer a {
    color:#FFF; 
  }
  .footer-txt { width:600px; margin:auto; text-align:center; line-height:26px; color:#FFF; }
  .footer-txt a { color:#FFF; }
  .footer-txt a:hover { color:#ccc; }

  
  .footer p { text-align: center; line-height: 22px; }

  /* 快捷栏宽屏隐藏 */
  .shortcut { display:none; }
}

/* ============================================
   窄屏（<768px）—— 对应原 css-m.css
   ============================================ */
@media (max-width:767px) {

  body { background:#FFF7DD; }

  .container { width:100%; min-height:710px; margin:auto; }

  /* header：窄屏logo */
  .header { width:100%; }
  .header-logo { width:100%;}
  .header-logo img { width:100%; }
  .header-top { display:none; }  /* 隐藏搜索条 */

  /* navbar 全宽深棕 */
  .navbar {
    width:100%; background-color:#7c624d; font-size:3.5vw;
  }

  /* navbar 吸附容器：手机模式下滚动时吸附在窗口顶部 */
  .nav-sticky-wrap {
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  }
  
  .expert{
    margin: auto;
    width: 50vw;
    height: 39vw;
    object-fit: cover;        /* 等比缩放填满容器，裁剪溢出 */
    object-position: top;     /* 👑 核心：定位到图片顶部 */
  }

  .disease-PC{
    display: none;
  }

  .introduce-txt strong{
    font-size: 6vw;
  }

  .bannerline {
      width: 100%;
      height: .7vw;
      background-color: #7c624d;
      margin-top: .5vw;
      margin-bottom: .5vw;
  }

  .nav { margin:auto; width: 100%;display: flex;flex-direction: row; }
  .nav li {
    width:33.3%; text-align:center; font-weight:bold;
    line-height:3em;
  }
  .nav li a {
    display:block; color:#FFF; line-height:2.5em;
  }
  .nav li a.active { background-color:#900; line-height:2.5em; }

  /* 主体单列 */
  .stationary {width:100%; }
  .menu { display:none; }  /* 隐藏左侧菜单 */
  .main {
    width:100%; min-height:500px;
    padding:3vw 3vw 10vw 3vw; border-radius:0 0 5vw 5vw;
  }
  .main p{
    font-size:3.8vw;
    margin: 3vw 1vw;
  }
  .main-block { width:100%; }

  /* 标题条 */
  .main-title {
    margin:8vw 0 6vw 0; width:100%; height:auto;
    line-height:8vw; font-size:4.6vw; font-weight:bold; color:#fff;
    font-family:宋体;
    background:url(img/bar2.jpg) no-repeat top center;
    background-size:90% 8vw; text-align:center;
  }
  .main-content-videocenter{
    display: block;
    width:85vw;
    border-radius:10px;
    background:#000;
    margin: auto;
  }

  .main-content p{
    text-indent: 2em;
  }

  /* 卡片 */
  .disease-intro {
    width:100%; margin:0 0 3vw 0;
    text-align:center; color:#7c624d; font-size:3vw;
  }
  .disease-card {
    width:100%; margin:0 0 6vw 0;
    background:#fdf6e3; border:1px solid #d9c9a3;
    border-left:5px solid #7c624d; border-radius:8px;
    border-bottom:2px solid #7c624d;
    padding:3vw 4vw 1vw 4vw;
  }
  .disease-card h3 { 
    color:#7c624d; 
    font-size:5vw; 
    margin-bottom:8px;
    border-bottom: .5vw #7c624d solid; }
  .disease-card p { 
    color:#505050; 
    line-height:2; 
    font-size:3.8vw;
  }
  .disease-card strong { 
    text-decoration: underline .3vw; 
    text-underline-offset: 1vw; 
  }
  .disease-card .tip { color:#a08050; font-size:3.5vw; font-style:italic; margin-top:6px; }

  /* 荣誉图片墙 */
  .honor-row { 
    width:100%; 
    margin:0 0 3vw 0; 
    text-align:center; 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
    flex-wrap: wrap;
  }
  .honor-row img { 
    width:45vw; 
    margin:2vw 0; 
  }

  .main-content-img{
    width: 35vw;
    margin-right: 2vw;
    margin-left: 2vw;
  }

  /* 大图 */
  .main-content-imgcenter3 {
    display: block;
    width: 100vw;   /* 左右 padding 之和：30px + 30px */
    max-width: none;
    margin: -3vw 0 0 -3vw;    /* 分别抵消 top 和 left padding */
    margin-bottom: 6vw;
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  }

  /* 页脚 */
  .footer {
    width:100%; min-height:50px;
    background-color:#7c624d; font-size:3vw;
    padding-top:5vw; padding-bottom:20vw;
    text-align:center;color:#FFF;
  }
  .footer-txt { width:90%; margin:auto; line-height:1.5em; padding:0 5vw; }
  .footer a { color:#FFF; }
  .footer-txt a:hover { color:#ccc; }

  /* 底部快捷栏 */
  .shortcut {
    position:fixed; left:0; bottom:0; width:100%;
    background:url(skins/cz.jpg); text-align:center;
    -webkit-box-shadow:#666 0 0 8px; font-size:3.5vw; z-index:100;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .shortcut a { text-decoration:none; flex-grow: 1; }
  .shortcut_botton1 {
    clear:both; margin:3vw 3vw 3vw 4vw; line-height:10vw;
    font-weight:bold; color:#FFF;
    border:#FFF 1px solid; border-radius:15vw;
    -webkit-box-shadow:#999 0 0 3vw;
    background: linear-gradient(145deg, #d9b382, #b8884a);
    letter-spacing: .3vw;
  }
}


/* ============================================
   荣誉证书图片 + 文字说明（Honour页）
   ============================================ */
.honor-figure {
  width:30%;
  margin:10px 0;
  text-align:center;
}
.honor-figure img {
  width:100%;
  border:#fff 5px solid;
}
.honor-caption {
  font-size:13px;
  color:#7c624d;
  line-height:1.5;
  padding:6px 4px;
  text-align:center;
}
@media (max-width:767px){
  .honor-figure { width:45vw; margin:2vw 0; }
  .honor-caption { font-size:3.2vw; }
}