/*-----------------------------------------------------測試用.html/*-----------------------------------------------------測試用.html-------------------------------------------------------------------*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.decorative-bg {
  position: relative;
  background-color: #d6e4ff; /* 主底色 */
  padding: 60px 30px;
  border-radius: 0; /* 不要圓角，撐滿全寬通常不用圓角 */
  color: #003366;
  width: 100vw; /* 撐滿螢幕寬度 */
  box-sizing: border-box; /* 確保 padding 算在寬度內 */
  
  /* 置中區塊但文字靠左 */
  max-width: 1200px; /* 內容最大寬度 */
  margin: 0 auto; /* 整個區塊置中 */
  
  text-align: left; /* 文字靠左 */
  line-height: 1.6;
  overflow: hidden;
}

.decorative-bg p {
  max-width: 900px; /* 文字內容最大寬度，避免過長 */
  margin: 0 auto 1rem auto; /* 段落置中但文字靠左 */
  font-size: 28px;
}

.decorative-bg::before,
.decorative-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  z-index: 0;
}

.decorative-bg::before {
  width: 200px;
  height: 200px;
  background-color: #a3bffa;
  top: -80px;
  left: -80px;
}

.decorative-bg::after {
  width: 150px;
  height: 150px;
  background-color: #8ca0ff;
  bottom: -60px;
  right: -60px;
}
.swiper-container {
    width: 100%;
    height: auto;
    position: relative;
    margin-top: 10px;
    overflow: hidden; 
        }
.swiper-slide img {
            width: 100%; /* 使圖片填滿容器寬度 */
            height: auto; /* 使圖片填滿容器高度 */
            object-fit: cover; /* 保持圖片比例，填滿容器 */
        }
.swiper-slide .text-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            color: white;
            background-color: rgba(0, 0, 0, 0); /* 半透明背景 */
            padding: 10px;
            border-radius: 5px;
            display: none; /* 預設隱藏文字 */
           
        }

        /* 當滑鼠懸停時顯示文字 */
        .swiper-slide:hover .text-overlay {
            display: block;
        }

        /* 停止滑動效果 */
        .swiper-container:hover .swiper-wrapper {
    pointer-events: none;
}

.swiper-button-next {
    right: 10px;  /* 向右移動箭頭 */
    top: 50%;
    transform: translateY(-50%);  /* 使箭頭垂直居中 */
    position: absolute;
}

.swiper-button-prev {
    left: 10px;  /* 向左移動箭頭 */
    top: 50%;
    transform: translateY(-50%);  /* 使箭頭垂直居中 */
    position: absolute;
}
.ad{ 
     text-align: center;
     background-color: cadetblue;
}
.ad p{
    color: black;
    font-size: 32px;
}
.abc {
    display: grid; /* 使用 Grid 排版 */
    grid-template-columns: repeat(3, 1fr); /* 每行顯示 3 列 */
    gap: 20px; /* 設定圖片間的間隙，避免黏在一起 */
    padding: 20px; /* 增加容器內邊距 */
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto; 
    place-items: center;
    box-sizing: border-box;
    /* 使容器在頁面中居中 */
}

/* 設定每個圖片的樣式 */
.abc .image img {
    width: 100%; /* 使圖片寬度自動填滿容器 */
    height: auto ; /* 保持圖片比例 */
    border-radius: 8px; /* 圓角效果，可選 */
    transition: transform 0.3s ease; /* 當懸停時，圖片會放大 */
}

