footer{ background: #13141d;}

.footer-box{ width: 100%; height: auto; border-bottom:2px solid #26262b; padding: 65px 0;}

.footer-box-left{ max-width: 340px;}
.footer-box-left h2{ color: #FFFFFF; line-height: 36px; margin-bottom: 15px; font-size: 1.2rem;}
.footer-box-left li{ margin-bottom: 10px;}
.footer-box-left li em{ display: block; width: 16px;}
.footer-box-left li a{ display: block; color: #FFFFFF; width: calc(100% - 16px); padding-left: 12px;}
.footer-box-left li a:hover{ text-decoration: underline;}

.footer-box-menu{}
.footer-box-menu dl{ padding: 0 60px;}
.footer-box-menu dl dt{ margin-bottom: 15px; color: #FFFFFF; line-height: 36px; font-family: myFirstFont1; font-size: 1.2rem;}
.footer-box-menu a{ display: block; color: #FFFFFF; line-height: 28px;}
.footer-box-menu a:hover{ text-decoration: underline;}

.footer-box-right{ width: 268px; text-align: right;}
.footer-box-right h2{ color: #FFFFFF; line-height: 36px; margin-bottom: 15px; font-size: 1.2rem; }
.footer-box-right-links{}
.footer-box-right-links a{width: 38px;height: 38px;background: #4E4E55;border-radius: 3px; }
.footer-box-right-links a:hover{ background: #C2272D;}

.footer-box-right-more{ margin-top: 75px;}
.footer-box-right-more a{ font-size: 1rem; padding: 0 30px; display: inline-block; background: #C2272D; color: #FFFFFF; border-radius: 24px; height: 46px; line-height: 46px;}
.footer-box-right-more a img{ margin-left: 30px;}
.footer-box-right-more a:hover{ background: #111111;}


.footer-bottom{ padding: 20px 0; line-height: 27px;}
.footer-bottom-left{ color: #FFFFFF;}
.footer-bottom-left-menu{ font-size: 1rem;}
.footer-bottom-left-menu a{ color: #FFFFFF;}
.footer-bottom-left-menu a:after{ content: "•"; padding: 0 15px; font-size: 1.4rem;}
.footer-bottom-left-menu a:last-child:after{ content: "";}
.footer-bottom-left-menu a:hover{ text-decoration: underline;}

.footer-bottom-left-copy{}

.footer-bottom-iso{}


.fposi{ display: none;}
.optain{ display:none;}

.customerList{
  width:56px;
  height:auto;
  position:fixed;
  right:0;              /* 让它离右侧有点呼吸感 */
  top:40%;
  z-index:999;
}

.customerList a{
  width:56px;
  height:56px;
  background:#C2272D;
  border-radius:10px 0 0 10px;       /* 圆角更舒服 */
  margin-bottom:10px;
  text-align:center;
  justify-content:center;   /* 配合flex-center1 */
  position:relative;
  overflow:visible;

  /* ✅ 动效基础 */
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}

.customerList a img{
  display:block;
  margin:auto;
  transition: transform .18s ease;
}

/* ✅ 鼠标悬停：上浮 + 阴影 + 稍微亮一点 */
.customerList a:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  background:#d12f35;
}

/* 图标轻微放大 */
.customerList a:hover > img{
  transform: scale(1.06);
}

/* ✅ 微信二维码：默认隐藏 */
.customerList .cuwx{
  position:absolute;
  right:68px;               /* 在按钮左侧弹出 */
  top:50%;
  transform: translateY(-50%) translateX(8px);
  width:150px;
  padding:10px;
  background:#fff;
  border-radius:12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.06);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

/* 二维码图片 */
.customerList .cuwx img{
  width:120px;
  height:120px;
  display:block;
  margin:0 auto;
  border-radius:8px;
}

/* ✅ 小箭头指向按钮 */
.customerList .cuwx:after{
  content:"";
  position:absolute;
  right:-8px;
  top:50%;
  transform: translateY(-50%);
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:8px solid #fff;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.08));
}

/* ✅ 不改HTML：第三个 a 里有 .cuwx，hover 就显示 */
.customerList a:hover .cuwx{
  opacity:1;
  visibility:visible;
  transform: translateY(-50%) translateX(0);
  pointer-events:auto;
}


@media (max-width: 768px) {


footer{ margin-bottom: 70px;}
.footer-box{  padding: 25px 0;}
.footer-box-left{ display: none;}
.footer-box-menu{ display: none;}
.footer-box-right{ width: 100%; }
.footer-box-right-more{ margin-top: 25px;}
.footer-bottom-iso{ display: none;}


.footer-bottom{ padding:10px 0; line-height: 24px;}
.footer-bottom-left-menu{ font-size: 0.9rem;}
.footer-bottom-left-menu a:after{ padding: 0 10px; font-size: 1.2rem;}


.fposi{ width:100%; height:70px; background:#c2272d; position:fixed; left:0; bottom:0; display:block; z-index:999;}
.fposi a{ display:block; float:left; text-align:center; width:25%; height:70px; color:#fff !important; border-right:1px solid #eee;  box-sizing: border-box; }
.fposi a:last-child{ border:none}
.fposi a img{ width:30px; height:auto; padding-top:8px;}
.fposi a p{ line-height:32px; font-size:0.9rem}
.customerList{ display: none;}


.optain{ display:none; background:rgba(0,0,0,.5); width:100%; height:100%; position:fixed; left:0; top:0; z-index:999;}
.optain-close{ width:27px; height:27px; background:url(../images/close.png) no-repeat; cursor:pointer; position: absolute; right:20px; top:120px;}
.optain-search{width:100%; height:100%; }
.optain-search-box{ width:94%; margin:0 auto;}
.optain-search-box input{ width:80%; height:42px; line-height:42px; background:#fff; border-radius:4px 0 0 4px; border:none; padding:0 15px; font-size:0.9rem;}
.optain-search-box button{ width:20%; height:42px; line-height:42px; background:#c2272d; border-radius:0 4px 4px 0; color:#fff; font-size:1.2rem; border:none;}



}