@media (max-width: 1450px) {
    html, body {
        width: 100%;
        height: 100%;
        font-size: 1.4rem;
    }
    .login-wrapper{
        background-color: #fff;
        width: 60%;
        border-radius: 15px;
        padding: 0 50px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 45%;
        min-height: 750px;
    }

    .login-wrapper-sign-up{
        background-color: #fff;
        width: 60%;
        border-radius: 15px;
        padding: 0 50px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 55%;
        min-height: 950px;
    }

    .login-wrapper-reset{
        background-color: #fff;
        width: 60%;
        border-radius: 15px;
        padding: 0 50px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 48%;
        min-height: 850px;
    }
    .font12rem {
        font-size: 1.2rem;
    }
    .font15rem {
        font-size: 1.5rem;
    }
    .font18rem {
        font-size: 1.8rem;
    }
    .font30rem {
        font-size: 3rem;
    }
    .font35rem {
        font-size: 3.5rem;
    }
}

/* 当窗口宽度大于1440px时 */
@media (min-width: 1450px) {
    html{
        width: 100%;
        height: 100%;
        font-size: 12px;
    }
    body{
        width: 28%;
        height: 100%;
        margin: 0 auto;
        position:relative;
    }
    .login-wrapper{
        background-color: #fff;
        width: 60%;
        border-radius: 15px;
        padding: 0 50px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 45%;
        min-height: 450px;
    }
    .login-wrapper-sign-up{
        background-color: #fff;
        width: 60%;
        border-radius: 15px;
        padding: 0 50px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 55%;
        min-height: 550px;
    }
    .login-wrapper-reset{
        background-color: #fff;
        width: 60%;
        border-radius: 15px;
        padding: 0 50px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 48%;
        min-height: 500px;
    }
    .font12rem {
        font-size: 1rem;
    }
    .font15rem {
        font-size: 1.2rem;
    }
    .font18rem {
        font-size: 1.4rem;
    }
    .font30rem {
        font-size: 2.4rem;
    }
    .font35rem {
        font-size: 2.7rem;
    }
}


/*清除浮动*/
.clear {
    clear: both;
}
* {
    margin: 0;
    padding: 0;
}
.container {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
    position:absolute;
}
.header {
    font-weight: bold;
    text-align: center;
    line-height: 8rem;
}
.input-item {
    display: block;
    width: 100%;
    margin-bottom: 2rem;
    border: 0;
    padding: 10px;
    border-bottom: 1px solid rgb(128, 125, 125);
    outline: none;
    height: 3rem;
}
.input-item:placeholder {
    text-transform: uppercase;
}
.btn {
    text-align: center;
    padding: 1.5rem 0.5rem;
    width: 100%;
    margin-top: 40px;
    background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
    color: #fff;
}
.msg {
    text-align: center;
    line-height: 4rem;
}
a {
    text-decoration-line: none;
    color: #abc1ee;
}

/*单选框对齐*/
.radio-container {
    align-items: center; /* 垂直对齐 */
    justify-content: flex-start; /* 水平对齐，根据需要调整 */
    color: #abc1ee;
}
.radio-container input {
    width: 1.2rem;
    height: 1.2rem;
}

/*单选框对齐*/
.radio-container-protocol {
    align-items: center; /* 垂直对齐 */
    justify-content: flex-start; /* 水平对齐，根据需要调整 */
}

.radio-container-protocol input {
    width: 1.4rem;
    height: 1.4rem;
}

#getCode {
    float: right;
    width: 30%;
    padding: 0.9rem 0.2rem;
}

#getRegisterCode {
    float: right;
    width: 30%;
    padding: 0.9rem 0.2rem;
}


#code{
    float: right;
    height: 4.5rem;
    width: 45%
}

.select_character{
    width: 100%;
    height: 100%;
    background-image: url("/file/img/select_character.jpg");
    background-repeat:no-repeat ;
    background-position: center;
    background-size:cover;
    float: left;
    position: relative;
}

.character{
    float: left;
    margin-left: 7%;
    margin-top: 14%;
    width: 40%;
    height: 35%;
    position: relative;
}

/*文字居中*/
.center-container{
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100%; /* 容器高度设置为视口高度，用于垂直居中 */
    width: 100%;
    text-align: center; /* 确保文本在容器内水平居中 */
    position: absolute;
}

#c-c-w{
    z-index: 9998;
    position:fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-35%);
    background-color: rgba(30,30,30,0.6);
    color: #ffffff;
    padding: 1rem 2rem;
    /*font-size: 1.5rem;*/
}

.close-window{
    position:absolute;
    top: 0%;
    right: 0%;
    padding: 0.2rem 0.4rem;
}

#c-c-w-input{
    padding: 0.4rem 0.8rem;
    margin-top: 0.5rem;
    float: left;
}

#c-c-w-confirm{
    float: left;
    margin-left: 40%;
    margin-top: 1rem;
    padding: 0.2rem 0.4rem;
}

.policy-window{
    position:absolute;
    left: 5%;
    top: 5%;
    width: 86%;
    height: 88%;
    z-index: 120;
    background-color: #717171;
    padding: 2%;
    color: #ffffff;
}

.policy-window-close{
    position: absolute;
    top: 0%;
    right: 0%;
    padding: 0.5rem;
}

.protocol-window{
    position:absolute;
    left: 5%;
    top: 5%;
    width: 86%;
    height: 88%;
    z-index: 120;
    background-color: #717171;
    padding: 2%;
    color: #ffffff;
}

.protocol-window-close{
    position: absolute;
    top: 0%;
    right: 0%;
    padding: 0.5rem;
}

#healthy-notice{
    z-index: 99998;
    position:absolute;
    width: 100%;
    height: 100%;
}

.navigation{
    width: 100%;
    height: 5%;
    background-color: #45c1b8;
}

.navigation-div{
    float: left;
    margin-left: 5%;
    width: 13%;
    height: 100%;
    position: relative;
}
.navigation-div-a{
    float: left;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    color: #ffffff;
}

.introduce{
    padding: 2% 4%;
}
.introduce-b{
    font-size: 2rem;
}
.introduce-p{
    font-size: 1.5rem;
    line-height: 2.2rem;
    margin-top: 2%;
    text-indent: 2em;
}

.content{
    width: 100%;
    height: 95%;
    float: left;
    margin-top: -1px;
}
.content-left{
    float: left;
    width: 20%;
    height: 100%;
    background-color: #45c1b8;
}
.content-left-label{
    float: left;
    width: 100%;
    height: 5%;
    position: relative;
}
.content-left-label-a{
    float: left;
    width: 100%;
    height: 100%;
    font-size: 1.6rem;
    color: #ffffff;
}
.content-right{
    float: left;
    width: 80%;
    height: 100%;
}
.content-right img{
    width: 100%;
}
.record{
    position: fixed;
    bottom: 0%;
    left: 0%;
}
.sns-note{
    position:absolute;
    top:-15%;
}

.personal{
    width: 100%;
    text-align: center;
}
.personal-url{
    width: 100%;
    margin-top: 5%;
    float: left;
}
.personal-url-i{
    float: left;
    width: 62%;
    font-size: 1.5rem;
    line-height: 2.5rem;
}
.personal-url-b{
    float: left;
    font-size: 1.2rem;
    width: 15%;
    height: 2.7rem;
}
.collect{
    float: left;
    margin-top: 5%;
}
.collect-list{
    margin-top: 1%;
}
#website-logout{
    float: right;
    margin-bottom: 4%;
    color: red;
}