.monitor {
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FAF9 100%);
    /* padding: 100px 0 0 0; */
}

.monitor-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 100px 0 0 0;
    /* height: 902px; */
    background: url("../images/product/jk-bg.png");
    background-size: cover;
}

.monitor-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.monitor-title {
    font-weight: 500;
    font-size: 48px;
    color: #313332;
}

.monitor-title-en {
    font-weight: 400;
    font-size: 16px;
    color: #B4BBB9;
    text-transform:uppercase;
}

.monitor-content {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
    margin-top: 60px;
}

.detail-desc {
    display: flex;
    flex-direction: column;
    width: 26.7%;
}

.desc-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 2.84rem;
    background: linear-gradient(180deg, #F7FAF9 0%, #D6FFF4 100%);
    border-radius: 16px;
    border: 2px solid #FFFFFF;
    padding: 0 28px 32px 32px;
    margin-bottom: 80px;
}

.desc-item-head {
    /* display: flex;
    align-items: center; */
    background-image: url('../images/case/shuangjiantou-icon.png');
    background-position: center 38px;
    background-size: 85%;
    background-repeat: no-repeat;
    padding-top: 32px;
    padding-bottom: 20px;
}

.desc-item-num {
    font-weight: bold;
    font-size: 42px;
    color: #09BD81;
    opacity: 0.2;
}

.desc-item-title {
    font-weight: bold;
    font-size: 0.2rem;
    color: #313332;
    /* margin-left: -20px; */
    text-align: center;
}

.desc-item-content {
    font-weight: 400;
    font-size: 0.16rem;
    color: #737877;
    line-height: 0.28rem;
    text-align: left;
}

