@extends('ielts.layout')

@section('ielts-css')
    <!-- slide -->
    <link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/themes/odometer-theme-minimal.min.css">

    <!-- main -->
    {!! resource('css/ielts/main.css') !!}
@endsection

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

@section("ielts-content")
    <div id="wrap" class="mainPage">
        <div class="hidden"><h1 class="pageTitle">아이엘츠 인강</h1></div>
        <div class="pinWrap">
            <main class="heroArea">
                <div class="mainBanner">
                    <div class="effect"><span></span></div>
                    <div class="bg_video">
                        <video autoplay muted playsinline loop class="mo-video">
                            <source src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/spring-mo.mp4" type="video/mp4" />
                        </video>
                        <video autoplay muted playsinline loop class="tablet-video">
                            <source src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/spring-tablet.mp4" type="video/mp4" />
                        </video>
                        <video autoplay muted playsinline loop class="pc-video">
                            <source src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/main/spring-pc.mp4" type="video/mp4" />
                        </video>
                    </div>
                    <div class="textWrap">
                        <div class="max-width large">
                            <div class="text first"><h2><span>IELTS</span> 평균 성적 <span>7.0</span> <br>인강만으로 가능한 <br class="mo-br">이유는 무엇일까요?</h2></div>
                            <div class="text second">
                                <div>
                                    <p>유학을 꿈꾸는 <br class="mo-br">수많은 학생들과 함께한 25년</p>
                                    <p>짧은 준비 기간, 간절한 목표를 <br class="mo-br">알기에 <br class="tab_pc-br">과장 없는 효과적인 <br class="mo-br">콘텐츠만을 제공합니다.</p>
                                </div>
                            </div>
                            <div class="text last">
                                <p>우리의 목표는 단순히 <br class="mo-br">IELTS 고득점이 아니라, <br class="tablet-br">학생들이 <br class="mo-br">꿈꾸는 <br class="pc-br">미래를 실현할 수 있도록 <br class="mo-br">빠르고 확실하게 지원하는 것입니다.</p>
                                <p>이것이 저희가 그 무엇 하나 <br class="mo-br">허투루 준비할 수 없는 이유입니다.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </main>

            <div class="mainContents">
                <article class="transcript">
                    <div class="max-width large">
                        <h2 class="txt-hero2">실제 인강 수강생의 <em>성적표</em>입니다.
                            <div class="pc-txt"><span class="bottom-txt">*2020-2024 성적표 제출 평균(달성기간 7.6주 / 평균성적 6.7)</span></div>
                        </h2>
                    </div>
                    <div class="slide">
                        @foreach ($grades as $grade)
                            <div class="box popupOn">
                                <div class="score"><b>{{ $grade['grade'] }}</b><span>{{ $grade['month'] }}</span></div>
                                <img src="{{ env('AWS_S3_IMG_URL') }}{{ $grade['image'] }}" alt="{{ $grade['grade'] }}">
                                <div class="plus"></div>
                            </div>
                        @endforeach
                        <div class="bottomTxt"><p class="max-width">2020-2024 성적표 제출 평균(달성기간 7.6주 / 평균성적 6.7)</p></div>
                    </div>
                </article>

                <article class="eventBanner" style="background: linear-gradient(90deg, #F3F5FB 0%, #DCE6F4 50%, #E7DCF5 100%);">
                    <div class="max-width large">
                        <b>Welcome Package</b>
                        <p>신규 회원에게 드리는 알찬 혜택! 지금 바로 가입하세요!</p>
                        <picture>
                            <!-- 배너 프레임 크기로 이미지만 따로 저장 -->
                            <source srcset="{{ env('AWS_S3_IMG_URL') }}/banner/ielts/main-banner-bg-pc.png" media="(min-width: 1200px)">
                            <source srcset="{{ env('AWS_S3_IMG_URL') }}/banner/ielts/main-banner-bg-tablet.png" media="(min-width: 576px)">
                            <img src="{{ env('AWS_S3_IMG_URL') }}/banner/ielts/main-banner-bg.png" alt="3만원 할인 쿠폰, 24시간 무료 강의">
                        </picture>
                    </div>
                </article>

                <article class="bestProduct">
                    <div class="max-width large">
                        <h2 class="txt-hero2">단기간 고득점을 가능하게 한 <br class="mo-br"><em>BEST 상품</em>입니다.</h2>
                        <div class="careWrap flex">
                            <div class="card">
                                <div class="textWrap">
                                    <span>7.0까지 합격 보장</span>
                                    <p>올패스</p>
                                    <div class="info">
                                        #무제한 연장(첨삭포함) <br>
                                        #공식시험 응시권 무료 <br>
                                        #교재 무료 제공 <br>
                                        #CDT 모의고사+첨삭(2회)
                                    </div>
                                    <a href="/ielts/product/21">상품 보러가기</a>
                                </div>
                            </div>
                            <div class="card">
                                <div class="textWrap">
                                    <span>짧은 기간, 실속있게</span>
                                    <p>N개월 실속팩</p>
                                    <div class="info">
                                        #교재 #1:1첨삭서비스 <br class="mo_tab-br">
                                        #CDT패키지 <br class="pc-br">#404개강의 <br class="tablet-br">이 모든 게 30만원대
                                    </div>
                                    <a href="ielts/product/19">상품 보러가기</a>
                                </div>
                            </div>
                            <div class="card">
                                <div class="textWrap">
                                    <span>목표달성하고! 환급받고!</span>
                                    <p>200% 환급반</p>
                                    <div class="info">
                                        누구나 쉽고 빠르게! <br class="mo_tab-br">
                                        #입문 페이백 <br>
                                        단기간 실력 향상! <br class="mo_tab-br">
                                        #실전 페이백
                                    </div>
                                    <a href="/ielts/product/4">상품 보러가기</a>
                                </div>
                            </div>
                            <div class="card">
                                <div class="textWrap">
                                    <span>어려운 과목만 집중적으로</span>
                                    <p>라이팅&스피킹 <br>30일 완성 PACK</p>
                                    <div class="info">
                                        #1:1 매일 첨삭 <br class="mo_tab-br">
                                        #집중관리
                                    </div>
                                    <a href="">상품 보러가기</a>
                                </div>
                            </div>
                        </div>
                        <div class="page-link type2 noto-sans">
                            <a href=""><span class="mo-text">BEST 상품 한 눈에 비교하기</span> <span class="tab_pc-text">상품 비교가 어려우시다고요? BEST 상품 한 눈에 비교하기</span>
                                <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6 12L10 8L6 4" stroke="#40404E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                </article>

                <article class="preference" data-aos="">
                    <div class="max-width large">
                        <h2 class="txt-hero2"><span>수험생의 <br class="pc-br">압도적인 선호도</span><em>수치로 증명</em>합니다.</h2>
                        <div class="cardWrap flex">
                            <div class="card">
                                <figure class="lazy"></figure>
                                <p class="txt">누적 수강생</p>
                                <div class="count"><p class="counter odometer1">0</p>명</div>
                                <span class="s-txt">2024.07.12 기준</span>
                            </div>
                            <div class="card">
                                <figure class="lazy"></figure>
                                <p class="txt">10년 연속 IELTS 교육</p>
                                <div class="count"><p class="odometer2">0</p>위</div>
                                <span class="s-txt">2015-2024 대한민국 교육브랜드<br class="mo_tab-br">&nbsp;IELTS 부문 대상 <span class="mo_tab-text">/ 주관사 : 브랜드스탁</span></span>
                            </div>
                            <div class="card">
                                <figure class="lazy"></figure>
                                <p class="txt">누적 첨삭 횟수 </p>
                                <div class="count"><p class="counter odometer3">0</p>건</div>
                                <span class="s-txt">2024.07.12 기준</span>
                            </div>
                            <div class="card">
                                <figure class="lazy"></figure>
                                <p class="txt">Youtube 누적 조회수</p>
                                <div class="count"><p class="counter odometer4">0</p>만</div>
                                <span class="s-txt">글로벌 채널 2,760.4만<br class="mo_tab-br"><span class="pc-text">&nbsp;/</span>&nbsp;국내 채널 48.2만</span>
                            </div>
                        </div>
                    </div>
                </article>

                <article class="pointWrap">
                    <div class="pointArea point1 active" data-scroll="point">
                        <div class="max-width">
                            <div class="titleWrap"><h2 class="txt-hero2"><span>강의 선택 주의</span>강의를 선택하기 전 <br class="mo-br"><br class="pc-br"><em>2가지</em>를 꼭 확인하세요.</h2></div>
                            <div class="slide splide">
                                <div class="splide__track">
                                    <div class="splide__list">
                                        <div class="splide__slide">
                                            <figure></figure>
                                            <div class="textWrap">
                                                <p class="title">진짜 IELTS전문가가 맞으신가요?</p>
                                                <p class="sub">겹치기 수업 No, IELTS  수업 경력만 10년 이상 IELTS 문항 자체 개발</p>
                                            </div>
                                        </div>
                                        <div class="splide__slide">
                                            <figure></figure>
                                            <div class="textWrap">
                                                <p class="title">최신 경향에 맞춰 공부할 수 있나요?</p>
                                                <p class="sub">학원 현장에서 수험생의 응시 후기와 최신 기출을 반영한 업데이트 특강 월 1회 제공</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pointArea point2 common-type" data-scroll="point">
                        <div class="max-width">
                            <div class="titleWrap"><h2 class="txt-hero2"><span>첨삭, 어디까지 경험해 봤니? </span>edm은 <em>첨삭에 진심</em><br class="pc-br">입니다.</h2></div>
                            <div class="slide splide type2">
                                <div class="splide__track" id="slide-pc-1">
                                    <div class="pc-pagination"></div>
                                    <div class="splide__list">
                                        <div class="splide__slide first">
                                            <div class="textArea">실제 평가 기준을 토대로 <br class="mo-br">구체적이고 자세한 1:1 첨삭이 이루어 집니다.</div>
                                            <div class="flex boxWrap">
                                                <div class="box specialBox">
                                                    <img src="{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point2-img1.png" alt="첨삭 피드백. 항목별 점수, 첨삭 내용">
                                                </div>
                                                <div class="box"><img src="{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point2-img2.png" alt="첨삭 피드백. 항목별 점수, 첨삭 내용"></div>
                                            </div>
                                        </div>
                                        <div class="splide__slide second">
                                            <div class="textArea">패턴 고르기 or CDT 모의고사 첨삭받기 둘 다 가능!</div>
                                            <div class="flex boxWrap">
                                                <div class="box">
                                                    <div class="text"><span>취약 과목 & 패턴만 집중 학습</span></div>
                                                    <picture>
                                                        <source srcset="{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point2-img3-pc.png" media="(min-width: 1200px)">
                                                        <source srcset="{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point2-img3-tablet.png" media="(min-width: 744px)">
                                                        <img src="{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point2-img3.png" alt="패선 고르기">
                                                    </picture>
                                                </div>
                                                <div class="box">
                                                    <div class="text"><span>모의고사 점수확인 & 랜덤문항 대비</span></div>
                                                    <picture>
                                                        <source srcset="{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point2-img4-pc.png" media="(min-width: 1200px)">
                                                        <source srcset="{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point2-img4-tablet.png" media="(min-width: 744px)">
                                                        <img src="{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point2-img4.png" alt="CDT 모의고사 첨삭받기">
                                                    </picture>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="splide__slide third">
                                            <div class="textArea">어서와 과외 영상은 처음이지? <br>지독하게 디테일한 피드백을 준비해봤어</div>
                                            <div class="flex boxWrap type2">
                                                <div class="box">
                                                    <div class="videoWrap youtube" data-youtube="1xt4nuekD9A">
                                                        <figure style="background-image:url('https://img.youtube.com/vi/1xt4nuekD9A/maxresdefault.jpg')"></figure>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pointArea point3 common-type style2" data-aos="" data-scroll="point">
                        <div class="max-width large">
                            <h2 class="txt-hero2"><span>실제 시험과 동일한 구성 </span>응시료도 비싼데 <br class="mo_tab-br"><em>CDT 모의고사</em>로 충분히 훈련하세요.</h2>
                            <p class="subTxt">응시부터 풀이까지 실전력을 최대로 끌어올리는 구성입니다.</p>
                            <div class="slide splide">
                                <div class="splide__track" id="slide-pc-2">
                                    <div class="splide__list">
                                        <div class="splide__slide">
                                            <div class="textArea">
                                                <b>1. 동일한 구성의 CDT 응시</b>
                                            </div>
                                            <figure class="lazy" style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point3-img1.png');"></figure>
                                        </div>
                                        <div class="splide__slide">
                                            <div class="textArea">
                                                <b>2. 결과 확인</b>
                                            </div>
                                            <figure class="lazy" style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point3-img2.png');"></figure>
                                        </div>
                                        <div class="splide__slide">
                                            <div class="textArea">
                                                <b>3. 풀이강의 듣기</b>
                                            </div>
                                            <figure class="lazy" style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point3-img4.png');"></figure>
                                        </div>
                                        <div class="splide__slide">
                                            <div class="textArea">
                                                <b>4. 첨삭받기</b>
                                            </div>
                                            <figure class="lazy" style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point3-img4.png')"></figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pointArea point4 style2" data-scroll="point">
                        <div class="max-width large">
                            <h2 class="txt-hero2"><span>학원 ∙ 인강 ∙ 해외지사를 갖춘 </span>유학센터까지 탄탄한 연결고리는 <br class="mo-br"><em>오직 edm입니다.</em></h2>
                            <p class="subTxt">edm을 통한 유학 성공 건수만 <br class="mo-br"><b>총 13,000건</b> 지금 이 순간에도 합격자 배출 중!</p>
                            <div class="slide">
                                <div class="animation">
                                    @for ($i = 0; $i < 3; $i++)
                                        <picture>
                                            <source srcset="{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point4-img_pc.png" media="(min-width: 1200px)">
                                            <source srcset="{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point4-img_tablet.png" media="(min-width: 553px)">
                                            <img src="{{ env('AWS_S3_IMG_URL') }}/ielts/main/new_point4-img_mo.png" alt="edm 합격자들의 학교 목록">
                                        </picture>
                                    @endfor
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="point-tabMenu pc-tab">
                        <div class="tabWrap">
                            <div class="tabArea">
                                <button type="button" class="active">강의 선택</button>
                                <button type="button">첨삭</button>
                                <button type="button">CDT</button>
                                <button type="button">합격자</button>
                                <div class="null"></div>
                            </div>
                        </div>
                    </div>
                </article>

                <article class="support">
                    <div class="max-width">
                        <h2 class="txt-hero2">
                            <span>이렇게까지 준다고요?</span>
                            <em>응시권부터 해외 무료배송</em>까지 <br class="mo-br">아낌없이 지원합니다.</h2>
                        <div class="slide">
                            <div class="pagination"></div>
                            <ul class="swiper-wrapper">
                                <li class="swiper-slide">
                                    <div class="textWrap">
                                        <span>최대 33만원 상당</span>
                                        <p>응시권 무료</p>
                                    </div>
                                </li>
                                <li class="swiper-slide">
                                    <div class="textWrap">
                                        <span>CDT 모의고사</span>
                                        <p>매월 1회 무료</p>
                                    </div>
                                </li>
                                <li class="swiper-slide">
                                    <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 large">
                        <h2 class="txt-hero2">
                            <span>수강생 진짜 후기</span>
                            <em>edm을 만나고</em> 이렇게 변했습니다.</h2>
                    </div>
                    <div class="slide splide">
                        <!-- play, pause button -->
                        <div class="max-width large">
                            <button class="splide__toggle" type="button">
                                <svg class="splide__toggle__play" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1038_26062)"><path d="M23.7678 18.7649L38.157 27.0725C38.9904 27.5536 38.9904 28.7564 38.157 29.2375L23.7678 37.5451C22.9345 38.0263 21.8928 37.4249 21.8928 36.4626L21.8928 19.8474C21.8928 18.8851 22.9345 18.2837 23.7678 18.7649Z" fill="#7D7B90" stroke="#7D7B90" stroke-width="1.5"/></g><defs><clipPath id="clip0_1038_26062"><rect width="24" height="24" fill="white" transform="translate(17 16)"/></clipPath></defs></svg>
                                <svg class="splide__toggle__pause" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="18" width="5" height="20" rx="2.5" fill="#7D7B90"/><rect x="31" y="18" width="5" height="20" rx="2.5" fill="#7D7B90"/></svg>
                            </button>
                        </div>

                        <div class="splide__track">
                            <ul class="splide__list">
                                @foreach ($reviews as $score)
                                    <li class="splide__slide">
                                        <div class="score"><b>{{ $score['score'] }}</b></div>
                                        <p class="title">수강기간 <span>{{ $score['month'] }}</span></p>
                                        <p class="sub-title">{{ $score['title'] }}</p>
                                        <p class="content">{{ $score['content'] }}</p>
                                        <div class="name"><figure class="lazy" style="background-image: url('');"></figure>{{ $score['name'] }} 수강생</div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="max-width large">
                        <div class="page-link type2 noto-sans">
                            <a href="{{ route('class.index', ['service' => 'ielts']) }}">후기 더보기
                                <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M6 12L10 8L6 4" stroke="#40404E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </a>
                        </div>
                    </div>
                </article>

                <article class="realReview">
                    <div class="max-width large">
                        <h2 class="txt-hero2">
                            <span>시작하기 전 꼭 참고하세요.</span>
                            IELTS 공부법 & <em>찐후기</em>
                        </h2>
                    </div>
                    <div class="slideWrap">
                        <div class="navigation">
                            <button type="button" class="prev navi"><span>이전</span><svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31 35L24 28L31 21" stroke="#40404E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
                            <button type="button" class="next navi"><span>다음</span><svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25 21L32 28L25 35" stroke="#40404E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
                        </div>
                        <div class="slide">
                            <div class="swiper-wrapper">
                                @foreach ($videos as $video)
                                <div class="swiper-slide">
                                    <div class="videoWrap" data-youtube="{{ $video['video_url'] }}">
                                        <figure style="background-image:url('https://img.youtube.com/vi/{{ $video['video_url'] }}/maxresdefault.jpg')"></figure>
                                    </div>
                                    <p class="subject ellipsis_1">{{ $video['title']  }}</p>
                                </div>
                                @endforeach
                            </div>
                            <div class="pagination"></div>
                        </div>
                    </div>
                </article>
            </div>
        </div>

        <!-- popup -->
        <div class="popupWrap">
            <div class="mainPopup">
                <div class="imgWrap"><div class="closeIcon closeBtn type2"></div></div>
                <div class="dim"></div>
            </div>
        </div>
    </div>
@endsection

@section('ielts-script')
    <!-- slide  -->
    <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>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-intersection@0.2.0/dist/js/splide-extension-intersection.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.min.js"></script>

    <!-- gsap  -->
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script>

    <!-- main -->
    {!! resource('js/ielts/main.js') !!}
@endsection