.pro-pro .pro-title {
  display: flex;
  align-items: center;
}

.pro-pro .pro-title .wrap {
  column-count: 2;
  column-gap: 10px;
}

.pro-pro .pro-title .wrap > div {
  background: #f9f9f9;
  overflow: hidden;
  border-radius: 1em;
  width: 100%;
  break-inside: avoid;

  counter-increment: item-counter;
}
.pro-pro .pro-title .tit .img{height: 100%;}
.pro-pro .pro-title .title01,
.pro-pro .pro-title .title02 {
  height: 300px;
}

.pro-pro .pro-title .title03,
.pro-pro .pro-title .title04,
.pro-pro .pro-title .title05,
.pro-pro .pro-title .title03 img,
.pro-pro .pro-title .title04 img,
.pro-pro .pro-title .title05 img{
  height: 196.66px;
}

.pro-pro .pro-title .title01,
.pro-pro .pro-title .title03,
.pro-pro .pro-title .title04 {
  margin-bottom: 10px;
}

.pro-pro .pro-title .tit {
  display: flex;
  justify-content: space-between;
  width: 100%;
    height: 100%;
}

.pro-pro .pro-title .tit .title {
  padding: 30px 0 0 30px;
}

.pro-pro .pro-title .tit .title h3 {
  font-size: 30px;
  font-weight: 800;
}

.pro-pro .pro-title .tit .title p {
  font-size: 16px;
  font-weight: 300;
  color: #313131;
  margin-top: 10px;
}

.pro-pro .pro-title .tit:hover img {
  transform: scale(1.2);

  transition: all 1s ease;
}

.pro-pro .pro-function {
  display: flex;
  align-items: center;
  background: #000;
}

.pro-pro .pro-function .wrap > div {
  display: none;
}

.pro-pro .pro-function .tit-item {
  display: flex;
  justify-content: center;
}


.pro-pro .pro-function .tit-item .title {
 
  position: absolute;
background: #201f1c;
border-radius: 1em;
  height: 200px;
  width: 380px;
  padding: 30px;
  box-sizing: border-box;
  left: 0;
  top: calc(100vh - 200px);
   opacity: 0
}
.pro-pro .pro-function .function:nth-child(even)  .tit-item .title{
    left:auto;
    right: 0;
}
.pro-pro .pro-function .tit-item .title h3 {
  font-size: 30px;
  color: #fff;
}

.pro-pro .pro-function .tit-item .title p {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  margin-top: 10px;
}

.pro-pro .pro-function .fun-item {
  position: relative;
  width: 100%;
  height: 100vh;
}

.pro-pro .pro-function .fun-item .img {
 
  width: 100%;
  height: 100vh;
  display: flex;    
  align-items: center;
  justify-content: center;
}

.pro-pro .pro-function .fun-item .img img {
    height: 80vh;
}

.pro-pro .pro-card .fun-item,
.pro-pro .pro-card .wrap {
  display: flex;
  align-items: center;
  width: 1440px;
}

.pro-pro .pro-card .fun-item > div,
.pro-pro .pro-card .wrap > div {
  flex: 1;
}

.pro-pro .pro-card .card  {
  display: none;
}

.pro-pro .pro-card .card01 {
  display: block;
}

.pro-pro .pro-card .tit-item {
  display: flex;
  align-items: center;
  height: 100vh;
  position: relative;
}

.pro-pro .pro-card .title {
  position: absolute;
  width: 500px;
  left: 40px;
  opacity: 0;
  left: 70%;
}

.pro-pro .pro-card .title h3 {
  font-size: 30px;
}

.pro-pro .pro-card .title p {
  font-size: 24px;
  font-weight: 300;
  margin-top: 20px;
}

.pro-pro .pro-card .img {
  padding-right: 40px;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
}
.pro-pro .pro-card .img img{object-fit: cover;}
@media screen and (max-width: 1100px) {
  .pro-pro .pro-title .wrap{column-count: 1;}
  .pro-pro .pro-title .wrap > div{
    height: calc(20vh - 10px);margin-bottom: 10px;
  }
  .pro-pro .pro-title .tit .img{width: 40%;height: 100%;}
  .pro-pro .pro-title .tit .img img{width: 100%;height: 100%;}
  .pro-pro .pro-title .tit .title{width: 60%}
  .pro-pro .pro-title .tit .title h3{font-size: 20px;}
  .pro-pro .pro-title .tit .title p{font-size: 14px;}
  .pro-pro .pro-card .fun-item {    position: relative;width: 100vw;height: 100wh;}
  .pro-pro .pro-card .fun-item > div {position: absolute;top: 0;left: 0;width: 100vw;height: 100wh;}
  .pro-pro .pro-card .title{    background: #ffffffd4;
    padding: 20px;
    width: calc(100vw - 50px);
    bottom: 10vh;
    box-sizing: border-box;}
}