        {% include 'layouts/page/' ~ session ~ '/banner.twig' %}
    <section id="/recommend-section">
        <div class="container vision-text-content">
            <div class="row">
                <div class="col-11 mx-auto">
                    {% include 'layouts/breadcrumb.twig' %}
                    {# <div class="row vision-bottom-padding">
                        <div class="col-4 recommend-block"><a href="/recommend/details/趙哲妤小姐"><img class="img-fluid" src="{{ path.image }}recommend/recommend-01.png"></a>
                            <h5 class="vision-text-color recommend-block-padding-top"><strong><a href="/recommend/details/趙哲妤小姐">趙哲妤小姐</a></strong></h5>
                            <h6 class="vision-text-color-blue recommend-block-padding"><strong>英語實戰專家</strong><br></h6>
                            <p class="recommend-block-padding-bottom">「系統化學習模式，定時提供各卷評估和家課，讓同學了解其水平，亦讓老師掌握同學的學習進度。」</p>
                        </div>
                        <div class="col-4 recommend-block"><a href="/recommend/details/Amy%20Smith"><img class="img-fluid" src="{{ path.image }}recommend/recommend-02.png"></a>
                            <h5 class="vision-text-color recommend-block-padding-top"><strong><a href="/recommend/details/Amy%20Smith">Amy Smith</a></strong><br></h5>
                            <h6 class="vision-text-color-blue recommend-block-padding"><strong>英語實戰專家</strong><br></h6>
                            <p class="recommend-block-padding-bottom">Plan specific educational goals and objectives for each class that relate to your overall goals and objectives. Develop your goals and objectives around a variety of activities: demonstrations, experiential activities.</p>
                        </div>
                        <div class="col-4 recommend-block"><a href="/recommend/details/Dr.%20Jean%20Rash"><img class="img-fluid" src="{{ path.image }}recommend/recommend-03.png"></a>
                            <h5 class="vision-text-color recommend-block-padding-top"><strong><a href="/recommend/details/Dr.%20Jean%20Rash">Dr. Jean Rash</a></strong><br></h5>
                            <h6 class="vision-text-color-blue recommend-block-padding"><strong>英語實戰專家</strong><br></h6>
                            <p class="recommend-block-padding-bottom">Plan specific educational goals and objectives for each class that relate to your overall goals and objectives. Develop your goals and objectives around a variety of activities: demonstrations, experiential activities.<br></p>
                        </div>
                    </div>
                    <div class="row vision-bottom-padding">
                        <div class="col-4 recommend-block"><a href="/recommend/details/Dr.%20Jean%20Rash"><img class="img-fluid" src="{{ path.image }}recommend/recommend-04.png"></a>
                            <h5 class="vision-text-color recommend-block-padding-top"><strong><a href="/recommend/details/Dr.%20Jean%20Rash">Dr. Jean Rash</a></strong><br></h5>
                            <h6 class="vision-text-color-blue recommend-block-padding"><strong>英語實戰專家</strong><br></h6>
                            <p class="recommend-block-padding-bottom">Plan specific educational goals and objectives for each class that relate to your overall goals and objectives. Develop your goals and objectives around a variety of activities: demonstrations, experiential activities.<br></p>
                        </div>
                        <div class="col-4 recommend-block"><a href="/recommend/details/趙哲妤小姐"><img class="img-fluid" src="{{ path.image }}recommend/recommend-05.png"></a>
                            <h5 class="vision-text-color recommend-block-padding-top"><strong><a href="/recommend/details/趙哲妤小姐">趙哲妤小姐</a></strong></h5>
                            <h6 class="vision-text-color-blue recommend-block-padding"><strong>英語實戰專家</strong><br></h6>
                            <p class="recommend-block-padding-bottom">「系統化學習模式，定時提供各卷評估和家課，讓同學了解其水平，亦讓老師掌握同學的學習進度。」</p>
                        </div>
                        <div class="col-4 recommend-block"><a href="/recommend/details/Amy%20Smith"><img class="img-fluid" src="{{ path.image }}recommend/recommend-06.png"></a>
                            <h5 class="vision-text-color recommend-block-padding-top"><strong><a href="/recommend/details/Amy%20Smith">Amy Smith</a></strong><br></h5>
                            <h6 class="vision-text-color-blue recommend-block-padding"><strong>英語實戰專家</strong><br></h6>
                            <p class="recommend-block-padding-bottom">Plan specific educational goals and objectives for each class that relate to your overall goals and objectives. Develop your goals and objectives around a variety of activities: demonstrations, experiential activities.<br></p>
                        </div>
                    </div> #}
                <div class="row vision-bottom-padding">
                {# {% set countbanner = 0 %} #}
                {% for recommenddata in recommendlist %}
                 {# {% if not countbanner == 0 %}
                <div class="carousel-item">
                {% endif %}
                {% if countbanner == 0 %}
                <div class="carousel-item active">
                    {% set countbanner = 1 %}
                {% endif %}
                
                <img class="w-100 d-block" src="../upload/album_images/{{ bannerdata.ep_pic }}" alt="Slide Image">
                </div>  #}
                        <div class="col-12 col-md-4 recommend-block mb-2"><a href="/recommend/details/{{recommenddata.cp_subject}}"><img class="img-fluid grow5" src="../upload/recommend_images/{{recommenddata.ep_pic}}"></a>
                            <h5 class="vision-text-color recommend-block-padding-top"><strong><a href="/recommend/details/{{recommenddata.cp_subject}}" class="changeText">{{recommenddata.cp_subject}}</a></strong><br></h5>
                            <h6 class="vision-text-color-blue recommend-block-padding"><strong>{{recommenddata.cp_brief}}</strong><br></h6>
                            <p class="recommend-block-padding-bottom" style="font-size:16px;
    line-height:30px;
    /*height: 120px;*/
    height: 180px;
    margin-bottom:15px;
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp:6;    
    -webkit-box-orient: vertical;">{{recommenddata.cp_content | raw }}<br></p>
                        </div>   
                {% endfor %}
                </div>
                </div>
            </div>
        </div>
    </section>
