/* AB模板网 整站模板下载 */
/* 模板：Www.AdminBuy.Cn */
/* 仿站：Fang.AdminBuy.Cn */
/* 素材：Sc.AdminBuy.Cn */
/* js特效：js.AdminBuy.Cn */
/* QQ：9490489 */

/*悬浮链接*/
/* 悬浮链接 - 上下居中 */
.suspension {
    position: fixed;
    z-index: 55;
    right: 0;
    top: 50%;           /* 改为top: 50% */
    transform: translateY(-50%);  /* 向上偏移自身高度的50%，实现垂直居中 */
    width: 70px;
    height: auto;       /* 高度改为auto，让内容自动撑开 */
}
.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;width:223px;background:#fff;position:absolute;right:67px;min-height:50px;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:20px;}
.suspension .d-service{top:0;}
.suspension .d-service-phone{top:0px;}
.suspension .d-qrcode{top:30px;}
.suspension .d .inner-box{padding:8px 22px 12px;}
.suspension .d-service-item{border-bottom:0px solid #eee;padding:1px 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;display:block;float:left;}
.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{float:left;width:112px;line-height:44px;font-size:15px;margin-left:12px;}
.suspension .d-service-item .text{float:left;width:112px;line-height:22px;font-size:15px;margin-left:12px;}
.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;}
.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 0;}
.suspension .d-qrcode p{font-size:16px;color:#93959c;}

/* 确保每个图标和对应的弹窗关联 */
.suspension-box {
    position: relative;
}

.suspension .a {
    position: relative;
    display: block;
   
    margin-bottom: 5px;
    background: #5bbbba;
    border-radius: 5px;
    cursor: pointer;
}

/* 所有弹窗默认隐藏，相对于父容器定位 */
.suspension .d {
    position: absolute;
    right: 60px;  /* 距离图标右侧60px（即显示在图标左侧） */
    top: 0;
    width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
    display: none;
    z-index: 10;
}

/* 箭头指向右侧（指向图标） */
.suspension .d .arrow {
    position: absolute;
    right: -10px;
    top: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent #fff;
    z-index: 11;
}

/* 由于多个弹窗位置相同，需要分别设置top值让它们对齐各自的图标 */
.suspension .d-service-phone {
    top: 0;
}

.suspension .d-qrcode-wechat {
    top: 55px;  /* 第2个图标的位置 */
}

.suspension .d-qrcode-youtube {
    top: 110px; /* 第3个图标的位置 */
}

.suspension .d-qrcode-ins {
    top: 165px; /* 第4个图标的位置 */
}

.suspension .d-qrcode-linkedin {
    top: 220px; /* 第5个图标的位置 */
}

.suspension .d-qrcode-facebook {
    top: 275px; /* 第6个图标的位置 */
}

/* 联系方式模块样式 */
.contact-info {
    padding: 30px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 20px auto;
}

.contact-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact-item {
    display: flex;
    align-items: center;
    width: 23%;
    padding: 15px 0;
    transition: all 0.3s ease;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: #5bbbba;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    transition: all 0.3s ease;
}

.contact-icon i {
    font-size: 24px;
    color: #fff;
}

.contact-content {
    flex: 1;
}

.contact-label {
    font-size: 14px;
    color: #999;
    line-height: 20px;
    margin-bottom: 5px;
}

.contact-value {
    font-size: 16px;
    color: #333;
    line-height: 24px;
    font-weight: 500;
}

/* 悬停效果 */
.contact-item:hover .contact-icon {
    background: #132840;
    transform: scale(1.05);
}

.contact-item:hover .contact-value {
    color: #5bbbba;
}

/* 响应式布局 */
@media (max-width: 1200px) {
    .contact-item {
        width: 48%;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .contact-item {
        width: 100%;
    }
}