:root {  
    --color: 3, 107, 110; /* 定义颜色变量 */  
}  
@font-face {  
    font-family: 'custom'; /* 自定义字体名称 */  
    src: url('custom.ttf'); /* 自定义字体文件路径，适用于chrome、firefox、opera、Safari, Android, iOS 4.2+ */  
}  

/* 定义盒子线框 */  
.box {  
    border: 2px solid rgb(var(--color)); /* 设置盒子线框线条大小（粗细）、颜色，颜色使用变量 */  
    height: 446px;  /* 盒子线框的高度 */
    width: 600px;  /* 盒子线框的宽度 */
    margin: 0 auto; /* 让整个页面水平居中 */  
    position: relative; /* 为内部元素设置相对定位 */  
    margin-bottom: 25px;/* 设置盒子线框的下边界 */
}  

/* 定义印章圆圈 */  
.stamp {  
    border: 5px solid red;  /* 设置印章圆圈线条大小（粗细）、颜色 */  
    height: 125px;  /* 印章圆圈高度 */  
    width: 125px;  /* 印章圆圈宽度 */  
    border-radius: 50%; /* 创建圆形 */  
    position: absolute; /* 使用绝对定位 */  
    right: 35px;  /* 印章圆圈距离右边位置 */  
    top: 50px;  /* 印章圆圈距离顶部位置 */
    z-index: 1; /* 让印章圆圈在最顶层，不被其它元素遮挡 */  
    transform: rotate(-25deg); /* 印章圆圈逆时针旋转25度 */  
    display: flex; /* 为文字设置flex布局 */  
    justify-content: center; /* 文字水平居中 */  
    align-items: center; /* 文字垂直居中 */  
}  

/* 定义“预约成功”的样式 */
.stamp p {  
    color: red;  /* 文本颜色 */
    font-weight: bold;  /* 文本加粗 */
    font-size: 27px;   /* 字体大小*/
    text-align: center;  /* 水平居中 */
}  

/* 定义顶部方块的样式 */  
.top {  
    background-color: rgb(var(--color));  /* 设置顶部方块颜色，颜色使用变量 */  
    height: 70px;  /* 顶部方块高度 */  
    width: 570px;  /* 顶部方块宽度 */  
    position: absolute; /* 设置顶部方块为绝对定位，以便在盒子线框中进行定位 */ 
    top: 10px; /* 顶部方块距离盒子线框顶部的距离 */  
    left: 50%; /* 顶部方块水平居中于盒子线框 */  
    transform: translateX(-50%); /* 通过 transform 属性实现水平居中 */ 
}  

/* 定义医院logo图片的样式 */
.image {  
    height: 66px; /* logo图片的高度限制在66并且比例不变 */  
    position: absolute; /* 设置logo图片为绝对定位，以便在顶部方块中进行定位 */  
    left: 18%; /* logo图片水平方向的位置 */  
    top: 3%; /* logo图片垂直方向的位置 */  
}  

/* 医院名文字样式 */  
.top-text {  
    color: white; /* 文字颜色为白色 */  
    font-size: 25px; /* 文字大小 */  
    font-weight: bold; /* 文字加粗 */  
    position: absolute; /* 设置文字为绝对定位，以便在顶部方块中进行定位 */  
    left: 52%; /* 文字水平方向处于顶部方块的位置 */  
    top: 34%; /* 文字垂直方向处于顶部方块的位置 */  
    transform: translate(-50%, -50%);  /* 将文字的中心点对齐到指定的位置 */  
}  

/* 线段初始样式 */
.line {  
    background-color: white; /* 线段的背景颜色为白色 */  
    width: 250px; /* 线段的宽度 */  
    height: 2px; /* 线段的高度 */  
    position: absolute; /* 设置线段为绝对定位，以便在顶部方块中进行定位 */  
    left: 170px; /* 线段水平方向处于顶部方块的百分比处 */  
    top: 40px; /* 线段垂直方向处于顶部方块的百分比处 */  
}  

/* 医院英文名文字样式 */  
.top-en-text {  
    color: white; /* 文字颜色为白色 */  
    font-size: 18px; /* 文字大小 */  
    font-weight: bold; /* 文字加粗 */  
    position: absolute; /* 设置文字为绝对定位，以便在顶部方块中进行定位 */  
    left: 52%; /* 文字水平方向处于顶部方块的百分比处 */  
    top: 75%; /* 文字垂直方向处于顶部方块的百分比处 */  
    transform: translate(-50%, -50%);  /* 将文字的中心点对齐到指定的位置 */  
}  

