@charset "utf-8";
body { background:#f2f2f2; -webkit-tap-highlight-color: rgba(0,0,0,0); }
.width-1200 { margin:0 auto; width:1200px; }

/* ========== PC端样式（≤640px隐藏） ========== */
.indexnav { background: #f2f2f2; padding: 10px 0; }
.indexnav .topnav { line-height:40px; }
.indexnav .topnav .logo { width: 160px; height: 40px;}
.indexnav .topnav .logo img { width: 100%; height: 40px; object-fit: contain; }

/* PC导航：手机端隐藏 */
.pc-navs .navs-ul { list-style:none; padding:0; margin:0; font-size:0; }
.pc-navs .navs-li { display:inline-block; list-style:none; padding:0; margin:0; position:relative; }
.pc-navs .navs-li:hover .navs-ul-ul { opacity:1; transform:translate3d(0,0,0); visibility:visible; }
.pc-navs .navs-li .pc-navs-title { display:block; padding:0px 20px; font-size:12px; text-align:center; color: #252525; }

.pc-navs .navs-ul-ul { position:absolute; min-width:200px; opacity:0; transition:all .3s ease 0s; visibility:hidden; transform:translate3d(0,10px,0); box-shadow:0 3px 10px 0 rgba(51,51,51,0.1); z-index:20; }
.pc-navs .navs-li-li { line-height: 18px; display:block; z-index:1; }
.pc-navs .navs-li-li .pc-navs-ztitle { display:block; padding:18px 20px; font-size:12px; color: #252525; text-align:left; }
.pc-navs .navs-li-li .pc-navs-ztitle:hover { background: #fff; color: #252525; }

/* 汉堡按钮：PC隐藏 */
.nav-toggle-btn { display: none; }

/* ========== 手机端 ≤640px ========== */
@media (max-width: 1200px) {
    .width-1200 {
        width: 100% !important;
    }
    /* 汉堡按钮：右上角 */
    .nav-toggle-btn {
        display: block !important;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #252525;
        font-size: 28px;
        cursor: pointer;
        padding: 0 15px;
    }

    /* 隐藏PC导航 */
    .pc-navs { display: none !important; }
    
    #offside-nav {
        width: 300px;
        padding: 20px;
    }
    
    .mobile-navs .ui-offside-right-close { top: auto; }
  
}
@media (min-width: 1201px) {
    /* 自动收回右侧侧边栏 */
    .ui-offside-right {
        right: -100% !important;
    }
    /* 自动隐藏遮罩层 */
    .ui-offside-mask {
        display: none !important;
    }
}
@media (max-width: 640px) {
    
    
}
@media (min-width: 641px) {

}

.home {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  transition: all 0.2s ease; /* 让变化更丝滑（可选） */
}

.home .title {
    display: inline-block; /* 就是加这一行！ */
    background-image: linear-gradient(to right, #e20000 0, #ffaa3d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 从 1440px 开始，宽度慢慢缩小，左右边距慢慢出现 */
@media (min-width: 1440px) {
  .home {
    /*
      公式解释：
      1440px 时：边距 0
      无限拉大：边距最大 140px
      中间全部平滑过渡
    */
    max-width: clamp(
      calc(100% - 280px),
      100%,
      calc(100% - ((100vw - 1440px) * 0.2))
    );
  }
}

/* ========================
   图片横向滑动样式
======================== */
.slider-container {
  position: relative;
  width: 100%;
  margin: 20px 0;
}

.slider-wrapper {
  width: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch; /* 苹果手机惯性滚动 */
}

.slider-track {
  display: flex;
  gap: 15px;
  transition: transform 0.3s ease;
  width: max-content;
  
  padding-left: 20px; 
  padding-right: 20px;
  box-sizing: border-box;
}

.slider-track img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  user-select: none;
}

/* 左右按钮 */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eee;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s;
}
.slider-left {
  left: 0;
}
.slider-right {
  right: 0;
}

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

/* 手机端 ≤640 自动隐藏按钮 */
@media (max-width: 640px) {
  .slider-btn {
    display: none !important;
  }
}