* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.5; /* 行高 */
    font-weight: bold; /* 設定字體粗細 */
    color: #3E3E40;
}

/* 主內容區域 */
main {
    margin-top: 70px; /* 留出空間給固定的導航欄 */
}

/* Styling the scrollbars */
::-webkit-scrollbar {
    width: 16px; /* Width of the vertical scrollbar */
    height: 16px; /* Height of the horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background-color: #F2F2EB; /* Color of the track (background) */
}

::-webkit-scrollbar-thumb {
    background-color: #3E3E40; /* Color of the thumb (scrollable part) */
    border-radius: 8px; /* Rounded corners for the thumb */
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #BF9999; /* Color when hovering over the thumb */
    }

a {
    text-decoration: none; /* 去除默認的下劃線 */
    color: #3E3E40; /* 默認顏色 */
    position: relative;
}

    a:hover {
        transition: color 0.8s ease;
        color: #BF9999;
        animation: text-shadow-drop-center 0.6 forwards; /* 動畫名稱、時長、動作結束後保持最終狀態 */
    }

@keyframes text-shadow-drop-center {
    0% {
        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
        text-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
    }
}

/* 內容區域 */
.content-section {
    padding: 20px;
}

/*首頁內容*/
.hero {
    padding: 100px 20px;
    color: #F2F2EB;
    text-align: center;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: background-image 1s ease-in-out;
    overflow: hidden; /* 避免圈圈溢出 */
}

/* 滑過圖案圓圈互動 */
.circle {
  position: absolute;
  border-radius: 50%;
  transition: transform 0.2s ease-out;
  pointer-events: none;
  z-index: 0;
}

