.home {
    &>section {
        display: flex;
    }

    .large_bg {
        height: 100%;
        background: radial-gradient(circle at 50% 50%, #22075E 0%, #000000 100%);

        &>section {
            display: flex;
        }
    }

    .first_page {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;


        .banner_text {
            padding: 0 6.15vw;
            font-size: 5.13vw;
            font-family: OpenSans-ExtraBold;
            font-weight: 800;
            text-align: center;
            color: #fff;
            line-height: 8.21vw;
            text-shadow: 0px 6px 16px rgba(0, 0, 0, 0.28);
            margin-top: 6.15vw;
            margin-bottom: 4.1vw;

            p:last-child {
                background: linear-gradient(to right, #9254DE 0%, #EB8E71 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;
            }
        }

        .banner_text_des {
            padding: 0 6.15vw;
            font-size: 2.05vw;
            font-family: OpenSans-Regular;
            font-weight: 400;
            text-align: center;
            color: #FFFFFF;
            line-height: 4.1vw;
        }

        .start_btn {
            height: 6.15vw;
            background: linear-gradient(180deg, #D3ADF7 0%, #722ED1 100%);
            box-shadow: 0px 2.05vw 4.1vw .26vw rgba(34, 7, 94, 0.32);
            border-radius: 26.04vw;
            border: .26vw solid #722ED1;
            font-size: 2.56vw;
            font-family: OpenSans-Bold;
            font-weight: 700;
            color: #ffffff;
            cursor: pointer;
            margin-top: 6.15vw;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1.03vw 4.1vw;
        }

        .cloudIcon {
            position: absolute;
            z-index: 10;
        }

        .cloud1 {
            left: 0;
            top: 8.21vw;
            height: 9.23vw;
            width: 9.23vw;
        }

        .cloud2 {
            right: -2.05vw;
            top: 17.4vw;
            height: 11.28vw;
            width: 12.82vw;
        }

        .cloud3 {
            right: 19.49vw;
            top: 2.56vw;
            width: 3.59vw;
            height: 2.56vw;
        }
    }

    .second_page {
        width: 100%;
        margin-top: 10.26vw;
        position: relative;
        flex-direction: column;

        .top_generate {
            height: 66.67vw;
            width: 60.51vw;
            opacity: .8;
            transition: .6s;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            border: .26vw solid #fff;
            border-radius: .83vw;
            padding: 4.1vw 0;
            padding-bottom: 6.15vw;

            box-shadow: 2.05vw 2.05vw 4.1vw .26vw rgba(34, 7, 94, 0.32);
            margin: 0 6.41vw;
            background-color: #000000;

            .modelName {
                width: 100%;
                font-size: 2.56vw;
                color: #fff;
                text-align: left;
                margin-bottom: 4.1vw;
                padding: 0 4.1vw;
            }

            .playground {
                width: 100%;
                height: 42.05vw;
                overflow: hidden;
                z-index: 11;
                position: relative;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .resImg {
                    height: 22.14vw;
                    width: 39.38vw;
                    margin-bottom: 1.67vw;
                }

                .generating {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;


                    img {
                        margin-top: 2.08vw;
                        width: 18.04vw;
                        height: 18.04vw;
                    }

                    p {
                        font-size: 2.56vw;
                        font-weight: 800;
                        text-align: center;
                        color: #ffffff;
                    }
                }

                .error_text {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    width: 100%;
                    justify-content: center;
                    align-items: center;
                    font-size: 2.56vw;

                    &>div>span:first-child {
                        font-weight: bold;
                        font-size: 2.82vw;
                    }
                }

                .textToText {
                    width: 100%;
                    height: 100%;
                    overflow: scroll;
                    border-radius: 6px;


                    .sender {
                        width: 100%;
                        height: auto;
                        background: #531dab;
                        border-radius: .77vw;
                        padding: 1.03vw 2.05vw;


                        font-size: 2.56vw;
                        line-height: 4.1vw;
                        font-family: OpenSans-Regular;
                        font-weight: 400;
                        text-align: left;
                        color: #bfbfbf;
                        margin-bottom: 4.1vw;
                    }

                    .res_message {
                        width: 100%;
                        height: auto;
                        background: #9254de;
                        border-radius: 6px;
                        padding: 1.03vw 2.05vw;

                        font-size: 2.56vw;
                        font-family: OpenSans-Regular;
                        font-weight: 400;
                        text-align: left;
                        color: #bfbfbf;
                        line-height: 4.1vw;
                    }

                }

                .textToAudio {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                    width: 100%;
                    height: 100%;

                    .playIcon {
                        .handleBtn {
                            height: 8.21vw;
                            width: 8.21vw;
                            margin: 0;
                            margin-top: 2.56vw;
                        }
                    }

                    .processCon {
                        height: 12.82vw;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;

                        .process {
                            width: 45.13vw;
                            height: .26vw;
                            background: #ffffff;
                            margin: 0 2.05vw;
                        }

                        .processImg {
                            height: 100%;
                            width: 45.13vw;
                            margin: 0 2.05vw;
                        }

                        .times {
                            font-size: 2.05vw;
                            font-family: OpenSans-Regular;
                            font-weight: 400;
                            text-align: left;
                            color: #ffffff;
                        }
                    }


                }
            }



            .handles {
                position: relative;
                z-index: 11;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                padding: 0 4.1vw;


                .ant-input {
                    width: 100%;
                    height: 6.15vw;
                    border-radius: 64.1vw;
                    border: none;
                    padding: 1.03vw 2.05vw;

                    font-size: 2.56vw;
                    font-family: OpenSans-Regular;
                    font-weight: 400;
                    text-align: left;
                    color: #22075e;
                    margin-bottom: 4.1vw;
                    margin-top: 6.15vw;
                    border: .26vw solid #722ED1;
                }

                .ant-input::placeholder {
                    color: #22075e;
                }

                .ant-input-affix-wrapper {
                    padding: .42vw .83vw;
                    font-size: .83vw;
                    color: #000000;
                    height: 3.33vw;
                    border-radius: 1.72vw;
                }

                .ant-btn {
                    height: 6.15vw;
                    background: #722ED1;
                    border: .26vw solid #722ED1;
                    border-radius: 64.1vw;
                    padding: 1.03vw 4.1vw;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    font-size: 2.56vw;
                    font-family: OpenSans-Bold;
                    font-weight: 700;
                    color: #fff;
                }
            }
        }

        .slider-container{
            min-height: 83.08vw;
        }

        .slick-slide, .modes_item, .modes_item .modes_item_active{
            outline: none;
            user-select: none;
        }

        .slick-track{
            display: flex;
            align-items: center;
        }

        .slick-center {
            .top_generate {
                height: 83.08vw;
                width: 75.38vw;
                opacity: 1;
                margin: 0;
            }
        }


        .moreModels {
            font-size: 2.56vw;
            font-family: OpenSans-Bold;
            font-weight: 500;
            margin: 0 auto;
            color: #FFFFFF;
            position: relative;
            text-decoration-line: underline;
            margin-top: 4.1vw;
        }
    }

    .third_page {
        padding-top: 6.15vw;
        display: flex;
        flex-direction: row;
        position: relative;

        .left {
            position: absolute;
            left: -48.21vw;
            height: 112.31vw;
            width: 99.49vw;
            z-index: 9;
            background-image: url('../../assets/images/home/third_left_bg.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .right {
            position: relative;
            z-index: 10;
            width: 100%;
            padding: 6.15vw;

            .top_tit {
                display: flex;
                flex-direction: column;
                height: 17.5vw;
                line-height: 8.21vw;
                margin-bottom: 6.15vw;

                .white_text {
                    font-size: 5.13vw;
                    font-family: OpenSans-ExtraBold;
                    font-weight: 800;
                    text-align: left;
                    color: #fff;
                    text-shadow:
                        -1px -1px 0 black,
                        1px -1px 0 black,
                        -1px 1px 0 black,
                        1px 1px 0 black;
                }
            }

            .right_item {
                height: 27.69vw;
                width: 100%;
                background: url('../../assets/images/home/third_text_bg.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                padding: 4.1vw;
                margin-bottom: 6.15vw;
                border-radius: .42vw;
                box-shadow: 2.05vw 2.05vw 4.1vw .26vw rgba(34, 7, 94, 0.32);


                .tit {
                    font-size: 3.08vw;
                    font-family: OpenSans-Bold;
                    font-weight: bold;
                    text-align: left;
                    color: #ffffff;
                }

                .right_item_content {
                    font-size: 2.56vw;
                    font-family: OpenSans-SemiBold;
                    font-weight: 500;
                    text-align: left;
                    color: #ffffff;
                    line-height: 4.1vw;
                }
            }

            .item2 {
                background: url('../../assets/images/home/third_text_bg2.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            .item3 {
                background: url('../../assets/images/home/third_text_bg3.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            .item4 {
                background: url('../../assets/images/home/third_text_bg4.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-bottom: 0;
            }
        }

    }

    .fifth_page {
        margin-top: 4.1vw;
        height: 162.95vw;
        flex-direction: column;
        padding: 6.15vw;
        background-image: url('../../assets/images/home/fifth_bg.png');
        background-size: 100% 100%;
        position: relative;

        .fifth_page_tit {
            font-size: 5.13vw;
            line-height: 8.21vw;
            font-family: OpenSans-ExtraBold;
            font-weight: 800;
            text-align: left;
            color: #ffffff;
            text-align: left;
        }

        .fifth_page_con {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            img {
                position: absolute;
                top: 26.67vw;
                left: 6.15vw;
                height: 60vw;
                width: 106.67vw;
                max-width: 106.67vw;
                box-shadow: 2.05vw 2.05vw 4.1vw 2px rgba(34, 7, 94, 0.32);
                border-radius: 1.03vw;
            }

            .adminHomeImg {
                height: 60vw;
                width: 100%;
                margin-top: 4.1vw;
            }


            &>span {
                font-size: 2.56vw;
                font-family: OpenSans-SemiBold;
                font-weight: 500;
                text-align: left;
                color: #ffffff;
                line-height: 4.1vw;
                margin-top: 6.15vw;
            }

            button {
                height: 6.15vw;
                background: #ffffff;
                border: .26vw solid #722ED1;
                border-radius: 64.1vw;
                background: linear-gradient(180deg, #FFFFFF 0%, #D3ADF7 100%);
                box-shadow: 0px 16px 32px 2px rgba(34, 7, 94, 0.32);
                padding: 1.03vw 4.1vw;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 2.56vw;
                font-family: OpenSans-Bold;
                font-weight: 700;
                color: #722ED1;
                margin-top: 5.73vw;
            }
        }


    }

    .sixth_page {
        flex-direction: column;
        justify-content: center;
        padding: 6.15vw;
        padding-bottom: 10.26vw;
        padding-right: 0;
        background: linear-gradient(180deg, #000000 0%, #22075E 100%);

        .sixth_page_tit {
            font-size: 5.13vw;
            line-height: 8.21vw;
            font-family: OpenSans-ExtraBold;
            font-weight: 800;
            text-align: left;
            color: #FFFFFF;
            text-transform: uppercase;
        }

        .sixth_page_con {
            display: flex;
            flex-direction: column;
            margin-top: 3.65vw;

            .middle_info {
                width: 100%;
                position: relative;

                .slick-initialized .slick-slide {
                    margin-right: 6.15vw !important;
                }


                .middle_info_img {
                    height: 25.31vw;
                    width: 100%;
                    border-radius: .42vw;
                }

                .ava_message {
                    height: 22.56vw;
                    width: 67.44vw;
                    margin-right: 6.15vw;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    background-color: #fff;
                    background: #FFFFFF;
                    box-shadow: 8px 8px 16px 1px rgba(34, 7, 94, 0.32);
                    border-radius: 8px 8px 8px 8px;
                    padding: 2.56vw;
                    padding-right: 2.82vw;

                    .ava_message_top {
                        display: flex;
                        flex-direction: row;


                        img {
                            height: 3.33vw;
                            width: 3.33vw;
                            margin-right: .83vw;
                        }

                        .ava_message_top_right {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: flex-start;

                            p:first-child {
                                font-family: OpenSans-Bold;
                                font-size: 2.05vw;
                                color: #000000;
                            }

                            p:last-child {
                                font-family: OpenSans-Regular;
                                font-weight: 400;
                                font-size: 1.54vw;
                                color: #531DAB;
                            }
                        }
                    }

                    .bottom_content {
                        font-family: OpenSans-Regular;
                        font-weight: 400;
                        font-size: 2.05vw;
                        color: #000000;
                        line-height: 4.1vw;
                        text-align: left;
                    }


                }
            }

            .sixth_p_bottom {
                width: 100%;
                padding: 10.77vw 6.15vw 13.33vw;
                display: flex;
                justify-content: space-around;

                img {
                    width: 23.59vw;
                    height: 7.18vw;
                }



                img:nth-child(2) {
                    margin: 0 5.51vw;
                    width: 23.08vw;
                }

                img:nth-child(3) {
                    width: 24.62vw;
                    height: 6.15vw;
                }
            }


        }
    }

    footer {
        width: 100%;
        height: 10.26vw;
        background: linear-gradient(180deg, #531DAB 0%, #9254DE 100%);
        padding: 2.56vw 6.15vw;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        img {
            width: 15.38vw;
            height: 5.13vw;
            margin-right: 4.1vw;
        }

        p {
            font-family: OpenSans-Bold;
            font-size: 2.05vw;
            color: #FFFFFF;
        }

    }

    // footer {
    //     width: 100%;
    //     height: 31.67vw;
    //     background-image: url('../../assets/images/home/footer_bg.png');
    //     background-size: 100% 100%;

    //     padding: 4.38vw 3.33vw;


    //     .footer_container {
    //         display: flex;
    //         flex-direction: row;

    //         .footer_left {
    //             display: flex;
    //             text-align: left;
    //             flex-direction: column;
    //             margin-right: 5vw;

    //             .footer_logo {
    //                 height: 3.23vw;
    //                 width: 9.06vw;
    //                 margin-bottom: 1.77vw;
    //             }

    //             span {
    //                 width: 21.67vw;
    //                 height: 5vw;
    //                 font-size: 1.25vw;
    //                 font-family: OpenSans-SemiBold;
    //                 font-weight: 500;
    //                 text-align: left;
    //                 color: #ffffff;
    //                 line-height: 2.4vw;
    //                 text-shadow: 0px 6px 16px rgba(0, 0, 0, 0.28);
    //             }

    //         }

    //         .footer_right {
    //             display: flex;
    //             flex-direction: row;

    //             .links {
    //                 text-align: left;
    //                 margin-right: 1.67vw;

    //                 .links_top {
    //                     margin-bottom: 1.51vw;

    //                     span {
    //                         font-size: 1.25vw;
    //                         font-family: OpenSans-ExtraBold;
    //                         font-weight: 800;
    //                         color: #b37feb;
    //                     }

    //                     .line {
    //                         width: 16.67vw;
    //                         height: .83vw;
    //                         border-radius: 2px;
    //                         margin-top: .42vw;

    //                         img {
    //                             height: 100%;
    //                             width: 100%;
    //                         }
    //                     }
    //                 }

    //                 nav {
    //                     ul {
    //                         li {
    //                             margin-bottom: 1.09vw;
    //                             font-size: 1.25vw;
    //                             font-family: OpenSans-SemiBold;
    //                             font-weight: 500;
    //                             text-align: left;
    //                             color: #ffffff;
    //                         }

    //                         li a:hover {
    //                             color: #b37feb;
    //                         }
    //                     }
    //                 }
    //             }
    //         }
    //     }
    // }

}