.accordion {display: flex;background: #f7f7fa; border-radius: 10px;height: 600px; overflow: hidden;margin:  0 0 60px; }
.accordion-item { width: 70px; transition: width 0.5s ease; display: flex; overflow: hidden; border-right: 1px solid rgb(138, 138, 138);position: relative;}

.accordion-item::before { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; background: #F7F6FB; opacity: 1; transition: opacity 0.8s 0.4s linear; }

.accordion-header, .accordion-content { position: relative; z-index: 1; }
.accordion-item.active::before { opacity: 0; }

.accordion-item.active { width: 100%; }
.accordion-item:last-child { border-right: none;}

.accordion-item .line {border-bottom: 1px solid #242e22;margin: 20px 0;width: 0;}
.accordion-item h4 {font-size: 2rem;}
.accordion-item h4, .accordion-item p { opacity: 0;              /* 預設隱藏 */ transform: translateY(20px);color: #242e22; text-shadow:
   -2px -2px 5px rgba(247,247,250,0.5),  /* 左上 */
    2px -2px 5px rgba(247,247,250,0.5),  /* 右上 */
   -2px  2px 5px rgba(247,247,250,0.5),  /* 左下 */
    2px  2px 5px rgba(247,247,250,0.5),  /* 右下 */
   -1px -1px 5px rgba(247,247,250,0.5),  /* 再補一圈細的 */
    1px -1px 5px rgba(247,247,250,0.5),
   -1px  1px 5px rgba(247,247,250,0.5),
    1px  1px 5px rgba(247,247,250,0.5);}

.accordion-item.active h4 {   animation: fadeInUp 0.3s ease-out  0.5s forwards; }
.accordion-item.active .line {border-bottom: 1px solid #242e22;margin: 20px 0; animation: line 0.5s ease-out  0.8s forwards;box-shadow:
   -2px -2px 5px rgba(247,247,250,0.5),  /* 左上 */
    2px -2px 5px rgba(247,247,250,0.5),  /* 右上 */
   -2px  2px 5px rgba(247,247,250,0.5),  /* 左下 */
    2px  2px 5px rgba(247,247,250,0.5),  /* 右下 */
   -1px -1px 5px rgba(247,247,250,0.5),  /* 再補一圈細的 */
    1px -1px 5px rgba(247,247,250,0.5),
   -1px  1px 5px rgba(247,247,250,0.5),
    1px  1px 5px rgba(247,247,250,0.5);}
.accordion-item.active p { animation: fadeInUp 0.3s linear 1.2s forwards; }
.accordion-item p { 
}

.accordion-item a .btn {background-color: #242e22;margin: 40px 0 20px;color: #fff;font-size: 1.05rem;font-weight: 400;transition: all .3s ease-in;padding: 5px 30px;opacity: 0;}
.accordion-item.active a .btn {animation: fadeInUp 0.3s ease-out  1.5s forwards;}
.accordion-item a:hover .btn {border-radius: 30px;opacity: 1;}





@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes line {
  from {
   
    width: 0;
  }
  to {
   
    width: 100%;
  }
}

.accordion-content .accordion-content-inner { display: flex; justify-content: flex-end; width: 100%;position: relative;}
.accordion-content .accordion-content-inner .text{ width: 60%;padding: 60px; }



.accordion-header .accordion-title { writing-mode: vertical-rl; text-orientation: mixed; width: 70px; display: flex; align-items: center; padding: 15px 10px 0  0; background: rgb(63, 72, 59); color: #fff; cursor: pointer; transition: all 0.3s ease-in;height: 100%;font-size: 1.15rem;letter-spacing: 0.1rem; backdrop-filter: blur(5px); cursor: pointer;}
.accordion-header .accordion-title:hover { background: rgba(36, 46, 34, 0.7);backdrop-filter: blur(2px);   }
.accordion-item.active  .accordion-header .accordion-title {background: rgba(36, 46, 34, 0.7);backdrop-filter: blur(2px);   }




/* 圖片往左邊一點遮到字了 */
#cissp .accordion-item  {background-position: 15% 0;}


@media(max-width:1366px){
    .accordion-item {  background-position: 22% 0; }
    .accordion {height: 650px;}


 
}





@media (max-width: 767px) {
  .accordion { flex-direction: column; height: auto; }
  .accordion-item { width: 100%; height: 70px; border-right: none; border-bottom: 1px solid #8a8a8a; transition: height 0.5s ease; flex-direction: column; background-position: 15% 5%;}
  .accordion-item:last-child { border-bottom: none; }
  .accordion-item.active { height: auto;}
  .accordion-item.active::before { opacity: 0.8; }


  /* 標題改成橫排 */
  .accordion-header .accordion-title { writing-mode: horizontal-tb;  /* 改成水平文字 */ text-orientation: initial; width: 100%; height: auto; font-size: 1.05rem; letter-spacing: 0.12rem; padding: 0 15px; height: 70px; background: rgb(63, 72, 59); display: flex; justify-content: flex-start; align-items: center; }

  .accordion-content .accordion-content-inner { flex-direction: column; justify-content: flex-start; }
  .accordion-content .accordion-content-inner .text { width: 100%; padding: 20px; }
 
  .accordion-item h4 { font-size: 1.6rem; }
  .accordion-item p { font-size:1.12rem; }

  /* 按鈕調整 */
  .accordion-item a .btn { font-size:1.05rem; padding: 5px 20px; margin: 20px 0; }





}