/* 鼠標懸停效果：放大圖片 */
.abc .image:hover img {
    transform: scale(1.1); /* 使圖片放大 */
}
.model {
            text-align: center;
            font-size: 2vw;
            background-color: darkcyan;
            color:white;
}
.model-1{
            text-align: center;
            font-size: 1.5vw;
}
.gallery {
    display: flex;  /* 使用 flex 佈局 */
    flex-wrap: wrap; /* 允許自動換行 */
    justify-content: center; /* 水平置中 */
    gap: 10px; /* 設定圖片間距 */
    padding: 20px;
    max-width: 100%; /* 限制最大寬度，讓內容保持置中 */
    margin: auto; /* 讓 `.gallery` 置中 */
}
.gallery img {
    width: calc(100% / 6 - 10px); /* 設定每行 6 張，並減去間距 */
    height: auto;
    object-fit: cover;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* 遮罩層 (燈箱) */
.lightbox {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    overflow: auto; /* 手機螢幕太小時可滾動 */
    z-index: 10000;
}

/* 大圖片 */
.lightbox img {
    max-width: 90vw;      /* 避免超出畫面寬度 */
    max-height: 80vh;     /* 避免超出畫面高度 */
    width: auto;
    height: auto;
    object-fit: contain;  /* 讓圖片完整呈現但不變形 */
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
}

/* 左右切換箭頭 */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: white;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 15px;
    border-radius: 5px;
    user-select: none;
}
.prev { left: 10px; }
.next { right: 10px; }
.prev:hover, .next:hover { background: rgba(0, 0, 0, 0.8); }

/* 關閉按鈕 */
.close {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    user-select: none;
}
.hamburger {
  display: none;
}
.nav-links.mobile-menu {
    display: none;
}
.image p {
    margin-top: 10px;          /* 文字與圖片之間的間隙 */
    font-size: 32px;           /* 設定文字大小 */
    color: royalblue;               /* 設定文字顏色 */
    text-align: center;        /* 使文字水平居中 */
    font-family: 'BiauKai';
    font-weight: 700; 
}
@media screen and (max-width: 768px) {
    
  .nav-links.desktop-menu {
    display: none;
  }
.hamburger {
    display: block;
    position: absolute;
    height: 56px;
    top: 40px;
    right: 20px;
    z-index: 9999;
    font-size: 28px;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    }

  /* 手機版的選單初始隱藏 */
  .nav-links.mobile-menu {
    display: none;
    flex-direction: column;
    background-color: white;
    position: absolute;  
    top: 60px;
    right: 0;
    width: 200px;
    border-radius: 4px;
    padding: 10px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1000;
  }

  /* 手機版選單展開 */
  .nav-links.mobile-menu.active {
    display: flex;
  }

  .swiper-button-prev {
    left: 10px;
  }
  .swiper-button-next {
    right: 10px;
  }
  .gallery img {
    width: calc(100% / 2 - 10px);
  }
  .lightbox img {
        max-width: 95vw;
        max-height: 70vh;
        padding: 5px;
    }  
body footer h2 {
        font-size: 20px ; /* 或 clamp(18px, 5vw, 24px) */
    }

  body footer ul li {
        font-size: 20px ;
    }
    .image p{
    margin-top: 10px;          /* 文字與圖片之間的間隙 */
    font-size: 16px;           /* 設定文字大小 */
    color: royalblue;               /* 設定文字顏色 */
    text-align: center;        /* 使文字水平居中 */
    font-family: 'BiauKai';
    font-weight: 700;  
    } 
    .ad p{
    color: black;
    font-size: 16px;
}
}    

/*------------------------------------------------------套模用.html------------------------------------------------------------------*/
.navbar {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 10px 20px;
    background: white; /* 深色背景 */
    color: white;
    padding-left: 150px;
    box-shadow:  0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
    position: relative;
}

.navbar .logo img {
    height: 100px;
    width: auto;/* 控制 Logo 高度 */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
    margin-left: 150px;
}
.couster-table-0{
    font-size: 32px;
    color: cornflowerblue;
    text-align: center;
}
.customer-table {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    background-color: aliceblue;
}
.form-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px; /* 兩個輸入框之間的間距 */
    height: auto;

}
.form-group input,.form-group textarea{
    width: 49%;  /* 讓每個輸入框佔一半寬度 */
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    resize: none;
    
}
.form-group textarea{
    width: 100%;
}


input::placeholder, textarea::placeholder {
    color: #888;
}

