﻿/* 浮动客服面板 外层容器 */
#cmsFloatPanel{overflow:hidden;}
/* 侧边固定控制按钮面板 */
#cmsFloatPanel .ctrolPanel{
    width:50px;
    height:203px;
    background: url(../images/panel-bg.png) no-repeat left top; /* 面板背景图 */
    position:fixed; /* 固定定位，页面滚动保持在可视区域 */
    right:20px; /* 距离页面右侧20px */
    top:380px; /* 距离顶部380px，向下移动180px */
    overflow:hidden;
    z-index:10000; /* 层级，保证在最上层显示 */
    _position:absolute; /* IE6兼容：使用绝对定位 */
    _top:expression(eval(documentElement.scrollTop + 280)); /* IE6模拟fixed固定定位 */
}
/* 控制面板内链接通用样式 */
#cmsFloatPanel .ctrolPanel a{
    width:50px; 
    height: 50px; 
    font-size:12px;
    color:#ff3300;
    text-align:center;
    overflow:hidden; 
    text-decoration:none; /* 取消下划线 */
}
/* 链接悬浮效果 */
#cmsFloatPanel .ctrolPanel a:hover{background: rgba(255,255,255,0.3);}
/* 箭头按钮容器 */
#cmsFloatPanel .ctrolPanel .arrow{line-height:28px;display:block;margin:1px auto;}
/* 箭头文字默认隐藏 */
#cmsFloatPanel .ctrolPanel .arrow span{display:none;}
/* 箭头hover预留样式，暂无效果 */
#cmsFloatPanel .ctrolPanel .arrow:hover{}
/* 悬浮时显示箭头文字 */
#cmsFloatPanel .ctrolPanel .arrow:hover span{display:block;}
/* 客服按钮容器 */
#cmsFloatPanel .ctrolPanel .service{display:block;margin:2px auto;}
/* 客服按钮文字颜色与行高 */
#cmsFloatPanel .ctrolPanel .service span{color:#09F;line-height:90px;}
/* 留言按钮容器 */
#cmsFloatPanel .ctrolPanel .message{display:block;margin:2px auto;}
/* 留言按钮文字颜色与行高 */
#cmsFloatPanel .ctrolPanel .message span{color:#ff3300;line-height:90px;}
/* 二维码按钮容器 */
#cmsFloatPanel .ctrolPanel .qrcode{display:block;margin:2px auto;}
/* 二维码按钮文字颜色与行高 */
#cmsFloatPanel .ctrolPanel .qrcode span{color:#0C6;line-height:90px;}
/* 三角箭头 样式1（IE6兼容透明边框） */
#cmsFloatPanel .arrow01{
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    border-top:10px solid transparent;
    _border-top:10px solid black;
    _filter:chroma(color=black); /* IE滤镜，把黑色设为透明 */
    border-right:10px solid transparent;
    _border-right:10px solid black;
    _filter:chroma(color=black);
    border-bottom:10px solid transparent;
    _border-bottom:10px solid black;
    _filter:chroma(color=black);
    border-left:10px solid #ddd;
    position:absolute;
    bottom:0;
    position:absolute;
    left:2px;
    top:0;
}
/* 三角箭头 样式2（IE6兼容透明边框） */
#cmsFloatPanel .arrow02{
    width:0;
    height:0;
    font-size:0;
    line-height:0;
    border-top:10px solid transparent;
    _border-top:10px solid black;
    _filter:chroma(color=black);
    border-right:10px solid transparent;
    _border-right:10px solid black;
    _filter:chroma(color=black);
    border-bottom:10px solid transparent;
    _border-bottom:10px solid black;
    _filter:chroma(color=black);
    border-left:10px solid #fff;
    position:absolute;
    bottom:0;
    position:absolute;
    left:0;
    top:0;
}
/* 客服展开面板（默认隐藏） */
#cmsFloatPanel .servicePanel{
    width:128px;
    height:400px;
    position:fixed;
    right:70px;
    top:380px; /* 同步下移180px */
    z-index:10000;
    overflow:visible;
    display:none; /* 默认隐藏，JS hover触发显示 */
    _position:absolute;
    _top:expression(eval(documentElement.scrollTop + 380)); /* IE6固定定位兼容 */
}
/* 客服面板内层容器 */
#cmsFloatPanel .servicePanel .servicePanel-inner{width:128px;position:relative;overflow:visible;}
/* 客服面板的三角箭头容器，默认隐藏 */
#cmsFloatPanel .servicePanel .servicePanel-inner .arrowPanel{display: none; width:10px;height:30px;position:absolute;right:1px;top:50px;}
/* 修改三角箭头左边框颜色 */
#cmsFloatPanel .servicePanel .servicePanel-inner .arrowPanel .arrow02{border-left:10px solid #348ee3; }
/* 客服信息主体容器 */
#cmsFloatPanel .servicePanel .servicePanel-inner .serviceMsgPanel{width:128px;position:absolute;left:0;top:0;overflow:hidden;}
/* 客服面板头部背景 */
#cmsFloatPanel .servicePanel .servicePanel-inner .serviceMsgPanel .serviceMsgPanel-hd{width:128px;height:31px;background:url(../images/top.png) no-repeat left top;overflow:hidden;}
/* 头部关闭链接 */
#cmsFloatPanel .servicePanel .servicePanel-inner .serviceMsgPanel .serviceMsgPanel-hd a{width:24px;height:24px;font-size:12px;color:#fff;line-height:24px;display:block;float:right;}
/* 关闭文字默认隐藏 */
#cmsFloatPanel .servicePanel .servicePanel-inner .serviceMsgPanel .serviceMsgPanel-hd a span{display:none;}
/* 客服面板中间主体，纵向重复背景 */
#cmsFloatPanel .servicePanel .servicePanel-inner .serviceMsgPanel .serviceMsgPanel-bd{width:128px;background:url(../images/middle.png) repeat-y left top;overflow:hidden;}
/* 客服分组信息容器（QQ/电话等） */
#cmsFloatPanel .servicePanel .servicePanel-inner .serviceMsgPanel .serviceMsgPanel-bd .msggroup{width:100px;margin:0 15px; padding:4px 0px 4px 0px; text-align: center; line-height: 20px;}
/* 客服分组内链接文字 */
#cmsFloatPanel .servicePanel .servicePanel-inner .serviceMsgPanel .serviceMsgPanel-bd .msggroup a{font-size: 12px; color: #000;}
/* QQ图标样式，向下负边距对齐文字 */
.qqimg{ margin-bottom:-3px;}
/* 客服面板底部背景 */
#cmsFloatPanel .servicePanel .servicePanel-inner .serviceMsgPanel .serviceMsgPanel-ft{width:128px;height:22px;background:url(../images/bottom.png) no-repeat left top;overflow:hidden;}
/* 留言表单弹出面板（默认隐藏） */
#cmsFloatPanel .messagePanel{
    width:280px;
    height:90px;
    position:fixed;
    right:70px;
    top:435px; /* 同步下移180px */
    z-index:10000;
    overflow:visible;
    display:none;
    _position:absolute;
    _top:expression(eval(documentElement.scrollTop + 380));
}
/* 留言面板内层容器 */
#cmsFloatPanel .messagePanel .messagePanel-inner{width:280px;position:relative;overflow:visible;}
/* 留言面板三角箭头容器 */
#cmsFloatPanel .messagePanel .messagePanel-inner .arrowPanel{width:10px;height:30px;position:absolute;right:1px;top:15px;}
/* 留言面板箭头1边框颜色 */
#cmsFloatPanel .messagePanel .messagePanel-inner .arrowPanel .arrow01{border-left:10px solid #fafafa;left:1px;}
/* 留言面板箭头2边框颜色 */
#cmsFloatPanel .messagePanel .messagePanel-inner .arrowPanel .arrow02{border-left:10px solid #fafafa;}
/* 留言表单主体盒子 */
#cmsFloatPanel .messagePanel .messagePanel-inner .formPanel{width:270px;background:#fafafa;position:absolute;left:0;top:0;overflow:hidden;}
/* 留言表单头部标题栏 */
#cmsFloatPanel .messagePanel .messagePanel-inner .formPanel .formPanel-hd{height:32px;font-family:"微软雅黑";font-size:14px;color:#fff;line-height:32px;text-indent:10px;background:url(../images/cmsfloatformpanel-hd-bg.gif) no-repeat left top;}
/* 表单头部关闭按钮 */
#cmsFloatPanel .messagePanel .messagePanel-inner .formPanel .formPanel-hd a{width:32px;height:32px;font-family:"宋体";font-size:12px;color:#fff;line-height:32px;letter-spacing:1px;text-indent:0;display:block;float:right;}
/* 关闭文字隐藏 */
#cmsFloatPanel .messagePanel .messagePanel-inner .formPanel .formPanel-hd a span{display:none;}
/* 表单内容区域内边距 */
#cmsFloatPanel .messagePanel .messagePanel-inner .formPanel .formPanel-bd{padding:7px 15px;overflow:hidden;}
/* 表单正文段落文字样式 */
#cmsFloatPanel .messagePanel .messagePanel-inner .formPanel .formPanel-bd p{font-size:12px;color:#666;line-height:22px;overflow:hidden;}
/* 表单底部区域 */
#cmsFloatPanel .messagePanel .messagePanel-inner .formPanel .formPanel-ft{height:30px;background:#f4f4f4;text-align:right;padding:0 10px;overflow:hidden;}
/* 表单底部链接文字 */
#cmsFloatPanel .messagePanel .messagePanel-inner .formPanel .formPanel-ft a{font-size:12px;color:#999;line-height:30px;letter-spacing:1px;}
/* 二维码弹出面板（默认隐藏） */
#cmsFloatPanel .qrcodePanel{
    width:210px;
    height:240px;
    position:fixed;
    right:70px;
    top:323px; /* 同步下移180px */
    z-index:10000;
    overflow:visible;
    display:none;
    _position:absolute;
    _top:expression(eval(documentElement.scrollTop + 380));
}
/* 二维码面板内层容器 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner{width:210px;position:relative;overflow:visible;}
/* 二维码面板三角箭头容器 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner .arrowPanel{width:10px;height:30px;position:absolute;right:1px;top:180px;}
/* 二维码面板箭头1边框颜色 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner .arrowPanel .arrow01{border-left:10px solid #fafafa;left:1px;}
/* 二维码面板箭头2边框颜色 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner .arrowPanel .arrow02{border-left:10px solid #fafafa;}
/* 二维码主体盒子 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner .codePanel{width:200px;background:#fafafa;border:position:absolute;left:0;top:0;overflow:hidden;}
/* 二维码面板头部标题栏 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner .codePanel .codePanel-hd{height:32px;font-family:"微软雅黑";font-size:14px;color:#fff;line-height:32px;text-indent:10px;background:url(../images/cmsfloatqrcodepanel-hd-bg.gif) no-repeat left top;overflow:hidden;}
/* 二维码面板头部关闭按钮 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner .codePanel .codePanel-hd a{width:32px;height:32px;font-family:"宋体";font-size:12px;color:#fff;line-height:32px;letter-spacing:1px;text-indent:0;display:block;float:right;overflow: hidden;}
/* 关闭文字隐藏 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner .codePanel .codePanel-hd a span{display:none;}
/* 二维码图片内容区域 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner .codePanel .codePanel-bd{padding:10px;overflow:hidden;}
/* 二维码图片样式，最大宽度，无边框 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner .codePanel .codePanel-bd img{max-width:200px;border:none;}
/* 二维码面板底部区域 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner .codePanel .codePanel-ft{height:30px;background:#f4f4f4;text-align:center;padding:0 10px;overflow:hidden;}
/* 二维码底部链接文字 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner .codePanel .codePanel-ft a{font-size:12px;color:#666;line-height:30px;letter-spacing:1px;}
/* 二维码底部链接悬浮变红 */
#cmsFloatPanel .qrcodePanel .qrcodePanel-inner .codePanel .codePanel-ft a:hover{color:#F00;}
