@charset "UTF-8";

.loading{
	position:fixed;
	left:0;
	top:0;
/*	background: url("../img/index/bg.png") repeat #080808;*/
    background: #1a1a1a;
	background-attachment: fixed!important;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	z-index: 2000;
	font-size: 1.25vw;
	letter-spacing: 0.6em;
	pointer-events: none;
}

.loading p{
	display: flex;
	overflow:hidden;
	height: 1.7em;
	position:fixed;
	
}

body.off .loading{
	transition: 1.0s;
	transform: rotate(-6deg) blur(10px);
	opacity:0;
	
}

body.on2 .loading span:nth-child(1){margin-top:0; transition: 0.8s; transition-delay:0.00s;}
body.on2 .loading span:nth-child(2){margin-top:0; transition: 0.8s; transition-delay:0.01s;}
body.on2 .loading span:nth-child(3){margin-top:0; transition: 0.8s; transition-delay:0.02s;}
body.on2 .loading span:nth-child(4){margin-top:0; transition: 0.8s; transition-delay:0.03s;}
body.on2 .loading span:nth-child(5){margin-top:0; transition: 0.8s; transition-delay:0.04s;}
body.on2 .loading span:nth-child(6){margin-top:0; transition: 0.8s; transition-delay:0.05s;}
body.on2 .loading span:nth-child(7){margin-top:0; transition: 0.8s; transition-delay:0.06s;}
body.on2 .loading span:nth-child(8){margin-top:0; transition: 0.8s; transition-delay:0.07s;}
body.on2 .loading span:nth-child(9){margin-top:0; transition: 0.8s; transition-delay:0.08s;}
body.on2 .loading span:nth-child(10){margin-top:0; transition: 0.8s; transition-delay:0.09s;}
body.on2 .loading span:nth-child(11){margin-top:0; transition: 0.8s; transition-delay:0.1s;}
body.on2 .loading span:nth-child(12){margin-top:0; transition: 0.8s; transition-delay:0.11s;}
body.on2 .loading span:nth-child(13){margin-top:0; transition: 0.8s; transition-delay:0.12s;}
body.on2 .loading span:nth-child(14){margin-top:0; transition: 0.8s; transition-delay:0.13s;}
body.on2 .loading span:nth-child(15){margin-top:0; transition: 0.8s; transition-delay:0.14s;}
body.on2 .loading span:nth-child(16){margin-top:0; transition: 0.8s; transition-delay:0.15s;}
body.on2 .loading span:nth-child(17){margin-top:0; transition: 0.8s; transition-delay:0.16s;}
body.on2 .loading span:nth-child(18){margin-top:0; transition: 0.8s; transition-delay:0.17s;}
body.on2 .loading span:nth-child(19){margin-top:0; transition: 0.8s; transition-delay:0.18s;}
body.on2 .loading span:nth-child(20){margin-top:0; transition: 0.8s; transition-delay:0.19s;}

