<template>
  <div class="explain_text relative">
		<div class="absolute duration-500 ease-in-out" :class="{'opacity-0': index !== 1}">
			<h3 class="ex_b_title text-18px text-left text-title-color">{{ $t('lang.mission') }}</h3>
			<p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !enStyle, 'leading-normal': enStyle}">
				{{ $t('lang.missionText') }}
			</p>
		</div>
		<div class="absolute duration-500 ease-in-out" :class="{'opacity-0': index !== 2}">
			<h3 class="ex_b_title text-18px text-left text-title-color">{{ $t('lang.feature') }}</h3>
			<p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !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-500 ease-in-out" :class="{'opacity-0': index !== 3}">
			<h3 class="ex_b_title ex_b_title text-18px text-left text-title-color">{{ $t('lang.application') }}</h3>
			<p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !enStyle, 'leading-normal': enStyle}">
				{{ $t('lang.APPT') }}<br/>
				{{ $t('lang.APPO') }}
			</p>
		</div>
		<div class="absolute duration-500 ease-in-out" :class="{'opacity-0': index !== 4}">
			<h3 class="ex_b_title text-18px text-left text-title-color">{{ $t('lang.reason') }}</h3>
			<p class="text-14px text-left text-article-color" :class="{'mt-8': !enStyle, 'mt-3': enStyle, 'leading-7': !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>
	.explain_text div {
		/* transition: 0.25s ease-in; */
	}
	.ex_b_title {
		position: relative;
		padding-left: 15px;
	}
	.ex_b_title::after {
		content: '';
		display: block;
		width: 8px;
		height: 8px;
		background: #22356C;
		border-radius: 50%;
		position: absolute;
		left: 1px;
		top: 50%;
		transform: translate3d(0, -50%, 0);
	}
</style>