.index學校發展5 {
  container-type: inline-size;
  width: 100%; /* Set width and height in outer container, not here. */
  height: 75vh;
  --font-color: #f1f1f1;
  --title-font-size: 6cqw;
  --content-font-size: cqvw;
  --content-padding: 5%;
}

.index學校發展5 .loopElementList,
.index學校發展5 .elementContainer {
  width: 100%;
  height: 100%;
}

.index學校發展5 .AccordionSlider {
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
}

/* 標題 */
.index學校發展5 .sliderTitle {
  writing-mode: vertical-lr;
  word-break: keep-all; /* 是否斷行 */
  color: var(--font-color); /* 文字顏色 */
  position: relative;
  font-size: 30px; /* 文字大小 */
  line-height: 1em;
  margin: auto;
  text-align: center;
  top: 10%; /* 文字距離邊框頂部 */
  transition: all 500ms ease;
  opacity: 1;
}

/* 內容文字 */
.index學校發展5 .sliderContent {
  opacity: 0; /* 完全透明，不顯示出來 */
  color: var(--font-color); /* 文字顏色 */
  position: relative;
  width: 70%; /* 內容闊度 */
  font-size: 30px; /* 文字大小 */
  line-height: 1em;
  padding: var(--content-padding);
  top: 20%; /* 距離標題 */
  margin: auto;
  text-align: center;
  transition: all 500ms ease;
  opacity: 1;
}

.index學校發展5 .eachSlider {
  -webkit-flex: 1; /* Safari 6.1+ */
  -ms-flex: 1; /* IE 10 */
  flex: 1; /* 闊度，1 為第距 */
  cursor: pointer;
  transition: all 500ms ease;
  background-position: 0 0; /* 背景圖片左上角與元素左上角對齊 */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
}

.index學校發展5 .eachSlider:hover {
  flex-grow: 6; /* 擴展為 3 倍的闊度 */
}

/* 流動版 */
@container (max-width: 768px) {
  .index學校發展5 .AccordionSlider {
    flex-direction: column;
  }

  .index學校發展5 .sliderTitle {
    writing-mode: horizontal-tb;
  }

  .index學校發展5 .sliderContent {
    padding: 0%;
    border: 0px solid #f1f1f1;
  }

  .index學校發展5 .eachSlider {
    overflow: auto;
    overflow-x: hidden;
  }
}

/* ====================Load 相片的動畫================================ */
.index學校發展5 .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學校發展5 .cube1,
.index學校發展5 .cube2 {
  background-color: rgb(135, 225, 215);
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.index學校發展5 .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);
    }
}