@extends('programs.show')

@push('head')
    <link rel="stylesheet" type="text/css" href="/css/programs/online-courses.css"/>
@endpush

@section('details')
    <article class="container program online-courses">
        <header class="area-full-pg-visual">
            <div class="area-pg-visual">
                <p class="pg-visual-top"><span>싸강으로 어학연수 가능?</span> <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-visual-top.png" alt="#Sure Why Not!"></p>
                <h1 class="pg-visual-title">
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/title-visual.png" alt="사이버 어학연수">
                </h1>
            </div>
            <div class="pg-visual-banner">
                <dl>
                    <dt>특별혜택</dt>
                    <dd>사이버 어학연수 특별가 <b>최대 50% 할인</b></dd>
                </dl>
            </div>
        </header>

        <section class="area-full-pg-content">
            <div class="area-pg-content">
                <figure class="pg-text-top"><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-area-top.png" alt="시간은 계속 가는데 언제까지 기다려…"></figure>
                <h2 class="pg-content-title">
                    <span>시간 낭비는 그만!</span>
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/title-area-01.png" alt="어학연수">
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/title-area-02.png" alt="지금 바로 시작하세요!">
                </h2>
                <figure class="pg-border-box">
                    <span>세계 각국의 학생과</span>
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-area-box.png" alt="현지의 Real Class를 집에서!">
                    <i><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/icon-area-box.png" alt="온라인 수업"></i>
                </figure>
                <p class="pg-text">한국 학생만 바글바글? <br class="mo-br"><b>세계 각국의 학생과 함께 생생한 라이브 수업!</b></p>

                <div class="pg-video-wrap">
                    <iframe src="https://www.youtube.com/embed/keQFiwGIv5k" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <figure class="pg-text">
                        <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-area-box2.png" alt="사이버 강의 실제 영상">
                    </figure>
                </div>
            </div>
        </section>

        <section class="area-full-pg-content2">
            <div class="area-pg-content2">
                <h2 class="pg-border-box pg-model01">
                    <span>싸강이니까</span>
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-area2-box01.png" alt="더욱 저렴하게!">
                    <i><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/icon-area2-box.png" alt="온라인 수업"></i>
                </h2>
                <p class="pg-text">
                    싸강인데 학비는 똑같이?? 싸강이니까<b> 최대 50% 할인</b> <br>
                    국내에서 들으니까 숙박비, 생활비 SAVE!
                </p>
                <div class="pg-box-content">
                    <ul class="pg-discount">
                        <li><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/icon-area2-box02-01.png" alt="최대 50% 학비"></li>
                        <li><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/icon-area2-box02-02.png" alt="숙박비"></li>
                        <li><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/icon-area2-box02-03.png" alt="생활비"></li>
                    </ul>
                    <i class="pg-thumb"><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-area2-circle.png" alt="이만큼 절약가능"></i>
                </div>

                <h2 class="pg-border-box pg-model02">
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-area2-box03.png" alt="현지 수업/대학교입학/인턴십">
                    <span> 연결 가능</span>
                    <i><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/icon-area2-box.png" alt="온라인 수업"></i>
                </h2>
                <div class="pg-text-wrap">
                    <p class="pg-text">드디어 기다리던 <b>출국 가능한 시기가 찾아왔다면?</b></p>
                    <ul class="pg-list dot">
                        <li>사이버 강의를 통한 레벨 인정받고 현지 수업으로 연결 가능</li>
                        <li>추가 비용 없이 할인된 금액 그대로 현지의 오프라인 강의 수강 가능</li>
                    </ul>
                </div>
                <div class="pg-box-content">
                    <dl class="pg-domestic">
                        <dt><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-area2-box04-01.png" alt="국내 사이버 강의"></dt>
                        <dd>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/icon-area2-box04.png" alt="교과서">
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-area2-box04.png" alt="영어과정">
                        </dd>
                    </dl>
                    <dl class="pg-oversea">
                        <dt><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-area2-box04-02.png" alt="해외 오프라인 강의"></dt>
                        <dd>
                            <ul>
                                <li><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/icon-area2-box04-01.png" alt="영어과정"></li>
                                <li><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/icon-area2-box04-02.png" alt="캐나다 인턴십"></li>
                                <li><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/icon-area2-box04-03.png" alt="대학 진학"></li>
                            </ul>
                        </dd>
                    </dl>
                </div>
            </div>
        </section>

        <section class="area-full-pg-content3">
            <div class="area-pg-content3">
                <h2 class="pg-border-box">
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-area3-box.png" alt="직장, 학업과">
                    <span>병행 가능</span>
                    <i><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/icon-area-box.png" alt="온라인 수업"></i>
                </h2>
                <p class="pg-text">
                    휴학 혹은 직장을 그만두고<br class="mo-br"> 어학연수를 가기가 부담스러우신가요?<br>
                    다양한 시간대의 수업으로 <br class="mo-br"><b>직장과 학업을 병행하며 어학연수를 진행 </b>하실 수 있습니다.
                </p>
                <h3 class="pg-content-subtitle">
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/subtitle-area3.png" alt="수업 스케쥴 예시">
                </h3>
                <div class="pg-table-wrap">
                    <table class="pg-table-left pc-table">
                        <caption class="pg-hidden">수업 스케쥴 예시 중 수업 시간을 시간대에 맞춰 알려주는 표</caption>
                        <thead>
                            <tr>
                                <th colspan="2">수업 시작 시간</th>
                            </tr>
                        </thead>
                            <tbody>
                            <tr>
                                <th>0:00</th>
                                <td rowspan="6">택 1</td>
                            </tr>
                            <tr>
                                <th>4:00</th>
                            </tr>
                            <tr>
                                <th>8:00</th>
                            </tr>
                            <tr>
                                <th>12:00</th>
                            </tr>
                            <tr>
                                <th>16:00</th>
                            </tr>
                            <tr>
                                <th>20:00</th>
                            </tr>
                        </tbody>
                    </table>
                    <table class="mo-table">
                        <caption class="pg-hidden">수업 스케쥴 예시 중 수업 시간을 시간대에 맞춰 알려주는 표</caption>
                        <thead>
                            <tr>
                                <th colspan="4">수업 시작 시간</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>0:00</th>
                                <td rowspan="3">택 1</td>
                                <th>12:00</th>
                                <td rowspan="3">택 1</td>
                            </tr>
                            <tr>
                                <th>4:00</th>
                                <th>16:00</th>
                            </tr>
                            <tr>
                                <th>8:00</th>
                                <th>20:00</th>
                            </tr>
                        </tbody>
                    </table>
                    <table class="pg-table-right">
                        <caption class="pg-hidden">수업 스케쥴 예시 중 시간과 수업과정을 시간대에 맞춰 알려주는 표</caption>
                        <thead>
                            <tr>
                                <th colspan="2">시간</th>
                                <th>수업과정</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>1교시</th>
                                <td>30~45분</td>
                                <td>수업 전 협력 및 그룹 스터디</td>
                            </tr>
                            <tr>
                                <th>2교시</th>
                                <td>45분</td>
                                <td>온라인 그룹 화상수업</td>
                            </tr>
                            <tr>
                                <th colspan="3">Break Time (5~10분)</th>
                            </tr>
                            <tr>
                                <th>3교시</th>
                                <td>45분</td>
                                <td>온라인 그룹 화상수업</td>
                            </tr>
                            <tr>
                                <th>4교시</th>
                                <td>30~45분</td>
                                <td>수업 전 협력 및 그룹 스터디</td>
                            </tr>
                            <tr>
                                <th>5교시</th>
                                <td>무제한,상시</td>
                                <td>온라인 셀프 스터디</td>
                            </tr>
                        </tbody>
                    </table>
                    <p class="pg-tip">수업 시작 시간 및 내용은 어학원에 따라 다를 수 있습니다. 자세한 사항은 담당 컨설턴트에게 문의해주세요.</p>
                </div>
            </div>
        </section>

        <section class="area-full-pg-content4">
            <div class="area-pg-content4">
                <h2 class="pg-border-box">
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-area4-box.png" alt="소규모의 그룹레슨,">
                    <span>1:1 레슨 가능</span>
                    <i><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/icon-area2-box.png" alt="온라인 수업"></i>
                </h2>
                <div class="pg-box-content">
                    <div class="pg-diagram">
                        <h3 class="pg-subtitle">학급당 학생수</h3>
                        <ul>
                            <li>
                                <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/img-area4-circle01.png" alt="평균 12~15명">
                                <span>오프라인 수업</span>
                            </li>
                            <li>
                                <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/img-area4-circle02.png" alt="평균 6명">
                                <span>사이버 강의</span>
                            </li>
                        </ul>
                    </div>
                    <p class="pg-text">
                        <span>
                            평균 5~6명의 소규모 그룹 수업으로 <br class="pc-br">오프라인 수업보다 <br class="pc-br">더욱 활발한 소통의 수업을 할 수 있습니다.<br>
                            빠른 실력 향상을 위한다면 <br class="pc-br">1:1 수업 <small class="mo-text">(추가 비용 발생)</small><br class="mo-br">추가 수강도 가능합니다. <small class="pc-text">(추가 비용 발생)</small>
                        </span>
                        <span class="pg-tip">수업의 정원은 어학원에 따라 다를 수 있습니다. <br>자세한 사항은 담당 컨설턴트에게 문의해주세요.</span>
                    </p>
                </div>
            </div>
        </section>

        <section class="area-full-pg-content5">
            <div class="area-pg-content5">
                <h2 class="pg-content-title">
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/title-area5-01.png" alt="사이버 어학연수">
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/title-area5-02.png" alt="추천 학교">
                    <i><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/img-area4-title.png" alt="추천"></i>
                </h2>
                <ul class="pg-box-content">
                    <li>
                        <figure><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area5-ec.png" alt="EC English language Center"></figure>
                        <div class="pg-school-brief">
                            <h3 class="pg-school-name">
                                <span>EC English Language Centres</span>
                                <b class="pg-bg-language">어학</b>
                                <b class="pg-bg-study">대학진학</b>
                            </h3>
                            <ul class="pg-list dot">
                                <li>어학, 캐나다 패스웨이 과정 온라인 진행</li>
                                <li>24시간 내내 6개의 다른 시간대 운영</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <figure><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area5-kaplan.png" alt="Kaplan International Languages"></figure>
                        <div class="pg-school-brief">
                            <h3 class="pg-school-name">
                                <span>Kaplan International Languages</span>
                                <b class="pg-bg-language">어학</b>
                                <b class="pg-bg-study">대학진학</b>
                            </h3>
                            <ul class="pg-list dot">
                                <li>미국, 캐나다 대학에 조건부 입학 가능</li>
                                <li>최대 50% 이상의 학비할인으로 최상의 카플란 학습 품질을 경험</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <figure><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area5-kings.png" alt="Kings English"></figure>
                        <div class="pg-school-brief">
                            <h3 class="pg-school-name">
                                <span>Kings English</span>
                                <b class="pg-bg-language">어학</b>
                            </h3>
                            <ul class="pg-list dot">
                                <li>일반영어, 토플, 아이엘츠 온라인 수업 진행</li>
                                <li>최대 4주 무료 수업 추가 제공</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <figure><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area5-ilsc.png" alt="ilsc Language Schools"></figure>
                        <div class="pg-school-brief">
                            <h3 class="pg-school-name">
                                <span>ILSC</span>
                                <b class="pg-bg-language">어학</b>
                                <b class="pg-bg-internship">캐나다 인턴십</b>
                                <b class="pg-bg-study">대학진학</b>
                            </h3>
                            <ul class="pg-list dot">
                                <li>미국, 캐나다, 호주 대학에 조건부 입학 가능</li>
                                <li>캐나다 유급/무급 인턴쉽 제공</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <figure><img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area5-ilac.png" alt="ilac"></figure>
                        <div class="pg-school-brief">
                            <h3 class="pg-school-name">
                                <span>ILAC</span>
                                <b class="pg-bg-language">어학</b>
                                <b class="pg-bg-internship">캐나다 인턴십</b>
                                <b class="pg-bg-study">대학진학</b>
                            </h3>
                            <ul class="pg-list dot">
                                <li>캐나다 대학에 조건부 입학 가능</li>
                                <li>캐나다 유급/무급 인턴쉽 제공</li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </section>

        <section class="area-full-pg-content6">
            <div class="area-pg-content6">
                <h2 class="pg-content-title">
                    <span>사이버 어학연수로 조건부 입학이 가능한</span>
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/title-area6.png" alt="주요 대학 & 컬리지">
                </h2>
                <article class="pg-school-us">
                    <h3 class="pg-country">
                        <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/subtitle-area6-usa.png" alt="USA">
                    </h3>
                    <ul class="pg-schools">
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-usa01.png" alt="Washington State University">
                            <p>Washington State University</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-usa02.png" alt="full sail university">
                            <p>full sail university</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-usa03.png" alt="Illinois institute of technology">
                            <p>Illinois institute of technology</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-usa04.png" alt="berkeley college">
                            <p>berkeley college</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-usa05.png" alt="green river college">
                            <p>green river college</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-usa06.png" alt="irvine valley college">
                            <p>irvine valley college</p>
                        </li>
                    </ul>
                </article>
                <article class="pg-school-ca">
                    <h3 class="pg-country">
                        <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/subtitle-area6-canada.png" alt="Canada">
                    </h3>
                    <ul class="pg-schools">
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-canada01.png" alt="Capilano University">
                            <p>Capilano University</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-canada02.png" alt="george brown college">
                            <p>george brown college</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-canada03.png" alt="seneca college">
                            <p>seneca college</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-canada04.png" alt="centennial college">
                            <p>centennial college</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-canada05.png" alt="vencouver community college">
                            <p>vencouver community college</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-canada06.png" alt="vancouver film school">
                            <p>vancouver film school</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-canada07.png" alt="Conestoga College">
                            <p>Conestoga College</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-canada08.png" alt="Sheridan College">
                            <p>Sheridan College</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-canada09.png" alt="Douglas College">
                            <p>Douglas College</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-canada10.png" alt="Fanshawe College">
                            <p>Fanshawe College</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-canada11.png" alt="Humber College">
                            <p>Humber College</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-canada12.png" alt="Columbia College">
                            <p>Columbia College</p>
                        </li>
                    </ul>
                </article>
                <article class="pg-school-au">
                    <h3 class="pg-country">
                        <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/subtitle-area6-australia.png" alt="Australia">
                    </h3>
                    <ul class="pg-schools">
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-au01.png" alt="aviation australia">
                            <p>aviation australia</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-au02.png" alt="Griffith College">
                            <p>Griffith College</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-au03.png" alt="William Angliss Institute">
                            <p>William Angliss Institute</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-au04.png" alt="TAFE International">
                            <p>TAFE International</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-au05.png" alt="Blue Mountains International School">
                            <p>Blue Mountains International School</p>
                        </li>
                        <li>
                            <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/logo-area6-au06.png" alt="Le cordon blue">
                            <p>Le cordon blue</p>
                        </li>
                    </ul>
                </article>
                <p class="pg-tip">표기된 학교 외에도 조건부 입학이 가능하니 자세한 사항은 담당 컨설턴트에게 문의해주세요. </p>
            </div>
        </section>

        <section class="area-full-pg-content7">
            <div class="area-pg-content7">
                <h2 class="pg-content-title">
                    <span>가성비 높고 기회는 많은 사이버 어학연수,</span>
                    <img src="{{ env('UHAKIMG_S3') }}/uhak/r/v1/programs/online-courses/text-area7-bottom.png" alt="edm유학센터에서 확인하세요!">
                </h2>
            </div>
        </section>
    </article>
@endsection