/*------------------- developed by JJD front-end developer ------------------*/
/*-------------------------------Apr 2022--------------------------------*/
/*------------------- developed by JJD front-end developer ------------------*/
/*-------------------------------Dec 2020--------------------------------*/
.beforeHover {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.3s;
}
.afterHover {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.transition {
  transition: all 0.3s;
}
@media (min-width: 1600px) {
  .proDataGal {
    gap: 1.83vw;
  }
  .proDataGalIn {
    width: calc((100% - (1.83vw * 4)) / 5);
    height: 14.64vw;
    border-radius: 1.09vw;
  }
  .proDataDes {
    font-size: 1.61vw;
  }
  .proDataImg {
    width: 41.36vw;
    height: 36.6vw;
    border-radius: 1.09vw;
    margin-left: 2.19vw;
  }
  .proDataEx {
    gap: 2.92vw;
    margin-top: 2.92vw;
  }
  .proDataExHead {
    font-size: 1.46vw;
    gap: 0.73vw;
  }
  .proDataExImg {
    gap: 1.83vw;
  }
  .proDataExImgIn {
    width: calc((100% - (1.83vw * 3)) / 4);
    font-size: 1.31vw;
    gap: 1.46vw;
  }
  .proDataExImgIn .imgBlock {
    height: 21.96vw;
    border-radius: 1.09vw;
  }
}
@media (max-width: 1200px) {
  .proDataGalIn {
    width: calc((100% - (25px * 3)) / 4);
  }
  .proDataImg {
    width: 40%;
    height: 40vw;
    margin-left: 15px;
  }
}
@media (max-width: 1024px) {
  .proDataDes {
    font-size: 18px;
  }
  .proDataEx {
    gap: 20px;
    margin-top: 20px;
  }
  .proDataExHead {
    font-size: 18px;
  }
  .proDataExImg {
    gap: 15px;
  }
  .proDataExImgIn {
    width: calc( (100% - (15px * 2) ) / 3 );
    font-size: 16px;
  }
  .proDataExImgIn .imgBlock {
    height: 240px;
  }
}
@media (max-width: 992px) {
  .location {
    height: 300px;
  }
  .proDataGal {
    gap: 15px;
  }
  .proDataGalIn {
    width: calc((100% - (15px * 2)) / 3);
    height: 180px;
  }
}
@media (max-width: 768px) {
  .proDataDes {
    font-size: 16px;
  }
  .proDataImg {
    width: 100%;
    margin-bottom: 15px;
  }
  .proDataDes .headOne {
    clear: both;
  }
  .proDataExHead {
    font-size: 16px;
  }
  .proDataExImgIn {
    width: calc( (100% - 15px) / 2 );
    font-size: 14px;
  }
  .proDataExImgIn .imgBlock {
    height: 200px;
  }
}
@media (max-width: 576px) {
  .location {
    height: 250px;
  }
  .proDataGalIn {
    width: calc((100% - 15px) / 2);
    height: 150px;
  }
  .proDataExImgIn .imgBlock {
    height: 150px;
  }
}