.con1 {
    background-color: #f7fffd
}

    .con1 .leftBox h3 {
        font-weight: 400;
        font-size: 4rem;
        line-height: 5.0833rem;
        margin-top: 10.8333rem;
        margin-bottom: 1.5rem
    }

    .con1 .leftBox p {
        font-weight: 400;
        font-size: 1.6667rem;
        line-height: 2.0833rem;
        color: #666
    }

    .con1 .leftBox .btn {
        width: 8.8433rem;
        height: 4rem;
        background: #fff;
        border-radius: .5rem;
        border: 1px solid #28bca0;
        color: #28bca0;
        font-size: 1.3333rem;
        text-align: center;
        line-height: 4rem;
        margin-top: 1rem;
        cursor: pointer;
      
    }
    .con1 .leftBox .btn:hover {
 
        background: #28bca0;
        color: #fff;
   
    }
    .con1 .rightBox img {
        width: 63.3333rem;
        height: 43.3333rem
    }

.title {
    text-align: center;
    font-size: 2.8333rem;
    margin-bottom: 5.8333rem;
    color: #333
}

    .title p {
        display: inline;
        padding-bottom: 1rem;
        border-bottom: .3333rem solid #28bca0
    }

.con2 {
    padding-top: 5.8333rem;
    padding-bottom: 4.1667rem
}

    .con2 .flexBox {
        padding: 0 4.1667rem
    }

        .con2 .flexBox .item {
            width: 20.4167rem;
            position: relative
        }

            .con2 .flexBox .item .head {
                font-size: 1.6667rem;
                color: #333;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                margin-bottom: .9167rem
            }

                .con2 .flexBox .item .head img {
                    width: 2.6667rem;
                    height: 2.6667rem;
                    margin-right: .3333rem
                }

            .con2 .flexBox .item span {
                font-size: 1.1667rem;
                line-height: 2rem;
                color: #777;
                display: block
            }

            .con2 .flexBox .item .line {
                position: absolute;
                width: 28.75rem;
                height: 4.5333rem
            }

            .con2 .flexBox .item .line1 {
                top: 3rem;
                left: 0
            }

            .con2 .flexBox .item .line2 {
                left: -7.5833rem;
                top: 3rem
            }

            .con2 .flexBox .item .line3 {
                top: -1.25rem;
                left: 0
            }

            .con2 .flexBox .item .line4 {
                top: -1.25rem;
                left: -7.5833rem
            }

        .con2 .flexBox .imgBox {
            width: 26rem;
            height: 21.9167rem;
            margin-top: 5rem
        }

        .con2 .flexBox > .rightBox {
            height: 35rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column
        }

        .con2 .flexBox .content {
            width: 60rem;
            height: 35rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse
        }

            .con2 .flexBox .content .leftBox {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                height: 100%
            }

