[id*="custom-html"]{padding:0 !important; position:relative;}
[class*="text-editor"] h3{display: none;}
.line-break {display: block;}
.text-show{display:block !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;}
[id*="hero"] .row .col-md-5{width: 100%;}
[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;}
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%;}
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;
    }
}

.video-canvas {position:absolute; top: 0; left: 0; width: 100%; height:500px; overflow:hidden;}
.video-canvas video{z-index:0;}
.banner-title{position:relative;}

.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 {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);}
#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: 900px) {
    .video-canvas video {transform: translate(-50%, 0);}
}


@media (max-width: 640px) {
    .video-canvas video {transform: translate(-60%, 0);}
}

@media screen and (max-width: 500px) {
	[class*="top-hero"] img {object-position: 80%;}
}
