// ------------------------------------------------------------
// ------------------------------------------------------------
// 色块 图标 文案
.infoStyle1 {
    display: flex;
    margin-top: 50px;

    .item {
        position: relative;
        width: 25%;

        &:nth-child(even) {
            .itemCon {
                background: #33B3ED;
            }
        }

        .itemCon {
            position: relative;
            background: var(--unnamed, #00A0E9);

            .boxSizing {
                position: relative;
                padding-top: 134.228%;
            }

            .itemInfo {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                padding-top: 100px;

                .itemimg {
                    width: 120px;
                    height: 120px;
                    display: block;
                    margin: auto;
                }

                .txt {
                    color: var(--w, #FFF);
                    text-align: center;
                    font-size: 20px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: normal;
                    margin-top: 68px;
                }
            }
        }
    }
}
@media (max-width: 1299px) {
    .infoStyle1 {
        .item {
            .itemCon {
                .itemInfo {
                    padding-top: 90px;
                    .txt{
                        margin-top: 60px;
                    }
                }
            }
        }
    }
}

@media (max-width: 1199px) {
    .infoStyle1 {
        .item {
            .itemCon {
                .itemInfo {
                    padding-top: 60px;
                    .txt{
                        margin-top: 40px;
                    }
                }
            }
        }
    }
}
@media (max-width: 991px) {
    .infoStyle1 {
        .item {
            .itemCon {
                .itemInfo {
                    padding-top: 60px;
                    .itemimg{
                        width: 80px;
                        height: 80px;
                    }
                    .txt{
                        margin-top: 30px;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
@media (max-width: 767px) {
    .infoStyle1 {
        margin-top: 20px;
        flex-wrap: wrap;
        margin-left: -6.5px;
        margin-right: -6.5px;
        margin-bottom: -13px;
        .item {
            width: 50%;
            padding-left: 6.5px;
            padding-right: 6.5px;
            margin-bottom: 13px;
            .itemCon {
                .boxSizing{
                    padding-top: 111.764%;
                }
                .itemInfo {
                    padding-top: 26px;
                    .txt{
                        font-size: 15px;
                        margin-top: 16px;
                    }
                }
            }
        }
    }
}
// ------------------------------------------------------------
// ------------------------------------------------------------


// ------------------------------------------------------------
// ------------------------------------------------------------
// 业务板块样式
.infoStyle2 {
    display: flex;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 30px;

    .item {
        width: 33.333%;
        padding-left: 15px;
        padding-right: 15px;

        .itemCon {
            position: relative;
            overflow: hidden;

            .picSizing {
                width: 100%;
                display: block;
            }

            .itemInfo {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;

                .mask {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    opacity: 0.8;
                    background: var(--unnamed, #00A0E9);
                    opacity: 0.1;
                    transition: all 0.3s;
                }

                .infoBox {
                    position: relative;
                    padding: 40px;
                    padding-top: 317px;
                    transition: all 0.3s;

                    .enTitle {
                        color: var(--unnamed, #00A0E9);
                        font-size: 36px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: normal;
                        opacity: 0.2;
                    }

                    .cnTitle {
                        color: var(--unnamed, #00A0E9);
                        font-size: 28px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: normal;
                    }

                    .text {
                        color: var(--w, #FFF);
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: 2.22;
                        margin-top: 30px;
                        opacity: 0;
                        transition: all 0.3s;
                    }
                }
                .dian{
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    right: 20px;
                    bottom: 20px;
                    display: block;
                    transition: all 0.3s;
                }
            }

            &.color2 {
                .itemInfo {
                    .mask {
                        background: var(--gaoyue, #00963E);
                    }

                    .infoBox {
                        .enTitle {
                            color: var(--unnamed, var(--gaoyue, #00963E));
                        }

                        .cnTitle {
                            color: var(--unnamed, var(--gaoyue, #00963E));
                        }
                    }
                }
            }

            &.color3 {
                .itemInfo {
                    .mask {
                        background: var(--c-2, #141E69);
                    }

                    .infoBox {
                        .enTitle {
                            color: var(--c-4, #323333);
                        }

                        .cnTitle {
                            color: var(--c-4, #323333);
                        }
                    }
                }
            }

            &:hover {
                .itemInfo {
                    .mask {
                        opacity: 0.8;
                    }

                    .infoBox {
                        padding-top: 40px;

                        .enTitle {
                            color: var(--w, #FFF);
                        }

                        .cnTitle {
                            color: var(--w, #FFF);
                        }

                        .text {
                            opacity: 1;
                        }
                    }
                    .dian{
                        opacity: 0;
                    }
                }
            }
        }
    }
}


@media (max-width: 1299px) {
    .infoStyle2 {
        .item {
            .itemCon {
                .itemInfo {
                    .infoBox {
                        padding-top: 297px;
                    }
                }
            }
        }
    }
}

@media (max-width: 1199px) {
    .infoStyle2 {
        .item {
            .itemCon {
                .itemInfo {
                    .infoBox {
                        padding-top: 227px;
                    }
                }
            }
        }
    }
}

@media (max-width: 991px) {
    .infoStyle2 {
        .item {
            .itemCon {
                .itemInfo {
                    .infoBox {
                        padding: 20px;
                        padding-top: 157px;

                        .enTitle {
                            font-size: 30px;
                        }

                        .cnTitle {
                            font-size: 22px;
                        }

                        .text {
                            font-size: 13px;
                            margin-top: 15px;
                        }
                    }
                }

                &:hover {
                    .itemInfo {
                        .infoBox {
                            padding-top: 20px;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 767px) {
    .infoStyle2 {
        margin-top: 20px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: -10px;
        flex-wrap: wrap;
        .item {
            width: 100%;
            padding-left: 0;
            padding-right: 0;
            margin-bottom: 10px;
            .itemCon{
                .itemInfo{
                    .infoBox{
                        padding-top: 57%;
                        .enTitle {
                            font-size: 30px;
                        }
                        .cnTitle{
                            font-size: 25px;
                        }
                        .text{
                            font-size: 16px;
                            line-height: 2.25;
                            margin-top: 20px;
                        }
                    }
                }
            }
        }
    }
}
// ------------------------------------------------------------
// ------------------------------------------------------------



// ------------------------------------------------------------
// ------------------------------------------------------------
.infoStyle3{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    .infoBox{
        width: 378px;
        max-width: 378px;
        .text{
            margin-bottom: 20px;
            color: var(--g-3, #515356);
            font-size: 15px;
            font-style: normal;
            font-weight: 300;
            line-height: 1.86667; 
        }
    }
    .picBox{
        position: relative;
        width: 720px;
        margin-right: 34px;
        .pic{
            width: 100%;
            display: block;
        }
    }
}
@media (max-width: 767px) {
    .infoStyle3{
        flex-wrap: wrap;
        margin-top: 20px;
        .infoBox{
            width: 100%;
            max-width: 100%;
            .text{
                margin-bottom: 12px;
                font-size: 14px;
            }
        }
        .picBox{
            width: 100%;
            margin-right: 0;
            margin-top: 20px;
        }
    }
}
// ------------------------------------------------------------
// ------------------------------------------------------------






// ------------------------------------------------------------
// ------------------------------------------------------------
.infoStyle4{
    margin-top: 30px;
    .item{
        display: flex;
        margin-bottom: 30px;
        .pic{
            width: 276px;
            height: 276px;
            display: block;
        }
        .info{
            margin-left: 30px;
            .name{
                color: var(--g-1, #222325);
                font-size: 26px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
            }
            .duties{
                color: var(--Gray-2, #4F4F4F);
                font-size: 15px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
            }
            .honor{
                color: var(--unnamed, #00A0E9);
                font-size: 15px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
                margin-top: 15px;
                margin-bottom: 15px;
            }
            .text{
                color: var(--g-3, #515356);
                font-size: 14px;
                font-style: normal;
                font-weight: 300;
                line-height: 1.71429;
                margin-top: 10px;
            }
        }
    }
}
@media (max-width: 767px) {
    .infoStyle4{
        margin-top: 20px;
        .item{
            margin-bottom: 40px;
            flex-wrap: wrap;
            .pic{
                width: 100%;
                height: auto;
                display: block;
            }
            .info{
                margin-left: 0px;
                margin-top: 20px;
            }
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
}
// ------------------------------------------------------------
// ------------------------------------------------------------





// ------------------------------------------------------------
// ------------------------------------------------------------
.infoStyle5{
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
    display: flex;
    margin-top: 30px;
    .item{
        position: relative;
        width: 25%;
        padding-left: 15px;
        padding-right: 15px;
        .itemCon{
            .num{
                color: var(--g-6, #D1D3D5);
                font-size: 72px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                margin-bottom: 5px;
            }
            .infoBox{
                position: relative;
                .pic{
                    width: 100%;
                    display: block;
                }
                .info{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top: 0;
                    background: linear-gradient(180deg, rgba(102, 218, 255, 0.90) 0%, #019BF2 100%);
                    padding-top: 140px;
                    .itemimg{
                        position: absolute;
                        top: 30%;
                        left: 50%;
                        margin-left: -60px;
                        width: 120px;
                        display: block;
                    }
                    .text{
                        position: absolute;
                        width: 100%;
                        color: var(--w, #FFF);
                        text-align: center;
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: normal;
                        bottom: 10%;
                    }
                    &.color2{
                        background: linear-gradient(180deg, rgba(42, 201, 108, 0.90) 0%, #00963E 100%);
                    }
                    &.color3{
                        background: linear-gradient(180deg, rgba(84, 97, 201, 0.90) 0%, #36429B 100%);
                    }
                    &.color4{
                        background: linear-gradient(180deg, rgba(107, 202, 255, 0.90) 0%, #338ABB 100%);
                    }
                }
            }
        }
    }
}
@media (max-width: 1199px) {
    .infoStyle5{
        .item{
            .itemCon{
                .num{
                    font-size: 52px;
                }
                .infoBox{
                    .info{
                        padding-top: 90px;
                        .itemimg{
                            width: 100px;
                            margin-left: -50px;
                        }
                        .text{
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 991px) {
    .infoStyle5{
        .item{
            .itemCon{
                .num{
                    font-size: 52px;
                }
                .infoBox{
                    .info{
                        padding-top: 60px;
                        .itemimg{
                            width: 80px;
                            margin-left: -40px;
                        }
                        .text{
                            font-size: 13px;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 767px) {
    .infoStyle5{
        flex-wrap: wrap;
        margin-left: -7.5px;
        margin-right: -7.5px;
        margin-top: 20px;
        margin-bottom: -30px;
        .item{
            width: 50%;
            padding-left: 7.5px;
            padding-right: 7.5px;
            margin-bottom: 30px;
            .itemCon{
                .num{
                    font-size: 52px;
                    margin-bottom: 0;
                }
                .infoBox{
                    .info{
                        padding-top: 40px;
                        .itemimg{
                            width: 80px;
                            top: 25%;
                        }
                        .text{
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 375px) {
    .infoStyle5{
        .item{
            .itemCon{
                .infoBox{
                    .info{
                        .text{
                            font-size: 13px;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 360px) {
    .infoStyle5{
        .item{
            .itemCon{
                .infoBox{
                    .info{
                        .text{
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
}
// ------------------------------------------------------------
// ------------------------------------------------------------







// ------------------------------------------------------------
// ------------------------------------------------------------
.infoStyle6{
    margin-top: 30px;
    .infoBox{
        display: flex;
        align-items: center;
        .pic{
            width: 64.321%;
            display: block;
        }
        .list{
            width: 376px;
            margin-left: 30px;
            .cell{
                display: flex;
                align-items: center;
                padding: 11px;
                border-radius: 8px;
                background: var(--g-7, #EAECEE);
                margin-bottom: 10px;
                &:last-child{
                    margin-bottom: 0;
                }
                .num{
                    position: relative;
                    width: 28px;
                    height: 28px;
                    border-radius: 33px;
                    background: var(--g-2, #333436);
                    color: var(--w, #FFF);
                    text-align: center;
                    font-size: 15px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 1.60;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .text{
                    margin-left: 13px;
                    color: var(--g-2, #333436);
                    font-size: 17px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 1.41176;
                }
            }
        }
    }
    .tipText{
        color: #585858;
        text-align: center;
        font-family: PingFang SC;
        font-size: 12px;
        font-style: normal;
        font-weight: 300;
        line-height: 2;
        margin-top: 30px;
    }
}
@media (max-width: 767px) {
    .infoStyle6{
        margin-top: 20px;
        .infoBox{
            flex-wrap: wrap;
            .pic{
                width: 100%;
            }
            .list{
                width: 100%;
                margin-left: 0;
                margin-top: 20px;
            }
        }
    }
}
// ------------------------------------------------------------
// ------------------------------------------------------------











// ------------------------------------------------------------
// ------------------------------------------------------------
.infoStyle7{
    margin-top: 30px;
    .pic{
        width: 100%;
        display: block;
        margin-bottom: 30px;
    }
    .list{
        position: relative;
        margin-left: -15px;
        margin-right: -15px;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: -30px;
        .item{
            position: relative;
            width: 25%;
            padding-left: 15px;
            padding-right: 15px;
            margin-bottom: 30px;
            .itemCon{
                .itemimg{
                    width: 80px;
                    display: block;
                    margin: auto;
                }
                .title{
                    color: var(--g-2, #333436);
                    text-align: center;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 1.33333;
                    margin-top: 10px;
                }
                .text{
                    color: var(--g-3, #515356);
                    text-align: center;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 300;
                    line-height: 1.71429;
                    margin-top: 6px;
                }
            }
        }
    }
}
@media (max-width: 767px) {
    .infoStyle7{
        margin-top: 20px;
        .pic{
            margin-bottom: 20px;
        }
        .list{
            margin-left: 0;
            margin-right: 0;
            margin-bottom: -20px;
            .item{
                padding-left: 0;
                padding-right: 0;
                width: 50%;
                margin-bottom: 20px;
                .itemCon{
                    .itemimg{
                        width: 66px;
                    }
                    .title{
                        font-size: 16px;
                    }
                    .text{
                        margin-top: 5px;
                        font-size: 12px;
                        line-height: 1.69917;
                    }
                }
            }
        }
    }
}
// ------------------------------------------------------------
// ------------------------------------------------------------







// ------------------------------------------------------------
// ------------------------------------------------------------
.infoStyle8{
    margin-top: 30px;
    .swiper-container {
        width: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width: 60%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-slide{
        width: 1020px;
        opacity: 0.5;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 18px;
    }
    .swiper-slide-active{
        opacity: 1;
    }
    .swiper-pagination{
        line-height: 3px;
        bottom: 0;

        .swiper-pagination-bullet{
            width: 12px;
            height: 3px;
            border-radius: 3px;
            margin: 0 4px;
            background: #D1D3D5;
        }
        .swiper-pagination-bullet-active{
            background: #00A0E9;
        }
    }
    .swiper-button-prev{
        width: 60px;
        height: 60px;
        background: url(../images/arrow-left.png) no-repeat;
        background-size: 100%;
        left: 33px;
        opacity: 0.4;
        margin-top: -30px;
        &:hover{
            opacity: 1;
        }
    }
    .swiper-button-next{
        width: 60px;
        height: 60px;
        background: url(../images/arrow-right.png) no-repeat;
        background-size: 100%;
        right: 33px;
        opacity: 0.4;
        margin-top: -30px;
        &:hover{
            opacity: 1;
        }
    }
    .item{
        width: 100%;
        .pic{
            width: 100%;
            display: block;
        }
        .text{
            color: var(--g-1, #222325);
            text-align: center;
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            margin-top: 15px;
        }
    }
}

@media (max-width: 1199px) {
    .infoStyle8{
        .swiper-slide{
            width: 800px;
        }
    }
}
@media (max-width: 991px) {
    .infoStyle8{
        .swiper-slide{
            width: 600px;
        }
    }
}
@media (max-width: 767px) {
    .infoStyle8{
        margin-top: 20px;
        .swiper-slide{
            width: 359px;
            padding-left: 3px;
            padding-right: 3px;
            padding-bottom: 13px;
        }
        .item{
            .text{
                font-size: 16px;
                margin-top: 10px;
            }
        }
    }
}
// ------------------------------------------------------------
// ------------------------------------------------------------





// ------------------------------------------------------------
// ------------------------------------------------------------
.infoStyle9{
    position: relative;
    margin-top: 30px;
    .map{
        width: 100%;
        display: block;
    }
    .baiduMapBox{
        position: relative;
        width: 100%;
        .boxSizing{
            padding-top: 50%;
        }
        .baiduMap{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
    }
    .box{
        position: absolute;
        right: 50px;
        bottom: -36px;
        display: flex;
        align-items: center;
        padding: 13px;
        width: 366px;
        border-radius: 100px;
        background: var(--unnamed, #00A0E9);
        .itemimg{
            width: 46px;
            height: 46px;
            display: block;
        }
        .text{
            color: var(--w, #FFF);
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.42857;
            margin-left: 8px;
        }
    }
}
@media (max-width: 767px) {
    .infoStyle9{
        .baiduMapBox{
            .boxSizing{
                padding-top: 113%;
            }
        }
        .box{
            width: 273px;
            left: 50%;
            right: auto;
            margin-left: -136px;
            padding: 9px;
            bottom: -32px;
            z-index: 10;
            .itemimg{
                width: 46px;
            }
            .text{
                font-size: 14px;
                line-height: 1.42857;
            }
        }
    }
}
// ------------------------------------------------------------
// ------------------------------------------------------------






// ------------------------------------------------------------
// ------------------------------------------------------------
.infoStyle10{
    position: relative;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: -30px;
    .item{
        width: 25%;
        padding-left: 15px;
        padding-right: 15px;
        margin-bottom: 30px;
        .itemCon{
            background: var(--w, #FFF);
            box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.08);
            .logo{
                width: 100%;
                display: block;
            }
        }
    }
}
@media (max-width: 767px) {
    .infoStyle10{
        margin-left: -8.5px;
        margin-right: -8.5px;
        margin-top: 20px;
        margin-bottom: -17px;
        .item{
            width: 50%;
            padding-left: 8.5px;
            padding-right: 8.5px;
            margin-bottom: 17px;
        }
    }
}