<template>
    <div>
        <div class="w1400">


            <div class="intro">
                <section class="intro-logo">
                    <h1>통합지원센터란?</h1>
                    <hr>
                </section>

                <section class="intro-text">
                    <h3>AI 디지털교과서 통합지원센터 소개</h3>
                    <p><i class="fa-solid fa-circle fa-2xs"></i>양질의 AI 디지털교과서 개발을 위한 기술 표준과 정책을 연구합니다.</p>
                    <p><i class="fa-solid fa-circle fa-2xs"></i>개발사 간의 소통하고 협력적인 동반관계를 형성할 수 있도록 네트워킹을 지원합니다.</p>
                    <p><i class="fa-solid fa-circle fa-2xs"></i>민간 개발사가 개발하는 AI 디지털교과서와 공공에서 제공하는 서비스 간의 원활한 연계 체계를 지원합니다.
                    </p>
                    <p><i class="fa-solid fa-circle fa-2xs"></i>AI 디지털교과서 모델과 적용 가능한 최신 기술 동향 정보를 제공합니다. </p>
                    <p><i class="fa-solid fa-circle fa-2xs"></i>지속적인 AI 디지털교과서 운영 현황 분석 및 개선 방안 도출을 통해 AI 디지털교과서 활용·활성화를
                        촉진합니다. </p>
                </section>

                <section class="intro-img">
                    <img src="../../../../resources/jpg/intro-blue.png" alt="">
                    <img src="../../../../resources/jpg/intro-green.png" alt="">
                    <img src="../../../../resources/jpg/intro-skyblue.png" alt="">
                </section>


            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods: {

    },
    watch: {

    },
    computed: {

    },
    mounted() {
        console.log('Introduction mounted');
    }
}
</script>

<style scoped>
.intro {
    width: 100%;
    padding: 6rem;
}

.intro-logo {
    width: 100%;
    padding: 6rem 2rem;

}

.intro-logo h1 {
    font-size: 3rem;
    font-family: SBaggroM;
    font-weight: 500;
    color: #2c407f;
}

.intro-text {
    padding: 3rem;
}

.intro-text h3 {
    padding: 1rem 1rem 3rem;
    font-size: 2rem;
    color: #00335a;
    font-family: "Pretendard-Regular";

}

.intro-text i {
    padding: 1rem;
    color: #00335a;
    font-family: "Pretendard-Regular";


}

.intro-text p {
    padding: 1rem;
    font-size: 1.5rem;
    color: #00335a;
    font-family: "Pretendard-Regular";


}

.intro-img {
    padding: 3rem;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr 1fr 1fr;
}

.intro-img img:nth-child(2) {
    transform: translateY(-4.8rem);
}

.intro-img img:nth-child(3) {
    transform: translateY(-9.7rem);
}

@media all and (max-width: 479px) {

    .intro {
        width: 100%;
        padding: 3rem;

    }

    .intro-logo {
        width: 100%;
    }

    .intro-text {
        width: 100%;
        padding: 2rem;
    }

    .intro-img {
        grid-template-columns: 1fr;
    }

}

@media all and (min-width: 480px) and (max-width: 767px) {
    .intro {
        width: 100%;
        padding: 3rem;

    }

    .intro-logo {
        width: 100%;
    }

    .intro-text {
        width: 100%;
        padding: 2rem;
    }

    .intro-img {
        grid-template-columns: 1fr;
    }
}

@media all and (min-width: 767px) and (max-width: 1023px) {

    .intro-img {
        grid-template-columns: 1fr;
    }
}
</style>


