@extends('ielts.layout')

@section('gnb', view('gnb', ['service'=>'ielts']))

@section('subgnb', view('ielts.gnb'))

@section('ielts-css')
    <!-- promotion -->
    {!! resource('css/common/board.css') !!}
@endsection

@section("progress")
    @include('progress')
@endsection

@section("ielts-content")
    <div id="wrap" class="boardPage notice">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1>공지사항</h1>
            </div>

            <!-- 게시판 리스트 -->
            <div class="board-list default">
                <div class="headWrap pc-headWrap">
                    <div class="flex">
                        <div class="number">No</div>
                        <div class="subject">제목</div>
                        <div class="count">조회수</div>
                        <div class="date">작성일</div>
                    </div>
                </div>
                <!-- 게시글 / 공지사항 등록 영역 -->
                <ul class="notice flex">
                    <li>
                        <a href="view" class="subject">
                            <figure class="icon"></figure>
                            <p class="ellipsis_2">2024 교육브랜드 대상 아이엘츠 부문 1위, edm 아이엘츠 10년 연속 브랜드대상 수상 2024 교육브랜드 대상 아이엘츠 부문 1위, edm 아이엘츠 10년 연속 브랜드대상 수상</p>
                        </a>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <figure class="icon"></figure>
                            <p class="ellipsis_2">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                </ul>
                <!-- 게시글 영역 -->
                <ul class="list flex">
                    <li class="new"> <!-- 최근 등록 글에는 new class가 추가됩니다. -->
                        <a href="view" class="subject">
                            <figure class="icon"></figure>
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li class="new">
                        <a href="view" class="subject">
                            <figure class="icon"></figure>
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                    <li>
                        <a href="view" class="subject">
                            <p class="ellipsis_1">게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다 게시글 제목입니다</p>
                        </a>
                        <div class="number option">8</div>
                        <div class="count option">12,345</div>
                        <div class="date option">24.10.23</div>
                    </li>
                </ul>
            </div>

            <!-- pagination -->
            <div id="paginationWrap">
                <div class="pagination">
                    <a href="" class="arrow page-first disabled"></a>
                    <a href="" class="arrow page-prev disabled"></a>
                    <div class="number">
                        <a href="" class="current">1</a> <!-- 현재 활성화된 페이지 -->
                        <a href="" class="">2</a>
                        <a href="" class="">3</a>
                        <a href="" class="">4</a>
                        <a href="" class="">5</a>
                    </div>
                    <a href="" class="arrow page-next"></a>
                    <a href="" class="arrow page-last"></a>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('ielts-script')
    <script>

    </script>
@endsection