* {
    margin: 0px;
    padding: 0px;
    font-size: 15px;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
}

input,
textarea {
    outline: none;
    border: none;
}

body {
    background: #fffefa;
}

.nav_pages {
    width: 100% ;
    position: fixed ;
    top: 0px ;
    z-index: 100 ;
    height: 0.7rem ;
    display: flex ;
    justify-content: space-between ;
    align-items: center ;
    padding: 0px 5% ;
    box-sizing: border-box ;
}

.nav_pages .logo a {
    display: flex ;
    align-items: center ;
}

.nav_pages .logo a img {
    display: block ;
    height: 0.2rem ;
    margin-right: 0.14rem ;
}

.nav_pages .logo a span {
    color: #333 ;
    font-size: 0.18rem ;
    display: block ;
}

.nav_pages  .return_right a {
    display: flex ;
    align-items: center ;
    color: #333 ;
    font-size: 0.15rem ;
}

.nav_pages  .return_right a img {
    display: block ;
    margin-left: 0.1rem ;
    height: 0.13rem ;
}

.Login {
    width: 100%;
    height: 100vh;
}

.Login .out {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.Login .out .left {
    width: 46%;
    height: 100%;
    border-radius: 0px 0.1rem 0.1rem 0px ;
    overflow: hidden;
    background-image: linear-gradient(to top, #142fa1 0%, #20b1e3 100%);
    background-blend-mode: multiply;
}

.Login .out .left img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* transform: scale(1.2); */
}

.Login .out .right {
    width: 53%;
    background: #FFF;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.Login .out .right .title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.3rem;
}

.Login .out .right .title .logo {
    height: 0.9rem;
    display: block;
    margin-right: 0.1rem;
}

.Login .out .right .title .txt h5 {
    color: #333;
    font-size: 0.4rem;
    font-weight: bold;
}

.Login .out .right .title .txt p {
    color: #666;
    font-size: 0.18rem;
}

.Login .out .right form {
    width: 100%;
    max-width: 5.5rem;
}

.Login .out .right .label {
    margin-bottom: 0.3rem ;
    display: block ;
}

.Login .out .right .label span {
    color: #333;
    font-size: 0.18rem;
    display: block;
    margin-bottom: 0.15rem;
}

.Login .out .right .label .input {
    position: relative;
    width: 100%;
    height: 0.5rem;
    box-shadow: 0px 0px 0.06rem 0.01rem #0000001d;
}

.Login .out .right .label .input input {
    width: 100%;
    height: 100%;
    border: none;
    background: #eee;
    padding: 0px 0.15rem 0px 0.7rem;
    box-sizing: border-box;
    font-size: 0.16rem ;
    color: #333 ;
    display: block ;
}

.Login .out .right .label .input input:focus {
    box-shadow: 0px 0px 0.06rem 0.01rem #4facfe48;
}

.Login .out .right .label .input input::placeholder{
    font-size: 0.16rem ;
    color: #333 ;
    opacity: 0.5;
}

.Login .out .right .label .input .icon {
    position: absolute;
    left: 0.2rem;
    top: 50%;
    height: 0.24rem ;
    transform: translateY(-50%);
}

.Login .out .right .label .captcha {
    display: flex ;
    justify-content: space-between ;
    align-items: center ;
}

.Login .out .right .label .captcha .input {
    width: 65% ;
}

.Login .out .right .label .captcha .verify {
    width: 30% ;
    height: 100% ;
    display: block ;
    border: 0.01rem solid #c0b8b8 ;
    box-sizing: border-box ;
    border-radius: 0.05rem ;
    overflow: hidden;
    cursor: pointer;
}

.Login .out .right .label .captcha .verify img {
    width: 100% ;
    height: 100% ;
    display: block ;
}

.Login .out .right .submit {
    display: flex ;
    align-items: center ;
    justify-content: center ;
    color: #fff ;
    font-size: 0.22rem ;
    width: 2.5rem ;
    height: 0.7rem ;
    background: none ;
    border: none ;
    background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
    background-blend-mode: multiply;
    border-radius: 0.1rem ;
    cursor: pointer;
    margin-top: 0.5rem ;
}

.Login .out .right .submit img {
    height: 0.17rem ;
    display: block ;
    margin-left: 0.1rem ;
}
#imageContainer {
    width: 100% ;
    height: 100% ;

}

@media (max-width:768px) {
    .Login .out .left {
        display: none ;
    }

    .Login .out .right {
        width: 100% ;
    }

    .Login .out .right form {
        width: 100% ;
        max-width: 100% ;
        padding: 0px 3% ;
        box-sizing: border-box ;
    }

    .Login .out .right .submit{
        width: 100% ;
    }
    
    .Login .out .right .label .input {
        height: 0.6rem ;
    }
}

@media (min-width:769px) and (max-width:1400px) {
    .Login .out .right form {
        width: 100% ;
        max-width: 100% ;
        padding: 0px 1rem;
        box-sizing: border-box ;
    }

    .Login .out .right .submit{
        width: 100% ;
    }
    
    .Login .out .right .label .input {
        height: 0.6rem ;
    }
}


@media (min-width:360px) and (max-width:768px) {
    html {
        font-size: 52px !important;
    }

}

@media (min-width:769px) and (max-width:930px) {
    html {
        font-size: 50px !important;
    }

}

@media (min-width:931px) and (max-width:1099px) {
    html {
        font-size: 60px !important;
    }
}

@media (min-width:1100px) and (max-width:1249px) {
    html {
        font-size: 70px !important;
    }
}

@media (min-width:1250px) and (max-width:1399px) {
    html {
        font-size: 80px !important;
    }
}

@media (min-width:1400px) and (max-width:1699px) {
    html {
        font-size: 90px !important;
    }
}


@media (min-width:1700px) {
    html {
        font-size: 100px !important;
    }
}