<template>
  <div style="position: relative" class="bg-green-full text-normal py-2">
    <div id="scroll-container">
      <div id="scroll-text" class="text-sub d-none">
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มบริหารราชการแผ่นดินและความมั่นคง
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มกฎหมายกระบวนการยุติธรรม
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มการศึกษา
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มการสาธารณสุข
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มอาชีพทำนา ปลูกพืชล้มลุก
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มอาชีพทำสวน ป่าไม้ ปศุสัตว์ ประมง
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มพนักงานหรือลูกจ้างของบุคคล(ไม่ใช่หน่วยงานรัฐ)
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มผู้ประกอบอาชีพด้านสิ่งแวดล้อม ผังเมือง อสังหาริมทรัพย์และสาธารณูปโภค ทรัพยากรธรรมชาติ พลังงาน 
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มผู้ประกอบกิจการ หรือ SME
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มผู้ประกอบธุรกิจหรืออาชีพด้านการท่องเที่ยว
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มผู้ประกอบอุตสาหกรรม 
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มสตรี
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มผู้สูงอายุ คนพิการหรือทุพพลภาพ กลุ่มชาติพันธุ์ กลุ่มอัตลักษณ์อื่น
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มศิลปะ วัฒนธรรม ดนตรี การแสดงและบันเทิง
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มประชาสังคม องค์กรสาธารณประโยชน์
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มนักกีฬา สื่อสารมวลชน ผู้สร้างสรรค์วรรณกรรม
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มผู้ประกอบวิชาชีพ ผู้ประกอบอาชีพอิสระ 
        <v-icon icon="mdi-circle" size="20"></v-icon>
        กลุ่มอื่นๆ 
        <v-icon icon="mdi-circle" size="20"></v-icon>

      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss">
#scroll-container {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}

#scroll-text {
  /* animation properties */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);

  -moz-animation: my-animation 50s linear infinite;
  -webkit-animation: my-animation 60s linear infinite;
  animation: my-animation 60s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
  }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from {
    -webkit-transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
  }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
</style>
