#kefu {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 999;
    width: 50px;
    height: 50px;
}
#kefu .topBtn {
    width: 50px;
    height: 50px;
    background-color: #f2f2f2;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 28px 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    background-image: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20t%3D%221575450105478%22%20class%3D%22icon%22%20viewBox%3D%220%200%201220%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222883%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cpath%20d%3D%22M609.524%20103.522c-222.89%200-403.712%20178.472-403.712%20398.78%200%20220.31%20180.823%20398.782%20403.712%20398.782%20222.889%200%20403.712-178.473%20403.712-398.781%200-220.309-180.823-398.781-403.712-398.781v48.762c196.1%200%20354.95%20156.785%20354.95%20350.019s-158.85%20350.019-354.95%20350.019-354.95-156.785-354.95-350.02c0-193.233%20158.85-350.018%20354.95-350.018v-48.762z%22%20fill%3D%22%231296db%22%20p-id%3D%222884%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M786.578%20916.34c166.45-69.217%20278.408-231.055%20278.408-414.035%200-248.026-203.847-449.219-455.457-449.219-251.619%200-455.457%20201.188-455.457%20449.22%200%2055.397%2010.152%20109.367%2029.718%20159.975%204.855%2012.56-1.39%2026.677-13.949%2031.533-12.56%204.855-26.677-1.39-31.532-13.949a490.396%20490.396%200%200%201-3.042-8.078c-1.85%200.077-3.711%200.116-5.581%200.116C58.06%20671.903%200%20614.597%200%20543.903c0-65.005%2049.09-118.69%20112.68-126.91C153.65%20182.56%20360.56%204.324%20609.528%204.324c248.962%200%20455.877%20178.24%20496.85%20412.67%2063.583%208.225%20112.669%2061.907%20112.669%20126.909%200%2070.694-58.06%20128-129.686%20128-1.89%200-3.771-0.04-5.642-0.119-47.536%20129.702-148.34%20235.841-279.493%20290.027-1.161%2033.464-29.012%2060.24-63.2%2060.24-34.925%200-63.237-27.944-63.237-62.416%200-34.471%2028.312-62.415%2063.237-62.415%2017.892%200%2034.048%207.333%2045.551%2019.12z%22%20fill%3D%22%231296db%22%20p-id%3D%222885%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M609.528%20611.405c-58.933%200-112.056-10.644-158.472-28.342-16.123-6.147-30.211-12.702-42.138-19.208-6.926-3.777-11.447-6.59-13.437-7.972-19.24-13.373-44.428%205.446-37.059%2027.688%2035.296%20106.527%20136.054%20179.913%20251.106%20179.913%20115.05%200%20215.796-73.384%20251.092-179.913%207.37-22.243-17.82-41.062-37.06-27.687-1.99%201.383-6.51%204.195-13.434%207.972-11.926%206.505-26.012%2013.06-42.133%2019.207-46.413%2017.698-99.533%2028.342-158.465%2028.342z%22%20fill%3D%22%231296db%22%20p-id%3D%222886%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}
#kefu .topBtn:hover {
    transform: scale(1.05);
}
@keyframes wobble {
    0% { transform: rotate(0deg); opacity: 0.8; }
    30% { transform: rotate(-8deg); opacity: 0.9; }
    50% { transform: rotate(8deg); opacity: 1; }
    85% { transform: rotate(12deg); opacity: 0.9; }
    100% { transform: rotate(0deg); opacity: 1; }
}
#kefu span {
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(0px, 0px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background-position: center 10px;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    padding-top: 28px;
}
#kefu span:hover {
    transform: scale(1.08);
}
/* 微信客服 */
#kefu span.wechat {
    background-color: #2dc100;
    background-image: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}
#kefu span.wechat::before {
    content: "微信";
    font-size: 10px;
    margin-top: 3px;
}
#kefu span.wechat:hover .eweima {
    display: block;
}
#kefu span.wechat .eweima {
    position: absolute;
    right: 60px;
    bottom: 0;
    padding: 10px;
    background: white;
    width: 130px;
    height: 150px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    display: none;
}
#kefu span.wechat .eweima img {
    width: 110px;
    height: 110px;
    display: block;
}
#kefu span.wechat .eweima small {
    font-style: normal;
    text-align: center;
    color: #666;
    display: block;
    margin-top: 6px;
    font-size: 11px;
}
/* QQ客服 */
#kefu span.qq {
    background-color: #12b7f5;
    background-image: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}