.title {  /* 定义“疾病咨询预约挂号中心”的样式 */
    color: rgb(var(--color));  /* 文本颜色使用颜色变量 */
    font-weight: bold;  /* 文本加粗 */
    font-family: 'custom'; /* 使用自定义字体 */  
    font-size: 30px;  /* 字体大小*/
    text-align: center;  /* 水平居中 */
    margin-top: 90px; /* 标题到盒子线框顶部距离 */  
    text-shadow: 0 0 2px black; /* 文字加描边 */
    letter-spacing: 5px; /* 文字间距 */ 
}  

/* 创建提醒线框 */  
.reminder {  
    border-left: 0; /* 左边框大小为0 */  
    border-right: 0; /* 右边框大小为0 */  
    border-top: 2px solid black; /* 上边框大小为2 */  
    border-bottom: 2px solid black; /* 下边框大小为2 */  
    width: 525px;  /* 提醒线框的宽度 */  
    height: 30px;  /* 提醒线框的高度 */  
    position: absolute;  /* 绝对定位 */  
    margin-top: 15px; /* 距离盒子线框顶部25 */  
    margin-left: 50%; /* 让线框水平居中 */  
    transform: translateX(-50%); /* 通过位移让提醒线框水平居中 */  
    display: flex; /* 使用flex布局让文字垂直居中 */  
    justify-content: center; /* 文字水平居中 */  
    align-items: center; /* 文字垂直居中 */  
}  

/* 在提醒线框里面创建文字 */  
.reminder-text {  
    font-weight: bold;  /* 文字加粗 */ 
    font-size: 18px;  /* 文字大小 */ 
    letter-spacing: 2px;  /* 文字间距 */ 
}  

/* 初始化标签样式 */  
.label {  
    position: absolute; /* 设置标签为绝对定位，以便在盒子线框中进行定位 */  
    transform: translateX(-50%); /* 通过 transform 属性实现水平居中 */  
    font-size: 20px; /* 文字大小 */  
    font-weight: bold; /* 文字加粗 */ 
}  

/* 姓名标签样式 */  
.label-name {  
    left: 11%; /* 标签水平方向处于盒子线框的位置 */  
    top: 43%; /* 标签垂直方向处于盒子线框的位置 */  
}  

/* 年龄标签样式 */  
.label-age {  
    left: 40%; /* 标签水平方向处于盒子线框的位置 */  
    top: 43%; /* 标签垂直方向处于盒子线框的位置 */  
}  

/* 电话标签样式 */  
.label-tel {  
    left: 65%; /* 标签水平方向处于盒子线框的位置 */  
    top: 43%; /* 标签垂直方向处于盒子线框的位置 */  
}  

/* 科室标签样式 */  
.label-office {  
    left: 11%; /* 标签水平方向处于盒子线框的位置 */  
    top: 53%; /* 标签垂直方向处于盒子线框的位置 */  
}  

/* 预约号标签样式 */  
.label-number {  
    left: 38%; /* 标签水平方向处于盒子线框的位置 */  
    top: 53%; /* 标签垂直方向处于盒子线框的位置 */  
}  

/* 预约时间标签样式 */  
.label-time {  
    left: 68%; /* 标签水平方向处于盒子线框的位置 */  
    top: 53%; /* 标签垂直方向处于盒子线框的位置 */  
}  

/* 初始化输入框样式 */  
.input {  
    border: none; /* 输入框无边框 */  
    border-bottom: 2px solid black; /* 输入框底部有边框，边框大小为2 */  
    height: 30px; /* 输入框的高度 */  
    position: absolute; /* 设置输入框为绝对定位，以便在盒子线框中进行定位 */ 
    transform: translate(-50%, -50%); /* 通过 transform 属性实现水平和垂直居中 */  
    outline: none; /* 在输入框有焦点的时候不要显示边框 */  
    font-size: 20px; /* 文字大小为20 */  
    /* font-weight: bold; 文字加粗 */  
    text-align: center; /* 文字居中 */  
}  
  
/* 姓名输入框样式 */  
.input-name {  
    width: 100px; /* 输入框宽度变为150 */   
    left: 24%; /* 输入框水平方向处于盒子线框的位置 */  
    top: 46%; /* 输入框垂直方向处于盒子线框的位置 */  
}  
    
/* 年龄输入框样式 */  
.input-age {  
    width: 70px; /* 输入框宽度变为150 */  
    left: 51%; /* 输入框水平方向处于盒子线框的位置 */  
    top: 46%; /* 输入框垂直方向处于盒子线框的位置 */  
}  
      
    
/* 电话输入框样式 */  
.input-tel {  
    width: 135px; /* 输入框宽度变为150 */  
    left: 82%; /* 输入框水平方向处于盒子线框的位置 */  
    top: 46%; /* 输入框垂直方向处于盒子线框的位置 */  
}  
    
