.hero{ padding-top: 0px;
  padding-bottom: 95px;
  background-image: -webkit-linear-gradient(45deg, rgba(97, 0, 255, .5), rgba(151, 29, 252, .5) 22%, rgba(164, 65, 248, .5) 50%, rgba(90, 108, 239, .5) 72%, rgba(53, 130, 235, .5) 86%, rgba(30, 242, 241, .5)), url("../images/hardwareDABBOX/theory-feature-background.jpg");
  background-image: linear-gradient(45deg, rgba(97, 0, 255, .5), rgba(151, 29, 252, .5) 22%, rgba(164, 65, 248, .5) 50%, rgba(90, 108, 239, .5) 72%, rgba(53, 130, 235, .5) 86%, rgba(30, 242, 241, .5)), url("../images/hardwareDABBOX/theory-feature-background.jpg");
  background-position: 0% 0%, 50% 50%;
  background-size: auto, cover;
  background-attachment: scroll, fixed; display:block; margin-top:90px; 
 }
.w-container{margin-left:auto;margin-right:auto;max-width:940px}



#autoScroll01{ width:100%; overflow:hidden; margin-top:4%; position:relative; padding-bottom:70%;}
.autoBox-struture{ width:100%; padding:15%;}
.autoBox-scroll-content{ width:1000%; position:absolute; top:0; left:0;}
.autoBox-products-content{ width:100%;  top:0; left:0;}
.autoBox-products-content li{position:relative; float:left; width:20%; margin-left:4%; margin-bottom:4%;  display:inline-block;background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border:none;
  border-radius:0px;
  -moz-box-shadow:0px 7px 7px rgba(174, 174, 174, 0.349019607843137);
  -webkit-box-shadow:0px 7px 7px rgba(174, 174, 174, 0.349019607843137);
  box-shadow:0px 12px 12px rgba(130, 130, 130, 0.749019607843137);}

