@extends('layout')

@section('css')
    <link rel="stylesheet" href="{{ env('AWS_S3_LIB_URL') }}/swiper/9.4.1/swiper.min.css">
    <script src="{{ env('AWS_S3_LIB_URL') }}/swiper/9.4.1/swiper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

    {!! resource('css/main.css') !!}
    {!! resource('js/common/common.js') !!}
@endsection

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

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

@section('content')
    <div id="wrap">
        <main class="heroArea">
            <div class="max-width">
                <div class="mainBanner">
                    <div class="textWrap one" style="display: none;">
                        <div class="txt1"><img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_hero_txt1.svg" alt="IELTS 평균 성적 7.0"></div>
                        <div class="txt2"><img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_hero_txt2.svg" alt="인강만으로 가능한 이유는 무엇일까요?"></div>
                    </div>
                    <div class="textWrap two" style="display: none;">
                        <p>지난 25년의 동안 우리는 유학 사업을 통해 수많은 학생들이 유학의 꿈을 이루는 과정을 함께 해왔습니다.</p>
                        <p>그렇기에 수험생 여러분들의 촉박한 기간과 절실함을 이해하며, 타 업체의 과장된 광고에 속지 않고 짧은 기간 목표 점수를 달성할 수 있도록 전문적이고 검증된 콘텐츠를 제공합니다.</p>
                    </div>
                    <div class="textWrap three" style="display: block;">
                        <p>우리의 목표는 단순히 IELTS 고득점이 아니라, 학생들이 꿈꾸는 미래를 실현할 수 있도록 빠르고 확실하게 지원하는 것입니다. <b>이것이 저희가 그 무엇 하나 허투루 준비할 수 없는 이유입니다.</b></p>
                    </div>
                </div>
            </div>
        </main>

        <section>
            <article class="transcript">
                <div class="max-width">
                    <div class="txt-hero2">실제 인강 수강생의 <em>성적표</em>입니다.</div>
                </div>
                <div class="slide">

                </div>
            </article>
            <article class="eventBanner">

            </article>

            <article class="bestProduct">
                <div class="max-width">
                    <div class="txt-hero2">단기간 고득점을 가능하게 한 <br><em>BEST 상품</em>입니다.</div>
                    <div class="careWrap flex">
                        <div class="card">
                            <span>7.0까지 합격 보장</span>
                            <p>올패스</p>
                            <div class="info">
                                #무제한 연장(첨삭포함) <br>
                                #공식시험 응시권 무료 <br>
                                #교재 무료 제공 <br>
                                #CDT 모의고사+첨삭(2회)
                            </div>
                            <a href="">상품 보러가기</a>
                        </div>
                        <div class="card">
                        <span>짧은 기간, 실속있게</span>
                        <p>N개월 실속팩</p>
                        <div class="info">
                            #교재 #1:1첨삭서비스 <br>
                            #CDT패키지 #404개강의 이 모든 게 30만원대
                        </div>
                        <a href="">상품 보러가기</a>
                        </div>
                        <div class="card">
                            <span>목표달성하고! 환급받고!</span>
                            <p>200% 환급반</p>
                            <div class="info">
                                누구나 쉽고 빠르게! <br>
                                #입문 페이백 <br>
                                단기간 실력 향상! <br>
                                #실전 페이백
                            </div>
                            <a href="">상품 보러가기</a>
                        </div>
                        <div class="card">
                            <span>어려운 과목만 집중적으로</span>
                            <p>라이팅&스피킹 <br>30일 완성 PACK</p>
                            <div class="info">
                                #1:1 매일 첨삭 <br>
                                #집중관리
                            </div>
                            <a href="">상품 보러가기</a>
                        </div>
                    </div>
                    <div class="page-link"><a href="">BEST 상품 한 눈에 비교하기</a></div>
                </div>
            </article>

            <article class="preference">
                <div class="max-width">
                    <div class="txt-hero2"><span>수험생의 압도적인 선호도</span>수치로 증명합니다.</div>
                    <div class="cardWrap flex">
                        <div class="card">
                            <figure></figure>
                            <p class="txt">누적 수강생</p>
                            <div class="count"><p class="counter">14,216</p>명</div>
                            <span>2024.07.12 기준</span>
                        </div>
                        <div class="card">
                            <figure></figure>
                            <p class="txt">10년 연속 IELTS 교육</p>
                            <div class="count"><p class="counter">1</p>위</div>
                            <span>2015-2024 대한민국 교육브랜드<br>IELTS 부문 대상 / 주관사 : 브랜드스탁</span>
                        </div>
                        <div class="card">
                            <figure></figure>
                            <p class="txt">누적 첨삭 횟수 </p>
                            <div class="count"><p class="counter">22,599</p>건</div>
                            <span>2024.07.12 기준</span>
                        </div>
                        <div class="card">
                            <figure></figure>
                            <p class="txt">Youtub 누적 조회수</p>
                            <div class="count"><p class="counter">2,809</p>만</div>
                            <span>글로벌 채널 2,760.4만<br>국내 채널 48.2만</span>
                        </div>
                    </div>
                </div>
            </article>

            <article class="pointWrap">
                <div class="point point1">
                    <div class="max-width">
                        <div class="txt-hero2"><span>강의 선택 주의</span>강의를 선택하기 전 <br><em>2가지</em>를 꼭 확인하세요.</div>
                        <div class="slide type1">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="textWrap">
                                        <p class="title">진짜 IELTS전문가가 맞으신가요?</p>
                                        <p class="sub">겹치기 수업 No, IELTS  수업 경력만 10년 이상 IELTS 문항 자체 개발</p>
                                    </div>
                                    <figure style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_point1-img1.jpg');"></figure>
                                </div>
                                <div class="swiper-slide">
                                    <div class="textWrap">
                                        <p class="title">최신 경향에 맞춰 공부할 수 있나요?</p>
                                        <p class="sub">학원 현장에서 수험생의 응시 후기와 최신 기출을 반영한 업데이트 특강 월 1회 제공</p>
                                    </div>
                                    <figure style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_point1-img2.jpg')"></figure>
                                </div>
                            </div>
                            <div class="paginationWrap"><div class="pagination type2"></div></div>
                        </div>
                    </div>
                </div>
                <div class="point point2">
                    <div class="max-width">
                        <div class="txt-hero2"><span>첨삭, 어디까지 경험해 봤니? </span>edm은 <em>첨삭에 진심</em>입니다.</div>
                        <p class="subTxt">강의 만으로는 어디에서 막히는지, 무엇을 보완해야 하는지 구체적으로 진단하기가 어렵습니다.
                        대다수 수험생의 걱정거리인 Writing, Speaking은 특히나 내가 답변한 부분 중  어색하거나 틀린 표현에 대해 완벽하게 이해하고 보완할 수 있는 피드백이 진행되어야 합니다. </p>
                        <div class="slide">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="textArea">
                                        <figure style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_point2_icon1.svg');"></figure>
                                        실제 평가 기준을 토대로 구체적이고 자세한 1:1 첨삭이 이루어 집니다.
                                    </div>
                                    <div class="flex boxWrap">
                                        <div class="box"><img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_point2-img1.jpg" alt=""></div>
                                        <div class="box"><img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_point2-img2.png" alt=""></div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="textArea">
                                        <figure style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_point2_icon1.svg');"></figure>
                                        패턴 고르기 or CDT 모의고사 첨삭받기 둘 다 가능!
                                    </div>
                                    <div class="flex boxWrap">
                                        <div class="box">
                                            <div class="text">취약 과목 & 패턴만 집중 학습</div>
                                            <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_point2-img3.jpg" alt="">
                                        </div>
                                        <div class="box">
                                            <div class="text">모의고사 점수확인 & 랜덤문항 대비</div>
                                            <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_point2-img4.jpg" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="textArea">
                                        <figure style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_point2_icon1.svg');"></figure>
                                        어서와 과외 영상은 처음이지? <br>지독하게 디테일한 피드백을 준비해봤어
                                    </div>
                                    <div class="flex boxWrap type2">
                                        <div class="box video">
                                            <iframe src="https://www.youtube.com/embed/QPLVtjbDz6c?si=ZRhRxje98uvCplSe" title="YouTube video player" 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>
                                </div>
                            </div>
                            <div class="paginationWrap"><div class="pagination type2"></div></div>
                        </div>
                    </div>
                </div>
                <div class="point point2">
                    <div class="max-width">
                        <div class="txt-hero2"><span>실제 시험과 동일한 구성 </span>응시료도 비싼데 <em>CDT 모의고사</em>로 충분히 훈련하세요.</div>
                        <p class="subTxt">강빡세게 공부 했는데 시험만 보면 평소보다 점수가 낮게 나온다? 실전 훈련이 부족하기 때문입니다. 응시 부터 풀이까지 실전력을 최대치로 끌올할 수 있도록 구성됩니다. </p>
                        <div class="slide type1">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="textArea type2">동일한 구성의 CDT 응시</div>
                                    <figure style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_point3-img1.jpg');"></figure>
                                </div>
                                <div class="swiper-slide">
                                    <div class="textArea type2">동일한 구성의 CDT 응시</div>
                                    <figure style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_point3-img2.jpg')"></figure>
                                </div>
                            </div>
                            <div class="paginationWrap"><div class="pagination type2"></div></div>
                        </div>
                    </div>
                </div>
            </article>

            <article class="">

            </article>

            <article class="support">
                <div class="max-width">
                    <div class="txt-hero2">
                        <span>이렇게까지 준다고요?</span>
                        <em>응시권부터 해외 무료배송</em>까지 <br>아낌없이 지원합니다.</div>
                    <div class="slide">
                        <div class="pagination"></div>
                        <ul class="swiper-wrapper">
                            <li class="swiper-slide" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_support_01_mo.jpg');">
                                <div class="textWrap">
                                    <span>최대 33만원 상당</span>
                                    <p>응시권 무료</p>
                                </div>
                            </li>
                            <li class="swiper-slide" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_support_02_mo.jpg');">
                                <div class="textWrap">
                                    <span>CDT 모의고사</span>
                                    <p>매월 1회 무료</p>
                                </div>
                            </li>
                            <li class="swiper-slide" style="background-image: url('https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/new_support_03_mo.jpg');">
                                <div class="textWrap type2">
                                    <div class="txt">
                                        <span>국내 유일</span>
                                        <p>해외 무료배송</p>
                                    </div>
                                    <div class="txt">
                                        <span>배송 기간 고려</span>
                                        <p>수강기간 30일 추가</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </article>

            <article class="review">
                <div class="max-width">
                    <div class="txt-hero2">
                        <span>수강생 진짜 후기</span>
                        edm을 만나고 이렇게 변했습니다.</div>
                </div>
                <div class="slide splide">
                    <div class="splide__track">
                        <ul class="splide__list">
                            <li class="splide__slide">
                                <div class="score"><b>6.5</b></div>
                                <p class="title">수강기간 3주</p>
                                <p class="sub-title">쌩초자도 고득점 가능합니다~! 최고최고</p>
                                <p class="content">아이엘츠에 대한 기본적인 지식이 없었는데 보내주신 교재와 더불어 기초 강의가 굉장히 도움이 많이 되었습니다.</p>
                                <div class="name"><figure></figure>박*신 수강생</div>
                            </li>
                            <li class="splide__slide">
                                <div class="score"><b>6.5</b></div>
                                <p class="title">수강기간 3주</p>
                                <p class="sub-title">쌩초자도 고득점 가능합니다~! 최고최고</p>
                                <p class="content">아이엘츠에 대한 기본적인 지식이 없었는데 보내주신 교재와 더불어 기초 강의가 굉장히 도움이 많이 되었습니다.</p>
                                <div class="name"><figure></figure>박*신 수강생</div>
                            </li>
                            <li class="splide__slide">
                                <div class="score"><b>6.5</b></div>
                                <p class="title">수강기간 3주</p>
                                <p class="sub-title">쌩초자도 고득점 가능합니다~! 최고최고</p>
                                <p class="content">아이엘츠에 대한 기본적인 지식이 없었는데 보내주신 교재와 더불어 기초 강의가 굉장히 도움이 많이 되었습니다.</p>
                                <div class="name"><figure></figure>박*신 수강생</div>
                            </li>
                            <li class="splide__slide">
                                <div class="score"><b>6.5</b></div>
                                <p class="title">수강기간 3주</p>
                                <p class="sub-title">쌩초자도 고득점 가능합니다~! 최고최고</p>
                                <p class="content">아이엘츠에 대한 기본적인 지식이 없었는데 보내주신 교재와 더불어 기초 강의가 굉장히 도움이 많이 되었습니다.</p>
                                <div class="name"><figure></figure>박*신 수강생</div>
                            </li>
                            <li class="splide__slide">
                                <div class="score"><b>6.5</b></div>
                                <p class="title">수강기간 3주</p>
                                <p class="sub-title">쌩초자도 고득점 가능합니다~! 최고최고</p>
                                <p class="content">아이엘츠에 대한 기본적인 지식이 없었는데 보내주신 교재와 더불어 기초 강의가 굉장히 도움이 많이 되었습니다.</p>
                                <div class="name"><figure></figure>박*신 수강생</div>
                            </li>
                            <li class="splide__slide">
                                <div class="score"><b>6.5</b></div>
                                <p class="title">수강기간 3주</p>
                                <p class="sub-title">쌩초자도 고득점 가능합니다~! 최고최고</p>
                                <p class="content">아이엘츠에 대한 기본적인 지식이 없었는데 보내주신 교재와 더불어 기초 강의가 굉장히 도움이 많이 되었습니다.</p>
                                <div class="name"><figure></figure>박*신 수강생</div>
                            </li>
                        </ul>
                    </div>
                    <!-- play, pause button -->
					<button class="splide__toggle" type="button">
                        <svg class="splide__toggle__play" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" >
                            <path d="m22 12-20 11v-22l10 5.5z"/>
                        </svg>
                        <svg class="splide__toggle__pause" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" >
                            <path d="m2 1v22h7v-22zm13 0v22h7v-22z"/>
                        </svg>
                    </button>
                </div>
                <div class="max-width"><div class="page-link"><a href="">후기 더보기</a></div></div>
            </article>

            <article class="realReview">
                <div class="max-width">
                    <span>시작하기 전 꼭 참고하세요.</span>
                    <div class="txt-hero2">IELTS 공부법 & <em>찐후기</em></div>
                </div>
                <div class="slideWrap">
                    <div class="slide">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="videoWrap">
                                    <iframe src="https://www.youtube.com/embed/s4vNxARdnTM?si=6ur5aj6mdPFFT5Sm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                                </div>
                                <p class="subject">해외에서 인강으로 아이엘츠 목표 달성한 비법</p>
                            </div>
                            <div class="swiper-slide">
                                <div class="videoWrap">
                                    <iframe src="https://www.youtube.com/embed/s4vNxARdnTM?si=6ur5aj6mdPFFT5Sm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                                </div>
                                <p class="subject">해외에서 인강으로 아이엘츠 목표 달성한 비법</p>
                            </div>
                            <div class="swiper-slide">
                                <div class="videoWrap">
                                    <iframe src="https://www.youtube.com/embed/s4vNxARdnTM?si=6ur5aj6mdPFFT5Sm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                                </div>
                                <p class="subject">해외에서 인강으로 아이엘츠 목표 달성한 비법</p>
                            </div>
                        </div>
                    </div>
                    <div class="pagination loop"></div>
                </div>
            </article>
        </section>
    </div>

