body {

    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
}

.main-content {
    display: flex;
    padding: 10px;
    padding-bottom: 10px;
    background-color: rgb(255, 255, 255);
    align-items: center;
}

.main-title {
    font-size: 35px; /* 字体大小 */
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #333; /* 字体颜色 */
    font-weight: 600;
    margin-bottom: 18px; /* 底部外边距 */
}

.user-welcome-one {
    font-size: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #000000;
    /* margin-bottom: 18px; */
    margin: 0;
    margin-left: 10px;
    font-weight: bold;
    display: block;
}

.user-welcome-two {
    font-size: 15px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #999999;
    /* margin-bottom: 18px; */
    margin: 0;
    margin-left: 10px;
    font-weight: bold;
    display: block;
}

.user-profile-one-line {
    color: #727272;
}

.main-description {
    font-size: 13px; /* 字体大小 */
    color: #666; /* 字体颜色 */
    margin-bottom: 20px; /* 底部外边距 */
}

.search-form {
    display: flex;
    background-color: #ffffff; /* 设置背景颜色 */
}

.form-input {
    flex: 1;
    padding: 13px;
    border: 1px solid #e0e0e0;
    background-color: #e9e9e9;
    border-radius: 10px;
    flex: 1;
    padding: 13px;
    border: 1px solid #e0e0e0;
    border-radius: 10px 0 0 10px;
    font-size: 16px;
    box-sizing: border-box;
    
}

.form-input:focus {
    background-color: #fff; /* 获取焦点时的背景颜色 */
    color: #000; /* 获取焦点时的字体颜色 */
    outline: none; /* 去除默认的聚焦边框 */
    border-color: #007bff; /* 自定义聚焦边框颜色 */
}

.form-button {
    white-space: nowrap;
    width: 65px;         /* 固定宽度 */
    border-radius: 0 10px 10px 0;
    border: none;
    background: #007aff;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
}

.form-button:hover {
    background-color: #f1f1f1;
}

.form-button img {
    width: 25px;
    height: 22px;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    position: absolute;
}

.title1, .title2, .title3, .title4 { 
    flex-direction: column; 
    background-color: #f1f1f1;
    padding: 2px 10px; /* 上下内边距为2px，左右内边距为5px */
    text-align: left; /* 文本居中对齐 */
    margin-top: 10px; /* 确保内容不被固定的header遮挡 */
}

.title1 p, .title2 p, .title3 p, .title4 p {
    padding-top: 1px;
    margin: 0px;
    font-size: 18px;
    font-weight: bold;
    color: #3d3d3d;
    box-sizing: border-box;
}

.order-btn {
    border: none;
    background-color: transparent;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    box-shadow: none;
    transition: none;
    padding: 0;
    width: 100%;
    display: contents;
}

.user-signin {
    display: flex;
    width: 100%;
    text-align: center;
    flex-direction: column;
}

.order-btn-span {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}


.left {
    text-align: left; /* 左对齐 */
}

.right {
    text-align: right; /* 右对齐 */
}

/*人工服务容器*/

.list-card-1 {
    display: flex;
    flex-direction: row;
    padding: 10px;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    margin-top: 10px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
}

.user-image {
    display: flex; /* 如果需要居中，可以用 flex */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    width: 100px; /* 设置容器的宽度 */
    height: 100px; /* 设置容器的高度 */
    border-radius: 50%; /* 容器圆形化（如果需要容器也显示圆） */
    overflow: hidden; /* 确保图片不会超出容器 */
    background-color: #f9f9f9; /* 如果图片未加载，显示背景色 */
}

.circle-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    /* border-radius: 50%; */
}

.user-profile {
    display: flex;
    flex-direction: row;
}

.list-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: rgb(255, 255, 255);
    margin-top: 10px;
    box-sizing: border-box;
}

.order-list,
.rengong-card,
.fangan-card,
.liuyaban-card,
.blog-card,
.hezuo-card {
    display: flex;
    flex-direction: column;
    padding: 10px;

    background-color: rgb(255, 255, 255);
    margin-top: 10px;
    box-sizing: border-box;
}

.card-link {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    padding: 1px 10px; /* 调整上下内边距为5px，左右内边距为10px */
    background-color: rgb(255, 255, 255); /* 背景颜色 */
    text-decoration: none; /* 去掉链接的下划线 */
    margin-top: 10px;
    box-sizing: border-box;
}

.card-link p{
    font-size: 17px; /* 设置字体大小 */
    padding: 1px; /* 内边距 */
    color: #333; /* 设置字体颜色 */
    border-bottom: 1px solid #ccc; /* 底部边框 */
}

/* 悬停效果 */


.image-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    padding-bottom: 5px;
    margin-bottom: 7px; /* 每个图片容器之间的下外边距 */
    text-decoration: none; /* 去掉链接的下划线 */
    color: inherit; /* 继承父元素颜色 */
}

.image-container-copy {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    padding-bottom: 5px;
    margin-bottom: 7px; /* 每个图片容器之间的下外边距 */
    text-decoration: none; /* 去掉链接的下划线 */
    color: inherit; /* 继承父元素颜色 */
}

.image-container span {
    flex-grow: 1; /* 占据剩余空间 */
    font-size: 17px; /* 设置字体大小 */
    color: #333; /* 设置字体颜色 */
    align-items: center; /* 垂直居中对齐 */
    border-bottom: 1px solid #ccc; /* 底部边框 */
    padding-bottom: 3px;
}

.image-container-copy span {
    flex-grow: 1; /* 占据剩余空间 */
    font-size: 17px; /* 设置字体大小 */
    color: #333; /* 设置字体颜色 */
    display: flex; /* 设置为flex布局 */
    align-items: center; /* 垂直居中对齐 */
    
}

.image-container img {
    max-width: 30px; /* 调整图片宽度 */
    height: auto; /* 保持图片比例 */
    margin-right: 10px; /* 图片和文字之间的间距 */
}

.text-and-icon {
    display: flex;
    align-items: center;
    flex-grow: 1;
    border-bottom: 1px solid #ccc; /* 底部边框 */
    padding-bottom: 3px;
}

.text-and-icon span {
    flex-grow: 1; /* 占据剩余空间 */
    font-size: 17px; /* 设置字体大小 */
    color: #333; /* 设置字体颜色 */
    display: flex; /* 设置为flex布局 */
    align-items: center; /* 垂直居中对齐 */
}


.chevron {
    width: 24px;
    height: 24px;
    fill: #666;
    transition: transform 0.3s ease;
}

footer {
    background-color: #ffffff;
    color: #474747;
    text-align: center;
    width: 100%;
    padding: 5px 0;
    font-size: 10px;
    margin-top: 100px; /* 距离上一个容器100px */
}

.card-content {
    display: none;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
}