p{
    font-size: 24px;
    
    justify-content: center;
    align-items: center;
}
.Box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
     flex-direction: column;
    gap: 160px;
    width: 100%;
 
    /* border:solid 10px rgb(72, 217, 186); */
}
.Box2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
     /* flex-direction: column; */
    gap: 30px;
    width: 100%;
    /* border:solid 10px rgb(72, 217, 186); */
}
/* .IntroImage{
    border-radius: 5%;
}
.HighlightImage{
    border-radius: 5%;
} */








.wraptest {
    background-color: #ffffff;
    width: 80%;
    max-width: 1400px; /* 限制最大寬度，避免在大螢幕太扁 */
    
    /* 讓卡片水平置中 */
    margin: 0 auto;
    
 
    border-radius: 90px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    
    /* 確保能包住內容 */
    min-height: 100%;
    padding: 0 5%; /* 左右留白 */
    
    position: relative;
    z-index: 2; 
}

.content {
    width: 100%;
    min-height: 100vh; 
    
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center;    
    
    position: relative; /* 內部若有 absolute 元素以此為基準 */
    padding: 1% 0; 
}

.Group-TitleName {


    display: block;       /* 讓它變成區塊元素 */
    margin: 0 auto;       /* 水平置中 */
    
    margin-bottom: 1%; 
    
    position: relative;   
    z-index: 10;          
    
    max-width: 80%;       /* 限制寬度，避免手機版爆版 */
    height: auto;
}
.writting {
    width: 100%;
    /* 移除 absolute，讓它自然流動 */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.titleArea{
    align-self: flex-start;
    position: relative;
    display: flex;
    align-items: center;
    gap:3%;
}

.GroupTitle{
    margin-top: 1%;
    margin-left: 0%;
    /* margin-right: 1%; */
    color: #034854;
    font-weight: bold;  
    white-space: nowrap;
}

.icon{
    width: 32px;
    height: 32px;
    object-fit: cover;
    /* transition: all 0.3s ease; */
    cursor: pointer;
    
}
.titleArea a {
    /* display: block;         */
     display: contents;
    width: 32px;          
    height: 32px;          
    flex-shrink: 0;        /* 絕對不壓縮 */ 
    
}
.icon-container {
    display: flex;       /* 讓內部的 icon 橫排 */
    gap: 15px;           /* icon 之間的間距 */
    align-items: center; /* icon 垂直置中 */

}
/* icon沒有連結的狀態 */
.icon.disabled {
    filter: grayscale(100%);   /* 變成黑白 */
    opacity: 0.3;              
    cursor: default;           
    pointer-events: none;      
}


/* 成員區 */
#section4 .munber { 
    width: 100%;
    display: flex;
    justify-content: center;
}
  

#section4 .rectangle {
    width: 100%;
    background-color: transparent; /* 如果不需要灰色底，可改透明 */
    display: flex;
    justify-content: center;
}
.MumberImageContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 6%;
    margin: 5%;
    width: 100%;
}
.memberdec{
    position: absolute;

     width: 100%;
     height: auto;
     display: flex;
     flex-direction: column;
    }
.memberdec2{
    clip-path: polygon(87% 0, 100% 0, 100% 4%, 61% 7%);

}



.member-card {
    position: relative; /* 關鍵：讓內部的 absolute 對齊這裡 */
    
    /* 手機顯示寬度 */
    width: 174px;
    
    /*  9:18 現代手機 */
    aspect-ratio: 9 / 18; 
    
 
    background-color: transparent; 
}
.PhoneFrame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    

    z-index: 5; 
    
    /* 讓滑鼠點擊可以穿透手機殼點到照片 */
    pointer-events: none; 
    
    /* 確保圖片比例正確 */
    object-fit: contain; 
}

.MumberImage {
    width: 100%;
    height: 100%;
    
    /* 讓照片填滿 */
    object-fit: cover; 
    

    z-index: 1; 
    
    /*  微調區  */
    padding: 4%; 
    padding-top: 9%;
    padding-bottom: 9%;
    
    
    border-radius: 20px; 
    
    display: block;
  
}


