.mfgprocesslib {
    width: 100%; /* 容器宽度为100% */
    height:100%; /* 容器高度自定义 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    position: relative; /* 使子元素绝对定位相对于该容器 */
    overflow: visible; /* 允许溢出显示 */
}

.mfgprocess {
    height: 100%; /* 子元素高度为100% */
    transition: all 0.5s ease; /* 添加位移的过渡效果 */
    position: absolute; /* 绝对定位以便控制位置 */
    top: 0; /* 顶部对齐 */
}

.mfgprocess-overlay {
    position: relative;  /* 使子元素能够绝对定位 */
    width: 100%;
    height: 100%;
}

.mfgprocess-overlay img, 
.mfgprocess-overlay video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 確保圖片和影片覆蓋整個區域 */
}

/* 控制文字和按鈕的顯示與過渡 */
.mfgprocess-contentbox {
    width: 100%;         /* 宽度占满整个容器 */
    height: 100%;        /* 高度占满整个容器 */
    position: absolute;  /* 绝对定位，使其与图片叠加 */
    top: 0;              /* 从容器顶部开始 */
    left: 0;             /* 从容器左侧开始 */
    padding-left: 5%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    background-color: rgba(0, 0, 0, 0.3); /* 半透明背景 */
    color: white;
    opacity: 0; /* 初始状态透明 */
    visibility: hidden; /* 初始狀態隱藏 */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* 添加漸變效果 */
}
@media screen and (max-width:768px) {
    .mfgprocess-contentbox{padding-left: 0%;}
}

/* 當前項目文字與按鈕漸漸顯示 */
.mfgprocess.current .mfgprocess-contentbox {
    opacity: 1; /* 当项目到达中间，文字和按鈕逐渐显示 */
    visibility: visible; /* 讓按鈕可見 */
}

.mfgprocess-contentbox h3 {
    color: white;             /* 文字颜色 */
    font-size: 40px;          /* 文字大小 */
    display: flex;
    font-weight: 700;
}
.mfgprocess-contentbox a{
    color: #333333;
    font-size: 15px;
}

.moreinfobtn {
    display: inline-block;
    width: 120px; height: 40px;
    border-radius: 20px;
    background-color: #ffffff;
    line-height: 40px;
    margin-bottom: 10%;
    text-decoration: none;
    font-size: 16px; font-weight: 700; text-align: center; 
    transition: background-color 0.3s ease;
}


/* 滑过按钮时的效果 */
.moreinfobtn:hover {
    background-color: #f0f0f0; /* 滑過時改變背景顏色 */
}



@media screen and (max-width: 768px) {
    .mfgprocess-contentbox {
        align-items: center;
    }
    .mfgprocess-contentbox h3 {
        margin: 0;
        font-size: 30px;
    }
}

/* 当前播放内容在中间 */
.mfgprocess.current {
    width: 60%;
    left: 20%;
    z-index: 3; /* 保证当前项在最上面 */
    opacity: 1; /* 完全不透明 */
    padding-inline: 10px;
}

/* 上一项 */
.mfgprocess.previous {
    width: 60%;
    left: -40%;
    z-index: 3; /* 次高层级 */
    opacity: 0.6; /* 半透明 */
    padding-inline: 10px;
}

/* 上上一项 */
.mfgprocess.previous-previous {
    width: 60%;
    left: -100%;
    z-index: 1; /* 较低层级 */
    opacity: 0.6; /* 更透明 */
    padding-inline: 10px;
}

/* 下一項：從 .next 改為 .next-item */
.mfgprocess.next-item {
    width: 60%;
    left: 80%;
    z-index: 3; /* 次高层级 */
    opacity: 0.6; /* 半透明 */
    padding-inline: 10px;
}

/* 下下一項：從 .next-next 改為 .upcoming-next */
.mfgprocess.upcoming-next {
    width: 60%;
    left: 140%;
    z-index: 1; /* 较低层级 */
    opacity: 0.6; /* 更透明 */
    padding-inline: 10px;
}

/* 完全移出视图的项 */
.mfgprocess.out-of-view {
    width: 60%;
    left: -160%;
    opacity: 0;
    z-index: 0;
    padding-inline: 10px;
    transition: opacity 0.5s ease;
}

@media screen and (max-width:767px) {
    .mfgprocess.current,
    .mfgprocess.previous,
    .mfgprocess.previous-previous,
    .mfgprocess.next-item,
    .mfgprocess.upcoming-next,
    .mfgprocess.out-of-view{
        padding-inline: 5px;
        width: 70%;
    }
    .mfgprocess.current{left: 15%;}
    .mfgprocess.next-item{left: 85%;}
    .mfgprocess.upcoming-next{left: 155%;}
    .mfgprocess.previous{left:-55%;}
    .mfgprocess.previous-previous{left: -125%;}
}

.nav-area {
    height: 100%;
    width: calc(20% - 10px);
    padding: 0;
    margin: 0;
    position: absolute;
    display: flex; /* 使用 Flexbox 居中 */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10; /* 确保点击区域在最上面 */
}

@media screen and (max-width:767px) {.nav-area{width: calc(15% - 5px);}}

.nav-area:hover {
    cursor: pointer;
}

#prev-area {
    left: 0; /* 左侧固定 */
}

#next-area {
    right: 0; /* 右侧固定 */
}

/* SVG箭頭圖標樣式 */
.nav-area svg{
    width: 32px; /* 調整箭頭大小 */
    height: 32px;
    opacity: 0;
    color: #f0f0f0;
    fill: #f0f0f0; /* 設置圖標顏色 */
    transition: all 0.3s ease; /* 添加過渡效果 */
}

.nav-area:hover svg{
    transform: scale(1.5); /* 滑過時放大圖標 */
    opacity: 1;
}

.play-pause-btn {
    right: 0;
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.play-pause-btn svg {
    height: 20px;
    width: 20px;
    fill: #333;
    transition: transform 0.3s ease;
}

.play-pause-btn:hover svg {
    cursor: pointer;
}

.dot-indicator {
    display: flex;
    justify-content: center;
    position: absolute;
    width: 60%;
    z-index: 10;
}

.dot {
    width: 8px;
    height: 8px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #ccc; /* 默認淺色圓點 */
    transition: background-color 1s ease; /* 漸變效果 */
}

.dot.active {
    background-color: #505050; /* 當前播放的圓點 */
    transition: background-color 2s ease; /* 漸變效果 */
}