/* 科室输入框样式 */  
.input-office {  
    width: 80px; /* 输入框宽度变为150 */  
    left: 134px; /* 输入框水平方向处于盒子线框的位置 */  
    top: 56%; /* 输入框垂直方向处于盒子线框的位置 */  
}  
    
/* 预约号输入框样式 */  
.input-number {  
    width: 70px; /* 输入框宽度变为150 */  
    left: 51%; /* 输入框水平方向处于盒子线框的位置 */  
    top: 56%; /* 输入框垂直方向处于盒子线框的位置 */  
    font-weight: bold; /*  文字加粗 */  
    color: red; /* 文本颜色为红色 */  
}  
    
/* 预约时间输入框样式 */  
.input-time {  
    width: 105px; /* 输入框宽度变为150 */  
    left: 85%; /* 输入框水平方向处于盒子线框的位置 */  
    top: 56%; /* 输入框垂直方向处于盒子线框的位置 */  
}  

/* 创建流程线框样式 */
.process {  
    border: 2px solid rgb(175, 175, 175);  
    height: 60px;  
    width: 500px;  
    border-radius: 10px; /* 创建圆角 */  
    left: 50%; /* 流程线框水平方向处于盒子线框的位置 */  
    top: 65%; /* 流程线框垂直方向处于盒子线框的位置 */  
    transform: translateX(-50%); /* 通过 transform 属性实现水平居中 */  
    display: flex; /* 使用flex布局让文字垂直居中 */  
    justify-content: center; /* 文字水平居中 */  
    align-items: center; /* 文字垂直居中 */  
    position: absolute; /* 设置流程线框为绝对定位，以便在盒子线框中进行定位 */ 
}  
/* 在流程线框里面创建文字 */  
.process-text {  
    color: black; /* 其它字不设置颜色 */  
    font-weight: bold;  /*  文字加粗 */  
    font-size: 18px;  /* 文字大小 */  
    letter-spacing: 1px;  /* 文字间距 */  
    text-align: center; /* 文字水平居中 */  
}  

/* “就诊流程：”这几个字为红色 */  
.process-text span {  
    color: red;  /* 文字颜色 */  
}  

/* 创建底部方块样式 */
.bottom {  
    background-color: rgb(var(--color));  /* 设置底部方块颜色，颜色使用变量 */  
    height: 70px;  /* 底部方块的高度 */  
    width: 570px;  /* 底部方块的宽度 */  
    left: 50%; /* 底部方块水平方向处于盒子线框的位置 */  
    top: 82%; /* 底部方块垂直方向处于盒子线框的位置 */  
    transform: translateX(-50%); /* 通过 transform 属性实现水平居中 */  
    position: absolute; /* 设置底部方块为绝对定位，以便在盒子线框中进行定位 */ 
}  

/* 定义医院地址线框样式与其中文字样式 */  
.hospital-address {  
    border: 1px solid white;   /* 设置医院地址线框线条大小（粗细）、颜色 */ 
    height: 30px;  /* 医院地址线框高度 */  
    width: 100px;  /* 医院地址线框宽度 */  
    margin-left: 10px; /* 让医院地址线框距离底部方块左边10px */  
    position: absolute; /* 使用绝对定位 */  
    top: 50%; /* 让医院地址线框垂直居中于底部方块 */  
    transform: translateY(-50%); /* 使用translateY实现垂直居中 */  
    display: flex; /* 为文字设置flex布局 */  
    justify-content: center; /* 文字水平居中 */  
    align-items: center; /* 文字垂直居中 */  
}  

/* 定义医院地址线框内文字段落样式 */  
.hospital-address p {  
    color: white;  /* 文字颜色 */
    font-weight: bold;  /*  文字加粗 */  
    font-size: 20px;  /* 文字大小 */  
    text-align: center;  /* 文字水平居中 */  
}  

/* 定义医院详细地址文字样式 */  
.bottom-text {  
    color: white; /* 文字颜色为白色 */  
    font-size: 20px; /* 文字大小 */  
    font-weight: bold; /* 文字加粗 */  
    position: absolute; /* 设置文字为绝对定位，以便在顶部方块中进行定位 */  
    left: 22%; /* 文字水平方向处于顶部方块的30%处 */  
    top: 30%; /* 文字垂直方向处于顶部方块的20%处 */  
}