/*悬浮链接*/
.suspension{position:fixed;z-index:55;right:0;bottom:85px;width:70px;height:240px;}
.suspension-box{position:relative;float:right;}
.suspension .a{display:block;width:44px;height:44px;background-color:#353535;margin-bottom:4px;cursor:pointer;outline:none;}
.suspension .a.active,
.suspension .a:hover{background:#F05352;}
.suspension .a .i{float:left;width:44px;height:44px;background-image:url(../images/side_icon.png);background-repeat:no-repeat;}
/* .suspension .a-service .i{background-position:0 0;} */
.suspension .a-service .i{width:20px;height:20px;margin-top:12px;margin-left:12px;background-image:url(../images/suspension-bg.png);background-repeat:no-repeat;background-position:0 0;}
.suspension .a-service-phone .i{width:20px;height:20px;margin-top:12px;margin-left:12px;background-image:url(../images/suspension-bg.png);background-repeat:no-repeat;background-position:-27px 0;}
.suspension .a-qrcode .i{background-position:-44px 0;}
.suspension .a-cart .i{background-position:-88px 0;}
.suspension .a-top .i{background-position:-132px 0;}
.suspension .a-top{background:#D2D3D6;display:none;}
.suspension .a-top:hover{background:#c0c1c3;}

/* 关键修改：自适应宽度样式 */
.suspension .d{
  display:none;
  background:#fff;
  position:absolute;
  right:67px; /* 保持与图标间距 */
  min-width:180px; /* 最小宽度，防止过窄 */
  max-width:400px; /* 扩大最大宽度，确保电话不换行 */
  min-height:90px;
  border:1px solid #E0E1E5;
  border-radius:3px;
  box-shadow:0px 2px 5px 0px rgba(161, 163, 175, 0.11);
}
.suspension .d .arrow{position:absolute;width:8px;height:12px;background:url(../images/side_bg_arrow.png) no-repeat;right:-8px;top:31px;}
.suspension .d-service{top:0;}
.suspension .d-service-phone{top:34px;}
.suspension .d-qrcode{top:78px;}

/* 内部容器：去掉固定宽度，用padding自适应 */
.suspension .d .inner-box{
  padding:15px 22px;
  display:inline-block; /* 让容器宽度适应内容 */
}

/* 关键：使用flex布局让图标和文字横向排列 */
.flex-container{
  display:flex;
  align-items:center; /* 垂直居中对齐 */
  text-decoration:none; /* 去除链接下划线 */
  white-space:nowrap; /* 强制整行不换行 */
}

/* 调整内容元素样式 */
.suspension .d-service-item{
  border-bottom:1px solid #eee;
  padding:5px 0;
}
.suspension .d-service .d-service-item{border-bottom:none;}
.suspension .d-service-item .circle{
  width:44px;
  height:44px;
  border-radius:50%;
  overflow:hidden;
  background:#F1F1F3;
  flex-shrink:0; /* 防止图标被压缩 */
}
.suspension .d-service-item .i-qq{
  width:44px;
  height:44px;
  background:url(../images/side_con_icon03.png) no-repeat center 15px;
  display:block;
  transition:all .2s;
  border-radius:50%;
  overflow:hidden;
}
.suspension .d-service-item:hover .i-qq{background-position:center 3px;}
.suspension .d-service-item .i-tel{
  width:44px;
  height:44px;
  background:url(../images/side_con_icon02.png) no-repeat center center;
  display:block;
}

/* 文字样式调整：强制不换行，间距优化 */
.suspension .d-service-item h3{
  font-size:15px;
  margin-left:12px;
  width:auto;
  color:#333; /* 文字颜色 */
  line-height:1.2;
  font-weight:normal;
  white-space:nowrap; /* 强制文字不换行 */
}
.suspension .d-service-item .text{
  margin-left:12px;
  width:auto;
  white-space:nowrap; /* 强制电话区域不换行 */
}
.suspension .d-service-item .text p{
  line-height:1.5;
  font-size:15px;
  color:#333;
  margin:0; /* 清除默认边距 */
  display:inline-block; /* 让服务热线和电话横向排列 */
  margin-right:10px; /* 热线和电话之间的间距 */
}
.suspension .d-service-item .text .number{
  font-family:Arial,"Microsoft Yahei","HanHei SC",PingHei,"PingFang SC","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
  color:#F05352;
  font-size:16px;
  margin-top:0; /* 清除上边距，确保横向对齐 */
  margin-right:0;
}

.suspension .d-service-intro{padding-top:10px;}
.suspension .d-service-intro p{float:left;line-height:27px;font-size:12px;width:50%;white-space:nowrap;color:#888;}
.suspension .d-service-intro i{background:url(../images/side_con_icon01.png) no-repeat center center;height:27px;width:14px;margin-right:5px;vertical-align:top;display:inline-block;}

/* 二维码容器保持居中 */
.suspension .d-qrcode{text-align:center;}
.suspension .d-qrcode .inner-box{
  padding:20px;
  width:auto;
}
.suspension .d-qrcode p{font-size:16px;color:#93959c;}

/*  hover显示悬浮框 */
.suspension .a-service:hover + .d-service,
.suspension .d-service:hover{display:block;}
.suspension .a-service-phone:hover + .d-service-phone,
.suspension .d-service-phone:hover{display:block;}
.suspension .a-qrcode:hover + .d-qrcode,
.suspension .d-qrcode:hover{display:block;}


@media screen and (max-width: 768px) { 
.suspension{
display:none; 
}
}