Brume 3 (GL-MT5000) High-Speed VPN Security Gateway

/* 轮播图列表容器 */ .tiny-slider-container-beta-tester-review .tiny-slider-beta-tester-review { display: flex; flex-wrap: wrap; } /* 轮播图项目 */ .tiny-slider-container-beta-tester-review .t iny-slider-beta-tester-review .tiny-slider-item-beta-tester-review { padding: 0 1rem; vertical-align: middle; display: inline-flex; } @media (max-width: 1440px) { .tiny-slider-container-beta-tester-review .tiny-slider-beta-tester-review .tiny-slider-item-beta-tester-review { transform: translateX(0); } } @media (max-width: 991px) { .tiny-slider-container-beta-tester-review .tiny-slider-beta-tester-review .tiny-slider-item-beta-tester-review { vertical-align: top; } } /* 评价卡片 */ .tiny-slider-container-beta-tester-review .tiny-slider-beta-tester-review .tiny-slider-item-beta-tester-review .tiny-slider-review-card { display: flex; height: 100%; } /* 卡片内部的 Row */ .tiny-slider-container-beta-tester-review .tiny-slider-beta-tester-review .tiny-slider-item-beta-tester-review .tiny-slider-review-card .row { background-color: #ffffff; margin: 0; align-items: center; } @media (max-width: 991px) { .tiny-slider-container-beta-tester-review .tiny-slider-beta-tester-review .tiny-slider-item-beta-tester-review .tiny-slider-review-card .row { align-items: flex-start; } } @media (max-width: 768px) { .tiny-slider-container-beta-tester-review .tiny-slider-beta-tester-review .tiny-slider-item-beta-tester-review .tiny-slider-review-card .row { margin-right: 0; } } /* 图片容器样式 */ .tiny-slider-container-beta-tester-review .tiny-slider-beta-tester-review .tiny-slider-item-beta-tester-review .tiny-slider-review-card .row .card-image { height: 100%; } @media (max-width: 991px) { .tiny-slider-container-beta-tester-review .tiny-slider-beta-tester-review .tiny-slider-item-beta-tester-review .tiny-slider-review-card .row .card-image { height: auto; } } /* 图片本身样式 */ .tiny-slider-container-beta-tester-review .tiny-slider-beta-tester-review .tiny-slider-item-beta-tester-review .tiny-slider-review-card .row .card-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px 0 0 15px; } @media (max-width: 991px) { .tiny-slider-container-beta-tester-review .tiny-slider-beta-tester-review .tiny-slider-item-beta-tester-review .tiny-slider-review-card .row .card-image img { border-radius: 15px 15px 0 0; width: 100%; height: auto; } } /* 文字段落样式 */ .tiny-slider-container-beta-tester-review .tiny-slider-beta-tester-review .tiny-slider-item-beta-tester-review .tiny-slider-review-card .row p { font-size: 1.1rem; } .btn-round { border-radius: 50px; padding: 1rem 2rem; text-transform: uppercase; font-weight: bold; } /* Model Comparison Root */ .model-comparison .product-img { width: 75%; } @media (max-width: 576px) { .model-comparison .product-img { width: 85%; } } .model-comparison p { margin-bottom: 0; } @media (max-width: 576px) { .model-comparison p { font-size: 0.85rem; } } /* Comparison Detail Row */ .model-comparison .comparison-detail { padding-bottom: 1rem; } @media (max-width: 768px) { .model-comparison .comparison-detail { padding-bottom: 0; background-color: white; } .model-comparison .comparison-detail div { background-color: white; } .model-comparison .comparison-detail:nth-of-type(odd) { background-color: #f7f7f7; } .model-comparison .comparison-detail:nth-of-type(odd) div { background-color: #f7f7f7; } } .model-comparison .comparison-detail img { width: 40px; } /* Row Direct Divs (Columns) */ .model-comparison .comparison-detail>div { padding: 1rem 2rem; background-color: #f7f7f7; align-content: center; border-bottom: 1px solid #dee2e6; } @media (max-width: 991px) { .model-comparison .comparison-detail>div { padding: 1rem 0.5rem; } } @media (max-width: 768px) { .model-comparison .comparison-detail>div { background-color: inherit; padding: 0.7rem 1rem 3rem; border-bottom: 0; } } .model-comparison .comparison-detail>div h5 { font-size: 1rem; margin-bottom: 0; } .model-comparison .comparison-detail>div p { margin-bottom: 0; } /* Icon Styles */ .model-comparison .comparison-detail>div i.fa-crown { font-size: 1.4em; color: #1b488b; transform: rotate(20deg); position: absolute; top: -0.6rem; right: -2rem; } @media (max-width: 768px) { .model-comparison .comparison-detail>div i.fa-crown { right: -14px; font-size: 1rem; } } .model-comparison .comparison-detail>div i.fa-check { color: #17a2b8; } .model-comparison .comparison-detail>div .fa-minus { color: #a1a1a1; } /* Special styling for the second column (usually the highlighted product) */ .model-comparison .comparison-detail div:nth-child(2) { background-color: #1b488b; color: white; } @media (max-width: 768px) { .model-comparison .comparison-detail div:nth-child(2) { padding: 2.5rem 0 0; background-color: inherit; color: #000000; } } /* 基础容器 */ .horizontal-scroll { overflow: clip; } @media (max-width: 991px) { .horizontal-scroll { height: inherit !important; padding-top: 1.5rem; padding-bottom: 1.5rem; } } /* 粘性控制层 */ .horizontal-scroll .sticky-control { position: sticky; top: 0; } @media (max-width: 991px) { .horizontal-scroll .sticky-control { position: relative; top: 0; } } /* 容器层 */ .horizontal-scroll .sticky-control .container { width: 100vw; height: 100vh; } @media (max-width: 991px) { .horizontal-scroll .sticky-control .container { transform: none; width: initial; height: initial; padding-top: 2rem; padding-bottom: 2rem; } } .product-img { width: 100%; } a.btn-underline { color: rgb(59, 62, 64); } a.btn-underline:hover { color: rgb(145, 145, 145); text-decoration: none; } /* 动画定义 - 必须放在外层 */ @keyframes scale { 0% { transform: scale(1); } 100% { transform: scale(1.3); } } /* 背景控制 - 使用了现代 CSS 滚动驱动动画属性 */ .horizontal-scroll .sticky-control .container .bg-control { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover; background-position: center center; opacity: 1; animation: scale auto linear; animation-direction: normal; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timeline: view(); animation-range-start: 40%; animation-range-end: 95%; } /* 内容控制层 */ .horizontal-scroll .sticky-control .container .content-control { position: sticky; top: 0; height: 100vh; padding-top: 0rem; padding-bottom: 1rem; } @media (max-width: 991px) { .horizontal-scroll .sticky-control .container .content-control { position: relative; height: inherit; } } /* 粘性内容具体定位 */ .horizontal-scroll .sticky-control .container .content-control .sticky-content { position: relative; top: calc(50% + 50px); transform: translateY(-50%); } @media (max-width: 991px) { .horizontal-scroll .sticky-control .container .content-control .sticky-content { transform: none; top: 0; padding-top: 2rem; padding-bottom: 2rem; } } /* 滚动包装层 */ .horizontal-scroll .horizontal-scroll-wrapper .figure-list { display: flex; position: relative; } @media (max-width: 991px) { .horizontal-scroll .horizontal-scroll-wrapper .figure-list { display: block; transform: none !important; } } /* 列表项 Figure */ .horizontal-scroll .horizontal-scroll-wrapper .figure-list figure { position: relative; padding: 1rem; flex-grow: 0; flex-shrink: 0; flex-basis: 50%; } @media (max-width: 991px) { .horizontal-scroll .horizontal-scroll-wrapper .figure-list figure { flex-basis: 100%; } } .product-nav { background-color: #eeeeee; position: sticky; top: 0px; @media (min-width: 1040px) { top: 0px; } z-index: 999; } .product-nav .product-nav-container { overflow-x: auto; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .product-nav .product-nav-container::-webkit-scrollbar { display: none; } @media (max-width: 768px) { .product-nav .product-nav-container { overflow-x: inherit; } } .product-nav .product-nav-container .product-nav-content { display: flex; flex-direction: row; justify-content: left; align-items: center; white-space: nowrap; } @media (max-width: 768px) { .product-nav .product-nav-container .product-nav-content { overflow-x: auto; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .product-nav .product-nav-container .product-nav-content::-webkit-scrollbar { display: none; } } .product-nav .product-nav-container .product-nav-content .product-nav-item { color: #6c757d; height: -moz-fit-content; height: fit-content; padding: 0.75rem 1.5rem; background: none !important; border-bottom: 2px solid transparent; } @media (max-width: 991px) { .product-nav .product-nav-container .product-nav-content .product-nav-item { padding: 0.75rem 1rem !important; } } @media (max-width: 768px) { .product-nav .product-nav-container .product-nav-content .product-nav-item { padding: 0.75rem 1rem !important; } } .product-nav .product-nav-container .product-nav-content .product-nav-item:hover { color: #3dc1cf; transition: 0.3s ease; } .product-nav .product-nav-container .product-nav-content .product-nav-item.active { color: #3dc1cf; border-color: #3dc1cf; } /* 基础嵌套结构转换 */ .support-main-container.support-rm1 .frame>div .card { display: flex; flex-direction: row; min-height: 420px; } /* 响应式：卡片最小高度 */ @media (max-width: 991px) { .support-main-container.support-rm1 .frame>div .card { min-height: 550px; } } /* 卡片主体样式 */ .support-main-container.support-rm1 .frame>div .card .card-body { padding: 2rem 2rem; margin-bottom: auto; position: relative; z-index: 3; } /* 响应式：卡片主体定位 */ @media (max-width: 991px) { .support-main-container.support-rm1 .frame>div .card .card-body { position: absolute; } } /* 白色渐变遮罩层 */ .support-main-container.support-rm1 .frame>div .card .bg_white { position: absolute; z-index: 1; background: linear-gradient(270deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 88%); } @media (max-width: 1199px) { .support-main-container.support-rm1 .frame>div .card .bg_white { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 88%); } } /* 卡片图片容器 */ .support-main-container.support-rm1 .frame>div .card .card-img { margin: 0; position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; margin-top: -65%; /* 对应底部覆盖样式 */ } .support-main-container.support-rm1 .frame>div .card .card-img img { object-fit: cover; height: 100%; } /* 第二个子元素的特殊处理 */ .support-main-container.support-rm1 .frame>div:nth-child(2) .bg_white { transform: scale(-1); } @media (max-width: 991px) { .support-main-container.support-rm1 .frame>div:nth-child(2) .bg_white { transform: inherit; } } /* 针对 .frame 下所有 .card 的通用补充样式 */ .support-main-container.support-rm1 .frame .card .card-body { padding: 2rem 2rem; margin-bottom: auto; position: relative; z-index: 3; } .support-main-container.support-rm1 .frame .card .card-img { position: relative; z-index: 1; margin-top: -65%; } /* 原有普通 CSS 部分保持不变 */ .support-main-container .custom-item { display: flex; flex-direction: column-reverse; } .support-main-container .custom-item .d-flex .fa-plus, .support-main-container .custom-item .show+.d-flex .fa-minus { display: block; cursor: pointer; } .support-main-container .custom-item .d-flex .fa-minus, .support-main-container .custom-item .show+.d-flex .fa-plus { display: none; cursor: pointer; } /* Base Container */ .mt5000-main-container { --mt5000: #798dda; } .mt5000-main-container .text-mt5000 { color: var(--mt5000); } .mt5000-main-container .font-gradient { display: inline-block; color: var(--mt5000) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-color: #277AA5; background-image: -moz-linear-gradient(180deg, #6074c1, #c1b5e6); background-image: -webkit-linear-gradient(180deg, #6074c1, #c1b5e6); background-image: linear-gradient(180deg, #6074c1, #c1b5e6); text-shadow: none; position: relative; } .mt5000-main-container a.text-mt5000 { color: var(--mt5000); } .mt5000-main-container a.text-mt5000:hover { color: #7181c3; } .mt5000-main-container .bg-mt5000 { background-color: #f6f7ff; } .mt5000-main-container .btn-round-mt5000 { background-color: #909fdb; color: #FFF; border-radius: 50px; padding: 1rem 2rem; text-transform: uppercase; font-weight: bold; } @media (max-width: 768px) { .mt5000-main-container .btn-round-mt5000 { min-height: 50px; border-radius: 50px; padding: 12px 2rem; font-size: 13px; text-transform: uppercase; font-weight: bold; margin-right: 8px !important; } .mt5000-main-container .btn { font-size: 13px; padding: 14px 24px; } } .mt5000-main-container .btn-round-mt5000:hover { background-color: #FFF; color: #909fdb; border-color: #909fdb; } /* Mailchimp Shell */ .mt5000-main-container #mc_embed_shell { justify-items: center; } .mt5000-main-container #mc_embed_shell input { border: medium none; color: gray; font-size: 16px; padding: 8px 25px; width: auto; height: 50px; border-radius: 25px 0px 0px 25px; } @media (max-width: 575.98px) { .mt5000-main-container #mc_embed_shell input { width: 100%; height: 40px; font-size: 13px; } } .mt5000-main-container #mc_embed_shell input.email { background: #fff; } @media (max-width: 575.98px) { .mt5000-main-container #mc_embed_shell input.email { font-size: 13px; } } .mt5000-main-container #mc_embed_shell input[type="submit"] { background-color: var(--mt5000); text-align: center; transition: 0.5s; background-size: 200% auto; font-weight: bold; color: white; border-radius: 0 25px 25px 0; display: block; margin: 0; } .mt5000-main-container #mc_embed_shell input[type="submit"]:hover { background-color: #566aba; background-position: right center; color: #fff; text-decoration: none; } .mt5000-main-container #mc_embed_shell #mc-embedded-subscribe-form { width: auto; justify-content: start; } @media (max-width: 991.98px) { .mt5000-main-container #mc_embed_shell #mc-embedded-subscribe-form { margin: auto; justify-content: center; } } /* Video Header */ .mt5000-main-container .video-header-mt5000 { position: relative; background-color: black; height: 55rem; min-height: 25rem; width: 100%; overflow: hidden; } .mt5000-main-container .video-header-mt5000 .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: black; opacity: 0.25; z-index: 1; } .mt5000-main-container .video-header-mt5000 video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .mt5000-main-container .video-header-mt5000 .container { position: relative; z-index: 2; } /* Grid Layout */ .mt5000-main-container .grid { display: grid; grid-auto-rows: 4rem; } @media (max-width: 1199px) { .mt5000-main-container .grid { grid-auto-rows: 5rem; } } @media (max-width: 991px) { .mt5000-main-container .grid { grid-auto-rows: 7rem; } } @media (max-width: 768px) { .mt5000-main-container .grid { grid-auto-rows: 6rem; } } @media (max-width: 576px) { .mt5000-main-container .grid { grid-auto-rows: 6rem; } } @media (max-width: 400px) { .mt5000-main-container .grid { grid-auto-rows: 5.2rem; } } .mt5000-main-container .grid .grid-item { position: relative; margin: 0.3rem; overflow: hidden; } .mt5000-main-container .grid .grid-cell { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; height: 100%; width: 100%; background: linear-gradient(180deg, #e6edff 0%, #bcc2eac4 100%); background-size: cover; background-repeat: no-repeat; background-position: center bottom; padding: 1.5rem 1.5rem; } @media (max-width: 1199px) { .mt5000-main-container .grid .grid-cell { padding: 1rem 1.25rem; } } @media (max-width: 768px), (max-width: 576px) { .mt5000-main-container .grid .grid-cell { padding: 1rem 0.75rem; } } .mt5000-main-container .grid .grid-cell h2 { font-size: 1.75rem; } @media (max-width: 1280px) { .mt5000-main-container .grid .grid-cell h2 { font-size: 1.5rem; } } @media (max-width: 768px) { .mt5000-main-container .grid .grid-cell h2 { font-size: 1.25rem; } } @media (max-width: 576px) { .mt5000-main-container .grid .grid-cell h2 { font-size: 1.1rem; } } @media (max-width: 1280px) { .mt5000-main-container .grid .grid-cell h4 { font-size: 1.25rem; } } @media (max-width: 768px) { .mt5000-main-container .grid .grid-cell h4 { font-size: 1rem; } } .mt5000-main-container .grid .grid-cell p { margin-bottom: 0; } @media (max-width: 576px) { .mt5000-main-container .grid .grid-cell p { font-size: 0.75rem; } } /* Grid Items Specifics */ .mt5000-main-container .grid .item-1 .grid-cell { background-image: url('https://static.gl-inet.com/www/images/products/gl-mt5000/mt5000_grid-vpn-server.jpg'); background-size: 135%; background-position: 50% 42%; } @media (max-width: 1199px) { .mt5000-main-container .grid .item-1 .grid-cell { background-image: url('https://static.gl-inet.com/www/images/products/gl-mt5000/mt5000_grid-vpn-server_mobile.jpg'); background-size: 123%; background-position: 82% 50%; } } @media (max-width: 991px) { .mt5000-main-container .grid .item-1 .grid-cell { background-image: url('https://static.gl-inet.com/www/images/products/gl-mt5000/mt5000_grid-vpn-server.jpg'); background-size: cover; background-position: 50% 50%; } } @media (max-width: 768px) { .mt5000-main-container .grid .item-1 .grid-cell { background-position: 50% 42%; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-1 .grid-cell { background-image: url('https://static.gl-inet.com/www/images/products/gl-mt5000/mt5000_grid-vpn-server_mobile.jpg'); background-size: cover; background-position: 50% 48%; } .mt5000-main-container .grid .item-1 .grid-cell div { text-align: center; } } @media (max-width: 500px) { .mt5000-main-container .grid .item-1 .grid-cell { background-size: 112%; } } .mt5000-main-container .grid .item-2 .grid-cell { background-size: 128%; background-position: 50% 100%; display: flex; flex-direction: column; justify-content: space-between; } @media (max-width: 576px) { .mt5000-main-container .grid .item-2 .grid-cell img { width: 80%; } } @media (max-width: 400px) { .mt5000-main-container .grid .item-2 .grid-cell img { width: 100%; } } .mt5000-main-container .grid .item-3 .grid-cell { display: flex; flex-direction: column; justify-content: space-between; padding: 1rem 1.25rem; } @media (max-width: 1199px) { .mt5000-main-container .grid .item-3 .grid-cell { flex-direction: row; padding: 1rem 0.5rem 1rem 1.25rem; } } @media (max-width: 991px) { .mt5000-main-container .grid .item-3 .grid-cell { flex-direction: column; padding: 1rem 1.25rem; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-3 .grid-cell { flex-direction: row; padding: 1rem 0.5rem 1rem 1.25rem; } } .mt5000-main-container .grid .item-3 .grid-cell .img-content { width: 100%; } @media (max-width: 1199px) { .mt5000-main-container .grid .item-3 .grid-cell .img-content { width: 90%; } } @media (max-width: 991px) { .mt5000-main-container .grid .item-3 .grid-cell .img-content { width: 100%; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-3 .grid-cell .img-content { width: 60%; } } @media (max-width: 440px) { .mt5000-main-container .grid .item-3 .grid-cell .img-content { width: 70%; } } .mt5000-main-container .grid .item-4 .grid-cell { align-content: end; background-size: 120%; background-position: 50% 65%; padding: 0 0; display: flex; flex-direction: column; justify-content: space-between; } @media (max-width: 576px) { .mt5000-main-container .grid .item-4 .grid-cell { padding: 0.25rem 0 0; } } .mt5000-main-container .grid .item-4 .grid-cell div { padding: 1rem 1.5rem; } @media (max-width: 576px) { .mt5000-main-container .grid .item-4 .grid-cell div { padding: 0.75rem 0.75rem 0; } } @media (max-width: 1199px) { .mt5000-main-container .grid .item-4 .grid-cell .img-content img { width: 95%; margin-top: -3rem; } } @media (max-width: 991px) { .mt5000-main-container .grid .item-4 .grid-cell .img-content img { width: 86%; margin-top: -3rem; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-4 .grid-cell .img-content img { width: 85%; margin-top: -35%; } } .mt5000-main-container .grid .item-5 .grid-cell { flex-wrap: wrap; align-content: flex-end; background-size: 120%; background-position: 50% 65%; padding: 12px; display: flex; flex-direction: column; } @media (max-width: 576px) { .mt5000-main-container .grid .item-5 .grid-cell { padding: 0.25rem 0 0; align-content: start; padding-left: 12px; } } .mt5000-main-container .grid .item-5 .grid-cell div { padding: 0 1.5rem 1rem; } @media (max-width: 576px) { .mt5000-main-container .grid .item-5 .grid-cell div { padding: 0 0.75rem 0.75rem; } } .mt5000-main-container .grid .item-6 .grid-cell { display: flex; flex-wrap: wrap; align-content: start; background-position: 50% 100%; } @media (max-width: 992px) { .mt5000-main-container .grid .item-6 .grid-cell { background-position: 50% 70%; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-6 .grid-cell { background-size: 123%; background-position: 50% 100% !important; } } .mt5000-main-container .grid .item-7 .grid-cell, .mt5000-main-container .grid .item-8 .grid-cell, .mt5000-main-container .grid .item-9 .grid-cell { padding: 1rem 1rem; } .mt5000-main-container .grid .item-7 .grid-cell>div, .mt5000-main-container .grid .item-8 .grid-cell>div, .mt5000-main-container .grid .item-9 .grid-cell>div { position: relative; top: 50%; transform: translateY(-50%); } .mt5000-main-container .grid .item-7 .grid-cell>div img, .mt5000-main-container .grid .item-8 .grid-cell>div img, .mt5000-main-container .grid .item-9 .grid-cell>div img { width: 75%; filter: drop-shadow(0px 0px 10px rgba(114, 154, 255, 0.4)); margin-bottom: 0.75rem; } @media (max-width: 1199px) { .mt5000-main-container .grid .item-7 .grid-cell>div img, .mt5000-main-container .grid .item-8 .grid-cell>div img, .mt5000-main-container .grid .item-9 .grid-cell>div img { width: 75%; margin-bottom: 0.5rem; } } @media (max-width: 991px) { .mt5000-main-container .grid .item-7 .grid-cell>div img, .mt5000-main-container .grid .item-8 .grid-cell>div img, .mt5000-main-container .grid .item-9 .grid-cell>div img { width: 80%; margin-bottom: 0.5rem; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-7 .grid-cell>div img, .mt5000-main-container .grid .item-8 .grid-cell>div img, .mt5000-main-container .grid .item-9 .grid-cell>div img { width: 75%; margin-bottom: 0.25rem; } } .mt5000-main-container .grid .item-7 .grid-cell>div p, .mt5000-main-container .grid .item-8 .grid-cell>div p, .mt5000-main-container .grid .item-9 .grid-cell>div p { line-height: 1.1; } @media (max-width: 768px) { .mt5000-main-container .grid .item-7 .grid-cell>div p, .mt5000-main-container .grid .item-8 .grid-cell>div p, .mt5000-main-container .grid .item-9 .grid-cell>div p { font-size: 0.75rem; } } /* grid control */ .mt5000-main-container .grid .item-1 { grid-area: 1 / 1 / span 6 / span 3; } .mt5000-main-container .grid .item-2 { grid-area: 1 / 4 / span 6 / span 3; } .mt5000-main-container .grid .item-3 { grid-area: 1 / 10 / span 6 / span 3; } .mt5000-main-container .grid .item-5 { grid-area: 1 / 7 / span 3 / span 3; } .mt5000-main-container .grid .item-6 { grid-area: 4 / 7 / span 3 / span 3; } .mt5000-main-container .grid .item-4 { grid-area: 7 / 7 / span 3 / span 6; } .mt5000-main-container .grid .item-7 { grid-area: 7 / 1 / span 3 / span 2; } .mt5000-main-container .grid .item-8 { grid-area: 7 / 3 / span 3 / span 2; } .mt5000-main-container .grid .item-9 { grid-area: 7 / 5 / span 3 / span 2; } @media (max-width:1199px) { .mt5000-main-container .grid .item-1 { grid-area: 1 / 1 / span 3 / span 6; } .mt5000-main-container .grid .item-2 { grid-area: 1 / 7 / span 3 / span 6; } .mt5000-main-container .grid .item-3 { grid-area: 4 / 1 / span 3 / span 4; } .mt5000-main-container .grid .item-6 { grid-area: 4 / 9 / span 3 / span 4; } .mt5000-main-container .grid .item-5 { grid-area: 4 / 5 / span 3 / span 4; } .mt5000-main-container .grid .item-4 { grid-area: 7 / 7 / span 2 / span 6; } .mt5000-main-container .grid .item-7 { grid-area: 7 / 1 / span 2 / span 2; } .mt5000-main-container .grid .item-8 { grid-area: 7 / 3 / span 2 / span 2; } .mt5000-main-container .grid .item-9 { grid-area: 7 / 5 / span 2 / span 2; } } @media (max-width:991px) { .mt5000-main-container .grid .item-1 { grid-area: 1 / 1 / span 2 / span 3; } .mt5000-main-container .grid .item-2 { grid-area: 1 / 4 / span 2 / span 3; } .mt5000-main-container .grid .item-3 { grid-area: 3 / 4 / span 4 / span 3; } .mt5000-main-container .grid .item-4 { grid-area: 7 / 1 / span 2 / span 6; } .mt5000-main-container .grid .item-5 { grid-area: 3 / 1 / span 2 / span 3; } .mt5000-main-container .grid .item-6 { grid-area: 5 / 1 / span 2 / span 3; } .mt5000-main-container .grid .item-7 { grid-area: 9 / 1 / span 2 / span 2; } .mt5000-main-container .grid .item-8 { grid-area: 9 / 3 / span 2 / span 2; } .mt5000-main-container .grid .item-9 { grid-area: 9 / 5 / span 2 / span 2; } } @media (max-width:576px) { .mt5000-main-container .grid .item-1 { grid-area: 1 / 1 / span 2 / span 6; } .mt5000-main-container .grid .item-2 { grid-area: 3 / 1 / span 2 / span 6; } .mt5000-main-container .grid .item-3 { grid-area: 5 / 1 / span 2 / span 3; } .mt5000-main-container .grid .item-4 { grid-area: 7 / 1 / span 2 / span 6; } .mt5000-main-container .grid .item-5 { grid-area: 9 / 1 / span 2 / span 6; } .mt5000-main-container .grid .item-6 { grid-area: 5 / 4 / span 2 / span 3; } .mt5000-main-container .grid .item-7 { grid-area: 11 / 1 / span 2 / span 2; } .mt5000-main-container .grid .item-8 { grid-area: 11 / 3 / span 2 / span 2; } .mt5000-main-container .grid .item-9 { grid-area: 11 / 5 / span 2 / span 2; } } /* VPN Section */ .mt5000-main-container .mt5000-vpn { position: relative; z-index: 1; } .mt5000-main-container .mt5000-vpn .vpn-bg { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center center; background-image: url('https://static.gl-inet.com/www/images/products/gl-mt5000/mt5000_vpn-bg.jpg'); mix-blend-mode: multiply; } .mt5000-main-container .mt5000-vpn .vpn-bg::after { content: ""; width: 100%; height: 100%; position: absolute; background: linear-gradient(180deg, #ffffff 0%, #f6f7ff00 15%, #f6f7ff00 85%, #ffffff 100%); display: flex; top: 0; } .mt5000-main-container .mt5000-vpn .bg { position: relative; margin-top: -3rem; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-vpn .bg { margin-top: -3rem; } } @media (max-width: 991px) { .mt5000-main-container .mt5000-vpn .bg { margin-top: -1rem; } } .mt5000-main-container .mt5000-vpn .bg>div { display: flex; height: 100%; flex-direction: column; justify-content: center; position: relative; } .mt5000-main-container .mt5000-vpn .bg>div h2 { position: relative; font-size: clamp(16px, 19vw, 360px); line-height: 1; color: var(--mt5000); opacity: 0; left: 50%; transform: translateX(-50%) scale(0); transition: transform 1.5s ease-in-out, opacity 1.7s ease-out; margin-bottom: -4%; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-vpn .bg>div h2 { font-size: clamp(16px, 23vw, 280px); margin-bottom: -8%; } } @media (max-width: 991px) { .mt5000-main-container .mt5000-vpn .bg>div h2 { font-size: clamp(16px, 25vw, 360px); } } @media (max-width: 576px) { .mt5000-main-container .mt5000-vpn .bg>div h2 { font-size: 38vw; } } .mt5000-main-container .mt5000-vpn .bg>div h2.font-stroke { position: absolute; top: 0; z-index: 999; color: #5838e4; mix-blend-mode: lighten; text-shadow: 0 0 8px #ffffff4d; } .mt5000-main-container .mt5000-vpn .bg>div img { max-width: 600px; width: clamp(200px, 23%, 440px); opacity: 0; transform: scale(3) translate(0, 0%); transition: transform 1s ease, opacity 0.5s ease-out; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-vpn .bg>div img { width: clamp(200px, 26%, 340px); } } @media (max-width: 991px) { .mt5000-main-container .mt5000-vpn .bg>div img { transform: scale(1) translate(0, 0%); width: clamp(200px, 32%, 340px); } } @media (max-width: 576px) { .mt5000-main-container .mt5000-vpn .bg>div img { width: 50%; } } .mt5000-main-container .mt5000-vpn .vpn-speed-bar { position: relative; transform-origin: left; transform: scaleX(0); transition: all 1s ease; transition-delay: 0.5s; } .mt5000-main-container .mt5000-vpn .vpn-speed-bar:nth-child(2) { transition-delay: 0.3s; } .mt5000-main-container .mt5000-vpn .vpn-speed-bar .mt5000-bg-primary { background-color: #909fdb !important; } .mt5000-main-container .mt5000-vpn .vpn-speed-bar .mt5000-bg-secondary { background-color: #9e79d8 !important; } .mt5000-main-container .mt5000-vpn.in-view .bg h2 { opacity: 1; transform: translate(-50%) scale(1); } .mt5000-main-container .mt5000-vpn.in-view .bg img { opacity: 1; transform: scale(1) translate(0, -17%); } .mt5000-main-container .mt5000-vpn.in-view .vpn-speed-bar { transform: scaleX(1); } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } /* DPI Section */ .mt5000-main-container .mt5000-dpi { position: relative; overflow: hidden; scroll-margin-top: 96px; } @media (max-width: 768px) { .mt5000-main-container .mt5000-dpi { scroll-margin-top: 90px; display: flex; flex-direction: column; } } .mt5000-main-container .mt5000-dpi .container { position: relative; z-index: 10; } .mt5000-main-container .mt5000-dpi .bg { position: relative; display: flex; justify-content: center; padding-bottom: 45vh; } @media (max-width: 576px) { .mt5000-main-container .mt5000-dpi .bg { padding-bottom: 400px; } } .mt5000-main-container .mt5000-dpi .bg .container { background-image: url(https://static.gl-inet.com/www/images/products/gl-mt5000/mt5000_dpi.png); background-size: 50%; background-position: center center; background-repeat: no-repeat; width: 100%; height: 45vh; position: absolute; z-index: 0; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-dpi .bg .container { background-size: 70%; } } @media (max-width: 768px) { .mt5000-main-container .mt5000-dpi .bg .container { background-size: 80%; } } @media (max-width: 576px) { .mt5000-main-container .mt5000-dpi .bg .container { height: 400px; } } .mt5000-main-container .mt5000-dpi .bg .container>div { position: relative; width: 100%; height: 100%; } .mt5000-main-container .mt5000-dpi .bg .container>div img.mt5000 { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.5); opacity: 0; transition: all 1.2s ease; z-index: 4; } .mt5000-main-container .mt5000-dpi .bg .container>div img.rad { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: all 2s ease; opacity: 0; z-index: 1; width: auto; height: calc(100% + 2.75rem); animation-delay: 1s; } @media (max-width: 991px) { .mt5000-main-container .mt5000-dpi .bg .container>div img.rad { height: calc(100% + 1rem); } } .mt5000-main-container .mt5000-dpi .bg.in-view .container>div img.mt5000 { transform: translate(-50%, -50%) scale(0.45) !important; opacity: 1; } .mt5000-main-container .mt5000-dpi .bg.in-view .container>div img.rad { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; } /* Port Section */ .mt5000-main-container .mt5000-port { background-image: linear-gradient(150deg, #f6f7ff 0%, #f6f7ff 100%); height: 180vh; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port { height: inherit; } } .mt5000-main-container .mt5000-port .container-fluid { position: sticky; height: 100vh; top: 0; padding: 30vh 0 0 0; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .container-fluid { position: relative; height: inherit; top: 0; padding: 3rem 0; } } .mt5000-main-container .mt5000-port .mt5000-port-container { width: 88%; max-width: 100%; margin: auto; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-port .mt5000-port-container { width: calc(100% - 30px); } } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container { max-width: 90%; height: inherit; scroll-margin-top: 100px; } } /* Port 1 Animations (using Scroll Timeline where possible or fallback) */ .mt5000-main-container .mt5000-port #port1 .img-content .pt1 { width: 33%; position: absolute; transform: translateX(-50%); left: 41.5%; top: 80%; white-space: nowrap; text-align: right; animation: fadeout auto linear forwards; animation-timeline: view(); animation-range: 45% 50%; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port #port1 .img-content .pt1 { animation: none; } } .mt5000-main-container .mt5000-port #port1 .img-content .pt1 .line { width: 0; height: 4rem; margin-left: 95%; border-left: 1px #000000 solid; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port #port1 .img-content .pt1 .line { height: 2.5rem; } } .mt5000-main-container .mt5000-port #port1 .img-content .pt2 { width: 42%; position: absolute; left: 66.5%; top: 75%; text-align: left; animation: fadeout auto linear forwards; animation-timeline: view(); animation-range: 45% 50%; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port #port1 .img-content .pt2 { animation: none; width: auto; } } .mt5000-main-container .mt5000-port #port1 .img-content .pt2 .line { width: 0; height: 4rem; margin-left: 5%; border-left: 1px #000000 solid; } .mt5000-main-container .mt5000-port #port1 .text-content { animation: fadeout auto linear forwards; animation-timeline: view(); animation-range: 45% 50%; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port #port1 .text-content { animation: none; } } /* Port 2 Specifics */ .mt5000-main-container .mt5000-port #port2 { opacity: 0; animation: fadein auto linear forwards; animation-timeline: view(); animation-range: 30% 40%; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port #port2 { animation: none; opacity: 1; } } .mt5000-main-container .mt5000-port #port2>div { position: relative; transform: translateY(-100%); } @media (max-width: 991px) { .mt5000-main-container .mt5000-port #port2>div { transform: none; } } /* Connectivity Section */ .mt5000-main-container .mt5000-connectivity { position: relative; z-index: 1; overflow-x: clip; } .mt5000-main-container .mt5000-connectivity .connectivity-1 .img-content img { width: 100%; position: relative; transform-origin: bottom right; transform: rotate(-23deg) translate(4%, 56%); opacity: 0; transition: transform 1.3s ease, opacity 1s ease; } @media (max-width: 991px) { .mt5000-main-container .mt5000-connectivity .connectivity-1 .img-content img { width: 75%; transform: rotate(-11deg) translate(11%, 3%) !important; opacity: 1 !important; } } .mt5000-main-container .mt5000-port .mt5000-port-container .img-content { position: relative; max-width: 50vh; max-height: 50vh; float: right; overflow: visible; margin: 3rem 0px 5rem; } .mt5000-main-container .mt5000-connectivity.in-view .connectivity-1 img { opacity: 1; transform: rotate(-16deg) translate(0, -11%); } .mt5000-main-container .mt5000-connectivity.in-view .connectivity-1 h3, .mt5000-main-container .mt5000-connectivity.in-view .connectivity-1 p { opacity: 1; transform: inherit; } /* OpenWrt / Cardlist */ .mt5000-main-container .mt5000-openwrt .mt5000-cardlist-row { justify-content: space-between; display: flex; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-openwrt .mt5000-cardlist-row { justify-content: center; } } .mt5000-main-container .mt5000-openwrt .mt5000-cardlist-col { padding: 0 0.5rem; opacity: 0; transition: opacity 0.5s ease; } .mt5000-main-container .mt5000-openwrt .mt5000-cardlist-col:nth-child(2) .card {} @media (max-width: 1199px) { .mt5000-main-container .mt5000-openwrt .mt5000-cardlist-col:nth-child(2) .card { margin-top: 1rem; } } .mt5000-main-container .mt5000-openwrt .card { padding: 1rem; border: 3px solid var(--mt5000); background: rgba(255, 255, 255, 1); transition: all .3s ease; display: flex; flex-direction: column; } .mt5000-main-container .mt5000-openwrt .card .card-img img { width: 90%; margin: auto; transition: all .3s ease; margin-bottom: 1.25rem; } .mt5000-main-container .mt5000-openwrt .card:hover img { transform: scale(1.03) !important; } /* Horizontal Scroll */ .mt5000-main-container .horizontal-scroll { position: relative; height: 350vh; background-color: transparent; } .mt5000-main-container .horizontal-scroll .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .mt5000-main-container .horizontal-scroll .overlay::after { content: ""; width: 100%; height: 100%; position: absolute; background: linear-gradient(180deg, #f6f7ff 0%, #f6f7ff88 15%, #f6f7ff88 85%, #ffffff 100%); display: flex; top: 0; } .mt5000-main-container .horizontal-scroll .overlay .bg-control { height: 100vh; width: 100%; position: sticky; top: 0; } .mt5000-main-container .horizontal-scroll .overlay .bg-control video { width: 100%; height: 100%; object-fit: cover; } /* Model Comparison */ .mt5000-main-container .model-comparison .comparison-detail>div i.fa-crown { color: var(--mt5000); } .mt5000-main-container .model-comparison .comparison-detail div:nth-child(2) { background-color: var(--mt5000); } @media (max-width: 768px) { .mt5000-main-container .model-comparison .comparison-detail div:nth-child(2) { background-color: inherit; } } .tab-panel:has(.mt5000-main-container) { padding: 0 !important; } .mt5000-main-container { --mt5000: #798dda; } .mt5000-main-container .text-mt5000 { color: var(--mt5000); } .mt5000-main-container .font-gradient { display: inline-block; color: var(--mt5000) !important; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-color: #277AA5; background-image: -moz-linear-gradient(180deg, #6074c1, #c1b5e6); background-image: -webkit-linear-gradient(180deg, #6074c1, #c1b5e6); background-image: linear-gradient(180deg, #6074c1, #c1b5e6); text-shadow: none; position: relative; } .mt5000-main-container a.text-mt5000 { color: var(--mt5000); } .mt5000-main-container a.text-mt5000:hover { color: #7181c3; } .mt5000-main-container .bg-mt5000 { background-color: #f6f7ff; } .mt5000-main-container .btn-round-mt5000 { background-color: #909fdb; color: #FFF; border-radius: 50px; padding: 1rem 2rem; text-transform: uppercase; font-weight: bold; } @media (max-width: 768px) { .mt5000-main-container .btn-round-mt5000 { min-height: 50px; border-radius: 50px; padding: 12px 2rem; text-transform: uppercase; font-weight: bold; } } .mt5000-main-container .btn-round-mt5000:hover { background-color: #FFF; color: #909fdb; border-color: #909fdb; } @media (max-width: 991px) { .mt5000-main-container section { scroll-margin-top: 43px; } } .mt5000-main-container #mc_embed_shell { justify-items: center; } .mt5000-main-container #mc_embed_shell input { border: medium none; color: gray; font-size: 16px; padding: 8px 25px; width: auto; height: 50px; border-radius: 25px 0px 0px 25px; } @media (max-width: 575.98px) { .mt5000-main-container #mc_embed_shell input { width: 100%; height: 40px; font-size: 13px; } } .mt5000-main-container #mc_embed_shell input.email { background: #fff; } @media (max-width: 575.98px) { .mt5000-main-container #mc_embed_shell input.email { font-size: 13px; } } .mt5000-main-container #mc_embed_shell input[type="submit"] { background-color: var(--mt5000); } .mt5000-main-container #mc_embed_shell input[type="submit"]:hover { background-color: #566aba; } .mt5000-main-container #mc_embed_shell input[type="submit"] { text-align: center; transition: 0.5s; background-size: 200% auto; font-weight: bold; color: white; border-radius: 0 25px 25px 0; display: block; margin: 0; } .mt5000-main-container #mc_embed_shell #mc-embedded-subscribe-form { width: auto; justify-content: start; } @media (max-width: 991.98px) { .mt5000-main-container #mc_embed_shell #mc-embedded-subscribe-form { margin: auto; justify-content: center; } } .mt5000-main-container #mc_embed_shell input[type="submit"]:hover { background-position: right center; color: #fff; text-decoration: none; } .mt5000-main-container .video-header-mt5000 { position: relative; background-color: black; height: 55rem; min-height: 25rem; width: 100%; overflow: hidden; } .mt5000-main-container .video-header-mt5000 .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: black; opacity: 0.25; z-index: 1; } .mt5000-main-container .video-header-mt5000 video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .mt5000-main-container .video-header-mt5000 .container { position: relative; z-index: 2; } .mt5000-main-container .product-nav .product-nav-wrapper { overflow: visible; } .mt5000-main-container .product-nav .product-nav-wrapper ul, .mt5000-main-container .product-nav .product-nav-wrapper li { list-style-type: none; margin: 0; padding: 0; unicode-bidi: normal; } .mt5000-main-container .product-nav .product-nav-content { overflow-x: auto; scrollbar-width: none; display: flex; } .mt5000-main-container .product-nav .product-nav-content .product-nav-item { margin: 0 0 !important; padding: 0.75rem 1.5rem !important; cursor: pointer; color: #444; background: inherit; } @media (max-width: 768px) { .mt5000-main-container .product-nav .product-nav-content .product-nav-item { padding: 0.75rem 1rem 0.75rem 0 !important; } } .mt5000-main-container .product-nav .product-nav-content .product-nav-item.active, .mt5000-main-container .product-nav .product-nav-content .sub-menu.hover1 { color: var(--mt5000); } .mt5000-main-container .product-nav .dropdown-menu { background-color: #EEE; margin: -1px 0 0 !important; width: 100%; border: none; float: inherit; overflow: hidden; } .mt5000-main-container .product-nav .dropdown-menu>div { overflow-x: visible; scrollbar-width: none; display: flex; margin: 0 auto; padding: 0.25rem 1rem 0.75rem 2rem; } @media (max-width: 768px) { .mt5000-main-container .product-nav .dropdown-menu>div { overflow-x: auto; padding: 0.25rem 1rem 0.75rem; } } .mt5000-main-container .product-nav .dropdown-menu .btn { font-size: 1rem; font-weight: 400; text-transform: inherit; padding: .25rem 1rem !important; color: #6c757d; border: 1px solid #6c757d; margin-right: 0.5rem; min-width: fit-content; } .mt5000-main-container .product-nav .dropdown-menu .btn.active, .mt5000-main-container .product-nav .dropdown-menu .btn:hover { color: var(--mt5000); border-color: var(--mt5000) !important; background-color: #3dc1cf08; } @media (max-width: 768px) { .mt5000-main-container .product-nav .dropdown-menu .btn { font-size: 14px; min-height: inherit; } } .mt5000-main-container .grid { display: grid; grid-auto-rows: 4rem; } @media (max-width: 1199px) { .mt5000-main-container .grid { grid-auto-rows: 5rem; } } @media (max-width: 991px) { .mt5000-main-container .grid { grid-auto-rows: 7rem; } } @media (max-width: 768px) { .mt5000-main-container .grid { grid-auto-rows: 6rem; } } @media (max-width: 576px) { .mt5000-main-container .grid { grid-auto-rows: 6rem; } } @media (max-width: 400px) { .mt5000-main-container .grid { grid-auto-rows: 5.2rem; } } .mt5000-main-container .grid .grid-item { position: relative; margin: 0.3rem; overflow: hidden; } .mt5000-main-container .grid .grid-cell { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; height: 100%; width: 100%; background: linear-gradient(180deg, #e6edff 0%, #bcc2eac4 100%); background-size: cover; background-repeat: no-repeat; background-position: center bottom; padding: 1.5rem 1.5rem; } @media (max-width: 1199px) { .mt5000-main-container .grid .grid-cell { padding: 1rem 1.25rem; } } @media (max-width: 768px) { .mt5000-main-container .grid .grid-cell { padding: 1rem 0.75rem; } } @media (max-width: 576px) { .mt5000-main-container .grid .grid-cell { padding: 1rem 0.75rem; } } .mt5000-main-container .grid .grid-cell h2 { font-size: 1.75rem; } @media (max-width: 1280px) { .mt5000-main-container .grid .grid-cell h2 { font-size: 1.5rem; } } @media (max-width: 768px) { .mt5000-main-container .grid .grid-cell h2 { font-size: 1.25rem; } } @media (max-width: 576px) { .mt5000-main-container .grid .grid-cell h2 { font-size: 1.1rem; } } @media (max-width: 1280px) { .mt5000-main-container .grid .grid-cell h4 { font-size: 1.25rem; } } @media (max-width: 768px) { .mt5000-main-container .grid .grid-cell h4 { font-size: 1rem; } } .mt5000-main-container .grid .grid-cell p { margin-bottom: 0; } @media (max-width: 576px) { .mt5000-main-container .grid .grid-cell p { font-size: 0.75rem; } } .mt5000-main-container .grid .item-1 .grid-cell { background-image: url('https://static.gl-inet.com/www/images/products/gl-mt5000/mt5000_grid-vpn-server.jpg'); background-size: 135%; background-position: 50% 42%; } @media (max-width: 1199px) { .mt5000-main-container .grid .item-1 .grid-cell { background-image: url('https://static.gl-inet.com/www/images/products/gl-mt5000/mt5000_grid-vpn-server_mobile.jpg'); background-size: 123%; background-position: 82% 50%; } } @media (max-width: 991px) { .mt5000-main-container .grid .item-1 .grid-cell { background-image: url('https://static.gl-inet.com/www/images/products/gl-mt5000/mt5000_grid-vpn-server.jpg'); background-size: cover; background-position: 50% 50%; } } @media (max-width: 768px) { .mt5000-main-container .grid .item-1 .grid-cell { background-position: 50% 42%; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-1 .grid-cell { background-image: url('https://static.gl-inet.com/www/images/products/gl-mt5000/mt5000_grid-vpn-server_mobile.jpg'); background-size: cover; background-position: 50% 48%; } } @media (max-width: 500px) { .mt5000-main-container .grid .item-1 .grid-cell { background-size: 112%; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-1 .grid-cell div { text-align: center; } } .mt5000-main-container .grid .item-2 .grid-cell { background-size: 128%; background-position: 50% 100%; display: flex; flex-direction: column; } .mt5000-main-container .grid .item-2 .grid-cell img { position: relative; transform: translateX(-50%); left: 50%; width: 200%; } @media (max-width: 1199px) { .mt5000-main-container .grid .item-2 .grid-cell img { width: 100%; } } @media (max-width: 991px) { .mt5000-main-container .grid .item-2 .grid-cell img { width: 150%; margin-top: -0.5rem; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-2 .grid-cell img { width: 80%; left: 40%; margin-top: 0; } } @media (max-width: 400px) { .mt5000-main-container .grid .item-2 .grid-cell img { width: 100%; left: 50%; margin-top: -0.5rem; } } .mt5000-main-container .grid .item-3 .grid-cell { padding: 0 0; display: flex; flex-direction: column; justify-content: space-between; } .mt5000-main-container .grid .item-3 .grid-cell div { padding: 1.5rem 1.5rem 0 1.5rem; } @media (max-width: 1199px) { .mt5000-main-container .grid .item-3 .grid-cell div { padding: 1rem 1.25rem 0 1.25rem; } } @media (max-width: 768px) { .mt5000-main-container .grid .item-3 .grid-cell div { padding: 1rem 0.75rem 0 0.75rem; } } .mt5000-main-container .grid .item-3 .grid-cell .img-content img { position: relative; transform: translateX(-50%); left: 50%; width: 160%; } @media (max-width: 1199px) { .mt5000-main-container .grid .item-3 .grid-cell .img-content img { width: 100%; bottom: 0.5rem; } } @media (max-width: 991px) { .mt5000-main-container .grid .item-3 .grid-cell .img-content img { width: 179%; bottom: 2rem; } } @media (max-width: 768px) { .mt5000-main-container .grid .item-3 .grid-cell .img-content img { width: 180%; bottom: 4rem; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-3 .grid-cell .img-content img { width: 100%; bottom: 1rem; } } @media (max-width: 440px) { .mt5000-main-container .grid .item-3 .grid-cell .img-content img { bottom: 1.25rem; } } .mt5000-main-container .grid .item-4 .grid-cell { padding: 0 0; display: flex; justify-content: space-between; flex-direction: row; } @media (max-width: 768px) { .mt5000-main-container .grid .item-4 .grid-cell { flex-direction: column; } } .mt5000-main-container .grid .item-4 .grid-cell div { padding: 1.5rem 0 0 1.5rem; } @media (max-width: 1199px) { .mt5000-main-container .grid .item-4 .grid-cell div { padding: 1rem 0 1rem 1.25rem; } } @media (max-width: 768px) { .mt5000-main-container .grid .item-4 .grid-cell div { padding: 1rem 1rem 0 0.75rem; } } @media (max-width: 768px) { .mt5000-main-container .grid .item-4 .grid-cell h2 { white-space: nowrap; } } .mt5000-main-container .grid .item-4 .grid-cell .img-content { text-align: right; align-self: center; width: 60%; padding: 0 1rem 0 0; } @media (max-width: 1199px) { .mt5000-main-container .grid .item-4 .grid-cell .img-content { width: 70%; padding: 0 0.5rem 0 0; } } @media (max-width: 991px) { .mt5000-main-container .grid .item-4 .grid-cell .img-content { width: 67%; padding: 0 1rem 0 0; } } @media (max-width: 768px) { .mt5000-main-container .grid .item-4 .grid-cell .img-content { text-align: center; width: 68%; padding: 0; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-4 .grid-cell .img-content { text-align: center; width: 75%; } } .mt5000-main-container .grid .item-5 .grid-cell { background-position: 50% 50%; } .mt5000-main-container .grid .item-6 .grid-cell { background-position: 50% 50%; } .mt5000-main-container .grid .item-7 .grid-cell, .mt5000-main-container .grid .item-8 .grid-cell, .mt5000-main-container .grid .item-9 .grid-cell { padding: 1rem 1rem; } @media (max-width: 576px) { .mt5000-main-container .grid .item-7 .grid-cell, .mt5000-main-container .grid .item-8 .grid-cell, .mt5000-main-container .grid .item-9 .grid-cell { padding: 1rem 0.5rem; } } .mt5000-main-container .grid .item-7 .grid-cell>div, .mt5000-main-container .grid .item-8 .grid-cell>div, .mt5000-main-container .grid .item-9 .grid-cell>div { position: relative; top: 50%; transform: translateY(-50%); } .mt5000-main-container .grid .item-7 .grid-cell>div img, .mt5000-main-container .grid .item-8 .grid-cell>div img, .mt5000-main-container .grid .item-9 .grid-cell>div img { width: 75%; filter: drop-shadow(0px 0px 10px rgba(114, 154, 255, 0.4)); margin-bottom: 0.75rem; } @media (max-width: 1199px) { .mt5000-main-container .grid .item-7 .grid-cell>div img, .mt5000-main-container .grid .item-8 .grid-cell>div img, .mt5000-main-container .grid .item-9 .grid-cell>div img { width: 75%; margin-bottom: 0.5rem; } } @media (max-width: 991px) { .mt5000-main-container .grid .item-7 .grid-cell>div img, .mt5000-main-container .grid .item-8 .grid-cell>div img, .mt5000-main-container .grid .item-9 .grid-cell>div img { width: 80%; margin-bottom: 0.5rem; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-7 .grid-cell>div img, .mt5000-main-container .grid .item-8 .grid-cell>div img, .mt5000-main-container .grid .item-9 .grid-cell>div img { width: 80%; margin-bottom: 0.25rem; } } .mt5000-main-container .grid .item-7 .grid-cell>div p, .mt5000-main-container .grid .item-8 .grid-cell>div p, .mt5000-main-container .grid .item-9 .grid-cell>div p { line-height: 1.1; } @media (max-width: 768px) { .mt5000-main-container .grid .item-7 .grid-cell>div p, .mt5000-main-container .grid .item-8 .grid-cell>div p, .mt5000-main-container .grid .item-9 .grid-cell>div p { font-size: 0.75rem; } } .mt5000-main-container .grid .item-1 { grid-area: 1 / 1 / span 6 / span 3; } .mt5000-main-container .grid .item-2 { grid-area: 1 / 4 / span 6 / span 3; } .mt5000-main-container .grid .item-3 { grid-area: 1 / 10 / span 6 / span 3; } .mt5000-main-container .grid .item-5 { grid-area: 1 / 7 / span 3 / span 3; } .mt5000-main-container .grid .item-6 { grid-area: 4 / 7 / span 3 / span 3; } .mt5000-main-container .grid .item-4 { grid-area: 7 / 7 / span 3 / span 6; } .mt5000-main-container .grid .item-7 { grid-area: 7 / 1 / span 3 / span 2; } .mt5000-main-container .grid .item-8 { grid-area: 7 / 3 / span 3 / span 2; } .mt5000-main-container .grid .item-9 { grid-area: 7 / 5 / span 3 / span 2; } @media (max-width: 1199px) { .mt5000-main-container .grid .item-1 { grid-area: 1 / 1 / span 3 / span 6; } .mt5000-main-container .grid .item-2 { grid-area: 1 / 7 / span 3 / span 6; } .mt5000-main-container .grid .item-3 { grid-area: 4 / 1 / span 3 / span 4; } .mt5000-main-container .grid .item-6 { grid-area: 4 / 9 / span 3 / span 4; } .mt5000-main-container .grid .item-5 { grid-area: 4 / 5 / span 3 / span 4; } .mt5000-main-container .grid .item-4 { grid-area: 7 / 7 / span 2 / span 6; } .mt5000-main-container .grid .item-7 { grid-area: 7 / 1 / span 2 / span 2; } .mt5000-main-container .grid .item-8 { grid-area: 7 / 3 / span 2 / span 2; } .mt5000-main-container .grid .item-9 { grid-area: 7 / 5 / span 2 / span 2; } } @media (max-width: 991px) { .mt5000-main-container .grid .item-1 { grid-area: 1 / 1 / span 2 / span 3; } .mt5000-main-container .grid .item-2 { grid-area: 1 / 4 / span 2 / span 3; } .mt5000-main-container .grid .item-3 { grid-area: 3 / 4 / span 4 / span 3; } .mt5000-main-container .grid .item-4 { grid-area: 7 / 1 / span 2 / span 6; } .mt5000-main-container .grid .item-5 { grid-area: 3 / 1 / span 2 / span 3; } .mt5000-main-container .grid .item-6 { grid-area: 5 / 1 / span 2 / span 3; } .mt5000-main-container .grid .item-7 { grid-area: 9 / 1 / span 2 / span 2; } .mt5000-main-container .grid .item-8 { grid-area: 9 / 3 / span 2 / span 2; } .mt5000-main-container .grid .item-9 { grid-area: 9 / 5 / span 2 / span 2; } } @media (max-width: 576px) { .mt5000-main-container .grid .item-1 { grid-area: 1 / 1 / span 2 / span 6; } .mt5000-main-container .grid .item-2 { grid-area: 3 / 1 / span 2 / span 6; } .mt5000-main-container .grid .item-3 { grid-area: 5 / 1 / span 2 / span 3; } .mt5000-main-container .grid .item-4 { grid-area: 7 / 1 / span 2 / span 6; } .mt5000-main-container .grid .item-5 { grid-area: 9 / 1 / span 2 / span 6; } .mt5000-main-container .grid .item-6 { grid-area: 5 / 4 / span 2 / span 3; } .mt5000-main-container .grid .item-7 { grid-area: 11 / 1 / span 2 / span 2; } .mt5000-main-container .grid .item-8 { grid-area: 11 / 3 / span 2 / span 2; } .mt5000-main-container .grid .item-9 { grid-area: 11 / 5 / span 2 / span 2; } } .mt5000-main-container .mt5000-vpn { scroll-margin-top: 90px; position: relative; z-index: 1; } .mt5000-main-container .mt5000-vpn .vpn-bg { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center center; background-image: url('https://static.gl-inet.com/www/images/products/gl-mt5000/mt5000_vpn-bg.jpg'); mix-blend-mode: multiply; } .mt5000-main-container .mt5000-vpn .vpn-bg::after { content: ""; width: 100%; height: 100%; position: absolute; background: linear-gradient(180deg, #ffffff 0%, #f6f7ff00 15%, #f6f7ff00 85%, #ffffff 100%); display: flex; top: 0; } .mt5000-main-container .mt5000-vpn .bg { position: relative; margin-top: -3rem; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-vpn .bg { margin-top: -3rem; } } @media (max-width: 991px) { .mt5000-main-container .mt5000-vpn .bg { margin-top: -1rem; } } .mt5000-main-container .mt5000-vpn .bg>div { display: flex; height: 100%; flex-direction: column; justify-content: center; position: relative; } .mt5000-main-container .mt5000-vpn .bg>div h2 { position: relative; font-size: clamp(16px, 19vw, 360px); line-height: 1; color: var(--mt5000); opacity: 0; left: 50%; transform: translateX(-50%) scale(0); transition: transform 1.5s ease-in-out, opacity 1.7s ease-out; margin-bottom: -4%; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-vpn .bg>div h2 { font-size: clamp(16px, 23vw, 280px); margin-bottom: -8%; } } @media (max-width: 991px) { .mt5000-main-container .mt5000-vpn .bg>div h2 { font-size: clamp(16px, 25vw, 360px); } } @media (max-width: 576px) { .mt5000-main-container .mt5000-vpn .bg>div h2 { font-size: 38vw; } } .mt5000-main-container .mt5000-vpn .bg>div h2.font-stroke { position: absolute; top: 0; z-index: 999; color: #5838e4; mix-blend-mode: lighten; text-shadow: 0 0 8px #ffffff4d; } .mt5000-main-container .mt5000-vpn .bg>div img { max-width: 600px; width: clamp(200px, 23%, 440px); opacity: 0; transform: scale(3) translate(0, 0%); transition: transform 1s ease, opacity 0.5s ease-out; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-vpn .bg>div img { width: clamp(200px, 26%, 340px); } } @media (max-width: 991px) { .mt5000-main-container .mt5000-vpn .bg>div img { transform: scale(1) translate(0, 0%); width: clamp(200px, 32%, 340px); } } @media (max-width: 576px) { .mt5000-main-container .mt5000-vpn .bg>div img { width: 50%; } } .mt5000-main-container .mt5000-vpn .vpn-speed-bar { position: relative; transform-origin: left; transform: scaleX(0); transition: all 1s ease; transition-delay: 0.5s; } .mt5000-main-container .mt5000-vpn .vpn-speed-bar:nth-child(2) { transition-delay: 0.3s; } .mt5000-main-container .mt5000-vpn .vpn-speed-bar .mt5000-bg-primary { background-color: #909fdb !important; } .mt5000-main-container .mt5000-vpn .vpn-speed-bar .mt5000-bg-secondary { background-color: #9e79d8 !important; } .mt5000-main-container .mt5000-vpn.in-view .bg h2 { opacity: 1; transform: translate(-50%) scale(1); } .mt5000-main-container .mt5000-vpn.in-view .bg img { opacity: 1; transform: scale(1) translate(0, -17%); } .mt5000-main-container .mt5000-vpn.in-view .vpn-speed-bar { transform: scaleX(1); } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } .mt5000-main-container .mt5000-dpi { position: relative; overflow: hidden; scroll-margin-top: 96px; } @media (max-width: 768px) { .mt5000-main-container .mt5000-dpi { scroll-margin-top: 90px; display: flex; flex-direction: column; } } .mt5000-main-container .mt5000-dpi .container { position: relative; z-index: 10; } .mt5000-main-container .mt5000-dpi .bg { position: relative; display: flex; justify-content: center; padding-bottom: 45vh; } @media (max-width: 576px) { .mt5000-main-container .mt5000-dpi .bg { padding-bottom: 400px; } } .mt5000-main-container .mt5000-dpi .bg .container { background-image: url(https://static.gl-inet.com/www/images/products/gl-mt5000/mt5000_dpi.png); background-size: 50%; background-position: center center; background-repeat: no-repeat; width: 100%; height: 45vh; position: absolute; z-index: 0; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-dpi .bg .container { background-size: 70%; } } @media (max-width: 768px) { .mt5000-main-container .mt5000-dpi .bg .container { background-size: 80%; } } @media (max-width: 576px) { .mt5000-main-container .mt5000-dpi .bg .container { height: 400px; } } .mt5000-main-container .mt5000-dpi .bg .container>div { position: relative; width: 100%; height: 100%; } .mt5000-main-container .mt5000-dpi .bg .container>div img.mt5000 { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.5); opacity: 0; transition: all 1.2s ease; z-index: 4; } .mt5000-main-container .mt5000-dpi .bg .container>div img.rad { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: all 2s ease; opacity: 0; z-index: 1; width: auto; height: calc(100% + 2.75rem); animation-delay: 1s; } @media (max-width: 991px) { .mt5000-main-container .mt5000-dpi .bg .container>div img.rad { height: calc(100% + 1rem); } } .mt5000-main-container .mt5000-dpi .bg.in-view .container>div img.mt5000 { transform: translate(-50%, -50%) scale(0.45) !important; opacity: 1; } .mt5000-main-container .mt5000-dpi .bg.in-view .container>div img.rad { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; } .mt5000-main-container .mt5000-port { background-image: linear-gradient(150deg, #f6f7ff 0%, #f6f7ff 100%); height: 180vh; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port { height: inherit; } } .mt5000-main-container .mt5000-port .container-fluid { position: sticky; top: 0; padding: 30vh 0 0 0; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .container-fluid { position: relative; height: inherit; top: 0; padding: 3rem 0 0; } } .mt5000-main-container .mt5000-port .mt5000-port-container { width: 84vw; max-width: 1600px; margin: auto; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-port .mt5000-port-container { width: calc(100% - 30px); } } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container { max-width: 90vw; height: inherit; scroll-margin-top: 100px; } } .mt5000-main-container .mt5000-port .mt5000-port-container#port1 .img-content .pt1 { width: 33%; position: absolute; transform: translateX(-50%); left: 41.5%; top: 80%; white-space: nowrap; text-align: right; animation: fadeout auto linear; animation-direction: normal; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timeline: view(); animation-range-start: 45%; animation-range-end: 50%; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container#port1 .img-content .pt1 { animation: none; } } .mt5000-main-container .mt5000-port .mt5000-port-container#port1 .img-content .pt1 .line { width: 0; height: 4rem; margin-left: 95%; border-left: 1px #000000 solid; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container#port1 .img-content .pt1 .line { height: 2.5rem; } } .mt5000-main-container .mt5000-port .mt5000-port-container#port1 .img-content .pt2 { width: 42%; position: absolute; transform: translateX(0); left: 66.5%; top: 75%; text-align: left; animation: fadeout auto linear; animation-direction: normal; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timeline: view(); animation-range-start: 45%; animation-range-end: 50%; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container#port1 .img-content .pt2 { animation: none; width: auto; } } .mt5000-main-container .mt5000-port .mt5000-port-container#port1 .img-content .pt2 .line { width: 0; height: 4rem; margin-left: 5%; border-left: 1px #000000 solid; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container#port1 .img-content .pt2 .line { height: 2.5rem; } } .mt5000-main-container .mt5000-port .mt5000-port-container#port1 .text-content { animation: fadeout auto linear; animation-direction: normal; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timeline: view(); animation-range-start: 45%; animation-range-end: 50%; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container#port1 .text-content { animation: none; } } @media (max-width: 1199px) { .mt5000-main-container .mt5000-port .mt5000-port-container#port1 .text-content>div { transform: translateY(-50%); } } .mt5000-main-container .mt5000-port .mt5000-port-container#port2 { height: 0; opacity: 0; animation: fadein auto linear; animation-direction: normal; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timeline: view(); animation-range-start: 30%; animation-range-end: 40%; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container#port2 { height: inherit; animation: none; opacity: 1; } } .mt5000-main-container .mt5000-port .mt5000-port-container#port2>div { position: relative; transform: translateY(-100%); } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container#port2>div { transform: none; } } .mt5000-main-container .mt5000-port .mt5000-port-container#port2 .img-content .pt1 { width: 33%; position: absolute; transform: translateX(-50%); left: 53.5%; top: 75.5%; white-space: nowrap; text-align: right; } .mt5000-main-container .mt5000-port .mt5000-port-container#port2 .img-content .pt1 .line { width: 0; height: 4rem; margin-left: 85%; border-left: 1px #000000 solid; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container#port2 .img-content .pt1 .line { height: 2.5rem; } } .mt5000-main-container .mt5000-port .mt5000-port-container#port2 .img-content .pt2 { width: 29%; position: absolute; transform: translateX(0); left: 67.5%; top: 69%; white-space: nowrap; text-align: center; } .mt5000-main-container .mt5000-port .mt5000-port-container#port2 .img-content .pt2 .line { width: 0; height: 3rem; margin: auto; border-left: 1px #000000 solid; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container#port2 .img-content .pt2 .line { height: 2rem; } } @media (max-width: 1199px) { .mt5000-main-container .mt5000-port .mt5000-port-container#port2 .text-content>div { transform: translateY(-50%); } } .mt5000-main-container .mt5000-port .mt5000-port-container .img-content { position: relative; max-width: 50vh; max-height: 50vh; margin: auto; overflow: visible; margin: 3rem 0 5rem; float: right; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container .img-content { float: inherit; margin: 0 0 1.5rem; } } .mt5000-main-container .mt5000-port .mt5000-port-container .img-content p:nth-child(3) { font-size: 0.7em; } @media (max-width: 576px) { .mt5000-main-container .mt5000-port .mt5000-port-container .img-content p { font-size: 0.7em; } } .mt5000-main-container .mt5000-port .mt5000-port-container .img-content img { width: 100%; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-port .mt5000-port-container .img-content img { width: 100%; } } .mt5000-main-container .mt5000-port .mt5000-port-container .text-content>div { position: relative; top: 50%; transform: translateY(-50%); } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container .text-content>div { top: 0; transform: none !important; } } .mt5000-main-container .mt5000-port .mt5000-port-container .text-content .row { justify-content: start; -webkit-justify-content: start; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container .text-content .row { justify-content: center; -webkit-justify-content: center; } } .mt5000-main-container .mt5000-port .mt5000-port-container .text-content img { width: 50%; } @media (max-width: 991px) { .mt5000-main-container .mt5000-port .mt5000-port-container .text-content img { width: 50%; } } @media (max-width: 768px) { .mt5000-main-container .mt5000-port .mt5000-port-container .text-content img { max-width: 30vw; width: 40%; } } .mt5000-main-container .mt5000-port .mt5000-port-container .text-content h5 { position: relative; padding: 10px 16px; margin: 0; text-decoration: none; font-size: 1.1rem; color: #00b3ff; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-port .mt5000-port-container .text-content h5 { padding: 10px 8px; } } .mt5000-main-container .mt5000-port .mt5000-port-container .text-content h5::before { content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-top: 2px solid #00b3ff; border-left: 2px solid #00b3ff; transition: 0.5s; } .mt5000-main-container .mt5000-port .mt5000-port-container .text-content h5::after { content: ''; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-bottom: 2px solid #00b3ff; border-right: 2px solid #00b3ff; transition: 0.5s; } .mt5000-main-container .mt5000-connectivity { position: relative; z-index: 1; overflow-x: clip; } @media (max-width: 991px) { .mt5000-main-container .mt5000-connectivity .row { margin-top: -8rem; } } @media (max-width: 576px) { .mt5000-main-container .mt5000-connectivity .row { margin-top: -2rem; } } @media (max-width: 991px) { .mt5000-main-container .mt5000-connectivity .row:nth-child(2) { margin-top: -2rem; } } .mt5000-main-container .mt5000-connectivity .connectivity-1 .img-content { justify-self: start; } .mt5000-main-container .mt5000-connectivity .connectivity-1 .img-content img { width: 100%; position: relative; transform-origin: bottom right; transform: rotate(-23deg) translate(4%, 56%); opacity: 0; transition: transform 1.3s ease, opacity 1s ease; } @media (max-width: 991px) { .mt5000-main-container .mt5000-connectivity .connectivity-1 .img-content img { width: 75%; transform: rotate(-11deg) translate(11%, 3%) !important; opacity: 1 !important; } } @media (max-width: 768px) { .mt5000-main-container .mt5000-connectivity .connectivity-1 .img-content img { width: 90%; } } .mt5000-main-container .mt5000-connectivity .connectivity-1 h3 { position: relative; opacity: 0; transform: translate(100%, 0); transition: all 1s ease; transition-delay: 0.2s; } @media (max-width: 991px) { .mt5000-main-container .mt5000-connectivity .connectivity-1 h3 { opacity: 1 !important; transform: inherit !important; } } .mt5000-main-container .mt5000-connectivity .connectivity-1 p { opacity: 0; transform: translate(100%, 0); transition: all 1s ease; transition-delay: 0.4s; } @media (max-width: 991px) { .mt5000-main-container .mt5000-connectivity .connectivity-1 p { opacity: 1 !important; transform: inherit !important; } } .mt5000-main-container .mt5000-connectivity .connectivity-2 .img-content { justify-self: end; } .mt5000-main-container .mt5000-connectivity .connectivity-2 .img-content img { width: 100%; position: relative; transform-origin: 50% 50%; transform: rotate(34deg) translate(-1%, 56%); opacity: 0; transition: transform 1.3s ease, opacity 1s ease; transition-delay: .7s; } @media (max-width: 991px) { .mt5000-main-container .mt5000-connectivity .connectivity-2 .img-content img { width: 75%; transform: rotate(10deg) translate(1%, 9%) !important; opacity: 1 !important; } } @media (max-width: 768px) { .mt5000-main-container .mt5000-connectivity .connectivity-2 .img-content img { width: 90%; } } .mt5000-main-container .mt5000-connectivity .connectivity-2 h3 { position: relative; opacity: 0; transform: translate(-100%, 0); transition: all 1s ease; transition-delay: 0.2s; } @media (max-width: 991px) { .mt5000-main-container .mt5000-connectivity .connectivity-2 h3 { opacity: 1 !important; transform: inherit !important; } } .mt5000-main-container .mt5000-connectivity .connectivity-2 p { opacity: 0; transform: translate(-100%, 0); transition: all 1s ease; transition-delay: 0.4s; } @media (max-width: 991px) { .mt5000-main-container .mt5000-connectivity .connectivity-2 p { opacity: 1 !important; transform: inherit !important; } } .mt5000-main-container .mt5000-connectivity.in-view .connectivity-1 img { opacity: 1; transform: rotate(-16deg) translate(0, -11%); } .mt5000-main-container .mt5000-connectivity.in-view .connectivity-1 h3, .mt5000-main-container .mt5000-connectivity.in-view .connectivity-1 p { opacity: 1; transform: inherit; } .mt5000-main-container .mt5000-connectivity.in-view .connectivity-2 img { opacity: 1; transform: rotate(20deg) translate(0, -11%); } .mt5000-main-container .mt5000-connectivity.in-view .connectivity-2 h3, .mt5000-main-container .mt5000-connectivity.in-view .connectivity-2 p { opacity: 1; transform: inherit; } .mt5000-main-container .mt5000-openwrt { scroll-margin-top: 96px; } .mt5000-main-container .mt5000-openwrt .mt5000-cardlist-row { justify-content: space-between; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-openwrt .mt5000-cardlist-row { justify-content: center; } } .mt5000-main-container .mt5000-openwrt .mt5000-cardlist-col { padding: 0 0.5rem; opacity: 0; transition: opacity 0.5s ease; } .mt5000-main-container .mt5000-openwrt .mt5000-cardlist-col:first-child { margin-top: 0; } .mt5000-main-container .mt5000-openwrt .mt5000-cardlist-col:nth-child(2) { animation-delay: 250ms; } @media (max-width: 991px) { .mt5000-main-container .mt5000-openwrt .mt5000-cardlist-col { margin-top: 0 !important; margin-bottom: 1rem; } } .mt5000-main-container .mt5000-openwrt .mt5000-cardlist-col.in-view.animate__animated { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .mt5000-main-container .mt5000-openwrt .card { padding: 1rem; border: 3px solid var(--mt5000); background: rgba(255, 255, 255, 1); transition: all .3s ease; flex-direction: column; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-openwrt .card { flex-direction: row; } } @media (max-width: 991px) { .mt5000-main-container .mt5000-openwrt .card { flex-direction: column; transform: none !important; } } @media (max-width: 1199px) { .mt5000-main-container .mt5000-openwrt .card .card-body, .mt5000-main-container .mt5000-openwrt .card .card-img { flex: 0 1 50%; } } @media (max-width: 991px) { .mt5000-main-container .mt5000-openwrt .card .card-body, .mt5000-main-container .mt5000-openwrt .card .card-img { flex: 1 1 auto; padding: 0.5rem 0.5rem 0; } } .mt5000-main-container .mt5000-openwrt .card .card-img { align-content: center; text-align: center; } .mt5000-main-container .mt5000-openwrt .card .card-img img { width: 90%; margin: auto; transition: all .3s ease; margin-bottom: 1.25rem; } @media (max-width: 1199px) { .mt5000-main-container .mt5000-openwrt .card .card-img img { width: 100%; padding: 0 1rem; margin-bottom: 0; } } @media (max-width: 991px) { .mt5000-main-container .mt5000-openwrt .card .card-img img { width: 100%; padding: 0 0; margin-bottom: 1.25rem; } } .mt5000-main-container .mt5000-openwrt .card:hover img { transform: scale(1.03) !important; } .mt5000-main-container .horizontal-scroll { position: relative; height: 350vh; background-color: transparent; } .mt5000-main-container .horizontal-scroll .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .mt5000-main-container .horizontal-scroll .overlay::after { content: ""; width: 100%; height: 100%; position: absolute; background: linear-gradient(180deg, #f6f7ff 0%, #f6f7ff88 15%, #f6f7ff88 85%, #ffffff 100%); display: flex; top: 0; } .mt5000-main-container .horizontal-scroll .overlay .bg-control { height: 100vh; width: 100%; position: sticky; top: 0; } .mt5000-main-container .horizontal-scroll .overlay .bg-control video { width: 100%; height: 100%; object-fit: cover; } .mt5000-main-container .horizontal-scroll .figure-list { gap: 0.25rem; } .mt5000-main-container .model-comparison .comparison-detail>div i.fa-crown { color: var(--mt5000); } .mt5000-main-container .model-comparison .comparison-detail div:nth-child(2) { background-color: var(--mt5000); } @media (max-width: 768px) { .mt5000-main-container .model-comparison .comparison-detail div:nth-child(2) { background-color: inherit; } } .mt5000-main-container .tiny-slider-controls.circle-controls a:hover { background-color: var(--mt5000); } Meet Brume 3 MT5000 High-speed VPN Security Gateway Wired Security Gateway for Home and SOHO As the fully upgraded successor in the Brume series, Brume 3 is a high-performance wired VPN security gateway that brings DPI control to homes and small offices. It delivers robust multi-WAN connectivity and advanced security features to safeguard your devices and ensure seamless network operation. Achieving blazing-fast VPN speeds of up to 1,100 Mbps via WireGuard®, it offers exceptional performance for remote work and personal use. Housed in a vibrant, modern casing with convenient Type-C power input, Brume 3 stands as a powerful yet cost-effective networking powerhouse. Extreme VPN Performance: Reaches up to 1,100 Mbps peak VPN throughput with WireGuard®, and up to 1,000 Mbps with OpenVPN-DCO Tri-port Multi-Gigabit Connectivity: Features three 2.5GbE ports with flexible WAN/LAN configuration for maximum wired throughput VPN Traffic Obfuscation: Masks VPN traffic to evade detection and overcome restrictive networks Integrated Security Analytics: Includes free DPI detection for enhanced network safety and granular traffic analysis. Versatile Expansion: Equipped with a USB 3.0 port for high-speed external storage or peripheral connectivity View Specs Online Guide Previous Next .product-show-list { padding: 0; margin: 0 } .product-show-list>li { list-style-type: none; margin: 0; padding: 0; display: none } .product-show-list>li.active { display: block } .product-show-list model-viewer { display: block; width: 100%; height: 553px } @media(max-width:768px) { .product-show-list model-viewer { height: calc(90vw - 2.5rem) } } .product-type-btn-list { text-align: center; padding-top: 15px } .product-type-btn-list a { cursor: pointer; padding: 5px 10px; border-radius: 30px; margin: 10px } .product-type-btn-list a i { margin-right: 5px } .product-type-btn-list a:hover { background-color: rgba(0, 0, 0, .1) } .product-type-btn-list a.active { background-color: rgba(0, 0, 0, .8); color: #fff } @media (min-width: 1200px) { .col-20percent { flex: 0 0 20%; max-width: 20%; } .mt5000-main-container .container { max-width: 1400px; } } .btn-outline-secondary { color: #484848; border-color: #484848; } .vpn-speed-bar { background: 0 0; border-radius: 0%; height: 30px; } .tiny-slider-item-beta-tester-review { padding: 0 1rem; vertical-align: middle; display: inline-flex; //transform: translateX(-50%); @media (max-width: 1440px) { transform: translateX(0); } @media (max-width: 991px) { vertical-align: top; } .tiny-slider-review-card { display: flex; height: 100%; .row { background-color: #ffffff; margin: 0; align-items: center; @media (max-width: 991px) { align-items: flex-start; } @media (max-width: 768px) { margin-right: 0; } .card-image { height: 100%; @media (max-width: 991px) { height: auto; } img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px 0 0 15px; @media (max-width: 991px) { border-radius: 15px 15px 0 0; width: 100%; height: auto; } } } p { font-size: 1.1rem; } } } } document.querySelectorAll(".product-type-btn-list a").forEach(function (e) { e.addEventListener("click", function () { document.querySelectorAll(".product-type-btn-list a").forEach(function (e) { e.classList.remove("active") }), this.classList.add("active"); var e = this.getAttribute("data-btn"); document.querySelectorAll(".product-show-list li").forEach(function (t) { t.getAttribute("data-type") === e.charAt(0).toUpperCase() + e.slice(1) ? t.classList.add("active") : t.classList.remove("active") }) }) }) Highlight Features Scenarios CompareReviews Specs let currentModel = ""; window.addEventListener("scroll", function () { document.querySelectorAll(".product-nav-section").forEach(e => { let t = e.offsetTop; pageYOffset >= t - 163 && (currentModel = e.getAttribute("id")) }), document.querySelectorAll(".product-nav-item").forEach(e => { e.classList.remove("active") }), document.querySelectorAll(".sub-menu").forEach(e => { e.classList.remove("hover1") }), document.querySelectorAll(".dropdown-menu").forEach(e => { e.style.display = "none" }); const e = document.querySelector(`.product-nav-item.${currentModel}`); if (e) { e.classList.add("active"); const n = e.parentElement, t = n ? n.parentElement : null; if (t && t.classList.contains("dropdown-menu")) { const n = t.dataset.dropdownMenu; if (n) { t.style.display = "flex"; const s = document.querySelector(`.product-nav-wrapper .sub-menu[data-dropdown-menu="${n}"]`); s && s.classList.add("active"), setTimeout(() => { const s = e, n = t.querySelector(".container-md"); if (n) { const e = n.offsetWidth, t = s.offsetLeft, o = s.offsetWidth, i = t - e / 2 + o / 2; n.scrollTo({ left: i, behavior: "smooth" }) } }, 50) } } } }), document.querySelectorAll(".sub-menu").forEach(e => { const n = e.dataset.dropdownMenu, t = document.querySelector(`.dropdown-menu[data-dropdown-menu="${n}"]`); if (!t) return; e.addEventListener("click", n => { n.preventDefault(); const s = t.style.display === "flex"; document.querySelectorAll(".dropdown-menu").forEach(e => { e.style.display = "none" }), document.querySelectorAll(".sub-menu").forEach(e => { e.classList.remove("hover1") }), s || (t.style.display = "flex", e.classList.add("hover1")) }) }) VPN Server Performance Up to 1,100 Mbps Three 2.5G Ports Boosted Wired Connections Intelligent QoS Prioritize What Matters VPN Obfuscation Disguise VPN Traffic DPI-based Protection Continuous Traffic Monitoring Smooth SQM Reduce Latency Under Load Multi-WAN Failover OpenWrt 21.02Kernel 5.4.281 USB3.0 Data Port Unleash Next-level VPN Power Building on the trusted legacy of the Brume series, Brume 3 propels VPN performance to an entirely new tier. With hardware-accelerated OpenVPN-DCO and WireGuard®, it achieves breakneck speeds of up to 1,100 Mbps, delivering a seamless, lag-free secure connection. Whether you are accessing your home lab, transferring massive files, or shielding your entire LAN, the experience feels instantaneous. This is a massive evolution—over 3 times faster than the Brume 2 (GL-MT2500)—bringing enterprise-grade VPN performance into a compact, accessible gateway. VPN VPN WireGuard® Max. 1100Mbps OpenVPN-DCO Max. 1000Mbps * Tests conducted on a local network. Real-world speeds may differ depending on your network configuration. Trusted by 30+ VPN Partners LEARN MORE ABOUT OUR VPN SOLUTIONS Enterprise-grade Security with Deep Packet Inspection Leverage Deep Packet Inspection (DPI) to automatically filter malicious traffic, gambling sites, and malware, ensuring a secure network environment. Beyond automatic filtering, you gain granular control to manually block specific apps, domains, or IPs. With a continuously updated security database, Brume 3 stays ahead of emerging threats. Full Network Visibility via Real-time Dashboard Gain actionable insights with a visual dashboard that monitors application usage in real-time. Track traffic trends over a 7-day period to spot anomalies or bandwidth hogs instantly. It’s the ultimate tool for households and small businesses to maintain total oversight of their network health. Eliminate Bufferbloat with Smart Queue Management Enjoy faster, smoother connections. Brume 3 features built-in Smart Queue Management (SQM) designed to combat bufferbloat. Once enabled, it keeps network latency minimal even when the line is saturated. Whether for video calls or streaming, SQM optimizes the traffic queue for every device on your LAN, ensuring a responsive connection during heavy usage. Dynamic QoS for Application Prioritization When bandwidth is scarce, Brume 3 knows what matters most. Dynamic QoS intelligently allocates resources, ensuring critical tasks like video conferencing and online gaming remain smooth while background downloads take a back seat. It balances traffic on the fly to maximize responsiveness across the board. Stealth VPN Obfuscation Brume 3 incorporates advanced VPN obfuscation technology to conceal the telltale signatures of VPN traffic, enabling it to evade detection by DPI (Deep Packet Inspection) systems. Traditional VPNs can bypass basic firewalls, but are easily blocked by DPI-based censorship systems. Obfuscated VPNs, however, work even on advanced firewalls that block standard VPN traffic. By effectively hiding the fact that you are even using a VPN, it reduces the risk of being flagged, throttled, or blocked, resulting in a more stable and reliable connection. This makes it ideal for bypassing strict regional controls or for anyone seeking enhanced privacy and consistent, uninterrupted access. Wired Connectivity Excellence Brume 3 delivers fast, flexible, and reliable wired performance to support every network setup. 2.5 Gbps WAN Port 2 x 2.5Gbps LAN Ports Smart 2.5G Port Flexibility Brume 3 comes with three versatile 2.5G Ethernet ports, giving you a fast and flexible foundation for any wired setup. The dedicated WAN port delivers full 2.5G performance and can also be reassigned as a LAN port, while LAN1 and LAN2 each support full 2.5G speeds as well, allowing you to tailor your network exactly the way you need it. Whether you're optimizing for speed, expanding your wired devices, or setting up a secure home gateway, Brume 3 keeps everything running smoothly and efficiently. LAN1 can be switched to WAN. USB 3.0 Port Multi-WAN Failover & Load Balancing Brume 3 lets you convert LAN1 into a second WAN port, enabling a robust dual-ISP setup with automatic failover to ensure your internet is always on. Intelligent load balancing across multiple links ensures seamless, reliable performance for NAS devices, media servers, and other high-bandwidth equipment in your home or small office. function btnActive(e) { e == 1 ? (document.getElementById("btn_port1").classList.add("active"), document.getElementById("btn_port2").classList.remove("active")) : (document.getElementById("btn_port2").classList.add("active"), document.getElementById("btn_port1").classList.remove("active")) } Flexible 5V/3A Input for High Performance Brume 3 is built with a dedicated Type-C power port requiring a 5V/3A power input, ensuring a stable performance for its high-speed features like up to 1,100 Mbps VPN speed and Multi-WAN. It offers maximum convenience by allowing the use of standard PD adapters for powering, simplifying your setup and ensuring robust network availability. Versatile USB-C 3.0 Expansion Brume 3 features a secondary Type-C port on the right side of the network ports, serving as a high-speed USB 3.0 data interface. This multi-purpose port supports 3G/4G/5G dongles for cellular backup and external drives for rapid data access. By delivering a 5V/2A power output to connected peripherals, it seamlessly enables a wide range of expanded functionality. Build Brume 3 Your Way Brume 3 combines robust hardware and OpenWrt architecture to let you build, customize, and control your network exactly the way you want. Full Control Starts with OpenWrt Powered by OpenWrt 21.02 (Linux Kernel 5.4.281), Brume 3 (GL-MT5000) is built for users who want full control over their network. With 1GB DDR4 memory and 8GB eMMC storage, it provides ample headroom to install packages, run services, and experiment freely — all on a compact, low-power platform. One Device, Multiple Roles Turn Brume 3 into whatever you need: a highly customized VPN gateway, a system-wide ad blocker, a lightweight NAS with external storage, or a DLNA media server. Its open architecture and robust hardware make it ideal for deploying advanced features powered by OpenWrt 21.02 or building a personal home lab without the cost or complexity of traditional servers. A Gateway That Does It All Brume 3 unites speed, security, and reliability—whether gaming, staying connected at home, running a small business, or building a private cloud, every connection feels smooth, safe, and effortless. Always-on Home Connectivity Video calls stay clear, meetings stay on track—even if one connection drops. With Brume 3 quietly switching in the background, your home network keeps flowing seamlessly, so work, calls, and collaboration never skip a beat. Game Without Limits Consistent, responsive gameplay while everyone at home stays connected. Brume 3 dedicates priority to your gaming traffic with built-in QoS and SQM, so every match feels fluid, every reaction instant, and every win fully earned. Enterprise Power, Office Peace The office runs with quiet confidence—remote staff connect securely, data flows seamlessly, and operations stay uninterrupted. Brume 3 brings enterprise-grade VPN protection to small businesses, keeping networks safe and efficient without subscription fees. A Playground for Network Enthusiasts Ideas flow freely at the desk—custom setups take shape, experiments run effortlessly, and every tweak responds instantly. Powered by OpenWrt 21.02, Brume 3 empowers tech enthusiasts with a playful, fully open network ready for exploration. Private Cloud at Home Photos, files, and media move securely from anywhere to your home NAS, fast and invisible to prying eyes. With Brume 3 as your VPN server and Beryl 7 (GL-MT3600BE) connecting as a client, your devices form a seamless, private cloud—safe, swift, and effortless. document.addEventListener("DOMContentLoaded", function () { let e; function t() { if (document.querySelector("#scenarios")) { gsap.registerPlugin(ScrollTrigger); const t = document.querySelector(".figure-list"), n = document.querySelectorAll(".figure-list figure"), s = document.querySelector(".horizontal-scroll .container"); if (!n.length || !s) return !1; e && (e.kill(), ScrollTrigger.getAll().forEach(e => e.kill())); const a = n[0].offsetWidth, r = s.offsetWidth, o = window.getComputedStyle(s), c = parseFloat(o.paddingLeft) || 0, l = parseFloat(o.paddingRight) || 0, d = r - c - l; let i = a * n.length - d; e = gsap.timeline({ scrollTrigger: { trigger: ".mt5000-main-container .horizontal-scroll", start: "top top", end: "bottom bottom", scrub: 1, markers: !1 } }), e.to(t, { x: 0, duration: .05, ease: "none" }).to(t, { x: -i }).to(t, { x: -i, duration: 1 }), ScrollTrigger.refresh() } } t(); let n; window.addEventListener("resize", function () { clearTimeout(n), n = setTimeout(function () { t() }, 250) }) }) Model Comparison Brume 2 (GL-MT2500 / GL-MT2500A)VPN Gateway with 2.5G Port VS Brume 3 (GL-MT5000)Max 1,100 Mbps VPN Throughput MediaTek, Dual-core @1.3GHz CPU CPU MediaTek, Quad-core @2.0GHz 1 x 2.5G WAN, 1 x 1G LAN Ethernet Port Ethernet Port 1 x 2.5G WAN, 1 x 2.5G WAN / LAN, 1 x 2.5G LAN WAN Port: 10 / 100 / 1000 / 2500MbpsLAN Port: 10 / 100 / 1000Mbps Ethernet Speed Ethernet Speed WAN / LAN Port:10 / 100 / 1000 / 2500Mbps Max. 150Mbps OpenVPN(Via Ethernet) OpenVPN(Via Ethernet) Max. 1000Mbps (with DCO support) Max. 355Mbps WireGuard®(Via Ethernet) WireGuard®(Via Ethernet) Max. 1100Mbps What Beta Testers are Saying slide 7 to 9 of 7 I configured The Brume 3 (GL-MT5000) as a VPN Security Gateway besides my existing infrastructure. ... Combined with a travel router, this can make a very easy and secure setup for all the road warriors out there! @h0bbel The Brume 3 is an amazing device. It is small and typically uses less than 3 watts of power, but protects your network. It can be used as a VPN client or server and easily brought with you on a trip. ... it is powerful for something so small. All of these functions can be turned on or off as you prefer. This is one of the most useful devices I have in my network. @Dondi I used the Brume 3 on STARLINK to keep a branch office connected to the main office. It worked flawlessly. Very powerful device for a small office or pop-up kiosk. @Danikwth The Brume 3 is a significant upgrade in VPN speeds, alongside its new stealth VPN Obfuscation. This makes it a powerhouse to phone home to while traveling. @cassshh I like the new DPI (Deep Packet Inspection) feature, which is filtering known malicious actors from the internet to protect computers and block adult sites to protect the family. Even my parents can activate DPI and use an advanced network protection layer, without deep knowledge about IT and networks. @LupusE The Brume 3 is nothing short of amazing, ... you've got a phenomenal travel router that rivals heavyweight home routers all while sipping under 15w of power ... All this packaged in a tiny format that runs practically inaudible, even at load. GL.iNet has really hit it out of the ballpark with the Brume 3. @phantasm22 The Brume 3 has been reliable and easy to set up, with solid performance for everyday routing and VPN use. It runs quietly, stays cool, and handles multiple connections without issues. Overall, it feels well-built and suitable for both home and small office setups. @ellio.t I configured The Brume 3 (GL-MT5000) as a VPN Security Gateway besides my existing infrastructure. ... Combined with a travel router, this can make a very easy and secure setup for all the road warriors out there! @h0bbel The Brume 3 is an amazing device. It is small and typically uses less than 3 watts of power, but protects your network. It can be used as a VPN client or server and easily brought with you on a trip. ... it is powerful for something so small. All of these functions can be turned on or off as you prefer. This is one of the most useful devices I have in my network. @Dondi I used the Brume 3 on STARLINK to keep a branch office connected to the main office. It worked flawlessly. Very powerful device for a small office or pop-up kiosk. @Danikwth The Brume 3 is a significant upgrade in VPN speeds, alongside its new stealth VPN Obfuscation. This makes it a powerhouse to phone home to while traveling. @cassshh 2.5G Ethernetports USB 3.0Type-C port DPI Multi-WAN VPN Technical Specifications Interface 1 x WAN Ethernet port2 x LAN Ethernet ports1 x USB 3.0 port1 x Type-C power port1 x Reset button CPU MediaTek, Quad-core @2.0GHz Memory / Storage DDR4 1GB / eMMC 8GB Ethernet Speed 10/100/1000/2500Mbps Power Input Type-C, 5V/3A Power Consumption { let n = e.getBoundingClientRect().top, t = e.getBoundingClientRect().bottom, s = e.offsetHeight, o = window.innerHeight * .8; Math.abs(n) < o && (e.classList.value.includes("in-view") || e.classList.add("in-view")), (t < 50 || t > window.innerHeight + s - 50) && e.classList.remove("in-view") }) } window.addEventListener("scroll", handleAnimationOne); function btnActive(e) { e == 1 ? (document.getElementById("btn_port1").classList.add("active"), document.getElementById("btn_port2").classList.remove("active")) : (document.getElementById("btn_port2").classList.add("active"), document.getElementById("btn_port1").classList.remove("active")) } Show more