@extends($service.'.layout')

@section('gnb', view('gnb', ['service'=>$service]))

@section('subgnb', view('ielts.gnb'))

@section($service.'-css')
    <!-- aos -->
    <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" />
	<!-- promotion -->
	{!! resource('css/common/promotion.css') !!}
@endsection

@section($service . "-content")
	<div id="wrap"
		@class(["promotionPage", $page])>
		<div class="contents">
			<p class="pageTitle">상품</p>

			<!-- 배너 -->
			<div class="mainBanner max-width">
				<!--
					관리자 이미지 등록
					:: mobile, pc 등록
					:: 이미지 alt 설명글 작성도 필요함
				-->
				<picture class="banner">
					<source srcset="{{ env('AWS_S3_IMG_URL') }}/common/promotion/payback_banner_pc.jpg" media="(min-width: 1200px)"> <!--width : 792px 고정크기 -->
					<img src="{{ env('AWS_S3_IMG_URL') }}/common/promotion/payback_banner.jpg" alt="공부한 만큼 돌려받는 페이백! 수강료 200% 환급반"> <!--width : 712px 크기여야 깨지지 않음 (최대) -->
				</picture>
			</div>

			<!-- 수강생 혜택 -->
			<article class="studentBenefit">
				<div class="max-width">
					<p class="title">수강생 혜택</p>
					<ul class="dotList">
						<li>수업 <em>녹화영상 다시보기</em>로 복습 가능 (현장 강의는 촬영일 포함 7일간 제공됩니다. <br class="tab_pc-br">예기치 못한 기계 오류 발생 시, 시청에 일부 제한이 있을 수 있습니다.)</li>
						<li><em>시험센터 모의고사 월 2회</em> 무료 제공및 풀이 강의, Writing 코멘트 제공</li>
						<li>145강 이상 시험대비 특강 제공 (온/오프라인)</li>
					</ul>
				</div>
			</article>

			<div class="page-nav">
				<div class="max-width flex">
					<button type="button" class="active" data-area="">상세정보</button>
					<button type="button" class="cautionBtn" data-area="other">유의사항</button>
				</div>
			</div>


            <div class="promotionContents">
                <div class="changePage detailPage">
                    <!--
                        html로 들어가는 영역
                    -->
                    @yield("promotion-contents")
                </div>
                <div class="changePage cautionPage">
                    <article>
                        <div class="max-width">
                            유의사항 내용
                            <!-- 상품마다 변경되며, 관리자에서 불러올 예정 -->
                        </div>
                    </article>
                </div>
                <div class="changePage coursePage">
                    강좌목록
                    <!-- 관리자에 등록된 강좌목록이 노출됩니다.  -->
                </div>
            </div>

			<!-- 교재안내 -->
			<article class="textbookGuide" data-more="true">
				<div class="max-width">
					<div class="titleWrap type2">
						<p class="title">교재안내</p>
					</div>
					<div class="slide customSlide">
						<div class="swiper-wrapper">

							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
								</div>
								<div class="textWrap"><p>아이엘츠 입문 Build-up 2</p></div>
							</div>
							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
								</div>
								<div class="textWrap"><p>아이엘츠 입문 Build-up 3</p></div>
							</div>
							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
								</div>
								<div class="textWrap"><p>아이엘츠 입문 Build-up 4</p></div>
							</div>
							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
								</div>
								<div class="textWrap"><p>아이엘츠 입문 Build-up 5</p></div>
							</div>
							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
								</div>
								<div class="textWrap"><p>아이엘츠 입문 Build-up 6</p></div>
							</div>
							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
								</div>
								<div class="textWrap"><p>아이엘츠 입문 Build-up 7</p></div>
							</div>
							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
								</div>
								<div class="textWrap"><p>아이엘츠 입문 Build-up 8</p></div>
							</div>
							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_textbookGuide.png');"></figure>
								</div>
								<div class="textWrap"><p>아이엘츠 입문 Build-up 9</p></div>
							</div>
						</div>
					</div>
				</div>

			</article>

			<!-- 교재안내 더보기 -->
			<div class="moreBtnWrap tab_pc-btn" data-page="textbookGuide">
				<button type="button" class="moreBtn">더보기</button>
			</div>

			<!-- 강사진 -->
			<article class="teacherWrap">
				<div class="max-width">
					<div class="titleWrap type2">
						<p class="title">강사진</p>
					</div>
					<div class="slide customSlide">
						<div class="info">
							<div class="max-width">
								<div class="flex">
									<p class="w">Writing</p>
									<p class="s">Speaking</p>
								</div>
								<div class="teacherName">
									<p></p>
								</div>
							</div>
						</div>
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_teacher.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
								</div>
								<div class="textWrap">
									<span class="r"></span>
									<span class="l"></span>
									<p>헤더1</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_teacher.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
								</div>
								<div class="textWrap">
									<span class="s"></span>
									<p>다니엘2</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_teacher.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
								</div>
								<div class="textWrap">
									<span class="w"></span>
									<p>엘리자베스</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_teacher.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
								</div>
								<div class="textWrap">
									<span class="r"></span>
									<p>헤더</p>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="imgWrap">
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_teacher.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
								</div>
								<div class="textWrap">
									<span class="r"></span>
									<p>헤더</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</article>

			<!-- 추가구성 -->
			<article class="addOption">
				<div class="max-width">
					<div class="titleWrap">
						<p class="title">추가구성</p>
					</div>
					<ul class="list flex">
						<li>
							<div class="icon"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/promotion/promotion_addOption_01.svg');"></figure></div>
							<div class="textWrap">
								<p>첨삭</p>
								<span>Basic 첨삭 5회</span>
							</div>
						</li>
						<li>
							<div class="icon"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/promotion/promotion_addOption_01.svg');"></figure></div>
							<div class="textWrap">
								<p>첨삭</p>
								<span>Basic 첨삭 5회</span>
							</div>
						</li>
						<li>
							<div class="icon"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/promotion/promotion_addOption_02.svg');"></figure></div>
							<div class="textWrap">
								<p>CDT</p>
								<span>CDT모의고사 <br class="mo-br">풀패키지 2회 제공</span>
							</div>
						</li>
						<li>
							<div class="icon"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/ielts/promotion/promotion_addOption_03.svg');"></figure></div>
							<div class="textWrap">
								<p>기타</p>
								<span>영국문화원 IELTS <br class="mo-br">시험응시권 포함</span>
							</div>
						</li>
					</ul>
				</div>
			</article>

			<!-- 성적표 인증 합격후기 -->
			<article class="acceptance" data-more="true">
				<div class="max-width">
					<div class="titleWrap type2">
						<p class="title">성적표 인증 합격후기</p>
					</div>
					<div class="slide customSlide">
						<div class="swiper-wrapper">
							<a href="#none" class="swiper-slide">
								<div class="imgWrap">
									<div class="score">7.0</div> <!-- 점수가 들어갑니다. -->
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_acceptance.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
								</div>
								<div class="textWrap">
									<p>1개월 7.0달성</p>
									<span>윤*진 수강생</span>
								</div>
							</a>
							<a href="#none" class="swiper-slide">
								<div class="imgWrap">
									<div class="score">7.0</div> <!-- 점수가 들어갑니다. -->
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_acceptance.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
								</div>
								<div class="textWrap">
									<p>1개월 7.0달성</p>
									<span>윤*진 수강생2</span>
								</div>
							</a>
							<a href="#none" class="swiper-slide">
								<div class="imgWrap">
									<div class="score">7.0</div> <!-- 점수가 들어갑니다. -->
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_acceptance.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
								</div>
								<div class="textWrap">
									<p>1개월 7.0달성</p>
									<span>윤*진 수강생3</span>
								</div>
							</a>
							<a href="#none" class="swiper-slide">
								<div class="imgWrap">
									<div class="score">7.0</div> <!-- 점수가 들어갑니다. -->
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_acceptance.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
								</div>
								<div class="textWrap">
									<p>1개월 7.0달성</p>
									<span>윤*진 수강생4</span>
								</div>
							</a>
							<a href="#none" class="swiper-slide">
								<div class="imgWrap">
									<div class="score">7.0</div> <!-- 점수가 들어갑니다. -->
									<figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_acceptance.png');"></figure> <!-- figure 이미지 링크로 이미지가 들어갑니다. -->
								</div>
								<div class="textWrap">
									<p>1개월 7.0달성</p>
									<span>윤*진 수강생5</span>
								</div>
							</a>
						</div>
					</div>
				</div>
			</article>

			<!-- 교재안내 더보기 -->
			<div class="moreBtnWrap tab_pc-btn" data-page="acceptance">
				<button type="button" class="moreBtn">더보기</button>
			</div>

			<!-- 강의 추천 -->
			<article class="recommendation">
				<div class="max-width">
					<div class="titleWrap">
						<p class="title">강의 추천</p>
					</div>
					<div class="slide">
						<div class="navigation">
							<button type="button" class="prev navi"><span>이전</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g transform="translate(-26 72) rotate(-90)"><rect width="32" height="32" rx="16" transform="translate(40 26)" fill="none"/><path d="M51.5,44,56,39.5,60.5,44" fill="none" stroke="#40404e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg></button>
							<button type="button" class="next navi"><span>다음</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g transform="translate(58 -40) rotate(90)"><rect width="32" height="32" rx="16" transform="translate(40 26)" fill="none"/><path d="M51.5,44,56,39.5,60.5,44" fill="none" stroke="#40404e" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></g></svg></button>
						</div>
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<a href="#none">
									<div class="imgWrap"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_recommendation.png');"></figure></div>
									<div class="textWrap ellipsis_2">IELTS 1개월 수강팩 +모의고사 풀이 / 단어장1</div>
								</a>
							</div>
							<div class="swiper-slide">
								<a href="#none">
									<div class="imgWrap"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_recommendation.png');"></figure></div>
									<div class="textWrap ellipsis_2">IELTS 1개월 수강팩 +모의고사 풀이 / 단어장2</div>
								</a>
							</div>
							<div class="swiper-slide">
								<a href="#none">
									<div class="imgWrap"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_recommendation.png');"></figure></div>
									<div class="textWrap ellipsis_2">IELTS 1개월 수강팩 +모의고사 풀이 / 단어장3 IELTS 1개월 수강팩 +모의고사 풀이 / 단어장2 IELTS 1개월 수강팩 +모의고사 풀이 / 단어장3</div>
								</a>
							</div>
							<div class="swiper-slide">
								<a href="#none">
									<div class="imgWrap"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_recommendation.png');"></figure></div>
									<div class="textWrap ellipsis_2">IELTS 1개월 수강팩 +모의고사 풀이 / 단어장4</div>
								</a>
							</div>
							<div class="swiper-slide">
								<a href="#none">
									<div class="imgWrap"><figure style="background-image: url('{{ env('AWS_S3_IMG_URL') }}/common/promotion/test_promotion_recommendation.png');"></figure></div>
									<div class="textWrap ellipsis_2">IELTS 1개월 수강팩 +모의고사 풀이 / 단어장5</div>
								</a>
							</div>
						</div>
					</div>
				</div>
			</article>

            <!-- 간편하게 상담 신청하기 -->
            <div id="go-contact">
                <a href="#none"><span>간편하게 상담 신청하기 <figure></figure></span></a>
            </div>
		</div>

		<!-- 상품 옵션 -->
		<div class="sticky-option bottom-sheet">
			<div class="registerWrap slidingWrap">
				<button type="button" class="closeBtn"><span>닫기</span></button>

				<form action="">
					<div class="registerInfo">
						<div class="productTitle">
							<div class="ico-box" style="background: linear-gradient(90deg, #FF5448 0%, #FF4063 100%);">
								텍스트관리
								<span class="tail"></span>
							</div>

							<p>전강좌 + 응시권패스</p>
						</div>

						<div class="scrollWidth">
						    <div class="scrollWrap">
						        <div class="moduleSelect flex">
        							<p class="title">모듈선택 </p>
        							<div class="selectWrap">
        								<label><input type="radio" name="moduleSelect"><span>Acaemic </span></label>
        								<label><input type="radio" name="moduleSelect"><span>General</span></label>
        							</div>
        						</div>

                                <ul class="optionSelect">
                                    <li class="active">
                                        <div class="top">
                                            <p>Final! One-stop IELTS(180일)</p>
                                            <div class="price">
                                                <em class="sale">47%</em>
                                                <div class="number">
                                                    <p class="after"><span>1,160,000</span>원</p>
                                                    <p class="before"><span>1,260,000</span> 원</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="middle">
                                            <div class="box subject">
                                                <p><span>%강좌명1%</span><span>%강좌명2%</span><span>%강좌명3%</span></p>
                                                <p>구성강의 총 N건 (%강좌명% 외 N개)</p>
                                            </div>
                                            <div class="box benefit">
                                                <p class="pencil">Basic 첨삭 5회</p>
                                                <p class="pencil">Premium 첨삭 20회</p>
                                                <p class="computer">CDT모의고사 풀패키지 2회 제공</p>
                                                <p class="ticket">응시권 %상품명% N회</p>
                                            </div>
                                            <div class="box book">
                                                <p>구성 교재 총 N권</p>
                                                <p>노란단어 (종강일마다 지급)</p>
                                                <p>W단어 (결제일 지급)</p>
                                            </div>
                                            <div class="box date">
                                                <p>수강시작일</p>
                                                <p>2024년 10월 11일 예정</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="top">
                                            <p>Final! One-stop IELTS(180일)</p>
                                            <div class="price">
                                                <em class="sale">47%</em>
                                                <div class="number">
                                                    <p class="after"><span>1,160,000</span>원</p>
                                                    <p class="before"><span>1,260,000</span> 원</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="middle">
                                            <div class="box subject">
                                                <p><span>%강좌명1%</span><span>%강좌명2%</span><span>%강좌명3%</span></p>
                                                <p>구성강의 총 N건 (%강좌명% 외 N개)</p>
                                            </div>
                                            <div class="box benefit">
                                                <p class="pencil">Basic 첨삭 5회</p>
                                                <p class="pencil">Premium 첨삭 20회</p>
                                                <p class="computer">CDT모의고사 풀패키지 2회 제공</p>
                                                <p class="ticket">응시권 %상품명% N회</p>
                                            </div>
                                            <div class="box book">
                                                <p>구성 교재 총 N권</p>
                                                <p>노란단어 (종강일마다 지급)</p>
                                                <p>W단어 (결제일 지급)</p>
                                            </div>
                                            <div class="box date">
                                                <p>수강시작일</p>
                                                <p>2024년 10월 11일 예정</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="top">
                                            <p>Final! One-stop IELTS(180일)</p>
                                            <div class="price">
                                                <em class="sale">47%</em>
                                                <div class="number">
                                                    <p class="after"><span>1,160,000</span>원</p>
                                                    <p class="before"><span>1,260,000</span> 원</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="middle">
                                            <div class="box subject">
                                                <p><span>%강좌명1%</span><span>%강좌명2%</span><span>%강좌명3%</span></p>
                                                <p>구성강의 총 N건 (%강좌명% 외 N개)</p>
                                            </div>
                                            <div class="box benefit">
                                                <p class="pencil">Basic 첨삭 5회</p>
                                                <p class="pencil">Premium 첨삭 20회</p>
                                                <p class="computer">CDT모의고사 풀패키지 2회 제공</p>
                                                <p class="ticket">응시권 %상품명% N회</p>
                                            </div>
                                            <div class="box book">
                                                <p>구성 교재 총 N권</p>
                                                <p>노란단어 (종강일마다 지급)</p>
                                                <p>W단어 (결제일 지급)</p>
                                            </div>
                                            <div class="box date">
                                                <p>수강시작일</p>
                                                <p>2024년 10월 11일 예정</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
						    </div>
						</div>
					</div>

					<div class="resultWrap">
						<div class="checkWrap flex">
							<label><input type="checkbox"><span>수강∙환불∙환급 등의 상품 유의사항을 확인했습니다.</span></label>
							<button type="button" class="goCautionBtn">유의사항보기</button>
							<!--
								class="goCautionBtn" 클릭
								=> pc : 좌측 탭 메뉴중 '유의사항' 탭이 활성화됩니다.
								=> mo : 옵션창이 닫히며 '유의사항' 탭이 활성화됩니다. (class="sticky-option"에서 active 클래스가 제거되면 옵션이 닫힘)
							-->
						</div>

						<div class="resultPrice">
							<div class="subject">%옵션명1%</div> <!-- 선택된 강좌의 이름이 들어갑니다. -->
							<div class="flex sb">
								<p>결제금액</p>
								<p class="all"><em>1,160,000원</em></p>
							</div>
						</div>
						<button type="button" class="registerBtn openBtn">수강신청</button> <!-- 옵션을 열기위한 가짜 버튼 -->
						<a href="#none" class="registerBtn submitBtn">수강신청</a> <!-- 진짜 수강신청 버튼 -->
					</div>
				</form>
			</div>

			<div class="dim"></div>
		</div>


	</div>
