/* .fp_section_1 样式已移除，保留类名用于结构 */

:root, :host {
    --spacing: 0;
}


.fp_section_2 {
    /* background: blue; */
    background: url(../image/home/wlqz/bg.jpg?v=2.0) no-repeat center center;
    background-size: cover;
}

.fp_section_3 {
    /* background: url(../image/home/rjbw/bg.jpg?v=2.0) no-repeat center center;
    background-size: cover; */
    /* background-color: #A93830; */
    background-color: #ffffff;
}

.fp_section_4 {
    /* background: yellow; */
    background: url(../image/home/ywqn/bg2.png?v=2.0) no-repeat center center;
    background-size: cover;
}

.fp_section_5 {
    /* background: purple; */
    background: url(../image/home/zwqh/bg.jpg?v=4.0) no-repeat center center;
    background-size: cover;
}

.fp_section_6 {
    /* background: orange; */
    background: url(../image/home/ssfw/bg2.png?v=2.0) no-repeat center center;
    /* background: url(../image/ssfw/bg2.jpg) no-repeat center center; */
    background-size: cover;
}

.fp_section_7 {
    /* background: brown; */
    background: url(../image/home/wgxd/bg3.png?v=4.0) no-repeat center center;
    background-size: cover;
}

/* 味贯西东：上方 8 张图进入动画（从上方依次落下，1.5s 内完成） */
.wgxd-anim {
    opacity: 0;
    /* transform: translateY(-40px); */
    /* transition: transform 0.3s ease-out; */
    /* transform: scale(1); */
}

.wgxd-anim picture {
    transition: transform 0.5s ease-out;
    transform: scale(1);
}

.wgxd-anim picture:hover {
    transform: scale(1.5);
}

.wgxd-anim2 {
    opacity: 0;
    /* transform: translateY(40px); */
    /* transition: transform 0.3s ease-out; */
    /* transform: scale(1); */
}

.wgxd-anim2 picture {
    transition: transform 0.5s ease-out;
    transform: scale(1);
}

.wgxd-anim2 picture:hover {
    transform: scale(1.5);
}

.wgxd-anim2:hover {
    transform: scale(1.5);
}

.wgxd-anim-play {
    animation: wgxd-drop-in 1.2s ease-out forwards;
}

.wgxd-anim-play2 {
    animation: wgxd-drop-in2 1.2s ease-out forwards;
}

.wgxd-grape-box {
    animation-delay: 0s;
}

.wgxd-camel-box {
    animation-delay: 0.1s;
}

.wgxd-shiliu-box {
    animation-delay: 0.2s;
}

.wgxd-hetao-box {
    animation-delay: 0.3s;
}

.wgxd-garlic-box {
    animation-delay: 0.4s;
}

.wgxd-camel2-box {
    animation-delay: 0.5s;
}

.wgxd-xiangcai-box {
    animation-delay: 0.6s;
}

.wgxd-yangcong-box {
    animation-delay: 0.7s;
}

.wgxd-hujiao-box {
    animation-delay: 0s;
}

.wgxd-spinach-box {
    animation-delay: 0.15s;
}

.wgxd-merchant-ship-box {
    animation-delay: 0.3s;
}

.wgxd-carrot-box {
    animation-delay: 0.45s;
}

.wgxd-chili-box {
    animation-delay: 0.6s;
}

.wgxd-corn-box {
    animation-delay: 0.75s;
}

.wgxd-tea-box {
    animation-delay: 0.9s;
}

.wgxd-merchant-ship2-box {
    animation-delay: 1.05s;
}

.wgxd-tofu-box {
    animation-delay: 1.2s;
}