.detail-main {
    /* width: 560px; */
    flex: 1;
    height: auto;
    padding: 0 55px;
    /* border-radius: 50%; */
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: url("../images/product/yuan1.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* 当屏幕宽度小于等于1440px时 */
@media screen and (max-width: 1440px) {
    .detail-main {
        width: auto;
    }
}

.yuan {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #09BD81;
    box-shadow: 0px 3px 6px 1px rgba(10, 189, 138, 0.24);
}

.detail-dot1 {
    position: absolute;
    left: 35px;
    top: 103px;
}

.detail-dot2 {
    position: absolute;
    right: 35px;
    top: 103px;
}

.detail-dot3 {
    position: absolute;
    left: 35px;
    bottom: 103px;
}

.detail-dot4 {
    position: absolute;
    right: 35px;
    bottom: 103px;
}

.detail-inner {
    border-radius: 50%;
    /* width: 322px;
    height: 322px; */
    width: calc( 15vw );
    height: calc( 15vw );
    background: linear-gradient(221deg, #0ABD8A 0%, #56A1D6 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.inner-up {
    font-weight: 500;
    font-size: 0.4rem;
    color: #FFFFFF;
}

.inner-down {
    font-weight: 400;
    font-size: 0.24rem;
    color: #FFFFFF;
}

.monitor-case {
    height: 420px;
    width: 100%;
    background: url("../images/product/jk-case.png");
    background-size: cover;
}

.pgt120 {
    padding-top: 80px;
}

.case-desc {
    padding-top: 60px;
    max-width: 1440px;
    margin: 0 auto;
    font-weight: 400;
    font-size: 20px;
    color: #737877;
    line-height: 36px;
}
/* 小于1440px时调整 */
@media screen and (max-width: 1440px) {
    .case-desc {
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 20px; /* 添加左右内边距 */
        font-size: 18px;
        line-height: 32px;
    }
}

.case-desc i {
    font-weight: 400;
    font-size: 26px;
    color: #09BD81;

}

.monitor-advantage {
    width: 100%;
    height: 918px;
    background: url("../images/product/youshi-bg.png");
    background-size: cover;
}

.advantage-list {
    padding-top: 60px;
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
    justify-content: space-between;
}

.advantage-item {
    display: flex;
    flex-direction: column;
    width: 464px;
    height: 538px;
    background: #FFFFFF;
    border-radius: 16px;
    align-items: center;
    padding: 32px 40px 0 40px;
}

.advantage-item-img img {
    width: 240px;
    height: 240px;
}

.advantage-title {
    margin-top: 18px;
    width: 100%;
    font-weight: 500;
    font-size: 26px;
    color: #323333;
    text-align: left;
}

.advantage-desc {
    margin-top: 18px;
    font-weight: 400;
    font-size: 16px;
    color: #737877;
    line-height: 28px;
    text-align: left;
}

.scenarios {
    width: 100%;
    height: 992px;
    background: url("../images/product/changjing-bg.png");
    background-size: cover;
}

.scenarios-box{
    background: url(../images/product/changjing-bg.png);
    background-size: 100% 100%;
}
.scenarios-container {
    display: flex;
    margin: 0 auto;
    overflow: hidden;
}

/* 左侧导航样式 */
.sidebar {
    /* width: 2.54rem; */
    /* border-right: 1px solid #eaeaea; */
    width: 17.63%;
    border-right: 0.02rem solid #E8E8E8;
    padding: 0.2rem 0;
    height: 7.32rem;
}

.nav-list {
    list-style: none;
}

.nav-item {
    font-weight: 400;
    font-size: 0.2rem;
    line-height: 0.2rem;
    color: #737877;
    padding: 0.24rem 0;
    padding-left: 0.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    /* border-right: 4px solid transparent; */
    position: relative;
}

.nav-item::before {
    content: "●";
    color: #333;
    margin-right: 0.2rem;
    font-size: 14px;
}
.nav-item.active::after {
    content: "";
    width: 0.02rem;
    height: 0.2rem;
    background-color: #0ABD8A;
    position: absolute;
    top: 0.24rem;
    right: -0.02rem;
}
.nav-item:hover {
    background-color: #edf2f7;
    color: #2d3748;
}

.nav-item.active {
    color: #0ABD8A;
    /* border-right-color: #0ABD8A; */
    font-weight: 500;
}

.nav-item.active::before {
    color: #0ABD8A;
}

.scenarios-content {
    flex: 1;
    padding: 0 0 0 0.6rem;
}

.s-content-title {
    font-weight: 500;
    font-size: 0.2rem;
    color: #313332;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #E8E8E8;
    ;
}

.s-content-body {
    min-height: 400px;
}

.case-img {
    margin-top: 0.4rem;
}

.case-img img {
    width: 100%;
    /* height: 362px; */
    object-fit: cover;
}

.case-detail {
    margin-top: 0.48rem;
    display: flex;
    flex-direction: column;
}

.c-d-item {
    font-weight: 400;
    font-size: 0.18rem;
    color: #737877;
    line-height: 0.4rem;
}

.c-d-item span {
    color: #313332
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

.c-d-title {
    font-weight: 500;
    font-size: 16px;
    color: #313332;
    line-height: 48px;
}

.c-d-desc {
    font-weight: 400;
    font-size: 16px;
    color: #737877;
    line-height: 28px;
}
@media (max-width: 767px) {
    .nav-item::before{
        margin-right: 0.1rem;
        
    }
    .nav-item{
        padding-left: 0;
        font-size: 0.26rem;
        line-height: 0.26rem;
        padding: 0.35rem 0;
    }
    .nav-item.active::after{
        top: 0.35rem;
    } 
    .sidebar {
        width: 25%;
    }
    .nav-item::before {
        font-size: 0.1rem;
    }
    .scenarios-content{
        padding-left: 0.3rem;
        height: 7.32rem;
        overflow: auto;
    }
    .s-content-title{
        font-size: 0.26rem;
        padding-bottom: 0.3rem;
    }
    .c-d-item {
       font-size: 0.24rem;
       margin-top: 0.2rem;
    }
    .c-d-item:nth-child(1){
        margin-top: 0;
    }
    .c-d-desc{
       font-size: 0.24rem;
       margin-top: 0.2rem;
       line-height: 0.5rem;
    }
    .c-d-title {
        font-weight: 500;
        font-size: 0.32rem;
        color: #313332;
        line-height: 0.56rem;
    }
}
/* 行业现状-蓝 */
@media (max-width: 767px) {
    .monitor-md-box{
        .monitor-md-content{
            .monitor-top-box{
                display: flex;
                flex-direction: row;
                .monitor-common{
                    flex: 1; 
                    .monitor-padding{
                        background: linear-gradient( 180deg, #F7FAF9 0%, #D6FFF4 100%);
                        border-radius: 0.32rem;
                        border: 2px solid #FFFFFF;
                        padding-bottom: 0.32rem;
                        padding-left: 0.32rem;
                        padding-right: 0.32rem;
                        padding-top: 0.2rem;
                        .monitor-common-title{
                            text-align: center;
                            font-weight: 500;
                            font-size: 0.24rem;
                            line-height: 0.24rem;
                            color: #313332;
                            padding-top: 0.16rem;
                            padding-bottom: 0.14rem;
                            position: relative;
                            margin-bottom: 0.2rem;
                            .monitor-img{
                                position: absolute;
                                top: 0.14rem;
                                left: 0;
                                width: 100%;
                                img{
                                    width: 90%;
                                    /* height: 0.22rem; */
                                    object-fit: cover;
                                }
                            }
                        }
                        .monitor-p-box{
                            /* max-height: 2.2rem; */
                            /* height: 2rem; */
                            /* overflow: auto; */
                            p{
                                font-weight: 400;
                                font-size: 0.22rem;
                                color: #737877;
                                line-height: 0.36rem;
                            }
                        }
                        .monitor-scroll-bar{
                            scrollbar-width: thin;
                            scrollbar-color: #09BD81 #f1f1f1;        /* 红色主题 */
                        }
                        /* 针对Webkit内核浏览器（Chrome、Safari、Edge等） */
                        .monitor-p-box::-webkit-scrollbar {
                            width: 5px;           /* 垂直滚动条宽度 */
                            height: 5px;          /* 水平滚动条高度 */
                        }

                        /* 滚动条轨道 */
                        .monitor-p-box::-webkit-scrollbar-track {
                            background: #f1f1f1;   /* 轨道背景色 */
                            border-radius: 2px;     /* 圆角 */
                        }

                        /* 滚动条滑块 */
                        .monitor-p-box::-webkit-scrollbar-thumb {
                            background: #09BD81;   /* 滑块颜色#c1c1c1 */
                            border-radius: 2px;     /* 圆角 */
                            border: 2px solid #f1f1f1;  /* 边框（创造间隔效果） */
                        }

                        /* 滑块悬停效果 */
                        .monitor-p-box::-webkit-scrollbar-thumb:hover {
                            background: #c03232;   /* 悬停时颜色 */
                        }

                        /* 滚动条按钮（上下箭头） */
                        .monitor-p-box::-webkit-scrollbar-button {
                            display: none;         /* 隐藏箭头按钮 */
                        }
                    }
                }
                .monitor-common:nth-child(1) .monitor-padding{
                    margin-right: 0.1rem;
                }
                .monitor-common:nth-child(2) .monitor-padding{
                    margin-left: 0.1rem;
                }
            }
            .monitor-middle-box{
                position: relative;
                img{
                    width: 100%;
                    object-fit: cover;
                }
                .monitor-middle-circle{
                    width: calc( 40vw );
                    height: calc( 40vw );
                    background: linear-gradient( 125deg, #C4F5E7 0%, #09BD81 100%);
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-left: calc( -20vw );
                    margin-top: calc( -20vw );
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    h5{
                       font-size: 0.48rem;
                       color: #FFFFFF;
                       font-weight: 500;
                    }
                    p{
                        font-size: 0.32rem;
                        color: #FFFFFF;
                        margin-top: 0.1rem;
                    }
                }
            }
        }
    }
    .monitor-img-md{
        display: none;
    }
    .monitor-img-xs{
        display: block;
        width: 80% !important;
        margin: auto;
    }
}
/* 方案介绍 */
.Solution-introduction-box{
    background: url(../images/product/jk-case.png);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    .Solution-introduction-text{
        p{
            font-weight: 400;
            font-size: 0.2rem;
            color: #737877;
            line-height: 0.36rem;
        }
        span{
            color: #09BD81;
            font-size: 0.28rem;
        }
    }
}
/* 方案介绍 */
/* 方案优势 */
.Solution-advantages-box{
    background: url(../images/product/youshi-bg.png);
    background-size: cover;
    .advantages-item-box{
        display: flex;
        .advantages-item{
            height: auto;           
            flex: 1;
            .advantages-box{
                background-color: #FFFFFF;
                border-radius: 0.16rem;
                height: 100%;
                padding-left: 0.4rem;
                padding-right: 0.4rem;
                padding-bottom: 0.32rem;
                .advantages-img-box{
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     padding: 0.32rem 0;
                     img{
                        width: 51.72%;
                     }
                }
                h1{
                    font-weight: 550;
                    font-size: 0.2rem;
                    line-height: 0.2rem;
                    color: #323333;
                    padding-top: 0.24rem;
                    padding-bottom: 0.18rem;
                }
                p{
                    font-weight: 400;
                    font-size: 0.18rem;
                    color: #737877;
                    line-height: 0.3rem;
                }
            }
        }
        .advantages-item:nth-child(1){
            padding-right: 0.1rem;
        }
        .advantages-item:nth-child(2){
            padding-left: 0.05rem;
            padding-right: 0.05rem;
        }
        .advantages-item:nth-child(3){
            padding-left: 0.1rem;
        }
    }
}
@media (max-width: 800px) {
    .Solution-advantages-box{
        .advantages-item-box{
            flex-direction: column;
            .advantages-item{
                margin-top: 0.2rem;
                .advantages-box{
                    .advantages-img-box{
                         img{
                            width: 40%;
                         }
                    }
                    h1{
  
                    }
                    p{
                       
                    }
                }
            }
            .advantages-item:nth-child(1){
               padding: 0;
            }
            .advantages-item:nth-child(2){
               padding: 0;
            }
            .advantages-item:nth-child(3){
               padding: 0;
            }
        }
    }
}
/* 方案优势 */
@media (min-width: 768px) {
    .monitor-md-box{
        display: none;
    }
    .monitor-img-md{
        display: block;
    }
    .monitor-img-xs{
        display: none;
    }
}
@media (max-width: 769px) {
    .monitor-xs-box{
        display: none;
    }
}
@media (min-width: 1025px) and (max-width: 1250px){
    .detail-desc{
        width: 32%;
    }
    .desc-item {
        height: 3.3rem;
    }
}
@media (min-width: 768px) and (max-width: 1024px){
    .detail-desc{
        width: 32%;
    }
    .desc-item {
        height: 3.3rem;
    }
}
/* 行业现状-蓝 */