/* pages/student/dm/dm.wxss */
.container {
    height: 100vh;
    background-size: cover;
    background-position: center;
}
.card-image {
    position: absolute;     /* 绝对定位 */
    left: 210px;            /* 距离左侧200px */
    top: 510px;             /* 距离顶部150px */
    width: 150px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 2;             /* 设置z-index，确保在前面 */
}
.green-image {
    position: absolute;     /* 绝对定位 */
    left: -30px;            /* 距离左侧200px */
    top: -80px;             /* 距离顶部150px */
    width: 300px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 2;             /* 设置z-index，确保在前面 */
}
.green-image1 {
    position: absolute;     /* 绝对定位 */
    left: -50px;            /* 距离左侧更左边，例如减小到 -100px */
    top: -90px;             /* 距离顶部更高，例如减小到 -100px */
    width: 350px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 2;             /* 设置z-index，确保在前面 */
}
.green-image2 {
    position: absolute;     /* 绝对定位 */
    left: -20px;            /* 距离左侧更左边，例如减小到 -100px */
    top: -45px;             /* 距离顶部更高，例如减小到 -100px */
    width: 350px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 2;             /* 设置z-index，确保在前面 */
}
.name {
    position: absolute;      /* 绝对定位 */
    left: 20px;             /* 距离左侧50px */
    top:45px;              /* 距离顶部50px */
    font-size: 24px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color:#fdc904 ;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 4;
    opacity: 0.9;
}
.circle1 {
    width: 250px;  /* 圆形的宽度 */
    height: 250px; /* 圆形的高度 */
    background-color: #ffb6a4; /* 圆形的背景颜色 */
    border: 5px solid #f1e029;    /* 矩形的边框 */
    box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.5); /* 添加阴影 */
    border-radius: 50%; /* 将矩形变成圆形 */
    position: absolute;
    left: 50px;     
    top: 250px;     
    z-index: 3;
}
.hu-image {
    position: absolute;     /* 绝对定位 */
    left: 45px;            /* 距离左侧更左边，例如减小到 -100px */
    top: 250px;             /* 距离顶部更高，例如减小到 -100px */
    width: 270px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 5;             /* 设置z-index，确保在前面 */
}
.hu-image2 {
    position: absolute;     /* 绝对定位 */
    left: 65px;            /* 距离左侧更左边，例如减小到 -100px */
    top: 270px;             /* 距离顶部更高，例如减小到 -100px */
    width: 230px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 5;             /* 设置z-index，确保在前面 */
}
.dm-text {
    position: absolute;      /* 绝对定位 */
    left: 75px;             /* 距离左侧50px */
    top:345px;              /* 距离顶部50px */
    font-size: 40px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color:#767676 ;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 7;
    opacity: 0.9;
}
.card-text {
    position: absolute;      /* 绝对定位 */
    left: 200px;             /* 距离左侧50px */
    top:620px;              /* 距离顶部50px */
    font-size: 25px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color:#fdc904 ;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 7;
    opacity: 0.9;
}
.fanhui-image {
    position: absolute;     /* 绝对定位 */
    left: 0px;            /* 距离左侧200px */
    top: 0px;             /* 距离顶部150px */
    width: 70px;           /* 图片宽度 */
    height: auto;           /* 图片高度自适应 */
    z-index: 7;             /* 设置z-index，确保在前面 */
    
}
.grade1 {
    position: absolute;      /* 绝对定位 */
    left: 20px;             /* 距离左侧50px */
    top:45px;              /* 距离顶部50px */
    font-size: 24px;        /* 字号 */
    margin: 10px;           /* 边距 */
    line-height: 20px;      /* 行间距 */
    color:#fdc904 ;            /* 文本颜色 */
    font-weight: bold;
    padding: 10px;          /* 内边距 */
    z-index: 4;
    opacity: 0.9;
}