@charset "UTF-8";

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

.loading p{
	display: flex;
	overflow:hidden;
	height: 1.5em;
	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-attachment: fixed!important;
	background-size: cover;
}
body.loading{
	display:none;
}

body{
	position: absolute;
	overflow-y: hidden;
	width: 100vw!important;
	height: 100vh;
	overflow: hidden;
}
.allWrap{
	overflow-x: hidden;
	width:100vw;
}
.mainWrap{
	width: 100vw;
	height: 79vh;
}

#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.8);
	transition: 0.5s;
}


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


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

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

@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: -135vw;
}

#main .feature{
	left: 0;
	transition: 0.7s;
}
#main .feature a{width:70vw;height:100vw;}

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

#main:not(.after) .feature.on .imgBlock{
	animation: carousel_move 1.0s forwards;
}
#main .feature.on .imgBlock{
	width: 85.672vw;
	opacity:1.0;
	overflow: hidden;
	position: absolute;
	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 .imgBlock p:first-child img{
	width: 45vw;
	margin-left: -8vw;
}
#main .feature .imgBlock p:last-child{
	width: 76vw;
	margin-left: 6vw;
}
#main .feature.on .imgBlock p:last-child{
	opacity: 1.0;
}

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

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


#main .feature div.txtBlock{
	opacity:0;
    left: 0;
    top: 127.53731vw;
    position: fixed;
    pointer-events: none;
    font-weight: 200;
    width: 100vw;
    display: flex;
    align-items: center;
    font-size: 10.66666vw;
    line-height: 1.2;
}

#main .feature div.txtBlock span{
	
}

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

#main .feature div.txtBlock img{
	height: 10.96vw;
	display:none;
}

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


#main{
	position: relative;
	top: 35.7462vw;
	color: #fff;
	width: 9999vw;
}
#main span{
	display: block;
}

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

#main strong{
	display: block;
    text-align: center;
    width: 100vw;
}



/*
#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;
	bottom: 0;
	font-size: 2.6666666vw;
	text-decoration:underline;
	background: rgba(25,23,29,0.5);
	text-align: center;
	line-height: 3.5;
	display: block;
	width: 100vw;
}