@import url(main.less);

// PC
@media (min-width:@screen-sm-min){
    .banner{
        // 940px
        height: 48.9583vw;

        .swiper {
            width: 100%;
            height: 100%;

            .one{
                background: url("../images/robot/robot_banner_bg_1.png") no-repeat;
                background-size: 100% 100%;

                .main_area{
                    height: 100%;
                    position: relative;

                    .left{
                        position: absolute;
                        top: 19.2708vw;
                        right: 30.2083vw;

                        .t{
                            font-size: 4.6875vw;
                            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                            font-weight: 500;
                            color: #333333;
                            line-height: 7.0313vw;
                            margin-bottom: 2.1875vw;
                        }

                        .p{
                            text-align: right;
                            font-size: 3.125vw;
                            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                            font-weight: 400;
                            color: #424242;
                            line-height: 4.6875vw;
                        }
                    }

                    .right{
                        width: 37.6042vw;
                        height: 41.4583vw;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                    }
                }
            }

            .two{
                background: url("../images/robot/robot_banner_bg_2.png") no-repeat;
                background-size: 100% 100%;

                .main_flex{
                    height: 100%;
                    flex-direction: column;
                    justify-content: flex-end;

                    .text{
                        font-size: 4.6875vw;
                        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                        font-weight: 500;
                        color: #333333;
                        line-height: 7.0313vw;
                        margin-bottom: 4.375vw;
                    }

                    .img{
                        width: 21.3021vw;
                        height: 28.75vw;
                        position: relative;
                        left: 1.4063vw;
                    }
                }
            }
        }
    }

    .one_box{
        padding: 5.7292vw 0 8.4375vw;

        .main_flex{

            .flex_1{

                .t{
                    font-size: 1.875vw;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: #666666;
                    line-height: 2.8125vw;
                    margin-bottom: 1.5625vw;
                }

                .p{
                    font-size: 3.125vw;
                    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                    font-weight: 500;
                    color: #333333;
                    line-height: 4.6875vw;
                }
            }

            .right{
                width: 45.9375vw;
                height: 43.2813vw;
                margin: 0 .625vw 0 .5729vw;
            }
        }
    }

    .two_box{
        height: 46.5104vw;
        background: #F8F9F9;

        .main_flex{
            height: 100%;

            .left{
                width: 54.1667vw;
                height: 100%;
                position: relative;

                img{
                    width: 31.0417vw;
                    height: 44.5833vw;
                    position: absolute;
                    left: 4.6875vw;
                    bottom: -1.6146vw;
                }
            }

            .flex_1{

                .t{
                    font-size: 1.875vw;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: #666666;
                    line-height: 2.8125vw;
                    margin-bottom: 1.5625vw;
                }

                .p{
                    font-size: 3.125vw;
                    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                    font-weight: 500;
                    color: #333333;
                    line-height: 4.6875vw;
                }
            }
        }
    }

    .three_box{
        padding-top: 16.4583vw;
        display: flex;
        justify-content: flex-end;
        position: relative;

        .left{
            position: absolute;
            top: 24.2708vw;
            left: 13.5417vw;

            .p{
                font-size: 3.125vw;
                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                font-weight: 500;
                color: #333333;
                line-height: 4.6875vw;
            }
        }

        .right{
            width: 70.6771vw;
            height: 43.2813vw;
        }
    }

    // 新一代管家守护居家养老
    .carousel_box{
        width: 83.3333vw;
        padding-top: 7.5vw;
        margin: 0 auto;

        .title{
            text-align: center;
            font-size: 3.125vw;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #333333;
            line-height: 5.8854vw;
            margin-bottom: 4.8958vw;
        }

        .content_box{
            height: 53.4375vw;

            .swiper{
                width: 100%;
                height: 100%;
                position: relative;

                .main_flex{
                    width: 100%;
                    height: 100%;
                    flex-direction: column;
                    align-items: flex-start;

                    .img{
                        width: 100%;
                        height: 38.0208vw;
                    }

                    .flex_1{
                        width: 40vw;
                        padding-left: 2.1875vw;
                        padding-top: 2.1875vw;

                        .t{
                            font-size: 1.875vw;
                            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                            font-weight: 500;
                            color: #333333;
                            line-height: 2.8125vw;
                            margin-bottom: .625vw;
                        }

                        .p{
                            font-size: 1.25vw;
                            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                            font-weight: 500;
                            color: #333333;
                            line-height: 1.875vw;
                        }
                    }
                }

                // 按钮
                .swiper-button-prev,.swiper-button-next{
                    width: 3.3333vw;
                    height: 3.3333vw;
                    top: calc(100% - 9.0625vw);
                }
                .swiper-button-prev{
                    left: calc(100% - 11.4583vw);
                    background: url("../images/robot/robot_prev.png") no-repeat;
                    background-size: 100% 100%;
                }
                .swiper-button-next{
                    right: 3.6458vw;
                    background: url("../images/robot/robot_next.png") no-repeat;
                    background-size: 100% 100%;
                }
                .swiper-button-prev:after, .swiper-button-next:after{
                    content: '';
                }
                .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
                    opacity: 1;
                }
                .swiper-button-prev.swiper-button-disabled{
                    background: url("../images/robot/robot_prev_no.png") no-repeat !important;
                    background-size: 100% 100% !important;
                }
                .swiper-button-next.swiper-button-disabled{
                    background: url("../images/robot/robot_next_no.png") no-repeat !important;
                    background-size: 100% 100% !important;
                }
            }
        }
    }

    // 小身影 大能量
    .robot_box{
        padding: 4.5313vw 0 5.2083vw;

        .main_area{

            .tit{
                text-align: center;
                font-size: 3.125vw;
                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                font-weight: 500;
                color: #333333;
                line-height: 4.6875vw;
                margin-bottom: 2.7083vw;
            }

            .tag{
                text-align: center;
                font-size: 2.0833vw;
                font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                font-weight: 400;
                color: #424242;
                line-height: 2.0833vw;
                margin-bottom: 5.5729vw;
            }

            img{
                width: 70.5208vw;
                height: 43.2292vw;
                margin: 0 auto 2.3438vw;
            }

            .t{
                text-align: center;
                font-size: 3.125vw;
                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                font-weight: 500;
                color: #333333;
                line-height: 4.6875vw;
                margin-bottom: 1.25vw;
            }

            .p{
                font-size: 1.875vw;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-weight: 400;
                color: #666666;
                line-height: 3.2292vw;

                a{
                    color: #FF7C00;
                    text-decoration: underline;
                }
            }
        }
    }
}

