.features-and-functions{height:800px; position:relative; background:url('https://service-provider.zyxel.com/sites/default/files/2020-09/ies4204_benefits04_oamp-triple-play_bg.jpg') no-repeat center center; background-size:cover;}
.triple-play-cnt{position: absolute; width: 35%; padding: 3%; background: rgba(0,0,0,0.65); color:#fff;}
.triple-play-cnt h4, .triple-play-cnt p{margin-top:0;}
.features{top:0; left:10%;}
.functions{bottom:0; right:10%;}
.small-text{font-size:14px;}
.bold{font-weight:500;}
.mt30{margin-top:30px;}
#hero, #hero--2, #custom-html{margin-top:10px;}
.plus-icon .material-icons-round{font-size: 3rem;}
.zyx-tab-content.zyx-product-benefits {padding-top: 0 !important;}
.desktop-block{display: block;}
.mobile-block{display: none;}
    
.text-show{display: block !important;}
[id*="custom-html"],.zyx-tab-content.zyx-product-benefits{padding:0!important}
[id*="hero"] .col-md-5{width:100%}
.linecards-container{width:100%}
.linecard-headers{display:flex;justify-content:center;margin-bottom:1rem}
.linecard-header{padding:10px;margin:0 1rem;cursor:pointer;background-color:#fff;color:#555;border:1px solid #555;border-radius:15px;transition:background-color .3s,color .3s;text-align:center}
.linecard-header:hover{background-color:#fff}
.linecard-header.active, .linecard-header button:focus{color:#00b2ff; border:1px solid #00b2ff; background-color: #fff!important;}
.linecard-content[hidden]{display:none!important}
.dropdown{position:relative;width:100%;max-width:300px;margin:0 0 1rem 0}
.dropbtn{background-color:#fff!important;color:#555;padding:1rem;font-size:1rem;border:1px solid #555;border-radius:15px;cursor:pointer;width:100%;text-align:left;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center}
.dropbtn[aria-expanded="true"]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:#00b2ff}
.dropbtn .material-icons-round{font-size:1.5rem;transition:transform .3s ease}
.dropbtn[aria-expanded="true"] .material-icons-round{transform:rotate(180deg)}
.dropdown-lineCard{display:none;position:absolute;background-color:#fff;min-width:100%;z-index:100;border:1px solid #00b2ff;border-top:none;border-bottom-left-radius:8px;border-bottom-right-radius:8px;max-height:200px;overflow-y:auto;padding:1rem}
.dropdown-lineCard.show{display:block}
.dropdown-item{color:black;padding:0;text-decoration:none;display:block;cursor:pointer;text-align:left}
.dropdown-item:last-child{border-bottom:none}
.dropdown-item:hover,.dropdown-item:focus{background-color:#fff;color:#00b2ff;outline:none}
.dropdown-item.active{background-color:#fff;color:#00b2ff}
.line-card-related-products{border:1px solid #ccc; border-radius:15px; padding:1rem; position:relative;}
.line-card-related-products h5{margin-top: 0 !important;}
.line-card-related-products img{width: 70%;margin: 0 auto;display: block;}
.line-card-related-products:hover .overlay{opacity:1;}
.line-card-related-products .overlay{position: absolute; padding:1rem; height:100%; width: 100%; left: 0; top: 0;opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s;  -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; color:#252525;background: #fff; border-radius: 15px;}
.line-card-related-products .overlay .btn{margin:0 !important;}
.relate-products-text {font-size: 16px;font-weight: 600;color: #000;}
.slideshow-container {position: relative; min-height: 300px;}
.slide {display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.slide img {width: 100%; height: 100%; object-fit: cover;}
/* Indicators */
.slideshow-indicators {text-align: center; padding: 20px 0;}
.slideshow-indicators .dot {cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; border: none; box-shadow: 0 0 0 2px transparent;}
.slideshow-indicators .dot:hover, .slideshow-indicators .dot.active {background-color: #000; width: 17px; height: 17px;}

/* WCAG: 確保焦點可見性 */
.slideshow-indicators .dot:focus {outline: 2px solid #0056b3; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.5);}

/* Fade animation */
.fade {animation-duration: 1.5s;}

#solution-brief {padding-bottom: 0 !important;}
#solution-brief h3{display: none;}
.feature-list {margin-left: 1rem;}
.feature-list li{list-style: disc!important;}

#lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:1000;justify-content:center;align-items:center}
#lightbox-content{background-color:#fff;padding:10px;max-width:100%;width:50%;text-align:center;max-height:90%;position:relative;overflow-y:auto;overflow-x:hidden}
.close-btn{position:absolute;right:10px;top:10px}
#close-lightbox{cursor:pointer;font-size:20px;width:30px;height:30px;color:#444;background:#fff;border-radius:50%;border:2px solid #444;display:flex;justify-content:center;align-items:center}

#path-to-10g h3{display: none;}

#wcag-panel{display:none}
#wcag-panel.active{display:block}


@media (max-width:1100px){
    #lightbox-content{width:85%}
}

@media (max-width:768px){
    .desktop-block{display:none}
    .mobile-block{display:block}
}



@media (max-width: 1440px){
	.features-and-functions {height: 600px;}
}

@media (max-width:1100px){
    #lightbox-content{width:85%}
	.triple-play-cnt{width:70%;}
	.features{left:0;}
	.functions{right:0;}
}

@media (max-width: 800px){
	.triple-play-cnt{width:90%;}
}

@media (max-width:768px){
    .desktop-block{display:none}
    .mobile-block{display:block}
}


@media (max-width: 500px){
	.features-and-functions{height:700px;}
	.line-card-features{position:relative;}
    .desktop-block{display: none;}
    .mobile-block{display: block;}
    .slideshow-container {min-height: 350px;}

}

@media (max-width: 400px){
	.features-and-functions{height:800px;}
    .slideshow-container {min-height: 380px;}
}
