@extends('ielts.layout')

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

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



@section("ielts-content")
<div class="container">
    <div class="path-wrapper">
        <div class="wrapper">
            <dl class="path">
                <dt class="blind">path</dt>
                <dd>전체</dd>
                <dd>나의 강의실</dd>
                <dd>첨삭학습</dd>
            </dl>
        </div>
    </div>
    <div class="my-class-wrapper">
        <div class="wrapper">
            <div class="my-class-menu">
                <ul>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-01"></i>
                            <span>메인</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-02"></i>
                            <span>강의수강</span>
                        </a>
                    </li>
                    <li class="on">
                        <a href="#none">
                            <i class="ico-myclass-03"></i>
                            <span>첨삭 학습</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-04"></i>
                            <span>CDT 모의고사</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-05"></i>
                            <span>게시판</span>
                        </a>
                    </li>
                    <li>
                        <a href="#none">
                            <i class="ico-myclass-06"></i>
                            <span>휴강/연장 신청</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="my-class-contents">
                <div class="row">
                    <div class="column c100p">
                        <div class="my-tab">
                            <ul>
                                <li><a href="#none">첨삭등록</a></li>
                                <li class="on"><a href="#none">첨삭내역</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="column c100p">
                        <div class="card my-class-sub">
                            <table class="correct-table gray">
                                <thead>
                                    <tr>
                                        <th>답변내용</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="text-center bdb0">
                                            <div class="swiper-pagination"></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="ctSwiper-wrap mt24">
                                <!-- teacher -->
                                <div class="swiper ctSwiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="chart-img-detail">
                                                <div class="chart-img task">
                                                    Popular events like the football World Cup and other international sporting occasions are essential in easing international tensions and releasing patriotic emotions in a safe way. To what extent do you agree or disagree with this opinion?Popular events like the football World Cup and other international sporting occasions are essential in easing international tensions and releasing patriotic emotions in a safe way. To what extent do you agree or disagree with this opinion?Popular events like the football World Cup and other international sporting occasions are essential in easing international tensions and releasing patriotic emotions in a safe way. To what extent do you agree or disagree with this opinion?
                                                </div>
                                                <div class="chart-detail">
                                                    Popular events like the football World Cup and other international sporting occasions are essential in easing international tensions and releasing patriotic emotions in a safe way. To what extent do you agree or disagree with this opinion?Popular events like the football World Cup and other international sporting occasions are essential in easing international tensions and releasing patriotic emotions in a safe way. To what extent do you agree or disagree with this opinion?Popular events like the football World Cup and other international sporting occasions are essential in easing international tensions and releasing patriotic emotions in a safe way. To what extent do you agree or disagree with this opinion?
                                                </div>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="chart-img-detail">
                                                <div class="chart-img task">
                                                    Popular events like the football World Cup and other international sporting occasions are essential in easing international tensions and releasing patriotic emotions in a safe way. To what extent do you agree or disagree with this opinion?Popular events like the football World Cup and other international sporting occasions are essential in easing international tensions and releasing patriotic emotions in a safe way. To what extent do you agree or disagree with this opinion?Popular events like the football World Cup and other international sporting occasions are essential in easing international tensions and releasing patriotic emotions in a safe way. To what extent do you agree or disagree with this opinion?
                                                </div>
                                                <div class="chart-detail">
                                                    Popular events like the football World Cup and other international sporting occasions are essential in easing international tensions and releasing patriotic emotions in a safe way. To what extent do you agree or disagree with this opinion?Popular events like the football World Cup and other international sporting occasions are essential in easing international tensions and releasing patriotic emotions in a safe way. To what extent do you agree or disagree with this opinion?Popular events like the football World Cup and other international sporting occasions are essential in easing international tensions and releasing patriotic emotions in a safe way. To what extent do you agree or disagree with this opinion?
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                            <script>
                                var bullet = ['Task 1', 'Task 2'];
                                var swiper = new Swiper(".ctSwiper", {
                                    navigation: {
                                        nextEl: ".swiper-button-next",
                                        prevEl: ".swiper-button-prev",
                                    },
                                    pagination: {
                                        el: ".swiper-pagination",
                                        clickable: true,
                                        renderBullet: function (index, className) {
                                            return '<div class="' + className + '"><span>' + (bullet[index]) + '</span></div>';
                                        }
                                    },
                                });
                            </script>
                            <h4 class="correct-title">
                                <i class="ico-clipboard"></i>
                                첨삭 피드백
                            </h4>
                            <h5 class="correct-sub-title">
                                <span class="point-color">항목별</span> 점수
                            </h5>
                            <ul class="score-ul">
                                <li>
                                    <div class="bg-gradient">
                                        Task<br>Achievement
                                    </div>
                                    <div>
                                        9.0
                                    </div>
                                </li>
                                <li>
                                    <div class="bg-gradient">
                                        Cohesion &<br>Coherence
                                    </div>
                                    <div>
                                        9.0
                                    </div>
                                </li>
                                <li>
                                    <div class="bg-gradient">
                                        Lexical<br>Resources
                                    </div>
                                    <div>
                                        9.0
                                    </div>
                                </li>
                                <li>
                                    <div class="bg-gradient">
                                        Grammatical Range<br>& Accuracy
                                    </div>
                                    <div>
                                        9.0
                                    </div>
                                </li>
                                <li>
                                    <div class="bg-gradient">
                                        Band Score
                                    </div>
                                    <div>
                                        9.0
                                    </div>
                                </li>
                            </ul>
                            <h5 class="correct-sub-title mt60">
                                첨삭 내용
                            </h5>
                            <div class="list-info">
                                <a href="#none" class="btn-all-down">
                                    <i class="ico-file"></i>
                                    파일 전체 다운받기
                                    <i class="ico-download"></i>
                                </a>
                            </div>
                            <div class="file-list">
                                <span class="name">
                                    <i class="ico-file"></i>
                                    Writing1
                                </span>
                                <ul>
                                    <li>
                                        <a href="#none">%첨부파일명%. 확장자</a>
                                        <a href="#none">
                                            다운로드
                                            <i class="ico-download"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#none">%첨부파일명%. 확장자</a>
                                        <a href="#none">
                                            다운로드
                                            <i class="ico-download"></i>
                                        </a>
                                    </li>
                                </ul>
                                <span class="date">
                                    (첨부일자) 24.03.25(월)
                                </span>
                            </div>
                            <div class="file-list">
                                <span class="name">
                                    <i class="ico-file"></i>
                                    Writing1
                                </span>
                                <ul>
                                    <li>
                                        <a href="#none">%첨부파일명%. 확장자</a>
                                        <a href="#none">
                                            다운로드
                                            <i class="ico-download"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#none">%첨부파일명%. 확장자</a>
                                        <a href="#none">
                                            다운로드
                                            <i class="ico-download"></i>
                                        </a>
                                    </li>
                                </ul>
                                <span class="date">
                                    (첨부일자) 24.03.25(월)
                                </span>
                            </div>
                            <h6 class="mt60">학습 문의 <span class="point-color">8</span> 건</h6>
                            <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>
            </div>
        </div>
    </div>
</div>
@endsection



@section('ielts-script')

@endsection