﻿
/* 图标容器 (核心定位) */
.fd_icon-wrapper {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  cursor: pointer;
  transition: all 0.3s;
}

/* 悬停显示层 (精准定位) */
.fd_hover-show {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px); /* 悬浮间距 */
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: 
      opacity 0.25s ease,
      visibility 0.25s,
      bottom 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  z-index: 100;
  width: 120px; /* 悬停图尺寸 */
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.16));
}

/* 默认图标样式 */
.fd_default {
  width: 42px;
  height: 42px;
  transition: transform 0.3s;
}



/* 悬停交互逻辑 */
.fd_icon-wrapper:hover {
  transform: translateY(-2px); /* 整体上移 */
}

.fd_icon-wrapper:hover .fd_default{
  transform: scale(1.15); /* 图标放大 */
}

.fd_icon-wrapper:hover .fd_defaulttwo{
  transform: scale(1.15); /* 图标放大 */
}


.fd_defaulttwo {
  width: 40px !important;
  height: 40px !important;
  transition: transform 0.3s !important;
}


/* 悬停显示层 (精准定位) */
.fd_hover-showtwo {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px); /* 悬浮间距 */
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: 
      opacity 0.25s ease,
      visibility 0.25s,
      bottom 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  z-index: 100;
  width: 120px  !important; /* 悬停图尺寸 */
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.16));
}


.fd_icon-wrapper:hover .fd_hover-showtwo {
  opacity: 1;
  visibility: visible;
  bottom: calc(100% + 15px); /* 悬停最终位置 */
}

.fd_icon-wrapper:hover .fd_hover-show {
  opacity: 1;
  visibility: visible;
  bottom: calc(100% + 15px); /* 悬停最终位置 */
}