#top-hero {padding: 0 !important;}
#top-hero .row{height: 500px; align-items: center;}
#top-hero h1{display: none;}
.top-header-canvas {position:relative; height:500px; overflow:hidden; z-index:0;}
.top-header-canvas video {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; overflow: hidden;}
.top-header-canvas .d-flex {height: 500px;}
.top-header-canvas .banner-title{color: #fff; position: relative; width: 50%; z-index: 1;}
.bold{font-weight:600;}
.pb10{padding-bottom:10px;}
.pt10{padding-top:10px;}
.mt20{margin-top:2rem;}
.small-text{font-size:15px;}
.text-center{text-align:center !important;}
.text-blue{color:#00b2ff;}
.text-white{color:#fff !important;}
.text-show{display:block !important;}
.text-light{color: #fff !important;}
.bg-dark-blue{background: #002855;}
[id*="custom-html"]{padding:0 !important; position:relative;}
.zyx-paragraph.zyx-light-font .btn--inverted {color: #fff !important;}
.zyx-paragraph__cta a {margin-right: 0 !important;}
.zyx-paragraph__cta a span {vertical-align: middle;}

#fiber-solution-section h3{display: none; margin-top: 0;}
.solution-highlights {width: 100%;}
.fiber-solution-canvas .col-6 {width: 49%;}
.solution-highlights .img-box{height: 300px; width: 100%; overflow: hidden;}
.solution-highlights .img-box img{object-fit: cover; width: 100%; height: 300px;}
.solution-highlights {position: relative; height: 300px; display: flex; align-items: center;}
.solution-highlights .desc {position: absolute; width: 100%; text-align: center; z-index: 1; padding: 0 1rem;}

#product-portfolio h3{display:none;}
#product-portfolio .product-box{background:#fff;box-shadow: #888 0px 1px 4px 0;transition: transform .5s ease; position:relative; padding:20px; display:block; min-height: 250px;}
#product-portfolio .product-box:before{background-color:transparent;}
#product-portfolio .product-box h5{margin-top:0 !important;}
#product-portfolio .product-box p{font-size: 16px; margin-bottom: 0; min-height: 130px;}
#product-portfolio .col-3{width: 24%;}
.arrowDown{position:relative; margin-top: 3rem; padding-bottom: 3rem;}
.arrowDown div {position: absolute; left: 0; right: 0; margin: auto; width: 24px; height: 24px; border-left: 3px solid #222; border-bottom: 3px solid #222; -webkit-transform: rotate(-45deg);  transform: rotate(-45deg); -webkit-animation: sdb05 1.5s infinite; animation: sdb05 1.5s infinite; box-sizing: border-box;}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}

.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: 50%;}
.bannerRow-left {justify-content: flex-start;}
.bannerRow-right {justify-content: flex-end; padding: 0 3rem;}
.bannerRow-center {justify-content: center; display: flex; margin: auto;}
.bannerRow-left img {width: 50%;}
.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;}
.cs-logo {background: #fff; border-radius: 15px; width: 180px; overflow: hidden; height: 70px; display: flex; align-items: center; text-align: center;}
.cs-logo img {margin: 0 auto;}

@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: auto;}
	.bannerCnt > .container {padding: 0;}
    .bannerCnt > .container.layout-max-width {flex-direction: column; align-items: flex-start; justify-content: center; height: auto;}
    .bannerRow-left, .bannerRow-right, .bannerRow-center {width: 100%; justify-content: flex-start; position: relative;}
	.bannerRow-left {height: 300px;}
	.bannerRow-left img{width: 100%; height: 300px;}
	.bannerRow-right {height: 350px; align-items: center; padding:0 3rem;}
}

@media (max-width: 640px) {
    .video-slider-wrapper .nav i{font-size: 2rem;}
    .video-slider-wrapper .nav {top: auto; bottom: 0; transform: translate(0, 0);}
}

@media (max-width:1500px) {
	.slideText h2, .slideText p{width:80%;}
}

@media (max-width:1100px) {
    #product-portfolio .col-3 {width: 49%; margin-bottom: 10px;}
    .top-header-canvas .banner-title {width: 100%;}
    .fiber-solution-canvas .img-box{width: 100%; margin: auto;}
    .fiber-solution-canvas .col-6 {width: 100%; margin-bottom: 1.5rem;}
    #product-portfolio .product-box{min-height: auto;}
    .nav-button{position:absolute; top:25%; width:100%;}
}

@media (max-width:650px) {
	#product-portfolio .col-3{width:45%; margin-bottom:1rem;}
    #product-portfolio .product-box p {min-height: auto;}
	.swipe .nav i{font-size:50px;}
}

@media (max-width:500px) {
    #product-portfolio .col-3{width:90%; margin: 0 auto 1rem;}
}


/*Slick slides*/
.slick-dots,
.slick-next,
.slick-prev {
	position: absolute;
	display: block;
	padding: 0;
}

.slick-dots li button:before,
.slick-next:before,
.slick-prev:before {
	font-family: slick;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.slick-next,
.slick-prev {
	font-size: 0;
	line-height: 0;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px\9;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	cursor: pointer;
	color: transparent;
	border: none;
	outline: 0;
	background: 0 0;
}

.slick-next:focus,
.slick-next:hover,
.slick-prev:focus,
.slick-prev:hover {
	color: transparent;
	outline: 0;
	background: 0 0;
}

.slick-next:focus:before,
.slick-next:hover:before,
.slick-prev:focus:before,
.slick-prev:hover:before {
	opacity: 1;
}

.slick-next.slick-disabled:before,
.slick-prev.slick-disabled:before {
	opacity: .25;
}

.slick-next:before,
.slick-prev:before {
	font-size: 20px;
	line-height: 1;
	opacity: .75;
	color: #fff;
}

.slick-prev {
	left: -25px;
}

[dir=rtl] .slick-prev {
	right: -25px;
	left: auto;
}

.slick-prev:before {
	content: '←';
}

.slick-next:before,
[dir=rtl] .slick-prev:before {
	content: '→';
}

.slick-next {
	right: -25px;
}

[dir=rtl] .slick-next {
	right: auto;
	left: -25px;
}

[dir=rtl] .slick-next:before {
	content: '←'
}

.slick-slider {
	margin-bottom: 30px;
}

.slick-dots {
	bottom: -45px;
	width: 100%;
	list-style: none;
	text-align: center;
}

.slick-dots li {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 5px;
	padding: 0;
	cursor: pointer;
}

.slick-dots li button {
	font-size: 0;
	line-height: 0;
	display: block;
	width: 20px;
	height: 20px;
	padding: 5px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: 0;
	background: 0 0;
}

.slick-dots li button:focus,
.slick-dots li button:hover {
	outline: 0;
}

.slick-dots li button:focus:before,
.slick-dots li button:hover:before {
	opacity: 1;
}

.slick-dots li button:before {
	font-size: 6px;
	line-height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	content: '•';
	text-align: center;
	opacity: .25;
	color: #000;
}

.slick-dots li.slick-active button:before {
	opacity: .75;
	color: #000;
}

.slick-list,
.slick-slider,
.slick-track {
	position: relative;
	display: block;
}

.slick-loading .slick-slide,
.slick-loading .slick-track {
	visibility: hidden;
}

.slick-slider {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

.slick-list {
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.slick-list:focus {
	outline: 0;
}

.slick-list.dragging {
	cursor: pointer;
	cursor: hand;
}

.slick-slider .slick-list,
.slick-slider .slick-track {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.slick-track {
	top: 0;
	left: 0;
}

.slick-track:after,
.slick-track:before {
	display: table;
	content: '';
}

.slick-track:after {
	clear: both;
}

.slick-slide {
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}

[dir=rtl] .slick-slide {
	float: right;
}

.slick-slide img {
	display: block;
    margin: auto;
}

.slick-slide.slick-loading img {
	display: none;
}

.slick-slide.dragging img {
	pointer-events: none;
}

.slick-initialized .slick-slide {
	display: block;
}

.slick-vertical .slick-slide {
	display: block;
	height: auto;
	border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
	display: none;
}

button.slick-arrow {display: none !important;}