@keyframes wgxd-drop-in {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wgxd-drop-in2 {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 味贯西东：顶部线路 6 张图，进入 fp_section_7 时自上而下依次落入 */
.wgxd-group2-anim picture {
    opacity: 0;
}

.wgxd-group2-item-1.wgxd-group2-anim-play picture {
    animation: wgxd-group2-drop-in 0.85s ease-out forwards;
    animation-delay: 0s;
}

.wgxd-group2-item-2.wgxd-group2-anim-play picture {
    animation: wgxd-group2-drop-in 0.85s ease-out forwards;
    animation-delay: 0.12s;
}

.wgxd-group2-item-3.wgxd-group2-anim-play picture {
    animation: wgxd-group2-drop-in 0.85s ease-out forwards;
    animation-delay: 0.24s;
}

.wgxd-group2-item-4.wgxd-group2-anim-play picture {
    animation: wgxd-group2-drop-in 0.85s ease-out forwards;
    animation-delay: 0.36s;
}

.wgxd-group2-item-5.wgxd-group2-anim-play picture {
    animation: wgxd-group2-drop-in 0.85s ease-out forwards;
    animation-delay: 0.48s;
}

.wgxd-group2-item-6.wgxd-group2-anim-play picture {
    animation: wgxd-group2-drop-in 0.85s ease-out forwards;
    animation-delay: 0.6s;
}

@keyframes wgxd-group2-drop-in {
    from {
        opacity: 0;
        transform: translateY(-48px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wgxd-group2-anim picture {
        opacity: 1;
    }

    .wgxd-group2-item-1.wgxd-group2-anim-play picture,
    .wgxd-group2-item-2.wgxd-group2-anim-play picture,
    .wgxd-group2-item-3.wgxd-group2-anim-play picture,
    .wgxd-group2-item-4.wgxd-group2-anim-play picture,
    .wgxd-group2-item-5.wgxd-group2-anim-play picture,
    .wgxd-group2-item-6.wgxd-group2-anim-play picture {
        animation: none;
    }
}

/* 味贯西东：底部线路 5 组元素，进入 fp_section_7 时自下而上依次进入 */
.wgxd-group3-bottom-anim picture {
    opacity: 0;
}

.wgxd-group3-bottom-item-1.wgxd-group3-bottom-anim-play picture {
    animation: wgxd-group3-rise-in 0.85s ease-out forwards;
    animation-delay: 0s;
}

.wgxd-group3-bottom-item-2.wgxd-group3-bottom-anim-play picture {
    animation: wgxd-group3-rise-in 0.85s ease-out forwards;
    animation-delay: 0.12s;
}

.wgxd-group3-bottom-item-3.wgxd-group3-bottom-anim-play picture {
    animation: wgxd-group3-rise-in 0.85s ease-out forwards;
    animation-delay: 0.24s;
}

.wgxd-group3-bottom-item-4.wgxd-group3-bottom-anim-play picture {
    animation: wgxd-group3-rise-in 0.85s ease-out forwards;
    animation-delay: 0.36s;
}

.wgxd-group3-bottom-item-5.wgxd-group3-bottom-anim-play picture {
    animation: wgxd-group3-rise-in 0.85s ease-out forwards;
    animation-delay: 0.48s;
}

@keyframes wgxd-group3-rise-in {
    from {
        opacity: 0;
        transform: translateY(48px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wgxd-group3-bottom-anim picture {
        opacity: 1;
    }

    .wgxd-group3-bottom-item-1.wgxd-group3-bottom-anim-play picture,
    .wgxd-group3-bottom-item-2.wgxd-group3-bottom-anim-play picture,
    .wgxd-group3-bottom-item-3.wgxd-group3-bottom-anim-play picture,
    .wgxd-group3-bottom-item-4.wgxd-group3-bottom-anim-play picture,
    .wgxd-group3-bottom-item-5.wgxd-group3-bottom-anim-play picture {
        animation: none;
    }
}

/* 味贯西东：顶部线路装饰图 hover 放大 */
.wgxd-group2-anim {
    cursor: pointer;
}

.wgxd-group2-anim picture img {
    transition: transform 0.3s ease-out;
    transform-origin: center center;
}

.wgxd-group2-anim:hover {
    z-index: 10;
}

.wgxd-group2-anim:hover picture img {
    transform: scale(1.1);
}

/* 味贯西东：底部线路整组 hover 放大（内层包裹，避免与外层 translate 冲突） */
.wgxd-group3-bottom-anim {
    cursor: pointer;
}

.wgxd-group3-bottom-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-out;
    transform-origin: center center;
}

.wgxd-group3-bottom-anim:hover {
    z-index: 10;
}

.wgxd-group3-bottom-anim:hover .wgxd-group3-bottom-inner {
    transform: scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .wgxd-group2-anim:hover picture img {
        transform: none;
    }

    .wgxd-group3-bottom-anim:hover .wgxd-group3-bottom-inner {
        transform: none;
    }
}

/* 味贯西东：左上葡萄图在超宽屏（>1920）时下移到 20% */
@media (min-width: 1921px) {
    .wgxd-grape-box {
        top: 18% !important;
    }

    .wgxd-camel-box {
        top: 40% !important;
    }

    .wgxd-shiliu-box {
        top: 26% !important;
    }

    .wgxd-hetao-box {
        top: 26% !important;
    }

    .wgxd-garlic-box {
        top: 22% !important;
    }

    .wgxd-camel2-box {
        top: 36% !important;
    }

    .wgxd-xiangcai-box {
        top: 15% !important;
    }

    .wgxd-yangcong-box {
        top: 18% !important;
    }

    .wgxd-hujiao-box {
        bottom: 18% !important;
    }

    .wgxd-spinach-box {
        bottom: 25% !important;
    }

    .wgxd-merchant-ship-box {
        bottom: 12% !important;
    }

    .wgxd-carrot-box {
        bottom: 25% !important;
    }

    .wgxd-chili-box {
        bottom: 18% !important;
    }

    .wgxd-corn-box {
        bottom: 17% !important;
    }

    .wgxd-tea-box {
        bottom: 15% !important;
    }

    .wgxd-merchant-ship2-box {
        bottom: 6% !important;
    }

    .wgxd-tofu-box {
        bottom: 21% !important;
    }
}

.fp_section_8 {
    /* background: gray; */
    background: url(../image/home/xwtp/graph.jpg?v=2.0) no-repeat center center;
    background-size: cover;
}

@media (min-width: 1920px) {
    .fp_section_8 {
        background-image: url(../image/home/xwtp/graph@2x.jpg?v=2.0);
    }
}




/* Slider */
.slick-slider {
    position: relative;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
}



/* .slick-track:before, .slick-track:after{ display: table; content: '';} */
.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

.slick-slide>div {
    width: 100%;
    height: 100%;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
    width: 100%;
}

.slick-slide.slick-loading img {
    display: none;
    width: 100%;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

.slick-loading .slick-list {
    background: #fff url(../image/loader.gif) center center no-repeat;
}

.slick-arrow {
    position: absolute;
    margin: auto;
    width: 48px;
    height: 50px;
    background: url(../image/temp/png32.png) center no-repeat;
    z-index: 2;
    cursor: pointer;
    opacity: 0.8;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
}

.slick-prev {
    left: 0;
    background-position: left;
}

.slick-next {
    right: 0;
    background-position: right;
}

.slick-arrow:hover {
    opacity: 1;
}

.slick-arrow.slick-disabled, .slick-arrow.slick-disabled:hover {
    opacity: 0.5;
}

/* .slick-dotted.slick-slider 样式由 Slick 库管理 */

.slick-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    display: block;
    font-size: 0;
    text-align: center;
    z-index: 2;
}

.slick-dots li {
    display: inline-block;
    cursor: pointer;
}

.slick-dots li:hover {
    opacity: 0.8;
}

.slick-dots li.slick-active, .slick-dots li.slick-active:hover {
    opacity: 1;
}

/* Banner Swiper 专用样式 */
.banner-swiper-box {
    position: relative;
    overflow: hidden;
}

.banner-swiper-item {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.banner-swiper-item>div {
    animation: fadeInUp 0.8s ease-out;
}

/* banner 图片样式 - 保持比例并完全覆盖容器 */
.banner-swiper-item picture,
.banner-swiper-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 优化箭头样式 */
#banner-swiper .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

#banner-swiper .slick-arrow:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
}

#banner-swiper .slick-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

#banner-swiper .slick-arrow svg {
    width: 24px;
    height: 24px;
    color: white;
    stroke-width: 3;
}

#banner-swiper .slick-prev {
    left: 30px;
}

#banner-swiper .slick-next {
    right: 30px;
}

#banner-swiper .slick-arrow.slick-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 自定义数字 dots 样式 - 位于右下角 */
.banner-swiper-dot .slick-dots {
    position: absolute;
    bottom: 30px;
    right: 40px;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    z-index: 20;
    font-size: 0;
}

.banner-swiper-dot .slick-dots li {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0 8px;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 激活状态的数字与两边数字距离更大 */
.banner-swiper-dot .slick-dots li.slick-active {
    margin: 0 30px;
}

/* 自定义数字按钮样式 */
.banner-swiper-dot .custom-dot-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 0;
    margin: 0;
}

/* 激活状态的数字 - 白色圆圈边框 */
.banner-swiper-dot .slick-dots li.slick-active .custom-dot-btn {
    color: rgba(255, 255, 255, 1);
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-weight: 600;
    animation: dotActive 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}

@keyframes dotActive {
    0% {
        transform: scale(0.85);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 连接线 - 当前激活到下一个之间，两端留出距离 */
.banner-swiper-dot .slick-dots li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 激活项到下一个的连接线更明显，两端留出距离，延迟执行动画 */
.banner-swiper-dot .slick-dots li.slick-active:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.9);
    width: 0;
    height: 1.5px;
    left: calc(100% + 10px);
    right: auto;
    transform-origin: left center;
    animation: lineActive 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
    animation-fill-mode: both;
}

@keyframes lineActive {
    0% {
        width: 0;
        opacity: 0;
        transform: translateY(-50%);
    }

    50% {
        opacity: 0.6;
    }

    100% {
        width: 32px;
        opacity: 0.9;
        transform: translateY(-50%);
    }
}

/* hover 效果 */
.banner-swiper-dot .slick-dots li:hover .custom-dot-btn {
    color: rgba(255, 255, 255, 0.9);
}

.banner-swiper-dot .slick-dots li:hover:not(.slick-active) .custom-dot-btn {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

/* 旧的 dots 样式已替换为自定义数字 dots，保留此处用于其他可能的轮播 */

/* 响应式调整 */
@media (max-width: 768px) {
    #banner-swiper .slick-arrow {
        width: 40px;
        height: 40px;
    }

    #banner-swiper .slick-arrow svg {
        width: 20px;
        height: 20px;
    }

    #banner-swiper .slick-prev {
        left: 15px;
    }

    #banner-swiper .slick-next {
        right: 15px;
    }

    /* 响应式调整自定义数字 dots */
    .banner-swiper-dot .slick-dots {
        bottom: 20px;
        right: 20px;
    }

    .banner-swiper-dot .custom-dot-btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .banner-swiper-dot .slick-dots li {
        margin: 0 6px;
    }

    .banner-swiper-dot .slick-dots li.slick-active {
        margin: 0 12px;
    }

    .banner-swiper-dot .slick-dots li.slick-active .custom-dot-btn {
        width: 28px;
        height: 28px;
    }

    .banner-swiper-dot .slick-dots li:not(:last-child)::after {
        right: -20px;
        width: 10px;
    }

    .banner-swiper-dot .slick-dots li.slick-active:not(:last-child)::after {
        width: 14px;
        right: -24px;
    }
}