.circle1 {
  width: 25vw;
  height: 25vw;
  top: 10%;
  left: -2%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

.circle2 {
  width: 10vw;
  height: 10vw;
  top: 50%;
  right: 30%;
  background: radial-gradient(circle, rgba(0, 200, 255, 0.7), rgba(255, 255, 255, 0));
}

.circle3 {
  width: 8vw;
  height: 8vw;
  bottom: 10%;
  left: 40%;
  background: radial-gradient(circle, rgba(113, 177, 236, 0.7), rgba(255, 255, 255, 0));
}

.circle4 {
  width: 5vw;
  height: 5vw;
  top: 10%;
  right: 40%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

.circle5 {
  width: 15vw;
  height: 15vw;
  bottom: 0%;
  left: 90%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

/* 浮動動畫 keyframes */
@keyframes float {
  0%   { transform: translateY(0px) translateX(0px); }
  100% { transform: translateY(-20px) translateX(15px); }
}

/* 初始文字顯示 */
.text-change {
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.hero-content {
    position: relative; /* 使父容器有定位，方便子元素定位 */
    display: flex;
    flex-direction: column; /* 垂直排列 h1, p, a */
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
    text-align: center; /* 文字居中 */
}

    .hero-content h1 {
        font-size: 3em;
        text-shadow: 0 0 0.2em #3E3E40, 0 0 0.2em #3E3E40;
        margin-bottom: 20px;
        animation: focus-in-expand 3s forwards; /* 動畫名稱、時長、動作結束後保持最終狀態 */
        z-index: 1; /* 確保 h1 顯示在 p 上方 */
    }

/* 定義 focus-in-expand 動畫 */
@keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

.hero-content p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.cta-button {
    background-color: #0D0D0D;
    filter: opacity(70%);
    color: #F2F2EB;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.8s ease;
    z-index: 1; /* 確保按鈕顯示在 p 上方 */
    margin-top: 20px;
}

    .cta-button:hover {
        filter: none;
    }

/* 服務區塊 */
.services {
    text-align: center;
    padding: 20px;
}

    .services h2 {
        font-size: 30px;
        margin-bottom: 30px;
        color: #00060D;
    }

.services-text {
    max-width: 1000px;
    margin: 30px auto;
    text-align: center;
    padding: 30px;
    background-color: #F1F1F1;
    filter: opacity(90%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    font-weight: normal;
}

    .services-text p {
        font-size: 16px;
        margin: 8px;
    }

    .services .service-card {
        display: inline-block;
        width: 25%;
        padding: 0 0 30px 0;
        margin: 15px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        transition: background-color 0.5s;
    }

.services .service-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

        .services .service-card p {
            font-size: 16px;
        }

.service-card img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 3px;
}

.service-card:hover {
    background-color: #F2F2F2;
}

/* 產品區塊 */
.banner-container {
    display: flex;
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin-bottom: 20px;
}

.banner-item {
    flex: 1;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5); /* 預設亮度 */
    transition: flex 0.4s ease, filter 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

.banner-item:hover {
    flex: 1.5;
    filter: brightness(1);
}

.banner-text a {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.8rem;
    font-weight: bold;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
}

/* 滑入後文字更清晰、更大 */
.banner-item:hover .banner-text a {
    color: #fff;
    transform: translateX(-50%) scale(1.05);
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}

/* feature區塊 */
.feature-card {
    display: inline-block;
    width: 20%;
    padding: 25px 25px 40px 25px;
    margin: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.5s;
    background: #F2F2EB;
    position: relative;
    overflow: hidden;
    z-index: 1; /* 確保內容層在網格上方 */
}

/* 網格背景層 */
.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background-image: 
    linear-gradient(0deg, rgba(0, 0, 0, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: flicker 5s ease-in-out infinite;
  z-index: 0;
  opacity: 0.15;
  pointer-events: none;
}

/* 閃爍動畫 */
@keyframes flicker {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.25; }
}

    .feature-card img {
        width: 100%;
        max-width: 400px;
        height: auto;
    }

    .feature-card h3 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .feature-card p {
        font-size: 16px;
    }

/* 認證證書區塊 */
.certification-card {
    display: inline-block;
    width: 20%;
    position: relative;
    overflow: hidden;
    z-index: 1; /* 確保內容層在網格上方 */
}

    .certification-card img{
        max-height: 400px;
    }


.sobright {
    text-align: center;
    padding: 20px;
}

    .sobright img {
        max-width: 100%; /* Ensures the image scales with the container */
        height: auto; /* Keeps the image's aspect ratio */
    }

/* 影片播放 */
.video-player {
    width: 100%;
    max-width: 1200px;
    height: auto;
}

/* 回到最上層 */
.scroll-to-top {
    position: fixed;
    opacity: 0.6;
    bottom: 20px;
    right: 20px;
    display: none; /* 初始隱藏 */
    z-index: 1000; /* 確保按鈕在其他元素上方 */
    transition: opacity 0.3s ease-in-out; /* 讓按鈕出現和消失更平滑 */
}

    .scroll-to-top:hover {
        opacity: 0.7; /* 鼠標懸停時調整圖片透明度 */
    }

/*網頁底端*/
.footer {
    background-color: #0D0D0D;
    color: #F2F2EB;
    text-align: center;
    padding: 5px;
    font-size: 0.9em;
}

/* 網站地圖區塊 */
.map-container {
    display: flex;
    width: 100%;
}

.map-item {
    flex: 1;
    display: flex;
    position: relative;
}
    .map-item p {
        margin-bottom: 16px;
    }

    .map-item ul {
        margin: 0 0 16px 32px;
    }

    .map-item li {
        font-size: 13px;
    }

    /* 小螢幕背景調整 */
    @media screen and (max-width: 1250px) {
        .services .service-card {
        width: 45%;
    }

    .certification-card, .feature-card {
        width: 45%;
    }
}

/* 小螢幕樣式 */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }

    .services .service-card {
        width: 90%;
        margin-bottom: 20px;
    }

    .certification-card, .feature-card {
        width: 95%;
        height: auto;
    }

    .banner-container, .map-container {
        display: flex;
        flex-direction: column;
    }

    .banner-item, .map-item {
        flex: none;
        width: 100%;
        background-size: cover;
        background-position: center;
        transition: none;
    }

    .banner-text a {
        position: static;
        transform: none;
        padding: 1rem 0;
        font-size: 1.2rem;
        text-shadow: none;
        color: white;
        width: 100%;
        text-align: center;
    }
}

/* 小螢幕調整 */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 24px;
    }

    .hero p {
        font-size: 14px;
    }

    .content-section h2 {
        font-size: 1.8em;
    }

    .cta-button {
        padding: 8px 20px;
        font-size: 12px;
    }

    .footer {
        font-size: 0.6em;
    }
}