@charset "utf-8";
/* CSS Document */
/*
	animation
-----------------------------------------------------------------------------------------------*/
.fadeInTrigger, .fadeUpTrigger, .fadeDownTrigger, .fadeLeftTrigger, .fadeRightTrigger {
	opacity: 0;
}
.fadeDown{
	animation-name:fadeDownAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
#CONCEPT .fadeUp,
#DESIGN .fadeUp,
#FUNCTION .fadeUp,
#CV .fadeUp,
#SUSTAINABILITY .fadeUp,
#CS .fadeUp,
footer .fadeUp{
    animation-name: fadeUpAnime;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-delay: 0.2s;
    opacity: 0;
}
.fadeUp-2{
	animation-name:fadeUpAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
.fadeUp-3{
	animation-name:fadeUpAnime;
	animation-duration:12s;
	animation-fill-mode:forwards;
	opacity:0;
}
.fadeIn{
	animation-name: fadeInAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
.fadeRight{
	animation-name: fadeRightAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
.fadeLeft{
	animation-name: fadeLeftAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
}


/*
	keyframes
-----------------------------------------------------------------------------------------------*/

@keyframes expansionImg{
	0% {
		transform:scale(0.5);
	}

	99.9%,to {
		transform:scale(1);
	}
}
@keyframes circle {
	0% { stroke-dasharray: 0 300; }
	10% { stroke-dasharray: 0 300; }
	45% { stroke-dasharray: 111 300; }
	65% { stroke-dasharray: 111 300; }
	100% { stroke-dasharray: 300 300; }
}
@keyframes scroll {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	50.1% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}
@keyframes menu07-bar01 {
	0% {
		transform: translateY(6px) rotate(45deg);
	}
	50% {
		transform: translateY(6px) rotate(0);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}
@keyframes menu07-bar02 {
	0% {
		transform: translateY(-6px) rotate(-45deg);
	}
	50% {
		transform: translateY(-6px) rotate(0);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}
@keyframes active-menu07-bar01 {
	0% {
		transform: translateY(0) rotate(0);
	}
	50% {
		transform: translateY(6px) rotate(0);
	}
	100% {
		transform: translateY(6px) rotate(45deg);
	}
}
@keyframes active-menu07-bar02 {
	0% {
		transform: translateY(0) rotate(0);
	}
	50% {
		transform: translateY(-6px) rotate(0);
	}
	100% {
		transform: translateY(-6px) rotate(-45deg);
	}
}

@keyframes designArrow {
	0% {
		transform: scale(0, 1);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	60% {
		transform: scale(1, 1);
		transform-origin: 100% 0;
	}
	100% {
		transform: scale(0, 1);
		transform-origin: 100% 0;
	}
}
@keyframes linkArrow {
	0% {
		transform: scale(0, 1);
		transform-origin: 0 0;
	}
	100% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
}
@keyframes fadeInAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeDownAnime{
	from {
		opacity: 0;
		transform: translateY(-100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeRightAnime{
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes fadeLeftAnime{
	from {
		opacity: 0;
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes linkArrowAnime01{
	from {
		transform: translate(5px , -5px);
	}
	to {
		transform: translate(0 , 0);
	}
}
@keyframes linkArrowAnime{
	from {
		transform: translate(0 , 0);
	}
	to {
		transform: translate(5px , -5px);
	}
}

@keyframes infinity-scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}