@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(0deg, #f0f9ff, #00a9e0); /* 设置背景颜色为淡蓝色 */
    height: 100%; /* 使 body 填满整个屏幕 */
    display: flex; /* 启用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin: 0; /* 去除默认边距 */
    overflow: hidden; /* 禁止滚动 */
}
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: 20px; /* 上边距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 */
}