<template>
  <div
    class="content flex-column justify-center align-center"
    style="height: 100vh"
  >
    <div class="img-zone mb40">
      <img src="/client/resources/img/notfound.png" alt="404" />
    </div>
    <div class="text-zone mb40">
      <p class="large-text mb40">
        죄송합니다. <span>현재 찾을 수 없는 페이지</span> 입니다.
      </p>
      <p class="text-ct detail-text">
        페이지의 주소가 잘못 입력되었거나, <br />주소가 변경 혹은 삭제되어
        요청하신 페이지를 찾을 수 없습니다.
      </p>
    </div>
    <div class="flex justify-center align-center" style="width: 100%">
      <div class="gd-1">
        <button class="large-btn darkg-border-btn" @click="fnGoBack">
          이전 페이지로
        </button>
      </div>
      <div class="gd-1">
        <button class="large-btn blue-btn" @click="fnMainMove">
          메인 페이지로
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    fnMainMove() {
      this.$router.push({
        path: this.$filters.ctxPath("/"),
      });
    },
    fnGoBack() {
      this.$router.go(-1);
    },
  },
  watch: {},
  computed: {},
  components: {},
  mounted() {},
};
</script>

<style scoped>
.large-text {
  font-size: 4rem;
  font-weight: bold;
}

.large-text span {
  color: var(--blue);
}
</style>