body.on2.off .loading span:nth-child(1){margin-top:-2em; transition: 0.8s; transition-delay:0.00s;}
body.on2.off .loading span:nth-child(2){margin-top:-2em; transition: 0.8s; transition-delay:0.01s;}
body.on2.off .loading span:nth-child(3){margin-top:-2em; transition: 0.8s; transition-delay:0.02s;}
body.on2.off .loading span:nth-child(4){margin-top:-2em; transition: 0.8s; transition-delay:0.03s;}
body.on2.off .loading span:nth-child(5){margin-top:-2em; transition: 0.8s; transition-delay:0.04s;}
body.on2.off .loading span:nth-child(6){margin-top:-2em; transition: 0.8s; transition-delay:0.05s;}
body.on2.off .loading span:nth-child(7){margin-top:-2em; transition: 0.8s; transition-delay:0.06s;}
body.on2.off .loading span:nth-child(8){margin-top:-2em; transition: 0.8s; transition-delay:0.07s;}
body.on2.off .loading span:nth-child(9){margin-top:-2em; transition: 0.8s; transition-delay:0.08s;}
body.on2.off .loading span:nth-child(10){margin-top:-2em; transition: 0.8s; transition-delay:0.09s;}
body.on2.off .loading span:nth-child(11){margin-top:-2em; transition: 0.8s; transition-delay:0.1s;}
body.on2.off .loading span:nth-child(12){margin-top:-2em; transition: 0.8s; transition-delay:0.11s;}
body.on2.off .loading span:nth-child(13){margin-top:-2em; transition: 0.8s; transition-delay:0.12s;}
body.on2.off .loading span:nth-child(14){margin-top:-2em; transition: 0.8s; transition-delay:0.13s;}
body.on2.off .loading span:nth-child(15){margin-top:-2em; transition: 0.8s; transition-delay:0.14s;}
body.on2.off .loading span:nth-child(16){margin-top:-2em; transition: 0.8s; transition-delay:0.15s;}
body.on2.off .loading span:nth-child(17){margin-top:-2em; transition: 0.8s; transition-delay:0.16s;}
body.on2.off .loading span:nth-child(18){margin-top:-2em; transition: 0.8s; transition-delay:0.17s;}
body.on2.off .loading span:nth-child(19){margin-top:-2em; transition: 0.8s; transition-delay:0.18s;}
body.on2.off .loading span:nth-child(20){margin-top:-2em; transition: 0.8s; transition-delay:0.19s;}

.loading span{
	display:block;
	margin-top: 2.0em;
	}

html{
	margin: 0;
	background: url("../img/index/bg.png") repeat #080808;
/*    background: #1a1a1a;*/
	background-attachment: fixed!important;
	background-size: cover;
}
body.loading{
	display:none;
}

body{
	position: absolute;
	overflow-y: hidden;
	width: 110vw!important;
	height: 100vh;
	overflow-x: hidden;
}



#main{
	position: fixed;
	left:5vw;
	top:0;
}

#main > *{
	display: inline-block;
	vertical-align: top;
	position: relative;
}
#main > * img{
	width: 100%;
	top:0;
	right: 0;
	z-index: -1;
}

#main .feature a{
	transform: scale(1.0);
	transition: 0.5s;
	display: block;
}

#main.active .feature a, #main.active .feature .txtBlock{
	transform: scale(0.75);
	transition: 0.5s;
}

#main .feature .imgBlock{
	width: 45vw;
	margin-top: -8vw;
	transition: 1.0s;
	opacity: 0.2;
}


#main .feature:first-child{
	margin-left: -5vw;
}



#main .feature .imgBlock p:first-child{
	position: absolute;
}


#main .feature.on:hover{
	margin-top: 0;
	transition: 1.0s;
}


@keyframes carousel_move{
	0%{
		border-top-left-radius: 120px;
		border-top-right-radius: 150px;
		border-bottom-left-radius: 200px;
		border-bottom-right-radius: 250px;
		transform: rotate(-2deg);
		left: 30vw;
		opacity: 0.5;
	}
	25%{
		border-top-left-radius: 150px;
		border-top-right-radius: 350px;
		border-bottom-left-radius: 500px;
		border-bottom-right-radius: 250px;
		transform: rotate(5deg);
	}	
	50%{
		border-top-left-radius: 250px;
		transform: rotate(-1deg);		
	}
	100%{
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		transform: rotate(0deg);
		left: 0vw;
		opacity: 1.0;
	}	
}

@keyframes carousel_auto{
	0%{transform: scale(1.0);}
	50%{transform: scale(.95);}
	100%{transform: scale(1.0);}
}
#main{
	margin-left:-78vw;
}

#main .feature{
	left: 0;
	transition: 0.7s;
}
#main .feature a{pointer-events: none;}
#main .feature.on a{pointer-events: auto;}

#main.after .feature .imgBlock{
	left:0vw!important;
}

#main:not(.after) .feature.on .imgBlock{
	animation: carousel_move 1.0s forwards;
}
#main .feature.on .imgBlock{
	width: 45vw;
	opacity:1.0;
	overflow: hidden;
	position: absolute;
	top: -5vw;
	transition: 0.3s;
	margin-top: 0;
	cursor: pointer;
}
#main .feature .imgBlock div.imgBox{
	display: block;
	animation: carousel_auto 10.0s infinite;
	overflow: hidden;
}

#main .feature .imgBlock div.imgBox > div{
	overflow: hidden;
}


#main .feature.on .imgBlock p:first-child{
	position: absolute;
	width: 0vw;
	height: 34vw;
	top:0;
	left:22.5vw;
	overflow: hidden;
	transition: 0.3s;
	z-index: 15;
	background: #fff;
	opacity:0.08;
	filter: blur(10px);
}

#main .feature.on:hover .imgBlock p:first-child{
	width:45vw;
	left:0;
	transition: 0.2s;
	filter: blur(50px);
}

#main .feature:hover .imgBlock{
	width: 40vw;
	left: 30vw;
	top: -3vw;
	transition: 0.5s;
}

#main .feature:hover .imgBlock:last-child{
	margin-left: 4vw;
	transition: 0.5s;
}

#main .feature:hover .imgBlock:last-child img{
	transform: scale(1.1);
	transition: 0.5s;
	transition-timing-function: linear;
}

#main .feature .imgBlock p:first-child img{
	width: 45vw;
	margin-left: -8vw;
}
#main .feature:hover .imgBlock p:first-child img{
	width: 40vw;
	margin-left: 0vw;
	transition: 0.5s;
}
#main .feature.on .imgBlock p:last-child{
	opacity: 1.0;
}

#main .feature.on.animOn imgBlock{
	animation: skew2 1s;
}

#main .feature.on .imgBlock img{
	margin-top: -3vw;
	transition: 1.0s;
}

#main .feature.on:hover .imgBlock img{
	transition: 0.5s;
}

#main .feature div.txtBlock{
	opacity:0;
	left: 0;
	top: 40vh;
	margin-top: -64px;
	position: fixed;
	pointer-events: none;
	font-weight: 100;
}

#main .feature div.txtBlock span{
	display: none;
}

#main .feature div.txtBlock.l2 img{
	height: 12vw;
}



#main .feature.on div.txtBlock{
	transition: 0.5s;
	opacity: 1.0;
}

#main .feature div.txtBlock img{
	height: 6.45833vw;
}

#main .feature{
	width: 67vw;
	transition: 1.0s;
}


#main{
	position: absolute;
	top: 53%;
	margin-top: -11.5vw;
	color: #fff;
	width: 9999vw;
}
#main span{
	display: block;
}

#main span.year{
	font-size: 16px;
}
#main strong{
	font-size: 128px;
}
#main .tag{
	font-size: 12px;
}


/*
#main > *:nth-child(1) .imgBlock img{
  animation: skew 3s infinite;
  animation-delay: 0.2s;
}

#main > *:nth-child(2) .imgBlock img{
  animation: skew 3s infinite;
}

#main > *:nth-child(3) .imgBlock img{
  animation: skew 3s infinite;
  animation-delay: 0.4s;
}
*/

@keyframes skew {
  0% {
    transform: none;
  }
  33% {
    transform: none;
  }
  33.3% {
    transform: skewX(5deg);
  }
  33.6% {
    transform: skewX(-5deg);
  }
  33.9% {
    transform: none;
  }
  66% {
    transform: none;
  }
  66.3% {
    transform: skewX(2deg);
  }
  66.6% {
    transform: skewX(-2deg);
  }
  66.9% {
    transform: none;
  }
  77% {
    transform: none;
  }
  77.3% {
    transform: skewX(3.5deg);
  }
  77.6% {
    transform: skewX(-3.5deg);
  }
  77.9% {
    transform: none;
  }
}

@keyframes skew2 {
    0% {
    transform: none;
    }
	5%{
	    transform: none;
	}
	50% {
    transform: scale(1.5);
    }
	100% {
    transform: none;
	}
	
}


.news{
	position: fixed;
	right: 2vw;
	bottom: 2vw;
	font-size: 0.7vw;
	text-decoration:underline;
}