        {% include 'layouts/page/' ~ session ~ '/banner.twig' %}
    <style>
      
    </style>
    <section id="section-1">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-lg-8 align-self-start order-lg-2 vision-left-border">
                    <div class="p-0 p-lg-5">
                        <h2 class="text-center vision-text-title mt-2 mt-lg-0">最新消息</h2><img class="d-flex mx-auto justify-content-xl-center" src="{{ path.image }}line.png">
                        <div class="table-responsive vision-text-content vision-top-margin">
                            <table class="table">
                                <thead>
                                    <tr></tr>
                                </thead>
                                <tbody>
                                    
                                    {% set limit = 3  %}
                                     {% set count = 1  %}
                                    {% for topTenWhatsnewdata in topTenWhatsnew %}

                                        {% if count <= limit %}

                                             <tr>
                                                <td class="vision-text-color-grey vision-no-top-border">{{topTenWhatsnewdata.ep_date}}</td>
                                                <td class="vision-no-top-border">
                                                    <a href="/whatsnew/details/{{topTenWhatsnewdata.cp_subject}}" class="vision-text-title-1 changeText">{{topTenWhatsnewdata.cp_subject}}</a>
                                                    <p>{{topTenWhatsnewdata.cp_brief}}</p>
                                                </td>
                                            </tr>
                                        {% endif %}      
                                        {% set count = count + 1  %}
                                    {% endfor %}
                                    {# <tr>
                                        <td class="vision-text-color-grey vision-no-top-border">02.06.2019</td>
                                        <td class="vision-no-top-border">
                                            <a href="/whatsnew/details/加拿大10天學術交流團" class="vision-text-title-1">加拿大10天學術交流團</a>
                                            <p>維思國際教育帶领學生於加拿大市內觀光，遊覽市內的社區設施，並認識當地的歷史和文化。</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="vision-text-color-grey vision-no-top-border">02.05.2019</td>
                                        <td class="vision-no-top-border">
                                            <a href="/whatsnew/details/家庭教育講座報導" class="vision-text-title-1">家庭教育講座報導</a>
                                            <p>維思國際教育集團於11月10日在廣東省中山市菊城小學三樓多功能會議廳舉辦家庭教育講座——＂孩子的潛能，你發現了嗎？＂...</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="vision-text-color-grey vision-no-top-border">10.04.2019</td>
                                        <td class="vision-no-top-border">
                                            <a href="/whatsnew/details/家庭教育講座報導" class="vision-text-title-1">家庭教育講座報導</a>
                                            <p>維思國際教育集團於11月10日在廣東省中山市菊城小學三樓多功能會議廳舉辦家庭教育講座——＂孩子的潛能，你發現了嗎？＂...</p>
                                        </td>
                                    </tr> #}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 align-self-start order-lg-1">
                    <div class="p-5">
                        <h2 class="text-center vision-text-title">關於我們</h2><img class="d-flex mx-auto" src="{{ path.image }}line.png">
                        {# <p class="vision-text-content vision-top-margin">教育就是給孩子的一項最好的投資，對將來孩子的發展有著深遠的影響。所以，越來越多家長希望自己的孩子能有更好的升學出路，能夠到外國去接受更好的教育。畢竟本地的教學制度，未必最適合自己的孩子。<br><br>有關海外升學諮詢、升學顧問、升學輔導等一系列的升學服務，孩子和家長都必須要全面了解清楚才下決定，因為這會影響孩子以後的升學道路和發展。
                       
                        </p> #}
                        <p class="vision-text-content vision-top-margin"> 
                        {# {% for aboutusdata in aboutus %} #}
                            {{ aboutus.cp_aboutus | raw}}
                         {# {% endfor %} #}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="section-2" class="vision-padding">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2 class="text-center vision-text-title">課程介紹</h2><img class="d-flex mx-auto" src="{{ path.image }}line.png">
                    <div class="container vision-top-margin">
                        <div class="row justify-content-center">
                            {% for topCoursedata in topCourse %}
                                <div class="col-12 col-md-3 mb-4 mb-md-0 brighten" style=""><a href="/course/details/{{topCoursedata.cp_subject}}">
                                {# <img class="d-flex mx-auto" src="../upload/course_images/{{topCoursedata.ep_pic}}"> #}
                                <img class="mx-auto d-block " style="width:100%;height:auto;max-width:250px" src="../upload/course_images/{{topCoursedata.ep_pic}}">
                                </a></div>
                            {% endfor %}    
                            {# <div class="col-md-3"><a href="/course/details/國際英語考試"><img class="d-flex mx-auto" src="{{ path.image ~ session ~ '/' }}english-examine.png"></a></div>
                            <div class="col-md-3"><a href="/course/details/世界派英語"><img class="d-flex mx-auto" src="{{ path.image ~ session ~ '/' }}english.png"></a></div>
                            <div class="col-md-3"><a href="/course/details/中國文學"><img class="d-flex mx-auto" src="{{ path.image ~ session ~ '/' }}chinese.png"></a></div>
                            <div class="col-md-3"><a href="/course/details/藝術"><img class="d-flex mx-auto" src="{{ path.image ~ session ~ '/' }}art.png"></a></div> #}
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </section>
    <section id="section-3">
        <div class="container">
            <div class="row d-flex ">
                <div class="col-md-6 vision-travel-bg mt-md-4 mb-md-4 mt-4 mb-0">
                    <h2 class="text-center vision-section-3-title">遊學升學</a></h2>
                    <img class="d-flex mx-auto" src="{{ path.image }}line.png">
                    {# added content #}
                    <div class="row justify-content-center">
                        
                        <h4 class="text-center vision-text-color vision-travel-text-1-offset">遊學</h4>
                    </div>
                    <div class="row mb-2 justify-content-center">
                        <a href="/overseas/details/遊學團" style="text-decoration:none">
                                <div class="vision-travel-block changeBoxText" style="display:block;background-color:#fff; ">
                                    <h4 class="text-center ">遊學團</h4>
                                </div>
                            </a>
                    </div>
                     <h4 class="text-center vision-text-color">升學</h4>
                    <div class="row justify-content-center">
                           <a href="/overseas/details/香港升學" style="text-decoration:none">
                            <div class="vision-travel-block changeBoxText" style="display:block;background-color:#fff; ">
                                <h4>香港</h4>
                            </div>
                        </a>
                         <a href="/overseas/details/英國升學"  style="text-decoration:none">
                           <div class="vision-travel-block changeBoxText" style="display:block;background-color:#fff; ">
                                <h4>英國</h4>
                            </div>
                        </a>
                         <a href="/overseas/details/新加坡升學"  style="text-decoration:none">
                           <div class="vision-travel-block changeBoxText" style="display:block;background-color:#fff; ">
                                <h4>新加坡</h4>
                            </div>
                        </a>
                        <a href="/overseas/details/馬來西亞升學"  style="text-decoration:none">
                           <div class="vision-travel-block changeBoxText" style="display:block;background-color:#fff; ">
                                <h4>馬來西亞</h4>
                            </div>
                        </a>
                       
                      
                    </div>
                    {# end  added content #}
                    {# <div class="row">
                        <div class="col-md-12"><img class="d-flex mx-auto" src="{{ path.image }}line.png">
                            <h4 class="text-center vision-text-color vision-travel-text-1-offset">遊學</h4>
                            <a href="/overseas/details/遊學團">
                                <div class="" style="background-color:#fff;"> #}
                                    {# <h4 class="text-center vision-travel-text-2-offset" style="#7798ce">遊學團</h4> #}
                                    {# <h4 class="text-center vision-travel-text-2-offset" style="color:#7798ce;">遊學團</h4>
                                </div>
                            </a>    
                            <h4 class="text-center vision-text-color vision-travel-text-3-offset">升學</h4>
                        </div>
                    </div> #}
                    {# <div class="row d-xl-flex justify-content-xl-center vision-top-padding">
                        <a href="/overseas/details/香港升學">
                            <div class="col-auto vision-travel-block vision-travel-block-adjust">
                                <h4 style="color:#7798ce;"> 香港</h4>
                            </div>
                        </a>
                        <a href="/overseas/details/加拿大升學">
                            <div class="col-auto vision-travel-block">
                                <h4 style="color:#7798ce;">加拿大</h4>
                            </div>
                        </a>
                        <a href="/overseas/details/美國升學">
                            <div class="col-auto vision-travel-block">
                                <h4 style="color:#7798ce;">美國</h4>
                            </div>
                        </a>
                        <a href="/overseas/details/英國升學">
                            <div class="col-auto align-self-center vision-travel-block">
                                <h4 style="color:#7798ce;">英國</h4>
                            </div>
                        </a>
                        <a href="/overseas/details/澳洲升學">
                            <div class="col-auto vision-travel-block">
                                <h4 style="color:#7798ce;">澳洲</h4>
                            </div>
                        </a>
                    </div> #}
                </div>
                <div class="col-md-6  mt-md-4 mb-md-4 mt-4 mb-4">
                    <h2 class="text-center vision-section-3-title">星級推薦</h2>
                    <div class="row">
                    {% for topRecommenddata in topRecommend %}
                        <div class="col-12 vision-white-background tutor-padding"><img class="d-flex mx-auto" src="{{ path.image }}line.png">
                            <div class="row vision-top-margin justify-content-center">
                                <div class="col-12 col-lg-6  mx-auto brighten" style=" "><a href="/recommend/details/{{topRecommenddata.cp_subject}}" ><img class="mx-auto d-block "   style="max-height:255px;width:auto;height:100%;" src="../upload/recommend_images/{{topRecommenddata.ep_pic}}"></a></div>
                                <div class="col-12 col-lg-6">
                                    <h4 class="vision-text-color-blue"><a class="changeText" href="/recommend/details/{{topRecommenddata.cp_subject}}">{{topRecommenddata.cp_subject}}</a></h4>
                                    <p class="d-xl-flex vision-text-color-blue">{{topRecommenddata.cp_brief}}</p>
                                    {{topRecommenddata.cp_content}}
                                </div>
                            </div>
                        </div> 
                    {% endfor %}
                        {# <div class="col-12 vision-white-background tutor-padding"><img class="d-flex mx-auto" src="{{ path.image }}line.png">
                            <div class="row vision-top-margin justify-content-center">
                            <div class="col-12 col-md-6  mx-auto" style=" "><a href="/recommend/details/{{topRecommenddata.cp_subject}}"><img class="d-flex mx-auto" src="{{ path.image ~ session ~ '/' }}photo.png"></a></div>
                                <div class="col-md-6">
                                    <h4 class="vision-text-color-blue"><a href="/recommend/details/趙哲妤小姐">趙哲妤小姐</a></h4>
                                    <p class="d-xl-flex vision-text-color-blue">英語實戰專家</p>
                                    <p>系統化學習模式，定時提供各卷評估和家課，讓同學了解其水平，亦讓老師掌握同學的學習進度。</p>
                                </div>
                            </div>
                        </div> #}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="section-4" class="">
        <div class="container ">
            <div class="row">
                <div class="col-12">
                    <h2 class="text-center vision-text-title">相片圖集</h2><img class="d-flex mx-auto" src="{{ path.image }}line.png">
                    <div class="container vision-top-margin">
                        <div class="row justify-content-left justify-content-md-center">
                        {% set count = 1 %}
                        {% set limit = 6 %}
                        {% for topGallerydata in topGallery %}
                            {% if count <= limit  %}
                                <div class="col-6 col-md-auto vision-album-padding mb-3 brighten"><a href="/gallery/details/{{topGallerydata.cp_cat_name}}"><img class="mx-auto d-block grow5" style="width:100%;height:auto;max-width:155px;" src="../upload/newalbum_images/{{topGallerydata.ep_pic}}" alt="{{topGallerydata.cp_cat_name}}" title="{{topGallerydata.cp_cat_name}}"></a></div>
                            {% endif %}
                            {% set count = count + 1 %}
                        {% endfor %}
                        {# <div class="col-auto vision-album-padding"><img class="d-flex mx-auto" src="{{ path.image ~ session ~ '/' }}album-01.png"></div>
                            <div class="col-auto vision-album-padding"><img class="d-flex mx-auto" src="{{ path.image ~ session ~ '/' }}album-02.png"></div>
                            <div class="col-auto vision-album-padding"><img class="d-flex mx-auto" src="{{ path.image ~ session ~ '/' }}album-03.png"></div>
                            <div class="col-auto vision-album-padding"><img class="d-flex mx-auto" src="{{ path.image ~ session ~ '/' }}album-04.png"></div>
                            <div class="col-auto vision-album-padding"><img class="d-flex mx-auto" src="{{ path.image ~ session ~ '/' }}album-05.png"></div>
                            <div class="col-auto vision-album-padding"><img class="d-flex mx-auto" src="{{ path.image ~ session ~ '/' }}album-06.png"></div>
                            <div class="col-auto vision-album-padding"><img class="d-flex mx-auto" src="{{ path.image ~ session ~ '/' }}album-07.png"></div>  #}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="section-5" class="">
        <div class="container ">
            <div class="row">
                <div class="col-12">
                    <h2 class="text-center vision-text-title">教育同盟</h2><img class="d-flex mx-auto" src="{{ path.image }}line.png">
                    <div class="container vision-top-margin">
                        <div class="row justify-content-left justify-content-md-center">
                            {% set count = 1 %}
                            {% set limit = 5 %}
                            {% for topPartnerdata in topPartner %}
                                {% if count <= limit  %}
                                    <div class="col-6 col-md-auto vision-album-padding mb-3 mx-md-3 mx-md-0 brighten"><a href="/partner"><img class="mx-auto d-block grow5" style="width:100%;height:auto;max-width:155px;" src="../upload/partner_images/{{topPartnerdata.ep_pic}}" alt="{{topPartnerdata.cp_subject}}" title="{{topPartnerdata.cp_subject}}"></a></div>
                                {% endif %}
                                {% set count = count + 1 %}
                            {% endfor %}
                            {# <div class="col-auto m-auto"><img class="d-flex mx-auto" src="{{ path.image}}partners/cambridge_logo.png"></div>
                            <div class="col-auto m-auto"><img class="d-flex mx-auto" src="{{ path.image}}partners/oxford_logo.png"></div>
                            <div class="col-auto m-auto"><img class="d-flex mx-auto" src="{{ path.image}}partners/TOEFL_logo.png"></div>
                            <div class="col-auto m-auto"><img class="d-flex mx-auto" src="{{ path.image}}partners/SWEC_logo.png"></div>
                            <div class="col-auto m-auto"><img class="d-flex mx-auto" src="{{ path.image}}partners/AEMS_logo.png"></div> #}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{#
        <div class="container" id="aboutus_session" style="background-image: url({{ path.image }}aboutus_bg.jpg);">
            <div class="row">
                <div class="col-4 pull-right">
                    <div class="container">
                        <div class="row">
                            aaa
                        </div>
                    </div>
                </div>
                <div class="col-8">bbb</div>
            </div>
        </div>
#}