<template>
    <div class="main-page">
        <section class="main-sec sec1">
            <!-- <div class="main-content"> -->
            <div class="flex">
                <!-- 메인비주얼 -->
                <div class="main-box">
                    <div class="w1400">
                        <div class="main-box-wrap">
                            <!-- 공지사항 배너 -->
                            <div class="main-notice">
                                <h2> <i class="fa-solid fa-volume-high" style="color: #ffffff;"></i>공지사항</h2>
                                <ul>
                                    <li>[공유]AI디지털교과서 개발 가이드라인 설명회 발표자료</li>
                                    <li>[공유]AI디지털교과서 개발 가이드라인 설명회 발표자료</li>
                                </ul>
                            </div>
                            <!-- 메인 텍스트 -->
                            <div class="main-text">
                                <p>신나고 재미있는 수업의 시작<br><span>디지털 교과서와 함께합니다.</span></p>
                            </div>
                            <!-- 메인 배너 -->
                            <div class="main-benner">

                            </div>
                        </div>

                    </div>
                </div>

                <!-- </div> -->
            </div>
        </section>
        <section class="main-sec sec1">
            <div class="main-content">
                <div class="flex">
                    <!-- 메인 퍼즐 -->
                    <div class="main-content-wrap">
                        <div class="w1400">
                            <div class="main-puzzle-container">
                                <div class="main-wrap-grid">
                                    <div class="main-grid-name">
                                        <h3>공지사항</h3>
                                        <button>+ 더보기</button>
                                        <!-- <input type="button" value="+ 더보기"> -->
                                    </div>
                                    <div class="m-p-table">
                                        <table>
                                            <tr>
                                                <td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
                                                    <p>공지사항 l 2023.10.17 </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
                                                    <p>공지사항 l 2023.10.17 </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
                                                    <p>공지사항 l 2023.10.17 </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
                                                    <p>공지사항 l 2023.10.17 </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>[공유] AI디지털교과서 개발 가이드 라인 설명회 발표자료
                                                    <p>공지사항 l 2023.10.17 </p>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>

                                <div class="main-wrap-grid-2">
                                    <div>
                                        <a href="">
                                            <img src="../../../../resources/jpg/fille.png" alt="">
                                            <!-- <input type="button" value="네트워킹" class="m-p-ai"> -->
                                            <button class="main-grid-box">네트워킹</button>
                                        </a>
                                    </div>
                                </div>
                                <div class="main-wrap-grid-3">
                                    <div>
                                        <a href="">
                                            <img src="../../../../resources/jpg/main-box.png" alt="">
                                            <button class="main-grid-box">가이드라인</button>
                                        </a>
                                    </div>
                                </div>
                                <div class="main-wrap-grid-4">
                                    <div>
                                        <a href="">
                                            <img src="../../../../resources/jpg/main-pu4.png" alt="">
                                            <button class="main-grid-box">자료집</button>
                                        </a>
                                    </div>
                                </div>
                                <div class="main-wrap-grid-5">
                                    <div>
                                        <a href="">
                                            <img src="../../../../resources/jpg/main-pu3.png" alt="">
                                            <button class="main-grid-box">기술문서</button>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
        <section class="main-sec sec1">

            <div class=" flex">
                <!-- 메인 홍보/뉴스 -->

                <div class="main-content-news">
                    <div class="w1400">
                        <div class="main-wrap-news">

                            <h3>홍보/뉴스</h3>
                            <div class="main-wrap-news-hidden">

                                <swiper :navigation="true" :pagination="false" :slidesPerView="3" :mousewheel="true"
                                    :initialSlide="2" :centeredSlides="false" :spaceBetween="55" :loop="true" :breakpoints="{
                                        300: { slidesPerView: 1 },
                                        479: { slidesPerView: 1 },
                                        768: { slidesPerView: 2 },
                                        1023: { slidesPerView: 3 }
                                    }" :modules="modules" class="mySwiper">
                                    <swiper-slide>
                                        <div class="swiper-div">
                                            <embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
                                            <p>홍보영상</p>
                                        </div>
                                    </swiper-slide>
                                    <swiper-slide>
                                        <div class="swiper-div">
                                            <embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
                                            <p>홍보영상</p>
                                        </div>
                                    </swiper-slide>
                                    <swiper-slide>
                                        <div class="swiper-div">
                                            <embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
                                            <p>홍보영상</p>
                                        </div>
                                    </swiper-slide>
                                    <swiper-slide>
                                        <div class="swiper-div">
                                            <embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
                                            <p>홍보영상</p>
                                        </div>
                                    </swiper-slide>
                                    <swiper-slide>
                                        <div class="swiper-div">
                                            <embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
                                            <p>홍보영상</p>
                                        </div>
                                    </swiper-slide>
                                    <swiper-slide>
                                        <div class="swiper-div">
                                            <embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
                                            <p>홍보영상</p>
                                        </div>
                                    </swiper-slide>
                                    <swiper-slide>
                                        <div class="swiper-div">
                                            <embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
                                            <p>홍보영상</p>
                                        </div>
                                    </swiper-slide>
                                    <swiper-slide>
                                        <div class="swiper-div">
                                            <embed src="https://webst.edunet.net/AIDT/playertest.mp4" type="">
                                            <p>홍보영상</p>
                                        </div>
                                    </swiper-slide>

                                </swiper>


                            </div>
                        </div>


                    </div>
                </div>

            </div>

        </section>
        <section class="main-sec sec1">

            <div class=" flex">
                <!-- 히스토리 -->

                <div class="main-history">
                    <div class="w1400">
                        <div class="main-history-wrap">
                            <h1>History</h1>
                            <div class="main-history-box">
                                <div class="main-history-box-1">
                                    <div>
                                        <h3>방문자수</h3>
                                        <p></p>
                                        <p>367,700 </p>
                                        <span>명</span>

                                    </div>
                                </div>
                                <div class="main-history-box-2">
                                    <div>
                                        <h3>참가업체</h3>
                                        <p></p>
                                        <p>52,500 </p>
                                        <span>업체</span>

                                    </div>
                                </div>
                                <div class="main-history-box-3">
                                    <div>
                                        <h3>참가인원</h3>
                                        <p></p>
                                        <p>360,000</p>
                                        <span>명</span>

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


                        </div>

                    </div>
                </div>

            </div>

        </section>


        <section class="main-sec sec1">
            <div class=" flex">
                <!-- 파트너사 -->

                <div class="main-partner">
                    <div class="w1400">
                        <div class="main-partner-wrap">
                            <h1>파트너사</h1>
                            <div class="m-p-sw">
                                <div class="w1400">
                                    <div class="m-p-sw-1">

                                        <swiper :slides-per-view="7" :space-between="30" :loop="true" :speed="1000"
                                            :centered-slides="true" :autoplay="{ delay: 0, disableOnInteraction: false }"
                                            :breakpoints="{
                                                300: { slidesPerView: 1 },
                                                479: { slidesPerView: 2 },
                                                768: { slidesPerView: 3 },
                                                1023: { slidesPerView: 5 }
                                            }" :navigation="false" :modules="modules" class="mySwiper swiper-2">

                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/kefa.png" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/keris.gif" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko-go.jpg" alt="">
                                            </swiper-slide>
                                            <swiper-slide>
                                                <img src="../../../../resources/jpg/logo/ko.png" alt="">
                                            </swiper-slide>

                                        </swiper>
                                    </div>
                                </div>
                            </div>
                            <div class="main-partner-logo">
                                <div class="main-partner-img lo1"></div>
                                <div class="main-partner-img lo2"></div>
                                <div class="main-partner-img lo3"></div>
                                <div class="main-partner-img lo4"></div>
                                <div class="main-partner-img lo5"></div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>



        </section>





    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

import { Autoplay, Pagination } from 'swiper/modules';

export default {
    data() {
        return {
            module: [Pagination],
        }
    },
    methods: {
    },
    watch: {

    },
    computed: {

    },
    components: {
        Swiper,
        SwiperSlide,


    },
    setup() {
        return {
            modules: [Autoplay, Pagination, Navigation],
        };
    },
    mounted() {
        console.log('Main mounted');
    }
}
</script>

<style scoped>
.swiper-button-prev:after,
.swiper-button-next:after {
    color: aliceblue;
}

.swiper-button-next,
.swiper-button-prev {
    margin-top: -50px !important;
    color: aliceblue;
}

.swiper {
    height: 260px;
    padding: 0px 50px 50px 50px;
}

.swiper-2 {
    padding: 50px;
}


.swiper-div {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.swiper-div embed {
    height: 230px;
    width: 350px;
}

.swiper-div p {
    padding: 1rem;
    font-size: 1.7rem;
    color: white;
}



.swiper-slide img {
    width: 40%;
}

.swiper-2 {
    height: 100px;
    transition-timing-function: linear;
}
</style>
