body {overflow-x: hidden;}
[id*="custom-html"] {padding:0 !important; display:none;}
[class*="hero"] .col-md-5{width:100%;}
.text-blue { color:#00b2ff; }
.text-dark { color:#404040; }
.text-show {display: block !important;}
.benefitBox {border: 1px solid #fff; border-radius:10px; min-height: 215px; margin-bottom:1rem;}
.zyx-paragraph--event-details {display:none;}

/* --- Zyxel One 特效區域 --- */
#zyxel-one-section {overflow: hidden;}
#zyxel-one-section h3{display: none;}
#zyxel-one-section .layout-max-width {max-width: 1500px !important; margin: 0 auto !important; position: relative; overflow: visible; min-height: 800px;}
.parallax-section {position: relative; width: 100%; height: 100vh; min-height: 700px; display: block;}
.center-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 100; width: 100%; max-width: 600px; padding: 20px; opacity: 0.8;}
.floating-img { position: absolute; z-index: 10; opacity:1; }

/* --- 這裡定義匯集後的 CSS 位置 (800px 範圍) --- */
.img-1 { top: 20%; left: 15%; width: 180px; } 
.img-2 { top: 60%; left: 17%; width: 220px; } 
.img-3 { top: 6%;  left: 32%; width: 130px; } 
.img-4 { top: 11%; right: 30%; width: 300px; } 
.img-5 { top: 25%; right: 15%; width: 150px; } 
.img-6 { top: 70%; right: 17%; width: 300px; } 
.img-7 { top: 70%; right: 47%; width: 250px; }


/* --- Hero & Feature Carousel 樣式 --- */
.hero-layout{ display: flex; align-items: center; gap: 50px; }
.hero-static-content, .feature-static-content { flex: 1; }
.hero-right-group { flex: 1; position: relative; }

.hero-controls-header { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 15px; }
.hero-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #ddd; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.hero-slider-window { overflow: hidden; border-radius: 12px; box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.hero-track, .feature-track { display: flex; transition: transform 0.6s ease-in-out; }
.hero-slide, .feature-slide { min-width: 100%; }
.hero-slide a::before, .feature-slide a::before{background-color:transparent;}

#neox-section h2{display: none;}

/* --- Our Booth 專屬佈局 --- */
.stand-section {height: 400px; display: flex; flex-wrap: wrap; overflow-y: hidden;}
.stand-img {position: absolute; left:0; width:50%; overflow-y: hidden;}
.stand-img img {object-fit: cover; width: 100%; height: 400px;}
.stand-text {position: relative; margin-left: 54%; width: 45%;}

/* --- FEATURE CAROUSEL 修正 --- */
.feature-right-col {position: relative; z-index: 1; }
.parallax-bg { position: absolute; width: 90%; height: 100%; background: #00b2ff; border-radius: 12px; z-index: 1; right: -20px; bottom: -20px; pointer-events: none; }
.feature-carousel, .static-image-container{ position: relative; width: 100%; overflow: hidden; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); background: #fff; z-index: 5; }
.feature-slide img { width: 100%; display: block; object-fit: cover; }
.feature-dots {position: absolute; right: -10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 15px; z-index: 100;}
.feature-dots .dot {width: 12px; height: 12px; background: #fff; border: 2px solid #00b2ff; border-radius: 50%; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
.feature-dots .dot.active { background: #00b2ff; transform: scale(1.5); border-color: #fff; }
.feature-mobile-arrows { display: none; }

@media (max-width: 1500px) {
.center-content { background: rgb(255 255 255 / 75%); border-radius: 15px; }
.img-1 {left: 7%; } 
.img-2 {left: 11%; } 
.img-3 {top: -3%;  left: 24%;} 
.img-4 {top: 3%; right: 30%;} 
.img-5 {top: 20%; right: 7%;} 
.img-7 {top: 80%; right: 47%;}
}


@media (max-width: 768px) {
.event-logo {width: 50%;}
.hero-layout, .feature-layout { flex-direction: column; text-align: center; gap: 40px; }
.parallax-section { height: 80vh; }
#zyxel-one-section .layout-max-width {max-width: 700px;}
.img-1 {top: 10%; left: -11%; width: 100px;}
.img-2 {top: 50%; left: -25%; width: 200px;}
.img-3 {top: 0; left: 24%; width: 100px;}
.img-4 {top: 8%; right: -8%; width: 200px;}
.img-5 {top: 25%; right: -8%; width: 100px;}
.img-6 {top: auto; bottom: 26%; right: 0; width: 200px;}
.img-7 {top: auto; bottom: 5%; right: 30%; width: 200px;}
.parallax-bg, .static-parallax-bg {right: 0;}
.feature-dots { display: none !important; }
.feature-mobile-arrows {display: flex !important; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; margin: auto; height: 50px; justify-content: space-between; padding: 0 5px; pointer-events: none; z-index: 999; align-items: center;}
.f-arrow {pointer-events: auto !important; -webkit-appearance: none; outline: none; user-select: none; touch-action: manipulation; border-radius: 50%; border: 1px solid #ccc; width: 40px; height: 40px;}
.f-arrow i { font-size: 28px; color: #00b2ff; vertical-align: middle; }
.benefitBox {min-height: auto;}
.stand-section {height: auto; }
.stand-img {left: 0; position: relative; width: 100%;}
.stand-img img {object-fit: contain;height: auto;}
.stand-text {margin-left: 0; width: 100%;}
}

@media (max-width: 500px) {
    #neox-section img {object-position: 80%;}
}