[cs_element_section _id=”1″ ][cs_element_layout_div _id=”2″ ][cs_element_raw_content _id=”3″ ]❮

❯

#post-7602 .entry-content.content { font-size: 0 !important; line-height: 0 !important; }
#post-7602 .entry-content.content > #cs-content { font-size: 1rem !important; line-height: normal !important; }
#post-7602 .entry-content.content > :not(#cs-content) { display: none !important; }
#va-video-carousel-7602 {
–va-gap: 18px;
–va-card-width: min(31vw, 330px);
position: relative;
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 22px 56px;
box-sizing: border-box;
font-family: inherit;
}
#va-video-carousel-7602 .va-video-carousel__viewport {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
border-radius: 24px;
}
#va-video-carousel-7602 .va-video-carousel__viewport::-webkit-scrollbar { display: none; }
#va-video-carousel-7602 .va-video-carousel__track {
display: flex;
align-items: center;
gap: var(–va-gap);
width: max-content;
padding: 12px calc((100% – var(–va-card-width)) / 2);
box-sizing: border-box;
}
#va-video-carousel-7602 .va-video-carousel__slide {
flex: 0 0 var(–va-card-width);
width: var(–va-card-width);
position: relative;
scroll-snap-align: center;
transform: scale(.84);
opacity: .58;
filter: saturate(.75);
pointer-events: none;
transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .45s ease, filter .45s ease;
}
#va-video-carousel-7602 .va-video-carousel__slide.is-active {
z-index: 2;
transform: scale(1);
opacity: 1;
filter: none;
pointer-events: auto;
}
#va-video-carousel-7602 .va-video-carousel__slide:not(.is-active) .va-video-carousel__play { opacity: 0; }
#va-video-carousel-7602 .va-video-carousel__card {
position: relative;
width: 100%;
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: 24px;
background: transparent;
box-shadow: 0 12px 34px rgba(8, 55, 67, 0.18);
}
#va-video-carousel-7602 video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: transparent;
}
#va-video-carousel-7602 .va-video-carousel__play {
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 68px;
height: 68px;
padding: 0;
border: 0;
border-radius: 50%;
color: #fff;
background: #249dcc;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
font-size: 27px;
line-height: 1;
cursor: pointer;
transform: translate(-50%, -50%);
transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
#va-video-carousel-7602 .va-video-carousel__play-icon { display: block; width: 0; height: 0; margin-left: 3px; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 18px solid currentColor; }
#va-video-carousel-7602 .va-video-carousel__play:hover {
background: #164f5d;
transform: translate(-50%, -50%) scale(1.06);
}
#va-video-carousel-7602 .va-video-carousel__card.is-playing .va-video-carousel__play {
opacity: 0;
pointer-events: none;
}
#va-video-carousel-7602 .va-video-carousel__arrow {
position: absolute;
top: 50%;
z-index: 4;
display: grid;
place-items: center;
width: 46px;
height: 46px;
padding: 0;
border: 0;
border-radius: 50%;
color: #164f5d;
background: #fff;
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
font-size: 28px;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
}
#va-video-carousel-7602 .va-video-carousel__arrow–prev { left: 12px; }
#va-video-carousel-7602 .va-video-carousel__arrow–next { right: 12px; }
#va-video-carousel-7602 .va-video-carousel__arrow:hover { color: #fff; background: #249dcc; }
@media (max-width: 767px) {
#va-video-carousel-7602 {
–va-card-width: min(66vw, 330px);
–va-gap: 14px;
padding: 14px 34px;
}
#va-video-carousel-7602 .va-video-carousel__card { border-radius: 20px; }
#va-video-carousel-7602 .va-video-carousel__arrow { width: 40px; height: 40px; font-size: 24px; }
#va-video-carousel-7602 .va-video-carousel__arrow–prev { left: 4px; }
#va-video-carousel-7602 .va-video-carousel__arrow–next { right: 4px; }
#va-video-carousel-7602 .va-video-carousel__play { width: 62px; height: 62px; font-size: 24px; }
}

