/* ========== 全局重置 ========== */
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      overflow-x: hidden;
      font-family: 'Microsoft YaHei', sans-serif;
      color: var(--text-dark);
      scroll-behavior: smooth;
    }

    .layui-container {
      padding-left: 15px;
      padding-right: 15px;
    }

    /* ========== 导航栏 ========== */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      transition: background-color 0.5s ease, box-shadow 0.3s ease;
      background-color: transparent;
    }

    .site-header .layui-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 0;
    }

    .site-header .logo h2 {
      color: var(--header-bg-text);
      font-size: 2rem;
      transition: color 0.3s;
    }

    /* 导航项 - 默认白色 */
    .site-header .layui-nav {
      background: none !important;
    }
    .site-header .layui-nav .layui-nav-item a {
      color: var(--header-bg-text) !important;
      font-size: 1.5rem;
      padding: 0 22px;
    }
    .site-header .layui-nav .layui-this a,
    .site-header .layui-nav .layui-nav-item a:hover {
      color: var(--primary-light) !important;
    }
    .site-header .layui-nav .layui-this:after,
    .layui-nav-bar {
      background: var(--primary-light) !important;
    }

    .site-header .hottel,.site-header .hottel .layui-icon{
      color: var(--header-bg-text);
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* 滚动后样式 */
    .site-header.scrolled {
      background-color: var(--header-bg-scrolled);
      box-shadow: var(--header-shadow);
    }
    .mobile-menu-btn span,
    .site-header.scrolled .logo h2,
    .site-header.scrolled .hottel,
    .site-header.scrolled .hottel .layui-icon,
    .site-header.scrolled .layui-nav .layui-nav-item a {
      color: var(--header-bg-scrolled-text) !important;
    }
    
    .site-header.scrolled .mobile-menu-btn span{  background: #000000;}
    .site-header.scrolled .layui-nav .layui-this:after {
      background: var(--primary) !important;
    }
    
    
    .mobile-menu-btn.scrolled span{  background: #000000;}
        
    
    
.authSection{position: unset;}
.authSection .nav-links a {text-decoration: none;
color: var(--gray-600);font-weight: 500;
transition: all 0.2s ease;position: relative;
padding: 0.5rem 0;    font-size: 0.9rem;}
.authSection .nav-links a:hover {color: var(--primary);}
.authSection .nav-links a::after {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background: var(--primary);transition: width 0.3s ease;}
.authSection .nav-links a:hover::after {width: 100%;}
.authSection .auth-section {display: flex;align-items: center;gap: 1rem;}
.authSection .user-info {display: flex;align-items: center;gap: 0.6rem;background: white;padding:0.12rem 0.6rem 0.12rem  0.15rem;border-radius: 999px;border: 1px solid var(--gray-200);font-size: 0.6rem;box-shadow: var(--shadow-sm);}
.authSection .user-avatar {width: 28px;height: 28px;border-radius: 50%;background: var(--primary);color: white;display: flex;align-items: center;justify-content: center;font-size: 0.6rem;font-weight: bold;}
.authSection .lang-switcher{display:none;}
.authSection .lang-switcher {background: transparent;border: 1px solid var(--gray-300);color: var(--gray-600);cursor: pointer;font-size: 0.6rem;padding: 0.2rem 0.6rem;border-radius: 8px;transition: all 0.2s;}
.authSection .lang-switcher:hover {background: var(--primary-light);border-color: var(--primary);color: var(--primary-dark);}
.authSection .loginbtn {background: #da0003;border: 1px solid #ff0000;color: #ffffff;cursor: pointer;font-size: 0.9rem;padding: 0.3rem 0.6rem;border-radius: 6px;transition: all 0.2s;}
.authSection .loginbtn:hover {background: var(--primary-light);border-color: var(--primary);color: var(--primary-dark);}

    
    
    
    .site-header .layui-nav .layui-nav-child a:hover{background-color: var(--header-bg-scrolled);}
    
    .site-header .layui-nav-child{
      background-color: var(--header-bg-scrolled);
      box-shadow: var(--header-shadow);
      color: var(--header-bg-scrolled-text) !important;
        border: 1px solid  var(--header-bg-scrolled);}
        
    
        
    


    .site-header:hover {
          background-color: var(--header-bg-scrolled);
          box-shadow: var(--header-shadow);
            color: var(--header-bg-scrolled-text) !important;
            
         .logo h2,.hottel,.hottel i{color:var(--header-bg-scrolled-text) ;}
    }
    
    .site-header:hover .layui-nav .layui-nav-item a {
      color: var(--header-bg-scrolled-text) !important;
    }

    
        
        
        
    /* ========== 移动端菜单 ========== */
    .mobile-menu-btn {
      display: none;
      width: 30px;
      height: 30px;
      cursor: pointer;
      position: fixed;
      top: 10px;
      right: 20px;
      z-index: 1001;
    }
    .mobile-menu-btn span {
      display: block;
      width: 100%;
      height: 3px;
      background: white;
      margin: 5px 0;
      transition: all 0.3s;
    }

    .mobile-nav {
      position: fixed;
      top: 0px;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 999;
      display: none;
    }
    .mobile-nav.active {
      display: block;
    }
    .mobile-nav ul {
      list-style: none;
      padding: 20px;
      margin: 0;
      text-align: center;
    }
    .mobile-nav li {
      margin: 15px 0;
    }
    .mobile-nav a {
      color: white;
      text-decoration: none;
      line-height: 4rem;
    font-size: 1.6rem;
    }
    .mobile-nav a:hover {
      color: var(--primary-light);
    }



    /* ========== PC 视频 Banner ========== */
    .pc-banner {
      position: relative;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      text-align: center;
    }
    .pc-banner .banner-video-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    .pc-banner video {
      object-fit: cover;
      width: 100%;
      height: 100%;
      display: block;
    }
    .pc-banner .banner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2;
    }
    .pc-banner .banner-content {
      position: relative;
      z-index: 3;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    }
    .pc-banner .banner-content > div {
      font-size: 48px;
      font-weight: bold;
    }
    .pc-banner .banner-content span {
      display: block;
      font-size: 32px;
      margin-top: 10px;
    }

    /* ========== 移动端轮播 Banner ========== */
    .mobile-banner {
      display: none;
      height: 100vh;
      width: 100%;
    }
    .mobile-banner .swiper-slide img {
      width: 100%;
      /*height: 100%;*/
      object-fit: cover;
    }






/* 服务卡片基础样式 */
.service-card {
  padding: 30px;
  text-align: center;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 左侧卡片 - 默认浅灰，悬停变白 */
.service-card-left {
  background-color: #f9f9f9;
}

.service-card-left:hover {
  background-color: white;
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* 中间卡片 - 始终白色 */
.service-card-center {
  background-color: white;
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* 右侧卡片 - 默认浅灰，悬停变白 */
.service-card-right {
  background-color: #f9f9f9;
}

.service-card-right:hover {
  background-color: white;
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* 图标和文字样式 */
.service-card h3 {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 15px;
}

.service-card p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
}








    /* ========== 内容区 ========== */
    .content-section {
      background: var(--gray-100);
      padding: 10px 0 0 0;
    }
    

    
    
    
    .product-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 20px;
    }

    .product-item {
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      background: #fff;
    }

    .product-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    .product-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .product-title {
      padding: 15px;
      font-size: 14px;
      color: #333;
      text-align: center;
      margin: 0;
    }


    
    
    
    
    
    
    


/* ========== Footer ========== */
footer {background: var(--gray-600);color: var(--gray-100);padding: 20px 0 0 0;text-align: center;}
/* 联系信息卡片 */
footer .contact-card {max-width: 900px;margin: 0 auto 40px;background: white;border-radius: 150px;box-shadow: 0 10px 30px rgba(0,0,0,0.2);overflow: hidden;display: flex;justify-content: space-between;padding: 20px 100px 20px 100px;margin-top: -115px;}
footer .card-item {flex: 1;padding: 10px;text-align: left;border-right: 1px solid #eee;}
footer .card-item:last-child {border-right: none;}
footer .card-item .icon {width: 120px;display: inline-flex;justify-content: center;margin-bottom: 10px;padding-top: 8px;}
footer .card-item .icon .layui-icon{color: var(--primary);font-size: 50px;}
footer .card-item h4 {margin: 0 0 10px;font-size: 1rem;color: #333;}
footer .card-item p {margin: 0;font-size: 0.7rem;color: #666;line-height: 1.6;}

footer .page-footer .container{display: flex;justify-content: space-between;align-items: center; width: 100%;}
footer .page-footer .container p{display: flex;align-items: center; color:var(--gray-300);}
footer .page-footer .container img{height:18px;}
footer .page-footer .container a{color:var(--gray-200);}
footer .page-footer .container a:hover{color:var(--gray-100);}











.floating-panel {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  
  /* 默认隐藏：不可见、不可点击、有过渡动画 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* 防止鼠标穿透点击 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.panel-item {
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: all 0.3s;
  color: #555;
  font-size: 18px;
}

.floating-panel .moon{display:none;/*夜间模式*/}
.floating-panel .theme{display:none;/*主题切换*/}
.floating-panel .weixin{display:none;/*微信客服*/}
.floating-panel .phone{display:none;/*联系电话*/}
.floating-panel .share{display:none;/*分享页面*/}
.floating-panel .feedback{display:none;/*意见反馈*/}
.floating-panel .top{display:;/*返回顶部*/}
.floating-panel .close{display:none;/*收起*/}
.panel-item:hover {
  background: #f8f8f8;
  transform: scale(1.1);
}

.content-section.breadcrumb{padding:0;}
.content-section.breadcrumb .layui-container{padding-top: 40px;min-height:40px;border-bottom:1px solid #ccc;}
.page-breadcrumb{display: flex;}
.page-breadcrumb .layui-icon-next{margin:0 10px;}
.page-breadcrumb li,
.page-breadcrumb li a,
.page-breadcrumb li i,
.page-breadcrumb li span{font-size:1.2rem;}



.pcVertical{border-right:1px solid #ccc;}
.side-nav-pc .layui-nav-tree .layui-nav-item>a{font-size: 1.1rem;}



.pagination{display:flex;justify-content:center;align-items:center;gap:8px;list-style:none;padding:20px 0;margin:0}
.pagination li{display:inline-block}
.pagination li a,.pagination li span{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;font-size:14px;font-weight:500;color:#666;text-decoration:none;background:#fff;border:1px solid#e0e0e0;border-radius:8px;transition:all 0.3s ease}
.pagination li a:hover{color:#bfbfbf;background:#e6f7ff;border-color:#bfbfbf;transform:translateY(-2px);box-shadow:0 4px 12px rgba(24,144,255,0.15)}
.pagination li.active span{color:#fff;background: linear-gradient(135deg, #ababab 0%, #6b6b6b 100%);border-color:#bfbfbf;cursor:default;box-shadow: 0 4px 12px rgb(157 157 157 / 30%);}
.pagination li.disabled a,.pagination li.disabled span{color:#000;background:#f5f5f5;border-color:#e0e0e0;cursor:not-allowed}@media(max-width:768px){.pagination{gap:4px}.pagination li a,.pagination li span{min-width:32px;height:32px;font-size:12px;padding:0 8px}}





/* ==================== 文章列表容器 ==================== */
.article-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding:22px 0px;max-width:1400px;margin:0 auto}.article-item{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.06);transition:all 0.35s cubic-bezier(0.4,0,0.2,1)}.article-item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.12)}.article-item a{display:block;text-decoration:none;color:inherit;height:100%}.article-item img{width:100%;height:200px;object-fit:cover;display:block;transition:transform 0.5s ease}.article-item:hover img{transform:scale(1.05)}.article-item .img-wrapper{position:relative;overflow:hidden}.article-item h3{padding:16px 18px 10px;font-size:16px;font-weight:600;color:#2c3e50;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.article-item .summary{padding:0 18px 18px;font-size:13px;color:#7f8c8d;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;min-height:20px}
.article-item{position:relative;border:1px solid transparent}.article-item::before{content:'';position:absolute;inset:0;padding:1px;border-radius:12px;background:linear-gradient(135deg,#ededed),#dddddd));-webkit-mask:linear-gradient(#fff 0 0)content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0)content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 0.3s ease}.article-item:hover::before{opacity:1}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.article-item{animation:fadeInUp 0.5s ease forwards}.article-item:nth-child(1){animation-delay:0.1s}.article-item:nth-child(2){animation-delay:0.2s}.article-item:nth-child(3){animation-delay:0.3s}.article-item:nth-child(4){animation-delay:0.4s}.article-item:nth-child(5){animation-delay:0.5s}.article-item:nth-child(6){animation-delay:0.6s}@media(prefers-color-scheme:dark){body{background:#1a1a2e;color:#eee}.article-item{background:#16213e;box-shadow:0 2px 12px rgba(0,0,0,0.3)}.article-item:hover{box-shadow:0 12px 30px rgba(0,0,0,0.5)}.article-item h3{color:#e8e8e8}.article-item.summary{color:#a0a0a0}}



/* ==================== 响应式设计 ==================== */
@media (max-width: 1200px) {
    .article-list {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 20px;
        padding: 30px 15px;
    }
}

@media (max-width: 768px) {
    .article-list {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        gap: 16px;
        padding: 20px 0px;
    }
    
    .article-item img {
        height: 180px;
    }
    
    .article-item h3 {
        font-size: 15px;
        padding: 14px 16px 8px;
    }
    
    .article-item .summary {
        font-size: 12px;
        padding: 0 16px 16px;
    }
}

@media (max-width: 480px) {
    .article-list {
        padding: 15px 10px;
    }
    
    .article-item {
        border-radius: 10px;
    }
    
    .article-item img {
        height: 160px;
    }
}





/* ========== 移动端底部图标 ========== */
.m_bot_fix,.placeholder{display:none;}
@media screen and (max-width:767px){
    .pcVertical{border-right:0;}
    footer .page-footer .container{flex-direction: column;}
    .placeholder{display:block;height:57px;}
    .m_bot_height{height:10px;}
    .m_bot_fix.hm_bot_fix{bottom:-80px;}
    .m_bot_fix{display:block;position:fixed;left:0;bottom:0;z-index:10000;width:100%;border-top:solid 1px #dfdfdf;background:#fff;transition:all .35s;}
    .m_bot_fix ul{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
    .m_bot_fix ul li{-webkit-flex:1;-ms-flex:1;flex:1;}
    .m_bot_fix ul li a{height:60px;color:#333;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;position:relative;}
    .m_bot_fix ul li:not(:nth-last-of-type(1)) a:after{content:"";position:absolute;width:1px;height:30px;background:#dfdfdf;top:50%;right:0;transform:translateY(-50%);}
    .m_bot_fix ul li a span{height:24px;position:relative;}
    .m_bot_fix ul li a span em{position:absolute;top:-4px;right:-10px;width:16px;height:16px;line-height:16px;border-radius:50%;background:#d80000;text-align:center;font-size:12px;color:#fff;font-family:arial;animation:ballShow 1.2s cubic-bezier(.43,.2,.02,1) infinite;}
    .m_bot_fix ul li a span .iconfont{font-size:20px;}
    .m_bot_fix ul li a p{font-size:13px;}
    @keyframes ballShow{0%{opacity:0;}100%{opacity:1;}}
}







@media (max-width: 480px) {
  .product-list {
    grid-template-columns: 1fr;
  }
}



    /* ========== 响应式断点 ========== */
    @media (max-width: 768px) {
        
.content-section.breadcrumb .layui-container{padding-top: 15px;}
     .side-nav-pc .layui-nav-tree{display:none;}
    .authSection {
        position: absolute;
        top: 11px;
        right: 75px;
    }
  .product-list {
    grid-template-columns: repeat(2, 1fr);
  }
  
      .site-header .layui-nav,
      .pc-banner {
        display: none;
      }
    
      .mobile-menu-btn {
        display: block;
      }

      .mobile-banner {
        display: block;
      }

      .pc-banner .banner-content > div {
        font-size: 28px;
      }
      .pc-banner .banner-content span {
        font-size: 18px;
      }
      .site-header .layui-container{padding:1px 8px 2px 8px;}
      .site-header .logo h2{font-size:1.8rem;}
      .hottel{display:none!important;}
      
        .contact-card{display:none!important;}

    }