.error404 {
    position: relative;
    text-align: center;
    width: 100%;
    padding-top: 6vw;
    margin-top: 3vw;
    /* pointer-events: none; */
  }
  
  @media screen and (max-width: 768px) {
    .error404 {
      padding: 15vw 10vw 0;
        margin-top: 6vw;
    }
  }
  
  .error404BG {
    width: 50%;
    pointer-events: none;
  }
  
  @media screen and (max-width: 768px) {
    .error404BG {
      display: none;
    }
  }
  
  .error404MB {
    display: none;
    pointer-events: none;
  }
  
  @media screen and (max-width: 768px) {
    .error404MB {
      display: block;
      width: 100%;
    }
  }
  
  .error404Title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%);
    width: 17%;
    pointer-events: none;
  }
  
  @media screen and (max-width: 768px) {
    .error404Title {
      width: 57%;
      transform: translate(-50%, -50%);
    }
  }
  
  /* 鳥 */
  .error404Bird {
    position: absolute;
    right: 24%;
    bottom: -3%;
    z-index: 2;
    width: 13%;
    pointer-events: none;
  }
  
  @media screen and (max-width: 768px) {
    .error404Bird {
      right: 2%;
      bottom: 20%;
      width: 30%;
    }
  }
  
  /* 箭頭 */
  .error404Layer {
    position: absolute;
    right: 31%;
    bottom: 42%;
    width: 7.5%;
    pointer-events: none;
  }
  
  @media screen and (max-width: 768px) {
    .error404Layer {
      right: 17%;
      bottom: 64%;
      width: 17%;
    }
  }
  
  .error404Icon {
    position: absolute;
    pointer-events: none;
  }
  
  /* 上面 */
  .error404Icon1 {
    left: 34%;
    top: 28%;
    width: 5%;
    animation: iconRotate 10s linear infinite;
  }
  
  @media screen and (max-width: 768px) {
    .error404Icon1 {
      left: 22%;
      top: 24%;
      width: 13%;
    }
  }
  
  .error404Icon2 {
    left: 43%;
    top: 22%;
    width: 3%;
    animation: iconRotate2 9s linear infinite;
  }
  
  @media screen and (max-width: 768px) {
    .error404Icon2 {
      left: 33%;
      top: 19%;
      width: 8%;
    }
  }
  
  .error404Icon3 {
    left: 46%;
    top: 29%;
    width: 2%;
    animation: iconRotate 13s linear infinite;
  }
  
  @media screen and (max-width: 768px) {
    .error404Icon3 {
      left: 40%;
      top: 26%;
      width: 5%;
    }
  }
  
  /* 右邊 */
  .error404Icon4 {
    right: 33.8%;
    top: 40%;
    width: 1.5%;
    animation: iconRotate2 8s linear infinite;
  }
  
  @media screen and (max-width: 768px) {
    .error404Icon4 {
      top: unset;
      right: 15%;
      bottom: 66%;
      width: 3%;
    }
  }
  
  .error404Icon5 {
    right: 31%;
    bottom: 38%;
    width: 3%;
    animation: iconRotate 15s linear infinite;
  }
  
  @media screen and (max-width: 768px) {
    .error404Icon5 {
      right: 10%;
      bottom: 56%;
      width: 5%;
    }
  }
  
  .error404Icon6 {
    right: 32%;
    bottom: 23%;
    width: 5%;
    animation: iconRotate2 7s linear infinite;
  }
  
  @media screen and (max-width: 768px) {
    .error404Icon6 {
      right: 10%;
      bottom: 45%;
      width: 11%;
    }
  }
  
  /* 左邊 */
  .error404Icon7 {
    left: 29%;
    bottom: 28%;
    width: 3%;
    animation: iconRotate 12s linear infinite;
  }
  
  @media screen and (max-width: 768px) {
    .error404Icon7 {
      left: 8%;
      bottom: 37%;
      width: 6%;
    }
  }
  
  .error404Icon8 {
    left: 30%;
    bottom: 11%;
    width: 6%;
    animation: iconRotate2 6s linear infinite;
  }
  
  @media screen and (max-width: 768px) {
    .error404Icon8 {
      left: 8%;
      bottom: 25%;
      width: 12%;
    }
  }
  
  .errorDataH1 {
    font-weight: 900;
    color: #FFFFFF;
    position: absolute;
    bottom: 22%;
    width: 100%;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
  }
  
  @media screen and (max-width: 1800px) {
    .errorDataH1 {
      font-size: 1.2vw;
    }
  }
  
  @media screen and (max-width: 768px) {
    .errorDataH1 {
      width: 100%;
      font-size: 5vw;
      /* left: 10%; */
      /* bottom: 15%; */
      position: static;
      margin-top: 5vw;
    }
  }
  
  .errorData {
    position: absolute;
    bottom: 18%;
    width: 100%;
    text-align: center;
    font-weight: 500;
    color: #FF7173;
  }
  
  @media screen and (max-width: 768px) {
    .errorData {
      width: 100%;
      /* left: 10%; */
      /* bottom: 11%; */
      position: static;
    }
  }
  
  .errorData a {
    text-decoration: underline;
    cursor: pointer;
    color: #FF7173;
  }
  
  .errorData a,
  .errorData span {
    font-size: 20px;
  }
  
  @media screen and (max-width: 1800px) {
    .errorData a,
    .errorData span {
      font-size: 1.2vw;
    }
  }
  
  @media screen and (max-width: 768px) {
    .errorData a,
    .errorData span {
      font-size: 3vw;
    }
  }
  
  @keyframes iconRotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes iconRotate2 {
    0% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }