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

<template>
  <div id="contactRoot">
    <div id="upbar"></div>
    <div id="contactContent">
      <FooterContent></FooterContent>
    </div>
  </div>
</template>

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

<style  lang="scss">
@import "node_modules/bootstrap/scss/_functions.scss";
@import "node_modules/bootstrap/scss/_variables.scss";
@import "node_modules/bootstrap/scss/_mixins.scss";
#upbar{
  width: 100%;
  @include media-breakpoint-between(xs, md) {
    height: 70px;
  }

  @include media-breakpoint-up(md) {
    height: 95.17px;
  }
}

#contactContent
{
  width: 100%;
  height:100%;
  align-items: center;
  justify-content: left;
  display: flex;
  @include media-breakpoint-between(xs, md) {
    background-image: url('/bottom/bg_wep.png');
    padding-left: 32px;
    margin-top: 120px;
  }

  @include media-breakpoint-up(md) {
    background-image: url('/bottom/bg_pc.png');
    padding-left: 100px;
  }
}

#contactRoot{
  position: relative;
  flex:1;
  width: 100%;
  height: 100vh;
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}
</style>
