<script setup lang="ts">

</script>

<template>
  <div class="columns is-multiline">
    <div class="column is-12 privacy-wrapper has-slimscroll">
      <ul>
        <li class="titleB">개인정보 활용 동의</li>
        <li class="txt">소액계약관리플랫폼 이용을 위한 개인정보 이용에 대한 안내</li>
        <li class="txt">정보주체가 되는 이용자께서는 아래 내용을 자세히 읽어보신후 동의여부를 결정하여 주시기 바랍니다.</li>
      </ul>
      <div class="borderRound">
        <ul>
          <li class="titleB">개인정보 수집 및 이용에 대한 안내</li>
          <li class="txt">당사는 개인정보보호법(법률 제 10465호) 등 관련법령에 의거하여,</li>
          <li class="txt">정보주체로부터 개인정보를 수집함에 있어, 아래 내용을 안내하고 있습니다.</li>
          <li class="txt">정보주체가 되는 이용자께서는 아래 내용을 자세히 읽어보신후 동의여부를 결정하여 주시기 바랍니다.</li>
        </ul>
        <ul>
          <li class="titleB">1. 수집하는 개인정보의 항목</li>
          <li class="txt">우리회사는 시험성적서 검증시스템과 관련하여‘공공기관의 정보공개에 관한 법률’ 제10조에 의거하여 아래와 같은 개인정보를 수집하고 있습니다.</li>
          <li class="txt dot orange">필수 수집항목 : 회사정보(회사명, 사업자등록번호, 대표자명, 담당자명, 이메일)</li>
          <li class="txt dot orange">수집방법 : 홈페이지 (회원 가입)</li>
        </ul>
        <ul>
          <li class="titleB">2. 개인정보의 수집 및 이용목적</li>
          <li class="txt">우리 회사는 수집한 개인정보를 다음의 목적을 위해 활용합니다.</li>
          <li class="txt dot orange">소액계약관리 견적조사를 위한 이용자 관리</li>
        </ul>
        <ul>
          <li class="titleB">3. 개인정보 보유 및 이용기간</li>
          <li class="txt">개인정보의 수집 및 이용목적이 달성되면 지체 없이 파기합니다. 단, 다음의 정보에 대해서는 아래의 이유로 명시한 기간 동안 보존합니다.</li>
          <li class="txt dot orange">보존 이유 : 서비스 제공 위한 사용자 관리</li>
          <li class="txt dot orange">보존 기간 : 1년</li>
        </ul>
        <ul>
          <li class="titleB">4. 동의를 거부할 권리 및 동의 거부에 따른 안내</li>
          <li class="txt">고객께서는 본 안내에 따라 개인정보 수집에 대하여 거부를 하실 수 있는 권리가 있습니다.</li>
          <li class="txt">본 개인정보 수집에 대하여 거부하시는 경우, 이용자 확인이 이루어지지 않음에 따라 당사의 안전품질협업 시스템 관련 서비스를 이용하실 수 없습니다.</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.privacy-wrapper {
  height: 600px;
  overflow: auto;

  .borderRound {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
  }

  .titleB {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 21px;
    letter-spacing: -.45px;
    padding: 15px 0;
  }

  .orange {
    color: var(--orange);
  }

  .orange.dot {
    &:before {
      background-color: var(--orange) !important;
    }
  }
  .dot {
    position: relative;
    padding-left: 7px;
    &:before {
      content: '';
      position: absolute;
      left: 0;
      width: 3px;
      height: 3px;
      background-color: black;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 3px;
      font-size:14px;
      letter-spacing: -.35px;
    }
  }
  .txt {
    font-size: 0.9em;
    line-height: 20px;
  }

  ul {
    li {
      padding: 4px 0;
    }
  }
}

</style>