.con .page1 .image {
  padding-top: 56%;
  position: relative;
  height: 0;
  overflow: hidden;
  border-radius: 30px;
}
.con .page1 .image img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  transition: all 0.4s linear;
}
.con .page1 .list {
  margin-bottom: 80px;
}
.con .page1 .list:first-child {
  margin-right: 2.6%;
  position: relative;
  overflow: hidden;
  min-width: 50%;
  flex: 1;
  border-radius: 30px;
}
.con .page1 .list:first-child .info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 40px 60px;
  color: #fff;

  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
  transition: background-image 0.4s ease-in-out;
}
.con .page1 .list:first-child .info .c_f {
  opacity: 0.5;
}
.con .page1 .list:first-child .info .toPage {
  display: none;
}
.con .page1 .list:not(:first-child) {
  flex: 0 0 calc((100% - 5.2%)/3);
  margin-right: 2.6%;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.con .page1 .list:not(:first-child)::after {
  content: "";
  width: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--textColor);
  height: 1px;
  transition: all 0.4s linear;
}
.con .page1 .list:not(:first-child) a {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.con .page1 .list:not(:first-child) .info {
  flex: 1;
  padding: 45px 0 40px 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  transition: all 0.2s linear;
}
.con .page1 .list:not(:first-child) .info .tit {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  height: 3em;
}
.con .page1 .list:not(:first-child) .info .c_f {
  width: 100%;
  margin-top: 50px;
  opacity: 0.5;
}
.con .page1 .list:nth-child(5),
.con .page1 .list:nth-child(8),
.con .page1 .list:nth-child(2) {
  margin-right: 0;
}

.con .page1 .list:hover::after {
  width: 100%;
}
.con .page1 .list:hover .info {
  color: var(--textColor);
}
.con .page1 .list:hover .info .c_f {
  opacity: 1;
}
.con .page1 .list:hover .image img {
  transform: scale(1.05);
}

.con .page1 .list:first-child:hover .info{
    color: #fff;
        background-image: linear-gradient(to top, #196db6, rgba(0, 0, 0, 0));
}

@media only screen and (max-width: 1920px) {
  .con .page1 .list:not(:first-child) .info {
    padding: 2.2vw 0 2vw 10px;
  }
  .con .page1 .list:first-child .info {
    padding: 2vw 3vw;
  }
  .con .page1 .list {
    margin-bottom: 4vw;
  }
  .con .page1 .list:not(:first-child) .info .c_f {
    margin-top: 2.5vw;
  }
}
@media only screen and (max-width: 768px) {
  .con .page1 .list:not(:first-child) {
    flex: 0 0 100%;
  }
  .con .page1 .list:first-child .info {
    position: static;
    background: none;
    color: #000;
  }
  .con .page1 .list:first-child .info {
    padding: 4vw 0;
  }
  .con .page1 .list {
    margin-bottom: 6vw;
  }
  .con .page1 .list:first-child {
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .con .page1 .list:not(:first-child) .info,
  .con .page1 .list:first-child .info {
    padding: 4vw 0;
  }
  .con .page1 .list:first-child .info .c_f,
  .con .page1 .list:not(:first-child) .info .c_f {
    margin-top: 4vw;
  }
}