.pro-one .pro-title {
  position: relative;
}

.pro-one .pro-title > div {
  height: 442px;

  box-sizing: border-box;

  border-radius: 1em;

  overflow: hidden;

  position: relative;

  float: left;

  position: absolute;

  top: calc(50% - 221px);

  cursor: pointer;

  display: block;
}

.pro-one .pro-title img,
.pro-one .pro-title video {
  width: 100%;
  height: 100%;
}

.pro-one .pro-title .title {
  top: 0px;
  left: 30px;
  position: absolute;
}
  .pro-one .pro-title > div{width: 18.8%;}
    .pro-one .pro-title .title01{left: 1%;}
    .pro-one .pro-title .title02 {left:20.8%;}
    .pro-one .pro-title .title05 {left: 40.6%;}
    .pro-one .pro-title .title04{right: 1%;}
    .pro-one .pro-title .title03 {right:20.8%;}
.pro-one .pro-title .title h3 {
  font-size: 24px;
}

.pro-one .pro-title .title p {
  font-size: 20px;
  font-weight: 200;
}

.pro-one .pro-title .title05 .title {
  display: none;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.pro-one .pro-title .title05 .title p {
  color: #fff;
  font-size: 30px;
  text-shadow: 2px 2px 8px rgba(46, 54, 72, 0.7);
  text-align: center;
}

.pro-one .pro-function .fun-item,
.pro-one .pro-function .wrap {
  display: flex;
  align-items: center;
}


.pro-one .pro-function .function {
  display: none;
}

.pro-one .pro-function .function01 {
  display: block;
}

.pro-one .pro-function .tit-item {
  display: flex;
  align-items: center;
  height: 100vh;
  position: relative;
  width: 40%;
  padding-right: 20px ;
}

.pro-one .pro-function .title {
  position: absolute;
  width: 100%;
  left: -200px;
  opacity: 0;
}

.pro-one .pro-function .title h3 {
  font-size: 60px;
}

.pro-one .pro-function .title p {
  font-size: 24px;
  font-weight: 500;
  margin-top: 20px;
}

.pro-one .pro-function .img {
  padding-left: 40px;
  width: 60%;
}

.pro-one .pro-card .card {
  display: none;
  position: relative;
  height: 100vh;
}

.pro-one .pro-card .title {
  opacity: 0;
  padding-top:30px ;
}

.pro-one .pro-card .title h3 {
  font-size: 60px;
  text-align: center;
  margin-top: 100px;
}

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

.pro-one .pro-card .img {
  position: absolute;
  bottom: 30px;
  text-align: center;
  opacity: 0;
  width: 100%;
}
.pro-one .pro-card .img img{max-height: 80vh;max-width: 100%;}

@media screen and (max-width: 1100px) {
  .pro-one .pro-function .fun-item{align-items: flex-start;}
  .pro-one .pro-function .img{
    padding-left:0;
    display: flex;
    justify-content: center;
    max-height: 30vh;
    width: 100vw;
  }
  .pro-one .pro-function .img img{        height: 50vh;
    width: auto;}
    .pro-one .pro-function .fun-item > div{flex: none;}
  .pro-one .pro-function .title{bottom:10vh;padding: 0 10px;box-sizing: border-box;width:calc(100vw - 20px)}
  .pro-one .pro-function .title h3,.pro-one .pro-card .title h3{font-size: 40px;}
  .pro-one .pro-card .title{padding: 0 10px;box-sizing: border-box;width:calc(100vw - 20px)}
  .pro-one .pro-card .img{bottom: 10vh !important;}
 
}
@media screen and (max-width: 1000px) {
    .pro-one .pro-title > div{width: 48.5%;top:1vh;height:32vh}
    .pro-one .pro-title .title01{left: 1%;}
    .pro-one .pro-title .title02 {left:50.5%;}
    .pro-one .pro-title .title05 {width: 90%;left: 5%;top:34vh}
    .pro-one .pro-title .title04{right: 1%;top:67vh}
    .pro-one .pro-title .title03 {right:50.5%;top:67vh}
    .pro-one .pro-title .title p{display: none;}
}

@media screen and (max-width: 400px) {
  .pro-one .pro-function .title h3, .pro-one .pro-card .title h3{font-size: 30px;}
  .pro-one .pro-function .title {
    bottom: 5vh;}
    .pro-one .pro-card .title h3{margin-top: 10px;}
    .pro-one .pro-card .img {
      bottom: 1vh !important;
  }
}