.ref_area {
  background: url("../img/bg_case_rwd.jpg");
  width: 100%;
  height: auto;
  display: block;
  background-size: cover;
  background-attachment: fixed; }

.ref_item {
  width: 25%;
  float: left; }
  .ref_item a {
    margin: 20px;
    padding: 5px;
    background-color: rgba(117, 117, 117, 0.5);
    transition: all 0.4s ease;
    top: 0; }
    .ref_item a:hover {
      box-shadow: 1px 1px 5px #757575;
      top: -10px; }

.ref_content {
  padding-top: 10px; }
  .ref_content h5 {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f5f5f5; }

@media (max-width: 1024px) {
  .ref_item {
    width: 33.33%; } }

@media (max-width: 768px) {
  .ref_area {
    background-position: 35% 50%;
    background-attachment: initial; }
  .ref_item a {
    margin: 10px; }
    .ref_item a:hover {
      box-shadow: 1px 1px 5px transparent;
      top: 0; } }

@media (max-width: 480px) {
  .ref_item {
    width: 50%; } }