<!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')?>
    <style>
    .graceArticle p {
        margin: 0;
        padding: 0;
    }
    </style>
</head>

<body class="grace">
    <noscript>
        <p class="enable-js">
            To enjoy our website, you'll need to enable <b>JavaScript</b> in your web browser. Please <a
                href="http://enable-javascript.com/" target="_blank"><b>click here</b></a> to learn how.
        </p>
    </noscript>
    <!--[if lte IE 8]>
  <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

    <!-- Mobile nav Overlayer -->
    <?php $this->load->view('templates/partial/nav-side')?>
    <header class="site-head--inner grace">
        <div class="logoline">
            <div class="container">
                <button class="nav-toggle" data-toggle=".nav-wrap"><img
                        src="<?php echo THEME_FOLDER?>/img/ic-menu.png"></button>
                <div class="logo"><a href="/"><img src="<?php echo THEME_FOLDER?>/img/cm-symbol.gif" alt="크로스맵"></a><a
                        href="/grace">은혜충전</a>
                </div>
                <div class="login">
                    <?php $this->load->view('templates/partial/login-btn-top')?>
                </div>
            </div>
        </div>
        </div>

        <div class="graceHeader">
            <div class="wrap_cover">

                <div class="cover_image"
                    style="background: url(https://crossmap.co.kr/files/channel/2018/05/0de274a6aaf90941244bc51a1833f210.jpg) no-repeat left top; display: block;background-size: cover;height:310px;background-position: 50% 50%;">
                </div>
                <div class="cover_inner"></div>

                <div class="wrap_channel">
                    <div class="cover_cell">
                        <div>
                            <p style="margin-bottom:15px;"><span
                                    style="background: url('https://crossmap.co.kr/img/web/bgbg3.png') repeat-x left bottom;  padding-bottom:8px;"><a
                                        href="#"><?php echo $post->pageTitle?></a> <img
                                        src="https://crossmap.co.kr/img/web/bg5.gif" style="padding: 2px 5px 0 5px;"> <a
                                        href="#"><?php echo $post->categoryTitle?></a></span></p>
                        </div>
                        <h2 class="chtit"><?php echo $post->postTitle?></h2>
                        <p class="chdate">조회 <?php echo rand(200, 300)?><span
                                style="padding:0 10px;">|</span><?php echo $post->datePosted?> </p>

                    </div>

                    <div class="cover_profile">
                        <div
                            style="background:url('<?php echo getImageUrl($post->pageIcon)?>') no-repeat center; background-size:cover;">
                        </div>
                    </div>

                </div>
            </div>
            <p class="cheditor"><a href="/web/life/editor/3"><?php echo $post->userName?></a></p>
        </div>

    </header>

    <main id="main" role="main" tabindex="-1">
        <div class="container articleBox">
            <div class="graceArticle">

                <div class="imgCenter">
                    <?php echo $post->postContentHTML?>
                    <?php if($video) {?>
                    <iframe width="730" height="410" src="<?php echo $video->videoURL?>" frameborder="0"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
                    <?php }?>
                </div>
            </div>
        </div>
        <!--관련글-->
        <div class="container relatedBox cm-grace-article-related">
            <div class="titleBox">
                <ul>
                    <li><a href="#">관련글</a></li>
                </ul>
                <div class="arrow">
                    <a href="#">목록보기</a>
                </div>
            </div>
            <ul class="col col4 col4-3 cm-grace-article-slide current" tabindex="0">
                <?php foreach($related 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>
            <ul class="col col4 col4-3 cm-grace-article-slide" style="display:none" tabindex="1">
                <?php foreach($related as $k=>$p) { if($k<4 || $k==8)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>
            <ul class="col col4 col4-3 cm-grace-article-slide" style="display:none" tabindex="2">
                <?php foreach($related as $k=>$p) { if($k<8 || $k==12)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 class="arrowPrev"><i class="fas fa-chevron-left"></i></div>
            <div class="arrowNext"><i class="fas fa-chevron-right"></i></div>
        </div>

        <!--Comment-->
        <div class="container pt30 pb30">
            <div class="comment">
                <?php $this->load->view('templates/partial/comment')?>
            </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>
        </div>
        <!--인기태그-->
        <div class="tagImg">
            <div class="container">
                <div class="titleBox">
                    <a href="#">인기태그</a>
                </div>
                <ul>
                    <li>
                        <a href="/grace/">
                            <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>

        <!--말씀카드-->
        <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>

        <!--운율묵상-->
        <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>
    </main>

    <?php $this->load->view('templates/grace/grace-footer')?>
    <?php $this->load->view('templates/grace/grace-foot')?>
</body>

</html>