<template>
	<div class="integral flex flex-col items-center">
		<div class="md:w-bodySet">
			<h4 class=" mt-16 mb-4 text-3xl text-center text-title-color">{{ $t('lang.point') }}</h4>
			<p class="text-lg text-text-color text-center">{{ $t('lang.QAS') }}</p>
			<div class="flex justify-center mt-44 relative">
				<img src="@/assets/images/home/integral.png" class="flex-grow-0" width="960" height="170" alt="">
				<div class="absolute flex flex-col justify-center items-center tag_1">
					<img src="@/assets/images/home/i1.png" width="30" alt="">
					<p class="text-14px text-article-color mt-1">{{ $t('lang.QAS1') }}</p>
				</div>
				<div class="absolute flex flex-col justify-center items-center tag_2">
					<p class="text-14px text-article-color mb-1">{{ $t('lang.QAS2') }}</p>
					<img src="@/assets/images/home/i2.png" width="30" alt="">
				</div>
				<div class="absolute flex flex-col justify-center items-center tag_3">
					<img src="@/assets/images/home/i3.png" width="30" alt="">
					<p class="text-14px text-article-color mt-1">{{ $t('lang.QAS3') }}</p>
				</div>
				<div class="absolute flex flex-col justify-center items-center tag_4">
					<img src="@/assets/images/home/i4.png" width="30" alt="">
					<p class="text-14px text-article-color mt-1">{{ $t('lang.QAS4') }}</p>
				</div>
				<div class="absolute flex flex-col justify-center items-center tag_5">
					<img src="@/assets/images/home/i5.png" width="30" alt="">
					<p class="text-14px text-article-color mt-1">{{ $t('lang.QAS5') }}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import Vue from 'vue'
import lang from '@/mixin/lang'
export default Vue.extend({
	mixins: [lang]
})
</script>

<style scoped>
	.integral {
		height: 730px;
		background-image: url('../../assets/images/home/bg_int.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position-x: 50%;
	}
	.tag_1 {
		top: 35px;
		left: 322px;
		transform: translateX(-50%);
	}
	.tag_1::after {
		content: '';
		display: block;
		width: 1px;
		height: 26px;
		background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
		background-size: 1px 7px;
		background-repeat: repeat-y;
		position: absolute;
		top: -23px;
		left: 50%;
		transform: translateX(-50%);
	}
	.tag_2 {
		top: -85px;
		left: 605px;
		transform: translateX(-50%);
	}
	.tag_2::after {
		content: '';
		display: block;
		width: 1px;
		height: 32px;
		background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
		background-size: 1px 7px;
		background-repeat: repeat-y;
		position: absolute;
		bottom: -28px;
		left: 50%;
		transform: translateX(-50%);
	}
	.tag_3 {
		top: 35px;
		left: 885px;
		transform: translateX(-50%);
	}
	.tag_3::after {
		content: '';
		display: block;
		width: 1px;
		height: 26px;
		background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
		background-size: 1px 7px;
		background-repeat: repeat-y;
		position: absolute;
		top: -23px;
		left: 50%;
		transform: translateX(-50%);
	}
	.tag_4 {
		top: 194px;
		left: 747px;
		transform: translateX(-50%);
	}
	.tag_4::after {
		content: '';
		display: block;
		width: 1px;
		height: 26px;
		background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
		background-size: 1px 7px;
		background-repeat: repeat-y;
		position: absolute;
		top: -23px;
		left: 50%;
		transform: translateX(-50%);
	}
	.tag_5 {
		top: 194px;
		left: 465px;
		transform: translateX(-50%);
	}
	.tag_5::after {
		content: '';
		display: block;
		width: 1px;
		height: 26px;
		background-image: linear-gradient(to bottom, #9BACD5 50%, transparent 50%);
		background-size: 1px 7px;
		background-repeat: repeat-y;
		position: absolute;
		top: -23px;
		left: 50%;
		transform: translateX(-50%);
	}
</style>