﻿/* cyrillic-ext */


#wmkc {position:fixed;right:5px;top:40%;transform:translateY(-50%);font-family:Arial,Helvetica,sans-serif;z-index:9999}
#wmkc * {box-sizing:border-box;font-size:12px;line-height:1.1}
.wmkc-list {padding:0;border:1px solid #EEE;background-color:#FFF;max-width:78px;border-radius:4px;margin:0}
.wmkc-icon {display:inline-block;background:url(../images/wmkc-ico23.png)no-repeat;width:28px;height:28px;transform:scale(.8)}
.wmkc-list>li {width:100%;border-top:1px solid #EEE;list-style:none;text-align:center;padding:2px 0 4px;transition:all .2s ease-in-out}
.wmkc-list>li>a>p {margin:2px;transform:scale(.9);text-transform:capitalize}
.wmkc-list>li a {color:#555;text-decoration:none;display:block;padding:5px}
.wmkc-wechat-img {position:absolute;right:calc(100% - 1px);bottom:0;width:120px;text-align:center;padding:10px 10px 6px;background-color:#FFF;border:1px solid #EEE;border-radius:4px;transform:scale(0);transform-origin:right bottom}
.wmkc-wechat-img img {display:block;max-width:100%;max-height:100%}
.wmkc-wechat-img p {margin:4px 0 0;transform:scale(.9);word-break:break-all}
.wmkc-wechat-img em {display:inline-block;width:16px;height:16px;background:url(../images/wmkc-ico23.png)-76px -8px/99px no-repeat;vertical-align:middle;margin-right:4px}
.wmkc-list>li:hover .wmkc-wechat-img {transition:transform .4s;transform:scale(1)}
.wmkc-list>li:hover,.wmkc-list>li:hover+li {border-color:transparent} 
.wmkc-email .wmkc-icon {background-position:-8px -6px}
.wmkc-whatsapp .wmkc-icon {background-position:-52px -50px}
.wmkc-skype .wmkc-icon {background-position:-52px -7px}
.wmkc-wechat .wmkc-icon {background-position:-144px -10px}
.wmkc-list li:hover a {color:#FFF} .wmkc-email:hover {background-color:#f90}
.wmkc-whatsapp:hover {background-color:#2cb740}
.wmkc-skype:hover {background-color:#0091df}
.wmkc-wechat:hover {background-color:#51c332}
.wmkc-email:hover .wmkc-icon {background-position:-96px -6px}

.wmkc-whatsapp:hover .wmkc-icon {background-position:-52px -94px}
.wmkc-skype:hover .wmkc-icon {background-position:-96px -50px}
.wmkc-wechat:hover .wmkc-icon {background-position:-144px -62px}
.wmkc-list>li:first-child {border-radius:4px 4px 0 0;border:0}
.wmkc-list>li:last-child {border-radius:0 0 4px 4px}
/* 确保每个 li 作为绝对定位的参照物 */
.wmkc-list > li {
    position: relative;
}

/* 电话浮层样式：与 li 等高，垂直居中显示号码 */
.wmkc-phone-img {
    position: absolute;
    right: calc(100% - 1px);   /* 紧贴 li 左侧 */
    top: 0;                    /* 与 li 顶部对齐 */
    bottom: 0;                 /* 与 li 底部对齐，实现等高 */
    min-width: 120px;
    display: flex;             /* 使用 Flex 实现垂直居中 */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 10px;           /* 左右内边距，上下由 Flex 撑开 */
    background-color: #FFF;
    border: 1px solid #EEE;
    border-radius: 4px;
    transform: scale(0);       /* 初始隐藏 */
    transform-origin: right bottom; /* 从右下角展开 */
    transition: transform 0.4s;
    z-index: 10;
}

/* 号码文本样式 */
.wmkc-phone-img p {
    margin: 0;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    white-space: nowrap;       /* 防止换行，若号码过长可删除此行 */
}

/* 悬浮时显示浮层 */
.wmkc-list > li:hover .wmkc-phone-img {
    transform: scale(1);
}
@media (max-width:768px) {#wmkc {display:none}}