File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<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>