/* banner */
.banner{
  margin-top: 70px;
  width: 100%;
  height: 80vh;
}
.slide {
  width: 100%;
  height: 80vh;
  margin: 0 auto;
  margin-top: 50px;
  overflow: hidden;
  position: relative;
}
.slideshow {
  width: 100%;
  height: 80vh;
}
.bannerLi {
  position: absolute;
  width: 100%;
  height: 80vh;
}
.bannerH1 {
  position: absolute;
  display: block;
  font-size: 4.5rem;
  width: 100%;
  margin: 12.5rem auto;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.bannerImg {
  display: block;
  width: 100%;
  height: 80vh;
}
.bannerP{
  display: block;
  width: 100%;
  font-size: 3.25rem;
  color: #fff;
  position: absolute;
  margin: 21.875rem auto;
  text-align: center;
}
.bannerLi:nth-child(1){
  background: url(../../index/images/528d33bbf098b67e25fd18abe540cd94.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
.bannerLi:nth-child(2){
  background: url(../../index/images/894947dedf019ccc6e9ae7e9cfbe32fd.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
.bannerLi:nth-child(3){
  background: url(../../index/images/cbee00b02cf6d4eb934af75f8973b8df.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
.bannerLi:nth-child(4){
  background: url(../../index/images/restaurant-690569.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
.bar {
  position: absolute;
  width: 100%;
  bottom: 10px;
  margin: 0 auto;
  z-index: 2;
  text-align: center;
}
.bar span {
  width: 40px;
  height: 3px;
  border: 1px solid;
  border-radius: 20px;
  background-color: white;
  display: inline-block;
  margin-right: 10px;
}
.active {
  background: red !important;
}
.pre,
.next{
  width: 30px;
  height: 100px;
  border: 1px solid black;
  background-color: black;
  opacity: .5;
  position: relative;
  top: 300px;
  z-index: 2;
  cursor:pointer;
}
.pre{
  float: left;
}
.pre span , .next span{
  display: block;
  position: relative;
  width:0;
  height:0;
}
.pre span{
  top: 40px;
  border-bottom:10px solid black;
  border-left:10px solid black;
  border-top:10px solid black;
  border-right:10px solid white;
}
.next span{
    left: 10px;
    top: 40px;
    border-bottom:10px solid black;
    border-left:10px solid white;
    border-top:10px solid black;
    border-right:10px solid black;
}
.next{
  float: right;
}
/* 轮播动画 */
.image-enter-active {
  opacity: 1;
  transition: all .5s ease-in-out;
}
.image-leave-active {
  opacity: 0;
  transition: all .5s ease-in-out;
}
.image-enter {
  opacity: 0;
}
.image-leave {
  opacity: 1;
}
/* banner end*/

/* newProduct */
.newProduct{
  width: 70%;
  margin: 70px auto;
}
h2{
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  margin: 90px auto;
}
h2::after{
  content: '';
  display: block;
  border: 3px solid #C72E33;
  width: 180px;
  border-radius: 15px;
  margin: 20px auto;
}
.product{
  width: 100%;
  height: auto;
  display: grid;
  margin: 50px 0;
  grid-template-columns: repeat(4,1fr);
}
.product div{
  border: 1px solid #AAAAAA;
  margin: 0 auto;
  background-color: white ;
  height: 330px;
  width: 260px;
  transition: border .3s ease-in-out ,box-shadow .3s ease-in-out;
}
.product div a{
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
.product div img{
  display: block;
  width:80%;
  margin: 0 auto;
}
.product div p{
  color: #3c3c3c;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  width: 100%;
  padding: 15px 0;
  bottom:0 ;
  text-align: center;
  transition: color .3s ease-in-out ,background-color .3s ease-in-out;
}
.product div:hover{
  border: 1px solid #C72E33;
  box-shadow: 0 0 5px #AAAAAA;
  transition: all .3s ease-in-out;
}
.product div:hover .pitchOn{
  color: white;
  background-color: #C72E33;
  transition: all .3s ease-in-out;
}

/* solution */
.solution{
  background-color: #3C3C3C;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(4,22%);
  justify-content: center;
}
.solution .check{
  height: 500px;
}
.solution .check a{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  bottom: 100%;
}
.shade{
  background-color: black;
  opacity: .4;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transition: background-color .2s ease-in-out,
              opacity .2s ease-in-out;
}
.check:hover .shade{
  background-color: #C72E33 !important;
  opacity: 1 !important;
  transition: all .3s ease-in-out;
}
/* solution end*/
/* 背景图 */
/* .oneSolution{
  background: url(../../index/images/photo-1555212697-194d092e3b8f.png) no-repeat;
  background-size: cover;
  background-position: center;
} */
.twoSolution{
  background: url(../../index/images/photo-1555529733-0e670560f7e1.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
.threeSolution{
  background: url(../../index/images/photo-1553413077-190dd305871c.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
.fourSolution{
  background: url(../../index/images/photo-1584819762556-68601d7f3a86.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
.fiveSolution{
  background: url(../../index/images/sparks-692122.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
/* 背景图 end */

.check h4{
  font-size: 36px;
}
.check h4::after{
  width: 50px;
}

/* indexAbout 关于我们*/
.indexAbout{
  width: 100%;
  height: 800px;
  background: url(../../index/images/123123123.png) no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 120px;
}
.aboutMain{
  margin: 110px auto;
  width: 60%;
  height: 450px;
  background-color: #C72E33;
  overflow: hidden;
  /* border: 1px solid #AAAAAA; */
  /* border-radius: 50px; */
}
.mainImg{
  height: 100%;
  width: 55%;
  background: url(../../index/images/pexels-tima-miroshnichenko-691443.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  float: left;
}
.mainRight{
  width: 45%;
  float: right;
  color: white;
  font-size: 20px;
  line-height: 1.5;
  text-indent: 2em;
}
.mainRight p{
  width: 90%;
  margin: 50px auto;
}
.mainRight button{
  margin: 20px;
  border: 1px solid white;
  background-color: #C72E33;
  color: white;
}
.aboutBtn:hover{
  background-color: white;
  color: #C72E33;
}
/* 多端自适应 */
@media all and (max-width:1515px){
  .newProduct {
    width: 85%;
  }
}
@media all and (max-width:1250px){
  .newProduct {
    width: 100%;
  }
  .aboutMain{
    width: 85%;
  }
}
@media all and (max-width:1065px){
  .banner{
    margin-top: 50px;
  }
  .newProduct {
    width: 65%;
  }
  .product {
    grid-template-columns: repeat(2,1fr);
    row-gap: 30px;
  }
  .solution {
    grid-template-columns: repeat(2,45%);
  }
}
@media all and (max-width:888px){
  .newProduct {
    width: 85%;
  }
  .aboutMain{
    width: 90%;
  }
  .mainImg{
    width: 100%;
    height: 40%;
  }
  .mainRight{
    width: 100%;
    height: 60%;
  }
  .mainRight p {
    margin: 10px auto;
    font-size: 18px;
  }
}
@media all and (max-width:650px){
  .newProduct {
    width: 100%;
  }
  .mainRight p {
    font-size: 14px;
  }
  .aboutBtn{
    font-size: 14px;
    margin: 0 auto !important;
    height: 30px;
  }
  .indexAbout {
    margin-bottom: 30px;
  }
  .bannerH1 {
    font-size: 2.1rem;
  }
  .bannerP {
    width: 100%;
    font-size: 1.25rem;
    margin: 17.875rem auto;
  }
}
@media all and (max-width:550px){
  .product {
    grid-template-columns: repeat(1,1fr);
  }
  .solution {
    padding: 30px 0;
    grid-template-columns: repeat(1,90%);
  }
  .check{
    height: 350px !important;
  }
  .check h4{
    font-size: 36px;
    top: 70px;
  }
  .mainP{
      font-size: 18px;
      top: 90px;
      opacity: 1;
  }
  .check:hover .mainH4{
      top: 70px !important;
  }
  .check:hover .mainP{
      top: 90px !important;
  }
  .product div {
    height: 280px;
    width: 230px;
  }
}