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

 .runpic-box{
  width:100%;
  overflow:hidden;
  position:relative;
}
 .runpic-words{
  position:absolute;
  width:96%;
  
 left:50%;
  top: 50%;
  
    transform: translate(-50%,-50%);
  z-index:3;
}
 .runpic-words ul li{
  width: 11%;
  float:left;
  text-align:center;
}
 .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: 20px;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 5px;
    font-weight: bold;
    text-shadow: 2px 2px 6px #000000cf;
  }
 .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:1px;
  background-color:rgba(255, 255, 255, .1);
  left:0;
  bottom: 38%;
  z-index:4;
}
 .runpic-line{
  position:absolute;
  width:10%;
  height:1px;
  background-color: #fff;
  left:0;
  bottom: 38%;
  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: 920px;
  background-color:#000; 
}
 .runpic-pic ul li{
  width:100%;
  height: 920px;
  display:
  none;
  background-repeat:
  no-repeat !important;
  background-attachment:
  fixed !important;
  position:
  absolute;
  -o-background-size:cover;
  background-size: cover !important;
  top:0%;
  left:0%;
   opacity: 0.8;
}
 .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;
}
 .yyly{
  position:absolute;
  z-index:3;
  width:80%;
  margin-left:-40%;
  left:50%;
  margin-top:110px;
}
 .yyly1_bt{
  font-size:48px;
  font-weight:bold;
  color:#fff;
}
 .yyly1_gd{
  margin-top:50px;
}
 .gd a{
  color:#fff;
  width:160px;
  height:50px;
  border-color:rgba(255, 255, 255, 1);
  border-style:solid;
  border-width:1px;
  line-height:50px;
  text-align:center;
  font-size:16px;
  display:block;
  border-radius:100px;
}
 .yyly2{
  color:#fff;
  font-size:16px;
  line-height:36px;
  padding-top:25px;
}
  
  
}



@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: 18px;
  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: 12px;
  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: 38%;
  z-index:4;
}
 .runpic-line{
  position:
  absolute;
  width:10%;
  height: 0px;
  background-color: #fff;
  left:0;
  bottom: 38%;
  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: 1600px; 
  
  /* background-color:#b6b5aa; */
}
 .runpic-pic ul li{
  width:100%;
  height: 1600px;
  
  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;
}
 .yyly{
  position:absolute;
  z-index:3;
  width:80%;
  margin-left:-40%;
  left:50%;
  margin-top:110px;
}
 .yyly1_bt{
  font-size:48px;
  font-weight:bold;
  color:#fff;
}
 .yyly1_gd{
  margin-top:50px;
}
 .gd a{
  color:#fff;
  width:160px;
  height:50px;
  border-color:rgba(255, 255, 255, 1);
  border-style:solid;
  border-width:1px;
  line-height:50px;
  text-align:center;
  font-size:16px;
  display:block;
  border-radius:100px;
}
 .yyly2{
  color:#fff;
  font-size:16px;
  line-height:36px;
  padding-top:25px;
}
  
  
}


@-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){
  
 .runpic-words ul li h6{
  font-size:16px;

}
}
@media only screen and (max-width: 1366px) and (min-width:1025px){
  
 .runpic-words ul li h6{
  font-size:14px;

}
}