/*PC端*/
.banner1{
  display:flex;
  position:relative;
  margin-top:70px;
  flex-direction:column;
  height:500px;
  font-size:24px;
  font-weight:bold;
  color:#fff;
  letter-spacing:3px;
  justify-content:center;
  align-items:center;
  background:url(../images/productsbg1.jpg) center;
  background-size:100% 100%;
}
.banner1 span:nth-child(2){
  font-size:32px;
  letter-spacing:10px;
}
.banner2{
  display:flex;
  position:relative;
  margin-top:70px;
  flex-direction:column;
  height:500px;
  font-size:24px;
  font-weight:bold;
  color:#fff;
  letter-spacing:3px;
  justify-content:center;
  align-items:center;
  background:url(../images/productsbg2.jpg) center;
  background-size:100% 100%;
}
.banner2 span:nth-child(2){
  font-size:32px;
  letter-spacing:10px;
}
.c1{
   display:flex;
}
.c1 .classmenu{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:50%;
  height:10rem;
  background:#eeeeee;
  color:#000;
  padding:20px 0;
  cursor:pointer;
}
.c1 .bg{
   background:#242424;
   color:#fff;
}
.c1 .classmenu img{
  width:40px;
  height:40px;
}
.c1 .classmenu .about{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.c1 .classmenu .about span{
   font-size:20px;
   margin-top:10px;
}
.c1 .classmenu .about span:nth-child(2){
  margin-top:0;
  margin-bottom:10px;
}
.c1 .classmenu .about i{
  font-style:normal;
}
.c2{
  display:flex;
  flex-wrap:wrap;
  background:#f5f5f5;
  justify-content:space-between;
  padding:20px;
}
.c2 .product{
   display:flex;
   position:relative;
   flex-direction:column;
   justify-content:flex-start;
   align-items:center;
   background:#fff;
   width:49.5%;
   padding:0 12%;
   margin-bottom:20px;
}
.c2 .product span{
    display:flex;
    justify-content:center;
}
.c2 .product img{
   width:400px;
   height:350px;
}
.c2 .product .about{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.c2 .product .about div:nth-child(2){
   margin-bottom:80px;
}
.c2 .product .about div:nth-child(3){
   position:absolute;
   color:#036db3;
   bottom:20px;
   font-size:16px;
}
.c2 .product .about div:nth-child(3) font{
   margin-left:10px;
}
.c2 .product .about .title{
   font-size:24px;
   font-weight:bold;
   margin-bottom:20px;
}
.c2 .bg{
   background:#000;
   color:#fff;
}
.c2 .bg a{
   color:#fff;
}
/*手机端*/
@media screen and (max-device-width:960px){
   .banner1{
    height:auto;
    margin-top:4rem;
    font-size:0.7rem;
    height:6rem;
  }
  .banner1 span:nth-child(2){
     font-size:0.8rem;
  }
  .banner2{
    height:auto;
    margin-top:4rem;
    font-size:0.7rem;
    height:6rem;
  }
  .banner2 span:nth-child(2){
     font-size:0.8rem;
  }
  .c1{
     flex-direction:column;
  }
  .c1 .classmenu{
    width:100%;
  }
  .c1 .classmenu .about{
     width:95%;
     margin:0 auto;
  }
  .c1 .classmenu .about span{
     font-size:1rem;
  }
  .c2{
     display:flex;
     flex-direction:column;
  }
  .c2 .product{
     width:100%;
     padding:0;
  }
  .c2 .product .about{
     width:75%;
     margin:0 auto;
  }
  .c2 .product img{
     width:95%;
     height:auto;
  }

}