.contents {
     height: 100%;
     margin: auto;
     --wrp: 1200px;
     /* width: var(--wrp); */
     margin: 0 5%;
     margin-top: 8%;
     /* margin-left: 5%; */
     margin-bottom: 5%;
 }
 
 .contents {
     /* background: center/1.6% #f5f5f5 url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="hexagons" fill="%23e5e5e5" fill-opacity="0.4" fill-rule="evenodd"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); */
     background: #e4e7ed;
 }
 
 .contents,
 .hex-wrap {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     align-content: center;
 }
 
 .hex-wrap {
     --r: 0.24935;
     --r-1: calc(1 / calc(1 - var(--r)));
     --g: 5px;
     --w: calc(var(--r-1) * var(--wrp) / 6 - 2 * var(--r-1) * var(--g));
     margin: 0 -1px;
     max-width: 1200px;
     justify-content: flex-start;
     flex-wrap: wrap;
 }
 
 .hex:hover {
     cursor: pointer;
     transform: translateY(-3px);
     background-color: transparent;
     background-image: url('http://nwzimg.wezhan.cn/contents/sitefiles2041/10209189/images/19524522.png');
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background: -moz-linear-gradient(top, none, none);
     background: -o-linear-gradient(top, none, none);
     background: linear-gradient(top, none, none);
     background: -webkit-gradient(linear, left top, left bottom, from(none), to(none));
     background-size: cover;
     border-top: 1px none transparent;
     border-bottom: 1px none transparent;
     border-right: 1px none transparent;
     border-left: 1px none transparent;
     /*-box-shadow-*/
     -webkit-box-shadow: 0 2px 0 rgba(102, 102, 102, 0);
     -moz-box-shadow: 0 2px 0 rgba(102, 102, 102, 0);
     -ms-box-shadow: 0 2px 0 rgba(102, 102, 102, 0);
     box-shadow: 0 2px 0 rgba(102, 102, 102, 0);
     transition: box-shadow .3s, border .3s, background-color .3s, color .3s, transform .3s;
}
 .hex {
     clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
     background: center/cover #fff;
     color: #faf2e8;
     /* width: var(--w);
     height: calc(0.8658 * var(--w)); */
     height: 127px;
     width: 139px;
     margin: var(--g) calc(var(--r) / -2 * var(--w) + var(--g));
     position: relative;
 }
 .title {
    z-index: 11111;
    color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}
 
 .hex:nth-of-type(4n) {
     transform: translateY(calc(50% + var(--g)));
 }
 
 .hex:nth-of-type(4n+2) {
     transform: translateY(calc(-50% - var(--g)));
 }
 
 .hex[data-h1]:before {
     content: attr(data-h1);
     font: calc(var(--w) / 3) "Permanent Marker", sans-serif;
     position: absolute;
     width: 70%;
     text-align: left;
     top: 43%;
     left: 50%;
     transform: translate(-61%, -50%) rotate(-25deg);
 }
 
 .hex:before {
     position: absolute;
     width: 88%;
     text-align: inherit;
     top: 47%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
 
 .hex[data-h1]:before {
     content: attr(data-h1);
     font: calc(var(--w) / 3) "Permanent Marker", sans-serif;
 }
 
 .hex[data-h1]:before {
     content: attr(data-h1);
     font: calc(var(--w) / 3) "Permanent Marker", sans-serif;
     transform: translate(-65%, -43%) rotate(-16deg);
 }
 
 .hex[data-h2]:before {
     width: 70%;
     content: attr(data-h2);
     font: calc(var(--w) / 5)/1 "Rock Salt", sans-serif;
     transform: translate(-49%, -50%) rotate(-29deg);
 }
 
 .hex.negr[data-h2]:before {
     transform: translate(-49%, -50%) rotate(31deg);
 }
 
 .hex[data-team] {
     transition: transform 0.5s;
 }
 
 .hex[data-team]:hover {
     z-index: 9;
     transform: scale(2);
 }
 
 .tot {
     transform-origin: 50% 0;
 }
 
 .tob {
     transform-origin: 50% 100;
 }
 
 .tar {
     text-align: right;
 }
 
 .tal {
     text-align: left;
 }
 
 .a1 {
     background: #ffcb59;
 }
 
 .a2 {
     background: #ff5b8c;
 }
 
 .pr {
     background: #482245;
 }
 
 .a1t {
     color: #ffcb59;
 }
 
 .a2t {
     color: #ff5b8c;
 }
 
 .prt {
     color: #482245;
 }