@charset "utf-8";
/* *******************************************************
 * filename : animate.css
******************************************************** */

/* Basic */
@media screen {
    html:not(.no-js) [data-scroll] {
		transition-duration:0.8s;
        transition-timing-function:ease-in-out;
		pointer-events: none;
		will-change: transform;
		will-change: opacity;
    }
	html:not(.no-js) [data-scroll].animated {
		pointer-events: auto;
    }
	html:not(.no-js) [data-scroll^="fade"][data-scroll^="fade"] {
        opacity: 0;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform;
    }
    html:not(.no-js) [data-scroll^="fade"][data-scroll^="fade"].animated {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
    html:not(.no-js) [data-scroll="fade-up"] {
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
    }
    html:not(.no-js) [data-scroll="fade-down"] {
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    html:not(.no-js) [data-scroll="fade-right"] {
        -webkit-transform: translate3d(-30px, 0, 0);
        transform: translate3d(-30px, 0, 0);
    }
    html:not(.no-js) [data-scroll="fade-left"] {
        -webkit-transform: translate3d(30px, 0, 0);
        transform: translate3d(30px, 0, 0);
    }
}

/* Custom */
[data-scroll][data-scroll][data-scroll-duration="100"],
body[data-scroll-duration="100"] [data-scroll] {
    transition-duration: 0.1s;
}
[data-scroll][data-scroll][data-scroll-delay="100"],
body[data-scroll-delay="100"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="100"].animated,
body[data-scroll-delay="100"] [data-scroll].animated {
    transition-delay: 0.1s;
}
[data-scroll][data-scroll][data-scroll-duration="150"],
body[data-scroll-duration="150"] [data-scroll] {
    transition-duration: 0.15s;
}
[data-scroll][data-scroll][data-scroll-delay="150"],
body[data-scroll-delay="150"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="150"].animated,
body[data-scroll-delay="150"] [data-scroll].animated {
    transition-delay: 0.15s;
}
[data-scroll][data-scroll][data-scroll-duration="200"],
body[data-scroll-duration="200"] [data-scroll] {
    transition-duration: 0.2s;
}
[data-scroll][data-scroll][data-scroll-delay="200"],
body[data-scroll-delay="200"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="200"].animated,
body[data-scroll-delay="200"] [data-scroll].animated {
    transition-delay: 0.2s;
}
[data-scroll][data-scroll][data-scroll-duration="250"],
body[data-scroll-duration="250"] [data-scroll] {
    transition-duration: 0.25s;
}
[data-scroll][data-scroll][data-scroll-delay="250"],
body[data-scroll-delay="250"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="250"].animated,
body[data-scroll-delay="250"] [data-scroll].animated {
    transition-delay: 0.25s;
}
[data-scroll][data-scroll][data-scroll-duration="300"],
body[data-scroll-duration="300"] [data-scroll] {
    transition-duration: 0.3s;
}
[data-scroll][data-scroll][data-scroll-delay="300"],
body[data-scroll-delay="300"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="300"].animated,
body[data-scroll-delay="300"] [data-scroll].animated {
    transition-delay: 0.3s;
}
[data-scroll][data-scroll][data-scroll-duration="350"],
body[data-scroll-duration="350"] [data-scroll] {
    transition-duration: 0.35s;
}
[data-scroll][data-scroll][data-scroll-delay="350"],
body[data-scroll-delay="350"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="350"].animated,
body[data-scroll-delay="350"] [data-scroll].animated {
    transition-delay: 0.35s;
}
[data-scroll][data-scroll][data-scroll-duration="400"],
body[data-scroll-duration="400"] [data-scroll] {
    transition-duration: 0.4s;
}
[data-scroll][data-scroll][data-scroll-delay="400"],
body[data-scroll-delay="400"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="400"].animated,
body[data-scroll-delay="400"] [data-scroll].animated {
    transition-delay: 0.4s;
}
[data-scroll][data-scroll][data-scroll-duration="450"],
body[data-scroll-duration="450"] [data-scroll] {
    transition-duration: 0.45s;
}
[data-scroll][data-scroll][data-scroll-delay="450"],
body[data-scroll-delay="450"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="450"].animated,
body[data-scroll-delay="450"] [data-scroll].animated {
    transition-delay: 0.45s;
}
[data-scroll][data-scroll][data-scroll-duration="500"],
body[data-scroll-duration="500"] [data-scroll] {
    transition-duration: 0.5s;
}
[data-scroll][data-scroll][data-scroll-delay="500"],
body[data-scroll-delay="500"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="500"].animated,
body[data-scroll-delay="500"] [data-scroll].animated {
    transition-delay: 0.5s;
}
[data-scroll][data-scroll][data-scroll-duration="550"],
body[data-scroll-duration="550"] [data-scroll] {
    transition-duration: 0.55s;
}
[data-scroll][data-scroll][data-scroll-delay="550"],
body[data-scroll-delay="550"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="550"].animated,
body[data-scroll-delay="550"] [data-scroll].animated {
    transition-delay: 0.55s;
}
[data-scroll][data-scroll][data-scroll-duration="600"],
body[data-scroll-duration="600"] [data-scroll] {
    transition-duration: 0.6s;
}
[data-scroll][data-scroll][data-scroll-delay="600"],
body[data-scroll-delay="600"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="600"].animated,
body[data-scroll-delay="600"] [data-scroll].animated {
    transition-delay: 0.6s;
}
[data-scroll][data-scroll][data-scroll-duration="650"],
body[data-scroll-duration="650"] [data-scroll] {
    transition-duration: 0.65s;
}
[data-scroll][data-scroll][data-scroll-delay="650"],
body[data-scroll-delay="650"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="650"].animated,
body[data-scroll-delay="650"] [data-scroll].animated {
    transition-delay: 0.65s;
}
[data-scroll][data-scroll][data-scroll-duration="700"],
body[data-scroll-duration="700"] [data-scroll] {
    transition-duration: 0.7s;
}
[data-scroll][data-scroll][data-scroll-delay="700"],
body[data-scroll-delay="700"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="700"].animated,
body[data-scroll-delay="700"] [data-scroll].animated {
    transition-delay: 0.7s;
}
[data-scroll][data-scroll][data-scroll-duration="750"],
body[data-scroll-duration="750"] [data-scroll] {
    transition-duration: 0.75s;
}
[data-scroll][data-scroll][data-scroll-delay="750"],
body[data-scroll-delay="750"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="750"].animated,
body[data-scroll-delay="750"] [data-scroll].animated {
    transition-delay: 0.75s;
}
[data-scroll][data-scroll][data-scroll-duration="800"],
body[data-scroll-duration="800"] [data-scroll] {
    transition-duration: 0.8s;
}
[data-scroll][data-scroll][data-scroll-delay="800"],
body[data-scroll-delay="800"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="800"].animated,
body[data-scroll-delay="800"] [data-scroll].animated {
    transition-delay: 0.8s;
}
[data-scroll][data-scroll][data-scroll-duration="850"],
body[data-scroll-duration="850"] [data-scroll] {
    transition-duration: 0.85s;
}
[data-scroll][data-scroll][data-scroll-delay="850"],
body[data-scroll-delay="850"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="850"].animated,
body[data-scroll-delay="850"] [data-scroll].animated {
    transition-delay: 0.85s;
}
[data-scroll][data-scroll][data-scroll-duration="900"],
body[data-scroll-duration="900"] [data-scroll] {
    transition-duration: 0.9s;
}
[data-scroll][data-scroll][data-scroll-delay="900"],
body[data-scroll-delay="900"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="900"].animated,
body[data-scroll-delay="900"] [data-scroll].animated {
    transition-delay: 0.9s;
}
[data-scroll][data-scroll][data-scroll-duration="950"],
body[data-scroll-duration="950"] [data-scroll] {
    transition-duration: 0.95s;
}
[data-scroll][data-scroll][data-scroll-delay="950"],
body[data-scroll-delay="950"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="950"].animated,
body[data-scroll-delay="950"] [data-scroll].animated {
    transition-delay: 0.95s;
}
[data-scroll][data-scroll][data-scroll-duration="1000"],
body[data-scroll-duration="1000"] [data-scroll] {
    transition-duration: 1s;
}
[data-scroll][data-scroll][data-scroll-delay="1000"],
body[data-scroll-delay="1000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1000"].animated,
body[data-scroll-delay="1000"] [data-scroll].animated {
    transition-delay: 1s;
}
[data-scroll][data-scroll][data-scroll-duration="1100"],
body[data-scroll-duration="1100"] [data-scroll] {
    transition-duration: 1.1s;
}
[data-scroll][data-scroll][data-scroll-delay="1100"],
body[data-scroll-delay="1100"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1100"].animated,
body[data-scroll-delay="1100"] [data-scroll].animated {
    transition-delay: 1.1s;
}
[data-scroll][data-scroll][data-scroll-duration="1200"],
body[data-scroll-duration="1200"] [data-scroll] {
    transition-duration: 1.2s;
}
[data-scroll][data-scroll][data-scroll-delay="1200"],
body[data-scroll-delay="1200"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1200"].animated,
body[data-scroll-delay="1200"] [data-scroll].animated {
    transition-delay: 1.2s;
}
[data-scroll][data-scroll][data-scroll-duration="1300"],
body[data-scroll-duration="1300"] [data-scroll] {
    transition-duration: 1.3s;
}
[data-scroll][data-scroll][data-scroll-delay="1300"],
body[data-scroll-delay="1300"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1300"].animated,
body[data-scroll-delay="1300"] [data-scroll].animated {
    transition-delay: 1.3s;
}
[data-scroll][data-scroll][data-scroll-duration="1400"],
body[data-scroll-duration="1400"] [data-scroll] {
    transition-duration: 1.4s;
}
[data-scroll][data-scroll][data-scroll-delay="1400"],
body[data-scroll-delay="1400"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1400"].animated,
body[data-scroll-delay="1400"] [data-scroll].animated {
    transition-delay: 1.4s;
}
[data-scroll][data-scroll][data-scroll-duration="1500"],
body[data-scroll-duration="1500"] [data-scroll] {
    transition-duration: 1.5s;
}
[data-scroll][data-scroll][data-scroll-delay="1500"],
body[data-scroll-delay="1500"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1500"].animated,
body[data-scroll-delay="1500"] [data-scroll].animated {
    transition-delay: 1.5s;
}
[data-scroll][data-scroll][data-scroll-duration="1600"],
body[data-scroll-duration="1600"] [data-scroll] {
    transition-duration: 1.6s;
}
[data-scroll][data-scroll][data-scroll-delay="1600"],
body[data-scroll-delay="1600"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1600"].animated,
body[data-scroll-delay="1600"] [data-scroll].animated {
    transition-delay: 1.6s;
}
[data-scroll][data-scroll][data-scroll-duration="1700"],
body[data-scroll-duration="1700"] [data-scroll] {
    transition-duration: 1.7s;
}
[data-scroll][data-scroll][data-scroll-delay="1700"],
body[data-scroll-delay="1700"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1700"].animated,
body[data-scroll-delay="1700"] [data-scroll].animated {
    transition-delay: 1.7s;
}
[data-scroll][data-scroll][data-scroll-duration="1800"],
body[data-scroll-duration="1800"] [data-scroll] {
    transition-duration: 1.8s;
}
[data-scroll][data-scroll][data-scroll-delay="1800"],
body[data-scroll-delay="1800"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1800"].animated,
body[data-scroll-delay="1800"] [data-scroll].animated {
    transition-delay: 1.8s;
}
[data-scroll][data-scroll][data-scroll-duration="1900"],
body[data-scroll-duration="1900"] [data-scroll] {
    transition-duration: 1.9s;
}
[data-scroll][data-scroll][data-scroll-delay="1900"],
body[data-scroll-delay="1900"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="1900"].animated,
body[data-scroll-delay="1900"] [data-scroll].animated {
    transition-delay: 1.9s;
}
[data-scroll][data-scroll][data-scroll-duration="2000"],
body[data-scroll-duration="2000"] [data-scroll] {
    transition-duration: 2s;
}
[data-scroll][data-scroll][data-scroll-delay="2000"],
body[data-scroll-delay="2000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="2000"].animated,
body[data-scroll-delay="2000"] [data-scroll].animated {
    transition-delay: 2s;
}
[data-scroll][data-scroll][data-scroll-duration="3000"],
body[data-scroll-duration="3000"] [data-scroll] {
    transition-duration: 3s;
}
[data-scroll][data-scroll][data-scroll-delay="3000"],
body[data-scroll-delay="3000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="3000"].animated,
body[data-scroll-delay="3000"] [data-scroll].animated {
    transition-delay: 3s;
}

[data-scroll][data-scroll][data-scroll-duration="4000"],
body[data-scroll-duration="4000"] [data-scroll] {
    transition-duration: 3s;
}
[data-scroll][data-scroll][data-scroll-delay="4000"],
body[data-scroll-delay="4000"] [data-scroll] {
    transition-delay: 0s;
}
[data-scroll][data-scroll][data-scroll-delay="4000"].animated,
body[data-scroll-delay="4000"] [data-scroll].animated {
    transition-delay: 3s;
}
[data-scroll][data-scroll][data-scroll-easing="linear"],
body[data-scroll-easing="linear"] [data-scroll] {
    transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
[data-scroll][data-scroll][data-scroll-easing="ease"],
body[data-scroll-easing="ease"] [data-scroll] {
    transition-timing-function: ease;
}
[data-scroll][data-scroll][data-scroll-easing="ease-in"],
body[data-scroll-easing="ease-in"] [data-scroll] {
    transition-timing-function: ease-in;
}
[data-scroll][data-scroll][data-scroll-easing="ease-out"],
body[data-scroll-easing="ease-out"] [data-scroll] {
    transition-timing-function: ease-out;
}
[data-scroll][data-scroll][data-scroll-easing="ease-in-out"],
body[data-scroll-easing="ease-in-out"] [data-scroll] {
    transition-timing-function: ease-in-out;
}

/* -------- keyframe Animation -------- */
/* 鍥惧儚 zoom */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
/* 鏂囨湰 fade-up */
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(100%) rotate(10deg); 
		transform: translateY(100%) rotate(10deg); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0) rotate(0); 
		transform: translateY(0) rotate(0); 
	}
}
@keyframes text-active-animation-reverse {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(100%) rotate(-10deg); 
		transform: translateY(100%) rotate(-10deg); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0) rotate(0); 
		transform: translateY(0) rotate(0); 
	}
}
/* 鏂囨湰 fade-out */
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
} 
/* svg Circle draw */
@keyframes draw-circle {
	from {
		stroke-dashoffset: -50;
	}
	to {
		stroke-dashoffset: 0
	}
}
@keyframes draw-circle-ios {
	from {
		stroke-dashoffset: 100;
	}
	to {
		stroke-dashoffset: 50
	}
}

@keyframes scrollAni {
	from { 
		top: 2px;
	}
	to {
		top: 10px;
		opacity: 0;
	}
}
/* Updown */
@keyframes upDown {
	0% {
		opacity: 0.7;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(0px);
	}
	100% {
		opacity: 0.7;
		transform:  translateY(-5px);
	}
}

@keyframes scroll-down-ani {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotateX(90deg)
    }

    15%,85% {
        opacity: 1;
        transform: translateY(0) rotateX(0)
    }

    100% {
        opacity: 0;
        transform: translateY(50%) rotateX(-90deg)
    }
}