@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 faq">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1>자주 묻는 질문</h1>
            </div>

            <div class="board-top">
                <!-- 검색 -->
                <div class="searchWrap">
                    <form action="">
                        <div class="search">
                            <input type="text" placeholder="검색어를 입력하세요.">
                            <input type="submit" value="검색" class="search-submit">
                        </div>
                    </form>
                </div>

                <!-- 게시판 카테고리 -->
                <div class="categoryWrap">
                    <div class="flex">
                        <a href="" class="active">전체</a>
                        <a href="" class="">강좌/교재</a>
                        <a href="" class="">동영상</a>
                        <a href="" class="">결제/환불</a>
                        <a href="" class="">서비스 이용</a>
                    </div>
                </div>
            </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>
                        <!--
                            카테고리
                            : lecture, service, video, payment
                        -->
                        <div class="category lecture option"></div>
                        <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="category service option"></div>
                        <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="category video option"></div>
                        <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">2024년 아이엘츠 응시료 지원사업 안내 - 지자체별 청년복지혜택 총정리! (2024년 2월 기준)</p>
                        </a>
                        <div class="category payment option"></div>
                        <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">국가는 국민 모두의 생산 및 생활의 기반이 되는 국토의 효율적이고 균형있는 이용·개발과 보전을 위하여 법률이 정하는 바에 의하여 그에 관한 필요한 제한과 의무를 과할 수 있다. 감사원은 원장을 포함한 5인 이상 11인 이하의 감사위원으로 구성한다. 근로자는 근로조건의 향상을 위하여 자주적인 단결권·단체교섭권 및 단체행동권을 가진다.</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">모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다. 법률은 특별한 규정이 없는 한 공포한 날로부터 20일을 경과함으로써 효력을 발생한다. 국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 대통령은 필요하다고 인정할 때에는 외교·국방·통일 기타 국가안위에 관한 중요정책을 국민투표에 붙일 수 있다.</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