.submit-btn {
    background: linear-gradient(135deg, #007bff, #0056b3); /* 藍色漸變 */
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.submit-btn:hover {
    background-color: #0056b3;
}

footer {
    background-color: #1c1c1c;
    color: white;
    text-align: center;
    padding: 20px;
}

footer h2 {
    font-size: 2vw;
    margin-bottom: 10px;
}

footer ul {
    list-style-type: none;
    padding: 0;
}

footer ul li {
    font-size: 1.8vw;
    margin: 10px 0;
}

footer ul li a {
    color: #4C99FF;
    text-decoration: none;
}

footer ul li a:hover {
    text-decoration: underline;
}

.nav-links a {
    text-decoration: none;
    font-size: 18px;
    padding: 10px 15px;
    transition: 0.3s;
}

.nav-links a:hover {
    background-color: #f1c40f;
    border-radius: 5px;
}
/* 響應式設計（手機版） */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        background: #333;
        width: 150px;
        text-align: center;
        border-radius: 5px;
    }

    .nav-links.active {
        display: flex;
    }
}
/*-----------------------------------------------------cctv.html--------------------------------------------------------------------*/
.intro-section {
    background: linear-gradient(90deg, #0050ac, #9354b9);
    color: white;
    padding: 40px 20px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 30px;
}
.titletop {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
}

.titletop1 {
    font-size: 24px;
    font-weight: 500;
}

.Process {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin: 40px 0 20px;
    color: #333;
}

.step-container {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
  padding: 30px 10px;
}

.step-item {
  flex: 1 1 300px;
  background: #f9f9f9;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  position: relative;
  transition: transform 0.3s ease;
}

.step-item:hover {
  transform: translateY(-5px);
}

.step-icon {
  font-size: 50px;
  margin-bottom: 15px;
  color: #4CAF50;
}

.step-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.step-desc {
  font-size: 22px;
  color: #666;
  line-height: 1.6;
}
.step-arrow {
  font-size: 32px;         /* 箭頭大小 */
  color: #999;
  flex-shrink: 0;
  display: flex;
  align-items: center;     /* 垂直置中箭頭 */
  justify-content: center;
  height: 250px;           /* ⬅️ 設定箭頭高度 */
}

.kind{
    text-align: center;
    color: blue;
    font-size: 40px;
    font-weight: 700;
}
.productshow{
            display: flex;
            gap: 60px;
            justify-content: center;
            flex-wrap: wrap;
}    
.productshow-1 {
    display: flex;           /* 水平排列 */
    align-items: center;     /* 垂直居中對齊 */
    gap: 10px;
    /* 文字與圖片之間的間距 */
}
.card {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            padding: 20px;
            text-align: center;
            max-width: 300px;
            height: 500px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
.product-title {
    font-size: 32px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}
.card p {
    font-size: 24px;
}
.image-wrapper {
            height: 250px;
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
        }

.camerashow {
    display: flex!important; /* 使用flexbox讓元素水平排列 */
    width: 100%;
}

.night-item {
    flex: 1; /* 使每個項目佔據相等的空間 */
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}
.cam-img {
    width: 100%; /* 使圖片響應式，佔滿容器的寬度 */
    height: auto; /* 保持圖片的比例 */
}

.caption {
    margin-top: 10px; /* 添加一些間距，讓標題和圖片之間有空隙 */
}

/* 下層圖片：置中顯示 */
.camera-section {
    display: flex!important; /* 使用flexbox讓元素水平排列 */
    width: 100%;
}

.camera-section .caption {
  margin-top: 10px;
  font-size: 16px;
  text-align: center;
}
.cam-img {
    width: 100%; /* 使圖片響應式，佔滿容器的寬度 */
    height: auto; /* 保持圖片的比例 */
}

/* RWD 響應式調整 */
@media (max-width: 768px) {
  .camera-block.double {
    flex-direction: column;  /* 手機版顯示為縱向排列 */
    align-items: center;     /* 中心對齊 */
  }

  .night-item {
    width: 100%;    /* 在小螢幕上每張圖寬度為 100% */
    max-width: 90%; /* 縮小範圍，避免超出螢幕 */
  }
}
/*------------------------------------------Communication-Engineering.html----------------------------------------------------------*/
.CE-pic{
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* 可選：裁切圖片以保持比例並填滿容器 */
}
.PBX-title{
    text-align: center;
    font-size: 32px;
    color: deepskyblue;
    margin-bottom: 20px;
    line-height: 1.5;
}

.pbx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin: 40px auto;
  max-width: 1400px;
  padding: 20px;
}

.pbx-content {
    flex: 1;
    max-width: 55%;
    padding: 20px;
    box-sizing: border-box;
}

.pbx-content h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}
.pbx-list {
  font-size: 1.1rem;   
  color: #555;
  list-style-type: none;
  max-width: 800px; 
  margin: 0 auto; 
}

