.indexProTitle { 
	font-family: Poppins-SemiBold;
	text-align: center;
	font-size: 2vw;
	line-height: 2vw;
	color: #000; 
}
.indexFeaPro {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 13px;
	padding:0 9px;
	margin-top: 53px;
}
.indexFeature {
	position: relative;
}
.indexFeaImg {
	border-radius: 10px;
	width: 100%;
	height: auto;
	display: block;
}
.indexFeatureAbs {
	position: absolute;
	background-color: #f4f5f8;
	color: #000;
	bottom: 0px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	width: 100%;
	padding: 1.3vw 0 1.95vw 1.95vw;
}
.indexFeatureFlex {
	display: flex;
	align-items: flex-start;
	font-size: 1.52vw;
	line-height: 2.2vw;
	column-gap: 10px;
	font-family: Poppins-SemiBold;
}
.indexFeatureMar {
	margin: 0.26vw 0 1.82vw 0;
	font-size: 0.8vw;
	line-height: 0.8vw;
	font-family: Poppins-Regular;
	color: #000000;
}
.indexFeatureAbs a {
	background-color: #000;
	padding: 0.91vw 1.04vw;
	border-radius: 10px;
	font-size: 0.8vw;
	line-height: 0.8vw;
	display: inline-block;
	text-decoration: none;
	font-family: Poppins-SemiBold;
	color: white;
}
.indexFeatureAbs a:hover {
	background-color: #6700cb;
}
.indexGridWrapper {
	display: grid;
	align-content: space-between;
}
.indexContainer {
	display: flex;
	gap: 13px;
	justify-content: center;
	flex-wrap: nowrap;
}
.indexWrapper {
	border-radius: 15px;
	overflow: hidden;
	position: relative;
	transition: transform 0.3s ease;
}
.indexHeader { 
	background-color: #fff;
	padding: 2px;
	margin: 1.66vw 15vw 2.81vw 15vw;
	border: 1px solid #ccc;
	border-radius: 50vw;
	text-align: center;
	position: relative;
	display: flex;
	justify-content: space-between;
}
.indexHeader a { 
	display: flex;
	align-items: center;
	gap: 0.52vw;
	font-family: 'Poppins-Regular';
	font-size: 1.04vw;
	padding: 0.52vw 3.12vw;
	text-decoration: none;
	color: #000;
	border-radius: 50vw;
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
	white-space: nowrap;
}
.indexHeader a.active  { 
	color: #fff!important;
}
.indexHeader__slider { 
	position: absolute;
	height: 94%;
	background: #000000;
	border-radius: 50px;
	transition: 
		left 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
		width 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
	z-index: 0; 
}
.indexCates {
	position: absolute;
	top: 2.08vw;
	left: 50%;
	transform: translateX(-50%);
	z-index: 11;
	white-space: nowrap;
	text-align: center;
}
.indexCateCon { 
	display: none;
	gap: 2.86vw;
	justify-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	min-width: fit-content;
}
.indexCateFlex {
	display: flex;
	gap: 0.78vw;
	justify-content: center;
}
.indexCateTit {
	font-family: Poppins-Medium;
	font-size: 0.8vw;
	line-height: 1.2vw;
	color: #000;
}
.indexCateSubTit {
	font-family: Poppins-Regular;
	font-size: 0.6vw;
	line-height: 0.6vw;
	color: #6e6e6e;
}
.indexCateFlex a {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}
.indexCateFlex img {
	transition: transform 0.5s ease;
	width: 100%;
	display: block;
}
.indexCateFlex a:hover img {
	transform: scale(1.05);
}
.CaptionPos {
	top: 50% !important;
	left: 5% !important;
	transform: translate(0, -50%) !important;
}
.indexCaption {
	position: absolute;
	top: 55px;
	left: 50%;
	transform: translate(-50%, 0%);
	color: white;
}
.captionTitle {
	white-space: nowrap;
	font-family: Poppins-SemiBold;
}
.captionSubTitle {
	font-family: Poppins-Regular;
	margin-top: 8px;
}
.captionSize1 {
	font-size: 2.08vw;
	line-height: 2.08vw;
}
.captionSubSize1 {
	font-size: 0.96vw;
	text-align: center;
}
.captionSize2 {
	font-size: 1.28vw;
}
.captionSubSize2 {
	font-size: 0.8vw;
}
.captionSubSize3 {
	font-size: 0.8vw;
	text-align: center;
}
.captionSize3 {
	font-size: 1.44vw;
}
.wrapperImg {
	width: 100%;
	display: block;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.indexWrapper:hover .wrapperImg {
	transform: scale(1.08);
}
.indexPorMore { 
	color: #6e6e6e;
	font-size: 15px;
	font-family: Poppins-Regular;
}
.indexPorMore:hover {
	color: #6700c9;
}
.indexCateCon:nth-child(1) { 
	display: flex; 
}
.indexHeader--mobile {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.indexHeader--mobile::-webkit-scrollbar { 
	display: none; 
}
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.video-slider-container {
    height: 496px;
    position: relative;
    overflow: visible;
    margin-bottom: 40px;
}
.video-slider {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: grab;
    transition: transform 0.5s ease;
    justify-content: center;
    align-items: center;
}
.video-slider:active {
    cursor: grabbing;
}
.video-slider.dragging {
    transition: none;
}
.video-slide {
    flex-shrink: 0;
    height: 496px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.5s ease;
}
.video-slide.dragging {
    transition: none;
}
.video-slide.center {
    width: 70%;
    margin: 0 10px;
}
.video-slide.side {
    width: 15%;
}
.video-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}
.video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 2;
}
.video-poster.hidden {
    opacity: 0;
    pointer-events: none;
}
.video-poster.center-poster {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODk0IiBoZWlnaHQ9IjQ5NiIgdmlld0JveD0iMCAwIDg5NCA0OTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI4OTQiIGhlaWdodD0iNDk2IiBmaWxsPSIjMkQzNzQ4Ii8+Cjx0ZXh0IHg9IjQ0NyIgeT0iMjQ4IiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCI+Q0VOVEVSIFZJREVPPC90ZXh0Pgo8L3N2Zz4=');
}
.video-poster.side-poster {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjY2IiBoZWlnaHQ9IjQ5NiIgdmlld0JveD0iMCAwIDI2NiA0OTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNjYiIGhlaWdodD0iNDk2IiBmaWxsPSIjNEE1NTY4Ii8+Cjx0ZXh0IHg9IjEzMyIgeT0iMjQ4IiBmaWxsPSJ3aGl0ZSIgZm9udC1zaXplPSIxNiIgZm9udC1mYW1pbHk9IkFyaWFsIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0iY2VudHJhbCI+U0lERSBWSURFTzwvdGV4dD4KPC9zdmc+');
}
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
}
.play-button:hover {
    background: rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%) scale(1.1);
}
.play-button svg {
    width: 30px;
    height: 30px;
    fill: #333;
    margin-left: 3px;
}
.video-slide.side .play-button {
    display: none;
}
.product-info {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000;
}
.main-title {
    font-size: 1.86vw;
    margin-bottom: 15px;
    font-family: 'POPPINS-SEMIBOLD';
    width: 100%;
}
.bottom-section {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.subtitle {
    font-family: 'POPPINS-REGULAR';
    font-size: 0.88vw;
    color: #6e6e6e;
    flex: 1;
    white-space: pre-line;
}
.navigation-controls {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}
.nav-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #000000;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.nav-button:hover {
    transform: translateY(-2px);
}
.nav-button svg {
    width: 20px;
    height: 20px;
    fill: white;
}
.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 18px;
}


