<script setup>
import FooterContent from './Tools/FooterContent.vue'
</script>

<template>
  <div id="footerroot" class="container-fluid">
    <FooterContent></FooterContent>
  </div>
</template>

<script>
export default {
  name: "Footer"
}
</script>

<style scoped lang="scss">
@import "node_modules/bootstrap/scss/_functions.scss";
@import "node_modules/bootstrap/scss/_variables.scss";
@import "node_modules/bootstrap/scss/_mixins.scss";

#footerroot
{
  display: flex;
  background-color: black;
  width:100%;
  align-items: center;
  justify-content: left;

  @include media-breakpoint-between(xs, md) {
    min-height:806px;
    background-image: url('/bottom/bg_wep.png');
    padding-left: 32px;
  }

  @include media-breakpoint-between(md,xxl){
    min-height: 759px;
    margin-top: 0px;
    background-image: url('/bottom/bg_pc.png');
    padding-left: 100px;
  }

  @include media-breakpoint-up(xxl) {
    min-height: 759px;
    margin-top: 0px;
    background-image: url('/bottom/bg_pc.png');
    padding-left: 256px;
  }
}
</style>