/* 底下是亮點的 */
.highlight{
    flex: 1;
    /* border:solid 10px rgb(217, 130, 72); */
    padding: 2%;

    display: relative;
  
    
}

.highlight.Image{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.HighlightImage{
    width: 100%;
    height: auto;
}
.HighlightImageFrame{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    

    z-index: 5; 
    
    /* 讓滑鼠點擊可以穿透手機殼點到照片 */
    pointer-events: none; 
    
    /* 確保圖片比例正確 */
    object-fit: contain;
}

/* 底下是介紹的 */
#section1 {
    /* 1. 確保最小高度是全螢幕 */
    min-height: 100vh !important; 

    /* 2. 【核心解法】強制高度自動，無視任何舊設定 */
    height: auto !important;

    /* 3. 確保佈局方向正確 */
    display: flex !important;
    flex-direction: column !important;
    
    /* 4. 重要：當內容變長時，取消置中，改從上面開始排，不然字會被切掉 */
    justify-content: flex-start !important;
    
    /* 5. 增加底部留白，把下面的 Section 4 往下推遠一點 */
    padding-bottom: 150px !important; 
    
    /* 6. 確保 overflow 是可見的 (預防萬一) */
    overflow: visible !important;
}

#section1 .writting, 
#section1 .Box {
    height: auto !important;
    min-height: auto !important;
}

#section2 {
   
    min-height: 100vh !important; 

   
    height: auto !important;

   
    display: flex !important;
    flex-direction: column !important;
    
    
    justify-content: flex-start !important;
    
   
    padding-bottom: 150px !important; 
    
   
    overflow: visible !important;
}

#section2 .writting, 
#section2 .Box {
    height: auto !important;
    min-height: auto !important;
}
.intro{
    flex: 1;
    /* border:solid 10px rgb(217, 130, 72); */
    padding: 3%;

    display: relative;
    
   
}

.intro.Image{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    position: relative;

   
    
}
.IntroImage{
    width: 95%;
    height: auto;
    /* padding: 1%;  */
   

}
.IntroImageFrame{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    

    z-index: 5; 
    
    /* 讓滑鼠點擊可以穿透手機殼點到照片*/
    pointer-events: none; 
    
    /* 確保圖片比例正確 */
    object-fit: contain;
}

.IntroIitle{
    width: 18%;    
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

}

.anotherone {
    width: 100%;
    display: flex;
    flex-direction: column; 
    align-items: center;   
    
    
    gap: 15px; 
}
.menber-TitleName{
    width: 18%;    
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5%;
}
.highlightTitle{
    width: 18%;    
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5%;
}

/* 底下是TAG */
.tag{
    align-self: flex-start;
    margin: 1.5%;
    margin-left: 0;
}
.tag .groupTag {
    /* 顯示模式：讓 P 標籤變成「內容多寬、盒子就多寬」 */
    display: inline-block; 
    background-color: #1ebdb2;  
    color: #084e4e;           
    border-radius: 50px; 
    padding: 8px 24px;
    
    font-weight: bold;      
    font-size: 28px;         
    letter-spacing: 1px;     
    text-align: center;   
}

.tag .row {
    display: flex;
    justify-content: center; 
    align-items: center;     
}

.Group-dec, .Group-dec2, .Group-dec3, .Group-dec4, 
.Group-TitleName {
    pointer-events: none;
}
.Group-dec{
    position: absolute;
    width: 90%;
    height: auto;
    z-index: 5;
    top: 0;    
    left: -1%;
    margin-top: 40%;
  
    clip-path: polygon(0 0, 44% 0, 41% 67%, 0 69%);
    
}
.Group-dec2{
    position: absolute;
    width: 90%;
    height: auto;
    z-index: 5;
    top: 0;    
    right: -1%;
    margin-top: 45%;
  
    clip-path: polygon(50% 0, 100% 0, 100% 56%, 50% 56%);
    
}

.Group-dec3{
    position: absolute;
    width: 90%;
    height: auto;
    z-index: 5;
    top: 0;    
    right: -1%;
    margin-top: 80%;
  
   clip-path: polygon(51% 50%, 100% 53%, 100% 100%, 51% 100%);
    
}
.Group-dec4{
    position: absolute;
    width: 90%;
    height: auto;
    z-index: 5;
    top: 0;    
    left: -1%;
    margin-top: 70%;
  
    clip-path: polygon(0 73%, 43% 75%, 44% 100%, 0 100%);
    
}

