#hexGrid { display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; overflow: hidden; list-style-type: none;  }
.hex { position: relative; visibility: hidden; outline: 1px solid transparent;  cursor: pointer }
.hex::after { content: ''; display: block; padding-bottom: 86.602%;  /* =  100 / tan(60) * 1.5 */ }
.hexIn { position: absolute; width: 96%; padding-bottom: 110.851%; /* =  width / sin(60) */ margin: 0 2%; overflow: hidden; visibility: hidden; outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */ transform: rotate3d(0, 0, 1, -60deg) skewY(30deg); }
.hexIn * { position: absolute; visibility: visible; outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */  }
.hexLink { display: block; width: 100%; height: 100%; text-align: center; color: #fff; overflow: hidden; transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg); }

/*** HEX CONTENT **********************************************************************/
.hex img { left: -100%; right: -100%; width: auto; height: 100%; margin: 0 auto; transform: rotate3d(0, 0, 0, 0deg); }
.hex p { width: 100%; height: 100%; padding: 5%; opacity: 0; box-sizing: border-box; background-color: rgba(0, 188, 212, 0.7); font-weight: 300; transition: all 0.4s ease 0.0s;
top: -100%; padding-top: 50%; transform: translate3d(0, 100%, 0); opacity: 0; white-space: nowrap;
 }



.hex p a.A01 , .hex p a.A02{ width: 32px; height: 32px; display: inline-block; text-align: left; background: #CCCCCC; padding: 6px; color: #ffffff; border: 1px solid #CCCCCC;}
.hex p a.A01 i, .hex p a.A02 i{  display: inline-block;  }
.LinkPage{ font-size: 20px; line-height: 20px; position: relative; left: 3px; top: -6px;}
.LinkOut{ font-size: 14px; line-height: 20px; position: relative; left: 3px; top: -8px; }

@media (min-width:0px) and (max-width:600px){
.hex p a.A01 , .hex p a.A02 { width: 24px; height: 24px; display: inline-block; text-align: left; background: #CCCCCC; padding: 2px; color: #ffffff; border: 1px solid #CCCCCC;}
.hex p a.A01 i, .hex p a.A02 i{  display: inline-block;  }
.LinkPage{ font-size: 18px; line-height: 20px; position: relative; left: 4px; top: -3px;}
.LinkOut{ font-size: 13px; line-height: 20px; position: relative; left: 3px; top: -5px; }


}

.hex p a:hover { }
.A01 { position: relative; left: -20px; top: 40%; transition: left 0.3s ease 0.0s; }
.A02 { position: relative; right: -20px; top: 40%; transition: right 0.3s ease 0.0s; }

/*** HOVER EFFECT  **********************************************************************/
.hexLink:hover p, .hexLink:focus p {  opacity: 1; }
.hexLink:hover p a.A01, .hexLink:focus p a.A01{ opacity: 1; position: relative; left: -2px; top: 40%; }
.hexLink:hover p a.A02, .hexLink:focus p a.A02{ opacity: 1; position: relative; right: -2px; top: 40%; }

@media (min-width:0px) and (max-width:800px){
.A01 { top: 0%;}
.A02 { top: 0%;}
.hexLink:hover p a.A01, .hexLink:focus p a.A01{ top: 0%; }
.hexLink:hover p a.A02, .hexLink:focus p a.A02{ top: 0%; }
}


/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
/* 註︰ 100/n (5) > 一行顯示5個的意思，group:10 & br:6 > 兩行共9個+第6個斷行的意思，hex/2 > 間距為hex的一半 */
@media (min-width:1201px) {
  #hexGrid { padding-bottom: 7.4% }
  .hex { width: 25%; /* 100/n (4) */ }
  .hex:nth-child(7n+5) { /* group:9 & br:6 */
  margin-left: 12.5%;  /* .hex/2 */ }
}
@media (max-width:1200px) and (min-width:901px) {
  #hexGrid { padding-bottom: 7.4% }
  .hex { width: 25%; /* 100/n (4) */ }
  .hex:nth-child(7n+5) { /* group:9 & br:6 */
  margin-left: 12.5%;  /* .hex/2 */ }
}
@media (max-width:900px) and (min-width:601px) {
  #hexGrid { padding-bottom: 7.4% }
  .hex { width: 25%; /* 100/n (4) */ }
  .hex:nth-child(7n+5) { /* group:7 & br:5 */
  margin-left: 12.5%;  /* .hex/2 */ }
}
@media (max-width:600px) {
  #hexGrid { padding-bottom: 7.4% }
  .hex { width: 33.333%; /* 100/n (3) */ }
  .hex:nth-child(5n+4) { /* group:5 & br:4 */
  margin-left: 16.666%;  /* .hex/2 */ }
}
@media (max-width:400px) {
  #hexGrid { font-size: 13px; }
}