@import (less) "./common.less?refresh";


body {
    font-size: var(--ft16);
    color: #000;
    .d-flex;

    .flex-column;
    min-height: 100vh;

    @media (max-width: 768px) {}
}

@font-face {
    font-family: "Ruizi";
    src: url("../font/ruizi.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

main {
    flex: 1;
}
.sp{
            width: 100%;
    height: 100%;
    object-fit: cover;
        }
.top_box {
    --color: #fff;
    width: 100%;
    position: relative;
    color: var(--color);
    display: flex;
    .al-c;
    min-height: 480px;
    font-family: "Ruizi";

    .block {
        padding: 60px 0;
    }
}

.top_box .t1 {

    font-size: var(--ft60)
}

.top_box hr {
    margin-top: vaR(--p20);
    width: 199px;
    max-width: 30%;
    height: 6px;
    background: var(--color);
}

.top_box .img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.top_box .block {
    position: relative;
    z-index: 1
}

.top_box .img img {
    animation: clearUp 1s ease-out forwards
}

@keyframes clearUp {
    0% {
        scale: 1.2;
        filter: blur(15px) brightness(1)
    }

    100% {
        scale: 1;
        filter: blur(0) brightness(1)
    }
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--p15) var(--p16);
    border: 1px solid #979797;
    font-size: var(--p16);
    color: #1d2129;
    background-color: #fff;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #c0c4cc;
    transition: color 0.3s ease;
}

.form-input:focus::placeholder,
.form-textarea:focus::placeholder {
    color: #86909c;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--ftc);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}


[data-tabhead] {
    .d-flex;
    .al-c;
    flex-wrap: wrap;

    .Titem {
        cursor: pointer;

        &.active {}
    }

}

[data-tabbody] {
    .Titem {
        position: absolute;
        opacity: 0;
        transform: translateY(20px);
        max-height: 0;
        overflow: hidden;

        &.active {
            overflow: visible;
            transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
            position: relative;
            opacity: 1;
            transform: translateY(0);
            max-height: 100%;
        }
    }
}

.titleCom {
    .d-grid;
    gap: var(--p24);
    .flex-column-center;
    text-align: center;
    margin-bottom: var(--p40);

    h1 {
        font-size: vaR(--ft36);
    }

    h3 {

        font-size: var(--ft24);
    }

    h2 {
        font-size: var(--ft20);
    }

    hr {
        font-size: vaR(--ft36);
        width: 4em;
        height: 1px;
        border: 1px solid #090909;
    }

    .hr {
        width: 3em;
        height: 4px;
        background: #1E40AF;
        border: 0px solid #E5E7EB;
    }

    .desc {
        line-height: 2;
        font-size: vaR(--ft18);
    }
}

:root {
    --backtop-color: var(--bgc);
}

.backtop {
    opacity: 0;
    background: initial;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    border: none;
    position: fixed;
    right: -100px;
    bottom: var(--p50);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: var(--p10);
    transform: scale(0.95);
    transition: all 0.3s;
}

.backtop.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.backtop:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
}

.backtop::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(var(--backtop-color-rgb), 0.1);
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    box-sizing: border-box;
}

.backtop:hover::before {
    animation: drawCircleSmooth 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes drawCircleSmooth {
    0% {
        border-color: rgba(var(--backtop-color-rgb), 0.1);
        border-top-color: var(--backtop-color);
        border-right-color: rgba(var(--backtop-color-rgb), 0.1);
        border-bottom-color: rgba(var(--backtop-color-rgb), 0.1);
        border-left-color: rgba(var(--backtop-color-rgb), 0.1);
        transform: rotate(0deg);
    }

    25% {
        border-top-color: var(--backtop-color);
        border-right-color: var(--backtop-color);
        border-bottom-color: rgba(var(--backtop-color-rgb), 0.3);
        border-left-color: rgba(var(--backtop-color-rgb), 0.1);
        transform: rotate(90deg);
    }

    50% {
        border-top-color: var(--backtop-color);
        border-right-color: var(--backtop-color);
        border-bottom-color: var(--backtop-color);
        border-left-color: rgba(var(--backtop-color-rgb), 0.3);
        transform: rotate(180deg);
    }

    75% {
        border-top-color: var(--backtop-color);
        border-right-color: var(--backtop-color);
        border-bottom-color: var(--backtop-color);
        border-left-color: var(--backtop-color);
        transform: rotate(270deg);
    }

    100% {
        border-color: var(--backtop-color);
        transform: rotate(360deg);
    }
}

.backtop::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid transparent;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
}

