/* 弹窗的样式 */  
.modal {  
    position: fixed;  
    z-index: 1000;  
    left: 0;  
    top: 0;  
    width: 100%;  
    transform: translate();  
    height: 100%;  
    overflow: hide;  
    background-color: rgba(0, 0, 0, 0.5);  
    opacity: 0;  
    pointer-events: none;  
    transition: opacity 2s ease;  
}  

.modal.show {  
    opacity: 1;  
    pointer-events: auto;  
}  

.modal-content {  
    background-color: #ffffff;  
    margin: 15% auto;  
    padding: 20px;  
    border: 3px solid #933953;  
    width: 80%;  
    max-width: 400px;  
    text-align: left;  
    border-radius: 10px;  
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  
}  

.corner-image {  
    position: right;  
    top: 0px; /* 根据需要调整位置 */  
    right: 0px; /* 根据需要调整位置 */  
    width: 50px; /* 图像宽度 */  
    height: 69px; /* 图像高度 */  
    z-index: 100; /* 设置较高的值以显示在其他元素之上 */  
}  

/* 弹窗关闭按钮 */  
.close {  
    color: #aaaaaa;  
    float: right;  
    font-size: 28px;  
    font-weight: bold;  
    cursor: pointer;  
}  

.close:hover {  
    color: #000000;  
}  

/* 弹窗文本格式 */  
.modal-content p {  
    font-size: 18px;  
    color: #333333;  
    line-height: 1.6;  
    text-align: left; /* 左对齐文本 */  
    font-family: Arial, sans-serif; /* 字体 */  
}  

/* 按钮样式 */  
.modal-button {  
    padding: 10px 20px;  
    margin: 10px;  
    cursor: pointer;  
    border: none;  
    border-radius: 5px;  
    background-color: #359AD4;  
    color: white;  
    font-size: 16px;  
}  

.modal-button.modify {  
    background-color: #933953;  
}  

body {  
    opacity: 1;  
    transition: opacity 1s ease-in-out;  
}  

body.fade-out {  
    opacity: 0;  
}