#kefu span.qq::before {
    content: "QQ";
    font-size: 10px;
    margin-top: 3px;
}
#kefu span.qq:hover .tel {
    display: block;
}
#kefu span.qq .tel {
    position: absolute;
    right: 60px;
    bottom: 0;
    width: 120px;
    padding: 8px;
    background: rgba(0,0,0,0.85);
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    display: none;
}
#kefu span.qq .tel dt {
    font-weight: bold;
    margin-bottom: 3px;
}
#kefu span.qq .tel dd {
    font-size: 11px;
    margin: 0;
}
/* 在线客服 */
#kefu span.online-service {
    background-color: #667eea;
    background-image: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2212%22%20r%3D%221%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%221%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');
}
#kefu span.online-service::before {
    content: "在线";
    font-size: 10px;
    margin-top: 3px;
}
#kefu span.online-service:hover .online-tel {
    display: block;
}
#kefu span.online-service .online-tel {
    position: absolute;
    right: 60px;
    bottom: 0;
    width: 120px;
    padding: 8px;
    background: rgba(0,0,0,0.85);
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    display: none;
}
#kefu span.online-service .online-tel dt {
    font-weight: bold;
    margin-bottom: 3px;
}
#kefu span.online-service .online-tel dd {
    font-size: 11px;
    margin: 0;
}
#kefu .eweima,
#kefu .tel,
#kefu .online-tel {
    display: none;
}
/* 展开后的位置 - 从上到下：微信、QQ、在线 */
#showKfList:checked + label {
    background: #ddd;
    background-image: url('data:image/svg+xml;%20charset=utf8,%3Csvg%20t%3D%221575450105478%22%20class%3D%22icon%22%20viewBox%3D%220%200%201220%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%222883%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Cpath%20d%3D%22M609.524%20103.522c-222.89%200-403.712%20178.472-403.712%20398.78%200%20220.31%20180.823%20398.782%20403.712%20398.782%20222.889%200%20403.712-178.473%20403.712-398.781%200-220.309-180.823-398.781-403.712-398.781v48.762c196.1%200%20354.95%20156.785%20354.95%20350.019s-158.85%20350.019-354.95%20350.019-354.95-156.785-354.95-350.02c0-193.233%20158.85-350.018%20354.95-350.018v-48.762z%22%20fill%3D%22%231296db%22%20p-id%3D%222884%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M786.578%20916.34c166.45-69.217%20278.408-231.055%20278.408-414.035%200-248.026-203.847-449.219-455.457-449.219-251.619%200-455.457%20201.188-455.457%20449.22%200%2055.397%2010.152%20109.367%2029.718%20159.975%204.855%2012.56-1.39%2026.677-13.949%2031.533-12.56%204.855-26.677-1.39-31.532-13.949a490.396%20490.396%200%200%201-3.042-8.078c-1.85%200.077-3.711%200.116-5.581%200.116C58.06%20671.903%200%20614.597%200%20543.903c0-65.005%2049.09-118.69%20112.68-126.91C153.65%20182.56%20360.56%204.324%20609.528%204.324c248.962%200%20455.877%20178.24%20496.85%20412.67%2063.583%208.225%20112.669%2061.907%20112.669%20126.909%200%2070.694-58.06%20128-129.686%20128-1.89%200-3.771-0.04-5.642-0.119-47.536%20129.702-148.34%20235.841-279.493%20290.027-1.161%2033.464-29.012%2060.24-63.2%2060.24-34.925%200-63.237-27.944-63.237-62.416%200-34.471%2028.312-62.415%2063.237-62.415%2017.892%200%2034.048%207.333%2045.551%2019.12z%22%20fill%3D%22%231296db%22%20p-id%3D%222885%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M609.528%20611.405c-58.933%200-112.056-10.644-158.472-28.342-16.123-6.147-30.211-12.702-42.138-19.208-6.926-3.777-11.447-6.59-13.437-7.972-19.24-13.373-44.428%205.446-37.059%2027.688%2035.296%20106.527%20136.054%20179.913%20251.106%20179.913%20115.05%200%20215.796-73.384%20251.092-179.913%207.37-22.243-17.82-41.062-37.06-27.687-1.99%201.383-6.51%204.195-13.434%207.972-11.926%206.505-26.012%2013.06-42.133%2019.207-46.413%2017.698-99.533%2028.342-158.465%2028.342z%22%20fill%3D%22%231296db%22%20p-id%3D%222886%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}
/* 微信 - 最上面 */
#showKfList:checked ~ span.wechat {
    transform: translate(0, -180px);
    opacity: 1;
    visibility: visible;
}
/* QQ - 中间 */
#showKfList:checked ~ span.qq {
    transform: translate(0, -120px);
    opacity: 1;
    visibility: visible;
}
/* 在线客服 - 最下面 */
#showKfList:checked ~ span.online-service {
    transform: translate(0, -60px);
    opacity: 1;
    visibility: visible;
}
#showKfList {
    width: 50px;
    height: 50px;
    display: none;
}