.scroll-locked{
    position: fixed;
    left: 0;
    overflow-y: scroll;
}
.kv {
	position: relative;
}
.top-anim {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	transform: translateX(0%);
	width: 100vw;
	height: 100vh;
	transition: all .8s ease-in;
}
.top-anim::after {
	position: absolute;
	bottom: 0;
	right: 0;
	content: "";
	background-color: #fff;
	width: 100vw;
	height: 35vh;
}

.top-anim.is-active {
	transform: translateX(310vw);
}

.top-anim__white {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
	display: inline-block;
	background: #fff;
    width: 180vw;
    height: 150vh;
	transform: skewX(-35deg) translateX(-50%);
	overflow: hidden;
}

.top-anim__white::after {
	content: "";
	position: absolute;
	top: 0%;
	left: 0;
	width: 60px;
	height: 100%;
	display: inline-block;
	background: #FFD000;
	transform: skewX(0deg);
	transition: all .6s ease-in;

}

.top-anim.is-active .top-anim__white::after {
	width: 65vw;
}

.container {
	overflow: hidden;
}

@media screen and (min-width: 768px) {
	.kv {
		position: inherit;
		padding-top: 0;
	}
	.top-anim.is-active {
		transform: translateX(200vw);
	}
	.top-anim__white {
		width: 150vw;
		height: 100vh;
		transform: skewX(-35deg) translateX(-20%);
	}
	.top-anim__white::after {
		width: 100px;
	}
}