@keyframes breathingGlow{
     0%{
          filter: drop-shadow(0px 0px 3px rgba(255, 181, 20, 0.953));
     }
     50%{
          filter: drop-shadow(0px 0px 22px rgba(255, 200, 50, 1));
          
     }
     100%{
          filter: drop-shadow(0px 0px 3px rgba(255, 181, 20, 0.953));
     }
}
.computer_component_wrapper{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 90vh;
        gap: 5%;
         /* width: 100%; */
        margin-top: 10%;
        overflow: hidden;
        /* height: 90vh; */
         
        /* border:solid 5px rgb(91, 72, 217); */
    }

.computer-display-group {
    position: relative;       
    width: 60%;               
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;               
}

.computer {
    width: 100%;              
    height: auto;
    display: block;
}

.audioImage {
    position: absolute;       
    top: 50%;                 
    left: 50%;              
    transform: translate(-50%, -50%); 
    
    width: 20%;               
    height: auto;
    z-index: 10;
    cursor: pointer;          /* 游標變成手指，提示可點擊 */
    transition: transform 0.2s ease; 
    animation: breathingGlow 1.5s ease-in-out infinite;
}

.audioImage:hover {
    transform: translate(-50%, -50%) scale(1.1); 
}

/* --- 3. 背景裝飾與提示 --- */
.scrollDown {
    width: 3%;                /* 電腦版箭頭大小 */
    height: auto;
    padding-top: 10px;
    z-index: 2;
}

.BackgroundPenMouse {
    position: absolute;

    left: 0%;                 /* 正常從左邊定位 */
    width: 19%;
    height: auto;
    z-index: 1;               /* 在電腦群組後方 */
}

.BackgroundPenMouse.mouse {
    top: 0%;
    left: auto;               
    right: 0%;               
}


/* ==========================================================================
   4. 影片彈出視窗 (全域覆蓋，寫在這最乾淨)
   ========================================================================== */
.audioPage {
    display: none;           
    position: fixed;         
    inset: 0;                 
    background-color: rgba(0, 0, 0, 0.85); 
    z-index: 9999;
    
    /* 讓裡面的內容置中 */
    align-items: center;
    justify-content: center;
}

/* JS 觸發顯示用的 class */
/* .audioPage.active {
    display: flex !important; 
   
} */

.audioPage.active,
.audioPage[style*="block"],
.audioPage[style*="display: block"] {
    display: flex !important;
}

/* 影片與文字的排版容器 */
.audioAndText {
    position: relative;
    display: flex;
    flex-direction: row;      /* 電腦版：影片和文字「左右並排」 */
    justify-content: center;
    align-items: center;
    gap: 5%;                  /* 影片跟文字的間距 */
    width: 80%;               /* 內容區佔螢幕 80% */
    max-width: 1200px;        /* 限制最大寬度，超大螢幕才不會太開 */
    z-index: 10;
}

.introAudio {
    width: 50%;               /* 影片佔據一半空間 */
    aspect-ratio: 16 / 9;     /* 🔥 關鍵：保持 16:9 比例，瀏覽器自己幫你算高度！ */
    border: solid 15px rgb(72, 217, 130);
    border-image: url("../Image/MainPage1/outFrame.png") 30 round;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* 加點陰影增加立體感 */
}

.audioText {
    color: white;
    font-size: 20px;
    width: 35%;               /* 文字區塊空間 */
    text-align: center;         /* 並排時靠左對齊閱讀比較順暢 */
    line-height: 1.8;         /* 增加行距 */
}

/* 彈窗內的背景裝飾 */
.audioBackgeoundContainer {
    position: absolute;       /* 把它當成壁紙貼在彈窗後面 */
    inset: 0;
    pointer-events: none;     /* 避免滑鼠不小心點到圖而卡住按鈕 */
    overflow: hidden;
}

.audioBackgeound {
    position: absolute;
    left: 0%;
    bottom: 0%;
    width: 25%;
}

.audioBackgeound2 {
    position: absolute;
    right: 0%;
    top: 10%;
    width: 19%;
}

/* 關閉按鈕 (右上角) */
.svgBack {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    z-index: 10000;
    cursor: pointer;
}
.svgBack:hover line {
    stroke-width: 8px;
}

/* 平板 */
@media (max-width: 1024px)   {

     .computer-display-group {
        width: 85%; 
    }
    .audioImage{
        width: 25%;
    }

    .BackgroundPenMouse {
        width: 25%;
        top: 2%;
    }
    .BackgroundPenMouse.mouse {
        width: 25%;
        top: 30%;
    }

    .audioAndText {
        flex-direction: column; 
        gap: 30px;              
        width: 90%;  
     }           
     .introAudio {
        width: 80%;             
    }
    .audioText {
        width: 80%;             
        text-align: center;     
        font-size: 18px;        
    }
      .scrollDown{
        width: 8%;
        margin-top: 10%;
    }

}

/* 手機 */
@media (max-width: 767px){

     .computer_component_wrapper{
          width: 100%;
    }
    .audioImage{
        width: 25%;
    }

    .introAudio {
        width: 100%; 
        aspect-ratio: 16 / 9;
    
    }
    .audioText {
        width: 100%;
        font-size: 16px; /* 手機版字體稍微縮小 */
    }

    .BackgroundPenMouse{
          width: 50%;
          top: 0%;
    }
    .BackgroundPenMouse.mouse {
        width: 50%;
        top: 25%;
    }
    .scrollDown{
        width: 10%;
        margin-top: 10%;
    }

    .nav-item span {
        display: none !important;
    }

  
}