.dm4Themes{
	
}
.index_accordion {
    width: 100%;  /* Set width and height in outer container, not here. */
    height: 100%;
}

    .index_accordion .loopElementList, .index_accordion .elementContainer {
        width: 100%;
        height: 100%;
    }

    .index_accordion .AccordionSlider {
        height: 100%;
        width: 100%;
        display: flex;
        overflow: hidden;
    }

    /* 標題 */
    .index_accordion .sliderTitle {
        writing-mode: vertical-lr;
        word-break: keep-all; /* 是否斷行 */
        color: #f1f1f1; /* 文字顏色 */
        position: relative;
        font-size: 3vw; /* 文字大小 */
        line-height : 1em;
        margin: auto;
        text-align: center;
        top: 10%; /* 文字距離邊框頂部 */
        transition: all 500ms ease;
		text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.6);
    }

    /* 內容文字 */
    .index_accordion .sliderContent {
        opacity: 0; /* 完全透明，不顯示出來 */
        color: #f1f1f1; /* 文字顏色 */
        position: relative;
        width: 70%; /* 內容闊度 */
        font-size: 1.5vw; /* 文字大小 */
        line-height: 1em;
        padding: 5%;
        top: 20%; /* 距離標題 */
        margin: auto;
        text-align: left;
        transition: all 500ms ease;
		text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.6);
    }

    .index_accordion .eachSlider {
        -webkit-flex: 1; /* Safari 6.1+ */
        -ms-flex: 1; /* IE 10 */
        flex: 1; /* 闊度，1 為第距 */
        cursor: pointer;
        transition: all 500ms ease;
        background-size: cover;
        background-position: 0% 0%;
        background-repeat: no-repeat;
        height: 100%;
    }

	.index_accordion .eachSlider .slide_content{
		width:100%;
		height:100%;
	}
	
        .index_accordion .eachSlider:hover {
            flex-grow: 3; /* 擴展為 3 倍的闊度 */
        }

/* 流動版 */
@media screen and (max-width: 768px) {
    .index_accordion .AccordionSlider {
        flex-direction: column;
    }

    .index_accordion .sliderTitle {
        writing-mode: horizontal-tb;
        font-size: 12vw;
    }

    .index_accordion .sliderContent {
        padding: 0%;
        border: 0px solid #f1f1f1;
        font-size: 3vw; /* 文字大小 */
        line-height: 1.5em;
		opacity: 1 !important;
    }

    .index_accordion .eachSlider {
        overflow: auto;
        overflow-x: hidden;
        background-size: auto auto;
		padding: 20px 0;
		min-height: 200px;
    }
}

/* ====================Load 相片的動畫================================ */
.index_accordion .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 相片的動畫小方塊 */
.index_accordion .cube1, .index_accordion .cube2 {
    background-color: #fff;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    animation: sk-cubemove 1.8s infinite ease-in-out;
}

.index_accordion .cube2 {
    animation-delay: -0.9s;
}

@media (min-width: 768px) and (max-width: 979px) 
{
  .dm4Themes
  {
     
  }
}
@media (min-width: 980px) and (max-width:1199px) 
{
  .dm4Themes
  {
     height : 500px; 
  }
}
@media (min-width: 1200px) and (max-width:1919px) 
{
  .dm4Themes
  {
     height : 600px; 
  }
}
@media (min-width: 1920px) 
{
  .dm4Themes
  {
     height : 900px; 
  }
}

/* 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);
    }
}