.storyArea{
	height:100%;
	text-align: center;
}


.story1:after,
.story2:after,
.story1:before,
.story2:before
{
	content:"";
	position:absolute;
	z-index: -2;
	width:100%;
	height:100%;
	background-image:url(../../images/kv/story1.jpg);
	background-size:cover;
	left:0;
	top:0;
	filter:grayscale(1) brightness(1.2);
}

.story2:after{
	background-image:url(../../images/kv/story2.jpg);
}

.story1:before{
	filter:none;z-index: -1;
	clip-path: var(--maskTStart);
}
.story2:before{
	filter:none;
	background-image:url(../../images/kv/story2.jpg);
	z-index: -1;
	clip-path: var(--maskBStart);
}


.story.active .story1:before{
	transition: all .7s .4s var(--aniFN);
	clip-path: var(--maskEnd);
}

.story.active .story2:before{
	transition: all .7s .4s var(--aniFN);
	clip-path: var(--maskEnd);
}

.storyArea h2{
	position:absolute;
	width: 100%;
	text-align: center;
	z-index: 0;
	top: 90px;
}

.storyArea .txt{
	margin:auto;
	color:#fff;
	height: 100%;
}

.storyArea .txt>div{
	flex:1;
	height:inherit;
	position: relative;
	flex-direction:column;
}

.storyArea .txt>div h3{
	margin-bottom:50px;
}


.storyArea .txt>div p{
	font-size:15px;
}

.storyArea .txt>div.comic{
	border-left:1px solid #ccc;
}


/*1450x800*/	
@media (max-width:1450px) and (max-height: 800px) {

	.storyArea .txt>div h3{
		height:80px;
	}

}