/***********/
  /*PRELOADER*/
  /***********/
  #preloader {
      position: fixed;
      width: 100%;
      height: 100%;
      background: #000;
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
  }

  /* split panels */
  .panel {
      position: absolute;
      width: 50%;
      height: 100%;
      background: #000;
      top: 0;
      z-index: 2;
      transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  }

  .panel.left {
      left: 0;
  }

  .panel.right {
      right: 0;
  }

  /* logo */
  .logo {
      width: 200px;
      z-index: 3;
      animation: zoom 1.5s ease-in-out infinite;
  }

  /****************/
  /*LOGO ANIMATION*/
  /****************/
  @keyframes bounceIn {
      0% {
          transform: scale(0);
      }

      60% {
          transform: scale(1.2);
      }

      80% {
          transform: scale(0.95);
      }

      100% {
          transform: scale(1);
      }
  }

  /****************/
  /*ANIMATION LOGO*/
  /****************/
  @keyframes zoom {
      0% {
          transform: scale(1);
          opacity: 0.6;
      }

      50% {
          transform: scale(1.1);
          opacity: 1;
      }

      100% {
          transform: scale(1);
          opacity: 0.6;
      }
  }

  /* ซูมเข้า */
  .zoomIn {
      animation: zoomIn 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  }

  @keyframes zoomIn {
      0% {
          transform: scale(1);
          opacity: 1;
      }

      100% {
          transform: scale(3);
          opacity: 0;
      }
  }

  /* split effect */
  .split .left {
      transform: translateX(-50%);
  }

  .split .right {
      transform: translateX(50%);
  }

  #content {
      opacity: 0;
      transition: opacity 1s ease;
  }

  #content.show {
      opacity: 1;
  }