[id*="custom-html"]{padding:0 !important; position:relative;}
[class*="text-editor"] h3{display: none;}
.line-break {display: block;}
.text-nowrap {white-space: nowrap;}
.text-show{display:block !important;}
.text-light{color: #fff!important;}
.text-dark{color: #404040 !important;}
.text-blue{color: #00b2ff;}
a.text-dark:before{background-color: #404040 !important;}
.text-normal{font-weight: normal !important;}
.small-font {font-size: 15px;}
[class*="top-hero"] {padding: 0 !important;}
[class*="top-hero"] .row{height: 500px; align-items: center;}
[id*="hero"] h2, [id*="auto-frame"] h2{display: none;}
[id*="auto-frame"] ul, [id*="auto-frame"] ul li{list-style-type:disc !important; margin-left: 10px !important;}
.m-block{display: none;}
.text-cover {background:rgba(255, 255, 255, 0.7); padding: 1rem;}
.zyx-paragraph--two-col-image img {width: auto !important;}

.second-nav-wrapper {width: 100%; background-color: #000;}
nav.second-nav {background-color: #000; width: 100%; overflow: hidden; padding: 14px 0; position:relative; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; z-index: 1000;}
.navScrolled {position: fixed !important; top: 0; left: 0; width: 100%; z-index: 9999;}
nav.second-nav ul {width: max-content; margin:0 auto; text-align: center; list-style: none; padding: 0;}
nav.second-nav ul li {display: inline-block; padding: 0 5px;}
nav.second-nav ul li a {color: #fff; border-radius: 50px; padding: 5px 25px; display: inline-block; font-weight:normal; text-decoration: none; transition: background-color 0.3s;}
nav.second-nav ul li a:hover:before, .second-nav ul li a:before {text-decoration: none;    height: 0 !important;}
nav.second-nav ul li.active a, nav.second-nav ul li a:hover {background-color: #fff;  color:#000; text-decoration: none;}
nav.second-nav ul li a.border-adjusted, nav.second-nav ul li a.color-adjusted{color: #fff !important; background-color: transparent!important;}
nav.second-nav ul li.active a.color-adjusted, nav.second-nav ul li.active a.border-adjusted, nav.second-nav ul li a.color-adjusted:hover, nav.second-nav ul li a.border-adjusted:hover{color: #000 !important; background-color: #fff!important;}
@media screen and (max-width: 992px) {
nav.second-nav {overflow-x: scroll; scrollbar-color: rgb(255 255 255) #fff; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none;}
}
section[id] {scroll-margin-top: 0 !important;}
body.is-second-nav-active .zyxel-header {transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s ease;}

#top-hero{padding: 0 !important;}
#top-hero .row{height: 500px; align-items: center;}
.hero-container {position: relative; display: flex; align-items: center;}
.layer {position: absolute; transition: transform 0.1s ease-out;  will-change: transform;}
.layer-float {animation: float 4s ease-in-out infinite;}
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.accordion-container {width: 100%; margin: 0 auto;}
.accordion-item {overflow: hidden; padding: 0; margin-bottom: 1rem;}
.accordion-header {background-color: #00b2ff; color: #fff; cursor: pointer; padding: 10px; margin: 0 !important; width: 100%; border: none; text-align: left; outline: none; transition: background-color 0.3s ease; display: flex; justify-content: space-between; align-items: center;}
.accordion-header:focus{background-color: #00b2ff!important;}
.accordion-header:hover {background-color: #00b2ff;}
.accordion-content {display: grid; grid-template-rows: 0fr; /* 初始高度為 0 */ transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1); background-color: #fff; font-size: 16px; line-height: 1.6; color: #444 !important;}
.accordion-content-inner {overflow: hidden; padding: 0 1rem; transition: padding 0.4s ease;}
.accordion-item.active .accordion-content {grid-template-rows: 1fr;}
.accordion-item.active .accordion-content-inner {padding: 1rem;}
.accordion-content p {margin-bottom: 0 !important; font-size: 16px; line-height: 1.6; color: #444 !important;}
.arrow-icon {display: inline-block; transform: rotate(0deg); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.accordion-item.active .arrow-icon {transform: rotate(180deg);}

/* 容器基本設定 */
#home-network{padding:0 !important; overflow: hidden;}
#home-network .row{height: 500px; align-items: center;}
#home-network .col-md-5{width:100%;}
#home-network h2 {display: none;}
.home-network-text {position: relative; padding-left: 3rem; z-index: 15; text-align:left;}
/* 容器基本設定 */
.phone-canvas {position: absolute; left: 0; top: 3%; width: 50% !important; z-index: 10;}
.phone-wrapper {position: relative; width: 100%; height: 500px;}
.phone {position: absolute; width: 100%; height: auto; left: 0; top: 0; transition: all 1.4s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; will-change: transform, opacity;}
/* --- 初始隱藏狀態 (從左側扇形展開) --- */

/* 最底層：位移較短，旋轉角度小 */
.phone-bottom { 
  transform: translate(-100px, 150px) rotate(-15deg) scale(0.9);
  z-index: 1;
}

/* 中間層：位移中等 */
.phone-middle { 
  transform: translate(-250px, 80px) rotate(-25deg) scale(0.85);
  z-index: 2;
  transition-delay: 0.15s;
}

/* 最頂層：位移最遠，角度最斜 */
.phone-top { 
  transform: translate(-400px, 0px) rotate(-35deg) scale(0.8);
  z-index: 3;
  transition-delay: 0.3s;
}

/* --- 進入畫面後的觸發狀態 (.is-visible) --- */

/* 這裡的 translate 數值是為了微調三隻手機疊加後的相對位置 */
.is-visible .phone-bottom {
  opacity: 1;
  transform: translate(0, 100px) rotate(0deg) scale(1);
}

.is-visible .phone-middle {
  opacity: 1;
  transform: translate(30px, 50px) rotate(0deg) scale(1);
}

.is-visible .phone-top {
  opacity: 1;
  transform: translate(60px, 0) rotate(0deg) scale(1);
}

/* 啟動狀態 */
.phone-wrapper.is-visible .phone {
  opacity: 1;
}

.feature-canvas h6, .feature-canvas p{font-size: 1rem !important;}
#app .col-md-5{width: 100%;}
#app h2{display: none;}
.zyxelone-link {display: flex; flex-direction: column;}
.zyxelone-link a::before{background-color: transparent !important;}
.googleplay-app {margin-top: 1rem;}

#myiframe {width: 100%; min-height: 600px; border: none; display: block; max-height: none !important;}

@media (max-width: 991px) {
    #myiframe {overflow: hidden !important; height: auto;}
}

@media (max-width: 500px) {
#top-hero{overflow:hidden;}
.hero-container {margin-bottom: 5rem;}
.phone-canvas {position: relative; width: 100% !important; margin-left: -6%; padding-top: 2rem;}
.phone-wrapper {width: 80%; height: 300px; margin: 0 auto;}
#home-network .row {height: auto;}
.home-network-text{padding: 1rem; text-align: center;}
.app-img {width: 40%; margin: 0 auto;}
.zyxelone-link {width: 80%; margin: 0 auto; flex-direction: row; padding-bottom: 5rem; gap: 1rem;}
.feature-box {margin-bottom: 2rem;}        
.googleplay-app {margin-top: 0;}
}