html{
    overflow:hidden;
}

body {
    padding: 0px;
}

.form_area {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-color: #86E4FF; /* 背景色 */
}
@media screen and (min-width:430px){
    .div_login {
        position: absolute;
        top: 50vh;
        left: 50vw;
        transform: translate(-50%,-50%);
        width: 36vw;
        height: 30vh;
        min-height: 250px;
        min-width: 430px;
    }

    .join_btn {
        position: absolute;
        width: 85px;
        height: 85px;
        border-radius: 50%;
        border: solid #70BDEA;
        background-color: #70BDEA;
        transition: transform 0.5s ease;
    }

        .join_btn span {
            color: #FFFFFF;  
        }

    .input_area {
        /*width: 70%;*/
      /*  min-width: 250px;
        max-width: 250px;*/
        height: auto;
        margin: 40px 0px 40px 0px;
        text-align: center;
        /*margin-right: -25px;*/
    }

    .special_commercial {
        position: fixed;
        bottom: 4%;
        right: 5%;
    }
}

@media screen and (max-width:429px) {
    .div_login {
        position: absolute;
        top: 50vh;
        left: 50vw;
        transform: translate(-50%,-50%);
        width: 90vw;
        height: 40vh;
    }

    .join_btn {
        position: absolute;
        width: 15vh;
        height: 15vh;
        border-radius: 50%;
        border: solid #70BDEA;
        background-color: #70BDEA;
        transition: transform 0.5s ease;
        padding:10px 0px;
    }

        .join_btn span {
            color: #FFFFFF;
            font-size: 4vw;
        }

    .input_area {
        /*width: 70%;*/
       /* min-width: 400px;
        max-width: 400px;*/
        height: auto;
        margin: 40px 0px 40px 0px;
        text-align: center;
        /*margin-right: -25px;*/
    }

    .special_commercial {
        position: fixed;
        bottom: 10%;
        left: 15%;
    }
}


.input_area {
    /*width: 70%;*/
   /* min-width: 400px;
    max-width: 400px;*/
    height: auto;
    margin: 40px 0px 40px 0px;
    text-align: center;
    /*margin-right: -25px;*/
}

    .input_area .form-control {
        background-color: #D5F6ff;
        width: 80%;
        border-radius:8px;
        height:45px;
    }

    .input_form_1 {
        margin:1vh 1vh 1vh 1vh;
    }

    .input_form_2 {
        margin: 1vh 1vh 1vh 1vh;
    }

.btn_area {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    padding: 10px;
}

.flex_area {
    width: 100%;
    display: inline-flex;
}

#img_pipio {
    width: 100%;
    height: 100%;
    padding:0px 10px 0px 10px;
    margin-top:3vh;
}

.join_btn:hover {
    transform: scale(1.2);
    border: solid #98d9ff 2px;
}

.join_btn:active {
    background-color: #5ca0c8;
    border: solid #5ca0c8;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.join_btn span:hover {
    transform: scale(1.2);
}

.join_btn span:active {
    color: #657776;
}

.item-center{
    justify-content:center;
    display:flex;
}