.index捷徑列10 {

    --max-width: 100vw;
    --half-shortcut-width: calc(var(--max-width) / 8);
    --shortcut-width: calc(calc(var(--max-width) / 8) * 2);
    --negative-margin: calc(calc(var(--max-width) / 8) * -1);

    --color01: rgba(236, 185, 39, 0.8);
    --color02: rgba(209, 236, 39, 0.8);
    --color03: rgba(102, 236, 39, 0.8);
    --color04: rgba(39, 236, 197, 0.8);
    --color05: rgba(39, 164, 236, 0.8);
    --color06: rgba(39, 82, 236, 0.8);
}

    /* 內容方塊標題 */
    .index捷徑列10 .blockTitle {
        text-align: center;
    }

        .index捷徑列10 .blockTitle h2 {
        }

    .index捷徑列10 .elementContainer {
        --margin: 10px;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        max-width: var(--max-width);
    }

    .index捷徑列10 .eachShortcut {

        background-color: rgba(245, 40, 145, 0.8); /* 1st*/
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        padding: 5px;
        position: relative;
        margin-top: var(--margin);
        margin-right: var(--margin);
        margin-bottom: var(--margin);
        margin-left: var(--margin);
        aspect-ratio: 1 / 1;
    }

    .index捷徑列10 .innerShell {
        position: relative;
        width : 100%;
        height : 100%;
    }

        .index捷徑列10 .eachShortcut:nth-child(2n) {
            background-color: var(--color01);
        }

        .index捷徑列10 .eachShortcut:nth-child(3n) {
            background-color: var(--color02);
        }

        .index捷徑列10 .eachShortcut:nth-child(4n) {
            background-color: var(--color03);
        }

        .index捷徑列10 .eachShortcut:nth-child(5n) {
            background-color: var(--color04);
        }

        .index捷徑列10 .eachShortcut:nth-child(6n) {
            background-color: var(--color05);
        }

        .index捷徑列10 .eachShortcut:nth-child(7n) {
            background-color: var(--color06);
        }

        .index捷徑列10 .eachShortcut:nth-child(2n) .title {
            background-color: var(--color01);
        }

        .index捷徑列10 .eachShortcut:nth-child(3n) .title {
            background-color: var(--color02);
        }

        .index捷徑列10 .eachShortcut:nth-child(4n) .title {
            background-color: var(--color03);
        }

        .index捷徑列10 .eachShortcut:nth-child(5n) .title {
            background-color: var(--color04);
        }

        .index捷徑列10 .eachShortcut:nth-child(6n) .title {
            background-color: var(--color05);
        }

        .index捷徑列10 .eachShortcut:nth-child(7n) .title {
            background-color: var(--color06);
        }

        .index捷徑列10 .eachShortcut:nth-child(4)
        , .index捷徑列10 .eachShortcut:nth-child(10)
        , .index捷徑列10 .eachShortcut:nth-child(16) {
            margin-top: var(--negative-margin);
            margin-left: calc((var(--max-width) / 8) + var(--margin) * 2);
        }

        .index捷徑列10 .eachShortcut:nth-child(5)
        , .index捷徑列10 .eachShortcut:nth-child(6)
        , .index捷徑列10 .eachShortcut:nth-child(7)
        , .index捷徑列10 .eachShortcut:nth-child(8)
        , .index捷徑列10 .eachShortcut:nth-child(9)
        , .index捷徑列10 .eachShortcut:nth-child(11)
        , .index捷徑列10 .eachShortcut:nth-child(12)
        , .index捷徑列10 .eachShortcut:nth-child(13)
        , .index捷徑列10 .eachShortcut:nth-child(14)
        , .index捷徑列10 .eachShortcut:nth-child(15)
        , .index捷徑列10 .eachShortcut:nth-child(17)
        , .index捷徑列10 .eachShortcut:nth-child(18)
        , .index捷徑列10 .eachShortcut:nth-child(19)
        , .index捷徑列10 .eachShortcut:nth-child(20)
        , .index捷徑列10 .eachShortcut:nth-child(21) {
            margin-top: var(--negative-margin);
        }

        .index捷徑列10 .eachShortcut .pic {
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            transform: scale(1);
            transition: .3s ease-in-out;
            opacity: 1;
        }

        .index捷徑列10 .eachShortcut .link:hover ~ .pic {
            transform: scale(1.2);
            opacity: .95;
        }

        .index捷徑列10 .eachShortcut .title {
            position: absolute;
            text-align: center;
            padding: 5px;
            z-index: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            background-color: rgba(245, 40, 145, 0.8);
            color: #FFFFFF;
            font-size: 1.5em;
            font-weight: bold;
            border-radius: 5px;
        }

        .index捷徑列10 .eachShortcut .link {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 1;
        }

@media (max-width: 767px) {
    .index捷徑列10 .elementContainer {
        --negative-margin: calc((var(--max-width) / 4) * -1 + var(--margin));
    }

    .index捷徑列10 .eachShortcut .title {
        font-size: 1em;
    }

    .index捷徑列10 .eachShortcut {
        width: calc(var(--max-width) / 2 - var(--margin) * 3);
    }

        .index捷徑列10 .eachShortcut:nth-child(3), .index捷徑列10 .eachShortcut:nth-child(6), .index捷徑列10 .eachShortcut:nth-child(9), .index捷徑列10 .eachShortcut:nth-child(12), .index捷徑列10 .eachShortcut:nth-child(15), .index捷徑列10 .eachShortcut:nth-child(18), .index捷徑列10 .eachShortcut:nth-child(21) {
            margin-top: var(--negative-margin);
            margin-left: calc((var(--max-width) / 4) + var(--margin) / 2);
        }

        .index捷徑列10 .eachShortcut:nth-child(4), .index捷徑列10 .eachShortcut:nth-child(10), .index捷徑列10 .eachShortcut:nth-child(16) {
            margin-left: var(--margin);
        }

        .index捷徑列10 .eachShortcut:nth-child(4), .index捷徑列10 .eachShortcut:nth-child(5), .index捷徑列10 .eachShortcut:nth-child(7), .index捷徑列10 .eachShortcut:nth-child(8), .index捷徑列10 .eachShortcut:nth-child(10), .index捷徑列10 .eachShortcut:nth-child(11), .index捷徑列10 .eachShortcut:nth-child(13), .index捷徑列10 .eachShortcut:nth-child(14), .index捷徑列10 .eachShortcut:nth-child(16), .index捷徑列10 .eachShortcut:nth-child(17), .index捷徑列10 .eachShortcut:nth-child(19), .index捷徑列10 .eachShortcut:nth-child(20), .index捷徑列10 .eachShortcut:nth-child(22), .index捷徑列10 .eachShortcut:nth-child(23) {
            margin-top: var(--negative-margin);
        }
}

@media (min-width: 768px) {
    .index捷徑列10 {
        --half-shortcut-width: calc(var(--max-width) / 8);
        --shortcut-width: calc(var(--half-shortcut-width) * 2);
        --negative-margin: calc(var(--half-shortcut-width) * -1);
    }
    .index捷徑列10 .eachShortcut {
        width: var(--shortcut-width);
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .index捷徑列10 {
        --max-width: 700px;
    }

        .index捷徑列10 .eachShortcut .title {
            font-size: 1em;
        }
}

@media (min-width: 980px) and (max-width:1199px) {
    .index捷徑列10 {
        --max-width: 900px;
    }
}

@media (min-width: 1200px) and (max-width:1919px) {
    .index捷徑列10 {
        --max-width: 900px;
    }
}

@media (min-width: 1920px) {
    .index捷徑列10 {
        --max-width: 1280px;
    }
}