@media only screen and (min-width: 769px) {

.lil .more {width: 170px;height: 56px;display: flex;align-items: center;justify-content: center;color: #fff;background: var(--main_color);}
.lil .more span {width: 8px;height: 8px;background: #fff;border-radius: 10px;margin-left: 20%;} 

.cp {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8%;
}

.cp img {
    flex: 1;
    max-width: 920px;border-radius: 30px;
}

.lil {
    flex: 1;
    margin-right: 4%;color: #fff;
}

.lil h5 {
    font-size: 24px;
    line-height: 2;
}


.lil h1 {
    font-size: 40px;
    line-height: 1.5;
}

.gd {
    margin-bottom: 10%;
}

.mz {
    margin-bottom: 9%;
}

.mz h2 {
    font-size: 36px;
    font-weight: bold;
    line-height: 2;
}

.mz p {
    font-size: 16px;
    line-height: 2;
}  
  
  
  
.runpic-box{
  width:100%;
  overflow:hidden;
  position:relative;background:url(/images/product-bg.jpg) no-repeat;
}
 .runpic-words{
  position:absolute;
  width: 1600px;
  left:50%;
  bottom: 10%;
  transform: translate(-50%,-50%);
  z-index:3;
  justify-content: space-between;
}
.runpic-words ul {
    display: flex;
    justify-content: space-between;
} 
 .runpic-words ul li{
  width: 16.666%;
  float:left;
  text-align:center;
   cursor: pointer;
}
 .runpic-words ul li img{
  display:block;
  margin:0 auto;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  -moz-transition:all 1s;
  transition:all 1s;
}
 .runpic-words ul li h6{
    font-size: 18px;
    /* font-weight: bold; */
    color: #fff;
    font-family: "arial";
    margin-bottom: 5px;
}
 .runpic-words ul li p{
  font-size:18px;
  color:#fff;
  text-transform:capitalize;
  margin-top:10px;
}

 .runpic-words ul li span{
  font-size:18px;
  color:#fff;
  text-transform:capitalize;
}


 .runpic-words ul li:hover img{
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  transform:rotateY(180deg);
}
 .runpic-line-null{
  position:absolute;
  width:100%;
  height: 2px;
  background-color:rgba(255, 255, 255, .1);
  left:0;
  bottom: 10%;
  z-index:4;
}
 .runpic-line{
  position:absolute;
  width:10%;
  height: 6px;
  background-color: #0128b4;
  left:0;
  bottom: 9.9%;
  z-index:4;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  -moz-transition:all 1s;
  transition:all 1s;
}
 .runpic-pic{
  width:100%;
  overflow:hidden;
  position:relative;
  z-index:1;
  height: 90vh;
  display: flex;
  align-items: center;
}
.runpic-pic:after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.06);}
 .runpic-pic ul li{z-index: 9;
     width: 1600px;
    height: 100%;
    display: none;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: absolute;
    -o-background-size: cover;
    top: 10%;
    left: 8%;
}

  
 .runpic-pic-shade{
  position:absolute;
  z-index:2;
  width:100%;
  height:100%;
  -webkit-transition:all 2s;
  -o-transition:all 2s;
  -moz-transition:all 2s;
  transition:all 2s;
}
.runpic-words-pic{ height:auto;}
}



@media only screen and (max-width: 768px) {
.runpic-box ul a{ width:50%;float: left;min-height: 100px;display:block;margin-top: 20px;margin-bottom: 20px;}
.runpic-box{
  width:100%;
  overflow:hidden;
  position:relative;
}
.runpic-words{
  position:
  absolute;
  width:100%;
  max-width: 100%;left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index:3;
}
.runpic-words ul li{
  width: 100%;
  float:
  left;
  text-align:
  center;
}
.runpic-words ul li img{
  display:
  block;
  margin:0 auto;
  width: 32px;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  -moz-transition:all 1s;
  transition: all 1s;
}
 .runpic-words ul li h6{
   font-size: 22px;
   font-family: arial;
   color:#fff;
   margin-top: 10px;
   margin-bottom: 0px;
}
.runpic-words ul li p{
  font-size:18px;
  color:#fff;
  text-transform:capitalize;
  margin-top:10px;
}
.runpic-words ul li span{
  font-size: 18px;
  font-weight: bold;
  color:#fff;
  text-transform:
  capitalize;
}


 .runpic-words ul li:hover img{
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  transform:rotateY(180deg);
}
 .runpic-line-null{
  position:
  absolute;
  width:100%;
  height: 0px;
  background-color:
  rgba(255, 255, 255, .1);
  left:0;
  bottom: 10%;
  z-index:4;
}
 .runpic-line{
  position:
  absolute;
  width:10%;
  height: 0px;
  background-color: #fff;
  left:0;
  bottom: 10%;
  z-index:4;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  -moz-transition:all 1s;
  transition:
  all 1s;
}
 .runpic-pic{
  width:100%;
  overflow:
  hidden;
  position:
  relative;
  z-index:1;
  height: 580px;
  /* background-color:#b6b5aa; */
}
 .runpic-pic ul li{
  width:100%;
  height: 580px;
  display:
  none;
  background-repeat:
  no-repeat !important;
  position:
  absolute;
  -o-background-size:cover;
  background-position: center center !important;
  background-size: cover !important;
  top:0%;
  left:0%;
}
 .runpic-pic-true{
  -webkit-animation:toPicBig 1s ease-in-out both;
  -moz-animation:toPicBig 1s ease-in-out both;
  -o-animation:toPicBig 1s ease-in-out both;
  animation:toPicBig 1s ease-in-out both;
}
  
 .runpic-pic-shade{
  position:absolute;
  z-index:2;
  width:100%;
  height:100%;
  background-color:rgba(0, 0, 0, .4);
  -webkit-transition:all 2s;
  -o-transition:all 2s;
  -moz-transition:all 2s;
  transition:all 2s;
}
 .runpic-words-pic{
  height: auto;
  min-height: 40px;
}
}


@-webkit-keyframes toPicBig{
  0% {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes toPicBig{
  0% {
    -moz-transform: scale(1.04);
    transform: scale(1.04);
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
@-o-keyframes toPicBig{
  0% {
    -o-transform: scale(1.04);
    transform: scale(1.04);
  }
  100% {
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes toPicBig{
  0% {
    -webkit-transform: scale(1.04);
    -moz-transform: scale(1.04);
    -o-transform: scale(1.04);
    transform: scale(1.04);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@media only screen and (max-width: 1440px) and (min-width:1376px){
}
@media only screen and (max-width: 1366px) and (min-width:1025px){
}