@endsection

@section('script')
    {!! resource('js/main.js') !!}
    <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
    {!! resource('js/common/jquery.counterup.min.js') !!}

    <script>
        $(function(){
            $('.counter').counterUp({
                delay: 6,
                time: 700
            });

            var pointWrapSlide1 = new Swiper('.pointWrap .point1 .slide', {
                slidesPerView: 1.3,
                slidesPerGroup: 1,
                spaceBetween: 16,
                simulateTouch: true,
                loop: false,
                speed: 600,
                pagination: {
                    el: '.pointWrap .point1 .pagination',
                    type: "bullets",
                    clickable: true,
                },
            });
            // multi slider
            var $slider = $('.pointWrap .point2');
            $slider.each(function(i,item){
                let thisSlider = $(item).find('.slide');
                let thisPagination = $(item).find('.slide .pagination')[0];
                console.log(thisPagination);
                var pointWrapSlide = new Swiper(thisSlider[0], {
                    slidesPerView: 1,
                    slidesPerGroup: 1,
                    spaceBetween: 16,
                    simulateTouch: true,
                    loop: false,
                    speed: 600,
                    autoHeight: false,
                    pagination: {
                        el: thisPagination,
                        type: "bullets",
                        clickable: true,
                    },
                });
            });

            var support = new Swiper(".support .slide", {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 0,
                simulateTouch: true,
                loop: false,
                effect: 'fade',
                fadeEffect: {
                    crossFade: true
                },
                speed: 600,
                pagination: {
                    el: ".support .slide .pagination",
                    type: "fraction",
                },
            });

            var review = new Splide( '.review .splide', {
                type   : 'loop',
                perPage: 2,
                gap: 16,
                arrows: false,
                pagination: false,
                drag: false,
                autoplay: 'play', // 시작할 때 알아서 재생으로 시작할건지, 멈춘상태로 시작할건지../
                autoScroll: {
                    speed: 2,
                    pauseOnHover: false,
                    pauseOnFocus: false,
                    autoStart : true,
                    rewind: false,

                },
            });
            review.mount(window.splide.Extensions);

            var realReview = new Swiper(".realReview .slide", {
                loop: true,
                slidesPerView: 1.3,
                slidesPerGroup: 1,
                spaceBetween: 16,
                simulateTouch: true,
                speed: 800,
                pagination: {
                    el: ".realReview .slideWrap .pagination",
                    type: "bullets",
                    clickable: true,
                },
                on: {
                    slideChange: function(e){
                        let totalSlide = $('.realReview .slide .swiper-slide').length - 1;
                        if(e.realIndex == totalSlide){
                            $('.realReview .pagination .swiper-pagination-bullet:first-child').addClass('small');
                        }else{
                            $('.realReview .pagination .swiper-pagination-bullet:first-child').removeClass('small');
                        }
                    },
                    init : function(e){
                        let totalSlide = $('.realReview .slide .swiper-slide').length - 1;
                        if(e.realIndex == totalSlide){
                            $('.realReview .pagination .swiper-pagination-bullet:first-child').addClass('small');
                        }else{
                            $('.realReview .pagination .swiper-pagination-bullet:first-child').removeClass('small');
                        }
                    },
                },
            });
        });

    </script>
@endsection

@section('footer', view('footer'))