.row {
    margin-left: 0;
    margin-right: 0;
}

.row > * {
    padding-left: 0;
    padding-right: 0;
}

h3 {
    font-size: 0.48rem;
    line-height: 0.6rem;
}

.bnr-img {
    position: relative;
    aspect-ratio: 375 / 586;
}

.bnr-img .bg-banner-img {
    visibility: hidden;
}

/* 头部动画图片切片实现开始 */
.banner-img-wz {
    position: absolute;
    height: auto;
     /* 创建一个从左到右的渐变遮罩 */
    -webkit-mask-image: linear-gradient(to right, black, transparent);
    mask-image: linear-gradient(to right, black, transparent);
    
    /* 初始遮罩大小为0 */
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
    
    /* 遮罩不重复 */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;    
}

.pc-img .banner-img-wz-1 {
    width: 34.79166666%;
    top: 16.660618%;
    left: 32.54791666%;
}

.pc-img .banner-img-wz-2 {
    width: 32.252083%;
    top: 30.23906%;
    left: 32.54791666%;
}

.pc-img .banner-img-wz-3 {
    width: 37.3041666%;
    top: 42.1163287%;
    left: 51.1458333%;
}

.pc-img .banner-img-wz-1 {
   animation: revealFromLeft 1.2s ease-out forwards;
   animation-delay: 1.2s;
}

.pc-img .banner-img-wz-2 {
    animation: revealFromLeft 1.2s ease-out forwards;
    animation-delay: 2.0s;
}

.pc-img .banner-img-wz-3 {
    animation: revealFromLeft 1.2s ease-in-out forwards;
    animation-delay: 2.8s;
}

/* 移动端开始 */
.mobile-img .banner-img-wz-1 {
    width: 58.133333333%;
    top: 17.2901%;
    left: 21.2%;
}

.mobile-img .banner-img-wz-2 {
    width: 53.4%;
    top: 24.878839590%;
    left: 21.2%;
}

.mobile-img .banner-img-wz-3 {
    width: 82.13333%;
    top: 32.1058020%;
    left: 50%;
    transform: translateX(-50%);
}


.mobile-img .banner-img-wz-1 {
    animation: revealFromLeft 1s linear forwards;
    animation-delay: 1.5s;
}

.mobile-img .banner-img-wz-2 {
    animation: revealFromLeft 1s linear forwards;
    animation-delay: 2.0s;
}

.mobile-img .banner-img-wz-3 {
    animation: revealFromLeft 1.5s linear forwards;
    animation-delay: 2.5s;
}

@keyframes revealFromLeft {
    0% {
      -webkit-mask-size: 0% 100%;
      mask-size: 0% 100%;
      -webkit-mask-image: linear-gradient(to right, black, rgba(0, 0, 0, 0));
      mask-image: linear-gradient(to right, black, rgba(0, 0, 0, 0));
    }

    50%{
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-image: linear-gradient(to right, black, rgba(0, 0, 0, 0.55));
        mask-image: linear-gradient(to right, black, rgba(0, 0, 0, 0.55));
    }
    100% {
      -webkit-mask-size: 200% 100%;
      mask-size: 200% 100%;
      -webkit-mask-image: linear-gradient(to right, black, rgba(0, 0, 0, 1));
      mask-image: linear-gradient(to right, black, rgba(0, 0, 0, 1));
    }
}


/* 头部动画图片切片实现结束 */
.share-top {
    display: none;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.share-top-link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
}

#zuiki-company.site-main {
    margin-top: 0;
}

#service {
    padding: 0;
    background-color: var(--z-body-bg-color1);
}

#service > .row {
    justify-content: space-between;
}

#service .service-left,
#service .service-right  {
    width: 100%;
}

#service .service-left {
    padding: 0 0.3rem;
}

#service .service-left h1 {
    margin-top: 0.48rem;
    margin-bottom: 0.32rem;
}

#service .service-left-main .tpl-btn {
    margin-bottom: 0.4rem;
}

#service .service-right {
    padding-top: 0.832rem;
}

#service .service-right .service-right-item {
    position: relative;
    margin-bottom: 4.8rem;
    display: block;
    aspect-ratio: 557 / 347;
}

#service .service-right a.service-right-item:hover {
    animation: href-hover 0.3s linear forwards;
}

#service .service-right-item .modal-hidden {
    position: absolute;
    top: -0.5rem;
    right: 0%;
    bottom: 0;
    background-color: var(--z-body-bg-color1);
    width: 100%;
    height: calc(100% + 4.8rem);
    z-index: 2;
}

