@charset "utf-8";

/*  css animation  */
.trans{
/*    -webkit-transition: all .4s ease-in;
    -moz-transition:all .4s ease-in;
    -o-transition:all .4s ease-in;
    -ms-transition:all .4s ease-in;
    transition:all .4s ease-in;*/
}

@media (min-width:1025px){
  /* page animation  */
  .ani-view {
      opacity: 0;
  }
  @-webkit-keyframes fadeInDown{
      0% {
          opacity:0;
          -webkit-transform:translateY(40px)
      }
      100% {
          opacity:1;
          -webkit-transform:translateY(0)
      }
  }
  @-moz-keyframes fadeInDown{
      0% {
          opacity:0;
          -moz-transform:translateY(40px)
      }
      100% {
          opacity:1;
          -moz-transform:translateY(0)
      }
  }
  @-o-keyframes fadeInDown {
      0% {
          opacity:0;
          -o-transform:translateY(40px)
      }
      100% {
          opacity:1;
          -o-transform:translateY(0)
      }
  }
  @keyframes fadeInDown {
      0% {
          opacity:0;
          transform:translateY(40px)
      }
      100% {
          opacity:1;
          transform:translateY(0)
      }
  }

  .ani-view.fade-in-down{
      opacity:0;
      -webkit-transform:translateY(40px);
      -moz-transform:translateY(40px);
      -o-transform:translateY(40px);
      transform:translateY(40px);
  }
  .ani-view.fadeInDown{
      -webkit-animation:fadeInDown 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -moz-animation:fadeInDown 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -o-animation:fadeInDown 1s cubic-bezier(.25,.74,.22,.99) forwards;
      animation:fadeInDown 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -webkit-animation-delay:0.1s; 
      -moz-animation-delay:0.1s;
      -o-animation-delay:0.1s;
      animation-delay:0.1s;
  }


  @-webkit-keyframes fadeInLeft {
      0% {
          opacity:0;
          -webkit-transform:translateX(-100px)
      }
      100% {
          opacity:1;
          -webkit-transform:translateX(0)
      }
  }
  @-moz-keyframes fadeInLeft {
      0% {
          opacity:0;
          -moz-transform:translateX(-100px)
      }
      100% {
          opacity:1;
          -moz-transform:translateX(0)
      }
  }
  @-o-keyframes fadeInLeft {
      0% {
      opacity:0;
      -o-transform:translateX(-100px)
      }
      100% {
      opacity:1;
      -o-transform:translateX(0)
      }
  }
  @keyframes fadeInLeft {
      0% {
      opacity:0;
      transform:translateX(-100px)
      }
      100% {
      opacity:1;
      transform:translateX(0)
      }
  }
  .ani-view.fade-in-left{
      opacity:0;
      -webkit-transform:translateX(-100px);
      -moz-transform:translateX(-100px);
      -o-transform:translateX(-100px);
      transform:translateX(-100px);
  }
  .ani-view.fadeInLeft {
      -webkit-animation:fadeInLeft 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -moz-animation:fadeInLeft 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -o-animation:fadeInLeft 1s cubic-bezier(.25,.74,.22,.99) forwards;
      animation:fadeInLeft 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -webkit-animation-delay:0.1s; 
      -moz-animation-delay:0.1s;
      -o-animation-delay:0.1s;
      animation-delay:0.1s;
  }

  @-webkit-keyframes fadeInRight {
      0% {
      opacity:0;
      -webkit-transform:translateX(100px)
      }
      100% {
      opacity:1;
      -webkit-transform:translateX(0)
      }
  }
  @-moz-keyframes fadeInRight {
      0% {
      opacity:0;
      -moz-transform:translateX(100px)
      }
      100% {
      opacity:1;
      -moz-transform:translateX(0)
      }
  }
  @-ms-keyframes fadeInRight {
      0% {
      opacity:0;
      -ms-transform:translateX(100px)
      }
      100% {
      opacity:1;
      -ms-transform:translateX(0)
      }
  }
  @-o-keyframes fadeInRight {
      0% {
      opacity:0;
      -o-transform:translateX(100px)
      }
      100% {
      opacity:1;
      -o-transform:translateX(0)
      }
  }
  @keyframes fadeInRight {
      0% {
      opacity:0;
      transform:translateX(100px)
      }
      100% {
      opacity:1;
      transform:translateX(0)
      }
  }
  .ani-view.fade-in-right{
      opacity:0;
      -webkit-transform:translateX(100px);
      -moz-transform:translateX(100px);
      -o-transform:translateX(100px);
      transform:translateX(100px);
  }
  .ani-view.fadeInRight {
      -webkit-animation:fadeInRight 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -moz-animation:fadeInRight 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -o-animation:fadeInRight 1s cubic-bezier(.25,.74,.22,.99) forwards;
      animation:fadeInRight 1s cubic-bezier(.25,.74,.22,.99) forwards;
      -webkit-animation-delay:0.1s; 
      -moz-animation-delay:0.1s;
      -o-animation-delay:0.1s;
      animation-delay:0.1s;
  }
  .ani-view.ani_delay1{
    -webkit-animation-delay:0.1s; 
    -moz-animation-delay:0.1s;
    -o-animation-delay:0.1s;
    animation-delay:0.1s;
  }
  .ani-view.ani_delay2{
    -webkit-animation-delay:0.2s; 
    -moz-animation-delay:0.2s;
    -o-animation-delay:0.2s;
    animation-delay:0.2s;
  }
  .ani-view.ani_delay3{
    -webkit-animation-delay:0.3s; 
    -moz-animation-delay:0.3s;
    -o-animation-delay:0.3s;
    animation-delay:0.3s;
  }
  .ani-view.ani_delay4{
    -webkit-animation-delay:0.4s; 
    -moz-animation-delay:0.4s;
    -o-animation-delay:0.4s;
    animation-delay:0.4s;
  }
  .ani-view.ani_delay5{
    -webkit-animation-delay:0.5s; 
    -moz-animation-delay:0.5s;
    -o-animation-delay:0.5s;
    animation-delay:0.5s;
  }
  .ani-view.ani_delay6{
    -webkit-animation-delay:0.6s; 
    -moz-animation-delay:0.6s;
    -o-animation-delay:0.6s;
    animation-delay:0.6s;
  }
  .ani-view.ani_delay7{
    -webkit-animation-delay:0.7s; 
    -moz-animation-delay:0.7s;
    -o-animation-delay:0.7s;
    animation-delay:0.7s;
  }
  .ani-view.ani_delay8{
    -webkit-animation-delay:0.8s; 
    -moz-animation-delay:0.8s; 
    -o-animation-delay:0.8s; 
    animation-delay:0.8s; 
  }
  .ani-view.ani_delay9{
    -webkit-animation-delay:0.9s; 
    -moz-animation-delay:0.9s;
    -o-animation-delay:0.9s;
    animation-delay:0.9s;
  }
  .ani-view.ani_delay10{
    -webkit-animation-delay:1s; 
    -moz-animation-delay:1s;
    -o-animation-delay:1s;
    animation-delay:1s;
  }
  .ani-view.ani_delay11{
    -webkit-animation-delay:1.1s; 
    -moz-animation-delay:1.1s; 
    -o-animation-delay:1.1s; 
    animation-delay:1.1s; 
  }
  .ani-view.ani_delay12{
    -webkit-animation-delay:1.2s; 
    -moz-animation-delay:1.2s; 
    -o-animation-delay:1.2s; 
    animation-delay:1.2s; 
  }
  .ani-view.ani_delay13{
    -webkit-animation-delay:1.3s; 
    -moz-animation-delay:1.3s;  
    -o-animation-delay:1.3s;  
    animation-delay:1.3s;  
  }
  .ani-view.ani_delay14{
    -webkit-animation-delay:1.4s; 
    -moz-animation-delay:1.4s; 
    -o-animation-delay:1.4s; 
    animation-delay:1.4s; 
  }
  .ani-view.ani_delay15{
    -webkit-animation-delay:1.5s; 
    -moz-animation-delay:1.5s;  
    -o-animation-delay:1.5s;  
    animation-delay:1.5s;  
  }
  .ani-view.ani_delay16{
    -webkit-animation-delay:1.6s; 
    -moz-animation-delay:1.6s;
    -o-animation-delay:1.6s;
    animation-delay:1.6s;
  }
  .ani-view.ani_delay17{
    -webkit-animation-delay:1.7s; 
    -moz-animation-delay:1.7s; 
    -o-animation-delay:1.7s; 
    animation-delay:1.7s; 
  }
  .ani-view.ani_delay18{
    -webkit-animation-delay:1.8s; 
    -moz-animation-delay:1.8s; 
    -o-animation-delay:1.8s; 
    animation-delay:1.8s; 
  }
  .ani-view.ani_delay19{
    -webkit-animation-delay:1.9s; 
    -moz-animation-delay:1.9s; 
    -o-animation-delay:1.9s; 
    animation-delay:1.9s; 
  }
  .ani-view.ani_delay20{
    -webkit-animation-delay:2s; 
    -moz-animation-delay:2s; 
    -o-animation-delay:2s; 
    animation-delay:2s; 
  }



  .fade-in-box{
      width: 100%; 
      height:100%;
      position: absolute;
      top:0%;
      left: 0%;
      background: url(../img/img34.png) center/cover no-repeat;
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
  }
  .fade-in-box.on{
      -webkit-animation:fade 1.2s ease-in-out forwards;
      -moz-animation:fade 1.2s ease-in-out forwards;
      -o-animation:fade 1.2s ease-in-out forwards;
      animation:fade 1.2s ease-in-out forwards;
  }
  @-webkit-keyframes fade{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(25,25,25);
      transform: scale3d(25,25,25);
      }
      100%{
          -webkit-transform: scale3d(25,25,25);
          transform: scale3d(25,25,25);
          display: none;
      }
  }
  @-moz-keyframes fade{
     0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(25,25,25);
      transform: scale3d(25,25,25);
      }
      100%{
          -webkit-transform: scale3d(25,25,25);
          transform: scale3d(25,25,25);
          display: none;
      }
  }
  @-ms-keyframes fade{
     0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(25,25,25);
      transform: scale3d(25,25,25);
      }
      100%{
          -webkit-transform: scale3d(25,25,25);
          transform: scale3d(25,25,25);
          display: none;
      }
  }
  @-o-keyframes fade{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(25,25,25);
      transform: scale3d(25,25,25);
      }
      100%{
          -webkit-transform: scale3d(25,25,25);
          transform: scale3d(25,25,25);
          display: none;
      }
  }
  @keyframes fade{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(25,25,25);
      transform: scale3d(25,25,25);
      }
      100%{
          -webkit-transform: scale3d(25,25,25);
          transform: scale3d(25,25,25);
          display: none;
      }
  }

  .Fade-Inbox{
      width: 100%; 
      height:100%;
      position: absolute;
      top:0%;
      left: 0%;
      background: url(../img/100.png) center/cover no-repeat;
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      -webkit-animation:Fabox 0.9s 0.2s ease-in-out forwards;
      -moz-animation:Fabox 0.9s 0.2s ease-in-out forwards;
      -o-animation:Fabox 0.9s 0.2s ease-in-out forwards;
      animation:Fabox 0.9s 0.2s ease-in-out forwards;
  }

  @-webkit-keyframes Fabox{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(18,18,1);
      transform: scale3d(18,18,1);
      }
      100%{
          -webkit-transform: scale3d(18,18,1);
          transform: scale3d(18,18,1);
          display: none;
      }
  }
  @-moz-keyframes Fabox{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(30,30,1);
      transform: scale3d(30,30,1);
      }
      100%{
          -webkit-transform: scale3d(30,30,1);
          transform: scale3d(30,30,1);
          display: none;
      }
  }
  @-ms-keyframes Fabox{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(30,30,1);
      transform: scale3d(30,30,1);
      }
      100%{
          -webkit-transform: scale3d(30,30,1);
          transform: scale3d(30,30,1);
          display: none;
      }
  }
  @-o-keyframes Fabox{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(30,30,1);
      transform: scale3d(30,30,1);
      }
      100%{
          -webkit-transform: scale3d(30,30,1);
          transform: scale3d(30,30,1);
          display: none;
      }
  }
  @keyframes Fabox{
      0% {
      -webkit-transform: scale3d(1,1,1);
      transform: scale3d(1,1,1);
      }
      99% {
      -webkit-transform: scale3d(30,30,1);
      transform: scale3d(30,30,1);
      }
      100%{
          -webkit-transform: scale3d(30,30,1);
          transform: scale3d(30,30,1);
          display: none;
      }
  }
}