/*Slider banner*/
[id*="custom-html"], [id*="divide-line"] {padding:0 !important; position:relative;}
[id*="hero"] h2, #customer-story h2, #contact-us h3{display: none;}
[id*="hero"] .col-md-5, #customer-story .col-md-5{width: 100%;}
.video-slider-wrapper { position: relative; overflow: hidden; width: 100%; height: 500px; }
.video-slider-container { width: 100%; height: 100%; overflow: hidden; }
.video-slider { display: flex; transition: transform 0.8s ease; height: 100%; touch-action: pan-y; /* 允許垂直滑動 */ cursor: grab; user-select: none;}
.video-slide { flex: 0 0 100%; width: 100%; height: 500px; padding: 0; text-align: center; background: #fff; position: relative; display: flex; flex-direction: column; justify-content: center;   align-items: center; overflow: hidden;}
.video-slide picture, .video-slide img, .video-slide video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.video-slider-wrapper .nav { position: absolute; top: 50%; transform: translateY(-50%); transition: opacity 0.3s ease; color: #fff; background: transparent; border: none; cursor: pointer; z-index: 9; }
.video-slider-wrapper .nav[style*="display: none"] {opacity: 0; pointer-events: none;}
.video-slider-wrapper .nav i{font-size: 5rem;}
.video-slider-wrapper .nav.prev { left: 0; }
.video-slider-wrapper .nav.next { right: 0; }
.video-slide .btn i { line-height: 0; vertical-align: middle; }
.bannerCnt { position: relative; width: 100%; z-index: 1; }
.bannerCnt > .container.layout-max-width {display: flex; justify-content: space-between; align-items: center; height: 500px;}
.bannerRow-left, .bannerRow-right, .bannerRow-center{height: 500px; align-items: center;}
.bannerRow-left, .bannerRow-right {display: flex; width: 70%;}
.bannerRow-left.banner-telekom {width: auto;}
.bannerRow-left {justify-content: flex-start;}
.bannerRow-right {justify-content: flex-end;}
.bannerRow-center {justify-content: center; display: flex; margin: auto;}
.popup-homepage-video {display: none; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 1050;}
.popup-homepage-video .homepage-video {margin: 0 auto; width: 71vw; height: 40vw; text-align: center; max-height: calc(100vh - 60px);}
.popup-homepage-video .close {position: absolute; border: 0; outline: none; cursor: pointer; background: none; font-size: 50px; z-index: 1; top: 0; right: 1%; color: #fff; opacity: 1;  margin: 0; padding: 0;}
.show { display: flex !important; }
.originalImg { width: auto!important; height: auto!important; position: relative!important; }
.play-btn i { vertical-align: middle; }
.desktop-only {display: flex;}
.mobile-only {display: none;}
.text-show { display: block!important; }
.text-light { color: #fff; }
.text-dark{color:#404040 !important;}
.text-blue{color: #00b2ff;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center; margin:0 auto; left:34%;}
.mContent{display:none;}
.dContent{display:block;}
img.event-logo{width:40%;}
.text-light .zyx-paragraph__cta a:before {background-color: #fff !important;}
.bg-white{background: #fff;}
.light-grey-bg{background: #efefef;}
.transparent-white{background: rgba(255, 255, 255, 0.7);}
.cs-logo img{width: 140px;}

/*Slick slides*/
.slider-wrapper {width: 100%; height: 500px; position: relative;}
.slide {float: left; position: absolute; width: 100%; height: 100%; opacity: 0;	transition: opacity 1s linear;}
.slider-wrapper > .slide:first-child {opacity: 1;}

#myiframe {height:100vh;}
#categories {padding: 0 !important;}
#categories h3{display: none;}
#contact-us, #fiber-for-central-office, #fiber-for-subscriber-homes, #copper, #switches{padding-top: 0 !important;}
[id*="divide-line"] h3{display: none;}

@media (max-width: 800px) {
    .desktop-only {display: none;}
    .mobile-only {display: flex; position: absolute; z-index: 1;}
    .video-slider-wrapper, .video-slide, .video-slider-container {height: 500px;}
    .bannerCnt > .container.layout-max-width {flex-direction: column; align-items: flex-start; justify-content: center;}
    .bannerRow-left, .bannerRow-right, .bannerRow-center {width: 100%; justify-content: flex-start; margin-bottom: 1rem; height: auto;}
}


@media (max-width: 640px){
	.dContent{display:none;}
	.mContent{display:block;}
    .originalImg {width: 150px !important;}
    .transparent-white {margin-bottom: 1rem;}
    .video-slider-wrapper .nav i{font-size: 2rem;}
    .video-slider-wrapper .nav {top: auto; bottom: 0; transform: translate(0, 0);}
}