<template>
  <div class="m-explain-text relative">
    <div class="absolute duration-300" :class="{'opacity-0': index !== 1}">
			<h3 class="m-e-text-t text-14px text-left text-title-color">{{ $t('lang.mission') }}</h3>
			<p class="text-xs text-left mt-1 text-article-color" :class="{'leading-5': !enStyle, 'leading-normal': enStyle}">
				{{ $t('lang.missionText') }}
			</p>
		</div>
		<div class="absolute duration-300" :class="{'opacity-0': index !== 2}">
			<h3 class="m-e-text-t text-14px text-left text-title-color">{{ $t('lang.feature') }}</h3>
			<p class="text-xs text-left mt-1 text-article-color" :class="{'leading-5': !enStyle, 'leading-normal': enStyle}">
				{{ $t('lang.FT1') }}<br/>
				{{ $t('lang.FT2') }}<br/>
				{{ $t('lang.FT3') }}<br/>
				{{ $t('lang.FT4') }}<br/>
				{{ $t('lang.FT5') }}<br/>
				{{ $t('lang.FT6') }}
			</p>
		</div>
		<div class="absolute duration-300" :class="{'opacity-0': index !== 3}">
			<h3 class="m-e-text-t text-14px text-left text-title-color">{{ $t('lang.application') }}</h3>
			<p class="text-xs text-left mt-1 text-article-color" :class="{'leading-5': !enStyle, 'leading-normal': enStyle}">
				{{ $t('lang.APPT') }}<br/>
				{{ $t('lang.APPO') }}
			</p>
		</div>
		<div class="absolute duration-300" :class="{'opacity-0': index !== 4}">
			<h3 class="m-e-text-t text-14px text-left text-title-color">{{ $t('lang.reason') }}</h3>
			<p class="text-xs text-left mt-1 text-article-color" :class="{'leading-5': !enStyle, 'leading-normal': enStyle}">
				{{ $t('lang.R1') }}<br/>
				{{ $t('lang.R2') }}<br/>
				{{ $t('lang.R3') }}<br/>
				{{ $t('lang.R4') }}<br/>
				{{ $t('lang.R5') }}<br/>
				{{ $t('lang.R6') }}<br/>
				{{ $t('lang.R7') }}
			</p>
		</div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
	props: {
		index: Number,
		enStyle: Boolean
	}
})
</script>

<style scoped>
  /* .m-explain-text {
    height: 270px;
    background-image: url(../../assets/images/mobile/ex-bg.png);
    background-size: 100%;
    background-position: 0 bottom;
    background-repeat: no-repeat;
  } */
	.m-e-text-t {
		position: relative;
		padding-left: 11px;
	}
	.m-e-text-t::after {
		content: '';
		display: block;
		width: 5px;
		height: 5px;
		background: #22356C;
		border-radius: 50%;
		position: absolute;
		left: 1px;
		top: 50%;
		transform: translate3d(0, -50%, 0);
	}
</style>