.pbx-list li {
  background: #f0f4f8;
  padding: 12px 16px;
  margin-bottom: 12px;
  border-radius: 8px;
  font-size: 28px;
  color: #555;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.pbx-list li strong {
  color: #1d72b8;
    font-size: 28px;
}

.pbx-image {
  flex: 1 1 300px;
  max-width: 40%;
  padding: 20px;
  box-sizing: border-box;
}
.pbx-image img{
  width: 100%;
  height: 350px; /* 固定高度，可根據設計調整 */
  object-fit: contain;
  display: block;
  border-radius: 8px;
}
.PBX-1{
    margin-top: 20px;  /* 上方間隔 */
            margin-bottom: 20px;  /* 下方間隔 */
            font-size: 16px; /* 字體大小 */
            line-height: 1.6; /* 行距 */
            padding: 15px;  /* 內邊距 */
            background-color: #f4f4f4; /* 背景顏色 */
            border-radius: 8px; /* 圓角 */
            border: 1px solid #ddd; /* 邊框 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 陰影 */
}
.PBX-end {

  margin: 60px auto 40px auto;
  padding: 30px 40px;
  background-color: #f9fbfe;
  border: 1px solid #d0e4f7;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.08);
  text-align: center;
}

.PBX-end h2 {
  color: #007acc;
  font-size: 36px;
  margin-bottom: 20px;
}
.PBX-end p{
    font-size: 28px;
}
@media screen and (max-width: 768px) {
    .PBX-title {
        font-size: 16px;
    }

    .pbx {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 12px;
        flex-wrap: nowrap; /* 圖文左右並排，不換行 */
    }

    .pbx-image {
        flex: 0 0 40%;
        max-width: 40%;
        padding: 0;
    }

    .pbx-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .pbx-content {
        flex: 1;
        max-width: 60%;
        padding: 0;
        box-sizing: border-box;
        text-align: left;
    }

    .pbx-content h2 {
        font-size: 18px;
        text-align: left;
        margin-bottom: 10px;
        color: #007acc;
    }

    .pbx-list {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .pbx-list li {
        display: block;
        background: none;
        padding: 0;
        margin-bottom: 8px;
        border-radius: 0;
        font-size: 14px;
        box-shadow: none;
        color: #333;
    }

    .pbx-list li strong {
        display: inline;
        color: #007acc;
        font-weight: bold;
        font-size: 14px;
    }
}
/*----------------------------------------------------LPR System.html---------------------------------------------------------------*/
.lpr-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 60px 20px 40px;
  font-family: 'Segoe UI', sans-serif;
  color: #2c3e50;
  line-height: 1.8;
  background-color: #ffffff;
}

.lpr-content h2 {
  text-align: center;
  color: #1a73e8;
  font-size: 2.2rem;
  margin-bottom: 24px;
  font-weight: 600;
}

.lpr-content p {
  font-size: 1.05rem;
  text-align: justify;
  font-size: 20px;
}