/* banner六个不同高度的调整 */
#service .service-right .service-right-item1,
#service .service-right .service-right-item4 {
    margin-bottom: 3.4rem;
}

#service .service-right-item1 .modal-hidden,
#service .service-right-item4 .modal-hidden {
    height: calc(100% + 3.4rem);
}

#service .service-right .service-right-item3 {
    margin-bottom: 2.6rem;
}

#service .service-right-item3 .modal-hidden {
    height: calc(100% + 2.6rem);
}

#service .service-right .service-right-item5 {
    margin-bottom: 3.2rem;
}

#service .service-right-item5 .modal-hidden {
    height: calc(100% + 3.2rem);
}

#service .service-right .service-right-item6 {
    margin-bottom: 2.6rem;
}

#service .service-right-item6 .modal-hidden {
    height: calc(100% + 1.8rem);
}
/* 六个不同高度的调整 */

#service .service-right-item .title {
    position: absolute;
    bottom: 0;
    left: 0.3rem;
    font-size: 0.5rem;
    color: white;
    transform: translateY(50%);
    font-weight: 600;
    z-index: 1;
}

#service .service-right-item .details {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 1.94rem;
    height: 1.94rem;
    cursor: pointer;
    z-index: 0;
}

#service .service-right-item .title .title-top {
    line-height: normal;
    padding: 0 0.18rem;
    background-color: var(--z-page-primary-color);
    padding-bottom: 0.055rem;
}

#service .service-right-item .title-top span {
    font-size: 0.3rem;
}

#service .service-right-item .title-tag {
    width: calc(100vw - 0.3rem);
    position: absolute;
    top: calc(100% + 0.18rem);
    left: 0;
    display: flex;
    flex-wrap: wrap;
}

#service .service-right-item .title-tag span {
    background-color: white;
    color: #000;
    padding: 0.08rem 0.12rem;
    font-size: 0.28rem;
    margin-right: 0.16rem;
    margin-bottom: 0.16rem;
}

#service .service-right-item .pic,
#service .service-right-item .title .title-top,
#service .service-right-item .title .title-tag {
    z-index: 1;
    /* 创建一个从左到右的渐变遮罩 */
    -webkit-mask-image: linear-gradient(to right, black, black);
    mask-image: linear-gradient(to right, black, black);
    /* 初始遮罩大小为0 */
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
    
    /* 遮罩不重复 */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;  
}

#service .service-right-item .pic.active {
    animation: picShow 0.28s ease-out forwards;
    animation-delay: 0.24s;
}

#service .service-right-item .title .title-top.active,
#service .service-right-item .title .title-tag.active {
    animation: picShow 0.1s ease-out forwards;
}

@keyframes picShow {
    0% {
      -webkit-mask-size: 0% 100%;
      mask-size: 0% 100%;
    }
    100% {
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
    }
}


#service .service-right-item1 .pic {
    position: absolute;
    right: 12.5673%;
    width: 78.5%;
    bottom: 4.5%;
}

#service .service-right-item2 .pic {
    position: absolute;
    right: 17.5%;
    width: 33%;
    bottom: 10.5%;
}

#service .service-right-item3 .pic {
    position: absolute;
    right: 5.3859%;
    width: 86%;
    top: -10.2302%;
}

#service .service-right-item4 .pic {
    position: absolute;
    right: 5.3859%;
    width: 75.0448%;
    top: -13.2302%;
}

#service .service-right-item5 .pic {
    position: absolute;
    right: 5.3859%;
    width: 70.0448%;
    top: -13.2302%;
}

#service .service-right-item5 .pic-wz {
    position: absolute;
    left: 0.32rem;
    width: 20%;
    bottom: 10.6%;
    z-index: 1;
}

#service .service-right-item6 .pic {
    position: absolute;
    right: 8.6086%;
    width: 81.5511%;
    bottom: -9%;
}

/* new products 样式开始 */
#products {
    padding: 0.64rem var(--z-body-warp-padding);
    background-color: var(--z-body-bg-color2);
    color: white;
}

#products .products-left h3,
#embedded .embedded-main h3 {
    margin-bottom: 0.16rem;
    font-family: 'Poppins';
}

#products .products-right{
    width: 100%;
    max-width: 6.9rem;
}

#products .products-right .products-right-item{
    width: 6.9rem;
}

#products .products-right .products-right-row {
    display: flex;
}

