.service {
    position: fixed;
    right: 0;
    top: 70%;
    transform: translateY(-50%);
    z-index: 99;
}

.service .service_icon {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service .service_icon .icon {
    font-size: 16px;
    width: 30px;
    height: 30px;

    fill: #fff !important; /* 强制白色填充 */
}

.service .service_item {
    margin-bottom: 2px;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
    background-color: #56b847 !important;
    width: 45px;
    height: 45px;
    color: #fff !important;
    box-sizing: border-box;
    padding: 0 8px; /* 可选：增加一点内边距 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 隐藏说明区域 */
.service .service_value_con {
    position: absolute;
    right: calc(100% + 12px); /* 初始隐藏位置 */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    white-space: normal; /* 允许换行，更安全 */
    /* ⚠️ 删除 overflow: hidden */
}

/* 悬停时显示 */
.service .service_item:hover .service_value_con {
    opacity: 1;
    visibility: visible;
    width: 275px;
    right: calc(100% + 12px); /* 留出箭头空间 */
}

/* 说明气泡样式 */
.service .service_value {
    position: relative;
    background-color: #56b847 !important;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

/* 三角箭头：用 ::after 实现 */
.service .service_value::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -12px; /* 超出右侧 12px，对齐 service_item */
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 12px solid #56b847; /* 和背景色一致 */
}

/* 文字排版 */
.service .service_value p {
    display: flex;
    margin: 2px 0;
}
.service .service_value span {
    margin-right: 6px;
}
.service .service_value a {
    color: white;
    text-decoration: none;
}
.dh{
    display: flex;
    align-items: center;
}