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

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

.energy-storage .layer>header .header-tab {
    font-size: calc(18 * var(--px));
    margin-top: calc(20* var(--px));
    display: flex;
    flex-wrap: wrap;
    gap: calc(12* var(--px));
}

.energy-storage .layer>header .header-tab>.tab-item {
    min-width: calc(140 * var(--px));
    text-align: center;
    color: #666;
    line-height: calc(50 * var(--px));
    padding: 0 calc(20* var(--px));
    border: 1px solid #d2d2d2;
    border-radius: 999px;
    transition: all .3s linear;
}

.energy-storage .layer>header .header-tab>.tab-item.active,
.energy-storage .layer>header .header-tab>.tab-item:not([class=active]):hover {
    color: #fff;
    background-color: var(--root-color);
    border-color: var(--root-color);
}

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

.energy-storage .energy-storage-data {
    background-color: #f3f6f8;
}

.energy-storage .energy-storage-data-content {
    max-width: var(--root-max-width);
    margin: auto;
    padding: calc(120 * var(--px)) 0;
    display: flex;
}

.energy-storage .energy-storage-data .energy-storage-data-left {
    flex: 0 0 calc(480 * var(--px));
    padding-right: calc(20 * var(--px));
}

.energy-storage .energy-storage-data .energy-storage-data-left h3 {
    font-size: calc(48 * var(--px));
    font-weight: bold;
    line-height: calc(52 * var(--px));
    padding-bottom: calc(20 * var(--px));
}

.energy-storage .energy-storage-data .energy-storage-data-left .content .data-item {
    color: #666666;
    font-size: calc(18 * var(--px));
    padding: calc(32 * var(--px)) 0;
    border-bottom: 1px solid #dcdcdc;
}

.energy-storage .energy-storage-data .energy-storage-data-left .content .data-item h4 {
    color: var(--root-color);
    font-weight: bold;
    font-size: calc(62 * var(--px));
    padding-bottom: calc(20 * var(--px));
    display: flex;
    align-items: flex-end;
}

.energy-storage .energy-storage-data .energy-storage-data-left .content .data-item h4 .value {
    flex: 0 1 auto;
}

.energy-storage .energy-storage-data .energy-storage-data-left .content .data-item h4 .label {
    font-size: calc(16 * var(--px));
    margin-bottom: calc(10 * var(--px));
    padding-left: calc(8 * var(--px));
    flex: 1 1 0;
}

.energy-storage .energy-storage-data .map {
    flex: 1 1 0;
    margin-top: calc(20 * var(--px));
}

.energy-storage .energy-storage-data .map img {
    width: 100%;
    height: auto;
}

.energy-storage .quality-certification .quality-certification-swiper {
    padding-bottom: calc(120 * var(--px));
}

.energy-storage .quality-certification .quality-certification-swiper .swiper-wrapper {
    height: calc(310 * var(--px));
}

.energy-storage .quality-certification .quality-certification-swiper .swiper-slide .img {
    width: 100%;
}

.energy-storage .quality-certification .quality-certification-swiper .swiper-slide .img img {
    width: 100%;
    aspect-ratio: 52 / 25;
    display: block;
}

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

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

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

.energy-storage .ess-product {
    background-color: #f3f6f8;
}
.energy-storage .ess-product >main {
    padding-bottom: 0;
}

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

.energy-storage .ess-product .products .product {
    height: 100%;
    padding: calc(65 * var(--px)) calc(12 * var(--px));
    background-color: #fff;
}

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

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

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

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

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

.energy-storage .ess-product .products .product .img img {
    width: 85%;
    display: block;
    margin: auto;
    aspect-ratio: 15 / 8;
}

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

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

.energy-storage .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));
}

.energy-storage .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));
}

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

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

.ess-product.ess-product-second {
    background-color: #fff;
}

.energy-storage .ess-product.ess-product-second .products .product {
    height: calc(440 * var(--px));
    background-color: #f3f6f8;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.energy-storage .ess-product.ess-product-second .products .product .img {
    flex: 1 0 0;
}

