@php $img = $Template->image('백그라운드'); @endphp
    <section class="best-college" style="background: url('{{ $img->src }}') no-repeat center center; background-size: cover;">
        <div class="max-width">
            
            @php $cont = $Template->text('section title'.$cont->class); @endphp
            <h2>{{ $cont->str }}</h2>
            <div class="best-college-con">
                @php $bestCollegeCheck = 1; @endphp
                @php $list = $Template->list('추천 학교'); @endphp
                <ul class="list">
                    @foreach($list as $cont)
                        <li class="best-college-con-box">
                            <div class="topBox">
                                <span></span>
                                @if ($cont->src)
                                    <div class="imgBox">
                                        <img src="{{ $cont->src }}" alt="{{ $cont->alt }}">
                                    </div>
                                @endif
                                <div class="titleBox">
                                    <h3>{{ $cont->alt }}</h3>
                                    <p>{{ $cont->str }}</p>
                                </div>
                            </div>
                            <div class="bottomBox">
                                
                                @php $listCon = $Template->list($cont->alt.' 과정 특징 등등'); @endphp
                                
                                
                                @foreach($listCon as $cont)
                                <div>
                                    <h3>{{ $cont->str }}</h3>
                                    <ul>
                                        @php $listConText = $Template->list($cont->str.'설명'.$bestCollegeCheck++); @endphp
                                        @foreach($listConText as $cont)
                                        <li>{{ $cont->str }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endforeach
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </section>
    
    
    <script>
        let bestCollegeTopBoxBtn = document.querySelectorAll('.best-college-con .topBox span');
        let bestCollegeTopBox = document.querySelectorAll('.best-college-con-box');
    
        for (let i = 0; i < bestCollegeTopBoxBtn.length; i++) {
            bestCollegeTopBoxBtn[i].addEventListener('click', function() {
                
                
                if(bestCollegeTopBox[i].classList.contains('active')){
                    for (const bestCollegeTopBoxAll of bestCollegeTopBox) {
                    bestCollegeTopBoxAll.classList.remove('active')
                    }
                }else{
                    for (const bestCollegeTopBoxAll of bestCollegeTopBox) {
                    bestCollegeTopBoxAll.classList.remove('active')
                    }
                    bestCollegeTopBox[i].classList.add('active')
                }
            })
            
        }
    </script>