.inLostOur {
    display: flex;
    color: #fff;
    font-family: Poppins;
    height: 32.1vw;
    border-radius: 0.2vw;
    overflow: hidden;
}
.inLostSubOur {
    transition: width 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    overflow: hidden;
    position: relative;
    height: 100%;
    background-color: #000;
}
.inLostTit {
    font-weight: 500;
    font-size: 2vw;
    line-height: 2vw;
    white-space: nowrap;
    border-radius: 0.2vw;
    overflow: hidden;
}
.inLostSubTit {
    font-weight: 300;
    font-size: 0.96vw;
    line-height: 1.16vw;
    margin-top: 1.54vw;
    opacity: 0;
    transform: translateY(12vh);
    transition: transform 400ms ease, opacity 400ms ease;
}
.inLostSubTit:not(.is-subtit-visible) {
    display: none;
}
.inLostOurAbs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
}
.inLostOur:not(:hover) .inLostSubOur:first-child { 
    width: 50%;
}
.inLostOur:not(:hover) .inLostSubOur:nth-child(n+2) {
    width: 25%;
}
.inLostOur:hover .inLostSubOur {
    width: 25%;
}
.inLostOur:hover .inLostSubOur:hover {
    width: 50%;
}
.inLostOur:hover:not(:has(.inLostSubOur:hover)) .inLostSubOur:last-child {
    width: 50%;
}

.inLostOur.is-touch .inLostSubOur {
    width: 25%;
}
.inLostOur.is-touch .inLostSubOur.is-expanded {
    width: 50%;
}

.inLostOur .inLostSubOur .mediaBlock {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    transition: filter 0.4s ease, transform 0.4s ease;
    will-change: filter, transform;
    transform-origin: center center;
    display: block;
}
.inLostOur:not(:hover) .inLostSubOur:first-child .mediaBlock {
    filter: blur(6px);
    transform: scale(1.06);
}
.inLostOur:hover .inLostSubOur:hover .mediaBlock {
    filter: blur(6px);
    transform: scale(1.06);
}
.inLostSubTit.is-subtit-visible {
    opacity: 1;
    transform: translateY(0);
}
.inLostOur:not(:hover) .inLostSubOur:first-child .inLostOurAbs {
    left: 7.94vw;
    right: 7.54vw;
    transform: translateY(-50%);
}
.inLostOur:hover .inLostSubOur:hover .inLostOurAbs {
    left: 7.943vw;
    right: 7.54vw;
    transform: translateY(-50%);
}