/* 向下箭头动画 */
@keyframes arrowDown {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

.arrow-down-animate {
    animation: arrowDown 2s ease-in-out infinite;
}


/* .banner-swiper-dot {
    border-radius: 50%;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 1);
    width: 24px;
} */





/* 首页第二页面 */
.hero-search-image-group>img {
    --clamp-vw: 1vw;
    /* border-radius: 1rem; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    height: auto;
}

@media (max-width: 991px) {
    .hero-search-image-group>img {
        border-radius: 0.5rem;
    }
}

@media (min-width: 1920px) {
    .hero-search-image-group>img {
        --clamp-vw: calc(1920px * 0.01);
    }
}

/* 前三个图片：位于搜索框上方，向中间聚合分布（用 transform 替代 margin-top 保证 Edge/Chrome 一致） */
.hero-search-image-group>img:first-child {
    margin-left: calc(-21 * var(--clamp-vw, 1vw));
    margin-top: calc(8 * 1vh);
    width: calc(12 * var(--clamp-vw, 1vw));
    transform: translate(-50%, calc(-50% - 250px));
}

@media (max-width: 767px) {
    .hero-search-image-group>img:first-child {
        margin-left: -20vw;
        width: 100px;
        transform: translate(-50%, calc(-50% - 180px));
    }
}

@media (min-width: 1920px) {
    .hero-search-image-group>img:first-child {
        width: calc(11 * var(--clamp-vw, 1vw));
        margin-top: calc(3 * 1vh);
    }
}

.hero-search-image-group>img:nth-child(2) {
    margin-top: calc(-32 * 1vh);
    margin-left: calc(3 * var(--clamp-vw, 1vw));
    width: calc(18 * var(--clamp-vw, 1vw));
}

@media (max-width: 767px) {
    .hero-search-image-group>img:nth-child(2) {
        margin-top: -180px;
        margin-left: 0;
        width: 100px;
    }
}

.hero-search-image-group>img:nth-child(3) {
    margin-top: calc(-10 * 1vh);
    margin-left: 26vw;
    width: calc(11 * var(--clamp-vw, 1vw));
}

@media (max-width: 767px) {
    .hero-search-image-group>img:nth-child(3) {
        margin-top: -180px;
        margin-left: 20vw;
        width: 100px;
    }
}

/* 后三个图片：位于搜索框下方，向中间聚合分布 */
.hero-search-image-group>img:nth-child(4) {
    margin-top: calc(23 * 1vh);
    margin-left: calc(-28 * var(--clamp-vw, 1vw));
    width: calc(12 * var(--clamp-vw, 1vw));
}

@media (max-width: 767px) {
    .hero-search-image-group>img:nth-child(4) {
        margin-top: 180px;
        margin-left: -20vw;
        width: 100px;
    }
}

.hero-search-image-group>img:nth-child(5) {
    margin-top: calc(32 * 1vh);
    margin-left: calc(-4 * var(--clamp-vw, 1vw));
    width: calc(20 * var(--clamp-vw, 1vw));
}

@media (max-width: 767px) {
    .hero-search-image-group>img:nth-child(5) {
        margin-top: 180px;
        margin-left: 0;
        width: 100px;
    }
}

.hero-search-image-group>img:nth-child(6) {
    margin-top: calc(35 * 1vh);
    margin-left: 25vw;
    width: calc(18 * var(--clamp-vw, 1vw));
}

@media (max-width: 767px) {
    .hero-search-image-group>img:nth-child(6) {
        margin-top: 180px;
        margin-left: 20vw;
        width: 100px;
    }
}

.hero-search-image-group>img:nth-child(7) {
    margin-top: 220px;
    margin-left: -33vw;
    width: calc(19.5 * var(--clamp-vw, 1vw));
}

.hero-search-image-group>img:nth-child(8) {
    margin-top: 170px;
    margin-left: 26vw;
    width: calc(12 * var(--clamp-vw, 1vw));
}

.hero-search-image-group>img:nth-child(9) {
    margin-top: -310px;
    margin-left: -24.2vw;
    width: calc(9.5 * var(--clamp-vw, 1vw));
}

.hero-search-image-group>img:nth-child(10) {
    margin-top: -270px;
    margin-left: 6vw;
    width: calc(18.5 * var(--clamp-vw, 1vw));
}

.hero-search-image-group>img:nth-child(1n + 11) {
    display: none;
}

@media (max-width: 767px) {
    .hero-search-image-group>img:nth-child(1n + 7) {
        display: none;
    }
}

.dummy-text-input>span {
    grid-area: 1/1;
}

.wlqz-search-head-1 {
    font-size: 32px;
    color: #121212;
    /* font-family: HYGuoTuChuangXinShanHaiJing-75U; */
    /* font-weight: bold; */
    line-height: 43px;
    margin-bottom: 15px;
}

.wlqz-search-head-2 {
    font-size: 16px;
    color: #121212;
    /* font-family: HYGuoTuChuangXinShanHaiJing-45U; */
    /* font-weight: bold; */
    line-height: 21px;
    margin-bottom: 40px;
}

/* 搜索框样式调整 */
.searchbar-wrapper.searchbar-wrapper-static {
    width: 640px !important;
    height: 128px !important;
    background-color: #ffffff !important;
    /* border: 1px solid #DDDDDD !important; */
    /* border-radius: 10px; */
    /* display: flex;
    align-items: center; */
    padding: 0 20px;
    box-sizing: border-box;
    /* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1) !important; */
    border-radius: 20px;
    border: 2px solid #E6D5CE;
    box-shadow: 0px 8px 16px 0px rgba(230, 213, 206, 1) !important;
}

.searchbar-wrapper.searchbar-wrapper-static>div:first-child {
    display: flex;
    align-items: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.searchbar-wrapper.searchbar-wrapper-static>div:first-child img {
    width: auto;
    height: auto;
    display: block;
}

.searchbar-wrapper.searchbar-wrapper-static .text-input-wrapper {
    flex: 1;
    /* height: 100%; */
    height: 56px;
}

.searchbar-wrapper.searchbar-wrapper-static .text-input-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.searchbar-wrapper.searchbar-wrapper-static .text-input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    /* text-align: center; */
    font-size: 16px;
    color: #333;
    padding: 0;
    padding-left: 20px;
}

.searchbar-wrapper.searchbar-wrapper-static .dummy-text-input {
    text-align: center !important;
    justify-content: center !important;
    /* place-items: center !important; */
    left: 20px !important;
    right: 0 !important;
    color: #999999;
}

@media (max-width: 767px) {
    .searchbar-wrapper.searchbar-wrapper-static {
        width: 90% !important;
        max-width: 640px;
    }
}

/* 首页第三页面 ========================================== */
:root {
    --bg: #f7f7f7;
    --grid: rgba(0, 0, 0, 0.05);
    --card-radius: 18px;
    --gap: 18px;
    --pad: 28px;
}

.section_3_page {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frame {
    /* width: 1500px; */
    max-width: 100%;
    height: 100%;
    border-radius: 26px;
    position: relative;
    overflow: hidden;
    /* margin: 0 auto; */
    /* background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px); */
}

/* 上下渐隐（类似 Lovart 的“边缘淡出”） */
.cols {
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* gap: var(--gap); */
    /* padding: var(--pad); */
    gap: 30px;
    z-index: 1;

    /* 上下渐隐（关键：直接对内容容器做 mask，才能让子元素淡出） */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.col {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    will-change: transform;
    display: flex;
    flex-direction: column;
    gap: 30px;
    transform: translateY(0);
}

/* 非 JS 滚动时使用 CSS 动画（备用） */
.track:not(.track-js-scroll) {
    animation-name: scrollY;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--dur, 18s);
    animation-fill-mode: none;
}

/* 关键：用同一个 keyframes，方向通过 animation-direction 控制 */
@keyframes scrollY {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(calc(-1 * var(--scrollH, 800px)));
    }
}

.card {
    width: 100%;
    /* border-radius: var(--card-radius); */
    overflow: hidden;
    /* box-shadow: 0 18px 60px rgba(0, 0, 0, 0.14); */
    /* background: #fff; */
    position: relative;
}

.thumb {
    width: 100%;
    height: auto;
    min-height: 220px;
    background: transparent;
    transform: translateZ(0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumb > a.thumb-link {
    display: block;
    width: 100%;
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
}

/* 卡片图片样式 */
.card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* border-radius: var(--card-radius); */
}

.meta {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.72);
    background: rgba(255, 255, 255, 0.9);
}

.dot {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.12);
}

.title {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.82);
}

