// out: ../css/index.css
.main {
  

    // 腾讯会议随时随地发起高效会议
    .content1 {
        display        : flex;
        flex-wrap      : wrap;
        justify-content: space-between;

        .content1-item {
            width        : 222px;
            height       : 220px;
            background   : #FFFFFF;
            border-radius: 4px 4px 4px 4px;
            padding      : 24px 20px;
            box-sizing   : border-box;
            margin-bottom: 24px;

            >div {
                height       : 72px;
                display      : flex;
                align-items  : center;
                border-bottom: 1px solid #EEEEEE;
                margin-bottom: 16px;

                >img {
                    width       : 32px;
                    height      : 32px;
                    margin-right: 8px;
                }

                >h1 {
                    color      : #262626;
                    font-size  : 16px;
                    line-height: 72px;
                }
            }

            >p {
                font-size  : 14px;
                font-weight: 400;
                color      : #8C8C8C;
                line-height: 22px;
            }

            &:hover {
                box-shadow: 0px 12px 48px 0px rgba(0, 33, 71, 0.05);
            }
        }

    }

    .content2 {
        // height    : 1134px;
        background: linear-gradient(180deg, #EFF5FF 0%, rgba(239, 245, 255, 0) 100%);
        margin-bottom: 120px;
        position: relative;
        >.ll{
            position: absolute;
            left: calc(50% - 600px);
            top: 0px;
            width: 360px;
        }
        >.rr{
            position: absolute;
            top: 0px;
            right: calc(50% - 600px);
            width: 360px;
        }
        .content2-title {
            width          : 1040px;
            height         : 64px;
            background     : #FFFFFF;
            border-radius  : 4px 4px 4px 4px;
            margin         : 0 auto;
            display        : flex;
            align-items    : center;
            justify-content: space-around;
            cursor         : pointer;
            margin-bottom  : 40px;
            >div {
                width        : 250px;
                height       : 48px;
                border-radius: 4px 4px 4px 4px;
                text-align   : center;
                font-size    : 16px;
                color        : #595959;
                line-height  : 48px;
                position: relative;
                >img{
                    position: absolute;
                    width: 31px;
                    object-fit: scale-down;
                    top: -15px;
                    right: 24px;
                }
            }

            >.on {
                color     : #fff;
                background: #045AFE;
            }
        }

        .content2-item {
            display        : flex;
            justify-content: space-between;
            width          : 1040px;
            margin         : 0 auto;
        }

        .card {
            box-shadow: 0px 10px 20px 0px rgba(78, 106, 149, 0.06);
            background: linear-gradient(180deg, #D7E5FF 0%, rgba(215, 229, 255, 0) 100%);
            padding   : 24px;
            box-sizing: border-box;
            border-radius: 4px;
            >.flex-b>img {
                width     : 418px;
                object-fit: scale-down;
            }

            .ti {
                >h1 {
                    font-size    : 24px;
                    font-weight  : 600;
                    color        : #262A47;
                    line-height  : 32px;
                    margin-bottom: 12px;
                }

                >p {
                    font-size    : 14px;
                    font-weight  : 400;
                    color        : #8C8C8C;
                    line-height  : 22px;
                    margin-bottom: 18px;
                }

                >.price {
                    font-size    : 35px;
                    font-weight  : 500;
                    color        : #FF7200;
                    line-height  : 48px;
                    margin-bottom: 24px;
                }

                >.call {
                    display      : flex;
                    align-items  : center;
                    font-size    : 16px;
                    font-weight  : 500;
                    color        : #045AFE;
                    line-height  : 24px;
                    margin-bottom: 36px;

                    >img {
                        width       : 22px;
                        height      : 22px;
                        margin-right: 12px;
                    }
                }

                >.btn {
                    margin-bottom: 32px;

                    >:first-child {
                        width        : 218px;
                        height       : 40px;
                        background   : #045AFE;
                        box-shadow   : 0px 4px 16px 0px rgba(4, 90, 254, 0.16);
                        border-radius: 4px 4px 4px 4px;
                        font-size    : 16px;
                        color        : #FFFFFF;
                        line-height  : 24px;
                        text-align   : center;
                        line-height  : 40px;
                        margin-right : 16px;
                    }

                    >:last-child {
                        width        : 218px;
                        height       : 40px;
                        background   : transparent;
                        border       : 2px solid #045AFE;
                        box-sizing   : border-box;
                        box-shadow   : 0px 4px 16px 0px rgba(4, 90, 254, 0.16);
                        border-radius: 4px 4px 4px 4px;
                        font-size    : 16px;
                        color        : #045AFE;
                        text-align   : center;
                        line-height  : 36px;
                    }
                }

            }

            >h2 {
                font-size    : 16px;
                font-weight  : 600;
                color        : #262626;
                line-height  : 24px;
                margin-bottom: 16px;
            }

            >.tag {
                display      : flex;
                align-items  : center;
                margin-bottom: 16px;

                >.success {
                    width       : 18px;
                    height      : 18px;
                    margin-right: 8px;
                }

                p {
                    font-size: 14px;
                    color    : #262626;
                }

                >.icon {
                    width      : 12px;
                    height     : 12px;
                    margin-left: 8px;
                    display: flex;
                    align-items: center;
                    position: relative;
                    >img{
                        width: 100%;
                    }
                    >.tips{
                        border-radius: 5px;
                        padding: 12px;
                        min-width: 200px;
                        line-height: 20px;
                        background: #000;
                        position: absolute;
                        left: 12px;
                        top: 0;
                        color: #fff;
                    }
                }
            }

        }
    }

    .content3 {
        background     : url('../img/index/bk.png') no-repeat;
        height         : 947px;
        background-size: cover;
        padding-top    : 120px;
        box-sizing     : border-box;
        >.title-white{
            font-size: 32px;
            font-weight: 600;
            color: #fff;
            text-align: center;
            margin-bottom: 50px;
        }
        >:nth-child(2) {
            background   : #fff;
            margin-bottom: 24px;
            border-radius: 16px 16px 16px 16px;
            padding      : 24px;
            box-sizing   : border-box;

            >div {
                width        : 227px;
                height       : 226px;
                background   : #F8FAFF;
                border-radius: 14px 14px 14px 14px;
                font-size    : 16px;
                color        : #262626;
                text-align   : center;
                margin-left  : 24px;
                padding      : 33px;
                box-sizing   : border-box;

                >img {
                    display      : block;
                    width        : 120px;
                    height       : 120px;
                    margin       : 0 auto;
                    margin-bottom: 12px;
                }
            }

            >.content3-ti {
                width      : 400px;
                padding    : 65px 57px;
                box-sizing : border-box;
                margin-left: 0;

                >h1 {
                    font-size  : 24px;
                    font-weight: 600;
                    color      : #262626;
                    text-align : center;
                }

                >p {
                    font-size  : 16px;
                    font-weight: 400;
                    color      : #595959;
                    line-height: 24px;
                    text-align : center;
                }
            }
        }

        >:last-child {
            display        : flex;
            justify-content: space-between;

            >div {
                padding      : 40px 72px;
                box-sizing   : border-box;
                background   : #fff;
                border-radius: 16px 16px 16px 16px;

                >img {
                    width  : 120px;
                    height : 120px;
                    display: block;
                    margin : 0 auto;
                }

                >h1 {
                    font-size  : 24px;
                    color      : #262626;
                    font-weight: 600;
                    margin     : 8px 0 16px 0;
                    text-align : center;
                }

                >p {
                    width      : 240px;
                    font-size  : 16px;
                    font-weight: 400;
                    color      : #595959;
                    line-height: 24px;
                    text-align : center;
                }
            }
        }
    }

    .content4 {
        margin-bottom: 180px;
        .links{
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 500;
            color: #045AFE;
            >img{
                width: 22px;
                object-fit: scale-down;
                margin-left: 4px;
                margin-top: 2px;
            }
        }
        .content4-title {
            width        : 600px;
            margin       : 0 auto;
            margin-bottom: 24px;

            div {
                display       : block;
                font-size     : 16px;
                font-weight   : 400;
                color         : #595959;
                padding-bottom: 11px;
                box-sizing    : border-box;
                cursor        : pointer;
            }

            .on {
                color        : #045AFE;
                border-bottom: 2px solid #045AFE;
            }
        }

        .content4-item {
            height       : 634px;
            border-radius: 16px 16px 16px 16px;
            padding      : 80px;
            box-sizing   : border-box;
            position     : relative;
            display      : flex;
            background   : #F4F7FC;

            >.ti {
                z-index     : 3;
                margin-right: 40px;

                >h1 {
                    font-size    : 30px;
                    font-weight  : 600;
                    color        : #FFFFFF;
                    line-height  : 35px;
                    margin-bottom: 16px;
                }

                >.remark {
                    margin-bottom: 16px;
                    padding-left : 15px;
                    box-sizing   : border-box;

                    >h2 {
                        font-size    : 14px;
                        font-weight  : 600;
                        color        : #FFFFFF;
                        margin-bottom: 2px;
                        position     : relative;

                        &::before {
                            content      : '';
                            position     : absolute;
                            left         : -15px;
                            top          : 5px;
                            width        : 10px;
                            height       : 10px;
                            background   : #FFFFFF;
                            border-radius: 50%;
                        }
                    }

                    >p {
                        width      : 314px;
                        font-size  : 14px;
                        font-weight: 400;
                        color      : #FFFFFF;
                        line-height: 22px;
                    }
                }

                >.btn {
                    display: flex;
                    cursor : pointer;

                    >div {
                        width        : 128px;
                        height       : 40px;
                        border-radius: 4px 4px 4px 4px;
                        border       : 1px solid #FFFFFF;
                        font-size    : 16px;
                        font-weight  : 500;
                        color        : #FFFFFF;
                        line-height  : 40px;
                        text-align   : center;
                    }
                }
            }

            >.card {
                margin-top   : 60px;
                z-index      : 3;
                width        : 670px;
                height       : 354px;
                background   : rgba(255, 255, 255, 0.9);
                box-shadow   : 0px 4px 60px 0px rgba(0, 28, 85, 0.04);
                border-radius: 16px 16px 16px 16px;
                padding      : 40px;
                box-sizing   : border-box;

                >h1 {
                    font-size    : 16px;
                    font-weight  : 600;
                    color        : #262626;
                    position     : relative;
                    margin-bottom: 8px;

                    &::before {
                        content   : '';
                        position  : absolute;
                        left      : -10px;
                        top       : 4px;
                        width     : 4px;
                        height    : 14px;
                        background: #045AFE;

                    }
                }

                >div>div {
                    display: flex;

                    >img {
                        width       : 13px;
                        object-fit  : scale-down;
                        margin-right: 10px;
                    }

                    >p {
                        max-width  : 566px;
                        font-size  : 14px;
                        font-weight: 400;
                        color      : #595959;
                        line-height: 22px;
                    }
                }
            }
        }
    }


    .content5 {
        background     : url(../img/index/trb.png) no-repeat;
        height         : 708px;
        background-size: cover;

        .content5-item {
            >img {
                width        : 180px;
                object-fit   : scale-down;
                margin-bottom: 24px;
            }
        }
    }

    .content6 {
        width  : 100%;
        height : 810px;
        display: flex;

        .l {
            width: 40%;

            >.logo {
                height         : 150px;
                background     : #045AFE;
                display        : flex;
                justify-content: flex-end;
                padding-right  : 100px;

                >img {
                    height    : 150px;
                    object-fit: scale-down;
                }
            }

            >.list {
                padding       : 80px 100px 0 0;
                box-sizing    : border-box;
                height        : 660px;
                background    : #00031F;
                display       : flex;
                flex-direction: column;
                align-items   : flex-end;

                >h1 {
                    font-size    : 32px;
                    font-weight  : 600;
                    color        : #FFFFFF;
                    text-align   : end;
                    margin-bottom: 40px;
                }

                >div {
                    width     : 171px;
                    height    : 280px;
                    text-align: end;

                    >span {
                        cursor       : pointer;
                        display      : inline-block;
                        width        : auto;
                        height       : 46px;
                        border-radius: 30px 30px 30px 30px;
                        border       : 2px solid rgba(255, 255, 255, 0.5);
                        font-size    : 18px;
                        font-weight  : 600;
                        color        : #FFFFFF;
                        line-height  : 46px;
                        text-align   : center;
                        padding      : 0 10px;
                        margin-bottom: 32px;
                    }

                    .on {
                        background: rgba(4, 90, 254, 0.4);
                        border    : 2px solid #045AFE;
                    }
                }
            }

        }

        .r {
            width       : 60%;
            background  : #F5F8FE;
            padding-left: 120px;
            box-sizing  : border-box;

            >img {
                width     : 524px;
                object-fit: scale-down;
            }

            >h1 {
                >img {
                    width       : 42px;
                    object-fit  : scale-down;
                    margin-right: 8px;
                }

                font-size  : 32px;
                font-weight: 600;
                color      : #262626;
            }

            >p {
                width      : 498px;
                font-size  : 20px;
                font-weight: 400;
                color      : #595959;
                line-height: 30px;
                margin     : 16px 0 28px 0;
            }

            .tag {
                >div {
                    margin-bottom: 32px;

                    >img {
                        width       : 32px;
                        object-fit  : scale-down;
                        margin-right: 8px;
                    }

                    font-size   : 16px;
                    font-weight : 500;
                    color       : #595959;
                    margin-right: 40px;

                }
            }

            .btn {
                >:first-child {
                    width        : 128px;
                    height       : 40px;
                    background   : #045AFE;
                    box-shadow   : 0px 4px 16px 0px rgba(4, 90, 254, 0.16);
                    border-radius: 4px 4px 4px 4px;
                    font-size    : 16px;
                    color        : #FFFFFF;
                    line-height  : 24px;
                    text-align   : center;
                    line-height  : 40px;
                    margin-right : 16px;
                }

                >:last-child {
                    width        : 128px;
                    height       : 40px;
                    background   : transparent;
                    border       : 2px solid #045AFE;
                    box-sizing   : border-box;
                    box-shadow   : 0px 4px 16px 0px rgba(4, 90, 254, 0.16);
                    border-radius: 4px 4px 4px 4px;
                    font-size    : 16px;
                    color        : #045AFE;
                    text-align   : center;
                    line-height  : 36px;
                }
            }
        }

    }

   

}