(function () {
var root = document.getElementById(‘va-video-carousel-7602’);
if (!root || root.dataset.ready === ‘1’) return;
root.dataset.ready = ‘1’;
var viewport = root.querySelector(‘.va-video-carousel__viewport’);
var slides = Array.prototype.slice.call(root.querySelectorAll(‘.va-video-carousel__slide’));
var videos = Array.prototype.slice.call(root.querySelectorAll(‘video’));
var activeIndex = 1;
function setActive(index) {
activeIndex = Math.max(0, Math.min(slides.length – 1, index));
slides.forEach(function (slide, slideIndex) {
var active = slideIndex === activeIndex;
var video = slide.querySelector(‘video’);
var play = slide.querySelector(‘.va-video-carousel__play’);
slide.classList.toggle(‘is-active’, active);
play.disabled = !active;
play.setAttribute(‘aria-hidden’, active ? ‘false’ : ‘true’);
video.tabIndex = active ? 0 : -1;
if (!active) video.pause();
});
}
function centerSlide(index) {
index = Math.max(0, Math.min(slides.length – 1, index));
var slide = slides[index];
if (!slide) return;
setActive(index);
viewport.scrollTo({ left: slide.offsetLeft – (viewport.clientWidth – slide.offsetWidth) / 2, behavior: ‘smooth’ });
}
function currentIndex() {
var center = viewport.scrollLeft + viewport.clientWidth / 2;
var best = 0;
var distance = Infinity;
slides.forEach(function (slide, index) {
var d = Math.abs((slide.offsetLeft + slide.offsetWidth / 2) – center);
if (d < distance) { distance = d; best = index; } }); return best; } root.querySelector('.va-video-carousel__arrow--prev').addEventListener('click', function () { centerSlide(Math.max(0, currentIndex() - 1)); }); root.querySelector('.va-video-carousel__arrow--next').addEventListener('click', function () { centerSlide(Math.min(slides.length - 1, currentIndex() + 1)); }); var scrollTimer; viewport.addEventListener('scroll', function () { clearTimeout(scrollTimer); scrollTimer = setTimeout(function () { setActive(currentIndex()); }, 90); }, { passive: true }); videos.forEach(function (video) { var slide = video.closest('.va-video-carousel__slide'); var card = video.closest('.va-video-carousel__card'); var play = card.querySelector('.va-video-carousel__play'); video.addEventListener('loadedmetadata', function () { if (video.currentTime === 0) video.currentTime = 0.05; }, { once: true }); function toggle() { if (!slide.classList.contains('is-active')) return; if (video.paused) { videos.forEach(function (other) { if (other !== video) other.pause(); }); video.play(); } else { video.pause(); } } play.addEventListener('click', toggle); video.addEventListener('click', toggle); video.addEventListener('play', function () { card.classList.add('is-playing'); }); video.addEventListener('pause', function () { card.classList.remove('is-playing'); }); video.addEventListener('ended', function () { card.classList.remove('is-playing'); }); }); requestAnimationFrame(function () { centerSlide(1); }); })(); #va-video-carousel-7602 .va-video-carousel__track { padding-top: 38px; padding-bottom: 42px; } #va-video-carousel-7602 .va-video-carousel__arrow { display: flex; align-items: center; justify-content: center; padding: 0; font-size: 0; line-height: 0; } #va-video-carousel-7602 .va-video-carousel__arrow::before { content: ""; display: block; width: 13px; height: 13px; box-sizing: border-box; border-style: solid; border-color: currentColor; } #va-video-carousel-7602 .va-video-carousel__arrow--prev::before { border-width: 0 0 3px 3px; transform: rotate(45deg); } #va-video-carousel-7602 .va-video-carousel__arrow--next::before { border-width: 3px 3px 0 0; transform: rotate(45deg); } \n\n[/cs_content_seo][/cs_element_layout_div][/cs_element_section][/cs_content]