@endsection

@section($service.'-script')
    <!-- aos -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	{!! resource('js/common/promotion.js') !!}
	<script>
		$(function(){


			// default : 첫번째 옵션은 열려있는 상태
			$('.optionSelect > li').eq(0).addClass('active').find('.middle').show();
			$('.optionSelect > li').on('click',function(){
				$(this).addClass('active').find('.middle').stop().slideDown(300).closest('li').siblings().removeClass('active').find('.middle').stop().slideUp(300);
			});

			// 교재안내
			var textbookGuide = new Swiper("article.textbookGuide .slide", {
				slidesPerView: '2.3',
				slidesPerGroup: 1,
				spaceBetween: 0,
				simulateTouch: true,
				loop: true,
				centeredSlides: true,
				speed: 700,
				touchRatio: 0.2,
				threshold: 5,
				autoHeight: false,
				breakpoints: {
					576: {
						loop: false,
					}
				},
			});

			// 강사진
			var teacherWrap = new Swiper("article.teacherWrap .slide", {
				slidesPerView: '2.3',
				slidesPerGroup: 1,
				spaceBetween: 0,
				simulateTouch: true,
				touchRatio: 0.2,
				threshold: 5,
				loop: true,
				centeredSlides: true,
				speed: 700,
				breakpoints: {
					576: {
						loop: false,
					}
				},
				on: {
					init: function(){
						let teacherNumber = $('.teacherWrap .swiper-slide[data-swiper-slide-index="' + this.realIndex + '"]').text();
						$('.teacherWrap .teacherName').text(teacherNumber);
					},
					slideChange : function(){
						let teacherNumber = $('.teacherWrap .swiper-slide[data-swiper-slide-index="' + this.realIndex + '"]').text();
						$('.teacherWrap .teacherName').text(teacherNumber);
					},
				},
			});

			// 성적표 인증 합격후기
			var acceptance = new Swiper("article.acceptance .slide", {
				slidesPerView: '2.3',
				slidesPerGroup: 1,
				spaceBetween: 0,
				simulateTouch: true,
				loop: true,
				centeredSlides: true,
				speed: 700,
				touchRatio: 0.2,
				threshold: 5,
				autoHeight: false,
				breakpoints: {
					576: {
						loop: false,
					}
				},
			});

            // 강의 추천
            var recommendation = new Swiper("article.recommendation .slide", {
                slidesPerView: '1.45',
                slidesPerGroup: 1,
                spaceBetween: 16,
                simulateTouch: true,
                loop: true,
                slidesOffsetBefore : 16,
                longSwipes: false,
                speed: 700,
                touchRatio: 0.2,
                threshold: 5,
                navigation: {
                    nextEl: '.recommendation .slide .navigation .next',
                    prevEl: '.recommendation .slide .navigation .prev',
                },
                breakpoints: {
                    576: {
                        slidesPerView: '2.9',
                    },
                    745: {
                        slidesPerView: '2.4',
                        slidesOffsetBefore : 0,
                    }
                },
            });


		});
	</script>
@endsection