.page.index .index-swiper {
    height: calc(940 * var(--px));
    overflow: hidden;
    position: relative;
}

.page.index .index-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
}

.page.index .index-swiper .swiper-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page.index .index-swiper .swiper-slide__content {
    color: #fff;
    padding-left: calc(160 * var(--px));
    padding-bottom: calc(250 * var(--px));
    position: absolute;
    bottom: 0;
    left: 0;
}

.page.index .index-swiper .swiper-slide__content h2 {
    font-size: calc(68 * var(--px));
    line-height: 1.2;
    font-weight: 700;
}

.page.index .index-swiper .swiper-pagination {
    --right: 160;
    --bottom: 180;
    font-size: calc(16 * var(--px));
    color: #fff;
    height: calc(56 * var(--px));
    display: flex;
    align-items: center;
    position: absolute;
    right: calc(var(--right) * var(--px));
    bottom: calc(var(--bottom) * var(--px));
}

.page.index .index-swiper .swiper-pagination .pagination-number {
    margin-right: calc(35 * var(--px));
}

.page.index .index-swiper .pagination.swiper {
    --visible-slides: 3;
    --slide-width: 108;
    --slide-margin: 16;
    width: calc((var(--slide-width) * var(--visible-slides) + var(--slide-margin) * (var(--visible-slides, 3) - 1)) * var(--px));
    height: 100%;
}

.page.index .index-swiper .pagination.swiper .swiper-slide {
    width: calc(var(--slide-width) * var(--px));
    height: 100%;
    border-radius: 300px;
    overflow: hidden;
    margin-right: calc(16 * var(--px));
    position: relative;
}

.page.index .index-swiper .pagination.swiper .swiper-slide.active::after {
    background-color: rgba(0, 0, 0, 0);
}

.page.index .index-swiper .pagination.swiper .swiper-slide::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .4);
    transition: background .3s ease-in-out;
}

.page.index .index-swiper .pagination.swiper .swiper-slide:last-child {
    margin-right: 0;
}

.page.index .index-swiper .pagination.swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 关于我们 */
.page.index .about-us .introduce {
    max-width: calc(920 * var(--px));
    width: 100%;
    color: #000;
    font-size: calc(20 * var(--px));
    line-height: calc(1.2);
    padding-right: calc(120 * var(--px));
}

.page.index .about-us .introduce >section {
    text-align: justify;
}

.page.index .about-us .introduce .strength-box__title {
    font-weight: bold;
    padding: calc(30 * var(--px)) 0 calc(10 * var(--px));
}

.page.index .about-us .introduce .strength-box__content {
    display: flex;
    gap: calc(10 * var(--px));
    flex-wrap: wrap;
}

.page.index .about-us .introduce .strength-box__item {
    width: calc(300 * var(--px));
    height: calc(80 * var(--px));
    font-size: calc(24 * var(--px));
    font-weight: 700;
    border-radius: calc(15 * var(--px));
    padding: calc(16 * var(--px));
}

.page.index .about-us .introduce .strength-box__item[data-name="flexibility"] {
    color: var(--primary-color);
    background-color: rgba(47, 80, 49, .2);
}

.page.index .about-us .introduce .strength-box__item[data-name="reliability"] {
    color: #CF515D;
    background-color: rgba(207, 81, 93, .2);
}

.page.index .about-us .introduce .strength-box__item[data-name="efficiency"] {
    color: #5D769D;
    background-color: rgba(93, 118, 157, .2);
}

.page.index .about-us .introduce .link {
    margin-top: calc(40 * var(--px));
}

.page.index .about-us .layer-content {
    padding-top: calc(120 * var(--px));
    position: relative;
}

.page.index .about-us .layer-content .strength-item {
    height: calc(920 * var(--px));
    display: flex;
    overflow: hidden;
    position: relative;
}

.page.index .about-us .layer-content .strength-img {
    width: calc(100% - calc((560 / 1960) * 100vw));
    flex: 0 0 auto;
    height: 100%;
}

.page.index .about-us .layer-content .strength-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page.index .about-us .layer-content .strength-right {
    color: #fff;
    flex: 1 0 0;
    background-color: var(--primary-color);
    padding: 0 calc(80 * var(--px));
}

