.box-wrap{
    position: relative;
    margin: 8rem 0 3.5rem;
    width: 100%;
    height: 76rem;
    background: #fff;
    border-radius: 0.8rem;
}
.blue-box{
    position: absolute;
    left: 20%;
    top: -3rem;
    width: 40%;
    height: 82rem;
    background: #3B7CFF url(../img/cloud_img_bg1.png) no-repeat right bottom;
    background-size: 26rem 36rem;
    box-shadow: 0px 0.4rem 0.8rem 0.2rem rgba(59,124,255,0.21);
    border-radius: 0.8rem;
}
.list-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.list-box .left-placeholder{
    width: 20%;
}
.list-box .left-bar{
    width: 20%;
    padding: 0 4rem;
}
.list-box .left-bar .text{
    width: 100%;
    height: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    font-size: 2.4rem;
    font-weight: 500;
}
.list-box .center-bar{
    width: calc(40% - 2.7rem);
    padding: 0 1.3rem 0 4rem;
}
.center-bar .text{
    padding: 2.7rem 0;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    color: #FFFFFF;
    font-size: 1.6rem;
    line-height: 2.2rem;
}
.center-bar h3{
    padding: 2rem 0 1.6rem;
    color: #FFFFFF;
    text-indent: 1.3rem;
    line-height: 4.2rem;
    text-align: center;
}
.list-box .placeholder{
    width: 5.4rem;
}
.list-box .vs-icons{
    width: 5.4rem;
    height: 5.4rem;
    background: linear-gradient(178deg, #E9F2FF 0%, #FFFFFF 100%);
    box-shadow: 0px 0.2rem 0.8rem 0.2rem rgba(224,232,244,0.4);
    border: 0.2rem solid #FFFFFF;
    border-radius: 100%;
    font-size: 1.8rem;
    font-weight: 500;
    color: #3B7CFF;
    line-height: 5.2rem;
    text-align: center;
}
.list-box .right-bar{
    padding: 0 4rem 0 1.3rem;
    width: calc(40% - 2.7rem);
}
.right-bar .text{
    padding: 2.7rem 0;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    font-size: 1.6rem;
    line-height: 2.2rem;
}
.right-bar h3{
    padding: 2rem 0 1.6rem;
    text-align: center;
    line-height: 42px;
}
.card img{
    max-width: 100%;
}
.card1{
    padding: 4rem;
}
.card2{
    padding: 2.7rem 3.5rem 2.8rem 5.1rem;
}
.detail{
    padding: 3.7rem 0 4rem;
}
.arrow-wrap{
    height: 12rem;
}
.arrow{
    width: 5rem;
    padding: 2.2rem 0 3.7rem;
    margin: 0 auto;
}
.down,.up{
    position: relative;
    width: 1px;
    height: 8.8rem;
    background: #3B7CFF;
}
.down::after{
    content: '';
    position: absolute;
    bottom: -0.1rem;
    left: 0;
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 0;
    border-top: 0.7rem solid #3B7CFF;
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
}
.up::after{
    content: '';
    position: absolute;
    top: -0.1rem;
    left: 0;
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 0;
    border-bottom: 0.7rem solid #3B7CFF;
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
}
.card3{
    padding: 4rem 2.4rem 4.2rem;
}
.card3 img{
    display: block;
    width: 6.4rem;
    height: 6.4rem;
    margin: 0 auto;
}
.card3 h5{
    margin: 2rem 0;
}

/* 中等屏幕（小于等于 11179px） */
@media (max-width: 1179px) { 
    .app-img{
        max-width: 52rem;
    }
    .intro-wrap {
        padding: 0 2.2rem 0 3rem;
    }
    .img2{
        max-width: 50rem;
    }
    .box-wrap{
        height: 88rem;
    }
    .blue-box{
        height: 94rem;
    }
}

/* 移动端（平板，小于等于 991px） */
@media (max-width: 991px) { 
    .card{
        flex: auto;
    }
    .card1,.card2{
        padding: 2rem;
    }
    .box-wrap{
        height: 72rem;
    }
    .list-box1{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .list-box1 .center-bar,.list-box1 .right-bar{
        padding: 0 2rem;
    }
    .list-box1 .center-bar .text, .list-box1 .right-bar .text{
        padding: 2rem 0;
        font-size: 1.4rem;
        line-height: 2.2rem;
    }
    .list-box1 .center-bar h3, .list-box1 .right-bar h3{
        text-indent: 0;
        line-height: 3.6rem;
    }
    .blue-box{
        position: absolute;
        left: 0;
        top: -1.5rem;
        width: 50%;
        height: 75rem;
        background: #3B7CFF url(../img/cloud_img_bg1.png) no-repeat right bottom;
        background-size: 26rem 36rem;
        box-shadow: 0px 0.4rem 0.8rem 0.2rem rgba(59,124,255,0.21);
        border-radius: 0.8rem;
    }
    .list-item1{
        position: relative;
    }
    .list-box1 .placeholder{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .list-box1 .vs-icons{
        width: 2.4rem;
        height: 2.4rem;
        background: linear-gradient(178deg, #E9F2FF 0%, #FFFFFF 100%);
        box-shadow: 0px 0.2rem 0.8rem 0.2rem rgba(224,232,244,0.4);
        border: 0.1rem solid #FFFFFF;
        border-radius: 100%;
        font-size: 1.2rem;
        font-weight: 500;
        color: #3B7CFF;
        line-height: 2.4rem;
        text-align: center;
    }
}


/* 移动端（小于等于 767px） */
@media (max-width: 767px) {
    .list-box1 .center-bar,.list-box1 .right-bar{
        padding: 0 1.5rem;
    }
    .list-box1 .center-bar .text, .list-box1 .right-bar .text{
        padding: 1rem 0;
    }
    .blue-box{
        height: 85rem;
    }
    .box-wrap{
        height: 82rem;
    }
}