/* 顶部轻量标题（可删） */
.topbar {
    position: absolute;
    top: 14px;
    left: 18px;
    right: 18px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    opacity: 0.85;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

@media (max-width: 1400px) {
    .cols {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 980px) {
    .frame {
        height: 88vh;
    }

    .cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .cols {
        grid-template-columns: 1fr;
    }
}

/* 首页第四页面 - ywqn-item hover 效果（以中心放大） */
.ywqn-item {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: 50% 50%;
    will-change: transform;
}

.ywqn-item:hover {
    transform: scale(1.15);
    transform-origin: 50% 50%;
    z-index: 10;
}

/* ywqn-item 默认状态和过渡效果 */
.ywqn-item-box {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, top 0.6s ease-out;
}

.ywqn-item-box:hover {
    z-index: 10;
}

/* 01、03 从下往上 */
.ywqn-item-box:nth-of-type(1).ywqn-item-init,
.ywqn-item-box:nth-of-type(3).ywqn-item-init {
    opacity: 0 !important;
    top: 120% !important;
}

/* 02、04 从上到下 */
.ywqn-item-box:nth-of-type(2).ywqn-item-init,
.ywqn-item-box:nth-of-type(4).ywqn-item-init {
    opacity: 0 !important;
    top: -80% !important;
}


/* 至味清欢 */
.zwqh-title-item {
    font-size: 24px;
    color: #121212;
    /* font-family: SourceHanSerifCN-Bold; */
    /* font-weight: bold; */
    line-height: 35px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.zwqh-title-item.active {
    font-size: 32px;
    color: #121212;
    /* font-family: SourceHanSerifCN-Heavy; */
    font-weight: bold;
    line-height: 46px;
    position: relative;
}

.zwqh-title-item.active::after {
    content: '';
    width: 100%;
    height: 4px;
    background: #C61909;
    position: absolute;
    bottom: -13px;
    left: 0;
}

.more-text {
    color: #121212;
    font-size: 14px;
    line-height: 50px;
    /* font-family: SourceHanSerifCN-Bold; */
    font-weight: bold;
}

/* 至味清欢内容项动画 */
.zwqh-content-item {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease-out;
    transform-origin: center center;
    will-change: transform, opacity;
}

/* hover 层：默认隐藏，鼠标悬停 zwqh-content-item 时显示，带过渡 */
.zwqh-content-item-hover {
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.zwqh-content-item-hover img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: 50% 50%;
    transform: scale(1);
}

.zwqh-content-item:hover .zwqh-content-item-hover {
    opacity: 1;
    pointer-events: auto;
}

.zwqh-content-item:hover .zwqh-content-item-hover img {
    transform: scale(1);
}

/* 初始状态：从右侧隐藏（进入时从右侧滑入） */
.zwqh-content-item-init {
    opacity: 0 !important;
    transform: translateX(100%) !important;
}

/* 离开状态：从左侧滑出 */
.zwqh-content-item-leave {
    opacity: 0 !important;
    transform: translateX(-100%) !important;
}



/* 寻味图谱 */
/* Loading overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #fff;
    border-top-color: #4a90e2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Graph styles */
.node circle {
    stroke: none;
    stroke-width: 0;
    cursor: pointer;
    transition: all 0.3s;
}

.node:hover circle {
    stroke-width: 0;
    filter: brightness(1.2);
}

.node.selected circle {
    /* stroke: #ffffff; */
    /* stroke: rgba(0, 0, 0, 0.1); */
    stroke: #ffffff;
    stroke-width: 6px;
}

.node.neighbor-selected circle {
    /* stroke: #FFD700; */
    /* stroke: rgba(0, 0, 0, 0.1); */
    stroke: #ffffff;
    stroke-width: 4px;
}

.node.dimmed {
    opacity: 0.15;
}

.node.center circle {
    stroke: none;
    stroke-width: 0;
}

.node.center.selected circle {
    /* stroke: #ffffff; */
    /* stroke: rgba(0, 0, 0, 0.1); */
    stroke: #ffffff;
    stroke-width: 8px;
}

.node.center.neighbor-selected circle {
    /* stroke: #FFD700; */
    /* stroke: rgba(0, 0, 0, 0.1); */
    stroke: #ffffff;
    stroke-width: 4px;
}

.node text {
    /* font-size: 18px; */
    /* fill: #121212; */
    text-anchor: middle;
    pointer-events: none;
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); */
    /* font-family: SourceHanSerifCN-Bold; */
    /* font-weight: bold; */
}

.links {
    stroke: #707070;
    stroke-width: 1.5px;
}

.edge.edge-selected .links {
    stroke: #996F66;
    stroke-width: 2.5px;
}

.edge.edge-dimmed {
    opacity: 0.1;
}

.links.highlight {
    /* stroke: #FFD700; */
    stroke: rgba(0, 0, 0, 0.1);
    stroke-width: 3px;
}

.link-label {
    font-size: 12px;
    fill: #666666;
    text-anchor: middle;
    pointer-events: none;
    user-select: none;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2px 4px;
}



/* 四时风味 - 春夏秋冬 hover 放大 */
.ssfw-season-item img {
    transition: transform 0.4s ease-out;
    transform-origin: 50% 50%;
}

.ssfw-season-item:hover img {
    transform: scale(1.08);
}

.ssfw-item-big {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.ssfw-item-big:hover {
    opacity: 1;
}

.fp_section_date {
    color: #121212;
}

.fp_section_date .text_year {
    font-size: 24px;
    /* font-family: SourceHanSerifCN-Medium; */
    line-height: 1.2;
}

.fp_section_date .text_month {
    font-size: 48px;
    /* font-family: SourceHanSerifCN-Bold; */
    font-weight: bold;
    line-height: 1.2;
}

.text_ganzhi {
    writing-mode: vertical-rl;
    font-size: 24px;
    color: #121212;
    letter-spacing: 10px;
    line-height: 32px;
    /* font-family: HYGuoTuChuangXinShanHaiJing-55U; */
    margin-right: 10px;
    width: 30px;
}

.text_month_day {
    writing-mode: vertical-rl;
    font-size: 24px;
    color: #121212;
    letter-spacing: 10px;
    line-height: 32px;
    /* font-family: HYGuoTuChuangXinShanHaiJing-55U; */
    width: 30px;
}

.text_jiqi {
    writing-mode: vertical-rl;
    font-size: 40px;
    color: #121212;
    letter-spacing: 10px;
    line-height: 54px;
    margin-left: 40px;
    /* font-family: HYGuoTuChuangXinShanHaiJing-75U; */
    width: 50px;
}