/*
 * ============================================================
 * TABLE OF CONTENTS (目錄)
 * ============================================================
 *
 *  1.  Scrollspy Navigation
 *
 *  2.  Solutions Section
 *
 *  3.  Product Line Section
 *
 *  4.  News Section
 *
 *  5.  Hero Section
 *      5-1. Hero 基本樣式
 *      5-2. Slider Navigation
 *      5-3. Slider Indicators
 *      5-4. Hero Swiper
 *
 *  6.  Video Channel Section
 *
 *  7.  RWD: min-width: 1440px
 *
 *  8.  RWD: min-width: 1200px and max-width: 1439px
 *
 *  9.  RWD: max-width: 1199px
 *
 * 10.  RWD: max-width: 991px
 *
 * 11.  RWD: max-width: 767px
 *
 * 12.  RWD: max-width: 576px
 *
 * ============================================================
 */
/* ============================================================
 * 1. Scrollspy Navigation
 * ============================================================ */
.scrollspy-nav {
		position: fixed;
		left: 0;
		right: 0;
		top: 50%;
		margin: auto;
		margin-left: calc((100vw - 1440px) / 2); /* 螢幕寬度 > 1440px 時置中 */
		-webkit-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		        transform: translateY(-50%);
		z-index: 1000;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 15px;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
}
.scrollspy-nav-item {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.scrollspy-dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: var(--secondary-blue);
		border: 1px solid var(--secondary-blue);
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		position: relative;
		pointer-events: none;
}
.scrollspy-nav-item.active .scrollspy-dot {
		background-color: var(--color-white);
		border: 1px solid var(--secondary-blue);
}
.on-section-video .scrollspy-dot {
		background-color: var(--dark-blue);
		border: 1px solid var(--dark-blue);
}
.on-section-video .scrollspy-nav-item.active .scrollspy-dot {
		background-color: var(--color-white);
		border: 1px solid var(--dark-blue);
}
.scrollspy-nav-item:hover .scrollspy-dot {
		-webkit-transform: scale(1.2);
		    -ms-transform: scale(1.2);
		        transform: scale(1.2);
}
.scrollspy-label {
		position: absolute;
		left: 25px;
		white-space: nowrap;
		background-color: rgba(0, 0, 0, 0.8);
		color: var(--color-white);
		padding: 2px 12px;
		border-radius: 4px;
		font-size: var(--font-size-sm);
		opacity: 0;
		visibility: hidden;
		-webkit-transform: translateX(-10px);
		    -ms-transform: translateX(-10px);
		        transform: translateX(-10px);
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		pointer-events: none;
		display: none !important;
}
.scrollspy-label::before {
		content: '';
		position: absolute;
		left: -6px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		        transform: translateY(-50%);
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 6px 6px 0;
		border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
}
.scrollspy-nav-item:hover .scrollspy-label, .scrollspy-nav-item.active .scrollspy-label {
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(0);
		    -ms-transform: translateX(0);
		        transform: translateX(0);
}
/* 確保 section 有 ID */
section[id] {
		scroll-margin-top: 80px;
}
/* ============================================================
 * 2. Solutions Section
 * ============================================================ */
.solutions-section {
		position: relative;
		padding: 100px 0;
		background-color: var(--color-white);
		overflow: hidden;
		border-bottom: 1px solid #ddd;
}
.solutions-container {
		position: relative;
		z-index: 1;
		margin: 0 auto;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 20px;
}
.solutions-header {
		text-align: center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: 20px;
}
.section-desc {
		font-size: var(--font-size-base);
		color: var(--color-gray);
		text-align: start;
		line-height: 1.5;
}
.solutions-grid {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		gap: 0;
}
.solution-item {
		min-width: 120px;
		text-align: center;
}
.solution-item a {
		width: 100%;
		height: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		gap: 20px;
}
.solution-item a:hover img {
		-webkit-filter: var(--svg-hover-blue);
		        filter: var(--svg-hover-blue);
}
.solution-item a .solution-icon-wrapper, .solution-item a:hover .solution-icon-wrapper, .solution-item a .solution-title, .solution-item a:hover .solution-title {
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
}
.solution-item a:hover .solution-icon-wrapper {
		-webkit-transform: scale(1.25);
		    -ms-transform: scale(1.25);
		        transform: scale(1.25);
}
.solution-item a:hover .solution-title {
		-webkit-transform: translateY(10px);
		    -ms-transform: translateY(10px);
		        transform: translateY(10px);
		color: var(--secondary-blue);
}
.solution-icon-wrapper {
		width: 70px;
		height: 70px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
}
.solution-title {
		font-size: var(--font-size-base);
		font-weight: 500;
		color: #005eac;
		text-align: center;
}
/* ============================================================
 * 3. Product Line Section
 * ============================================================ */
