.con {
  background: url(../img/kjqkbg.jpg) no-repeat;
  background-size: 100%;
  background-position: center -60px;
  padding-bottom: 160px;
}
.con #bread {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.con .page1 {
  position: relative;
}
.con .page1 .bg {
  position: absolute;
  right: 9%;
  width: 100%;
  top: calc(100% - 130px);
}
.con .page1 .bg img {
  width: 100%;
}
.con .page1 .c_l {
  width: 52.7%;
}
.con .page1 .c_l .image {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.con .page1 .c_l .image img {
  width: 100%;
  object-fit: cover;
  transition: all 0.4s linear;
}
.con .page1 .c_l .image:hover img {
  transform: scale(1.05);
}
.con .page1 .c_l .image .info {
  position: absolute;
  width: 100%;
  padding: 40px;
  bottom: 0;
  left: 0;
  color: #fff;
  line-height: 1.8;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.con .page1 .c_r {
  width: 40.98%;
  align-self: flex-end;
  margin-left: auto;
}
.con .page1 .c_f {
  width: 54.16%;
  margin-left: auto;
  margin-right: auto;
}
.con .page2 {
  position: relative;
  margin-top: 270px;
}
.con .page2 .swiper-button-prev,
.con .page2 .swiper-button-next {
  position: static;
  margin: 0;
  line-height: 1;
  height: auto;
}
.con .page2 .swiper-button-prev:hover::after,
.con .page2 .swiper-button-next:hover::after {
  transform: translateY(-2px);
}
.con .page2 .swiper-button-prev::after,
.con .page2 .swiper-button-next::after {
  color: #fff;
  font-size: 12px;
  transition: all 0.2s linear;
}
.con .page2 .subTit {
  max-width: 690px;
}
.con .page2 .c_c .swiperL {
  width: 51.38%;
  margin-left: 0;
}
.con .page2 .c_c .swiperL .image {
  position: relative;
}
.con .page2 .c_c .swiperR {
  width: calc(100% - 51.38% - 40px);
  margin-right: 0;
}
.con .page2 .c_c .swiperR .image {
  width: 100%;
  overflow: hidden;
}
.con .page2 .c_c .swiperR .image > div {
  display: none !important;
}
.con .page2 .c_c .swiperR .info .subTit {
  display: none;
}
.con .page2 .c_c .list .image {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.con .page2 .c_c .list .image > div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  position: absolute;
  width: 100%;
  right: 0;
  bottom: 0;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.con .page2 .c_c .list .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s linear;
}
.con .page2 .c_c .list .info {
  padding: 20px 20px 0 20px;
}
.con .page2 .c_c .list .info .subTit {
  max-width: 430px;
}
.con .page2 .c_c .list:hover .info .tit {
  color: var(--textColor);
}
.con .page2 .c_c .list:hover img {
  transform: scale(1.05);
}
.con .page3 .c_l {
  padding-top: 260px;
}
.con .page3 .c_l .image {
  width: 660px;
  transform: translateX(160px);
  overflow: hidden;
}
.con .page3 .c_l .image img {
  width: 100%;
  object-fit: cover;
  transition: all 0.4s linear;
}
.con .page3 .c_l .image:hover img {
  transform: scale(1.05);
}
.con .page3 .c_r {
  width: 47%;
  margin-left: auto;
  background: #F5F5F5;
  padding: 290px 75px 210px 130px;
}
@media only screen and (max-width: 1920px) {
  .con .page1 .c_l .image .info {
    padding: 2vw;
  }
  .con {
    padding-bottom: 8.3333vw;
  }
  .con .page2 {
    margin-top: 14.0625vw;
  }
  .con .page3 .c_l {
    padding-top: 13.5417vw;
  }
  .con .page3 .c_r {
    width: 47%;
    padding: 15.1042vw 3.9063vw 10.9375vw 6.7708vw;
  }
}
@media only screen and (max-width: 1600px) {
  .con .page3 .c_l {
    width: 53%;
  }
  .con .page3 .c_l .image {
    width: 100%;
    transform: translateX(10%);
  }
  .con .page1 .bg {
    top: calc(100% - 6.5vw);
  }
}
@media only screen and (max-width: 768px) {
  .con .dis_flex {
    flex-wrap: wrap;
  }
  .con .page1 .c_l {
    width: 100%;
    order: 1;
    margin-top: 6vw;
  }
  .con .page1 .c_r {
    order: 0;
  }
  .con .page1 .c_l .image .info {
    padding: 4vw;
  }
  .con .page1 .c_r {
    margin-top: 0;
  }
  .con .page1 .c_r .tit {
    text-align: center;
  }
  .con .page1 .c_r .subTit {
    text-align: center;
  }
  .con {
    padding-bottom: 14vw;
  }
  .con .page2 {
    margin-top: 14vw;
  }
  .con .page2 .tit {
    text-align: center;
  }
  .con .page2 .subTit {
    text-align: center;
  }
  .con .page2 .c_c .swiperL {
    width: 100%;
  }
  .con .page2 .c_c .swiperR {
    display: none;
  }
  .con .page3 .c_l {
    width: 100%;
    padding-top: 0;
  }
  .con .page3 .c_l .image {
    transform: none;
  }
  .con .page3 .c_r {
    width: 100%;
    padding: 6vw;
  }
  .con .page3 .c_r .mes {
    margin-top: 4vw;
  }
}