
.mstg-tls {
	--mstg-img-bg-o: 1;
	--mstg-tls-pd-v-tp: 150;
	--mstg-tls-pd-v-tp-mbl: 10;
	--mstg-tls-pd-v-bt: 128;
	--mstg-tls-pd-v-bt-mbl: 0;
	--mstg-tls-mrg-tp-sp-1: 32;
	--mstg-tls-mrg-tp-sp-1-mbl: 15;
	--mstg-tls-mrg-tp-sp-2: 25;
	--mstg-tls-mrg-tp-sp-2-mbl: 20;
	--mstg-tls-mrg-tp-sp-3: 23;
	--mstg-tls-mrg-tp-sp-3-mbl: 10;
	--mstg-tls-mrg-tp-sp-4: 45;
	--mstg-tls-mrg-tp-sp-4-mbl: 25;
	--mstg-tls-pd-v-tp-clc: calc((var(--mstg-tls-pd-v-tp-mbl) * 1px) + (var(--mstg-tls-pd-v-tp) - var(--mstg-tls-pd-v-tp-mbl)) * ((100vw - 320px) / (1920 - 320)));
	--mstg-tls-pd-v-bt-clc: calc((var(--mstg-tls-pd-v-bt-mbl) * 1px) + (var(--mstg-tls-pd-v-bt) - var(--mstg-tls-pd-v-bt-mbl)) * ((100vw - 320px) / (1920 - 320)));
	--mstg-tls-mrg-tp-sp-1-clc: calc((var(--mstg-tls-mrg-tp-sp-1-mbl) * 1px) + (var(--mstg-tls-mrg-tp-sp-1) - var(--mstg-tls-mrg-tp-sp-1-mbl)) * ((100vw - 318px) / (1920 - 320)));
	--mstg-tls-mrg-tp-sp-2-clc: calc((var(--mstg-tls-mrg-tp-sp-2-mbl) * 1px) + (var(--mstg-tls-mrg-tp-sp-2) - var(--mstg-tls-mrg-tp-sp-2-mbl)) * ((100vw - 320px) / (1920 - 320)));
	--mstg-tls-mrg-tp-sp-3-clc: calc((var(--mstg-tls-mrg-tp-sp-3-mbl) * 1px) + (var(--mstg-tls-mrg-tp-sp-3) - var(--mstg-tls-mrg-tp-sp-3-mbl)) * ((100vw - 320px) / (1920 - 320)));
	--mstg-tls-mrg-tp-sp-4-clc: calc((var(--mstg-tls-mrg-tp-sp-4-mbl) * 1px) + (var(--mstg-tls-mrg-tp-sp-4) - var(--mstg-tls-mrg-tp-sp-4-mbl)) * ((100vw - 320px) / (1920 - 320)));
	--mstg-tls-mrg-tp-sp-5-clc: calc((var(--mstg-tls-mrg-tp-sp-5-mbl) * 1px) + (var(--mstg-tls-mrg-tp-sp-5) - var(--mstg-tls-mrg-tp-sp-5-mbl)) * ((100vw - 320px) / (1920 - 320)));
}

.mstg-tls {
	--opacity: var(--mstg-img-fg-o);
	--filter: saturate(var(--mstg-img-fg-sat)) sepia(var(--mstg-img-fg-sep)) brightness(var(--mstg-img-fg-brt)) contrast(var(--mstg-img-fg-con)) blur(var(--mstg-img-fg-blr));
}

.mstg-tls.bg-image,
.mstg-tls .ovrly {
	--opacity: var(--mstg-img-bg-o);
	--filter: saturate(var(--mstg-img-bg-sat)) sepia(var(--mstg-img-bg-sep)) brightness(var(--mstg-img-bg-brt)) contrast(var(--mstg-img-bg-con)) blur(var(--mstg-img-bg-blr));
}

.mstg-tls .inf {
	padding-top: var(--mstg-tls-pd-v-tp-clc);
	padding-bottom: var(--mstg-tls-pd-v-bt-clc);
}

