.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: 55%;}
.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;}

@media (max-width: 1100px) {
    .bannerCnt {padding: 0 2rem;}
}
    

@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) {
    .video-slider-wrapper .nav i{font-size: 2rem;}
    .video-slider-wrapper .nav {top: auto; bottom: 0; transform: translate(0, 0);}
}

/* Navigation Bar */
.navScrolled {position: fixed !important;top: 0;z-index: 1000;}
nav.second-nav {background-color: #eeeeee; width: 100%; overflow: hidden; padding: 14px 0; position:relative;}
nav.second-nav ul {width: max-content; margin:0 auto; text-align: center;}
nav.second-nav ul li {display: inline-block;padding: 0 5px;}
nav.second-nav ul li a {color: #404040; border-radius: 50px; padding: 5px 25px; display: inline-block; font-weight:normal;}
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: #00b2ff;color:#fff; text-decoration: none; }
nav.second-nav ul li a.border-adjusted, nav.second-nav ul li a.color-adjusted{color: #404040 !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: #fff !important; background-color: #003eab!important;}
@media screen and (max-width: 992px) {
	nav.second-nav {overflow-x: scroll;}
}
/* End Navigation Bar */


#promo{padding-bottom:2rem !important;}
#the-need-for-ibs h3{margin: 0 !important; }
#products{padding-top:2rem !important;}
#products h3{text-align:left; margin: 0; padding-top: 2rem !important;}
#products hr{margin:2rem 0;}
.scenario-title {display: block; margin: 0 auto; text-align: center; position: relative; margin-bottom:30px;line-height: 45px;height: 45px;}
.scenario-title h4 {text-align: center; margin: 0 auto !important;line-height: 45px;}
.scenario-box {margin-bottom: 5rem;}
.btn-scenario{position: absolute; right: 0; top: 0; margin: 0 !important;}
.scenario-box h5{border-bottom: 1px solid #00b2ff; margin-bottom:5px; color:#000; font-weight:normal;}
.overlay-content {position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; margin: 0 auto; background: #fff; z-index: 9999; overflow: auto; -webkit-overflow-scrolling: touch;}
.ct5-das-content .container, .SymmRepeater-content .container, .multiSiteRepeater-content .container{padding:0; width:60%; margin: 0 auto;}
.ct5-das-content .container h3, .SymmRepeater-content .container h3, .multiSiteRepeater-content .container h3{text-align:center !important;margin: 2% auto 0 !important;}
.scenarioHeading{text-align:center;}
.scenarioDesc{font-size:16px;}
.close-btn {position: absolute; right: 2%; top: 2%; border-radius: 50px; width: 60px; height: 60px; padding: 0; margin: 0; background: none; vertical-align:middle;border: 2px solid;}
.close-btn i {font-size: 50px; font-weight: normal;line-height: 60px;}

@media screen and (max-width: 1440px){
	.ct5-das-content .container, .SymmRepeater-content .container, .multiSiteRepeater-content .container{width:90%;}
}

@media screen and (max-width: 1100px){
	.context-html.context-html--full-width.container{padding:0 5%;}
	.close-btn{width:40px; height:40px; right:5%;}
	.close-btn i{font-size:30px; line-height:38px;}
}

@media screen and (max-width: 800px){
	.close-btn{width:30px; height:30px; right:5%;}
	.close-btn i{font-size:20px; line-height:28px;}
}

@media screen and (max-width: 640px){
	.magicOfficeRepeater-scenario img, .multiSiteRepeater-scenario img{display:block; margin: 0 auto;}
	.multiSiteRepeater-content h3, .SymmRepeater-content h3{width:80%;}
}

@media screen and (max-width: 450px){
	.scenario-title{height:auto; margin:5% 0 !important;}
	.btn-scenario{position:relative;}
}