body{margin:0;background:#0f1830;color:#fff;overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang TC","Microsoft JhengHei",sans-serif;}
.semi-blod{font-weight:600;font-style:Semi Bold;line-height:20px;}
.regular{font-weight:400;font-style:Regular;line-height:20px;}
a{text-decoration:none;color:inherit}

.container{position: relative;width:100%;overflow:hidden;}
.wrap{display:flex;align-items:center;gap:40px;max-width:1400px;margin:0 auto;padding:30px 20px}
.wrap img{max-width:100%;height:auto;display:block}
.image2{flex:4;flex-basis:67%;}

/* header */
.header{background:linear-gradient(90deg, #009440 0%, #06CA5B 100%);position:sticky;top:0;z-index:50;height: 80px;box-shadow: 0px 4px 4px 0px #00000040;}
.header__inner{display:flex;align-items:center;padding:0px 40px;gap:34px;height:100%;margin: 0 auto;}
.header__left{display:flex;gap:40px;}
.main-logo{display:flex;align-items:center;}
.navigation-wrapper{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:1rem;}
.menu-list{display: flex; gap: 22px;}
.menu-list a{padding:10px 20px;border-radius:8px;}
.menu-list .active{background:#1B221E33;font-weight:600;}
.account-section{display:flex;gap:16px;height:40px;}
.account-section button{
  background:#D1FFE5;
  padding:0px 16px;
  border-radius:6px;
  box-shadow:0px 4px 4px 0px #00000040, inset 0px -2px 0px 0px #00BF5180;
  border:0;
  color: #0A4523;
  align-items: center;
  font-size: 1rem;
}
.account-section button:hover, .subscribe-container button:hover{font-weight:600;}

/* faq */
.faq{position: fixed;right: 3%;bottom: calc(8% + 79px);display: flex;flex-direction: column;gap: 15px; z-index: 0;opacity: 0;transition: opacity 0.2s ease;z-index: 0;  pointer-events: none;}
.faq.active{opacity: 1;pointer-events: auto;z-index: 2}
.outline-bg{box-shadow: 0px 4px 10px 0px #00000040;border: 12px solid #00C55580;border-radius: 20px;}
.faq-list{background: #D1FFE5;border-radius: 9px;padding: 1px 20px;}
.faq-row{padding-bottom: 10px;border-bottom: 1px solid #00C555;}
.faq-row>*{font-size: 1rem;}
.faq-row h2{color: #0A4523;margin: 2% 0;}
.faq-row span{color: #659F7E;}
.faq-row:nth-last-child(1){border-bottom: 0;}
#showFaqBtn{position: fixed;right: 3%;bottom: 8%;z-index: 1;background: #659F7E;border-radius: 50%;width: clamp(1px,15vw,4.125rem);height: clamp(1px,15vw,4.125rem);font-size: 1.2rem;font-weight: 600;border: 0;color: white;box-shadow: 0px -4px 0px 0px #016B2E40 inset;margin-left: auto;}
#showFaqBtn:hover:not(.active):not(.progress){
  background: #00C555;
  box-shadow: 0px -4px 0px 0px #016B2E40 inset;
}
#showFaqBtn.progress {
  background: #0A4523;
  box-shadow: 0px -4px 0px 0px #016B2E40 inset;
}
#showFaqBtn.active {
  background: #00C555;
  box-shadow: 0px -4px 0px 0px #016B2E40 inset;
}

/* 视频封面 */
#video-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.3) blur(2px);z-index:-1;}
.video-container{height: 850px;}
.video-container .title{font-size:2.5rem;text-shadow:0px 4px 0px #00000080;line-height:48px !important;margin:0;}
.video-container .text{
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 90%;
  margin: 0 auto;
  color: white; 
  text-align: center;
}
.video-container .descriptions{display:flex;flex-direction:column;gap:4px;color:#D1FFE5;font-size:1.5rem;line-height:30px;margin:40px 0px 80px 0px;}
.video-container .btn{background: #00C555;box-shadow: 0px 4px 4px 0px #00000040, inset 0px -4px 0px 0px #016B2E80;color:#ffffff;padding:20px 40px;border-radius:12px;font-size:1.375rem;transition: transform .5s ease, font-size .5s ease;}
.video-container .btn:hover{ transform: scale(1.1);}

/* team */
.team-container{background:#ffffff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;height:auto;padding:6.25rem 0;}
.team-container .title{color:#0A4523;font-size:2.5rem;line-height:40px;margin:0;}
.team-container .descriptions{display:flex;flex-direction:column;color:#659F7E;font-size:1.5rem;line-height: 32px;margin:3rem 0;}
.logos-grid{display: grid;grid-template-columns: repeat(11, 1fr);gap: 1vw;}
.logo-item{margin:0;}
.logo-item img{width: clamp(1px,17vw,11.7vh);height:clamp(1px,14vw,8.5vh);object-fit:contain;display:block;}

/* subscribe */
.subscribe-container{background:#1B221E;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:25px;height:auto;padding:6.25rem 0;}
.subscribe-container .subscribe-info{display:flex;flex-direction:column;}
.subscribe-container .title{font-size:2.5rem;line-height:40px;margin:0;}
.subscribe-container .description{color:#D1FFE5;font-size:1.5rem;margin:3rem 0 1.875rem 0; line-height: 32px;}
.table-wrapper{width: 80%;overflow-x: auto;}
table{border-collapse: collapse;table-layout: fixed;margin:0 auto;}
table tr{border-bottom: 1px solid #659F7E80}
table tr:last-child{border-bottom: none;}
td{color:#D1FFE5;font-size: 1.2rem;width:clamp(1px,27vw,30vh);padding:1.8vh;box-sizing: border-box;}
/* td,th{padding:0.8rem 0rem;min-width:18vw;} */
th{font-size:1.375rem;width:clamp(1px,27vw,30vh);padding:2.8vh;}
td img, th img{width:40px;}
th:nth-child(2){display: flex;flex-direction: column;gap: 9px;justify-content: center;align-items: center;}
table td:nth-child(2),table th:nth-child(2){background-color:#00C5551A;box-shadow: 0px 0px 30px 0px #00000033;}
.highlight{background: #00C55526!important;}
table th:nth-child(2){border-top-left-radius:10px;border-top-right-radius:10px;}
table tr:last-child td:nth-child(2) {border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.top-selection{background: #FF383E;border-radius:12px;font-size:1rem;display:flex;justify-content:center;align-items:center;padding:2px 12px;gap:1px;}
.top-selection img{width:20px;position:relative;top:2px;}
.subscribe-container button{font-size:1rem;width:90%;padding:0.35rem;background:#D1FFE5;border-radius:6px;box-shadow:0px 4px 4px 0px #00000040, inset 0px -2px 0px 0px #00BF5180;border:0;color: #0A4523;align-items: center;}
.remark{color:#7E9286;font-size:1.375rem;padding:0 1rem;line-height:27.2px;}

/* recommend */
.recommend-container{height:auto!important;background:#ffffff;}
.recommend-grid {display: flex;gap: 50px;padding:6rem 1rem;justify-content: center;flex-wrap: wrap;margin: 0 auto;}
.item {position: relative;height: 350px;width: 300px; border-radius: 12px;overflow: hidden;transition: outline 0.3s ease, box-shadow 0.3s ease;flex: 0 0 1 auto;}
.item:hover{outline: 4px solid #00C555;box-shadow: 0px 0px 10px 2px #00C555;}
.item::before {content: "";position: absolute;inset: 0;background-size: cover;background-position: center;background-repeat: no-repeat;transition: transform 1s ease, filter 1s ease;z-index: 0;border-radius: inherit;}
.item[style]::before {background-image: inherit;}
.item::before {filter: brightness(0.5);}
.item:hover::before {transform: scale(1.3);filter: brightness(1);}
.recommend-info {position: absolute;top: 17px;left: 17px;color: white;padding: 6px 10px;z-index: 1;}
.recommend-info .title {display: block;font-weight: bold;font-size: 1.375rem;}
.recommend-info .description {display: block;font-size: 1rem;color: #D1FFE5;}

/* carousel */
.carousel__track{display: flex;transition: transform 0.6s ease-in-out; width: 100%;position: relative;}
.carousel {position: relative;overflow: hidden;color: white;}
.tabs {position: absolute;top: 19%;left: 9%;display: flex;gap: 20px!important;z-index: 1;}
.slide {flex: 0 0 100%; height: 700px;background-size: cover;background-position: center;position: absolute;top: 0;left: 0;width: 100%;opacity: 0;transition: opacity 0.6s ease;pointer-events: none;}
.slide.active {opacity: 1;pointer-events: auto;position: relative; /* so it takes normal flow when active */}
.left-section {max-width: 65%;top: 28%;position: absolute;left: 9%;}
.text2 h2 {font-size: 1.5rem;margin-bottom: 10px;}
.text2 p {font-size: 1rem;margin-bottom: 38px;color: #D1FFE5;}
.logos img {height: 70px;width: 70px;margin-right: 10px;margin-bottom: 6px;object-fit: cover;border-radius: 50%;}
.carousel .tab{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;background: none;border:0;padding:4px 0px;color:#fff;font-size:1rem;cursor:pointer;filter: brightness(0.5);}
.carousel .tab.active {border-bottom: 3px solid white;filter: brightness(1);}
.web {position: absolute;right: 0%;top: 0%;width: 700px; height:700px;}

/* banner */
.banner-row{display: flex;justify-content: center;align-items: center;background: white;gap: 3vw;padding: 1rem 2rem;}
.banner-row img{width: 364px;}
.banner h2{color: #1B221E;font-size: 2.5rem;margin-bottom: 0;margin-bottom:0;font-weight: 600;}
.banner p{color: #0A4523;margin:1.3rem 0 2rem 0;font-size: 1.375rem;}
.banner .btn{text-align:center;background: #00C555;box-shadow: 0px 4px 4px 0px #00000040, inset 0px -4px 0px 0px #016B2E80;color:#ffffff;padding:20px 40px;border-radius:12px;font-size:1.375rem;transition: transform .5s ease, font-size .5s ease;line-height: 22.4px;}
.banner .btn:hover{ transform: scale(1.1);}


/* footer */
.footer{background:#1B221E;border-top:1px solid rgba(255,255,255,.2);padding:2.5rem 0;text-align:center;color:rgba(255,255,255,.7)}
.footer .container{width: 80%;margin: 0 auto;display: flex;flex-direction: column;}
.device-info h2{color: #ffffff;font-size: 2.5rem;}
.device-info p{color:#D1FFE5;font-size:1.5rem;margin: 1rem 0 3rem 0;}
.footer__links{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;color:#D1FFE5;}
.device-list{display: flex;flex-wrap: wrap;gap: 32px;justify-content: center;max-width: 1140px;margin: 0 auto;}
.device-list img{width:120px;flex: 0 0 auto;}
.bottom_row{display: flex;justify-content: space-between;margin-top: 83px; font-size: 1rem;}
.bottom_row span{color:#7E9286;}

@media (max-width: 1024px){
  .web {
    display: none;
  }
}


/* 手機版 RWD */
@media (max-width: 768px){

  /* Header */
  .header {
    position: static;
    height: auto;
  }
  
  .header__inner{ 
    flex-direction: column; 
    padding: 10px 0px;
    gap: 20px;
    width: 95%;
  }

  .navigation-wrapper{
    font-size: 1.1rem;
    gap: 13px;
  }

  .menu-list{
    gap: 0px;
  }

  .menu-list a{
    padding: 11px 9px;
  }

  .account-section{
    gap: 8px;
    height: 36px;
  }

  .account-section button{
    font-size: 1rem;
    padding: 0 8px;
  }

  /* 第一页 视频封面 */
  .video-container .title,
  .team-container .title,
  .subscribe-container .title,
  .banner h2,
  .device-info h2{
    font-size: 2rem;
  }
  .video-container .descriptions,
  .team-container .descriptions,
  .subscribe-container .description,
  .remark,
  .banner p,
  .banner .btn
  .device-info p{
    font-size: 1.2rem;
  }

  /* 第二頁  team */
  .logos-grid{
    width: 80%;
    overflow-x: auto;
  }

  /* 第三页 subscribe */
  .table-wrapper {
    width: 80%;
  }
  td,th {
    min-width: 210px;
    padding: 1rem 0;
  }

  /* 輪播 slide */
  .tabs {
    top: 14%;
  }
  .left-section {
    top: 23%;
  }


  /* banner */
  .banner-row{
    flex-direction: column;
    padding: 0rem 1rem 4rem 1rem;
    gap: 0;
  }
  .banner .text{
    margin-top: -100px;
  }
  .banner p,
  .banner h2{
    text-align: center;
  }

  /* footer */
  .bottom_row{
    flex-direction: column;
    gap: 15px;
  }
  .footer__links{
    gap: 15px;
  }

}