@extends('ielts.layout')

@section('ielts-css')
    {!! resource('css/ielts/sub.css') !!}
    {!! resource('css/myclass/lecture.css') !!}
@endsection



@section("ielts-content")
<!-- 수강신청 리스트 -->
<div class="container lecture-container list-container ielts">
    <div class="lecture-top-wrapper">
        <div class="wrapper">
            <div class="lecture-top-container">
                <div class="lecture-category-select-wrapper">
                    <p>나에게 맞는 강좌는?</p>
                    <div>
                        <div class="lecture-category-select">
                            <select name="" id="">
                                <option value="">목표 점수</option>
                                <option value="">5.5 ~ 6.0</option>
                                <option value="">6.5 ~ 7.0</option>
                            </select>
                            <select name="" id="">
                                <option value="">나의 영어실력</option>
                                <option value="">IELTS입문/영어초보</option>
                                <option value="">토익 600점 이상 수준</option>
                            </select>
                            <select name="" id="">
                                <option value="">시험 응시권</option>
                                <option value="">포함</option>
                                <option value="">미포함</option>
                            </select>
                        </div>
                        <button class="button">검색</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="lecture-cont-wrapper">
        <div class="wrapper">
            <div class="lecture-tab-nav-wrapper">
                <ul class="lecture-tab-nav-list">
                    <li>
                        <a href="#none" class="active" onclick="fnMove('best')"><span>BEST 강좌패키지</span></a>
                    </li>
                    <li>
                        <a href="#none" onclick="fnMove('official')"><span>공식시험 패키지</span></a>
                    </li>
                    <li>
                        <a href="#none" onclick="fnMove('ielts')"><span>IELTS 단과</span></a>
                    </li>
                    <li>
                        <a href="#none" class="unactive"><span>대학영어</span></a>
                    </li>
                </ul>
            </div>
            <div class="lecture-section">
                <span class="lecture-cont-anchor" id="best"></span>
                <div class="lecture-cont">
                    <strong class="lecture-cont-title">BEST 인기강좌</strong>
                    <div class="lecture-cont-box">
                        <div class="lecture-thumbnail">
                            <img src="https://placehold.co/400x250" alt="">
                        </div>
                        <div class="lecture-info">
                            <div class="lecture-detail-title">
                                <div class="flag red">
                                    <span>BEST</span>
                                </div>
                                <!-- <div class="flag green">
                                    <span>text</span>
                                </div>
                                <div class="flag blue">
                                    <span>text</span>
                                </div>
                                <div class="flag purple">
                                    <span>text</span>
                                </div>
                                <div class="flag pink">
                                    <span>text</span>
                                </div>
                                <div class="flag orange">
                                    <span>text</span>
                                </div>
                                <div class="flag skyblue">
                                    <span>text</span>
                                </div> -->
                                <p>IELTS 입문</p>
                            </div>
                            <div class="lecture-detail-desc">
                                IELTS를 처음 준비하는 수강생 4영역 기본기 완성반
                            </div>
                            <div class="lecture-detail-badge">
                                <span class="badge red">최대 70%할인</span>
                                <span class="badge purple">CDT 모의고사 2회</span>
                                <span class="badge yellow">노란단어</span>
                                <span class="badge green">W단어</span>
                                <span class="badge green">태그 최대 5개</span>
                            </div>
                            <div class="lecture-detail-list">
                                <ul>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-wrap">
                                                    <span class="price-before">260,000원</span>
                                                    <span class="price">160,000원</span>
                                                </span>
                                                <span class="desc">4개월 등록 시, 최대 90%할인dfdfdfdfdfdfdf</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-before">260,000원</span>
                                                <span class="price">160,000원</span>
                                                <span class="desc">최대 90%할인</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-before">260,000원</span>
                                                <span class="price">160,000원</span>
                                                <span class="desc">최대 90%할인</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-before">260,000원</span>
                                                <span class="price">160,000원</span>
                                                <span class="desc">최대 90%할인</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-before">2,000원</span>
                                                <span class="price">1,000원</span>
                                                <span class="desc">최대 90%할인</span>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="lecture-cont-anchor" id="official"></span>
                <div class="lecture-cont">
                    <strong class="lecture-cont-title">공식시험 패키지</strong>
                    <div class="lecture-cont-box">
                        <div class="lecture-thumbnail">
                            <img src="https://placehold.co/400x250" alt="">
                        </div>
                        <div class="lecture-info">
                            <div class="lecture-detail-title">
                                <div class="flag red">
                                    <span>BEST</span>
                                </div>
                                <!-- <div class="flag green">
                                    <span>text</span>
                                </div>
                                <div class="flag blue">
                                    <span>text</span>
                                </div>
                                <div class="flag purple">
                                    <span>text</span>
                                </div>
                                <div class="flag pink">
                                    <span>text</span>
                                </div>
                                <div class="flag orange">
                                    <span>text</span>
                                </div>
                                <div class="flag skyblue">
                                    <span>text</span>
                                </div> -->
                                <p>IELTS 입문</p>
                            </div>
                            <div class="lecture-detail-desc">
                                IELTS를 처음 준비하는 수강생 4영역 기본기 완성반
                            </div>
                            <div class="lecture-detail-badge">
                                <span class="badge red">최대 70%할인</span>
                                <span class="badge purple">CDT 모의고사 2회</span>
                            </div>
                            <div class="lecture-detail-list">
                                <ul>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-before">1,260,000원</span>
                                                <span class="price">1,160,000원</span>
                                                <span class="desc">4개월 등록 시, 최대 90%할인dfdfdfdfdfdfdf</span>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="lecture-cont-anchor" id="ielts"></span>
                <div class="lecture-cont">
                    <strong class="lecture-cont-title">IELTS 단과</strong>
                    <div class="lecture-cont-box">
                        <div class="lecture-thumbnail">
                            <img src="https://placehold.co/400x250" alt="">
                        </div>
                        <div class="lecture-info">
                            <div class="lecture-detail-title">
                                <div class="flag red">
                                    <span>BEST</span>
                                </div>
                                <!-- <div class="flag green">
                                    <span>text</span>
                                </div>
                                <div class="flag blue">
                                    <span>text</span>
                                </div>
                                <div class="flag purple">
                                    <span>text</span>
                                </div>
                                <div class="flag pink">
                                    <span>text</span>
                                </div>
                                <div class="flag orange">
                                    <span>text</span>
                                </div>
                                <div class="flag skyblue">
                                    <span>text</span>
                                </div> -->
                                <p>IELTS 입문</p>
                            </div>
                            <div class="lecture-detail-desc">
                                IELTS를 처음 준비하는 수강생 4영역 기본기 완성반
                            </div>
                            <div class="lecture-detail-badge">
                                <span class="badge red">최대 70%할인</span>
                                <span class="badge purple">CDT 모의고사 2회</span>
                            </div>
                            <div class="lecture-detail-list">
                                <ul>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-before">1,260,000원</span>
                                                <span class="price">1,160,000원</span>
                                                <span class="desc">4개월 등록 시, 최대 90%할인dfdfdfdfdfdfdf</span>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="lecture-cont-anchor" id="english"></span>
                <div class="lecture-cont">
                    <strong class="lecture-cont-title">대학영어</strong>
                    <div class="lecture-cont-box">
                        <div class="lecture-thumbnail">
                            <img src="https://placehold.co/400x250" alt="">
                        </div>
                        <div class="lecture-info">
                            <div class="lecture-detail-title">
                                <div class="flag red">
                                    <span>BEST</span>
                                </div>
                                <!-- <div class="flag green">
                                    <span>text</span>
                                </div>
                                <div class="flag blue">
                                    <span>text</span>
                                </div>
                                <div class="flag purple">
                                    <span>text</span>
                                </div>
                                <div class="flag pink">
                                    <span>text</span>
                                </div>
                                <div class="flag orange">
                                    <span>text</span>
                                </div>
                                <div class="flag skyblue">
                                    <span>text</span>
                                </div> -->
                                <p>IELTS 입문</p>
                            </div>
                            <div class="lecture-detail-desc">
                                IELTS를 처음 준비하는 수강생 4영역 기본기 완성반
                            </div>
                            <div class="lecture-detail-badge">
                                <span class="badge red">최대 70%할인</span>
                                <span class="badge purple">CDT 모의고사 2회</span>
                            </div>
                            <div class="lecture-detail-list">
                                <ul>
                                    <li>
                                        <a href="#none">
                                            <span class="month">1개월</span>
                                            <span class="right">
                                                <span class="price-before">1,260,000원</span>
                                                <span class="price">1,160,000원</span>
                                                <span class="desc">4개월 등록 시, 최대 90%할인dfdfdfdfdfdfdf</span>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#none" class="scroll-up">
        <img src="{{ env('AWS_S3_IMG_URL') }}/common/lecture/ico-scroll-top.png" alt="TOP">TOP
    </a>
</div>
<!-- // 수강신청 리스트 -->
@endsection



@section('ielts-script')
<script>
    $(document).ready(function () {
        $(".lecture-tab-nav-list a").click(function() {
            $(".lecture-tab-nav-list a").removeClass("active");
            $(this).addClass("active");
        });

        // scroll top
        $(window).scroll(function() {
            if ($(this).scrollTop() > 600) {
                $(".scroll-up").fadeIn();
            } else {
                $(".scroll-up").fadeOut();
            }
        })
        $(".scroll-up").click(function() {
            $("html, body").animate({
                scrollTop: 0
            }, 600);
            return false;
        });
    });

    function fnMove(idName) {
        var offset = $("#"+idName).offset();
        $('html,body').animate({scrollTop:offset.top},400);
    }
</script>
@endsection