.wuben-x3-blue-pro {
    --category-lightings-first-section-bg: url(/image/catalog/category_photo/wuben-x3-blue-pro/image-1.webp);
    --category-lightings-first-section-bg-mobile: url(/image/catalog/category_photo/wuben-x3-blue-pro/image-1_mini.webp);
    --category-lightings-authonomi-card-first-bg: url(/image/catalog/category_photo/wuben-x3-blue-pro/image-5.webp);
    --category-lightings-authonomi-card-second-bg: url(/image/catalog/category_photo/wuben-x3-blue-pro/image-6.webp);
    --category-lightings-authonomi-card-third-bg: url(/image/catalog/category_photo/wuben-x3-blue-pro/image-7.webp);
    --category-lightings-buys-section-bg: url(/image/catalog/category_photo/wuben-x3-blue-pro/image-10.webp);
}

.wuben-x3-blue-pro .first-section > div:not(.wuben-title-double) {
    max-width: 1080px;
}

.wuben-x3-blue-pro .first-section::after {
    top: 50px;
}

@media screen and (max-width: 1199px) {
    .wuben-x3-blue-pro .first-section::after {
        top: 40px;
    }
}

@media screen and (max-width: 991px) {
    .wuben-x3-blue-pro .first-section::after {
        top: 36px;
    }
}

@media screen and (max-width: 767px) {
    .wuben-x3-blue-pro .first-section::after {
        top: 20px;
    }
}

@media screen and (max-width: 567px) {
    .wuben-x3-blue-pro .first-section::after {
        top: 12px;
    }
}

.wuben-x3-blue-pro .authonomi-section__text {
    max-width: 630px;
}

.wuben-x3-blue-pro .buys-section__container {
    max-width: 795px;
}

@media screen and (max-width: 1599px) {
    .wuben-x3-blue-pro .buys-section__container {
        max-width: 655px;
    }
}

@media screen and (max-width: 1344px) {
    .wuben-x3-blue-pro .buys-section__container {
        max-width: 655px;
    }
}

@media screen and (max-width: 1199px) {
    .wuben-x3-blue-pro .buys-section__container {
        max-width: 571px;
    }
}

@media screen and (max-width: 991px) {
    .wuben-x3-blue-pro .buys-section__container {
        max-width: 100%;
    }
}

.wuben-x3-blue-pro .first-section {
    gap: 551px;
}

@media screen and (max-width: 1599px) {
    .wuben-x3-blue-pro .first-section {
        gap: 450px;
    }
}

@media screen and (max-width: 1344px) {
    .wuben-x3-blue-pro .first-section {
        gap: 418px;
    }
}

@media screen and (max-width: 1199px) {
    .wuben-x3-blue-pro .first-section {
        gap: 340px;
    }
}

@media screen and (max-width: 991px) {
    .wuben-x3-blue-pro .first-section {
        gap: 340px;
    }
}

@media screen and (max-width: 767px) {
    .wuben-x3-blue-pro .first-section {
        gap: calc(40vw - 24px);
    }
}

@media screen and (max-width: 567px) {
    .wuben-x3-blue-pro .first-section {
        gap: calc(80vw - 24px);
    }
}

.wuben-x3-blue-pro .x3-text-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media screen and (max-width: 1344px) {
    .wuben-x3-blue-pro .x3-text-group {
        gap: 20px;
    }
}

@media screen and (max-width: 567px) {
    .wuben-x3-blue-pro .x3-text-group {
        gap: 12px;
    }
}

.wuben-x3-blue-pro .g5-two-col-list {
    grid-template-columns: repeat(2, 1fr);
}

