@charset "utf-8";
/* CSS Document */

/* 全局样式 */
* {
    font: 14px/1.5 '微软雅黑'; /* 全局字体为微软雅黑，字号13px，行高1.5 */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -box-sizing: border-box; /* 设置盒模型为border-box，确保元素包括padding和border */
    padding: 0; /* 清除所有元素的默认内边距 */
    margin: 0; /* 清除所有元素的默认外边距 */
    list-style: none; /* 清除列表项的默认样式 */
    box-sizing: border-box; /* 统一使用border-box盒模型 */
}

body, html {
    height: 100%; /* 使body和html元素的高度填满全屏 */
    overflow: hidden; /* 禁止页面滚动 */
}

body {
    background: linear-gradient(180deg, #93defe, #00a9e0); /* 设置背景颜色为淡蓝色 */
    height: 100%; /* 使 body 填满整个屏幕 */
    display: flex; /* 启用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin: 0; /* 去除默认边距 */
    overflow: hidden; /* 禁止滚动 */
}

/* 粒子背景容器 */
.bg-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 保证在登录框后面 */
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    /* 粒子通用样式 */
    .bg-bubbles li {
        position: absolute;
        list-style: none;
        display: block;
        width: 40px;
        height: 40px;
        background-color: rgba(39, 169, 227, 0.5); /* 使用你的主题蓝，透明度降低 */
        bottom: -160px;
        animation: square 15s infinite; /* 调用动画 */
        transition-timing-function: linear;
        border-radius: 10%; /* 微微圆角，想要圆形改成 50% */
    }

        /* 单独设置每个粒子的位置、大小、速度，制造随机感 */
        .bg-bubbles li:nth-child(1) {
            left: 10%;
        }

        .bg-bubbles li:nth-child(2) {
            left: 20%;
            width: 80px;
            height: 80px;
            animation-duration: 12s;
            animation-delay: 2s;
        }

        .bg-bubbles li:nth-child(3) {
            left: 25%;
            animation-delay: 4s;
        }

        .bg-bubbles li:nth-child(4) {
            left: 40%;
            width: 60px;
            height: 60px;
            animation-duration: 22s;
            background-color: rgba(255, 255, 255, 0.25);
        }

        .bg-bubbles li:nth-child(5) {
            left: 70%;
        }

        .bg-bubbles li:nth-child(6) {
            left: 80%;
            width: 120px;
            height: 120px;
            animation-delay: 3s;
            background-color: rgba(255, 255, 255, 0.2);
        }

        .bg-bubbles li:nth-child(7) {
            left: 32%;
            width: 160px;
            height: 160px;
            animation-delay: 7s;
        }

        .bg-bubbles li:nth-child(8) {
            left: 55%;
            width: 20px;
            height: 20px;
            animation-delay: 15s;
            animation-duration: 40s;
        }

        .bg-bubbles li:nth-child(9) {
            left: 25%;
            width: 10px;
            height: 10px;
            animation-delay: 2s;
            animation-duration: 40s;
            background-color: rgba(255, 255, 255, 0.3);
        }

        .bg-bubbles li:nth-child(10) {
            left: 90%;
            width: 160px;
            height: 160px;
            animation-delay: 11s;
        }

/* 定义上浮动画 */
@keyframes square {
    0% {
        transform: translateY(0);
    }

    30% {
        opacity: 0.7;
    }

    100% {
        transform: translateY(-900px) rotate(600deg);
        opacity: 0.0;
    }
}

a {
    color: #27A9E3; /* 设置链接文字颜色为蓝色 */
    text-decoration: none; /* 去掉链接的下划线 */
    cursor: pointer; /* 设置鼠标悬浮时为指针样式 */
}

img {
    border: none; /* 去掉图片的默认边框 */
}

/* 登录框外层容器 */
.login_box {
    width: 1050px; /* 设置宽度 */
    display: flex; /* 启用 Flexbox 布局 */
    justify-content: space-between; /* 水平排列图片和登录框 */
    align-items: center; /* 垂直居中图片和登录框 */
    margin-top: auto; /* 自动计算上边距 */
    margin-bottom: auto; /* 自动计算下边距 */
    margin-top: -50px; /* 向上偏移50px */
    margin-left: -25px; /* 向左偏移50px */
}

/* 左侧图片 */
.login_box .login_l_img {
  float: left; /* 使元素浮动 */
  width: 432px; /* 宽度设为432px */
  height: 440px; /* 高度设为440px */
  margin-right: 100px; /* 左边距50px */
}

.login_box .login_l_img img {
    width: 500px; /* 图片宽度500px */
    height: 440px; /* 图片高度440px */
}


/* 登录框样式 */
.login {
    height: 360px; /* 高度设为360px */
    width: 400px; /* 宽度设为400px */
    padding: 50px; /* 内边距50px */
    background: linear-gradient(45deg, #ffffff, #E9E9E9); /* 背景从白色渐变到稍深的灰色 */
    border-radius: 15px; /* 圆角为6px */
    box-sizing: border-box; /* 使用border-box盒模型 */
    float: right; /* 元素浮动到右边 */
    margin-right: 50px; /* 右边距50px */
    position: relative; /* 设置相对定位 */
    margin-top: 50px; /* 上边距50px */
}

/* 登录logo样式 */
.login_logo {
    width: 120px; /* 宽度120px */
    height: 120px; /* 高度120px */
    border: 5px solid #93defe; /* 边框5px，颜色为淡蓝色 */
    border-radius: 100px; /* 圆形的边框 */
    background: #fff; /* 背景为白色 */
    text-align: center; /* 文字居中 */
    line-height: 110px; /* 设置行高为110px，垂直居中 */
    position: absolute; /* 绝对定位 */
    top: -60px; /* 距离顶部60px */
    right: 140px; /* 距离右侧140px */
}

/* 登录框内用户名输入框的样式 */
.login_name {
    width: 100%; /* 宽度100% */
    float: left; /* 左浮动 */
    text-align: center; /* 文本居中 */
    margin-top: 25px; /* 上边距20px */
    color: #444; /* 设置文字颜色为深灰色 */
}

.login_name p {
    width: 100%; /* 宽度100% */
    text-align: center; /* 文本居中 */
    font-size: 18px; /* 字号18px */
    color: #27A9E3; /* 字体颜色深灰色 */
    padding: 10px 0 20px; /* 上内边距10px，下内边距20px */
    font-weight: bold;
}

.login_logo img {
    width: 60px; /* 图片宽度60px */
    height: 60px; /* 图片高度60px */
    display: inline-block; /* 设置为内联块元素 */
    vertical-align: middle; /* 垂直居中对齐 */
}

/* 输入框的公共样式 */
input[type=text], input[type=file], input[type=password], input[type=email], select {
    border: 1px solid #DCDEE0; /* 边框1px，颜色为灰色 */
    vertical-align: middle; /* 垂直居中对齐 */
    border-radius: 3px; /* 圆角为3px */
    height: 50px; /* 高度50px */
    padding: 0px 16px; /* 左右内边距16px */
    font-size: 14px; /* 字号14px */
    /*color: #555555;*/ /* 字体颜色为灰色 */
    outline: none; /* 去掉输入框焦点时的轮廓 */
    width: 100%; /* 宽度100% */
    margin-bottom: 15px; /* 下边距15px */
    line-height: 50px; /* 行高50px，使文本垂直居中 */
    color: #888; /* 设置字体颜色为浅灰色 */
    text-align: center; /* 水平居中 */
}

/* 输入框获取焦点时的样式 */
input[type=text]:focus, input[type=file]:focus, input[type=password]:focus, input[type=email]:focus, select:focus {
    border: 1px solid #27A9E3; /* 获取焦点时边框颜色为蓝色 */
}

/* 提交按钮的样式 */
input[type=submit], input[type=button] {
    display: inline-block; /* 设置为内联块元素 */
    vertical-align: middle; /* 垂直居中对齐 */
    padding: 12px 24px; /* 上下内边距12px，左右24px */
    margin: 0px; /* 去掉外边距 */
    font-size: 16px; /* 字号16px */
    line-height: 24px; /* 行高24px */
    text-align: center; /* 文字居中 */
    white-space: nowrap; /* 防止文本换行 */
    vertical-align: middle; /* 垂直居中 */
    cursor: pointer; /* 设置鼠标悬浮时为指针样式 */
    color: #ffffff; /* 字体颜色为白色 */
    background: linear-gradient(45deg, #27A9E3, #80c7e5);
    border-radius: 10px; /* 圆角3px */
    border: none; /* 去掉边框 */
    -webkit-appearance: none; /* 去掉输入框的默认样式 */
    outline: none; /* 去掉焦点时的轮廓 */
    width: 100%; /* 宽度100% */
    font-weight: bold;
}

/* 页面版权信息 */
.copyright {
    font-size: 14px; /* 字号14px */
    color: #fff; /* 字体颜色为白色 */
    display: block; /* 设置为块级元素 */
    width: 100%; /* 宽度100% */
    float: left; /* 左浮动 */
    text-align: center; /* 文本居中 */
    margin-top: 60px; /* 上边距60px */
}

/* 密码框的样式 */
#password_text {
    border: 1px solid #DCDEE0; /* 边框1px，颜色为灰色 */
    vertical-align: middle; /* 垂直居中对齐 */
    border-radius: 3px; /* 圆角3px */
    height: 50px; /* 高度50px */
    padding: 0px 16px; /* 左右内边距16px */
    font-size: 14px; /* 字号14px */
    color: #888; /* 字体颜色为浅灰色 */
    outline: none; /* 去掉焦点时的轮廓 */
    width: 100%; /* 宽度100% */
    margin-bottom: 15px; /* 下边距15px */
    display: block; /* 设置为块级元素 */
    line-height: 50px; /* 行高50px */
}