﻿.index入學資訊21 {
    --title-align: left;

    /* --For simpleBar Start-- */
    --content-height-without-heading: auto;
    --whole-block-height: auto;
    /* --For simpleBar End-- */

    height: var(--whole-block-height);
}

    /* 內容方塊標題 */
    .index入學資訊21 .blockTitle {
        text-align: var(--r-index-block-title-align, --title-align);
    }

        .index入學資訊21 .blockTitle h2 {
        }

    /* 活動容器，每個活動都放在裡面 */
    .index入學資訊21 .loopElementList {
        height: var(--content-height-without-heading);
    }

    .index入學資訊21 .shortcutList {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        padding: var(--r-container-padding, 1em);
    }

    .index入學資訊21 .eachShortcut {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        margin: 1em;
    }

    .index入學資訊21 .innerShell {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height : 100%;
        width : 100%;
    }

    .index入學資訊21 .eachShortcut .title.hideText
    {
        display : none;
    }

    .index入學資訊21 .eachShortcut .title {
        color: #FFFFFF;
        font-weight: bold;
        font-size: 1.2em;
        z-index: 3;
        transition: text-shadow ease 0.5s;
    }

        .index入學資訊21 .eachShortcut .darkScreen {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            content: '';
            z-index: 1;
            background-color: rgba(0, 51, 204, 0.5);
            border-radius: 50%;
            transition: background-color ease 1s;
        }

        .index入學資訊21 .eachShortcut:hover .darkScreen {
            background-color: rgba(0,0,0,0.0);
        }


    .index入學資訊21 .eachShortcut:hover .title {
        text-shadow: 2px 0px 3px rgba(0,0,0,1);
    }
    

    @media (max-width: 767px) {
        .index入學資訊21 .elementContainer {
        justify-content: space-around;
    }

    .index入學資訊21 .eachShortcut {
        width: 150px;
        height: 150px;
        margin: 0.5em 0;
    }
}