.page.index .about-us .layer-content .strength-right__content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.page.index .about-us .layer-content .strength-right__content .strength-section {
    flex: 1 0 0;
    font-size: calc(24 * var(--px));
    line-height: 1.2;
    border-bottom: 1px solid #fff;
    padding: calc(35 * var(--px)) 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page.index .about-us .layer-content .strength-right__content .strength-section__text {
    padding-bottom: calc(12 * var(--px));
}

.page.index .about-us .layer-content .strength-right__content .strength-section:last-child {
    border-bottom: none;
}

.page.index .about-us .layer-content .strength-section .strength-section__icon {
    --h: 72;
    flex: 0 0 auto;
    width: max-content;
    height: calc(var(--h) * var(--px));
    align-self: flex-end;
}

.page.index .about-us .layer-content .strength-tab {
    width: calc(100% - calc((560 / 1960) * 100vw));
    height: calc(280 * var(--px));
    padding: calc(40 * var(--px));
    display: flex;
    gap: calc(10 * var(--px));
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}

.page.index .about-us .layer-content .strength-tab-column {
    flex: 1 1 0;
    position: relative;
    overflow: hidden;
    transition: all .3s ease-in-out;
}

.page.index .about-us .layer-content .strength-tab-column.active {
    flex: 2 1 0;
}

.page.index .about-us .layer-content .strength-tab-column::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(5px);
    z-index: 1;
}

.page.index .about-us .layer-content .strength-tab-column.active::after {
    background-color: rgba(255, 255, 255, .8);
}

.page.index .about-us .layer-content .strength-tab-column__content {
    color: #fff;
    height: 100%;
    background-color: transparent;
    padding: calc(12 * var(--px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.page.index .about-us .layer-content .strength-tab-column__content>p {
    font-weight: 700;
    font-size: calc(28 * var(--px));
    line-height: 1.5;
}

.page.index .about-us .layer-content .strength-tab-column.active .strength-tab-column__content>p {
    font-size: calc(68 * var(--px));
    color: var(--primary-color);
}

.page.index .about-us .layer-content .strength-tab-column__content .icon {
    font-size: calc(40 * var(--px));
    transition: all .6s ease-in-out;
}

.page.index .about-us .layer-content .strength-tab-column.active .strength-tab-column__content .icon {
    display: none;
}

/* our product */
.page.index .product-box .layer-content {
    margin-top: calc(46 * var(--px));
}

.page.index .product-box .product-list .toggle-btn {
    display: flex;
    flex-direction: column;
    gap: calc(14 * var(--px));
    position: absolute;
    right: calc(600 / 1960 * 100vw);
    top: 50%;
    transform: translate(0, -50%);
    z-index: 1;
    overflow: hidden;
}

.page.index .product-box .product-list .toggle-btn-item {
    --r: 60;
    width: calc(var(--r) * var(--px));
    height: calc(var(--r) * var(--px));
    font-size: calc(20 * var(--px));
    background-color: transparent;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    opacity: 0;
}

.page.index .product-box .product-list .toggle-btn-item.visible {
    opacity: 1;
}

.page.index .product-box .product-list .toggle-btn-item.prev .icon-right {
    transform: rotate(180deg);
}

.page.index .product-box .product-list .toggle-btn-item__content {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: transparent;
    z-index: 2;
}

.page.index .product-box .product-list .toggle-btn-item::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    backdrop-filter: blur(20px);
}

.page.index .product-box .product-list .swiper-slide {
    width: calc(1280 / 1960 * 100vw);
    height: calc(560 * var(--px));
    margin-right: calc(40 * var(--px));
    overflow: hidden;
    position: relative;
}

.page.index .product-box .product-list .swiper-slide:last-child {
    margin-right: 0;
}

.page.index .product-list .swiper-slide .product-img {
    width: 100%;
    height: 100%;
}

.page.index .product-list .swiper-slide .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

.page.index .product-list .swiper-slide .product-content {
    width: 100%;
    height: 100%;
    padding: calc(40 * var(--px));
    position: absolute;
    top: 0;
    left: 0;
}

.page.index .product-list .swiper-slide .product-content .product__section {
    width: calc(480 * var(--px));
    height: 100%;
    position: relative;
    overflow: hidden;
}

.page.index .product-list .swiper-slide .product-content .product__section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, .6);
    backdrop-filter: blur(5px);
    z-index: 1;
}

