﻿.index學校特色9 {
    width: 100%; /* Set width and height in outer container, not here. */
    height: 50vh;
    --font-color: #f1f1f1;
    --title-font-size: 2vw;
    --content-font-size: 2vw;
    --content-padding: 5%;
}

    .index學校特色9 .loopElementList, .index學校特色9 .elementContainer {
        width: 100%;
        height: 100%;
    }

    .index學校特色9 .AccordionSlider {
        height: 100%;
        width: 100%;
        display: flex;
        overflow: hidden;
    }

    /* 標題 */
    .index學校特色9 .sliderTitle {
        writing-mode: vertical-lr;
        word-break: keep-all; /* 是否斷行 */
        color: var(--font-color); /* 文字顏色 */
        position: relative;
        font-size: var(--title-font-size); /* 文字大小 */
        
        line-height: 1em;
        margin: auto;
        text-align: center;
        top: 10%; /* 文字距離邊框頂部 */
        transition: all 1900ms ease;
        text-shadow: 0px 1px 2px rgba(33, 30, 66, 1),0px 0px 13px rgba(46, 42, 91, 1);
    }

    /* 內容文字 */
    .index學校特色9 .sliderContent {
        opacity: 0; /* 完全透明，不顯示出來 */
        color: var(--font-color); /* 文字顏色 */
        position: relative;
        width: 70%; /* 內容闊度 */
        font-size: var(--content-font-size); /* 文字大小 */
        line-height: 1em;
        padding: var(--content-padding);
        top: 20%; /* 距離標題 */
        margin: auto;
        text-align: left;
        transition: all 1500ms ease;
    }

    .index學校特色9 .eachSlider {
        -webkit-flex: 1; /* Safari 6.1+ */
        -ms-flex: 1; /* IE 10 */
        flex: 1; /* 闊度，1 為第距 */
        cursor: pointer;
        transition: all 500ms ease;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
    }

        .index學校特色9 .eachSlider:hover {
            flex-grow: 3; /* 擴展為 3 倍的闊度 */
        }

/* 流動版 */
@media (max-width: 767px) {
    .index學校特色9 .AccordionSlider {
        flex-direction: column;
    }

    .index學校特色9 .sliderTitle {
        writing-mode: horizontal-tb;
        font-size: 6vw;
        font-weight : 900;
    }

    .index學校特色9 .sliderContent {
        padding: 0%;
        border: 0px solid #f1f1f1;
        font-size: 5vw;
    }

    .index學校特色9 .eachSlider {
        overflow: auto;
        overflow-x: hidden;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .index學校特色9 .sliderTitle {
        font-size: 6vw;
        font-weight : 900;
    }
}
