body {
    overflow-x: hidden;
}

.con-box {
    width: 90%;
    max-width: 1200px;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.con-left {
    width: 40%;
    /* padding: 0 30px; */
    letter-spacing: 1px;
}

.hashtag{
    right: 190px;
    bottom:50px;
}

.con-right{
    display: flex;
    /* height: 600px; */
    width: 600px;
    /* padding: 0 30px; */
    letter-spacing: 1px;
    flex-direction: column;
}

.con-up{
    display: flex;
    width: 600px;
    /* padding: 0 30px; */
    letter-spacing: 1px;
    flex-direction: column;
}

.con-down{
    display: flex;
    height: 100%;
    width: 600px;
    /* padding: 0 30px; */
    letter-spacing: 1px;
    flex-direction: column;
}

.con-down-up{
    display: flex;
    height: 100%;
    width: 100%;
    letter-spacing: 1px;
    flex-direction: column;
}
.con-down-down{
    display: flex;
    height: 100%;
    width: 100%;
    letter-spacing: 1px;
    justify-content: center;
    padding-top: 20px;
}

.con-tit {
    color: #142841;
    font-size: 40px;
    font-weight: 900;
    margin-bottom: 10px;
    margin-top: 10px;
}

.scrollbar-scroll {
    display: flex;
    width: 100%; /* 設定寬度或一個具體的數值 */
    height: 50px; /* 設定適當的高度 */
    justify-content: center; /* 讓滾動條在水平方向置中 */
    align-items: center; /* 讓滾動條在垂直方向置中 */
}



.con-ofer {
    color: #fa6e00;
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 10px;
}

.con-text {
    font-size: 20px;
    margin-bottom: 10px;
}

.area-2 {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.area-2-last {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.area-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #D4D9DB;
    /* background-image: url('../img/header.png'); */
    background-size: cover;
    background-position: center;
    opacity: 0.2; /* 淡化背景圖片 */
    transform: scaleY(-1); /* 水平翻轉 */
    z-index: -1; /* 保證背景圖片在容器後面 */
}

.area-2-last::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/header.png');
    background-size: cover;
    background-position: center;
    opacity: 0.2; /* 淡化背景圖片 */
    transform: scaleY(-1); /* 水平翻轉 */
    z-index: -1; /* 保證背景圖片在容器後面 */
}

.header-padding{
    padding-bottom: 0px;
    /* background-color: #2455a5; */
}

/*使圖片並排再一起*/
.img-container {
    display: flex;
}

.img-container img {
    width: auto; /* 根據需要調整圖片的寬度 */
    height: 500px; /* 保持圖片的比例 */
}

figure {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center; /* 讓文字與圖片對齊 */
    margin: 0; /* 根據需要調整間距 */
}

figcaption {
    margin-top: 0px;/* 調整圖片與文字間的距離 */
    font-size: 28px; /* 調整文字大小 */
    font-weight: 900;
    text-align: center; /* 讓文字置中 */

}

/* 計數器樣式 */
/* .count-box{ position:absolute; left:6%; bottom:116px; display:flex; color:#142841; font-size:42px; font-weight:900;align-items:flex-end; line-height:1; letter-spacing:2px;}	 */
.count-box {
    /* position:absolute; */
    display:flex;
    left: 2%;
	bottom: 70px;
    color:#142841; 
    font-size:42px; 
    font-weight:900;
    align-items:flex-end; 
    line-height:1; 
    letter-spacing:2px;
    left:11%;
    bottom:30px;
}

.img-single-tit img {
    max-height: 500px;
    max-width: 400px;
    width: 400px; 
    height: auto; 
    padding-top: 150px;
}

.fraction-b {
    font-size: 24px; /* 調整這裡的值來改變字體大小 */
    line-height: 1; /* 控制行高，確保文字不會過於分散 */
    margin-left: 5px; /* 為了更好的視覺效果，可以給文字增加一點左邊距 */
    color: #142841; /* 確保字體顏色與設計一致 */
}

/* 設置動態文字的樣式 */
.dynamic-text {
    font-size: 20px;
    padding-top: 20px;
    font-weight: 900;
    text-align: left; /* 讓文字置中 */
    color: #000;
}

/* 在手機屏幕上隱藏 .img-single-tit、count-box*/
@media screen and (max-width: 1076px){
    .img-single-tit {
        display: none; /* 隱藏這個區塊 */
    }
    .count-box{
        display: none;
    }
}
/*
Youtube
*/
.video-container {
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    min-height: 60vh;
}
.video-container iframe{
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;      /* 垂直居中 */
    width: 100%; 
    min-width: 50vw;
    min-height: 55vh;
}

/* 手機屏幕上的佈局調整 */
@media screen and (max-width: 1076px){
    .con-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .con-left{
        width: 100%; /* 確保左側和右側內容佔據全屏寬度 */
        padding: 10px 20px;
    }

    .con-left {
        margin-bottom: 20px;
    }
    
    .hashtag{
        right: 0;
    }
    .con-right {
        display: flex;              /* 將 .con-right 設為 flex 容器 */
        flex-direction: column;     /* 內容按照垂直方向排列 */
        justify-content: center;    /* 水平置中，讓項目居中 */
        align-items: center;        /* 垂直置中 */
        width: 100%;                /* 確保內容佔據全屏寬度 */
        padding: 10px 20px;
    }
    
    .con-right img{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .con-left img {
        max-width: 100%; /* 確保圖片不會超出容器寬度 */
        height: auto; /* 高度自動調整，保持比例 */
    }

    /* 動態文本的字體大小調整 */
    .dynamic-text {
        font-size: 14px; /* 手機上縮小文字 */
    }

    /* 文字和標題大小調整以適應手機屏幕 */
    .con-tit {
        font-size: 24px; /* 減小標題字體大小 */
    }

    .con-ofer {
        font-size: 18px; /* 減小副標題字體大小 */
    }

    .con-text {
        font-size: 16px; /* 減小正文字體大小 */
    }

    .img-single-word img {
        max-width: 370px; /* 限制圖片的最大寬度 */
        /* max-height: 500px; 限制圖片的最大高度 */
        width: auto; /* 確保圖片寬度保持比例 */
        height: auto; /* 確保圖片高度保持比例 */
    }
}

/* 特別針對非常小的螢幕 (例如最大寬度 400px 的螢幕) */
@media screen and (max-width: 400px) {
    .img-single-last img {
        max-width: 50%; /* 限制圖片的最大寬度 */
        height: auto; /* 確保圖片高度保持比例 */
    }

    .img-single-sec img {
        max-width: 50%;
        max-height: 50%;
    }

    .img-single-word2{
        max-width: 85%;
        height: auto;
        /*置中*/
        margin: 0 auto;
    }
}


/*常見問題*/
.qa-title{
    background-color: rgb(47, 190, 102);
    border-style: none none solid none;
    border-bottom: 1px solid #4E4A59;
    color: #f4f4f4;
    font-weight: normal;
    padding-left: 18px;
    /* outline: none; */
    padding-top: 10px;
    font-size: 24px;
}

.normal-qa{
    font-size: 24px;
}

.collapsible {
    background-color: #444; /* 改成深色背景 */
    color: white;
    cursor: pointer;
    padding: 15px; /* 增加按鈕內部的間距 */
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px; /* 調整字體大小 */
    transition: background-color 0.3s ease; /* 增加過渡效果 */
    border-radius: 8px; /* 圓角按鈕 */
    border-bottom: 2px solid white; /* 增加底部邊框 */
}

.collapsible:hover {
    background-color: #555; /* 懸停時變化的背景顏色 */
}

.collapsible:after {
    content: '\002B'; /* '+' 符號 */
    font-size: 22px; /* 調整符號大小 */
    color: white; /* 符號顏色 */
    float: right;
    transition: transform 0.3s ease; /* 增加符號旋轉過渡效果 */
}

.collapsible.collapsible-active:after {
    content: '\2212'; /* 減號符號 */
}

.expandable-content {
    background-color: #f9f9f9; /* 調整背景顏色為更柔和的灰色 */
    border-left: 4px solid #444; /* 左邊添加一條強調線 */
    /* 文字樣式 */
    font-size: 16px; /* 調整字體大小 */
    line-height: 1.6; /* 增加行距，讓文字更易讀 */
    color: #333; /* 使用深灰色，增加對比度 */
    font-family: 'Arial', sans-serif; /* 使用現代且易讀的字體 */
}
/* 文字太長時自動換行，防止溢出 */
.collapsible {
    white-space: normal; /* 允許換行 */
    word-wrap: break-word; /* 強制換行 */
}
.expandable-content p {
    margin-bottom: 10px; /* 增加段落之間的間距 */
}

/*查看功能*/
/*自由移動的小球 */
.ball-container {
    position: fixed;
    top: 400px;
    right: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 999;
    cursor: grab; /* 提示可以拖動 */
}

.count{
    color: #3d85cb;
}

.ball-container:active {
    cursor: grabbing; /* 拖動時的指標 */
}

/* 小球的樣式 */
.interactive-ball {
    width: 100px;
    height: 100px;
    background-image: url('../img/product/Restroom_Unrest_Detection_Service/interactive-ball.png'); /* 正確的背景圖片語法 */
    background-size: cover; /* 確保圖片覆蓋整個小球 */
    background-position: center; /* 圖片置中 */
    background-repeat: no-repeat; /* 防止圖片重複 */
    border-radius: 50%; /* 圓形效果 */
    cursor: pointer;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* 更大的陰影效果 */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}

/* 提示文字 */
.interactive-ball:hover::after {
    content: '點擊查看功能'; /* 提示文字 */
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px; /* 增大字體 */
    font-weight: bold; /* 文字加粗 */
    color: #1d1c1c; /* 改為白色文字 */
    background-color: #78ff53; /* 使用紅色背景提高對比度 */
    padding: 5px 10px; /* 增加內邊距讓文字不緊貼背景 */
    border-radius: 5px; /* 圓角背景 */
    white-space: nowrap;
    opacity: 1; /* 讓文字一開始就顯示 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加陰影讓提示文字更突出 */
}

/* 鼠標懸停時的效果，並帶有提醒用戶的閃爍動畫 */
.interactive-ball:hover {
    transform: scale(1.2);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
    animation: bounce 1s infinite; /* 增加彈跳效果來提醒用戶 */
    background-color: #2980b9;
}

/* 增加彈跳的動畫效果 */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* 選項樣式，初始狀態下隱藏 */
.ball-options {
    display: none;
    margin-top: 15px; /* 與小球保持適當距離 */
    flex-direction: column; /* 讓選項垂直排列 */
    align-items: center;
}

/* 父容器懸停時顯示選項 */
.ball-container:hover .ball-options {
    display: flex; /* 顯示選項列表並垂直排列 */
    animation: fadeIn 0.3s ease; /* 選項淡入效果 */
}

/* 選項按鈕的樣式 */
.ball-options button {
    width: 120px;
    padding: 12px;
    margin: 5px 0;
    background-color: #f39c12;
    color: white;
    border: none;
    border-radius: 25px; /* 使用圓角設計 */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 柔和的陰影效果 */
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-align: center;
    font-size: 16px;
}

/* 選項懸停效果，帶有微微的彈跳 */
.ball-options button:hover {
    background-color: #e67e22;
    transform: translateY(-5px); /* 鼠標懸停時稍微上移，強調互動感 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 陰影加深，增強懸浮感 */
}

.img-single-share {
    display: flex;
    flex-direction: column; /* 確保圖片和 figcaption 是垂直排列 */
    justify-content: flex-end; /* 讓文字靠底部對齊 */
    align-items: center; /* 水平居中 */
    height: 350px; /* 固定高度 */
}

/*使用教學btn*/
.sla_tech_icon {
    display: flex;               /* 水平排列 */
    align-items: center;        
    background-color: white; /* 按鈕背景色*/
    color: black;               /* 文字顏色 */
    text-decoration: none;      /* 移除連結下劃線 */
    padding: 10px 20px;         /* 按鈕內邊距 */
    border-radius: 5px;         /* 圓角 */
    border: 2px solid black;
    width: fit-content;         /* 自適應寬度 */
    font-size: 16px;            /* 字體大小 */
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 圖片樣式 */
.sla_tech_icon img {
    width: 60px;   /* 圖片寬度 */
    height: 120px; /* 圖片高度 */
    margin-right: 10px; /* 圖片與文字的間距 */
    object-fit: cover;
}

/* 按鈕懸停效果 */
.sla_tech_icon:hover {
    transform: scale(1.05);
}

/* 淡入動畫 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 在手機上調整小球的位置和大小 */
@media screen and (max-width: 1076px){
    .con-up{
        display: flex;
        width: 100%;
        /* padding: 0 30px; */
        letter-spacing: 1px;
        flex-direction: column;
    }

    .con-down{
        display: flex;
        height: 100%;
        width: 100%;
        /* padding: 0 30px; */
        letter-spacing: 1px;
        flex-direction: column;
    }
    .ball-container {
        top: 80px; /* 調整垂直位置 */
        right: 80px; /* 調整水平位置 */
        width: 80px;
        height: 80px;
    }

    .interactive-ball {
        width: 80px;
        height: 80px;
    }

    /* 調整提示文字的大小和位置 */
    .interactive-ball::after {
        font-size: 14px;
        top: -30px;
        padding: 3px 8px;
    }
}