@charset "utf-8";
/* CSS Document */

.shutter{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#000;
	z-index:9999;
	animation: byeShutter 2.6s forwards;
}
.shutter::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:auto;
}
.shutter::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:auto;
}
  
.shutter::before{
    background-color:#d1481d;
    width:0;
    height:1px;
    animation: shutterOpen1 2s forwards;
}
.shutter::after{
    width:120%;
    height:0;
    margin-left:-10%;
    background-color:#000;
    animation: shutterOpen2 2s forwards;
}


@keyframes byeShutter{
  70%{
    opacity:1;
  }
  100%{
    opacity:0;
    display:none;
    z-index:-1;
  }
}

@keyframes shutterOpen1{
  0%{
    width:0;
    height:1px;
  }
  50%{
    width:100%;
    height:1px;
  }
  90%{
    width:100%;
    height:100%;
  }
  100%{
    width:100%;
    height:100%;
  }
}
@keyframes shutterOpen2{
  60%{
    width:120%;
    height:0;
    transform:rotate(5deg);
  }
  90%{
    width:120%;
    height:100%;
    transform:rotate(-5deg);
  }
  100%{
    width:120%;
    height:100%;
    transform:rotate(-5deg);
  }
}