@media (max-width: 767px) {
    .wraptest {
        background-color: #ffffff;
        width: 80%;
        max-width: 1400px; /* 限制最大寬度，避免在大螢幕太扁 */
        
        /* 讓卡片水平置中 */
        margin: 0 auto;
        
    
        border-radius: 60px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        
        /* 確保能包住內容 */
        min-height: 100%;
        padding: 0 5%; /* 左右留白 */
        
        position: relative;
        z-index: 2; 
    }


    
    .Box {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 80px;
        width: 100%;
        /* border:solid 10px rgb(72, 217, 186); */
    }

    .intro{
    
        /* border:solid 10px rgb(217, 130, 72); */
        /* padding: 3%; */

        display: relative;
    }
    .intro.Text{
        margin-top: -10%;
        padding: 0;
    }
    
    .IntroImage{
        width: 95%;
        height: auto;
    }
    .IntroIitle{
        width: 40%;    
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        /* margin: 5%; */
        
    }

    .anotherone {
        width: 100%;
        display: flex;
        flex-direction: column; 
        align-items: center;   
        
      
        gap: 25px; 
    }

    .menber-TitleName{
        width: 40%;    
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 5%;
    }

   .writting{
    margin-top: 5%;
    padding: 3%;
   }
   h1{
    font-size: 20px;
   }
   p{
    padding: 0;
   }
   span{
    font-size: 16px;
   }
   a{
    display: contents;
   }
   .tag{
        align-self: flex-start;
        /* margin: 1.5%; */
        margin-left: 3%;
    }
   .tag .groupTag {
        /* 顯示模式：讓 P 標籤變成「內容多寬、盒子就多寬」 */
        display: inline-block; 
        background-color: #1ebdb2;  
        color: #084e4e;           
        border-radius: 50px; 
        padding: 4px 10px;
        
        /* margin: 10%; */
        font-weight: bold;      
        font-size: 12px;         
        letter-spacing: 1px;     
        text-align: center;   
    }

    /*  */
    /* 成員區 */
    /*  */
    .memberdec {
        position: absolute; 
        width: 100%;
        height: 100%;      
        top: 0;
        left: 0;
        pointer-events: none; 
        z-index: 0;           
        
       
        display: block; 
    }
    .memberdec2{
        position: absolute;
        top: 50%;
        rotate: 40deg;
        left: 20%;
        z-index: 50;
        clip-path: polygon(48% 0, 100% 0, 100% 100%, 46% 100%);
        pointer-events: none;
    }
    .memberdec1{
     
        position: relative;
        top: 20%;
   
        clip-path: polygon(0 0, 46% 0, 46% 100%, 0 100%);
        pointer-events: none;
    }
    .MumberImageContainer {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 30px;
        width: 100%;
        
      
        padding: 30px 17.5%; 
     
        
       
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch;

        /* ▼▼▼ 新增：3D 視角深度 ▼▼▼ */
        /* 數字越小，3D效果越強烈；數字越大，越扁平 */
        perspective: 800px; 
    }


    /* 2. 卡片設定 */
    .member-card {
        /* 大小設定 */
        min-width: 65%;   
        width: 65%;
        flex-shrink: 0;
        aspect-ratio: 9 / 18;
        position: relative;
        
        /* 滑動停止時對齊中央 */
        scroll-snap-align: center;
        
        /* ▼▼▼ 新增：讓旋轉動作變滑順 ▼▼▼ */
        transition: transform 0.1s ease-out; 
        transform-style: preserve-3d;
        
        /* 陰影 */
        filter: drop-shadow(0 10px 10px rgba(0,0,0,0.2));
        margin-bottom: 8px;
        border-radius: 20px;


    
    }
    .MumberImage {
        width: 100%;
        height: 100%;
        
        /* 讓照片填滿 */
        object-fit: cover; 
        

        z-index: 1; 
        
        /*  微調區  */
        padding: 4%; 
        padding-top: 9%;
        padding-bottom: 9%;
        
        
        border-radius: 20px; 
        
        display: block;
    
    }

    /* === 滑動指示器容器 === */
    .outside-member-indicators {
        position: absolute;
       
        width: 100%;
        height: 100%;
        pointer-events: none;
        /* border: #034854 solid 1px; */
    }
    .scroll-indicators {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;           /* 圓點之間的距離 */
        margin-top: 20px;    /* 跟上面卡片的距離 */
        width: 100%;
        height: 30px;        /* 固定高度避免跳動 */
        /* border: #315403 solid 1px; */
        bottom: 70px;
        pointer-events: none;
    }

    /* === 一般圓點 (未選中) === */
    .indicator-dot {
        width: 12px;
        height: 12px;
        background-color: #034854; /* 深綠色 (配合你的主題) */
        border-radius: 50%;        /* 圓形 */
        opacity: 0.5;              /*稍微透明一點 */
        transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* 彈性過渡動畫 */
    }

    /* === 選中狀態 (變方塊) === */
    .indicator-dot.active {
        width: 20px;         /* 變寬 */
        height: 20px;        /* 變高 */
        background-color: #ffe16b ;
       
        border-radius: 6px;  /* 微圓角方塊 */
        opacity: 1;
        border: 2px solid #fff; /* 加個白邊增加層次感 */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        
        /* 如果想在方塊中間加個像圖一的 'V' 或圖示，可以用這個技巧 */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 這裡示範加一個簡單的 V 字，你也可以換成圖片背景 */
    .indicator-dot.active::after {
        /* 1. 內容設為空字串 (這是偽元素顯示的必要條件) */
        content: ""; 
        
        /* 2. 在這裡設定你想要「圖片顯示的大小」 */
        /* 因為外面的黃色方塊是 24px，這裡建議設小一點，例如 14px~18px */
        width: 14px;  
        height: 14px;
        
        display: block; /* 讓寬高生效 */

        /* 3. 設定背景圖片 */
        background-image: url("../Image/scrollBar/SelectICON.png");
        
        /* 4. 【關鍵】讓圖片縮放以適應上面的寬高 */
        background-size: contain; 
        
        /* 5. 不重複並置中 */
        background-repeat: no-repeat;
        background-position: center;
    }
   
    .highlightTitle{
        width: 40%;    
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 5%;
    }
    .Box2 {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 30px;
        width: 100%;
        /* border:solid 10px rgb(72, 217, 186); */
    }

    .titleArea {

        display: flex;
        flex-wrap: wrap;        
        /* justify-content: center;  */
        /* align-items: center;     */
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;               
        
        width: 100%;
        margin-bottom: 10px;   
        margin-left:5% ;  
        
    }

    .GroupTitle {
        /* width: 100%;              */

        text-align: left;
        font-size: 20px;    
 
        margin: 0;              
        line-height: 1.4;        
        white-space: normal;
   
    }

    .titleArea a {
        /* display: inline-block; */
        display: contents;
        
    }
    .icon-container {
        display: flex;       /* 讓內部的 icon 橫排 */
        gap: 5px;           /* icon 之間的間距 */
        align-items: center; /* icon 垂直置中 */
        
        
    }
    
    .icon {
        
        align-self: flex-start; 
        width: 16px;             /* 手機上可以稍微大一點點，好點擊 */
        height: 16px;
        position: relative;
        /* margin-left: 5px;      */
    }


    /* === 修復手機版 Section 間距過大問題 === */
    

    #section1, #section2, #section4, .content {
        min-height: auto !important; 
        height: auto !important;     
        
     
        padding-bottom: 70px !important; 
        
   
        justify-content: flex-start !important; 
    }

    /* 4. 調整內容區塊間的間距 (原本 Box gap: 80px 可能也太寬) */
    .Box, .Box2 {
        gap: 40px !important; /* 讓圖片跟文字靠得近一點 */
    }
    
    /* 修正作品介紹文字區可能被過度推擠 */
    .intro.Text {
        margin-top: 0 !important; /* 歸零，避免負值造成重疊或過遠 */
    }


}