/* public css */
:root {
    /* 宽度 */
    --jq_w1200: 1200px;
    /* 颜色 */
    --jq_primary: #fc540b; /* 按钮主色、标题重点字、链接 hover */
    --jq_assistant: #2e4957; /* 辅助色、文字颜色 */
    --jq_warn: #ff7134; /*  警告色 */
    --jq_error: #fc540b; /* 错误色 */
    --jq_success: #36a946; /* 成功色 */
    --jq_title: #1b70d8; /* 标题色或卡片轮廓线 */
    --jq_line: #94c2fa; /* 模块分割线或大段强调背景 */
    --jq_hover: #ef4b42; /* hover 状态、悬浮按钮 */
    --jq_black: #000000;
    --jq_black1: #111111;
    --jq_black2: #222222;
    --jq_gray1: #333333;
    --jq_gray2: #666666;
    --jq_gray3: #999999;
    --jq_gray4: #cccccc;
    --jq_gray5: #dddddd;
    --jq_gray6: #eeeeee;
    --jq_gray7: #f5f5f5;
    --jq_white: #ffffff;
    --jq_green: #95ec69;
    --jq_color1: #9fd3ff;

    /* 字体大小 */
    --jq_fs1: 12px;
    --jq_fs2: 14px;
    --jq_fs3: 16px;
    --jq_fs4: 18px;
    --jq_fs5: 20px;
    --jq_fs6: 22px;
    --jq_fs7: 24px;
    --jq_fs8: 26px;
    --jq_fs9: 28px;
    --jq_fs10: 30px;
    --jq_fs11: 32px;
    --jq_fs12: 34px;


}
html, body, .app {
    width: 100%;
    height: 100%;
    color: var(--jq_white);
    font-size: var(--jq_fs2);
    background: #1c1c1c;
}
* {
    color: var(--jq_white);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: all 0.3s;
}
a {
    color: var(--jq_white);
    text-decoration: none;
    &:hover {
        color: var(--jq_primary);
    }
}
.box-1200 {
    width: var(--jq_w1200);
}
.button {
    width: 100%;
    height: 36px;
    background: var(--jq_primary);
    border: none;
    border-radius: 5px;
    color: var(--jq_white);
    font-size: var(--jq_fs3);
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.button.border {
    border: 1px solid var(--jq_primary);
    background: var(--jq_white);
    color: var(--jq_primary);
}
.button:hover {
    opacity: 0.8;
    color: var(--jq_white);
}
.button.border:hover {
    color: var(--jq_primary);
    background: #ebf3fc;
}
.button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.button[disabled].border {
    border: 1px solid var(--jq_gray4);
    color: var(--jq_gray3);
    &:hover {
        background: var(--jq_white);
    }
}
/* form */
.jq-common-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    .form-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .form-item {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
            font-size: var(--jq_fs2);
            .field-label {
                width: 100%;
                display: flex;
                align-items: center;
                flex-shrink: 0;
                padding: 7px 0;
                font-size: var(--jq_fs3);
                span {
                    color: var(--jq_error);
                    margin-right: 5px;
                }
            }
            .field-value {
                width: 100%;
                display: flex;
                flex-direction: column;
                .field-value-input {
                    width: 100%;
                    display: flex;
                    .input, .textarea, .select {
                        width: 100%;
                        height: 40px;
                        padding: 0 10px;
                        border: 1px solid var(--jq_gray4);
                        outline: none;
                        font-size: var(--jq_fs2);
                        border-radius: 4px;
                        transition: all 0.3s;
                        background: none;
                        color: var(--jq_white);
                    }
                    .select option {
                        background: var(--jq_white);
                        color: var(--jq_gray1);
                    }
                    .textarea {
                        min-height: 64px;
                        height: auto;
                        padding: 2px 4px;
                    }
                    .input:hover, .textarea:hover, .select:hover {
                        border: 1px solid var(--jq_primary);
                    }
                    .input.error, .textarea.error, .select.error {
                        border: 1px solid var(--jq_error);
                    }
                    .imgs {
                        width: 80px;
                        height: 32px;
                        margin-left: 2px;
                        flex-shrink: 0;
                    }
                }
                .field-value-error {
                    width: 100%;
                    font-size: var(--jq_fs2);
                    color: var(--jq_error);
                    margin-top: 2px;
                    display: none;
                }
                .field-value-error.active {
                    display: block;
                }
            }
        }
        .form-item.w50 {
            width: 50%;
        }
        .form-item.horizontal {
            flex-direction: initial;
            .field-label {
                width: 120px;
                text-align: right;
                justify-content: flex-end;
                align-items: flex-start;
            }
        }
    }
    .form-submit {
        width: 100%;
        margin-top: 10px;
        .btn {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: var(--jq_fs2);
            font-weight: bold;
            background: var(--jq_primary);
            border-radius: 5px;
            cursor: pointer;
            padding: 0 8px;
            border: none;
            opacity: 0.8;
            color: var(--jq_color2);
            &:hover {
                opacity: 1;
            }
        }
    }
}
/* 公共表格 */
.public-table {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 5px;
    .theads {
        width: 100%;
        height: 46px;
        flex-shrink: 0;
        .ths {
            width: 100%;
            height: 100%;
            background: var(--jq_primary);
            display: flex;
            .tds {
                width: 100%;
                padding: 5px 16px;
                display: flex;
                align-items: center;
                font-weight: bold;
            }
        }
    }
    .tbodys {
        width: 100%;
        .trs {
            width: 100%;
            display: flex;
            border-bottom: 1px solid var(--jq_gray5);
            &:hover {
                background: var(--jq_gray2);
            }
            .tds {
                width: 100%;
                padding: 10px 16px;
                display: flex;
                align-items: center;
                a:hover {
                    text-decoration: underline;
                }
            }
        }
        tr:nth-child(odd) {
            background: var(--jq_black2);
        }
        tr:nth-child(even) {
            background: var(--jq_black1);
        }
    }
}
.public-table.border {
    border: 1px solid var(--jq_gray5);
    .tbodys {
        .trs {
            &:last-child {
                border: none;
            }
        }
    }
}
.public-table.borderAndTd {
    border: 1px solid var(--jq_gray5);
    .theads {
        .ths {
            .tds {
                border-right: 1px solid var(--jq_gray5);
                &:last-child {
                    border-right: none;
                }
            }
        }
    }
    .tbodys {
        .trs {
            .tds {
                border-right: 1px solid var(--jq_gray5);
                &:last-child {
                    border-right: none;
                }
            }
        }
    }
}
.public-table.h-100 {
    height: 100%;
    .tbodys {
        height: calc(100% - 46px);
        overflow: hidden auto;
    }
}
.public-table.deals {
    .theads {
        .ths {
            background: #b3d7fb;
        }
    }
}
.public-table.discount {
    .theads {
        .ths {
            background: #3172dc;
            .tds {
                color: var(--jq_white);
            }
        }
    }
}
.public-table.popular {
    .theads {
        .ths {
            background: #304d82;
            .tds {
                color: var(--jq_white);
            }
        }
    }
}
.public-table.rfq {
    .theads {
        .ths {
            background: #e9f0fe;
        }
    }
}
.del-text {
    text-decoration: line-through;
}
.now-price {
    color: var(--jq_primary3);
}
.input, .textarea, select {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--jq_gray7);
    outline: none;
    font-size: var(--jq_fs2);
    border-radius: 4px;
    transition: all 0.3s;
    color: var(--jq_gray1);
}
select {
    width: auto;
}
.textarea {
    min-height: 64px;
    height: auto;
    padding: 5px 10px;
}
.input:hover, .textarea:hover {
    border: 1px solid var(--jq_primary);
}
.input.error, .textarea.error {
    border: 1px solid var(--jq_white);
}
/* 公共 */
.app {
    min-height: 100%;
    height: 100%;
    display: flex;
    position: relative;
    /* background-attachment: fixed;
  background-size: cover; */
    .logo-menu-footer {
        width: 220px;
        height: 110px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        opacity: 0.9;
        .lmf-box {
            width: 220px;
            height: 100%;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            .logo {
                width: 100%;
                padding: 20px;
                flex-shrink: 0;
                position: relative;
                a {
                    width: 100%;
                    img {
                        width: 100%;
                    }
                }
                .menu-select {
                    position: absolute;
                    left: 20px;
                    bottom: -20px;
                    display: flex;
                    align-items: center;
                    i {
                        font-size: var(--jq_fs10);
                        margin-right: 5px;
                        color: var(--jq_primary)
                    }
                }
            }
            .menu {
                width: 100%;
                height: 100%;
                /* overflow: hidden auto; */
                display: none;
                flex-direction: column;
                padding: 20px 0;
                .menu-item {
                    width: 100%;
                    position: relative;
                    .item-a {
                        width: 100%;
                        padding: 15px 30px;
                        display: flex;
                        align-items: center;
                        i {
                            margin-right: 10px;
                            font-size: var(--jq_fs4);
                        }
                        span {
                            font-size: var(--jq_fs2);
                        }
                        &:hover {
                            background: var(--jq_primary);
                        }
                    }
                    .menu-child {
                        width: 200px;
                        position: absolute;
                        left: 100%;
                        top: 0;
                        background: var(--jq_gray1);
                        display: none;
                        flex-direction: column;
                        border: 1px solid var(--jq_gray3);
                        border-left: none;
                        box-shadow: 5px 0 6px var(--jq_gray2);
                        border-radius: 0 10px 10px 0;
                        overflow: hidden;
                        .child-a {
                            padding: 15px 30px;
                            display: flex;
                            align-items: center;
                            color: var(--jq_white);
                            &:hover {
                                background: var(--jq_primary);
                            }
                        }
                    }
                    &:hover {
                        .item-a {
                            background: var(--jq_primary);
                        }
                        .menu-child {
                            display: flex;
                        }
                    }
                }

            }
            .footer {
                width: 100%;
                padding: 20px;
                flex-shrink: 0;
                border-top: 1px solid var(--jq_gray2);
                display: none;
                flex-direction: column;
                .phone, .email {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    font-size: var(--jq_fs2);
                    margin-bottom: 5px;
                    .iconfont {
                        font-size: var(--jq_fs3);
                        color: var(--jq_gray4);
                        margin-right: 5px;
                    }
                    span {
                        color: var(--jq_gray4);
                    }
                }
                .inquiry {
                    width: 100%;
                    background: var(--jq_error);
                    color: var(--jq_white);
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: var(--jq_fs2);
                    margin-top: 10px;
                    padding: 5px 10px;
                    &:hover {
                        background: var(--jq_primary);
                    }
                }
            }
        }
        &:hover {
            height: 100%;
            background: var(--jq_gray1);
            box-shadow: 0 0 5px var(--jq_gray4);
            position: fixed;
            .lmf-box {
                .logo {
                    background: var(--jq_gray1);
                    border-bottom: 1px solid var(--jq_gray2);
                    box-shadow: 0 0 5px var(--jq_gray4);
                    border-radius: 0;
                    box-shadow: 0 0 0 var(--jq_gray4);
                    .menu-select {
                        display: none;
                    }
                }
                .menu, .footer {
                    display: flex;
                }
            }
        }
    }
    .wrap {
        width: 100%;
        min-height: 100%;
        padding-top: 110px;
        /* 首页 */
        .home-wrap {
            width: 100%;
            min-height: 100%;
            padding-top: 30px;
            .screen-one {
                width: 100%;
                /* min-height: 100%; */
                padding: 0 50px;
                padding-bottom: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .title {
                    width: 60%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 10px;
                    .max-txt {
                        font-size: var(--jq_fs10);
                        font-weight: bold;
                        margin-bottom: 10px;
                    }
                    .min-txt {
                        font-size: var(--jq_fs4);
                        color: var(--jq_gray5);
                    }
                }
                .search-wrap {
                    width: 60%;
                    padding: 10px 20px;
                    padding-bottom: 5px;
                    background: var(--jq_gray1);
                    border: 1px solid var(--jq_gray3);
                    border-radius: 5px;
                    margin-bottom: 20px;
                    .search-box {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        .form-box {
                            width: 100%;
                            height: 46px;
                            display: flex;
                            .input {
                                width: 100%;
                                height: 100%;
                                background: var(--jq_gray2);
                                border-radius: 10px;
                                margin-right: 10px;
                                position: relative;
                                input {
                                    width: 100%;
                                    height: 100%;
                                    border: none;
                                    outline: none;
                                    background: transparent;
                                    color: var(--jq_white);
                                    font-size: var(--jq_fs4);
                                    &::placeholder {
                                        color: var(--jq_gray4);
                                    }
                                }
                                .input-child {
                                    width: 100%;
                                    height: auto;
                                    display: none;
                                    flex-direction: column;
                                    background: var(--jq_gray2);
                                    border: 1px solid var(--jq_primary);
                                    position: absolute;
                                    left: 0;
                                    top: 45px;
                                    z-index: 2;
                                    border-radius: 0 0 10px 10px;
                                    a {
                                        padding: 5px 10px;
                                    }
                                }

                            }
                            .input.active {
                                border-radius: 10px 10px 0 0;
                                border: 1px solid var(--jq_primary);
                                .input-child {
                                    display: flex;
                                }
                            }
                            .button {
                                width: 100px;
                                height: 100%;
                                background: var(--jq_gray2);
                                border-radius: 10px;
                                overflow: hidden;
                                flex-shrink: 0;
                                border: none;
                                outline: none;
                                background: var(--jq_error);
                                padding: 0 20px;
                                color: var(--jq_white);
                                font-size: var(--jq_fs4);
                                cursor: pointer;
                                &:hover {
                                    background: var(--jq_primary);
                                }
                            }
                        }
                        .hot {
                            width: 100%;
                            display: flex;
                            align-items: flex-start;
                            margin-top: 10px;
                            .label {
                                flex-shrink: 0;
                                font-size: var(--jq_fs2);
                                padding: 3px 0;
                            }
                            .value {
                                width: 100%;
                                display: flex;
                                flex-wrap: wrap;
                                a {
                                    padding: 3px 6px;
                                    background: #1c1c1c;
                                    color: #fff;
                                    border-radius: 3px;
                                    margin-right: 5px;
                                    margin-bottom: 5px;
                                    font-size: var(--jq_fs1);
                                    &:hover {
                                        opacity: 0.8;
                                    }
                                }
                            }
                        }
                    }
                    &:hover {
                        border-color: var(--jq_gray7);
                    }
                }
                .business-agency {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20px;
                    .business, .agency {
                        width: calc(50% - 10px);
                        height: 160px;
                        background: var(--jq_gray1);
                        border: 1px solid var(--jq_gray3);
                        display: flex;
                        flex-direction: column;
                        border-radius: 5px;
                        overflow: hidden;
                        .item {
                            width: 100%;
                            display: flex;
                            font-size: var(--jq_fs2);
                            margin-bottom: 15px;
                            .label {
                                flex-shrink: 0;
                            }
                            .value {
                                width: 100%;
                                display: flex;
                                a {
                                    margin-right: 5px;
                                    text-decoration: underline;
                                }
                            }
                        }
                        &:hover {
                            border-color: var(--jq_gray7);
                        }
                        .swiper {
                            width: 100%;
                            height: 100%;
                            .swiper-wrapper {
                                width: 100%;
                                height: 100%;
                                .swiper-slide {
                                    width: 100%;
                                    height: 100%;
                                    a {
                                        width: 100%;
                                        height: 100%;
                                        img {
                                            width: 100%;
                                            height: 100%;
                                            object-fit: cover;
                                        }
                                    }
                                }
                            }
                            .swiper-pagination {
                                .swiper-pagination-bullet {
                                    background: var(--jq_white);
                                    opacity: 1;
                                }
                                .swiper-pagination-bullet.swiper-pagination-bullet-active {
                                    background: var(--jq_primary) !important;
                                }
                            }
                        }
                    }
                }
                .series {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    .item {
                        width: calc(20% - 10px);
                        background: var(--jq_gray1);
                        border: 1px solid var(--jq_gray3);
                        padding: 5px 20px;
                        border-radius: 5px;
                        margin-bottom: 10px;
                        display: flex;
                        flex-direction: column;
                        .tit {
                            width: 100%;
                            font-size: var(--jq_fs3);
                            color: var(--jq_white);
                            margin-bottom: 5px;
                        }
                        .brand {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            .label {
                                flex-shrink: 0;
                                font-size: var(--jq_fs1);
                            }
                            .value {
                                display: flex;
                                align-items: center;
                                flex-wrap: wrap;
                                span {
                                    padding: 2px 5px;
                                    background: #1c1c1c;
                                    color: var(--jq_white);
                                    font-size: var(--jq_fs1);
                                    margin-left: 5px;
                                    border-radius: 2px;
                                    margin-bottom: 5px;
                                }
                            }
                        }
                        .more {
                            color: var(--jq_primary);
                            font-size: var(--jq_fs1);
                            display: flex;
                            align-items: center;
                            span {
                                color: var(--jq_error);
                            }
                            i {
                                margin-left: 5px;
                                font-size: var(--jq_fs1);
                                color: var(--jq_error);
                            }
                            &:hover {
                                span {
                                    text-decoration: underline;
                                }
                            }
                        }
                        &:hover {
                            border-color: var(--jq_gray7);
                        }
                    }
                }
                .seriectwo {
                    width: 100%;
                    background: var(--jq_gray1);
                    border: 1px solid var(--jq_gray3);
                    border-radius: 5px;
                    padding: 10px 20px;
                    padding-left: 0;
                    display: flex;
                    flex-wrap: wrap;
                    .item {
                        width: calc(100% / 5 - 20px);
                        margin-left: 20px;
                        display: flex;
                        position: relative;
                        > a {
                            width: 100%;
                            height: 30px;
                            padding: 10px;
                            border-radius: 5px 5px 0 0;
                            display: flex;
                            align-items: center;
                            span {
                                display: -webkit-box;
                                -webkit-line-clamp: 1;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                            }
                            .iconfont {
                                margin-left: 5px;
                                font-size: var(--jq_fs1);
                                flex-shrink: 0;
                            }
                        }
                        .item-child {
                            width: 100%;
                            position: absolute;
                            left: 0;
                            top: 30px;
                            display: none;
                            flex-direction: column;
                            z-index: 1;
                            padding: 10px;
                            border-radius: 0 0 5px 5px;
                            a {
                                width: 100%;
                                /* padding: 5px 0; */
                                margin: 5px 0;
                                color: var(--jq_gray1);
                                font-size: var(--jq_fs1);
                                display: -webkit-box;
                                -webkit-line-clamp: 1;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                                &:hover {
                                    color: var(--jq_primary);
                                }
                            }
                        }
                        &:hover {
                            > a {
                                background: var(--jq_white);
                                border-bottom: 1px solid var(--jq_gray6);
                                span, i {
                                    color: var(--jq_gray1);
                                    font-weight: bold;
                                }
                            }
                            .item-child {
                                background: var(--jq_white);
                                display: flex;
                            }
                        }
                    }
                }
            }
            .screen-two {
                width: 100%;
                /* min-height: 100%; */
                padding: 0 50px;
                padding-bottom: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .title {
                    width: 100%;
                    display: flex;
                    margin-bottom: 10px;
                    justify-content: space-between;
                    align-items: center;
                    > span {
                        font-size: var(--jq_fs10);
                        font-weight: bold;
                        color: var(--jq_error);
                    }
                    a {
                        display: flex;
                        align-items: center;
                        .txt {
                            color: var(--jq_primary);
                        }
                        .iconfont {
                            font-size: var(--jq_fs1);
                            margin-left: 5px;
                            color: var(--jq_primary);
                        }
                    }
                }
                .model-wrap {
                    width: calc(100% + 10px);
                    display: flex;
                    flex-wrap: wrap;
                    position: relative;
                    margin-left: -10px;
                    .model-item {
                        width: calc(20% - 10px);
                        background: var(--jq_gray1);
                        border: 1px solid var(--jq_gray3);
                        border-radius: 5px;
                        margin-left: 10px;
                        margin-bottom: 10px;
                        padding: 10px 20px;
                        display: flex;
                        flex-direction: column;
                        .icon-tit {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            margin-bottom: 10px;
                            .icon {
                                padding: 3px 6px;
                                background: var(--jq_primary);
                                font-weight: bold;
                                font-size: 12px;
                                border-radius: 10px;
                                margin-right: 10px;
                            }
                            .tit {
                                font-size: var(--jq_fs4);
                            }
                        }
                        .model-txt {
                            font-size: var(--jq_fs5);
                            font-weight: bold;
                        }
                        .model-brand {
                            font-size: var(--jq_fs2);
                            color: var(--jq_gray3);
                            margin-bottom: 10px;
                        }
                        .model-icon {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            margin-bottom: 5px;
                            a {
                                width: 22px;
                                height: 22px;
                                margin-right: 10px;
                                display: flex;
                                align-items: center;
                                .icon-pdf {
                                    font-size: var(--jq_fs8);
                                }
                                .icon-shipin {
                                    font-size: var(--jq_fs12);
                                }
                                &:hover {
                                    i {
                                        color: var(--jq_primary);
                                    }
                                }
                            }
                            a.img {
                                width: 22px;
                                height: 22px;
                                background: var(--jq_white);
                                border: 1px solid var(--jq_white);
                                border-radius: 2px;
                                overflow: hidden;
                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                                &:hover {
                                    border-color: var(--jq_primary);
                                }
                            }
                        }
                        .price-more {
                            display: flex;
                            justify-content: space-between;
                            .price {
                                display: flex;
                                align-items: center;
                                .unit {
                                    font-size: var(--jq_fs2);
                                    color: var(--jq_gray3);
                                    margin-right: 5px;
                                }
                                .value {
                                    font-size: var(--jq_fs4);
                                    color: var(--jq_error);
                                    font-weight: bold;
                                }
                            }
                            .more {
                                display: flex;
                                a {
                                    display: flex;
                                    width: 24px;
                                    height: 24px;
                                    background: #1c1c1c;
                                    justify-content: center;
                                    align-items: center;
                                    border-radius: 100%;
                                    i {
                                        font-size: var(--jq_fs1);
                                        color: var(--jq_white);
                                    }
                                    &:hover {
                                        background: var(--jq_primary);
                                    }
                                }
                            }
                        }
                        &:hover {
                            border-color: var(--jq_gray7);
                            .price-more {
                                .more {
                                    a {
                                        i {
                                            transform: translateX(3px);
                                            font-size: var(--jq_fs2);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .screen-three {
                width: 100%;
                /* min-height: 100%; */
                padding: 0 50px;
                padding-bottom: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .advertisement {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    a {
                        width: 100%;
                        margin-bottom: 10px;
                        img {
                            width: 100%;
                            height: 150px;
                            object-fit: cover;
                        }
                    }
                }
                .title-down {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 40px;
                    .tit {
                        display: flex;
                        flex-direction: column;
                        .max-tit {
                            font-size: var(--jq_fs10);
                            font-weight: bold;
                            color: var(--jq_error);
                        }
                        .min-tit {
                            font-size: var(--jq_fs3);
                            color: var(--jq_gray4);
                        }
                    }
                    .down {
                        display: flex;
                        flex-shrink: 0;
                        a {
                            padding: 0 20px;
                            height: 42px;
                            border: 1px solid var(--jq_error);
                            border-radius: 20px;
                            display: flex;
                            align-items: center;
                            span {
                                font-size: var(--jq_fs5);
                                color: var(--jq_error);
                                margin-right: 10px;
                            }
                            i {
                                font-size: var(--jq_fs7);
                                color: var(--jq_error);
                            }
                            &:hover {
                                border-color: var(--jq_primary);
                                span, i {
                                    color: var(--jq_primary);
                                }
                            }
                        }
                    }
                }
                .quoteBomInventory {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    padding-bottom: 20px;
                    a {
                        width: calc(100% / 3 - 30px);
                        background: var(--jq_gray1);
                        border: 1px solid var(--jq_gray3);
                        border-radius: 5px;
                        padding: 20px 40px;
                        display:flex;
                        flex-direction: column;
                        .icon {
                            width: 48px;
                            height: 48px;
                            background: var(--jq_primary);
                            border-radius: 10px;
                            margin-bottom: 20px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            i {
                                font-size: var(--jq_fs12);
                            }
                        }
                        .txt {
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            .max-txt {
                                width: 100%;
                                font-size: var(--jq_fs8);
                                font-weight: bold;
                            }
                            .min-txt {
                                width: 100%;
                                font-size: var(--jq_fs4);
                                color: var(--jq_gray4);
                                /* display: flex;
                flex-direction: column; */
                                /* word-wrap:break-word;
                word-break:normal;  */
                                word-break:break-all; /* 按字符截断换行 支持IE和chrome，FF不支持 */
                                word-wrap:break-word; /* 按英文单词整体截断换行 以上三个浏览器均支持 */
                                /* white-space:nowrap; overflow:hidden; text-overflow:ellipsis; */
                            }
                        }
                        &:hover {
                            border-color: var(--jq_gray7);
                        }
                    }
                }
                .need-help {
                    width: 100%;
                    border-top: 1px solid var(--jq_gray3);
                    padding-top: 20px;
                    display: flex;
                    flex-direction: column;
                    .tit {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        margin-bottom: 5px;
                        span {
                            font-size: var(--jq_fs3);
                        }
                        i {
                            font-size: var(--jq_fs4);
                            margin-left: 5px;
                        }
                    }
                    .provide {
                        width: 100%;
                        color: var(--jq_gray4);
                    }
                }
            }
            .screen-four {
                width: 100%;
                /* min-height: 100%; */
                padding: 0 50px;
                padding-bottom: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .blog {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    .title {
                        width: 100%;
                        font-size: var(--jq_fs10);
                        font-weight: bold;
                        color: var(--jq_error);
                        margin-bottom: 40px;
                    }
                    .blog-wrap {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        .max-item {
                            width: calc(100% / 3 - 30px);
                            background: var(--jq_gray1);
                            border: 1px solid var(--jq_gray3);
                            border-radius: 5px;
                            padding: 10px 20px;
                            display: flex;
                            flex-direction: column;
                            .min-item {
                                padding: 10px 0;
                                cursor: pointer;
                                display: flex;
                                justify-content: center;
                                .txt {
                                    width: calc(100% - 120px);
                                    display: -webkit-box;
                                    -webkit-line-clamp: 1;
                                    -webkit-box-orient: vertical;
                                    overflow: hidden;
                                }
                                .time {
                                    width: 100px;
                                    text-align: right;
                                    flex-shrink: 0;
                                    color: var(--jq_gray3);
                                }
                                &:hover {
                                    .txt, .time {
                                        color: var(--jq_primary);
                                    }
                                }
                            }
                            &:hover {
                                border-color: var(--jq_gray7);
                            }
                        }
                    }
                }
            }
        }
        /* 底部 */
        .footer-wrap {
            width: 100%;
            min-height: 300px;
            padding: 20px 50px;
            background: var(--jq_black1);
            .footer-box {
                width: 100%;
                display: flex;
                justify-content: space-between;
                .footer-item {
                    width: calc(100% / 4 - 30px);
                    display: flex;
                    flex-direction: column;
                    .logo {
                        width: 60%;
                        margin-bottom: 10px;
                        a {
                            width: 100%;
                            img {
                                width: 100%;
                            }
                        }
                    }
                    .contact {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        .item {
                            width: 100%;
                            display: flex;
                            margin-bottom: 10px;
                            .label {
                                width: 80px;
                                color: var(--jq_gray5);
                                flex-shrink: 0;
                            }
                            .value {
                                color: var(--jq_gray3);
                            }
                        }
                    }
                    .title {
                        width: 100%;
                        font-size: var(--jq_fs6);
                        font-weight: bold;
                    }
                    .menu {
                        width: 100%;
                        margin-top: 20px;
                        display: flex;
                        flex-direction: column;
                        .menu-item {
                            width: 100%;
                            padding: 5px 0;
                        }
                    }
                    .inquiryOnline {
                        width: 100%;
                        display: flex;
                        margin-bottom: 20px;
                        .iconfont {
                            font-size: var(--jq_fs12);
                        }
                    }
                    .work-time, .view-our {
                        width: 100%;
                        margin-bottom: 10px;
                    }
                    .share {
                        width: 100%;
                        display: flex;
                        .share-item {
                            width: 32px;
                            height: 32px;
                            background: var(--jq_primary);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-right: 10px;
                            border-radius: 100%;
                            &:hover {
                                background: var(--jq_error);
                            }
                        }
                    }
                }
            }
        }
        /* 面包屑 */
        .crumbs-box {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 0 50px;
            .crumbs {
                width: var(--jq_w1400);
                display: flex;
                a {
                    font-size: var(--jq_fs1);
                    padding: 10px 0;
                    padding-right: 10px;
                    &::after {
                        content: '/';
                        margin-left: 10px;
                    }
                    &:last-child {
                        color: var(--jq_gray3);
                        &::after {
                            content: '';
                        }
                    }
                }
            }
        }
        /* 产品类型 */
        .product-type {
            width: 100%;
            padding: 0 50px;
            display: flex;
            flex-direction: column;
            margin-bottom: 100px;
            .pt-box {
                width: 100%;
                display: flex;
                flex-direction: column;
                border: 1px solid var(--jq_gray3);
                border-radius: 10px;
                margin-bottom: 20px;
                background: var(--jq_gray1);
                .pt-title {
                    padding: 10px 20px;
                    font-weight: bold;
                    font-size: var(--jq_fs3);
                }
                .pt-tab {
                    padding: 10px 20px;
                    font-weight: bold;
                    font-size: var(--jq_fs3);
                    border-bottom: 1px solid var(--jq_gray3);
                    display: flex;
                    a {
                        margin-right: 20px;
                        display: flex;
                        align-items: center;
                        i {
                            font-size: var(--jq_fs5);
                            margin-right: 5px;
                        }
                        &:hover, &.active {
                            color: var(--jq_primary);
                            i, span {
                                color: var(--jq_primary);
                            }
                        }
                    }
                }
                .pt-main {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    .list-box {
                        width: 100%;
                        display: flex;
                        flex-wrap: wrap;
                        padding: 20px;
                        padding-bottom: 0;
                        a {
                            width: calc(100% / 3 - 10px);
                            margin-right: 10px;
                            margin-bottom: 20px;
                            .tit {
                                font-size: var(--jq_fs3);
                            }
                            .num {
                                font-size: var(--jq_fs1);
                                color: var(--jq_gray3);
                            }
                            &:hover {
                                .tit {
                                    color: var(--jq_primary);
                                }
                            }
                        }
                    }
                    .picture-box {
                        width: 100%;
                        display: none;
                        flex-wrap: wrap;
                        padding: 20px;
                        padding-bottom: 0;
                        a {
                            width: calc(100% / 3 - 10px);
                            margin-right: 10px;
                            margin-bottom: 20px;
                            display: flex;
                            align-items: center;
                            img {
                                width: 60px;
                                height: 60px;
                                margin-right: 10px;
                            }
                            .tit {
                                font-size: var(--jq_fs3);
                                margin-right: 5px;
                            }
                            .num {
                                font-size: var(--jq_fs1);
                                color: var(--jq_gray3);
                            }
                            &:hover {
                                .tit {
                                    color: var(--jq_primary);
                                }
                            }
                        }
                    }
                }
            }
            .pt-about-box {
                width: 100%;
                display: flex;
                flex-direction: column;
                border: 1px solid var(--jq_gray3);
                border-radius: 10px;
                background: var(--jq_gray1);
                .pt-title {
                    border-bottom: 1px solid var(--jq_gray3);
                    padding: 10px 20px;
                    font-weight: bold;
                    font-size: var(--jq_fs3);
                }
                .pt-introduction {
                    padding: 20px;
                }
                &:hover {
                    border-color: var(--jq_gray5);
                    .pt-title {
                        border-color: var(--jq_gray5);
                    }
                }
            }
        }
        /* 品牌产品列表页面 */
        .crumbs-maxTitle-search-package-inStock {
            width: 100%;
            padding: 0 20px;
            .crumbs-box {
                justify-content: flex-start;
                padding: 0;
            }
            .brand-wrap, .showing-wrap {
                width: 100%;
                padding: 20px;
                background: var(--jq_gray1);
                border-radius: 5px;
                margin-bottom: 20px;
            }
            .brandProductListmaxTitle {
                width: 100%;
                font-size: var(--jq_fs8);
                font-weight: bold;
                margin-bottom: 10px;
            }
            .brandProductList-search {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
                .search-results {
                    display: flex;
                    align-items: center;
                    .search {
                        height: 40px;
                        border: 1px solid var(--jq_gray5);
                        border-radius: 5px;
                        display: flex;
                        overflow: hidden;
                        margin-right: 10px;
                        .input {
                            width: 250px;
                            height: 100%;
                            border: none;
                            padding: 0 10px;
                            font-size: var(--jq_fs3);
                            border-radius: 5px 0 0 5px;
                        }
                        .button {
                            width: 60px;
                            height: 100%;
                            border-radius: 0;
                        }
                        &:hover {
                            border: 1px solid var(--jq_primary);
                        }
                    }
                    .results {
                        display: flex;
                        align-items: center;
                        .label {
                            color: var(--jq_gray3);
                            margin-right: 5px;
                        }
                        .value {
                            color: var(--jq_primary);
                            font-weight: bold;
                            font-size: var(--jq_fs5);
                        }
                    }
                }
                .copyLink {
                    .button {
                        width: 140px;
                        height: 38px;
                        display: flex;
                        align-items: center;
                        .iconfont {
                            margin-left: 10px;
                            color: var(--jq_primary);
                        }
                    }
                }
            }
            .brandProductList-package {
                width: 100%;
                display: flex;
                margin-bottom: 10px;
                .package {
                    width: 180px;
                    height: 220px;
                    margin-right: 10px;
                    border: 1px solid var(--jq_gray5);
                    border-radius: 5px;
                    display: flex;
                    flex-direction: column;
                    .package-title {
                        width: 100%;
                        height: 30px;
                        padding: 0 20px;
                        border-bottom: 1px solid var(--jq_gray5);
                        display: flex;
                        align-items: center;
                        font-weight: bold;
                    }
                    .package-main {
                        width: 100%;
                        height: calc(100% - 30px);
                        display: flex;
                        flex-direction: column;
                        padding: 10px 20px;
                        .package-search {
                            width: 100%;
                            height: 28px;
                            .input {
                                width: 100%;
                                height: 100%;
                                border: 1px solid var(--jq_gray5);
                                padding: 0 10px;
                                &:hover {
                                    border: 1px solid var(--jq_primary);
                                }
                            }
                        }
                        .package-list {
                            width: 100%;
                            height: calc(100% - 28px);
                            display: flex;
                            flex-direction: column;
                            overflow: hidden auto;
                            .type-list {
                                float: left;
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-top: 3px;
                                .text {
                                    width: 100%;
                                    font-size: var(--jq_fs2);
                                    display: -webkit-box;
                                    -webkit-line-clamp: 1;
                                    -webkit-box-orient: vertical;
                                    overflow: hidden;
                                }
                                .icon {
                                    align-items: center;
                                    flex-shrink: 0;
                                    display: none;
                                    .iconfont {
                                        font-size: var(--jq_fs4);
                                    }
                                }
                                &:hover {
                                    text-decoration: underline;
                                }
                            }
                            .type-list.active {
                                .text {
                                    color: var(--jq_primary);
                                }
                                .icon {
                                    color: var(--jq_primary);
                                    display: flex;
                                }
                            }
                        }
                    }
                }
            }
            .brandProductList-inStock {
                width: 100%;
                display: flex;
                justify-content: space-between;
                justify-items: flex-end;
                margin-bottom: 20px;
                .stock-suppliers-applyall {
                    display: flex;
                    .stock, .suppliers {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        padding-right: 20px;
                        margin-right: 20px;
                        border-right: 1px solid var(--jq_gray4);
                        .title {
                            font-size: var(--jq_fs3);
                            font-weight: bold;
                        }
                        .check-box {
                            display: flex;
                            flex-direction: column;
                            label {
                                margin-top: 10px;
                                cursor: pointer;
                                display: flex;
                                align-items: center;
                                span {
                                    margin-left: 10px;
                                }
                            }
                        }
                    }
                    .applyall-box {
                        display: flex;
                        align-items: center;
                        .removeall {
                            margin-right: 20px;
                            cursor: pointer;
                            &:hover {
                                text-decoration: underline;
                            }
                        }
                        .applyall {
                            margin-right: 20px;
                            width: 100px;
                            .button {
                                height: 42px;
                            }
                        }
                        .result {
                            display: flex;
                            align-items: center;
                            span {
                                font-size: var(--jq_fs5);
                                font-weight: bold;
                            }
                        }
                    }
                }
            }
            .not-search-list {
                width: 100%;
                height: 550px;
                padding: 100px 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                .not-search-list-title {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 20px;
                    font-size: 20px;
                    em {
                        color: var(--jq_error);
                    }
                    .iconfont {
                        margin-right: 10px;
                        font-size: 26px;
                    }
                }
                .search-wrap {
                    width: 60%;
                    padding: 10px 20px;
                    padding-bottom: 5px;
                    background: var(--jq_gray1);
                    border: 1px solid var(--jq_gray3);
                    border-radius: 5px;
                    margin-bottom: 20px;
                    .search-box {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        .form-box {
                            width: 100%;
                            height: 46px;
                            display: flex;
                            .input {
                                width: 100%;
                                height: 100%;
                                background: var(--jq_gray2);
                                border-radius: 10px;
                                margin-right: 10px;
                                position: relative;
                                input {
                                    width: 100%;
                                    height: 100%;
                                    border: none;
                                    outline: none;
                                    background: transparent;
                                    color: var(--jq_white);
                                    font-size: var(--jq_fs4);
                                    &::placeholder {
                                        color: var(--jq_gray4);
                                    }
                                }
                                .input-child {
                                    width: 100%;
                                    height: auto;
                                    display: none;
                                    flex-direction: column;
                                    background: var(--jq_gray2);
                                    border: 1px solid var(--jq_primary);
                                    position: absolute;
                                    left: 0;
                                    top: 45px;
                                    z-index: 2;
                                    border-radius: 0 0 10px 10px;
                                    a {
                                        padding: 5px 10px;
                                    }
                                }

                            }
                            .input.active {
                                border-radius: 10px 10px 0 0;
                                border: 1px solid var(--jq_primary);
                                .input-child {
                                    display: flex;
                                }
                            }
                            .button {
                                width: 100px;
                                height: 100%;
                                background: var(--jq_gray2);
                                border-radius: 10px;
                                overflow: hidden;
                                flex-shrink: 0;
                                border: none;
                                outline: none;
                                background: var(--jq_error);
                                padding: 0 20px;
                                color: var(--jq_white);
                                font-size: var(--jq_fs4);
                                cursor: pointer;
                                &:hover {
                                    background: var(--jq_primary);
                                }
                            }
                        }
                        .hot {
                            width: 100%;
                            display: flex;
                            align-items: flex-start;
                            margin-top: 10px;
                            .label {
                                flex-shrink: 0;
                                font-size: var(--jq_fs2);
                                padding: 3px 0;
                            }
                            .value {
                                width: 100%;
                                display: flex;
                                flex-wrap: wrap;
                                a {
                                    padding: 3px 6px;
                                    background: #1c1c1c;
                                    color: #fff;
                                    border-radius: 3px;
                                    margin-right: 5px;
                                    margin-bottom: 5px;
                                    font-size: var(--jq_fs1);
                                    &:hover {
                                        opacity: 0.8;
                                    }
                                }
                            }
                        }
                    }
                    &:hover {
                        border-color: var(--jq_gray7);
                    }
                }
            }
        }
        .showing-download {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            border-top: 1px solid var(--jq_gray5);
            .showing-box {
                display: flex;
                align-items: center;
                .showing {
                    display: flex;
                    align-items: center;
                    border-right: 2px solid var(--jq_gray5);
                    padding-right: 20px;
                    margin-right: 20px;
                    .select {
                        margin: 0 10px;
                        border: none;
                        font-weight: bold;
                        outline: none;
                    }
                }
                .soryBy {
                    height: 34px;
                    border: 1px solid var(--jq_gray4);
                    padding: 0 10px;
                    padding-right: 0;
                    display: flex;
                    align-items: center;
                    border-radius: 5px;
                    margin-right: 20px;
                    span {
                        font-weight: bold;
                    }
                    .select {
                        height: 100%;
                        border: none;
                        outline: none;
                    }
                }
                .addToCart, .compare {
                    margin-right: 20px;
                    .button {
                        height: 34px;
                        width: 170px;
                        .iconfont {
                            margin-left: 5px;
                        }
                    }
                }
                .compare {
                    .button {
                        width: 250px;
                    }
                }
            }
            .download-table {
                .button {
                    width: 160px;
                    height: 34px;
                    .iconfont {
                        margin-left: 5px;
                        color: var(--jq_primary);
                    }
                }
            }
        }
        .brandProductTable {
            width: 100%;
            overflow: auto hidden;
            position: relative;
            margin-bottom: 20px;
            table {
                width: 100%;
                border-collapse: collapse;
                border-bottom: 1px solid var(--jq_gray4);
                thead {
                    tr {
                        background: #000000;
                        th {
                            background: #000000;
                            .thBox {
                                width: 100%;
                                display: flex;
                                flex-direction: column;
                                border: 1px solid var(--jq_gray4);
                                border-left: none;
                                .thLabel {
                                    width: 100%;
                                    height: 40px;
                                    border-bottom: 1px solid var(--jq_gray4);
                                    display: flex;
                                    align-items: center;
                                    padding: 0 10px;
                                    color: var(--jq_white);
                                    font-weight: bold;
                                }
                                .thSort {
                                    width: 100%;
                                    height: 26px;
                                    display: flex;
                                    justify-content: center;
                                    a {
                                        width: 50%;
                                        height: 100%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        border-right: 1px solid var(--jq_gray4);
                                        color: var(--jq_gray3);
                                        .iconfont {
                                            font-size: 12px;
                                        }
                                        &:hover {
                                            color: var(--jq_white);
                                        }
                                    }
                                    a.active {
                                        color: var(--jq_primary);
                                        .iconfont {
                                            color: var(--jq_primary);
                                        }
                                    }
                                    a:last-child {
                                        border-right: none;
                                    }
                                }
                            }
                        }
                        th.check-box {
                            position: sticky;
                            left: 0;
                            min-width: 45px;
                            .thBox {
                                .thLabel {
                                    justify-content: center;
                                }
                            }
                        }
                        th.mpn {
                            min-width: 270px;
                        }
                        th.manufacturer {
                            min-width: 135px;
                        }
                        th.availability {
                            min-width: 175px;
                        }
                        th.pricing {
                            min-width: 275px;
                        }
                        th.quantity {
                            min-width: 285px;
                        }
                        th.description {
                            min-width: 330px;
                        }
                        th.package {
                            min-width: 200px;
                        }
                        th.packaging {
                            min-width: 200px;
                        }
                    }
                }
                tbody {
                    tr {
                        td {
                            border-right: 1px solid var(--jq_gray4);
                            vertical-align: top;
                        }
                        td.check-box {
                            position: sticky;
                            left: 0;
                            z-index: 1;
                        }
                        .checkBox {
                            width: 100%;
                            height: 100%;
                            display: flex;
                            justify-content: center;
                            align-items: flex-start;
                            padding: 10px;
                            position: absolute;
                            left: 0;
                            top: 0;
                            border-right: 1px solid var(--jq_gray4);
                            background: var(--jq_white);
                        }
                        .mpn-box {
                            width: 100%;
                            padding: 10px;
                            display: flex;
                            .img-pdf-rohs {
                                width: 60px;
                                height: 90px;
                                display: flex;
                                flex-direction: column;
                                .img {
                                    width: 100%;
                                    height: 60px;
                                    border: 1px solid var(--jq_gray7);
                                    overflow: hidden;
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: contain;
                                    }
                                }
                                .pdf-rohs {
                                    width: 100%;
                                    height: 20px;
                                    margin-top: 10px;
                                    display: flex;
                                    flex-shrink: 0;
                                    align-items: center;
                                    a {
                                        margin-right: 5px;
                                        i {
                                            font-size: var(--jq_fs4);
                                        }
                                        .icon-pdf {
                                            color: var(--jq_primary8);
                                        }
                                        .icon-ep {
                                            color: var(--jq_white0);
                                        }
                                    }
                                }
                            }
                            .title-model {
                                width: calc(100% - 60px);
                                padding-left: 10px;
                                display: flex;
                                flex-direction: column;
                                .title {
                                    font-size: var(--jq_fs3);
                                    color: var(--jq_primary);
                                    font-weight: bold;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    overflow: hidden;
                                    margin-bottom: 10px;
                                    &:hover {
                                        text-decoration: underline;
                                    }
                                }
                                .model {
                                    font-size: var(--jq_fs2);
                                    font-weight: bold;
                                    &:hover {
                                        color: var(--jq_primary);
                                        text-decoration: underline;
                                    }
                                }
                            }
                        }
                        .asianBrands-box {
                            width: 100%;
                            padding: 10px;
                            display: flex;
                            flex-direction: column;
                            .asian {
                                padding: 0 5px;
                                background: var(--jq_white1);
                                border: 1px solid var(--jq_primary);
                                color: var(--jq_primary);
                                font-size: var(--jq_fs1);
                                margin-bottom: 10px;
                                border-radius: 3px 0 3px 0;
                            }
                            .brands {
                                color: var(--jq_primary);
                                font-size: var(--jq_fs2);
                                &:hover {
                                    text-decoration: underline;
                                }
                            }
                        }
                        .availability-box {
                            width: 100%;
                            padding: 10px;
                            display: flex;
                            flex-direction: column;
                            .number {
                                font-weight: bold;
                                margin-bottom: 10px;
                            }
                            .stock {
                            }
                        }
                        .pricing-box {
                            width: 100%;
                            padding: 10px;
                            display: flex;
                            flex-direction: column;
                            .pricing-item {
                                width:100%;
                                display: flex;
                                margin-bottom: 5px;
                                .label, .value {
                                    width: 50%;
                                    display: flex;
                                    justify-content: flex-end;
                                    padding: 0 5px;
                                }
                                .value {
                                    justify-content: flex-start;
                                    font-weight: bold;
                                }
                            }
                        }
                        .quantity-box {
                            width: 100%;
                            padding: 10px;
                            display: flex;
                            flex-direction: column;
                            .addCart {
                                border: 1px solid var(--jq_gray5);
                                height: 40px;
                                border-radius: 5px;
                                overflow: hidden;
                                display: flex;
                                margin-bottom: 10px;
                                .input {
                                    border: none;
                                    outline: none;
                                    padding: 0 10px;
                                    height: 100%;
                                    border-radius: 5px 0 0 5px;
                                }
                                .button {
                                    width: 80px;
                                    height: 100%;
                                    border-radius: 0;
                                    flex-shrink: 0;
                                }
                            }
                            .extPrice {
                                display: flex;
                                margin-bottom: 10px;
                                .label {
                                    font-weight: bold;
                                }
                                .value {
                                    color: var(--jq_primary3);
                                    font-weight: bold;
                                }
                            }
                            .fullReel {
                                display: flex;
                                margin-bottom: 10px;
                                .label {
                                    color: var(--jq_gray4);
                                }
                                .value {
                                    font-weight: bold;
                                }
                            }
                        }
                        .description-box {
                            color: var(--jq_gray4);
                            padding: 10px;
                        }
                    }
                    tr:nth-child(odd) {
                        background: var(--jq_black2);
                        .checkBox {
                            background: var(--jq_black2);
                        }
                    }
                    tr:nth-child(even) {
                        background: var(--jq_black);
                        .checkBox {
                            background: var(--jq_black);
                        }
                    }
                    tr:hover {
                        background: var(--jq_black1);
                        .checkBox {
                            background: var(--jq_black1);
                        }
                    }
                }
            }
        }
        .deals-page-box.brand-page {
            padding: 0 30px;
            .pageSelect {
                .select {
                    width: auto;
                    font-weight: bold;
                    border: none;
                    &:hover {
                        border: none;
                        &:focus {
                            border: none;
                        }
                    }
                }
            }
            .pc-page-check {
                display: flex;
            }
            .phone-page-check {
                display: none;
            }
        }
        /* 分页 */
        .page-box {
            width: 100%;
            display: flex;
            flex-direction: column;
            .banner-box {
                width: 100%;
                height: 300px;
                background: url("./images/14.jpg") no-repeat;
                background-size: 100% 100%;
                display: flex;
                justify-content: center;
                .banner {
                    width: var(--jq_w1400);
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    .max-text {
                        font-size: 62px;
                        font-weight: bold;
                        color: var(--jq_white);
                    }
                    .min-text {
                        font-size: 32px;
                        color: var(--jq_white);
                    }
                }
            }
            .page-main {
                width: 100%;
                display: flex;
                justify-content: center;
                .page-wrap {
                    width: var(--jq_w1200);
                    .page-title {
                        width: 100%;
                        height: 50px;
                        line-height: 50px;
                        padding: 0 20px;
                        font-size: var(--jq_fs4);
                        border-bottom: 1px solid var(--jq_gray7);
                        color: var(--jq_primary);
                        span {
                            height: 100%;
                            position: relative;
                            display: inline-table;
                        }
                        span::after {
                            content: "";
                            width: 100%;
                            height: 2px;
                            background: var(--jq_primary);
                            position: absolute;
                            left: 0;
                            bottom: -1px;
                        }
                    }
                    .page-content {
                        width: 100%;
                        padding: 15px 20px;
                        display: flex;
                        flex-direction: column;
                        line-height: 24px;
                        > img {
                            width: 100%;
                            margin-bottom: 8px;
                        }
                        span {
                            width: 100%;
                            padding: 10px 0;
                            font-size: var(--jq_fs3);
                            i {
                                position:relative;
                                top: 2px;
                                margin-right: 5px;
                            }
                        }
                        h1 {
                            font-size: var(--jq_fs4);
                            font-weight: bold;
                        }
                        .jq-common-form {
                            margin-top: 20px;
                            .form-submit {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                .btn {
                                    min-width: 100px;
                                }
                            }
                        }
                    }
                }
            }
        }
        .deals-page-box {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 50px;
            .pageSelect {
                display: flex;
                align-items: center;
                padding-right: 20px;
                margin-right: 20px;
                border-right: 2px solid var(--jq_gray4);
                select {
                    width: 100px;
                    margin: 0 10px;
                    height: 42px;
                    border: 1px solid var(--jq_gray4);
                    border-radius: 5px;
                    padding: 0 5px;
                    outline: none;
                    &:hover {
                        border: 1px solid var(--jq_primary);
                    }
                }
            }
            .page-check {
                display: flex;
                align-items: center;
                a {
                    width: 42px;
                    height: 42px;
                    border: 1px solid var(--jq_gray4);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 5px;
                    border-radius: 5px;
                    i {
                        color: var(--jq_gray3);
                        font-size: var(--jq_fs1);
                    }
                    &:hover {
                        border: 1px solid var(--jq_primary);
                        i {
                            color: var(--jq_primary);
                        }
                    }
                }
                a.active {
                    border: 1px solid var(--jq_primary);
                    background: var(--jq_primary);
                    color: var(--jq_white);
                }
                .omit {
                    height: 42px;
                    padding: 0 20px;
                    display: flex;
                    align-items: flex-end;
                }
            }
            .pc-page-check {
                display: flex;
            }
            .phone-page-check {
                display: none;
            }
        }
        .detail-box {
            width: 100%;
            display: flex;
            padding: 0 50px;
            .detail-message {
                width: calc(100% - 450px);
                display: flex;
                flex-direction: column;
                padding-right: 20px;
                .imgage-basic {
                    width: 100%;
                    display: flex;
                    background: var(--jq_gray1);
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    padding: 20px;
                    border-radius: 5px;
                    margin-bottom: 20px;
                    .image-box {
                        width: 270px;
                        display: flex;
                        flex-direction: column;
                        .images-max {
                            width: 100%;
                            height: 270px;
                            border-radius: 5px;
                            overflow: hidden;
                            cursor: pointer;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .images-min {
                            width: 100%;
                            height: 60px;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-top: 10px;
                            a {
                                flex-shrink: 0;
                                i {
                                    color: var(--jq_gray3);
                                }
                                &:hover {
                                    i {
                                        color: var(--jq_primary);
                                    }
                                }
                            }
                            .min-box {
                                width: 100%;
                                height: 100%;
                                padding: 0 5px;
                                display: flex;
                                overflow: hidden;
                                .min-tr-box {
                                    height: 100%;
                                    position: relative;
                                    display: flex;
                                    transition: all 0.3s;
                                }
                                .img-item {
                                    /* width: 100%; */
                                    width: calc(100% / 3 - 10px);
                                    height: 100%;
                                    margin: 0 5px;
                                    border-radius: 5px;
                                    overflow: hidden;
                                    cursor: pointer;
                                    flex-shrink: 0;
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                    &:hover {
                                        box-shadow: 0 0 5px var(--jq_gray3);
                                    }
                                }
                                .img-item.active {
                                    border: 1px solid var(--jq_primary);
                                }
                            }
                        }
                    }
                    .basic-box {
                        width: calc(100% - 270px);
                        padding-left: 20px;
                        .title {
                            width: 100%;
                            font-size: var(--jq_fs8);
                            font-weight: bold;
                            margin-bottom: 20px;
                        }
                        .form-text {
                            width: 100%;
                            display: flex;
                            flex-direction: column;
                            .form-text-item {
                                padding: 8px 0;
                                display: flex;
                                .label {
                                    width: 150px;
                                    font-weight: bold;
                                    padding-right: 10px;
                                    font-size: var(--jq_fs4);
                                }
                                .value {
                                    width: calc(100% - 150px);
                                    font-size: var(--jq_fs4);
                                    color: var(--jq_gray4);
                                    a {
                                        color: var(--jq_primary);
                                        i, span {
                                            color: var(--jq_primary);
                                        }
                                        &:hover {
                                            text-decoration: underline;
                                        }
                                    }
                                    select {
                                        width: 70%;
                                        height: 38px;
                                        border: 1px solid var(--jq_gray4);
                                        border-radius: 5px;
                                        outline: none;
                                        background: none;
                                        color: var(--jq_gray4);
                                        &:hover {
                                            border: 1px solid var(--jq_primary);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .attributes {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    background: var(--jq_gray1);
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    padding: 20px;
                    border-radius: 5px;
                    margin-bottom: 20px;
                    .title {
                        padding-bottom: 10px;
                        border-bottom: 1px solid var(--jq_gray4);
                        display: flex;
                        justify-content: space-between;
                        .txt {
                            font-weight: bold;
                            font-size: var(--jq_fs4);
                        }
                        .button {
                            width: 140px;
                            i {
                                margin-right: 5px;
                            }
                        }
                    }
                    .attributes-table {
                        width: 100%;
                        padding-top: 20px;
                    }
                    .attributes-pdf {
                        width: 100%;
                        padding-top: 20px;
                        iframe {
                            width: 100%;
                            height: 700px;
                        }
                    }
                    .attributes-main {
                        width: 100%;
                        padding-top: 20px;
                        .interested {
                            width: calc(100% + 20px);
                            display: flex;
                            flex-wrap: wrap;
                            position: relative;
                            left: -20px;
                            .interested-item {
                                width: calc(100% / 3 - 20px);
                                margin-left: 20px;
                                margin-bottom: 20px;
                                display: flex;
                                .img {
                                    width: 60px;
                                    height: 60px;
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                }
                                .txt {
                                    width: calc(100% - 60px);
                                    padding-left: 10px;
                                    display: flex;
                                    flex-direction: column;
                                    .max-txt {
                                        font-size: var(--jq_fs3);
                                        font-weight: bold;
                                    }
                                    .min-txt {
                                        font-size: var(--jq_fs1);
                                        color: var(--jq_gray4);
                                    }
                                }
                                &:hover {
                                    .txt {
                                        .max-txt {
                                            color: var(--jq_primary);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .detail-addCart {
                width: 450px;
                display: flex;
                flex-direction: column;
                .addcart {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    padding: 20px;
                    border-radius: 5px;
                    background: var(--jq_gray1);
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    margin-bottom: 20px;
                    .title {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        margin-bottom: 20px;
                        .max-text {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            span {
                                font-size: var(--jq_fs5);
                                font-weight: bold;
                                margin-right: 5px;
                            }
                        }
                    }
                    .addRfq-box {
                        width: 100%;
                        padding: 10px;
                        background: var(--jq_black2);
                        margin-bottom: 20px;
                        .tit {
                            padding-bottom: 10px;
                            border-bottom: 1px solid var(--jq_gray4);
                            margin-bottom: 10px;
                            font-size: var(--jq_fs4);
                            text-align: center;
                        }
                        .quantity-minimum {
                            display: flex;
                            justify-content: space-between;
                            margin-bottom: 10px;
                        }
                        .quantity-input {
                            margin-bottom: 10px;
                        }
                        .unit-reference {
                            display: flex;
                            flex-direction: column;
                            margin-bottom: 10px;
                            .reference {
                                color: #ffc107;
                            }
                        }
                        .button {
                            i {
                                margin-right: 5px;
                                font-size: var(--jq_fs4);
                            }
                        }
                    }
                    .payment {
                        width: 100%;
                        padding: 10px;
                        padding-right: 0;
                        display: flex;
                        background: #ffc107;
                        margin-bottom: 20px;
                        img {
                            margin-right: 10px;
                            width: calc(100% / 6 - 10px);
                        }
                    }
                    .stairs-table {
                        margin-bottom: 10px;
                    }
                    .betterText {
                        span {
                            color: var(--jq_gray3);
                        }
                    }
                    .betterForm {
                        display: flex;
                        justify-content: space-between;
                        .inputBox {
                            width: 65%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding-right: 10px;
                            input {
                                width: calc(50% - 10px);
                                height: 40px;
                                border: 1px solid var(--jq_gray4);
                                padding: 0 10px;
                                background: none;
                                outline: none;
                                border-radius: 5px;
                                &:hover {
                                    border: 1px solid var(--jq_primary);
                                }
                            }
                            span {
                                color: var(--jq_gray4);
                                margin: 0 5px;
                            }
                        }
                        .btnBox {
                            min-width: 80px;
                            flex-shrink: 0;
                        }
                    }
                }
                .quick-quote {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    padding: 20px;
                    padding-top: 10px;
                    border-radius: 5px;
                    background: var(--jq_gray1);
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    margin-bottom: 20px;
                    .qq-title {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        padding-bottom: 10px;
                        margin-bottom: 20px;
                        font-size: var(--jq_fs5);
                        font-weight: bold;
                        border-bottom: 1px solid var(--jq_gray4);
                    }
                    .qq-form {
                        width: 100%;
                    }
                    .partsIndex {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        .partsIndex-item {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            padding: 5px 0;
                            span {
                                padding: 2px 5px;
                                background: var(--jq_primary);
                                color: var(--jq_white);
                                font-size: var(--jq_fs1);
                                border-radius: 10px;
                            }
                        }
                    }
                }
            }
        }
        /* 关于我们 */
        .aboutUs-wrap {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-bottom: 50px;
            .imgBg-title {
                width: 100%;
                height: 500px;
                position: relative;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                .title {
                    position: absolute;
                    top: 40%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 48px;
                    font-weight: bold;
                    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
                    z-index: 2;
                }
                &::after {
                    content: "";
                    width: 100%;
                    height: 100%;
                    background: var(--jq_gray1);
                    opacity: 0.5;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
            .aboutUs-main {
                width: 100%;
                padding: 0 10%;
                position: relative;
                margin-top: -50px;
                z-index: 2;
                .aboutUs-content {
                    background: var(--jq_gray1);
                    padding: 20px;
                    border-radius: 10px;
                    border: 1px solid var(--jq_gray3);
                    .contact-form-title {
                        width: 100%;
                        padding-bottom: 10px;
                        margin-bottom: 20px;
                        border-bottom: 1px solid var(--jq_gray4);
                        font-size: var(--jq_fs4);
                        font-weight: bold;
                    }
                    .contact-form-main {
                        width: 100%;
                        font-size: var(--jq_fs3);
                        line-height: 32px;
                        margin-bottom: 20px;
                    }
                    .jq-common-form {
                        margin-bottom: 20px;
                        .form-submit {
                            display: flex;
                            justify-content: center;
                            .btn {
                                width: auto;
                                padding: 0 30px;
                            }
                        }
                    }
                    .map-box {
                        width: 100%;
                        height: 600px;
                    }
                }
                .videoList-content {
                    width: 100%;
                    background: var(--jq_gray1);
                    padding: 20px;
                    padding-bottom: 0;
                    border-radius: 10px;
                    border: 1px solid var(--jq_gray3);
                    .videoList-main {
                        width: calc(100% + 20px);
                        margin-left: -20px;
                        display: flex;
                        flex-wrap: wrap;
                        .videoList-item {
                            width: calc(100% / 4 - 20px);
                            height: 300px;
                            margin-left: 20px;
                            margin-bottom: 20px;
                            border: 1px solid var(--jq_gray3);
                            padding: 5px;
                            border-radius: 5px;
                            display: flex;
                            flex-direction: column;
                            .video-img {
                                width: 100%;
                                height: calc(100% - 36px);
                                overflow: hidden;
                                position: relative;
                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                                .icon {
                                    width: 60px;
                                    height: 60px;
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%, -50%);
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    background: var(--jq_gray5);
                                    border-radius: 100%;
                                    opacity: 0.9;
                                    .iconfont {
                                        font-size: 32px;
                                        color: var(--jq_primary);
                                        position: relative;
                                        transform: rotate(90deg);
                                        left: 3px;
                                    }
                                }
                            }
                            .video-title {
                                width: 100%;
                                height: 36px;
                                line-height: 36px;
                                text-align: center;
                                font-size: var(--jq_fs3);
                                display: -webkit-box;
                                -webkit-line-clamp: 1;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                            }
                            &:hover {
                                border-color: var(--jq_gray5);
                                .video-img {
                                    img {
                                        transform: scale(1.1);
                                    }
                                    .icon {
                                        background: var(--jq_primary);
                                        .iconfont {
                                            color: var(--jq_white);
                                        }
                                    }
                                }
                                .video-title {
                                    color: var(--jq_primary);
                                }
                            }
                        }
                    }
                }
            }
        }
        /* 博客-新闻 */
        .blogList-wrap {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-bottom: 50px;
            position: relative;
            .crumbs-box {
                position: absolute;
                left: 0;
                z-index: 3;
                top: 110px;
            }
            .imgBg {
                width: 100%;
                height: 500px;
                position: relative;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                &::after {
                    content: "";
                    width: 100%;
                    height: 100%;
                    background: var(--jq_gray1);
                    opacity: 0.5;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
            .blogList-main {
                width: 100%;
                padding: 0 10%;
                position: relative;
                margin-top: -20%;
                z-index: 2;
                .blogList-content {
                    background: var(--jq_gray1);
                    padding: 20px;
                    border-radius: 10px;
                    border: 1px solid var(--jq_gray3);
                    display: flex;
                    flex-direction: column;
                    .blogList-title {
                        width: 100%;
                        padding-bottom: 10px;
                        margin-bottom: 10px;
                        border-bottom: 1px solid var(--jq_gray4);
                        font-size: var(--jq_fs4);
                        font-weight: bold;
                    }
                    .blogList-tab {
                        width: 100%;
                        display: flex;
                        margin-bottom: 20px;
                        background: var(--jq_gray2);
                        padding: 5px;
                        a {
                            padding: 5px 20px;
                            &:hover {
                                color: var(--jq_primary);
                            }
                            &.active {
                                background: var(--jq_primary);
                                &:hover {
                                    color: var(--jq_white);
                                }
                            }
                        }
                    }
                    .blogList-box {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        .blogList-item {
                            width: 100%;
                            display: flex;
                            margin-bottom: 20px;
                            .img {
                                width: 140px;
                                height: 100px;
                                flex-shrink: 0;
                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                            .item-main {
                                width: calc(100% - 140px);
                                padding-left: 20px;
                                display: flex;
                                flex-direction: column;
                                .tit {
                                    font-size: var(--jq_fs6);
                                    font-weight: bold;
                                    margin-bottom: 5px;
                                }
                                .user-time {
                                    display: flex;
                                    margin-bottom: 10px;
                                    .user, .time {
                                        display: flex;
                                        align-items: center;
                                        margin-right: 20px;
                                        i {
                                            margin-right: 5px;
                                            color: var(--jq_gray4);
                                        }
                                        span {
                                            color: var(--jq_gray4);
                                        }
                                    }
                                }
                                .desc {
                                    color: var(--jq_gray4);
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    overflow: hidden;
                                }
                            }
                            &:hover {
                                .item-main {
                                    .tit {
                                        color: var(--jq_primary);
                                    }
                                }
                            }
                        }
                    }
                    .blogDetail-title {
                        width: 100%;
                        padding-bottom: 10px;
                        margin-bottom: 10px;
                        border-bottom: 1px solid var(--jq_gray4);
                        font-size: var(--jq_fs8);
                        font-weight: bold;
                        text-align: center;
                    }
                    .blogDetail-user-time {
                        display: flex;
                        margin-bottom: 30px;
                        justify-content: center;
                        .user, .time {
                            display: flex;
                            align-items: center;
                            margin-right: 20px;
                            i {
                                margin-right: 5px;
                                color: var(--jq_gray4);
                            }
                            span {
                                color: var(--jq_gray4);
                            }
                        }
                    }
                }
            }
        }
        .rfq-wrap {
            width: 100%;
            padding: 0 50px;
            .rfq-box {
                width: 100%;
                background: var(--jq_gray1);
                padding: 20px;
                border-radius: 5px;
                .rfq-main {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    .rfq-title {
                        width: 100%;
                        font-size: var(--jq_fs6);
                        font-weight: bold;
                        margin-bottom: 20px;
                    }
                    .rfq-upload-process {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 20px;
                        .rfq-upload {
                            width: 490px;
                            height: 115px;
                            border: 1px solid var(--jq_gray4);
                            border-radius: 5px;
                            padding: 20px;
                            display: flex;
                            flex-shrink: 0;
                            .upload-add {
                                width: 115px;
                                height: 75px;
                                border: 1px dashed var(--jq_gray4);
                                position: relative;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                cursor: pointer;
                                flex-shrink: 0;
                                i {
                                    font-size: 30px;
                                    transform: rotate(45deg);
                                    color: var(--jq_gray4);
                                }
                                input {
                                    position: absolute;
                                    width: 100%;
                                    height: 100%;
                                    opacity: 0;
                                    left: 0;
                                    top: 0;
                                    z-index: 1;
                                    cursor: pointer;
                                }
                            }
                            .upload-content {
                                width: 100%;
                                padding-left: 20px;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                .upload-title {
                                    font-size: var(--jq_fs4);
                                    color: var(--jq_primary);
                                    font-weight: bold;
                                }
                                .upload-text {
                                    font-size: var(--jq_fs1);
                                    color: var(--jq_color5);
                                }
                                .upload-operate {
                                    width: 100%;
                                    display: flex;
                                    justify-content: space-between;
                                    a {
                                        color: var(--jq_primary);
                                        &:hover {
                                            text-decoration: underline;
                                        }
                                    }
                                }
                            }
                            &:hover {
                                border: 1px solid var(--jq_primary);
                            }
                        }
                        .rfq-process {
                            width: 100%;
                            padding-left: 20px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .process-item {
                                width: 20%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                flex-direction: column;
                                position: relative;
                                .before-round {
                                    width: 9px;
                                    height: 18px;
                                    background: var(--jq_gray5);
                                    position: absolute;
                                    right: -8px;
                                    top: 50%;
                                    margin-top: -18px;
                                    border-radius: 0 9px 9px 0;
                                    &::before {
                                        content: "";
                                        width: 8px;
                                        height: 8px;
                                        background: var(--jq_gray5);
                                        position: absolute;
                                        left: 20px;
                                        top: 50%;
                                        margin-top: -4px;
                                        border-radius: 4px;
                                    }
                                    /* &::after {
                    content: "";
                    width: 8px;
                    height: 8px;
                    background: var(--jq_gray5);
                    position: absolute;
                    left: 40px;
                    top: 50%;
                    margin-top: -4px;
                    border-radius: 4px;
                  } */
                                }
                                .after-round {
                                    width: 9px;
                                    height: 18px;
                                    background: var(--jq_gray5);
                                    position: absolute;
                                    right: 0;
                                    top: 50%;
                                    margin-top: -18px;
                                    border-radius: 9px 0 0 9px;
                                    &::before {
                                        content: "";
                                        width: 8px;
                                        height: 8px;
                                        background: var(--jq_gray5);
                                        position: absolute;
                                        left: -20px;
                                        top: 50%;
                                        margin-top: -4px;
                                        border-radius: 4px;
                                    }
                                    /* &::after {
                    content: "";
                    width: 8px;
                    height: 8px;
                    background: var(--jq_gray5);
                    position: absolute;
                    left: 0px;
                    top: 50%;
                    margin-top: -4px;
                    border-radius: 4px;
                  } */
                                }
                                .icon {
                                    width: 68px;
                                    height: 68px;
                                    background: none;
                                    border-radius: 50%;
                                    position: relative;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    &::before {
                                        content: "";
                                        width: 60px;
                                        height: 60px;
                                        background: var(--jq_gray5);
                                        border-radius: 50%;
                                        position: absolute;
                                        left: 4px;
                                        top: 4px;
                                    }
                                    i {
                                        font-size: 30px;
                                        color: var(--jq_gray3);
                                        position: relative;
                                        z-index: 1;
                                    }
                                    i.icon-wenben {
                                        left: 3px;
                                    }
                                }
                                .text {
                                    font-size: var(--jq_fs1);
                                    color: var(--jq_gray3);
                                    margin-top: 5px;
                                }
                                &:last-child {
                                    .before-round, .after-round {
                                        display: none;
                                    }
                                }
                            }
                            .process-item.active {
                                .before-round {
                                    background: var(--jq_gray5);
                                    &::before, &::after {
                                        background: var(--jq_gray5);
                                    }
                                }
                                .after-round {
                                    background: var(--jq_primary);
                                    &::before, &::after {
                                        background: var(--jq_primary);
                                    }
                                }
                                .icon {
                                    background: var(--jq_white);
                                    &::before {
                                        background: var(--jq_primary);
                                    }
                                    i {
                                        color: var(--jq_white);
                                    }
                                }
                                .text {
                                    color: var(--jq_primary);
                                    font-weight: bold;
                                }
                            }
                            .process-item.now {
                                .before-round {
                                    background: var(--jq_primary);
                                    &::before, &::after {
                                        background: var(--jq_primary);
                                    }
                                }
                                .after-round {
                                    background: var(--jq_primary);
                                    &::before, &::after {
                                        background: var(--jq_primary);
                                    }
                                }
                            }
                        }
                    }
                    .rfq-table-form {
                        width: 100%;
                        margin-bottom: 20px;
                    }
                    .rfq-form {
                        width: 100%;
                        .form-left, .form-right {
                            width: 100%;
                            .jq-common-form {
                                .form-box {
                                    justify-content: space-between;
                                    .form-item.w50 {
                                        width: calc(100% / 2 - 10px);
                                    }
                                }
                            }
                        }
                    }
                    .rfq-submit {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .tips {
                            padding: 10px 0;
                        }
                        .submit {
                            width: 140px;
                            .button {
                                height: 42px;
                            }
                        }
                    }
                }
            }
        }
        .product-detail-box {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 0 50px;
            .basic-price-box {
                width: 100%;
                display: flex;
                margin-bottom: 20px;
                .basic-box {
                    width: calc(100% - 415px);
                    margin-right: 20px;
                    display: flex;
                    flex-direction: column;
                    background: var(--jq_gray1);
                    padding: 10px;
                    border-radius: 5px;
                    box-shadow: 0 0 10px var(--jq_color6);
                    overflow: hidden;
                    .title {
                        width: 100%;
                        font-size: var(--jq_fs8);
                        color: var(--jq_primary);
                        font-weight: bold;
                        margin-bottom: 10px;
                    }
                    .basic {
                        width: 100%;
                        display: flex;
                        .img {
                            width: 250px;
                            display: flex;
                            flex-direction: column;
                            .max-img {
                                width: 100%;
                                height: 250px;
                                border: 1px solid var(--jq_color5);
                                overflow: hidden;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin-bottom: 10px;
                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                            .min-img {
                                width: 100%;
                                height: 50px;
                                display: flex;
                                justify-content: space-between;
                                a {
                                    width: calc(100% / 4 - 10px);
                                    height: 50px;
                                    border: 1px solid var(--jq_color5);
                                    img {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                            }
                        }
                        .parameter {
                            width: calc(100% - 250px);
                            padding-left: 20px;
                            display: flex;
                            flex-direction: column;
                            .parameter-item {
                                width: 100%;
                                display: flex;
                                margin-bottom: 5px;
                                .label {
                                    width: 100px;
                                    color: var(--jq_color3);
                                }
                                .value {
                                    width: calc(100% - 100px);
                                    padding-left: 5px;
                                    .share {
                                        margin-right: 5px;
                                        color: var(--jq_color3);
                                        .iconfont {
                                            font-size: var(--jq_fs6);
                                        }
                                        &:hover {
                                            color: var(--jq_primary);
                                        }
                                    }
                                }
                            }
                            .btn-box {
                                width: 100px;
                            }
                        }
                    }
                }
                .price-box {
                    width: 395px;
                    background: var(--jq_gray1);
                    border-radius: 5px;
                    box-shadow: 0 0 10px var(--jq_color6);
                    overflow: hidden;
                    > .title {
                        width: 100%;
                        height: 50px;
                        line-height: 50px;
                        font-size: var(--jq_fs4);
                        color: var(--jq_color8);
                        padding: 0 10px;
                        /* background: var(--jq_primary); */
                    }
                    .price {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        padding: 10px;
                        .number {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            margin-bottom: 10px;
                            span {
                                width: 60px;
                                flex-shrink: 0;
                            }
                            .input-button {
                                width: 100%;
                                border: 1px solid var(--jq_primary);
                                border-radius: 5px;
                                display: flex;
                                overflow: hidden;
                                align-items: center;
                                .input {
                                    border: none;
                                    border-radius: 5px 0 0 5px;
                                }
                                .button {
                                    width: 100px;
                                    min-height: 32px;
                                    height: auto;
                                    border-radius: 0;
                                    font-size: var(--jq_fs2);
                                    flex-shrink: 0;
                                    padding: 0 5px;
                                }
                            }
                        }
                        .price-table {
                            width: 100%;
                            margin-bottom: 10px;
                            .public-table {
                                width: 100%;
                                .theads {
                                    width: 100%;
                                    .ths {
                                        background: var(--jq_gray3);
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .parameter-pdf-box {
                width: 100%;
                display: flex;
                flex-direction: column;
                background: var(--jq_gray1);
                padding: 10px;
                border-radius: 5px;
                box-shadow: 0 0 10px var(--jq_color6);
                overflow: hidden;
                margin-bottom: 20px;
                .tab-box {
                    width: 100%;
                    height: 40px;
                    border-bottom: 1px solid var(--jq_primary);
                    display: flex;
                    margin-bottom: 10px;
                    a {
                        padding: 0 20px;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: var(--jq_color6);
                        font-size: var(--jq_fs4);
                        margin-right: 10px;
                        border-radius: 5px 5px 0 0;
                        &:hover {
                            color: var(--jq_primary);
                        }
                    }
                    a.active {
                        color: var(--jq_primary);
                    }
                }
                .parame-box {
                    width: 100%;
                    .public-table {
                        width: 100%;
                        .theads {
                            width: 100%;
                            .ths {
                                background: var(--jq_gray3);
                            }
                        }
                    }
                }
            }
            .new-product-box {
                width: 100%;
                display: flex;
                flex-direction: column;
                background: var(--jq_gray1);
                border-radius: 5px;
                box-shadow: 0 0 10px var(--jq_color6);
                overflow: hidden;
                margin-bottom: 20px;
                > .title {
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    font-size: var(--jq_fs4);
                    color: var(--jq_color8);
                    padding: 0 10px;
                    /* background: var(--jq_primary); */
                }
                .new-product {
                    width: 100%;
                    padding: 10px;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    .product-item {
                        width: calc(100% / 4 - 10px);
                        height: 200px;
                        border: 1px solid var(--jq_gray3);
                        border-radius: 5px;
                        padding: 10px;
                        margin-bottom: 10px;
                        overflow: hidden;
                        display: flex;
                        .img {
                            width: 100px;
                            display: flex;
                            flex-direction: column;
                            img {
                                width: 100%;
                                height: 100px;
                                object-fit: cover;
                                flex-shrink: 0;
                            }
                            span {
                                width: 100%;
                                display: -webkit-box;
                                -webkit-line-clamp: 4;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                            }
                        }
                        .title-model-btn {
                            width: calc(100% - 100px);
                            padding-left: 10px;
                            display: flex;
                            flex-direction: column;
                            .tit {
                                width: 100%;
                                margin-bottom: 5px;
                                a {
                                    font-weight: bold;
                                    font-size: var(--jq_fs3);
                                }
                            }
                            .model {
                                width: 100%;
                                margin-bottom: 5px;
                            }
                            .btn {
                                width: 80px;
                                .button {
                                    height: 28px;
                                    font-size: var(--jq_fs1);
                                }
                            }
                        }
                        &:hover {
                            border: 1px solid var(--jq_gray7);
                            .title-model-btn {
                                .tit {
                                    a {
                                        color: var(--jq_primary);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .lang-cart {
        position: absolute;
        right: 10px;
        top: 10px;
        display: flex;
        z-index: 3;
        .lang-box {
            display: flex;
            position: relative;
            margin-right: 20px;
            a {
                display: flex;
                align-items: center;
                .icon-jt_r {
                    font-size: var(--jq_fs1);
                }
                span {
                    margin: 0 5px;
                }
            }
            .lang-child {
                width: 150%;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: 20px;
                background: var(--jq_gray1);
                padding: 5px 0;
                border: 1px solid var(--jq_gray3);
                display: none;
                flex-direction: column;
                .child-item {
                    width: 100%;
                    padding: 2px 10px;
                    text-align: center;
                    display: flex;
                    justify-content: center;
                }
                &:hover {
                    border-color: var(--jq_gray7);
                }
            }
            &:hover {
                a {
                    .icon-jt_r {
                        transform: rotate(90deg);
                    }
                }
                .lang-child {
                    display: flex;
                }
            }
        }
        .cart-box {
            display: flex;
            position: relative;
            a {
                display: flex;
                align-items: center;
                .icon-jt_r {
                    font-size: var(--jq_fs1);
                }
                span {
                    margin: 0 5px;
                }
            }
            &:hover {
                a {
                    i, span {
                        color: var(--jq_primary);
                    }
                }
            }
        }
    }
    &.bg1 {
        background: url('./images/bg2.png') no-repeat;
    }
    &.bg2 {
        .wrap {
            padding-top: 0px;
        }
    }
    .side-box {
        position: fixed;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        z-index: 1;
        .side-contact {
            width: 40px;
            display: flex;
            flex-direction: column;
            a {
                width: 100%;
                height: 40px;
                background: var(--jq_gray2);
                color: var(--jq_white);
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 5px;
                margin-bottom: 10px;
                opacity: 0.8;
                i {
                    font-size: 14px;
                }
                &:hover {
                    background: var(--jq_primary);
                    opacity: 1;
                    i {
                        transform: scale(1.5);
                    }
                }
            }
            a.goBottom {
                transform: rotate(90deg);
            }
            a.goTop {
                transform: rotate(-90deg);
            }
        }
    }
}

.cus_info_window {
    background: var(--jq_primary);
    padding: 10px;
    color: var(--jq_white);
    font-size: var(--jq_fs3);
}

.video-play-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    .img {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    video, .img {
        width: 100%;
        height: 100%;
        img {
            max-width: 100%;
            max-height: 100%;
        }
    }
    .close {
        width: 42px;
        height: 42px;
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--jq_white);
        border-radius: 100%;
        opacity: 0.9;
        .iconfont {
            font-size: 26px;
            color: var(--jq_primary);
        }
        &:hover {
            opacity: 1;
            background: var(--jq_primary);
            .iconfont {
                color: var(--jq_white);
            }
        }
    }
}
.video-play-box.active {
    display: block;
}
/* 添加到你的CSS文件中 */
#images-max {
    position: relative;
    display: inline-block;
    cursor: zoom-in;
}

#images-max img {
    display: block;
    max-width: 100%;
    height: auto;
}

.magnifier {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    display: none;
    pointer-events: none;
    z-index: 10;
}

.magnifier-glass {
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid #333;
    background: rgba(0, 0, 0, 0.3);
    display: none;
    overflow: hidden;
    z-index: 100;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.magnifier-glass img {
    position: absolute;
    width: 200%; /* 2倍放大 */
    height: 200%;
}