.con3 {
    background: #f8faff;
    padding-top: 5rem;
    padding-bottom: 5rem
}

    .con3 .flexBox {
        padding: 0 1.6667rem;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

        .con3 .flexBox > .leftBox {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

            .con3 .flexBox > .leftBox .img {
                width: 19.1667rem;
                height: 15rem
            }

            .con3 .flexBox > .leftBox .line {
                width: 3.6667rem;
                height: 28.5rem;
                margin: 0 2rem 0 2.0833rem
            }

        .con3 .flexBox > .rightBox {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

            .con3 .flexBox > .rightBox .img {
                width: 15rem;
                height: 13.5rem
            }

            .con3 .flexBox > .rightBox .line {
                width: 3.6667rem;
                height: 28.5rem;
                margin: 0 2rem 0 2.0833rem;
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg)
            }

        .con3 .flexBox .item {
            width: 21.6667rem;
            height: 10.3333rem;
            border-radius: .3333rem;
            margin-bottom: 3.6667rem;
            background-color: #fff;
            -webkit-box-shadow: 0px 8.12264px 20.8868px 10.4434px rgba(72,191,132,.05);
            box-shadow: 0px 8.12264px 20.8868px 10.4434px rgba(72,191,132,.05)
        }

            .con3 .flexBox .item:last-child {
                margin-bottom: 0
            }

            .con3 .flexBox .item > span {
                display: block;
                color: #777;
                font-size: 1.1667rem;
                line-height: 2rem;
                padding: .5rem 1.3333rem
            }

            .con3 .flexBox .item .head {
                height: 4rem;
                line-height: 4rem;
                background-color: #e8f9f5;
                color: #333;
                font-size: 1.3333rem;
                position: relative
            }

                .con3 .flexBox .item .head span {
                    display: block;
                    padding-left: 2.0833rem
                }

                    .con3 .flexBox .item .head span::after {
                        display: block;
                        content: "";
                        position: absolute;
                        left: 1.3333rem;
                        top: calc(50% - .6667rem);
                        width: .1667rem;
                        height: 1.3333rem;
                        background-color: #28bca0
                    }

.con4 {
    padding-top: 6.6667rem;
    padding-bottom: 6.6667rem
}

    .con4 .list {
        display: inline-block;
        background: #e8f9f5;
        padding: 2rem 1.4rem
    }

        .con4 .list .item {
            width: 19rem;
            height: 11.4167rem;
            background-color: #fff;
            border-radius: .3333rem;
            margin-bottom: 2.25rem;
            padding: 1.3333rem;
            -webkit-box-shadow: 0px 2px 25px rgba(72,191,132,.1);
            box-shadow: 0px 2px 25px rgba(72,191,132,.1);
            border-bottom: .6667rem solid #28bca0
        }

            .con4 .list .item p {
                color: #333;
                font-size: 1.6667rem;
                margin-bottom: .6667rem
            }

            .con4 .list .item span {
                color: #777;
                font-size: 1.1667rem;
                line-height: 1.2;
                display: block
            }

            .con4 .list .item:last-child {
                margin-bottom: 0
            }

    .con4 .line {
        width: 10.8333rem;
        height: 37.1667rem;
        margin-left: 2rem;
        margin-right: 1.1667rem
    }

    .con4 .imgBox {
        position: relative
    }

        .con4 .imgBox h3 {
            position: absolute;
            width: 41.4167rem;
            height: 5.3333rem;
            line-height: 5.3333rem;
            text-align: center;
            font-size: 1.6667rem;
            background-color: #e8f9f5;
            top: -13.5833rem;
            left: -6.6667rem;
            font-weight: 400
        }

    .con4 .rightBox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .con4 .rightBox .img {
            width: 27.9167rem;
            height: 28.5rem
        }

        .con4 .rightBox .line {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
            margin-right: 2rem;
            margin-left: 1.1667rem
        }

    .con4 .leftBox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

.con5 {
    padding: 6.6667rem 0;
    background: #f8faff
}

    .con5 .wap {
        width: 16.9167rem;
        height: 31.5833rem
    }

    .con5 .pc {
        width: 57.6667rem;
        height: 29rem;
        margin-right: 3.8333rem;
        position: relative;
        top: -1.75rem
    }

@media(max-width: 1440px) {
    .con4 .rightBox .img {
        width: 25.9167rem;
        height: 26.5rem
    }

    .con4 .list .item {
        width: 20rem
    }
}

@media(max-width: 1280px) {
    .con3 .flexBox .item {
        height: 12.3333rem
    }

    .con2 .flexBox .content {
        width: 65rem
    }

    .con4 .list .item {
        width: 23rem;
        height: 13.4167rem
    }

    .con4 .rightBox .img {
        margin-right: 1.8rem
    }

    .con4 .imgBox h3 {
        left: -8rem
    }

    .con5 .pc {
        margin-right: 7.8333rem
    }
}

@media(max-width: 1024px) {
    .con2 .flexBox .content {
        width: 64rem
    }

    .con2 .flexBox .item {
        width: 23.4167rem
    }

    .con3 .flexBox .item {
        width: 24.6667rem;
        height: 13.3333rem
    }

    .con4 .list {
        padding: 1rem
    }

    .con4 .imgBox h3 {
        left: -7.6667rem
    }

    .con4 .list .item {
        width: 25rem;
        height: 16.4167rem
    }

    .con5 .pc {
        margin-right: 8rem
    }
}

@media(max-width: 850px) {
    .con1 {
        padding-bottom: 1px
    }

        .con1 .rightBox img {
            width: 100%;
            height: 21.8667rem
        }

        .con1 .leftBox {
            text-align: center
        }

            .con1 .leftBox h3 {
                margin-top: 0;
                margin-bottom: 0;
                font-size: 2.1667rem
            }

            .con1 .leftBox p {
                font-size: 1.3333rem
            }

            .con1 .leftBox .btn {
                width: 9rem;
                height: 3.3333rem;
                line-height: 3.3333rem;
                margin: 2.5rem auto
            }

    .title {
        margin-bottom: 2.8333rem;
        font-size: 2rem
    }

    .con2 {
        padding-top: 3rem !important;
        padding-bottom: 1.5rem
    }

        .con2 .flexBox {
            padding: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
            -ms-flex-direction: column-reverse;
            flex-direction: column-reverse
        }

            .con2 .flexBox .imgBox {
                width: auto;
                height: 20.8667rem;
                margin: 0 2rem
            }

            .con2 .flexBox .item .head {
                font-size: 1.3333rem
            }

            .con2 .flexBox .item .line {
                display: none
            }

            .con2 .flexBox .content {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: reverse;
                -ms-flex-direction: column-reverse;
                flex-direction: column-reverse;
                width: 100%;
                height: auto
            }

            .con2 .flexBox > .rightBox {
                height: auto
            }

            .con2 .flexBox .item .head {
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center
            }

            .con2 .flexBox .item {
                width: 100%;
                text-align: center;
                margin-bottom: 1.5rem;
                -webkit-transform: translateY();
                transform: translateY()
            }

                .con2 .flexBox .item span {
                    text-align: left;
                    padding: 0 1.5rem
                }

    .con3 {
        padding-top: 3rem;
        padding-bottom: 2rem
    }

        .con3 .flexBox {
            display: block;
            padding: 0
        }

            .con3 .flexBox > .leftBox {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: reverse;
                -ms-flex-direction: column-reverse;
                flex-direction: column-reverse
            }

                .con3 .flexBox > .leftBox .img {
                    width: auto;
                    height: 20.8333rem;
                    margin: 0 2rem;
                    margin-bottom: 1.5rem;
                    margin-top: 2rem
                }

                .con3 .flexBox > .leftBox .line {
                    display: none
                }

            .con3 .flexBox .item {
                width: auto;
                margin: 0 2.5rem 1.5rem;
                height: auto;
                padding-bottom: 1rem
            }

                .con3 .flexBox .item > span {
                    font-size: 1.1667rem
                }

            .con3 .flexBox > .rightBox {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: reverse;
                -ms-flex-direction: column-reverse;
                flex-direction: column-reverse
            }

                .con3 .flexBox > .rightBox .line {
                    display: none
                }

                .con3 .flexBox > .rightBox .img {
                    display: block;
                    width: 90%;
                    height: 23.25rem;
                    margin: 1.5rem 2rem
                }

    .con4 {
        padding: 3rem 1rem !important
    }

        .con4 .imgBox h3 {
            display: none
        }

        .con4 .rightBox {
            display: block
        }

            .con4 .rightBox .line {
                display: none
            }

        .con4 .line {
            display: none
        }

        .con4 .list .item p {
            font-size: 1.3333rem
        }

        .con4 .list .item {
            width: 100%;
            height: auto
        }

        .con4 .rightBox .img {
            width: calc(100% - 4rem);
            display: block;
            margin: 0 2rem 2rem;
            margin-right: 2rem;
            height: 24.9167rem
        }

    .con5 {
        padding: 1.5rem 0;
        text-align: center
    }

        .con5 .pc {
            width: 100%;
            height: 14.6667rem;
            margin-right: 0
        }

        .con5 .wap {
            width: 50%;
            height: 26rem;
            margin: 0 auto;
            float: left
        }
}