.respon-img, .js-responsive-img, .visible-text { opacity: 0; /* 初始透明度 */ transform: translateY(20px); /* 初始位置稍微向下 */ transition: opacity 0.5s ease, transform 0.5s ease; /* 過渡效果 */ } .visible { opacity: 1; /* 顯示時的透明度 */ transform: translateY(0); /* 回到原始位置 */ } /* Styles for images and popups */ //.respon-img { // cursor: pointer; // transition: transform 0.3s ease-in-out; //} //.respon-img:hover { // transform: scale(1.1); //} // .popup { // display: none; // position: fixed; // top: 50%; // left: 50%; // transform: translate(-50%, -50%); // padding: 20px; // background-color: rgba(240, 249, 255, 0.95); /* Adjust the transparency */ // border: 1px solid #ccc; // border-radius: 5px; // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // font-size: 16px; // z-index: 999; // opacity: 0; // transition: opacity 0.3s; // width: 90%; /* Use 90% width for responsiveness */ // max-width: 600px; /* Set the maximum width */ //} //.description { // text-align: justify; /* Align the text to both left and right */ //} //.title { // color: #004b87; /* Change this to your desired color */ // font-weight: bold; /* Set text to bold */ //} //.content { // color: #000000; /* Change this to your desired color */ //} //.close-btn { // background-color: #ddd; // padding: 5px 10px; // border: none; // border-radius: 3px; // cursor: pointer; //} .button-style { // cursor: pointer; padding: 0px 0px; background-color: transparent; border: 1px solid transparent; border-radius: 5px; transition: all 0.3s; color: inherit; /* 保持原始文字顏色 */ } .button-style:hover { background-color: rgba(255, 255, 255, 0.3); /* 透明度為 0.3 的白色背景 */ border-color: #fff; /* 鼠標移過時的邊框顏色 */ } .popup.show { display: block; opacity: 1; } .back-button { display: inline-flex; align-items: center; padding: 10px 20px; margin: 20px 0; font-size: 16px; color: #ffffff !important; /* 確保字體顏色 */ font-weight: bold; /* 字體粗細 */ background-color: #004B87; /* 按鈕背景色 */ text-decoration: none !important; /* 確保無下劃線 */ border-radius: 5px; transition: background-color 0.3s, transform 0.3s; opacity: 0; /* 初始透明度 */ transform: translateY(20px); /* 初始位置稍微向下 */ } .back-button.visible { opacity: 1; /* 顯示時的透明度 */ transform: translateY(0); /* 向上移動到原始位置 */ } .back-button:hover { background-color: #1679C8; transform: scale(1.03); } /* 表格和圖片的額外樣式,確保圖片放大時不會引起溢出 */ .responsive-table { width: 100%; overflow: hidden; } .responsive-table td { overflow: hidden; position: relative; } .responsive-table img { max-width: 100%; transition: transform 0.3s ease-in-out; } @media (max-width: 768px) { #benefit-table tr { display: flex; /* 使用 Flexbox 排列行 */ flex-wrap: wrap; /* 允許換行 */ justify-content: center; /* 置中對齊 */ } #benefit-table td { flex: 1 1 calc(50% - 10px); /* 每個單元格佔二分之一的寬度,並留出間距 */ margin: 5px; /* 單元格間距 */ text-align: center; /* 文字置中 */ padding: 0; /* 移除內邊距 */ box-sizing: border-box; /* 包含邊距 */ } #benefit-table td:nth-child(-n+4) .respon-img { max-width: 100%; /* 設定圖片最大寬度 */ height: auto; /* 保持比例 */ display: block; /* 使圖片為塊元素 */ margin: 0 auto; /* 圖片居中 */ } #benefit-table td:nth-child(n+5) .respon-img { max-width: 100%; /* 設定圖片最大寬度 */ height: auto; /* 保持比例 */ display: block; /* 使圖片為塊元素 */ margin: 0 auto; /* 圖片居中 */ } #heading1, #heading3 { font-size: 100%; /* 設置字體大小 */ } #heading2 { font-size: 90%; /* 設置字體大小 */ } } 獎勵及支援 我們提供具競爭力的薪酬以及與表現掛鉤的浮動薪金和額外強積金供款,以嘉許及獎勵員工所作出的寶貴貢獻。 除此之外,我們亦致力提供全面的福利待遇,保障員工的整體福祉,讓員工在職業生涯的各個階段可盡展所長,取得佳績。 全面福利 保障福祉 人壽保障 醫療及牙科保障 生育保障 健康檢查 培訓資助 退休保障 有薪假期 節慶及生日派對 返回 const images = document.querySelectorAll('.respon-img, .js-responsive-img'); const texts = document.querySelectorAll('.visible-text'); const backButton = document.querySelector('.back-button'); // 當頁面加載時,添加浮現效果 window.onload = function () { // 為所有圖片和文字添加浮現效果 images.forEach(img => img.classList.add('visible')); texts.forEach(text => text.classList.add('visible')); backButton.classList.add('visible'); // 為 back 按鈕添加浮現效果 // 按鈕延遲顯示 setTimeout(() => { button.classList.add('visible'); }, 500); // 在 0.5 秒後顯示按鈕 }; //const popups = document.querySelectorAll('.popup'); // const closePopups = () => { // popups.forEach((popup) => { // popup.style.opacity = 0; // setTimeout(() => { // popup.style.display = 'none'; // }, 300); // }); // }; // document.addEventListener('click', (e) => { // const target = e.target; // if (target.classList.contains('respon-img') || target.classList.contains('popup-btn')) { // const targetId = target.getAttribute('data-target'); // const targetPopup = document.getElementById(targetId); // Center the popup in the viewport // targetPopup.style.top = '50%'; // targetPopup.style.left = '50%'; // targetPopup.style.transform = 'translate(-50%, -50%)'; // popups.forEach((popup) => { // if (popup !== targetPopup) { // popup.style.opacity = 0; // popup.style.display = 'none'; // } // }); // targetPopup.style.display = 'block'; // setTimeout(() => { // targetPopup.style.opacity = 1; // }, 10); // } else if (!target.closest('.popup')) { // closePopups(); // } // }); // const closeBtns = document.querySelectorAll('.close-btn'); // closeBtns.forEach((btn) => { // btn.addEventListener('click', (e) => { // e.stopPropagation(); // const popup = btn.parentNode; // popup.style.opacity = 0; // setTimeout(() => { // popup.style.display = 'none'; // }, 300); // }); // }); // document.addEventListener('keydown', (e) => { // if (e.key === 'Escape') { // closePopups(); // } // });