#products .products-right .products-right-row1 {
    flex-wrap: wrap;
    justify-content: center
}

#products .products-right .products-right-row2 {
    flex-wrap: wrap;
    justify-content: space-around;
}

/* new products 样式结束 */
/* embedded 区域开始 */
#embedded {
    position: relative;
    background-color: var(--z-body-bg-color1);
    z-index: 1;
}
#embedded .embedded-top {
    width: 100%;
    height: calc(0.6rem + 0.88rem);
    position: absolute;
    background-color: #fff;
    top: 0;
    left: 0;
    z-index: -1;
}

#embedded .embedded-main {
    padding: 0.3rem;
    color: var(--z-page-primary-color);
}

#embedded .embedded-main h1 {
    font-size: 0.94rem;
    letter-spacing: 0.02rem;
    line-height: 0.8rem;
}

#embedded .embedded-main-content .content {
    width: 100%;
}

#embedded .embedded-list {
    color: white;
    display: flex;
    flex-wrap: wrap;
}

#embedded .embedded-list .item {
    display: block;
    width: calc(100% / 2);
    position: relative;
}

#embedded .item .img-modal {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, rgba(0,0,0,0.05), rgba(0,0,0,0.25));
    z-index: 1;
}

#embedded .item .item-tag {
    position: absolute;
    top: 0;
    left: 0.12rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
}

#embedded .item-tag span,
#examples .item .item-right-tag span {
    margin-right: 0.06rem;
    padding: 0.06rem;
    font-size: 0.24rem;
    font-weight: bold;
}

#embedded .item-tag span {
    border: 1px solid #fff;
    margin-top: 0.12rem;
}

#examples .item .item-right-tag span {
    border: 1px solid var(--z-page-primary-color);
}

#embedded .item .item-model {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1.58rem;
    height: 1.58rem;
    z-index: 2;
}

#embedded .item-model .item-model-bg {
    width: 100%;
    height: 100%;
    background-color: var(--z-page-primary-color);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

#embedded .item-model .item-model-main {
    display: flex;
    width: 100%;
    position: absolute;
    top: 65%;
    left: 65%;
    transform: translate(-50%, -50%) rotate(-45deg);
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

#embedded .item-model-main span {
    font-size: 0.24rem;
}
#embedded .item-model-main span div {
    line-height: 1;
    text-align: center;
}

#embedded .item-model-main span.name {
    color: var(--z-page-yellow-color);
}

#embedded .item-model-main span.line {
    width: 1px;
    height: 0.18rem;
    background-color: #fff;
    margin: 0 0.1rem;
}

#embedded .item-model-main span.icon {
    border-top: 0.1rem solid transparent;
    border-bottom: 0.1rem solid transparent;
    border-left: 0.2rem solid #fff;
}

#embedded .bgline {
    background-color: var(--z-page-yellow-color);
    width: 100%;
    height: 0.07rem;
}

#embedded .explainline {
    border-top: 0.04rem solid var(--z-page-primary-color);
    border-bottom: 0.04rem solid var(--z-page-primary-color);
    width: 100%;
    height: 0.66rem;
    line-height: 0.66rem;
    background-color: #fff;
    color: var(--z-page-primary-color);
    white-space: nowrap;
    padding: 0 0.24rem;
    overflow: hidden;
}

#embedded .explainline .marquee-content{
    height: 0.66rem;
    display: flex;
}

#embedded .explainline span {
    display: inline-block;
    margin-right: 0.24rem;
    font-size: 0.26rem;
}
/* embedded 区域结束 */
/* Product examples开始 */
#examples {
    padding: 0.64rem 0.3rem 0;
}

#examples .examples-top .title{
    margin-bottom: 2.4px;
}

#examples .examples-main {
    margin: 0.64rem 0;
    color: var(--z-page-primary-color);
}

#examples .examples-main .item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0.96rem;
}

#examples .item .item-left,
#examples .item .item-right {
    width: 100%;
    margin: 0;
}

#examples .item .item-right {
    margin-top: 0.32rem;
}

#examples .item-right h3 {
    margin-top: 0.1rem;
    font-weight: bold;
    word-break: break-word;
}

#examples .item-right .item-right-minTitle{
    font-size: 0.24rem;
    margin-bottom: 0.24rem;
    font-weight: bold;
}

#examples .item-right .item-right-content{
    font-size: 0.28rem;
    line-height: 0.5rem;
    border-left: 0.04rem solid var(--z-page-primary-color);
    padding-left: 0.28rem;

}

