@import url(main.less);

// PC
@media (min-width:@screen-sm-min) {
    .banner {
        // 940px
        height: 48.9583vw;
        background: url('../images/introduce/introduce_banner.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .text {
            font-size: 4.1667vw;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 6.25vw;
            margin-left: 13.5417vw;
        }
    }

    // 公司简介  居家安全
    .introduce_box {
        padding: 8.3333vw 0 5.2083vw;

        .main_area {
            display: flex;
            align-items: center;

            .img_1 {
                // width: 40.3646vw;
                // height: 26.1458vw;
                width: 32.2916vw;
                height: 20.9166vw;
                margin-right: 2.6042vw;
            }

            .img_2 {
                width: 41.0417vw;
                height: 27.2917vw;
                margin-left: 1.7188vw;
            }

            .article {
                flex: 1;

                p,
                .p span {
                    font-size: 1.25vw;
                    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                    font-weight: 400;
                    color: #666666;
                    line-height: 2.5vw;
                }

                p {
                    margin-bottom: .8333vw;
                }

                .p {
                    span {
                        display: block;
                    }
                }
            }
        }
    }

    // 入口按钮
    .entrance_box {
        padding: 3.6458vw 0 5.2083vw;
        display: flex;
        justify-content: space-between;

        .btn_box {
            width: 35.5208vw;
            height: 35.5208vw;
            box-sizing: border-box;
            background: #F8F9F9;
            border-radius: 1.0417vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .icon {
                height: 8.4896vw;
                margin-bottom: 7.5vw;
            }

            .text {
                font-size: 2.0833vw;
                font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                font-weight: bold;
                color: #333333;
                line-height: 2.9167vw;
            }

            &:nth-of-type(1) .icon {
                width: 7.8646vw;
                background: url("../images/introduce/introduce_icon_1.png") no-repeat;
                background-size: 100% 100%;
            }

            &:nth-of-type(2) .icon {
                width: 9.1667vw;
                background: url("../images/introduce/introduce_icon_2.png") no-repeat;
                background-size: 100% 100%;
            }

            &:hover {
                background: none;
                border: .1563vw solid #FF7E3E;

                .text {
                    color: #FF7E3E;
                }

                &:nth-of-type(1) .icon {
                    width: 7.8646vw;
                    background: url("../images/introduce/introduce_icon_1_active.png") no-repeat;
                    background-size: 100% 100%;
                }

                &:nth-of-type(2) .icon {
                    width: 9.1667vw;
                    background: url("../images/introduce/introduce_icon_2_active.png") no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
    }

    // 解放子女 幸福老人
    .bottom_box {
        height: 29.9479vw;
        background: url("../images/introduce/introduce_img_3.png") no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.125vw;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 3.125vw;
    }
}

// H5
@media (max-width:@screen-xs-max) {
    .banner {
        // 940px
        height: 105.6vw;
        background: url('../images/introduce/h5/introduce_banner.png') no-repeat;
        background-size: 100% 100%;
        width: 100%;
        overflow: hidden;

        .text {
            font-size: 6.4vw;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #333333;
            line-height: 9.6vw;
            position: relative;
            top: 25.3333vw;
            left: 4.2667vw;
        }
    }

    // 公司简介
    .introduce_box {
        padding: 9.6vw 0;

        .title_text {
            text-align: center;
            font-size: 5.3333vw;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #333333;
            line-height: 8vw;
            margin-bottom: 4vw;
        }

        .main_area {
            display: flex;
            flex-direction: column-reverse;

            .article {
                margin-bottom: 6.4vw;

                p,
                .p span {
                    font-size: 4.2667vw;
                    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                    font-weight: 400;
                    color: #666666;
                    line-height: 6.4vw;
                    margin-bottom: 2.1333vw;
                }

                .p span {
                    display: block;
                    margin-bottom: 0;
                }
            }

            .img_1 {
                width: 91.7333vw;
                height: 59.4667vw;
            }

            .img_2 {
                width: 91.7333vw;
                height: 61.0667vw;
            }
        }
    }

    .introduce_box_h5 {
        .main_area {
            flex-direction: column;
        }
    }

    // 入口按钮
    .entrance_box {
        padding: 9.6vw 0;
        display: flex;
        justify-content: space-between;

        .btn_box {
            width: 44.5333vw;
            height: 44.5333vw;
            box-sizing: border-box;
            background: #F8F9F9;
            border-radius: 2.6667vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .icon {
                height: 10.6667vw;
                margin-bottom: 6.1333vw;
            }

            .text {
                font-size: 3.2vw;
                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                font-weight: 500;
                color: #333333;
                line-height: 4.8vw;
            }

            &:nth-of-type(1) .icon {
                width: 9.8667vw;
                background: url("../images/introduce/h5/introduce_icon_1.png") no-repeat;
                background-size: 100% 100%;
            }

            &:nth-of-type(2) .icon {
                width: 11.7333vw;
                background: url("../images/introduce/h5/introduce_icon_2.png") no-repeat;
                background-size: 100% 100%;
            }

            &:active {
                background: none;
                border: .2667vw solid #FF7C00;

                .text {
                    color: #FF7C00;
                }

                &:nth-of-type(1) .icon {
                    width: 9.8667vw;
                    background: url("../images/introduce/h5/introduce_icon_1_active.png") no-repeat;
                    background-size: 100% 100%;
                }

                &:nth-of-type(2) .icon {
                    width: 11.7333vw;
                    background: url("../images/introduce/h5/introduce_icon_2_active.png") no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
    }
}