/* 底部动物整体容器 */
#footer-animal{
  position: relative;
  width: 100%;
}

/* 底部地面墙样式 */
#footer-animal .animal-wall{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 36px;
  max-width: none;
  /* 地面背景图 + 底色 */
  background: #bcb0a4 url(/demo/footer_wall.avif) repeat center;
  background-size: auto 100%;
  /* 轻微阴影 */
  box-shadow: 0 4px 7px rgba(0,0,0,.15);
}

/* 底部动物图片 */
#footer-animal img.animal{
  position: relative;
  max-width: min(974px,100%);
  margin: 0 auto;
  display: block;
}

/* 页脚整体背景 */
#footer{
  position: relative;
  background: #e68282;
  background-attachment: scroll;
  background-position: bottom;
  background-size: cover;
}

/* 页脚内容包裹层 */
#footer-wrap{
  position: relative;
  padding: 40px 20px;
  text-align: center;
}

/* 页脚布局：弹性布局 + 内边距 */
#footer-wrap{
  padding: 50px 5% 35px 5%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

/* 左右两栏各占50%宽度 */
#footer-wrap > div{
  width: 50%;
}

/* 左侧内容左对齐 */
#footer-left{
  text-align: left;
}

/* 博客标题样式 */
.footer-title{
  font-size: 30px;
  color: #fff;
}

/* 右侧内容右对齐 */
#footer-right{
  text-align: right;
  margin-top: auto;
}

/* 右侧文字、链接颜色 */
#footer-right p,
#footer-right a{
  color: #fff;
}

/* 返回顶部按钮容器 */
.footer-totop{
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* 返回顶部图标动画 */
.footer-totop i{
  font-size: 2rem;
  animation: footerToTop 1.2s linear infinite;
  color: #fff;
}

/* 备案信息区域样式 */
.footer-info a{
  margin-left: 20px;
  transition: 0.2s;
  text-decoration: none;
}

/* 备案图片hover效果 */
.footer-info a:hover img{
  filter: none !important;
  transition: 0.2s;
}

/* 底部合作伙伴/服务图标 */
.footer-service img{
  height: 30px;
  /* 图标变白 */
  filter: brightness(1000%);
  margin-left: 20px;
  margin-top: 10px;
  transition: 0.2s;
}

/* 图标hover恢复原色 */
.footer-service img:hover{
  filter: brightness(100%);
  transition: 0.2s;
}

/* 返回顶部箭头上下动画 */
@keyframes footerToTop{
  0%   { transform: translateY(0); }
  60%  { transform: translateY(-25%); }
  100% { transform: translateY(0); }
}

/* 手机端适配：小于768px */
@media screen and (max-width:768px){
  #footer-wrap > div{
    width: 100%;
    text-align: center;
  }
  .wordcount{
    margin: 0 auto;
  }
}

/* 平板适配：小于1023px */
@media screen and (max-width:1023px){
  #footer-animal .animal-wall{
    height: 4vw;
  }
  .wordcount{
    width: 100%;
    margin: 10px 0;
    padding: 0 5px;
    color: #F8F9F9;
    text-align: justify;
    text-align-last: center;
    line-height: 1.6;
    box-sizing: border-box;
  }
}

/* 电脑端适配：大于998px */
@media screen and (min-width:998px){
  .wordcount{
    width: 70%;
  }
}

/* 底部描述文字颜色 */
.wordcount{
  color: #F8F9F9;
}