.qwf-sidebar {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
width: 70px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
overflow: visible; } .qwf-item {
display: block;
position: relative;
width: 100%;
height: 70px;
text-align: center;
border-bottom: 1px solid #eee;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
color: #333;
box-sizing: border-box;
padding-top: 10px;
}
.qwf-item:last-child {
border-bottom: none;
}
.qwf-item:hover {
background-color: #ff6a00; color: #fff;
}
.qwf-item:hover .qwf-text,
.qwf-item:hover i {
color: #fff;
} .qwf-icon i {
display: block;
font-size: 24px;
margin-bottom: 5px;
color: #ff6a00;
transition: color 0.3s ease;
}
.qwf-text {
display: block;
font-size: 12px;
line-height: 1.2;
} .qwf-popup {
position: absolute;
right: 70px; top: 0;
background: #fff;
box-shadow: -2px 0 10px rgba(0,0,0,0.1);
display: none; padding: 10px;
white-space: nowrap;
border-radius: 4px 0 0 4px;
z-index: 10000;
} .qwf-item:hover .qwf-popup {
display: block;
}  .qwf-phone .qwf-popup {
line-height: 70px; padding: 0 20px;
color: #ff6a00;
font-size: 18px;
font-weight: bold;
} .qwf-qq-list {
padding: 0;
min-width: 120px;
}
.qwf-qq-item {
padding: 10px 15px;
border-bottom: 1px solid #f0f0f0;
text-align: center;
}
.qwf-qq-item:last-child {
border-bottom: none;
}
.qwf-qq-title {
display: block;
font-size: 12px;
color: #666;
margin-bottom: 5px;
}
.qwf-qq-btn {
display: inline-block;
padding: 5px 10px;
background: #00a0e9; color: #fff; border-radius: 3px;
text-decoration: none;
font-size: 12px;
}
.qwf-qq-btn:hover {
background: #0081bb; color: #fff;
} .qwf-wechat-popup {
text-align: center;
padding: 15px;
}
.qwf-wechat-popup img {
display: block;
width: 120px;
height: 120px;
margin-bottom: 5px;
}
.qwf-wechat-popup p {
margin: 0;
font-size: 12px;
color: #666;
} .qwf-mobile-toggle {
display: none;
position: absolute;
left: -36px; top: 50%;
transform: translateY(-50%);
width: 36px;
padding: 10px 8px;
background: #ff6a00;
color: #fff;
font-size: 14px;
line-height: 1.2;
text-align: center;
border-radius: 4px 0 0 4px;
cursor: pointer;
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
box-sizing: border-box;
white-space: pre-wrap; word-wrap: break-word;
} @media (max-width: 768px) {
.qwf-sidebar {
right: -70px; transition: right 0.3s ease;
}
.qwf-sidebar.qwf-expanded {
right: 0; }
.qwf-mobile-toggle {
display: block; } .qwf-popup {
position: fixed;
right: 70px;
top: 50%;
transform: translateY(-50%);
border-radius: 4px;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
} .qwf-style-colorful .qwf-item {
color: #fff;
border-bottom-color: rgba(255,255,255,0.2);
}
.qwf-style-colorful .qwf-item:hover {
filter: brightness(1.1); }
.qwf-style-colorful .qwf-icon i {
color: #fff;
} .qwf-style-colorful .qwf-phone {
background-color: #ff6a00; }
.qwf-style-colorful .qwf-wangwang {
background-color: #62c3b5; }
.qwf-style-colorful .qwf-qq {
background-color: #8c72e2; }
.qwf-style-colorful .qwf-wechat {
background-color: #00a0e9; }
.qwf-style-colorful .qwf-top {
background-color: #e54d42; } .qwf-style-colorful .qwf-text {
color: #fff;
}
.qwf-style-colorful .qwf-item:hover .qwf-text {
color: #fff;
}