html,
        body {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: Arial, sans-serif;
            background: url(./image/bg.png) no-repeat center center /100% 100%;
        }

        .loginTitle {
            margin-bottom: 30px;
            text-align: left;
            margin: 12.9% auto 60px;
            width: 385px;
            height: 69px;
            font-family: PingFangSC-Semibold;
            font-size: 27px;
            color: #EBF1FF;
            font-weight: 600;
            background: url(./image/loginTitle.png) no-repeat center center /100% 100%;
        }

        .container {
            margin: 0 auto;
            max-width: 460px;
            padding: 40px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            background-image: linear-gradient(180deg, rgba(48, 101, 181, 0.22) 0%, rgba(83, 122, 200, 0.11) 100%);
            border-radius: 2px;
            background: url(./image/Rectangle.png) no-repeat center center /100% 100%;
        }






        form {
            display: flex;
            flex-direction: column;
        }

        .usernameBox {
            margin-top: 30px;
            position: relative;
        }

        .passwordBox {
            position: relative;
        }

        .emailBox {
            position: relative;
            display: none;
        }

        .divLabel {
            position: absolute;
            top: 16px;
            left: 10px;
            display: inline-block;
            width: 24px;
            height: 24px;
        }

        .usernameLabel {
            background: url(./image/userIconL.png) no-repeat center center /100% 100%;
        }

        .passwordLabel {
            background: url(./image/passwordIconL.png) no-repeat center center /100% 100%;
        }

        .emailBoxLabel {
            top: 17px;
            background: url(./image/emailIconL.png) no-repeat center center /100% 100%;
        }

        input[type="text"],
        input[type="password"] {
            border: none;
            padding: 15px;
            box-sizing: border-box;
            width: 100%;
            margin-bottom: 22px;
            font-family: PingFangSC-Regular;
            font-size: 20px;
            color: #E5EDFF;
            font-weight: 400;
            text-indent: 1rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            outline: none;
            padding-left: 20px;
            border-radius: 2px;
        }

        input::placeholder {
            font-family: PingFangSC-Regular;
            font-size: 20px;
            color: rgba(255, 255, 255, 0.38);
            font-weight: 400;
            letter-spacing: 0;
        }

        input[type="text"] {
            position: relative;
            background: #0E5F64;
            background-size: 23px 23px;
            color: #fff;
        }

        input[type="text"]:focus {
            /* background: url(./image/userfocusBg.png) no-repeat center center /100% 100%; */
            color: #fff;
        }

        input[type="text"]:focus~.usernameLabel {
            background: url(./image/userIconL.png) no-repeat center center /100% 100%;
        }


        input[type="password"]:focus {
            /* background: url(./image/userfocusBg.png) no-repeat center center /100% 100%; */
            color: #fff;
        }

        input[type="password"]:focus+.passwordLabel {
            background: url(./image/passwordIconL.png) no-repeat center center /100% 100%;
            color: #fa0000;
        }



        input[type="password"] {
            background: #0E5F64;
            background-size: 24px 24px;
            color: #fff;
        }

        .rememberPasswordBox {
            margin-bottom: 42px;
            display: flex;
            align-items: center;
        }


        input[type=checkbox] {
            width: 16px;
            height: 16px;
            margin-top: 6px;
            position: relative;
        }

        input[type=checkbox]::after {
            position: absolute;
            top: 0;
            color: #000;
            width: 16px;
            height: 16px;
            display: inline-block;
            visibility: visible;
            padding-left: 0px;
            text-align: center;
            content: ' ';
            border-radius: 3px;
            background: rgba(13, 22, 33, 0.5);
            border-radius: 2px;
        }

        input[type=checkbox]:checked::after {
            /* content: "✓"; */
            /* content: "\2713"; */
            content: "\2714";
            color: #fff;
            font-size: 10px;
            line-height: 15px;
        }

        /* 原始的checkbox被隐藏 */
        input[type=checkbox] {
            visibility: hidden;
        }


        .rememberPasswordBox label {
            font-family: PingFangSC-Regular;
            margin-left: 10px;
            font-size: 14px;
            color: #E5EDFF;
            font-weight: 400;
        }




        button[type="submit"] {
            margin-top: 30px;
            background-color: #2AEEFF;
            border: none;
            cursor: pointer;
            padding: 22px;
            transition: background-color 0.3s ease;
            /* background-image: linear-gradient(135deg, #057AFF 0%, #085AFF 100%); */
            box-shadow: 0px 16px 30px 0px rgba(7, 95, 255, 0.27);
            border-radius: 2px;
            font-family: PingFangSC-Medium;
            font-size: 24px;
            color: #000;
            text-align: center;
            text-shadow: 0 1px 3px #000;
            font-weight: 500;
            margin-bottom: 40px;
        }





        button[type="submit"]:hover {
            /* background-color: rgb(123, 194, 30, 0); */
            background-color: #2AEEFF;
        }

        p {
            font-family: AlibabaPuHuiTi-Regular;
            font-size: 20px;
            color: #2AEEFF;
            letter-spacing: 0;
            text-align: center;
            font-weight: 400;
        }


        .footer {
            width: 180px;
            height: 63px;
            margin: 40px auto 0;
        }