.index-info {
  margin: 0 -0.8rem;
}
.index-info li {
  border-left: 2px solid #fff;
  background-color: #f3f3f6;
}
.index-info li .box {
  /* padding-top: .6rem;
  padding-bottom: .4rem; */
  text-align: center;
  transition: all .3s;
  height: 100%;
}
.index-info li span {
  /* font-size: .22rem; */
  text-transform: uppercase;
  position: relative;
}
.index-info li span:before,
.index-info li span:after {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  width: 10px;
  border-bottom: 3px solid #222;
  margin-top: -1px;
}
.index-info li span:after {
  left: auto;
  right: -20px;
}
.index-info li .img {
  /* margin-top: .8rem;
  height: 1.2rem;
  line-height: 1.2rem; */
}
.index-info li .img img {
  max-width: 100%;
  max-height: 100%;
}
.index-info li .txt h4 {
  /* height: .65rem;
  margin-top: .1rem;
  font-size: .22rem; */
  position: relative;
}
.index-info li .txt h4:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 30px;
  border-bottom: 3px solid #8a8a8c;
  transform: translateX(-50%);
}
.index-info li .txt .p {
  /* height: .6rem; */
  padding: 0 8%;
  /* margin-top: .4rem; */
  overflow: hidden;
  /* line-height: .2rem;
  font-size: .14rem; */
}
.index-info li:hover .box {
  transform: scale(1.1);
  background: var(--main-color);
  position: relative;
  z-index: 2;
}
.index-info li:hover * {
  color: #fff;
}
.index-info li:hover .img img {
  filter: brightness(0) invert(100%);
}
.index-info li:hover span:after,
.index-info li:hover span:before,
.index-info li:hover h4:after {
  border-color: #fff;
}


.index-power li {
  border-left: 2px solid  #FFFFFF;
}
.index-power li .box {
  /* padding-top: .3rem;
  padding-bottom: .4rem;
  padding-left: .4rem; */
  background-color: #f18600;
  transition: all .3s;
}
.index-power li .top {
  /* padding-right: .4rem; */
}
.index-power li .top i:after,
.index-power li .top i:before {
  display: inline-block;
  content: '';
  width: 4px;
  height: 10px;
  /* margin: 0 1px; */
  background: #666;
  transform: rotate(45deg);
}
.index-power li .top span {
  color: #666;
  /* font-size: .14rem; */
  text-transform: uppercase;
}
.index-power li .txt {
  /* margin-top: 1.2rem; */
}
.index-power li .txt h4 {
  /* height: .65rem;
  margin-top: .1rem;
  font-size: .56rem;
  font-weight: 700; */
}
.index-power li .txt h4 sup {
  /* font-size: .32rem; */
}
.index-power li .txt .p {
  /* margin-top: .1rem; */
}
.index-power li .img {
  /* height: .6rem;
  margin-top: .5rem; */
}
.index-power li:hover .box {
  transform: scale(1.1);
  background: var(--main-color);
  position: relative;
  z-index: 2;
}
.index-power li:hover .top span,
.index-power li:hover * {
  color: #fff;
}
.index-power li:hover .img img {
  filter: brightness(0) invert(100%);
}
.index-power li:hover .top i:after,
.index-power li:hover .top i:before {
  background: #fff;
}

.index-power li .top i:after,
.index-power li .top i:before {
  display: inline-block;
  content: '';
  width: 4px;
  height: 10px;
  /* margin: 0 1px; */
  background: #666;
  transform: rotate(45deg);
}