<style>
  @font-face {
    font-family: 'FontAwesome';
    src: url('/font/fontawesome-webfont.eot?v=4.0.3');
    src: url('/font/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
      url('/font/fontawesome-webfont.woff?v=4.0.3') format('woff'),
      url('/font/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
      url('/font/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }

  div#mk_df_title {
    width: 100%;
    background-color: #24a2e0;
    color: white;
    font-size: 15px;
  }

  .table-ul {
    background-color: skyblue;
    display: table;
    table-layout: fixed;
    text-align: center;
    width: 100%;
  }

  .table-ul li {
    border-right: 1px solid #fff;
    display: table-cell;
    vertical-align: middle;
    height: 40px;
  }

  .table-ul li:last-child {
    border-right: 0;
  }

  .table-ul li a {
    color: #fff;
    display: block;
    font-size: 10px;
    text-decoration: none;
  }

  #active {
    background-color: #24a2e0;
    color: #fff;
  }

  .icon-CS방어:before {
    color: #fff;
    content: "\f021";
    font-family: "FontAwesome";
  }

  .icon-CS방어:hover {
    background-color: #24a2e0;
    color: #fff;
  }

  .icon-CS-PRE:before {
    color: #fff;
    content: "\f021";
    font-family: "FontAwesome";
  }

  .icon-CS-PRE:hover {
    background-color: #24a2e0;
    color: #fff;
  }

  .icon-CF방어:before {
    color: #fff;
    content: "\f021";
    font-family: "FontAwesome";
  }

  .icon-CF방어:hover {
    background-color: #24a2e0;
    color: #fff;
  }

  .icon-BL상시:before {
    color: #fff;
    content: "\f021";
    font-family: "FontAwesome";
  }

  .icon-BL상시:hover {
    background-color: #24a2e0;
    color: #fff;
  }

  .icon-인증방어:before {
    color: #fff;
    content: "\f021";
    font-family: "FontAwesome";
  }

  .icon-인증방어:hover {
    background-color: #24a2e0;
    color: #fff;
  }

  .icon-MGTK:before {
    color: #fff;
    content: "\f021";
    font-family: "FontAwesome";
  }

  .icon-MGTK:hover {
    background-color: #24a2e0;
    color: #fff;
  }

  .mk1123 {
    opacity: 0.4;
    filter: alpha(opacity=40);
  }
</style>
<ul class="table-ul">
  @foreach($entities as $key=>$entity)
  @php $zone = $entity->getZone() @endphp
  <li class="icon-<?= $zone ?>" id="{{$zone == $this->zone ? "active" : ""}}">
    <a href="/DefenseInfoMK.sev?zone={{$zone}}"><?= $zone ?></a>
  </li>
  @endforeach
</ul>