.wuben-x3-blue-pro .x3-list-split li {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media screen and (max-width: 991px) {
    .wuben-x3-blue-pro .g5-two-col-list {
        grid-template-columns: 1fr;
    }
}

.wuben-x3-blue-pro .g5-authonomi-list {
    grid-template-columns: repeat(3, 1fr);
}

.wuben-x3-blue-pro .g5-authonomi-list li {
    height: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    background-image: none !important;
}

.wuben-x3-blue-pro .g5-authonomi-list li .g5-authonomi-text {
    margin: 0;
    padding: 0 16px 16px;
    background-color: #000204;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wuben-x3-blue-pro .g5-authonomi-list li .g5-authonomi-text p {
    margin: 0;
}

.wuben-x3-blue-pro .g5-authonomi-media {
    width: 100%;
    height: 288px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.wuben-x3-blue-pro .g5-authonomi-list li:nth-child(1) .g5-authonomi-media {
    background-image: linear-gradient(180deg, rgba(0, 2, 4, 0.00) 64.03%, rgba(0, 2, 4, 0.11) 74.06%, #000204 100%), var(--category-lightings-authonomi-card-first-bg, none);
}

.wuben-x3-blue-pro .g5-authonomi-list li:nth-child(2) .g5-authonomi-media {
    background-image: linear-gradient(180deg, rgba(0, 2, 4, 0.00) 64.03%, rgba(0, 2, 4, 0.11) 74.06%, #000204 100%), var(--category-lightings-authonomi-card-second-bg, none);
}

.wuben-x3-blue-pro .g5-authonomi-list li:nth-child(3) .g5-authonomi-media {
    background-image: linear-gradient(180deg, rgba(0, 2, 4, 0.00) 64.03%, rgba(0, 2, 4, 0.11) 74.06%, #000204 100%), var(--category-lightings-authonomi-card-third-bg, none);
}

@media screen and (max-width: 1599px) {
    .wuben-x3-blue-pro .g5-authonomi-media {
        height: 238px;
    }
}

@media screen and (max-width: 1199px) {
    .wuben-x3-blue-pro .g5-authonomi-media {
        height: 228px;
    }

    .wuben-x3-blue-pro .g5-authonomi-list li {
        border-radius: 14px;
    }
}

@media screen and (max-width: 991px) {
    .wuben-x3-blue-pro .g5-authonomi-list {
        grid-template-columns: 1fr;
    }

    .wuben-x3-blue-pro .g5-authonomi-media {
        height: 320px;
    }

    .wuben-x3-blue-pro .g5-authonomi-list li {
        border-radius: 12px;
    }
}

@media screen and (max-width: 767px) {
    .wuben-x3-blue-pro .g5-authonomi-media {
        height: 290px;
    }

    .wuben-x3-blue-pro .g5-authonomi-list li {
        border-radius: 8px;
    }
}

.wuben-x3-blue-pro .black-section.g5-double-block {
    gap: 96px;
}

.wuben-x3-blue-pro .g5-block {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

@media screen and (max-width: 1199px) {
    .wuben-x3-blue-pro .black-section.g5-double-block {
        gap: 68px;
    }

    .wuben-x3-blue-pro .g5-block {
        gap: 36px;
    }
}

@media screen and (max-width: 991px) {
    .wuben-x3-blue-pro .black-section.g5-double-block {
        gap: 60px;
    }

    .wuben-x3-blue-pro .g5-block {
        gap: 32px;
    }
}

@media screen and (max-width: 767px) {
    .wuben-x3-blue-pro .black-section.g5-double-block {
        gap: 52px;
    }

    .wuben-x3-blue-pro .g5-block {
        gap: 28px;
    }
}

@media screen and (max-width: 567px) {
    .wuben-x3-blue-pro .black-section.g5-double-block {
        gap: 40px;
    }

    .wuben-x3-blue-pro .g5-block {
        gap: 20px;
    }
}

.wuben-x3-blue-pro .g5-double-section {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.wuben-x3-blue-pro .g5-double-section .double-section {
    align-items: stretch;
}

.wuben-x3-blue-pro .g5-double-section .double-section .g5-double-section__media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
}

.wuben-x3-blue-pro .g5-double-section .double-section .g5-double-section__media img {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.wuben-x3-blue-pro .g5-double-section .double-section .double-section-text {
    justify-content: center;
}

@media screen and (max-width: 1599px) {
    .wuben-x3-blue-pro .g5-double-section {
        gap: 40px;
    }
}

@media screen and (max-width: 1344px) {
    .wuben-x3-blue-pro .g5-double-section {
        gap: 36px;
    }
}

@media screen and (max-width: 1199px) {
    .wuben-x3-blue-pro .g5-double-section {
        gap: 32px;
    }

    .wuben-x3-blue-pro .g5-double-section .double-section .g5-double-section__media {
        border-radius: 20px;
    }
}

@media screen and (max-width: 991px) {
    .wuben-x3-blue-pro .g5-double-section {
        gap: 28px;
    }

    .wuben-x3-blue-pro .g5-double-section .double-section .g5-double-section__media {
        order: 1;
        height: 349px;
        border-radius: 12px;
    }

    .wuben-x3-blue-pro .g5-double-section .double-section .double-section-text {
        order: 2;
    }
}

@media screen and (max-width: 767px) {
    .wuben-x3-blue-pro .g5-double-section {
        gap: 20px;
    }

    .wuben-x3-blue-pro .g5-double-section .double-section .g5-double-section__media {
        height: 290px;
        border-radius: 8px;
    }
}

@media screen and (max-width: 567px) {
    .wuben-x3-blue-pro .g5-double-section {
        gap: 16px;
    }

    .wuben-x3-blue-pro .g5-small-media {
        min-height: 190px;
        object-fit: cover;
    }
}