// H5
@media (max-width:@screen-xs-max){
    .banner{
        height: 125.8667vw;

        .swiper {
            width: 100%;
            height: 100%;

            .one{
                background: url("../images/robot/h5/robot_banner_bg_1.png") no-repeat;
                background-size: 100% 100%;

                .main_area{
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-end;

                    .left{
                        width: 100%;
                        margin-bottom: 6.9333vw;

                        .t{
                            text-align: right;
                            font-size: 7.4667vw;
                            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                            font-weight: 500;
                            color: #333333;
                            line-height: 11.2vw;
                            margin-bottom: 2.1333vw;
                            position: relative;
                            right: 9.3333vw;
                        }

                        .p{
                            text-align: right;
                            font-size: 4.8vw;
                            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                            font-weight: 500;
                            color: #333333;
                            line-height: 7.2vw;
                            position: relative;
                            right: 9.3333vw;
                        }
                    }

                    .right{
                        width: 73.8667vw;
                        height: 75.4667vw;
                        position: relative;
                        left: 2.4vw;
                    }
                }
            }

            .two{
                background: url("../images/robot/h5/robot_banner_bg_2.png") no-repeat;
                background-size: 100% 100%;

                .main_flex{
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-end;

                    .text{
                        font-size: 7.4667vw;
                        font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                        font-weight: 500;
                        color: #333333;
                        line-height: 11.2vw;
                        margin-bottom: 29.3333vw;
                    }

                    .img{
                        width: 41.8667vw;
                        height: 56vw;
                    }
                }
            }
        }
    }

    .one_box{
        padding: 9.6vw 4vw 7.4667vw;

        .main_flex{

            .flex_1{
                margin-bottom: 6.4vw;
                padding-left: 12vw;

                .t{
                    font-size: 4.2667vw;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: #666666;
                    line-height: 6.4vw;
                    margin-bottom: 1.6vw;
                }

                .p{
                    font-size: 6.4vw;
                    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                    font-weight: 500;
                    color: #333333;
                    line-height: 9.6vw;
                }
            }

            .right{
                width: 86.6667vw;
                height: 86.1333vw;
                margin: 0 auto;
            }
        }
    }

    .two_box{
        padding: 5.3333vw 4vw 0;
        background: rgba(207,209,213,0.15);

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

            .flex_1{
                margin-bottom: 6.4vw;
                padding-left: 12vw;

                .t{
                    font-size: 4.2667vw;
                    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                    font-weight: 400;
                    color: #666666;
                    line-height: 6.4vw;
                    margin-bottom: 1.6vw;
                }

                .p{
                    font-size: 6.4vw;
                    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                    font-weight: 500;
                    color: #333333;
                    line-height: 9.6vw;
                }
            }

            .left{
                width: 54.6667vw;
                height: 77.8667vw;
                position: relative;
                left: 16.8vw;
                bottom: -5.8667vw;
            }
        }
    }

    .three_box{
        padding-top: 15.4667vw;

        .left{

            .p{
                text-align: center;
                font-size: 6.4vw;
                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                font-weight: 500;
                color: #333333;
                line-height: 9.6vw;
                margin-bottom: 3.2vw;
            }
        }

        .right{
            height: 79.7333vw;
        }
    }

    // 新一代管家守护居家养老
    .carousel_box{
        padding-top: 9.6vw;

        .title{
            text-align: center;
            font-size: 6.4vw;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #333333;
            line-height: 9.6vw;
            margin-bottom: 6.6667vw;
        }

        .content_box{
            height: 98.6667vw;

            .swiper{
                width: 100%;
                height: 100%;
                position: relative;

                .main_flex{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;

                    .img{
                        width: 100%;
                        height: 54.4vw;
                    }

                    .flex_1{
                        padding: 8.5333vw 4vw 4vw;

                        .t{
                            font-size: 4.8vw;
                            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                            font-weight: 500;
                            color: #333333;
                            line-height: 7.2vw;
                            margin-bottom: 2.1333vw;
                        }

                        .p{
                            font-size: 4.2667vw;
                            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                            font-weight: 400;
                            color: #666666;
                            line-height: 6.4vw;
                        }
                    }
                }

                // 按钮
                .swiper-button-prev,.swiper-button-next{
                    width: 12vw;
                    height: 12vw;
                    top: calc(100% - 35.6vw);
                }
                .swiper-button-prev{
                    left: calc(100% - 31.2vw);
                    background: url("../images/robot/robot_prev.png") no-repeat;
                    background-size: 100% 100%;
                }
                .swiper-button-next{
                    right: 4vw;
                    background: url("../images/robot/robot_next.png") no-repeat;
                    background-size: 100% 100%;
                }
                .swiper-button-prev:after, .swiper-button-next:after{
                    content: '';
                }
                .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
                    opacity: 1;
                }
                .swiper-button-prev.swiper-button-disabled{
                    background: url("../images/robot/robot_prev_no.png") no-repeat !important;
                    background-size: 100% 100% !important;
                }
                .swiper-button-next.swiper-button-disabled{
                    background: url("../images/robot/robot_next_no.png") no-repeat !important;
                    background-size: 100% 100% !important;
                }
            }
        }
    }

    // 小身影 大能量
    .robot_box{
        padding-bottom: 9.6vw;

        .main_area{
            width: 100%;

            .tit{
                text-align: center;
                font-size: 6.4vw;
                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                font-weight: 500;
                color: #333333;
                line-height: 9.6vw;
                margin-bottom: 3.4667vw;
            }

            .tag{
                text-align: center;
                font-size: 4.2667vw;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-weight: 400;
                color: #666666;
                line-height: 6.4vw;
                margin-bottom: 10.1333vw;
            }

            img{
                width: 100%;
                height: 76.2667vw;
                margin-bottom: 9.6vw;
            }

            .t{
                text-align: center;
                font-size: 6.4vw;
                font-family: SourceHanSansCN-Medium, SourceHanSansCN;
                font-weight: 500;
                color: #333333;
                line-height: 9.6vw;
                margin-bottom: 4.5333vw;
            }

            .p{
                padding: 0 4vw;
                font-size: 4.2667vw;
                font-family: SourceHanSansCN-Normal, SourceHanSansCN;
                font-weight: 400;
                color: #666666;
                line-height: 6.4vw;

                a{
                    color: #FF7C00;
                    text-decoration: underline;
                }
            }
        }
    }
}