@extends('ielts.layout')

@section('ielts-css')
    {!! resource('css/ielts/sub.css') !!}

    {!! resource('css/myclass/my_class_mo.css') !!}
    {!! resource('css/myclass/my_class_mo_ielts.css') !!}
@endsection



@section("ielts-content")
<div class="container_m">

    <div id="nav">
        <a href="#none" class="ico-back">뒤로가기</a>
        <h2>첨삭학습</h2>
    </div>
    <div id="tab">
        <ul>
            <li>
                <a href="#none">첨삭 등록</a>
            </li>
            <li class="on">
                <a href="#none">첨삭 내역</a>
            </li>
            <li>
                <a href="#none">임시저장</a>
            </li>
        </ul>
    </div>
    <div id="container" class="bg-gray">
        <ul class="product-list">
            <li>
                <div class="title">
                    <div>
                        <p class="date">24.03.25(월)</p>
                        <dl class="badge">
                            <dd class="bg-red">Premium</dd>
                            <dd class="normal"><strong>3</strong>회차/40회</dd>
                        </dl>
                        <h4>첨삭명이 들어갑니다.첨삭명이 들어갑니다.갑니다.</h4>
                    </div>
                </div>
                <div class="detail correct mt4">
                    <dl>
                        <dt>첨삭과목</dt>
                        <dd>- Writing</dd>
                    </dl>
                    <dl>
                        <dt>첨삭타입</dt>
                        <dd>- Task 1</dd>
                    </dl>
                </div>
                <a href="#none" class="btn-go disabled">
                    답변대기
                </a>
            </li>
            <li>
                <div class="title">
                    <div>
                        <p class="date">24.03.25(월)</p>
                        <dl class="badge">
                            <dd class="bg-blue">Basic</dd>
                            <dd class="normal"><strong>32</strong>회차/40회</dd>
                        </dl>
                        <h4>첨삭명이 들어갑니다.첨삭명이 들어갑니다.갑니다.</h4>
                    </div>
                </div>
                <div class="detail correct mt4">
                    <dl>
                        <dt>첨삭과목</dt>
                        <dd>- Speaking</dd>
                    </dl>
                    <dl>
                        <dt>첨삭타입</dt>
                        <dd>- Task 1</dd>
                    </dl>
                </div>
                <a href="#none" class="btn-go">
                    첨삭보기
                </a>
            </li>
        </ul>
    </div>
    <div id="correct01" class="correct-popup-wrap">
        <div class="correct-popup-header">
            <a href="#none" class="ico-back">뒤로가기</a>
            <h2>
                <span>첨삭 작성</span>
                <strong>첨삭 피드백</strong>
            </h2>
            <a href="#none" class="ico-close">닫기</a>
        </div>
        <div class="correct-popup-container">
            <div class="correct-popup-contents">
                <div class="correct-detail-info">
                    <div>
                        <span>
                            · 첨삭과목 - <strong>Writing</strong>
                        </span>
                        <span>
                            · 첨삭타입 - <strong>Task 1</strong>
                        </span>
                    </div>
                    <p>The bar char below shows the figures for imprisonment in five countries between 1930 and 1980.</p>
                </div>
                <!-- premium w -->
                <div class="correct-detail-wrap">
                    <h3>
                        <strong>항목별</strong> 점수
                    </h3>
                    <h4>
                        <i class="ico-score"></i>
                        Band Score <strong>9.0</strong>
                    </h4>
                    <div class="score-wrap">
                        <div>
                            <table>
                                <tr>
                                    <th>
                                        Task Achievement
                                    </th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Cohesion & Coherence</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Lexical Resources</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Grammatical Range & Accuracy</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="correct-detail-wrap">
                    <h3>
                        첨삭 내용
                    </h3>
                    <h5>
                        <strong>헤더</strong> 선생님
                    </h5>
                    <ul class="file-down">
                        <li>
                            <a href="#none">
                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                <div>
                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                    <span class="date">24.03.25(월)</span>
                                </div>
                                <i class="ico-download"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- // -->
                <!-- premium s -->
                <div class="correct-detail-wrap">
                    <h3>
                        <strong>항목별</strong> 점수
                    </h3>
                    <h4>
                        <i class="ico-score"></i>
                        Band Score <strong>9.0</strong>
                    </h4>
                    <div class="score-wrap">
                        <div>
                            <table>
                                <tr>
                                    <th>
                                        Fluency
                                    </th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Lexical Resources</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Grammatical Range & Accuracy</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Pronunciation</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="correct-detail-wrap">
                    <h3>
                        첨삭 내용
                    </h3>
                    <h5>
                        <strong>헤더</strong> 선생님
                    </h5>
                    <ul class="file-down">
                        <li>
                            <a href="#none">
                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                <div>
                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                    <span class="date">24.03.25(월)</span>
                                </div>
                                <i class="ico-download"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- // -->
                <!-- basic w -->
                <div class="correct-detail-wrap">
                    <h3>
                        <strong>항목별</strong> 점수
                    </h3>
                    <h4>
                        <i class="ico-score"></i>
                        Band Score <strong>9.0</strong>
                    </h4>
                    <div class="score-wrap">
                        <div>
                            <table>
                                <tr>
                                    <th>
                                        Task Achievement
                                    </th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Cohesion & Coherence</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Lexical Resources</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Grammatical Range & Accuracy</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="correct-detail-wrap">
                    <h3>
                        첨삭 내용
                    </h3>
                    <ul class="file-down">
                        <li>
                            <a href="#none">
                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-file-pr.svg" alt="">
                                <div>
                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                    <span class="date">24.03.25(월)</span>
                                </div>
                                <i class="ico-download"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#none">
                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-file-bs.svg" alt="">
                                <div>
                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                    <span class="date">24.03.25(월)</span>
                                </div>
                                <i class="ico-download"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- // -->
                <!-- basic s -->
                <div class="correct-detail-wrap">
                    <h3>
                        <strong>항목별</strong> 점수
                    </h3>
                    <h4>
                        <i class="ico-score"></i>
                        Band Score <strong>9.0</strong>
                    </h4>
                    <div class="score-wrap">
                        <div>
                            <table>
                                <tr>
                                    <th>
                                        Fluency
                                    </th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Lexical Resources</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Grammatical Range & Accuracy</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Pronunciation</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="correct-detail-wrap">
                    <div class="speaking-textarea">
                        <div class="swiper-pagination2"></div>
                        <div class="swiper skSwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <h3>
                                        첨삭 내용
                                    </h3>
                                    <ul class="file-down">
                                        <li>
                                            <a href="#none">
                                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-file-bs.svg" alt="">
                                                <div>
                                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                                    <span class="date">24.03.25(월)</span>
                                                </div>
                                                <i class="ico-download"></i>
                                            </a>
                                        </li>
                                    </ul>
                                    <textarea name="" id="" placeholder="내용이 들어갑니다." readonly></textarea>
                                </div>
                                <div class="swiper-slide">
                                    <h3>
                                        첨삭 내용
                                    </h3>
                                    <ul class="file-down">
                                        <li>
                                            <a href="#none">
                                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-file-bs.svg" alt="">
                                                <div>
                                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                                    <span class="date">24.03.25(월)</span>
                                                </div>
                                                <i class="ico-download"></i>
                                            </a>
                                        </li>
                                    </ul>
                                    <textarea name="" id="" placeholder="내용이 들어갑니다." readonly></textarea>
                                </div>
                            </div>
                        </div>
                        <script>
                            var bullet = ['Part 2', 'Part 3'];
                            var swiper = new Swiper(".skSwiper", {
                                pagination: {
                                    el: ".swiper-pagination2",
                                    clickable: true,
                                    renderBullet: function (index, className) {
                                        return '<div class="' + className + '"><span>' + (bullet[index]) + '</span></div>';
                                    }
                                },
                            });
                        </script>
                    </div>
                </div>
                <!-- // -->
                <!-- cdt w -->
                <div class="correct-detail-wrap">
                    <h3>
                        <strong>항목별</strong> 점수
                    </h3>
                    <h4>
                        <i class="ico-score"></i>
                        Band Score <strong>9.0</strong>
                    </h4>
                    <div class="score-wrap">
                        <div>
                            <table>
                                <tr>
                                    <th>
                                        Task Achievement
                                    </th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Cohesion & Coherence</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Lexical Resources</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Grammatical Range & Accuracy</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="correct-detail-wrap">
                    <h3>
                        첨삭 내용
                    </h3>
                    <h5>
                        <strong>헤더</strong> 선생님
                    </h5>
                    <ul class="file-down">
                        <li>
                            <a href="#none">
                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                <div>
                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                    <span class="date">24.03.25(월)</span>
                                </div>
                                <i class="ico-download"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#none">
                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                <div>
                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                    <span class="date">24.03.25(월)</span>
                                </div>
                                <i class="ico-download"></i>
                            </a>
                        </li>
                    </ul>
                    <h5>
                        <strong>세드릭</strong> 선생님
                    </h5>
                    <ul class="file-down">
                        <li>
                            <a href="#none">
                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                <div>
                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                    <span class="date">24.03.25(월)</span>
                                </div>
                                <i class="ico-download"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#none">
                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/img-teacher-01.png" alt="">
                                <div>
                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                    <span class="date">24.03.25(월)</span>
                                </div>
                                <i class="ico-download"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- // -->
                <!-- basic s -->
                <div class="correct-detail-wrap">
                    <h3>
                        <strong>항목별</strong> 점수
                    </h3>
                    <h4>
                        <i class="ico-score"></i>
                        Band Score <strong>9.0</strong>
                    </h4>
                    <div class="score-wrap">
                        <div>
                            <table>
                                <tr>
                                    <th>
                                        Fluency
                                    </th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Lexical Resources</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Grammatical Range & Accuracy</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                        <div>
                            <table>
                                <tr>
                                    <th>Pronunciation</th>
                                    <td>9.0</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="correct-detail-wrap">
                    <div class="speaking-textarea">
                        <div class="swiper-pagination3"></div>
                        <div class="swiper skSwiper3">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <h3>
                                        첨삭 내용
                                    </h3>
                                    <ul class="file-down">
                                        <li>
                                            <a href="#none">
                                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-file-bs.svg" alt="">
                                                <div>
                                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                                    <span class="date">24.03.25(월)</span>
                                                </div>
                                                <i class="ico-download"></i>
                                            </a>
                                        </li>
                                    </ul>
                                    <textarea name="" id="" placeholder="내용이 들어갑니다." readonly></textarea>
                                </div>
                                <div class="swiper-slide">
                                    <h3>
                                        첨삭 내용
                                    </h3>
                                    <ul class="file-down">
                                        <li>
                                            <a href="#none">
                                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-file-bs.svg" alt="">
                                                <div>
                                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                                    <span class="date">24.03.25(월)</span>
                                                </div>
                                                <i class="ico-download"></i>
                                            </a>
                                        </li>
                                    </ul>
                                    <textarea name="" id="" placeholder="내용이 들어갑니다." readonly></textarea>
                                </div>
                                <div class="swiper-slide">
                                    <h3>
                                        첨삭 내용
                                    </h3>
                                    <ul class="file-down">
                                        <li>
                                            <a href="#none">
                                                <img src="https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/mo/ico-file-bs.svg" alt="">
                                                <div>
                                                    <span class="file-name">%첨부파일명%. 확장자</span>
                                                    <span class="date">24.03.25(월)</span>
                                                </div>
                                                <i class="ico-download"></i>
                                            </a>
                                        </li>
                                    </ul>
                                    <textarea name="" id="" placeholder="내용이 들어갑니다." readonly></textarea>
                                </div>
                            </div>
                        </div>
                        <script>
                            var bullet = ['Part 1', 'Part 2', 'Part 3'];
                            var swiper = new Swiper(".skSwiper3", {
                                pagination: {
                                    el: ".swiper-pagination3",
                                    clickable: true,
                                    renderBullet: function (index, className) {
                                        return '<div class="' + className + '"><span>' + (bullet[index]) + '</span></div>';
                                    }
                                },
                            });
                        </script>
                    </div>
                </div>
                <!-- // -->
                <div class="correct-detail-wrap">
                    <div class="cmt-wrap">
                        <div class="cmt-write">
                            <textarea name="" id="" placeholder="내용을 입력해주세요."></textarea>
                            <button>등록</button>
                        </div>
                        <div class="cmt-view">
                            <ul>
                                <!-- depth 1 cmt -->
                                <li>
                                    <div class="cmt-view-wrap">
                                        <div class="cmt-info">
                                            <i class="ico-profile" style="background-image: url(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/ico_profile_edm.svg);"></i>
                                            <strong>edm아이엘츠</strong>
                                            <span>2020-12-31 00:09:51</span>
                                        </div>
                                        <div class="cmt-contents">
                                            메모 내용이 여기에 노출됩니다. 줄 띄어쓰기가 적용되고 글자수는 2000byte로 제한됩니다. 한 사람의 댓글은 스크롤이 생성되지 않고 전체 내용이 노출됩니다. 댓글은 최근순으로 보여지며, 대댓글(답글)은 상위 댓글 하단에 오래된순으로 보여집니다. (인스타그램, 트위터 등의 SNS와 동일한 정렬) 대댓글의 대댓글은 들여쓰기 처리되지 않습니다.
                                        </div>
                                        <div class="cmt-button">
                                            <a href="#none">답글</a>
                                            <a href="#none">답글 1개 숨기기</a>
                                        </div>
                                        <a href="#none" class="ico-delete"></a>
                                    </div>
                                    <!-- depth 2 cmt -->
                                    <ul class="depth">
                                        <li>
                                            <div class="cmt-view-wrap">
                                                <div class="cmt-info">
                                                    <i class="ico-profile" style="background-image: url(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/ico_profile.svg);"></i>
                                                    <strong>계정명</strong>
                                                    <span>2020-12-31 00:09:51</span>
                                                </div>
                                                <div class="cmt-contents">
                                                    <span class="at">@edmIELTS</span>메모 내용이 여기에 노출됩니다. 줄 띄어쓰기가 적용되고 글자수는 2000byte로 제한됩니다. 한 사람의 댓글은 스크롤이 생성되지 않고 전체 내용이 노출됩니다. 댓글은 최근순으로 보여지며, 대댓글(답글)은 상위 댓글 하단에 오래된순으로 보여집니다. (인스타그램, 트위터 등의 SNS와 동일한 정렬) 대댓글의 대댓글은 들여쓰기 처리되지 않습니다.
                                                </div>
                                                <div class="cmt-button">
                                                    <a href="#none">답글</a>
                                                    <a href="#none">답글 1개 숨기기</a>
                                                </div>
                                            </div>
                                            <a href="#none" class="ico-delete"></a>
                                        </li>
                                        <li>
                                            <div class="cmt-view-wrap">
                                                <div class="cmt-info">
                                                    <i class="ico-profile" style="background-image: url(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/ico_profile.svg);"></i>
                                                    <strong>계정명</strong>
                                                    <span>2020-12-31 00:09:51</span>
                                                </div>
                                                <div class="cmt-contents">
                                                    <span class="at">@edmIELTS</span>메모 내용이 여기에 노출됩니다. 줄 띄어쓰기가 적용되고 글자수는 2000byte로 제한됩니다. 한 사람의 댓글은 스크롤이 생성되지 않고 전체 내용이 노출됩니다. 댓글은 최근순으로 보여지며, 대댓글(답글)은 상위 댓글 하단에 오래된순으로 보여집니다. (인스타그램, 트위터 등의 SNS와 동일한 정렬) 대댓글의 대댓글은 들여쓰기 처리되지 않습니다.
                                                </div>
                                                <div class="cmt-button">
                                                    <a href="#none">답글</a>
                                                    <a href="#none">답글 1개 숨기기</a>
                                                </div>
                                            </div>
                                            <a href="#none" class="ico-delete"></a>
                                        </li>
                                    </ul>
                                </li>
                                <!-- depth 1 cmt -->
                                <li>
                                    <div class="cmt-view-wrap">
                                        <div class="cmt-info">
                                            <i class="ico-profile" style="background-image: url(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/ico_profile_edm.svg);"></i>
                                            <strong>edm아이엘츠</strong>
                                            <span>2020-12-31 00:09:51</span>
                                        </div>
                                        <div class="cmt-contents">
                                            메모 내용이 여기에 노출됩니다. 줄 띄어쓰기가 적용되고 글자수는 2000byte로 제한됩니다. 한 사람의 댓글은 스크롤이 생성되지 않고 전체 내용이 노출됩니다. 댓글은 최근순으로 보여지며, 대댓글(답글)은 상위 댓글 하단에 오래된순으로 보여집니다. (인스타그램, 트위터 등의 SNS와 동일한 정렬) 대댓글의 대댓글은 들여쓰기 처리되지 않습니다.
                                        </div>
                                        <div class="cmt-button">
                                            <a href="#none">답글</a>
                                            <a href="#none">답글 1개 숨기기</a>
                                        </div>
                                        <a href="#none" class="ico-delete"></a>
                                    </div>
                                    <!-- depth 2 cmt -->
                                    <ul class="depth">
                                        <li>
                                            <div class="cmt-view-wrap">
                                                <div class="cmt-info">
                                                    <i class="ico-profile" style="background-image: url(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/ico_profile.svg);"></i>
                                                    <strong>계정명</strong>
                                                    <span>2020-12-31 00:09:51</span>
                                                </div>
                                                <div class="cmt-contents">
                                                    <span class="at">@edmIELTS</span>메모 내용이 여기에 노출됩니다. 줄 띄어쓰기가 적용되고 글자수는 2000byte로 제한됩니다. 한 사람의 댓글은 스크롤이 생성되지 않고 전체 내용이 노출됩니다. 댓글은 최근순으로 보여지며, 대댓글(답글)은 상위 댓글 하단에 오래된순으로 보여집니다. (인스타그램, 트위터 등의 SNS와 동일한 정렬) 대댓글의 대댓글은 들여쓰기 처리되지 않습니다.
                                                </div>
                                                <div class="cmt-button">
                                                    <a href="#none">답글</a>
                                                    <a href="#none">답글 1개 숨기기</a>
                                                </div>
                                            </div>
                                            <a href="#none" class="ico-delete"></a>
                                        </li>
                                        <li>
                                            <div class="cmt-view-wrap">
                                                <div class="cmt-info">
                                                    <i class="ico-profile" style="background-image: url(https://s3.ap-northeast-2.amazonaws.com/new.edmclass.com/ielts/my_class/ico_profile.svg);"></i>
                                                    <strong>계정명</strong>
                                                    <span>2020-12-31 00:09:51</span>
                                                </div>
                                                <div class="cmt-contents">
                                                    <span class="at">@edmIELTS</span>메모 내용이 여기에 노출됩니다. 줄 띄어쓰기가 적용되고 글자수는 2000byte로 제한됩니다. 한 사람의 댓글은 스크롤이 생성되지 않고 전체 내용이 노출됩니다. 댓글은 최근순으로 보여지며, 대댓글(답글)은 상위 댓글 하단에 오래된순으로 보여집니다. (인스타그램, 트위터 등의 SNS와 동일한 정렬) 대댓글의 대댓글은 들여쓰기 처리되지 않습니다.
                                                </div>
                                                <div class="cmt-button">
                                                    <a href="#none">답글</a>
                                                    <a href="#none">답글 1개 숨기기</a>
                                                </div>
                                            </div>
                                            <a href="#none" class="ico-delete"></a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div id="info01" class="info-popup-wrap">
                <div class="info-popup height-auto">
                    <a href="#none" class="close-info">열기</a>
                    <h3>
                        <i class="ico-pencil"></i>
                        내답변 보기
                    </h3>
                    <div class="overflow-wrap">
                        <div class="bg-skyblue">
                            <h4>Topic 1</h4>
                            <p>The charts below show the levels of participation in education and science in developing and industrialised ountries in 1980 and 1990. Summarise the information by information by information by information by</p>
                        </div>
                        <img src="https://placehold.co/328x212" alt="">
                        <h3>
                            <i class="ico-pencil"></i>
                            답변내용
                        </h3>
                        <p>
                            The charts below show the levels of participation in education and science in developing and industrialised countries in 1980 and 1990. Summarise the information by selecting and reporting the main features and make comparisons where relevant. Write at least 150 words.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection



@section('ielts-script')

    <script>
        $(document).ready(function () {
            // 팝업 열기
            $(document).on("click", ".info-pop", function (e){
                var target = $(this).attr("data-info");
                $('#'+target).addClass("on");
            });
            // 외부영역 클릭 시 팝업 닫기
            $(document).mouseup(function (e){
            var LayerPopup = $(".info-popup-wrap");
                if(LayerPopup.has(e.target).length === 0){
                    LayerPopup.removeClass("on");
                }
            });
            // 팝업 열기
            $(document).on("click", ".close-info", function (e){
                var targetId = $(e.target).closest('.info-popup-wrap').attr('id');
                $('#'+targetId).toggleClass('on')
            });
            // 팝업 닫기
            $(document).on("click", ".ico-close", function (e){
                $(e.target).closest('.correct-popup-wrap').hide()
            });
        });
    </script>
@endsection