@charset "UTF-8";

.non-active {display: none;}

#opening { width: 100%; height: 100vh; position:fixed;top:0;left:0;right:0;bottom:0;background-color:#001846;z-index:9999;overflow: hidden;}
.opening_img {width: 100%; height: 100vh; position: relative;overflow: hidden;}
.opening_img img {width: 90%; height: auto; position: absolute; top: 50%; left: 50%;  -webkit-transform : translate(-50%,-50%);transform : translate(-50%,-50%);}

#opening::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  width: 50%;
  height: 50%;
}

#opening {
  -webkit-animation: byeShutter 2.6s forwards;
          animation: byeShutter 2.6s forwards;
}

#opening::before {
  -webkit-animation: shutterOpen 2.6s forwards;
          animation: shutterOpen 2.6s forwards;
}

/*.wrapper {*/
/*  -webkit-animation: contentScale 2.6s forwards;*/
/*          animation: contentScale 2.6s forwards;*/
/*}*/

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

@keyframes shutterOpen {
  0% {
    width: 1px;
    height: 0;
  }
  50% {
    width: 1px;
    height: 100%;
  }
  90% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

/*@keyframes contentScale {*/
/*  0% {*/
/*    opacity:0;*/
/*  }*/
/*  100% {*/
/*    opacity:1;*/
/*  }*/
/*}*/