@keyframes introSlideInUp {
    0%   { opacity: 0; transform: translateY(12vh) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.intro-slide-in {
    will-change: transform, opacity;
    animation: introSlideInUp 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (max-width: 768px) {
	.indexFeaPro {
		padding: 0;
	}
	.indexFeatureFlex {
		font-size: 3.52vw;
		line-height: 6.52vw;
	}
	.indexFeatureMar {
	    font-size: 3vw;
		line-height: 5vw;
	}
	.captionSize1, .captionSize3 {
		font-size: 6.08vw;
		line-height: 6.08vw;
	}
	.captionSize2 {
		font-size: 4.08vw;
		line-height: 4.08vw;
	}
	.captionSubSize1, .captionSubSize2, .captionSubSize3 {
		font-size: 2.6vw;
		line-height: 2.6vw;
	}
	.indexProTitle {
		font-size: 6vw;
		line-height: 6vw;
	}
	.indexFeatureAbs a {
		font-size: 2.8vw;
		line-height: 2.8vw;
		padding: 1.91vw 2.04vw;
	}
	.indexFeatureAbs {
		padding: 2.3vw 0 2.95vw 2.95vw;
	}
	.indexCateFlex {
		display: grid;
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.indexContainer {
		flex-wrap:wrap;
	}
	.indexText {
		width: 65%;
		text-align: left;
	}
	.indexCateTit {
		font-size: 2.5vw;
		line-height: 2.5vw;
	}
	.indexCateSubTit {
		font-size: 1.6vw;
		line-height: 3.6vw;
	}
	.indexGridWrapper {
		width: min(570px, 100%);
		gap: 17px;
	}
	.indexHeader {
		margin: 2.8vw 20vw;
		border-radius: 0;
		border: none;
		gap: 2vw;
		flex-direction: column;
	}
	.indexHeader__slider {
		display: none;
	}
	.indexHeader a.active {
		background: #000;
	}
	.indexHeader a {
		column-gap: 3vw;
		font-size: 3vw;
		justify-content: center;
	}
	.indexCateCon {
		flex-wrap: wrap;
	}
    .video-slider-container {
        height: 300px;
        margin-bottom: 20px;
    }
    .video-slide {
        height: 300px;
    }
    .bottom-section {
        flex-direction: column;
        gap: 5px;
    }
    .main-title {
        margin-bottom: 5px;
        font-size: 5vw;
    }
    .subtitle {
        white-space: normal;
        font-size: 2vw;
        line-height: 3vw;
    }
    .inLostTit {
        font-size: 3.5vw;
        line-height: 3.5vw;
    }
    .inLostSubTit {
        font-size: 2vw; 
        line-height: 2vw; 
    }
    .inLostOur { 
        height: 52vw; 
        border-radius: 0.5vw;
    }
}
@media (min-width:769px) and (max-width: 1024px) {
	.indexProTitle {
		font-size: 4vw;
		line-height: 4vw;
	}
	.indexFeatureFlex {
		font-size: 2.5vw;
		line-height: 4vw;
	}
	.indexFeatureMar, .indexFeatureAbs a {
		font-size: 1.5vw;
		line-height: 2vw;
	}
	.indexCateFlex {
		display: grid;
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.indexCateTit {
		font-size: 2vw;
		line-height: 2vw;
	}
	.indexCateSubTit {
		font-size: 1.5vw;
		line-height: 1.5vw;
	}
	.subtitle {
		font-size: 1.3vw !important;
		line-height: 2vw;
	}
	.indexFeaPro {
		gap: 5px;
	}
	.captionSize1 {
		font-size: 3.08vw;
		line-height: 3.08vw;
	}
	.captionSize2 {
		font-size: 2.5vw;
		line-height: 2.5vw;
	}
	.captionSize3 {
		font-size: 2.4vw;
		line-height: 2.4vw;
	}
	.captionSubSize1, .captionSubSize2, .captionSubSize3 {
		font-size: 1.36vw;
		line-height: 1.36vw;
	}
	.indexGridWrapper {
		display: flex;
		width: 100%;
		gap: 0.8vw;
	}
	.indexContainer {
		display: grid;
		padding: 0.879vw;
		gap: 5px;
	}
	.indexHeader__slider {
		display: none;
	}
	.indexHeader {
		border-radius: 0;
		border: none;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
	}
	.indexHeader a {
		border: 1px solid #ccc;
	}
	.indexHeader a.active {
		background-color: #000;
	}
	.indexCateCon {
		flex-wrap: wrap;
	}
}