﻿.indexAccordionSlider6 {
    width: 100%; /* Set width and height in outer container, not here. */
    height: 70vh;
    --font-color: #f1f1f1;
    --title-font-size: 4vw;
    --content-font-size: 2vw;
    --content-padding: 5%;
}

    .indexAccordionSlider6 .loopElementList, .indexAccordionSlider6 .elementContainer {
        width: 100%;
        height: 100%;
    }

    .indexAccordionSlider6 .AccordionSlider {
        height: 100%;
        width: 100%;
        display: flex;
        overflow: hidden;
    }

    /* 標題 */
    .indexAccordionSlider6 .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 500ms ease;
    }

    /* 內容文字 */
    .indexAccordionSlider6 .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 500ms ease;
    }

    .indexAccordionSlider6 .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%;
    }

        .indexAccordionSlider6 .eachSlider:hover {
            flex-grow: 3; /* 擴展為 3 倍的闊度 */
        }

/* 流動版 */
@media (max-width: 768px) {
    .indexAccordionSlider6 .AccordionSlider {
        flex-direction: column;
    }

    .indexAccordionSlider6 .sliderTitle {
        writing-mode: horizontal-tb;
    }

    .indexAccordionSlider6 .sliderContent {
        padding: 0%;
        border: 0px solid #f1f1f1;
    }

    .indexAccordionSlider6 .eachSlider {
        overflow: auto;
        overflow-x: hidden;
    }
}

/* ====================Load 相片的動畫================================ */
.indexAccordionSlider6 .spinner {
    position: fixed;
    top: 0;
    left: 0;
    background: #222;
    height: 100%;
    width: 100%;
    z-index: 11;
    margin-top: 0;
    color: #fff;
    font-size: 1em;
}

/* Load 相片的動畫小方塊 */
.indexAccordionSlider6 .cube1, .indexAccordionSlider6 .cube2 {
    background-color: #fff;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    animation: sk-cubemove 1.8s infinite ease-in-out;
}

.indexAccordionSlider6 .cube2 {
    animation-delay: -0.9s;
}

/* Load 相片的動畫 */
@keyframes sk-cubemove {
    25% {
        transform: translateX(42px) rotate(-90deg) scale(0.5);
    }

    50% {
        transform: translateX(42px) translateY(42px) rotate(-179deg);
    }

    50.1% {
        transform: translateX(42px) translateY(42px) rotate(-180deg);
    }

    75% {
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }

    100% {
        transform: rotate(-360deg);
    }
}
