index.html

---
layout: default
---

<section class="section section-top-banner">
    <span class="top-title">CCL 이해하기 캠페인</span>
    <div class="centered">
        <img src="/images/home/yaksok.png" alt="약속">
        <h1 class="title">조건만 지키고<br class="visible-xs"> 제꺼 자유롭게 쓰세요!</h1>
        <p class="description">CC라이선스는 내가 만든 컨텐츠를 다른 사람들이<br>자유롭게 이용할 수 있도록 돕습니다.</p>
    </div>
</section>

<section class="section section-shortcut">
    <h1 class="sr-only">바로가기</h1>
    <ul class="list-shortcut">
    {% for shortcut in site.data.shortcuts %}
        <li class="bg_{{ shortcut.bg }}">
            <a href="{{ shortcut.url }}" title="{{ shortcut.title }}">
                <div class="centered">
                    <div class="img">
                        <img src="/images/home/ico-shortcut{{ shortcut.img }}.png">
                    </div>
                    <h2 class="title">{{ shortcut.title }}</h2>
                    <span class="read-more">more</span>
                </div>
            </a>
        </li>
    {% endfor %}
</section><!-- .section-shortcut -->


<section class="section section-banner">
    <h1 class="sr-only">링크</h1>
    <ul class="list-banner">
        {% for banner in site.data.banners %}
        <li class="{% if banner.bg %}bg_{{ banner.bg }}{% endif %}{% if site.data.banners.size < 2 %} full{% endif %}">
            <a target="_blank" href="{{ banner.url }}" title="{{ banner.title | strip_html }}">
                <h2 class="title">{{ banner.title }}</h2>
            </a>
        </li>
        {% endfor %}
    </ul>
</section><!-- .section-banner -->


<section class="section section-case">
    <h1 class="sr-only">활용사례</h1>
    <ul class="list-case">
    {% for showcase in site.data.showcases limit:site.paging_front_showcases %}
        <li{% if showcase.type %} class="{{ showcase.type }}"{% endif %}>
            <a href="{{ showcase.url }}" title="{{ showcase.title | strip_html | strip_newlines }}">
                <div class="img">
                    <img src="{% if showcase.img contains 'http://' or showcase.img contains 'https://' %}{{ showcase.img }}{% else %}/media/{{ showcase.img }}{% endif %}" alt="{{ showcase.title | strip_html | strip_newlines }}">
                </div>
                <div class="desc">
                    <em>활용사례 #{{ forloop.index }}</em>
                    <h2 class="title">
                        {{ showcase.title }}
                    </h2>
                </div>
            </a>
        </li>
    {% endfor %}
        <li><a href="/front/showcase/2/" class="jscroll-next">2</a></li>
    </ul>


</section><!-- .section-case -->

<section class="section section-about">
    <p>본 캠페인은 한국복제전송저작권협회의 2015 미분배보상금 공익 목적 사업의 후원으로 진행됩니다.</p>
</section>

<script src="//cdn.jsdelivr.net/jquery.jscroll/2.2.4/jquery.jscroll.min.js"></script>
<script>
    function neueFade() {
        $(this).hide().fadeIn(2000);
    };
    $('.section-case').jscroll({
        loadingHtml: '<div class="text-center"><p><img src="/images/loader.gif" alt="" style="width: 40px;"></p></div>',
        padding: 0,
        nextSelector: 'a.jscroll-next:last',
        contentSelector: 'ul.list-case',
        autoTrigger: true,
        callback: neueFade
    });
</script>