<style scoped>
.sitemap {
  z-index: 1000;
  background-color: #000;
  color: #fff;
  font-size: 0.9rem;
  font-family: Roboto;
}
.sitemap .block {
  text-align: center;
}
.sitemap .block .item {
  display: inline-block;
  text-align: left;
}
.sitemap .title {
  font-size: 1rem;
  font-weight: bold;
}
.sitemap .text {
  position: relative;
}
.benefits-divider {
  border-bottom: 1px solid #212121;
}
.gutter-6 {
  --bs-gutter-x: 6rem;
  --bs-gutter-y: 3rem;
}
.gutter-6 > div+div {
  border-left: 1px solid #212121;
}
.logo-img {
  width: 14rem;
}
.icon {
  width: 1.3rem;
}
.icon.line {
  position: relative;
  top: 0.2rem;
}
@media screen and (max-width: 450px) {
  .gutter-6 > div+div {
    border-left: 0;
  }
  .gutter-6 > .col-6+.col-6 {
    border-left: 1px solid #212121;
  }
}
</style>
<template>
  <div class="sitemap">
    <div class="benefits-divider" />
    <div class="px-5">
      <div class="container">
        <div class="row gutter-6 my-5">
          <div class="m-0 py-5 col-sm-12 col-lg-4">
            <img class="logo-img" src="@images/woobobee_logo_long3.png" title="回首頁" alt="回首頁" />
            <p class="mt-4">
              歡迎聯絡我們了解工安智慧化解決方案，讓企業可以實現更高效的運作，提升生產力和效率，降低成本並增加收益。WooBoBee致力於提供最完善的工安智慧化服務，幫助企業提高業務效率，讓企業與勞工都安全有保庇！
            </p>
          </div>
          <div class="block py-5 m-0 col-6 col-lg-2">
            <div class="mb-2 item">
              <p class="title py-1">快速鏈接</p>
              <router-link to="/news/list">
                <p class="text py-2">最新消息</p>
              </router-link>
              <p class="title py-2">方案定價</p>
              <router-link to="/planPrice/planList">
                <p class="text py-1">方案清單</p>
              </router-link>
              <router-link to="/planPrice/planBuy">
                <p class="text py-1">購買程序</p>
              </router-link>
            </div>
          </div>
          <div class="block py-5 m-0 col-6 col-lg-2">
            <div class="mb-2 item">
              <p class="title py-1">產品及服務</p>
              <router-link to="/product/HotBee">
                <p class="text py-1">電氣火災預警功能</p>
              </router-link>
              <router-link to="/product/PoliBee">
                <p class="text py-1">安全智慧巡檢功能</p>
              </router-link>
            </div>
          </div>
          <div class="py-5 m-0 col-sm-12 col-lg-4">
            <div class="mb-2 item">
              <p class="title py-1">聯絡資訊</p>
              <div class="d-flex align-items-center">
                <img class="icon" src="@images/icon/phone_icon.png" title="聯絡資訊-電話" alt="聯絡資訊-電話" />
                <p class="text ps-3 py-1">02-27069896 #25</p>
              </div>
              <div class="d-flex align-items-center">
                <img class="icon" src="@images/icon/mail_icon.png" title="聯絡資訊-信箱" alt="聯絡資訊-信箱" />
                <p class="text ps-3 py-1">woobobee@mail.isha.org.tw</p>
              </div>
              <div class="d-flex align-items-end mt-2">
                <a target="_blank" title="facebook" href="https://www.facebook.com/profile.php?id=61557317082383">
                  <img class="icon" src="@images/icon/facebook_icon.png" title="facebook" alt="facebook" />
                </a>
                <a target="_blank" title="linkedin" href="https://www.linkedin.com/company/103085195/admin/dashboard/" class="ps-4">
                  <img class="icon" src="@images/icon/linkedin_icon.png" title="linkedin" alt="linkedin" />
                </a>
                <a target="_blank" title="youtube" href="https://www.youtube.com/channel/UCXzhfI3PUEb-kyjQ-y-vm6g" class="ps-4">
                  <img class="icon" src="@images/icon/youtube_icon.png" title="youtube" alt="youtube" />
                </a>
                <a target="_blank" title="line" href="https://lin.ee/VaJilgI" class="ps-4">
                  <img class="icon line" src="@images/icon/line_icon.png" title="line" alt="line" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="benefits-divider" />
    <div class="px-5 py-3 text-end">
      <div class="container">
        <p>
          © Copyright 2024 INDUSTRIAL SAFETY AND HEALTH ASSOCIATION － developed by Kinghan Technology Co.,LTD.
        </p>
      </div>
    </div>
  </div>
</template>
<script></script>
