body {
    background-image: url(/images/about/bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed; /* 固定背景图像 */
}

.product {
    
}

.product-box {
    display: flex;
    width: 100%;
    position: relative; /* 设置为相对定位 */
    margin: auto;
    padding: 0 5%;
}

.iscreen-product {
    width: 100%;
    top: 100px;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    position: relative;
    overflow: hidden !important;
}

.iscreen-wechat-box {
    width: 90%;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    padding: 0 1rem;
    position: relative;
    overflow: hidden !important;
}

.iscreen-down-banner {
    display: none;
    z-index: 1000;
    position: fixed; /* 固定定位 */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 18vw;
    flex-flow: column;
    padding: 1vh;
    background: rgba(44,45,52,0.8);
    overflow: hidden !important;
    justify-content: center;
}

.iscreen-down-banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.iscreen-down-logo {
    width: 16vw;
    margin: 2vw 2vw 2vw;
    position: relative;
}

.iscreen-down-logo img {
    width: 100%;
}

.iscreen-down-info {
    height: 16vw;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1vw;
}

.iscreen-down-name {
    font-family: D-DIN-G,D-DIN-G;
    text-transform: none;
    font-size: 3.2vw; /* 根据需要调整字体大小 */
    font-weight: bold;
    color: #FFFFFF;
}

.iscreen-down-desc {
    font-size: 2.6vw;
    color: #FFFFFF;
}

.iscreen-down-button a {
    text-align: center;
    line-height: 6vw;
    font-size: 2.6vw;
    width: 22vw;
    height: 8vw;
    padding: 1vw;
    margin-right: 6vw;
    background-color: #009DFF;
    color: #FFFFFF !important;
    border-radius: 24vw;
    cursor: pointer;
    display: inline-block; /* 使a标签表现得像一个按钮 */
    text-decoration: none;
}

.iscreen-down-info {
    height: 6vh;
    width: 100%;
    position: relative;
}

.iscreen-product .row {
    width: 100%;
    margin: auto;
    max-width: 1280px;
}

.iscreen-wechat-sz {
    z-index: 1000;
    position: fixed; /* 固定定位 */
    right: 5%; /* 靠右 */
    top: 120px;
    width: 100px;
    height: 120px;
    text-align: center;
    line-height: 20px; /* 让文本居中 */
}

.iscreen-wechat-sz-box {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    text-align: center;
    font-size: 12px;
    color: rgba(31, 33, 44, 0.5);
}

.iscreen-wechat-sz img {
    width: 100px;
    height: 100px;
}

.product-iscreen-logo {
    width: 100%;
    text-align: left;
    overflow-wrap: break-word;
    font-weight: normal;
    white-space: nowrap;
    line-height: 20px;
    padding: 1%;
}

.product-iscreen-font{
    width: 100%;
    color: #1F212C;
    font-size: 1.8rem;
    padding: 0 6% 0 3.5%;
}

.product-iscreen-font span {
    text-transform: none;
}

.product-iscreen-logo img {
    margin-left: 1%;
    width: 30%;
}

/*特色*/
.iscreen-feature {
    width: 100%;
    margin-top: 20px;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    text-align: center;
    position: relative; /* 设置为相对定位 */
    padding: 1%;
}

.iscreen-feature-mobile {
    width: 100%;
    display: none;
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    text-align: center;
    padding: 1%;
}

.iscreen-feature-mobile-img {
    width: 100%;
    height: auto;
}

.iscreen-feature-font {
    font-weight: 500;
    float: left;
    font-size: 1.8rem;
    line-height: 1.8rem;
    color: #1BCDE1;
    font-style: normal;
    text-transform: none;
    padding: 1% 1% 1% 2.5%;
}

.iscreen-feature-img {
    width: 100%;
    display: flex;
    justify-content: center; /* 水平方向居中 */
    align-items: center;    /* 垂直方向居中 */
    padding: 0.5% 0;
}

.iscreen-feature-img img {
    width: 100%;
    height: auto;
}

.iscreen-feature-img-all {
    width: 100%;
    display: flex;
    justify-content: center; /* 水平方向居中 */
    align-items: center;    /* 垂直方向居中 */
    padding: 0.5% 2%;
}

.iscreen-feature-img-all img {
    aspect-ratio: 1100/140; /* 根据你的图片比例设置 */
    object-fit: cover;
}

.iscreen-feature-img-half {
    width: 100%;
    display: flex;
    justify-content: center; /* 水平方向居中 */
    align-items: center;    /* 垂直方向居中 */
    padding: 0.5% 2%;
}

.iscreen-feature-img-half img {
    aspect-ratio: 540/140; /* 根据你的图片比例设置 */
    object-fit: cover;
}

.iscreen-feature-img-split {
    padding: 0 1vh;
}


.iscreen-feature-img1 .iscreen-feature-img2 .iscreen-feature-img3 .iscreen-feature-img4 .iscreen-feature-img5 img {
    transition: box-shadow 0.3s ease, z-index 0.3s ease;
}

.iscreen-feature-img-border1 {
    width: 100%;
    height: auto;
    border-radius: 1.82% / 14.29%;
}

.iscreen-feature-img-border2 {
    width: 100%;
    height: auto;
    border-radius: 3.7% / 14.29%;
}

.iscreen-feature-img2 .iscreen-feature-img4 {
    float: left;
}

.iscreen-feature-img3 .iscreen-feature-img5 {
    float: right;
}

.iscreen-feature-img1:hover img {
    border-radius: 1.82% / 14.29%;
    content: url(/images/product/iscreen1-2x-open.png); /* 悬停时更换的图像路径 */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* 添加投影效果 */
    z-index: 10; /* 置于顶层 */
}

.iscreen-feature-img2:hover img {
    border-radius: 3.7% / 14.29%;
    content: url(/images/product/2@2x.png); /* 悬停时更换的图像路径 */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* 添加投影效果 */
    z-index: 10; /* 置于顶层 */
}
.iscreen-feature-img3:hover img {
    border-radius: 3.7% / 14.29%;
    content: url(/images/product/3@2x.png); /* 悬停时更换的图像路径 */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* 添加投影效果 */
    z-index: 10; /* 置于顶层 */
}
.iscreen-feature-img4:hover img {
    border-radius: 3.7% / 14.29%;
    content: url(/images/product/4@2x.png); /* 悬停时更换的图像路径 */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* 添加投影效果 */
    z-index: 10; /* 置于顶层 */
}
.iscreen-feature-img5:hover img {
    border-radius: 3.7% / 14.29%;
    content: url(/images/product/5@2x.png); /* 悬停时更换的图像路径 */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* 添加投影效果 */
    z-index: 10; /* 置于顶层 */
}


.our-products {
    position: relative;
    margin-top: 80px;
    width: 100%;
    height: 730px;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-direction: column; /* 垂直排列子元素 */
}

.our-products-p {
    width: 100%;
    display: flex; /* 使用 flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.our-products-name-box {
    display: flex; /* 使用 flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    width: 100%;
}

.our-products-p p {
    width: 12.8rem;
    text-align: center;
    font-size: 2.5rem;
    color: #1F212C;
    font-family: DingTalk JinBuTi, DingTalk JinBuTi;
    background: url(/images/layouts/nav_select.png);
    background-size: 100% 100%;
    background-position-y: calc(100% - 0.5rem); /* 底部上移20px */
}

.our-products-box {
    top: 50px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    text-align: center;
    background: url("/images/product/round2.png");
    background-size: 100% 100%;
    display: flex;
    position: relative; /* 设置为相对定位 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin: auto;
}

.container-item-img2 {
    width: 70px;
    height: 70px;
}


.container-item-img {
    width: 40px;
    height: 40px;
}

.container-item-img3 {
    width: 40px;
    height: 40px;
}

/*转圈*/
/*// 容器样式*/
.our-products-container {
    width: 318px;
    height: 318px;
    position: absolute;
    text-align: center;
    animation: spin 120s infinite linear;
    top: 14.65%; /* 使容器的顶部在父元素的中间 */
    left: 14.65%; /* 使容器的左边在父元素的中间 */
}

.container-item {
    position: absolute;
    text-align: center;
    left: -70px;
    top: -35px;
    right: 248px;
    bottom: 283px;
    animation: spin-reverse 120s infinite linear;
}

.container-item2 {
    position: absolute;
    text-align: center;
    left: 278px;
    top: 298px;
    right: -40px;
    bottom: -20px;
    animation: spin-reverse 120s infinite linear;
}

.container-item3 {
    position: absolute;
    text-align: center;
    left: -70px;
    top: 283px;
    right: 248px;
    bottom: -35px;
    animation: spin-reverse 120s infinite linear;
}


.container-item4 {
    position: absolute;
    text-align: center;
    left: 248px;
    top: -35px;
    right: -70px;
    bottom: 283px;
    animation: spin-reverse 120s infinite linear;
}

.our-products-box2 {
    width: 270px;
    height: 270px;
    border-radius: 50%;
    text-align: center;
    background: url(/images/product/round1.png);
    background-size: 100% 100%;
    position: relative; /* 设置为相对定位 */
    margin: auto;
}

/*转圈*/
/*// 容器样式*/
.our-products-container2 {
    width: 191px;
    height: 191px;
    position: absolute;
    text-align: center;
    animation: spin-reverse 120s infinite linear;
    top: 14.64%; /* 使容器的顶部在父元素的中间 */
    left: 14.64%; /* 使容器的左边在父元素的中间 */
}

.container2-item {
    position: absolute;
    text-align: center;
    left: -40px;
    top: -20px;
    right: 151px;
    bottom: 170px;
    animation: spin 120s infinite linear;
}

.container2-item2 {
    position: absolute;
    text-align: center;
    left: 151px;
    top: 170px;
    right: -40px;
    bottom: -20px;
    animation: spin 120s infinite linear;
}


.our-products-iscreen {
    width: 158px;
    height: 158px;
    text-align: center;
    position: relative; /* 设置为相对定位 */
    top: 20.83%; /* 使容器的顶部在父元素的中间 */
    left: 20.83%; /* 使容器的左边在父元素的中间 */
}

.our-products-iscreen img {
    width: 100%;
    height: auto;
}



.container-item-font2 {
    color: rgba(31,33,44,0.5);
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
    margin-top: 0.6rem;
}

.container-item-font {
    color: rgba(31,33,44,0.5);
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 0.48rem;
}


/*// 旋转动画*/
@keyframes spin {
    to {
        transform: rotate(-1turn);
    }
}

@keyframes spin-reverse {
    to {
        transform: rotate(1turn);
    }
}

@media (max-width: 1000px) {
    body {
        background-image: url(/images/about/sj_bg.png);
        background-size: 100% 100%;
    }

    .product .container {
        padding: 0;
    }
    .product-box {
        width: 100%;
        padding: 0 2%;
        left: 0;
    }
    .iscreen-product {
        width: 100%;
        top: 80px;
    }

    .iscreen-down-banner {
        display: flex;
    }

    .iscreen-product .row {
        width: 100%;
    }
    .product-iscreen-font{
        font-size: 1.5rem;
    }

    .product-iscreen-logo img {
        margin-left: 0;
        width: 50%;
    }

    .iscreen-feature-font {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    .iscreen-wechat-sz {
        display: none;
    }
    .iscreen-feature-pc {
        display: none;
    }
    .iscreen-feature-mobile{
        display: flex;
    }

    .iscreen-feature-img img {
        width: 100%;
    }

    .our-products {
        height: 135vw;
    }

    @media (max-width: 450px) {
        .our-products {
            height: 145vw;
        }
    }

    .our-products-name-box {
        width: 100%;
    }

    .our-products-p p {
        width: 15.1rem;
        font-size: 3rem;
        text-align: center;
    }

    .our-products-box {
        top: 40px;
        width: 90vw;
        height: 90vw;
        border-radius: 50%;
        margin: auto;
    }

    /*转圈*/
    /*// 容器样式*/
    .our-products-container {
        width: 57.63vw;
        height: 57.63vw;
        left: 17.98%;
        top: 17.98%;
    }

    .container-item {
        left: -6.9vw;
        top: -6.9vw;
        right: 50.73vw;
        bottom: 50.73vw;
    }

    .container-item2 {
        left: 49.38vw;
        top: 53.505vw;
        right: -8.25vw;
        bottom: -4.125vw;
    }

    .container-item3 {
        left: -6.9vw;
        top: 50.73vw;
        right: 50.73vw;
        bottom: -6.9vw;
    }


    .container-item4 {
        left: 50.73vw;
        top: -6.9vw;
        right: -6.9vw;
        bottom: 50.73vw;
    }

    .our-products-box2 {
        width: 54vw;
        height: 54vw;
        margin: auto;
    }

    /*转圈*/
    /*// 容器样式*/
    .our-products-container2 {
        width: 38.18vw;
        height: 38.18vw;
    }

    .container2-item {
        left: -8.25vw;
        top: -4.125vw;
        right: 29.93vw;
        bottom: 34.055vw;
    }

    .container2-item2 {
        left: 29.93vw;
        top: 34.055vw;
        right: -8.25vw;
        bottom: -4.125vw;
    }


    .our-products-iscreen {
        width: 33.13vw;
        height: 33.13vw;
        left: 19.32%;
        top: 19.32%;
    }

    .container-item-img2 {
        width: 13.75vw;
        height: 13.75vw;
    }

    .container-item-img {
        width: 8.25vw;
        height: 8.25vw;
    }

    .container-item-img3 {
        width: 8.25vw;
        height: 8.25vw;
    }

    .container-item-font2 {
        margin-top: 0.5rem;
        font-size: 1.4rem;
    }

    .container-item-font {
        margin-top: 0.4rem;
        font-size: 1.2rem;
    }

    @media (min-width: 800px){
        .product-box {
            width: 100%;
            padding: 0 2%;
            left: 0;
        }

        .container-item-img2 {
            width: 10.05vw;
            height: 10.05vw;
        }

        .container-item-img {
            width: 5.94vw;
            height: 5.94vw;
        }

        .container-item-img3 {
            width: 6.53vw;
            height: 6.53vw;
        }

        .our-products {
            height: 100vw;
        }

        .our-products-box {
            top: 40px;
            width: 70vw;
            height: 70vw;
            border-radius: 50%;
            margin: auto;
        }

        /*转圈*/
        /*// 容器样式*/
        .our-products-container {
            width: 49.5vw;
            height: 49.5vw;
            left: 14.64%;
            top: 14.64%;
        }

        .container-item {
            left: -5vw;
            top: -5vw;
            right: 44.5vw;
            bottom: 44.5vw;
        }

        .container-item2 {
            left: -3.04vw;
            top: 46.46vw;
            right: 46.46vw;
            bottom: -3.04vw;
        }

        .container-item3 {
            left: 44.5vw;
            top: 44.5vw;
            right: -5vw;
            bottom: -5vw;
        }


        .container-item4 {
            left: 44.5vw;
            top: -5vw;
            right: -5vw;
            bottom: 44.5vw;
        }

        .our-products-box2 {
            width: 45.25vw;
            height: 45.25vw;
            margin: auto;
        }

        /*转圈*/
        /*// 容器样式*/
        .our-products-container2 {
            width: 32vw;
            height: 32vw;
        }

        .container2-item {
            left: -3.04vw;
            top: -3.04vw;
            right: 28.96vw;
            bottom: 28.96vw;
        }

        .container2-item2 {
            left: 28.96vw;
            top: 28.96vw;
            right: -3.04vw;
            bottom: -3.04vw;
        }


        .our-products-iscreen {
            width: 22.95vw;
            height: 22.95vw;
            left: 24.64%;
            top: 24.64%;
        }

        .container-item-font2 {
            margin-top: 0.5rem;
            font-size: 1.6rem;
        }

        .container-item-font {
            margin-top: 0.4rem;
            font-size: 1.4rem;
        }
    }

    .back-to-top {
        bottom: 22vw;
    }
}