body.appear{
    background:#fff;
}

#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    background-size: cover;
    z-index: 9999999;
    text-align:center;
    color:#111;
  }
  
  #splash-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: clamp(200px,30vw,600px);
    animation-delay:.35s;
    max-width: 250px;
  }
  .splashbg{
    position: fixed;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    border-width: 0px;
    border-style:solid;
      border-color: #fff;
    animation-duration:.5s;
    animation-fill-mode:forwards;

  }
  
  @keyframes backBoxAnime{
    99.9% {
          z-index: 99;
      border-width: 0px;
    }
      100%{
         z-index: 98;
          border-width: 0px;
      }
  }
  
  #container{
      position: relative;
    opacity: 0;
  }
  
  body.appear #container{
    animation-name:PageAnimeAppear;
    animation-duration:1s;
    animation-delay:0.2s;
    animation-fill-mode:forwards;
    opacity: 0;
    z-index: 99;
  }
  body.appear #container::before{
    content: '';
    position: fixed;
    left:0;
    width: 50vw;
    background:url(../images/left__bg.png) no-repeat left bottom #fff;
        background-size: 60%;
    height: 100vh;
    top:0;
    animation-name:PageAnimeAppear02;
    animation-duration:.8s;
    animation-delay:1.5s;
    animation-fill-mode: forwards;
    z-index: 999;
    opacity: 1;
  }
  body.appear #container::after{
    content: '';
    position: fixed;
    right:0;
    bottom:0;
    width: 50vw;
    background:var(--blue);
    height: 100vh;
    animation-name:PageAnimeAppear03;
    animation-duration:.8s;
    animation-delay:1.5s;
    animation-fill-mode: forwards;
    z-index: 999;
    opacity: 1;
  }
  @keyframes PageAnimeAppear{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
  }
  }  

  @keyframes PageAnimeAppear02{
    0% {
        top:0;
    opacity: 1;
    }
    100% {
        top:-100vh;
    opacity: 0;
    height: 0;
  }
  } 
  @keyframes PageAnimeAppear03{
    0% {
        bottom:0;
    opacity: 1;
    }
    100% {
        bottom:-100vh;
    opacity: 0;
    height: 0;
  }
  }  

  .caption_wrap h1.flipDownTrigger.flipDown{
    animation-delay:3.5s;
  }

  /*.caption_wrap .main__title.fadeLeftTrigger.fadeLeftt{
    animation-delay:3.5s;
  }*/

  .caption_wrap .main__title.sec.fadeLeftTrigger.fadeLeftt{
    animation-delay: 1.0s;
  }

  .top_slide_main_wrap .thumbnail.fadeLeftTrigger{
    animation-delay:3.5s;
  }

  @media screen and (max-width: 767px) {
      body.appear #container::before, body.appear #container::after{
        width: 100%;
      }

      body.appear #container::before{
        height: 75vh;
      }
      body.appear #container::after{
        height: 25vh;
        background: #3b4043;
      }
  }