body{background-color: #c4dcd9;}
    
.sinabloghead { 
  height: 450px; 
  width: 950px;
  background: url(background.gif) no-repeat center center;
}	







/* 标签与分类    外层容器：开启 Flex 布局，并允许换行 */
.articalTag {
    display: flex;
    flex-wrap: wrap; /* 核心：空间不足时自动把后面的内容挤到下一行 */
}
/* 内部组：确保标题（如“标签：”）和内容在同一水平线，内容长时自动对齐 */
.info-group {
    display: flex;
    align-items: flex-start; /* 顶部对齐 */
}
/* 标题样式：防止“标签：”或“分类：”这几个字自己被折断换行 */
.SG_txtb {
    white-space: nowrap; 
    font-weight: bold; /* 如果需要加粗 */
}






/* 移动端自适应补充样式  */
@media screen and (max-width: 768px) {



  /* 外层容器与父元素适配屏幕宽度 (覆盖原 CSS 中的 固定宽度) */
  .sinablogbody , .articalContent , .sinablogfooter{
    width: 100% !important;
  }
  
  .sinablogbody {
     /* 为平移效果提供定位上下文和动画 */
    position: relative;
    transition: transform 0.3s ease;
  } 

  /* 平移左边栏右边栏的父对象 */
  body.show-left .sinablogbody {
    transform: translateX(210px);
  }
  body.show-left {
    overflow-x: hidden; /* 防止平移后出现横向滚动条 */
  }



  /* 在手机端隐藏左边栏，改为绝对定位并在左侧隐藏，等待平移 */
  #column_1 {
    display: block !important;
    position: absolute !important;
    left: -210px !important;
    top: 0;
    width: 210px !important;
    background-color: #fff; /* 防止背景透明导致内容重叠显示不清 */
    z-index: 1000;
  } 
  
  /* 3. 让右边正文栏展开适配整个父元素宽度 (覆盖原固定宽度) */
  #column_2 {
    width: 100% !important;
    float: none !important;
  }


  /* 4. 防止正文内的图片超出手机屏幕宽度 */
  .articalContent img{
    max-width: 100% !important;
    height: auto !important;
  }


  
  /* 显示左边栏按钮 */
  .mobile-only-btn {
    display: inline-block !important;
    cursor: pointer;
  }






  /* 上面是必须的,下面是不同平台自定义的样式 */





  /* 顶部图片 手机端 2:1 接近图片原比例 */
  .sinabloghead{
    width:100%;
    height: 47vw; 
    background-position: center center;
    background-size: 100% auto;  /* 宽度100%，高度自动等比缩放 */
  }

  /* 隐藏头部图片上的文字*/
  .headarea{
    display: none !important;
  }

  .artical{ 
    padding-left:14px;
    padding-right:14px;
  }




  

  

}