@media only screen and (max-width:1000px){
  
  .proitem{ width: 100%; }
  .design-box{ width: 100%; }
  .blog-columns{ width: 100%; }
  .blog-c-img img{ width: 100%; height: auto; }
  .order-form{ width: 100%; }
  
  .view-slider{ height: 360px; }
  .blog-view-vv{ height: 360px; }
  
}

@media only screen and (max-width:800px){
  
  #menu-gum-btn{ display: block; }
  .designitem-box{ bottom: 0; }
  
  main{ margin-left: 40px; }
  .main-desc{ padding: 10px 20px; }
  
  .main-loading{ left: 0; z-index: 3; }
  
  .design-box:hover img{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray; /* IE 6-9 */
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }
  
  .pro-img:hover{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray; /* IE 6-9 */
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }
  .proitem-box{ bottom: 0; }

  
}

@media only screen and (max-width:400px){
  
  .p-v-btn{ float: none !important; text-align: center; }
  
  .view-slider{ height: 210px; }
  .blog-view-vv{ height: 210px; }
  
  footer{ position: static; margin-left: 70px; }
  .social ul{ margin: 15px 0 0 0; }
  
}

@media only screen and (min-width:1500px){
  
  .design-box{ width: 33.3%; }
  .view-slider{ height: 600px; }
  
}

@media only screen and (min-width:1500px){
  
  .view-slider{ height: 700px; }
  
}