.hex {
    display: inline-block;
    display: block;
    margin: 0 auto;
    position: relative;
    width: 260px;
    height: calc(260px * 0.866);
    /* width * 0.866 */
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hex:before {
    content: " ";
    display: block;
    position: relative;
    background-color: orange;
    /*color of the main-background*/
    top: 2px;
    /* equal to border thickness */
    left: 2px;
    /* equal to border thickness */
    width: calc(260px - (2px * 2));
    /* container height - (border thickness * 2) */
    height: calc((260px * 0.866) - (2px * 2));
    /* container height - (border thickness * 2) */
    -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hex img {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

#hexagon-links {
    width: 100%;
    background: url(/template/app/images/svg/hex_bg_left.svg) left bottom/300px auto no-repeat, url(/template/app/images/svg/hex_bg_right.svg) right bottom/300px auto no-repeat;
    background-color: #47B387;
}

.hex-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    --s: 220px;
    /* size */
    --r: 0.85;
    /* ratio */
    /* clip-path */
    --h: 0.25;
    --v: 0.5;
    --hc: calc(clamp(0, var(--h), 0.5) * var(--s));
    --vc: calc(clamp(0, var(--v), 0.5) * var(--s) * var(--r));
    /*margin */
    --mv: 6px;
    /* vertical */
    --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2);
    /* horizontal */
    /* for the float*/
    --f: calc(2*var(--s)*var(--r) + 4*var(--mv) - 2*var(--vc) - 2px);
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    position: relative;
    left: 2%;
}

.hex-wrapper .hex-container {
    margin: 20px 0;
    font-size: 0;
    -webkit-filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
    filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
    display: block;
    /* disable white space between inline block element */
}

.hex-wrapper .hex-container .item {
    width: var(--s);
    margin: var(--mv) var(--mh);
    height: calc(var(--s) *var(--r));
    display: inline-block;
    font-size: initial;
    background: white;
    /* we reset the font-size if we want to add some content */
    -webkit-clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--vc), 100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)), 0 var(--vc));
    clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--vc), 100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)), 0 var(--vc));
    margin-bottom: calc(var(--mv) - var(--vc));
    position: relative;
}

.hex-wrapper .hex-container .item .inside {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: var(--background);
    -webkit-clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--vc), 100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)), 0 var(--vc));
    clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--vc), 100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)), 0 var(--vc));
}

.hex-wrapper .hex-container .item .inside .item-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding-top: 30px;
}

.hex-wrapper .hex-container .item .inside .item-body .title h2 {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 40px;
    margin-top: 10px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hex-wrapper .hex-container .item .inside .item-body .eng_title h2 {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 35px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hex-wrapper .hex-container .item .inside .item-body .icon {
    width: auto;
    height: 80px;
    text-align: center;
}

.hex-wrapper .hex-container .item .inside .item-body i {
    font-size: 60px;
    color: #fff;
    margin-top: 30px;
    text-align: center;
}

.hex-wrapper .hex-container::before {
    content: "";
    width: calc(var(--s) / 2 + var(--mh));
    float: left;
    height: 135%;
    shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 2px), #000 0 var(--f));
}

@media (min-width: 1400px) {
    .hex-wrapper {
        height: 350px !important;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
    .hex-wrapper {
        height: 450px !important;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .hex-wrapper {
        height: 570px !important;
    }
}

@media (min-width: 537px) and (max-width: 768px) {
    .hex-wrapper {
        height: 760px !important;
    }
}

@media (max-width: 536px) {
    .hex-wrapper {
        height: 570px !important;
        --s: 160px;
    }
}

@media (max-width: 401px) {
    .hex-wrapper {
        height: 510px !important;
        --s: 120px;
    }
    .hex-wrapper .hex-container .item .inside .item-body .icon {
        height: 50px;
    }
}