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

 .runpic-box{
  width:100%;
  overflow:hidden;
  position:relative;
}
 .runpic-words{
  position:absolute;
  width:94%;
  
  max-width: 1400px;
   left:50%;
bottom: 10%;
  
    transform: translate(-50%,-50%);
  z-index:3;
}
 .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: 64px;
    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:1px;
  background-color:rgba(255, 255, 255, .1);
  left:0;
  bottom: 10%;
  z-index:4;
}
 .runpic-line{
  position:absolute;
  width:10%;
  height:1px;
  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: 100vh;
}
.runpic-pic:after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3);}
 .runpic-pic ul li{
  width:100%;
  height: 100%;
  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%;
}
 .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%;
  -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){
   .runpic-words ul li h6{ font-size:48px;}
}
@media only screen and (max-width: 1366px) and (min-width:1025px){
   .runpic-words ul li h6{ font-size:30px;}
}