<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.scrollzer.min.js"></script>
  <script src="js/jquery.scrolly.min.js"></script>
  <script src="js/skel.min.js"></script>
  <script src="js/skel-layers.min.js"></script>
  <script src="js/init.js"></script>
  <link rel="stylesheet" href="css/skel.css" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/style-xlarge.css" />
  <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>

<body>
  <div id="wrapper">

    <!-- Header -->
    <section id="header" class="skel-layers-fixed">
      <header>
        {{#if thumb}}
        <span class="image avatar"><img src="{{thumb}}" alt=""></span>
        {{/if}}
      </header>
      <nav id="nav">
        <ul>
          {{#if description}}
          <li>
            <a class="page-scroll" href="#about">特色及細節</a>
          </li>
          {{/if}}
          {{#multiOr location fee time}}
          <li>
            <a class="page-scroll" href="#detail">活動細節</a>
          </li>
          {{/multiOr}}
          {{#if register}}
          <li>
            <a class="page-scroll" href="#register">報名</a>
          </li>
          {{/if}}
          {{#if member.length}}
          <li>
            <a class="page-scroll" href="#member">活動成員</a>
          </li>
          {{/if}}
          {{#if unit.length}}
          <li>
            <a class="page-scroll" href="#unit">主辦單位</a>
          </li>
          {{/if}}
          {{#if sponser}}
          <li>
            <a class="page-scroll" href="#sponser">贊助商</a>
          </li>
          {{/if}}
          {{#if contact}}
          <li>
            <a class="page-scroll" href="#contact">聯絡</a>
          </li>
          {{/if}}
        </ul>
      </nav>
      <footer>
        <ul class="icons">
          {{#if twitter}}
          <li>
            <a href="http://twitter.com/{{twitter}}" class="icon fa-twitter"><span class="label">Twitter</span></a>
          </li>
          {{/if}}
          {{#if facebook}}
          <li>
            <a href="http://facebook.com/{{facebook}}" class="icon fa-facebook"><span class="label">Facebook</span></a>
          </li>
          {{/if}}
          {{#if contact.email}}
          <li>
            <a href="mailto:{{contact.email}}" class="icon fa-envelope"><span class="label">{{side-email}}</span></a>
          </li>
          {{/if}}
        </ul>
      </footer>
    </section>

    <!-- Main -->
    <div id="main">

      <!-- One -->
      <section id="about" style="background: url('{{background}}') 100% no-repeat #46B6AC;">
        <div class="container">
          <header class="major">
            {{#if act_title}}
            <h2>{{act_title}}</h2>
            {{/if}}
            {{#if act_subtitle}}
            <p>{{act_subtitle}}</p>
            {{/if}}
          </header>
        </div>
      </section>

      {{#if description.length}}
      <section id="service">
        <div class="container">
          <h3><i class="fa fa-info-circle"></i>活動特色及細節</h3>
          <hr>
          <div class="features">
            {{#each description}}
            <article>
              {{#if image}}
              <a href="#" class="image"><img src="{{image}}" alt="">
              </a>
              {{/if}}
              <div class="inner">
                {{#if detail}}
                <h2>{{detail}}</h2>
                {{/if}}
                {{#if subdetail}}
                <p>{{subdetail}}</p>
                {{/if}}
              </div>
            </article>
            {{/each}}
          </div>
        </div>
      </section>
      {{/if}}

      <section id="detail">
        <div class="container">
          <h3><i class="fa fa-info-circle"></i>活動資訊</h3>
          <hr>
          <div class="feature row">
            <div class="col-lg-8 col-lg-offset-2 text-center">
              {{#if location}}
              <div class="col-lg-12 text-center">
                <div class="row">
                  <h3 class="section-heading"><i class="fa fa-map-marker"></i>活動地點</h3>
                </div>
              </div>
              <h4 class="section-heading">{{location}}</h4>
              <hr class="divider">
              {{/if}}
              {{#if time}}
              <div class="col-lg-12 text-center">
                <div class="row">
                  <h3 class="section-heading"><i class="fa fa-calendar-o"></i>活動時間</h3>
                </div>
              </div>
              <h4 class="section-heading">{{time}}</h4>
              <hr class="divider">
              {{/if}}
              {{#if fee}}
              <div class="col-lg-12 text-center">
                <div class="row">
                  <h3 class="section-heading"><i class="fa fa-money"></i>活動費用</h3>
                </div>
              </div>
              <h4 class="section-heading">{{fee}}</h4>
              <hr class="divider">
              {{/if}}
              {{#multiOr register.detail register.link}}
              <div class="col-lg-12 text-center">
                <div class="row" id="register">
                  <h3 class="section-heading"><i class="fa fa-map-marker"></i>報名資訊</h3>
                </div>
              </div>
              {{#if register.link}}
              <h4>
                <a href="{{register.link}}" class="btn btn-primary btn-xl ">前往報名</a>
              </h4>
              {{/if}}

              {{#if register.detail}}
              <p>
                {{register.detail}}
              </p>
              {{/if}}
              {{/multiOr}}
            </div>
          </div>
        </div>
      </section>


      {{#if member.length}}
      <section id="member">
        <div class="container">
          <h3><i class="fa fa-user"></i>活動成員</h3>
          <hr>
          <div class="features container row">
            <article>
              {{#each member}}
              <div class="col-md-6 item">
                {{#if thumb}}
                <img src="{{thumb}}" alt="img" width="100%">
                {{/if}}
                {{#if name}}
                <h4>{{name}}</h4>
                {{/if}}
                {{#if description}}
                <p>{{description}}</p>
                {{/if}}
              </div>
              {{/each}}
            </article>
          </div>
        </div>
      </section>
      {{/if}}

      {{#if unit.length}}
      <section id="unit">
        <div class="container">
          <h3><i class="fa fa-users"></i>活動主辦單位</h3>
          <hr>
          <div class="features container row">
            <article>
              {{#each unit}}
              <div class="col-md-6 item">
                {{#if thumb}}
                <img src="{{thumb}}" alt="img" width="100%">
                {{/if}}
                {{#if name}}
                <h4>{{name}}</h4>
                {{/if}}
                {{#if description}}
                <p>{{description}}</p>
                {{/if}}
                {{#if link}}
                <a href="{{link}}">
                  <button class="btn">網路連結</button>
                </a>
                {{/if}}
              </div>
              {{/each}}
            </article>
          </div>
        </div>
      </section>
      {{/if}}

      {{#if sponser.length}}
      <section id="sponser">
        <div class="container">
          <h3><i class="fa fa-users"></i>活動贊助單位</h3>
          <hr>
          <div class="features container row">
            <article>
              {{#each sponser}}
              <div class="col-md-6 item">
                {{#if thumb}}
                <img src="{{thumb}}" alt="img" width="100%">
                {{/if}}
                {{#if name}}
                <h4>{{name}}</h4>
                {{/if}}
                {{#if description}}
                <p>{{description}}</p>
                {{/if}}
                {{#if link}}
                <a href="{{link}}">
                  <button class="btn">網路連結</button>
                </a>
                {{/if}}
              </div>
              {{/each}}
            </article>
          </div>
        </div>
      </section>
      {{/if}}

      {{#multiOr contact.address contact.email contact.phone}}
      <section id="contact">
        <div class="container">
          <h3 class="section-heading"><i class="fa fa-info"></i>聯絡我們</h3>
          <hr>
          <div class="features container row">
            <article>
              {{#if contact.phone}}
              <div class="col-lg-4 col-lg-offset-2 text-center">
                <i class="fa fa-phone fa-3x wow bounceIn"></i>
                <p>{{contact.phone}}</p>
              </div>
              {{/if}}
              {{#if contact.email}}
              <div class="col-lg-4 text-center">
                <i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
                <p><a href="mailto:{{contact.email}}">{{contact.email}}</a></p>
              </div>
              {{/if}}
              <div class="col-lg-8 col-lg-offset-2 text-center">
                <ul class="list-inline banner-social-buttons">
                  {{#if twitter}}
                  <li>
                    <a href="http://twitter.com/{{twitter}}" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i><span class="network-name">Twitter<span></a>
                    </li>
                    {{/if}}
                    {{#if facebook}}
                    <li>
                      <a href="http://facebook.com/{{facebook}}" class="btn btn-default btn-lg"><i class="fa fa-facebook fa-fw"></i><span class="network-name">Facebook<span></a>
                      </li>
                      {{/if}}
                    </ul>
                  </article>
                </div>
              </div>
            </section>
            {{/multiOr}}
          </div>

          <!-- Footer -->
          <section id="footer">
            <div class="container">
              <ul class="copyright">
                <li>
                  chilijung | <a href="http://canner.io/">http://canner.io</a>
                </li>
              </ul>
            </div>
          </section>

        </div>

        <script>
        $('#skel-layers-hiddenWrapper').remove();
        </script>

      </body>
      <html>
