<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7" lang="kr"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie10 lt-ie9 lt-ie8" lang="kr"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie10 lt-ie9" lang="kr"><![endif]-->
<!--[if (IE 9)&!(IEMobile)]><html class="no-js lt-ie10" lang="kr"><![endif]-->
<!--[if gt IE 9]><!-->
<html class="no-js" lang="kr">
<!--<![endif]-->

<head>
    <?php $this->load->view('templates/grace/grace-head-meta') ?>
    <?php $this->load->view('templates/grace/grace-head') ?>
</head>

<body class="grace">
    <?php $this->load->view('templates/grace/grace-header', ['nav' => preg_replace('/^<[^>]+>|<\/[^>]+>$/', '', hooskNav('grace'))]) ?>

    <main id="main" role="main" tabindex="-1">
        <!--main Slide-->
        <div class="recommend_card_wrap">
            <div id="card_flick" class="recommend_card_area">
                <div class="flick-container" style="overflow: hidden; box-sizing: border-box;">
                    <div class="eg-flick-container"
                        style="position: relative; z-index: 2000; width: 3868px; height: 100%; transform: translate(-967px); will-change: transform;">

                        <div class="flick-ct eg-flick-panel is_disable" role="tabpanel" aria-hidden="true"
                            style="width: 967px; height: 100%; box-sizing: border-box; top: 0px; left: 0px; transform: translate(200%); will-change: transform; position: relative;">
                            <div class="cont_area as_post"
                                style="background-image:url(<?php echo getImageUrl($featured[0]->img) ?>)">
                                <a href="<?php echo $featured[0]->articleURL ?>" class="inner"
                                    onclick="mug.common.nclick(this, 'bes.banner1');">
                                    <span class="card_dim"></span>
                                    <span class="cont_type"><?php echo $featured[0]->pageTitle ?></span>
                                    <strong class="tit"><?php echo $featured[0]->postTitle ?></strong>
                                    <span class="writer"><?php echo $featured[0]->userName ?></span>
                                </a>
                            </div>
                            <div class="img_dim"></div>
                        </div>

                        <div class="flick-ct eg-flick-panel is_disable" role="tabpanel" aria-hidden="true"
                            style="position: absolute; width: 967px; height: 100%; box-sizing: border-box; top: 0px; left: 0px; transform: translate(300%); will-change: transform;">
                            <div class="cont_area as_series"
                                style="background-image:url(<?php echo getImageUrl($featured[1]->img) ?>)">
                                <a href="<?php echo $featured[1]->articleURL ?>" class="inner"
                                    onclick="mug.common.nclick(this, 'bes.banner2');">
                                    <span class="card_dim"></span>
                                    <span class="cont_type"><?php echo $featured[1]->pageTitle ?></span>
                                    <strong class="tit"><?php echo $featured[1]->postTitle ?></strong>
                                    <span class="writer"><?php echo $featured[1]->userName ?></span>
                                </a>
                            </div>
                            <div class="img_dim"></div>
                        </div>

                        <div class="flick-ct eg-flick-panel is_disable" role="tabpanel" aria-hidden="true"
                            style="position: absolute; width: 967px; height: 100%; box-sizing: border-box; top: 0px; left: 0px; transform: translate(0%); will-change: transform;">
                            <div class="cont_area as_post"
                                style="background-image:url(<?php echo getImageUrl($featured[2]->img) ?>)">
                                <a href="<?php echo $featured[2]->articleURL ?>" class="inner"
                                    onclick="mug.common.nclick(this, 'bes.banner3');">
                                    <span class="card_dim"></span>
                                    <span class="cont_type"><?php echo $featured[2]->pageTitle ?></span>
                                    <strong class="tit"><?php echo $featured[2]->postTitle ?></strong>
                                    <span class="writer"><?php echo $featured[2]->userName ?></span>
                                </a>
                            </div>
                            <div class="img_dim"></div>
                        </div>

                        <div class="flick-ct eg-flick-panel" role="tabpanel" aria-hidden="false"
                            style="position: absolute; width: 967px; height: 100%; box-sizing: border-box; top: 0px; left: 0px; transform: translate(100%); will-change: transform;">
                            <div class="cont_area as_post"
                                style="background-image:url(<?php echo getImageUrl($featured[3]->img) ?>)">
                                <a href="<?php echo $featured[3]->articleURL ?>" class="inner"
                                    onclick="mug.common.nclick(this, 'bes.banner4');">
                                    <span class="card_dim"></span>
                                    <span class="cont_type"><?php echo $featured[3]->pageTitle ?></span>
                                    <strong class="tit"><?php echo $featured[3]->postTitle ?></strong>
                                    <span class="writer"><?php echo $featured[3]->userName ?></span>
                                </a>
                            </div>
                            <div class="img_dim"></div>
                        </div>

                    </div>
                </div>

                <div class="nav_area">
                    <a href="#" class="btn prev" role="button"><i class="ico">이전</i></a>
                    <a href="#" class="btn next" role="button"><i class="ico">다음</i></a>
                </div>
                <div class="pagination_wrap" style="z-index: 2001">
                    <div class="pagination_square" role="tablist">
                        <a href="#" role="tab" aria-selected="false" class="__page"><em class="num">1</em></a>
                        <a href="#" role="tab" aria-selected="false" class="__page"><em class="num">2</em></a>
                        <a href="#" role="tab" aria-selected="false" class="__page"><em class="num">3</em></a>
                        <a href="#" role="tab" aria-selected="true" class="__page on"><em class="num">4</em></a>
                    </div>
                </div>

            </div>
        </div>

        <!--Tag image-->
        <div class="tagImg">
            <div class="container">
                <ul>
                    <li>
                        <a href="/grace/search?keyword=photo">
                            <div class="thumb">
                                <img
                                    src="https://crossmap.co.kr/files/life/2019/06/6f91029d6aaf5c04cfb267c1be10ee3f.png">
                            </div>
                        </a>
                        <div class="tagTxt">#Photo</div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="thumb">
                                <img
                                    src="https://crossmap.co.kr/files/life/2019/06/52db7c6acd48b6f9bae9e8c61e914f25.png">
                            </div>
                        </a>
                        <div class="tagTxt">#Sounds</div>
                    </li>
                    <li><a href="#">
                            <div class="thumb"><img
                                    src="https://crossmap.co.kr/files/life/2019/06/4007778ee7ac227622fe05bd8fba05c6.png">
                            </div>
                        </a>
                        <div class="tagTxt">#Animation</div>
                    </li>
                    <li><a href="#">
                            <div class="thumb"><img
                                    src="https://crossmap.co.kr/files/life/2019/06/eb2189dd282cea791cb01ce1cd0c4cb7.png">
                            </div>
                        </a>
                        <div class="tagTxt">#Prayer</div>
                    </li>
                    <li><a href="#">
                            <div class="thumb"><img
                                    src="https://crossmap.co.kr/files/life/2019/06/ba05616409d09420ddc5d3c46fe68900.png">
                            </div>
                        </a>
                        <div class="tagTxt">#행복</div>
                    </li>
                    <li><a href="#">
                            <div class="thumb"><img
                                    src="https://crossmap.co.kr/files/life/2019/06/6f91029d6aaf5c04cfb267c1be10ee3f.png">
                            </div>
                        </a>
                        <div class="tagTxt">#아침묵상</div>
                    </li>
                </ul>
            </div>
        </div>

        <!--이야기 QT-->
        <div class="container pt30">
            <div class="titleBox">
                <ul>
                    <li><a href="#">이야기 QT</a></li>
                </ul>
                <div class="arrow">
                    <a href="#">더보기 <img src="<?php echo THEME_FOLDER ?>/img/ic-more.gif"></a>
                </div>
            </div>
            <ul class="col col4">
                <?php foreach ($storyqt as $k => $p) {
                    if ($k == 4) break; ?>
                <li>
                    <a href="<?php echo $p->articleURL ?>">
                        <div class="tit">
                            <?php echo $p->postTitle ?>
                        </div>
                        <div class="writer">
                            <?php echo $p->author ?>
                        </div>
                        <div class="thumb">
                            <img src="<?php echo $p->postImage ?>">
                        </div>
                    </a>
                </li>
                <?php } ?>
            </ul>
        </div>

        <!--말씀카드-->
        <div class="container pt30 pb30">
            <div class="titleBox">
                <ul>
                    <li><a href="#">말씀카드</a></li>
                </ul>
                <div class="arrow">
                    <a href="#">더보기 <img src="<?php echo THEME_FOLDER ?>/img/ic-more.gif"></a>
                </div>
            </div>
            <ul class="col col5">
                <?php foreach ($wordcard as $k => $p) {
                    if ($k == 5) break; ?>
                <li>
                    <a href="<?php echo $p->articleURL ?>">
                        <div class="tit">
                            <?php echo $p->postTitle ?>
                        </div>
                        <div class="writer">
                            <?php echo $p->author ?>
                        </div>
                        <div class="thumb">
                            <img src="<?php echo $p->postImage ?>">
                        </div>
                    </a>
                </li>
                <?php } ?>
            </ul>
        </div>

        <!--영상QT-->
        <div class="container btop">
            <div class="titleBox">
                <ul>
                    <li><a href="#">영상QT
                        </a></li>
                </ul>
                <div class="arrow">
                    <a href="#">더보기 <img src="<?php echo THEME_FOLDER ?>/img/ic-more.gif"></a>
                </div>
            </div>
            <ul class="col col4 col4-2">
                <?php foreach ($videoqt as $k => $p) {
                    if ($k == 4) break; ?>
                <li>
                    <div class="thumb">
                        <a href="<?php echo $p->articleURL ?>">
                            <img src="<?php echo $p->postImage ?>">
                        </a>
                    </div>
                    <div class="profile">
                        <a href="#"><img
                                src="https://crossmap.co.kr/files/partner/2018/06/714a4e0153721dddd25dc90ecd8b8c55.jpg"></a>
                        <div class="tit">
                            <a href="<?php echo $p->articleURL ?>"><?php echo $p->postTitle ?></a>
                        </div>
                        <div class="writer">
                            <a href="<?php echo $p->articleURL ?>"><?php echo $p->author ?></a>
                        </div>
                    </div>
                    <div class="ic_area">
                        <div class="float_left">
                            <a class="likes" href="#">
                                <i class="ico" aria-label="좋아요"></i>
                                <span>103</span>
                            </a>
                            <a class="comments" href="#">
                                <i class="ico" aria-label="댓글수"></i>
                                <span>29</span>
                            </a>
                        </div>

                        <div class="float_right">
                            <a href="#" class="hits">
                                <i class="ico" aria-label="조회수"></i>
                                <span>79</span>
                            </a>
                        </div>
                    </div>
                </li>
                <?php } ?>
            </ul>

        </div>
        <!--C포스트-->
        <div class="container pt30 pb30">
            <div class="titleBox">
                <ul>
                    <li><a href="#">C포스트</a></li>
                </ul>
                <div class="arrow">
                    <a href="/grace/cpost">더보기 <img src="<?php echo THEME_FOLDER ?>/img/ic-more.gif"></a>
                </div>
            </div>
            <div class="cpostBox">
                <div class="cpostMain"
                    style="background:url('<?php echo $cpost[0]->postImage ?>') no-repeat center; background-size:cover;">
                    <a href="#">
                        <div class="bg"></div>
                        <div class="tit">
                            <?php echo $cpost[0]->postTitle ?>
                        </div>
                        <div class="writer">
                            <?php echo $cpost[0]->author ?>
                        </div>
                    </a>
                </div>
                <ul class="col col5">
                    <?php foreach ($cpost as $k => $p) {
                        if (!$k || $k>6) continue; ?>
                    <li>
                        <a href="<?php echo $p->articleURL ?>">
                            <div class="tit">
                                <?php echo $p->postTitle ?>
                            </div>
                            <div class="writer">
                                <?php echo $p->author ?>
                            </div>
                            <div class="thumb">
                                <img src="<?php echo $p->postImage ?>">
                            </div>
                        </a>
                    </li>
                    <?php } ?>

                </ul>
            </div>

        </div>

        <!--운율묵상-->
        <div class="container pb30 btop">
            <div class="titleBox">
                <ul>
                    <li><a href="/grace/poem">운율묵상</a></li>
                </ul>
                <div class="arrow">
                    <a href="/grace/poem">더보기 <img src="<?php echo THEME_FOLDER ?>/img/ic-more.gif"></a>
                </div>
            </div>
            <ul class="col col5">
                <?php foreach ($poem as $k => $p) {
                        if ($k==5) break; ?>
                <li>
                    <a href="<?php echo $p->articleURL ?>">
                        <div class="tit">
                            <?php echo $p->postTitle ?>
                        </div>
                        <div class="writer">
                            <?php echo $p->author ?>
                        </div>
                        <div class="thumb">
                            <img src="<?php echo $p->postImage ?>">
                        </div>
                    </a>
                </li>
                <?php } ?>

            </ul>
        </div>

        <!--영어묵상/인기있는 은혜충전/배너-->
        <div class="grayBox">
            <div class="container">
                <div class="float_left english">

                    <div class="titleBox">
                        <ul>
                            <li><a class="blue" href="/grace/poem">운율묵상</a></li>
                        </ul>
                        <div class="arrow">
                            <a href="/grace/poem">더보기 <img src="<?php echo THEME_FOLDER ?>/img/ic-more.gif"></a>
                        </div>
                    </div>

                    <ul class="enList">
                        <?php foreach($poem as $k=>$p) { if($k<5 || $k>10)continue?>
                        <li style="min-height:90px">
                            <div class="enImg">
                                <a class="img-scaleup" href="<?php echo $p->articleURL ?>"><img
                                        src="<?php echo $p->postImage ?>" style="height:auto"></a>
                            </div>
                            <div class="des">
                                <h4><a href="<?php echo $p->articleURL ?>"><?php echo $p->postTitle ?></a></h4>
                                <p><a href="<?php echo $p->articleURL ?>"><?php echo $p->postExcerpt ?></a></p>
                                <div class="blue"><?php echo $p->author ?></div>
                            </div>
                        </li>
                        <?php }?>
                    </ul>

                </div>

                <div class="float_left popular">
                    <h5 class="blue">인기있는 은혜충전</h5>
                    <ul>
                        <?php foreach($popular as $k=>$p) { if($k==6)break?>
                        <li>
                            <div class="num"><?php echo $k+1?></div>
                            <div class="popImg">
                                <a class="img-scaleup" href="<?php echo $p->articleURL ?>"><img
                                        src="<?php echo $p->postImage ?>"></a>
                            </div>
                            <div class="tit">
                                <a href="<?php echo $p->articleURL ?>"><?php echo $p->postTitle ?></a>
                            </div>
                            <div class="blue">
                                <a href="<?php echo $p->articleURL ?>"><?php echo $p->author ?></a>
                            </div>
                        </li>
                        <?php }?>

                    </ul>

                </div>

                <div class="float_right banner">
                    <div class="ad gap-bottom-sm"><a href=""><img
                                src="https://crossmap.co.kr/files/advertisement/2019/04/b65bc12d9a44a20ea93b4680a800652c.png"
                                alt="" width="300" height="260"></a></div>
                    <div class="ad gap-bottom-sm"><a href=""><img
                                src="<?php echo THEME_FOLDER ?>/img/bn-300-webtoon.jpg" alt="" width="300"></a></div>
                    <div class="ad gap-bottom-sm"><a href=""><img src="<?php echo THEME_FOLDER ?>/img/bn-300-grace.jpg"
                                alt="" width="300"></a></div>
                </div>

            </div>
        </div>
    </main>
    <?php $this->load->view('templates/grace/grace-footer') ?>
    <?php $this->load->view('templates/grace/grace-foot') ?>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
    <script>
    $(function() {
        var slideScreenIdx = 3;
        $('.btn.next').on('click', function() {
            slideScreenIdx++;
            if (slideScreenIdx > 3) slideScreenIdx = 0
            var idx = slideScreenIdx;
            $('.flick-ct').addClass('is_disable');
            $('.pagination_square a').removeClass('on').eq(idx).addClass('on');
            $('.flick-ct').eq(idx).removeClass('is_disable').css('transform', 'translate(100%)');
            $('.flick-ct').eq(idx = ++idx > 3 ? 0 : idx).css('transform', 'translate(200%)');
            $('.flick-ct').eq(idx = ++idx > 3 ? 0 : idx).css('transform', 'translate(300%)');
            $('.flick-ct').eq(idx = ++idx > 3 ? 0 : idx).css('transform', 'translate(0%)');
        });
        $('.btn.prev').on('click', function() {
            slideScreenIdx--;
            if (slideScreenIdx < 0) slideScreenIdx = 3
            var idx = slideScreenIdx;
            $('.flick-ct').addClass('is_disable');
            $('.pagination_square a').removeClass('on').eq(idx).addClass('on');
            $('.flick-ct').eq(idx).removeClass('is_disable').css('transform', 'translate(100%)');
            $('.flick-ct').eq(idx = ++idx > 3 ? 0 : idx).css('transform', 'translate(200%)');
            $('.flick-ct').eq(idx = ++idx > 3 ? 0 : idx).css('transform', 'translate(300%)');
            $('.flick-ct').eq(idx = ++idx > 3 ? 0 : idx).css('transform', 'translate(0%)');
        })
    })
    </script>
</body>

</html>