.axis h1{ font-size:1.6vw; color:#000; padding:12% 0; font-family:"Roboto Light",Arial,Tahoma,Verdana; text-align:center;}  
.axis button{ font-size:0.9vw;  background-color:rgba(0, 60, 255, 0.7);border:none;border-radius:7px; color:rgba(255, 255, 255, 1); width:80%; padding:8%; display:block; margin:0 auto 25%; cursor:pointer;}

.autoBox-products-content a{ width:100%; display:block; height:100%}
.autoBox-products-content li:hover{ background-color:rgba(0, 255, 120, 0.2);display: block; }
.autoBox-products-content li .axis{ width:60%; margin:0 auto;margin-top:6%; }


.axis button:hover{-moz-box-shadow:2px 5px 7px rgba(174, 174, 174, 0.349019607843137);
  -webkit-box-shadow:2px 5px 7px rgba(174, 174, 174, 0.349019607843137);
  box-shadow:2px 5px 7px rgba(130, 130, 130, 0.8); background-color:rgba(80, 170, 255, 1);}
  
.axis .mobile{width:20%; position:absolute; right:3%; bottom:9%;}
.autoBox-scroll{ list-style:none; }
@media (min-width:1025px){
.hardware .axis img { height:150px;}
.autoBox-scroll li{position:relative; float:left; width:2%; margin-left:0.42%;  display:inline-block;background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border:none;
  border-radius:0px;
  -moz-box-shadow:0px 7px 7px rgba(174, 174, 174, 0.349019607843137);
  -webkit-box-shadow:0px 7px 7px rgba(174, 174, 174, 0.349019607843137);
  box-shadow:0px 12px 12px rgba(130, 130, 130, 0.749019607843137);}

.axis h1{ font-size:1.6vw; color:#000; padding:12% 0; font-family:"Roboto Light",Arial,Tahoma,Verdana; text-align:center;}  
.axis button{ font-size:0.9vw;  background-color:rgba(0, 60, 255, 0.7);border:none;border-radius:7px; color:rgba(255, 255, 255, 1); width:80%; padding:8%; display:block; margin:0 auto 25%; cursor:pointer;}
  
 } 
  
 @media (min-width:0) and (max-width:1024px){
.hardware .axis img { height:140px;}
.autoBox-products-content li{position:relative; float:left; width:40%; margin-left:4%; margin-bottom:4%;  display:inline-block;background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border:none;
  border-radius:0px;
  -moz-box-shadow:0px 7px 7px rgba(174, 174, 174, 0.349019607843137);
  -webkit-box-shadow:0px 7px 7px rgba(174, 174, 174, 0.349019607843137);
  box-shadow:0px 12px 12px rgba(130, 130, 130, 0.749019607843137);}
.axis h1{ font-size:1.6vw; color:#000; padding:12% 0; font-family:"Roboto Light",Arial,Tahoma,Verdana; text-align:center;}  
.axis button{ font-size:0.9vw;  background-color:rgba(0, 60, 255, 0.7);border:none;border-radius:7px; color:rgba(255, 255, 255, 1); width:80%; padding:8%; display:block; margin:0 auto 25%; cursor:pointer;} 
.autoBox-scroll li{position:relative; float:left; width:4%; margin-left:0.7%;  display:inline-block;background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border:none;
  border-radius:0px;
  -moz-box-shadow:0px 7px 7px rgba(174, 174, 174, 0.349019607843137);
  -webkit-box-shadow:0px 7px 7px rgba(174, 174, 174, 0.349019607843137);
  box-shadow:0px 12px 12px rgba(130, 130, 130, 0.749019607843137);}

.axis h1{ font-size:2.6vw; color:#000; padding:12% 0; font-family:"Roboto Light",Arial,Tahoma,Verdana; text-align:center;}   
.axis button{ font-size:1.6vw;  background-color:rgba(0, 60, 255, 0.7);border:none;border-radius:7px; color:rgba(255, 255, 255, 1); width:80%; padding:8%; display:block; margin:0 auto 25%; cursor:pointer;}

}
@media (max-width:480px){
.autoBox-scroll-content{ width:100%;}
.autoBox-products-content li{position:relative; float:left; width:70%; margin-left:12%; margin-bottom:4%;  display:inline-block;background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border:none;
  border-radius:0px;
  -moz-box-shadow:0px 7px 7px rgba(174, 174, 174, 0.349019607843137);
  -webkit-box-shadow:0px 7px 7px rgba(174, 174, 174, 0.349019607843137);
  box-shadow:0px 12px 12px rgba(130, 130, 130, 0.749019607843137);}
.axis h1{ font-size:1.6vw; color:#000; padding:12% 0; font-family:"Roboto Light",Arial,Tahoma,Verdana; text-align:center;}  
.axis button{ font-size:0.9vw;  background-color:rgba(0, 60, 255, 0.7);border:none;border-radius:7px; color:rgba(255, 255, 255, 1); width:80%; padding:8%; display:block; margin:0 auto 25%; cursor:pointer;}
.autoBox-scroll li{position:relative; float:left; width:70%; margin-left:16%; margin-top:8%;  display:inline-block;background:inherit;
  background-color:rgba(255, 255, 255, 1);
  border:none;
  border-radius:0px;
  -moz-box-shadow:0px 7px 7px rgba(174, 174, 174, 0.349019607843137);
  -webkit-box-shadow:0px 7px 7px rgba(174, 174, 174, 0.349019607843137);
  box-shadow:0px 12px 12px rgba(130, 130, 130, 0.749019607843137);} 
.axis h1{ font-size:4.6vw; color:#000; padding:12% 0; font-family:"Roboto Light",Arial,Tahoma,Verdana; text-align:center;}   
.axis button{ font-size:3.6vw;  background-color:rgba(0, 60, 255, 0.7);border:none;border-radius:7px; color:rgba(255, 255, 255, 1); width:80%; padding:8%; display:block; margin:0 auto 25%; cursor:pointer;}	
	
	
	
}

.autoBox-scroll a{ width:100%; display:block; height:100%}
.autoBox-scroll li:hover{ background-color:rgba(0, 255, 120, 0.2);display: block; }
.autoBox-scroll li .axis{ width:60%; margin:0 auto;margin-top:6%; }


.axis button:hover{-moz-box-shadow:2px 5px 7px rgba(174, 174, 174, 0.349019607843137);
  -webkit-box-shadow:2px 5px 7px rgba(174, 174, 174, 0.349019607843137);
  box-shadow:2px 5px 7px rgba(130, 130, 130, 0.8); background-color:rgba(80, 170, 255, 1);}
  
.axis .mobile{width:20%; position:absolute; right:3%; bottom:9%;}