.backtop:hover::after {
    opacity: 1;
    animation: rotateCircle 1.2s linear infinite;
    border-top-color: var(--backtop-color);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

@keyframes rotateCircle {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.backtop svg {
    width: 3em;

    path {
        fill: var(--backtop-color);
    }

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;

    @media only screen and (max-width: 990px) {
        width: 2em;
    }
}

.backtop:hover svg {
    transform: translateY(-2px);
}

.backtop:active {
    transform: translateY(0) scale(0.95);
    transition: transform 0.1s ease;
}

.qrcode {
    .d-flex;
    .flex-column;
    flex-wrap: wrap;
    gap: var(--p15);

    .img {
        width: 2em;
        flex-shrink: 0;
    }

    .text {

        .d-flex;
        .al-c;
        gap: 0.5em;
    }

    .item {
        position: relative;
        cursor: pointer;

        &:hover {
            .img {
                animation: jello-vertical 0.7s both;
            }
        }
    }

    .popup {
        display: none;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 10;
    }

    .popup img {
        width: 5em;
        height: 5em;
        display: block;
        max-width: unset;
    }

    .item:hover .popup {
        display: block;
    }

    .popup::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: white;
    }

    @keyframes jello-vertical {
        0% {
            transform: scale3d(1, 1, 1);
        }

        30% {
            transform: scale3d(0.75, 1.25, 1);
        }

        40% {
            transform: scale3d(1.25, 0.75, 1);
        }

        50% {
            transform: scale3d(0.85, 1.15, 1);
        }

        65% {
            transform: scale3d(1.05, 0.95, 1);
        }

        75% {
            transform: scale3d(0.95, 1.05, 1);
        }

        100% {
            transform: scale3d(1, 1, 1);
        }
    }
}

footer {
    --main: 1720px;
    color: rgba(255, 255, 255, 1);
    font-size: var(--ft14);
    padding: var(--p90) 0 vaR(--p60);
    .bg_img;

    .main {
        gap: vaR(--p60);
        .d-flex;
        .jc-s;
        flex-wrap: wrap;
    }

    .foot1 {
        .d-flex;
        .flex-column;
        .al-fs;
        .jc-s;
        gap: var(--p60);
        flex-wrap: wrap;

        .title {
            font-size: vaR(--ft48);
        }

        .desc {
            margin-top: var(--p15);
            font-size: vaR(--ft31);
            letter-spacing: 0.2em;
        }

        .qrcode {
            font-size: vaR(--ft20);
            margin-top: var(--p30);
        }


    }

    nav {
        flex-wrap: wrap;
        font-size: vaR(--ft16);
        .d-flex;
        gap: var(--p10) vaR(--p50);
    }

    .foot2 {
        width: 700px;
        max-width: 100%;
        line-height: 2em;
        .d-flex;
        .flex-column;
        .al-fs;
        .jc-s;
        gap: var(--p60);

        hr {
            width: 3em;
            height: 3px;
            background: #fff;
        }

        .desc {
            margin-top: auto;
        }

        .priend {
            .d-grid;
            gap: var(--p20);

            .img_box {
                flex-shrink: 0;
            }

            .item {
                font-size: var(--ft14);
                gap: vaR(--p10);
                .d-flex;
                .al-fs;
            }
        }

    }


    a[href]:hover {
        opacity: 0.8;
    }

    .footerLogo {
        margin-top: vaR(--p30);

        img {
            max-height: 120px;
        }
    }

    @media only screen and (max-width: 990px) {

        .foot1 .priend,
        .foot1 nav {
            .d-flex;
            flex-wrap: wrap;
        }

    }
}

header {
    top: 0;
    padding: vaR(--p15) 0;
    z-index: 999;
    position: sticky;
    background: #fff;
    width: 100%;
    transition: all 0.5s;

    .logo {
        max-width: 50vw;

        img {
            max-height: 50px;
        }
    }

    .hnav {
        .d-flex;
        .jc-s;
        gap: var(--p10) var(--p25);
        .al-c;
        flex-wrap: wrap;
        white-space: nowrap;

        .nav-child {
            position: absolute;
            left: 50%;
            top: 100%;
            font-size: vaR(--ft14);
            text-align: center;
            width: max-content;
            display: block;
            transform: translateX(-50%);
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);

            dl {
                padding: var(--p15);
                display: block;
                width: 100%;
                white-space: nowrap;
                .d-grid;
                gap: vaR(--p10);
            }

            dd {

                padding: 0 var(--p20);
            }

            a {
                position: relative;

                &::after {
                    content: "";
                    display: block;
                    width: 0;
                    height: 1px;
                    background-color: var(--color);
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background-color: var(--ftc);
                    transition: all 0.3s;

                }

                &.active,
                &:hover {
                    .ftc;

                    &::after {
                        width: 100%;
                    }
                }
            }
        }


        li {
            padding: 0 vaR(--p10);
            position: relative;
            height: 60px;
            .flex-center;


            &::after {
                content: "";
                display: block;
           
           opacity: 0;
                width: 16px;
                height: 12px;
                background: url(../images/san.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                transition: all 0.3s;

            }

            &:hover {
                .nav-child {
                    height: auto;
                    opacity: 1;
                }
            }

            &:hover,
            &.active {

                >.item {
                    color: #333333;
                   font-weight: bold;
                }

                &::after {
                    opacity: 1;
                }
            }
        }

        .item {
            position: relative;
            overflow: hidden;

            * {
                transition: all 0.5s;
            }

        }
    }



}

[back-btn] {
    &.down {
        .backtop {
            right: 0;
            visibility: visible;
            opacity: 1;
        }
    }
}

.Banner_swiper {
    .item {
        position: relative;
        aspect-ratio: 1920/900;
        .d-flex;
        .al-c;
    }

    .block {
        padding: vaR(--p30) 0;
        // background: rgba(0, 0, 0, 0.3);
     
        gap: vaR(--p20);
        color: #fff;
        position: relative;
        z-index: 2;

        >* {
            width: 800px;
            max-width: 100%;
            transition: all 0.8s;
            opacity: 0;
            transform: translateY(60px);
        }
    }
    .btn{
        margin-top: vaR(--p40);
        width: auto !important;
        background: initial;
        border-color: #fff;
        &:hover{
            background: rgba(0,0,0,0.5);
            transition: all 0.3s !important;
            transition-delay: 0 !important;
        }
    }

    .zhenshangyin-slide-active {
        .block {
            >* {
                opacity: 1;
                transform: translateY(0);

            }

        //     >*:nth-child(1) {
        //         transition-delay: 0.6s;
        //     }

        //     >*:nth-child(2) {
        //         transition-delay: 1s;
        //     }

        //     >*:nth-child(3) {
        //         transition-delay: 1.3s;
        //     }
        }
    }

    h1 {
        font-weight: normal;
        font-size: vaR(--ft59);
    }

    .sub {
        margin-top: vaR(--p20);
        font-size: vaR(--ft20);
        line-height: 2;

    }

    .link {
        padding: 5px var(--p25);
        border: 1px solid #fff;
        border-radius: 25px;
        margin-top: vaR(--p30);

        &:hover {
            padding: 5px var(--p35);

        }
    }

    .bg {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        z-index: 0;
        
    }

    .down {
        color: #fff;
        cursor: pointer;
        font-size: var(--ft14);
        gap: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 2;
        position: absolute;
        left: 50%;
        bottom: var(--p20);
        transform: translateX(-50%);
        animation: bounce 2s infinite ease-in-out;
    }

    @keyframes bounce {

        0%,
        100% {
            transform: translateX(-50%) translateY(0);
        }

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

.contactTitle {
    font-size: var(--ft40);
    font-weight: bold;
    margin-bottom: vaR(--p30);
    width: fit-content;
    padding-right: 0.2em;
    position: relative;
    line-height: 1;

    &::before {
        display: block;
        content: '';
        z-index: -1;
        position: absolute;
        width: 100%;
        .bgc;
        height: 8px;
        border-radius: 2px;
        bottom: 0;
    }
}

.form {
    gap: var(--p30) var(--p60);

    .label {
        font-size: var(--ft24);
        margin-bottom: var(--p20);
    }

    .btn {
        color: #000;
        --btn_color: #F2F2F2;
        --btn: 80px;
        font-size: vaR(--ft28);
        width: 280px;
        max-width: 100%;
    }
}

main {
    background-repeat: no-repeat;
}

.bgmain {
    background-image: url('../images/bg.png'), url('../images/bg1.png');
    background-repeat: no-repeat, no-repeat;
    background-position: bottom center, 30vw bottom;
}

.ProMain {
    background-image: url('../images/bg1.png');
    background-position: 40vw 113%;
}

.ComMain {
  
}
.IndexMain{
      background-image: url('../images/bg1.png');
    background-position: 40vw 60%;
}

.LinkCom {
    background: #E8F1FF80;
    background-image: url('../images/bg.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    padding-bottom: vaR(--p180);

    h1 {
        .d-flex;
        .al-c;
        gap: var(--p10);
        margin-bottom: vaR(--p40);
        font-size: vaR(--ft36);
    }

    .ContactLink {
        .item {
            background: #fff;
        }
    }

    h3 {
        margin-top: vR(--p40);
        font-size: vaR(--ft30);
    }
}

.ContactLink {
    .d-grid;
    .grid2;
    gap: var(--p40);

    .item {
        .al-c;
        padding: var(--p30) var(--p80);
        background: #F2F2F2;
        .d-grid;
        font-size: var(--ft24);
        grid-template-columns: 2em 1fr;
        gap: var(--p15);
    }

    div {

        height: min-content;
    }

    margin-bottom: var(--p60);
}

.ContactInfo {
    margin-bottom: var(--p60);
    .d-grid;
    grid-template-columns: 0.4fr 1fr;
    gap: var(--p80);
}

.ContactText {
    margin-top: vaR(--p30);
    color: #777777;
    font-size: var(--ft18);
    .d-grid;
    gap: var(--p30);

    strong {
        color: #333;
    }
}

.AboutMain {
    background-position: bottom center, 50vw bottom;

}

.AboutNeed {
    .main {
        padding: vaR(--p50);
        background: linear-gradient(270deg, #E8F1FF 0%, #F3F7FF 100%);
        border-radius: 20px;
        border: 1px solid #C9DBFF;
    }
}

.AboutNeedList {
    .d-grid;
    gap: var(--p40);

    .item {
        padding-top: vaR(--p40);
        border-top: 1px solid rgba(15, 116, 210, 0.32);

        .con {
            .d-flex;
            .al-c;
            gap: var(--p10);

            h5 {
                font-size: var(--ft36);
            }
        }

        .sub {
            font-size: var(--ft18);
            margin-top: vaR(--p15);
        }
    }
}

.SoultList {
    .d-grid;
    .grid3;
    gap: var(--p50) vaR(--p25);

    .item {
        .img {
            border-radius: 8px;
            aspect-ratio: 450/320;
        }

        h5 {
            margin-top: vaR(--p15);
            .line-clamp1;
            font-size: vaR(--ft22);
        }

        .sub {
            margin-top: vaR(--p15);
            .line-clamp3;
            line-height: 1.5;
            height: 4.5;
        }

        .btn {

            margin-top: vaR(--p15);
            border-radius: 4px;
            padding: 0 vaR(--p20);
            font-weight: bold;
        }

    }
}

.AboutFrist {
    background: #F4F6F9;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
}

.AboutFristList {
    .d-grid;
    .grid3;
    gap: var(--p30);

    .item {
        background: #fff;
        border-radius: var(--p20);
        border: 1px solid #DEDEDE;
        padding: vaR(--p30);

        h5 {
            margin-top: vaR(--p10);
            font-size: vaR(--ft26);
        }

        .sub {
            color: #555555;
            line-height: 2;
            font-size: vaR(--ft14);
            margin-top: vaR(--p15);
        }
    }
}

.AboutProduct {
    aspect-ratio: 1920/480;
    .d-flex;
    .al-c;
    padding: var(--p60) 0;
    .bg_img;
    color: #fff;

    h5 {
        font-size: vaR(--ft40);
    }

    .sub {
        margin-top: vaR(--p28);
        width: 20px;
        line-height: 2;
        width: 380px;
        max-width: 100%;
    }

    .block {

        width: fit-content;
    }

    &+.AboutProduct {
        margin-top: vaR(--p14);
    }

    &:nth-child(even) {
        .block {
            margin-left: auto;
        }
    }
}

.AboutLdm {
    background: #F9FAFB;

    .pic {
        margin-bottom: vaR(--p70);
    }
}

.AboutLdmList {
    .d-grid;
    .grid3;
    text-align: center;

    h5 {
        margin-top: vaR(--p10);
        font-size: vaR(--ft46);

    }

    .sub {
        margin-top: vaR(--p10);
        font-size: vaR(--ft17);
    }
}

.AboutInfo {
    .main {
        .d-grid;
        .grid2;
        .al-c;
        gap: var(--p90);
    }

    .title {
        font-size: vaR(--ft28);
        font-weight: normal;
    }

    .sub {
        line-height: 2;
        margin-top: vaR(--p10);
        font-size: vaR(--ft17);
    }

    .content {
        margin-top: vaR(--p10);
        color: #4B5563;
        line-height: 2;
    }
}

.ProductNav {
    background: #F2F2F2;

    ul {
        .d-flex;
        .al-c;
        .jc-s;
        gap: var(--p20) 0;

        .item {
            padding: vaR(--p28) var(--p40);
            font-size: var(--ft22);
            color: #0F2636;

            &.active {
                font-weight: bold;
                background: #E4E4E4;
            }

            &:hover {}
        }
    }
}

.ProductWhyList {
    .d-flex;

    .jc-s;
    gap: vaR(--p20);
    text-align: center;
    flex-wrap: wrap;

    .item {
        max-width: 200px;
    }

    h5 {
        font-size: vaR(--ft18);
        margin: vaR(--p10) 0;
    }

    .sub {
        color: #545454;
        font-size: var(--ft14);
    }
}

.ProductCateList {
    .d-grid;
    gap: vaR(--p100);

    .item {
        .d-grid;
        grid-template-columns: 0.4fr 1fr;
        gap: vaR(--p70);

        .img {
            border-radius: 10px;
        }

        .con {
            direction: ltr;
        }

        .title {
            font-size: vaR(--ft36);
        }

        .content {
            margin-top: vaR(--p30);

            br {
                display: none;
            }

            tr {
                td:nth-child(1) {
                    width: 40%;
                }
            }

            td {
                padding: vaR(--p20) 0;
                border-bottom: 1px solid #D2D2D2;
            }
        }

        &:nth-child(even) {
            direction: rtl;
        }
    }
}

.ProductCooldList {
    .d-grid;
    .grid3;
    gap: vaR(--p30) var(--p50);

    .item {
        background: #fff;
        transition: all 0.3s;
        border-radius: 8px;
        border: 1px solid #D2D2D2;

        .img {
            aspect-ratio: 436/250;
        }

        .con {
            padding: vaR(--p20) 0;
        }

        h5 {
            text-align: center;
            font-size: var(--ft18);
        }

        &:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }
    }
}

.Faq {
    background: #F9FAFB80;
}

.FaqList {
    .d-grid;
    width: 800px;
    margin: 0 auto;
    max-width: 100%;
    gap: var(--p16);

    svg {
        transition: transform .3s
    }

    .rotate {
        transform: rotate(-180deg)
    }

    .item {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

        .con {
            cursor: pointer;
            .d-flex;
            .al-c;
            padding: vaR(--p24);

            h5 {
                font-size: vaR(--ft16);
                flex: 1;
            }
        }

        .sub {
            display: none;
            padding: vaR(--p24);
        }
    }
}

.WuliuWhy {
    .d-grid;
    gap: var(--p20);

    .item {
        .content {
            br {
                display: none;
            }
        }

        table {
            border: 1px solid #E5E7EB;

            thead {
                background: #E5E7EB;

                th {
                    color: #374151;
                    padding: vaR(--p19) var(--p25);

                    text-align: left;
                }
            }

            td {
                color: #4B5563;
                padding: vaR(--p19) var(--p25);

                strong {
                    color: #000;
                }
            }
        }

        .advantage-list {
            margin-top: var(--p60);
            .d-grid;
            .grid4;
            gap: var(--p20) vaR(--p40);

            img {
                height: 16px;
            }

            li {
                .d-grid;
                .al-fs;
                grid-template-columns: 1em 1fr;
                gap: var(--p10);
                font-size: vaR(--ft14);
                color: #4B5563;

                h5 {
                    line-height: 1;
                    color: #000;
                    font-size: vaR(--ft16);
                    margin-bottom: vaR(--p5);
                }
            }
        }
    }
}

.WuliuLine {
    background: #F9FAFB;
}

.WuliuLineList {
    .d-grid;
    width: 900px;
    margin: 0 auto;
    max-width: 100%;
    position: relative;

    &::before {
        position: absolute;
        display: block;
        content: '';
        background: #1E40AF20;
        width: 2px;
        top: 0;
        bottom: 0;
        left: var(--p29);
        font-size: var(--ft24);
    }

    .num {
        font-size: var(--ft24);
        font-weight: bold;
        .flex-center;
        width: var(--p60);
        height: var(--p60);
        background: #1E40AF;
        color: #fff;
        border-radius: 50%;
    }

    .item {
        .d-grid;
        font-size: var(--ft32);
        grid-template-columns: var(--ft60) 1fr;
        .al-fs;
        gap: var(--p32);
    }

    .con {
        background: #FFFFFF;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
        border-radius: 12px 12px 12px 12px;
        padding: vaR(--p24);
        margin-bottom: vaR(--p32);

        h5 {
            font-size: var(--ft20);
        }

        .sub {
            font-size: vaR(--ft16);
            color: #374151;
            margin-top: var(--p10);
        }

        .key {
            font-size: var(--ft16);
            margin-top: var(--p10);
            color: #165DFF;
        }
    }
}

.WuliuSpecialList {
    .d-grid;
    .grid2;
    gap: vaR(--p32);

    .item {
        padding: vaR(--p24);
        background: #EFF6FF;
        border-radius: 10px;

        .title {
            .d-flex;
            .al-c;
            font-weight: bold;
            gap: vaR(--p10);
            font-size: vaR(--ft24);

            img {
                width: 2em;
            }
        }

        .sub {
            color: #374151;
            margin-top: vaR(--p16);
        }

        .con {
            margin-top: vaR(--p16);
        }

        .content {
            .block {
                margin-bottom: vaR(--p20);
            }

            h5 {
                margin-bottom: var(--p15);
                color: #000;
                font-size: vaR(--ft18);
                font-weight: bold;
            }

            ul {
                color: #374151;
                .d-grid;
                gap: vaR(--p10);

                li {
                    gap: vaR(--p5);
                    .d-flex;
                    .al-c;
                }
            }
        }

        &:nth-child(3n+2) {
            background: #FFFBEB;
        }

        &:nth-child(3n+3) {
            background: #F0FDF4;
            grid-column: span 2;

            .service-scene-wrap {
                .d-grid;
                .grid2;
            }

            .con {
                .d-grid;
                grid-template-columns: 1fr 0.5fr;
            }
        }
    }
}

.WuliuThreeList {
    .d-grid;
    .grid3;
    gap: vaR(--p48);

    .item {
        .d-flex;
        .flex-column;

        &:nth-child(3n+1) {
            .title {

                background: #1E40AF;
            }
        }

        &:nth-child(3n+2) {
            .title {
                background: #0EA5E9;
            }
        }

        &:nth-child(3n+3) {
            .title {
                background: #F97316;
            }
        }
    }

    .con {
        flex: 1;
        .bg_img;
        padding: var(--p24);
    }

    .title {
        padding: var(--p20);
        font-size: vaR(--ft24);
        font-weight: normal;
        color: #fff;
    }

    .content {
        .delivery-city-list {
            .d-grid;
            .grid2;
        }

        .block {
            margin-bottom: vaR(--p20);
        }

        h5 {
            margin-bottom: var(--p15);
            color: #000;
            font-size: vaR(--ft18);
            font-weight: bold;
        }

        ul {
            color: #374151;
            .d-grid;
            gap: vaR(--p5);

            li {
                gap: vaR(--p5);
                .d-flex;
                .al-c;
            }
        }
    }
}

.WuliuThree {
    background: #F9FAFB;
}

.WuliuText {
    .bg_img;
    padding: var(--p90);
    text-align: center;
    color: #fff;

    .title {
        font-size: vaR(--ft48);
        font-weight: normal;
    }

    .sub {
        margin-top: var(--p20);
        font-size: vaR(--ft24);
    }

    .content {
        margin-top: var(--p28);
        font-size: vaR(--ft20);
    }

    .btn {
        font-weight: bold;
        padding: 0 vaR(--p20);
        margin: var(--p40) auto 0;

        --btn_color: #F97316;
        border-radius: 8px;
    }
}

.WuliuTextList {}

.PoultryTeBie {
    background: rgba(220, 233, 246, 0.29);
    --main: 900px;

    .titleCom {
        .al-fs;
        text-align: left;

        h2 {
            font-size: vaR(--ft24);
        }

        .desc {
            b {
                font-size: vaR(--ft24);
                .ftc;
            }
        }
    }

    .summary {
        font-size: vaR(--ft18);
        .ftc;
        font-weight: bold;
        text-align: center;
        margin-top: vaR(--p40);
    }
}

.PoultryTeBieList {
    .d-grid;
    .grid2;
    gap: var(--p20);

    .item {
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.8);
        padding: vaR(--p24);
        .d-grid;
        grid-template-columns: 2em 1fr;
        gap: var(--p15);
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

        h5 {
            font-size: var(--ft16);
        }

        .sub {
            color: #4B5563;
            font-size: var(--ft14);
        }
    }
}

.PoultryProssList {
    .d-flex;
    .al-c;
    .jc-c;
    gap: vaR(--p20);
    text-align: center;
    flex-wrap: wrap;

    .item {
        max-width: 150px;
    }

    h5 {
        font-size: vaR(--ft18);
        margin: vaR(--p10) 0;
    }

    .sub {
        color: #545454;
        font-size: var(--ft14);
    }
}

.PoultryCase {
    --main: 1100px;

}

.PoultryCaseList {
    .d-grid;
    .grid2;
    gap: var(--p32);

    .item {
        border-top: 5px solid var(--ftc);
        background: #F9FAFB;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 12px 12px;
        padding: var(--p32) var(--p24);
        .d-flex;
        .flex-column;

        .title {
            font-size: vaR(--ft15);
            font-weight: bold;
        }

        .sub {
            flex: 1;
            line-height: 2;
            margin-top: vaR(--p20);
            color: #6B7280;

            span {
                color: #000;
            }
        }

        .content {
            padding: var(--p16);
            background: #DCE9F6;
            border-radius: 12px;

            ul {
                .d-grid;
                .grid2;
                text-align: center;

                strong {
                    .ftc;
                    font-size: vaR(--ft36);
                }

                color: #6B7280;
                font-size: vaR(--ft12);
            }
        }
    }
}

.PoultryTableBlock {
    --main: 1024px;
    background: #F9FAFB;

}

.PoultryTable {
    .d-grid;
    gap: var(--p20);


    .content br {
        display: none;
    }

    table {
    border-radius: 8px;
    overflow: hidden;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);

        border: 1px solid #E5E7EB;
    }

    thead {
        .bgc;
        color: #fff;

        th {
            padding: vaR(--p19) var(--p25);

            text-align: left;
        }
    }

    tbody {
        tr {
            background: #fff;
        }

        tr:nth-child(odd) {
            background: #F9FAFB;
        }
    }

    td {
        color: #4B5563;
        padding: vaR(--p19) var(--p25);

        strong {
            color: #000;
        }
    }
}

.PoultrySerive {
    --main: 1280px;
    background: #F9FAFB;
}

.PoultrySeriveList {
    .d-grid;
    .grid3;
    gap: vaR(--p32);

    .item {
        padding: var(--p24);
        background: #FFFFFF;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
        border-radius: 12px 12px 12px 12px;

        &:last-child {
            grid-column: span 2;
        }
    }

    .img {
        border-radius: 50%;
        width: 3em;
        height: 3em;
        background: #14766C20;
        margin: 0;
    }

    h5 {
        margin-top: vaR(--p20);
        font-size: vaR(--ft20);
    }

    .sub {
        color: #4B5563;
        margin: var(--p20) 0;
    }

    .content {
        br {
            display: none;
        }

        table {
            font-size: vaR(--ft14);
            border: none;
        }

        th,
        td {
            padding: var(--p5) 0;
        }

        ul {
            color: #374151;
            .d-grid;
            gap: var(--p10);

            li {
                .d-flex;
                .al-c;
                gap: var(--p10);
            }
        }
    }
}

.PoultryContent {
    --main: 900px;
}

.PoultryContentItem {
    margin-top: var(--p60);
    background: #ECFDF5;
    padding: vaR(--p35);

    .title {
        font-size: vaR(--ft24);
        color: #0F766E;
    }

    .sub {
        color: #374151;
        margin-top: vaR(--p20);
    }

    .content {
        margin-top: vaR(--p20);

        strong {
            display: block;
            margin-bottom: vaR(--p20);
            font-size: vaR(--ft20);
        }
    }
}

.PoultryText {
    .bg_img;
    padding: var(--p90);
    text-align: center;
    color: #fff;

    .title {
        font-size: vaR(--ft64);
        font-weight: normal;
    }

    .sub {
        opacity: 0.8;
        margin-top: var(--p20);
        font-size: vaR(--ft24);
    }

    .content {
        margin-top: var(--p28);
        font-size: vaR(--ft20);
    }

    .btn {
        font-weight: bold;
        padding: 0 vaR(--p30);
        margin: var(--p40) auto 0;
        .ftc;
        --btn_color: #fff;
        border-radius: var(--p20);

    }
}


.c3Main {
    --ftc:#165DFF;
    --bgc:#165DFF;
    section{
        padding: vaR(--p96) 0;
    }
    .titleCom {
        .desc {
            color: #4B5563;
        }

        .hr {
            background: #165DFF;
        }
    }

    .WuliuLineList {
        width: 800px;
    }

    .WuliuLineList .num {
        background: #165DFF;

    }

    .WuliuLineList::before {

        background: #165DFF20;
    }
}

.c3NengliList {
    .d-grid;
    .grid2;
    gap: vaR(--p32);

    .item {
        border-radius: 12px 12px 12px 12px;
        border: 1px solid #E5E7EB;
        padding: var(--p33);
        .d-grid;
        .al-fs;
        grid-template-columns: 3em 1fr;
        gap: vaR(--p10);
    }

    .title {
        font-size: vaR(--ft20);
    }

    .sub {
        color: #4B5563;
        margin-top: var(--p10);
    }

    .content {
        margin-top: vaR(--p15);

        br {
            display: none;
        }

        table {
            font-size: var(--ft14);

            th,
            td {
                padding: vaR(--p5) 0;
            }
        }

        ul {
            .d-grid;
            margin-bottom: var(--p20);
            gap: vaR(--p10);

            li {
                .d-grid;
                grid-template-columns: 1.5em 1fr;
                gap: 5px;
            }
        }
    }
}
.c3Product{
    background: #F9FAFB;
    .thead{
        .flex-center;
        flex-wrap: wrap;
        gap: var(--p10);
        margin-bottom: vaR(--p40);
        .Titem{
            background: #E5E7EB;
            border-radius: 50px ;
            padding: vaR(--p12) vaR(--p35);
            cursor: pointer;
            &.active{
                color: #fff;
           .bgc;
            }
        }
    }
    .tbody{
        .item{
            .d-grid;
            grid-template-columns: 0.4fr 1fr;
            gap: var(--p40);
            .img{
                border-radius: 12px;
            }
        }
        .block{background: rgba(20,98,255,0.05);
            border-radius: 8px 8px 8px 8px;
            padding: vaR(--p20);
            margin-top: vaR(--p23);
        }
        .title{
            .ftc;
            font-size: vaR(--ft20);
        }
        .content{
            margin-top: vaR(--p20);
            table{
                background: #fff;
                th{
                    background: #E5E7EB;
                    font-weight: bold;
                }
                th,
                td{
                    padding: vaR(--p15) var(--p10);
                }
            }
        }
        .key{
            font-weight: bold;
            font-size: var(--ft16);
        }
        .sub{
            margin-top: vaR(--p10);
            color: #374151;
            padding-left: 1em;
            line-height: 1.4;
        }
    }
}
.c3Youshi{
    .summary{
        .ftc;
        margin-top: vaR(--p48);
        font-size: var(--ft20);
        text-align: center;
    }
}
.c3YoushiList{
    .d-grid;
    .grid4;
    gap: var(--p30);
    .item{
        background: #F2F3F5;
border-radius: 12px 12px 12px 12px;
padding: vaR(--p30);
h5{
    font-size: vaR(--ft20);
    margin-top: vaR(--p20);
}
.sub{
    margin-top: var(--p15);
    color: #4B5563;
}
    }
}
.c3Text{
    background: linear-gradient( 0deg, rgba(20,98,255,0.05) 0%, rgba(20,88,255,0.1) 100%);
    .main{
        .d-grid;
        .grid2;
        .al-c;
        gap: var(--p30);
    }
    .title{
        .ftc;
        font-size: var(--ft14);
      
    }
    .desc{
        margin-top: vaR(--p20);
        font-size: var(--ft64);
          b{
              font-weight: normal;
            color: #1073D2;
        }
    }
    .summary{
        color: #4B5563;
        font-size: var(--ft18);
        margin-top: vaR(--p20);
    }
    ul{
        margin-top: vaR(--p30);
        .d-flex;
        flex-wrap: wrap;
        gap: var(--p10);
        .btn:nth-child(2){
            .ftc;
            background: initial;
        }
    }
    .btn{
        font-size: var(--ft18);
        --btn:50px;
        border-radius: 40px;
        --btn_color:var(--ftc);
    }
    .img{
        border-radius: 8px;
    }
    
}
.BeautyCooper{
    --main:900px;
    .titleCom{
      .hr{
            background: #FF6B9D;
        }
    }
    .btn{
        --btn:60px;
        font-size: vaR(--ft20);
    width: fit-content;
  .al-c;
  .d-flex;
  padding: 0 var(--p40);
        border-radius: 40px;
        margin: vaR(--p40) auto 0;
    }
}
.BeautyCooperList{
    .d-grid;
    .grid2;
    gap: var(--p20);
    .item{
        padding: vaR(--p20);
        background: #F9FAFB;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 0px rgba(0,0,0,0), 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -2px rgba(0,0,0,0.1);
        border-radius: 8px;
        .d-grid;
        grid-template-columns: 2.5em 1fr;
        gap: var(--p10);
        h5{
            font-size: vaR(--ft20);
        }
        .sub{
            margin-top: 5px;
            color: #4B5563;
        }
    }
}
.BeautyYoushi{
    background: #F9FAFB;
      .titleCom{
      .hr{
            background: #1073D2;
        }
    }
}
.BeautyYoushiList{
    .d-grid;
    .grid3;
    gap: vaR(--p32);
    .item{
        padding: vaR(--p30);
       background: #FFFFFF;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 0px rgba(0,0,0,0), 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -2px rgba(0,0,0,0.1);
border-radius: 12px 12px 12px 12px;
        text-align: center;
        h5{
            margin: vaR(--p24) 0 vaR(--p16);
            font-size: vaR(--ft20);
        }
        .sub{
            color: #4B5563;
        }
    }
}
.BeautyProductList{
    margin-top: vaR(--p60);
    .d-grid;
    .grid5;
    gap: var(--p20);
    .img{
        aspect-ratio: 1/1;
    }
    .item{
        border-radius: 12px;
        overflow: hidden;
        background: #F9FAFB;
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 0px rgba(0,0,0,0), 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -2px rgba(0,0,0,0.1);
    }
    .con{
        padding: vaR(--p20);
    }
    .title{
        .d-flex;
        .al-c;
        font-size: vaR(--ft20);
        gap: var(--p10);
    }
    .sub{
        font-size: vaR(--ft14);
        margin-top: vaR(--p10);
        color: #4B5563;
    }
    .content{
        font-size: vaR(--ft14);
        margin-top: vaR(--p10);
        color: #1073D2;
    }
}
.GongyeMain{
    --color:#F9FAFB;
    .titleCom{
        h1{
            color: #0F52BA;
        }
        .desc{
            color: #4B5563;
        }
    }
}
.GongyeWhy{
    --main:1024px;
 
}
.GongyeTable {
    .d-grid;
    gap: var(--p20);


    .content br {
        display: none;
    }

    table {
    border-radius: 8px;
    overflow: hidden;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);

        border: 1px solid #E5E7EB;
    }

    thead {
        .bgc;
        color: #fff;

        th {
            padding: vaR(--p19) var(--p25);

            text-align: left;
        }
    }

    tbody {
        background: var(--color);
  

    }

    td {
        color: #4B5563;
        padding: vaR(--p19) var(--p25);

        strong {
            color: #000;
        }
    }
}


.GongyeText {
    .bg_img;
    padding: var(--p90);
    text-align: center;
    color: #fff;

    .title {
        font-size: vaR(--ft48);
        font-weight: normal;
    }

    .sub {
        opacity: 0.7;
        margin-top: var(--p20);
        font-size: vaR(--ft32);
    }

    .content {
        background: rgba(255,255,255,0.1);
  line-height: 1.7;
        font-size: vaR(--ft20);
        width: 800px;
        max-width: 100%;
        padding: vaR(--p23);
        margin: var(--p28) auto 0;
    }
    ul{
        margin-top: vaR(--p40);
        .flex-center;
        gap: vaR(--p20);
        flex-wrap: wrap;
        .btn:nth-child(2){
            background: initial;
            color: #fff;
        }
    }
    .btn {
        --btn:60px;
        font-size: var(--ft18);
        color: #0F52BA;
        font-weight: bold;
        
        padding: 0 vaR(--p40);

        --btn_color: #fff;
        border-radius: 40px;
    }
}


.CongyeInfo{
    &:nth-child(odd){background: #F9FAFB;
    --color:#fff;
    }
}
.CongyeInfo{
    --main:1024px;
    .item{
        margin-bottom: var(--p40);
    }
    .title{
        font-size: vaR(--ft24);
        margin-bottom: var(--p20);
    }
    .content{
        
    }
    .youshi1,
    .youshi{
        background: vaR(--color);
        padding: vaR(--p24);
        ul{
            
        .d-grid;
        .grid2;
        gap:vaR(--p20);
        &.feature-list1{
            .grid1;
        }
        li{
            .d-flex;
            .al-c;
            gap: 10px;
        }
        }
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 0px rgba(0,0,0,0), 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1);
border-radius: 8px 8px 8px 8px;
    }
    .youshi1{
        ul{
            .grid1;
        }
      
    }
    .dl{
        .d-grid;
        .grid3;
        gap: vaR(--p25);
        dd{
            background: vaR(--color);
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 0px rgba(0,0,0,0), 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1);
            border-radius: 8px 8px 8px 8px;
            border-radius: 12px;
            overflow: hidden;
        .img{
         aspect-ratio: 3/2; 
         overflow: hidden;
         transition: all 0.5s;
         
         img:hover{
             transform: scale(1.2);
         }
        }
        .con1{
            padding: vaR(--p20);
        }
        .t1{
            .d-flex;
            .al-c;
            gap: vaR(--p10);
        }
        h5{
            font-size: vaR(--ft20);
        }
        .sub{
            margin-top: vaR(--p10);
            color: #4B5563;
        }
        }
    }
    .con{
        direction: ltr;
    }
    .PictureItem{
        .d-grid;
        .grid2;
        gap: vaR(--p20);
      &.right{
          direction: rtl;
      }
    }
}
.DetialsPingjia{
    .summary{
        margin-top: vaR(--p50);
        text-align: center;
        font-size: vaR(--ft20);
        line-height: 2;
        h5{
            font-size: vaR(--ft24);
        }
    }
}
.DetialsPingjiaList{
    .d-grid;
    .grid2;
    gap: var(--p30);
    .item{
        padding: var(--p30);
        background: #00000010;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 0px rgba(0,0,0,0), 0px 1px 2px 0px rgba(0,0,0,0.05);
        border-radius: 12px 12px 12px 12px;
        .sub{
            line-height: 1.5;
            font-size: var(--ft17);
            color: #374151;
            margin-top: vAR(--p15);
        }
        h5{
            margin-top: vAR(--p15);
            font-size: vaR(--ft15);
            .d-flex;
            .al-c;
            gap: vaR(--p15);
        }
    }
}
.DetialsMain{
    .titleCom{
        .desc{
            font-size: vaR(--ft20);
            color: #4B5563;
        }
    }
}
.DetialsLine {
    background: #F9FAFB;
}
.DetialsLineList{
     .d-flex;
     .jc-s;
     gap: var(--p25);
    position: relative;

    &::before {
        position: absolute;
        display: block;
        content: '';
        background: #1E40AF20;
        left: 0;
        right: 0;
        height: 2px;
        top: 50%;
        transform: translateY(-50%);
    }

    .num {
        font-size: var(--ft20);
        font-weight: bold;
        .flex-center;
        width: 3em;
        height: 3em;
      .bgc;
        color: #fff;
        border-radius: 50%;
    }

    .item {
        position: relative;
        z-index: 1;
        width: 170px;
        max-width: 100%;
        .d-flex;
        .flex-column;
        .al-c;
        text-align: center;
        padding: vaR(--p24) vaR(--p10);
          background: #FFFFFF;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
        border-radius: 12px 12px 12px 12px;
    }

  
   
        h5 {
            margin-top: vaR(--p10);
            font-size: var(--ft16);
        }

        .sub {
            font-size: vaR(--ft14);
            color: #374151;
            margin-top: var(--p10);
        }

}
.DetialsPinList{
    .d-grid;
    .grid2;
    gap: vaR(--p32) vaR(--p24);
    .item{
        background: #F9FAFB;
        border-radius: 12px 12px 12px 12px;padding: var(--p24);
        .d-grid;
        grid-template-columns: 3em 1fr;
        gap: vaR(--p15);
        .al-fs;
        h5{
            font-size: vaR(--ft20);
        }
        .sub{
            color: #374151;
            margin-top: vaR(--p10);
            line-height: 1.7;
        }
    }
}
.DetialsType{
    background: #F9FAFB;
    .summary{
        margin-top: vaR(--p40);
        text-align: center;
    }
}
.DetialsHexinList{
    .d-grid;
    .grid2;
    gap: var(--p40) vaR(--p20);
    .item{
        background: #F9FAFB;
        border-radius: 12px 12px 12px 12px;
        padding: vaR(--p40) vaR(--p32);
        .title{
            .d-flex;
            .al-c;
            gap: vaR(--p10);
            color: #0F52BA;
            font-size: vaR(--ft24);
        }
        .sub{
            margin-top: vaR(--p15);
        }
        .content{
            margin-top: vaR(--p15);
            .text{
                .d-grid;
                gap: var(--p10);
                li{
                    .d-flex;
                    .al-c;
                    gap: 5px;
                }
            }
            .two{
                .d-grid;
                gap: var(--p12);
                .grid2;
                li{
                    .d-flex;
                    .al-c;
                    gap: 5px;
                }
                
            }
            dl{
                .d-grid;
                .grid2;
                gap: vaR(--p32);
                dd{
                    text-align: center;
                    padding: vaR(--p20);
                    background: #fff;box-shadow: 0px 0px 0px 0px rgba(0,0,0,0), 0px 0px 0px 0px rgba(0,0,0,0), 0px 1px 2px 0px rgba(0,0,0,0.05);
border-radius: 8px 8px 8px 8px;
                     strong{
                         display: block;
                         .ftc;
                         font-size: var(--ft36);
                     }
                }
            }
        }
    }
}
.DetialsTop{
    background: #F9FAFB;
}
.DetialsTopList{
    .d-grid;
    gap: vaR(--p60);
    .title{
        font-size: vaR(--ft24);
        margin-bottom: vaR(--p20);
    }
    .sub{
        color: #374151;
        margin-top: vaR(--p15);
    }
    .content{
        margin-top: vaR(--p15);
    }
    .test-methods{
        background: #F3F4F6;
border-radius: 12px 12px 12px 12px;
padding: vaR(--p24);

ul{
    margin-top: vaR(--p20);
    .d-grid;
    .grid2;
    gap:var(--p20);

    li{
        .d-flex;
        .al-c;
        gap: vaR(--p10);;
    }
}
    }
}
.DetialsPromiseList{
    .feature-list1{
        .d-grid;
        gap: var(--p10);
        margin-bottom: vaR(--p40);
        li{
            padding: var(--p20);
            .d-flex;
            font-size: var(--ft18);
            .al-c;
            gap: vaR(--p15);
        }
    }
    .feature-list2{
        .d-grid;
        .grid3;
        gap: var(--p10);
        margin-top: vaR(--p20);
        margin-bottom: vaR(--p40);
        li{
            padding: var(--p25);
          
            h5{
                font-weight: normal;
                font-size: vaR(--ft20);
                margin: vaR(--p15) 0;
            }
        }
    }
}

