
* {
    margin: 0;
    padding: 0
}
html,
body {
    width: 100%;
    height: 100%;
    /* background-image: url('../image/bg.jpg'); */
    /* background-size:cover;
    background-position: center;
    background-attachment:fixed;
    background-repeat: no-repeat; */
    /* overflow: hidden; */
    overflow-y: auto;
    overflow-x: hidden;

    font-family: '微软雅黑';
    font-weight: bold;
    background: white;
}
.bgc-fff {
    background-color: #fff
}

.warpper {
    max-width: 1200px;
    margin: 0 auto
}

.banner {
    width: 100%;
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    transition: all .5s linear
}

.banner img {
    width: 100%;
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

.banner .introduce {
    width: 100vw;
    text-align: center
}

.banner .introduce .title {
    font-size: 42px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    padding: 156px 30px 48px
}

.banner .introduce.mb {
    position: absolute;
    top: 0
}

.banner .introduce.mb .title {
    font-size: 20px
}

.header_title {
    text-align: center
}

.header_title header.title {
    font-weight: 600;
    color: #222
}

.header_title div {
    color: #555
}

.section .title_content {
    display: flex;
    align-items: center
}

.section .title_content .title_icon {
    vertical-align: middle;
    height: 14px;
    min-width: 14px;
    background-color: #24aea0;
    margin-right: 18px
}

.section .title_content span {
    vertical-align: middle;
    font-weight: 600
}

.third_content .set {
    padding-left: 18px
}

.third_content .des {
    display: flex;
    align-items: center
}

.third_content .index_dot {
    display: inline-block;
    min-width: 24px;
    height: 24px;
    background: #333856;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    line-height: 24px;
}
@media screen and (min-width: 501px) {
    .banner{
        margin-bottom:80px;
        /* overflow: hidden; */
        background-image: url(../image/banner/解决方案.png);
        background-size: cover
    }

    .banner img{
        width: 100%
    }

    .header_title header.title{
        font-size: 32px
    }

    .header_title div{
        font-size: 16px;
        margin-top: 24px
    }

    .section{
        padding: 0 24px
    }

    .section .title_content{
        margin-top: 90px
    }

    .section .title_content span{
        font-size: 26px
    }

    .section .section_content .content_item .bgc-index{
        font-size: 64px
    }

    .section_content{
        display: block;
        /* display: flex; */
        margin-top: 5vw;
    }

    .section_content .content_item{
        position: relative;
        z-index: 0;
        flex: 1;
        margin: 2px
    }

    .section_content .content_item .bgc-index .svg-icon{
        position: absolute;
        z-index: -1;
        top: -30px;
        left: 0;
        font-weight: 700;
        text-align: center;
        color: #e1e7ff
    }

    .section_content .content_item .title{
        font-size: 24px;
        font-weight: 500;
        color: #222
    }

    .section_content .content_item .content{
        color: #555;
        line-height: 24px;
        padding: 12px 0px;
    }

    .second_content{
        position: relative;
        color: #fff;
        background-color: #24aea0;
        min-height: 312px;
        margin-top: 60px;
        padding-bottom: 36px
    }

    .second_content .des{
        width: 35.4%;
        padding: 49px 0 0 64px;
        line-height: 1.7;
        font-size: 16px;
    }

    .second_content img{
        width: 50.4%;
        height: 100%;
        position: absolute;
        top: 44px;
        right: 7%
    }

    .third_content{
        min-height: 255px;
        display: flex;
        margin-top: 60px;
        padding-bottom: 80px
    }

    .third_content .des{
        text-align: left;
        margin: 40px 0 78px 56px
    }

    .third_content .des[data-v-fc74b9f8]:last-of-type {
        margin-bottom: 0
    }

    .third_content img{
        align-self: center;
        width: 50.4%;
        height: 100%
    }
}

@media screen and (max-width: 500px) {

    .banner{
        margin-bottom:42px;
        background-image: url(../image/banner/解决方案.png);
        background-size: cover
    }

    .header_title header.title{
        font-size: 3.5vw;
        margin-top: 4vw;
        padding: 7vw 0 24px;
    }

    .header_title div{
        font-size: 12px;
        margin-top: 18px
    }

    .section{
        padding: 16px
    }

    .section .title_content{
        margin-top: 32px
    }

    .section .title_content span{
        font-size: 20px
    }

    .section .section_content .content_item{
        margin-top: 44px
    }

    .section .section_content .content_item .bgc-index{
        font-size: 56px
    }

    .section_content{
        margin-top: 20px
    }

    .section_content div.content_item{
        height: 70px;
        position: relative;
        z-index: 0
    }

    .section_content div.content_item div.bgc-index .svg-icon{
        position: absolute;
        z-index: -1;
        top: -34px;
        left: 0;
        font-weight: 700;
        text-align: center;
        color: #e1e7ff
    }

    .section_content div.content_item div.title{
        font-weight: 500;
        font-size: 16px;
        color: #222
    }

    .section_content div.content_item div.content{
        font-size: 12px;
        margin-top: 8px;
        color: #555
    }

    .second_content{
        margin-top: 32px;
        white-space: pre-line
    }

    .second_content img{
        margin-top: 24px;
        width: 100%
    }

    .third_content{
        margin-top: 32px;
        margin-bottom: 60px
    }

    .third_content img{
        width: 100%;
        margin-top: 24px
    }

    .third_content .des{
        margin-bottom: 20px
    }
}
.second_content img {
    width: 580px;
    height: 312px;
}

/* 手机端 */
@media (max-device-width: 789px){
    .banner .introduce .title {
        font-size: 5vw !important;
    }
    .second_content img {
        position: relative;
        right: 0px;
        width: 100%;
    }
    .second_content .des {
        width: 100%;
        padding: 0px 10px;
        font-size: 3.5vw;
    }
}
@media (min-device-width: 790px) and (max-device-width: 1180px) {
    .second_content img {
        position: relative;
        right: 0px;
        width: 100%;
    }
    .second_content .des {
        width: 100%;
        padding: 0px 10px;
        font-size: 3.5vw;
    }
    .second_content  {
        min-height: 51vw;
        padding: 0px 10px;
    }

}
