<template>
  <div class="q-mt-lg">
    <section class="about9" v-if="plugData.ImageUrl1!=''">
      <div class="about-img">
        <div class="img" :style="{backgroundImage:`url('${plugData.ImageUrl1}')`}"></div>
      </div>
      <div class="about-main">
        <div class="about-inner">
          <!--段落標題 - 圖後-->
          <h2 class="about-title">{{plugData.Title}}</h2>
          <div class="about-sub-title">{{plugData.SubTitle1}}</div>
          <div class="about-content">{{plugData.Describe1}}
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
  export default {
    props: ["plugData"]
  };

</script>

<style>
  .about9 {
    padding: 20px 0;
    display: flex;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
  }

  .about9>* {
    flex: 1;
  }

  .about9 .about-img .img {
    width: 110%;
    background-size: cover;
    padding-bottom: 70%;
    background-position: center;
  }

  .about9 .about-inner {
    padding: 50px;
    background-color: #fff;
    transform: translate(-40px, 40px);
  }

  .about9 .about-inner .about-title {
    font-size: 25px;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    line-height: unset;
    font-weight: 600;
    border-bottom: 2px solid #eee;
  }

  .about9 .about-inner .about-sub-title {
    font-size: 19px;
    margin-bottom: 5px;
    margin: 0;
    padding: 0;
    line-height: unset;
    font-weight: 600;
  }

  body.large .about9 .about-inner .about-content {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
  }

  @media only screen and (max-width: 800px) {
    .about9 {
      padding: 20px !important;
    }
  }

  @media only screen and (max-width: 1200px) {
    .about9 {
      display: block !important;
      max-width: 768px !important;
    }

    .about9 .about-img .img {
      width: 100% !important;
    }

    .about9 .about-inner {
      transform: translate(0) !important;
    }
  }

</style>
