@import url(../css/reset.css);

#content {
  width: 1280px;
  margin: 0 auto 60px;
  padding: 0 40px;
  box-sizing: border-box;
}
#content .ul_top {
  display: grid;
  grid-template-columns: repeat(auto-fill, 133px);
  grid-gap: 19px;
}
#content .ul_top li {
  border-radius: 40px;
  overflow: hidden;
  width: 133px;
  height: 133px;
}
#content .ul_top li a {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
#content .ul_top li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#content .ul_top li a .mantle {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 50px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0 0 40px 40px;
}
#content .ul_top li a .mantle p {
  width: 100px;
  height: 21px;
  margin: 0 auto;
  font-size: 18px;
  color: #fff;
  font-family: zi;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 14px;
}
#content .ul_top :hover .mantle {
  top: 83px;
  transition: 0.5s;
}
#content .ul_top .big_li1 {
  width: 287px;
  height: 287px;
  grid-area: 2 / 2 / 4 / 4;
}
#content .ul_top .big_li1:hover .mantle {
  top: 235px;
  transition: 0.5s;
}
#content .ul_top .big_li1:hover .mantle p {
  width: 180px;
}
#content .ul_top .big_li2 {
  grid-area: 3 / 6 / 5 / 8;
  width: 287px;
  height: 287px;
}
#content .ul_top .big_li2:hover .mantle {
  top: 235px;
  transition: 0.5s;
}
#content .ul_top .big_li2:hover .mantle p {
  width: 180px;
}
#content .ul_center {
  margin: 24px auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, 388px);
  grid-template-rows: repeat(auto-fill, 158px);
  grid-gap: 18px;
}
#content .ul_center li {
  width: 388px;
  height: 158px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 30px;
  border: 2px solid #FFFFFF;
  padding: 24px;
  box-sizing: border-box;
}
#content .ul_center li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#content .ul_center li a .bg {
  width: 110px;
  height: 110px;
  background-size: 0 0;
}
#content .ul_center li a .bg img {
  width: 110px;
  height: 110px;
}
#content .ul_center li a .bg .bg_img2 {
  display: none;
}
#content .ul_center li a .arrow {
  width: 28px;
  height: 28px;
  background: url('../images/ic1.svg');
}
#content .ul_center li a .arrow img {
  width: 28px;
  height: 28px;
}
#content .ul_center li a span {
  display: block;
  width: 170px;
  height: 16px;
  font-size: 24px;
  font-family: zi;
  font-weight: 500;
  color: #000000;
}
#content .ul_center :hover {
  background-color: #fff;
}
#content .ul_center :hover .bg img,
#content .ul_center :hover .arrow img {
  display: none;
}
#content .ul_center :hover .bg .bg_img1 {
  display: none;
}
#content .ul_center :hover .bg .bg_img2 {
  display: block;
}
#content .you_like .title {
  width: 1199px;
  height: 68px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid #FFFFFF;
  box-sizing: border-box;
  border-radius: 12px;
  font-size: 24px;
  font-family: zi;
  font-weight: bold;
  color: #FF83AF;
  line-height: 20px;
  text-align: center;
  line-height: 68px;
}
#content .you_like .ul_bottom {
  display: grid;
  grid-template-columns: repeat(auto-fill, 136px);
  grid-gap: 16px;
  margin-top: 16px;
}
#content .you_like .ul_bottom li {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  width: 136px;
  height: 136px;
}
#content .you_like .ul_bottom li a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#content .you_like .ul_bottom li a .mantle {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 50px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0 0 40px 40px;
}
#content .you_like .ul_bottom li a .mantle .name {
  width: 100px;
  height: 21px;
  margin: 0 auto;
  font-size: 18px;
  color: #fff;
  font-family: zi;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 14px;
}
#content .you_like .ul_bottom :hover .mantle {
  top: 86px;
  transition: 0.5s;
}