.mstg-tls .inf em+em,
.mstg-tls .inf strong+em {
	margin-top: var(--mstg-tls-mrg-tp-sp-2-clc);
}

.mstg-tls .inf p {
	margin-top: var(--mstg-tls-mrg-tp-sp-1-clc);
}

.mstg.v2 {
	overflow: hidden;
}

.mstg.v2 .bg.tp {
	inset: auto -56.5% -10.6% auto;
	width: 175.4%;
	height: 39.5%;
	z-index: 1;
}

.mstg.v2 .bg.tp img {
	object-position: center bottom;
}

.mstg.v2 .bg.bt {
	transform: translateX(50%);
	height: 70vw;
	inset: auto 50% 0px auto;
	width: 100%;
}

.mstg.v2 div>.half {
	width: 40.5%;
	position: relative;
	z-index: 2;
}

.mstg.v2 .inf li :not(.input-text) svg {
	font-size: 1.6rem;
}

.mstg.v2 .inf li .clr-bx {
	padding: 0.8rem;
	border-radius: 8px;
}

.mstg.v2 .inf li:nth-child(1) .clr-bx {
	background-color: rgb(247, 149, 61);
}

.mstg.v2 .inf li:nth-child(2) .clr-bx {
	background-color: rgb(112, 90, 160);
}

.mstg.v2 .inf li:nth-child(3) .clr-bx {
	background-color: rgb(77, 135, 199);
}

.mstg.v2 .inf li:nth-child(4) .clr-bx {
	background-color: rgb(178, 189, 62);
}

.arrow-container {
	position: absolute;
	left: 2em;
	bottom: 2em;
}

.arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: 4s ease-in-out 0s infinite normal none running flyAndShrink;
}

.shaft-wrapper {
	transform-origin: center bottom;
	animation: 4s ease-in-out 0s infinite normal none running shrinkSync;
}

.shaft {
	width: 2px;
	height: 9em;
	background-color: rgb(145, 146, 149);
}

.head {
	width: 1.5em;
	height: 1.5em;
	border-left: 2px solid rgb(145, 146, 149);
	border-bottom: 2px solid rgb(145, 146, 149);
	transform: translateX(-50%) rotate(315deg);
	position: absolute;
	left: 50%;
	bottom: 2px;
}

.strs {
	gap: var(--rvw-str-gp);
	font-size: var(--rvw-str-s);
	color: var(--rvw-str-clr);
}

.strs[class*="rt-4"]:not(:is(.rt-4, .rt-4-0))>svg:nth-child(5),
.strs[class*="rt-4"]:not(:is(.rt-4, .rt-4-0))> :nth-child(5) svg {
	fill: url("#StarsGradient");
}


@media screen and (min-width: 700px) {

	.mstg.v2 .bg.tp {
		inset: auto -39.5% -10.6% auto;
		width: 175.4%;
		height: 52.5%;
		z-index: 1;
	}

	.mstg.v2 .bg.bt {
		height: 46vw;
		inset: auto 50% 0px auto;
		width: auto;
	}


}



@media screen and (min-width: 1280px) {


	.mstg.v2 .bg.tp {
		inset: auto -7.3% -2.6% auto;
		width: 63.78%;
		height: 106.9%;
		z-index: 1;
	}

	.mstg.v2 .bg.bt {
		height: 54vw;
		right: 28%;
	}

	.mstg.v2 div>.half {
		width: 40.5%;
	}

	.mstg.v2 .inf ul.ui-repeater {
		row-gap: 3rem;
	}

	.mstg.v2 .inf li :not(.input-text) svg {
		font-size: 2rem;
	}

	.mstg.v2 .inf li .clr-bx {
		padding: 1rem;
	}

	
}

@media screen and (max-width: 699px) {


	.mstg.v2 .strs {
		width: 57.4% !important;
	}

	.mstg.v2 ul:not(.stars) li {
		width: 100% !important;
	}

	.mstg.v2 ul:not(.stars) li .clr-bx+div {
		margin-left: 1rem;
	}


}
