.campusLifeArea_container {
  width: 100%;
  height: 8rem;
  position: relative;
}

.campusLifeArea .title {
  width: 100%;
  height: 4.04rem;
  background: url(../images/newsImage/44.png);
  background-repeat: repeat-x;
  font-size: .7rem;
  color: #fff;
  text-align: center;
  padding-top: .72rem;
}

.campusLifeArea .box {
  margin-left: auto;
  margin-right: auto;
  width: 16.4rem;
  background: white;
  box-shadow: 0px 6px 27px 2px rgba(3, 3, 3, 0.14);
  height: 5.2rem;
  padding: 0.4rem;
  transform: translateY(-3rem);
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

.campusLifeArea .box ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}


.campusLifeArea .box ul li {
  padding: 0.2rem 0.3rem;
  width: 4.0rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.campusLifeArea .box ul li a:first-child {
  overflow: hidden;
}

.campusLifeArea .box ul li:hover img {
  transform: scale(1.1);
}

.campusLifeArea .box ul li img {
  width: 3.05rem;
  height: 3.29rem;
  transition: all .4s;
  object-fit: cover;
}

.campusLifeArea .box ul li a,
.campusLifeArea .box ul li p {
  width: 3.20rem;
  color: #242424;
  font-size: 0.3rem;
  font-weight:500;
  line-height: 0.58rem;
  text-align: center;
}

.campusLifeArea .box ul li a {
  text-decoration: none;
}


@media only screen and (max-width: 768px) {

  .campusLifeArea_container{
    height: auto;
  }

  .campusLifeArea .box {
    width: 16.4rem;
    background: white;
    box-shadow: 0px 6px 27px 2px rgba(3, 3, 3, 0.14);
    height: auto;
    padding: 0.4rem;
    transform: translateY(-2rem);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  }
  
  .campusLifeArea .box ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .campusLifeArea .box ul li {
    padding: 0.4rem 0.6rem;
    width: 7.5rem;
  }


  .campusLifeArea .box ul li img {
    /* width: 3.05rem;
    height: 3.29rem; */
    width: 6.1rem;
    height: 6.58rem;
    transition: all .4s;
    object-fit: cover;
  }
  
  .campusLifeArea .box ul li a,
  .campusLifeArea .box ul li p {
    width: 100%;
    font-size: 0.6rem;
    line-height: 1.06rem;
  }

}