@charset "utf-8";
.statement_wrap {
		max-width: calc(100vw - 100px);
		margin-left: 160px;
}
@media(max-width: 960px) {
		.statement_wrap {
				margin-left: 120px;
		}
}
.statement_gr_inner p {
		/* 841~2560  40px~130px */
		font-size: clamp(2.5rem, 5.236vw + -0.252rem, 8.125rem);
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: 0.02em;
		position: relative;
		transition: opacity 0.4s;
}
.statement_gr_inner p.stateActive {
		opacity: 1;
}
@media(min-width: 2561px) {
		.statement_gr_inner p {
				font-size: 140px;
		}
}
.statement_gr {
		margin-bottom: 80px;
}
.statement_gr_inner p::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: -30%;
		width: 130%;
		height: 100%;
		transform-origin: right center;
		background: #1E1E1E;
		background: linear-gradient(90deg, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 1) 20%);
		transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1);
		transform: scaleX(1)
}
.statement_gr_inner p.stateActive::after {
		transform: scaleX(0)
}
@media(max-width: 767px) {
		.statement_gr_inner p::after {
				transition: all 1.8s cubic-bezier(0.16, 1, 0.3, 1);
		}
}
span.hayasa {
		position: relative;
		z-index: 0
}
.hayasaWht {
		color: #ddd;
		position: relative;
		z-index: -1;
		opacity: 0;
		transition: opacity 0.2s;
		transition-delay: 0.5s
}
span.hayasa span:not(.hayasaWht) {
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
}
span.hayasa span.upperWht, span.hayasa span.lowerBlk {
		height: clamp(2.5rem, 5.236vw + -0.252rem, 8.125rem);
		top: 0.27em;
		transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
span.hayasa span.lowerBlk {
		transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
span.hayasa span.hayasaBlk {
		color: #1e1e1e;
		top: 0.025em;
		left: 0;
		z-index: 8;
		transition: opacity 0.1s;
}
.fast span.hayasa span.upperWht, .fast span.hayasa span.lowerWht {
		transition-delay: 0.20s
}
.mid span.hayasa span.upperWht, .mid span.hayasa span.lowerWht {
		transition-delay: 0.25s
}
.slow span.hayasa span.upperWht, .slow span.hayasa span.lowerWht {
		transition-delay: 0.38s
}
span.upperWht {
		z-index: 6;
		background: #ddd;
		transform-origin: left center;
		transform: scaleX(0);
		opacity: 0;
}
span.lowerBlk {
		background: #1e1e1e;
		z-index: 4;
		transform-origin: left center;
}
span.hayasa span.hayasaWht {
		z-index: 2;
		position: relative;
}
.stateActive span.upperWht {
		transform: scaleX(1);
		opacity: 1;
}
.stateActive .hayasaWht, .stateActive .hayasaBlk {
		opacity: 1;
}
.stateActive .hayasaBlk {
		z-index: 100 !important;
}
.stateActive span.lowerBlk {
		transform: scaleX(0);
}
.stateFinished span.lowerBlk {
		transform: scaleX(1);
		z-index: 10
}
.stateFinished .hayasaBlk {
		opacity: 0
}
.stateFinished .hayasaWht {
		z-index: 11 !important
}
@media(max-width: 840px) {
		.statement_wrap {
				max-width: inherit;
				padding-right: 0px;
		}
}
.statement_cover {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 2;
		pointer-events: none;
}
.statement_cover .statement_cover_bg {
		position: absolute;
		top: 0;
		left: 0;
		height: 200px;
		width: 100%;
		background: linear-gradient(0deg, rgba(30, 30, 30, 0) 0%, rgba(30, 30, 30, 0.6) 60%);
}
@media(max-width: 767px) {
		.statement_wrap {
				padding-left: 25px;
				margin-left: 0;
				padding-right: 0px;
				max-width: inherit;
		}
		.statement_gr {
				margin-bottom: 60px;
				margin-bottom: 30px;
		}
		.statement_gr_inner p {
				font-size: 6vw;
				margin: 0 0 15px;
				margin: 0 0 8px
		}
		span.hayasa span.upperWht, span.hayasa span.lowerBlk {
				height: 6.5vw;
				top: 0.27em;
		}
		.statement_cover .statement_cover_bg {
				height: 100px
		}
}