.product-detail .layer>header {
    max-width: var(--root-max-width);
    margin: auto;
    padding-top: calc(100 * var(--px));
    padding-bottom: calc(50 * var(--px));
}

.product-detail .layer>header h3 {
    font-size: calc(48 * var(--px));
    font-weight: bold;
    line-height: calc(52 * var(--px));
}

.product-detail .layer>main {
    max-width: var(--root-max-width);
    margin: auto;
    padding-bottom: calc(100 * var(--px));
}

.product-detail .detail-info {
    padding-top: calc(40 * var(--px));
    background-color: #f3f6f8;
}

.product-detail .detail-info .detail-info-content {
    max-width: var(--root-max-width);
    margin: auto;
    display: flex;
    justify-content: center;
}

.product-detail .detail-info .detail-info-item {
    height: calc(160 * var(--px));
    text-align: center;
    flex: 0 0 calc(100% / 6);
    border: 1px solid #d4d4d4;
    margin-right: calc(-1 * var(--px));
    padding: calc(12 * var(--px));
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-detail .detail-info .detail-info-item:hover {
    color: #fff;
    background-image: linear-gradient(to right, #f8a04d, #e76636);
    border-color: transparent;
}

.product-detail .detail-info .detail-info-item:hover h4 {
    color: #fff;
}

.product-detail .detail-info .detail-info-item h4 {
    color: var(--root-color);
    font-size: calc(32 * var(--px));
    font-weight: bold;
    line-height: calc(32 * var(--px));
    margin-bottom: calc(18 * var(--px));
}

.layer.product-info {
    background-color: #f3f6f8;
}

.product-info>main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-info>main>.product-img {
    flex: 1 1 0;
    padding: 0 calc(70 * var(--px));
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-info>main>.product-img img {
    width: 100%;
}

.product-info>main>ul {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: calc(70 * var(--px));
}

.product-info>main>ul.left {
    text-align: right;
}

.product-info>main>ul.right {
    text-align: left;
}

.product-info>main>ul li {
    font-size: calc(18 * var(--px));
    display: flex;
    align-items: center;
}

.product-info>main>ul li>section {
    flex: 1 1 0;
}

.product-info>main>ul.left li>section {
    padding-right: calc(30 * var(--px));
}

.product-info>main>ul.right li>section {
    padding-left: calc(30 * var(--px));
}

.product-info>main>ul li .num {
    --width: 85;
    --height: 85;
    flex: 0 0 auto;
    font-size: calc(32 * var(--px));
    font-weight: bold;
    color: var(--root-color);
    width: calc(var(--width) * var(--px));
    height: calc(var(--height) * var(--px));
    border: 1px solid #e3e5e6;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: relative;
}

.product-info>main>ul li .num::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: var(--root-color);
    border-bottom-color: var(--root-color);
    transform: rotate(45deg);
    transform-origin: center center;
}

.product-detail .quality-certification>main {
    display: grid;
    grid-template: repeat(2, 1fr) / repeat(5, 1fr);
    gap: calc(10 * var(--px));
}

.product-detail .quality-certification>main .img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 52 / 25;
}

.layer.advantages-of-products {
    background-color: #fdeee8;
}

.layer.advantages-of-products>main ul {
    --width: 120;
    --height: 120;
    margin-top: calc(calc(var(--height) / 2) * var(--px));
    display: grid;
    gap: calc(20 * var(--px));
    grid-template-columns: repeat(4, 1fr);
}

.layer.advantages-of-products>main ul li {
    min-height: calc(360 * var(--px));
    background-color: #fff;
    padding-bottom: calc(20 * var(--px));
}

.layer.advantages-of-products>main ul li .img {
    width: calc(var(--width) * var(--px));
    height: calc(var(--height) * var(--px));
    border-radius: 50%;
    background-color: #fdeee8;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    position: relative;
    translate: 0 -50%;
}

.layer.advantages-of-products>main ul li .img img {
    height: calc(55 * var(--px));
    position: relative;
    z-index: 2;
}

.layer.advantages-of-products>main ul li .img::after {
    content: '';
    width: calc(calc(var(--width) - 10) * var(--px));
    height: calc(calc(var(--height) - 10) * var(--px));
    background-color: #f48741;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 1;
}

.layer.advantages-of-products>main ul li dl {
    color: #666;
    font-size: calc(18 * var(--px));
    margin-top: calc(calc(var(--height) / 3) * var(--px) * -1);
}

.layer.advantages-of-products>main ul li dl dt {
    color: #000;
    font-size: calc(24 * var(--px));
    font-weight: bold;
    text-align: center;
    line-height: calc(28 * var(--px));
    padding: 0 calc(20 * var(--px)) calc(30 * var(--px)) calc(20 * var(--px));
}

.layer.advantages-of-products>main ul li dl dd {
    line-height: calc(24 * var(--px));
    display: flex;
    align-items: flex-start;
    padding: 0 calc(30 * var(--px));
}

.layer.advantages-of-products>main ul li dl dd::before {
    content: '';
    width: 4px;
    height: 4px;
    background-color: var(--root-color);
    border-radius: 50%;
    margin-right: calc(12* var(--px));
    margin-top: calc(9* var(--px));
    flex: 0 0 auto;
}

.layer.advantages-of-products>main ul li dl dd p {
    flex: 1 0 0;
    line-height: calc(20 * var(--px));
    padding-bottom: calc(8 * var(--px));
}

.product-detail .layer.product-parameter>main {
    padding-bottom: 0;
}

.product-detail .ess-product .products {
    max-width: var(--root-max-width);
    margin: auto;
    padding-bottom: calc(120 * var(--px));
    text-align: center;
}

.product-detail .ess-product .products .product {
    height: 100%;
    padding: calc(65 * var(--px)) calc(48 * var(--px));
    background-color: #f3f6f8;
}

.product-detail .ess-product .products .product:hover {
    color: #fff;
    background-image: linear-gradient(to bottom, #f9a34e, #e55f34);
}

.product-detail .ess-product .products .product:hover .learn-more {
    color: #fff;
}

.product-detail .ess-product .products .product:hover .product-info .desc {
    color: #fff;
}

.product-detail .ess-product .products .product:hover .learn-more .icon img {
    filter: drop-shadow(calc(var(--width) * 1px) 0 0 #fff);
    translate: calc(var(--width) * -1px);
}

.product-detail .ess-product .products .product .img {
    max-width: 100%;
    text-align: center;
}

.product-detail .ess-product .products .product .img img {
    width: 100%;
    aspect-ratio: 15 / 8;
}

.product-detail .ess-product .products .product-info {
    padding-top: calc(90 * var(--px));
}

.product-detail .ess-product .products .product-info h3 {
    font-weight: bold;
    font-size: calc(32 * var(--px));
    line-height: calc(36 * var(--px));
}

.product-detail .ess-product .products .product-info section.desc {
    font-size: calc(18 * var(--px));
    line-height: calc(24 * var(--px));
    padding-top: calc(20 * var(--px));
}

.product-detail .ess-product .products .product-info a.learn-more {
    color: var(--root-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: calc(40 * var(--px));
    gap: calc(8 * var(--px));
}

.product-detail .ess-product .products .product-info a.learn-more .icon {
    --width: 22;
    width: calc(var(--width) * var(--px));
    overflow: hidden;
}

.product-detail .ess-product .products .product-info a.learn-more .icon img {
    width: 100%;
}

.product-detail .swiper .swiper-pagination-bullet {
    width: calc(20* var(--px));
    height: calc(10* var(--px));
    border-radius: 4px;
}

.product-detail .swiper .swiper-pagination-bullet-active {
    width: calc(50* var(--px));
    background-color: var(--root-color);
    transition: width .3s linear;
}

.product-detail .swiper .swiper-pagination {
    bottom: calc(76 * var(--px));
}

@media screen and (max-width: 1024px) {
    .product-detail .detail-info .detail-info-content {
        flex-wrap: wrap;
    }

    .product-detail .detail-info .detail-info-item {
        flex: 0 1 calc(100% / 3);
        margin-bottom: calc(-1 * var(--px));
    }
}

@media screen and (max-width: 768px) {
    .product-info>main>.product-img {
        padding: 0 calc(20 * var(--px));
    }

    .product-info>main>ul li .num {
        --width: 70;
        --height: 70;
        font-size: calc(24 * var(--px));
    }

    .product-detail .quality-certification>main {
        grid-template: auto / repeat(3, 1fr);
    }

    .layer.advantages-of-products>main ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 525px) {
    .product-detail .detail-info .detail-info-item {
        flex: 0 1 calc(100% / 2);
    }

    .product-info>main {
        --gap: 40;
        flex-wrap: wrap;
        gap: calc(var(--gap) * var(--px));
    }

    .product-info>main>.product-img {
        flex: 0 1 100%;
        order: 1;
    }

    .product-info>main>ul {
        order: 2;
        flex: 0 1 calc(50% - calc(var(--gap) / 2) * var(--px));
    }

    .product-info>main>.product-img img {
        width: 60%;
    }

    .product-detail .quality-certification>main {
        grid-template: auto / repeat(2, 1fr);
    }
}