.lpr-features {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Segoe UI', sans-serif;
  color: #333;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.lpr-features h2 {
  text-align: center;
  color: #1a73e8;
  font-size: 2.2rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.lpr-list {
  list-style-type: none;
  padding-left: 0;
}

.lpr-list li {
  margin-bottom: 15px;
  font-size: 1.1rem;
  line-height: 1.7;
}

.lpr-list li strong {
  color: #0077cc;
  font-weight: bold;
}

.lpr-list li::before {
  content: "✔️";
  margin-right: 10px;
  color: #1a73e8;
  font-size: 1.3rem;
  vertical-align: middle;
}

.lpr-system {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Roboto', sans-serif; /* 調整為更現代的字體 */
  color: #333;
  line-height: 1.8; /* 增加行高以提升可讀性 */
  background: linear-gradient(to right, #e0f7fa, #ffffff); /* 漸變背景 */
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* 標題樣式 */
.lpr-system h2 {
  text-align: center;
  color: #1a73e8; /* 主要顏色 */
  font-size: 2.4rem;
  margin-bottom: 20px;
  font-weight: 700; /* 增加粗體 */
  letter-spacing: 1px; /* 增加字母間距 */
}

/* 文字樣式 */
.lpr-system p {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: #555;
  line-height: 1.7;
}

/* 功能卡片排版 */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-around;
}

.feature {
  flex: 1 1 30%;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature h3 {
  font-size: 1.6rem;
  color: #0077cc; /* 顏色更新 */
  margin-bottom: 10px;
  font-weight: 600;
}

.feature p {
  font-size: 1rem;
  color: #666;
}

/* 懸浮效果 */
.feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
/*-----------------------------------------------burglary-protection-system---------------------------------------------------------*/


.ats-title {
  background: #004466;
  color: white;
  padding: 10px;
  border-radius: 5px;
  margin-top: 30px;
}

.ats-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.ats-table th,
.ats-table td {
  padding: 12px 16px;
  border: 1px solid #ddd;
  text-align: left;
  font-size: 24px;
}

.ats-table th {
  background-color: #e0f7fa;
  font-weight: bold;
}

.ats-table td:first-child {
  width: 30%;
}
.intro-text {
  font-size: 28px;
  color: dodgerblue;
  line-height: 1.8;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 191, 255, 0.1);
}
/*---------------------------------------------------------LTC.html-----------------------------------------------------------------*/
.LTC-title{
    font-size: 40px;
    font-weight: bold;
}
.LTC-title-1{
    font-size: 32px;
}
.LTC-title-2{
    font-size: 28px;
}
.LTC-title-bc{
    display: flex;
    align-items: center;
    gap: 120px;
    padding: 20px;
}
.LTC-title-group {
    display: flex;
    flex-direction: column;
    gap: 20px;/* 讓文字子元素垂直排列 */
  }
.LTC-container {
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;  /* 水平置中 */
  margin-top: 40px;         /* 距離上方一段空間（可選） */
}
.LTC-list{
     max-width: 700px;
      margin: auto;
      display: flex;
      flex-direction: column;
      gap: 24px;
}
.LTC-item, .LTC-item-1{
  background-color: #f4faff; /* 淡藍色，也可換成淡綠：#f5fff4 */
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
  padding: 32px 24px;
  border: 1px solid #d6e4f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background-color 0.3s;
}
.LTC-item-1{
  background-color: #f4faff; /* 淡藍色，也可換成淡綠：#f5fff4 */
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
  padding: 60px 45px;
  border: 1px solid #d6e4f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background-color 0.3s;
}
.LTC-desc{
      font-size: 32px;
      color: #555;
      line-height: 1.6;
}
.ltc-3{
    display: block;
    margin:0 0 16px -20px; 
}
.divider {
  width: 100vw;
  height: 2px;
  background-color: #ccc;
  margin: 40px 0;
  border: none;
  margin-left: calc(-50vw + 50%);  /* 讓它對齊整個畫面邊界 */
}
.LTC-0{
    color: blue;
    font-size: 40px;
    text-align: center;
}
.ltc-footer-phrase {
  width: 100%;
  background-color: #fef3ec; /* 溫暖米杏色，可以改成 #fdf2e9 / #fef3ec */
  color: #5a3e36; /* 溫暖棕色文字，比純黑更柔和 */
  padding: 48px 16px;
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 40px;
}
.ltc-footer-phrase .ltc-line {
    margin-bottom: 1em;
}

.ltc-footer-phrase .quote {
    font-style: italic;
    color: #8c4c39;
}
@media screen and (max-width: 768px){
    .LTC-title-bc{
        width: 100%;
        height: auto;
        flex-direction: column;
    }
    .LTC-title-bc img {
    max-width: 100%;   /* 手機版圖片寬度填滿容器 */
  }
  .LTC-item img,
  .LTC-item-1 img {
    max-width: 90%;   /* 不佔滿全寬，留點邊距 */
    margin: 0 auto;   /* 置中圖片 */
  }
  .ltc-footer-phrase {
  width: 100%;
  background-color: #fef3ec; /* 溫暖米杏色，可以改成 #fdf2e9 / #fef3ec */
  color: #5a3e36; /* 溫暖棕色文字，比純黑更柔和 */
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 18px;
  padding: 0;      
}
.ltc-footer-phrase .ltc-line {
    margin-bottom: 1em;
}

.ltc-footer-phrase .quote {
    font-style: italic;
    color: #8c4c39;
}
}

/*--------------------------------------------------environmengal-control.html------------------------------------------------------*/
.ec-title{
    color: cornflowerblue;
    font-size: 32px;
    text-align: center;
}
.ec-title-1 {
  display: flex;
  flex-wrap: wrap; /* 可支援手機縮排 */
  align-items: flex-start;
  gap: 20px;
}
.ec-title-0{
    font-size: 32px;
    color:blue;
}
.ec-title-1 .text-block {
  margin-left: 20px;    /* 文字區塊和圖片間距 */
  line-height: 3.5;/* 行高 */
  font-size: 32px;
  list-style: none;
}
.ec-title-1 .text-block li {
  list-style-type: none;
  margin-bottom: 60px;
  position: relative;
  padding-left: 64px; /* 預留給星星空間 */
  font-size: 32px;
  left 0;
  
}
.ec-title-1 .text-block li::before {
  content: "⭐";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 36px;  /* 星星大小可調整 */
  color: gold;
}
.ec-ad{
    font-size: 32px;
    color: cornflowerblue;
}
.ec-ad-1{
    font-size: 24px;
    color: blue;
}
.ec-imgs-row {
  display: flex;
  justify-content: center;   /* 水平置中 */
  gap: 20px;                 /* 兩張圖片間距 */
  flex-wrap: wrap;           /* 手機自動換行 */
  margin-top: 20px;
}

.ec-imgs-row img {
  width: 600px;
  height: auto;
  max-width: 100%;           /* 保證小螢幕不爆版 */
  display: block;
}
.ec-end{
    font-size: 32px;
    color: royalblue;
}
.ec-pic{
    width: 600px;
    height: auto;
}
.mobile-only{
    display: none;
}
@media screen and (max-width: 768px){
    .ec-title{
        font-size: 18px; 
    }
    .ec-pic{
        width: 100%;
        height: auto;
    }

     .ec-title-1 .text-block li::before {
      content: "⭐";
      position: absolute;
      left: 0;
      top: -5px;
      font-size: 36px;  /* 星星大小可調整 */
      color: gold;
        } 
    .ec-title-1 .text-block li {
      list-style-type: none;
      margin-bottom: 60px;
      position: relative;
      padding-left: 64px; /* 預留給星星空間 */
      font-size: 20px;
      left: 0;
  
}
    .ec-end{
     display: none;
    }
    .mobile-only {
    display: block;
    font-size: 16px; /* 你可調整手機專用字體大小 */
    color: royalblue;
    margin-top: 20px;
    line-height: 1.8;
    }
}
/*----------------------------------------------------------about.html--------------------------------------------------------------*/
.about-section {
  background-color: #f4f8fb;
  padding: 60px 20px;
  font-family: "Segoe UI", sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: 42px;
  margin-bottom: 40px;
  color: #0077aa;
  font-weight: bold;
}

.about-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.about-left,
.about-right {
  flex: 1;
  min-width: 300px;
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.about-left p {
  font-size: 24px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
}

.about-right h3 {
  font-size: 24px;
  color: #005f88;
  margin-bottom: 20px;
}

.about-right ul {
  list-style: disc;
  padding-left: 20px;
  color: #444;
  font-size: 24px;
  line-height: 1.8;
}
.closing-words{
  font-style: italic;
  color: #555;
  line-height: 1.8;
  font-size: 32px;
  background-color: #f4f8fb;    
  padding: 40px 20px;    
}
@media screen and (max-width: 768px){
    .about-content {
    flex-direction: column; /* 讓左右欄改為上下排列，避免寬度溢出 */
  }
  
  .about-left,
  .about-right {
    min-width: auto;  /* 取消 min-width 限制 */
    width: 100%;      /* 佔滿容器寬度 */
    padding: 0px;/* 可適度調整padding */
  }
  .about-section {
  background-color: #f4f8fb;
  padding: 60px 0px;
  font-family: "Segoe UI", sans-serif;
}
}   
/*-----------------------------------------------------------------------------------------------------------------------------*/
.Serve span {
    font-size: 32px;           /* 設定文字大小 */
    color: royalblue;               /* 設定文字顏色 */   
}
.Serve{
    text-align: center;
    font-weight: 700; 
}
.business-card{
    font-weight: 700; 
    color: blue;
    position: relative;  /* 設定相對定位 */
    left: 60px;         /* 從原始位置向右移動 100px */
    font-size: 24px;
    
}
.abc a {
    text-decoration: none; /* 去掉底線 */
}
.contaller {
  display: flex;   /* 設置為 Flexbox */
  justify-content: space-between;
  align-items: center;       /* 垂直方向居中對齊 */
  gap: 20px;  
}
.contaller h1 {
    color:blue;
    margin-bottom: -4px
    
}
.right {
  display: flex;                /* 使用 Flexbox 排列 .phone 和 .line */
  gap: 20px;   
  top: 100px;                    /* 讓 .right-content 靠上 */
  right: 0;/* 設置 .phone 和 .line 之間的間距 */
}

/* .phone 和 .line 的樣式 */
.phone, .line {
  display: flex;
  align-items: center;
}
a {
      color: black; /* 將顏色設置為黑色 */
      text-decoration: none; /* 去掉下劃線 */
    }

ul {
  list-style-type: none;  /* 去除圓點 */
  padding-left: 0; /* 去除預設的左邊距 */
      font-size: 30px;
}
.contact  img{
    width: 35px; /* 圖標的大小 */
    height: 35px; /* 圖標的大小 */
    margin-right: 8px; /* 圖示與文字之間的間距 */

}
.contact {
    display: flex;                 /* 使用 flexbox 佈局 */
    justify-content: center;       /* 水平居中 */
    align-items: center;           /* 垂直居中 */
    font-size: 24px;               /* 文字大小 */
    color: #333;                   /* 文字顏色 */
    margin: 10px 0;                /* 可選，設定上下間距 */
}
.contact-group {
    display: flex;               /* 使用 Flexbox 讓子元素水平排列 */
    align-items: center;         /* 垂直居中對齊元素 */
    gap: 15px;  /* 在電話和 Line 之間添加間距 */
    justify-content: flex-end; 
}

/* 縮略圖區域 */

.ad-container {
  display: flex;
  justify-content: center; /* 使內容水平置中 */
  flex-direction: column; /* 使內容垂直排列 */
  align-items: center; /* 使內容垂直置中 */
  font-family: Arial, sans-serif; /* 可以自定義字型 */
}
.ad-monitor-0{
   font-weight: 700; /* 使文字加粗 */
  font-size: 36px; /* 可以自定義字型大小 */
  text-align: center; /* 使文字水平置中 */
  margin-bottom: 20px; /* 給上下留一些間距 */
}

.ad-monitor-a {
  display: flex;
  justify-content: center;
}

.ad-monitor {
  display: flex;
  flex-direction: row-reverse; /* 讓圖片在右，文字在左 */
  align-items: center; /* 讓文字和圖片垂直置中對齊 */
  gap: 20px; /* 讓文字與圖片之間有間距 */
}
.image-container {
 display: grid;
    grid-template-columns: 1fr 1fr;  /* 兩列 */
    grid-template-rows: 1fr 1fr;     /* 兩行 */
    gap: 5px;  /* 圖片之間的間距 */
    width: 400px; /* 整體圖片區域的大小 */
    height: 400px; /* 讓 4 張圖拼成一個完整正方形 *//* 圖片間的間距為0，讓它們拼接成一張大圖 */
}
.image-container img {
    width: 100%;  /* 讓小圖片填滿格子 */
    height: 100%;
    object-fit: cover; /* 確保圖片不變形 */
}


.image {
  width: 100%; /* 小圖寬度 */
  height: 100%; /* 小圖高度 */
  object-fit: cover;
}

.texts {
  display: flex;
  flex-direction: column;
  margin-left: 20px; /* 留下一些間距 */
}

.ad-monitor-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
}

.ad-monitor-items {
display: flex;
  flex-direction: column; 
}

.ad-monitor-items span {
    font-size: 20px;
    margin: 5px 0;
}


.process-1 {
    display: flex;            /* 使用彈性佈局 */
    flex-direction: column;   /* 讓內容垂直排列 */
    justify-content: center;  /* 垂直置中 */
    align-items: center;      /* 水平置中 */
    margin-bottom: 20px;      /* 每個過程步驟之間的間距 */
    text-align: center;  
    font-size: 28px; /* 文字居中 */
}

.arrow {
    font-size: 24px;          /* 調整箭頭的大小 */
    margin-top: 10px;         /* 為箭頭添加上方間距 */
}

.process-1:nth-child(3) .arrow {
    display: none; /* 隱藏第三個 .process-1 元素下方的箭頭 */
}
.car-system{
    font-size: 30px;
}
.car-system-1{
    font-size: 22px;
    display: flex;
    flex-direction: column; 
}
.car-systems img{
    width: 150px;
    height: 150px;
}
.car-systems{
    display: flex;
    align-items: center; /* 讓文本與圖片垂直對齊 */
    justify-content: space-between; /* 根據需要調整間距 */
}

#message {
    width: 100%;  /* 讓 textarea 寬度填滿整個欄位 */
    height: 100px; /* 設定高度 */
    resize: none; /* 禁止拉伸 textarea */
}
/*--------套膜用--------*/

.hero-section {
    background: url('hero-bg.jpg') center/cover no-repeat;
    padding: 100px 0;
}

.carousel img {
    height: 400px;
    object-fit: cover;
}
.transparent {
    opacity: 0.9; /* 50% 透明度 */
  }


.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.card img{
    height: 250px;
    width: 100%;
    object-fit: contain;
}


p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
    flex-shrink: 0;
}


