﻿.indexAccordionSlider3 {
    width: 100%; /* Set width and height in outer container, not here. */
    height: 70vh;

    --num-of-block : 4;
    --font-color: #f1f1f1;
    
    --title-font-size: 4vw;
    --title-top: 10%;
    --title-text-align: center;

    --content-font-size: 2vw;
    --content-padding: 5%;
    --content-width : 70%;
    --content-line-height : 1.2em;
    --content-top : 20%;
    --content-text-align : left;
}

    .indexAccordionSlider3 .loopElementList, .indexAccordionSlider3 .elementContainer {
        width: 100%;
        height: 100%;
    }

    .indexAccordionSlider3 .AccordionSlider {
        height: 100%;
        width: 100%;
        display: flex;
        overflow: hidden;
    }

    /* 標題 */
    .indexAccordionSlider3 .sliderTitle {
        writing-mode: vertical-lr;
        word-break: keep-all; /* 是否斷行 */
        color: var(--font-color); /* 文字顏色 */
        font-size: var(--title-font-size); /* 文字大小 */
        line-height: 1em;
        margin: auto;
        text-align: var(--title-text-align);
        position: relative;
        top: var(--title-top); /* 文字距離邊框頂部 */
        transition: all 500ms ease;
    }

    /* 內容文字 */
    .indexAccordionSlider3 .sliderContent {
        opacity: 0; /* 完全透明，不顯示出來 */
        color: var(--font-color); /* 文字顏色 */
        width: var(--content-width); /* 內容闊度 */
        font-size: var(--content-font-size); /* 文字大小 */
        line-height: var(--content-line-height);
        padding: var(--content-padding);
        position: relative;
        top: var(--content-top); /* 距離標題 */
        margin: auto;
        text-align: var(--content-text-align);
        transition: all 500ms ease;
        overflow: hidden;
    }

    .indexAccordionSlider3 .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, center center;
        background-size: cover,cover;
        background-repeat: no-repeat,no-repeat;
        /*background-attachment: fixed;*/
        height: 100%;
    }

        .indexAccordionSlider3 .eachSlider:hover {
            flex-grow: calc(var(--num-of-block) - 1); /* 擴展為 3 倍的闊度 */
        }

/* 流動版 */
@media (max-width: 768px) {
    .indexAccordionSlider3 .AccordionSlider {
        flex-direction: column;
    }

    .indexAccordionSlider3 .sliderTitle {
        writing-mode: horizontal-tb;
        font-size: calc(var(--title-font-size) * 1.5); /* 文字大小 */
    }

    .indexAccordionSlider3 .sliderContent {
        padding: 0%;
        font-size: calc(var(--content-font-size) * 1.5); /* 文字大小 */
    }

    .indexAccordionSlider3 .eachSlider {
        overflow: hidden;
        overflow-x: hidden;
        background-size: contain,cover;
    }
}
