@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 special-lecture">
        <div class="max-width">
            <div class="pageTitle">
                <button type="button" onclick="history.back()" class="backBtn mo-backBtn"></button>
                <h1><p>시험대비 무료특강</p> <div class="subTitle pc-text"><span>수강생 전용</span></div></h1>
            </div>
            <div class="subTitle mo_tab-text"><span>수강생 전용</span></div>

            <!-- 게시판 리스트 -->
            <div class="lectureArea">
                <div class="lecturePlayerArea">
                    <div class="titleWrap">
                        <div class="title customLine">아이엘츠 학원 핫이슈</div>
                        <p class="sub ellipsis_2 mo_tab-text">3주 만에 IELTS 7.5 달성! 실제 합격생 후기로 초단기 달성 가보자고~ 최대 2줄, 초과시 말줄임 됩니다. 3주 만에 IELTS 7.5 달성! 실제 합격생 후기</p>
                    </div>
                    <div class="videoWrap">
                        <div class="playWrap">
                            <iframe src="" title="시험대비 무료특강 동영상" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        </div>
                        <div class="thumbnailWrap">
                            <p class="video-subject pc-text"></p>
                            <div class="scroll-x-active">
                                <!-- 활성화 버튼 active class 추가 -->
                                <button type="button" class="click thumb active" data-youtube="2b1-j1VMxZk" data-subject="[Cambridge IELTS 19] Academic Reading 해설 강의"><figure style="background-image:url('https://img.youtube.com/vi/2b1-j1VMxZk/maxresdefault.jpg')"></figure></button>
                                <button type="button" class="click thumb" data-youtube="vqNse1QMjBU" data-subject="[Cambridge IELTS 19] Academic/General Listening 해설 강의"><figure style="background-image:url('https://img.youtube.com/vi/vqNse1QMjBU/maxresdefault.jpg')"></button>
                                <button type="button" class="click thumb" data-youtube="uHQJIQ8DnCw" data-subject="30일 집중 스피킹&라이팅 마스터 샘플강의"><figure style="background-image:url('https://img.youtube.com/vi/uHQJIQ8DnCw/maxresdefault.jpg')"></button>
                            </div>
                            <a href="" class="moreBtn">초단기 고득점 달성! 학원상품 둘러보기 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12L10 8L6 4" stroke="var(--p-color2)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
                        </div>
                    </div>
                </div>

                <div class="lecture-list flex">
                    <!-- filter -->
                    <div class="list-filterWrap">
                        <div class="scroll-x-active">
                            <!-- 활성화 메뉴 active class 추가 -->
                            <a href="" class="click active">전체</a>
                            <a href="" class="click">Writing</a>
                            <a href="" class="click">Speaking</a>
                            <a href="" class="click">Listening</a>
                            <a href="" class="click">Reading</a>
                            <a href="" class="click">기타(자소서/문법/발음)</a>
                        </div>
                    </div>

                    <!-- 리스트 순서 -->
                    <div class="list-order-dropDown">
                        <div class="dropDownMenu type2">
                            <div class="selectBox">
                                <button type="button" class="label" data-selected="최신순">최신순</button>
                                <div class="optionListWrap">
                                    <div class="scrollWidth">
                                        <ul class="optionList scrollWrap">
                                            <!-- 활성화 메뉴 active class 추가 -->
                                            <li class="optionItem"><a href="" data-account="최신순">최신순</a></li>
                                            <li class="optionItem active"><a href="" data-account="인기순">인기순</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 리스트 -->
                    <ul class="list">
                        <li class="flex">
                            <a href="view" class="go-viewPage"></a>
                            <div class="teacher">
                                <div class="thumbnail" data-youtube="djKYUszYHDg?si=en23VkhSzAFuK82p"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                <div class="name"><p class="ellipsis_1">%강사명%</p></div>
                            </div>
                            <div class="textWrap">
                                <div class="tag">
                                    <!--
                                        class 명에 따라 filter 색상, color가 변경됩니다.
                                        writing, speaking, listening, reading, etc
                                    -->
                                    <span class="title writing">writing</span>
                                    <span class="date">24.10.28</span>
                                </div>
                                <!-- subject에 class color 가 들어갑니다. (red, blue, green, purple) -->
                                <div class="subject"><p class="ellipsis_2">발음에서 무너진다면?</p></div>
                                <a href="" class="file" download>학습자료<figure></figure></a>
                            </div>
                        </li>
                        <li class="flex">
                            <a href="view" class="go-viewPage"></a>
                            <div class="teacher">
                                <div class="thumbnail" data-youtube="djKYUszYHDg?si=en23VkhSzAFuK82p"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                <div class="name"><p class="ellipsis_1">%강사명%</p></div>
                            </div>
                            <div class="textWrap">
                                <div class="tag">
                                    <span class="title speaking">speaking</span>
                                    <span class="date">24.10.28</span>
                                </div>
                                <div class="subject"><p class="ellipsis_2">발음에서 무너진다면? 10분 안에 좋아지는 꿀팁 대공개</p></div>
                                <a href="" class="file" download>학습자료<figure></figure></a>
                            </div>
                        </li>
                        <li class="flex">
                            <a href="view" class="go-viewPage"></a>
                            <div class="teacher">
                                <div class="thumbnail" data-youtube="djKYUszYHDg?si=en23VkhSzAFuK82p"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                <div class="name"><p class="ellipsis_1">강사명강사명강사명강사명</p></div>
                            </div>
                            <div class="textWrap">
                                <div class="tag">
                                    <span class="title listening">listening</span>
                                    <span class="date">24.10.28</span>
                                </div>
                                <div class="subject"><p class="ellipsis_2">발음에서 무너진다면? 10분 안에 좋아지는 꿀팁 대공개</p></div>
                                <a href="" class="file" download>학습자료<figure></figure></a>
                            </div>
                        </li>
                        <li class="flex">
                            <a href="view" class="go-viewPage"></a>
                            <div class="teacher">
                                <div class="thumbnail" data-youtube="djKYUszYHDg?si=en23VkhSzAFuK82p"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                <div class="name"><p class="ellipsis_1">%강사명%</p></div>
                            </div>
                            <div class="textWrap">
                                <div class="tag">
                                    <span class="title reading">reading</span>
                                    <span class="date">24.10.28</span>
                                </div>
                                <div class="subject"><p class="ellipsis_2">발음에서 무너진다면? 10분 안에 좋아지는 꿀팁 대공개</p></div>
                                <a href="" class="file" download>학습자료<figure></figure></a>
                            </div>
                        </li>
                        <li class="flex">
                            <a href="view" class="go-viewPage"></a>
                            <div class="teacher">
                                <div class="thumbnail"><figure style="background-image:url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/common/board/test_special-lecture_01.png');"></figure></div>
                                <div class="name"><p class="ellipsis_1">%강사명%</p></div>
                            </div>
                            <div class="textWrap">
                                <div class="tag">
                                    <span class="title">기타</span>
                                    <span class="date">24.10.28</span>
                                </div>
                                <div class="subject"><p class="ellipsis_2">대법관은 대법원장의 제청으로 국회의 동의를 얻어 대통령이 임명한다. 사회적 특수계급의 제도는 인정되지 아니하며, 어떠한 형태로도 이를 창설할 수 없다.</p></div>
                                <a href="" class="file" download>학습자료<figure></figure></a>
                            </div>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
@endsection

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

    </script>
@endsection