@charset "UTF-8";
/* CSS Document */


    /* === Reset & Base === */
    
    
    a{color:#0066cc;text-decoration:none;}a:hover{text-decoration:underline;}
    .container{width:100%;max-width:1200px;margin:0 auto;}

    /* === Section Headers === */
    .section-header{text-align:center;margin-bottom:40px;margin-top:80px;}
    .section-header h2{font-size:28px;font-weight:700;margin-bottom:10px;color:#0a2342;}
    .section-header .section-tagline{font-size:16px;color:#5b7080;}

    /* === Hero === */
    .hero-uav{position:relative;overflow:hidden;color:#fff;text-align:left;}
    .hero-uav__bg img{width:100%;height:auto;object-fit:cover;}
    .hero-uav__content{position:absolute;top:50%;left:8%;transform:translateY(-50%);max-width:600px;}
    .hero-uav__title{font-size:42px;font-weight:800;margin:0 0 10px;text-shadow:0 2px 4px rgba(0,0,0,0.3);}
    .hero-uav__subtitle{font-size:20px;font-weight:400;color:#f2f2f2;line-height:1.4;}

    /* === Overview === */
    .overview{padding:60px 0;text-align:center;color:#333; margin-bottom:40px;}
    .overview p{max-width:900px;margin:0 auto 20px;font-size:18px;color:#555;}

    /* === Products === */
    .products{background-color:#f6f8fa;padding:80px 0;}
    .products__image{text-align:center;margin-bottom:40px;}
    .product-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:0 30px 30px 30px;}
    .product-card{background:#fff;border-radius:8px;padding:25px 15px;box-shadow:0 2px 10px rgba(0,0,0,0.06);transition:transform .2s ease;}
    .product-card:hover{transform:translateY(-5px);}
    .product-card__title a{font-size:22px;font-weight:700;color:#003366;}
    .product-card__subtitle{color:#5b7080;font-weight:500;margin-bottom:10px;margin-top:5px;}
    .product-card__features{margin-left:20px;color:#444;}
	.product-card__features li {list-style:disc; margin-left:10px;}

/*如要改回來，直接刪除即可*/
.product-grid {
  display: flex;
  flex-wrap: wrap;
}

.product-card {
  width: 31.4%;
}

@media (max-width: 1200px) {
  .product-card {
    width: 31%;
  }
}

@media (max-width: 1024px) {
  .product-card {
    width: 47%;
  }
}

@media (max-width: 768px) {
  .product-grid .product-card {
    width: 100%;
  }
}

    /* === Applications === */
    .applications{background-color:#f9fbfd; padding:80px 0;}
    .application-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:0 30px 80px 30px;}
    .application-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.05);}
    .application-card__title{font-size:20px;font-weight:700;color:#003366;margin:20px;}
    .application-card__text{margin:0 20px 30px;color:#444;}

    /* === Architecture === */
    .architecture{padding:80px 0;background-color:#fff;}
    .architecture__image{text-align:center; margin-bottom:30px;}
    .architecture__bullets{max-width:800px;margin:0 auto;list-style:disc;color:#444;font-size:17px;}

    /* === CTA === */
    .cta-block{background: linear-gradient(120deg, #0F172A, #1e3a8a);color:#fff;padding:80px 0;text-align:center;}
    .cta-block__title{font-size:28px;font-weight:700;margin-bottom:15px;}
    .cta-block__text{font-size:18px;margin-bottom:30px;}
    .cta-block__button{background:#0077cc;color:#fff;font-size:18px;font-weight:600;padding:12px 30px;border-radius:4px;text-decoration:none;transition:background .2s ease;}
    .cta-block__button:hover{background:#005fa3;}

  .uav-camera-compare {
    padding: 0;
	  margin-bottom:0px;
  }
  .uav-camera-compare .section-header h2 {
    font-size: 28px;
    color: #0A2342;
    text-align: center;
    margin-bottom: 	0px;
	  font-weight: bold;
  }
  .uav-camera-compare .section-tagline {
    text-align: center;
    color: #5b7080;
    margin-bottom: 40px;
  }

  .uav-table-wrapper { overflow-x: auto; }
  .uav-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 16px;
  }
  .uav-table th, .uav-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
    text-align: left;
  }
  .uav-table thead {
    background: #f9fbfd;
  }
  .uav-table th {
    color: #0A2342;
    font-weight: 600;
  }

  .model-cell {
    width: 280px;
    text-align: center;
  }
  .model-img {
    width: 220px;
    border: 1px solid #0A2342;
    border-radius: 6px;
    background: #eef3f8;
    display: block;
    margin: 0 auto 10px;
  }
  .model-name {
    font-weight: 700;
    color: #0A2342;
    font-size: 18px;
    margin: 0 0 0 50px;
  }

  .feature-icon {
    height: auto;
    margin: 10px 0;
    display: block;
  }

  @media (max-width: 768px) {
    .uav-table { font-size: 14px; }
    .uav-table th, .uav-table td { padding: 12px 14px;}
	  .model-img { width: 280px; border:none;}
    .feature-icon { width: 100%; margin: 6px auto; }
  }
		/* === Responsive === */
    @media(max-width:1024px){
      .hero-uav__content{max-width:80%;left:6%;}
      .hero-uav__title{font-size:34px;}
      .hero-uav__subtitle{font-size:18px;}
      .product-grid,.application-grid{grid-template-columns:1fr;}
    }
	
    @media(max-width:768px){
      .hero-uav__content{position:absolute;bottom:10%;transform:none;left:5%;}
      .hero-uav__title{font-size:28px;line-height:1.2;}
      .hero-uav__subtitle{font-size:16px;}
      .products,.vision-system,.applications,.architecture,.cta-block{padding:60px 0;}
      .section-header h2{font-size:24px;}
      .cta-block__title{font-size:22px;}
      .cta-block__text{font-size:16px;}
    }
    @media(max-width:480px){
      .hero-uav__title{font-size:22px;}
      .hero-uav__subtitle{font-size:14px;}
		.product-grid{margin:0;}
		.application-grid{margin:0;}
		.product-card{padding:0 0 20px 10px;}
		.products{padding:0 0 30px 0;}
		.overview{padding:30px 0;margin-bottom:0;}
		.applications{padding:0 0 30px 0;}
		.section-header{margin-top:30px;}
		.architecture{padding:0 0 30px 0;}
		 .uav-camera-compare {margin-bottom:30px;}
		.product-card__features{margin-right:20px;}
		.product-card__subtitle{ margin-right:20px;}
    }



/* --------- 手機版卡片模式 --------- */
		
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scroll: touch; /* 手機滑動更順 */
	border:none;
}

.camera-specs th,
.camera-specs td {
  white-space: nowrap; /* 避免內容自動換行導致欄位變得非常高 */
  padding: 0.75rem 0.5rem; /* 手機略小 padding */
  font-size: 15px; /* 若必要可稍縮字體以提升可讀性 */
}

		
@media (max-width: 767px) {
  .camera-specs,
  .camera-specs thead,
  .camera-specs tbody,
  .camera-specs th,
  .camera-specs td,
  .camera-specs tr {
    display: block;
  }
  table {
    border: none !important;
  }
  table td {
    border: none !important;
  }
  .camera-specs thead {
    display: none;
  }
  .camera-specs tr {
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.75rem;
    background: #fff;
  }
  .camera-specs td {
    padding: 0.4rem 0;
	  border:none;
    text-align: left;
	  white-space: normal !important;
	  line-height: 1.4;
  }
  .camera-specs td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    color: #333;
  }
  .camera-specs td img {
    max-width: 300px;
    height: auto;
  }
		}


  /* ===== ECM Comparison (Lightweight, Brand-neutral) ===== */
  .cmp { padding: 28px 0; margin-bottom:30px; }
  .cmp-wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
  .cmp-h2 { font-size: 24px; line-height: 1.2; margin: 0 0 8px; text-align: center;}
  .cmp-lead {
  text-align: center;
  margin: 0 auto 18px;
  opacity: .85;
}
  .cmp-h3 { font-size: 16px; margin: 22px 0 10px; }

  .cmp-table {
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.04);
    margin-bottom: 12px;
  }

  .cmp-table table { width: 100%; border-collapse: collapse; }
  .cmp-table thead th {
    text-align: left;
    font-size: 13px;
    padding: 12px 14px;
    background: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.08);
    white-space: nowrap;
  }

  .cmp-table tbody th,
  .cmp-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    vertical-align: top;
  }
		  
  .cmp-table tbody tr:last-child th,
  .cmp-table tbody tr:last-child td { border-bottom: 0; }

  .cmp-table tbody th { width: 34%; font-weight: 600; }
  .cmp-table tbody td { width: 33%; }

  /* ===== Mobile: stack cells, no horizontal scroll, no blow-out ===== */
  @media (max-width: 820px) {
    .cmp-h2 { font-size: 22px; }

    .cmp-table table, .cmp-table thead, .cmp-table tbody,
    .cmp-table th, .cmp-table td, .cmp-table tr { display: block; }

    .cmp-table thead { display: none; }

    .cmp-table tbody tr {
      padding: 10px 0;
      border-bottom: 1px solid rgba(0,0,0,.06);
    }
    .cmp-table tbody tr:last-child { border-bottom: 0; }

    .cmp-table tbody th {
      width: 100%;
      padding: 10px 14px 6px;
      font-size: 14px;
      background: rgba(0,0,0,.02);
    }

    .cmp-table tbody td {
      width: 100%;
      padding: 8px 14px 10px;
      border-bottom: 0;
    }

    .cmp-table tbody td::before {
      content: attr(data-label);
      display: block;
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
      opacity: .7;
      margin-bottom: 4px;
    }
  }
.cmp-table table {
    width: 100%;
    table-layout: fixed;
}

.cmp-table th,
.cmp-table td {
    width: 25%;
    padding: 22px 18px;
    word-break: normal;
    overflow-wrap: normal;
}

.cmp-table th:first-child,
.cmp-table td:first-child {
    width: 25%;
}