#examples .item .item-right .tpl-btn{
    float: right;
}
/* Product examples结束 */

#zuiki-company .tpl-btn {
    margin: 0;
    width: 4rem;
}

h1 {
    font-size: 0.96rem;
    line-height: 0.92rem;
    font-weight: 700;
    font-family: 'Poppins';
    margin-block-start: 0;
    margin-block-end: 0;
}

@media screen and (min-width: 768.5px) {

    h1,
    #embedded .embedded-main h1 {
        font-size: 8.8rem;
        line-height: 8.64rem;
    }

    h3 {
        font-size: 2.858rem;
        line-height: 5.6rem;
    }

    .bnr-img {
        aspect-ratio: 1920 / 937;
    }

    #zuiki-company .tpl-btn {
        width: var(--z-tpl-btn-width);
    }

    .share-top {
        display: block;
        width: 3.8rem;
        z-index: 9;
    }

    .share-top-link {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .share-top-link a{
        width: 64%;
        margin: 0.8rem 0;
    }

    #service {
        padding: 0 var(--z-body-warp-padding);
    }
    #service .row{
        position: relative;
    }
    #service .service-left {
        top: var(--z-company-service-sticky-top);
        position: sticky;
        max-width: 42.72rem;
        padding: 0;
        margin-bottom: 10rem;
    }

    #service .service-left h1 {
        margin-top: 4.8rem;
        margin-bottom: 6.4rem;
    }

    #service .service-right {
        width: 100%;
        float: right;
        padding-top: 8.32rem;
        max-width: 130rem;
    }

    #service .service-right .service-right-item {
        margin-bottom: 10.16rem !important;
    }

    #service .service-right-item .modal-hidden {
        top: auto;
        bottom: 0;
        width: 105%;
        height: calc(100% + 8.16rem) !important;
    }

    #service .service-right-item .title {
        left: -4.93716%;
        font-size: 6.6rem;        
        top: 60.04149%;
        bottom: auto;
        line-height: 1.2;
        transform: translateY(0);
    }

    #service .service-right-item .title .title-top {
       letter-spacing: -2px;       
       padding: 0 2rem;    
       padding-bottom: 0.35rem;
    }

    #service .service-right-item .details {
        width: 15.7091%;
        height: auto;
    }


    #service .service-right-item .title-top span {
        font-size: 4rem;
    }

    #service .service-right-item .title-tag {
        width: auto;
        top: calc(100% + 3rem);
        left: 8.16rem;
    }

    #service .service-right-item.service-right-item2 .title-tag {
        width: 130%;
    }

    #service .service-right-item .title-tag.title-tag-max{
        width: 170%;
        max-width: 44rem;
    }

    #service .service-right-item .title-tag span {
        padding: 0.4rem 0.56rem;
        font-size: 1.28rem;
        margin-right: 0.8rem;
        margin-bottom: 0.8rem;
    }


    #service .service-right-item1 .pic {
        right: 6.1812%;
        width: 68.428%;
        bottom: 18.537%;
    }

    #service .service-right-item2 .pic {
        right: 12.5673%;
        width: 30.3412%;
        bottom: 23.34294%;
    }

    #service .service-right-item3 .pic {
        right: 11.41203%;
        width: 75.4937%;
        bottom: 31.1239%;
    }

    #service .service-right-item4 .pic {
        right: 4.30879%;
        width: 65.43986%;
        bottom: 25.216138%;
        top: auto;
    }

    #service .service-right-item5 .pic {
        right: 9.96409%;
        width: 61.57989%;
        bottom: 11.0951%;
    }

    #service .service-right-item5 .pic-wz {
        position: absolute;
        right: 22.6%;
        width: 14.72172%;
        top: 94.6%;
        left: auto;
    }

    #service .service-right-item6 .pic {
        right: 4.50628%;
        width: 70.64632%;
        bottom: 13.4%;
    }

    /* new products 样式开始 */
    #products {
        padding: var(--z-body-warp-padding);
    }

    #products .products-left h3,
    #embedded .embedded-main h3 {
        margin-bottom: 6.4rem;
    }

    #products .products-right{
        max-width: 130rem;
    }

    #products .products-right .products-right-row {
        margin-top: 1.44rem;
        margin-bottom: 5.76rem;
    }

    #products .products-right .products-right-item{
        width: auto;
    }

    #products .products-right-row1 .products-right-item {
        margin: 0 1.92rem;
    }
    /* new products 样式结束 */
    /* embedded 区域开始 */
    #embedded .embedded-top {
        height: calc(9.6rem + 8.04rem);
    }

    #embedded .embedded-main {
        padding: var(--z-body-warp-padding);
    }

    #embedded .embedded-main-content .content {
        width: 78%;
    }

    #embedded .embedded-list {
        margin-top: 3.84rem;
    }

    #embedded .embedded-list .item {
        width: calc(100% / 6);
    }

    #embedded .item .item-tag {
        left: 0.8rem;
    }

    #embedded .item-tag span,
    #examples .item .item-right-tag span {
        margin-right: 0.48rem;
        padding: 0.2rem 0.4rem;
        font-size: 1.12rem;
    }
    #embedded .item-tag span {
        margin-top: 0.8rem;
    }

    #embedded .item .item-model {
        width: 8rem;
        height: 8rem;
    }

    #embedded .item-model-main span {
        font-size: 1.28rem;
        font-weight: bold;
    }

    #embedded .item-model-main span.line {
        width: 1px;
        height: 1.28rem;
        margin: 0 0.48rem;
    }

    #embedded .item-model-main span.icon {
        border-top: 0.34rem solid transparent;
        border-bottom: 0.34rem solid transparent;
        border-left: 0.68rem solid #fff;
    }

    #embedded .bgline {
        height: 0.56rem;
    }

    #embedded .explainline {
        border-top: 0.16rem solid var(--z-page-primary-color);
        border-bottom: 0.16rem solid var(--z-page-primary-color);
        height: 5.28rem;
        line-height: 5.28rem;
        padding: 0 1.92rem;
    }

    #embedded .explainline span {
        margin-right: 1.92rem;
        font-size: 1.6rem;
    }

    #embedded .embedded-list a.item {
        cursor: pointer;
    }

    #embedded .embedded-list a.item:hover  .item-model{
        animation: embeddedItemAni 0.3s linear;
        animation-fill-mode: forwards;
    }

    #embedded .embedded-list a.item:hover  .item-model-bg {
        animation: bgAnimation 0.3s linear;
        animation-fill-mode: forwards;
    }

    #embedded .embedded-list a.item:hover  .img-modal {
        display: block;
    }
    #embedded .embedded-list a.item:hover  .item-model-main span.name {
        color: var(--z-page-primary-color);
    }
    #embedded .embedded-list a.item:hover  .item-model-main span.line {
        background-color: var(--z-page-primary-color);
    }
    #embedded .embedded-list a.item:hover  .item-model-main span.icon {
        border-left-color: var(--z-page-primary-color);
    }

    @keyframes embeddedItemAni {
        0% {
            width: 8rem;
            height: 8rem;
        }
        100% {
            width: 10rem;
            height: 10rem;
        }
    }

    @keyframes bgAnimation {
        0% {
           background-color: var(--z-page-primary-color);
        }
        100% {
            background-color: white;
        }
    }



    /* embedded 区域结束 */
    /* Product examples开始 */
    #examples  {
        padding: 3.84rem var(--z-body-warp-padding);
    }

    #examples .examples-top .title{
        margin-bottom: 1.92rem;
    }

    #examples .examples-main {
        margin: 2.44rem calc(-1 * var(--z-body-warp-padding)) 3.84rem calc(-1 * var(--z-body-warp-padding));
    }

    #examples .examples-main .item {
        padding: 1.44rem 0;
    }

    #examples .examples-main .examples-item {
        cursor: pointer;
    }

    #examples .examples-main .examples-item:hover {
        background-color: #FCFF98;
    }

    #examples .item .item-left {
        max-width: 46.4rem;
    }

    #examples .item .item-right {
        max-width: 620px;
        padding-left: 2.88rem;
    }

    #examples .item-right h3 {
        font-size: 2.56rem;
        margin-top: 0.16rem;
        line-height: 3.6rem;
        margin-bottom: 1.2rem;
    }

    #examples .item-right .item-right-minTitle{
        font-size: 1.12rem;
        margin-bottom: 1.6rem;
    }

    #examples .item-right .item-right-content{
        font-size: 1.28rem;
        line-height: 2.56rem;
        border-left-width: 3px;
        padding-left: 2.08rem;

    }
    #examples .item .item-right .tpl-btn{
        margin-top: 1.92rem;
    }
    /* Product examples结束 */
    /* footer-banner 开始 */

    /* footer-banner 结束 */

}