/* 基础样式 - 如果没有Tailwind，这些可能需要大量扩展才能恢复设计 */
        .containeri {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .rounded-lg {
            border-radius: 0.5rem;
        }
        .bg-white {
            background-color: #fff;
        }
        .grid {
            display: grid;
        }
        .grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        @media (min-width: 768px) { /* md breakpoint */
            .md\:grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        .gap-8 {
            gap: 2rem;
        }
        .mb-4 {
            margin-bottom: 1rem;
        }
        .w-full {
            width: 100%;
        }
        .h-auto {
            height: auto;
        }
        .object-cover {
            /*object-fit: cover;*/
        }
        .aspect-\[4\/3\] {
            aspect-ratio: 4 / 3;
        }
        .flex {
            display: flex;
        }
        .space-x-2 > :not([hidden]) ~ :not([hidden]) {
            --tw-space-x-reverse: 0;
            margin-right: calc(0.5rem * var(--tw-space-x-reverse));
            margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
        }
         .sm\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
             --tw-space-x-reverse: 0;
            margin-right: calc(0.75rem * var(--tw-space-x-reverse));
            margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
         }
        .justify-center {
            justify-content: center;
            padding-bottom: 10px;
        }
        .w-16 { width: 4rem; }
        .h-12 { height: 3rem; }
        @media (min-width: 640px) { /* sm breakpoint */
            .sm\:w-20 { width: 5rem; }
            .sm\:h-16 { height: 4rem; }
        }
        .cursor-pointer { cursor: pointer; }
        .border-2 { border-width: 2px; }
        .border-transparent { border-color: transparent; }
        .hover\:opacity-80:hover { opacity: 0.8; }
        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        
        /* 自定义一些活动状态的样式 */
        .thumbnail-active {
            border: 2px solid #3b82f6; /* Tailwind blue-500 - 替换为实际颜色值 */
            opacity: 1;
        }
        .tab-active {
            font-weight: bold;
            color: #fff !important;
            background-color: #4c7b9a !important;
            border-bottom: 0;
            margin-bottom: -2px;

        }
        /* 基础过渡效果 */
        #mainProductImage {
            transition: opacity 0.3s ease-in-out;
        }
        .detail-content {
            transition: opacity 0.3s ease-in-out;
        }
        .hidden {
            display: none;
        }
        /* 更多Tailwind类对应的CSS需要在这里手动添加 */
        .text-2xl { font-size: 1.5rem; line-height: 2rem; }
        @media (min-width: 640px) { /* sm breakpoint */
            .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
        }
        .font-bold { font-weight: 700; }
        .text-gray-800 { color: #2d3748; } /* 示例颜色 */
        .text-gray-700 { color: #4a5568; } /* 示例颜色 */
        .text-gray-600 { color: #718096; } /* 示例颜色 */
        .mb-6 { margin-bottom: 1.5rem; }
        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
        .font-semibold { font-weight: 600; }
        .mb-2 { margin-bottom: 0.5rem; }
        .list-disc { list-style-type: disc; }
        .list-inside { list-style-position: inside; }
        .list-inside li{width: 100%;
    display: table;
    padding: 2px 0;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap; /* 允许项目换行 */
    box-shadow: inset 0 -1px 0 0 #ff9840eb;
}

    .list-inside li em{display: table-cell;
    width: 36%;
    color: #aaa;font-weight: bold;}
        .space-y-1 > :not([hidden]) ~ :not([hidden]) {
            --tw-space-y-reverse: 0;
            margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
            margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
        }
        .font-medium { font-weight: 500; }
        .mt-8 { margin-top: 2rem; }
        .bg-blue-600 { background-color: #2563eb; } /* 示例颜色 */
        .hover\:bg-blue-700:hover { background-color: #1d4ed8; } /* 示例颜色 */
        .text-white { color: #fff; }
        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
        .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
        .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .duration-150 { transition-duration: 150ms; }
        .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
        .mt-12 { margin-top: 3rem; }
        .border-b { border-bottom-width: 1px; }
        .border-gray-200 { border-color: #e5e7eb; } /* 示例颜色 */
        .-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
         @media (min-width: 640px) { /* sm breakpoint */
            .sm\:-mx-4 { margin-left: -1rem; margin-right: -1rem;border-bottom: 2px solid #014099; }
         }
        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem;border: 1px solid #ffffff;}
        /*.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }*/
         @media (min-width: 640px) { /* sm breakpoint */
            .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; }
            .sm\:py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
         }
        .hover\:text-blue-600:hover { color: #fff;background-color: #0052d9; } /* 示例颜色 */
        .border-b-2{background-color: #deb;}
        .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
        .leading-relaxed { line-height: 1.625;border: 1px solid #e5e7eb;padding: 1.5rem; }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .mb-3 { margin-bottom: 0.75rem; }
        /* 为表格添加一些基础样式 */
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #e5e7eb; text-align: left;}
        th { background-color: #f9fafb; font-weight: 600; }
        tr:hover { background-color: #f9fafb; }
        ol.list-decimal { list-style-type: decimal; }
        .space-y-2 > :not([hidden]) ~ :not([hidden]) {
            --tw-space-y-reverse: 0;
            margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
            margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
        }
        .space-y-4 > :not([hidden]) ~ :not([hidden]) {
            --tw-space-y-reverse: 0;
            margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
            margin-bottom: calc(1rem * var(--tw-space-y-reverse));
        }
        .p-3 { padding: 0.75rem; }
        .bg-gray-50 { background-color: #f9fafb; } /* 示例颜色 */
        .rounded-md { border-radius: 0.375rem; }
        .mt-3 { margin-top: 0.75rem; }
.product-gallery {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }




<div class="container">
  <div class="anchor-start">滚动到此区域开始悬浮</div>
  
  <div class="sticky-box">
    需要悬浮的内容
  </div>
  
  <div class="anchor-end">滚动到此区域取消悬浮</div>
</div>





/* 基础样式 */
.orion-menu {
  height: 100vh; /* 起始锚点高度 */
  background: lightblue;
}
.xuanfu {
  position: sticky;
  top: 139px; /* PC端默认样式 */
  z-index: 10; /* 确保悬浮层在内容上方 */
  background: white; /* 添加背景防止透明穿透 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 添加阴影分隔层 */
}
@media screen and (max-width: 768px) {
  .xuanfu {
    top: 88px; /* 移动端覆盖样式 */
  }
}

/* 悬浮取消逻辑 */
.ny_news_ye ~ .sticky-box {
  position: static; /* 当滚动到结束锚点后取消悬浮 */
}
@media screen and (max-width: 768px) {
  .px-3 {
    width: 100%;
  }
}