.DetialsText{
    padding: vaR(--p30) 0;
    background: linear-gradient( 0deg, rgba(20,98,255,0.05) 0%, rgba(20,88,255,0.1) 100%);
    .back{
    width: fit-content;
    .d-flex;
    .al-c;
    gap: vaR(--p10);
    &:hover{
        .ftc;
    }
    }
    .block{
        .d-grid;
        .grid2;
        .al-c;
        gap: var(--p30);
    }
    .title{
        .ftc;
        font-size: var(--ft18);
        font-weight: bold;
      
    }
    .desc{
        font-weight: bold;
        margin-top: vaR(--p20);
        font-size: var(--ft56);
          b{
              font-weight: normal;
            color: #1073D2;
        }
    }
    .summary{
        color: #4B5563;
        font-size: var(--ft18);
        margin-top: vaR(--p20);
        h5{
            font-weight: normal;
            font-size: vaR(--ft20);
        }
    }
    ul{
        margin-top: vaR(--p30);
        .d-flex;
        flex-wrap: wrap;
        gap: var(--p10);
        .btn:nth-child(2){
            .ftc;
            background: initial;
        }
    }
    .btn{
        font-size: var(--ft18);
        --btn:50px;
        border-radius: 40px;
        --btn_color:var(--ftc);
    }
    .img{
        border-radius: 8px;
    }
    
}
.IndexProduct{
    .pic{
        border-radius: 12px;
        margin-top: vaR(--p60);
    }
}
.IndexHexinList{
    .d-grid;
    .grid3;
    gap: var(--p26);
    .item{
        border-radius: 12px;
        aspect-ratio: 450/560;
        .bg_img;
        color: #fff;
        .d-flex;
        .al-fe; 
          transition: all 0.3s ease-out;
        &:hover {
        
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        
     
      .con{
          min-height: 60%;
          padding: vaR(--p30);
      }
            h5{
                font-size: vaR(--ft30);
            }
        .sub{
            line-height: 1.5;
            font-size: vaR(--ft20);
            margin-top: vaR(--p10);
        }
        .content{
            margin-top: vaR(--p10);
            ul{
                .d-grid;
                gap: var(--p10);
                li{
                    .d-flex;
                    .al-c;
                    gap: var(--p10);
                }
            }
        }
    }
}
.IndexMap{
    --main:1500px;
    .pic{
        margin-bottom: var(--p60);
    }
}
.IndexMapList{
    text-align: center;
    .d-flex;
    .al-c;
    .jc-s;
    flex-wrap: wrap;
    gap: vaR(--p20);
    h5{
        font-family: 'Ruizi';
        font-size: vaR(--ft54);
        .ftc;
    }
    .sub{
        margin-top: vaR(--p20);
        font-size: vaR(--ft20);
    }
}
@media only screen and (max-width: 1700px) {
    .ProductNav ul {
        gap: var(--p10);
    }

    .ProductNav ul .item {
        padding: var(--p28) var(--p20);
    }
}
ul {
    img{
        flex-shrink: 0;
    }
}
@media only screen and (max-width: 990px) {
    .ProductNav ul{
        flex-wrap: wrap;
    }
.Banner_swiper .item{
    aspect-ratio: unset;
}
.top_box hr{
    width: 3em;
    height: 2px;
}
.WuliuSpecialList .item:nth-child(3n+3),
.PoultrySeriveList .item:last-child{
    grid-column: span 1;
}
.WuliuLineList .num{
    width: 1.5em;
    height: 1.5em;
}
.AboutInfo .img img{
    max-width: 60%;
}
.GongyeText .btn,
.BeautyCooper .btn,
.c3Text .btn{
    --btn:38px;
}
.ProductCooldList,
.CongyeInfo .dl,
.BeautyProductList,
.BeautyYoushiList,
.WuliuWhy .item .advantage-list,
.c3YoushiList,
.SoultList{
    .grid2;
}
.contactTitle::before{
    height: 3px;
}
.IndexMapList .item{
    width: 40%;
}
.IndexHexinList .item .con{
    min-height: auto;
}
.IndexHexinList .item {
    
    aspect-ratio: 450 / 300;
}
.IndexHexinList,
.AboutFristList,
.AboutInfo .main,
.ProductCateList .item,
.CongyeInfo .PictureItem,
.c3NengliList,
.c3Product .tbody .item,
.c3Text .main,
.PoultryCaseList,
.PoultrySeriveList,
.WuliuSpecialList .item:nth-child(3n+3) .con,
.WuliuSpecialList,
.WuliuThreeList,
.ContactLink,
.ContactInfo{
    .grid1;
}
.ProductWhyList{
    .d-grid;
    .grid3;
}
    .top_box {
        min-height: auto;
    }

    header {
        .logo {
            max-width: 50vw;

            img {
                max-height: 30px;
            }
        }
    }

    footer {
        .footerLogo {

            img {
                max-height: 30px;
            }
        }
    }
}

@media only screen and (max-width: 768px) {}

@media only screen and (min-width: 751px) and (max-width: 1400px) {}

@media only screen and (min-width: 751px) {}