@media (max-width: 768px) {
.card {
            width: 100%;
            margin-bottom: 20px;
            }
.card-container {
                flex-direction: column;
                align-items: center;
            }
        }


.customer p {
  margin: 0;
  font-size: 30px;
  line-height: 1.4;
  color: cornflowerblue;
}
.Process{
    text-align: center;
    font-size: 32px;
    color: blue;
}
@media screen and (max-width: 1024px) {
  .abc {
    justify-content: center;
  }
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .navbar {
    flex-wrap: wrap;
    padding: 10px 15px;
  }

  .logo img {
    width: 130px;
  }

  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    background-color: #004466;
    margin-top: 10px;
    padding: 10px 0;
    border-radius: 8px;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    text-align: center;
    margin: 8px 0;
  }
  .image {
    width: 90%;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 95%;
    margin-bottom: 30px;
  }
  

  input[type="text"],
  input[type="email"],
  textarea {
    min-width: 100%;
  }

  .submit-btn {
    max-width: 90%;
    font-size: 18px;
  }
}

@media screen and (max-width: 480px) {
  .logo img {
    width: 110px;
  }

  .nav-links li a {
    font-size: 14px;
  }

  .model {
    font-size: 22px;
  }

  .model-1 {
    font-size: 14px;
    max-width: 90%;
  }
}