/* ==== motion ==== */
.hero_inner h1 img {
    display: inline-block;
    transform: rotateX(150deg);
    transform-origin: center bottom;
    opacity: 0;
}
.hero_zt img,
.hero_ult img {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
	-webkit-mask-image: url("../images/product/mask.png");
	mask-image: url("../images/product/mask.png");
	-webkit-mask-mode: alpha;
	mask-mode: alpha;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	mask-size: auto;
	-webkit-mask-size: auto;
	-webkit-mask-position: 0 800px;
	mask-position: 0px 800px;
}
.mainStart .hero_zt img {
	animation: figureMask 0.7s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}
.mainStart .hero_ult img {
	animation: figureMask 0.7s cubic-bezier(0.32, 0, 0.67, 0) forwards;
	animation-delay: 0.3s;
}
@media(max-width: 768px) {
.mainStart .hero_zt img {
	animation: figureMaskSP 0.7s cubic-bezier(0.32, 0, 0.67, 0) forwards;
}
.mainStart .hero_ult img {
	animation: figureMaskSP 0.7s cubic-bezier(0.32, 0, 0.67, 0) forwards;
	animation-delay: 0.3s;
}
	
}


.product_zt,
.product_ult {
	opacity: 0;
	transform: translateY(-60px);
	transition: opacity 0.5s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.product_zt {
	transition-delay: 1s;	
}
.product_ult {
	transition-delay: 1.2s;	
}

.mainStart .hero_inner h1 img {
    animation: foldIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mainStart  .product_zt,
.mainStart  .product_ult {
	opacity: 1;
	transform: translateY(0);
}


.cover_txt {
	display: inline-block;
	position: relative;	
}
.cover_txt::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	transform-origin: right center;
	will-change: transform;
	transform: scaleX(1);
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.slash_ult_inner .cover_txt::after,
.extra_ult .cover_txt::after {
	background: #A1010C;
}
.slash_zt_inner .cover_txt::after,
.extra_zt .cover_txt::after {
	background: #0D0D0D;
}

.coverActive .cover_txt::after {
    transform: scaleX(0);
}


.fadeObj,
.fadeObjEx {
    opacity: 0;
    transform: scale(1.2);
    transition: opacity 0.5s linear, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.fadeActive {
    opacity: 1;
    transform: scale(1);
}
.fadeActiveEx {
    opacity: 1;
    transform: scale(1);
}

.fadeInObj {
    opacity: 0;
    transition: opacity 0.5s linear;
}
.fadeInActive {
    opacity: 1;
}



.bounceObj {
    opacity: 0;
}
.bounceIn {
    animation: bounceIn 0.3s forwards;
	animation-delay: 0.5s;
}






@keyframes bounceIn {
    from,20%,40%,60%,80%,to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}


@keyframes figureMask {
0% {
	-webkit-mask-position: 0 800px;
	mask-position: 0px 800px;
}
100% {
	mask-position: 0px 0;
	-webkit-mask-position: 0px 0;
}
}

@keyframes figureMaskSP {
0% {
	-webkit-mask-position: 0 500px;
	mask-position: 0px 500px;
}
100% {
	mask-position: 0px 0;
	-webkit-mask-position: 0px 0;
}
}

@keyframes foldIn {
0% {
	opacity: 0;
	transform: rotateX(150deg) scaleY(0);
}
100% {
	opacity: 1;
	transform: rotateX(0deg) scaleY(1);
}
}