.energy-storage .ess-product.ess-product-second .products .product .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    aspect-ratio: none;
}

.energy-storage .ess-product.ess-product-second .products .product-info {
    flex: 0 0 auto;
    padding-top: 0;
    padding: calc(32 * var(--px)) calc(12 * var(--px));
    border-top: 1px solid #d2d2d2;
}

.energy-storage .ess-product.ess-product-second .products .product-info .desc {
    padding-top: 0;
    color: #666;
}

.layer.service {
    background: url(/themes/basic/skin/images/b-8.png) no-repeat;
    background-position: center center;
    background-size: cover;
}

.layer.service>header h3 {
    color: #fff;
}

.layer.service>main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(20 * var(--px));
}

.layer.service>main .service-item {
    min-height: calc(310 * var(--px));
    padding: calc(45 * var(--px)) calc(50 * var(--px));
    display: flex;
    position: relative;
}

.layer.service>main .service-item::before {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(to right, #f9a34e, #e55f34);
    z-index: 2;
    transition: width .3s linear;
}

.layer.service>main .service-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 1;
    background-color: #fff;
    transition: width .3s linear;
}

.layer.service>main .service-item:hover::before {
    width: 100%;
}

.layer.service>main .service-item:hover .content {
    color: #fff;
}

.layer.service>main .service-item:hover .content,
.layer.service>main .service-item:hover .content h4,
.layer.service>main .service-item:hover .content dd strong {
    color: #fff;
}

.layer.service>main .service-item:hover .content ul li::before {
    background-color: #fff;
}

.layer.service>main .service-item .content {
    color: #666;
    font-size: calc(18 * var(--px));
    line-height: calc(24 * var(--px));
    flex: 1 1 0;
    position: relative;
    z-index: 3;
}

.layer.service>main .service-item .content h4 {
    color: #000;
    font-weight: bold;
    font-size: calc(36 * var(--px));
    padding-bottom: calc(30 * var(--px));
}

.layer.service>main .service-item .content ul li {
    display: flex;
    align-items: flex-start;
}

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

.layer.service>main .service-item .content ul li p {
    flex: 1 1 0;
}

.layer.service>main .service-item .content dl dd strong {
    font-size: calc(36 * var(--px));
    line-height: calc(46 * var(--px));
    color: var(--root-color);
}

.layer.service>main .service-item .img {
    --width: 82;
    align-self: flex-end;
    width: calc(var(--width) * var(--px));
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 3;
    overflow: hidden;
}

.layer.service>main .service-item:hover .img img {
    filter: drop-shadow(calc(var(--width) * var(--px) * 1) 0 0 #fff);
    translate: calc(var(--width) * var(--px) * -1);
}

.layer.service>main .service-item .img img {
    width: 100%;
    transition: translate .3s linear;
}

@media screen and (max-width: 1024px) {
    .energy-storage .quality-certification .quality-certification-swiper .swiper-wrapper {
        height: calc(370 * var(--px));
    }
}

@media screen and (max-width: 768px) {
    .energy-storage .ess-product>header {
        padding-top: calc();
    }

    .energy-storage .energy-storage-data-content {
        flex-wrap: wrap;
    }

    .energy-storage .energy-storage-data .energy-storage-data-left {
        flex: 0 1 100%;
    }

    .energy-storage .energy-storage-data-content .map {
        flex: 0 1 100%;
        margin-top: calc(40 * var(--px));
    }

    .energy-storage .quality-certification .quality-certification-swiper .swiper-wrapper {
        height: calc(398 * var(--px));
    }

    .layer.service>main .service-item {
        padding: calc(30 * var(--px));
    }

    .layer.service>main .service-item .img {
        --width: 72;
    }
}

@media screen and (max-width: 525px) {
    .energy-storage .quality-certification .quality-certification-swiper .swiper-wrapper {
        height: calc(426 * var(--px));
    }

    .layer.service>main {
        grid-template-columns: repeat(1, 1fr);
    }
}