.product-container {
  width: 100%;

  /* min-height: calc(2000 / 1920 *100vw); */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #F5F5F5;
}

.pContainer{
  width: 60%;
  height: 100%;
  margin-top: calc( 60/ 1920 *100vw);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

}
.pContainer .one{
  width: 100%;

  margin-top: calc(20 / 1920 *100vw);

  border-radius: calc(10 / 1920 *100vw);
  overflow: hidden;
}
.pContainer .one .oneImg{
  width: 100%;
}
.pContainer .two{
  width: 100%;
  margin-top: calc(80 / 1920 *100vw);

  display: flex;
  justify-content: space-between;
  position: relative;
}
.pContainer .two .bannerBox{
  width: 65%;
}
.pContainer .two .twoTitle{
  font-size: calc(35 / 1920 *100vw);
  letter-spacing: calc(1 / 1920 *100vw);
  color: #363637;
}
.pContainer .two .infoBox{
  z-index: 10;
    position: absolute;
    left: 0;
    bottom: calc(-30 / 1920 *100vw);
    width: calc(454 / 1920 *100vw);
    height: calc(400 / 1920 *100vw);

    border-radius: calc(15 / 1920 *100vw);
    background-color: #fff;
    padding-left: calc( 25/ 1920 *100vw);
    padding-right: calc(25 / 1920 *100vw);
}
.pContainer .two .infoBox .ifFrist{
  margin-top: calc(40 / 1920 *100vw);
  width: 100%;
  height: calc(80 / 1920 *100vw);

  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pContainer .two .infoBox .ifFrist .iffleft{
  width: calc(78 / 1920 *100vw);
  height: calc(78 / 1920 *100vw);

  display: flex;
  justify-content: center;
  align-items: center;
}
.pContainer .two .infoBox .ifFrist .iffleft img{
  width: 100%;
}
.pContainer .two .infoBox .ifFrist .iffright{
  height: calc(50 / 1920 *100vw);
  margin-left: calc(3 / 1920 *100vw);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.pContainer .two .infoBox .ifFrist .iffright .bigTitle{
  font-weight: bold;
  font-size: calc(21 / 1920 *100vw);
  letter-spacing: calc(2 / 1920 *100vw);
  color: #C31643;
}
.pContainer .two .infoBox .ifFrist .iffright .englishTitle{
  margin-top: calc(1 / 1920 *100vw);
  color: #C31643;
  font-size: calc(12 / 1920 *100vw);
}
.pContainer .two .infoBox .ifSeconds{
  width: 100%;

    letter-spacing: calc(2 / 1920 *100vw);
    line-height: calc(28 / 1920 *100vw);
    font-size: calc(16 / 1920 *100vw);
}
.pContainer .three{
  width: 100%;
  margin-top: calc(120 / 1920 *100vw);
  font-size: calc(35 / 1920 *100vw);
  letter-spacing: calc(1 / 1920 *100vw);
  color: #363637;
}
.pContainer .four{
  width: 100%;
  position: relative;
}
.pContainer .four .fourImg{
  width: 100%;
}
.pContainer .four .bgc{
  background-color: rgba(0, 0, 0, 0);
}
.pContainer .four .bgc:hover{
  /* background-color: rgba(0, 0, 0, 0.3); */
}
.pContainer .four .card{
    width: calc(209 / 1920 *100vw);
    height: calc(437 / 1920 *100vw);
    position: relative;
}
.pContainer .four .card .front{
  /* background: url("../images/aboutus02-1.png"); */
  background-size: cover;
  color: white;
  width: 100%;
  height: 100%;
  text-align: center;
  border-radius: calc(15 / 1920 *100vw);
  transform: rotateY(0deg);
}
.pContainer .four .card:hover .front{
  transform: rotateY(90deg);
}
.pContainer .four .card .front::before{
  content: "";
  position: absolute;
  width: 100%;
  height: calc(80 / 1920 *100vw);
  top: 55%;
  background: rgba(0, 0, 0, 0.45);
  transform: translate(-50%,-50%) ;  
}
.pContainer .four .card .front p{
  font-size: calc(26 / 1920 *100vw);
  position: absolute;
  width: calc(400 / 1920 *100vw);
  top: 55%;
  left: 50%;
  transform: translateX(-50%)
              translateY(-50%)
              translateZ(calc(60 / 1920 *100vw));
}
.card .back{
  width: 100%;
  height: 100%;
  color: white;
  background: #191e25;
  padding: calc(20 / 1920 *100vw);
  border-radius: calc(15 / 1920 *100vw);
  transform: rotateY(180deg);
}
.card .back .hero{
  width: 100%;
  border-bottom: calc(2 / 1920 *100vw) solid #b49758;
  padding-bottom: calc(15 / 1920 *100vw);
}
.card .back .hero h2{
  color: #f8fae4;
  font-weight: 400;
  margin-bottom: calc(10 / 1920 *100vw);
}
.card .back span{
  display: inline-block;
  width: calc(40 / 1920 *100vw);
  height: calc(25 / 1920 *100vw);
  text-align: center;
  background-color: #c09f5a;
  line-height: calc(25 / 1920 *100vw);
  border-radius: calc(2 / 1920 *100vw);
  color: #191d20;
  font-weight: bold;
}
.card .back .desc{
  /* text-indent: 2em; */
  font-size: calc(18 / 1920 *100vw);
  color: white;
  text-align: left;
  line-height: calc(30 / 1920 *100vw);
  letter-spacing: calc(2 / 1920 *100vw);
}

.card .front,
.card .back{
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;/*两面背面向屏幕时不可见*/
  transition: transform 1.5s;
  transform-style: preserve-3d;
}
.threeD{
  backface-visibility: hidden;
  transform: translateZ(calc(60 / 1920 *100vw));
}
.card:hover .fornt{
  transform: rotateY(0deg);  
}
.card:hover .back{
  transform: rotateY(0deg);
}
.pContainer .four .four-1{
    position: absolute;
    left: calc(16 / 1920 *100vw);
    top: calc(31 / 1920 *100vw);
    
    cursor: pointer;
}
.pContainer .four .four-2{
    position: absolute;
    left: calc(243 / 1920 *100vw);
    top: calc(30 / 1920 *100vw);
    width: calc(209 / 1920 *100vw);
    height: calc( 437/ 1920 *100vw);

    cursor: pointer;
}
.pContainer .four .four-3{
  position: absolute;
    left: calc(471 / 1920 *100vw);
    top: calc(30 / 1920 *100vw);
    width: calc(210 / 1920 *100vw);
    height: calc( 437/ 1920 *100vw);
 
    cursor: pointer;
}
.pContainer .four .four-4{
  position: absolute;
    left: calc(698 / 1920 *100vw);
    top: calc(29 / 1920 *100vw);
    width: calc(410 / 1920 *100vw);
    height: calc( 211/ 1920 *100vw);

    cursor: pointer;
}
.pContainer .four .four-5{
  position: absolute;
    left: calc( 698/ 1920 *100vw);
    top: calc(256 / 1920 *100vw);
    width: calc(410 / 1920 *100vw);
    height: calc(211 / 1920 *100vw);

    cursor: pointer;
}
.pContainer .five{
  width: 100%;
  margin-top: calc(20 / 1920 *100vw);
  font-size: calc(35 / 1920 *100vw);
  letter-spacing: calc(1 / 1920 *100vw);
  color: #363637;
}
.pContainer .six{
  width: 100%;
  margin-top: calc(20 / 1920 *100vw);
  margin-bottom: calc(30 / 1920 *100vw);
}
.pContainer .six .sixImg{
  width: 100%;
}







.foot{
  width: 100%;
  height: calc(200 / 1920 *100vw);

  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #313131;
}
.foot .left{
  margin-left: calc(270 / 1920 *100vw);
  width: calc(534 / 1920 *100vw);
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.foot .left img{
  margin-top: calc(21 / 1920 *100vw);
  width: calc(117 / 1920 *100vw);
}
.foot .left .linkBox{
  width: 100%;
  height: calc(20 / 1920 *100vw);

  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: calc(20 / 1920 *100vw);

}
.foot .left .linkBox span{
  color:white;
  padding-left: calc(20 / 1920 *100vw);
  padding-right: calc(20 / 1920 *100vw);
    font-size: calc(15 / 1920 *100vw);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.foot .middle{
  width: calc(400 / 1920 *100vw);
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.foot .middle .phone{
  font-weight: 600;
    margin-top: calc(75 / 1920 *100vw);
    font-size: calc(28 / 1920 *100vw);
    color: white;
}
.foot .middle .font{
  color: white;
}
.foot .right{
  width: calc(400 / 1920 *100vw);
  height: 100%;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: calc(200 / 1920 *100vw);
}
.foot .right .ewm{
  width: calc(150 / 1920 *100vw);
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

}

.foot .right .ewm .squareBox{
  margin-top: calc(30 / 1920 *100vw);
    width: calc(120 / 1920 *100vw);
    height: calc(120 / 1920 *100vw);
    border: calc(1 / 1920 *100vw) solid white;
    border-radius: calc(10 / 1920 *100vw);
    display: flex;
    justify-content: center;
    align-items: center;
}
.foot .right .ewm .squareBox .img{
  width: calc(105 / 1920 *100vw);
  height: calc(105 / 1920 *100vw);
  background-color: #fff;
  border-radius: calc(10 / 1920 *100vw);
}
.foot .right .ewm .squareBox .img img{
  width: 100%;
}

.foot .right .ewm .font{
  font-size: calc(14 / 1920 *100vw);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin-top: calc(10 / 1920 *100vw);
}