.page-banner .page-banner__content {
    padding-top: calc(100 * var(--px));
}

.page-banner .page-banner__content h3 span {
    font-size: .6em;
    margin-left: .3em;
}

.page-banner .page-banner__content .intro {
    font-size: calc(22 * var(--px));
}

.page-banner .page-banner__content .function-btn a {
    font-size: calc(22 * var(--px));
}

.card-wrap {
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    --column: 4;
    --gap: max(10px, 40 * var(--px));
    gap: var(--gap);
}

.card-wrap>.item {
    /* min-width: calc((100% - (var(--column) - 1) * var(--gap)) / var(--column)); */
    /* flex: 1; */
    width: calc((100% - (var(--column) - 1)* var(--gap)) / var(--column));
}

.product-sec1 .item {
    padding: 3px;
    border-radius: 5px;
    transition: .3s;
}

.product-sec1 .item:hover {
    background-image: linear-gradient(to bottom, rgba(57, 69, 229, 0), rgba(56, 68, 229, .5));
}

.product-sec1 .item-wrap {
    background-image: linear-gradient(to bottom, rgba(224, 226, 255, .1), #EEEFFF);
    height: 100%;
    border-radius: 5px;
    padding: max(20px, 40 * var(--px));
}

.product-sec1 .item-wrap .title {
    font-size: max(16px, 20 * var(--px));
    color: #333;
    margin-top: max(10px, 20 * var(--px));
    font-weight: bold;
}

.product-sec1 .item-wrap .intro {
    font-size: max(14px, 18 * var(--px));
    color: #888;
    margin-top: 10px;
    text-align: justify;
}

.product-sec1 .item-wrap .icon {
    text-align: right;
}

.product-sec1 .item-wrap .icon img {
    width: max(70px, 150 * var(--px));
}

.product-sec2 .info-wrap .info {
    display: flex;
    align-items: center;
    color: #333;
    margin-bottom: max(30px, 150 * var(--px));
    gap: max(20px, 40 * var(--px));
}

.product-sec2 .info-wrap .info:nth-child(even) {
    flex-direction: row-reverse;
}

.product-sec2 .info-wrap .info>* {
    width: 50%;
}

.product-sec2 .info-wrap .title {
    font-size: max(20px, 32 * var(--px));
    font-weight: bold;
}

.product-sec2 .info-wrap .intro {
    font-size: max(16px, 20 * var(--px));
    font-weight: 300;
}

.product-sec2 .info-wrap .card-wrap {
    margin-top: max(20px, 40 * var(--px));
    --column: 3;
}

.product-sec2 .info-wrap .item h1 {
    font-size: max(18px, 24 * var(--px));
}

.product-sec2 .info-wrap .item p {
    font-size: max(12px, 16 * var(--px));
    color: #888;
    margin-top: 5px;
}

.product-sec2 .info-wrap .function-btn {
    font-size: calc(16 * var(--px));
    width: calc(208 * var(--px));
    margin-top: calc(50 * var(--px));
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--primary-color);
    transition: background .4s ease-in-out;
}

.product-sec2 .info-wrap .function-btn a {
    display: block;
    color: #fff;
    width: 100%;
    line-height: calc(64 * var(--px));
    text-align: center;
}

.product-sec2 .info-wrap .function-btn:hover {
    background-color: #FE8101;
}

.product-sec2 .info-wrap .pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-sec3 .info-wrap .card-wrap {
    --column: 3;
}

.product-sec3.case-share {
    background: url(../images/img1552_18.png) no-repeat center center;
    background-size: cover;
}

.product-sec3 .case-share__content .case {
    max-width: calc(540 * var(--px));
    border-radius: 5px;
    overflow: hidden;
    background: url(../images/img1552_19.png) no-repeat center center;
    background-size: cover;
    padding: max(20px, 40 * var(--px));
    border-radius: 5px;
    height: auto;
}

.product-sec3 .case-share__content .case img {
    height: max(40px, 80 * var(--px));
}

.product-sec3 .case-share__content .case .title {
    font-size: max(16px, 20 * var(--px));
    color: #333;
    margin-top: max(20px, 40 * var(--px));
}

.product-sec3 .case-share__content .case .intro {
    font-size: max(12px, 16 * var(--px));
    color: #666;
    margin-top: 5px;
    text-align: justify;
}

.product-sec3 .layer-header__title,
.product-sec3 .layer-header__desc {
    color: #fff;
}

.product-sec3 .case-share__content .swiper-function {
    width: max-content;
    height: calc(60 * var(--px));
    margin: calc(60 * var(--px)) auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.product-sec3 .case-share__content .swiper-function .btn {
    --r: 60;
    width: calc(var(--r) * var(--px));
    height: calc(var(--r) * var(--px));
    font-size: calc(16 * var(--px));
    border: 1px solid rgba(102, 102, 102, .3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border .3s ease-in-out;
    cursor: pointer;
    background-color: #E1E8EF;
    border: 1px solid #fff;
}

.product-sec3 .case-share__content .swiper-function .btn:hover {
    border-color: #FE8101;
}

.product-sec3 .case-share__content .swiper-function .btn:hover .icon-left:before,
.product-sec3 .case-share__content .swiper-function .btn:hover .icon-right:before {
    transition: color .3s ease-in-out;
}

.product-sec3 .case-share__content .swiper-function .btn:hover .icon-left:before,
.product-sec3 .case-share__content .swiper-function .btn:hover .icon-right:before {
    color: #FE8101;
}

@media (max-width: 768px) {
    .card-wrap {
        --column: 2;
    }
}

@media (max-width: 580px) {
    .card-wrap {
        --column: 1;
    }

    .product-sec2 .info-wrap .info,
    .product-sec2 .info-wrap .info:nth-child(even) {
        flex-direction: column;
    }

    .product-sec2 .info-wrap .info>* {
        width: 100%;
    }

    .product-sec2 .info-wrap .card-wrap {
        --column: 2;
    }
}