.page.index .product-list .swiper-slide .product__section>section {
    height: 100%;
    background-color: transparent;
    padding: calc(28 * var(--px));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.page.index .product-list .swiper-slide .product__section>section>p {
    color: #000;
    font-size: calc(38 * var(--px));
    line-height: 1.5;
}

.page.index .product-list .swiper-slide .product__section>section .link {
    align-self: flex-end;
}

/* application */
.page.index .application .layer-header {
    position: absolute;
    top: calc(var(--pt) * var(--px));
    left: 0;
}

.page.index .application .application-item {
    margin-bottom: calc(40 * var(--px));
    display: flex;
    justify-content: flex-end;
}

.page.index .application .application-item:nth-of-type(2n) {
    justify-content: flex-start;
}

.page.index .application .application-item:nth-of-type(2n) .application-item__img {
    order: 2;
}

.page.index .application .application-item:nth-of-type(2n) .application-item__container {
    order: 1;
}

.page.index .application .application-item:last-child {
    margin-bottom: 0;
}

.page.index .application .application-item .application-item__content {
    width: calc(100 / 3 * 2 * 1%);
    height: calc(400 * var(--px));
    background-color: #F4F3F3;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    transition: all .3s ease;
    overflow: hidden;
}

.page.index .application .application-item .application-item__content:hover {
    background-color: #fff;
    box-shadow: 0 4px 15px 0 rgba(106, 106, 106, 0.2);
}

.page.index .application .application-item__content .application-item__img {
    overflow: hidden;
}

.page.index .application .application-item__content .application-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page.index .application .application-item__content .application-item__container {
    font-size: calc(20 * var(--px));
    line-height: 1.2;
    padding: calc(30 * var(--px)) calc(36 * var(--px));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.page.index .application .application-item__content .application-item__container .title {
    font-size: calc(38 * var(--px));
    font-weight: 700;
    line-height: 1.5;
    transition: color .3s ease-in-out;
}

.page.index .application .application-item__content .application-item__container:hover .title {
    color: var(--primary-color);
}

.page.index .application .application-item__content .application-item__container .desc {
    opacity: 0;
    transition: all .5s ease-in-out;
}

.page.index .application .application-item__content .application-item__container:hover .desc {
    opacity: 1;
}

.page.index .application .application-item__content .application-item__container .link {
    align-self: flex-end;
}

/* out service */
.page.index .service .layer-content {
    height: calc(920 * var(--px));
    background: url(../images/bg-1.png) no-repeat,
    radial-gradient(circle, #FFFFFFFF, #F4F3F3FF, #EBEAEAFF);
    background-size: auto 100%;
    background-position: right center;
    padding: calc(128 * var(--px)) calc(38 * var(--px));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page.index .service .layer-content .service__title {
    color: var(--primary-color);
    font-size: calc(58 * var(--px));
    line-height: calc(68 * var(--px));
    font-weight: 700;
    display: flex;
    align-items: center;
}

.page.index .service .layer-content .service__title::before {
    --r: 16;
    content: '';
    width: calc(var(--r) * var(--px));
    height: calc(var(--r) * var(--px));
    border-radius: 50%;
    background-color: var(--primary-color);
    margin-left: calc(4 * var(--px));
    margin-right: calc(24 * var(--px));
}

.page.index .service .layer-content .service-list {
    max-width: calc(480 * var(--px));
    width: 100%;
}

.page.index .service .layer-content .service-item {
    padding-left: calc(40 * var(--px));
    margin-bottom: calc(22 * var(--px));
    display: flex;
    flex-direction: column;
}

.page.index .service .layer-content .service-item.active {
    border-left: calc(4 * var(--px)) solid var(--primary-color);
}

.page.index .service .layer-content .service-item:last-child {
    margin-bottom: 0;
}

.page.index .service .layer-content .service-item>section {
    font-size: calc(20 * var(--px));
    line-height: calc(1.2);
    height: 0;
    overflow: hidden;
    transition: height .6s ease-in-out;
}

.page.index .service .layer-content .service-item .title {
    color: rgba(0, 0, 0, .3);
    font-size: calc(38 * var(--px));
    font-weight: 700;
    line-height: 1.5;
}

.page.index .service .layer-content .service-item.active .title {
    color: var(--primary-color);
}

.page.index .service .layer-content .service-item .desc {
    overflow: hidden;
    text-align: justify;
}

.page.index .service .layer-content .service-item .link {
    margin-top: calc(20 * var(--px));
}

/* Making sourcing easier */
.page.index .sourc.layer {
    background-color: transparent;
    margin-bottom: calc(-50 * var(--px));
}

.page.index .sourc .layer-content {
    height: calc(640 * var(--px));
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: #CF515D;
}

.page.index .sourc .sourc-content {
    color: #fff;
    font-size: calc(20 * var(--px));
    line-height: 1.2;
    padding: calc(32 * var(--px)) calc(40 * var(--px));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page.index .sourc .sourc-content__top .title {
    font-size: calc(38 * var(--px));
    font-weight: 700;
    margin-bottom: calc(26 * var(--px));
}

.page.index .sourc .sourc-content__bottom {
    font-size: calc(38 * var(--px));
    font-weight: 400;
    padding-left: calc(20 * var(--px));
    border-left: calc(4 * var(--px)) solid #fff;
}

.page.index .sourc .sourc-img {
    overflow: hidden;
}

.page.index .sourc .sourc-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media screen and (max-width: 1024px) {
    .page.index .index-swiper .swiper-slide__content h2 {
        font-size: calc(50 * var(--px));
    }

    .page.index .index-swiper .swiper-pagination {
        --right: 80;
        --bottom: 80;
    }

    .page.index .about-us .layer-content .strength-right {
        padding: 0 calc(40 * var(--px));
        /* position: absolute;
        top: 0;
        right: 0;
        bottom: 0; */
    }

    .page.index .about-us .layer-content .strength-section .strength-section__icon {
        --h: 60;
    }

    /* .page.index .about-us .layer-content .strength-tab-column.active {
        flex: 1 1 0;
    } */

    .page.index .about-us .layer-content .strength-tab-column__content>p {
        font-size: calc(20 * var(--px));
    }

    .page.index .about-us .layer-content .strength-tab-column__content .icon {
        font-size: calc(32 * var(--px));
    }

    .page.index .about-us .layer-content .strength-tab-column.active .strength-tab-column__content>p {
        font-size: calc(40 * var(--px));
    }

    .page.index .service .layer-content .service__title {
        font-size: calc(40 * var(--px));
    }
}

@media screen and (max-width: 768px) {
    .page.index .service .layer-content {
        padding: calc(80 * var(--px)) calc(38 * var(--px));
        background-size: auto 100%;
        background-position: right center;
    }
}

@media screen and (max-width: 625px) {
    .page.index .about-us .introduce {
        padding-right: 0;
    }

    .page.index .about-us .layer-content .strength-item {
        height: 100%;
        flex-direction: column;
    }

    .page.index .about-us .layer-content .strength-img {
        width: 100%;
        height: calc(530 * var(--px));
        flex: 0 0 auto;
    }

    .page.index .about-us .layer-content .strength-right {
        flex: 0 0 auto;
        padding: calc(20 * var(--px)) 0;
    }

    .page.index .about-us .layer-content .strength-right__content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .page.index .about-us .layer-content .strength-right__content .strength-section {
        font-size: calc(20 * var(--px));
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, .4);
        padding: calc(24 * var(--px));
    }

    .page.index .about-us .layer-content .strength-section .strength-section__icon {
        --h: 50;
    }

    .page.index .about-us .layer-content .strength-right__content .strength-section:last-child {
        border-right: none;
    }

    .page.index .about-us .layer-content .strength-tab {
        width: 100%;
        height: calc(160 * var(--px));
        padding: calc(20 * var(--px));
        top: calc(650 * var(--px));
        transform: translate(0, -100%);
    }

    .page.index .product-box .product-list .swiper-slide {
        width: 100%;
    }

    .page.index .application .layer-header {
        position: relative;
        top: 0;
        left: 0;
    }

    .page.index .application>.layer-content {
        margin-top: calc(46 * var(--px));
    }

    .page.index .application .application-item .application-item__content {
        width: 100%;
    }

    .page.index .sourc .layer-content {
        height: auto;
        grid-template-columns: repeat(1, 1fr);
        gap: calc(20 * var(--px));
    }

    .page.index .sourc .sourc-content,
    .page.index .sourc .sourc-img {
        height: calc(640 * var(--px));
    }

    .page-footer .layer.contact-us .layer-header {
        flex-direction: column;
    }

    .layer .layer-header .layer-header__content {
        margin-right: 0;
    }
}