@media (max-width: 768px) {
    .el-col-48{
      width: 100%;
    }
    .el-pagination.is-background .el-pager li{
      margin:0px;
    }
    .bannerdiv{
      margin-top: 160px;
    }
    .el-dialog{
      width: 80%;
    }
  }
  @media (min-width: 768px) {
    .el-col-48{
      width: 20%;
    }
    .page_div{
      margin-left: 45%;margin-top: 80px;
    }
    .footdiv{
      margin-left: 28%;
    }
  }
  .el-header, .el-footer {
    /*background-color: #B3C0D1;*/
    color: #333;
    text-align: center;
    line-height: 50px;
    border-bottom: 2px solid #F2F3F5;
  }
  .el-menu--horizontal>.el-menu-item.is-active{
    border-bottom: 0px;
  }
  .el-menu.el-menu--horizontal{
    border: 0px;
  }
  .dhtabs .el-tabs__item{
    font-size: 16px;
    /*color: #17181D;*/
  }
  .dhtabs .el-tabs__active-bar{
    background-color: transparent;
  }
  .el-tabs__nav-wrap::after{
    background-color: transparent;
  }
  .el-main {
    /*background-color: #E9EEF3;*/
    color: #333;
    /*text-align: center;*/
    /*line-height: 160px;*/
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-tabs__header{
    margin: 0;
  }
  .bg-purple {
    /*background: #d3dce6;*/
  }
  .el-carousel__indicators--outside{
    left:46%;
    z-index:2;
    height:20px;
    position: absolute;
  }
  .el-card.is-always-shadow{
    box-shadow:0 0 0 0;
  }
  .el-card{
    border: 0px;
  }
  .el-carousel__item--card{
    width:100%;
  }
  
  /*.el-carousel__item--card.is-in-stage:first-of-type{
    transform:translateX(-906.75px) scale(1) !important;

  }*/
  .el-carousel__item--card.is-active{
    transform:translateX(300.75px) scale(1) !important;
  }
  .el-progress-bar{
    padding-right: 0px;
  }
  .el-progress-bar__inner{
    background-color:#F5222D;
  }
  .el-carousel__button{
    height:4px;
  }
  .tab_bd .el-tabs__item{
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #1D2129;
  }
  .tab_bd .el-badge__content.is-dot{
    width:6px;
    height:6px;
    top:2px;
  }
  .el-pagination.is-background .btn-next,.el-pagination.is-background .btn-prev,.el-pagination.is-background .el-pager li {
    background-color: transparent;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#17181D;
  }
  
  .tbtitle{
    width:70%;
    height:18px;
    color: #1D2129;
  }
  .tbtitle:hover{
    color: #0678FD;
    cursor:default;
  }
  .back-to-top:hover{
    cursor:pointer
  }
  .zan_c:hover{
    cursor:pointer
  }
  .gz .el-col-2{
    width: 7.9%;
  }
  /*.image_zt{
    border-radius: 8px;
    padding: 1px 1px;
  }*/
  .image_zt:hover{
    cursor:pointer;
  }
  .zan_ct:hover{
    cursor:pointer;
    width:59px;
    height:85px;
  }
  .tjtc .el-popover{
    left:10%;
  }


  /* 容器样式，用于包裹滑动区域 */
    .slider-container {
      width: 100%;
      /*max-width: 1200px;*/
      margin: 0 auto;
      overflow: hidden;
      position: relative;
    }

    /* 滑动内容的包裹层，用于平移实现滑动 */
    .slider-wrapper {
      display: flex;
      transition: transform 0.3s ease;
    }

    /* 每个滑动项的样式，可根据实际调整 */
    .slider-item {
      flex: 0 0 auto;
      width: 9%;
      margin-right: 20px;
      /*text-align: center;*/
    }

    .slider-item img {
      /*width: 100%;*/
      height: auto;
      display: block;
    }

    /* 左右箭头样式 */
    /*.slider-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid #ccc;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #333;
    }*/

    .slider-arrow-left {
      left: 10px;
    }

    .slider-arrow-right {
      right: 10px;
    }
    /*推荐*/
    /* 标题样式 */
        .title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        /* 关闭按钮样式 */
        .close-btn {
            float: right;
            cursor: pointer;
            font-size: 16px;
            color: #999;
        }

        /* 推荐列表容器 */
        .recommend-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }

        /* 单个推荐项样式 */
        .recommend-item {
            width: calc(33.333% - 20px);
            min-width: 250px;
            border: 1px solid #eee;
            border-radius: 4px;
            padding: 10px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
        }

        .item-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .item-header img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .user-info {
            display: flex;
            flex-direction: column;
        }

        .user-name {
            font-size: 14px;
            font-weight: bold;
        }

        .stats {
            font-size: 12px;
            color: #999;
        }

        .item-img {
            width: 100%;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .thumbnails {
            display: flex;
            gap: 5px;
            margin-bottom: 10px;
        }

        .thumbnails img {
            width: calc(33.333% - 5px);
            border-radius: 4px;
        }

        .follow-btn {
            width: 100%;
            padding: 8px 0;
            text-align: center;
            background-color: #fff;
            border: 1px solid --color-text-1;
            color: #000000;
            border-radius: 4px;
            cursor: pointer;
        }

        .follow-btn:hover {
            background-color: #1D2129;
            color: #fff;
        }

        /* 感兴趣的人底部按钮容器 */
        .btn-group {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .btn {
            padding: 10px 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fff;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #f5f5f5;
        }

        .primary-btn {
            border: 1px solid #007bff;
            color: #fff;
            background-color: #007bff;
        }

        .primary-btn:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }

        .el-aside{
          overflow: hidden;
        }

        /* 标题样式 */
        .title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        /* 关闭按钮样式 */
        .close-btn {
            float: right;
            cursor: pointer;
            font-size: 16px;
            color: #999;
        }

        /* 推荐列表容器 */
        .recommend-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }

        /* 单个推荐项样式 */
        .recommend-item {
            width: calc(33.333% - 20px);
            min-width: 250px;
            border: 1px solid #eee;
            border-radius: 4px;
            padding: 10px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
        }


        /* 详情容器样式，用于包裹滑动区域 */
    .slid-xq .slider-container {
      width: 100%;
      /*max-width: 1200px;*/
      margin: 0 auto;
      overflow: hidden;
      position: relative;
    }

    /* 滑动内容的包裹层，用于平移实现滑动 */
    .slid-xq .slider-wrapper {
        margin-left: 60px;
      display: flex;
      transition: transform 0.3s ease;
    }

    /* 每个滑动项的样式，可根据实际调整 */
    .slid-xq .slider-item {
      flex: 0 0 auto;
      width: 167px;
      height: 204px;
      margin-right: 20px;
      text-align: center;
      /*border: 1px solid #F2F3F5;*/
      background: #F7F8FA;/*  */
    }

    .slid-xq .slider-item img {
      /*width: 100%;*/
      height: auto;
      display: block;
    }

    /* 左右箭头样式 */
    .slid-xq .slider-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      /*background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid #ccc;
      border-radius: 50%;*/
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      /*color: #333;*/
    }

    .slid-xq .slider-arrow-left {
      left: 10px;
    }

    .slid-xq .slider-arrow-right {
      right: 10px;
    }
    /* 详情容器样式，用于包裹滑动区域 */

    .avatar {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    .avatar:hover {
        transform: scale(1.1);
        z-index: 10;
    }

    /* 初始隐藏目标元素 */
    .scroll-triggered-div {
        position: fixed;
        bottom: 100px;
        right: 65px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease; /* 添加过渡动画 */
    }

    /* 显示目标元素的类 */
    .scroll-triggered-div.show {
        opacity: 1;
        visibility: visible;
    }

    /* 初始隐藏目标元素 */
    .diaright {
        position: absolute;
        top: 150px;
        right: 65px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease; /* 添加过渡动画 */
    }
    /* 显示目标元素的类 */
    .diaright.show {
        opacity: 1;
        visibility: visible;
    }

    .dianz .el-dialog{
      border-radius:20px;
    }

    .picdetail .el-carousel__item:nth-child(2n) {
      background-color: #000000;
    }
    
    .picdetail .el-carousel__item:nth-child(2n+1) {
      background-color: #000000;
    }
    
    .picdetail .el-dialog{
      background-color: #000000;
    }
    .reportj .el-radio{
      color:#3D3D3D;
    }
    .headbell .el-badge__content.is-fixed{
      top:10px;
    }
    .el-card__header{
      padding:5px 5px;
    }
    .el-popper{
      border-radius: 18px;
    }
    .headxj{
      height: 38px;
      border-radius: 5px;
    }
    .headxj:hover{
      background-color: #0678FD;
      color: #FFFFFF !important;
    }

    .startb .el-input__inner{
        background-color: #F2F3F5;
      }
      .el-dialog{
        border-radius: 12px;
      }
      .zhifu .el-descriptions__body{
        background-color:#F7F8FA;
        border: 1px solid #E5E6EB;
        padding: 10px 10px;
        border-radius: 10px;
      }
      .el-statistic .con .number{
        font-size: 14px;
        color:#F53F3F;
      }
      .nameH{
        color: #000000;
      }
      .nameH:hover{
        cursor: default;
        color: #0678FD;
      }
      .bg-pp{
        background: #FFFFFF;
        cursor: default;
        border-radius: 8px;
      }
      .bg-pp:hover{
        background: #F7F8FA ;
      }