.products-section {
		padding: 50px 0;
		background-color: var(--color-white);
}
.products-container {
		margin: 0 auto;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
}
.products-header {
		text-align: center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: 20px;
}
.products-grid {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
		width: 100%;
		margin-bottom: 30px;
}
.product-line-card {
		width: 100%;
		height: 180px;
		position: relative;
		border-radius: 10px;
		overflow: hidden;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
}
.product-line-card.faded {
		opacity: 0.2;
}
.product-line-card .product-image-wrapper, .product-line-card:hover .product-image-wrapper, .product-line-card .product-bar, .product-line-card:hover .product-bar {
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
}
.product-line-card:hover .product-image-wrapper {
		-webkit-transform: scale(1.15);
		    -ms-transform: scale(1.15);
		        transform: scale(1.15);
}
.product-line-card:hover .product-bar {
		opacity: 0.75;
}
.product-image-wrapper {
		position: absolute;
		top: 0;
		right: 0;
		width: 180px;
		height: 180px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: end;
		    -ms-flex-pack: end;
		        justify-content: flex-end;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		z-index: 1;
		pointer-events: none;
		aspect-ratio: 1 / 1;
}
.product-image-wrapper img {
		width: 100%;
		height: 100%;
		-o-object-fit: contain;
		   object-fit: contain;
}
.product-bar {
		position: relative;
		height: 75px;
		background: -webkit-gradient(linear, left top, right top, from(#8CCBFF), to(#CBECFF));
		background: -o-linear-gradient(left, #8CCBFF 0%, #CBECFF 100%);
		background: linear-gradient(90deg, #8CCBFF 0%, #CBECFF 100%);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: end;
		    -ms-flex-align: end;
		        align-items: flex-end;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
		margin-top: auto;
		border-radius: 0.5rem;
}
.product-name {
		color: var(--color-white);
		font-size: var(--font-size-base);
		font-weight: 400;
		padding: 5px 8px;
}
.products-footer {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
}
.btn-view-all {
		border: 1px solid #00a1ff;
		background-color: transparent;
		color: var(--secondary-blue);
		padding: 10px 20px;
		border-radius: 5px;
		font-size: var(--font-size-base);
		cursor: pointer;
}
/* ============================================================
 * 4. News Section
 * ============================================================ */
.news-section {
		position: relative;
		height: 500px;
		background-color: var(--light-blue);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		padding-top: 75px;
}
.news-bg-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.2;
}
.news-bg-overlay img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
}
.news-container {
		position: relative;
		z-index: 2;
		padding: 0 20px;
}
.news-header {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		margin-bottom: 40px;
}
.news-header .section-title {
		margin: 0;
}
.news-grid {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		gap: 20px;
}
.news-item {
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 20px;
		max-width: 473px;
}
.news-item:hover .read-more, .news-item:hover .news-title {
		color: var(--dark-blue);
}
.news-item:hover .read-more img {
		-webkit-filter: var(--svg-hover-blue);
		        filter: var(--svg-hover-blue);
}
.news-meta {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: 20px;
}
.date-info {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: 10px;
		color: var(--color-gray);
		font-size: var(--font-size-sm);
}
.news-title {
		font-size: var(--font-size-lg);
		color: var(--secondary-blue);
		line-height: 1.2;
}
.news-desc {
		display: block;
		margin-bottom: 20px;
		font-size: var(--font-size-base);
		color: var(--color-gray);
		line-height: 1.2;
}
.news-divider {
		width: 3px;
		height: 313px;
		background: -webkit-gradient(linear, left bottom, left top, from(rgba(119, 119, 119, 1)), to(rgba(221, 221, 221, 0)));
		background: -o-linear-gradient(bottom, rgba(119, 119, 119, 1) 0%, rgba(221, 221, 221, 0) 100%);
		background: linear-gradient(to top, rgba(119, 119, 119, 1) 0%, rgba(221, 221, 221, 0) 100%);
		opacity: 0.3;
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		pointer-events: none;
}
/* ============================================================
 * 5. Hero Section
 * ============================================================ */
/* ---- 5-1. Hero 基本樣式 ---- */
.hero-section {
		position: relative;
		width: 100%;
		height: var(--hero-ad-height);
		overflow: hidden;
}
.hero-bg, .hero-image {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
}
.hero-content-wrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		    -ms-transform: translate(-50%, -50%);
		        transform: translate(-50%, -50%);
		width: 1165px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		z-index: 10;
		margin: auto;
}
.hero-text-group {
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 10px;
		padding: 20px;
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: 20px;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
}
.hero-title {
		font-size: var(--font-size-4lg);
		font-weight: 700;
		color: var(--color-white);
		text-align: center;
		line-height: 1.2;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.hero-cta {
		background-color: rgba(255, 255, 255, 0.1);
		border: 2px solid rgba(255, 255, 255, 0.5);
		border-radius: 5px;
		padding: 10px 20px;
		cursor: pointer;
		-webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.cta-text {
		color: rgba(255, 255, 255, 0.5);
		font-size: var(--font-size-base);
}
/* ---- 5-2. Slider Navigation ---- */
.slider-nav-left, .slider-nav-right {
		position: absolute;
		top: 418px;
		width: 44px;
		height: 44px;
		border: 2px solid var(--color-white);
		border-radius: 50%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		cursor: pointer;
		opacity: 0.5;
		z-index: 2;
}
.slider-nav-left {
		left: 20px;
		margin-left: calc((100vw - 1440px) / 2); /* 螢幕寬度 > 1440px 時置中 */
}
.slider-nav-right {
		right: 20px;
		margin-right: calc((100vw - 1440px) / 2); /* 螢幕寬度 > 1440px 時置中 */
}
.slider-nav-left:hover, .slider-nav-right:hover {
		opacity: 1;
		-webkit-transition: opacity 0.3s ease;
		-o-transition: opacity 0.3s ease;
		transition: opacity 0.3s ease;
}
/* ---- 5-3. Slider Indicators ---- */
.slider-indicators {
		position: absolute;
		bottom: 25px;
		left: 20px;
		right: 20px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		gap: 20px;
		z-index: 2;
		max-width: calc(1440px - 60px);
		margin: auto;
}
.indicator {
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
		height: 5px;
		position: relative;
}
.bar-bg {
		width: 100%;
		height: 100%;
		background-color: var(--color-white);
}
.bar-fill {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: var(--secondary-blue);
}
.indicator .bar-fill {
		width: 0;
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
}
.indicator.active .bar-fill {
		-webkit-animation: progressBar 5s linear forwards;
		        animation: progressBar 5s linear forwards;
}
@-webkit-keyframes progressBar {
		from {
				width: 0;
		}
		to {
				width: 100%;
		}
}
@keyframes progressBar {
		from {
				width: 0;
		}
		to {
				width: 100%;
		}
}
/* ---- 5-4. Hero Swiper ---- */
.hero-section .hero-swiper {
		width: 100%;
		height: 100%;
}
.hero-section .hero-swiper .swiper-slide {
		position: relative;
}
/* ============================================================
 * 6. Video Channel Section
 * ============================================================ */
.video-section {
		background: var(--bg-light-gradient);
		padding: 140px 0 130px;
}
.video-container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 0 auto;
		gap: 40px;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
}
.video-content {
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
		color: var(--color-white);
		max-width: 55%;
}
.video-title {
		font-size: var(--font-size-3xl);
		font-weight: 700;
		margin-bottom: 40px;
		color: var(--color-white);
}
.video-meta {
		font-size: var(--font-size-sm);
		margin-bottom: 20px;
		opacity: 0.9;
}
.video-meta .sep {
		margin: 0 8px;
}
.video-subtitle {
		font-size: var(--font-size-lg);
		font-weight: normal;
		margin-bottom: 20px;
		line-height: 1.4;
		color: var(--color-white);
}
.video-tags {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		gap: 10px;
}
.video-tags li {
		display: -webkit-inline-box;
		display: -ms-inline-flexbox;
		display: inline-flex;
}
.video-controls {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: 20px;
		margin: 30px 0 10px;
		max-width: calc(100% - 3rem);
}
.progress-bar-group {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 10px;
		width: calc(100% - 180px);
}
.progress-segment {
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
		height: 4px;
		position: relative;
		overflow: hidden;
}
.segment-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		margin: auto;
		background-color: rgba(255, 255, 255, 0.3);
}
.segment-fill {
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 100%;
		background-color: var(--color-white);
		-webkit-transition: width 0.3s ease;
		-o-transition: width 0.3s ease;
		transition: width 0.3s ease;
}
.progress-segment.completed .segment-fill {
		width: 100%;
}
.progress-segment.active .segment-fill {
		width: 0;
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
}
.control-buttons {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		gap: 10px;
		width: 140px;
}
.nav-btn {
		width: 15px;
		height: 15px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		cursor: pointer;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.nav-btn:hover {
		-webkit-transform: scale(1.1);
		    -ms-transform: scale(1.1);
		        transform: scale(1.1);
}
.nav-btn:hover img {
		-webkit-filter: var(--svg-hover-blue);
		        filter: var(--svg-hover-blue);
}
.nav-btn img {
		width: 100%;
		height: 100%;
}
.video-more-btn > a {
		font-size: var(--font-size-base);
		color: var(--color-white);
}
.video-more-btn > a:hover {
		color: var(--secondary-blue);
}
/* ============================================================
 * 7. RWD: min-width: 1440px
 * ============================================================ */
@media (min-width: 1440px) {
		.scrollspy-nav {
				margin-left: calc((100vw - 1440px) / 2);
		}
		.slider-nav-left {
				margin-left: calc((100vw - 1440px) / 2);
		}
		.slider-nav-right {
				margin-right: calc((100vw - 1440px) / 2);
		}
		.hero-content-wrapper {
				max-width: 1135px;
		}
}
/* ============================================================
 * 8. RWD: min-width: 1200px and max-width: 1439px
 * ============================================================ */
@media (min-width: 1200px) and (max-width: 1439px) {
		.scrollspy-nav {
				margin-left: calc((100vw - 1280px) / 2 + 1rem);
		}
		.slider-nav-left {
				margin-left: calc((100vw - 1280px) / 2);
		}
		.slider-nav-right {
				margin-right: calc((100vw - 1280px) / 2);
		}
		.hero-content-wrapper {
				max-width: 1100px;
		}
}
/* ============================================================
 * 9. RWD: max-width: 1199px
 * ============================================================ */
@media (max-width: 1199px) {
		.scrollspy-nav {
				left: 15px;
				top: 25%;
				gap: 15px;
		}
		.scrollspy-label {
				font-size: var(--font-size-sm);
		}
		.hero-section {
				height: auto;
		}
		.hero-section .hero-swiper .swiper-slide {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
		}
		.hero-content-wrapper {
				max-width: 80%;
				margin: auto;
				top: 50%;
				bottom: auto;
		}
		.hero-title {
				font-size: var(--font-size-lg) !important;
		}
		.hero-cta {
				padding: 0.25rem 1rem;
		}
		.cta-text {
				font-size: var(--font-size-sm) !important;
		}
		.slider-nav-left, .slider-nav-right {
				top: calc(50% - 20px);
				width: 35px;
				height: 35px;
		}
		.slider-nav-left {
				left: 3rem;
				margin-left: 0;
		}
		.slider-nav-right {
				right: 3rem;
				margin-right: 0;
		}
		.slider-indicators {
				max-width: 80%;
				margin: auto;
		}
		.products-section, .solutions-section, .news-section, .video-section, .casestudy-section {
				height: auto;
				padding: 50px 0;
		}
		.product-line-card {
				height: 155px;
		}
		.product-image-wrapper {
				width: 150px;
				height: 150px;
		}
		.product-bar .product-name {
				font-size: var(--font-size-sm);
		}
		.section-desc {
				font-size: var(--font-size-sm);
		}
		.solution-icon-wrapper {
				width: 50px;
				height: 50px;
		}
		.solution-title {
				font-size: var(--font-size-sm);
				line-height: 1.25;
		}
		.video-title, .news-title {
				font-size: var(--font-size-lg);
				line-height: 1.35;
		}
		.video-subtitle {
				font-size: var(--font-size-base);
				line-height: 1.5;
		}
		.video-meta {
				margin-bottom: 0.5rem;
		}
		.video-controls {
				margin-top: auto;
				margin-bottom: 0;
		}
		.progress-bar-group {
				width: calc(100% - 140px);
		}
		.control-buttons {
				font-size: var(--font-size-sm);
				width: 120px;
		}
		.control-buttons .nav-btn {
				width: 10px;
				height: 10px;
		}
		.video-more-btn > a {
				font-size: var(--font-size-sm);
		}
		.news-desc {
				font-size: var(--font-size-sm);
				line-height: 1.45;
		}
		.news-grid {
				gap: 60px;
		}
		.casestudy-meta {
				font-size: var(--font-size-sm);
		}
		.casestudy-title {
				font-size: var(--font-size-base);
		}
		.solutions-grid {
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 1fr 20px 1fr 20px 1fr;
				grid-template-columns: repeat(3, 1fr);
				gap: 20px 20px;
		}
}
/* ============================================================
 * 10. RWD: max-width: 991px
 * ============================================================ */
@media (max-width: 991px) {
		.date-info {
				font-size: var(--font-size-sm);
		}
		.header-link img {
				width: 15px;
		}
		.video-meta {
				font-size: var(--font-size-sm);
		}
		.video-subtitle {
				font-size: var(--font-size-sm);
		}
		.section-desc {
				font-size: var(--font-size-sm);
		}
		.video-title, .news-title {
				font-size: var(--font-size-base-lg);
				line-height: 1.35;
		}
		.product-bar {
				height: 60px;
		}
		.product-bar .product-name {
				font-size: var(--font-size-sm);
				padding-bottom: 5px;
				line-height: 1.2;
		}
		.product-image-wrapper {
				width: 110px;
				height: 110px;
		}
		.product-line-card {
				height: 125px;
		}
		.hero-title {
				font-size: var(--font-size-base-lg) !important;
		}
		.slider-nav-left, .slider-nav-right {
				width: 30px;
				height: 30px;
				padding: 5px;
		}
		.slider-nav-left {
				left: 1rem;
		}
		.slider-nav-right {
				right: 1rem;
		}
		.btn-view-all {
				padding: 8px 15px;
				font-size: var(--font-size-base-sm) !important;
		}
		.solution-item {
				min-width: 33.3%;
				min-height: 100px;
				margin-bottom: 0.5rem;
		}
		.solution-item a {
				-webkit-box-pack: start;
				    -ms-flex-pack: start;
				        justify-content: flex-start;
				gap: 10px;
		}
		.casestudy-grid {
				gap: 20px;
				-ms-grid-columns: 1fr;
				grid-template-columns: repeat(1, 1fr);
				margin-top: 0;
		}
		.casestudy-header-row {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
		}
		.video-title {
				margin-bottom: 15px;
		}
		.video-container {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
		}
		.video-player {
				-webkit-box-flex: 0;
				    -ms-flex: 0 0 100%;
				        flex: 0 0 100%;
				width: 100%;
				max-width: 100%;
		}
		.video-content {
				max-width: 100%;
		}
		.video-title {
				font-size: var(--font-size-2lg);
		}
		.video-subtitle {
				font-size: var(--font-size-base-2lg);
		}
		.video-controls {
				max-width: 100%;
		}
}
/* ============================================================
 * 11. RWD: max-width: 767px
 * ============================================================ */
@media (max-width: 767px) {
		.scrollspy-nav {
				left: 15px;
				top: 50%;
				gap: 15px;
		}
		.indicator {
				height: 3px;
		}
		.slider-indicators {
				gap: 10px;
		}
		.header-link.has-change {
				margin: 0 auto;
		}
}
/* ============================================================
 * 12. RWD: max-width: 576px
 * ============================================================ */
@media (max-width: 576px) {
		section[id] {
				scroll-margin-top: 0;
		}
		.scrollspy-nav {
				left: 5px;
				top: 35%;
				gap: 15px;
		}
		.hero-swiper {
				padding-bottom: 160px;
		}
		.hero-section .hero-swiper .swiper-slide {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: start;
				    -ms-flex-align: start;
				        align-items: flex-start;
		}
		.hero-content-wrapper {
				max-width: 100%;
				top: auto;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				-webkit-transform: translateY(160px);
				    -ms-transform: translateY(160px);
				        transform: translateY(160px);
		}
		.hero-bg, .hero-image {
				width: 100%;
				height: auto;
				-o-object-fit: cover;
				   object-fit: cover;
		}
		.hero-text-group {
				background-color: rgba(0, 0, 0, 1);
				border-radius: 0;
				padding: 2rem 1rem 3rem 1rem;
				min-height: 160px;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
		}
		.hero-cta {
				display: none;
		}
		.hero-title {
				font-size: var(--font-size-lg) !important;
		}
		.slider-nav-left, .slider-nav-right {
				width: 20px;
				height: 20px;
				padding: 2px;
			 top: calc(50% - 85px);
		}
		.slider-indicators {
				max-width: 90%;
		}
		.products-grid {
				-ms-grid-columns: 1fr 10px 1fr;
				grid-template-columns: repeat(2, 1fr);
				gap: 10px;
		}
		.news-grid {
				display: -ms-grid;
				display: grid;
				-ms-grid-columns: 1fr;
				grid-template-columns: repeat(1, 1fr);
				gap: 60px;
		}
		.news-divider {
				width: 100%;
				max-width: 100%;
				height: 3px;
				background: -webkit-gradient(linear, left top, right top, from(rgba(119, 119, 119, 1)), to(rgba(221, 221, 221, 0)));
				background: -o-linear-gradient(left, rgba(119, 119, 119, 1) 0%, rgba(221, 221, 221, 0) 100%);
				background: linear-gradient(to right, rgba(119, 119, 119, 1) 0%, rgba(221, 221, 221, 0) 100%);
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: 2rem;
				-webkit-transform: translate(-50%, -50%);
				    -ms-transform: translate(-50%, -50%);
				        transform: translate(-50%, -50%);
		}
		.products-section, .solutions-section, .news-section, .video-section, .casestudy-section {
				padding: 30px 0;
		}
		.solution-icon-wrapper {
				width: 40px;
				height: 40px;
		}
		.video-content {
				padding: 0 20px;
		}
		.video-controls {
				max-width: 100%;
		}
		.progress-bar-group {
				width: calc(100% - 80px);
		}
		.control-buttons {
				width: 80px;
		}
		.control-buttons .nav-btn-prev, .control-buttons .nav-btn-next {
				position: absolute;
				width: 25px;
				height: 25px;
				border: 2px solid var(--color-white);
				border-radius: 5rem;
				top: 55%;
				padding: 5px;
		}
		.control-buttons .nav-btn-prev {
				left: 10px;
		}
		.control-buttons .nav-btn-next {
				right: 10px;
		}
}