[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;}

#top-hero{position: relative;}
.banner-text{position: relative; z-index: 1;}
.banner-text h2{width: 50%;}
.banner-canvas{position: absolute; left:0; top:0; width: 100%; height:500px; overflow: hidden; z-index:0;}
.banner-canvas img{object-fit: cover; width: 100%; height: 500px;}
.desktop-banner{display: block;}
.mobile-banner{display: none;}
@media screen and (max-width: 640px) {
.desktop-banner{display: none;}
.mobile-banner{display: block;}
}

.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;}


.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;}
.phoneImgCanvas {position: absolute; left: 0; height: 500px; overflow: hidden; width: 50% !important; display: flex; align-items: center;}

.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) {
.banner-text {position:absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 1rem; z-index: 1;}
.banner-text h2{width: 100%;}
.banner-title {padding-top: 5rem;}
#home-network .row {height: auto;}
.home-network-text{padding: 1rem; text-align: center;}
.phoneImgCanvas {position: relative; height: auto; width: 100% !important; margin-top: 2rem !important;}
.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;}
}